Update Deployed Resolver UI

ensdomains · May 1, 2024 · a5e1d03 · a5e1d03
1 parent c063c0c
commit a5e1d03
Show file tree

Hide file tree

Showing 13 changed files with 7,104 additions and 2,852 deletions.
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -35,4 +35,4 @@
             }
         ]
     }
-}
+}
diff --git a/web/components/molecules/ContractOrGateway.tsx b/web/components/molecules/ContractOrGateway.tsx
@@ -1,30 +1,45 @@
-import { FC, useState } from "react";
 import { motion } from 'framer-motion';
-import { cx } from "util/cx";
-
-export const ContractOrRegister: FC<{ value: number, setValue: (value: number) => void }> = ({ value, setValue }) => {
+import { cx } from 'node:util/cx';
+import { FC } from 'react';
 
+export const ContractOrRegister: FC<{
+    value: number;
+    setValue: (value: number) => void;
+}> = ({ value, setValue }) => {
     return (
         <div className="bg-white border rounded-md w-full h-12 flex relative p-1 overflow-hidden">
             <div className="relative h-full w-full flex justify-around text-white">
-                <motion.div className="bg-ens-blue h-full w-[49%] rounded-md absolute left-0"
+                <motion.div
+                    className="bg-ens-blue h-full w-[49%] rounded-md absolute left-0"
                     animate={{ x: value === 0 ? 0 : '100%' }}
+                ></motion.div>
+                <div
+                    className={cx(
+                        'z-10 w-full h-full flex items-center justify-center font-bold',
+                        value == 0
+                            ? 'text-white'
+                            : 'text-ens-blue cursor-pointer'
+                    )}
+                    onClick={() => {
+                        setValue(0);
+                    }}
                 >
-                </motion.div>
-                <div className={cx("z-10 w-full h-full flex items-center justify-center font-bold", value == 0 ? 'text-white' : 'text-ens-blue cursor-pointer')} onClick={() => {
-                    setValue(0);
-                }}>
                     Contract
                 </div>
-                <div className={cx("z-10 w-full h-full flex items-center justify-center font-bold", value == 1 ? 'text-white' : 'text-ens-blue cursor-pointer')}
-                    onClick={
-                        () => {
-                            setValue(1);
-                        }
-                    }>
+                <div
+                    className={cx(
+                        'z-10 w-full h-full flex items-center justify-center font-bold',
+                        value == 1
+                            ? 'text-white'
+                            : 'text-ens-blue cursor-pointer'
+                    )}
+                    onClick={() => {
+                        setValue(1);
+                    }}
+                >
                     Gateway
                 </div>
             </div>
         </div>
-    )
+    );
 };
diff --git a/web/components/organisms/BannerCard.tsx b/web/components/organisms/BannerCard.tsx
@@ -1,16 +1,16 @@
-import { Card } from "@ensdomains/thorin";
-import { FC } from "react";
+import { Card } from '@ensdomains/thorin';
+import { FC } from 'react';
 
 export const BannerCard: FC = () => {
-
     return (
         <Card className="leading-6">
             <div>
                 <h2 className="font-bold">Welcome to CCIP Tools</h2>
                 <p className="text-neutral-700 mt-2">
-                    This page contains tooling to let you easily deploy and manage Offchain Resolvers for your ENS names.
+                    This page contains tooling to let you easily deploy and
+                    manage Offchain Resolvers for your ENS names.
                 </p>
             </div>
         </Card>
-    )
+    );
 };
diff --git a/web/components/organisms/CheckName.tsx b/web/components/organisms/CheckName.tsx
@@ -1,9 +1,7 @@
-import { Card, Input, Button } from '@ensdomains/thorin';
-import { namehash } from 'viem/ens';
-import { FC, useReducer, useState } from 'react';
+import { Button, Card, Input } from '@ensdomains/thorin';
+import { FC, useReducer } from 'react';
 import { useForm } from 'react-hook-form';
-import { ENS_Resolver_ABI } from '../../pages/abi/resolver_abi.js';
-import { useContractRead, useEnsName, useProvider } from 'wagmi';
+import { useProvider } from 'wagmi';
 
 type FormValues = {
     name: string;
@@ -14,14 +12,17 @@ export const CheckName: FC = () => {
         mode: 'onChange',
         defaultValues: {
             name: 'vitalik.eth',
-        }
+        },
     });
 
     const provider = useProvider();
 
-    const [loading, setLoading] = useReducer((loading: number, action: 'incr' | 'decr') => {
-        return action === 'incr' ? loading + 1 : loading - 1;
-    }, 0);
+    const [loading, setLoading] = useReducer(
+        (loading: number, action: 'incr' | 'decr') => {
+            return action === 'incr' ? loading + 1 : loading - 1;
+        },
+        0
+    );
 
     const onSubmit = handleSubmit(async ({ name }) => {
         setLoading('incr');
@@ -40,7 +41,11 @@ export const CheckName: FC = () => {
             <form onSubmit={onSubmit}>
                 <h2 className="font-bold">CheckName</h2>
                 <div className="flex flex-col gap-4 mt-2">
-                    <Input label="" placeholder="vitalik.eth" {...register('name')} />
+                    <Input
+                        label=""
+                        placeholder="vitalik.eth"
+                        {...register('name')}
+                    />
                     <Button type="submit" loading={loading > 0}>
                         Check
                     </Button>

diff --git a/web/components/organisms/Configuration.tsx b/web/components/organisms/Configuration.tsx
@@ -1,7 +1,8 @@
 import { Card, Input } from '@ensdomains/thorin';
-import { ContractOrRegister } from '../molecules/ContractOrGateway';
 import { FC, useState } from 'react';
 
+import { ContractOrRegister } from '../molecules/ContractOrGateway';
+
 export const Configuration: FC = () => {
     const [selected, setSelected] = useState(0);
 
@@ -12,20 +13,19 @@ export const Configuration: FC = () => {
 
             <ContractOrRegister value={selected} setValue={setSelected} />
 
-            {
-                selected === 0 && (
-                    <>
-                        <Input label="Resolver Address" placeholder="0x..." />
-                    </>
-                )
-            }
-            {
-                selected === 1 && (
-                    <>
-                        <Input label="Gateway Url" placeholder="http://localhost:3000" />
-                    </>
-                )
-            }
+            {selected === 0 && (
+                <>
+                    <Input label="Resolver Address" placeholder="0x..." />
+                </>
+            )}
+            {selected === 1 && (
+                <>
+                    <Input
+                        label="Gateway Url"
+                        placeholder="http://localhost:3000"
+                    />
+                </>
+            )}
         </Card>
     );
 };
diff --git a/...nents/organisms/deploy/DeployResolver.tsx → ...nts/organisms/deploy/DeploySOResolver.tsx b/...nents/organisms/deploy/DeployResolver.tsx → ...nts/organisms/deploy/DeploySOResolver.tsx
@@ -2,8 +2,8 @@ import { Button, Card, FlameSVG, GasPumpSVG, Input, OutlinkSVG, WalletSVG } from
 import { useChains, useModal } from "connectkit";
 import { FactoryABI } from "../../../pages/abi/factory_abi";
 import { FC, useEffect, useMemo, useState } from "react";
-import { Address, useAccount, useChainId, useContractWrite, useFeeData, usePrepareContractWrite, useWaitForTransaction } from "wagmi";
-import { formatEther } from "viem";
+import { useAccount, useChainId, useSimulateContract, useWriteContract } from "wagmi";
+import { Address, formatEther } from "viem";
 import { useDeployedResolvers } from "../../../stores/deployed_resolvers";
 
 // https url that must include '{sender}'
@@ -40,6 +40,8 @@ const deployments: Record<number, {
     }
 }
 
+// Component that deploys the Simple Offchain Resolver\
+// This resolver signs its output with a public private key-pair.
 export const DeployResolverCard: FC = () => {
     const { isConnected } = useAccount();
     const chainId = useChainId();
@@ -54,55 +56,54 @@ export const DeployResolverCard: FC = () => {
 
     const factoryAddress = deployments[chainId]?.factory;
 
-    const { data: FeeData } = useFeeData({ chainId, formatUnits: chainId == 5 ? 'kwei' : 'gwei' });
-
     const { transactions, logTransaction, logTransactionSuccess } = useDeployedResolvers();
 
-    const { config, data: EstimateData, error, isSuccess, isLoading } = usePrepareContractWrite({
+    const { data: EstimateData, error, isSuccess, isLoading } = useSimulateContract({
         address: factoryAddress,
         chainId,
         functionName: 'createOffchainResolver',
         args: [gatewayUrl, signersToArray(signers)],
         abi: FactoryABI,
-        enabled: isReady,
+        // enabled: isReady,
     });
-    const { write, data } = useContractWrite(config);
-    const receipt = useWaitForTransaction(data);
 
-    const gas = useMemo(() => {
-        if (!EstimateData) return null;
-        if (!FeeData) return null;
-        if (!FeeData.gasPrice) return null;
+    // const { write, data } = useContractWrite(config);
+    // const receipt = useWaitForTransaction(data);
+
+    // const gas = useMemo(() => {
+    //     if (!EstimateData) return null;
+    //     if (!FeeData) return null;
+    //     if (!FeeData.gasPrice) return null;
 
-        const num = FeeData.gasPrice.mul(EstimateData.request.gasLimit);
-        const goerliOffset = chainId == 5 ? 1000n : 1n;
+    //     const num = FeeData.gasPrice.mul(EstimateData.request.gasLimit);
+    //     const goerliOffset = chainId == 5 ? 1000n : 1n;
 
-        return {
-            // Is it me or is goerli fee data off by /1000
-            gasTotal: formatEther(num.toBigInt() / goerliOffset, 'gwei').substring(0, 8),
-        }
-    }, [FeeData, EstimateData]);
+    //     return {
+    //         // Is it me or is goerli fee data off by /1000
+    //         gasTotal: formatEther(num.toBigInt() / goerliOffset, 'gwei').substring(0, 8),
+    //     }
+    // }, [FeeData, EstimateData]);
 
-    console.log({ receipt: receipt?.data });
+    // console.log({ receipt: receipt?.data });
 
-    useEffect(() => {
-        if (!data) return;
+    // useEffect(() => {
+    //     if (!data) return;
 
-        logTransaction(data.hash, chainId.toString());
-    }, [data]);
+    //     logTransaction(data.hash, chainId.toString());
+    // }, [data]);
 
-    useEffect(() => {
-        if (!receipt?.data) return;
+    // useEffect(() => {
+    //     if (!receipt?.data) return;
 
-        const x = receipt.data;
+    //     const x = receipt.data;
 
-        const first = x.logs[0];
-        const address = first.address;
+    //     const first = x.logs[0];
+    //     const address = first.address;
 
-        console.log('Contracted Deployed at: ' + address);
+    //     console.log('Contracted Deployed at: ' + address);
 
-        logTransactionSuccess(receipt.data.transactionHash, chainId.toString(), address);
-    }, [receipt?.data]);
+    //     logTransactionSuccess(receipt.data.transactionHash, chainId.toString(), address);
+    // }, [receipt?.data]);
 
     return (
         <Card className="leading-6 gap-2">
@@ -164,19 +165,19 @@ export const DeployResolverCard: FC = () => {
                     <div className="flex justify-around items-center">
                         <div className="flex gap-2 items-center">
                             <GasPumpSVG />
-                            {FeeData?.formatted?.gasPrice}
+                            {EstimateData.request.gasPrice?.toString()}
                         </div>
                         <div className="flex gap-2 items-center">
                             <FlameSVG />
-                            {Number(EstimateData.request.gasLimit).toLocaleString()}
+                            {Number(EstimateData.request.gas).toLocaleString()}
                         </div>
                         <div className="flex gap-2 items-center">
-                            <WalletSVG /> {gas?.gasTotal}
+                            <WalletSVG />
                         </div>
                     </div>
                 )
             }
-            {
+            {/* {
                 (() => {
                     if (!isConnected) return null;
 
@@ -192,7 +193,7 @@ export const DeployResolverCard: FC = () => {
                         </Button>
                     );
                 })()
-            }
+            } */}
         </Card>
     )
 };