@dodoex/wallet-web3-react 0.0.1-beta.0

package/src/components/AddressWithLinkAndCopy.tsx

@@ -0,0 +1,200 @@
+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>
+  );
+}

package/src/components/Dialog.tsx

@@ -0,0 +1,155 @@
+import { Modal, ModalProps } from '@mui/base/Modal';
+import { Error } from '@dodoex/icons';
+import clsx from 'clsx';
+import React from 'react';
+import { Box, BoxProps, ButtonBase, useTheme } from '@dodoex/components';
+
+export function DialogTitle({
+  children,
+  center,
+  onClose,
+  sx,
+}: React.PropsWithChildren<{
+  center?: boolean;
+  onClose?: () => void;
+  sx?: BoxProps['sx'];
+}>) {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        p: 20,
+        justifyContent: center ? 'center' : 'flex-start',
+        ...sx,
+      }}
+    >
+      <Box
+        component="h5"
+        sx={{
+          typography: 'h5',
+          margin: 0,
+          padding: 0,
+        }}
+      >
+        {children}
+      </Box>
+      {!!onClose && (
+        <Box
+          component={ButtonBase}
+          onClick={() => onClose()}
+          sx={{
+            position: 'absolute',
+            top: 20,
+            right: 20,
+            color: 'text.secondary',
+            '&:hover': {
+              color: 'text.primary',
+            },
+          }}
+        >
+          <Box
+            component={Error}
+            sx={{
+              width: 24,
+              height: 24,
+            }}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+const Backdrop = React.forwardRef<
+  HTMLDivElement,
+  { open?: boolean; className: string }
+>((props, ref) => {
+  const { open, className, ...other } = props;
+  return (
+    <Box
+      className={clsx({ 'MuiBackdrop-open': open }, className)}
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: -1,
+        backgroundColor: 'background.backdrop',
+        '-webkitTapHighlightColor': 'transparent',
+      }}
+      ref={ref}
+      {...other}
+    />
+  );
+});
+Backdrop.displayName = 'Backdrop';
+
+export function DialogBase({ className, slots, ...props }: ModalProps) {
+  return (
+    <Modal
+      className={clsx('fixed z-modal inset-0 flex', className)}
+      slots={{
+        backdrop: Backdrop,
+        ...slots,
+      }}
+      {...props}
+    />
+  );
+}
+
+export default function Dialog({
+  children,
+  sx,
+  bodySx,
+  slots,
+  width,
+  ...props
+}: Omit<ModalProps, 'children'> & {
+  children: React.ReactNode;
+  sx?: BoxProps['sx'];
+  bodySx?: BoxProps['sx'];
+  width?: number;
+}) {
+  const theme = useTheme();
+  return (
+    <Box
+      component={Modal}
+      slots={{
+        backdrop: Backdrop,
+        ...slots,
+      }}
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'flex-end',
+        [theme.breakpoints.up('tablet')]: {
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        zIndex: (theme.zIndex as any)?.modal ?? 100,
+        ...sx,
+      }}
+      {...props}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          backgroundColor: 'background.paper',
+          borderTopWidth: 1,
+          maxHeight: '80vh',
+          borderRadius: theme.spacing(6, 6, 0, 0),
+          [theme.breakpoints.up('tablet')]: {
+            minWidth: width ?? 420,
+            width,
+            borderRadius: 12,
+          },
+          ...bodySx,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/components/TokenLogo.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useEffect, useState } from 'react';
+import Identicon from 'identicon.js';
+import { Box, BoxProps } from '@dodoex/components';
+import { useWalletConnectContext } from '../WalletConnectProvider';
+
+export interface TokenInfo {
+  readonly chainId: number;
+  readonly address: string;
+  readonly symbol?: string;
+  readonly name?: string;
+  readonly decimals?: number;
+  readonly logoURI?: string;
+}
+
+export interface TokenLogoProps {
+  address?: string;
+  logoURI?: string;
+  width?: number;
+  height?: number;
+  marginRight?: number;
+  url?: string;
+  zIndex?: number;
+  sx?: BoxProps['sx'];
+  chainId?: number;
+  noShowChain?: boolean;
+  noBorder?: boolean;
+  chainSize?: number;
+  logoOffset?: number;
+}
+
+export default function TokenLogo({
+  width = 24,
+  height = 24,
+  marginRight = 8,
+  zIndex,
+  address,
+  logoURI,
+  sx,
+  chainId,
+  noBorder,
+  chainSize = 12,
+  logoOffset: logoOffsetProps,
+}: TokenLogoProps): React.ReactElement {
+  const [loaded, setLoaded] = useState(false);
+  const [defaultUrl, setDefaultUrl] = useState('');
+  const [error, setError] = useState(false);
+  const onLoad = useCallback(() => setLoaded(true), []);
+  const symbol = '';
+  const initial = symbol?.charAt(0).toUpperCase();
+
+  const { getTokenLogoUrl } = useWalletConnectContext();
+  const logoUrl =
+    getTokenLogoUrl?.({
+      chainId,
+      address,
+      width,
+      height,
+    }) || logoURI;
+
+  let logoOffset = logoOffsetProps;
+  if (!logoOffset) {
+    logoOffset = chainSize / 2 < 8 ? chainSize / 2 : chainSize - 8;
+  }
+
+  useEffect(() => {
+    setError(false);
+  }, [address, logoUrl]);
+
+  useEffect(() => {
+    try {
+      let addr = address;
+      if (addr && addr.length < 15) {
+        addr = addr.padEnd(15, '0');
+      }
+      if (addr) {
+        const data = new Identicon(addr, {
+          size: width,
+          format: 'svg',
+          margin: 0.2,
+          background: [255, 234, 4, 255],
+        }).toString();
+        setDefaultUrl(`data:image/svg+xml;base64,${data}`);
+      }
+    } catch (err) {
+      // address is empty
+      console.error('generate Identicon error: ', err);
+    }
+  }, [address, width]);
+
+  const showChain = false;
+
+  const logo = (
+    <Box
+      sx={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width,
+        height,
+        borderRadius: '50%',
+        ...(noBorder
+          ? {}
+          : {
+              border: 'solid 1px',
+              borderColor: 'border.main',
+            }),
+        flexShrink: 0,
+        ...(showChain
+          ? {}
+          : {
+              marginRight,
+              zIndex,
+              ...sx,
+            }),
+      }}
+    >
+      {!loaded && (
+        <Box
+          sx={{
+            typography: 'ht',
+            height: '100%',
+            width: '100%',
+            borderRadius: '50%',
+            border: 'transparent 2px solid',
+            borderColor: 'text.primary',
+            color: 'text.primary',
+
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {initial}
+        </Box>
+      )}
+      <Box
+        component="img"
+        src={!logoUrl || error ? defaultUrl : logoUrl}
+        onLoad={onLoad}
+        onError={(e: any) => {
+          const target = e.target as HTMLImageElement;
+          if (address && defaultUrl) {
+            setError(true);
+          }
+          target.onerror = null;
+        }}
+        sx={{
+          position: 'absolute',
+          top: '0',
+          bottom: '0',
+          left: '0',
+          right: '0',
+          borderRadius: '50%',
+          overflow: 'hidden',
+          width: '100%',
+          height: '100%',
+        }}
+      />
+    </Box>
+  );
+
+  return logo;
+}

package/src/components/WalletTag.tsx

@@ -0,0 +1,113 @@
+import { alpha, Box, RotatingIcon, useTheme } from '@dodoex/components';
+import { WalletType } from '@dodoex/wallet-web3';
+import { Trans } from '@lingui/macro';
+import { WalletItem } from '../hooks/useConnectWalet';
+
+export default function WalletTag({
+  loading,
+  wallet,
+  isChecked,
+  installed,
+}: {
+  loading: boolean;
+  wallet: WalletItem;
+  isChecked: boolean;
+  installed: boolean;
+}) {
+  const theme = useTheme();
+  const greenColor = theme.palette.success.main;
+  const connectedColor = theme.palette.mode === 'light' ? '#EB8D27' : '#FFE804';
+  const connectedColorBg = alpha('#FFE804', 0.1);
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4,
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <RotatingIcon
+          sx={{
+            width: 18,
+            height: 18,
+            color: 'text.secondary',
+          }}
+        />
+        <Trans>Connecting</Trans>··
+      </Box>
+    );
+  }
+
+  if (isChecked) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: connectedColorBg,
+          color: connectedColor,
+        }}
+      >
+        <Trans>Connected</Trans>
+      </Box>
+    );
+  }
+
+  if (wallet.isLastConnection) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <Trans>Last connection</Trans>
+      </Box>
+    );
+  }
+
+  if (wallet.currentType === WalletType.SocialLogin) {
+    return (
+      <Box
+        sx={{
+          mt: 4,
+          padding: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(greenColor, 0.1),
+          color: greenColor,
+        }}
+      >
+        New
+      </Box>
+    );
+  }
+
+  if (installed) {
+    return (
+      <Box
+        sx={{
+          p: theme.spacing(4, 8),
+          borderRadius: 6,
+          typography: 'body2',
+          backgroundColor: alpha(theme.palette.text.primary, 0.1),
+          color: 'text.secondary',
+        }}
+      >
+        <Trans>Installed Wallet</Trans>
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/constants/localstorage.ts

@@ -0,0 +1,22 @@
+const TOKEN_FIAT_PRICE_LIST = 'DODO_WIDGET_TOKEN_FIAT_PRICE_LIST';
+interface FiatPriceCacheList {
+  [k: string]: number;
+}
+export function setTokenFiatPriceList(value: FiatPriceCacheList) {
+  const oldList = getTokenFiatPriceList();
+  const newList = {
+    ...oldList,
+    ...value,
+  };
+  localStorage.setItem(TOKEN_FIAT_PRICE_LIST, JSON.stringify(newList));
+}
+export function getTokenFiatPriceList(): FiatPriceCacheList {
+  const storage = localStorage.getItem(TOKEN_FIAT_PRICE_LIST);
+  try {
+    if (!storage) return {};
+    return JSON.parse(storage);
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+}