feat: link mode

.changeset/loud-countries-care.md

@@ -0,0 +1,18 @@
+---
+'@web3modal/scaffold-react-native': minor
+'@web3modal/ethers5-react-native': minor
+'@web3modal/ethers-react-native': minor
+'@web3modal/wagmi-react-native': minor
+'@web3modal/core-react-native': minor
+'@web3modal/coinbase-ethers-react-native': minor
+'@web3modal/coinbase-wagmi-react-native': minor
+'@web3modal/common-react-native': minor
+'@web3modal/email-react-native': minor
+'@web3modal/email-ethers-react-native': minor
+'@web3modal/email-wagmi-react-native': minor
+'@web3modal/scaffold-utils-react-native': minor
+'@web3modal/siwe-react-native': minor
+'@web3modal/ui-react-native': minor
+---
+
+feat: added link-mode support

apps/native/App.tsx

@@ -30,7 +30,9 @@ const metadata = {
   url: 'https://walletconnect.com/',
   icons: ['https://avatars.githubusercontent.com/u/37784886'],
   redirect: {
-    native: 'redirect://'
+    native: 'redirect://',
+    universal: 'https://lab.web3modal.com/rn_appkit',
+    linkMode: true
   }
 };
 

apps/native/src/utils/misc.ts

@@ -7,14 +7,16 @@ export const getCustomWallets = () => {
       name: 'Wallet(RN)',
       image_url:
         'https://docs.walletconnect.com/assets/images/web3walletLogo-54d3b546146931ceaf47a3500868a73a.png',
-      mobile_link: 'rn-web3wallet://'
+      mobile_link: 'rn-web3wallet://',
+      link_mode: 'https://lab.web3modal.com/rn_walletkit'
     },
     {
       id: 'flutter-wallet',
       name: 'Wallet(Flutter)',
       image_url:
         'https://docs.walletconnect.com/assets/images/web3walletLogo-54d3b546146931ceaf47a3500868a73a.png',
-      mobile_link: 'wcflutterwallet://'
+      mobile_link: 'wcflutterwallet://',
+      link_mode: 'https://lab.web3modal.com/flutter_walletkit'
     }
   ];
 
@@ -24,15 +26,17 @@ export const getCustomWallets = () => {
       name: 'Wallet(Android)',
       image_url:
         'https://docs.walletconnect.com/assets/images/web3walletLogo-54d3b546146931ceaf47a3500868a73a.png',
-      mobile_link: 'kotlin-web3wallet://'
+      mobile_link: 'kotlin-web3wallet://',
+      link_mode: 'https://lab.web3modal.com/wallet'
     });
   } else if (Platform.OS === 'ios') {
     wallets.push({
       id: 'ios-wallet',
       name: 'Wallet(iOS)',
       image_url:
         'https://docs.walletconnect.com/assets/images/web3walletLogo-54d3b546146931ceaf47a3500868a73a.png',
-      mobile_link: 'walletapp://'
+      mobile_link: 'walletapp://',
+      link_mode: 'https://lab.web3modal.com/wallet'
     });
   }
 

package.json

@@ -49,7 +49,7 @@
     "@types/jest": "29.5.7",
     "@types/qrcode": "1.5.5",
     "@types/react": "^18.2.6",
-    "@walletconnect/react-native-compat": "2.14.0",
+    "@walletconnect/react-native-compat": "2.16.0",
     "babel-jest": "^29.7.0",
     "eslint": "^8.46.0",
     "eslint-plugin-ft-flow": "2.0.3",
@@ -68,8 +68,8 @@
     "tsconfig": "*",
     "turbo": "1.10.15",
     "typescript": "5.2.2",
-    "viem": "2.18.7",
-    "wagmi": "2.12.2"
+    "viem": "2.21.2",
+    "wagmi": "2.12.8"
   },
   "packageManager": "yarn@4.0.2"
 }

packages/core/src/controllers/ConnectionController.ts

@@ -15,7 +15,10 @@ export interface ConnectExternalOptions {
 }
 
 export interface ConnectionControllerClient {
-  connectWalletConnect: (onUri: (uri: string) => void) => Promise<void>;
+  connectWalletConnect: (
+    onUri: (uri: string) => void,
+    walletUniversalLink?: string
+  ) => Promise<void>;
   connectExternal?: (options: ConnectExternalOptions) => Promise<void>;
   signMessage: (message: string) => Promise<string>;
   disconnect: () => Promise<void>;
@@ -66,13 +69,13 @@ export const ConnectionController = {
     state._client = ref(client);
   },
 
-  connectWalletConnect() {
+  connectWalletConnect(walletUniversalLink?: string) {
     state.wcPromise = this._getClient().connectWalletConnect(uri => {
       state.wcUri = uri;
       state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry();
       ConnectorController.setConnectedConnector('WALLET_CONNECT');
       StorageUtil.setConnectedConnector('WALLET_CONNECT');
-    });
+    }, walletUniversalLink);
   },
 
   async connectExternal(options: ConnectExternalOptions) {

packages/core/src/utils/CoreHelperUtil.ts

@@ -75,7 +75,22 @@ export const CoreHelperUtil = {
     return url.startsWith('http://') || url.startsWith('https://');
   },
 
+  isLinkModeURL(url?: string) {
+    if (!url) {
+      return false;
+    }
+
+    return CoreHelperUtil.isHttpUrl(url) && url.includes('wc_ev');
+  },
+
   formatNativeUrl(appUrl: string, wcUri: string): LinkingRecord {
+    if (CoreHelperUtil.isLinkModeURL(wcUri)) {
+      return {
+        redirect: wcUri,
+        href: wcUri
+      };
+    }
+
     if (CoreHelperUtil.isHttpUrl(appUrl)) {
       return this.formatUniversalUrl(appUrl, wcUri);
     }
@@ -96,6 +111,13 @@ export const CoreHelperUtil = {
   },
 
   formatUniversalUrl(appUrl: string, wcUri: string): LinkingRecord {
+    if (CoreHelperUtil.isLinkModeURL(wcUri)) {
+      return {
+        redirect: wcUri,
+        href: wcUri
+      };
+    }
+
     if (!CoreHelperUtil.isHttpUrl(appUrl)) {
       return this.formatNativeUrl(appUrl, wcUri);
     }

packages/core/src/utils/TypeUtil.ts

@@ -65,6 +65,7 @@ export interface WcWallet {
   mobile_link?: string | null;
   desktop_link?: string | null;
   webapp_link?: string | null;
+  link_mode?: string | null;
   app_store?: string | null;
   play_store?: string | null;
 }
@@ -126,6 +127,11 @@ export type Metadata = {
   description: string;
   url: string;
   icons: string[];
+  redirect?: {
+    native?: string;
+    universal?: string;
+    linkMode?: boolean;
+  };
 };
 
 export type CustomWallet = Pick<
@@ -137,6 +143,7 @@ export type CustomWallet = Pick<
   | 'mobile_link'
   | 'desktop_link'
   | 'webapp_link'
+  | 'link_mode'
   | 'app_store'
   | 'play_store'
 >;

packages/ethers/package.json

@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@walletconnect/ethereum-provider": "2.15.3",
+    "@walletconnect/ethereum-provider": "2.16.0",
     "@web3modal/common-react-native": "2.0.4",
     "@web3modal/scaffold-react-native": "2.0.4",
     "@web3modal/scaffold-utils-react-native": "2.0.4",

packages/ethers5/package.json

@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@walletconnect/ethereum-provider": "2.15.3",
+    "@walletconnect/ethereum-provider": "2.16.0",
     "@web3modal/common-react-native": "2.0.4",
     "@web3modal/scaffold-react-native": "2.0.4",
     "@web3modal/scaffold-utils-react-native": "2.0.4",

packages/scaffold/src/partials/w3m-connecting-mobile/index.tsx

@@ -37,7 +37,11 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const { maxWidth: width } = useCustomDimensions();
   const { wcUri, wcError } = useSnapshot(ConnectionController.state);
   const [errorType, setErrorType] = useState<BodyErrorType>();
-  const showCopy = OptionsController.isClipboardAvailable() && errorType !== 'not_installed';
+  const showCopy =
+    OptionsController.isClipboardAvailable() &&
+    errorType !== 'not_installed' &&
+    !CoreHelperUtil.isLinkModeURL(wcUri);
+
   const showRetry = errorType !== 'not_installed';
   const bodyMessage = getMessage({ walletName: data?.wallet?.name, errorType, declined: wcError });
 

packages/scaffold/src/views/w3m-connecting-view/index.tsx

@@ -43,9 +43,10 @@ export function ConnectingView() {
   const initializeConnection = async (retry = false) => {
     try {
       const { wcPairingExpiry } = ConnectionController.state;
+      const { data: routeData } = RouterController.state;
       if (retry || CoreHelperUtil.isPairingExpired(wcPairingExpiry)) {
         ConnectionController.setWcError(false);
-        ConnectionController.connectWalletConnect();
+        ConnectionController.connectWalletConnect(routeData?.wallet?.link_mode ?? undefined);
         await ConnectionController.state.wcPromise;
         AccountController.setIsConnected(true);
 

packages/wagmi/src/client.ts

@@ -108,7 +108,7 @@ export class Web3Modal extends Web3ModalScaffold {
     };
 
     const connectionControllerClient: ConnectionControllerClient = {
-      connectWalletConnect: async onUri => {
+      connectWalletConnect: async (onUri, walletUniversalLink) => {
         const connector = wagmiConfig.connectors.find(
           c => c.id === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID
         );
@@ -148,12 +148,14 @@ export class Web3Modal extends Web3ModalScaffold {
           );
           // @ts-expect-error - setting requested chains beforehand avoids wagmi auto disconnecting the session when `connect` is called because it things chains are stale
           await connector.setRequestedChainsIds(siweParams.chains);
-
-          const result = await provider.authenticate({
-            nonce: await siweConfig.getNonce(),
-            methods: [...OPTIONAL_METHODS],
-            ...siweParams
-          });
+          const result = await provider.authenticate(
+            {
+              nonce: await siweConfig.getNonce(),
+              methods: [...OPTIONAL_METHODS],
+              ...siweParams
+            },
+            walletUniversalLink
+          );
 
           // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
           const signedCacao = result?.auths?.[0];