Add integration with WalletConnect

.env.dist

@@ -1,2 +1,3 @@
 VITE_HORIZON_URL=https://horizon-testnet.stellar.org
 VITE_TEST_PRIVATEKEY=PRIVATE_KEY
+VITE_WALLET_CONNECT_PROJECT_ID=PROJECT_ID

cypress/plugins/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
@@ -15,7 +16,7 @@
 /**
  * @type {Cypress.PluginConfig}
  */
-// eslint-disable-next-line no-unused-vars
+
 module.exports = (on, config) => {
     // `on` is used to hook into various events Cypress emits
     // `config` is the resolved Cypress config

package.json

@@ -73,6 +73,8 @@
     },
     "dependencies": {
         "@stellar/freighter-api": "^1.1.2",
+        "@walletconnect/client": "^2.0.0-beta.21",
+        "@walletconnect/qrcode-modal": "^2.0.0-alpha.5",
         "stellar-sdk": "^10.0.0"
     }
 }

src/assets/index.ts

@@ -2,4 +2,5 @@ export { default as albedo } from './logo-wallets/albedo.svg';
 export { default as xBull } from './logo-wallets/xbull.svg';
 export { default as privateKey } from './logo-wallets/private-key.svg';
 export { default as freighter } from './logo-wallets/freighter.svg';
+export { default as walletConnect } from './logo-wallets/wallet-connect.svg';
 export { default as rabet } from './logo-wallets/rabet.svg';

src/helpers/interfaces/ISimpleSignerEvent.ts

@@ -1,4 +1,4 @@
 export default interface ISimpleSignerEvent {
     type: string;
-    message: any;
+    message: unknown;
 }

src/routes/connect/Connect.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
     import Albedo from './ui/wallets/Albedo';
-    import Freighter from './ui/wallets/Freighter';
+    // import Freighter from './ui/wallets/Freighter';
     import XBull from './ui/wallets/XBull';
     import PrivateKey from './ui/wallets/PrivateKey';
     import Rabet from './ui/wallets/Rabet';
     import { inputValue, isPrivateKeyVisible, isWalletHidden } from './connectStore';
     import { albedo, xBull, freighter, privateKey, rabet } from '../../assets/index';
+    // import WalletConnect from './ui/wallets/WalletConnect';
+
+    // const PUBNET = 'stellar:pubnet';
+    // const STELLAR_METHODS = {
+    //     SIGN: 'stellar_signXDR',
+    // };
 
     async function connectWithAlbedo() {
         const albedo = new Albedo();
         return albedo.logIn(await albedo.getPublicKey());
     }
 
-    async function connectWithFreighter() {
-        const freighter = new Freighter();
-        return freighter.logIn(await freighter.getPublicKey());
-    }
+    // async function connectWithFreighter() {
+    //     const freighter = new Freighter();
+    //     return freighter.logIn(await freighter.getPublicKey());
+    // }
 
     async function connectWithXBull() {
         const xbull = new XBull();
@@ -30,6 +36,13 @@
     async function connectWithSecretKey(privateKey: string): Promise<void> {
         return new PrivateKey().logIn(privateKey);
     }
+
+    // async function connectWithWalletConnect() {
+    //     const walletConnect = new WalletConnect();
+    //     const client = await walletConnect.initClient();
+    //     const pairing = await walletConnect.createPairing(client);
+    //     const session = await walletConnect.createSession(client);
+    // }
 </script>
 
 <div class="simple-signer-container">
@@ -63,7 +76,7 @@
                 </a>
             </div>
             <div class="simple-signer freighter-container">
-                <a href="{'#'}" class="connect-freighter" on:click="{() => connectWithFreighter()}">
+                <a href="{'#'}" class="connect-freighter">
                     <img
                         class="simple-signer freighter-logo"
                         src="{freighter}"
@@ -92,6 +105,18 @@
                     <p class="simple-signer wallet-private-key-title">Private Key</p>
                 </a>
             </div>
+            <!-- <div class="simple-signer wallet-connect-container">
+                <a href="{'#'}" class="connect-wallet-connect" on:click="{() => connectWithWalletConnect()}">
+                    <img
+                        class="simple-signer wallet-connect-logo"
+                        src="{walletConnect}"
+                        alt="wallet connect logo"
+                        width="45"
+                        height="45"
+                    />
+                    <p class="simple-signer wallet-connect-title">Wallet Connect</p>
+                </a>
+            </div> -->
         </div>
     {/if}
 </div>
@@ -111,7 +136,8 @@
     .rabet-logo,
     .albedo-logo,
     .xbull-logo,
-    .private-key-logo {
+    .private-key-logo
+    /* .wallet-connect-logo */ {
         margin-top: 25px;
     }
     .freighter-logo {
@@ -120,7 +146,8 @@
     .wallet-rabet-title,
     .wallet-albedo-title,
     .wallet-xbull-title,
-    .wallet-private-key-title {
+    .wallet-private-key-title
+    /* .wallet-connect-title { */ {
         margin-top: 10px;
     }
 
@@ -132,7 +159,8 @@
     .wallet-albedo-title:hover,
     .wallet-xbull-title:hover,
     .wallet-private-key-title:hover,
-    .wallet-freighter-title:hover {
+    .wallet-freighter-title:hover
+    /* .wallet-connect-title:hover */ {
         color: #000;
     }
 
@@ -144,7 +172,8 @@
     .albedo-container,
     .freighter-container,
     .xbull-container,
-    .private-key-container {
+    .private-key-container
+    /* .wallet-connect-container */ {
         font-family: 'Montserrat', sans-serif;
         font-size: 14px;
         color: #bdbdbd;
@@ -158,7 +187,8 @@
         .albedo-container,
         .freighter-container,
         .xbull-container,
-        .private-key-container {
+        .private-key-container
+        /* .wallet-connect-container */ {
             margin-top: 15px;
         }
     }

src/routes/connect/ui/wallets/Wallet.ts

@@ -5,6 +5,7 @@ import Freighter from './Freighter';
 import PrivateKey from './PrivateKey';
 import Rabet from './Rabet';
 import XBull from './XBull';
+// import WalletConnect from './WalletConnect';
 
 export default class WalletFactory {
     create(name: string) {
@@ -25,6 +26,9 @@ export default class WalletFactory {
             case PrivateKey.NAME:
                 wallet = new PrivateKey();
                 break;
+            // case WalletConnect.NAME:
+            //     wallet = new WalletConnect();
+            //     break;
             default:
                 throw new InvalidWalletException();
         }

src/routes/connect/ui/wallets/WalletConnect.ts

@@ -0,0 +1,146 @@
+import WalletConnectClient from '@walletconnect/client';
+import { CLIENT_EVENTS } from '@walletconnect/client';
+import type { Client } from '@walletconnect/client/dist/cjs/client';
+import QRCodeModal from '@walletconnect/qrcode-modal';
+import type { PairingTypes, SessionTypes } from '@walletconnect/types';
+
+// import { sendMessage } from '../../../../helpers/sendMessageHelpers';
+import type IWalletConnect from './interfaces/IWalletConnect';
+
+const PUBNET = 'stellar:pubnet';
+const STELLAR_METHODS = {
+    SIGN: 'stellar_signXDR',
+};
+
+export default class WalletConnect implements IWalletConnect {
+    public static NAME = 'walletconnect';
+
+    async initClient() {
+        const client = await WalletConnectClient.init({
+            projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
+            relayUrl: 'wss://relay.walletconnect.org',
+            metadata: {
+                name: 'Simple Signer Stellar #3',
+                description: 'Example Dapp',
+                url: 'https://localhost:3000/',
+                icons: ['https://walletconnect.com/walletconnect-logo.png'],
+            },
+        });
+        return client;
+    }
+
+    async createPairing(client: Client) {
+        client.on(CLIENT_EVENTS.pairing.proposal, async (proposal: PairingTypes.Proposal) => {
+            const { uri } = proposal.signal.params;
+            console.log('create pairing');
+            QRCodeModal.open(uri, async () => QRCodeModal.close());
+            console.log(proposal, 'proposal');
+        });
+    }
+
+    async createSession(client: Client) {
+        const session = await client.connect({
+            permissions: {
+                blockchain: {
+                    chains: [PUBNET],
+                },
+                jsonrpc: {
+                    methods: [STELLAR_METHODS.SIGN],
+                },
+            },
+        });
+        return session;
+    }
+    async deleteSession(session: SessionTypes.Settled, client: Client) {
+        client.disconnect({
+            topic: session.topic,
+            reason: {
+                code: 0,
+                message: 'Disconnecting WalletConnect from Simple Signer for additional security',
+            },
+        });
+    }
+    async sign(session: SessionTypes.RequestParams, client: Client) {
+        const result = await client.request({
+            topic: session.topic,
+            chainId: PUBNET,
+            request: {
+                method: 'stellar_signXDR',
+                params: {
+                    xdr: 'AAAAAgAAAACs3d1Ffb9O6rqEUlrxKCPte210i4eyOUvlZh/M1QUZKAAAAGQCXVArAAAAAwAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAACs3d1Ffb9O6rqEUlrxKCPte210i4eyOUvlZh/M1QUZKAAAAAAAAAAAAJiWgAAAAAAAAAAA',
+                },
+            },
+        });
+        return result;
+    }
+}
+// const TESTNET = 'stellar:testnet';
+// const PUBNET = 'stellar:pubnet';
+// const STELLAR_METHODS = {
+//     SIGN: 'stellar_signXDR',
+// };
+// export let clientAndSessionArray: (WalletConnectClient | SessionTypes.Settled)[];
+
+// export default async function connectWithWalletConnect() {
+//     const client = await WalletConnectClient.init({
+//         projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
+//         relayUrl: 'wss://relay.walletconnect.org',
+//         metadata: {
+//             name: 'Simple Signer Stellar #3',
+//             description: 'Example Dapp',
+//             url: 'https://localhost:3000',
+//             icons: ['https://walletconnect.com/walletconnect-logo.png'],
+//         },
+//     });
+
+//     client.on(CLIENT_EVENTS.pairing.proposal, async (proposal: PairingTypes.Proposal) => {
+//         const { uri } = proposal.signal.params;
+//         QRCodeModal.open(uri, async () => QRCodeModal.close());
+//     });
+
+//     const session = await client.connect({
+//         permissions: {
+//             blockchain: {
+//                 chains: [PUBNET],
+//             },
+//             jsonrpc: {
+//                 methods: [STELLAR_METHODS.SIGN],
+//             },
+//         },
+//     });
+// }
+
+// export async function sign() {
+//     const client = await WalletConnectClient.init({
+//         projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID,
+//         relayUrl: 'wss://relay.walletconnect.org',
+//         metadata: {
+//             name: 'Simple Signer Stellar',
+//             description: 'Use Simple Signer to easily support multiple wallets',
+//             url: 'https://localhost:3000',
+//             icons: ['https://walletconnect.com/walletconnect-logo.png'],
+//         },
+//     });
+
+//     let sessions = client.session.values;
+//     client.on(CLIENT_EVENTS.session.sync, () => {
+//         sessions = client.session.values;
+//     });
+
+//     const currentSession = sessions.map((session) => {
+//         console.log(session);
+//     });
+//     console.log(sessions);
+//     const result = await client.request({
+//         topic: currentSession!.topic,
+//         chainId: PUBNET,
+//         request: {
+//             method: 'stellar_signXDR',
+//             params: {
+//                 xdr: 'AAAAAgAAAACs3d1Ffb9O6rqEUlrxKCPte210i4eyOUvlZh/M1QUZKAAAAGQCXVArAAAAAwAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAACs3d1Ffb9O6rqEUlrxKCPte210i4eyOUvlZh/M1QUZKAAAAAAAAAAAAJiWgAAAAAAAAAAA',
+//             },
+//         },
+//     });
+//     console.log(result);
+//     return result;
+// }

src/routes/connect/ui/wallets/interfaces/IWalletConnect.ts

@@ -0,0 +1,15 @@
+import type { Client } from '@walletconnect/client/dist/cjs/client';
+
+import type { SessionTypes, ClientTypes } from '@walletconnect/types';
+
+export default interface IWalletConnect {
+    initClient: () => Promise<Client>;
+
+    createPairing: (client: Client) => Promise<void>;
+
+    createSession: (client: Client) => Promise<SessionTypes.Settled>;
+
+    deleteSession: (session: SessionTypes.Settled, client: Client) => Promise<void>;
+
+    sign: (session: SessionTypes.RequestParams, client: Client, xdr: string) => Promise<ClientTypes.RespondParams>;
+}

src/vite-env.d.ts

@@ -3,6 +3,8 @@
 
 interface ImportMetaEnv {
     readonly VITE_HORIZON_NETWORK_PASSPHRASE: string;
+    readonly VITE_HOST_SIMPLE_SIGNER_DEMO: string;
+    readonly VITE_WALLET_CONNECT_PROJECT_ID: string;
     readonly VITE_STELLAR_NETWORK: string;
 }