diff --git a/examples/test/package.json b/examples/test/package.json index a5c2351a..0941c8c4 100644 --- a/examples/test/package.json +++ b/examples/test/package.json @@ -13,7 +13,8 @@ "@totejs/walletkit": "workspace:*", "next": "^13", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "vconsole": "^3.15.1" }, "devDependencies": { "@types/node": "^20", diff --git a/examples/test/pages/_app.tsx b/examples/test/pages/_app.tsx index d5be91da..0ee41f56 100644 --- a/examples/test/pages/_app.tsx +++ b/examples/test/pages/_app.tsx @@ -21,12 +21,13 @@ import { mathWallet, binanceWeb3Wallet, coinbaseWallet, + tokenPocket, } from '@totejs/walletkit/wallets'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; const client = createClient( getDefaultConfig({ - autoConnect: false, + autoConnect: true, appName: 'WalletKit', // WalletConnect 2.0 requires a projectId which you can create quickly @@ -42,6 +43,7 @@ const client = createClient( binanceWeb3Wallet(), coinbaseWallet(), walletConnect(), + tokenPocket(), ], }), ); @@ -54,13 +56,19 @@ export default function App({ Component, pageProps }: AppProps) { const [mode, setMode] = useState('light'); const nextMode = mode === 'light' ? 'dark' : 'light'; + useEffect(() => { + // eslint-disable-next-line @typescript-eslint/no-var-requires + const VConsole = require('vconsole'); + new VConsole(); + }, []); + return (
mode: {mode}
- + diff --git a/examples/test/pages/chains.ts b/examples/test/pages/chains.ts index 8171bbe7..2c2672cb 100644 --- a/examples/test/pages/chains.ts +++ b/examples/test/pages/chains.ts @@ -1,50 +1,50 @@ import { bsc, mainnet } from 'wagmi/chains'; export const chains = [ - { - id: 204, - name: 'opBNB Mainnet', - network: 'opBNB Mainnet', - nativeCurrency: { - name: 'tcBNB', - symbol: 'tcBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - public: { - http: ['https://opbnb-mainnet-rpc.bnbchain.org'], - }, - }, - blockExplorers: { - etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, - }, - }, - { - id: 97, - name: 'BSC Testnet', - network: 'BSC Testnet', - nativeCurrency: { - name: 'tBNB', - symbol: 'tBNB', - decimals: 18, - }, - rpcUrls: { - default: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - public: { - http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], - }, - }, - blockExplorers: { - etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, - }, - }, + // { + // id: 204, + // name: 'opBNB Mainnet', + // network: 'opBNB Mainnet', + // nativeCurrency: { + // name: 'tcBNB', + // symbol: 'tcBNB', + // decimals: 18, + // }, + // rpcUrls: { + // default: { + // http: ['https://opbnb-mainnet-rpc.bnbchain.org'], + // }, + // public: { + // http: ['https://opbnb-mainnet-rpc.bnbchain.org'], + // }, + // }, + // blockExplorers: { + // etherscan: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, + // default: { name: 'opBNBScan', url: `https://mainnet.opbnbscan.com` }, + // }, + // }, + // { + // id: 97, + // name: 'BSC Testnet', + // network: 'BSC Testnet', + // nativeCurrency: { + // name: 'tBNB', + // symbol: 'tBNB', + // decimals: 18, + // }, + // rpcUrls: { + // default: { + // http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], + // }, + // public: { + // http: [`https://data-seed-prebsc-1-s1.binance.org:8545`], + // }, + // }, + // blockExplorers: { + // etherscan: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, + // default: { name: 'BSC Testnet Scan', url: `https://testnet.bscscan.com` }, + // }, + // }, bsc, mainnet, ]; diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 8ca012ec..31070cb1 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -24,22 +24,7 @@ const client = createClient( walletConnectProjectId: 'e68a1816d39726c2afabf05661a32767', chains, - connectors: [ - trustWallet(), - metaMask(), - walletConnect({ - connectorOptions: { - showQrModal: true, - qrModalOptions: { - explorerRecommendedWalletIds: [ - '8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4', - 'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', - '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', - ], - }, - }, - }), - ], + connectors: [trustWallet(), metaMask(), walletConnect()], }), ); diff --git a/packages/walletkit/src/base/components/Box/index.tsx b/packages/walletkit/src/base/components/Box/index.tsx index d02e5184..3467f35a 100644 --- a/packages/walletkit/src/base/components/Box/index.tsx +++ b/packages/walletkit/src/base/components/Box/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { clsBox } from './styles.css'; -import { cx } from '../../utils/css'; +import { cx } from '@/base/utils/css'; type HTMLProperties = Omit, 'as'>; diff --git a/packages/walletkit/src/base/components/Box/styles.css.ts b/packages/walletkit/src/base/components/Box/styles.css.ts index c99f4c5f..cc74e3ae 100644 --- a/packages/walletkit/src/base/components/Box/styles.css.ts +++ b/packages/walletkit/src/base/components/Box/styles.css.ts @@ -1,6 +1,7 @@ import { style } from '@vanilla-extract/css'; export const clsBox = style({ + WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', margin: 0, padding: 0, boxSizing: 'border-box', diff --git a/packages/walletkit/src/base/components/Button/index.tsx b/packages/walletkit/src/base/components/Button/index.tsx index 6d68f667..8e96b2a0 100644 --- a/packages/walletkit/src/base/components/Button/index.tsx +++ b/packages/walletkit/src/base/components/Button/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { cx } from '../../utils/css'; import { clsButton } from './styles.css'; import { Box, BoxProps } from '../Box'; +import { cx } from '@/base/utils/css'; export type ButtonProps = BoxProps; diff --git a/packages/walletkit/src/base/components/IconButton/index.tsx b/packages/walletkit/src/base/components/IconButton/index.tsx index d18c6989..99dc47d2 100644 --- a/packages/walletkit/src/base/components/IconButton/index.tsx +++ b/packages/walletkit/src/base/components/IconButton/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { cx } from '../../utils/css'; -import { Button, ButtonProps } from '../Button'; +import { ButtonProps, Button } from '../Button'; import { clsIconButton } from './styles.css'; +import { cx } from '@/base/utils/css'; export interface IconButtonProps extends ButtonProps { icon: React.ReactElement; diff --git a/packages/walletkit/src/base/components/IconButton/styles.css.ts b/packages/walletkit/src/base/components/IconButton/styles.css.ts index ca3af2a5..26eccc4d 100644 --- a/packages/walletkit/src/base/components/IconButton/styles.css.ts +++ b/packages/walletkit/src/base/components/IconButton/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../utils/css'; export const clsIconButton = style({ width: 24, diff --git a/packages/walletkit/src/base/components/Link/index.tsx b/packages/walletkit/src/base/components/Link/index.tsx index b0c80ed1..da596156 100644 --- a/packages/walletkit/src/base/components/Link/index.tsx +++ b/packages/walletkit/src/base/components/Link/index.tsx @@ -1,4 +1,4 @@ -import { cx } from '../../utils/css'; +import { cx } from '@/base/utils/css'; import { Box, BoxProps } from '../Box'; import { clsLink } from './styles.css'; diff --git a/packages/walletkit/src/base/components/Link/styles.css.ts b/packages/walletkit/src/base/components/Link/styles.css.ts index acb7cb1b..f9c3d341 100644 --- a/packages/walletkit/src/base/components/Link/styles.css.ts +++ b/packages/walletkit/src/base/components/Link/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../utils/css'; export const clsLink = style({ textDecoration: 'none', diff --git a/packages/walletkit/src/base/components/Modal/ModalBody/index.tsx b/packages/walletkit/src/base/components/Modal/ModalBody/index.tsx index 607b600b..e9596356 100644 --- a/packages/walletkit/src/base/components/Modal/ModalBody/index.tsx +++ b/packages/walletkit/src/base/components/Modal/ModalBody/index.tsx @@ -1,6 +1,6 @@ -import { cx } from '../../../utils/css'; -import { Box, BoxProps } from '../../Box'; +import { cx } from '@/base/utils/css'; import { clsModalBody } from './styles.css'; +import { Box, BoxProps } from '../../Box'; export type ModalBodyProps = BoxProps; diff --git a/packages/walletkit/src/base/components/Modal/ModalFooter/index.tsx b/packages/walletkit/src/base/components/Modal/ModalFooter/index.tsx index 3fe4a123..7e45157a 100644 --- a/packages/walletkit/src/base/components/Modal/ModalFooter/index.tsx +++ b/packages/walletkit/src/base/components/Modal/ModalFooter/index.tsx @@ -1,4 +1,4 @@ -import { cx } from '../../../utils/css'; +import { cx } from '@/base/utils/css'; import { Box, BoxProps } from '../../Box'; import { clsModalFooter } from './styles.css'; diff --git a/packages/walletkit/src/base/components/Modal/ModalHeader/index.tsx b/packages/walletkit/src/base/components/Modal/ModalHeader/index.tsx index 15e3b68d..250ffe6c 100644 --- a/packages/walletkit/src/base/components/Modal/ModalHeader/index.tsx +++ b/packages/walletkit/src/base/components/Modal/ModalHeader/index.tsx @@ -1,6 +1,6 @@ -import { cx } from '../../../utils/css'; -import { Box, BoxProps } from '../../Box'; +import { cx } from '@/base/utils/css'; import { clsModalHeader } from './styles.css'; +import { Box, BoxProps } from '../../Box'; export type ModalHeaderProps = BoxProps; diff --git a/packages/walletkit/src/base/components/Modal/ModalHeader/styles.css.ts b/packages/walletkit/src/base/components/Modal/ModalHeader/styles.css.ts index 5bb9c294..744aab3b 100644 --- a/packages/walletkit/src/base/components/Modal/ModalHeader/styles.css.ts +++ b/packages/walletkit/src/base/components/Modal/ModalHeader/styles.css.ts @@ -1,3 +1,4 @@ +import { MOBILE_MEDIA } from '@/base/constant'; import { style } from '@vanilla-extract/css'; export const clsModalHeader = style({ @@ -7,4 +8,11 @@ export const clsModalHeader = style({ lineHeight: '29px', justifyContent: 'center', textAlign: 'center', + + '@media': { + [MOBILE_MEDIA]: { + fontSize: 18, + lineHeight: '22px', + }, + }, }); diff --git a/packages/walletkit/src/base/components/Modal/index.tsx b/packages/walletkit/src/base/components/Modal/index.tsx index 14bf1b83..e1dc6e67 100644 --- a/packages/walletkit/src/base/components/Modal/index.tsx +++ b/packages/walletkit/src/base/components/Modal/index.tsx @@ -1,9 +1,9 @@ -import { cx } from '../../utils/css'; -import { Box, BoxProps } from '../Box'; +import { useKeyDown } from '@/base/hooks/useKeyDown'; +import { cx } from '@/base/utils/css'; +import { BoxProps, Box } from '../Box'; import { Portal } from '../Portal'; -import { clsModal, clsModalContent, clsModalOverlay } from './styles.css'; -import { Animation } from '../Animation'; -import { useKeyDown } from '../../hooks/useKeyDown'; +import { Transition } from '../Transition'; +import { clsModal, clsModalOverlay, clsModalContent } from './styles.css'; export interface ModalProps extends BoxProps { isOpen: boolean; @@ -36,7 +36,7 @@ export function Modal(props: ModalProps) { return ( - + - + ); } diff --git a/packages/walletkit/src/base/components/Modal/styles.css.ts b/packages/walletkit/src/base/components/Modal/styles.css.ts index bed9f8aa..5758cf55 100644 --- a/packages/walletkit/src/base/components/Modal/styles.css.ts +++ b/packages/walletkit/src/base/components/Modal/styles.css.ts @@ -1,5 +1,6 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../utils/css'; export const clsModal = style({ zIndex: cssVar('modal', 'zIndices'), @@ -16,6 +17,11 @@ export const clsModal = style({ padding: 0, transition: 'all 0.3s', boxSizing: 'border-box', + '@media': { + [MOBILE_MEDIA]: { + alignItems: 'flex-end', + }, + }, }); export const clsModalOverlay = style({ @@ -32,4 +38,13 @@ export const clsModalContent = style({ width: 'calc(100% - 32px)', maxWidth: 484, borderRadius: cssVar('modal', 'radii'), + '@media': { + [MOBILE_MEDIA]: { + width: '100%', + maxWidth: 'unset', + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + paddingBottom: 40, + }, + }, }); diff --git a/packages/walletkit/src/base/components/Animation/fade.css.ts b/packages/walletkit/src/base/components/Transition/fade.css.ts similarity index 100% rename from packages/walletkit/src/base/components/Animation/fade.css.ts rename to packages/walletkit/src/base/components/Transition/fade.css.ts diff --git a/packages/walletkit/src/base/components/Animation/index.tsx b/packages/walletkit/src/base/components/Transition/index.tsx similarity index 88% rename from packages/walletkit/src/base/components/Animation/index.tsx rename to packages/walletkit/src/base/components/Transition/index.tsx index 3a8d806e..8c7d8c1f 100644 --- a/packages/walletkit/src/base/components/Animation/index.tsx +++ b/packages/walletkit/src/base/components/Transition/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { cx } from '../../utils/css'; +import { cx } from '@/base/utils/css'; import { clsFadeIn, clsFadeOut } from './fade.css'; import { clsToastSlideIn, clsToastSlideOut } from './toastSlide.css'; @@ -8,14 +8,14 @@ const animationMap = { 'toast-slide': [clsToastSlideOut, clsToastSlideIn], }; -export interface AnimationProps { +export interface TransitionProps { in: boolean; children: React.ReactElement; variant?: 'fade' | 'toast-slide'; onExit?: () => void; } -export const Animation = (props: AnimationProps) => { +export const Transition = (props: TransitionProps) => { const { in: show, children, variant = 'fade', onExit } = props; const { className, onAnimationEnd, ...restProps } = children.props; diff --git a/packages/walletkit/src/base/components/Animation/toastSlide.css.ts b/packages/walletkit/src/base/components/Transition/toastSlide.css.ts similarity index 100% rename from packages/walletkit/src/base/components/Animation/toastSlide.css.ts rename to packages/walletkit/src/base/components/Transition/toastSlide.css.ts diff --git a/packages/walletkit/src/base/components/toast/ToastComponent.tsx b/packages/walletkit/src/base/components/toast/ToastComponent.tsx index 091b4779..989b7353 100644 --- a/packages/walletkit/src/base/components/toast/ToastComponent.tsx +++ b/packages/walletkit/src/base/components/toast/ToastComponent.tsx @@ -1,11 +1,11 @@ import { useEffect, useState } from 'react'; +import { clsIconWrapper, clsDescWrapper, clsContainer } from './styles.css'; +import { ErrorIcon } from '@/base/icons/ErrorIcon'; +import { InfoIcon } from '@/base/icons/InfoIcon'; import { ToastOptions } from '.'; -import { ToastManager } from './ToastManager'; import { Box } from '../Box'; -import { clsContainer, clsDescWrapper, clsIconWrapper } from './styles.css'; -import { Animation } from '../Animation'; -import { InfoIcon } from '../../icons/InfoIcon'; -import { ErrorIcon } from '../../icons/ErrorIcon'; +import { Transition } from '../Transition'; +import { ToastManager } from './ToastManager'; const iconMap: Record = { info: , @@ -43,13 +43,13 @@ export function ToastComponent(props: ToastOptions) { }; return ( - + {iconMap[variant]} {description} - + ); } diff --git a/packages/walletkit/src/base/components/toast/ToastProvider.tsx b/packages/walletkit/src/base/components/toast/ToastProvider.tsx index b67a0c32..e2ac11b8 100644 --- a/packages/walletkit/src/base/components/toast/ToastProvider.tsx +++ b/packages/walletkit/src/base/components/toast/ToastProvider.tsx @@ -5,7 +5,7 @@ import { ToastOptions } from '.'; import { ToastComponent } from './ToastComponent'; import { Box } from '../Box'; import { clsToastRoot } from './styles.css'; -import { cx } from '../../utils/css'; +import { cx } from '@/base/utils/css'; export const ToastProvider = () => { const [toastList, setToastList] = useState([]); diff --git a/packages/walletkit/src/base/components/toast/styles.css.ts b/packages/walletkit/src/base/components/toast/styles.css.ts index dd155883..4810f48b 100644 --- a/packages/walletkit/src/base/components/toast/styles.css.ts +++ b/packages/walletkit/src/base/components/toast/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../utils/css'; export const clsToastRoot = style({ position: 'fixed', diff --git a/packages/walletkit/src/base/constant/index.ts b/packages/walletkit/src/base/constant/index.ts new file mode 100644 index 00000000..57562867 --- /dev/null +++ b/packages/walletkit/src/base/constant/index.ts @@ -0,0 +1 @@ +export const MOBILE_MEDIA = 'screen and (max-width: 767px)'; diff --git a/packages/walletkit/src/base/hooks/useResponsive.ts b/packages/walletkit/src/base/hooks/useResponsive.ts new file mode 100644 index 00000000..af156a15 --- /dev/null +++ b/packages/walletkit/src/base/hooks/useResponsive.ts @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import { MOBILE_MEDIA } from '../constant'; + +export function useMediaQuery(query: string) { + const [isMatched, setIsMatched] = useState(false); + + useEffect(() => { + const onChange = () => { + const isMatched = window.matchMedia(query).matches; + setIsMatched(isMatched); + }; + + onChange(); + + const matchMedia = window.matchMedia(query); + matchMedia.addEventListener('change', onChange); + return () => { + matchMedia.removeEventListener('change', onChange); + }; + }, [query]); + + return isMatched; +} + +export const useResponsive = () => { + const isMobileLayout = useMediaQuery(MOBILE_MEDIA); + + return { + isMobileLayout, + }; +}; diff --git a/packages/walletkit/src/base/icons/AlertIcon.tsx b/packages/walletkit/src/base/icons/AlertIcon.tsx index 1ebad408..5f035e43 100644 --- a/packages/walletkit/src/base/icons/AlertIcon.tsx +++ b/packages/walletkit/src/base/icons/AlertIcon.tsx @@ -1,4 +1,6 @@ -export const AlertIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const AlertIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const BackIcon = (props: SVGIconProps) => { return ( ) => { +export const ChainSpinnerIcon = (props: SVGIconProps) => { const stopColor = cssVar('primaryActive'); return ( diff --git a/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx b/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx index db9ce24e..a6509a2e 100644 --- a/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx +++ b/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx @@ -1,6 +1,7 @@ +import { SVGIconProps } from '@/types'; import { cssVar } from '../utils/css'; -export interface CircleLoadingIconProps extends React.SVGProps { +export interface CircleLoadingIconProps extends SVGIconProps { thickness?: number; endColor?: string; } diff --git a/packages/walletkit/src/base/icons/CloseIcon.tsx b/packages/walletkit/src/base/icons/CloseIcon.tsx index a9e4df73..ca1f5bf7 100644 --- a/packages/walletkit/src/base/icons/CloseIcon.tsx +++ b/packages/walletkit/src/base/icons/CloseIcon.tsx @@ -1,4 +1,6 @@ -export const CloseIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const CloseIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const CopyIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const DownArrowIcon = (props: SVGIconProps) => { return ( ) => { +export const ErrorIcon = (props: SVGIconProps) => { const errorColor = cssVar('error'); return ( diff --git a/packages/walletkit/src/base/icons/ExitIcon.tsx b/packages/walletkit/src/base/icons/ExitIcon.tsx index 49a2e38b..02e711ac 100644 --- a/packages/walletkit/src/base/icons/ExitIcon.tsx +++ b/packages/walletkit/src/base/icons/ExitIcon.tsx @@ -1,4 +1,6 @@ -export const ExitIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const ExitIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const ForwardIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const InfoIcon = (props: SVGIconProps) => { return ( ) => { +import { SVGIconProps } from '@/types'; + +export const RefreshIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/SuccessIcon.tsx b/packages/walletkit/src/base/icons/SuccessIcon.tsx index e4e9db96..0afde56b 100644 --- a/packages/walletkit/src/base/icons/SuccessIcon.tsx +++ b/packages/walletkit/src/base/icons/SuccessIcon.tsx @@ -1,4 +1,6 @@ -export const SuccessIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const SuccessIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/WalletIcon.tsx b/packages/walletkit/src/base/icons/WalletIcon.tsx index 7f5dd592..f0ff23dd 100644 --- a/packages/walletkit/src/base/icons/WalletIcon.tsx +++ b/packages/walletkit/src/base/icons/WalletIcon.tsx @@ -1,4 +1,6 @@ -export const WalletIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const WalletIcon = (props: SVGIconProps) => { return ( ) { +import { SVGIconProps } from '@/types'; + +export function BscIcon(props: SVGIconProps) { return ( diff --git a/packages/walletkit/src/chains/icons/ComboIcon.tsx b/packages/walletkit/src/chains/icons/ComboIcon.tsx index 497176fe..2a0d10bb 100644 --- a/packages/walletkit/src/chains/icons/ComboIcon.tsx +++ b/packages/walletkit/src/chains/icons/ComboIcon.tsx @@ -1,4 +1,6 @@ -export function ComboIcon(props: React.SVGProps) { +import { SVGIconProps } from '@/types'; + +export function ComboIcon(props: SVGIconProps) { return ( diff --git a/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx b/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx index d81be599..992eec6f 100644 --- a/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx +++ b/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx @@ -1,4 +1,6 @@ -export const UnknownChainIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const UnknownChainIcon = (props: SVGIconProps) => { return ( , + logo: , }, { id: 97, name: 'BSC Testnet', - logo: , + logo: , }, { id: 91715, diff --git a/packages/walletkit/src/components/Avatar/index.tsx b/packages/walletkit/src/components/Avatar/index.tsx index f31813d7..a16b38f5 100644 --- a/packages/walletkit/src/components/Avatar/index.tsx +++ b/packages/walletkit/src/components/Avatar/index.tsx @@ -1,7 +1,7 @@ +import { BoxProps, Box } from '@/base/components/Box'; +import { cx } from '@/index'; import { useEnsAddress, useEnsAvatar, useEnsName } from 'wagmi'; -import { cx } from '../..'; -import { Box, BoxProps } from '../../base/components/Box'; -import { clsAvatar, clsAvatarDefault, clsAvatarImg } from './styles.css'; +import { clsAvatar, clsAvatarImg, clsAvatarDefault } from './styles.css'; export interface AvatarProps extends BoxProps { address?: `0x${string}`; diff --git a/packages/walletkit/src/components/CopyToClipboard/index.tsx b/packages/walletkit/src/components/CopyToClipboard/index.tsx index 11e8a600..191790ba 100644 --- a/packages/walletkit/src/components/CopyToClipboard/index.tsx +++ b/packages/walletkit/src/components/CopyToClipboard/index.tsx @@ -1,9 +1,9 @@ +import { BoxProps, Box } from '@/base/components/Box'; +import { useClipboard } from '@/base/hooks/useClipboard'; +import { CopyIcon } from '@/base/icons/CopyIcon'; +import { SuccessIcon } from '@/base/icons/SuccessIcon'; +import { cx, cssVar } from '@/index'; import { useEffect } from 'react'; -import { Box, BoxProps } from '../../base/components/Box'; -import { useClipboard } from '../../base/hooks/useClipboard'; -import { SuccessIcon } from '../../base/icons/SuccessIcon'; -import { CopyIcon } from '../../base/icons/CopyIcon'; -import { cssVar, cx } from '../../base/utils/css'; import { clsCopy } from './styles.css'; export interface CopyToClipboardProps extends BoxProps { diff --git a/packages/walletkit/src/components/CustomQRCode/QRCode.tsx b/packages/walletkit/src/components/CustomQRCode/QRCode.tsx index 1fe2feaa..3e4fe4e7 100644 --- a/packages/walletkit/src/components/CustomQRCode/QRCode.tsx +++ b/packages/walletkit/src/components/CustomQRCode/QRCode.tsx @@ -25,7 +25,7 @@ export interface QRCodeProps { } export function QRCode(props: QRCodeProps) { - const { ecl = 'M', clearSize = 52, size = 212, uri } = props; + const { ecl = 'M', clearSize = 40, size = 212, uri } = props; const dots = useMemo(() => { const dots: ReactElement[] = []; diff --git a/packages/walletkit/src/components/CustomQRCode/QRCodePlaceHolder/index.tsx b/packages/walletkit/src/components/CustomQRCode/QRCodePlaceHolder/index.tsx index 9d359d67..a1b077fc 100644 --- a/packages/walletkit/src/components/CustomQRCode/QRCodePlaceHolder/index.tsx +++ b/packages/walletkit/src/components/CustomQRCode/QRCodePlaceHolder/index.tsx @@ -1,4 +1,4 @@ -import { Box } from '../../../base/components/Box'; +import { Box } from '@/base/components/Box'; import { clsContainer, clsCorner } from './styles.css'; export function QRCodePlaceHolder() { diff --git a/packages/walletkit/src/components/CustomQRCode/index.tsx b/packages/walletkit/src/components/CustomQRCode/index.tsx index 5dd74444..778a876a 100644 --- a/packages/walletkit/src/components/CustomQRCode/index.tsx +++ b/packages/walletkit/src/components/CustomQRCode/index.tsx @@ -1,9 +1,9 @@ import { ReactElement } from 'react'; -import { Box, BoxProps } from '../../base/components/Box'; import { QRCode } from './QRCode'; import { QRCodePlaceHolder } from './QRCodePlaceHolder'; import { clsQrCodeContainer, clsQrCodeLogo, clsQrCodeWrapper } from './styles.css'; -import { cx } from '../../base/utils/css'; +import { Box, BoxProps } from '@/base/components/Box'; +import { cx } from '@/index'; export interface CustomQRCodeProps extends BoxProps { logo?: ReactElement; @@ -12,7 +12,7 @@ export interface CustomQRCodeProps extends BoxProps { } export function CustomQRCode(props: CustomQRCodeProps) { - const { className, logo, logoSize = 52, value, ...restProps } = props; + const { className, logo, logoSize = 44, value, ...restProps } = props; return ( @@ -23,6 +23,7 @@ export function CustomQRCode(props: CustomQRCodeProps) { style={{ width: logoSize, height: logoSize, + opacity: value ? 1 : 0.3, }} > {logo} diff --git a/packages/walletkit/src/components/CustomQRCode/styles.css.ts b/packages/walletkit/src/components/CustomQRCode/styles.css.ts index 82d780bc..8673828c 100644 --- a/packages/walletkit/src/components/CustomQRCode/styles.css.ts +++ b/packages/walletkit/src/components/CustomQRCode/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { globalStyle, style } from '@vanilla-extract/css'; -import { cssVar } from '../../base/utils/css'; export const clsQrCodeContainer = style({ display: 'flex', @@ -26,6 +26,8 @@ export const clsQrCodeLogo = style({ top: '50%', transform: 'translate(-50%, -50%)', display: 'inline-flex', + borderRadius: 12, + overflow: 'hidden', }); globalStyle(`${clsQrCodeLogo} > svg`, { diff --git a/packages/walletkit/src/components/DisconnectButton/index.tsx b/packages/walletkit/src/components/DisconnectButton/index.tsx index 3e14fffb..044548c8 100644 --- a/packages/walletkit/src/components/DisconnectButton/index.tsx +++ b/packages/walletkit/src/components/DisconnectButton/index.tsx @@ -1,9 +1,9 @@ +import { ButtonProps, Button } from '@/base/components/Button'; +import { ExitIcon } from '@/base/icons/ExitIcon'; +import { cx } from '@/index'; import { useConnect, useDisconnect } from 'wagmi'; -import { Button, ButtonProps } from '../../base/components/Button'; -import { ExitIcon } from '../../base/icons/ExitIcon'; -import { cx } from '../../base/utils/css'; +import { useModal } from '../ModalProvider/context'; import { clsContainer } from './styles.css'; -import { useModal } from '../..'; export type DisconnectButtonProps = ButtonProps; diff --git a/packages/walletkit/src/components/DisconnectButton/styles.css.ts b/packages/walletkit/src/components/DisconnectButton/styles.css.ts index fe446934..b48c10d2 100644 --- a/packages/walletkit/src/components/DisconnectButton/styles.css.ts +++ b/packages/walletkit/src/components/DisconnectButton/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../base/utils/css'; export const clsContainer = style({ height: 50, diff --git a/packages/walletkit/src/components/ModalProvider/index.tsx b/packages/walletkit/src/components/ModalProvider/index.tsx index edf0a0cf..ebc1d758 100644 --- a/packages/walletkit/src/components/ModalProvider/index.tsx +++ b/packages/walletkit/src/components/ModalProvider/index.tsx @@ -1,11 +1,11 @@ +import { toast } from '@/base/components/toast'; +import { useDisclosure } from '@/base/hooks/useDisclosure'; import { useEffect, useMemo, useState } from 'react'; -import { useDisclosure } from '../../base/hooks/useDisclosure'; -import { ModalContext, OpenSwitchNetworkOptions } from './context'; -import { useRouter } from '../RouteProvider/context'; -import { useAccount, useNetwork } from 'wagmi'; +import { useAccount, useNetwork, useConnect } from 'wagmi'; import { routes } from '../RouteProvider'; -import { toast } from '../../base/components/toast'; -import { useWalletKitContext } from '../..'; +import { useRouter } from '../RouteProvider/context'; +import { useWalletKitContext } from '../WalletKitProvider/context'; +import { OpenSwitchNetworkOptions, ModalContext } from './context'; export interface ModalProviderProps { children: React.ReactNode; @@ -37,9 +37,11 @@ export function ModalProvider(props: ModalProviderProps) { closeOnOverlayClick: closeModalOnOverlayClick, isOpen, onClose() { - router.reset(); - setIsClosable(true); onClose(); + setTimeout(() => { + setIsClosable(true); + router.reset(); + }, 300); }, onOpen() { router.push(routes.CONNECTORS); diff --git a/packages/walletkit/src/components/Navbar/index.tsx b/packages/walletkit/src/components/Navbar/index.tsx index 19a43e9c..b4cf0577 100644 --- a/packages/walletkit/src/components/Navbar/index.tsx +++ b/packages/walletkit/src/components/Navbar/index.tsx @@ -1,11 +1,11 @@ -import { cx } from '../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { IconButton } from '@/base/components/IconButton'; +import { BackIcon } from '@/base/icons/BackIcon'; +import { CloseIcon } from '@/base/icons/CloseIcon'; +import { cx } from '@/index'; +import { useModal } from '../ModalProvider/context'; import { useRouter } from '../RouteProvider/context'; -import { Box, BoxProps } from '../../base/components/Box'; -import { IconButton } from '../../base/components/IconButton'; -import { BackIcon } from '../../base/icons/BackIcon'; -import { CloseIcon } from '../../base/icons/CloseIcon'; import { clsNavbar } from './styles.css'; -import { useModal } from '../..'; export interface NavbarProps extends BoxProps { showBack?: boolean; diff --git a/packages/walletkit/src/components/RouteProvider/index.tsx b/packages/walletkit/src/components/RouteProvider/index.tsx index 5464c8b7..2e73e763 100644 --- a/packages/walletkit/src/components/RouteProvider/index.tsx +++ b/packages/walletkit/src/components/RouteProvider/index.tsx @@ -1,10 +1,10 @@ -import { useCallback, useMemo, useRef, useState } from 'react'; +import { ConnectWithQRCodePage } from '@/pages/ConnectWithQRCode'; +import { ConnectedPage } from '@/pages/Connected'; +import { ConnectingPage } from '@/pages/Connecting'; +import { ConnectorsPage } from '@/pages/Connectors'; +import { SwitchNetworkPage } from '@/pages/SwitchNetwork'; +import { useState, useRef, useMemo, useCallback } from 'react'; import { RouteContext } from './context'; -import { ConnectorsPage } from '../../pages/Connectors'; -import { ConnectingPage } from '../../pages/Connecting'; -import { ConnectWithQRCodePage } from '../../pages/ConnectWithQRCode'; -import { ConnectedPage } from '../../pages/Connected'; -import { SwitchNetworkPage } from '../../pages/SwitchNetwork'; export const routes = { CONNECTING: 'Connecting', diff --git a/packages/walletkit/src/components/SwitchNetworkModal/index.tsx b/packages/walletkit/src/components/SwitchNetworkModal/index.tsx index ec8fd962..b4e0f3f9 100644 --- a/packages/walletkit/src/components/SwitchNetworkModal/index.tsx +++ b/packages/walletkit/src/components/SwitchNetworkModal/index.tsx @@ -1,6 +1,6 @@ import { useAccount, useNetwork } from 'wagmi'; import { useEffect } from 'react'; -import { useModal } from '../..'; +import { useModal } from '../ModalProvider/context'; export function SwitchNetworkModal() { const { onOpenSwitchNetwork } = useModal(); diff --git a/packages/walletkit/src/components/ThemeProvider/index.tsx b/packages/walletkit/src/components/ThemeProvider/index.tsx index 4c6c4ac9..c2c940eb 100644 --- a/packages/walletkit/src/components/ThemeProvider/index.tsx +++ b/packages/walletkit/src/components/ThemeProvider/index.tsx @@ -1,7 +1,7 @@ +import { deepMerge } from '@/base/utils/common'; +import { CustomTheme, base } from '@/themes/base'; import { useEffect, useMemo, useState } from 'react'; -import { CustomTheme, base } from '../../themes/base'; import { ColorMode, ThemeContext } from './context'; -import { deepMerge } from '../../base/utils/common'; export type ThemeMode = 'auto' | ColorMode; @@ -83,16 +83,15 @@ export function ThemeProvider(props: ThemeProviderProps) { useEffect(() => { if (mode === 'auto') { - const onChangeColorMode = () => { - const cm = mql.matches ? 'dark' : 'light'; + const onChange = () => { + const cm = matchMedia.matches ? 'dark' : 'light'; setColorMode(cm); }; - const mql = window.matchMedia('(prefers-color-scheme: dark)'); - - mql.addEventListener('change', onChangeColorMode); + const matchMedia = window.matchMedia('(prefers-color-scheme: dark)'); + matchMedia.addEventListener('change', onChange); return () => { - mql.removeEventListener('change', onChangeColorMode); + matchMedia.removeEventListener('change', onChange); }; } else { setColorMode(mode); diff --git a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx index e88dd5e4..3ae8bb2e 100644 --- a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx +++ b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx @@ -1,10 +1,9 @@ +import { commonErrorHandler } from '@/utils/common'; +import { walletConnect } from '@/wallets'; import { useEffect, useMemo, useState } from 'react'; -import { WalletConnectUriContext } from './context'; +import { useConnect, useAccount } from 'wagmi'; import { useWalletKitContext } from '../WalletKitProvider/context'; -import { WALLET_CONNECT_ID } from '../../wallets'; -import { useConnector } from '../../hooks/useConnectors'; -import { useAccount, useConnect } from 'wagmi'; -import { commonErrorHandler } from '../../utils/common'; +import { WalletConnectUriContext } from './context'; export interface WalletConnectUriProviderProps { children: React.ReactNode; @@ -20,26 +19,38 @@ export function WalletConnectUriProvider(props: WalletConnectUriProviderProps) { * otherwise when user repeats go and back between the wallet list and QR code page * due to the following `connectAsync` logic, multiple errors will be thrown */ - const { connectAsync } = useConnect(); + const { connectAsync, connectors } = useConnect(); const { isConnected } = useAccount(); const { log, options } = useWalletKitContext(); - const connector = useConnector(WALLET_CONNECT_ID); const [wcUri, setWcUri] = useState(''); + const uriConnector = useMemo(() => { + const chains = connectors?.[0]?.chains; + + if (chains?.length > 0) { + return walletConnect({ + connectorOptions: { + showQrModal: false, + }, + }).createConnector(chains); + } + return null; + }, [connectors]); + useEffect(() => { - if (!connector || isConnected || connector?.options.showQrModal) return; + if (!uriConnector || isConnected) return; let provider: any; const updateWcUri = async () => { - provider = await connector.getProvider(); + provider = await uriConnector.getProvider(); provider.on('display_uri', setWcUri); }; updateWcUri(); const connectWallet = async () => { try { - await connectAsync({ connector }); + await connectAsync({ connector: uriConnector }); } catch (error: any) { clearTimeout(timer); @@ -49,10 +60,7 @@ export function WalletConnectUriProvider(props: WalletConnectUriProviderProps) { error, handler: options.onError, }); - - if (error?.code === 4001) { - connectWallet(); - } + connectWallet(); // refresh qr code }, 100); } }; @@ -63,7 +71,7 @@ export function WalletConnectUriProvider(props: WalletConnectUriProviderProps) { provider?.off?.('display_uri', setWcUri); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [connector, isConnected]); + }, [uriConnector, isConnected]); const value = useMemo(() => { return { diff --git a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx index 06de897e..55e844c2 100644 --- a/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx +++ b/packages/walletkit/src/components/WalletKitButton/ConnectButton/ConnectedInfo/index.tsx @@ -1,23 +1,23 @@ +import { Box } from '@/base/components/Box'; +import { Text } from '@/base/components/Text'; +import { Button } from '@/base/components/Button'; +import { DownArrowIcon } from '@/base/icons/DownArrowIcon'; +import { Avatar } from '@/components/Avatar'; +import { useChainConfig } from '@/hooks/useChainConfig'; +import { useModal, cx } from '@/index'; +import { truncateENSName, formatBalance, truncateAddress } from '@/utils/account'; import { useAccount, useBalance, useEnsName, useNetwork } from 'wagmi'; -import { Text } from '../../../../base/components/Text'; -import { Avatar } from '../../../Avatar'; -import { formatBalance, truncateAddress, truncateENSName } from '../../../../utils/account'; -import { Box } from '../../../../base/components/Box'; -import { Button } from '../../../../base/components/Button'; -import { cx, useModal } from '../../../..'; -import { useChainConfig } from '../../../../hooks/useChainConfig'; +import { clsWalletkitButton } from '../styles.css'; import { - clsAccountButton, - clsAddress, - clsBalance, + clsInfo, + clsWrongButton, clsChainButton, clsChainLogo, - clsInfo, + clsAccountButton, + clsBalance, clsSeparator, - clsWrongButton, + clsAddress, } from './styles.css'; -import { clsWalletkitButton } from '../styles.css'; -import { DownArrowIcon } from '../../../../base/icons/DownArrowIcon'; export function ConnectedInfo() { const { address } = useAccount(); @@ -41,7 +41,7 @@ export function ConnectedInfo() { {chain?.unsupported ? ( + + - + ); } diff --git a/packages/walletkit/src/pages/Connected/styles.css.ts b/packages/walletkit/src/pages/Connected/styles.css.ts index f6da8fd7..340e3ba1 100644 --- a/packages/walletkit/src/pages/Connected/styles.css.ts +++ b/packages/walletkit/src/pages/Connected/styles.css.ts @@ -1,5 +1,15 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../..'; + +export const clsFooter = style({ + marginTop: 0, + '@media': { + [MOBILE_MEDIA]: { + marginBottom: -16, + }, + }, +}); export const clsAvatar = style({ width: 100, diff --git a/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx b/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx index 04671c9b..998e8bd1 100644 --- a/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx +++ b/packages/walletkit/src/pages/Connecting/ConnectSpinner/index.tsx @@ -1,7 +1,7 @@ -import { cx } from '../../../base/utils/css'; -import { clsContainer, clsLogo, clsErrorCircle, clsLoading } from './styles.css'; -import { Box, BoxProps } from '../../../base/components/Box'; -import { CircleLoadingIcon } from '../../../base/icons/CircleLoadingIcon'; +import { BoxProps, Box } from '@/base/components/Box'; +import { CircleLoadingIcon } from '@/base/icons/CircleLoadingIcon'; +import { cx } from '@/index'; +import { clsContainer, clsLoading, clsErrorCircle, clsLogo } from './styles.css'; export interface ConnectSpinnerProps extends BoxProps { isLoading?: boolean; diff --git a/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts b/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts index fd595f9d..dfef133a 100644 --- a/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts +++ b/packages/walletkit/src/pages/Connecting/ConnectSpinner/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { globalStyle, keyframes, style } from '@vanilla-extract/css'; -import { cssVar } from '../../../base/utils/css'; export const clsContainer = style({ position: 'relative', diff --git a/packages/walletkit/src/pages/Connecting/Content/Description/index.tsx b/packages/walletkit/src/pages/Connecting/Content/Description/index.tsx index f1035dca..91e876b2 100644 --- a/packages/walletkit/src/pages/Connecting/Content/Description/index.tsx +++ b/packages/walletkit/src/pages/Connecting/Content/Description/index.tsx @@ -1,5 +1,5 @@ -import { Box, BoxProps } from '../../../../base/components/Box'; -import { cx } from '../../../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { cx } from '@/index'; import { clsDescription } from './styles.css'; export function Description(props: BoxProps) { diff --git a/packages/walletkit/src/pages/Connecting/Content/Description/styles.css.ts b/packages/walletkit/src/pages/Connecting/Content/Description/styles.css.ts index 84b7c752..c1703374 100644 --- a/packages/walletkit/src/pages/Connecting/Content/Description/styles.css.ts +++ b/packages/walletkit/src/pages/Connecting/Content/Description/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../../../base/utils/css'; export const clsDescription = style({ display: 'flex', diff --git a/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/index.tsx b/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/index.tsx index dbc0bcf9..a73e530e 100644 --- a/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/index.tsx +++ b/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/index.tsx @@ -1,7 +1,6 @@ -import { Box, BoxProps } from '../../../../base/components/Box'; -import { AlertIcon } from '../../../../base/icons/AlertIcon'; - -import { cx } from '../../../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { AlertIcon } from '@/base/icons/AlertIcon'; +import { cx } from '@/index'; import { clsErrorTitle } from './styles.css'; export function ErrorTitle(props: BoxProps) { diff --git a/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/styles.css.ts b/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/styles.css.ts index 67d079df..9916d17d 100644 --- a/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/styles.css.ts +++ b/packages/walletkit/src/pages/Connecting/Content/ErrorTitle/styles.css.ts @@ -1,5 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../../../base/utils/css'; export const clsErrorTitle = style({ display: 'flex', diff --git a/packages/walletkit/src/pages/Connecting/Content/InfoTitle/index.tsx b/packages/walletkit/src/pages/Connecting/Content/InfoTitle/index.tsx index 23838b1f..e26507e8 100644 --- a/packages/walletkit/src/pages/Connecting/Content/InfoTitle/index.tsx +++ b/packages/walletkit/src/pages/Connecting/Content/InfoTitle/index.tsx @@ -1,5 +1,5 @@ -import { Box, BoxProps } from '../../../../base/components/Box'; -import { cx } from '../../../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { cx } from '@/index'; import { clsInfoTitle } from './styles.css'; export function InfoTitle(props: BoxProps) { diff --git a/packages/walletkit/src/pages/Connecting/Content/index.tsx b/packages/walletkit/src/pages/Connecting/Content/index.tsx index b85f0129..a46be1a1 100644 --- a/packages/walletkit/src/pages/Connecting/Content/index.tsx +++ b/packages/walletkit/src/pages/Connecting/Content/index.tsx @@ -1,5 +1,5 @@ -import { Box, BoxProps } from '../../../base/components/Box'; -import { cx } from '../../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { cx } from '@/index'; import { clsContent } from './styles.css'; export function Content(props: BoxProps) { diff --git a/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx b/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx index 58e5e15b..c1ba3f23 100644 --- a/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx +++ b/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx @@ -1,5 +1,5 @@ -import { useWalletKitContext } from '../../../components/WalletKitProvider/context'; -import { isMetaMaskConnector } from '../../../wallets'; +import { useWalletKitContext } from '@/index'; +import { isMetaMaskConnector } from '@/wallets'; import { Content } from '../Content'; import { Description } from '../Content/Description'; import { InfoTitle } from '../Content/InfoTitle'; @@ -27,7 +27,7 @@ export function UnsupportedContent() { Install {selectedConnector?._wallet.name} - To continue, please install {selectedConnector?._wallet.name} extension to your browser. + To connect your {selectedConnector?._wallet.name}, install the browser extension. ); diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx index ced0aa10..4e88342e 100644 --- a/packages/walletkit/src/pages/Connecting/index.tsx +++ b/packages/walletkit/src/pages/Connecting/index.tsx @@ -1,22 +1,22 @@ -import { useCallback, useEffect, useState } from 'react'; -import { useWalletKitContext } from '../../components/WalletKitProvider/context'; -import { useWalletConfig } from '../../hooks/useWalletConfig'; -import { useWalletKitConnect } from '../../hooks/useWalletKitConnect'; -import { Navbar } from '../../components/Navbar'; -import { ModalHeader } from '../../base/components/Modal/ModalHeader'; -import { Box } from '../../base/components/Box'; +import { Box } from '@/base/components/Box'; +import { Button } from '@/base/components/Button'; +import { ModalBody } from '@/base/components/Modal/ModalBody'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; +import { ModalHeader } from '@/base/components/Modal/ModalHeader'; +import { Navbar } from '@/components/Navbar'; +import { useWalletConfig } from '@/hooks/useWalletConfig'; +import { useWalletDownloadUrl } from '@/hooks/useWalletDownloadUrl'; +import { useWalletKitConnect } from '@/hooks/useWalletKitConnect'; +import { useWalletLogos } from '@/hooks/useWalletLogos'; +import { useWalletKitContext } from '@/index'; +import { useState, useCallback, useEffect } from 'react'; +import { ConnectSpinner } from './ConnectSpinner'; import { Content } from './Content'; -import { ErrorTitle } from './Content/ErrorTitle'; import { Description } from './Content/Description'; +import { ErrorTitle } from './Content/ErrorTitle'; import { InfoTitle } from './Content/InfoTitle'; import { UnsupportedContent } from './UnsupportedContent'; -import { ConnectSpinner } from './ConnectSpinner'; -import { clsContent, clsGap, clsButton, clsFooter } from './styles.css'; -import { ModalBody } from '../../base/components/Modal/ModalBody'; -import { ModalFooter } from '../../base/components/Modal/ModalFooter'; -import { Button } from '../../base/components/Button'; -import { useWalletLogos } from '../../hooks/useWalletLogos'; -import { useWalletDownloadUrl } from '../../hooks/useWalletDownloadUrl'; +import { clsContent, clsGap, clsFooter, clsButton } from './styles.css'; export const states = { CONNECTED: 'connected', @@ -116,7 +116,7 @@ export function ConnectingPage() { - {logos.default} + {logos.transparent} diff --git a/packages/walletkit/src/pages/Connecting/styles.css.ts b/packages/walletkit/src/pages/Connecting/styles.css.ts index c1e336ae..63d72747 100644 --- a/packages/walletkit/src/pages/Connecting/styles.css.ts +++ b/packages/walletkit/src/pages/Connecting/styles.css.ts @@ -1,9 +1,8 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/index'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../..'; -export const clsContent = style({ - overflowY: 'auto', -}); +export const clsContent = style({}); export const clsGap = style({ marginTop: 32, @@ -24,4 +23,10 @@ export const clsButton = style({ export const clsFooter = style({ marginTop: 40, marginBottom: -8, + '@media': { + [MOBILE_MEDIA]: { + marginTop: 24, + marginBottom: -16, + }, + }, }); diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx new file mode 100644 index 00000000..b8262c05 --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/index.tsx @@ -0,0 +1,39 @@ +import { Box } from '@/base/components/Box'; +import { Text } from '@/base/components/Text'; +import { Button } from '@/base/components/Button'; +import { useClickWallet } from '@/hooks/useClickWallet'; +import { useWalletConfig } from '@/hooks/useWalletConfig'; +import { useWalletLogos } from '@/hooks/useWalletLogos'; +import { cx } from '@/index'; +import { Connector } from 'wagmi'; +import { + clsWalletOption, + clsWalletOptionName, + clsWalletOptionIcon, + clsWalletOptionWrapper, +} from './styles.css'; + +export interface WalletOptionProps { + connector: Connector; +} + +export function WalletOption(props: WalletOptionProps) { + const { connector } = props; + + const onClickWallet = useClickWallet(); + + const wallet = useWalletConfig(connector); + const logos = useWalletLogos(wallet.logos); + + return ( + onClickWallet(connector, e)} + > + + + ); +} diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts new file mode 100644 index 00000000..8e052a15 --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/GridLayout/WalletOption/styles.css.ts @@ -0,0 +1,67 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/index'; +import { globalStyle, style } from '@vanilla-extract/css'; + +export const clsWalletOptionWrapper = style({ + display: 'flex', + alignItems: 'flex-start', + justifyContent: 'center', + height: 111, + '@media': { + [MOBILE_MEDIA]: { + height: 99, + }, + }, +}); + +export const clsWalletOption = style({ + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + justifyContent: 'flex-start', + padding: '8px 0', + borderRadius: 16, + gap: 8, + width: '100%', + height: 'auto', + color: cssVar('textSecondary'), + background: 'transparent', + ':hover': { + background: cssVar('walletOptionBackgroundHover'), + }, +}); + +export const clsWalletOptionName = style({ + fontSize: 16, + lineHeight: '19px', + fontWeight: 600, + textAlign: 'center', + '@media': { + [MOBILE_MEDIA]: { + fontSize: 12, + lineHeight: '15px', + }, + }, +}); + +export const clsWalletOptionIcon = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: 68, + height: 68, + borderRadius: 16, + overflow: 'hidden', + flexShrink: 0, + '@media': { + [MOBILE_MEDIA]: { + width: 60, + height: 60, + }, + }, +}); + +globalStyle(`${clsWalletOptionIcon} > *`, { + width: '100%', + height: '100%', +}); diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx b/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx new file mode 100644 index 00000000..439b23d7 --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx @@ -0,0 +1,36 @@ +import { Link } from '@/base/components/Link'; +import { ModalBody } from '@/base/components/Modal/ModalBody'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; +import { WalletIcon } from '@/base/icons/WalletIcon'; +import { useWalletKitContext, cx } from '@/index'; +import { useConnect } from 'wagmi'; +import { clsNoWalletButton, clsWallets } from './styles.css'; +import { WalletOption } from './WalletOption'; +import { Button } from '@/base/components/Button'; + +export function GridLayout() { + const { connectors } = useConnect(); + const { options } = useWalletKitContext(); + + return ( + <> + + {connectors?.map((c) => )} + + + {!options.hideNoWalletCTA && ( + + + + )} + + ); +} diff --git a/packages/walletkit/src/pages/Connectors/GridLayout/styles.css.ts b/packages/walletkit/src/pages/Connectors/GridLayout/styles.css.ts new file mode 100644 index 00000000..fbd43c8a --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/GridLayout/styles.css.ts @@ -0,0 +1,32 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/base/utils/css'; +import { style } from '@vanilla-extract/css'; + +export const clsWallets = style({ + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + rowGap: 24, + columnGap: 15, + '@media': { + [MOBILE_MEDIA]: { + rowGap: 16, + columnGap: 4.5, + }, + }, +}); + +export const clsNoWalletButton = style({ + height: 50, + width: '100%', + gap: 10, + border: '1px solid', + borderRadius: cssVar('noWalletButton', 'radii'), + background: cssVar('noWalletButtonBackground'), + borderColor: cssVar('noWalletButtonBorder'), + color: cssVar('noWalletButtonBackgroundText'), + ':hover': { + background: cssVar('noWalletButtonBackgroundHover'), + color: cssVar('noWalletButtonBackgroundTextHover'), + borderColor: cssVar('noWalletButtonBorderHover'), + }, +}); diff --git a/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx similarity index 54% rename from packages/walletkit/src/pages/Connectors/WalletOption/index.tsx rename to packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx index be14d383..5af8ec0b 100644 --- a/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx +++ b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/index.tsx @@ -1,13 +1,12 @@ +import { Box } from '@/base/components/Box'; +import { Text } from '@/base/components/Text'; +import { Button } from '@/base/components/Button'; +import { useClickWallet } from '@/hooks/useClickWallet'; +import { useWalletConfig } from '@/hooks/useWalletConfig'; +import { useWalletLogos } from '@/hooks/useWalletLogos'; +import { cx } from '@/index'; import { Connector } from 'wagmi'; - -import { useWalletConfig } from '../../../hooks/useWalletConfig'; -import { Button } from '../../../base/components/Button'; -import { Text } from '../../../base/components/Text'; -import { Box } from '../../../base/components/Box'; -import { useClickWallet } from '../../../hooks/useClickWallet'; -import { cx } from '../../../base/utils/css'; -import { clsWalletOption, clsWalletOptionIcon, clsWalletOptionName } from './styles.css'; -import { useWalletLogos } from '../../../hooks/useWalletLogos'; +import { clsWalletOption, clsWalletOptionName, clsWalletOptionIcon } from './styles.css'; export interface WalletOptionProps { connector: Connector; @@ -27,7 +26,7 @@ export function WalletOption(props: WalletOptionProps) { onClick={(e) => onClickWallet(connector, e)} > {wallet.name} - {logos.default} + {logos.transparent} ); } diff --git a/packages/walletkit/src/pages/Connectors/WalletOption/styles.css.ts b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts similarity index 91% rename from packages/walletkit/src/pages/Connectors/WalletOption/styles.css.ts rename to packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts index d5b17891..ee5de263 100644 --- a/packages/walletkit/src/pages/Connectors/WalletOption/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts @@ -1,12 +1,11 @@ +import { cssVar } from '@/index'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../../base/utils/css'; export const clsWalletOption = style({ height: 68, paddingLeft: 20, paddingRight: 20, borderRadius: cssVar('walletOption', 'radii'), - fontSize: 16, color: cssVar('walletOptionText'), background: cssVar('walletOptionBackground'), width: '100%', diff --git a/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx b/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx new file mode 100644 index 00000000..f7c11db0 --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx @@ -0,0 +1,33 @@ +import { Link } from '@/base/components/Link'; +import { ModalBody } from '@/base/components/Modal/ModalBody'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; +import { WalletIcon } from '@/base/icons/WalletIcon'; +import { useWalletKitContext, cx } from '@/index'; +import { useConnect } from 'wagmi'; + +import { WalletOption } from './WalletOption'; +import { clsWallets, clsNoWalletLink } from './styles.css'; + +export function ListLayout() { + const { connectors } = useConnect(); + const { options } = useWalletKitContext(); + + return ( + <> + + {connectors?.map((c) => )} + + + {!options.hideNoWalletCTA && ( + + + I don’t have a wallet + + + )} + + ); +} diff --git a/packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts b/packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts new file mode 100644 index 00000000..7eb1eb18 --- /dev/null +++ b/packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts @@ -0,0 +1,13 @@ +import { style } from '@vanilla-extract/css'; + +export const clsWallets = style({ + gap: 16, +}); + +export const clsNoWalletLink = style({ + display: 'flex', + alignItems: 'center', + gap: 10, + fontSize: 14, + fontWeight: 400, +}); diff --git a/packages/walletkit/src/pages/Connectors/index.tsx b/packages/walletkit/src/pages/Connectors/index.tsx index 9f50a42a..e6b3a74a 100644 --- a/packages/walletkit/src/pages/Connectors/index.tsx +++ b/packages/walletkit/src/pages/Connectors/index.tsx @@ -1,21 +1,21 @@ -import { Navbar } from '../../components/Navbar'; -import { useWalletKitContext } from '../../components/WalletKitProvider/context'; -import { Link } from '../../base/components/Link'; -import { ModalBody } from '../../base/components/Modal/ModalBody'; -import { ModalFooter } from '../../base/components/Modal/ModalFooter'; -import { ModalHeader } from '../../base/components/Modal/ModalHeader'; -import { WalletIcon } from '../../base/icons/WalletIcon'; - -import { useConnectors } from '../../hooks/useConnectors'; -import { cx } from '../../base/utils/css'; -import { WalletOption } from './WalletOption'; -import { clsDisclaimer, clsDownloadLink, clsWallets } from './styles.css'; -import { Box } from '../../base/components/Box'; +import { Box } from '@/base/components/Box'; +import { ModalHeader } from '@/base/components/Modal/ModalHeader'; +import { useResponsive } from '@/base/hooks/useResponsive'; +import { Navbar } from '@/components/Navbar'; +import { useWalletKitContext, cx } from '@/index'; +import { useConnect } from 'wagmi'; +import { GridLayout } from './GridLayout'; +import { ListLayout } from './ListLayout'; +import { clsDisclaimer } from './styles.css'; +import { LIST_LAYOUT_THRESHOLD } from '@/constants/common'; export function ConnectorsPage() { - const connectors = useConnectors(); + const { connectors } = useConnect(); const { options } = useWalletKitContext(); + const { isMobileLayout } = useResponsive(); + const useGridLayout = connectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout; + return ( <> @@ -25,20 +25,7 @@ export function ConnectorsPage() { {options.disclaimer} )} - - {connectors?.map((c) => )} - - - {!options.hideNoWalletCTA && ( - - - I don’t have a wallet - - - )} + {useGridLayout ? : } ); } diff --git a/packages/walletkit/src/pages/Connectors/styles.css.ts b/packages/walletkit/src/pages/Connectors/styles.css.ts index 29ce3ed6..cbe086b8 100644 --- a/packages/walletkit/src/pages/Connectors/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/styles.css.ts @@ -1,18 +1,5 @@ +import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../..'; - -export const clsWallets = style({ - overflowY: 'auto', - gap: 16, -}); - -export const clsDownloadLink = style({ - display: 'flex', - alignItems: 'center', - gap: 10, - fontSize: 14, - fontWeight: 400, -}); export const clsDisclaimer = style({ marginTop: 8, diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx b/packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx index 8fe6640a..8bfc75ba 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx +++ b/packages/walletkit/src/pages/SwitchNetwork/ChainOption/index.tsx @@ -1,14 +1,14 @@ -import { ChainProps } from '../../../chains/types'; -import { cx } from '../../../base/utils/css'; -import { Box } from '../../../base/components/Box'; -import { Button, ButtonProps } from '../../../base/components/Button'; +import { Box } from '@/base/components/Box'; +import { ButtonProps, Button } from '@/base/components/Button'; +import { ChainProps } from '@/chains/types'; +import { cx } from '@/index'; +import { ChainSpinner } from '../ChainSpinner'; import { + clsContainer, clsChainOptionLogo, clsChainOptionName, clsConnectedTag, - clsContainer, } from './styles.css'; -import { ChainSpinner } from '../ChainSpinner'; export interface ChainOptionProps extends Omit { data: ChainProps; diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts b/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts index fc05b913..7a932425 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts +++ b/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts @@ -1,5 +1,6 @@ -import { globalStyle, style } from '@vanilla-extract/css'; -import { cssVar } from '../../../base/utils/css'; +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/index'; +import { style } from '@vanilla-extract/css'; export const clsContainer = style({ padding: '4px 8px', @@ -7,7 +8,6 @@ export const clsContainer = style({ width: '100%', height: 'auto', flexShrink: 0, - minHeight: 50, color: cssVar('chainOptionText'), background: cssVar('chainOptionBackground'), borderRadius: cssVar('chainOption', 'radii'), @@ -15,6 +15,12 @@ export const clsContainer = style({ color: cssVar('chainOptionTextHover'), background: cssVar('chainOptionBackgroundHover'), }, + '@media': { + [MOBILE_MEDIA]: { + padding: '3px 8px 3px 4px', + gap: 4, + }, + }, }); export const clsChainOptionLogo = style({ @@ -29,11 +35,6 @@ export const clsChainOptionLogo = style({ flexShrink: 0, }); -globalStyle(`${clsChainOptionLogo} > svg`, { - width: 24, - height: 24, -}); - export const clsChainOptionName = style({ display: 'flex', flex: 1, @@ -41,13 +42,13 @@ export const clsChainOptionName = style({ fontSize: 16, lineHeight: '19px', fontWeight: 600, - padding: '15px 0', + padding: '8px 0', }); export const clsConnectedTag = style({ color: cssVar('primary'), fontSize: 16, - fontWeight: 500, + fontWeight: 400, lineHeight: '19px', flexShrink: 0, }); diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx b/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx index b8f41e34..2a03ff52 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx +++ b/packages/walletkit/src/pages/SwitchNetwork/ChainSpinner/index.tsx @@ -1,6 +1,6 @@ -import { Box, BoxProps } from '../../../base/components/Box'; -import { ChainSpinnerIcon } from '../../../base/icons/ChainSpinnerIcon'; -import { cx } from '../../../base/utils/css'; +import { BoxProps, Box } from '@/base/components/Box'; +import { ChainSpinnerIcon } from '@/base/icons/ChainSpinnerIcon'; +import { cx } from '@/index'; import { clsContainer, clsLoading } from './styles.css'; export interface ChainSpinnerProps extends BoxProps { diff --git a/packages/walletkit/src/pages/SwitchNetwork/index.tsx b/packages/walletkit/src/pages/SwitchNetwork/index.tsx index 30e7f230..2d25d362 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/index.tsx +++ b/packages/walletkit/src/pages/SwitchNetwork/index.tsx @@ -1,15 +1,21 @@ +import { Box } from '@/base/components/Box'; +import { ModalBody } from '@/base/components/Modal/ModalBody'; +import { ModalHeader } from '@/base/components/Modal/ModalHeader'; +import { DisconnectButton } from '@/components/DisconnectButton'; +import { Navbar } from '@/components/Navbar'; +import { useWalletKitSwitchNetwork } from '@/hooks/useWalletKitSwitchNetwork'; +import { useWalletKitContext, useModal, cx } from '@/index'; import { useNetwork } from 'wagmi'; -import { ModalHeader } from '../../base/components/Modal/ModalHeader'; -import { Navbar } from '../../components/Navbar'; -import { ModalBody } from '../../base/components/Modal/ModalBody'; -import { clsChains, clsDescription, clsOrSeparator } from './styles.css'; -import { useWalletKitContext } from '../../components/WalletKitProvider/context'; -import { useWalletKitSwitchNetwork } from '../../hooks/useWalletKitSwitchNetwork'; -import { Box } from '../../base/components/Box'; -import { cx } from '../../base/utils/css'; import { ChainOption } from './ChainOption'; -import { DisconnectButton } from '../../components/DisconnectButton'; -import { useModal } from '../..'; +import { + clsDescription, + clsChains, + clsOrSeparator, + clsBody, + clsFooter, + clsNoNavHeader, +} from './styles.css'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; export function SwitchNetworkPage() { const { supportedChains } = useWalletKitContext(); @@ -26,9 +32,9 @@ export function SwitchNetworkPage() { return ( <> {isClosable && } - Switch Network + Switch Network - + {chain?.unsupported && ( This app does not support the current connected network. Switch or disconnect to @@ -48,11 +54,12 @@ export function SwitchNetworkPage() { ); })} - or + + - + ); } diff --git a/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts b/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts index 57bcb7af..333d0e6f 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts +++ b/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts @@ -1,5 +1,31 @@ +import { MOBILE_MEDIA } from '@/base/constant'; +import { cssVar } from '@/index'; import { style } from '@vanilla-extract/css'; -import { cssVar } from '../../base/utils/css'; + +export const clsNoNavHeader = style({ + '@media': { + [MOBILE_MEDIA]: { + marginTop: -8, + }, + }, +}); + +export const clsBody = style({ + '@media': { + [MOBILE_MEDIA]: { + marginTop: 24, + }, + }, +}); + +export const clsFooter = style({ + marginTop: 0, + '@media': { + [MOBILE_MEDIA]: { + marginBottom: -16, + }, + }, +}); export const clsDescription = style({ lineHeight: '19px', diff --git a/packages/walletkit/src/themes/base.ts b/packages/walletkit/src/themes/base.ts index d0b5210c..677b1544 100644 --- a/packages/walletkit/src/themes/base.ts +++ b/packages/walletkit/src/themes/base.ts @@ -1,5 +1,4 @@ -import { DeepPartial } from '../types'; -import { rgba } from '../base/utils/css'; +import { rgba, DeepPartial } from '..'; const radii = { common: '8px', @@ -9,6 +8,7 @@ const radii = { button: 'var(--wk-radii-common)', connectButton: 'var(--wk-radii-common)', disconnectButton: 'var(--wk-radii-common)', + noWalletButton: 'var(--wk-radii-common)', walletOption: 'var(--wk-radii-common)', walletOptionIcon: 'var(--wk-radii-common)', chainOption: 'var(--wk-radii-common)', @@ -49,13 +49,6 @@ export const base = { navButtonText: 'var(--wk-colors-textSecondary)', navButtonBackgroundHover: 'var(--wk-colors-border)', - disconnectButtonBackgroundText: 'var(--wk-colors-text)', - disconnectButtonBackgroundTextHover: 'var(--wk-colors-text)', - disconnectButtonBackground: 'transparent', - disconnectButtonBackgroundHover: 'var(--wk-colors-border)', - disconnectButtonBorder: 'var(--wk-colors-border)', - disconnectButtonBorderHover: 'var(--wk-colors-border)', - optionText: 'var(--wk-colors-text)', optionTextHover: 'var(--wk-colors-text)', optionBackground: '#f5f5f5', @@ -75,6 +68,20 @@ export const base = { qrCodeDot: 'var(--wk-colors-text)', qrCodeBorder: 'var(--wk-colors-border)', + + noWalletButtonBackgroundText: 'var(--wk-colors-text)', + noWalletButtonBackgroundTextHover: 'var(--wk-colors-text)', + noWalletButtonBackground: 'transparent', + noWalletButtonBackgroundHover: 'var(--wk-colors-border)', + noWalletButtonBorder: 'var(--wk-colors-border)', + noWalletButtonBorderHover: 'var(--wk-colors-border)', + + disconnectButtonBackgroundText: 'var(--wk-colors-text)', + disconnectButtonBackgroundTextHover: 'var(--wk-colors-text)', + disconnectButtonBackground: 'transparent', + disconnectButtonBackgroundHover: 'var(--wk-colors-border)', + disconnectButtonBorder: 'var(--wk-colors-border)', + disconnectButtonBorderHover: 'var(--wk-colors-border)', }, shadows: { toast: '0px 4px 24px rgba(0, 0, 0, 0.08)', @@ -109,13 +116,6 @@ export const base = { navButtonText: 'var(--wk-colors-textSecondary)', navButtonBackgroundHover: 'var(--wk-colors-border)', - disconnectButtonBackgroundText: 'var(--wk-colors-text)', - disconnectButtonBackgroundTextHover: 'var(--wk-colors-text)', - disconnectButtonBackground: 'transparent', - disconnectButtonBackgroundHover: 'var(--wk-colors-border)', - disconnectButtonBorder: 'var(--wk-colors-border)', - disconnectButtonBorderHover: 'var(--wk-colors-border)', - optionText: 'var(--wk-colors-text)', optionTextHover: 'var(--wk-colors-text)', optionBackground: '#14151a', @@ -135,6 +135,20 @@ export const base = { qrCodeDot: 'var(--wk-colors-text)', qrCodeBorder: 'var(--wk-colors-border)', + + noWalletButtonBackgroundText: 'var(--wk-colors-text)', + noWalletButtonBackgroundTextHover: 'var(--wk-colors-text)', + noWalletButtonBackground: 'transparent', + noWalletButtonBackgroundHover: 'var(--wk-colors-border)', + noWalletButtonBorder: 'var(--wk-colors-border)', + noWalletButtonBorderHover: 'var(--wk-colors-border)', + + disconnectButtonBackgroundText: 'var(--wk-colors-text)', + disconnectButtonBackgroundTextHover: 'var(--wk-colors-text)', + disconnectButtonBackground: 'transparent', + disconnectButtonBackgroundHover: 'var(--wk-colors-border)', + disconnectButtonBorder: 'var(--wk-colors-border)', + disconnectButtonBorderHover: 'var(--wk-colors-border)', }, shadows: { toast: '0px 4px 24px rgba(0, 0, 0, 0.08)', diff --git a/packages/walletkit/src/types.ts b/packages/walletkit/src/types.ts index 6ac64c68..bc22a70a 100644 --- a/packages/walletkit/src/types.ts +++ b/packages/walletkit/src/types.ts @@ -3,3 +3,5 @@ export type DeepPartial = T extends object [P in keyof T]?: DeepPartial; } : T; + +export type SVGIconProps = React.SVGProps; diff --git a/packages/walletkit/src/utils/common.ts b/packages/walletkit/src/utils/common.ts index c140e6db..18541857 100644 --- a/packages/walletkit/src/utils/common.ts +++ b/packages/walletkit/src/utils/common.ts @@ -1,5 +1,5 @@ -import { isTrustWallet } from '../wallets'; -import { isIOS } from '../base/utils/mobile'; +import { isIOS } from '@/base/utils/mobile'; +import { isTrustWallet } from '@/wallets'; export function mergeList(list1: any[] = [], list2: any[] = []) { const result: any[] = [...list1]; diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx index 4c9ae87b..00d36f0e 100644 --- a/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx +++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx @@ -1,13 +1,24 @@ -export const BinanceWeb3WalletIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const BinanceWeb3WalletTransparentIcon = (props: SVGIconProps) => { + return ; +}; + +export const BinanceWeb3WalletIcon = (props: SVGIconProps) => { return ( - - - - - - - - + + + + ); }; diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx index 03b7aa15..2dcaf977 100644 --- a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx +++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx @@ -1,10 +1,8 @@ import { Chain } from 'wagmi'; - -import { WalletProps } from '../types'; -import { BinanceWeb3WalletIcon } from './icon'; +import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; -import { getInjectedProvider } from '../utils'; -import { PartialCustomProps } from '../custom'; +import { BinanceWeb3WalletIcon, BinanceWeb3WalletTransparentIcon } from './icon'; +import { isMobile } from '@/base/utils/mobile'; export const BINANCE_WEB3_WALLET_ID = 'binanceWeb3Wallet'; @@ -16,11 +14,13 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { name: 'Binance Web3 Wallet', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.binance.com/en/web3wallet', }, spinnerColor: undefined, + showQRCode: true, installed: isBinanceWeb3Wallet(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -32,15 +32,19 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { getProvider() { if (typeof window === 'undefined') return; - const provider = getInjectedProvider('isOkxWallet') ?? window.okexchain; - return provider; + if (isMobile()) { + return window.ethereum; + } }, ...connectorOptions, }, }); }, - getUri: () => { - return undefined; + getDeepLink: () => { + return undefined; //`bnc://app.binance.com/cedefi/wc?uri=${encodeURIComponent(uri)}`; + }, + getQRCodeUri(uri) { + return uri; }, ...restProps, }; @@ -49,5 +53,9 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { export function isBinanceWeb3Wallet() { if (typeof window === 'undefined') return false; + if (isMobile()) { + return !!window.ethereum; + } + return false; } diff --git a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx index ce7e86f7..513d4b51 100644 --- a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx +++ b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx @@ -1,13 +1,36 @@ -export const CoinbaseWalletIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '../..'; + +export const CoinbaseWalletTransparentIcon = (props: SVGIconProps) => { + return ; +}; + +export const CoinbaseWalletIcon = (props: SVGIconProps) => { return ( - - + + + + + + + + ); }; diff --git a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx index 77bcdc19..3f9be830 100644 --- a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx +++ b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx @@ -1,10 +1,9 @@ +import { getGlobalData } from '@/globalData'; import { Chain } from 'wagmi'; - -import { PartialWalletProps, WalletProps } from '../types'; -import { CoinbaseWalletIcon } from './icon'; -import { hasInjectedProvider } from '../utils'; -import { getGlobalData } from '../../globalData'; import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; +import { PartialWalletProps, WalletProps } from '..'; +import { hasInjectedProvider } from '../utils'; +import { CoinbaseWalletIcon, CoinbaseWalletTransparentIcon } from './icon'; export const COINBASE_WALLET_ID = 'coinbaseWallet'; @@ -24,11 +23,13 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps { name: 'Coinbase Wallet', logos: { default: , + transparent: , }, downloadUrls: { - default: 'https://coinbase.com/wallet', + default: 'https://www.coinbase.com/wallet/downloads', }, spinnerColor: undefined, + showQRCode: false, installed: isCoinbaseWallet(), createConnector: (chains: Chain[]) => { const { walletConnectDefaultOptions } = getGlobalData(); @@ -43,9 +44,12 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { return `https://go.cb-w.com/dapp?cb_url=${encodeURIComponent(window.location.href)}`; }, + getQRCodeUri(uri) { + return uri; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/index.ts b/packages/walletkit/src/wallets/index.ts index 28dd0538..900f90ff 100644 --- a/packages/walletkit/src/wallets/index.ts +++ b/packages/walletkit/src/wallets/index.ts @@ -10,8 +10,7 @@ export * from './tokenPocket'; export * from './trustWallet'; export * from './trustWallet/connector'; export * from './walletConnect'; -export * from './walletConnect/connector'; -// export * from './okxWallet'; -// export * from './mathWallet'; -// export * from './binanceWeb3Wallet'; -// export * from './coinbaseWallet'; +export * from './okxWallet'; +export * from './mathWallet'; +export * from './binanceWeb3Wallet'; +export * from './coinbaseWallet'; diff --git a/packages/walletkit/src/wallets/injected/icon.tsx b/packages/walletkit/src/wallets/injected/icon.tsx index ddbb4674..a3e55cd9 100644 --- a/packages/walletkit/src/wallets/injected/icon.tsx +++ b/packages/walletkit/src/wallets/injected/icon.tsx @@ -1,4 +1,6 @@ -export const InjectedIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const InjectedIcon = (props: SVGIconProps) => { return ( { return new InjectedConnector({ @@ -37,7 +37,7 @@ export function injected(props: InjectedProps = {}): WalletProps { }, }); }, - getUri: () => undefined, + getDeepLink: () => undefined, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/mathWallet/icon.tsx b/packages/walletkit/src/wallets/mathWallet/icon.tsx index 50995612..bbbe5442 100644 --- a/packages/walletkit/src/wallets/mathWallet/icon.tsx +++ b/packages/walletkit/src/wallets/mathWallet/icon.tsx @@ -1,36 +1,20 @@ -export const MathWalletLightIcon = (props: React.SVGProps) => { - return ( - - - - - - - - - - - ); +import { SVGIconProps } from '@/types'; + +export const MathWalletTransparentIcon = (props: SVGIconProps) => { + return ; }; -export const MathWalletDarkIcon = (props: React.SVGProps) => { +export const MathWalletIcon = (props: SVGIconProps) => { return ( - - - - - - - - - + + + ); }; diff --git a/packages/walletkit/src/wallets/mathWallet/index.tsx b/packages/walletkit/src/wallets/mathWallet/index.tsx index 9e87beb6..3fbbdcf3 100644 --- a/packages/walletkit/src/wallets/mathWallet/index.tsx +++ b/packages/walletkit/src/wallets/mathWallet/index.tsx @@ -1,10 +1,8 @@ import { Chain } from 'wagmi'; - -import { WalletProps } from '../types'; -import { MathWalletDarkIcon, MathWalletLightIcon } from './icon'; +import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; -import { PartialCustomProps } from '../custom'; +import { MathWalletIcon, MathWalletTransparentIcon } from './icon'; export const MATH_WALLET_ID = 'mathWallet'; @@ -15,14 +13,13 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { id: MATH_WALLET_ID, name: 'Math Wallet', logos: { - default: { - light: , - dark: , - }, + default: , + transparent: , }, downloadUrls: { default: 'https://mathwallet.org', }, + showQRCode: false, spinnerColor: undefined, installed: isMathWallet(), createConnector: (chains: Chain[]) => { @@ -42,8 +39,13 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { }, }); }, - getUri: () => { - return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`; + getDeepLink: () => { + // return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`; + // return `mathwallet://wc?uri=${encodeURIComponent(uri)}`; + return undefined; + }, + getQRCodeUri(uri) { + return uri; }, ...restProps, }; diff --git a/packages/walletkit/src/wallets/metaMask/icon.tsx b/packages/walletkit/src/wallets/metaMask/icon.tsx index 9832a40f..5d6327d9 100644 --- a/packages/walletkit/src/wallets/metaMask/icon.tsx +++ b/packages/walletkit/src/wallets/metaMask/icon.tsx @@ -1,4 +1,6 @@ -export function MetaMaskIcon(props: React.SVGProps) { +import { SVGIconProps } from '@/types'; + +export function MetaMaskTransparentIcon(props: SVGIconProps) { return ( @@ -118,3 +120,39 @@ export function MetaMaskIcon(props: React.SVGProps) { ); } + +export function MetaMaskIcon(props: SVGIconProps) { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/packages/walletkit/src/wallets/metaMask/index.tsx b/packages/walletkit/src/wallets/metaMask/index.tsx index 47aee5da..d09cb6ff 100644 --- a/packages/walletkit/src/wallets/metaMask/index.tsx +++ b/packages/walletkit/src/wallets/metaMask/index.tsx @@ -1,9 +1,7 @@ import { Chain, Connector } from 'wagmi'; import { MetaMaskConnector } from 'wagmi/connectors/metaMask'; - -import { MetaMaskIcon } from './icon'; -import { isTokenPocket } from '../tokenPocket'; -import { PartialWalletProps, WalletProps } from '../types'; +import { PartialWalletProps, WalletProps, isTokenPocket } from '..'; +import { MetaMaskIcon, MetaMaskTransparentIcon } from './icon'; export const META_MASK_ID = 'metaMask'; @@ -23,11 +21,13 @@ export function metaMask(props: MetaMaskProps = {}): WalletProps { name: 'MetaMask', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://metamask.io/download/', }, spinnerColor: '#F0B90B', + showQRCode: false, installed: isMetaMask(), createConnector: (chains: Chain[]) => { return new MetaMaskConnector({ @@ -39,10 +39,13 @@ export function metaMask(props: MetaMaskProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { const dappPath = window.location.href.replace(/^https?:\/\//, ''); return `dapp://${dappPath}`; }, + getQRCodeUri(uri) { + return `metamask://wc?uri=${encodeURIComponent(uri)}`; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/okxWallet/icon.tsx b/packages/walletkit/src/wallets/okxWallet/icon.tsx index a6a02db2..40b17bf2 100644 --- a/packages/walletkit/src/wallets/okxWallet/icon.tsx +++ b/packages/walletkit/src/wallets/okxWallet/icon.tsx @@ -1,12 +1,21 @@ -export const OkxWalletIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '../..'; + +export const OkxWalletTransparentIcon = (props: SVGIconProps) => { + return ; +}; + +export const OkxWalletIcon = (props: SVGIconProps) => { return ( - - + + ); diff --git a/packages/walletkit/src/wallets/okxWallet/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx index 0b64c8b6..2b2edb14 100644 --- a/packages/walletkit/src/wallets/okxWallet/index.tsx +++ b/packages/walletkit/src/wallets/okxWallet/index.tsx @@ -1,10 +1,9 @@ import { Chain } from 'wagmi'; - -import { WalletProps } from '../types'; -import { OkxWalletIcon } from './icon'; +import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; -import { PartialCustomProps } from '../custom'; +import { OkxWalletIcon, OkxWalletTransparentIcon } from './icon'; +import { isMobile } from '@/index'; export const OKX_WALLET_ID = 'okxWallet'; @@ -16,11 +15,13 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { name: 'OKX Wallet', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.okx.com/web3', }, spinnerColor: undefined, + showQRCode: false, installed: isOkxWallet(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -32,16 +33,22 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { getProvider() { if (typeof window === 'undefined') return; - const provider = getInjectedProvider('isOkxWallet') ?? window.okexchain; - return provider; + if (isMobile()) { + return window.ethereum || window.okexchain; + } + + return getInjectedProvider('isOkxWallet') ?? window.okexchain; }, ...connectorOptions, }, }); }, - getUri: () => { + getDeepLink: () => { return `okx://wallet/dapp/details?dappUrl=${window.location.href}`; }, + getQRCodeUri(uri) { + return `okex://main/wc?uri=${encodeURIComponent(uri)}`; + }, ...restProps, }; } @@ -49,5 +56,9 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { export function isOkxWallet() { if (typeof window === 'undefined') return false; + if (isMobile()) { + return !!(window.ethereum || window.okexchain); + } + return !!(hasInjectedProvider('isOkxWallet') || window.okexchain?.isOkxWallet); } diff --git a/packages/walletkit/src/wallets/safe/index.tsx b/packages/walletkit/src/wallets/safe/index.tsx index f007ec0c..46ec2c27 100644 --- a/packages/walletkit/src/wallets/safe/index.tsx +++ b/packages/walletkit/src/wallets/safe/index.tsx @@ -1,9 +1,9 @@ import { SafeConnector } from 'wagmi/connectors/safe'; import { Chain } from 'wagmi'; -import { PartialWalletProps, WalletProps } from '../types'; -import { InjectedIcon } from '../injected/icon'; import { Connector } from 'wagmi/connectors'; +import { PartialWalletProps, WalletProps } from '..'; +import { InjectedIcon } from '../injected/icon'; export const SAFE_ID = 'safe'; @@ -27,6 +27,7 @@ export function safe(props: SafeProps = {}): WalletProps { downloadUrls: { default: undefined, }, + showQRCode: false, installed: isSafe(), createConnector: (chains: Chain[]) => { return new SafeConnector({ @@ -38,7 +39,7 @@ export function safe(props: SafeProps = {}): WalletProps { }, }); }, - getUri: () => undefined, + getDeepLink: () => undefined, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/tokenPocket/icon.tsx b/packages/walletkit/src/wallets/tokenPocket/icon.tsx index bbf98225..6ec4a6b9 100644 --- a/packages/walletkit/src/wallets/tokenPocket/icon.tsx +++ b/packages/walletkit/src/wallets/tokenPocket/icon.tsx @@ -1,4 +1,6 @@ -export const TokenPocketIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const TokenPocketTransparentIcon = (props: SVGIconProps) => { return ( @@ -47,3 +49,67 @@ export const TokenPocketIcon = (props: React.SVGProps) => { ); }; + +export const TokenPocketIcon = (props: SVGIconProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/walletkit/src/wallets/tokenPocket/index.tsx b/packages/walletkit/src/wallets/tokenPocket/index.tsx index 09c962b3..ffda162f 100644 --- a/packages/walletkit/src/wallets/tokenPocket/index.tsx +++ b/packages/walletkit/src/wallets/tokenPocket/index.tsx @@ -1,10 +1,8 @@ import { Chain } from 'wagmi'; - -import { WalletProps } from '../types'; -import { TokenPocketIcon } from './icon'; -import { getInjectedProvider, hasInjectedProvider } from '../utils'; +import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; -import { PartialCustomProps } from '../custom'; +import { getInjectedProvider, hasInjectedProvider } from '../utils'; +import { TokenPocketIcon, TokenPocketTransparentIcon } from './icon'; export const TOKEN_POCKET_ID = 'tokenPocket'; @@ -16,11 +14,13 @@ export function tokenPocket(props: PartialCustomProps = {}): WalletProps { name: 'TokenPocket', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.tokenpocket.pro/en/download/app', }, spinnerColor: '#2980FE', + showQRCode: false, installed: isTokenPocket(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -39,12 +39,15 @@ export function tokenPocket(props: PartialCustomProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { const params = { url: window.location.href, }; return `tpdapp://open?params=${encodeURIComponent(JSON.stringify(params))}`; }, + getQRCodeUri(uri) { + return `tpoutside://wc?uri=${encodeURIComponent(uri)}`; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/trustWallet/icon.tsx b/packages/walletkit/src/wallets/trustWallet/icon.tsx index 43537a60..c4ae54c6 100644 --- a/packages/walletkit/src/wallets/trustWallet/icon.tsx +++ b/packages/walletkit/src/wallets/trustWallet/icon.tsx @@ -1,4 +1,6 @@ -export const TrustWalletLightIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const TrustWalletTransparentLightIcon = (props: SVGIconProps) => { return ( ) => { ); }; -export const TrustWalletDarkIcon = (props: React.SVGProps) => { +export const TrustWalletTransparentDarkIcon = (props: SVGIconProps) => { return ( ) => { ); }; -export const TrustWalletMobileLightIcon = (props: React.SVGProps) => { +export const TrustWalletLightIcon = (props: SVGIconProps) => { return ( @@ -91,20 +93,21 @@ export const TrustWalletMobileLightIcon = (props: React.SVGProps) ); }; -export const TrustWalletMobileDarkIcon = (props: React.SVGProps) => { +export const TrustWalletDarkIcon = (props: SVGIconProps) => { return ( + , dark: , }, - mobile: { - light: , - dark: , + transparent: { + light: , + dark: , }, }, downloadUrls: { default: 'https://trustwallet.com/', }, spinnerColor: '#1098FC', + showQRCode: false, installed: isTrustWallet(), createConnector: (chains: Chain[]) => { return new TrustWalletConnector({ @@ -46,12 +50,15 @@ export function trustWallet(props: TrustWalletProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { const dappPath = `https://link.trustwallet.com/open_url?coin_id=60&url=${encodeURIComponent( window.location.href, )}`; return dappPath; }, + getQRCodeUri(uri) { + return `trust://wc?uri=${encodeURIComponent(uri)}`; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/types.ts b/packages/walletkit/src/wallets/types.ts index 96c02afc..139435aa 100644 --- a/packages/walletkit/src/wallets/types.ts +++ b/packages/walletkit/src/wallets/types.ts @@ -1,21 +1,23 @@ +import { ColorMode } from '@/components/ThemeProvider/context'; import { ReactElement } from 'react'; import { Chain, Connector } from 'wagmi'; -import { ColorMode } from '../components/ThemeProvider/context'; export interface WalletProps { id: string; name: string; logos: { default: ReactElement | { [x in ColorMode]: ReactElement }; - mobile?: ReactElement | { [x in ColorMode]: ReactElement }; + transparent?: ReactElement | { [x in ColorMode]: ReactElement }; }; downloadUrls: { default: string | undefined; }; spinnerColor?: string; + showQRCode?: boolean; installed: boolean | undefined; createConnector: (chains: Chain[]) => Connector; - getUri: () => string | undefined; + getDeepLink: () => string | undefined; + getQRCodeUri?: (uri: string) => string; } export type PartialWalletProps = Partial; diff --git a/packages/walletkit/src/wallets/walletConnect/icon.tsx b/packages/walletkit/src/wallets/walletConnect/icon.tsx index 23f0be92..37eaa713 100644 --- a/packages/walletkit/src/wallets/walletConnect/icon.tsx +++ b/packages/walletkit/src/wallets/walletConnect/icon.tsx @@ -1,14 +1,16 @@ -export const WalletConnectIcon = (props: React.SVGProps) => { +import { SVGIconProps } from '@/types'; + +export const WalletConnectTransparentIcon = (props: SVGIconProps) => { return ( - + - + @@ -16,26 +18,14 @@ export const WalletConnectIcon = (props: React.SVGProps) => { ); }; -export const WalletConnectMobileIcon = (props: React.SVGProps) => { +export const WalletConnectIcon = (props: SVGIconProps) => { return ( - - - - - - - - - - - - - - - + + + ); }; diff --git a/packages/walletkit/src/wallets/walletConnect/index.tsx b/packages/walletkit/src/wallets/walletConnect/index.tsx index d46f385e..0600e156 100644 --- a/packages/walletkit/src/wallets/walletConnect/index.tsx +++ b/packages/walletkit/src/wallets/walletConnect/index.tsx @@ -1,11 +1,9 @@ +import { getGlobalData } from '@/globalData'; +import { isMobile } from '@/index'; import { Chain, Connector } from 'wagmi'; - -import { PartialWalletProps, WalletProps } from '../types'; -import { WalletConnectIcon, WalletConnectMobileIcon } from './icon'; -import { getGlobalData } from '../../globalData'; - -import { WalletConnectConnector } from '../walletConnect/connector'; -import { isMobile } from '../..'; +import { PartialWalletProps, WalletProps } from '..'; +import { WalletConnectIcon, WalletConnectTransparentIcon } from './icon'; +import { WalletConnectConnector } from './connector'; export const WALLET_CONNECT_ID = 'walletConnect'; @@ -25,7 +23,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps { name: 'WalletConnect', logos: { default: , - mobile: , + transparent: , }, downloadUrls: { default: undefined, @@ -66,7 +64,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps { }, }); }, - getUri: () => undefined, + getDeepLink: () => undefined, ...restProps, }; } diff --git a/packages/walletkit/tsconfig.json b/packages/walletkit/tsconfig.json index a7fc6fbf..3350e9cd 100644 --- a/packages/walletkit/tsconfig.json +++ b/packages/walletkit/tsconfig.json @@ -18,7 +18,12 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + + "baseUrl": "./", + "paths": { + "@/*": ["src/*"] + } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/packages/walletkit/vite.config.ts b/packages/walletkit/vite.config.ts index c46d103b..79f88c06 100644 --- a/packages/walletkit/vite.config.ts +++ b/packages/walletkit/vite.config.ts @@ -4,6 +4,7 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; import dts from 'vite-plugin-dts'; import nodeResolve from '@rollup/plugin-node-resolve'; import peerDepsExternal from 'rollup-plugin-peer-deps-external'; +import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ @@ -14,6 +15,11 @@ export default defineConfig({ }), dts(), ], + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + }, build: { target: 'esnext', minify: false, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 993faa48..824061ce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,9 @@ importers: react-dom: specifier: ^18 version: 18.2.0(react@18.2.0) + vconsole: + specifier: ^3.15.1 + version: 3.15.1 devDependencies: '@types/node': specifier: ^20