@dodoex/wallet-web3-react 0.2.0 → 0.3.0

package/src/components/Dialog.tsx

@@ -1,156 +1,158 @@
-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),
-          width: '100%',
-          [theme.breakpoints.up('tablet')]: {
-            minWidth: width ?? 420,
-            width,
-            borderRadius: 12,
-          },
-          ...bodySx,
-        }}
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-}
+'use client';
+
+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),
+          width: '100%',
+          [theme.breakpoints.up('tablet')]: {
+            minWidth: width ?? 420,
+            width,
+            borderRadius: 12,
+          },
+          ...bodySx,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/components/TokenLogo.tsx

@@ -1,165 +1,167 @@
-/* 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;
-}
+'use client';
+
+/* 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;
+}