Merge branch 'feat/wallet-connect-v2' into beta

perawallet · May 30, 2024 · 4c52938 · 4c52938
2 parents 0f91c7c + 7633f1e
commit 4c52938
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 253 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ![Pera Connect Cover Image](https://user-images.githubusercontent.com/54077855/179966121-bd9295c3-5f61-4203-b13f-851434e72d35.png)
 
-## @perawallet/connect
+## @perawallet/connect-beta (Beta version of Pera Connect)
 
 JavaScript SDK for integrating [Pera Wallet](https://perawallet.app) to web applications. For more detailed information, please check our [Pera Connect Docs](https://docs.perawallet.app/references/pera-connect/).
 
@@ -36,10 +36,10 @@ JavaScript SDK for integrating [Pera Wallet](https://perawallet.app) to web appl
 
 ## Quick Start
 
-Let's start with installing `@perawallet/connect`
+Let's start with installing `@perawallet/connect-beta`
 
 ```
-npm install --save @perawallet/connect
+npm install --save @perawallet/connect-beta
 ```
 
 ```jsx

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.8",
+  "version": "2.0.9",
   "name": "@perawallet/connect-beta",
   "description": "Beta version of Pera Wallet Connect",
   "main": "dist/index.js",

diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts
@@ -12,7 +12,7 @@ import {
   PERA_WALLET_REDIRECT_MODAL_ID,
   openPeraWalletSignTxnToast,
   PERA_WALLET_SIGN_TXN_TOAST_ID,
-  PERA_WALLET_MODAL_CLASSNAME,
+  PERA_WALLET_MODAL_CLASSNAME
 } from "./modal/peraWalletConnectModalUtils";
 import {
   getWalletDetailsFromStorage,
@@ -23,10 +23,7 @@ import {
   resetWalletDetailsFromStorage
 } from "./util/storage/storageUtils";
 import {getPeraConnectConfig} from "./util/api/peraWalletConnectApi";
-import {
-  PeraWalletTransaction,
-  SignerTransaction,
-} from "./util/model/peraWalletModels";
+import {PeraWalletTransaction, SignerTransaction} from "./util/model/peraWalletModels";
 import {
   base64ToUint8Array,
   composeTransaction,
@@ -39,6 +36,7 @@ import {PERA_WALLET_LOCAL_STORAGE_KEYS} from "./util/storage/storageConstants";
 import {getPeraWebWalletURL} from "./util/peraWalletConstants";
 import appTellerManager, {PeraTeller} from "./util/network/teller/appTellerManager";
 import {getMetaInfo, waitForTabOpening} from "./util/dom/domUtils";
+import {formatWalletConnectSessionResponse} from "./util/wallet-connect/walletConnectUtils";
 
 interface PeraWalletConnectOptions {
   projectId?: string;
@@ -109,7 +107,6 @@ class PeraWalletConnect {
     const webWalletURLs = getPeraWebWalletURL(webWalletURL);
 
     function onWebWalletConnect() {
-
       waitForTabOpening(webWalletURLs.CONNECT).then((newPeraWalletTab) => {
         if (newPeraWalletTab && newPeraWalletTab.opener) {
           appTellerManager.sendMessage({
@@ -165,7 +162,7 @@ class PeraWalletConnect {
                     detail: event.data.message.error
                   },
                   event.data.message.error ||
-                  `Your wallet is connected to a different network to this dApp. Update your wallet to the correct network (MainNet or TestNet) to continue.`
+                    `Your wallet is connected to a different network to this dApp. Update your wallet to the correct network (MainNet or TestNet) to continue.`
                 )
               );
 
@@ -273,29 +270,17 @@ class PeraWalletConnect {
 
         this.session = await approval();
 
-        const {namespaces} = this.session;
-
-        const accounts = Object.values(namespaces)
-          .map((namespace) => namespace.accounts)
-          .flat();
-
-        const [namespace, reference, _address] = accounts[0].split(":");
-
-        const accountsArray: string[] = accounts.map((account) => {
-          const [_namespace, _reference, address] = account.split(":");
-
-          return address;
-        });
-
-        const accountsSet = [...new Set(accountsArray)];
+        const {namespace, reference, accounts} = formatWalletConnectSessionResponse(
+          this.session
+        );
 
         saveWalletDetailsToStorage(
-          accountsSet || [],
+          accounts || [],
           "pera-wallet",
           `${namespace}:${reference}`
         );
 
-        resolve(accountsSet);
+        resolve(accounts);
       } catch (error: any) {
         console.log(error);
 
@@ -319,7 +304,14 @@ class PeraWalletConnect {
       try {
         const walletDetails = getWalletDetailsFromStorage();
 
-        if (!walletDetails?.chainId) {
+        if (!walletDetails) {
+          resolve([]);
+
+          return;
+        }
+
+        // Do not reconnect if the last session was connected with Wallet Connect v1
+        if (!walletDetails?.version) {
           await resetWalletDetailsFromStorage();
 
           reject(
@@ -328,14 +320,9 @@ class PeraWalletConnect {
                 type: "SESSION_RECONNECT",
                 detail: "Failed to reconnect session. Wallet Connect version mismatch."
               },
-              "Failed to reconnect session"
-            ));
-        }
-
-        if (!walletDetails) {
-          resolve([]);
-
-          return;
+              "Failed to reconnect session. Please try to connect again."
+            )
+          );
         }
 
         // ================================================= //
@@ -408,19 +395,12 @@ class PeraWalletConnect {
 
       this.session = session;
 
-      const {namespaces: updatedNamespaces} = this.session;
-      const accounts = Object.values(updatedNamespaces)
-        .map((namespace) => namespace.accounts)
-        .flat();
-      const accountsArray: string[] = accounts.map((account) => {
-        const [_namespace, _reference, address] = account.split(":");
-
-        return address;
-      });
-      const [namespace, reference, _address] = accounts[0].split(":");
+      const {namespace, reference, accounts} = formatWalletConnectSessionResponse(
+        this.session
+      );
 
       saveWalletDetailsToStorage(
-        accountsArray || [],
+        accounts || [],
         "pera-wallet",
         `${namespace}:${reference}`
       );
@@ -435,7 +415,7 @@ class PeraWalletConnect {
         }
 
         if (typeof this.client?.session === "undefined") {
-          reject(new Error("WalletConnect is not initialized"));
+          reject(new Error("WalletConnect is not initialized 2"));
         }
 
         try {
@@ -541,10 +521,9 @@ class PeraWalletConnect {
     signer: string;
     chainId: AlgorandChainIDs;
   }) {
-    const formattedSignTxnRequest = formatJsonRpcRequest(
-      "algo_signData",
-      [{data, signer, chainID: chainId, message}]
-    );
+    const formattedSignTxnRequest = formatJsonRpcRequest("algo_signData", [
+      {data, signer, chainID: chainId, message}
+    ]);
 
     try {
       try {
@@ -617,7 +596,7 @@ class PeraWalletConnect {
     // ================================================= //
   }
 
-  signData(data: Uint8Array, signer: string, message: string,): Promise<Uint8Array[]> {
+  signData(data: Uint8Array, signer: string, message: string): Promise<Uint8Array[]> {
     // eslint-disable-next-line no-magic-numbers
     const chainId = (this.chainId || 4160) as AlgorandChainIDs;
 
@@ -636,7 +615,12 @@ class PeraWalletConnect {
     }
 
     // Pera Mobile Wallet flow
-    return this.signDataWithMobile({data: Buffer.from(data).toString('base64'), message, signer, chainId});
+    return this.signDataWithMobile({
+      data: Buffer.from(data).toString("base64"),
+      message,
+      signer,
+      chainId
+    });
   }
 }
 

diff --git a/src/modal/peraWalletConnectModalUtils.ts b/src/modal/peraWalletConnectModalUtils.ts
@@ -126,9 +126,9 @@ function openPeraWalletSignTxnModal({isCompactMode}: {isCompactMode?: boolean})
 
   return signTxnModal
     ? waitForElementCreatedAtShadowDOM(
-      signTxnModal,
-      "pera-wallet-sign-txn-modal__body__content"
-    )
+        signTxnModal,
+        "pera-wallet-sign-txn-modal__body__content"
+      )
     : Promise.reject();
 }
 

diff --git a/src/util/connect/connectFlow.ts b/src/util/connect/connectFlow.ts
@@ -1,18 +1,13 @@
 import {
   PERA_WALLET_CONNECT_MODAL_ID,
-  removeModalWrapperFromDOM,
+  removeModalWrapperFromDOM
 } from "../../modal/peraWalletConnectModalUtils";
 import PeraWalletConnectError from "../PeraWalletConnectError";
-import {
-  getMetaInfo,
-  waitForTabOpening
-} from "../dom/domUtils";
+import {getMetaInfo, waitForTabOpening} from "../dom/domUtils";
 import appTellerManager, {PeraTeller} from "../network/teller/appTellerManager";
 import {getPeraWebWalletURL} from "../peraWalletConstants";
 import {RunWebConnectFlowTypes} from "./connectFlowModels";
-import {
-  newTabConnectFlowTellerReducer
-} from "./connectFlowReducers";
+import {newTabConnectFlowTellerReducer} from "./connectFlowReducers";
 
 function runWebConnectFlow({
   webWalletURL,

diff --git a/src/util/connect/connectFlowModels.ts b/src/util/connect/connectFlowModels.ts
@@ -13,14 +13,6 @@ interface RunWebConnectFlowTypes extends ConnectFlowPromise {
   isCompactMode?: boolean;
 }
 
-interface EmbeddedConnectFlowTellerReducerParams extends ConnectFlowPromise {
-  event: MessageEvent<TellerMessage<PeraTeller>>;
-  peraWalletIframe: HTMLIFrameElement;
-  chainId: AlgorandChainIDs | undefined;
-  isIframeInitializedChecker: NodeJS.Timer;
-  webWalletURLs: PeraWebWalletURLs;
-}
-
 interface NewTabConnectFlowTellerReducerParams extends ConnectFlowPromise {
   event: MessageEvent<TellerMessage<PeraTeller>>;
   newPeraWalletTab: Window | null;
@@ -29,6 +21,5 @@ interface NewTabConnectFlowTellerReducerParams extends ConnectFlowPromise {
 export type {
   ConnectFlowPromise,
   RunWebConnectFlowTypes,
-  EmbeddedConnectFlowTellerReducerParams,
   NewTabConnectFlowTellerReducerParams
 };