@dodoex/wallet-web3-react 0.4.0 → 0.4.2

package/src/WalletConnectProvider.tsx

@@ -1,57 +1,57 @@
-'use client';
-
-import { GraphQLRequests, RestApiRequests } from '@dodoex/api';
-import React from 'react';
-import { TokenInfo } from './components/TokenLogo';
-import { WalletItem } from './hooks/useConnectWallet';
-
-const WalletConnectContext = React.createContext<{
-  chainId?: number;
-  termsOfServiceLink?: React.ReactNode;
-  connectTimeout?: number;
-  graphQLRequests?: GraphQLRequests;
-  tokenList: Array<TokenInfo>;
-  restApiRequests?: RestApiRequests;
-  SendTokenPage?: (params: {
-    open?: boolean;
-    onClose: () => void;
-    onBack: () => void;
-  }) => JSX.Element;
-  encryptFiatPriceToken?: () => string;
-  loadAccountListEthBalance?: (
-    accountList: string[],
-    chainId?: number,
-  ) => Promise<Map<string, number | null>>;
-  getChain: (chainId: number) => null | {
-    name: string;
-    scanUrl: string;
-    gasToken: {
-      symbol: string;
-      decimals: number;
-    };
-    logo: React.ReactNode;
-    logoBg?: React.ReactNode;
-  };
-  getTokenLogoUrl?: (op: {
-    chainId?: number | null;
-    address?: string | null;
-    width?: number;
-    height?: number;
-  }) => string | null;
-  onConnectTimeout?: () => void;
-  switchNetwork?: (chainId: number) => void;
-  onConnected?: (chainId: number, wallet: WalletItem) => void;
-  onClickToken?: (token: TokenInfo) => void;
-}>({
-  connectTimeout: 15000,
-  tokenList: [],
-  getChain: () => {
-    throw new Error('getChain is undefined');
-  },
-});
-
-export const WalletConnectProvider = WalletConnectContext.Provider;
-
-export const useWalletConnectContext = () => {
-  return React.useContext(WalletConnectContext);
-};
+'use client';
+
+import { GraphQLRequests, RestApiRequests } from '@dodoex/api';
+import React from 'react';
+import { TokenInfo } from './components/TokenLogo';
+import { WalletItem } from './hooks/useConnectWallet';
+
+const WalletConnectContext = React.createContext<{
+  chainId?: number;
+  termsOfServiceLink?: React.ReactNode;
+  connectTimeout?: number;
+  graphQLRequests?: GraphQLRequests;
+  tokenList: Array<TokenInfo>;
+  restApiRequests?: RestApiRequests;
+  SendTokenPage?: (params: {
+    open?: boolean;
+    onClose: () => void;
+    onBack: () => void;
+  }) => React.JSX.Element;
+  encryptFiatPriceToken?: () => string;
+  loadAccountListEthBalance?: (
+    accountList: string[],
+    chainId?: number,
+  ) => Promise<Map<string, number | null>>;
+  getChain: (chainId: number) => null | {
+    name: string;
+    scanUrl: string;
+    gasToken: {
+      symbol: string;
+      decimals: number;
+    };
+    logo: React.ReactNode;
+    logoBg?: React.ReactNode;
+  };
+  getTokenLogoUrl?: (op: {
+    chainId?: number | null;
+    address?: string | null;
+    width?: number;
+    height?: number;
+  }) => string | null;
+  onConnectTimeout?: () => void;
+  switchNetwork?: (chainId: number) => void;
+  onConnected?: (chainId: number, wallet: WalletItem) => void;
+  onClickToken?: (token: TokenInfo) => void;
+}>({
+  connectTimeout: 15000,
+  tokenList: [],
+  getChain: () => {
+    throw new Error('getChain is undefined');
+  },
+});
+
+export const WalletConnectProvider = WalletConnectContext.Provider;
+
+export const useWalletConnectContext = () => {
+  return React.useContext(WalletConnectContext);
+};

package/src/components/AddressWithLinkAndCopy.tsx

@@ -1,202 +1,202 @@
-'use client';
-
-import {
-  Box,
-  BoxProps,
-  HoverOpacity,
-  HoverAddBackground,
-  HoverAddUnderLine,
-  useTheme,
-  ButtonBase,
-} from '@dodoex/components';
-import { ArrowRight, ArrowTopRightBorder } from '@dodoex/icons';
-import { useWalletStore } from '@dodoex/wallet-web3';
-import { useWalletConnectContext } from '../WalletConnectProvider';
-
-export function truncatePoolAddress(address: string): string {
-  if (address.length <= 10) {
-    return address;
-  }
-  return `${address.slice(0, 6)}...${address.slice(
-    address.length - 4,
-    address.length,
-  )}`;
-}
-
-interface AddressTextProps {
-  sx?: BoxProps['sx'];
-  truncate?: boolean;
-  address: string;
-  disabledAddress?: boolean;
-  addressHoverColor?: string;
-  addressHoverShowIcon?: boolean;
-  handleOpen?: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    type: 'address' | 'icon',
-  ) => void;
-}
-
-interface Props extends AddressTextProps {
-  showCopy?: boolean;
-  size?: 'small' | 'medium' | 'big';
-  newTab?: boolean;
-  iconSize?: number;
-  iconSpace?: number;
-  iconDarkHover?: boolean;
-  customChainId?: number;
-  onAddressClick?: (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => void;
-}
-
-export function AddressText({
-  truncate,
-  address,
-  disabledAddress,
-  sx,
-  handleOpen,
-  addressHoverColor,
-  addressHoverShowIcon,
-}: AddressTextProps & {
-  typography?: string;
-  domain?: string;
-}) {
-  if (disabledAddress) {
-    return <Box>{truncate ? truncatePoolAddress(address) : address}</Box>;
-  }
-  return (
-    <HoverAddUnderLine
-      lineSx={{
-        bottom: -1,
-      }}
-      // @ts-ignore
-      lineColor={addressHoverColor ?? (sx?.color || '')}
-      hoverSx={{
-        color: 'addressHoverColor',
-        '& svg': {
-          display: 'inline-block',
-        },
-      }}
-      className="truncate-address-link"
-    >
-      <Box
-        onClick={(evt) => {
-          handleOpen?.(evt, 'address');
-        }}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          cursor: 'pointer',
-        }}
-      >
-        {truncate ? truncatePoolAddress(address) : address}
-        {addressHoverShowIcon ? (
-          <Box
-            component={ArrowRight}
-            sx={{
-              display: 'none',
-              width: 14,
-              height: 14,
-            }}
-          />
-        ) : (
-          ''
-        )}
-      </Box>
-    </HoverAddUnderLine>
-  );
-}
-
-export function AddressWithLink({
-  address,
-  truncate,
-  size = 'medium',
-  iconSize,
-  iconSpace: iconSpaceProps,
-  sx,
-  iconDarkHover,
-  disabledAddress,
-  addressHoverColor,
-  addressHoverShowIcon,
-  customChainId,
-  handleOpen,
-  onAddressClick,
-}: Props) {
-  const theme = useTheme();
-
-  const isBig = size === 'big';
-  const isMedium = size === 'medium';
-
-  const IconHoverBox = iconDarkHover ? HoverAddBackground : HoverOpacity;
-  const getIconSpace = (isMediumRes?: boolean) => {
-    let iconSpace = isMediumRes ? 12 : 8;
-    if (iconSpaceProps) {
-      iconSpace = iconSpaceProps;
-    }
-    if (iconDarkHover) {
-      iconSpace -= 3;
-    }
-    return iconSpace;
-  };
-  // eslint-disable-next-line no-nested-ternary
-  const typography = isBig ? 'h5' : isMedium ? 'body1' : 'body2';
-  const { chainId: currentChainId } = useWalletStore();
-  const chainId = customChainId ?? currentChainId;
-  const { getChain } = useWalletConnectContext();
-
-  const handleOpenResult: AddressTextProps['handleOpen'] = (evt, type) => {
-    if (handleOpen) {
-      handleOpen(evt, type);
-      return;
-    }
-    if (chainId) {
-      evt.stopPropagation();
-      const scanUrl = getChain(chainId)?.scanUrl;
-      if (!scanUrl) return;
-      window.open(`https://${scanUrl}${address ? `/address/${address}` : ''}`);
-    }
-  };
-
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        typography,
-        color: theme.palette.text.primary,
-        lineHeight: 'normal',
-        ...(sx || {}),
-      }}
-    >
-      <AddressText
-        truncate={truncate}
-        address={address}
-        disabledAddress={disabledAddress}
-        sx={sx}
-        typography={typography}
-        handleOpen={onAddressClick ?? handleOpenResult}
-        addressHoverColor={addressHoverColor}
-        addressHoverShowIcon={addressHoverShowIcon}
-      />
-
-      <IconHoverBox
-        sx={{
-          display: 'inline-flex',
-          ml: getIconSpace(isMedium),
-          cursor: 'pointer',
-        }}
-        onClick={(evt) => {
-          handleOpenResult(evt, 'icon');
-        }}
-      >
-        <Box
-          component={ArrowTopRightBorder}
-          sx={{
-            width: iconSize || (isMedium ? 16 : 14),
-            height: iconSize || (isMedium ? 16 : 14),
-          }}
-        />
-      </IconHoverBox>
-    </Box>
-  );
-}
+'use client';
+
+import {
+  Box,
+  BoxProps,
+  HoverOpacity,
+  HoverAddBackground,
+  HoverAddUnderLine,
+  useTheme,
+  ButtonBase,
+} from '@dodoex/components';
+import { ArrowRight, ArrowTopRightBorder } from '@dodoex/icons';
+import { useWalletStore } from '@dodoex/wallet-web3';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export function truncatePoolAddress(address: string): string {
+  if (address.length <= 10) {
+    return address;
+  }
+  return `${address.slice(0, 6)}...${address.slice(
+    address.length - 4,
+    address.length,
+  )}`;
+}
+
+interface AddressTextProps {
+  sx?: BoxProps['sx'];
+  truncate?: boolean;
+  address: string;
+  disabledAddress?: boolean;
+  addressHoverColor?: string;
+  addressHoverShowIcon?: boolean;
+  handleOpen?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    type: 'address' | 'icon',
+  ) => void;
+}
+
+interface Props extends AddressTextProps {
+  showCopy?: boolean;
+  size?: 'small' | 'medium' | 'big';
+  newTab?: boolean;
+  iconSize?: number;
+  iconSpace?: number;
+  iconDarkHover?: boolean;
+  customChainId?: number;
+  onAddressClick?: (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => void;
+}
+
+export function AddressText({
+  truncate,
+  address,
+  disabledAddress,
+  sx,
+  handleOpen,
+  addressHoverColor,
+  addressHoverShowIcon,
+}: AddressTextProps & {
+  typography?: string;
+  domain?: string;
+}) {
+  if (disabledAddress) {
+    return <Box>{truncate ? truncatePoolAddress(address) : address}</Box>;
+  }
+  return (
+    <HoverAddUnderLine
+      lineSx={{
+        bottom: -1,
+      }}
+      // @ts-ignore
+      lineColor={addressHoverColor ?? (sx?.color || '')}
+      hoverSx={{
+        color: 'addressHoverColor',
+        '& svg': {
+          display: 'inline-block',
+        },
+      }}
+      className="truncate-address-link"
+    >
+      <Box
+        onClick={(evt) => {
+          handleOpen?.(evt, 'address');
+        }}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer',
+        }}
+      >
+        {truncate ? truncatePoolAddress(address) : address}
+        {addressHoverShowIcon ? (
+          <Box
+            component={ArrowRight}
+            sx={{
+              display: 'none',
+              width: 14,
+              height: 14,
+            }}
+          />
+        ) : (
+          ''
+        )}
+      </Box>
+    </HoverAddUnderLine>
+  );
+}
+
+export function AddressWithLink({
+  address,
+  truncate,
+  size = 'medium',
+  iconSize,
+  iconSpace: iconSpaceProps,
+  sx,
+  iconDarkHover,
+  disabledAddress,
+  addressHoverColor,
+  addressHoverShowIcon,
+  customChainId,
+  handleOpen,
+  onAddressClick,
+}: Props) {
+  const theme = useTheme();
+
+  const isBig = size === 'big';
+  const isMedium = size === 'medium';
+
+  const IconHoverBox = iconDarkHover ? HoverAddBackground : HoverOpacity;
+  const getIconSpace = (isMediumRes?: boolean) => {
+    let iconSpace = isMediumRes ? 12 : 8;
+    if (iconSpaceProps) {
+      iconSpace = iconSpaceProps;
+    }
+    if (iconDarkHover) {
+      iconSpace -= 3;
+    }
+    return iconSpace;
+  };
+  // eslint-disable-next-line no-nested-ternary
+  const typography = isBig ? 'h5' : isMedium ? 'body1' : 'body2';
+  const { chainId: currentChainId } = useWalletStore();
+  const chainId = customChainId ?? currentChainId;
+  const { getChain } = useWalletConnectContext();
+
+  const handleOpenResult: AddressTextProps['handleOpen'] = (evt, type) => {
+    if (handleOpen) {
+      handleOpen(evt, type);
+      return;
+    }
+    if (chainId) {
+      evt.stopPropagation();
+      const scanUrl = getChain(chainId)?.scanUrl;
+      if (!scanUrl) return;
+      window.open(`https://${scanUrl}${address ? `/address/${address}` : ''}`);
+    }
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        typography,
+        color: theme.palette.text.primary,
+        lineHeight: 'normal',
+        ...(sx || {}),
+      }}
+    >
+      <AddressText
+        truncate={truncate}
+        address={address}
+        disabledAddress={disabledAddress}
+        sx={sx}
+        typography={typography}
+        handleOpen={onAddressClick ?? handleOpenResult}
+        addressHoverColor={addressHoverColor}
+        addressHoverShowIcon={addressHoverShowIcon}
+      />
+
+      <IconHoverBox
+        sx={{
+          display: 'inline-flex',
+          ml: getIconSpace(isMedium),
+          cursor: 'pointer',
+        }}
+        onClick={(evt) => {
+          handleOpenResult(evt, 'icon');
+        }}
+      >
+        <Box
+          component={ArrowTopRightBorder}
+          sx={{
+            width: iconSize || (isMedium ? 16 : 14),
+            height: iconSize || (isMedium ? 16 : 14),
+          }}
+        />
+      </IconHoverBox>
+    </Box>
+  );
+}