Merge pull request #674 from subquery/feat/base-to-eth

feat: base to eth
subquery · Feb 28, 2024 · 0fab4ba · 0fab4ba
2 parents 524e9cb + 2519a28
commit 0fab4ba
Show file tree

Hide file tree

Showing 10 changed files with 674 additions and 103 deletions.
diff --git a/src/components/ProjectHeader/ProjectHeader.tsx b/src/components/ProjectHeader/ProjectHeader.tsx
@@ -37,8 +37,8 @@ const ProjectHeader: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const createdAtStr = React.useMemo(() => dayjs(project.createdTimestamp).fromNow(), [project]);
-  const updatedAtStr = React.useMemo(() => dayjs(project.updatedTimestamp).fromNow(), [project]);
+  const createdAtStr = React.useMemo(() => dayjs(project.createdTimestamp).utc(true).fromNow(), [project]);
+  const updatedAtStr = React.useMemo(() => dayjs(project.updatedTimestamp).utc(true).fromNow(), [project]);
 
   const VersionDropdown = () => {
     if (!versions) return <></>;

diff --git a/src/config/rainbowConf.tsx b/src/config/rainbowConf.tsx
@@ -20,7 +20,8 @@ import '@rainbow-me/rainbowkit/styles.css';
 const supportedChains = import.meta.env.VITE_NETWORK === 'testnet' ? [baseSepolia, sepolia] : [base, mainnet];
 
 export const tipsChainIds: number[] = import.meta.env.VITE_NETWORK === 'testnet' ? [baseSepolia.id] : [base.id];
-export const tipsL1ChainIds: number[] = import.meta.env.VITE_NETWORK === 'testnet' ? [sepolia.id] : [mainnet.id];
+export const tipsL1ChainIds: number[] =
+  import.meta.env.VITE_NETWORK === 'testnet' ? [sepolia.id, baseSepolia.id] : [mainnet.id, base.id];
 // This should ok. It seems is a bug of Ts.
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

diff --git a/src/containers/Web3.tsx b/src/containers/Web3.tsx
@@ -1,11 +1,11 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
 import mainnetJSON from '@subql/contract-sdk/publish/mainnet.json';
 import testnetJSON from '@subql/contract-sdk/publish/testnet.json';
 import { NETWORKS_CONFIG_INFO, SQNetworks } from '@subql/network-config';
-import { useAccount } from 'wagmi';
+import { base, baseSepolia } from 'viem/chains';
+import { mainnet, sepolia, useAccount } from 'wagmi';
 
 export const NETWORK_NAME: SQNetworks = import.meta.env.VITE_NETWORK;
 export const isMainnet = import.meta.env.VITE_NETWORK === 'mainnet';
@@ -16,6 +16,9 @@ export const ECOSYSTEM_NETWORK = NETWORKS_CONFIG_INFO[SUPPORTED_NETWORK].chainNa
 
 export const NETWORK_DEPLOYMENT_DETAILS = isMainnet ? mainnetJSON : testnetJSON;
 
+export const l1Chain = import.meta.env.VITE_NETWORK === 'testnet' ? sepolia : mainnet;
+export const l2Chain = import.meta.env.VITE_NETWORK === 'testnet' ? baseSepolia : base;
+
 // TODO: FIXME, Mainnet dont have this yet
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

diff --git a/src/hooks/useInitContracts.ts b/src/hooks/useInitContracts.ts
@@ -2,14 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { NETWORK_NAME } from '@containers/Web3';
-import mainnetJSON from '@subql/contract-sdk/publish/mainnet.json';
-import testnetJSON from '@subql/contract-sdk/publish/testnet.json';
+import { l1Chain, l2Chain, NETWORK_NAME } from '@containers/Web3';
+import { RootContractSDK } from '@subql/contract-sdk/rootSdk';
 import { ContractSDK } from '@subql/contract-sdk/sdk';
-import { SQToken__factory } from '@subql/contract-sdk/typechain/factories/contracts/root/SQToken__factory';
 import { ContractClient } from '@subql/network-clients';
 import { parseError } from '@utils';
-import { mainnet, sepolia } from 'viem/chains';
+import { base, baseSepolia, mainnet, sepolia } from 'viem/chains';
 
 import { useWeb3Store } from 'src/stores';
 
@@ -23,12 +21,18 @@ export function useInitContracts(): { loading: boolean } {
   const ethereumProvider = useEthersProviderWithPublic({
     chainId: import.meta.env.MODE === 'testnet' ? sepolia.id : mainnet.id,
   });
+  const baseProvider = useEthersProviderWithPublic({
+    chainId: import.meta.env.MODE === 'testnet' ? baseSepolia.id : base.id,
+  });
 
   React.useEffect(() => {
     function initContract() {
       if (signer || provider) {
         try {
-          const contractInstance = ContractSDK.create(signer || provider, { network: NETWORK_NAME });
+          const contractInstance = ContractSDK.create(
+            signer?.provider.network.chainId === l2Chain.id ? signer : baseProvider,
+            { network: NETWORK_NAME },
+          );
 
           setContracts(contractInstance);
 
@@ -42,13 +46,10 @@ export function useInitContracts(): { loading: boolean } {
       }
 
       if (ethereumProvider) {
-        const sqTokenContract = SQToken__factory.connect(
-          import.meta.env.MODE === 'testnet' ? testnetJSON.root.SQToken.address : mainnetJSON.root.SQToken.address,
-          ethereumProvider,
+        const rootContractInstance = RootContractSDK.create(
+          signer?.provider.network.chainId === l1Chain.id ? signer : ethereumProvider,
+          { network: NETWORK_NAME },
         );
-        const rootContractInstance = {
-          sqToken: sqTokenContract,
-        };
         setRootContracts(rootContractInstance);
       }
     }

diff --git a/src/pages/bridge/index.module.less b/src/pages/bridge/index.module.less
@@ -11,8 +11,9 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
-  padding: 40px;
-  max-width: 568px;
+  padding: 40px 0;
+  max-width: 582px;
+  width: 582px;
   gap: 10px;
 
   &Tabs {
@@ -34,13 +35,13 @@
       }
 
       .ant-tabs-ink-bar {
-        background: linear-gradient(96.26deg, #4388DD 13.8%, #FF4581 82.83%);
+        background: linear-gradient(96.26deg, #4388dd 13.8%, #ff4581 82.83%);
       }
     }
   }
 
   &Content {
-    border: 1px solid #DFE3E899;
+    border: 1px solid #dfe3e899;
     border-radius: 8px;
     padding: 24px;
     width: 100%;
@@ -52,8 +53,8 @@
     .smallCard {
       border-radius: 8px;
       border: 1px solid var(--sq-gray300);
-      width: 100%;
-      
+      width: 360px;
+
       .top {
         background: var(--sq-gray200);
         padding: 16px;
@@ -78,6 +79,9 @@
     .input {
       text-align: center;
       border: none;
+      width: 100%;
+      box-shadow: none;
+
       &:focus {
         border: none;
         outline: none;
@@ -87,6 +91,69 @@
       &:focus-visible {
         outline: none;
       }
+
+      :global {
+        .ant-input-number-input {
+          text-align: center;
+          border: none;
+          &-wrap {
+            &:focus {
+              border: none;
+              outline: none;
+              box-shadow: none;
+            }
+
+            &:focus-visible {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.pendingAction {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  border: 1px solid #DFE3E899;
+  border-radius: 8px;
+  padding: 24px;
+  width: 100%;
+}
+
+.confirmModal {
+  :global {
+    .ant-modal-content {
+      padding: 16px 32px;
+    }
+
+    .ant-modal-confirm-paragraph {
+      row-gap: 16px;
+    }
+
+    .ant-modal-confirm-content {
+      padding: 24px 0 0 0;
+      position: relative;
+      &::before {
+        content: ' ';
+        height: 1px;
+        width: 572px;
+        background: #F4F6F8;
+        position: absolute;
+        top: 0;
+        left: -32px;
+      }
+    }
+
+    .ant-modal-confirm-btns {
+      margin: 36px 0 16px 0;
+    }
+
+    .ant-modal-confirm-title {
+      font-family: var(--sq-font-family);
     }
   }
 }