update ui for Modal and notify for connect HD Wallets

Koniverse · Feb 3, 2024 · 7cf98ed · 7cf98ed
1 parent 6851ab7
commit 7cf98ed
Show file tree

Hide file tree

Showing 18 changed files with 319 additions and 67 deletions.
diff --git a/.github/workflows/sw-build.yml b/.github/workflows/sw-build.yml
@@ -38,6 +38,6 @@ jobs:
             accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
             projectName: 'w3o'
             gitHubToken: ${{ secrets.GH_AUTOMATION_TOKEN }}
-            branch: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.number) || github.ref_name }}
+            branch: 'master'
             directory: './packages/demo/build'
             wranglerVersion: '3'
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -32,7 +32,8 @@ export const APP_INITIAL_STATE: AppState = {
 
 export const STORAGE_KEYS = {
   TERMS_AGREEMENT: 'onboard.js:agreement',
-  LAST_CONNECTED_WALLET: 'onboard.js:last_connected_wallet'
+  LAST_CONNECTED_WALLET: 'onboard.js:last_connected_wallet',
+  CONNECT_HD_WALLET_MODAL : 'onboard.js:connect_hd_wallet_modal'
 }
 
 export const MOBILE_WINDOW_WIDTH = 768

diff --git a/packages/core/src/i18n/en.json b/packages/core/src/i18n/en.json
@@ -89,6 +89,12 @@
       },
       "sign": "Sign",
       "cancel": "Cancel"
+    },
+    "confirmConnectHDWallet": {
+      "heading": "Connect your {wallet}",
+      "subHeading": "asdasdgasgduyasgdygaysgdyuagsydguyagd auysdgyausgdyagsydug",
+      "description": "All connected wallets will be disconnected immediately. If you want to disconnect some accounts, please go to the corresponding \nwallet app to disable.",
+      "confirm": "Confirm"
     }
   },
   "accountCenter": {

diff --git a/packages/core/src/views/account-center/AccountCenterPanel.svelte b/packages/core/src/views/account-center/AccountCenterPanel.svelte
@@ -376,7 +376,7 @@
       <!-- connected accounts -->
       <div class="p5">
         <div class="wallets">
-          {#each $wallets$ as wallet, i (wallet.label, wallet.type)}
+          {#each $wallets$ as wallet, i (`${wallet.label}-${wallet.type}`)}
             <WalletRow
               bind:hideMenu={hideWalletRowMenu}
               {wallet}

diff --git a/packages/core/src/views/connect/ConnectHDWalletModal.svelte b/packages/core/src/views/connect/ConnectHDWalletModal.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n'
+  import { Modal } from '../shared'
+  import en from '../../i18n/en.json'
+  import warningIcon from '../../icons/warning.js'
+
+  export let wallet : string
+  export let onConfirm: () => void
+</script>
+
+<style>
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+        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;
+        text-align: center;
+        max-width: 390px;
+    }
+
+    .content-description, .content-subHeading {
+        padding: 0 var(--spacing-4);
+    }
+
+    .content-subHeading {
+        color: var(--danger-600);
+        font-weight: 600;
+    }
+
+    .content-description {
+        font-size: var(--font-size-6);
+        color: rgba(255, 255, 255, 0.45);
+        font-weight: 500;
+    }
+
+
+    button {
+        margin-top: 1.5rem;
+        width: 50%;
+        font-weight: 600;
+    }
+
+    .title {
+        width: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .right {
+        margin-left: 0.75rem;
+    }
+
+    .width-100 {
+        width: 100%;
+    }
+</style>
+
+<Modal close={() => {}} maskClose={true}>
+  <span class="title" slot="title">
+    {$_('modals.confirmConnectHDWallet.heading', {
+        default: en.modals.confirmConnectHDWallet.heading,
+        values: { wallet }
+    })}
+  </span>
+    <div class="content width-100" slot="content">
+    <span class="content-subHeading width-100">
+      {$_('modals.confirmConnectHDWallet.subHeading', {
+          default: en.modals.confirmConnectHDWallet.subHeading
+      })}
+    </span>
+        <span class="content-description width-100">
+      {$_('modals.confirmConnectHDWallet.description', {
+          default: en.modals.confirmConnectHDWallet.description
+      })}
+    </span>
+    </div>
+
+    <div class="flex justify-between items-center" slot="footer">
+        <button class="right button-neutral-danger width-100" on:click={onConfirm}
+        >{$_('modals.confirmConnectHDWallet.confirm', {
+            default: en.modals.confirmConnectHDWallet.confirm
+        })}</button
+        >
+    </div>
+</Modal>
diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte
@@ -6,12 +6,41 @@
   import en from '../../i18n/en.json'
   import { shareReplay, startWith } from 'rxjs'
   import { state } from '../../store/index.js'
+  import ConnectHDWalletModal from './ConnectHDWalletModal.svelte';
+  import { onMount } from 'svelte';
+  import { getLocalStore, setLocalStore } from '../../utils.js';
+  import { STORAGE_KEYS } from '../../constants.js';
+  import {connectWallet$} from "../../streams";
 
   export let selectedWallet: WalletState
 
   const appMetadata$ = state
     .select('appMetadata')
     .pipe(startWith(state.get().appMetadata), shareReplay(1))
+
+   let notifyAboutConnectHDWallet = false;
+
+  onMount(()=>{
+
+    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(
+      STORAGE_KEYS.CONNECT_HD_WALLET_MODAL,
+      JSON.stringify(notifyAboutConnectHDWallet)
+    )
+    notifyAboutConnectHDWallet = false;
+    setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
+  }
+
+
 </script>
 
 <style>
@@ -60,7 +89,12 @@
         }
     }
 </style>
-
+{#if notifyAboutConnectHDWallet}
+    <ConnectHDWalletModal
+            wallet={selectedWallet.label}
+            onConfirm={() => showNotifyConnectHDWalletModal()}
+    />
+{/if}
 <div class="container">
   <div class="connecting-container flex justify-between items-center">
     <div class="flex items-center">

diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
@@ -262,9 +262,13 @@
 
       // canceled previous request
       if (!address || address.length === 0) {
-        return
+        return;
       }
 
+      const addressFilter = address.filter((a) => {
+        return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x')
+      })
+
       // store last connected wallet
       if (
         state.get().connect.autoConnectLastWallet ||
@@ -310,7 +314,7 @@
           if (sdk) {
             try {
               sdk.subscribe({
-                id: address[0],
+                id: addressFilter[0],
                 chainId: chain,
                 type: 'account'
               })
@@ -322,7 +326,7 @@
       }
 
       const update: Pick<WalletState, 'accounts' | 'chains' | 'signer'> = {
-        accounts: address.map((address) =>
+        accounts: addressFilter.map((address) =>
                 ({ address, ens: null, uns: null, balance: null })),
         chains: [{ namespace: type, id: chain }],
         signer : signer
@@ -439,8 +443,16 @@
           })
       )
     }
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
 
+    if(selectedWallet.label === 'Ledger' && selectedWallet.type === 'substrate'){
+      const isShowedModal = JSON.parse(
+              getLocalStore(STORAGE_KEYS.CONNECT_HD_WALLET_MODAL)
+      )
+      if(!isShowedModal){
+        return;
+      }
+    }
+    setTimeout(() => connectWallet$.next({ inProgress: false }), 1500)
   }
 
 

diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte
@@ -17,6 +17,7 @@
   import { onDestroy, onMount } from 'svelte'
   import { configuration } from '../../configuration.js'
   import CloseButton from './CloseButton.svelte';
+  import { MOBILE_WINDOW_WIDTH } from '../../constants.js';
 
   const connectContainerEl = !!configuration.containerElements.connectModal
 
@@ -37,6 +38,8 @@
   export let close: () => void
   export let maskClose = false ;
 
+  let windowWidth: number
+
 </script>
 
 <style>
@@ -89,6 +92,12 @@
     flex-direction: column;
   }
 
+  .modal.mobile {
+    width: 100vw;
+    overflow-y: hidden;
+    animation: moveUp .5s ease-in-out;
+  }
+
   .modal.modal-notify .modal-footer{
       padding: var(--spacing-4);
   }
@@ -142,8 +151,30 @@
     }
   }
 
+  @keyframes moveUp {
+    0%{
+        transform: translate3d(0, 100%, 0);
+        transform-origin: 0 0;
+        opacity: 0;
+      }
+    90% {
+      transform: translate3d(0, -1%, 0);
+      transform-origin: 0 0;
+      opacity: 1
+    }
+
+    100% {
+      transform: translate3d(0, 0, 0);
+      transform-origin: 0 0;
+      opacity: 1
+    }
+  }
+
 </style>
 
+
+<svelte:window bind:innerWidth={windowWidth} />
+
 <section class:fixed={!connectContainerEl} transition:fade>
   <div
     on:click={close}
@@ -165,7 +196,10 @@
 
           style={`${connectContainerEl ? 'max-width: 100%;' : ''}`}
         >
-          <div class="modal relative" class:modal-notify={maskClose}>
+          <div class="modal relative"
+               class:modal-notify={maskClose}
+               class:mobile={windowWidth <= MOBILE_WINDOW_WIDTH}
+          >
             <div class="modal-title"
                 class:title-active = {maskClose}
             >

diff --git a/packages/core/src/views/shared/NetworkSelector.svelte b/packages/core/src/views/shared/NetworkSelector.svelte
@@ -32,6 +32,7 @@
     resizeSelect()
   }
 
+
   async function handleSelect() {
     const selectedChain = selectElement.selectedOptions[0].value
 
@@ -122,6 +123,7 @@
       class={`flex justify-center items-center pointer ${parentCSSId}`}
       bind:this={selectElement}
       value={wallet.chains[0].id}
+      disabled={ wallet.label === 'Ledger' && wallet.type === 'substrate' }
       on:change={handleSelect}
       style={`
         color: var(${colorVar},

diff --git a/packages/demo/src/components/Layout.tsx b/packages/demo/src/components/Layout.tsx
@@ -31,7 +31,7 @@ function Layout (): React.ReactElement<null> {
 
   useEffect(() => {
     changeAccountCenter({
-      position: 'topLeft',
+      position: 'bottomLeft',
       expanded: true,
       minimal: false
     })

diff --git a/packages/hw-common/src/account-select.ts b/packages/hw-common/src/account-select.ts
@@ -63,7 +63,15 @@ const mountAccountSelect = (
         --gray-300: #999ca5;
         --gray-500: #33394b;
         --gray-700: #1a1d26;
+        --gray-800: #1A1A1A;
         --danger-500: #ff4f4f;
+        --success-100: #d1fae3;
+        --success-200: #baf7d5;
+        --success-300: #a4f4c6;
+        --success-400: #8df2b8;
+        --success-500: #4CEAAC;
+        --success-600: #18ce66;
+        --success-700: #129b4d;
 
         /* FONTS */
         --font-family-normal: var(--w3o-font-family, Inter, sans-serif);

diff --git a/packages/hw-common/src/elements/AddressTable.svelte b/packages/hw-common/src/elements/AddressTable.svelte
@@ -3,15 +3,28 @@
   import type { Account, AccountsList } from '../types.js'
 
   export let accountsListObject: AccountsList | undefined
-  export let accountSelected: Account | undefined = undefined
+
+  export let handleAddAccount : ( length: number ) => void;
+  export let lengthAccountSelectedDefault : number
+  export let accountSelected: Account[] = []
   export let showEmptyAddresses: boolean
 
   $: accounts = showEmptyAddresses
     ? accountsListObject && accountsListObject.all
     : accountsListObject && accountsListObject.filtered
 
+  $: accountsSelectedLength = lengthAccountSelectedDefault
   const handleSelectedRow = (accountClicked: Account) => {
-    accountSelected = accountClicked
+    const accountExits = accountSelected.findIndex(
+            ({ address }) => address === accountClicked.address);
+    if(accountExits >= 0){
+      accountSelected.splice(accountExits, 1);
+    }else{
+      accountSelected.push(accountClicked)
+    }
+
+    accountsSelectedLength = accountSelected.length;
+    handleAddAccount(accountSelected.length)
   }
 </script>
 
@@ -121,8 +134,9 @@
         {#each accounts as account}
           <tr
             class="pointer"
-            class:selected-row={accountSelected &&
-              accountSelected.address === account.address}
+            class:selected-row={accountsSelectedLength > 0 &&
+              !!accountSelected
+              .find(({ address }) => address === account.address ) }
             on:click={() => handleSelectedRow(account)}
           >
             <td style="font-family:'Courier New', Courier, monospace;"