@dodoex/wallet-web3-react 0.4.0 → 0.4.2

package/src/WalletConnect/HasBalanceTokenList.tsx

@@ -1,202 +1,202 @@
-'use client';
-
-import {
-  Box,
-  EmptyDataIcon,
-  LoadingSkeleton,
-  Skeleton,
-  TooltipToast,
-  useTheme,
-} from '@dodoex/components';
-import { Trans } from '@lingui/macro';
-import { ArrowTopRightBorder, Copy } from '@dodoex/icons';
-import copy from 'copy-to-clipboard';
-import { increaseArray } from '../utils/utils';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-import TokenLogo from '../components/TokenLogo';
-import { formatReadableNumber, formatShortNumber } from '../utils/formatter';
-import { useHasBalanceTokenList } from '../hooks/useHasBalanceTokenList';
-
-export default function HasBalanceTokenList({
-  balanceListData,
-}: {
-  balanceListData: ReturnType<typeof useHasBalanceTokenList>;
-}) {
-  const theme = useTheme();
-  const { onClickToken, getChain } = useWalletConnectContext();
-  return (
-    <div>
-      {balanceListData.tokenLoading &&
-        increaseArray(3).map((_, i) => (
-          <Skeleton
-            key={i}
-            height={40}
-            sx={{
-              mx: 20,
-              my: 16,
-            }}
-          />
-        ))}
-      {!balanceListData.tokenLoading && !balanceListData.hasBalanceList.length && (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            flexDirection: 'column',
-            gap: 12,
-            mt: 56,
-            color: 'text.secondary',
-          }}
-        >
-          <EmptyDataIcon />
-          <Trans>No tokens</Trans>
-        </Box>
-      )}
-      {balanceListData.hasBalanceList.map((token) => {
-        return (
-          <Box
-            key={token.address}
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              gap: 12,
-              px: 20,
-              py: 16,
-              overflow: 'hidden',
-              ...(onClickToken
-                ? {
-                    cursor: 'pointer',
-                    '&:hover': {
-                      backgroundColor: 'hover.default',
-                      '& .token-operate': {
-                        display: 'flex',
-                      },
-                    },
-                  }
-                : {}),
-            }}
-            onClick={() => {
-              if (onClickToken) {
-                onClickToken(token);
-              }
-            }}
-          >
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 12,
-              }}
-            >
-              <TokenLogo
-                address={token.address}
-                chainId={token.chainId}
-                logoURI={token.logoURI}
-                width={40}
-                height={40}
-              />
-              <div>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 4,
-                  }}
-                >
-                  {token.name}
-                  <Box
-                    className="token-operate"
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: 4,
-                      [theme.breakpoints.up('tablet')]: {
-                        display: 'none',
-                      },
-                    }}
-                  >
-                    <TooltipToast arrow={false} title={<Trans>Copied</Trans>}>
-                      <Box
-                        component={Copy}
-                        sx={{
-                          width: 14,
-                          height: 14,
-                          cursor: 'pointer',
-                          color: 'text.secondary',
-                          '&:hover': {
-                            color: 'text.primary',
-                          },
-                        }}
-                        onClick={() => {
-                          copy(token.address);
-                        }}
-                      />
-                    </TooltipToast>
-                    <Box
-                      component="a"
-                      href={`https://${getChain(token.chainId)?.scanUrl}${
-                        token.address ? `/address/${token.address}` : ''
-                      }`}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      sx={{
-                        display: 'flex',
-                        width: 14,
-                        height: 14,
-                        color: 'text.secondary',
-                        '&:hover': {
-                          color: 'text.primary',
-                        },
-                      }}
-                      onClick={(evt) => {
-                        evt.stopPropagation();
-                      }}
-                    >
-                      <Box
-                        component={ArrowTopRightBorder}
-                        sx={{
-                          width: 14,
-                          height: 14,
-                        }}
-                      />
-                    </Box>
-                  </Box>
-                </Box>
-                <div className="text-sm text-secondary">
-                  {`${formatReadableNumber({ input: token.balance })} ${
-                    token.symbol
-                  }`}
-                </div>
-              </div>
-            </Box>
-            <LoadingSkeleton
-              loading={balanceListData.fiatPriceQuery.isLoading}
-              loadingProps={{
-                width: 100,
-              }}
-              title={
-                token.fiatPriceBalance
-                  ? `$${formatReadableNumber({
-                      input: token.fiatPriceBalance,
-                    })}`
-                  : undefined
-              }
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                typography: 'h5',
-              }}
-            >
-              $
-              {token.fiatPriceBalance
-                ? formatShortNumber(token.fiatPriceBalance)
-                : '-'}
-            </LoadingSkeleton>
-          </Box>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import {
+  Box,
+  EmptyDataIcon,
+  LoadingSkeleton,
+  Skeleton,
+  TooltipToast,
+  useTheme,
+} from '@dodoex/components';
+import { Trans } from '@lingui/macro';
+import { ArrowTopRightBorder, Copy } from '@dodoex/icons';
+import copy from 'copy-to-clipboard';
+import { increaseArray } from '../utils/utils';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+import TokenLogo from '../components/TokenLogo';
+import { formatReadableNumber, formatShortNumber } from '../utils/formatter';
+import { useHasBalanceTokenList } from '../hooks/useHasBalanceTokenList';
+
+export default function HasBalanceTokenList({
+  balanceListData,
+}: {
+  balanceListData: ReturnType<typeof useHasBalanceTokenList>;
+}) {
+  const theme = useTheme();
+  const { onClickToken, getChain } = useWalletConnectContext();
+  return (
+    <div>
+      {balanceListData.tokenLoading &&
+        increaseArray(3).map((_, i) => (
+          <Skeleton
+            key={i}
+            height={40}
+            sx={{
+              mx: 20,
+              my: 16,
+            }}
+          />
+        ))}
+      {!balanceListData.tokenLoading && !balanceListData.hasBalanceList.length && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            gap: 12,
+            mt: 56,
+            color: 'text.secondary',
+          }}
+        >
+          <EmptyDataIcon />
+          <Trans>No tokens</Trans>
+        </Box>
+      )}
+      {balanceListData.hasBalanceList.map((token) => {
+        return (
+          <Box
+            key={token.address}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              gap: 12,
+              px: 20,
+              py: 16,
+              overflow: 'hidden',
+              ...(onClickToken
+                ? {
+                    cursor: 'pointer',
+                    '&:hover': {
+                      backgroundColor: 'hover.default',
+                      '& .token-operate': {
+                        display: 'flex',
+                      },
+                    },
+                  }
+                : {}),
+            }}
+            onClick={() => {
+              if (onClickToken) {
+                onClickToken(token);
+              }
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+              }}
+            >
+              <TokenLogo
+                address={token.address}
+                chainId={token.chainId}
+                logoURI={token.logoURI}
+                width={40}
+                height={40}
+              />
+              <div>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                  }}
+                >
+                  {token.name}
+                  <Box
+                    className="token-operate"
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 4,
+                      [theme.breakpoints.up('tablet')]: {
+                        display: 'none',
+                      },
+                    }}
+                  >
+                    <TooltipToast arrow={false} title={<Trans>Copied</Trans>}>
+                      <Box
+                        component={Copy}
+                        sx={{
+                          width: 14,
+                          height: 14,
+                          cursor: 'pointer',
+                          color: 'text.secondary',
+                          '&:hover': {
+                            color: 'text.primary',
+                          },
+                        }}
+                        onClick={() => {
+                          copy(token.address);
+                        }}
+                      />
+                    </TooltipToast>
+                    <Box
+                      component="a"
+                      href={`https://${getChain(token.chainId)?.scanUrl}${
+                        token.address ? `/address/${token.address}` : ''
+                      }`}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      sx={{
+                        display: 'flex',
+                        width: 14,
+                        height: 14,
+                        color: 'text.secondary',
+                        '&:hover': {
+                          color: 'text.primary',
+                        },
+                      }}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                      }}
+                    >
+                      <Box
+                        component={ArrowTopRightBorder}
+                        sx={{
+                          width: 14,
+                          height: 14,
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                </Box>
+                <div className="text-sm text-secondary">
+                  {`${formatReadableNumber({ input: token.balance })} ${
+                    token.symbol
+                  }`}
+                </div>
+              </div>
+            </Box>
+            <LoadingSkeleton
+              loading={balanceListData.fiatPriceQuery.isLoading}
+              loadingProps={{
+                width: 100,
+              }}
+              title={
+                token.fiatPriceBalance
+                  ? `$${formatReadableNumber({
+                      input: token.fiatPriceBalance,
+                    })}`
+                  : undefined
+              }
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                typography: 'h5',
+              }}
+            >
+              $
+              {token.fiatPriceBalance
+                ? formatShortNumber(token.fiatPriceBalance)
+                : '-'}
+            </LoadingSkeleton>
+          </Box>
+        );
+      })}
+    </div>
+  );
+}