Update connect ledger layout

Koniverse · Feb 16, 2024 · 5ccb177 · 5ccb177
1 parent 2841b43
commit 5ccb177
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 53 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -398,13 +398,13 @@ function mountApp(theme: Theme, disableFontDownload: boolean) {
           --primary-1: #2F80ED;
           --primary-2: #004BFF;
           --primary-3: #2565e6;
-          --primary-100: #eff1fc;
-          --primary-200: #d0d4f7;
-          --primary-300: #b1b8f2;
-          --primary-400: #929bed;
-          --primary-500: #6370e5;
-          --primary-600: #454ea0;
-          --primary-700: #323873;
+          --primary-100: #a0c7fa;
+          --primary-200: #76aaf7;
+          --primary-300: #4e8af2;
+          --primary-400: #2565e6;
+          --primary-500: #004BFF;
+          --primary-600: #0031a6;
+          --primary-700: #00174d;
           --gray-100: #ebebed;
           --gray-200: #c2c4c9;
           --gray-300: #999ca5;

diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte
@@ -22,14 +22,14 @@
 
   onMount(()=>{
 
-    if(selectedWallet.label === 'Ledger' && selectedWallet.type === 'substrate'){
-      const isShowedModal = JSON.parse(
-        getLocalStore(STORAGE_KEYS.CONNECT_HD_WALLET_MODAL)
-      )
-      if(!isShowedModal){
-        notifyAboutConnectHDWallet = true;
-      }
-    }
+    // if(selectedWallet.label === 'Ledger' && selectedWallet.type === 'substrate'){
+    //   const isShowedModal = JSON.parse(
+    //     getLocalStore(STORAGE_KEYS.CONNECT_HD_WALLET_MODAL)
+    //   )
+    //   if(!isShowedModal){
+    //     notifyAboutConnectHDWallet = true;
+    //   }
+    // }
   })
   const showNotifyConnectHDWalletModal = () => {
     setLocalStore(

diff --git a/packages/hw-common/src/elements/TableHeader.svelte b/packages/hw-common/src/elements/TableHeader.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import Spinner from './Spinner.svelte'
-
   export let scanAccounts: () => Promise<void>
+  export let getMoreAccounts: () => Promise<void>
   export let loadingAccounts: boolean
   export let showEmptyAddresses: boolean
   export let errorFromScan: string
+
 </script>
 
 <style>
@@ -32,15 +33,41 @@
     width: 8rem;
   }
 
+
+  .button-group-action {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+
   .scan-accounts-btn {
-    background: var(--account-select-gray-500, var(--action-color));
-    color: var(--account-select-primary-100, inherit);
+    background: var(
+            --account-select-primary-500,
+            var(--onboard-primary-500, var(--primary-500))
+    );
+    color: var(--w3o-text-color, inherit);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
   }
 
+  .more-btn:disabled {
+    background: var(
+            --account-select-gray-800,
+            var(--onboard-gray-800, var(--gray-800))
+    );
+    cursor: default;
+  }
+
+  .more-btn {
+    background: var(
+            --account-select-primary-500,
+            var(--onboard-primary-500, var(--primary-500))
+    );
+    cursor: pointer;
+  }
+
   input:hover {
     border-color: var(
       --account-select-primary-500,
@@ -220,17 +247,29 @@
   {#if errorFromScan}
     <span class="error-msg">{errorFromScan}</span>
   {/if}
-  <button
-    class="scan-accounts-btn"
-    id="scan-accounts"
-    on:click={async () => await scanAccounts()}
-  >
-    {#if loadingAccounts}
-      Scanning...
-      <Spinner size="1.5rem" />
-    {/if}
-    {#if !loadingAccounts}
-      Scan Accounts
-    {/if}
-  </button>
+  <div class="button-group-action">
+    <button
+            class="scan-accounts-btn"
+            id="scan-accounts"
+            on:click={async () => await scanAccounts()}
+    >
+      {#if loadingAccounts}
+        Scanning...
+        <Spinner size="1.5rem" />
+      {/if}
+      {#if !loadingAccounts}
+        Scan Accounts
+      {/if}
+    </button>
+
+    <button
+            class="more-btn"
+            id="more-accounts"
+            disabled={loadingAccounts}
+            on:click={getMoreAccounts}
+    >
+      Load More
+    </button>
+  </div>
+
 </div>
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte
@@ -224,21 +224,7 @@
     cursor: pointer;
   }
 
-  .more-btn:disabled {
-    background: var(
-            --account-select-gray-800,
-            var(--onboard-gray-800, var(--gray-800))
-    );
-    cursor: default;
-  }
 
-  .more-btn {
-    background: var(
-            --account-select-primary-500,
-            var(--onboard-primary-500, var(--primary-500))
-    );
-    cursor: pointer;
-  }
 
   .dismiss-action {
     color: var(
@@ -551,6 +537,7 @@
       <div class="w-100 table-container">
         <TableHeader
           scanAccounts={scanAccountsWrap}
+          getMoreAccounts={getMoreAccount}
           {loadingAccounts}
           {errorFromScan}
           bind:showEmptyAddresses
@@ -588,14 +575,6 @@
           >
             Dismiss
           </div>
-          <button
-              class="more-btn"
-              id="more-accounts"
-              disabled={loadingAccounts}
-              on:click={getMoreAccount}
-          >
-            More Account
-          </button>
         </div>
 
         <button