Update ui for scan qrcode of polkadot vault wallet

Koniverse · Mar 2, 2024 · c1d6cb3 · c1d6cb3
1 parent fca0879
commit c1d6cb3
Show file tree

Hide file tree

Showing 13 changed files with 269 additions and 23 deletions.
diff --git a/packages/core/src/views/connect/Sidebar.svelte b/packages/core/src/views/connect/Sidebar.svelte
@@ -64,7 +64,6 @@
   .icon-container {
     display: flex;
     height: fit-content;
-    width: 56px;
     min-width: 3.5rem;
     max-width: 100%;
   }

diff --git a/packages/demo/assets/index.ts b/packages/demo/assets/index.ts
@@ -1,6 +1,7 @@
 export { default as LogoHeader } from './logoHeader'
 export { default as SubWallet }  from './subwallet'
 export { default as Web3Onboard } from './web3Onboard'
+export { default as LogoSubWallet } from './logoSubWallet'
 
 // subIcon
 export { default as ethSubIcon } from './eth'

diff --git a/packages/demo/assets/logoSubWallet.ts b/packages/demo/assets/logoSubWallet.ts
diff --git a/packages/demo/src/web3-onboard.ts b/packages/demo/src/web3-onboard.ts
@@ -12,7 +12,7 @@ import polkadotVaultModule from '@subwallet-connect/polkadot-vault';
 import ledgerModule from '@subwallet-connect/ledger';
 import walletConnectModule from '@subwallet-connect/walletconnect';
 import {TransactionHandlerReturn} from "@subwallet-connect/core/dist/types";
-import { SubWallet } from "../assets";
+import { SubWallet, LogoSubWallet } from "../assets";
 
 // Example key • Replace with your infura key
 const INFURA_KEY = '302750fdd8644da3b50aa6daa0b89336'
@@ -203,6 +203,10 @@ export default init({
 
     icon: SubWallet,
 
+    logo: LogoSubWallet,
+
+
+
     description: 'Demo app for SubWalletConnect V2',
     // The url to a getting started guide for app
     gettingStartedGuide: 'http://mydapp.io/getting-started',

diff --git a/packages/polkadotVault/src/icon/error.ts b/packages/polkadotVault/src/icon/error.ts
@@ -0,0 +1,7 @@
+export default `
+<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="WarningCircle">
+<path id="Vector" d="M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1209 7.84638 17.2635 5.78216 15.7407 4.25932C14.2178 2.73648 12.1536 1.87913 10 1.875ZM9.375 6.25C9.375 6.08424 9.44085 5.92527 9.55806 5.80806C9.67527 5.69085 9.83424 5.625 10 5.625C10.1658 5.625 10.3247 5.69085 10.4419 5.80806C10.5592 5.92527 10.625 6.08424 10.625 6.25V10.625C10.625 10.7908 10.5592 10.9497 10.4419 11.0669C10.3247 11.1842 10.1658 11.25 10 11.25C9.83424 11.25 9.67527 11.1842 9.55806 11.0669C9.44085 10.9497 9.375 10.7908 9.375 10.625V6.25ZM10 14.375C9.81458 14.375 9.63333 14.32 9.47916 14.217C9.32499 14.114 9.20482 13.9676 9.13387 13.7963C9.06291 13.625 9.04434 13.4365 9.08052 13.2546C9.11669 13.0727 9.20598 12.9057 9.33709 12.7746C9.4682 12.6435 9.63525 12.5542 9.81711 12.518C9.99896 12.4818 10.1875 12.5004 10.3588 12.5714C10.5301 12.6423 10.6765 12.7625 10.7795 12.9167C10.8825 13.0708 10.9375 13.2521 10.9375 13.4375C10.9375 13.6861 10.8387 13.9246 10.6629 14.1004C10.4871 14.2762 10.2486 14.375 10 14.375Z" fill="#BF1616"/>
+</g>
+</svg>
+`
diff --git a/packages/polkadotVault/src/icon/index.ts b/packages/polkadotVault/src/icon/index.ts
@@ -2,3 +2,5 @@
 export { default as closeIcon } from './close.js';
 export { default as logoWallet } from  './logoWallet.js';
 export { default as imageSquareIcon } from './imageSquare.js';
+export { default as qrCodeIcon } from './qrCode.js';
+export { default as errorIcon } from './error.js';
diff --git a/packages/polkadotVault/src/icon/qrCode.ts b/packages/polkadotVault/src/icon/qrCode.ts
@@ -0,0 +1,12 @@
+export default `
+  <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.125 4.4375H11.375C12.307 4.4375 13.0625 5.19302 13.0625 6.125V11.375C13.0625 12.307 12.307 13.0625 11.375 13.0625H6.125C5.19302 13.0625 4.4375 12.307 4.4375 11.375V6.125C4.4375 5.19302 5.19302 4.4375 6.125 4.4375Z" fill="white" stroke="white" stroke-width="0.125"/>
+  <path d="M11.375 14.875H6.125C5.1585 14.875 4.375 15.6585 4.375 16.625V21.875C4.375 22.8415 5.1585 23.625 6.125 23.625H11.375C12.3415 23.625 13.125 22.8415 13.125 21.875V16.625C13.125 15.6585 12.3415 14.875 11.375 14.875Z" fill="white"/>
+  <path d="M21.875 4.375H16.625C15.6585 4.375 14.875 5.1585 14.875 6.125V11.375C14.875 12.3415 15.6585 13.125 16.625 13.125H21.875C22.8415 13.125 23.625 12.3415 23.625 11.375V6.125C23.625 5.1585 22.8415 4.375 21.875 4.375Z" fill="white"/>
+  <path d="M15.75 20.125C15.9821 20.125 16.2046 20.0328 16.3687 19.8687C16.5328 19.7046 16.625 19.4821 16.625 19.25V15.75C16.625 15.5179 16.5328 15.2954 16.3687 15.1313C16.2046 14.9672 15.9821 14.875 15.75 14.875C15.5179 14.875 15.2954 14.9672 15.1313 15.1313C14.9672 15.2954 14.875 15.5179 14.875 15.75V19.25C14.875 19.4821 14.9672 19.7046 15.1313 19.8687C15.2954 20.0328 15.5179 20.125 15.75 20.125Z" fill="white"/>
+  <path d="M22.75 16.625H20.125V15.75C20.125 15.5179 20.0328 15.2954 19.8687 15.1313C19.7046 14.9672 19.4821 14.875 19.25 14.875C19.0179 14.875 18.7954 14.9672 18.6313 15.1313C18.4672 15.2954 18.375 15.5179 18.375 15.75V21.875H15.75C15.5179 21.875 15.2954 21.9672 15.1313 22.1313C14.9672 22.2954 14.875 22.5179 14.875 22.75C14.875 22.9821 14.9672 23.2046 15.1313 23.3687C15.2954 23.5328 15.5179 23.625 15.75 23.625H19.25C19.4821 23.625 19.7046 23.5328 19.8687 23.3687C20.0328 23.2046 20.125 22.9821 20.125 22.75V18.375H22.75C22.9821 18.375 23.2046 18.2828 23.3687 18.1187C23.5328 17.9546 23.625 17.7321 23.625 17.5C23.625 17.2679 23.5328 17.0454 23.3687 16.8813C23.2046 16.7172 22.9821 16.625 22.75 16.625Z" fill="white"/>
+  <path d="M22.75 20.125C22.5179 20.125 22.2954 20.2172 22.1313 20.3813C21.9672 20.5454 21.875 20.7679 21.875 21V22.75C21.875 22.9821 21.9672 23.2046 22.1313 23.3687C22.2954 23.5328 22.5179 23.625 22.75 23.625C22.9821 23.625 23.2046 23.5328 23.3687 23.3687C23.5328 23.2046 23.625 22.9821 23.625 22.75V21C23.625 20.7679 23.5328 20.5454 23.3687 20.3813C23.2046 20.2172 22.9821 20.125 22.75 20.125Z" fill="white"/>
+  </svg>
+
+
+`
diff --git a/packages/polkadotVault/src/views/Modal.svelte b/packages/polkadotVault/src/views/Modal.svelte
@@ -98,8 +98,7 @@
     animation: moveUp .5s ease-in-out;
   }
 
-  .modal.modal-notify .modal-footer{
-      padding: var(--spacing-4);
+  .modal.modal-notify{
   }
 
   .modal.modal-notify .modal-content {

diff --git a/packages/polkadotVault/src/views/ModalConnect.svelte b/packages/polkadotVault/src/views/ModalConnect.svelte
@@ -105,9 +105,7 @@
     }
 
     :global(.button-neutral-solid) {
-        width: 100%;
         border-radius: 8px;
-        height: 52px;
         margin-top: 0 !important;
         background: var(--gray-800);
         padding: var(--spacing-4);
@@ -116,8 +114,6 @@
     }
 
     :global(.button-neutral-solid-b) {
-        width: 100%;
-        height: 52px;
         padding: var(--spacing-4);
         margin-top: 0 !important;
         background: var(--onboard-gray-100, var(--gray-100));

diff --git a/packages/polkadotVault/src/views/QrCodeModal.svelte b/packages/polkadotVault/src/views/QrCodeModal.svelte
@@ -10,9 +10,10 @@
     import { payloadUri$ } from '../streams.js';
     import type { PayloadParams } from '../types.js';
     import { CMD } from '../constants.js';
+    import { qrCodeIcon } from '../icon/index.js';
 
 
-     let uri : Uint8Array;
+    let uri : Uint8Array;
     export let onEnable: () => void
     export let onDismiss: () => void
     let node : any;
@@ -57,7 +58,7 @@
         font-family: var(--onboard-font-family-normal, var(--font-family-normal));
         font-size: var(--onboard-font-size-5, var(--font-size-5));
         line-height: 24px;
-        padding: 16px 34px;
+        padding: 16px 16px 0 16px;
         text-align: center;
     }
 
@@ -94,6 +95,8 @@
     button{
         display: flex;
         justify-content: center;
+        gap: var(--spacing-5);
+        padding: var(--spacing-4);
     }
 
     .container {
@@ -152,7 +155,7 @@
     {#if (valueHash)}
         <Modal close={onDismiss} maskClose={true}>
             <div class="title" slot="title">
-                Confirm
+                    CONFIRM
             </div>
             <div class="content" slot="content">
                 <div class="container flex items-center qrCode">
@@ -172,8 +175,8 @@
             </div>
 
             <div class="button-action items-center" slot="footer">
-                <button class="button-neutral-confirm" on:click={onEnable}>
-                    Scan Qrcode
+                <button class="button-neutral-confirm button-icon" on:click={onEnable}>
+                    {@html qrCodeIcon} Approve
                 </button>
 
                 <button class="right button-neutral-solid" on:click={onDismiss}>

diff --git a/packages/polkadotVault/src/views/ScanQRCode.svelte b/packages/polkadotVault/src/views/ScanQRCode.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import jsQR from 'jsqr';
-  import { imageSquareIcon } from '../icon/index.js';
+  import { imageSquareIcon, errorIcon } from '../icon/index.js';
+
 
   type optionsType = {
     // eslint-disable-next-line @typescript-eslint/ban-types
@@ -26,6 +27,17 @@
   });
 
   function requestCamera() {
+    navigator.mediaDevices.enumerateDevices()
+      .then(devices => {
+        // Lọc ra các thiết bị là camera
+        const cameras = devices.filter(device => device.kind === 'videoinput');
+
+        // Hiển thị thông tin về số lượng và tên của mỗi camera
+        console.log(`Số lượng camera: ${cameras.length}`);
+        cameras.forEach((camera, index) => {
+          console.log(`Camera ${index + 1}: ${camera.label}`);
+        });
+      })
     navigator.mediaDevices
       .getUserMedia({
         audio: false,
@@ -118,15 +130,36 @@
 
 <canvas bind:this={canvas} />
 <!-- svelte-ignore a11y-media-has-caption -->
-<video on:canplay={onCanPlay}  class:cant-scan={!canScan} bind:this={video} />
+<div class="qr-scan-container" class:qr-scan-error={!canScan}>
+    <div class="qr-scan-left-part" >
+        <div class="qr-scan-top-left-conner"/>
+        <div class="qr-scan-bottom-left-conner"/>
+    </div>
+    <video on:canplay={onCanPlay}  class:cant-scan={!canScan} bind:this={video} />
+    <div class="qr-scan-right-part" >
+        <div class="qr-scan-top-right-conner"/>
+        <div class="qr-scan-bottom-right-conner"/>
+    </div>
+    {#if (!canScan)}
+        <div class="qr-scan-error-notify">
+            <div class="qr-scan-error-icon">
+                {@html errorIcon}
+            </div>
+            <div class="qr-scan-error-label">
+                Can’t find camera
+            </div>
+        </div>
+    {/if}
+</div>
+
 <div class='action-footer'>
     <button class="button-neutral-solid" on:click={onBack}>
         {isBack ? 'BACK' : 'Cancel'}
     </button>
 
     {#if enableQRCodeReaderButton}
-        <label for="upload-qrcode-image" class="button-neutral-confirm">
-            {@html imageSquareIcon} Upload
+        <label for="upload-qrcode-image" class="button-neutral-solid label-upload-img">
+            {@html imageSquareIcon} Upload from photos
         </label>
         <input
                 class="image-qrcode-input"
@@ -171,9 +204,6 @@
         font-weight: 600;
         padding: 16px;
     }
-    .button-neutral-solid {
-        height: 60px;
-    }
 
     .action-footer{
         height: 100px;
@@ -186,4 +216,170 @@
     .cant-scan {
         background-color: #1a1a1a;
     }
+
+    .label-upload-img{
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-5);
+    }
+
+    .qr-scan-container {
+        position: relative;
+        display: flex;
+    }
+
+    .qr-scan-left-part {
+        background-color: gray;
+        flex: 1;
+        position: relative;
+        z-index: 1
+    }
+
+    .qr-scan-top-left-conner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        overflow: hidden;
+        right: -40px;
+        top: 0
+
+    }
+
+    .qr-scan-top-left-conner::before{
+        content: "";
+        position: absolute;
+        top: 0;
+        right: -4px;
+        height: 40px;
+        width: 40px;
+        border-top-left-radius: 20px;
+        border-style: solid;
+        border-color: #004BFF;
+        border-width: 0;
+        border-left-width: 3px;
+        border-top-width: 3px;
+        background: transparent;
+        box-shadow: -20px 0 0 0 rgba(12, 12, 12, 0.95);
+   }
+
+
+     .qr-scan-bottom-left-conner {
+         width: 40px;
+         height: 40px;
+         position: absolute;
+         overflow: hidden;
+         right: -40px;
+         bottom: 0;
+     }
+
+    .qr-scan-bottom-left-conner::before {
+        content: "";
+        position: absolute;
+        top: -4px;
+        right: -4px;
+        height: 40px;
+        width: 40px;
+        border-bottom-left-radius: 20px;
+        border-style: solid;
+        border-color: #004BFF;
+        border-width: 0;
+        border-left-width: 3px;
+        border-bottom-width: 3px;
+        background: transparent;
+        box-shadow: -20px 0 0 0 rgba(12, 12, 12, 0.95);
+   }
+
+
+    .qr-scan-right-part {
+        background-color: rgba(12, 12, 12, 0.95);
+        flex: 1;
+        position: relative;
+        z-index: 1;
+    }
+
+    .qr-scan-top-right-conner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        overflow: hidden;
+        left: -40px;
+        top: 0;
+    }
+
+    .qr-scan-top-right-conner::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 1px;
+        height: 40px;
+        width: 40px;
+        border-top-right-radius: 20px;
+        border-style: solid;
+        border-color: #004BFF;
+        border-width: 0;
+        border-right-width: 3px;
+        border-top-width: 3px;
+        background: transparent;
+        box-shadow: 20px 0 0 0 rgba(12, 12, 12, 0.95);
+      }
+
+
+    .qr-scan-bottom-right-conner {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        overflow: hidden;
+        left: -40px;
+        bottom: 0;
+    }
+
+    .qr-scan-bottom-right-conner::before {
+      content: "";
+      position: absolute;
+      top: -4px;
+      right: 1px;
+      height: 40px;
+      width: 40px;
+      border-bottom-right-radius: 20px;
+      border-style: solid;
+      border-color: #004BFF;
+      border-width: 0;
+      border-right-width: 3px;
+      border-bottom-width: 3px;
+      background: transparent;
+      box-shadow: 20px 0 0 0 rgba(12, 12, 12, 0.95);
+   }
+
+
+    .qr-scan-error .qr-scan-top-left-conner::before,
+    .qr-scan-error .qr-scan-bottom-left-conner::before,
+    .qr-scan-error .qr-scan-top-right-conner::before,
+    .qr-scan-error .qr-scan-bottom-right-conner::before {
+        border-color: #bf1616;
+    }
+
+    .qr-scan-error-notify {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        background-color: rgba(0, 0, 0, 0.75);
+        border-radius: 8px;
+        position: absolute;
+        top: 45%;
+        left: 18%;
+        border-width: 2px;
+        border-style: solid;
+        border-color: #bf1616;
+        padding: 8px ;
+    }
+
+    .qr-scan-error-icon {
+        width: 20px;
+        height: 20px;
+        color: #bf1616;
+    }
+
+
 </style>