Merge branch 'chore/update-testnet-network-metadata' into charlie-demo

bloomwalletio · Oct 18, 2023 · a8baba9 · a8baba9
2 parents 34430aa + 86865ea
commit a8baba9
Show file tree

Hide file tree

Showing 67 changed files with 514 additions and 335 deletions.
diff --git a/packages/desktop/components/popup/popups/CreateAccountPopup.svelte b/packages/desktop/components/popup/popups/CreateAccountPopup.svelte
@@ -29,9 +29,8 @@
             await validateAccountName(accountName.trim())
             updatePopupProps({ accountAlias: accountName, color, error })
             await checkActiveProfileAuth(_create, { stronghold: true, ledger: true })
-        } catch (err) {
-            error = err.error
-            handleError(err)
+        } catch ({ message }) {
+            error = message
         } finally {
             isBusy = false
         }
@@ -61,7 +60,6 @@
                 isBusy = true
                 await _onMount()
             } catch (err) {
-                error = err.error
                 handleError(err)
             } finally {
                 isBusy = false
@@ -86,7 +84,7 @@
     <div class="flex flex-col space-y-5">
         <div class="flex flex-col gap-2">
             <Text type="body1">{localize('general.name')}</Text>
-            <Input bind:value={accountName} label={localize('general.accountName')} disabled={isBusy} {error} />
+            <Input bind:value={accountName} label={localize('general.accountName')} disabled={isBusy} bind:error />
         </div>
         <div class="flex flex-col gap-2">
             <Text type="body1">{localize('general.color')}</Text>

diff --git a/packages/desktop/components/popup/popups/CustomiseAccountPopup.svelte b/packages/desktop/components/popup/popups/CustomiseAccountPopup.svelte
@@ -66,7 +66,7 @@
     <div class="flex flex-col gap-4">
         <div class="flex flex-col gap-2">
             <Text type="body1">{localize('general.name')}</Text>
-            <Input bind:value={accountName} label={localize('general.accountName')} disabled={isBusy} {error} />
+            <Input bind:value={accountName} label={localize('general.accountName')} disabled={isBusy} bind:error />
         </div>
         <div class="flex flex-col gap-2">
             <Text type="body1">{localize('general.color')}</Text>

diff --git a/packages/desktop/components/popup/popups/UnlockStrongholdPopup.svelte b/packages/desktop/components/popup/popups/UnlockStrongholdPopup.svelte
@@ -54,6 +54,6 @@
     }}
 >
     <form id="password-popup-form" class="flex w-full flex-col" on:submit|preventDefault={onSubmit}>
-        <PasswordInput bind:value={password} label={localize('general.password')} autofocus {error} />
+        <PasswordInput bind:value={password} label={localize('general.password')} autofocus bind:error />
     </form>
 </PopupTemplate>
diff --git a/packages/desktop/components/popup/popups/VerifyLedgerTransactionPopup.svelte b/packages/desktop/components/popup/popups/VerifyLedgerTransactionPopup.svelte
@@ -3,10 +3,11 @@
     import { localize } from '@core/i18n'
     import { resetShowInternalVerificationPopup, showInternalVerificationPopup } from '@core/ledger'
     import { getBaseToken } from '@core/profile/actions'
+    import { LedgerStatusIllustration, LedgerIllustrationVariant } from '@ui'
     import { formatTokenAmountBestMatch } from '@core/token/utils'
     import { formatHexString } from '@core/utils'
-    import { LedgerAnimation, Text, TextType } from '@ui'
     import { onDestroy } from 'svelte'
+    import PopupTemplate from '../PopupTemplate.svelte'
 
     export let isEvmTransaction: boolean
     export let useBlindSigning: boolean
@@ -32,59 +33,60 @@
     })
 </script>
 
-<Text type={TextType.h4} classes="mb-4">{localize(`${locale}.title`)}</Text>
-<Text type={TextType.p} classes="mb-4" secondary>{localize(`${locale}.info`)}</Text>
-
-<div class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
-    <LedgerAnimation animation="ledger-confirm-prompt-desktop" />
-</div>
-<div class="flex flex-col space-y-2">
-    {#if hasSendConfirmationProps}
-        <Table
-            orientation="vertical"
-            items={[
-                {
-                    key: localize('general.hash'),
-                    value: useBlindSigning ? formatHexString(hash) : undefined,
-                    copyable: true,
-                },
-                {
-                    key: localize('general.bipPath'),
-                    value: useBlindSigning && bipPath ? bipPath : undefined,
-                },
-                {
-                    key: localize('general.amount'),
-                    value: !useBlindSigning && isEvmTransaction ? toAmount : undefined,
-                },
-                {
-                    key: localize('general.address'),
-                    value: !useBlindSigning && isEvmTransaction ? toAddress : undefined,
-                    copyable: true,
-                },
-                {
-                    key: localize('general.network'),
-                    value: !useBlindSigning && isEvmTransaction ? chainId : undefined,
-                    copyable: true,
-                },
-                {
-                    key: localize('general.maxFees'),
-                    value:
-                        !useBlindSigning && isEvmTransaction
-                            ? formatTokenAmountBestMatch(Number(maxGasFee), getBaseToken())
-                            : undefined,
-                },
-                {
-                    key: localize('general.sendTo'),
-                    value: !useBlindSigning && !isEvmTransaction ? toAddress : undefined,
-                    copyable: true,
-                },
-                {
-                    key: localize('general.amount'),
-                    value: !useBlindSigning && !isEvmTransaction ? toAmount : undefined,
-                },
-            ]}
-        />
-    {:else if $showInternalVerificationPopup}
-        <Alert variant="info" text={localize('popups.verifyInternalLedgerTransaction.hint')} />
-    {/if}
-</div>
+<PopupTemplate title={localize(`${locale}.title`)} description={localize(`${locale}.info`)}>
+    <div class="flex flex-col gap-4">
+        <div class="w-full h-full space-y-6 flex flex-auto flex-col shrink-0">
+            <LedgerStatusIllustration variant={LedgerIllustrationVariant.Hash} />
+        </div>
+        <div class="flex flex-col space-y-2">
+            {#if hasSendConfirmationProps}
+                <Table
+                    orientation="vertical"
+                    items={[
+                        {
+                            key: localize('general.hash'),
+                            value: useBlindSigning ? formatHexString(hash) : undefined,
+                            copyable: true,
+                        },
+                        {
+                            key: localize('general.bipPath'),
+                            value: useBlindSigning && bipPath ? bipPath : undefined,
+                        },
+                        {
+                            key: localize('general.amount'),
+                            value: !useBlindSigning && isEvmTransaction ? toAmount : undefined,
+                        },
+                        {
+                            key: localize('general.address'),
+                            value: !useBlindSigning && isEvmTransaction ? toAddress : undefined,
+                            copyable: true,
+                        },
+                        {
+                            key: localize('general.network'),
+                            value: !useBlindSigning && isEvmTransaction ? chainId : undefined,
+                            copyable: true,
+                        },
+                        {
+                            key: localize('general.maxFees'),
+                            value:
+                                !useBlindSigning && isEvmTransaction
+                                    ? formatTokenAmountBestMatch(Number(maxGasFee), getBaseToken())
+                                    : undefined,
+                        },
+                        {
+                            key: localize('general.sendTo'),
+                            value: !useBlindSigning && !isEvmTransaction ? toAddress : undefined,
+                            copyable: true,
+                        },
+                        {
+                            key: localize('general.amount'),
+                            value: !useBlindSigning && !isEvmTransaction ? toAmount : undefined,
+                        },
+                    ]}
+                />
+            {:else if $showInternalVerificationPopup}
+                <Alert variant="info" text={localize('popups.verifyInternalLedgerTransaction.hint')} />
+            {/if}
+        </div>
+    </div>
+</PopupTemplate>
diff --git a/packages/desktop/lib/helpers.ts b/packages/desktop/lib/helpers.ts
@@ -34,5 +34,5 @@ export const getLocalisedMenuItems = (): unknown => ({
     documentation: localize('views.settings.documentation.title'),
     discord: localize('views.settings.discord.title'),
     reportAnIssue: localize('actions.reportAnIssue'),
-    version: localize('general.version'),
+    version: localize('general.versionFull'),
 })
diff --git a/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte b/packages/desktop/views/dashboard/collectibles/views/CollectiblesDetailsView.svelte
@@ -6,7 +6,7 @@
     import { time } from '@core/app/stores'
     import { openUrlInBrowser } from '@core/app/utils'
     import { localize } from '@core/i18n'
-    import { ExplorerEndpoint, getDefaultExplorerUrl } from '@core/network'
+    import { ExplorerEndpoint, getActiveNetworkId, getDefaultExplorerUrl } from '@core/network'
     import { INft, NftDownloadMetadata } from '@core/nfts'
     import { getNftByIdFromAllAccountNfts } from '@core/nfts/actions'
     import { allAccountNfts, selectedNftId } from '@core/nfts/stores'
@@ -17,11 +17,12 @@
     import { getTimeDifference } from '@core/utils'
     import { setSendFlowParameters } from '@core/wallet/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import { NftMedia, Pane } from '@ui'
+    import { NetworkLabel, NftMedia, Pane } from '@ui'
     import { SendFlowRoute, SendFlowRouter, sendFlowRouter } from '@views/dashboard/send-flow'
 
     const nft: INft = getNftByIdFromAllAccountNfts($selectedAccountIndex, $selectedNftId)
-    const explorerUrl = getDefaultExplorerUrl(nft?.networkId, ExplorerEndpoint.Nft)
+    // We don't use `nft.networkId` on this one, as for IRC27 nfts we still want the L1 explorer
+    const explorerUrl = getDefaultExplorerUrl(getActiveNetworkId(), ExplorerEndpoint.Nft)
 
     const { id, name, issuer, address, metadata, downloadMetadata, storageDeposit } = nft ?? {}
     const { standard, version, description, issuerName, collectionName, attributes, soonaverseAttributes } =
@@ -36,6 +37,15 @@
 
     let detailsList: IItem[] = []
     $: detailsList = [
+        {
+            key: localize('general.network'),
+            slot: {
+                component: NetworkLabel,
+                props: {
+                    networkId: nft.networkId,
+                },
+            },
+        },
         {
             key: localize('general.nftId'),
             value: id || undefined,

diff --git a/packages/desktop/views/dashboard/collectibles/views/CollectiblesGalleryView.svelte b/packages/desktop/views/dashboard/collectibles/views/CollectiblesGalleryView.svelte
@@ -1,8 +1,19 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
     import { nftSearchTerm, ownedNfts, queriedNfts } from '@core/nfts/stores'
-    import { Illustration, NftGallery, ReceiveButton, SearchInput } from '@ui'
-    import { Text, Pill } from '@bloomwalletio/ui'
+    import { NftGallery, SearchInput } from '@ui'
+    import { Button, Icon, IconName, Text, Pill } from '@bloomwalletio/ui'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+    import { getActiveNetworkId } from '@core/network'
+
+    function onReceiveClick(): void {
+        openPopup({
+            id: PopupId.ReceiveAddress,
+            props: {
+                selectedNetworkId: getActiveNetworkId(),
+            },
+        })
+    }
 </script>
 
 <div class="flex flex-col w-full h-full space-y-4">
@@ -22,21 +33,33 @@
         {#if $queriedNfts.length}
             <NftGallery nfts={$queriedNfts} />
         {:else}
-            <div class="w-full h-full flex flex-col items-center justify-center space-y-8">
-                <Illustration illustration="empty-collectibles" width="134" height="134" />
-                <Text textColor="secondary">{localize('views.collectibles.gallery.noResults')}</Text>
+            <div class="w-full h-full flex flex-col items-center justify-center gap-6">
+                <empty-list-icon>
+                    <Icon name={IconName.Data} size="md" customColor="primary-500" />
+                </empty-list-icon>
+                <Text type="h6">{localize('views.collectibles.gallery.noResults')}</Text>
             </div>
         {/if}
     {:else}
         <div class="w-full h-full flex items-center justify-center grow-1">
-            <div class="flex flex-col items-center space-y-8">
-                <Illustration illustration="empty-collectibles" width="134" height="134" />
-                <div class="flex flex-col items-center">
-                    <Text textColor="secondary">{localize('views.collectibles.gallery.emptyTitle')}</Text>
+            <div class="flex flex-col items-center gap-6">
+                <empty-list-icon>
+                    <Icon name={IconName.Data} size="md" customColor="primary-500" />
+                </empty-list-icon>
+                <div class="flex flex-col items-center gap-4">
+                    <Text type="h6">{localize('views.collectibles.gallery.emptyTitle')}</Text>
                     <Text textColor="secondary">{localize('views.collectibles.gallery.emptyDescription')}</Text>
                 </div>
-                <ReceiveButton text={localize('actions.depositNft')} />
+                <Button text={localize('actions.getStarted')} on:click={onReceiveClick} />
             </div>
         </div>
     {/if}
 </div>
+
+<style lang="scss">
+    empty-list-icon {
+        @apply flex items-center justify-center text-center;
+        @apply h-24 w-24 rounded-full shadow-elevation-4;
+        @apply bg-surface dark:bg-surface-dark;
+    }
+</style>
diff --git a/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte b/packages/desktop/views/dashboard/send-flow/views/SelectTokenView.svelte
@@ -97,6 +97,7 @@
             destinationNetworkId: $sendFlowParameters?.destinationNetworkId,
             addSenderFeature: $sendFlowParameters?.addSenderFeature,
             disableChangeExpiration: $sendFlowParameters?.disableChangeExpiration,
+            disableChangeTimelock: $sendFlowParameters?.disableChangeTimelock,
             disableToggleGift: $sendFlowParameters?.disableToggleGift,
         }
 

diff --git a/packages/desktop/views/dashboard/send-flow/views/components/DateTimePickerMenu.svelte b/packages/desktop/views/dashboard/send-flow/views/components/DateTimePickerMenu.svelte
@@ -82,6 +82,7 @@
 
 <Menu
     bind:this={menu}
+    {disabled}
     compact={false}
     placement="top-end"
     button={{
@@ -137,7 +138,7 @@
         {disabled}
     >
         <div class="flex flex-row items-center">
-            <Text textColor="brand" fontWeight="medium">
+            <Text textColor={disabled ? 'secondary' : 'brand'} fontWeight="medium">
                 {value ? formatDate(value, { dateStyle: 'long', timeStyle: 'medium' }) : localize('general.none')}
             </Text>
         </div>

diff --git a/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte b/packages/desktop/views/dashboard/send-flow/views/components/EvmTransactionDetails.svelte
@@ -1,55 +1,35 @@
 <script lang="ts">
     import { localize } from '@core/i18n'
     import { NetworkId } from '@core/network'
-    import { getNameFromNetworkId } from '@core/network/actions/getNameFromNetworkId'
     import { getBaseToken } from '@core/profile/actions'
     import { formatTokenAmountBestMatch } from '@core/token'
     import { BigIntLike } from '@ethereumjs/util'
-    import { NetworkAvatar, Text } from '@ui'
+    import { NetworkLabel } from '@ui'
+    import { Table } from '@bloomwalletio/ui'
 
     export let destinationNetworkId: NetworkId | undefined = undefined
     export let estimatedGasFee: BigIntLike | undefined = undefined
     export let maxGasFee: BigIntLike | undefined = undefined
-
-    $: destinationNetwork = getNameFromNetworkId(destinationNetworkId)
 </script>
 
-<div class="border border-solid border-gray-200 dark:border-gray-700 rounded-lg">
-    {#if destinationNetwork}
-        <section class="key-value-box border-gray-200 dark:border-gray-700">
-            <Text>{localize('general.destinationNetwork')}</Text>
-            <div class="flex flex-row items-center gap-2">
-                <NetworkAvatar networkId={destinationNetworkId} size="sm" />
-                <Text color="gray-600">{destinationNetwork}</Text>
-            </div>
-        </section>
-    {/if}
-    <!-- TODO: use correct locales -->
-    {#if estimatedGasFee}
-        <section class="key-value-box border-gray-200 dark:border-gray-700">
-            <div class="flex flex-row">
-                <Text>{localize('general.estimatedFee')}</Text>
-            </div>
-            <Text color="gray-600">{formatTokenAmountBestMatch(Number(estimatedGasFee), getBaseToken())}</Text>
-        </section>
-    {/if}
-    {#if maxGasFee}
-        <section class="key-value-box border-gray-200 dark:border-gray-700">
-            <div class="flex flex-row">
-                <Text>{localize('general.maxFees')}</Text>
-            </div>
-            <Text color="gray-600">{formatTokenAmountBestMatch(Number(maxGasFee), getBaseToken())}</Text>
-        </section>
-    {/if}
-</div>
-
-<style lang="scss">
-    .key-value-box {
-        @apply flex flex-row justify-between items-center p-4;
-        @apply border-b border-solid;
-
-        &:last-child {
-            @apply border-0;
-        }
-    }
-</style>
+<Table
+    items={[
+        {
+            key: localize('general.destinationNetwork'),
+            slot: {
+                component: NetworkLabel,
+                props: {
+                    networkId: destinationNetworkId,
+                },
+            },
+        },
+        {
+            key: localize('general.estimatedFee'),
+            value: estimatedGasFee ? formatTokenAmountBestMatch(Number(estimatedGasFee), getBaseToken()) : undefined,
+        },
+        {
+            key: localize('general.maxFees'),
+            value: maxGasFee ? formatTokenAmountBestMatch(Number(maxGasFee), getBaseToken()) : undefined,
+        },
+    ]}
+/>