feat: sqt balance

src/components/AccountActions/AccountActions.tsx

@@ -12,6 +12,8 @@ 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 styles from './AccountActions.module.less';
@@ -105,16 +107,18 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
       key: 'bridge tokens',
       label: (
         <div style={{ padding: '0 16px 8px 16px' }}>
-          <Button
-            shape="round"
-            size="large"
-            type="primary"
-            ghost
-            style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}
-          >
-            Bridge Tokens
-            <BsBoxArrowInUpRight />
-          </Button>
+          <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>
       ),
     },
@@ -137,8 +141,6 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
               {formatEther(consumerHostBalance.data?.balance, 4)} {TOKEN}
             </Typography>
           </div>
-
-          <Typography.Link active>View Details</Typography.Link>
         </div>
       ),
     },

src/components/IndexerDetails/PlansTable.tsx

@@ -4,6 +4,7 @@
 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';
@@ -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>,

src/components/NumberInput/NumberInput.tsx

@@ -3,6 +3,7 @@
 
 import * as React from 'react';
 import { useMemo } from 'react';
+import TokenTooltip from '@components/TokenTooltip/TokenTooltip';
 import { Typography } from '@subql/components';
 import { TOKEN } from '@utils';
 import { Button, InputNumber, InputNumberProps } from 'antd';
@@ -64,13 +65,20 @@ export const NumberInput: React.FC<NumberInputProps> = ({
     );
   }, [maxAmount, inputParams, unit]);
 
-  const maxText = useMemo(
-    () =>
-      BigNumber(maxAmount.toString()).gt(0)
-        ? `Current ${unit === '%' ? 'rate' : 'balance'}: ${maxAmount ?? ''} ${unit ?? ''}`
-        : undefined,
-    [maxAmount, unit],
-  );
+  const maxText = useMemo(() => {
+    if (BigNumber(maxAmount.toString()).gt(0)) {
+      const text = `Current ${unit === '%' ? 'rate' : 'balance'}: ${maxAmount ?? ''} ${unit ?? ''}`;
+      if (unit !== '%') {
+        return (
+          <>
+            {text} <TokenTooltip></TokenTooltip>
+          </>
+        );
+      }
+      return text;
+    }
+    return '';
+  }, [maxAmount, unit]);
 
   const inputBottomText = useMemo(() => description ?? maxAmountText ?? maxText, [description, maxAmountText]);
   const DescriptionText = ({ text }: { text: string }) => (

src/components/ProjectCard/ProjectCard.tsx

@@ -5,15 +5,12 @@ import * as React from 'react';
 import { Address, Typography } from '@subql/components';
 import { ProjectFieldsFragment } from '@subql/network-query';
 import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
 
 import { ProjectMetadata } from 'src/models';
 
 import IPFSImage from '../IPFSImage';
 import styles from './ProjectCard.module.css';
 
-dayjs.extend(relativeTime);
-
 type Props = {
   project: { metadata: ProjectMetadata | undefined } & Omit<ProjectFieldsFragment, 'metadata'>;
   onClick?: () => void;

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -9,15 +9,12 @@ import { parseError } from '@utils';
 import { Form, Radio } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 
 import { NewDeployment } from '../../models';
 import { Table, TableBody, TableCell, TableHead, TableRow } from '../Table';
 import { Copy } from '..';
 import styles from './ProjectDeployments.module.less';
 
-dayjs.extend(utc);
-
 type Deployment = NewDeployment & { createdAt?: Date };
 
 type Props = {

src/components/SummaryList/SummaryList.tsx

@@ -10,8 +10,8 @@ import { clsx } from 'clsx';
 import styles from './SummaryList.module.css';
 
 interface List {
-  label: string;
-  value: string | React.ReactNode | any;
+  label: React.ReactNode;
+  value: React.ReactNode;
   strong?: boolean;
   tooltip?: string;
 }
@@ -26,8 +26,8 @@ export const SummaryList: React.FC<SummaryListProps> = ({ title, list }) => {
     <div className={styles.container}>
       {title && <Typography>{title}</Typography>}
       <div className={styles.list}>
-        {list.map((listItem) => (
-          <div className={styles.listItem} key={listItem.label}>
+        {list.map((listItem, index) => (
+          <div className={styles.listItem} key={index}>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <Typography
                 variant={listItem.strong ? 'text' : 'medium'}

src/components/TokenTooltip/TokenTooltip.tsx

@@ -2,12 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { FC } from 'react';
+import { BsBoxArrowInUpRight } from 'react-icons/bs';
 import { ExclamationCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
 import { useSQToken } from '@containers';
 import { Typography } from '@subql/components';
 import { formatEther, TOKEN } from '@utils';
 import { Button, Tooltip } from 'antd';
 
+import { BRIDGE_URL } from 'src/const/bridge';
+
 import styles from './index.module.less';
 
 interface IProps {
@@ -34,11 +37,21 @@ const TokenTooltip: FC<IProps> = (props) => {
             to Polygon, you’ll need to bridge them across.
           </Typography>
 
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
-            <Button type="primary" shape="round">
-              Bridge Token
+          <a
+            href={BRIDGE_URL}
+            target="_blank"
+            rel="noreferrer"
+            style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4, textDecoration: 'none' }}
+          >
+            <Button
+              type="primary"
+              shape="round"
+              style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
+            >
+              Bridge Tokens
+              <BsBoxArrowInUpRight />
             </Button>
-          </div>
+          </a>
         </div>
       }
     >

src/config/dayjsConf.ts

@@ -5,13 +5,17 @@ import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import localeData from 'dayjs/plugin/localeData';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
 
+dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 dayjs.extend(advancedFormat);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
+dayjs.extend(relativeTime);

src/const/bridge.ts

@@ -0,0 +1,4 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export const BRIDGE_URL = 'https://portal.polygon.technology/';