Merge pull request #23 from perawallet/next-release

perawallet/[email protected]

README.md

@@ -91,6 +91,12 @@ function App() {
 
 `@perawallet/connect` also allows signing transactions using the Pera Wallet application. Once the `signTransaction` method is triggered if the user is on a mobile browser, the Pera Wallet app will be launched automatically, if the browser blocks the redirection there's also a popup that links to the Pera Wallet app.
 
+`@perawallet/connect` guides users with a toast message when the `signTransaction` is triggered. It's enabled by default but in some cases, you may not need to the toast message (e.g. you already have signing guidance for users). There's a configuration called `shouldShowSignTxnToast` to disable it, see the example below:
+
+```js
+const peraWallet = new PeraWalletConnect({shouldShowSignTxnToast: false});
+```
+
 `signTransaction` accepts `SignerTransaction[][]` the type can be found [here](./src/util/model/peraWalletModels.ts)
 
 **To see more details & working examples please [visit here](https://codesandbox.io/s/txns-demo-pj3nf2)**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perawallet/connect",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "JavaScript SDK for integrating Pera Wallet to web applications.",
   "main": "dist/index.js",
   "scripts": {
@@ -15,6 +15,7 @@
     "@hipo/eslint-config-react": "^2.2.0",
     "@hipo/eslint-config-typescript": "^1.1.0",
     "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
@@ -35,6 +36,7 @@
     "@json-rpc-tools/utils": "^1.7.6",
     "@walletconnect/client": "^1.7.7",
     "buffer": "^6.0.3",
+    "lottie-react": "^2.3.1",
     "react-qrcode-logo": "^2.7.0"
   },
   "peerDependencies": {

rollup.config.js

@@ -2,6 +2,7 @@ import typescript from "rollup-plugin-typescript2";
 import {terser} from "rollup-plugin-terser";
 import postcss from "rollup-plugin-postcss";
 import image from "@rollup/plugin-image";
+import json from "@rollup/plugin-json";
 
 export default [
   {
@@ -19,7 +20,8 @@ export default [
       "@hipo/react-ui-toolkit",
       "react-qrcode-logo",
       "@json-rpc-tools/utils/dist/cjs/format",
-      "algosdk"
+      "algosdk",
+      "lottie-react"
     ],
     plugins: [
       image(),
@@ -29,7 +31,8 @@ export default [
         rollupCommonJSResolveHack: true,
         exclude: "**/__tests__/**",
         clean: true
-      })
+      }),
+      json()
     ]
   }
 ];

src/PeraWalletConnect.ts

@@ -7,7 +7,9 @@ import {
   openPeraWalletRedirectModal,
   removeModalWrapperFromDOM,
   PERA_WALLET_CONNECT_MODAL_ID,
-  PERA_WALLET_REDIRECT_MODAL_ID
+  PERA_WALLET_REDIRECT_MODAL_ID,
+  openPeraWalletSignTxnToast,
+  PERA_WALLET_SIGN_TXN_TOAST_ID
 } from "./modal/peraWalletConnectModalUtils";
 import {
   resetWalletDetailsFromStorage,
@@ -28,6 +30,7 @@ interface PeraWalletConnectOptions {
   bridge?: string;
   deep_link?: string;
   app_meta?: AppMeta;
+  shouldShowSignTxnToast?: boolean;
 }
 
 function generatePeraWalletConnectModalActions(rejectPromise?: (error: any) => void) {
@@ -40,6 +43,7 @@ function generatePeraWalletConnectModalActions(rejectPromise?: (error: any) => v
 class PeraWalletConnect {
   bridge: string;
   connector: WalletConnect | null;
+  shouldShowSignTxnToast: boolean;
 
   constructor(options?: PeraWalletConnectOptions) {
     this.bridge =
@@ -59,6 +63,10 @@ class PeraWalletConnect {
     }
 
     this.connector = null;
+    this.shouldShowSignTxnToast =
+      typeof options?.shouldShowSignTxnToast === "undefined"
+        ? true
+        : options.shouldShowSignTxnToast;
   }
 
   connect() {
@@ -201,6 +209,9 @@ class PeraWalletConnect {
     if (isMobile()) {
       // This is to automatically open the wallet app when trying to sign with it.
       openPeraWalletRedirectModal();
+    } else if (!isMobile() && this.shouldShowSignTxnToast) {
+      // This is to inform user go the wallet app when trying to sign with it.
+      openPeraWalletSignTxnToast();
     }
 
     return this.connector
@@ -228,7 +239,10 @@ class PeraWalletConnect {
           )
         )
       )
-      .finally(() => removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID));
+      .finally(() => {
+        removeModalWrapperFromDOM(PERA_WALLET_REDIRECT_MODAL_ID);
+        removeModalWrapperFromDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+      });
   }
 }
 

src/modal/peraWalletConnectModalUtils.tsx

@@ -9,13 +9,17 @@ import PeraWalletConnectModal from "./PeraWalletConnectModal";
 import PeraWalletRedirectModal from "./redirect/PeraWalletRedirectModal";
 import {AccordionData} from "./component/accordion/util/accordionTypes";
 import PeraWalletConnectError from "../util/PeraWalletConnectError";
+import PeraWalletSignTxnToast from "./sign-toast/PeraWalletSignTxnToast";
 
 // The ID of the wrapper element for PeraWalletConnectModal
 const PERA_WALLET_CONNECT_MODAL_ID = "pera-wallet-connect-modal-wrapper";
 
 // The ID of the wrapper element for PeraWalletRedirectModal
 const PERA_WALLET_REDIRECT_MODAL_ID = "pera-wallet-redirect-modal-wrapper";
 
+// The ID of the wrapper element for PeraWalletSignTxnToast
+const PERA_WALLET_SIGN_TXN_TOAST_ID = "pera-wallet-sign-txn-toast";
+
 /**
  * @returns {HTMLDivElement} wrapper element for PeraWalletConnectModal
  */
@@ -82,6 +86,24 @@ function openPeraWalletRedirectModal() {
   }
 }
 
+/**
+ * Creates a PeraWalletSignTxnToast instance and renders it on the DOM.
+ *
+ * @returns {void}
+ */
+function openPeraWalletSignTxnToast() {
+  const wrapper = createModalWrapperOnDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+
+  ReactDOM.render(
+    <PeraWalletSignTxnToast onClose={handlePeraWalletSignTxnToast} />,
+    wrapper
+  );
+
+  function handlePeraWalletSignTxnToast() {
+    removeModalWrapperFromDOM(PERA_WALLET_SIGN_TXN_TOAST_ID);
+  }
+}
+
 /**
  * Removes the PeraWalletConnectModal from the DOM.
  * @returns {void}
@@ -150,7 +172,9 @@ export {getPeraConnectModalAccordionData};
 export {
   PERA_WALLET_CONNECT_MODAL_ID,
   PERA_WALLET_REDIRECT_MODAL_ID,
+  PERA_WALLET_SIGN_TXN_TOAST_ID,
   openPeraWalletConnectModal,
   openPeraWalletRedirectModal,
+  openPeraWalletSignTxnToast,
   removeModalWrapperFromDOM
 };

src/modal/sign-toast/PeraWalletSignTxnToast.tsx

@@ -0,0 +1,44 @@
+import "./_pera-wallet-sign-txn-toast.scss";
+
+import CloseIcon from "../../asset/icon/Close--small.svg";
+import animationData from "./lotties/Animation.json";
+
+import React from "react";
+import Lottie from "lottie-react";
+
+interface PeraWalletSignTxnToastProps {
+  onClose: () => void;
+}
+
+function PeraWalletSignTxnToast({onClose}: PeraWalletSignTxnToastProps) {
+  return (
+    <div className={"pera-wallet-sign-txn-toast"}>
+      <div className={"pera-wallet-sign-txn-toast__header"}>
+        <button
+          className={"pera-wallet-sign-txn-toast__header__close-button"}
+          onClick={onClose}>
+          <img src={CloseIcon} />
+        </button>
+      </div>
+
+      <div className={"pera-wallet-sign-txn-toast__content"}>
+        <Lottie
+          className={"pera-wallet-sign-txn-toast__content__lottie-animation"}
+          animationData={animationData}
+          width={368}
+          height={368}
+        />
+
+        <p className={"pera-wallet-sign-txn-toast__content__description"}>
+          {"Please launch "}
+
+          <b>{"Pera Wallet"}</b>
+
+          {" on your iOS or Android device to sign this transaction."}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default PeraWalletSignTxnToast;