ui: polish transak (#2185)

* WIP * feat: adds Spinner when Transak window has not loaded yet * ui: polish transak feature Co-authored-by: Jean Ribeiro <[email protected]> * fix: import * fix: adds transak logo width --------- Co-authored-by: Jean Ribeiro <[email protected]>
bloomwalletio · Mar 20, 2024 · 89b9440 · 89b9440
1 parent 338a082
commit 89b9440
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 27 deletions.
diff --git a/packages/desktop/components/AccountSwitcher.svelte b/packages/desktop/components/AccountSwitcher.svelte
@@ -8,7 +8,9 @@
     import { allAccountFiatBalances } from '@core/token/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
 
-    export let navbar: boolean = false
+    export let breadcrumb: boolean = false
+    export let compact: boolean = false
+    export let hasCreateAccount: boolean = false
     export let placement: 'bottom-start' | 'bottom-end' = 'bottom-start'
 
     const menu: Menu | undefined = undefined
@@ -39,22 +41,24 @@
 
 <Menu
     {items}
-    compact={navbar}
-    {...!navbar && { button: { text: localize('general.newAccount'), onClick: onCreateAccountClick } }}
+    {compact}
+    {...hasCreateAccount && { button: { text: localize('general.newAccount'), onClick: onCreateAccountClick } }}
     {placement}
-    class="max-h-80 overflow-auto"
+    maxHeight={320}
 >
-    <Breadcrumb slot="anchor" tooltip={navbar ? localize('actions.switchAccount') : undefined}>
+    <Breadcrumb slot="anchor" tooltip={breadcrumb ? localize('actions.switchAccount') : undefined}>
         <div class="flex flex-row justify-center items-center space-x-2">
-            {#if navbar}
+            {#if breadcrumb}
                 <Indicator color={$selectedAccount?.color} size="sm" />
             {/if}
-            <Text type={navbar ? 'base' : 'body1'}>
-                {$selectedAccount?.name}
-            </Text>
-            {#if !navbar}
-                <Icon name={IconName.ChevronSelectorVertical} size="sm" textColor="secondary" />
-            {/if}
+            <div class="flex flex-row justify-center items-center {compact ? 'space-x-1' : 'space-x-2'}">
+                <Text type={compact ? 'base' : 'body1'}>
+                    {$selectedAccount?.name}
+                </Text>
+                {#if !breadcrumb}
+                    <Icon name={IconName.ChevronSelectorVertical} size={compact ? 'xs' : 'sm'} textColor="secondary" />
+                {/if}
+            </div>
         </div>
     </Breadcrumb>
 </Menu>
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -157,8 +157,10 @@ export default class TransakManager implements ITransakManager {
         })
 
         ipcMain.handle('transak-loaded', () => {
-            windows.main?.webContents.send('transak-loaded')
-            this.showWindow()
+            setTimeout(() => {
+                windows.main?.webContents.send('transak-loaded')
+                this.showWindow()
+            }, 300)
         })
 
         return windows.transak

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
@@ -29,11 +29,11 @@
     <div class="w-full flex justify-between items-center gap-2">
         <div class="flex items-center gap-2">
             <icon-container class="bg-black p-1 rounded-full">
-                <Icon name={IconName.Iota} size="xs" customColor="#ffffff" />
+                <Icon name={IconName.Iota} size="sm" customColor="#ffffff" />
             </icon-container>
             <Text type="body2">IOTA</Text>
         </div>
-        <AccountSwitcher placement="bottom-end" />
+        <AccountSwitcher compact placement="bottom-end" />
     </div>
     <div class="w-full flex flex-col gap-1 justify-center">
         <FormattedBalance balanceText={tokenBalance} textType="h4" />

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
@@ -41,7 +41,7 @@
 
 <Pane classes="flex flex-col items-center w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
     <div class="w-full flex justify-between items-center h-8">
-        <img data-label="transak-logo" width="90" height="29" src="assets/logos/transak.png" alt="Transak" />
+        <img data-label="transak-logo" width="90" height="28" src="assets/logos/transak.svg" alt="Transak" />
         <div>
             {#if connectionStatus === TransakConnectionStatus.Connected}
                 <Pill color="success">{localize('general.connected')}</Pill>

diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
@@ -5,11 +5,11 @@
     import { localize } from '@core/i18n'
     import { DISCORD_URL } from '@contexts/settings/constants'
 
+    export let loading: boolean = true
     let error: boolean = false
-    let loading: boolean = true
 
-    Platform.onEvent('transak-not-loaded', () => (error = true))
     Platform.onEvent('transak-loaded', () => (loading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
 
     function onButtonClick(): void {
         openUrlInBrowser(DISCORD_URL)

diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -18,6 +18,7 @@
     import { drawerState } from '@desktop/auxiliary/drawer/stores'
 
     let isTransakOpen: boolean = false
+    let isTransakLoading: boolean = true
 
     $: $isDashboardSideBarExpanded, void updateTransakBounds()
 
@@ -88,6 +89,7 @@
     }
 
     async function resetTransak(): Promise<void> {
+        isTransakLoading = true
         await Platform.closeTransak()
         isTransakOpen = false
         await Platform.openTransak({
@@ -119,7 +121,7 @@
         <TransakAccountPanel />
     </div>
     <div class="transak-panel" bind:this={transakContainer}>
-        <TransakWindowPlaceholder />
+        <TransakWindowPlaceholder bind:loading={isTransakLoading} />
     </div>
     <div class="info-panel">
         <TransakInfoPanel />

diff --git a/packages/desktop/views/dashboard/components/Breadcrumbs.svelte b/packages/desktop/views/dashboard/components/Breadcrumbs.svelte
@@ -65,7 +65,7 @@
     />
     <div class="flex flex-row space-x-1 items-center">
         <div class="shrink-0">
-            <AccountSwitcher navbar />
+            <AccountSwitcher breadcrumb compact />
         </div>
         <Icon name={IconName.ChevronRight} size="sm" />
         <Breadcrumb

diff --git a/...ges/desktop/views/dashboard/wallet/panes/account-summary/components/AccountSummary.svelte b/...ges/desktop/views/dashboard/wallet/panes/account-summary/components/AccountSummary.svelte
@@ -36,7 +36,7 @@
 
 <account-summary class="w-full h-full px-6 pb-6 pt-4 flex flex-col justify-between">
     <account-summary-header class="w-full flex flex-row justify-between items-center">
-        <AccountSwitcher />
+        <AccountSwitcher hasCreateAccount />
         <AccountActionsMenu />
     </account-summary-header>
     <FormattedBalance balanceText={formattedBalance} autoAdjustFontSize />

diff --git a/packages/shared/assets/logos/transak.png b/packages/shared/assets/logos/transak.png
diff --git a/packages/shared/assets/logos/transak.svg b/packages/shared/assets/logos/transak.svg
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <[email protected]>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.9",
+        "@bloomwalletio/ui": "0.20.10",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",

diff --git a/yarn.lock b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/[email protected].9":
-  version "0.20.9"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.9/a388d219d644c1029a6bcbf239cb7149fa23e20f#a388d219d644c1029a6bcbf239cb7149fa23e20f"
-  integrity sha512-GNej31d/rRZmEnSKDgmWOgMUbfDV/N4oToyD7tniTHK7Q5sPyqp+QaD9kwsXfWPw/yi0UJp1igLEcWll+88Ong==
+"@bloomwalletio/[email protected].10":
+  version "0.20.10"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.10/3b171c54e19d739e44c1715f5b0230a2d104433a#3b171c54e19d739e44c1715f5b0230a2d104433a"
+  integrity sha512-cGIgorAkS7yyFrlwBwcl7aLQmaHuulIrIVdDUFOnsjGuBgFJuZr+Ta6qGvOrP/42RLV/q2XX2O1DIC26hPeRng==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"