Merge remote-tracking branch 'origin/develop' into 2590----create-buy…

…sell-exchange-ui
bloomwalletio · Aug 13, 2024 · a37d4a3 · a37d4a3
2 parents 08bcd28 + 3f1e4bc
commit a37d4a3
Show file tree

Hide file tree

Showing 30 changed files with 456 additions and 325 deletions.
diff --git a/firefly.diff b/firefly.diff
@@ -1160,10 +1160,12 @@
  delete mode 100644 packages/shared/lib/core/ledger/interfaces/index.ts
  delete mode 100644 packages/shared/lib/core/ledger/interfaces/ledger-connection-state.interface.ts
  delete mode 100644 packages/shared/lib/core/ledger/interfaces/ledger.interface.ts
+ delete mode 100644 packages/shared/lib/core/ledger/stores/index.ts
  delete mode 100644 packages/shared/lib/core/ledger/stores/is-polling-ledger-device-status.store.ts
  delete mode 100644 packages/shared/lib/core/ledger/stores/ledger-connection-state.store.ts
  delete mode 100644 packages/shared/lib/core/ledger/utils/determineLedgerConnectionState.ts
  delete mode 100644 packages/shared/lib/core/ledger/utils/handleLedgerError.ts
+ delete mode 100644 packages/shared/lib/core/ledger/utils/index.ts
  delete mode 100644 packages/shared/lib/core/ledger/utils/openLedgerNotConnectedPopup.ts
  delete mode 100644 packages/shared/lib/core/market/actions/getAndUpdateMarketPrices.ts
  delete mode 100644 packages/shared/lib/core/market/actions/getMarketPrices.ts
@@ -1891,12 +1893,10 @@
  rename packages/shared/{ => src}/lib/core/ledger/helpers/index.ts (57%)
  rename packages/shared/{lib/core/app => src/lib/core/ledger}/index.ts (88%)
  rename packages/shared/{lib/core/ledger/interfaces/ledger-nano-status-polling-configuration.interface.ts => src/lib/core/ledger/interfaces/ledger-device-state-polling-configuration.interface.ts} (74%)
- rename packages/shared/{ => src}/lib/core/ledger/stores/index.ts (59%)
  rename packages/shared/{ => src}/lib/core/ledger/stores/ledger-nano-status.store.ts (55%)
  rename packages/shared/{ => src}/lib/core/ledger/stores/ledger-prepared-output.store.ts (53%)
  rename packages/shared/{ => src}/lib/core/ledger/stores/show-internal-verification-popup.ts (100%)
  rename packages/shared/{ => src}/lib/core/ledger/utils/formatAddressForLedger.ts (100%)
- rename packages/shared/{ => src}/lib/core/ledger/utils/index.ts (61%)
  rename packages/shared/{ => src}/lib/core/ledger/utils/isLedgerAppOpen.ts (59%)
  rename packages/shared/{ => src}/lib/core/ledger/utils/isLedgerDeviceMatchingActiveProfile.ts (62%)
  rename packages/shared/{ => src}/lib/core/ledger/utils/isLedgerError.ts (100%)
@@ -2171,7 +2171,7 @@
  rename packages/shared/{ => src}/lib/core/utils/enums/past-time-unit.enum.ts (100%)
  rename packages/shared/{ => src}/lib/core/utils/enums/time-period.enum.ts (100%)
  rename packages/shared/{ => src}/lib/core/utils/filter.ts (63%)
- rename packages/shared/{ => src}/lib/core/utils/index.ts (85%)
+ rename packages/shared/{ => src}/lib/core/utils/index.ts (89%)
  rename packages/shared/{ => src}/lib/core/utils/interfaces/date-difference.interface.ts (100%)
  rename packages/shared/{ => src}/lib/core/utils/interfaces/filter/date-filter-input.interface.ts (76%)
  rename packages/shared/{ => src}/lib/core/utils/interfaces/filter/filter-unit.interface.ts (93%)

diff --git a/packages/desktop/components/StatusTile.svelte b/packages/desktop/components/StatusTile.svelte
@@ -7,18 +7,20 @@
         iconName?: IconName
         iconColor?: string
         iconBackgroundColor?: string
+        warning?: string
         onClick?: () => void
     }
 </script>
 
 <script lang="ts">
-    import { Avatar, IconName, Text, Tile, Toggle } from '@bloomwalletio/ui'
+    import { Avatar, IconName, Text, Tile, Toggle, TooltipIcon } from '@bloomwalletio/ui'
     import { Logo } from '@ui'
     import { LogoName } from '@auxiliary/logo'
 
     export let statusTileProps: StatusTileProps
 
-    $: ({ checked, title, subtitle, iconName, iconColor, iconBackgroundColor, logo, onClick } = statusTileProps)
+    $: ({ checked, title, subtitle, iconName, iconColor, iconBackgroundColor, logo, warning, onClick } =
+        statusTileProps)
     $: backgroundColor = iconBackgroundColor ?? `${iconColor}/20`
 </script>
 
@@ -34,7 +36,12 @@
             {/if}
             <div>
                 <Text>{title}</Text>
-                <Text type="xs" textColor="secondary">{subtitle}</Text>
+                <div class="flex flex-row gap-1">
+                    <Text type="xs" textColor="secondary">{subtitle}</Text>
+                    {#if warning}
+                        <TooltipIcon icon={IconName.WarningCircle} tooltip={warning} textColor="warning" size="xs" />
+                    {/if}
+                </div>
             </div>
         </div>
         {#if onClick}

diff --git a/packages/desktop/components/popup/profileAuthPopups/ConnectLedgerPopup.svelte b/packages/desktop/components/popup/profileAuthPopups/ConnectLedgerPopup.svelte
@@ -1,22 +1,30 @@
 <script lang="ts">
     import { Alert } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
-    import { LedgerAppName, LedgerConnectionState, ledgerConnectionState } from '@core/ledger'
+    import {
+        LedgerAppName,
+        LedgerConnectionState,
+        MINIMUM_SUPPORTED_LEDGER_APP_VERSION,
+        ledgerConnectionAppState,
+    } from '@core/ledger'
     import { closeProfileAuthPopup } from '@desktop/auxiliary/popup'
     import { LedgerStatusIllustration, LedgerIllustrationVariant } from '@ui'
     import PopupTemplate from '../PopupTemplate.svelte'
 
     export let ledgerAppName: LedgerAppName
     export let onSuccess: () => void
 
-    $: isDisconnected = $ledgerConnectionState === LedgerConnectionState.Disconnected
-    $: isLocked = $ledgerConnectionState === LedgerConnectionState.Locked
-    $: isCorrectAppOpen = $ledgerConnectionState === (ledgerAppName as unknown as LedgerConnectionState)
+    $: isDisconnected = $ledgerConnectionAppState?.state === LedgerConnectionState.Disconnected
+    $: isLocked = $ledgerConnectionAppState?.state === LedgerConnectionState.Locked
+    $: isOpen = $ledgerConnectionAppState?.state === LedgerConnectionState.AppOpen
+    $: isCorrectApp = $ledgerConnectionAppState?.app === ledgerAppName
+    $: isUnsupportedVersion = $ledgerConnectionAppState?.state === LedgerConnectionState.UnsupportedVersion
+    $: minimumVersion = MINIMUM_SUPPORTED_LEDGER_APP_VERSION[ledgerAppName]
 
     let ledgerSectionProps: { color: string; text: string; variant: LedgerIllustrationVariant }
-    $: $ledgerConnectionState, setLedgerSectionProps()
+    $: $ledgerConnectionAppState, setLedgerSectionProps()
     function setLedgerSectionProps(): void {
-        if (isCorrectAppOpen) {
+        if (isOpen && isCorrectApp) {
             continueFlow()
         } else if (isDisconnected) {
             ledgerSectionProps = {
@@ -30,6 +38,15 @@
                 text: localize('popups.ledgerNotConnected.locked'),
                 variant: LedgerIllustrationVariant.Pin,
             }
+        } else if (isCorrectApp && isUnsupportedVersion) {
+            ledgerSectionProps = {
+                color: 'danger',
+                text: localize('popups.ledgerNotConnected.unsupportedVersion', {
+                    appName: ledgerAppName,
+                    minimumVersion,
+                }),
+                variant: LedgerIllustrationVariant.UnsupportedVersion,
+            }
         } else {
             const variant = getIllustrationVariant(ledgerAppName)
             ledgerSectionProps = {
@@ -48,6 +65,8 @@
                 return LedgerIllustrationVariant.OpenShimmer
             case LedgerAppName.Ethereum:
                 return LedgerIllustrationVariant.OpenEthereum
+            default:
+                return LedgerIllustrationVariant.Warning
         }
     }
 

diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -60,7 +60,7 @@
         "mini-css-extract-plugin": "2.9.0",
         "node-loader": "2.0.0",
         "npm-run-all": "4.1.5",
-        "postcss-load-config": "5.0.3",
+        "postcss-load-config": "6.0.1",
         "postcss-url": "10.1.3",
         "webpack": "5.93.0",
         "webpack-cli": "5.1.4",

diff --git a/packages/desktop/views/dashboard/components/LedgerStatusTile.svelte b/packages/desktop/views/dashboard/components/LedgerStatusTile.svelte
@@ -3,39 +3,55 @@
     import { IconName } from '@bloomwalletio/ui'
     import { StatusTile, StatusTileProps } from '@components'
     import { localize } from '@core/i18n'
-    import { LedgerConnectionState, ledgerConnectionState } from '@core/ledger'
+    import {
+        LedgerAppName,
+        LedgerConnectionState,
+        MINIMUM_SUPPORTED_LEDGER_APP_VERSION,
+        ledgerConnectionAppState,
+    } from '@core/ledger'
+    import { ILedgerConnectionAppState } from '@core/ledger/interfaces/ledger-connection-app-state.interface'
 
-    $: statusTileProps = setStatusTileProps($ledgerConnectionState)
+    $: statusTileProps = setStatusTileProps($ledgerConnectionAppState)
 
-    function setStatusTileProps(connectionState: LedgerConnectionState): StatusTileProps {
+    function setStatusTileProps(connectionState: ILedgerConnectionAppState): StatusTileProps {
         let subtitle: string
-        let logo: LogoName
-        let iconName: IconName
-        let iconColor: string
-        let iconBackgroundColor: string
+        let logo: LogoName | undefined = undefined
+        let iconName: IconName | undefined = undefined
+        let iconColor: string | undefined = undefined
+        let iconBackgroundColor: string | undefined = undefined
 
-        switch (connectionState) {
+        switch (connectionState?.state) {
             case LedgerConnectionState.AppNotOpen:
                 subtitle = localize('general.unlocked')
                 iconName = IconName.Hardware
                 iconColor = 'neutral'
                 break
-            case LedgerConnectionState.IotaAppOpen:
-                subtitle = 'IOTA App'
-                iconName = IconName.Iota
-                iconColor = '#ffffff'
-                iconBackgroundColor = '#000000'
-                break
-            case LedgerConnectionState.ShimmerAppOpen:
-                subtitle = 'Shimmer App'
-                iconName = IconName.Shimmer
-                iconColor = 'shimmer'
-                iconBackgroundColor = 'shimmer-background'
-                break
-            case LedgerConnectionState.EthereumAppOpen:
-                subtitle = 'Ethereum App'
-                logo = LogoName.Ethereum
-                iconBackgroundColor = 'ethereum'
+            case LedgerConnectionState.AppOpen:
+            case LedgerConnectionState.UnsupportedVersion:
+                switch (connectionState?.app) {
+                    case LedgerAppName.Iota:
+                        subtitle = 'IOTA App'
+                        iconName = IconName.Iota
+                        iconColor = '#ffffff'
+                        iconBackgroundColor = '#000000'
+                        break
+                    case LedgerAppName.Shimmer:
+                        subtitle = 'Shimmer App'
+                        iconName = IconName.Shimmer
+                        iconColor = 'shimmer'
+                        iconBackgroundColor = 'shimmer-background'
+                        break
+                    case LedgerAppName.Ethereum:
+                        subtitle = 'Ethereum App'
+                        logo = LogoName.Ethereum
+                        iconBackgroundColor = 'ethereum'
+                        break
+                    default:
+                        subtitle = localize('general.disconnected')
+                        iconName = IconName.ZapOff
+                        iconColor = 'danger'
+                        break
+                }
                 break
             case LedgerConnectionState.Locked:
                 subtitle = localize('general.locked')
@@ -57,6 +73,13 @@
             iconName,
             iconColor,
             iconBackgroundColor,
+            warning:
+                connectionState?.state === LedgerConnectionState.UnsupportedVersion && connectionState.app
+                    ? localize('views.onboarding.createFromLedger.connectLedger.unsupportedVersion', {
+                          appName: connectionState.app,
+                          minimumVersion: MINIMUM_SUPPORTED_LEDGER_APP_VERSION[connectionState.app],
+                      })
+                    : undefined,
         }
     }
 </script>