enhancement: add account colour to recipient input (#5211)

* enhancement: add account colour to recipient input * refactor: circle into ColoredCircle component Co-authored-by: Mark Nardi <mark.nardi@iota.org>
iotaledger · Nov 15, 2022 · 4db5079 · 4db5079
1 parent a2fdb3f
commit 4db5079
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 37 deletions.
diff --git a/packages/shared/components/atoms/ColoredCircle.svelte b/packages/shared/components/atoms/ColoredCircle.svelte
@@ -0,0 +1,12 @@
+<script lang="typescript">
+    export let color = false
+    export let size: number = 3
+</script>
+
+<div class="circle self-center rounded-full w-{size} h-{size}" style="--color: {color};" />
+
+<style type="text/scss">
+    .circle {
+        background-color: var(--color);
+    }
+</style>
diff --git a/packages/shared/components/atoms/index.js b/packages/shared/components/atoms/index.js
@@ -7,6 +7,7 @@ export * from './tiles'
 
 export { default as MenuItem } from './MenuItem.svelte'
 export { default as BalanceSummarySection } from './BalanceSummarySection.svelte'
+export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as Icon } from './Icon.svelte'
 export { default as LedgerAnimation } from './LedgerAnimation.svelte'
 export { default as SubjectBox } from './SubjectBox.svelte'

diff --git a/packages/shared/components/atoms/labels/AccountLabel.svelte b/packages/shared/components/atoms/labels/AccountLabel.svelte
@@ -1,41 +1,14 @@
 <script lang="typescript">
     import { IAccountState } from '@core/account'
-    import { Text, FontWeight } from 'shared/components/'
+    import { Text, FontWeight, ColoredCircle } from 'shared/components/'
 
     export let account: IAccountState
     export let selected = true
 </script>
 
 <div class="flex flex-row items-center space-x-3">
-    <div class="circle" style="--account-color: {account?.color};" />
+    <ColoredCircle color={account?.color} />
     <Text fontSize="14" fontWeight={FontWeight.semibold} classes={selected ? '' : 'opacity-50'}>
         {account?.name}
     </Text>
 </div>
-
-<style type="text/scss">
-    .circle {
-        @apply relative;
-        @apply rounded-full;
-        @apply w-3;
-        @apply h-3;
-        background-color: var(--account-color);
-        &:after {
-            @apply absolute;
-            @apply rounded-full;
-            @apply w-3;
-            @apply h-3;
-            @apply border;
-            @apply border-solid;
-            @apply border-gray-700;
-            @apply bg-transparent;
-            @apply opacity-10;
-            @apply top-1/2;
-            @apply left-1/2;
-            @apply transform;
-            @apply -translate-x-1/2;
-            @apply -translate-y-1/2;
-            content: '';
-        }
-    }
-</style>
diff --git a/packages/shared/components/inputs/RecipientInput.svelte b/packages/shared/components/inputs/RecipientInput.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
     import { networkHrp } from '@core/network'
     import { validateBech32Address } from '@core/utils'
-    import { Modal, SelectorInput, IOption } from 'shared/components'
+    import { Modal, SelectorInput, IOption, ColoredCircle } from 'shared/components'
     import { visibleActiveAccounts } from '@core/profile'
     import { getSubjectFromAddress, Subject } from '@core/wallet'
-    import { selectedAccountIndex } from '@core/account'
+    import { getAccountColorById, selectedAccountIndex } from '@core/account'
 
     export let recipient: Subject
     export let disabled = false
@@ -22,6 +22,7 @@
     const accountOptions: IOption[] = $visibleActiveAccounts
         ?.filter((account) => account.index !== $selectedAccountIndex)
         ?.map((account) => ({
+            id: account.index,
             key: account.name,
             value: account.depositAddress,
         }))
@@ -52,4 +53,7 @@
     {disabled}
     options={accountOptions}
     {...$$restProps}
-/>
+    let:option
+>
+    <ColoredCircle color={getAccountColorById(option?.id)} />
+</SelectorInput>
diff --git a/packages/shared/components/interfaces/option.interface.ts b/packages/shared/components/interfaces/option.interface.ts
@@ -1,4 +1,5 @@
 export interface IOption {
+    id?: number
     key?: string
     value: string
 }
diff --git a/packages/shared/components/molecules/SelectorInput.svelte b/packages/shared/components/molecules/SelectorInput.svelte
@@ -84,7 +84,7 @@
                         on:click={() => handleClick(option)}
                         class="w-full flex flex-row flex-1 justify-between items-center px-2 py-3 rounded-lg hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20"
                     >
-                        <div class="flex flex-row gap-2 justify-start items-center" style="max-width: 50%;">
+                        <div class="flex flex-row gap-3 justify-start items-center" style="max-width: 50%;">
                             <slot {option} {index}>
                                 <!-- Contains Custom Selector -->
                             </slot>
@@ -93,12 +93,14 @@
                                 fontSize="sm"
                                 fontWeight={FontWeight.medium}
                                 color="gray-800"
-                                classes="truncate">{option.key}</Text
+                                classes="truncate"
                             >
+                                {option.key}
+                            </Text>
                         </div>
-                        <Text type={TextType.pre} fontSize="sm" color="gray-600"
-                            >{truncateString(option.value, 9, 9)}</Text
-                        >
+                        <Text type={TextType.pre} fontSize="sm" color="gray-600">
+                            {truncateString(option.value, 9, 9)}
+                        </Text>
                     </button>
                 {/each}
             </picker-modal>

diff --git a/packages/shared/lib/core/account/utils/getAccountColorById.ts b/packages/shared/lib/core/account/utils/getAccountColorById.ts
@@ -0,0 +1,6 @@
+import { visibleActiveAccounts } from '@core/profile/stores/active-accounts.store'
+import { get } from 'svelte/store'
+
+export function getAccountColorById(id: number): string {
+    return get(visibleActiveAccounts)?.find((account) => account.index === id)?.color
+}
diff --git a/packages/shared/lib/core/account/utils/index.ts b/packages/shared/lib/core/account/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './getAccountColorById'
 export * from './getBoundAccount'
 export * from './getDepositAddress'
 export * from './getIconColorFromString'