Merge pull request #627 from subquery/feat/sqt-balance

feat: bridge sqt balance

.env

@@ -5,7 +5,7 @@ VITE_QUERY_SWAP_EXCHANGE_PROJECT=https://api.subquery.network/sq/subquery/kepler
 VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
 VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
-VITE_TOKEN=kSQT
+VITE_TOKEN=SQT
 VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true

.env.staging

@@ -5,7 +5,7 @@ VITE_QUERY_SWAP_EXCHANGE_PROJECT=https://api.subquery.network/sq/subquery/kepler
 VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
 VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
-VITE_TOKEN=kSQT
+VITE_TOKEN=SQT
 VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true

.env.testnet

@@ -3,7 +3,7 @@ VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-test
 VITE_SUBSCRIPTION_REGISTRY_PROJECT=wss://api.subquery.network/sq/subquery/kepler-testnet
 VITE_TOP_100_INDEXERS=https://leaderboard-api.thechaindata.com/graphql
 VITE_CONSUMER_HOST_ENDPOINT=https://dev-chs.thechaindata.com
-VITE_TOKEN=kSQT
+VITE_TOKEN=SQT
 VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x7E65A71046170A5b1AaB5C5cC64242EDF95CaBEA
 VITE_NETWORK=testnet

package.json

@@ -20,7 +20,7 @@
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.2.3",
-    "@subql/components": "1.0.3-22",
+    "@subql/components": "1.0.3-25",
     "@subql/contract-sdk": "0.112.0",
     "@subql/network-clients": "^0.112.1-0",
     "@subql/network-config": "^0.112.0",

src/components/AccountActions/AccountActions.module.less

@@ -0,0 +1,43 @@
+.downIcon {
+  margin-left: 3px;
+}
+
+.address {
+  padding: 12px;
+  border: 1px solid var(--gradient-to);
+  border-radius: 36px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.accountActionDropdown {
+  width: 380px;
+
+  :global {
+    .ant-dropdown-menu {
+      padding: 16px 0;
+      border-radius: 8px;
+      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+      &-item {
+        padding: 0!important;
+
+        &:hover {
+          background-color: transparent!important;
+        }
+      }
+    }
+  }
+
+  .dropdownItemInner {
+    padding: 8px 16px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    &:hover {
+      background: rgba(67, 136, 221, 0.10);
+    }
+  }
+}
+

src/components/AccountActions/AccountActions.tsx

@@ -4,22 +4,25 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AiOutlineDown } from 'react-icons/ai';
-import { BsBoxArrowLeft } from 'react-icons/bs';
+import { BsBoxArrowInUpRight, BsBoxArrowLeft } from 'react-icons/bs';
 import { useNavigate } from 'react-router';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { SQT_TOKEN_ADDRESS } from '@containers/Web3';
-import { Address } from '@subql/components';
+import { Address, Typography } from '@subql/components';
+import { Button, Dropdown, Tooltip } from 'antd';
 import { useDisconnect, useWalletClient } from 'wagmi';
 
+import { BRIDGE_URL } from 'src/const/bridge';
+
 import { useSQToken } from '../../containers';
 import { formatEther, ROUTES, STABLE_TOKEN, STABLE_TOKEN_ADDRESS, TOKEN, tokenDecimals } from '../../utils';
-import { Dropdown } from '../Dropdown';
-import styles from './AccountActions.module.css';
+import styles from './AccountActions.module.less';
 
 export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
   const { t } = useTranslation();
   const { disconnect } = useDisconnect();
   const navigate = useNavigate();
-  const { balance } = useSQToken();
+  const { balance, ethSqtBalance, consumerHostBalance } = useSQToken();
   const { data: walletClient } = useWalletClient();
 
   const handleDisconnect = () => disconnect();
@@ -55,24 +58,158 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
   };
 
   const menu = [
-    { key: 'walletBalance', label: t('header.walletBalance', { balance: formatEther(balance.data, 4) }) },
-    { key: 'addToken', label: t('header.importToken'), onClick: handleAddToken },
-    { key: 'addStableToken', label: t('header.importStableToken'), onClick: handleAddStableToken },
-    { key: 'myProfile', label: t('indexer.myProfile'), onClick: handleNavAccount },
-    { key: 'rewards', label: t('indexer.rewards'), onClick: handleNavRewards },
-    { key: 'withdrawn', label: t('indexer.withdrawn'), onClick: handleNavWithdrawn },
-    { key: 'disconnect', label: t('header.disconnect'), icon: <BsBoxArrowLeft />, onClick: handleDisconnect },
+    {
+      key: 'header',
+      label: (
+        <div style={{ padding: '0 16px' }}>
+          <Address address={account} size="bigger"></Address>
+        </div>
+      ),
+    },
+    {
+      key: 'walletBalance',
+      label: (
+        <div className="flex" style={{ gap: 16, padding: '16px' }}>
+          <div className="col-flex" style={{ gap: 8 }}>
+            <Typography variant="small" type="secondary">
+              Wallet balance on Polygon
+            </Typography>
+            <Typography weight={600}>
+              {formatEther(balance.data, 4)} {TOKEN}
+            </Typography>
+          </div>
+          <div className="col-flex" style={{ gap: 8 }}>
+            <Typography variant="small" type="secondary">
+              Wallet balance on Ethereum
+              <Tooltip
+                color="#fff"
+                title={
+                  <Typography variant="small">
+                    SubQuery launched on Polygon network, To move assets from the Ethereum network to Polygon network,
+                    you'll need to connect to a bridge and deposit funds.
+                  </Typography>
+                }
+                overlayInnerStyle={{
+                  padding: 16,
+                }}
+              >
+                <InfoCircleOutlined style={{ marginLeft: 8 }} />
+              </Tooltip>
+            </Typography>
+            <Typography weight={600}>
+              {formatEther(ethSqtBalance.data, 4)} {TOKEN}
+            </Typography>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'bridge tokens',
+      label: (
+        <div style={{ padding: '0 16px 8px 16px' }}>
+          <a href={BRIDGE_URL} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
+            <Button
+              shape="round"
+              size="large"
+              type="primary"
+              ghost
+              style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}
+            >
+              Bridge Tokens
+              <BsBoxArrowInUpRight />
+            </Button>
+          </a>
+        </div>
+      ),
+    },
+    {
+      key: 'billingBalance',
+      label: (
+        <div
+          style={{
+            padding: '16px',
+            borderTop: '1px solid var(--sq-gray200)',
+            borderBottom: '1px solid var(--sq-gray200)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <Typography>Billing Balance:</Typography>
+            <Typography>
+              {formatEther(consumerHostBalance.data?.balance, 4)} {TOKEN}
+            </Typography>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'addTokens',
+      label: (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '8px 0',
+            borderBottom: '1px solid var(--sq-gray200)',
+          }}
+        >
+          <div className={styles.dropdownItemInner}>
+            <Typography onClick={handleAddToken}>{t('header.importToken')}</Typography>
+          </div>
+          <div className={styles.dropdownItemInner}>
+            <Typography onClick={handleAddStableToken}>{t('header.importStableToken')}</Typography>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'myProfile',
+      label: (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '8px 0',
+            borderBottom: '1px solid var(--sq-gray200)',
+          }}
+        >
+          <div className={styles.dropdownItemInner} onClick={handleNavAccount}>
+            {t('indexer.myProfile')}
+          </div>
+          <div className={styles.dropdownItemInner} onClick={handleNavRewards}>
+            {t('indexer.rewards')}
+          </div>
+          <div className={styles.dropdownItemInner} onClick={handleNavWithdrawn}>
+            {t('indexer.withdrawn')}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'disconnect',
+      label: (
+        <div style={{ padding: '8px 0 0 0' }}>
+          <div className={styles.dropdownItemInner} onClick={handleDisconnect}>
+            <BsBoxArrowLeft style={{ marginRight: 8 }} /> {t('header.disconnect')}
+          </div>
+        </div>
+      ),
+    },
   ];
 
   return (
     <Dropdown
-      menu={menu}
-      dropdownContent={
-        <div className={styles.address}>
-          <Address address={account} size="large" />
-          <AiOutlineDown className={styles.downIcon} />
-        </div>
-      }
-    />
+      overlayClassName={styles.accountActionDropdown}
+      menu={{ items: menu }}
+      placement="bottom"
+      arrow={{ pointAtCenter: true }}
+    >
+      <div className={styles.address}>
+        <Address address={account} size="large" />
+        <AiOutlineDown className={styles.downIcon} />
+      </div>
+    </Dropdown>
   );
 };

src/components/ConnectWallet/ChainStatus.tsx

@@ -10,12 +10,14 @@ import { useNetwork, useSwitchNetwork } from 'wagmi';
 import { ECOSYSTEM_NETWORK } from '../../containers/Web3';
 import styles from './ChainStatus.module.css';
 
+const tipsChainIds = import.meta.env.MODE === 'testnet' ? [80001] : [137];
+
 export const ChainStatus: React.FC<React.PropsWithChildren> = ({ children }) => {
   const { chain } = useNetwork();
   const { chains, switchNetwork } = useSwitchNetwork();
   const { t } = useTranslation();
 
-  if (chain?.unsupported) {
+  if (!tipsChainIds.includes(chain?.id || 0)) {
     return (
       <div className={styles.container}>
         <div className={styles.content}>

src/components/IndexerDetails/PlansTable.tsx

@@ -4,14 +4,15 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { LazyQueryResult } from '@apollo/client';
+import TokenTooltip from '@components/TokenTooltip/TokenTooltip';
 import { NETWORK_NAME } from '@containers/Web3';
 import { BigNumber } from '@ethersproject/bignumber';
 import { ContractTransaction } from '@ethersproject/contracts';
-import { Button, Spinner, Typography } from '@subql/components';
+import { Spinner, Typography } from '@subql/components';
 import { PlansNodeFieldsFragment as Plan } from '@subql/network-query';
 import { PlanTemplateFieldsFragment as PlanTemplate } from '@subql/network-query';
 import { useStableCoin } from '@subql/react-hooks';
-import { Table, TableProps } from 'antd';
+import { Button, Table, TableProps } from 'antd';
 import { last } from 'ramda';
 
 import { useWeb3Store } from 'src/stores';
@@ -28,7 +29,7 @@ import { IndexerName } from './IndexerName';
 
 export type PlansTableProps = {
   loadPlans: () => void;
-  asyncPlans: LazyQueryResult<Plan[], any>;
+  asyncPlans: LazyQueryResult<Plan[], object>;
 } & Omit<DoPurchaseProps, 'plan'>;
 
 type DoPurchaseProps = {
@@ -88,18 +89,22 @@ const DoPurchase: React.FC<DoPurchaseProps> = ({
     },
     {
       label: t('plans.headers.dailyReqCap'),
-      value: plan.planTemplate?.dailyReqCap,
+      value: (plan.planTemplate?.dailyReqCap || 0).toString(),
     },
     {
       label: t('plans.headers.rateLimit'),
-      value: plan.planTemplate?.rateLimit,
+      value: (plan.planTemplate?.rateLimit || 0).toString(),
     },
     {
       label: t('plans.headers.deploymentId'),
       value: deploymentId,
     },
     {
-      label: t('plans.purchase.yourBalance'),
+      label: (
+        <div>
+          {t('plans.purchase.yourBalance')} <TokenTooltip></TokenTooltip>
+        </div>
+      ),
       value: renderAsync(balance, {
         loading: () => <Spinner />,
         error: () => <Typography>{t('plans.purchase.failToLoadBalance')}</Typography>,
@@ -141,21 +146,27 @@ const DoPurchase: React.FC<DoPurchaseProps> = ({
                 <Typography className={'errorText'}>{error}</Typography>
                 <div className={'flex-end'}>
                   <Button
-                    label={t('plans.purchase.cancel')}
                     onClick={onCancel}
                     disabled={isLoading}
-                    type="secondary"
-                    colorScheme="neutral"
+                    type="primary"
+                    size="large"
+                    shape="round"
                     className={styles.btn}
-                  />
+                    ghost
+                  >
+                    {t('plans.purchase.cancel')}
+                  </Button>
                   <Button
-                    label={t('plans.purchase.submit')}
                     onClick={() => {
                       onSubmit({});
                     }}
                     loading={isLoading}
-                    colorScheme="standard"
-                  />
+                    type="primary"
+                    size="large"
+                    shape="round"
+                  >
+                    {t('plans.purchase.submit')}
+                  </Button>
                 </div>
               </div>
             );