From 7f3e596600ae892b8528f8f80e5f55c1cf5572bc Mon Sep 17 00:00:00 2001 From: Wenty Li Date: Tue, 21 Nov 2023 16:11:15 +0800 Subject: [PATCH 1/6] feat: Update wallets's logo --- examples/test/pages/_app.tsx | 1 + .../walletkit/src/base/icons/AlertIcon.tsx | 4 +- .../walletkit/src/base/icons/BackIcon.tsx | 4 +- .../src/base/icons/ChainSpinnerIcon.tsx | 4 +- .../src/base/icons/CircleLoadingIcon.tsx | 3 +- .../walletkit/src/base/icons/CloseIcon.tsx | 4 +- .../walletkit/src/base/icons/CopyIcon.tsx | 4 +- .../src/base/icons/DownArrowIcon.tsx | 4 +- .../walletkit/src/base/icons/ErrorIcon.tsx | 3 +- .../walletkit/src/base/icons/ExitIcon.tsx | 4 +- .../walletkit/src/base/icons/ForwardIcon.tsx | 4 +- .../walletkit/src/base/icons/InfoIcon.tsx | 4 +- .../walletkit/src/base/icons/RefreshIcon.tsx | 4 +- .../walletkit/src/base/icons/SuccessIcon.tsx | 4 +- .../walletkit/src/base/icons/WalletIcon.tsx | 4 +- .../walletkit/src/chains/icons/BscIcon.tsx | 4 +- .../walletkit/src/chains/icons/ComboIcon.tsx | 4 +- .../src/chains/icons/UnknownChainIcon.tsx | 4 +- .../src/hooks/useWalletConnectModal.ts | 3 +- .../walletkit/src/hooks/useWalletLogos.ts | 7 +-- .../src/pages/ConnectWithQRCode/index.tsx | 4 +- .../walletkit/src/pages/Connecting/index.tsx | 2 +- .../pages/Connectors/WalletOption/index.tsx | 2 +- packages/walletkit/src/types.ts | 2 + .../src/wallets/binanceWeb3Wallet/icon.tsx | 29 ++++++++---- .../src/wallets/binanceWeb3Wallet/index.tsx | 3 +- .../src/wallets/coinbaseWallet/icon.tsx | 37 +++++++++++++--- .../src/wallets/coinbaseWallet/index.tsx | 3 +- packages/walletkit/src/wallets/index.ts | 9 ++-- .../walletkit/src/wallets/injected/icon.tsx | 4 +- .../walletkit/src/wallets/mathWallet/icon.tsx | 44 ++++++------------- .../src/wallets/mathWallet/index.tsx | 8 ++-- .../walletkit/src/wallets/metaMask/icon.tsx | 40 ++++++++++++++++- .../walletkit/src/wallets/metaMask/index.tsx | 3 +- .../walletkit/src/wallets/okxWallet/icon.tsx | 23 +++++++--- .../walletkit/src/wallets/okxWallet/index.tsx | 3 +- .../src/wallets/tokenPocket/icon.tsx | 6 ++- .../src/wallets/tokenPocket/index.tsx | 3 +- .../src/wallets/trustWallet/icon.tsx | 10 +++-- .../src/wallets/trustWallet/index.tsx | 10 ++--- packages/walletkit/src/wallets/types.ts | 2 +- .../src/wallets/walletConnect/connector.tsx | 21 --------- .../src/wallets/walletConnect/icon.tsx | 34 +++++--------- .../src/wallets/walletConnect/index.tsx | 6 +-- 44 files changed, 231 insertions(+), 154 deletions(-) delete mode 100644 packages/walletkit/src/wallets/walletConnect/connector.tsx diff --git a/examples/test/pages/_app.tsx b/examples/test/pages/_app.tsx index fa3927f1..1672f163 100644 --- a/examples/test/pages/_app.tsx +++ b/examples/test/pages/_app.tsx @@ -48,6 +48,7 @@ const config = createConfig( const options: WalletKitOptions = { initialChainId: 56, + // hideOfficialWalletConnectCTA: true, }; export default function App({ Component, pageProps }: AppProps) { diff --git a/packages/walletkit/src/base/icons/AlertIcon.tsx b/packages/walletkit/src/base/icons/AlertIcon.tsx index 1ebad408..dd53b0a5 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..d9ac4ad5 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..b8712a19 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..5ae03801 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..6c2b8c2f 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..0d2163c5 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..fa1cd1be 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..72eea5aa 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 ( { - const { default: defaultLogos, mobile: mobileLogos } = walletLogos; + const { default: defaultLogos, transparent: transparentLogos } = walletLogos; const defaultLogo = (defaultLogos as any)?.[colorMode] ?? defaultLogos; - const mobileLogo = (mobileLogos as any)?.[colorMode] ?? mobileLogos ?? defaultLogo; + const transparentLogo = + (transparentLogos as any)?.[colorMode] ?? transparentLogos ?? defaultLogo; return { default: defaultLogo, - mobile: mobileLogo, + transparent: transparentLogo, }; }, [colorMode, walletLogos]); diff --git a/packages/walletkit/src/pages/ConnectWithQRCode/index.tsx b/packages/walletkit/src/pages/ConnectWithQRCode/index.tsx index 07ad0dd8..3fb3fe6f 100644 --- a/packages/walletkit/src/pages/ConnectWithQRCode/index.tsx +++ b/packages/walletkit/src/pages/ConnectWithQRCode/index.tsx @@ -22,15 +22,13 @@ export function ConnectWithQRCodePage() { const { wcUri } = useWalletConnectUri(); const { onOpenWcModal } = useWalletConnectModal(); - const logo = logos?.mobile ?? logos?.default; - return ( <> Scan with your phone - + {!options.hideOfficialWalletConnectCTA && ( diff --git a/packages/walletkit/src/pages/Connecting/index.tsx b/packages/walletkit/src/pages/Connecting/index.tsx index ced0aa10..cb01d10c 100644 --- a/packages/walletkit/src/pages/Connecting/index.tsx +++ b/packages/walletkit/src/pages/Connecting/index.tsx @@ -116,7 +116,7 @@ export function ConnectingPage() { - {logos.default} + {logos.transparent} diff --git a/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx b/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx index be14d383..d4c76d92 100644 --- a/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx +++ b/packages/walletkit/src/pages/Connectors/WalletOption/index.tsx @@ -27,7 +27,7 @@ export function WalletOption(props: WalletOptionProps) { onClick={(e) => onClickWallet(connector, e)} > {wallet.name} - {logos.default} + {logos.transparent} ); } 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/wallets/binanceWeb3Wallet/icon.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/icon.tsx index 4c9ae87b..763dd791 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..8f90f237 100644 --- a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx +++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx @@ -1,7 +1,7 @@ import { Chain } from 'wagmi'; import { WalletProps } from '../types'; -import { BinanceWeb3WalletIcon } from './icon'; +import { BinanceWeb3WalletIcon, BinanceWeb3WalletTransparentIcon } from './icon'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider } from '../utils'; import { PartialCustomProps } from '../custom'; @@ -16,6 +16,7 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { name: 'Binance Web3 Wallet', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.binance.com/en/web3wallet', diff --git a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx index ce7e86f7..772f0d5a 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..8e1d8b1a 100644 --- a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx +++ b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx @@ -1,7 +1,7 @@ import { Chain } from 'wagmi'; import { PartialWalletProps, WalletProps } from '../types'; -import { CoinbaseWalletIcon } from './icon'; +import { CoinbaseWalletIcon, CoinbaseWalletTransparentIcon } from './icon'; import { hasInjectedProvider } from '../utils'; import { getGlobalData } from '../../globalData'; import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'; @@ -24,6 +24,7 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps { name: 'Coinbase Wallet', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://coinbase.com/wallet', 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..eff868e2 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 ( - - - - - - - - - - - ); +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..466b4aba 100644 --- a/packages/walletkit/src/wallets/mathWallet/index.tsx +++ b/packages/walletkit/src/wallets/mathWallet/index.tsx @@ -1,7 +1,7 @@ import { Chain } from 'wagmi'; import { WalletProps } from '../types'; -import { MathWalletDarkIcon, MathWalletLightIcon } from './icon'; +import { MathWalletIcon, MathWalletTransparentIcon } from './icon'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; import { PartialCustomProps } from '../custom'; @@ -15,10 +15,8 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { id: MATH_WALLET_ID, name: 'Math Wallet', logos: { - default: { - light: , - dark: , - }, + default: , + transparent: , }, downloadUrls: { default: 'https://mathwallet.org', diff --git a/packages/walletkit/src/wallets/metaMask/icon.tsx b/packages/walletkit/src/wallets/metaMask/icon.tsx index 9832a40f..f734970c 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..bd4e7bb5 100644 --- a/packages/walletkit/src/wallets/metaMask/index.tsx +++ b/packages/walletkit/src/wallets/metaMask/index.tsx @@ -1,7 +1,7 @@ import { Chain, Connector } from 'wagmi'; import { MetaMaskConnector } from 'wagmi/connectors/metaMask'; -import { MetaMaskIcon } from './icon'; +import { MetaMaskIcon, MetaMaskTransparentIcon } from './icon'; import { isTokenPocket } from '../tokenPocket'; import { PartialWalletProps, WalletProps } from '../types'; @@ -23,6 +23,7 @@ export function metaMask(props: MetaMaskProps = {}): WalletProps { name: 'MetaMask', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://metamask.io/download/', diff --git a/packages/walletkit/src/wallets/okxWallet/icon.tsx b/packages/walletkit/src/wallets/okxWallet/icon.tsx index a6a02db2..4ddf1125 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..b1926592 100644 --- a/packages/walletkit/src/wallets/okxWallet/index.tsx +++ b/packages/walletkit/src/wallets/okxWallet/index.tsx @@ -1,7 +1,7 @@ import { Chain } from 'wagmi'; import { WalletProps } from '../types'; -import { OkxWalletIcon } from './icon'; +import { OkxWalletIcon, OkxWalletTransparentIcon } from './icon'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; import { PartialCustomProps } from '../custom'; @@ -16,6 +16,7 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { name: 'OKX Wallet', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.okx.com/web3', diff --git a/packages/walletkit/src/wallets/tokenPocket/icon.tsx b/packages/walletkit/src/wallets/tokenPocket/icon.tsx index bbf98225..395cf8c7 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,5 @@ export const TokenPocketIcon = (props: React.SVGProps) => { ); }; + +export const TokenPocketIcon = TokenPocketTransparentIcon; diff --git a/packages/walletkit/src/wallets/tokenPocket/index.tsx b/packages/walletkit/src/wallets/tokenPocket/index.tsx index 09c962b3..1bcab709 100644 --- a/packages/walletkit/src/wallets/tokenPocket/index.tsx +++ b/packages/walletkit/src/wallets/tokenPocket/index.tsx @@ -1,7 +1,7 @@ import { Chain } from 'wagmi'; import { WalletProps } from '../types'; -import { TokenPocketIcon } from './icon'; +import { TokenPocketIcon, TokenPocketTransparentIcon } from './icon'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; import { CustomConnector } from '../custom/connector'; import { PartialCustomProps } from '../custom'; @@ -16,6 +16,7 @@ export function tokenPocket(props: PartialCustomProps = {}): WalletProps { name: 'TokenPocket', logos: { default: , + transparent: , }, downloadUrls: { default: 'https://www.tokenpocket.pro/en/download/app', diff --git a/packages/walletkit/src/wallets/trustWallet/icon.tsx b/packages/walletkit/src/wallets/trustWallet/icon.tsx index 43537a60..8cc06f55 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,7 +93,7 @@ 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: { diff --git a/packages/walletkit/src/wallets/types.ts b/packages/walletkit/src/wallets/types.ts index 96c02afc..9c8ebaeb 100644 --- a/packages/walletkit/src/wallets/types.ts +++ b/packages/walletkit/src/wallets/types.ts @@ -7,7 +7,7 @@ export interface WalletProps { 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; diff --git a/packages/walletkit/src/wallets/walletConnect/connector.tsx b/packages/walletkit/src/wallets/walletConnect/connector.tsx deleted file mode 100644 index 79aef34b..00000000 --- a/packages/walletkit/src/wallets/walletConnect/connector.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { WalletConnectConnector as WagmiWalletConnectConnector } from 'wagmi/connectors/walletConnect'; -import { createWalletClient, custom } from 'viem'; -import { WalletClient } from 'wagmi'; - -export class WalletConnectConnector extends WagmiWalletConnectConnector { - async getWalletClient({ chainId }: { chainId?: number } = {}): Promise { - const [provider, account] = await Promise.all([ - this.getProvider(), // TODO - this.getAccount(), - ]); - - const chain = this.chains.find((x) => x.id === chainId); - if (!provider) throw new Error('provider is required.'); - - return createWalletClient({ - account: account, - chain: chain, - transport: custom(provider), - }) as any; - } -} diff --git a/packages/walletkit/src/wallets/walletConnect/icon.tsx b/packages/walletkit/src/wallets/walletConnect/icon.tsx index 23f0be92..4b8328a7 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..9106fbd2 100644 --- a/packages/walletkit/src/wallets/walletConnect/index.tsx +++ b/packages/walletkit/src/wallets/walletConnect/index.tsx @@ -1,11 +1,11 @@ import { Chain, Connector } from 'wagmi'; import { PartialWalletProps, WalletProps } from '../types'; -import { WalletConnectIcon, WalletConnectMobileIcon } from './icon'; +import { WalletConnectIcon, WalletConnectTransparentIcon } from './icon'; import { getGlobalData } from '../../globalData'; -import { WalletConnectConnector } from '../walletConnect/connector'; import { isMobile } from '../..'; +import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'; export const WALLET_CONNECT_ID = 'walletConnect'; @@ -25,7 +25,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps { name: 'WalletConnect', logos: { default: , - mobile: , + transparent: , }, downloadUrls: { default: undefined, From aee0258927083b17b2e6ed3cc3445e0e8cc0c257 Mon Sep 17 00:00:00 2001 From: Wenty Li Date: Tue, 21 Nov 2023 18:19:12 +0800 Subject: [PATCH 2/6] refactor: Update alias --- .../src/base/components/Box/index.tsx | 2 +- .../src/base/components/Button/index.tsx | 2 +- .../src/base/components/IconButton/index.tsx | 4 +- .../base/components/IconButton/styles.css.ts | 2 +- .../src/base/components/Link/index.tsx | 2 +- .../src/base/components/Link/styles.css.ts | 2 +- .../base/components/Modal/ModalBody/index.tsx | 4 +- .../components/Modal/ModalFooter/index.tsx | 2 +- .../components/Modal/ModalHeader/index.tsx | 4 +- .../src/base/components/Modal/index.tsx | 14 +++--- .../src/base/components/Modal/styles.css.ts | 2 +- .../{Animation => Transition}/fade.css.ts | 0 .../{Animation => Transition}/index.tsx | 6 +-- .../toastSlide.css.ts | 0 .../base/components/toast/ToastComponent.tsx | 14 +++--- .../base/components/toast/ToastProvider.tsx | 2 +- .../src/base/components/toast/styles.css.ts | 2 +- .../walletkit/src/base/hooks/useResponsive.ts | 28 ++++++++++++ .../walletkit/src/base/icons/AlertIcon.tsx | 2 +- .../walletkit/src/base/icons/BackIcon.tsx | 2 +- .../src/base/icons/CircleLoadingIcon.tsx | 2 +- .../walletkit/src/base/icons/CloseIcon.tsx | 2 +- .../walletkit/src/base/icons/CopyIcon.tsx | 2 +- .../src/base/icons/DownArrowIcon.tsx | 2 +- .../walletkit/src/base/icons/ErrorIcon.tsx | 2 +- .../walletkit/src/base/icons/ExitIcon.tsx | 2 +- .../walletkit/src/base/icons/ForwardIcon.tsx | 2 +- .../walletkit/src/base/icons/InfoIcon.tsx | 2 +- .../walletkit/src/base/icons/RefreshIcon.tsx | 2 +- .../walletkit/src/base/icons/SuccessIcon.tsx | 2 +- .../walletkit/src/base/icons/WalletIcon.tsx | 2 +- .../walletkit/src/chains/icons/BscIcon.tsx | 2 +- .../walletkit/src/chains/icons/ComboIcon.tsx | 2 +- .../src/chains/icons/UnknownChainIcon.tsx | 2 +- .../walletkit/src/components/Avatar/index.tsx | 6 +-- .../src/components/CopyToClipboard/index.tsx | 10 ++--- .../CustomQRCode/QRCodePlaceHolder/index.tsx | 2 +- .../src/components/CustomQRCode/index.tsx | 4 +- .../src/components/CustomQRCode/styles.css.ts | 2 +- .../src/components/DisconnectButton/index.tsx | 8 ++-- .../components/DisconnectButton/styles.css.ts | 2 +- .../src/components/ModalProvider/index.tsx | 12 +++--- .../walletkit/src/components/Navbar/index.tsx | 12 +++--- .../src/components/RouteProvider/index.tsx | 12 +++--- .../components/SwitchNetworkModal/index.tsx | 2 +- .../src/components/ThemeProvider/index.tsx | 4 +- .../WalletConnectUriProvider/index.tsx | 10 ++--- .../ConnectButton/ConnectedInfo/index.tsx | 32 +++++++------- .../ConnectButton/ConnectedInfo/styles.css.ts | 2 +- .../WalletKitButton/ConnectButton/index.tsx | 10 ++--- .../ConnectButton/styles.css.ts | 2 +- .../ConnectButtonRenderer/index.tsx | 11 +++-- .../src/components/WalletKitModal/index.tsx | 6 +-- .../components/WalletKitProvider/context.ts | 2 +- .../components/WalletKitProvider/index.tsx | 18 ++++---- packages/walletkit/src/constants/common.ts | 2 + .../getDefaultProviderOptions.ts | 4 +- .../getDefaultSupportedChains.tsx | 8 ++-- .../src/defaultConfig/getDefaultWallets.ts | 2 +- .../walletkit/src/hooks/useChainConfig.ts | 4 +- packages/walletkit/src/hooks/useChains.ts | 5 +-- .../walletkit/src/hooks/useClickWallet.ts | 9 ++-- .../{useConnectors.ts => useConnector.ts} | 7 +-- .../walletkit/src/hooks/useWalletConfig.ts | 2 +- .../src/hooks/useWalletConnectModal.ts | 9 ++-- .../src/hooks/useWalletDownloadUrl.ts | 2 +- .../src/hooks/useWalletKitConnect.ts | 5 +-- .../src/hooks/useWalletKitSwitchNetwork.ts | 4 +- .../walletkit/src/hooks/useWalletLogos.ts | 4 +- .../src/pages/ConnectWithQRCode/index.tsx | 25 ++++++----- .../walletkit/src/pages/Connected/index.tsx | 18 ++++---- .../src/pages/Connected/styles.css.ts | 2 +- .../pages/Connecting/ConnectSpinner/index.tsx | 8 ++-- .../Connecting/ConnectSpinner/styles.css.ts | 2 +- .../Connecting/Content/Description/index.tsx | 4 +- .../Content/Description/styles.css.ts | 2 +- .../Connecting/Content/ErrorTitle/index.tsx | 7 ++- .../Content/ErrorTitle/styles.css.ts | 2 +- .../Connecting/Content/InfoTitle/index.tsx | 4 +- .../src/pages/Connecting/Content/index.tsx | 6 +-- .../Connecting/UnsupportedContent/index.tsx | 4 +- .../walletkit/src/pages/Connecting/index.tsx | 30 ++++++------- .../src/pages/Connecting/styles.css.ts | 2 +- .../src/pages/Connectors/GridLayout/index.tsx | 3 ++ .../{ => ListLayout}/WalletOption/index.tsx | 17 ++++---- .../WalletOption/styles.css.ts | 2 +- .../src/pages/Connectors/ListLayout/index.tsx | 32 ++++++++++++++ .../pages/Connectors/ListLayout/styles.css.ts | 14 ++++++ .../walletkit/src/pages/Connectors/index.tsx | 43 +++++++------------ .../src/pages/Connectors/styles.css.ts | 2 +- .../pages/SwitchNetwork/ChainOption/index.tsx | 12 +++--- .../SwitchNetwork/ChainOption/styles.css.ts | 2 +- .../SwitchNetwork/ChainSpinner/index.tsx | 6 +-- .../src/pages/SwitchNetwork/index.tsx | 18 ++++---- .../src/pages/SwitchNetwork/styles.css.ts | 2 +- packages/walletkit/src/themes/base.ts | 3 +- packages/walletkit/src/utils/common.ts | 4 +- .../src/wallets/binanceWeb3Wallet/icon.tsx | 2 +- .../src/wallets/binanceWeb3Wallet/index.tsx | 6 +-- .../src/wallets/coinbaseWallet/index.tsx | 9 ++-- .../walletkit/src/wallets/injected/icon.tsx | 2 +- .../walletkit/src/wallets/injected/index.tsx | 3 +- .../walletkit/src/wallets/mathWallet/icon.tsx | 2 +- .../src/wallets/mathWallet/index.tsx | 6 +-- .../walletkit/src/wallets/metaMask/icon.tsx | 2 +- .../walletkit/src/wallets/metaMask/index.tsx | 4 +- .../walletkit/src/wallets/okxWallet/icon.tsx | 4 +- .../walletkit/src/wallets/okxWallet/index.tsx | 6 +-- packages/walletkit/src/wallets/safe/index.tsx | 4 +- .../src/wallets/tokenPocket/icon.tsx | 2 +- .../src/wallets/tokenPocket/index.tsx | 8 ++-- .../src/wallets/trustWallet/icon.tsx | 2 +- .../src/wallets/trustWallet/index.tsx | 15 ++++--- packages/walletkit/src/wallets/types.ts | 2 +- .../src/wallets/walletConnect/icon.tsx | 2 +- .../src/wallets/walletConnect/index.tsx | 10 ++--- packages/walletkit/tsconfig.json | 7 ++- packages/walletkit/vite.config.ts | 6 +++ 118 files changed, 394 insertions(+), 346 deletions(-) rename packages/walletkit/src/base/components/{Animation => Transition}/fade.css.ts (100%) rename packages/walletkit/src/base/components/{Animation => Transition}/index.tsx (88%) rename packages/walletkit/src/base/components/{Animation => Transition}/toastSlide.css.ts (100%) create mode 100644 packages/walletkit/src/base/hooks/useResponsive.ts rename packages/walletkit/src/hooks/{useConnectors.ts => useConnector.ts} (67%) create mode 100644 packages/walletkit/src/pages/Connectors/GridLayout/index.tsx rename packages/walletkit/src/pages/Connectors/{ => ListLayout}/WalletOption/index.tsx (57%) rename packages/walletkit/src/pages/Connectors/{ => ListLayout}/WalletOption/styles.css.ts (93%) create mode 100644 packages/walletkit/src/pages/Connectors/ListLayout/index.tsx create mode 100644 packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts 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/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/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..6fcc3bc9 100644 --- a/packages/walletkit/src/base/components/Modal/styles.css.ts +++ b/packages/walletkit/src/base/components/Modal/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 clsModal = style({ zIndex: cssVar('modal', 'zIndices'), 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/hooks/useResponsive.ts b/packages/walletkit/src/base/hooks/useResponsive.ts new file mode 100644 index 00000000..b7e18223 --- /dev/null +++ b/packages/walletkit/src/base/hooks/useResponsive.ts @@ -0,0 +1,28 @@ +import { useEffect, useState } from 'react'; + +export function useMediaQuery(query: string) { + const [isMatched, setIsMatched] = useState(false); + + useEffect(() => { + const onChange = () => { + const isMatched = window.matchMedia(query).matches; + setIsMatched(isMatched); + }; + + const matchMedia = window.matchMedia(query); + matchMedia.addEventListener('change', onChange); + return () => { + matchMedia.removeEventListener('change', onChange); + }; + }, [query]); + + return isMatched; +} + +export const useResponsive = () => { + const isMobileLayout = useMediaQuery('(min-width: 0px) and (max-width: 767px)'); + + return { + isMobileLayout, + }; +}; diff --git a/packages/walletkit/src/base/icons/AlertIcon.tsx b/packages/walletkit/src/base/icons/AlertIcon.tsx index dd53b0a5..5f035e43 100644 --- a/packages/walletkit/src/base/icons/AlertIcon.tsx +++ b/packages/walletkit/src/base/icons/AlertIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const AlertIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/BackIcon.tsx b/packages/walletkit/src/base/icons/BackIcon.tsx index 9be90821..4514fe52 100644 --- a/packages/walletkit/src/base/icons/BackIcon.tsx +++ b/packages/walletkit/src/base/icons/BackIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const BackIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx b/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx index d9ac4ad5..a6509a2e 100644 --- a/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx +++ b/packages/walletkit/src/base/icons/CircleLoadingIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; import { cssVar } from '../utils/css'; export interface CircleLoadingIconProps extends SVGIconProps { diff --git a/packages/walletkit/src/base/icons/CloseIcon.tsx b/packages/walletkit/src/base/icons/CloseIcon.tsx index b8712a19..ca1f5bf7 100644 --- a/packages/walletkit/src/base/icons/CloseIcon.tsx +++ b/packages/walletkit/src/base/icons/CloseIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const CloseIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/CopyIcon.tsx b/packages/walletkit/src/base/icons/CopyIcon.tsx index 6e88658a..c69ad8f1 100644 --- a/packages/walletkit/src/base/icons/CopyIcon.tsx +++ b/packages/walletkit/src/base/icons/CopyIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const CopyIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/DownArrowIcon.tsx b/packages/walletkit/src/base/icons/DownArrowIcon.tsx index c98889f2..378b041e 100644 --- a/packages/walletkit/src/base/icons/DownArrowIcon.tsx +++ b/packages/walletkit/src/base/icons/DownArrowIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const DownArrowIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/ErrorIcon.tsx b/packages/walletkit/src/base/icons/ErrorIcon.tsx index 07aaf392..54575bc8 100644 --- a/packages/walletkit/src/base/icons/ErrorIcon.tsx +++ b/packages/walletkit/src/base/icons/ErrorIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; import { cssVar } from '../utils/css'; export const ErrorIcon = (props: SVGIconProps) => { diff --git a/packages/walletkit/src/base/icons/ExitIcon.tsx b/packages/walletkit/src/base/icons/ExitIcon.tsx index 5ae03801..02e711ac 100644 --- a/packages/walletkit/src/base/icons/ExitIcon.tsx +++ b/packages/walletkit/src/base/icons/ExitIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const ExitIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/ForwardIcon.tsx b/packages/walletkit/src/base/icons/ForwardIcon.tsx index 84717c5f..1aedfe45 100644 --- a/packages/walletkit/src/base/icons/ForwardIcon.tsx +++ b/packages/walletkit/src/base/icons/ForwardIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const ForwardIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/InfoIcon.tsx b/packages/walletkit/src/base/icons/InfoIcon.tsx index ab9e569c..6942184c 100644 --- a/packages/walletkit/src/base/icons/InfoIcon.tsx +++ b/packages/walletkit/src/base/icons/InfoIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const InfoIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/base/icons/RefreshIcon.tsx b/packages/walletkit/src/base/icons/RefreshIcon.tsx index 50193c78..bf85f741 100644 --- a/packages/walletkit/src/base/icons/RefreshIcon.tsx +++ b/packages/walletkit/src/base/icons/RefreshIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +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 6c2b8c2f..0afde56b 100644 --- a/packages/walletkit/src/base/icons/SuccessIcon.tsx +++ b/packages/walletkit/src/base/icons/SuccessIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +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 0d2163c5..f0ff23dd 100644 --- a/packages/walletkit/src/base/icons/WalletIcon.tsx +++ b/packages/walletkit/src/base/icons/WalletIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const WalletIcon = (props: SVGIconProps) => { return ( diff --git a/packages/walletkit/src/chains/icons/BscIcon.tsx b/packages/walletkit/src/chains/icons/BscIcon.tsx index 84212da6..ca41b6e0 100644 --- a/packages/walletkit/src/chains/icons/BscIcon.tsx +++ b/packages/walletkit/src/chains/icons/BscIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +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 fa1cd1be..2a0d10bb 100644 --- a/packages/walletkit/src/chains/icons/ComboIcon.tsx +++ b/packages/walletkit/src/chains/icons/ComboIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +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 72eea5aa..992eec6f 100644 --- a/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx +++ b/packages/walletkit/src/chains/icons/UnknownChainIcon.tsx @@ -1,4 +1,4 @@ -import { SVGIconProps } from '../../types'; +import { SVGIconProps } from '@/types'; export const UnknownChainIcon = (props: SVGIconProps) => { return ( 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/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..4bd5520b 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; diff --git a/packages/walletkit/src/components/CustomQRCode/styles.css.ts b/packages/walletkit/src/components/CustomQRCode/styles.css.ts index 82d780bc..95160c35 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', 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..6ea39221 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; 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..dc0336f3 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; diff --git a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx index e88dd5e4..74eef133 100644 --- a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx +++ b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx @@ -1,10 +1,10 @@ +import { useConnector } from '@/hooks/useConnector'; +import { commonErrorHandler } from '@/utils/common'; +import { WALLET_CONNECT_ID } 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; 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 22f263de..340e3ba1 100644 --- a/packages/walletkit/src/pages/Connected/styles.css.ts +++ b/packages/walletkit/src/pages/Connected/styles.css.ts @@ -1,6 +1,16 @@ +import { MOBILE_MEDIA } from '@/base/constant'; import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; +export const clsFooter = style({ + marginTop: 0, + '@media': { + [MOBILE_MEDIA]: { + marginBottom: -16, + }, + }, +}); + export const clsAvatar = style({ width: 100, height: 100, diff --git a/packages/walletkit/src/pages/Connecting/Content/index.tsx b/packages/walletkit/src/pages/Connecting/Content/index.tsx index 72e00409..a46be1a1 100644 --- a/packages/walletkit/src/pages/Connecting/Content/index.tsx +++ b/packages/walletkit/src/pages/Connecting/Content/index.tsx @@ -1,6 +1,6 @@ import { BoxProps, Box } from '@/base/components/Box'; import { cx } from '@/index'; -import { clsContent } from '../styles.css'; +import { clsContent } from './styles.css'; export function Content(props: BoxProps) { const { className, ...restProps } = props; diff --git a/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx b/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx index 0be1f60c..c1ba3f23 100644 --- a/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx +++ b/packages/walletkit/src/pages/Connecting/UnsupportedContent/index.tsx @@ -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/styles.css.ts b/packages/walletkit/src/pages/Connecting/styles.css.ts index 00bf2d26..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'; -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 index 38def86b..439b23d7 100644 --- a/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx +++ b/packages/walletkit/src/pages/Connectors/GridLayout/index.tsx @@ -1,3 +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() { - return 'hh'; + 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/ListLayout/WalletOption/styles.css.ts b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts index 15d7faac..ee5de263 100644 --- a/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/ListLayout/WalletOption/styles.css.ts @@ -6,7 +6,6 @@ export const clsWalletOption = style({ 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 index 68851aea..f7c11db0 100644 --- a/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx +++ b/packages/walletkit/src/pages/Connectors/ListLayout/index.tsx @@ -4,8 +4,9 @@ import { ModalFooter } from '@/base/components/Modal/ModalFooter'; import { WalletIcon } from '@/base/icons/WalletIcon'; import { useWalletKitContext, cx } from '@/index'; import { useConnect } from 'wagmi'; -import { clsWallets, clsDownloadLink } from '../styles.css'; + import { WalletOption } from './WalletOption'; +import { clsWallets, clsNoWalletLink } from './styles.css'; export function ListLayout() { const { connectors } = useConnect(); @@ -13,14 +14,14 @@ export function ListLayout() { 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 index 1fa20ee1..7eb1eb18 100644 --- a/packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/ListLayout/styles.css.ts @@ -1,11 +1,10 @@ import { style } from '@vanilla-extract/css'; export const clsWallets = style({ - overflowY: 'auto', gap: 16, }); -export const clsDownloadLink = style({ +export const clsNoWalletLink = style({ display: 'flex', alignItems: 'center', gap: 10, diff --git a/packages/walletkit/src/pages/Connectors/index.tsx b/packages/walletkit/src/pages/Connectors/index.tsx index c02a7100..e6b3a74a 100644 --- a/packages/walletkit/src/pages/Connectors/index.tsx +++ b/packages/walletkit/src/pages/Connectors/index.tsx @@ -2,19 +2,19 @@ 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 { GRID_LAYOUT_THRESHOLD } from '@/constants/common'; 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 } = useConnect(); const { options } = useWalletKitContext(); const { isMobileLayout } = useResponsive(); - const useGridLayout = false; // connectors.length > GRID_LAYOUT_THRESHOLD || isMobileLayout; + const useGridLayout = connectors.length > LIST_LAYOUT_THRESHOLD || isMobileLayout; return ( <> diff --git a/packages/walletkit/src/pages/Connectors/styles.css.ts b/packages/walletkit/src/pages/Connectors/styles.css.ts index 3cfd7bf8..cbe086b8 100644 --- a/packages/walletkit/src/pages/Connectors/styles.css.ts +++ b/packages/walletkit/src/pages/Connectors/styles.css.ts @@ -1,19 +1,6 @@ import { cssVar } from '@/base/utils/css'; import { style } from '@vanilla-extract/css'; -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, fontWeight: 400, diff --git a/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts b/packages/walletkit/src/pages/SwitchNetwork/ChainOption/styles.css.ts index 9dfd492d..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 { MOBILE_MEDIA } from '@/base/constant'; import { cssVar } from '@/index'; -import { globalStyle, style } from '@vanilla-extract/css'; +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/index.tsx b/packages/walletkit/src/pages/SwitchNetwork/index.tsx index 83351687..2d25d362 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/index.tsx +++ b/packages/walletkit/src/pages/SwitchNetwork/index.tsx @@ -7,7 +7,15 @@ import { useWalletKitSwitchNetwork } from '@/hooks/useWalletKitSwitchNetwork'; import { useWalletKitContext, useModal, cx } from '@/index'; import { useNetwork } from 'wagmi'; import { ChainOption } from './ChainOption'; -import { clsDescription, clsChains, clsOrSeparator } from './styles.css'; +import { + clsDescription, + clsChains, + clsOrSeparator, + clsBody, + clsFooter, + clsNoNavHeader, +} from './styles.css'; +import { ModalFooter } from '@/base/components/Modal/ModalFooter'; export function SwitchNetworkPage() { const { supportedChains } = useWalletKitContext(); @@ -24,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 @@ -46,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 459072f8..333d0e6f 100644 --- a/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts +++ b/packages/walletkit/src/pages/SwitchNetwork/styles.css.ts @@ -1,6 +1,32 @@ +import { MOBILE_MEDIA } from '@/base/constant'; import { cssVar } from '@/index'; import { style } from '@vanilla-extract/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', fontSize: 16, diff --git a/packages/walletkit/src/themes/base.ts b/packages/walletkit/src/themes/base.ts index c7eeff3a..677b1544 100644 --- a/packages/walletkit/src/themes/base.ts +++ b/packages/walletkit/src/themes/base.ts @@ -8,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)', @@ -48,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', @@ -74,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)', @@ -108,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', @@ -134,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/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx index 70800ed7..845844f7 100644 --- a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx +++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx @@ -20,6 +20,7 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { default: 'https://www.binance.com/en/web3wallet', }, spinnerColor: undefined, + showQRCode: true, installed: isBinanceWeb3Wallet(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -38,9 +39,12 @@ export function binanceWeb3Wallet(props: PartialCustomProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { return undefined; }, + getQRCodeUri(uri) { + return uri; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx index 772f0d5a..513d4b51 100644 --- a/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx +++ b/packages/walletkit/src/wallets/coinbaseWallet/icon.tsx @@ -19,9 +19,9 @@ export const CoinbaseWalletIcon = (props: SVGIconProps) => { d="M0 18.1333C0 8.11857 8.11857 0 18.1333 0H49.8667C59.8814 0 68 8.11857 68 18.1333V49.8667C68 59.8814 59.8814 68 49.8667 68H18.1333C8.11857 68 0 59.8814 0 49.8667V18.1333Z" fill="#0051FE" /> - + - + { 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/injected/index.tsx b/packages/walletkit/src/wallets/injected/index.tsx index 49f14c07..846c70e0 100644 --- a/packages/walletkit/src/wallets/injected/index.tsx +++ b/packages/walletkit/src/wallets/injected/index.tsx @@ -25,6 +25,7 @@ export function injected(props: InjectedProps = {}): WalletProps { downloadUrls: { default: undefined, }, + showQRCode: false, installed: isInjected(), createConnector: (chains: Chain[]) => { return new InjectedConnector({ @@ -36,7 +37,7 @@ export function injected(props: InjectedProps = {}): WalletProps { }, }); }, - getUri: () => undefined, + getDeepLink: () => undefined, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/mathWallet/index.tsx b/packages/walletkit/src/wallets/mathWallet/index.tsx index a2ed56f6..2446ebcd 100644 --- a/packages/walletkit/src/wallets/mathWallet/index.tsx +++ b/packages/walletkit/src/wallets/mathWallet/index.tsx @@ -19,6 +19,7 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { downloadUrls: { default: 'https://mathwallet.org', }, + showQRCode: false, spinnerColor: undefined, installed: isMathWallet(), createConnector: (chains: Chain[]) => { @@ -38,9 +39,12 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`; }, + getQRCodeUri(uri) { + return uri; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/metaMask/icon.tsx b/packages/walletkit/src/wallets/metaMask/icon.tsx index adf8a424..5d6327d9 100644 --- a/packages/walletkit/src/wallets/metaMask/icon.tsx +++ b/packages/walletkit/src/wallets/metaMask/icon.tsx @@ -132,7 +132,7 @@ export function MetaMaskIcon(props: SVGIconProps) { xmlnsXlink="http://www.w3.org/1999/xlink" {...props} > - + diff --git a/packages/walletkit/src/wallets/metaMask/index.tsx b/packages/walletkit/src/wallets/metaMask/index.tsx index b06d9835..d09cb6ff 100644 --- a/packages/walletkit/src/wallets/metaMask/index.tsx +++ b/packages/walletkit/src/wallets/metaMask/index.tsx @@ -27,6 +27,7 @@ export function metaMask(props: MetaMaskProps = {}): WalletProps { default: 'https://metamask.io/download/', }, spinnerColor: '#F0B90B', + showQRCode: false, installed: isMetaMask(), createConnector: (chains: Chain[]) => { return new MetaMaskConnector({ @@ -38,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/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx index 654420ab..14bbebc7 100644 --- a/packages/walletkit/src/wallets/okxWallet/index.tsx +++ b/packages/walletkit/src/wallets/okxWallet/index.tsx @@ -20,6 +20,7 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { default: 'https://www.okx.com/web3', }, spinnerColor: undefined, + showQRCode: false, installed: isOkxWallet(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -38,9 +39,12 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { }, }); }, - getUri: () => { + getDeepLink: () => { return `okx://wallet/dapp/details?dappUrl=${window.location.href}`; }, + getQRCodeUri(uri) { + return `okex://main/wc?uri=${decodeURIComponent(uri)}`; + }, ...restProps, }; } diff --git a/packages/walletkit/src/wallets/safe/index.tsx b/packages/walletkit/src/wallets/safe/index.tsx index 50e0f30f..46ec2c27 100644 --- a/packages/walletkit/src/wallets/safe/index.tsx +++ b/packages/walletkit/src/wallets/safe/index.tsx @@ -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 1dbdb282..6ec4a6b9 100644 --- a/packages/walletkit/src/wallets/tokenPocket/icon.tsx +++ b/packages/walletkit/src/wallets/tokenPocket/icon.tsx @@ -50,4 +50,66 @@ export const TokenPocketTransparentIcon = (props: SVGIconProps) => { ); }; -export const TokenPocketIcon = TokenPocketTransparentIcon; +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 18cbb308..ffda162f 100644 --- a/packages/walletkit/src/wallets/tokenPocket/index.tsx +++ b/packages/walletkit/src/wallets/tokenPocket/index.tsx @@ -20,6 +20,7 @@ export function tokenPocket(props: PartialCustomProps = {}): WalletProps { default: 'https://www.tokenpocket.pro/en/download/app', }, spinnerColor: '#2980FE', + showQRCode: false, installed: isTokenPocket(), createConnector: (chains: Chain[]) => { return new CustomConnector({ @@ -38,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 8cdc62ba..c4ae54c6 100644 --- a/packages/walletkit/src/wallets/trustWallet/icon.tsx +++ b/packages/walletkit/src/wallets/trustWallet/icon.tsx @@ -96,17 +96,18 @@ export const TrustWalletLightIcon = (props: SVGIconProps) => { export const TrustWalletDarkIcon = (props: SVGIconProps) => { return ( + { return new TrustWalletConnector({ @@ -49,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 73dbd756..139435aa 100644 --- a/packages/walletkit/src/wallets/types.ts +++ b/packages/walletkit/src/wallets/types.ts @@ -13,9 +13,11 @@ export interface WalletProps { 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/index.tsx b/packages/walletkit/src/wallets/walletConnect/index.tsx index 5b114a9c..4829a58e 100644 --- a/packages/walletkit/src/wallets/walletConnect/index.tsx +++ b/packages/walletkit/src/wallets/walletConnect/index.tsx @@ -64,7 +64,7 @@ export function walletConnect(props: WalletConnectProps = {}): WalletProps { }, }); }, - getUri: () => undefined, + getDeepLink: () => undefined, ...restProps, }; } From 7256863cb3cc8759de7d89285cb0bd343f669e8f Mon Sep 17 00:00:00 2001 From: Wenty Li Date: Wed, 22 Nov 2023 10:36:42 +0800 Subject: [PATCH 4/6] fix: Refresh qrcode if any error throw --- examples/test/pages/chains.ts | 88 +++++++++---------- .../WalletConnectUriProvider/index.tsx | 5 +- .../src/wallets/coinbaseWallet/index.tsx | 2 +- 3 files changed, 46 insertions(+), 49 deletions(-) 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/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx index 74eef133..b869cd67 100644 --- a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx +++ b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx @@ -49,10 +49,7 @@ export function WalletConnectUriProvider(props: WalletConnectUriProviderProps) { error, handler: options.onError, }); - - if (error?.code === 4001) { - connectWallet(); - } + connectWallet(); // refresh qr code }, 100); } }; diff --git a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx index e79d5e5f..3f9be830 100644 --- a/packages/walletkit/src/wallets/coinbaseWallet/index.tsx +++ b/packages/walletkit/src/wallets/coinbaseWallet/index.tsx @@ -26,7 +26,7 @@ export function coinbaseWallet(props: CoinbaseWalletProps = {}): WalletProps { transparent: , }, downloadUrls: { - default: 'https://coinbase.com/wallet', + default: 'https://www.coinbase.com/wallet/downloads', }, spinnerColor: undefined, showQRCode: false, From 6f3d798cf72c9024af88349adf37138cda90147c Mon Sep 17 00:00:00 2001 From: Wenty Li Date: Wed, 22 Nov 2023 11:33:50 +0800 Subject: [PATCH 5/6] fix: Update detecting okxwallet on mobile --- .../walletkit/src/wallets/okxWallet/index.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/walletkit/src/wallets/okxWallet/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx index 14bbebc7..b3575b47 100644 --- a/packages/walletkit/src/wallets/okxWallet/index.tsx +++ b/packages/walletkit/src/wallets/okxWallet/index.tsx @@ -3,6 +3,7 @@ import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; import { getInjectedProvider, hasInjectedProvider } from '../utils'; import { OkxWalletIcon, OkxWalletTransparentIcon } from './icon'; +import { isMobile } from '@/index'; export const OKX_WALLET_ID = 'okxWallet'; @@ -29,12 +30,7 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { options: { name: 'OKX Wallet', shimDisconnect: true, - getProvider() { - if (typeof window === 'undefined') return; - - const provider = getInjectedProvider('isOkxWallet') ?? window.okexchain; - return provider; - }, + getProvider, ...connectorOptions, }, }); @@ -49,8 +45,22 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { }; } +function getProvider() { + if (typeof window === 'undefined') return; + + if (isMobile()) { + return window.ethereum || window.okexchain; + } + + return getInjectedProvider('isOkxWallet') ?? window.okexchain; +} + export function isOkxWallet() { if (typeof window === 'undefined') return false; + if (isMobile()) { + return !!(window.ethereum || window.okexchain); + } + return !!(hasInjectedProvider('isOkxWallet') || window.okexchain?.isOkxWallet); } From 293851a236b54de57235319ce65bc7a5f5483e22 Mon Sep 17 00:00:00 2001 From: Wenty Li Date: Wed, 22 Nov 2023 15:22:03 +0800 Subject: [PATCH 6/6] feat: Add binance web3 wallet & okx wallet & math wallet & coinbase --- examples/test/package.json | 3 ++- examples/test/pages/_app.tsx | 17 +++++++----- examples/vite/src/App.tsx | 17 +----------- .../src/components/CustomQRCode/QRCode.tsx | 2 +- .../src/components/CustomQRCode/index.tsx | 2 +- .../src/components/CustomQRCode/styles.css.ts | 2 ++ .../src/components/ModalProvider/index.tsx | 6 +++-- .../WalletConnectUriProvider/index.tsx | 27 +++++++++++++------ .../components/WalletKitProvider/index.tsx | 16 +++++------ .../walletkit/src/hooks/useClickWallet.ts | 9 +++++-- .../src/wallets/binanceWeb3Wallet/index.tsx | 13 ++++++--- .../src/wallets/mathWallet/index.tsx | 4 ++- .../walletkit/src/wallets/okxWallet/index.tsx | 22 +++++++-------- pnpm-lock.yaml | 3 +++ 14 files changed, 80 insertions(+), 63 deletions(-) diff --git a/examples/test/package.json b/examples/test/package.json index 04ee6060..14811df3 100644 --- a/examples/test/package.json +++ b/examples/test/package.json @@ -15,7 +15,8 @@ "react": "^18", "react-dom": "^18", "viem": "^1.0.0", - "wagmi": "^1.0.0" + "wagmi": "^1.0.0", + "vconsole": "^3.15.1" }, "devDependencies": { "@types/node": "^20", diff --git a/examples/test/pages/_app.tsx b/examples/test/pages/_app.tsx index f7f26c9a..9b131c75 100644 --- a/examples/test/pages/_app.tsx +++ b/examples/test/pages/_app.tsx @@ -23,7 +23,7 @@ import { coinbaseWallet, tokenPocket, } from '@totejs/walletkit/wallets'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; const config = createConfig( getDefaultConfig({ @@ -43,30 +43,33 @@ const config = createConfig( binanceWeb3Wallet(), coinbaseWallet(), walletConnect(), - // tokenPocket(), + tokenPocket(), ], }), ); const options: WalletKitOptions = { - initialChainId: 1, + initialChainId: 56, }; 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}
- + - - bnb - diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index 3cee4021..d7ccce2a 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -24,22 +24,7 @@ const config = createConfig( 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/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/index.tsx b/packages/walletkit/src/components/CustomQRCode/index.tsx index de7d1045..778a876a 100644 --- a/packages/walletkit/src/components/CustomQRCode/index.tsx +++ b/packages/walletkit/src/components/CustomQRCode/index.tsx @@ -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 ( diff --git a/packages/walletkit/src/components/CustomQRCode/styles.css.ts b/packages/walletkit/src/components/CustomQRCode/styles.css.ts index 95160c35..8673828c 100644 --- a/packages/walletkit/src/components/CustomQRCode/styles.css.ts +++ b/packages/walletkit/src/components/CustomQRCode/styles.css.ts @@ -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/ModalProvider/index.tsx b/packages/walletkit/src/components/ModalProvider/index.tsx index 6ea39221..ebc1d758 100644 --- a/packages/walletkit/src/components/ModalProvider/index.tsx +++ b/packages/walletkit/src/components/ModalProvider/index.tsx @@ -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/WalletConnectUriProvider/index.tsx b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx index b869cd67..3ae8bb2e 100644 --- a/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx +++ b/packages/walletkit/src/components/WalletConnectUriProvider/index.tsx @@ -1,6 +1,5 @@ -import { useConnector } from '@/hooks/useConnector'; import { commonErrorHandler } from '@/utils/common'; -import { WALLET_CONNECT_ID } from '@/wallets'; +import { walletConnect } from '@/wallets'; import { useEffect, useMemo, useState } from 'react'; import { useConnect, useAccount } from 'wagmi'; import { useWalletKitContext } from '../WalletKitProvider/context'; @@ -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); @@ -60,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/WalletKitProvider/index.tsx b/packages/walletkit/src/components/WalletKitProvider/index.tsx index 56379d3b..4a34b174 100644 --- a/packages/walletkit/src/components/WalletKitProvider/index.tsx +++ b/packages/walletkit/src/components/WalletKitProvider/index.tsx @@ -55,17 +55,17 @@ export const WalletKitProvider = (props: WalletKitProviderProps) => { return ( - - - - + + + + {children} - - - - + + + + ); }; diff --git a/packages/walletkit/src/hooks/useClickWallet.ts b/packages/walletkit/src/hooks/useClickWallet.ts index 5d3587b2..fc0f9ec3 100644 --- a/packages/walletkit/src/hooks/useClickWallet.ts +++ b/packages/walletkit/src/hooks/useClickWallet.ts @@ -8,7 +8,7 @@ import { useWalletConnectModal } from './useWalletConnectModal'; export function useClickWallet() { const router = useRouter(); - const { options, setSelectedConnector } = useWalletKitContext(); + const { options, log, setSelectedConnector } = useWalletKitContext(); const { disconnect } = useDisconnect(); const { onOpenWcModal } = useWalletConnectModal(); @@ -21,6 +21,9 @@ export function useClickWallet() { const pass = options.onClickWallet?.(connector, e); if (pass === false) return; + log('[click wallet] connector', connector); + log('[click wallet] ethereum', window.ethereum); + const gotoQRcodePage = () => { setSelectedConnector(connector); router.push(routes.CONNECT_WITH_QRCODE); @@ -46,6 +49,8 @@ export function useClickWallet() { const deepLink = connector._wallet.getDeepLink?.(); if (deepLink) { window.open(deepLink, '_self', 'noopener noreferrer'); + } else { + options.onError?.(new Error('Not supported wallet'), 'Not supported wallet'); } } else if (connector._wallet.showQRCode) { gotoQRcodePage(); @@ -57,7 +62,7 @@ export function useClickWallet() { } }, 300); }, - [disconnect, mobile, onOpenWcModal, options, router, setSelectedConnector], + [disconnect, log, mobile, onOpenWcModal, options, router, setSelectedConnector], ); return onClickWallet; diff --git a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx index 845844f7..2dcaf977 100644 --- a/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx +++ b/packages/walletkit/src/wallets/binanceWeb3Wallet/index.tsx @@ -1,8 +1,8 @@ import { Chain } from 'wagmi'; import { PartialCustomProps, WalletProps } from '..'; import { CustomConnector } from '../custom/connector'; -import { getInjectedProvider } from '../utils'; import { BinanceWeb3WalletIcon, BinanceWeb3WalletTransparentIcon } from './icon'; +import { isMobile } from '@/base/utils/mobile'; export const BINANCE_WEB3_WALLET_ID = 'binanceWeb3Wallet'; @@ -32,15 +32,16 @@ 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, }, }); }, getDeepLink: () => { - return undefined; + return undefined; //`bnc://app.binance.com/cedefi/wc?uri=${encodeURIComponent(uri)}`; }, getQRCodeUri(uri) { return uri; @@ -52,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/mathWallet/index.tsx b/packages/walletkit/src/wallets/mathWallet/index.tsx index 2446ebcd..3fbbdcf3 100644 --- a/packages/walletkit/src/wallets/mathWallet/index.tsx +++ b/packages/walletkit/src/wallets/mathWallet/index.tsx @@ -40,7 +40,9 @@ export function mathWallet(props: PartialCustomProps = {}): WalletProps { }); }, getDeepLink: () => { - return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`; + // return `mathwallet://mathwallet.org?action=link&value=${window.location.href}`; + // return `mathwallet://wc?uri=${encodeURIComponent(uri)}`; + return undefined; }, getQRCodeUri(uri) { return uri; diff --git a/packages/walletkit/src/wallets/okxWallet/index.tsx b/packages/walletkit/src/wallets/okxWallet/index.tsx index b3575b47..2b2edb14 100644 --- a/packages/walletkit/src/wallets/okxWallet/index.tsx +++ b/packages/walletkit/src/wallets/okxWallet/index.tsx @@ -30,7 +30,15 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { options: { name: 'OKX Wallet', shimDisconnect: true, - getProvider, + getProvider() { + if (typeof window === 'undefined') return; + + if (isMobile()) { + return window.ethereum || window.okexchain; + } + + return getInjectedProvider('isOkxWallet') ?? window.okexchain; + }, ...connectorOptions, }, }); @@ -39,22 +47,12 @@ export function okxWallet(props: PartialCustomProps = {}): WalletProps { return `okx://wallet/dapp/details?dappUrl=${window.location.href}`; }, getQRCodeUri(uri) { - return `okex://main/wc?uri=${decodeURIComponent(uri)}`; + return `okex://main/wc?uri=${encodeURIComponent(uri)}`; }, ...restProps, }; } -function getProvider() { - if (typeof window === 'undefined') return; - - if (isMobile()) { - return window.ethereum || window.okexchain; - } - - return getInjectedProvider('isOkxWallet') ?? window.okexchain; -} - export function isOkxWallet() { if (typeof window === 'undefined') return false; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac3f86cd..5c6f3f94 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 viem: specifier: ^1.0.0 version: 1.18.9(typescript@5.2.2)