Embed wallet images in code

packages/wallet-connectors/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@concordium/wallet-connectors",
-    "version": "0.6.0-alpha.2",
+    "version": "0.6.0-alpha.3",
     "description": "Utility interface for dApps to interact with wallets without depending on the underlying protocol and implementations for Concordium Browser Wallet and Wallet Connect v2.",
     "author": "Concordium Software",
     "license": "Apache-2.0",

packages/wallet-connectors/src/WalletConnect.ts

@@ -57,19 +57,51 @@ export const WalletConnectEvents = {
 export type WalletConnectMethods = typeof WalletConnectMethods[keyof typeof WalletConnectMethods];
 export type WalletConnectEvents = typeof WalletConnectEvents[keyof typeof WalletConnectEvents];
 
-type WalletConnectMobileWallet = MobileWallet | string;
+export type WalletConnectMobileWallet =
+    | (MobileWallet & {
+        type: 'customLink';
+        /** Url for an icon to represent the wallet */
+        iconUrl?: string;
+    })
+    | {
+        type: 'explorerId';
+        /** The ID of the wallet in the wallet connect explorer: https://explorer.walletconnect.com/ */
+        value: string;
+    };
+
+export const concordiumWalletMainnet: WalletConnectMobileWallet = {
+    type: 'explorerId',
+    value: '7dcb0e5eb1b4fc6e2e0b143201c489ea6c618259f49527527d4a349d1a95ba7b',
+};
 
-/**
- * 
- */
-export const concordiumWallet = '7dcb0e5eb1b4fc6e2e0b143201c489ea6c618259f49527527d4a349d1a95ba7b';
+export const concordiumWalletTestnet: WalletConnectMobileWallet = {
+    type: 'customLink',
+    id: 'ConcordiumTestnet',
+    name: 'Concordium Wallet (Testnet)',
+    links: {
+        native: 'concordiumwallettest://',
+    },
+    iconUrl: 'data:image/webp;base64,UklGRhYJAABXRUJQVlA4WAoAAAAIAAAA9QAA9QAAVlA4IJAIAADwNwCdASr2APYAPpVKmUejIqEU2wQoNAlE9Ld+Pizr+LYWxZS/TBwLdH/K6W0R2gHuBnEX9aexL/V+gdjmAc/GkRS1VumIAPqd6Bfuvmh9edZ2MnaC/rbgdjbmZmZmZmZmZmZmZmZmZmbIZmTyXTucuirhRPGoAfpkGImqqt/3YwASWFmyG/bP9A39oE5zptUrEnIUEPxyb10xsoP3VDW/cPDwzQGMQhPiKDZ/AXJqcA+3qvnRGhVvjzWO38+JZONxLAMSQln7oacp/aGkTP2CI7U//o7VM3pR4MfkbVoOIXAsGwxsynfeCnsnsY8iVDG7KHQosBfI/xrvmdCADpYcI6NG6Jd3sQqZzsYKzIvGarc+4jFmxKnQEkcpfIZUXieXjQT64aW7tr6Vcy+BC7BftL5EN7fDuWTcCh9xPy5oX3jpEyxNGPwoCbL5y2fMA05eDBANchp+zkopFSdgf5a+S6wS5+W5s8tpOsnBgTnAcI9q0uOTEwCjYSa10TYoZpDhXAih5wReIWxxtS51BN4r9t/r+3XAjLG6TB2p8JLlG360tlj26fz2nHbnIgAAAAKIzOg/60pkb+lEZnQV5b5WU7TjXD68QwAA/vS/wEnP/oMKreuAAAAA/WfNc36Y3zMAAAAA2UAO1xjKXsqNaC5HPIM3yNL+BQ8hQt+wxmwpHDKIc3UouEzyT2lywAHIsI8P/5fMoHSq1d5n+dlw8xmDXlr7XrHtkc25rz2ueWwnEYFwfKQaJgoR1kCrRAABtudYDWl5aMRIA2UlZ0bSWrzjlb/mgBql8N3jfgtVK4F3OI2JOw+DqPiRdEjGz8i0AvNomL3KcwP3L7zRmfp2HGZvCYuhR8jyCtWUBABLg6wCm0TkgxpRApBKS5IClkhuF/UnCWUhq5ntDP+oTZlUVCq4qL6A19+rk9AJ6ox/aGKLuCJE/Sys9oJHTWk7bbd2AK+7W+E1x7PDdFRmteme1WcuX5ZW5gSJ/JSuCWT55kLBz3i0JwvcuNtgWif0fPNSB71IEXXsv7Dl0TvZtfItF+V/MljUPJMvk7qqEnsFFcUeYVgT+253x6Lbg2NB+hEdDDCd3b7FIpqYFKB++q3vmLwxDMQH6e5OROxmjWieruIQ9y9uWvkTpoqCvPL10PIDL8NihCdI4ZS293VL7GW2ld4AZeGtrgczeIWwwRRfJMtiRk9hp5SguQCzK6hE2j0i2+MP05g3l0HsvgYLU+OSaLslG9i+oWCVizfJvxSJx6guQQWEfBWPZBi8Y5TwaPKPCD2f74wtejTEeLdmzFg7KAE6ZqSeQPi+cN3rzS+NdGQA+3F7HQKapSmgVJWJ+HPc7WEv9cEIn2i6NNMunpgLp+ZrFpQDqjyWVplxH2n1+lrMiwOJVTTubzRTMAMSP/kkT3tj9LmfHpF7qI+scitZetxN1QTM8NG5zr8fX/UVU/HolSx2YXqIXV5wi/mCGIU7eXZoGxLSeHULMMKZ7c2UmZaE643Tl5HCaO2Ri5lFYbMkwPqqKL33tLVb2Tycl0nQyzihq1M7aVT6KVIDnxDPrCDjEOUI5zsmvqniV0Qp2bPq8frtn/KrhV3sP/L4E7LMM/jcwr5y6yghSOvBDAfLsjgJf7lfwMayafHmmiP+Zj5lz8mtCt8esQm2i1gQrcoziKfYKmGO8qycD9hkNFi5IBEz2J1VMQNkbnTz0ysgf1WSsrxDkhwSHqNcOZAD22Xy7L2IcwqWTTZRxmhOWlp5OP8JkMI2prkoojZ1JbrPRexFlg+2ZFWeBdgxc5OhGqLoL1mnISRyRfZkdugOnxnIB/SiCxhA51Uw4RaE/mVsMsMxt8jQB9/WGWlQ0LBkaCvsdSIBwsKIge6OPK1rvR6N7L/YU0VmHIsjRvO2SBympDY/yS5V4CETf8+0TfGnIo2J1oLqD3BbuZB25s7yTMLtmESRtLB5HbuGhnRjf4Gi69a0ziESm543hKe3+nQiD/jcjXw8VTLb5oe+jIBOpledmLdHXug0OOcSqjoh4GCDN8cka29NCHpxJNhsO0+CTNcIfGBTnvVG2L6SH4QLgVOLsZryT1lungAz2S6V7Yhk3iGHFi1jBZYKwfyNbs0u0S+uYBEl6hhYoobezYRHLlZx+kMEv09+YgDR/056s6m4VjzRhi32AfkbeJnrfX3UEfCbNOBH8xIExiEeU0M2WNfHD0wbEuG3NVB/sqdSAp+jaTYr0TCP6oYjw7opj7NdNfwekPkuyvK5g1x2ijisTDPVh2+ppc8o6//M/EbOi2BP3L2l15/dm/hi1EC51FSzUmrJUkY+v6E8zoT04p124JMHLamYtii9kiVyIx+YDFlHA+UiXH6OtXFo4+sdwUe7kyfaEnTV/7lwShO+U2fPYeJ8e8wQ1iHSMKOYhWaakW+v7wspz2hqgJ4ZiRE5yHobn90KASZBSoxhSFB2mnQSot3UYqpyzonnlyPHSwQ/tmr+P0k+QFMmhreH0APbWTVrLhWLyWx0iVEMQZqG8deFJnUzafelQ/fQKq72PnHlvjZycEw+A2FbPxtc/lyh3OWzh5gMd9vkqVBMUU4tnXS6GDRdqNtRxtzeKw4BwTtfIxsxFJl9t+njZV3GsS+1TRSb5grO9xX84n96SD+YS/GmK9WTdcRLRcvE+nc9KskXTMjD4X4i4aiJE0tzYdngR4870RCRJVSdsWT3lR8U/6q73Ftl/NMG/JoLK28WyADmuj4wLLxchOBptE+cFjRw7Syp4lZdT2a4dZ8yKL6drDCwAQ5Hd+JMSvTck3HvV7OHnG1HJNhYyBKbTsN7eSzry1JxztqGVOxxS9dt1gv3QL0kb/G3KtbxgNfLxS0orOw2Ck3FA0W73AFKAovPp7n2sr4gFItAPoKQIK6uC6gHlvqjZgj3wrT2dgfgY09Sx8oQ/Cdt6TgAAEVYSUZfAAAASUkqAAgAAAABAGmHBAABAAAAGgAAAAAAAAABAIaSBwAyAAAALAAAAAAAAABBU0NJSQAAADEuNzIuMC0yM0otTkFRQkZIMlE3Tk9OQU80QldBN1pHQ05WTUkuMC4yLTkA',
+};
 
-export const cryptoXWallet: MobileWallet = {
-    id: 'CryptoXWallet',
+export const cryptoXWalletMainnet: WalletConnectMobileWallet = {
+    type: 'customLink',
+    id: 'CryptoXMainnet',
     name: 'CryptoX Wallet',
     links: {
         native: 'cryptox://',
     },
+    iconUrl: 'data:image/webp;base64,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',
+};
+
+export const cryptoXWalletTestnet: WalletConnectMobileWallet = {
+    type: 'customLink',
+    id: 'CryptoXTestnet',
+    name: 'CryptoX Wallet (Testnet)',
+    links: {
+        native: 'cryptoXStage://',
+    },
+    iconUrl: 'data:image/webp;base64,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',
 };
 
 async function connect(
@@ -79,18 +111,23 @@ async function connect(
     mobileWallets?: WalletConnectMobileWallet[]
 ) {
     let modal: WalletConnectModal | undefined;
-    const { mobile, explorer } = mobileWallets?.reduce<{ mobile: MobileWallet[]; explorer: string[] }>(
-        (acc, cur) => {
-            if (typeof cur === 'string') {
-                acc.explorer.push(cur);
-            } else {
-                acc.mobile.push(cur);
+
+    const wallets: MobileWallet[] = [];
+    const explorerIds: string[] = [];
+    const walletImages: Record<string, string> = {};
+    mobileWallets?.forEach(w => {
+        if (w.type === 'explorerId') {
+            explorerIds.push(w.value);
+        } else {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { type: _, iconUrl, ...mw } = w;
+            wallets.push(mw);
+            if (iconUrl !== undefined) {
+                walletImages[mw.id] = iconUrl;
             }
+        }
+    });
 
-            return acc;
-        },
-        { mobile: [], explorer: [] }
-    ) ?? {};
     try {
         const { uri, approval } = await client.connect({
             requiredNamespaces: {
@@ -101,10 +138,11 @@ async function connect(
             modal = new WalletConnectModal({
                 projectId: CONCORDIUM_WALLET_CONNECT_PROJECT_ID,
                 chains: scope.chains,
-                mobileWallets: mobile,
+                mobileWallets: wallets,
                 desktopWallets: [],
-                explorerRecommendedWalletIds: explorer,
+                explorerRecommendedWalletIds: explorerIds,
                 explorerExcludedWalletIds: 'ALL',
+                walletImages
             });
             // Open modal as we're not connecting to an existing pairing.
             modal.openModal({ uri });
@@ -476,7 +514,7 @@ export class WalletConnectConnector implements WalletConnector {
      * @param events - The events to request permission to read from the wallet
      * @param mobileWallets - The (mobile) wallets to be selectable from the walletconnect modal
      *
-     * @returns the {@linkcode WalletConnectConnection}, or `undefined` if rejected from the wallet. 
+     * @returns the {@linkcode WalletConnectConnection}, or `undefined` if rejected from the wallet.
      */
     async connectWithScope(
         methods: WalletConnectMethods[],
@@ -515,7 +553,7 @@ export class WalletConnectConnector implements WalletConnector {
                 WalletConnectMethods.RequestVerifiablePresentation,
             ],
             [WalletConnectEvents.AccountsChanged, WalletConnectEvents.ChainChanged],
-            [cryptoXWallet, concordiumWallet]
+            [cryptoXWalletMainnet, concordiumWalletMainnet]
         );
     }