refactor: Fix Login and onboarding improvements (#7779)

* refactor: login WIP * fix: selected wallet id * mmm, some improvements and fixes * fixes and improvements * fixes and clean up --------- Co-authored-by: marc2332 <[email protected]>
iotaledger · Dec 19, 2023 · a758ef1 · a758ef1
1 parent f7cfffb
commit a758ef1
Show file tree

Hide file tree

Showing 88 changed files with 417 additions and 362 deletions.
diff --git a/packages/desktop/components/AccountSummary.svelte b/packages/desktop/components/AccountSummary.svelte
@@ -4,11 +4,11 @@
     import { TextType } from '@ui/enums'
 
     import { localize } from '@core/i18n'
-    import { nodeInfo } from '@core/network'
+    import { nodeInfoNetworkName } from '@core/network'
     import { selectedWalletAssets } from '@core/wallet'
     import { activeProfile } from '@core/profile'
 
-    $: fomattedNetworkName = $nodeInfo?.protocol.networkName
+    $: fomattedNetworkName = $nodeInfoNetworkName
         .split(' ')
         .map((word) => word[0].toUpperCase() + word.substring(1))
         .join(' ')

diff --git a/packages/desktop/components/AccountSwitcher.svelte b/packages/desktop/components/AccountSwitcher.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AccountLabel, Icon, Modal } from '@ui'
+    import { WalletLabel, Icon, Modal } from '@ui'
     import { WalletSwitcherModal } from '@components'
     import { selectedWallet } from '@core/wallet/stores'
     import { Icon as IconEnum } from '@auxiliary/icon'
@@ -19,7 +19,7 @@
 <svelte:window on:click={onOutsideClick} />
 <account-switcher>
     <button type="button" on:click={onButtonClick} class="flex flex-row justify-center items-center space-x-2">
-        <AccountLabel account={$selectedWallet} />
+        <WalletLabel wallet={$selectedWallet} />
         <icon-container class:rotate={isModalOpened}>
             <Icon height="18" width="18" icon={IconEnum.ChevronDown} classes="text-gray-800 dark:text-white" />
         </icon-container>

diff --git a/packages/desktop/components/modals/WalletActionsMenu.svelte b/packages/desktop/components/modals/WalletActionsMenu.svelte
@@ -20,7 +20,7 @@
      // $selectedWallet?.id === $activeWallets?.length - 1 && $visibleActiveWallets?.length > 1
 
     function onCustomiseAccountClick(): void {
-        openPopup({ id: PopupId.ManageAccount })
+        openPopup({ id: PopupId.ManageWallet })
         modal?.close()
     }
 

diff --git a/packages/desktop/components/popups/AddNodePopup.svelte b/packages/desktop/components/popups/AddNodePopup.svelte
@@ -5,7 +5,7 @@
     import { showAppNotification } from '@auxiliary/notification'
     import { closePopup } from '@auxiliary/popup'
     import { Platform } from '@core/app'
-    import { activeAccounts, activeProfile } from '@core/profile'
+    import { activeWallets, activeProfile } from '@core/profile'
     import { registerProposalsForAccounts } from '@contexts/governance'
 
     export let node: INode = structuredClone(EMPTY_NODE)
@@ -33,7 +33,7 @@
             }
 
             if (Platform.isFeatureFlagEnabled('governance')) {
-                await registerProposalsForAccounts({ node }, $activeAccounts)
+                await registerProposalsForAccounts({ node }, $activeWallets)
             }
 
             onSuccess()

diff --git a/packages/desktop/components/popups/AddProposalPopup.svelte b/packages/desktop/components/popups/AddProposalPopup.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { showAppNotification } from '@auxiliary/notification/actions'
     import { closePopup, openPopup, PopupId } from '@auxiliary/popup'
-    import { registerProposalsForAccounts, registeredProposalsForSelectedWallet } from '@contexts/governance'
+    import { registerProposalsForWallets, registeredProposalsForSelectedWallet } from '@contexts/governance'
     import { selectedWallet } from '@core/wallet'
     import { handleError } from '@core/error/handlers/handleError'
     import { localize } from '@core/i18n'
-    import { activeAccounts, updateActiveAccountPersistedData } from '@core/profile'
+    import { activeWallets, updateActiveWalletPersistedData } from '@core/profile'
     import { truncateString } from '@core/utils/string'
     import type { Auth } from '@iota/sdk/out/types'
     import { Button, Checkbox, NodeInput, Text, TextInput, TextType } from 'shared/components'
@@ -21,7 +21,7 @@
     let nodeInputError: string
     let isBusy = false
     let isRegisteringAllProposals = false
-    let isAddingForAllAccounts = false
+    let isAddingForAllWallets = false
 
     $: isEditMode = !!initialEventId && !!initialNodeUrl
     $: disabled = isBusy || !nodeUrl || (!isRegisteringAllProposals && !eventId)
@@ -35,11 +35,11 @@
         try {
             isBusy = true
             await Promise.all([
-                !isRegisteringAllProposals && validateEventId(!isAddingForAllAccounts && !isEditMode),
+                !isRegisteringAllProposals && validateEventId(!isAddingForAllWallets && !isEditMode),
                 nodeInput?.validate(),
             ])
             await registerParticipationWrapper()
-            updateActiveAccountPersistedData($selectedWallet.id, {
+            updateActiveWalletPersistedData($selectedWallet.id, {
                 removedProposalIds: $selectedWallet.removedProposalIds?.filter((id) => id !== inputtedEventId),
             })
             isBusy = false
@@ -82,8 +82,8 @@
             node: { url: nodeUrl, auth },
             eventsToRegister: isRegisteringAllProposals ? [] : [eventId],
         }
-        const accounts = isAddingForAllAccounts ? $activeAccounts : [$selectedWallet]
-        await registerProposalsForAccounts(options, accounts)
+        const wallets = isAddingForAllWallets ? $activeWallets : [$selectedWallet]
+        await registerProposalsForWallets(options, wallets)
         showAppNotification({
             type: 'success',
             message: generateSuccessMessage(),
@@ -96,7 +96,7 @@
         if (isEditMode) {
             return localize('views.governance.proposals.successEdit')
         } else {
-            return localize(`views.governance.proposals.${isAddingForAllAccounts ? 'successAddAll' : 'successAdd'}`, {
+            return localize(`views.governance.proposals.${isAddingForAllWallets ? 'successAddAll' : 'successAdd'}`, {
                 values: { numberOfProposals: isRegisteringAllProposals ? 'other' : 'one' },
             })
         }
@@ -139,7 +139,7 @@
             label={localize('views.governance.details.proposalInformation.eventId')}
         />
         {#if !isEditMode}
-            <Checkbox label={localize('popups.addProposal.addToAllAccounts')} bind:checked={isAddingForAllAccounts} />
+            <Checkbox label={localize('popups.addProposal.addToAllAccounts')} bind:checked={isAddingForAllWallets} />
         {/if}
     </div>
     <div class="flex w-full space-x-4 mt-6">

diff --git a/packages/desktop/components/popups/CreateWalletPopup.svelte b/packages/desktop/components/popups/CreateWalletPopup.svelte
@@ -73,7 +73,7 @@
             <Input
                 {error}
                 bind:value={accountAlias}
-                placeholder={localize('general.accountName')}
+                placeholder={localize('general.walletName')}
                 autofocus
                 submitHandler={onCreateClick}
                 disabled={isBusy}

diff --git a/...mponents/popups/ManageAccountPopup.svelte → ...omponents/popups/ManageWalletPopup.svelte b/...mponents/popups/ManageAccountPopup.svelte → ...omponents/popups/ManageWalletPopup.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
     import { closePopup } from '@auxiliary/popup'
     import { localize } from '@core/i18n'
-    import { updateActiveAccountPersistedData } from '@core/profile/actions'
+    import { updateActiveWalletPersistedData } from '@core/profile/actions'
     import { getTrimmedLength } from '@core/utils'
     import { selectedWallet, validateWalletName } from '@core/wallet'
     import { Button, ColorPicker, Input, Text, TextType } from '@ui'
 
     export let error = ''
 
     let isBusy = false
-    let accountAlias = $selectedWallet.name
+    let walletAlias = $selectedWallet.name
     let color = $selectedWallet.color
 
-    $: accountAlias, (error = '')
-    $: trimmedAccountAlias = accountAlias.trim()
-    $: invalidAliasUpdate = !getTrimmedLength(accountAlias) || isBusy || accountAlias === $selectedWallet.name
+    $: walletAlias, (error = '')
+    $: trimmedWalletAlias = walletAlias.trim()
+    $: invalidAliasUpdate = !getTrimmedLength(walletAlias) || isBusy || walletAlias === $selectedWallet.name
     $: hasColorChanged = $selectedWallet.color !== color
 
     async function onSaveClick(): Promise<void> {
-        if (trimmedAccountAlias) {
+        if (trimmedWalletAlias) {
             error = ''
             try {
-                await validateWalletName(trimmedAccountAlias, true, trimmedAccountAlias !== $selectedWallet.name)
+                await validateWalletName(trimmedWalletAlias, true, trimmedWalletAlias !== $selectedWallet.name)
             } catch ({ message }) {
                 error = message
                 return
             }
 
             isBusy = true
-            saveAccountPersistedData()
+            saveWalletPersistedData()
         }
     }
 
     function onCancelClick(): void {
         closePopup()
     }
 
-    function saveAccountPersistedData(): void {
+    function saveWalletPersistedData(): void {
         try {
-            if (trimmedAccountAlias || color) {
-                updateActiveAccountPersistedData($selectedWallet?.id, { name: trimmedAccountAlias, color })
+            if (trimmedWalletAlias || color) {
+                updateActiveWalletPersistedData($selectedWallet?.id, { name: trimmedWalletAlias, color })
                 closePopup()
             }
         } finally {
@@ -51,13 +51,13 @@
 <manage-account-popup class="flex flex-col h-full justify-between space-y-4">
     <div>
         <title-container class="flex flex-row mb-6">
-            <Text type={TextType.h5}>{localize('general.manageAccount')}</Text>
+            <Text type={TextType.h5}>{localize('general.manageWallet')}</Text>
         </title-container>
         <manage-account-popup-inputs class="w-full flex flex-col justify-between space-y-4">
             <Input
                 {error}
-                bind:value={accountAlias}
-                placeholder={localize('general.accountName')}
+                bind:value={walletAlias}
+                placeholder={localize('general.walletName')}
                 autofocus
                 submitHandler={onSaveClick}
                 disabled={isBusy}

diff --git a/packages/desktop/components/popups/Popup.svelte b/packages/desktop/components/popups/Popup.svelte
@@ -30,7 +30,7 @@
     import LedgerAppGuidePopup from './LedgerAppGuidePopup.svelte'
     import LedgerConnectionGuidePopup from './LedgerConnectionGuidePopup.svelte'
     import LegalUpdatePopup from './LegalUpdatePopup.svelte'
-    import ManageAccountPopup from './ManageAccountPopup.svelte'
+    import ManageWalletPopup from './ManageWalletPopup.svelte'
     import ManageVotingPowerPopup from './ManageVotingPowerPopup.svelte'
     import MintNativeTokenConfirmationPopup from './MintNativeTokenConfirmationPopup.svelte'
     import MintNativeTokenFormPopup from './MintNativeTokenFormPopup.svelte'
@@ -79,7 +79,7 @@
     $: switch (id) {
         case PopupId.ConnectLedger:
         case PopupId.createWallet:
-        case PopupId.ManageAccount:
+        case PopupId.ManageWallet:
             size = PopupSize.Small
             break
         case PopupId.LedgerAppGuide:
@@ -116,7 +116,7 @@
         [PopupId.LedgerAppGuide]: LedgerAppGuidePopup,
         [PopupId.LedgerConnection]: LedgerConnectionGuidePopup,
         [PopupId.LegalUpdate]: LegalUpdatePopup,
-        [PopupId.ManageAccount]: ManageAccountPopup,
+        [PopupId.ManageWallet]: ManageWalletPopup,
         [PopupId.ManageVotingPower]: ManageVotingPowerPopup,
         [PopupId.MetricSystemInfo]: MetricSystemInfoPopup,
         [PopupId.MintNativeTokenConfirmation]: MintNativeTokenConfirmationPopup,

diff --git a/packages/desktop/components/popups/RemoveProposalPopup.svelte b/packages/desktop/components/popups/RemoveProposalPopup.svelte
@@ -11,7 +11,7 @@
     import { selectedWallet } from '@core/wallet/stores'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
-    import { updateActiveAccountPersistedData } from '@core/profile/actions'
+    import { updateActiveWalletPersistedData } from '@core/profile/actions'
     import { governanceRouter } from '@core/router'
     import { Button, Text, TextHint, TextType } from 'shared/components'
     import { ButtonVariant, TextHintVariant } from 'shared/components/enums'
@@ -23,7 +23,7 @@
     async function onConfirmClick(): Promise<void> {
         try {
             await $selectedWallet.deregisterParticipationEvent($selectedProposalId)
-            updateActiveAccountPersistedData($selectedWallet.id, {
+            updateActiveWalletPersistedData($selectedWallet.id, {
                 removedProposalIds: [...($selectedWallet.removedProposalIds ?? []), $selectedProposalId],
             })
             $governanceRouter.previous()

diff --git a/packages/desktop/electron/preload.js b/packages/desktop/electron/preload.js
@@ -109,49 +109,63 @@ try {
     contextBridge.exposeInMainWorld('__WALLET__API__', {
         ...methods,
         async createSecretManager(options) {
-            const manager = new IotaSdk.SecretManager(options)
+            const manager = IotaSdk.SecretManager.create(options)
             bindMethodsAcrossContextBridge(IotaSdk.SecretManager.prototype, manager)
             return manager
         },
-        // TODO(2.0): rename to createWallet
-        async createWallet(id, options) {
-            const wallet = new IotaSdk.Wallet(options)
-            wallet.id = id
-            wallets[id] = wallet
-            bindMethodsAcrossContextBridge(IotaSdk.Wallet.prototype, wallet)
+        async getClientFromWallet(id){
+            const wallet = wallets[id];
+            // Why is this here?:
+            // We cannot create classes from exposed functions 
+            // https://www.electronjs.org/docs/latest/api/context-bridge
+            const client =  await wallet.getClient();
+            bindMethodsAcrossContextBridge(IotaSdk.Client.prototype, client)
+            return client
+        },
+        // TODO(2.0): Is there a difference between this and getWallet? They both really make the same thing
+        async createWallet(id, walletOptions) {
+            let wallet = wallets[id]
+            if (!wallet) {
+                wallet = await IotaSdk.Wallet.create(walletOptions)
+                wallet.id = id
+                wallets[id] = wallet
+                bindMethodsAcrossContextBridge(IotaSdk.Wallet.prototype, wallet)
+            }
             return wallet
         },
-        // TODO(2.0): also remove from file system
-        deleteWallet(id) {
+        // TODO(2.0): also remove from file system? Does it make sense? file system != memoery
+        async deleteWallet(id) {
             if (id && id in wallets) {
                 const wallet = wallets[id]
-                wallet.destroy()
+                await wallet.stopBackgroundSync()
+                await wallet.destroy()
                 delete wallets[id]
             }
         },
         // TODO(2.0): Rename this to getWallet and fix all usages
         async getWallet(id, walletOptions) {
             let wallet = wallets[id]
             if (!wallet) {
-                wallet = new IotaSdk.Wallet(walletOptions)
+                wallet = await IotaSdk.Wallet.create(walletOptions)
+                wallet.id = id
                 wallets[id] = wallet
-                bindMethodsAcrossContextBridge(IotaSdk.Account.prototype, wallet)
+                bindMethodsAcrossContextBridge(IotaSdk.Wallet.prototype, wallet)
             }
             return wallet
         },
         // TODO(2.0): remove this method from here and move to new profile
         async recoverAccounts(managerId, payload) {
             const manager = wallets[managerId]
             const accounts = await manager.recoverAccounts(...Object.values(payload))
-            accounts.forEach((account) => bindMethodsAcrossContextBridge(IotaSdk.Account.prototype, account))
+            accounts.forEach((account) => bindMethodsAcrossContextBridge(IotaSdk.Wallet.prototype, account))
             return accounts
         },
-        clearWalletsFromMemory() {
-            Object.keys(wallets).forEach((id) => {
-                const wallet = wallets[id]
-                wallet.destroy()
+        async clearWalletsFromMemory() {
+            for(const [id, wallet] of Object.entries(wallets)){
+                await wallet.stopBackgroundSync()
+                await wallet.destroy()
                 delete wallets[id]
-            })
+            }
         },
         async migrateStrongholdSnapshotV2ToV3(currentPath, newPath, currentPassword, newPassword) {
             const snapshotSaltV2 = 'wallet.rs'

diff --git a/packages/desktop/views/login/views/SelectProfileView.svelte b/packages/desktop/views/login/views/SelectProfileView.svelte
@@ -31,7 +31,6 @@
     async function onAddProfileClick(): Promise<void> {
         onboardingRouter.set(new OnboardingRouter())
         await initialiseOnboardingProfile(shouldBeDeveloperProfile())
-        console.log("shuld be created")
         $routerManager.goToAppContext(AppContext.Onboarding)
     }
 

diff --git a/...ages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte b/...ages/desktop/views/onboarding/views/complete-onboarding/views/FinishOnboardingView.svelte
@@ -28,7 +28,6 @@
     }
 
     async function _continue(): Promise<void> {
-        console.log($onboardingProfile)
         // Note: needed to cover the cases where the user has waited so long that the stronghold is locked
         if ($onboardingProfile?.restoreProfileType === RestoreProfileType.Stronghold) {
             await setStrongholdPassword($onboardingProfile.strongholdPassword)

diff --git a/...es/desktop/views/onboarding/views/create-profile/views/ChooseCreateProfileFlowView.svelte b/...es/desktop/views/onboarding/views/create-profile/views/ChooseCreateProfileFlowView.svelte
@@ -28,7 +28,6 @@
         const type = createProfileType === CreateProfileType.Ledger ? ProfileType.Ledger : ProfileType.Software
         const storagePath = await getStorageDirectoryOfProfile($onboardingProfile.id)
         const secretManagerOptions = getSecretManagerFromProfileType(type, storagePath)
-        console.log("secretManagerOptions", secretManagerOptions)
         updateOnboardingProfile({ createProfileType, type, secretManagerOptions })
         $createProfileRouter.next()
     }

diff --git a/packages/desktop/views/onboarding/views/shared/EncryptMnemonicView.svelte b/packages/desktop/views/onboarding/views/shared/EncryptMnemonicView.svelte
@@ -2,7 +2,7 @@
     import { AnimationEnum } from '@auxiliary/animation'
     import { showAppNotification } from '@auxiliary/notification'
     import { OnboardingLayout } from '@components'
-    import { updateOnboardingProfile, verifyAndStoreMnemonic } from '@contexts/onboarding'
+    import { buildOnboardingSecretManager, updateOnboardingProfile, verifyAndStoreMnemonic } from '@contexts/onboarding'
     import { localize } from '@core/i18n'
     import { MAX_STRONGHOLD_PASSWORD_LENGTH } from '@core/profile'
     import { Subrouter } from '@core/router'
@@ -45,8 +45,9 @@
             try {
                 busy = true
                 await setStrongholdPassword(strongholdPassword)
-                await verifyAndStoreMnemonic()
                 updateOnboardingProfile({ strongholdPassword, hasStoredMnemonic: true })
+                await buildOnboardingSecretManager();
+                await verifyAndStoreMnemonic()
                 router.next()
             } catch (err) {
                 console.error(err)