Skip to content

Commit

Permalink
update nextjs template for cartesi core implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
gconnect committed May 26, 2024
1 parent 9b47c3e commit 76ea8e5
Show file tree
Hide file tree
Showing 37 changed files with 5,283 additions and 14,433 deletions.
1 change: 1 addition & 0 deletions apps/frontend/next-app/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_WALLECT_CONNECT_PROJECT_ID = YOUR_PROJECT_ID
30 changes: 30 additions & 0 deletions apps/frontend/next-app/app/GraphqlClient.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
"use client"
import { useMemo } from 'react';
import {
UrqlProvider,
ssrExchange,
cacheExchange,
fetchExchange,
createClient,
} from '@urql/next';

// YOUR API URL
const API_BASE_URL = 'http://localhost:8080/graphql'

export default function GraphQLClient({ children }: React.PropsWithChildren) {
const [client, ssr] = useMemo(() => {
const ssr = ssrExchange({
isClient: typeof window !== 'undefined',
});
const client = createClient({
url: API_BASE_URL,
exchanges: [cacheExchange, ssr, fetchExchange],
suspense: true,
});

return [client, ssr];
}, []);

return {client, ssr}
}

3 changes: 2 additions & 1 deletion apps/frontend/next-app/app/cartesi/GraphQL.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
import { useSetChain } from "@web3-onboard/react";
import React, { useMemo } from "react";
import { Client, createClient, Provider } from "urql";

import { Chain } from "viem";
// import { Chain } from "@rainbow-me/rainbowkit";
import configFile from "./config.json";

const config: any = configFile;
Expand Down
16 changes: 8 additions & 8 deletions apps/frontend/next-app/app/cartesi/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const Input: React.FC<IInputPropos> = (propos) => {
const addInput = async (str: string) => {
if (rollups) {
try {
let payload = ethers.utils.toUtf8Bytes(str);
let payload = ethers.toUtf8Bytes(str);
if (hexInput) {
payload = ethers.utils.arrayify(str);
}
Expand All @@ -54,7 +54,7 @@ export const Input: React.FC<IInputPropos> = (propos) => {
const depositErc20ToPortal = async (token: string,amount: number) => {
try {
if (rollups && provider) {
const data = ethers.utils.toUtf8Bytes(`Deposited (${amount}) of ERC20 (${token}).`);
const data = ethers.toUtf8Bytes(`Deposited (${amount}) of ERC20 (${token}).`);
//const data = `Deposited ${args.amount} tokens (${args.token}) for DAppERC20Portal(${portalAddress}) (signer: ${address})`;
const signer = provider.getSigner();
const signerAddress = await signer.getAddress()
Expand All @@ -64,9 +64,9 @@ export const Input: React.FC<IInputPropos> = (propos) => {

// query current allowance
const currentAllowance = await tokenContract.allowance(signerAddress, erc20PortalAddress);
if (ethers.utils.parseEther(`${amount}`) > currentAllowance) {
if (ethers.parseEther(`${amount}`) > currentAllowance) {
// Allow portal to withdraw `amount` tokens from signer
const tx = await tokenContract.approve(erc20PortalAddress, ethers.utils.parseEther(`${amount}`));
const tx = await tokenContract.approve(erc20PortalAddress, ethers.parseEther(`${amount}`));
const receipt = await tx.wait(1);
const event = (await tokenContract.queryFilter(tokenContract.filters.Approval(), receipt.blockHash)).pop();
if (!event) {
Expand All @@ -84,8 +84,8 @@ export const Input: React.FC<IInputPropos> = (propos) => {
const depositEtherToPortal = async (amount: number) => {
try {
if (rollups && provider) {
const data = ethers.utils.toUtf8Bytes(`Deposited (${amount}) ether.`);
const txOverrides = {value: ethers.utils.parseEther(`${amount}`)}
const data = ethers.toUtf8Bytes(`Deposited (${amount}) ether.`);
const txOverrides = {value: ethers.parseEther(`${amount}`)}

// const tx = await ...
rollups.etherPortalContract.depositEther(propos.dappAddress,data,txOverrides);
Expand All @@ -98,7 +98,7 @@ export const Input: React.FC<IInputPropos> = (propos) => {
const transferNftToPortal = async (contractAddress: string,nftid: number) => {
try {
if (rollups && provider) {
const data = ethers.utils.toUtf8Bytes(`Deposited (${nftid}) of ERC721 (${contractAddress}).`);
const data = ethers.toUtf8Bytes(`Deposited (${nftid}) of ERC721 (${contractAddress}).`);
//const data = `Deposited ${args.amount} tokens (${args.token}) for DAppERC20Portal(${portalAddress}) (signer: ${address})`;
const signer = provider.getSigner();
const signerAddress = await signer.getAddress()
Expand Down Expand Up @@ -130,7 +130,7 @@ export const Input: React.FC<IInputPropos> = (propos) => {
const transferErc1155SingleToPortal = async (contractAddress: string, id: number, amount: number) => {
try {
if (rollups && provider) {
const data = ethers.utils.toUtf8Bytes(`Deposited (${amount}) tokens from id (${id}) of ERC1155 (${contractAddress}).`);
const data = ethers.toUtf8Bytes(`Deposited (${amount}) tokens from id (${id}) of ERC1155 (${contractAddress}).`);
//const data = `Deposited ${args.amount} tokens (${args.token}) for DAppERC20Portal(${portalAddress}) (signer: ${address})`;
const signer = provider.getSigner();
const signerAddress = await signer.getAddress()
Expand Down
25 changes: 14 additions & 11 deletions apps/frontend/next-app/app/cartesi/Inspect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,34 @@
import React, { useState } from "react";
import { useSetChain } from "@web3-onboard/react";
import { ethers } from "ethers";
// import { useRollups } from "./useRollups";

import configFile from "../config.json";
import { useRollups } from "./useRollups";
import { useAccount } from "wagmi";
import configFile from "../cartesi/config.json";
import { DAPP_ADDRESS } from "../utils/constants";
import { toHex } from "viem";

const config: any = configFile;

export const Inspect: React.FC = () => {
// const rollups = useRollups();
const [{ connectedChain }] = useSetChain();
const rollups = useRollups(DAPP_ADDRESS);
const { chain } = useAccount();

const inspectCall = async (str: string) => {
let payload = str;
if (hexData) {
const uint8array = ethers.utils.arrayify(str);
payload = new TextDecoder().decode(uint8array);
}
if (!connectedChain){
if (!chain){
return;
}

let apiURL= ""

if(config[connectedChain.id]?.inspectAPIURL) {
apiURL = `${config[connectedChain.id].inspectAPIURL}/inspect`;
if(config[toHex(chain.id)]?.inspectAPIURL) {
apiURL = `${config[toHex(chain.id)].inspectAPIURL}/inspect`;
} else {
console.error(`No inspect interface defined for chain ${connectedChain.id}`);
console.error(`No inspect interface defined for chain ${toHex(chain.id)}`);
return;
}

Expand Down Expand Up @@ -90,7 +93,7 @@ export const Inspect: React.FC = () => {
<td>{metadata.metadata ? metadata.metadata.active_epoch_index : ""}</td>
<td>{metadata.metadata ? metadata.metadata.current_input_index : ""}</td>
<td>{metadata.status}</td>
<td>{metadata.exception_payload ? ethers.utils.toUtf8String(metadata.exception_payload): ""}</td>
<td>{metadata.exception_payload ? ethers.toUtf8String(metadata.exception_payload): ""}</td>
</tr>
</tbody>
</table>
Expand All @@ -104,7 +107,7 @@ export const Inspect: React.FC = () => {
)}
{reports?.map((n: any) => (
<tr key={`${n.payload}`}>
<td>{ethers.utils.toUtf8String(n.payload)}</td>
<td>{ethers.toUtf8String(n.payload)}</td>
</tr>
))}
</tbody>
Expand Down
109 changes: 109 additions & 0 deletions apps/frontend/next-app/app/cartesi/Notices copy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
"use client"
// Copyright 2022 Cartesi Pte. Ltd.

// Licensed under the Apache License, Version 2.0 (the "License"); you may not
// use this file except in compliance with the License. You may obtain a copy
// of the license at http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations
// under the License.

import { ethers } from "ethers";
import React, {useEffect} from "react";

import { useNoticesQuery } from "../cartesi/generated/graphql";

type Notice = {
id: string;
index: number;
input: any, //{index: number; epoch: {index: number; }
payload: string;
};

export const Notices: React.FC = () => {
const [result,reexecuteQuery] = useNoticesQuery();
const { data, fetching, error } = result;

useEffect(() => {
reexecuteQuery({ requestPolicy: 'network-only' });
}, [reexecuteQuery]);

if (fetching) return <p>Loading...</p>;
if (error) return <p>Oh no... {error.message}</p>;

if (!data || !data.notices) return <p>No notices</p>;

const notices: Notice[] = data.notices.edges.map((node: any) => {
const n = node.node;
let inputPayload = n?.input.payload;
if (inputPayload) {
try {
inputPayload = ethers.toUtf8String(inputPayload);
} catch (e) {
inputPayload = inputPayload + " (hex)";
}
} else {
inputPayload = "(empty)";
}
let payload = n?.payload;
if (payload) {
try {
payload = ethers.toUtf8String(payload);
} catch (e) {
payload = payload + " (hex)";
}
} else {
payload = "(empty)";
}
return {
id: `${n?.id}`,
index: parseInt(n?.index),
payload: `${payload}`,
input: n ? {index:n.input.index,payload: inputPayload} : {},
};
}).sort((b: any, a: any) => {
if (a.input.index === b.input.index) {
return b.index - a.index;
} else {
return b.input.index - a.input.index;
}
});

// const forceUpdate = useForceUpdate();
return (
<div>
<button className="text-slate-400" onClick={() => reexecuteQuery({ requestPolicy: 'network-only' })}>
Reload
</button>
<table className="text-slate-400 border">
<thead>
<tr className="border">
<th className="border p-2">Input Index</th>
<th className="border p-2">Notice Index</th>
{/* <th>Input Payload</th> */}
<th className="border p-2">Payload</th>
</tr>
</thead>
<tbody>
{notices.length === 0 && (
<tr>
<td className="p-4" colSpan={4}>no notices</td>
</tr>
)}
{notices.map((n: any) => (
<tr key={`${n.input.index}-${n.index}`}>
<td>{n.input.index}</td>
<td>{n.index}</td>
{/* <td>{n.input.payload}</td> */}
<td>{n.payload}</td>
</tr>
))}
</tbody>
</table>

</div>
);
};
25 changes: 15 additions & 10 deletions apps/frontend/next-app/app/cartesi/Notices.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
// under the License.

import { ethers } from "ethers";
import React from "react";
import React, {useEffect} from "react";

import { useNoticesQuery } from "../cartesi/generated/graphql";

type Notice = {
Expand All @@ -26,6 +27,10 @@ export const Notices: React.FC = () => {
const [result,reexecuteQuery] = useNoticesQuery();
const { data, fetching, error } = result;

useEffect(() => {
reexecuteQuery({ requestPolicy: 'network-only' });
}, [reexecuteQuery]);

if (fetching) return <p>Loading...</p>;
if (error) return <p>Oh no... {error.message}</p>;

Expand All @@ -36,7 +41,7 @@ export const Notices: React.FC = () => {
let inputPayload = n?.input.payload;
if (inputPayload) {
try {
inputPayload = ethers.utils.toUtf8String(inputPayload);
inputPayload = ethers.toUtf8String(inputPayload);
} catch (e) {
inputPayload = inputPayload + " (hex)";
}
Expand All @@ -46,7 +51,7 @@ export const Notices: React.FC = () => {
let payload = n?.payload;
if (payload) {
try {
payload = ethers.utils.toUtf8String(payload);
payload = ethers.toUtf8String(payload);
} catch (e) {
payload = payload + " (hex)";
}
Expand All @@ -70,22 +75,22 @@ export const Notices: React.FC = () => {
// const forceUpdate = useForceUpdate();
return (
<div>
<button onClick={() => reexecuteQuery({ requestPolicy: 'network-only' })}>
<button className="text-slate-400" onClick={() => reexecuteQuery({ requestPolicy: 'network-only' })}>
Reload
</button>
<table>
<table className="text-slate-400 border">
<thead>
<tr>
<th>Input Index</th>
<th>Notice Index</th>
<tr className="border">
<th className="border p-2">Input Index</th>
<th className="border p-2">Notice Index</th>
{/* <th>Input Payload</th> */}
<th>Payload</th>
<th className="border p-2">Payload</th>
</tr>
</thead>
<tbody>
{notices.length === 0 && (
<tr>
<td colSpan={4}>no notices</td>
<td className="p-4" colSpan={4}>no notices</td>
</tr>
)}
{notices.map((n: any) => (
Expand Down
Loading

0 comments on commit 76ea8e5

Please sign in to comment.