Merge pull request #9 from zCloak-Network/feat-add-support-chain

Feat add support chain
zCloak-Network · Feb 21, 2024 · ba77fb2 · ba77fb2
2 parents 22730df + 9cd8535
commit ba77fb2
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 115 deletions.
diff --git a/.env.development b/.env.development
@@ -1,4 +1,3 @@
 NODE_ENV=development
 
-VITE_APP_CONTRACT_ADDRESS=0xce68617D6575EDe95aF1eAaC7489b06F3b107D9f
 VITE_APP_CANISTERID=7n7be-naaaa-aaaag-qc4xa-cai
diff --git a/.env.production b/.env.production
@@ -1,4 +1,3 @@
 NODE_ENV=production
 
-VITE_APP_CONTRACT_ADDRESS=0xce68617D6575EDe95aF1eAaC7489b06F3b107D9f
 VITE_APP_CANISTERID=7n7be-naaaa-aaaag-qc4xa-cai
diff --git a/src/constants/chain.ts b/src/constants/chain.ts
@@ -39,3 +39,24 @@ export const L3Dev = {
     },
   },
 } as const satisfies Chain;
+
+export const ContractAddressMap: Record<number, `0x${string}`> = {
+  421614: "0xce68617D6575EDe95aF1eAaC7489b06F3b107D9f", //arbitrumSepolia
+  11155420: "0x0483e88cd38cccb71c9c1020faf830d905542d09", //optimismSepolia
+  84532: "0x0483e88cd38cccb71c9c1020faf830d905542d09", //baseSepolia
+};
+
+export const FaucetMap: Record<number, Record<string, string>[]> = {
+  421614: [
+    { "Faucet by Alchemy": "https://www.alchemy.com/faucets/arbitrum-sepolia" },
+    { "Faucet by QuickNode": "https://faucet.quicknode.com/arbitrum/sepolia/" },
+  ],
+  11155420: [
+    { "Faucet by Alchemy": "https://www.alchemy.com/faucets/optimism-sepolia" },
+    { "Faucet by QuickNode": "https://faucet.quicknode.com/optimism/sepolia" },
+  ],
+  84532: [
+    { "Faucet by Alchemy": "https://www.alchemy.com/faucets/base-sepolia" },
+    { "Faucet by QuickNode": "https://faucet.quicknode.com/base/sepolia" },
+  ],
+};
diff --git a/src/hooks/ctx/Wagmi.tsx b/src/hooks/ctx/Wagmi.tsx
@@ -2,7 +2,12 @@ import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
 
 import { WagmiProvider } from "wagmi";
-import { arbitrumSepolia, type Chain } from "wagmi/chains";
+import {
+  arbitrumSepolia,
+  baseSepolia,
+  optimismSepolia,
+  type Chain,
+} from "wagmi/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 // 0. Setup queryClient
@@ -19,7 +24,12 @@ const metadata = {
   icons: ["https://avatars.githubusercontent.com/u/37784886"],
 };
 
-const chains = [arbitrumSepolia] as [Chain, ...Chain[]];
+// eslint-disable-next-line react-refresh/only-export-components
+export const chains = [arbitrumSepolia, baseSepolia, optimismSepolia] as [
+  Chain,
+  ...Chain[]
+];
+
 const config = defaultWagmiConfig({
   chains, // required
   projectId, // required
@@ -31,11 +41,13 @@ const config = defaultWagmiConfig({
 });
 
 // 3. Create modal
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 createWeb3Modal({
   wagmiConfig: config,
   projectId,
   chains,
   themeMode: "light",
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } as any);
 
 export function Web3Modal({ children }: { children: React.ReactNode }) {

diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx
@@ -16,8 +16,9 @@ import {
   RESULT_MAP,
   RESULT_COLOR_MAP,
   idlFactory,
+  FaucetMap,
 } from "@/constants";
-import { Chain } from "../_utils";
+import { useCurrentChain, useEVMContractAddress } from "../_utils";
 import * as myWorker from "../_utils/zkpWorker.ts";
 import { useWriteContract } from "wagmi";
 import { useStateStore } from "@/store";
@@ -33,6 +34,7 @@ import {
   Transaction,
 } from "@solana/web3.js";
 import useSolana from "../_utils/useSolana.ts";
+
 const VerifyPayloadSchema: borsh.Schema = {
   struct: {
     program_hash: "string",
@@ -47,15 +49,15 @@ const agent = new HttpAgent({ fetch, host: "https://ic0.app" });
 const canisterId = import.meta.env.VITE_APP_CANISTERID;
 const actor = Actor.createActor(idlFactory, { agent, canisterId });
 
-const ContractAddress = import.meta.env.VITE_APP_CONTRACT_ADDRESS;
-
 export const GameOver = ({
   onRefresh,
   onExit,
 }: {
   onRefresh: () => void;
   onExit: () => void;
 }) => {
+  const ContractAddress = useEVMContractAddress();
+
   const balanceData = useRef<bigint>(0n);
   const { address } = useAccount();
   const { data: blockNumber } = useBlockNumber({ watch: true });
@@ -72,6 +74,8 @@ export const GameOver = ({
     }
   }, [balance]);
 
+  const Chain = useCurrentChain();
+
   const { path } = gameState;
   const [step, setStep] = useState(0);
   const [zkpResult, setZkpResult] = useState<string | undefined>();
@@ -102,10 +106,7 @@ export const GameOver = ({
   const [solanaContractSuccess, setSolanaContractSuccess] = useState(false);
 
   useEffect(() => {
-    if (
-      network === "arbitrum-sepolia" &&
-      contractResult?.status === "success"
-    ) {
+    if (network !== "solana" && contractResult?.status === "success") {
       console.log("onRefresh contractResult", contractResult);
       onRefresh?.();
     } else if (network === "solana" && solanaContractSuccess) {
@@ -183,9 +184,7 @@ export const GameOver = ({
       prefix: "$",
       hideLoading: true,
       content: [
-        `Post game result to ${
-          network === "solana" ? "Solana" : "Arbitrum Sepolia"
-        }?`,
+        `Post game result to ${network === "solana" ? "Solana" : Chain?.name}?`,
         <>
           {userSelect.current !== false && (
             <button
@@ -230,27 +229,26 @@ export const GameOver = ({
     {
       prefix: "$",
       content: [
-        network === "arbitrum-sepolia"
+        network !== "solana"
           ? "Minimum 0.002 ETH required."
           : "Minimum 0.00003 SOL required.",
-        network === "arbitrum-sepolia" ? (
+        network !== "solana" ? (
           <>
-            <button
-              className="rounded-none text-warning btn btn-xs btn-ghost"
-              onClick={() => {
-                window.open("https://arbitrum-faucet.com/");
-              }}
-            >
-              [Faucet by Alchemy]
-            </button>
-            <button
-              className="rounded-none text-warning btn btn-xs btn-ghost"
-              onClick={() => {
-                window.open("https://faucet.quicknode.com/arbitrum/sepolia/");
-              }}
-            >
-              [Faucet by QuickNode]
-            </button>
+            {Chain?.id && FaucetMap[Chain?.id]
+              ? FaucetMap[Chain?.id].map((obj, index) => {
+                  return (
+                    <button
+                      key={index}
+                      className="rounded-none text-warning btn btn-xs btn-ghost"
+                      onClick={() => {
+                        window.open(Object.entries(obj)[0]?.[1]);
+                      }}
+                    >
+                      [{Object.entries(obj)[0]?.[0]}]
+                    </button>
+                  );
+                })
+              : null}
           </>
         ) : (
           <>
@@ -322,12 +320,11 @@ export const GameOver = ({
     {
       prefix: ">",
       content: [
-        `Post verification to ${
-          network === "solana" ? "Solana" : "Arbitrum Sepolia"
-        }`,
+        `Post verification to ${network === "solana" ? "Solana" : Chain?.name}`,
       ],
       class: "text-success",
       run: () => {
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
         return new Promise((resolve, reject) => {
           console.log(
             "3/4:",
@@ -336,13 +333,13 @@ export const GameOver = ({
             publicInputHash,
             outputVec
           );
-          if (network === "arbitrum-sepolia") {
+          if (network !== "solana") {
             try {
               void writeContractAsync({
                 address: ContractAddress,
                 abi: ABI,
                 functionName: "verifyECDSASignature",
-                chainId: Chain.id,
+                chainId: Chain?.id,
                 args: [
                   `0x${signature}`,
                   programHash,
@@ -374,7 +371,7 @@ export const GameOver = ({
                 }
               }
             }
-          } else if (network === "solana") {
+          } else {
             try {
               if (!publicKey) throw new Error("Wallet not connected!");
               const mint = {
@@ -578,8 +575,8 @@ export const GameOver = ({
               className="rounded-none text-success btn btn-xs btn-ghost"
               onClick={() =>
                 window.open(
-                  network === "arbitrum-sepolia"
-                    ? `${Chain.blockExplorers.default.url}/tx/${transactionHash}`
+                  network !== "solana"
+                    ? `${Chain?.blockExplorers?.default.url}/tx/${transactionHash}`
                     : `https://solscan.io/tx/${transactionHash}?cluster=devnet`
                 )
               }