feat: add transak app connection panel (#1790)

* update bloom-ui * adds transak connection panel and refactor panes into components
bloomwalletio · Jan 26, 2024 · bff07cf · bff07cf
1 parent 0b2a238
commit bff07cf
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 55 deletions.
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { Pane } from '@ui'
+    import { AccountSwitcher, FormattedBalance } from '@components'
+    import { Copyable, Icon, IconName, Text } from '@bloomwalletio/ui'
+    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
+    import { formatCurrency } from '@core/i18n'
+    import { getFiatValueFromTokenAmount } from '@core/market/actions'
+    import { activeProfile } from '@core/profile/stores'
+    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
+    import { selectedAccountTokens } from '@core/token/stores'
+
+    let tokenBalance: string
+    let fiatBalance: string
+
+    function updateBalances(): void {
+        const tokens = $selectedAccountTokens?.[$activeProfile.network.id]
+        const networkBaseCoin: ITokenWithBalance = tokens?.baseCoin
+        tokenBalance = formatTokenAmountBestMatch(networkBaseCoin.balance.total, networkBaseCoin.metadata)
+        fiatBalance = formatCurrency(getFiatValueFromTokenAmount(networkBaseCoin.balance.total, networkBaseCoin))
+    }
+
+    $: if ($selectedAccountIndex !== undefined) {
+        updateBalances()
+    }
+</script>
+
+<Pane classes="flex flex-col justify-center 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 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-container>
+            <Text type="body2">IOTA</Text>
+        </div>
+        <AccountSwitcher placement="bottom-end" />
+    </div>
+    <div class="w-full flex flex-col gap-1 justify-center">
+        <FormattedBalance balanceText={tokenBalance} textType="h4" />
+        <Text type="h6" textColor="secondary">{fiatBalance}</Text>
+    </div>
+    <Copyable value={$selectedAccount?.depositAddress}>
+        <div class="bg-surface-2 dark:bg-surface-2-dark rounded-xl py-2 px-3">
+            <Text type="pre-sm" textColor="secondary" class="break-all whitespace-normal">
+                {$selectedAccount?.depositAddress}
+            </Text>
+        </div>
+    </Copyable>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Icon, IconName, Pill, Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { Pane } from '@ui'
+</script>
+
+<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">
+        <img data-label="transak-logo" width="90" height="29" src="assets/logos/transak.png" alt="Transak" />
+        <div>
+            <Pill color="success">{localize('general.connected')}</Pill>
+        </div>
+    </div>
+    <div class="flex items-center gap-1 w-full">
+        <Icon name={IconName.ShieldOn} textColor="success" size="xxs" />
+        <Text type="sm" textColor="secondary">www.transak.com</Text>
+    </div>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Pill, Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { Pane } from '@ui'
+</script>
+
+<Pane classes="flex flex-col justify-start items-start w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
+    <Pill color="brand">{localize('general.info')}</Pill>
+    <Text color="secondary">{localize('views.buySell.info.receive')}</Text>
+    <Text color="secondary">{localize('views.buySell.info.multipleAccounts')}</Text>
+    <Text color="secondary">{localize('views.buySell.info.changingAccounts')}</Text>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -0,0 +1,3 @@
+export { default as TransakAccountPanel } from './TransakAccountPanel.svelte'
+export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
+export { default as TransakInfoPanel } from './TransakInfoPanel.svelte'
diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -1,27 +1,12 @@
 <script lang="ts">
-    import { Copyable, Icon, IconName, Pill, Text } from '@bloomwalletio/ui'
-    import { AccountSwitcher, FormattedBalance } from '@components'
     import { ISettingsState, settingsState } from '@contexts/settings/stores'
     import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
     import { Platform } from '@core/app'
-    import { formatCurrency, localize } from '@core/i18n'
-    import { getFiatValueFromTokenAmount } from '@core/market/actions'
     import { activeProfile } from '@core/profile/stores'
-    import { ITokenWithBalance, formatTokenAmountBestMatch } from '@core/token'
-    import { selectedAccountTokens } from '@core/token/stores'
     import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
     import { Pane } from '@ui'
     import { onDestroy, tick } from 'svelte'
-
-    let tokenBalance: string
-    let fiatBalance: string
-
-    function updateBalances(): void {
-        const tokens = $selectedAccountTokens?.[$activeProfile.network.id]
-        const networkBaseCoin: ITokenWithBalance = tokens?.baseCoin
-        tokenBalance = formatTokenAmountBestMatch(networkBaseCoin.balance.total, networkBaseCoin.metadata)
-        fiatBalance = formatCurrency(getFiatValueFromTokenAmount(networkBaseCoin.balance.total, networkBaseCoin))
-    }
+    import { TransakAccountPanel, TransakConnectionPanel, TransakInfoPanel } from '../components'
 
     async function resetTransak(): Promise<void> {
         await Platform.closeTransak()
@@ -34,7 +19,6 @@
     }
 
     $: if ($selectedAccountIndex !== undefined) {
-        updateBalances()
         void resetTransak()
     }
 
@@ -82,46 +66,17 @@
 <svelte:window on:resize={updateTransakBounds} />
 
 <div class="flex gap-4 h-full">
-    <div class="account-panel">
-        <Pane
-            classes="flex flex-col justify-center items-center w-full px-6 pb-6 pt-4 gap-4 bg-surface dark:bg-surface-dark shadow-lg"
-        >
-            <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-container>
-                    <Text type="body2">IOTA</Text>
-                </div>
-                <AccountSwitcher placement="bottom-end" />
-            </div>
-            <div class="w-full flex flex-col gap-1 justify-center">
-                <FormattedBalance balanceText={tokenBalance} textType="h4" />
-                <Text type="h6" textColor="secondary">{fiatBalance}</Text>
-            </div>
-            <Copyable value={$selectedAccount?.depositAddress}>
-                <div class="bg-surface-2 dark:bg-surface-2-dark rounded-xl py-2 px-3">
-                    <Text type="pre-sm" textColor="secondary" class="break-all whitespace-normal">
-                        {$selectedAccount?.depositAddress}
-                    </Text>
-                </div>
-            </Copyable>
-        </Pane>
+    <div class="account-panel flex flex-col gap-4">
+        <TransakConnectionPanel />
+        <TransakAccountPanel />
     </div>
     <div class="transak-panel" bind:this={transakContainer}>
         <Pane
             classes="flex flex-col justify-center items-center w-full h-full px-6 pb-6 pt-4 gap-4 bg-surface dark:bg-surface-dark shadow-lg"
         ></Pane>
     </div>
     <div class="info-panel">
-        <Pane
-            classes="flex flex-col justify-start items-start w-full px-6 pb-6 pt-4 gap-4 bg-surface dark:bg-surface-dark shadow-lg"
-        >
-            <Pill color="brand">{localize('general.info')}</Pill>
-            <Text color="secondary">{localize('views.buySell.info.receive')}</Text>
-            <Text color="secondary">{localize('views.buySell.info.multipleAccounts')}</Text>
-            <Text color="secondary">{localize('views.buySell.info.changingAccounts')}</Text>
-        </Pane>
+        <TransakInfoPanel />
     </div>
 </div>
 

diff --git a/packages/shared/assets/logos/transak.png b/packages/shared/assets/logos/transak.png
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.19.3",
+        "@bloomwalletio/ui": "0.19.5",
         "@iota/bundle": "1.0.0-beta.30",
         "@iota/converter": "1.0.0-beta.30",
         "@iota/crypto.js": "1.8.6",

diff --git a/yarn.lock b/yarn.lock
@@ -377,10 +377,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/[email protected].3":
-  version "0.19.3"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.19.3/3f4123aea1355653db45caea06a8cbb35e113e48#3f4123aea1355653db45caea06a8cbb35e113e48"
-  integrity sha512-aX0CsApUFlcsq3znnOsQq594QGjMAxJSRzG8/J/2Me9gqQGv05DUb6dQE+NEo5tPHxzaXxKU4K2MZ+agitcORw==
+"@bloomwalletio/[email protected].5":
+  version "0.19.5"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.19.5/bdd884be8469bc518aa9f52743da726441abc4b0#bdd884be8469bc518aa9f52743da726441abc4b0"
+  integrity sha512-28gav+1p9ObsjJIXkyb2PvV2RkP9UPipMvQ4nZoayyyIzMnYt6uFzVHQrJ9OeL57sadE2jjtjixNfw+I8/yFwA==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"