Skip to content

Commit

Permalink
feat: optimize wallet sdks handling (#283)
Browse files Browse the repository at this point in the history
  • Loading branch information
chybisov authored Aug 9, 2024
1 parent e7ba200 commit eee87aa
Show file tree
Hide file tree
Showing 21 changed files with 341 additions and 148 deletions.
8 changes: 7 additions & 1 deletion packages/wallet-management/src/connectors/coinbase.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import type { CoinbaseWalletParameters } from '@wagmi/connectors';
import { coinbaseWallet } from '@wagmi/connectors';
import { extendConnector } from './utils.js';

export const createCoinbaseConnector = /*#__PURE__*/ (
params: CoinbaseWalletParameters,
) => coinbaseWallet(params);
) =>
extendConnector(
coinbaseWallet(params),
'coinbaseWalletSDK',
'Coinbase Smart Wallet',
);
7 changes: 7 additions & 0 deletions packages/wallet-management/src/connectors/metaMask.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { MetaMaskParameters } from '@wagmi/connectors';
import { metaMask } from '@wagmi/connectors';
import { extendConnector } from './utils.js';

export const createMetaMaskConnector = /*#__PURE__*/ (
params: MetaMaskParameters,
) => extendConnector(metaMask(params), 'metaMaskSDK', 'MetaMask');
6 changes: 6 additions & 0 deletions packages/wallet-management/src/connectors/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import type { CreateConnectorFn } from 'wagmi';

export interface CreateConnectorFnExtended extends CreateConnectorFn {
id: string;
displayName: string;
}
13 changes: 13 additions & 0 deletions packages/wallet-management/src/connectors/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { CreateConnectorFn } from 'wagmi';
import type { CreateConnectorFnExtended } from './types.js';

export const extendConnector = (
connector: CreateConnectorFn,
id: string,
name: string,
): CreateConnectorFnExtended => {
const extendedConnector = connector as CreateConnectorFnExtended;
extendedConnector.id = id;
extendedConnector.displayName = name;
return extendedConnector;
};
23 changes: 14 additions & 9 deletions packages/wallet-management/src/connectors/walletConnect.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
import type { WalletConnectParameters } from '@wagmi/connectors';
import { walletConnect as _walletConnect } from '@wagmi/connectors';
import { walletConnect } from '@wagmi/connectors';
import { extendConnector } from './utils.js';

export const createWalletConnectConnector = /*#__PURE__*/ (
params: WalletConnectParameters,
) =>
_walletConnect({
showQrModal: true,
qrModalOptions: {
themeVariables: {
'--wcm-z-index': '3000',
extendConnector(
walletConnect({
showQrModal: true,
qrModalOptions: {
themeVariables: {
'--wcm-z-index': '3000',
},
},
},
...params,
});
...params,
}),
'walletConnect',
'WalletConnect',
);
47 changes: 39 additions & 8 deletions packages/wallet-management/src/createDefaultWagmiConfig.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type {
CoinbaseWalletParameters,
MetaMaskParameters,
WalletConnectParameters,
} from '@wagmi/connectors';
import type { Chain, Transport } from 'viem';
Expand Down Expand Up @@ -34,18 +35,25 @@ import {
trust,
xdefi,
} from './connectors/connectors.js';
import { createMetaMaskConnector } from './connectors/metaMask.js';
import { createWalletConnectConnector } from './connectors/walletConnect.js';
import { isWalletInstalled } from './utils/isWalletInstalled.js';

export type _chains = readonly [Chain, ...Chain[]];
export type _transports = Record<_chains[number]['id'], Transport>;

export interface DefaultWagmiConfigProps {
walletConnect?: WalletConnectParameters;
coinbase?: CoinbaseWalletParameters;
metaMask?: MetaMaskParameters;
wagmiConfig?: {
ssr?: boolean;
};
connectors?: CreateConnectorFn[];
/**
* Load Wallet SDKs only if the wallet is the most recently connected wallet
*/
lazy?: boolean;
}

export interface DefaultWagmiConfigResult {
Expand Down Expand Up @@ -74,7 +82,6 @@ export interface DefaultWagmiConfigResult {
* );
* };
*/

export function createDefaultWagmiConfig(
props?: DefaultWagmiConfigProps,
): DefaultWagmiConfigResult {
Expand Down Expand Up @@ -106,13 +113,6 @@ export function createDefaultWagmiConfig(
...(props?.connectors ?? []),
];

if (props?.coinbase) {
connectors.unshift(createCoinbaseConnector(props.coinbase));
}
if (props?.walletConnect) {
connectors.unshift(createWalletConnectConnector(props.walletConnect));
}

const config = createConfig({
chains: [mainnet],
client({ chain }) {
Expand All @@ -121,6 +121,37 @@ export function createDefaultWagmiConfig(
...props?.wagmiConfig,
});

// Check if WalletConnect properties exist in the props
if (props?.walletConnect) {
// Retrieve the ID of the most recently connected wallet connector from storage
const recentConnectorId = (window as any)?.localStorage.getItem(
`${config.storage?.key}.recentConnectorId`,
);
// If WalletConnect is the most recently connected wallet or lazy loading is disabled,
// add the WalletConnect connector to the beginning of the connectors list
if (recentConnectorId?.includes?.('walletConnect') || !props.lazy) {
connectors.unshift(createWalletConnectConnector(props.walletConnect));
}
}

if (!props?.lazy && props?.coinbase && !isWalletInstalled('coinbase')) {
const recentConnectorId = (window as any)?.localStorage.getItem(
`${config.storage?.key}.recentConnectorId`,
);
if (recentConnectorId?.includes?.('coinbaseWalletSDK') || !props.lazy) {
connectors.unshift(createCoinbaseConnector(props.coinbase));
}
}

if (props?.metaMask && !isWalletInstalled('metaMask')) {
const recentConnectorId = (window as any)?.localStorage.getItem(
`${config.storage?.key}.recentConnectorId`,
);
if (recentConnectorId?.includes?.('metaMaskSDK') || !props.lazy) {
connectors.unshift(createMetaMaskConnector(props.metaMask));
}
}

return {
config,
connectors,
Expand Down
1 change: 1 addition & 0 deletions packages/wallet-management/src/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const getWalletIcon = (id: string): string | undefined => {
return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 40 40'%3e %3cpath fill='%231652F0' d='M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20Z'/%3e %3cpath fill='white' fill-rule='evenodd' d='M5.455 20c0 8.034 6.512 14.546 14.546 14.546 8.033 0 14.545-6.512 14.545-14.545 0-8.034-6.512-14.546-14.545-14.546-8.034 0-14.546 6.512-14.546 14.546Zm11.859-4.685a2 2 0 0 0-2 2v5.373a2 2 0 0 0 2 2h5.373a2 2 0 0 0 2-2v-5.373a2 2 0 0 0-2-2h-5.373Z' clip-rule='evenodd'/%3e %3c/svg%3e";
case 'safe':
return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 661.62 661.47'%3e %3cpath fill='%2312ff80' d='M531.98 330.7h-49.42c-14.76 0-26.72 11.96-26.72 26.72v71.73c0 14.76-11.96 26.72-26.72 26.72H232.51c-14.76 0-26.72 11.96-26.72 26.72v49.42c0 14.76 11.96 26.72 26.72 26.72H440.5c14.76 0 26.55-11.96 26.55-26.72v-39.65c0-14.76 11.96-25.23 26.72-25.23h38.2c14.76 0 26.72-11.96 26.72-26.72v-83.3c0-14.76-11.96-26.41-26.72-26.41Zm-326.2-98.18c0-14.76 11.96-26.72 26.72-26.72h196.49c14.76 0 26.72-11.96 26.72-26.72v-49.42c0-14.76-11.96-26.72-26.72-26.72H221.11c-14.76 0-26.72 11.96-26.72 26.72v38.08c0 14.76-11.96 26.72-26.72 26.72h-38.03c-14.76 0-26.72 11.96-26.72 26.72v83.39c0 14.76 12.01 26.12 26.77 26.12h49.42c14.76 0 26.72-11.96 26.72-26.72l-.05-71.44Zm101.77 46.23h47.47c15.47 0 28.02 12.56 28.02 28.02v47.47c0 15.47-12.56 28.02-28.02 28.02h-47.47c-15.47 0-28.02-12.56-28.02-28.02v-47.47c0-15.47 12.56-28.02 28.02-28.02Z'/%3e %3c/svg%3e";
case 'metaMaskSDK':
case 'io.metamask':
return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3e %3cpath fill='%23E17726' stroke='%23E17726' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m26.815 5-9.38 6.939 1.749-4.09z'/%3e %3cpath fill='%23E27625' stroke='%23E27625' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m5.185 5 9.295 6.996-1.664-4.14zM23.44 21.083l-2.499 3.812 5.347 1.47 1.527-5.196zm-19.246.086 1.52 5.197 5.333-1.47-2.484-3.813z'/%3e %3cpath fill='%23E27625' stroke='%23E27625' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m10.76 14.645-1.484 2.241 5.282.243-.171-5.69-3.626 3.213zm10.48.007-3.684-3.284-.12 5.761 5.282-.243zM11.046 24.896l3.205-1.542-2.755-2.142zm6.71-1.55 3.184 1.55-.428-3.69z'/%3e %3cpath fill='%23D5BFB2' stroke='%23D5BFB2' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m20.94 24.896-3.184-1.543.257 2.07-.029.879zm-9.895 0 2.97 1.406-.021-.878.257-2.07z'/%3e %3cpath fill='%23233447' stroke='%23233447' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m14.065 19.834-2.64-.771 1.87-.857.777 1.628zm3.862 0 .786-1.635 1.877.857-2.663.785z'/%3e %3cpath fill='%23CC6228' stroke='%23CC6228' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m11.046 24.895.464-3.812-2.948.086zm9.444-3.812.45 3.812 2.499-3.726zm2.235-4.197-5.283.242.486 2.713.785-1.642 1.877.857zm-11.3 2.177 1.87-.857.778 1.628.492-2.713-5.282-.235z'/%3e %3cpath fill='%23E27525' stroke='%23E27525' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m9.283 16.886 2.213 4.319-.072-2.142zm11.307 2.177-.085 2.142 2.213-4.32zm-6.025-1.934-.5 2.712.629 3.198.143-4.219zm2.87 0-.257 1.684.128 4.226.622-3.205-.493-2.713z'/%3e %3cpath fill='%23F5841F' stroke='%23F5841F' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m17.928 19.834-.621 3.206.45.314 2.748-2.142.085-2.148zm-6.504-.77.072 2.141 2.755 2.142.443-.307-.621-3.206-2.656-.77z'/%3e %3cpath fill='%23C0AC9D' stroke='%23C0AC9D' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m17.991 26.302.022-.878-.243-.2h-3.54l-.236.2.021.878-2.97-1.407 1.043.857 2.106 1.45h3.605l2.113-1.457 1.027-.85-2.955 1.407z'/%3e %3cpath fill='%23161616' stroke='%23161616' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m17.756 23.345-.45-.307h-2.613l-.442.314-.257 2.07.236-.2h3.54l.243.2-.257-2.07z'/%3e %3cpath fill='%23763E1A' stroke='%23763E1A' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='M27.215 12.389 28 8.569 26.815 5l-9.066 6.71 3.49 2.934 4.926 1.435 1.085-1.263-.47-.343.749-.685-.571-.443.75-.571-.5-.385zM4 8.562l.8 3.827-.514.378.763.57-.57.45.742.686-.471.343 1.085 1.263 4.925-1.428 3.491-2.948L5.185 5z'/%3e %3cpath fill='%23F5841F' stroke='%23F5841F' stroke-linecap='round' stroke-linejoin='round' stroke-width='.303' d='m26.166 16.078-4.926-1.427 1.485 2.234-2.213 4.319 2.927-.036h4.375zM10.76 14.644l-4.925 1.434-1.642 5.09h4.376l2.927.036-2.213-4.319 1.485-2.241zm6.675 2.484.321-5.425 1.428-3.855h-6.368l1.428 3.855.321 5.425.122 1.699v4.212h2.62l.014-4.212z'/%3e %3c/svg%3e";
default:
Expand Down
3 changes: 3 additions & 0 deletions packages/wallet-management/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
export * from './connectors/coinbase.js';
export * from './connectors/connectors.js';
export * from './connectors/metaMask.js';
export * from './connectors/safe.js';
export * from './connectors/types.js';
export * from './connectors/utils.js';
export * from './connectors/walletConnect.js';
export * from './createDefaultWagmiConfig.js';
export * from './icons.js';
Expand Down
17 changes: 10 additions & 7 deletions packages/wallet-management/src/utils/getWalletPriority.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
const walletPriority: Record<string, number> = {
metaMaskSDK: 1,
'io.metamask': 1,
walletConnect: 2,
tokenpocket: 3,
safepal: 4,
'1inch': 5,
safe: 6,
okx: 7,
coinbaseWalletSDK: 8,
'io.metamask.mobile': 1,
coinbaseWalletSDK: 2,
'com.coinbase.wallet': 2,
walletConnect: 3,
tokenpocket: 4,
safepal: 5,
'1inch': 6,
safe: 7,
okx: 8,
bitget: 9,
};

Expand Down
15 changes: 15 additions & 0 deletions packages/wallet-management/src/utils/isWalletInstalled.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
export const isWalletInstalled = (id: string): boolean => {
switch (id) {
case 'metaMask':
return (
(window as any)?.ethereum?.isMetaMask ||
(window as any)?.ethereum?.providers?.some(
(provider: any) => provider.isMetaMask,
)
);
case 'coinbase':
return (
(window as any)?.ethereum?.isCoinbaseWallet ||
(window as any)?.coinbaseWalletExtension?.isCoinbaseWallet ||
(window as any)?.ethereum?.providers?.some(
(provider: any) => provider.isCoinbaseWallet,
)
);
case 'gate':
return (window as any)?.gatewallet;
case 'bitget':
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { isWalletInstalled } from './isWalletInstalled.js';
export const isWalletInstalledAsync = async (id: string): Promise<boolean> => {
switch (id) {
case 'safe': {
// in Multisig env, window.parent is not equal to window
// In Safe iframe env, window.parent is not equal to window
const isIFrameEnvironment = window?.parent !== window;

if (!isIFrameEnvironment) {
Expand All @@ -17,7 +17,7 @@ export const isWalletInstalledAsync = async (id: string): Promise<boolean> => {
try {
const accountInfo = await Promise.race([
sdk.safe.getInfo(),
new Promise<undefined>((resolve) => setTimeout(resolve, 200)),
new Promise((resolve) => setTimeout(resolve, 500)),
]);

return !!accountInfo?.safeAddress;
Expand Down
7 changes: 7 additions & 0 deletions packages/widget/src/config/coinbase.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { CoinbaseWalletParameters } from 'wagmi/connectors';
import { LiFiToolLogo } from '../icons/lifi.js';

export const defaultCoinbaseConfig: CoinbaseWalletParameters = {
appName: 'LI.FI',
appLogoUrl: LiFiToolLogo,
};
13 changes: 13 additions & 0 deletions packages/widget/src/config/metaMask.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { MetaMaskParameters } from 'wagmi/connectors';
import { LiFiToolLogo } from '../icons/lifi.js';

export const defaultMetaMaskConfig: MetaMaskParameters = {
dappMetadata: {
name: 'LI.FI',
url:
typeof window !== 'undefined'
? (window as any)?.location.href
: 'https://li.fi/',
base64Icon: LiFiToolLogo,
},
};
6 changes: 5 additions & 1 deletion packages/widget/src/config/walletConnect.ts
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
export const defaultWalletConnectProjectId = '5432e3507d41270bee46b7b85bbc2ef8';
import type { WalletConnectParameters } from 'wagmi/connectors';

export const defaultWalletConnectConfig: WalletConnectParameters = {
projectId: '5432e3507d41270bee46b7b85bbc2ef8',
};
Loading

0 comments on commit eee87aa

Please sign in to comment.