Merge pull request #145 from perawallet/next-release

v1.3.0 - Compact mode
perawallet · Jul 14, 2023 · 082d9b1 · 082d9b1
2 parents 0b2b756 + ba8da06
commit 082d9b1
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,7 @@ try {
 | ------------------------ | ------- | ------------------------------------- | -------- |
 | `chainId`                | `4160`  | `416001`, `416002`, `416003` , `4160` | optional |
 | `shouldShowSignTxnToast` | `true`  | `boolean`                             | optional |
+| `compactMode`            | `false` | `boolean`                             | optional |
 
 #### **`chainId`**
 
@@ -109,7 +110,11 @@ Determines which Algorand network your dApp uses.
 
 <img width="422" alt="Group 48096937" src="https://user-images.githubusercontent.com/54077855/202682828-9ac57b62-58c1-4a83-af3b-e1b7ffad2d89.png">
 
-It's enabled by default but in some cases, you may not need the toast message (e.g. you already have signing guidance for users). To disable it, use the shouldShowSignTxnToast option:
+It's enabled by default but in some cases, you may not need the toast message (e.g. you already have signing guidance for users). To disable it, use the `shouldShowSignTxnToast` option.
+
+#### **`compactMode`**
+
+It offers a compact UI optimized for smaller screens, with a minimum resolution of 400x400 pixels.
 
 ## Methods
 

diff --git a/package.json b/package.json
@@ -1,13 +1,15 @@
 {
-  "version": "1.2.4",
+  "version": "1.3.0",
   "name": "@perawallet/connect",
   "description": "JavaScript SDK for integrating Pera Wallet to web applications.",
   "main": "dist/index.js",
   "scripts": {
     "dev": "./node_modules/.bin/rollup -c -w",
     "build": "npm run eslint && ./node_modules/.bin/rollup -c",
     "build:release": "./node_modules/.bin/rollup -c",
-    "eslint": "./node_modules/.bin/eslint --ext .jsx,.js,.tsx,.ts src/"
+    "eslint": "./node_modules/.bin/eslint --ext .jsx,.js,.tsx,.ts src/",
+    "prettify": "prettier --config ./.prettierrc.js --write \"src/**/*.{ts,tsx}\"",
+    "type-check:watch": "tsc --watch"
   },
   "author": "Pera Wallet",
   "license": "ISC",

diff --git a/src/PeraWalletConnect.ts b/src/PeraWalletConnect.ts
@@ -40,18 +40,21 @@ interface PeraWalletConnectOptions {
   bridge?: string;
   shouldShowSignTxnToast?: boolean;
   chainId?: AlgorandChainIDs;
+  compactMode?: boolean;
 }
 
 function generatePeraWalletConnectModalActions({
   isWebWalletAvailable,
   shouldDisplayNewBadge,
-  shouldUseSound
+  shouldUseSound,
+  compactMode
 }: PeraWalletModalConfig) {
   return {
     open: openPeraWalletConnectModal({
       isWebWalletAvailable,
       shouldDisplayNewBadge,
-      shouldUseSound
+      shouldUseSound,
+      compactMode
     }),
     close: () => removeModalWrapperFromDOM(PERA_WALLET_CONNECT_MODAL_ID)
   };
@@ -62,6 +65,7 @@ class PeraWalletConnect {
   connector: WalletConnect | null;
   shouldShowSignTxnToast: boolean;
   chainId?: AlgorandChainIDs;
+  compactMode?: boolean;
 
   constructor(options?: PeraWalletConnectOptions) {
     this.bridge = options?.bridge || "";
@@ -73,6 +77,7 @@ class PeraWalletConnect {
         : options.shouldShowSignTxnToast;
 
     this.chainId = options?.chainId;
+    this.compactMode = options?.compactMode || false;
   }
 
   get platform() {
@@ -114,7 +119,8 @@ class PeraWalletConnect {
           resolve,
           reject,
           webWalletURL,
-          chainId: this.chainId
+          chainId: this.chainId,
+          isCompactMode: this.compactMode
         });
 
         if (isWebWalletAvailable) {
@@ -128,7 +134,8 @@ class PeraWalletConnect {
           qrcodeModal: generatePeraWalletConnectModalActions({
             isWebWalletAvailable,
             shouldDisplayNewBadge,
-            shouldUseSound
+            shouldUseSound,
+            compactMode: this.compactMode
           })
         });
 
@@ -304,6 +311,7 @@ class PeraWalletConnect {
         signTxnRequestParams,
         webWalletURL,
         method: "SIGN_TXN",
+        isCompactMode: this.compactMode,
         resolve,
         reject
       })
@@ -383,6 +391,7 @@ class PeraWalletConnect {
         signer,
         chainId,
         webWalletURL,
+        isCompactMode: this.compactMode,
         resolve,
         reject
       })

diff --git a/src/modal/PeraWalletConnectModal.ts b/src/modal/PeraWalletConnectModal.ts
@@ -7,7 +7,7 @@ import {
 import styles from "./_pera-wallet-modal.scss";
 
 const peraWalletConnectModal = document.createElement("template");
-const peraWalletConnectModalClassNames = isMobile()
+let peraWalletConnectModalClassNames = isMobile()
   ? `${PERA_WALLET_MODAL_CLASSNAME} ${PERA_WALLET_MODAL_CLASSNAME}--mobile`
   : `${PERA_WALLET_MODAL_CLASSNAME} ${PERA_WALLET_MODAL_CLASSNAME}--desktop`;
 
@@ -21,6 +21,12 @@ export class PeraWalletConnectModal extends HTMLElement {
 
       styleSheet.textContent = styles;
 
+      const isCompactMode = this.getAttribute("compact-mode") === "true";
+
+      if (isCompactMode) {
+        peraWalletConnectModalClassNames = `${peraWalletConnectModalClassNames} ${PERA_WALLET_MODAL_CLASSNAME}--compact`;
+      }
+
       if (isSmallScreen() && isMobile()) {
         peraWalletConnectModal.innerHTML = `
         <div class="${peraWalletConnectModalClassNames}">
@@ -52,6 +58,8 @@ export class PeraWalletConnectModal extends HTMLElement {
           "is-web-wallet-avaliable"
         )}" should-display-new-badge="${this.getAttribute(
           "should-display-new-badge"
+        )}" compact-mode="${this.getAttribute(
+          "compact-mode"
         )}"></pera-wallet-modal-desktop-mode>
             </div>
           </div>

diff --git a/src/modal/_pera-wallet-modal.scss b/src/modal/_pera-wallet-modal.scss
@@ -3,6 +3,11 @@
 
 .pera-wallet-modal {
   --pera-wallet-modal-font-family: "Inter", sans-serif;
+  --pera-wallet-modal-compact-width: 380px;
+  --pera-wallet-modal-compact-height: 396px;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   position: fixed;
   top: 0;
@@ -55,6 +60,15 @@
     }
   }
 
+  &--compact:not(.pera-wallet-modal--mobile) {
+    .pera-wallet-modal__body {
+      width: var(--pera-wallet-modal-compact-width);
+      height: var(--pera-wallet-modal-compact-height);
+
+      padding: 0;
+    }
+  }
+
   * {
     box-sizing: border-box;
 

diff --git a/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts b/src/modal/mode/desktop/PeraWalletConnectModalDesktopMode.ts
@@ -92,7 +92,7 @@ const peraWalletConnectModalDesktopModeDefaultView = `
           <div class="pera-wallet-accordion-item__content">
             <div id="pera-wallet-connect-modal-connect-qr-code" class="pera-wallet-connect-qr-code-wrapper"></div>
 
-            <div>
+            <div class="pera-wallet-connect-modal-desktop-mode__download-pera-container">
               <p
                 class="pera-wallet-connect-modal-desktop-mode__download-pera-description">
                   Don’t have Pera Wallet app?
@@ -177,6 +177,18 @@ export class PeraWalletModalDesktopMode extends HTMLElement {
       this.shadowRoot.addEventListener("click", (event) => {
         this.handleAccordion(event as MouseEvent);
       });
+
+      const isCompactMode = this.getAttribute("compact-mode") === "true";
+
+      if (isCompactMode) {
+        const modalDesktopMode = this.shadowRoot.getElementById(
+          "pera-wallet-connect-modal-desktop-mode"
+        );
+
+        modalDesktopMode?.classList.add(
+          "pera-wallet-connect-modal-desktop-mode--compact"
+        );
+      }
     }
   }
 
@@ -272,9 +284,15 @@ export class PeraWalletModalDesktopMode extends HTMLElement {
   renderQRCode() {
     const URI = this.getAttribute("uri");
     const isWebWalletAvailable = this.getAttribute("is-web-wallet-avaliable");
+    const isCompactMode = this.getAttribute("compact-mode") === "true";
 
-    // eslint-disable-next-line no-magic-numbers
-    const size = isWebWalletAvailable === "false" ? 250 : 205;
+    /* eslint-disable no-magic-numbers */
+    let size = isWebWalletAvailable === "false" ? 250 : 205;
+
+    if (isCompactMode) {
+      size = 190;
+    }
+    /* eslint-enable no-magic-numbers */
 
     if (URI) {
       const qrCode = new QRCodeStyling({
@@ -289,7 +307,7 @@ export class PeraWalletModalDesktopMode extends HTMLElement {
         },
         imageOptions: {
           crossOrigin: "anonymous",
-          margin: 10
+          margin: 8
         },
         cornersSquareOptions: {type: "extra-rounded"},
         cornersDotOptions: {

diff --git a/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss b/src/modal/mode/desktop/_pera-wallet-connect-modal-desktop-mode.scss
@@ -9,6 +9,12 @@
     .pera-wallet-connect-modal-desktop-mode__default-view {
       display: block;
 
+      .pera-wallet-accordion-item--active {
+        .pera-wallet-accordion-item__content {
+          height: 364px;
+        }
+      }
+
       &--web-wallet-not-avaliable {
         .pera-wallet-accordion-item--web-wallet {
           display: none;
@@ -65,6 +71,111 @@
     }
   }
 
+  &--compact {
+    grid-template-columns: unset;
+    gap: unset;
+
+    .pera-wallet-connect-modal-desktop-mode__web-wallet {
+      padding: 28px 40px;
+
+      .pera-wallet-connect-modal-desktop-mode__web-wallet__logo-wrapper {
+        box-shadow: unset;
+      }
+
+      .pera-wallet-connect-modal-desktop-mode__web-wallet__description {
+        margin-bottom: 16px;
+      }
+
+      .pera-wallet-connect-modal-desktop-mode__web-wallet__launch-button {
+        width: 172px;
+        height: 40px;
+
+        margin: 0 auto;
+      }
+    }
+
+    .pera-wallet-connect-modal-desktop-mode__web-wallet-iframe {
+      height: 100%;
+    }
+
+    .pera-wallet-connect-modal-desktop-mode__default-view {
+      overflow: hidden;
+
+      border-radius: 24px;
+
+      .pera-wallet-accordion-item {
+        margin-bottom: 0;
+
+        border-radius: 0;
+
+        &:not(:last-child) {
+          border-bottom: 1px solid #e6e8ee;
+        }
+
+        #pera-wallet-iframe {
+          height: 100%;
+        }
+      }
+
+      .pera-wallet-accordion-toggle {
+        padding: 20px;
+
+        &__text,
+        &__content-with-label__text {
+          color: #626268;
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 24px;
+          letter-spacing: -0.09px;
+        }
+      }
+
+      .pera-wallet-accordion-toggle__bold-color {
+        font-weight: 600;
+
+        color: #1a1a1a;
+      }
+
+      .pera-wallet-accordion-item--active {
+        .pera-wallet-accordion-item__content {
+          height: 265px;
+        }
+      }
+
+      .pera-wallet-connect-modal-desktop-mode__download-pera-container {
+        display: flex;
+        justify-content: space-between;
+
+        margin-top: 14px;
+        padding: 0 20px;
+      }
+
+      .pera-wallet-connect-modal-desktop-mode__download-pera-description,
+      .pera-wallet-connect-modal-desktop-mode__download-pera-button {
+        margin: 0;
+      }
+
+      .pera-wallet-connect-modal-desktop-mode__download-pera-button {
+        font-weight: 500;
+      }
+
+      .pera-wallet-connect-qr-code-wrapper {
+        margin: 4px auto 0;
+        padding: 0;
+
+        box-shadow: unset;
+
+        svg {
+          padding: 8px;
+
+          box-shadow: 0px 20px 60px rgba(26, 35, 91, 0.15),
+            0px 4px 12px rgba(26, 35, 91, 0.05), 0px 1px 4px rgba(26, 35, 91, 0.06);
+          border-radius: 12px;
+        }
+      }
+    }
+  }
+
   &--select-account {
     width: 100%;
     height: 100%;

diff --git a/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss b/src/modal/mode/desktop/accordion/_pera-wallet-accordion.scss
@@ -42,8 +42,6 @@
     }
 
     .pera-wallet-accordion-item__content {
-      height: 364px;
-
       border-radius: 0 0 24px 24px;
 
       transition: height ease-in 0.2s;
@@ -83,7 +81,7 @@
 
   &__text,
   &__content-with-label__text {
-    color: #6a6a81;
+    color: #626268;
   }
 }
 
@@ -92,7 +90,7 @@
 }
 
 .pera-wallet-accordion-toggle__bold-color {
-  color: #3c3c49;
+  color: #1A1A1A;
 
   font-weight: 600;
 }
@@ -106,8 +104,8 @@
 .pera-wallet-accordion-toggle__label {
   padding: 4px 9px;
 
-  color: #00b19e;
-  background: rgba(0, 177, 158, 0.08);
+  color: #1C786C;
+  background: #E0FAEE;
 
   border-radius: 12px;