Merge pull request #168 from input-output-hk/feat/add-wallet-options

feat: add new wallet types to wallet option component

Author: greatertomi

src/design-system/profile-dropdown/profile-dropdown-wallet-icon.component.tsx

@@ -20,6 +20,8 @@ const icons: Record<WalletType, FC<React.SVGProps<SVGSVGElement>>> = {
   hot: HotWallet,
   cold: ColdWallet,
   shared: SharedWallet,
+  midnight: HotWallet,
+  bitcoin: HotWallet,
 };
 
 export const WalletIcon = ({ type, testId }: Readonly<Props>): JSX.Element => {

src/design-system/profile-dropdown/profile-dropdown-wallet-icon.css.ts

@@ -35,6 +35,12 @@ export const container = recipe({
           fontSize: '24px',
         },
       ]),
+      midnight: sx({
+        background: '$data_bright_blue',
+      }),
+      bitcoin: sx({
+        background: '$data_orange',
+      }),
     },
   },
 

src/design-system/profile-dropdown/profile-dropdown-wallet-option.stories.tsx

@@ -84,6 +84,20 @@ export const Overview = (): JSX.Element => (
                   type="shared"
                 />
               </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Bitcoin Wallet"
+                  subtitle="Account #0"
+                  type="bitcoin"
+                />
+              </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Midnight Wallet"
+                  subtitle="Account #0"
+                  type="midnight"
+                />
+              </Variants.Cell>
             </Variants.Row>
           </Variants.Table>
         </Flex>
@@ -122,6 +136,22 @@ export const Overview = (): JSX.Element => (
                   onOpenEditWallet={action('onOpenEditWallet')}
                 />
               </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Bitcoin Wallet"
+                  subtitle="Lace Team"
+                  type="bitcoin"
+                  onOpenEditWallet={action('onOpenEditWallet')}
+                />
+              </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Midnight Wallet"
+                  subtitle="Lace Team"
+                  type="midnight"
+                  onOpenEditWallet={action('onOpenEditWallet')}
+                />
+              </Variants.Cell>
             </Variants.Row>
           </Variants.Table>
         </Flex>

src/design-system/profile-dropdown/profile-dropdown.data.ts

@@ -1 +1 @@
-export type WalletType = 'cold' | 'hot' | 'shared';
+export type WalletType = 'cold' | 'hot' | 'shared' | 'midnight' | 'bitcoin';

src/design-tokens/colors.data.ts

@@ -209,6 +209,7 @@ export const colors = {
   $data_yellow: '',
   $data_orange: '',
   $white: '',
+  $data_bright_blue: '',
 
   $educational_card_root_container_bgColor: '',
   $educational_card_root_container_borderColor: '',
@@ -329,6 +330,7 @@ export const lightColorScheme = {
   $secondary_cream: '#FCF5E3',
   $secondary_data_green: '#2CB67D',
   $secondary_data_blue: '#3489F7',
+  $secondary_data_bright_blue: '#0000FE',
 } as const;
 
 export const darkColorScheme = {
@@ -355,4 +357,5 @@ export const darkColorScheme = {
   $secondary_lace_yellow: '#FDC300',
   $secondary_data_green: '#2CB67D',
   $secondary_data_blue: '#3489F7',
+  $secondary_data_bright_blue: '#0000FE',
 } as const;

src/design-tokens/theme/dark-theme.css.ts

@@ -167,7 +167,7 @@ const colors: Colors = {
 
   $assets_table_container_bgColor_hover: darkColorScheme.$primary_mid_grey,
 
-  $assets_table_badge_bgColor: '#0000FE',
+  $assets_table_badge_bgColor: lightColorScheme.$secondary_data_bright_blue,
   $assets_table_badge_textColor: lightColorScheme.$primary_white,
 
   $dialog_container_bgColor: darkColorScheme.$primary_light_black,
@@ -296,6 +296,7 @@ const colors: Colors = {
   $data_yellow: darkColorScheme.$secondary_lace_yellow,
   $data_orange: darkColorScheme.$secondary_data_orange,
   $white: darkColorScheme.$primary_white,
+  $data_bright_blue: darkColorScheme.$secondary_data_bright_blue,
 
   $educational_card_root_container_bgColor: darkColorScheme.$primary_mid_black,
   $educational_card_root_container_borderColor: colorTransparent,

src/design-tokens/theme/light-theme.css.ts

@@ -180,7 +180,7 @@ const colors: Colors = {
 
   $assets_table_container_bgColor_hover: lightColorScheme.$primary_light_grey,
 
-  $assets_table_badge_bgColor: '#0000FE',
+  $assets_table_badge_bgColor: lightColorScheme.$secondary_data_bright_blue,
   $assets_table_badge_textColor: lightColorScheme.$primary_white,
 
   $dialog_container_bgColor: lightColorScheme.$primary_white,
@@ -316,6 +316,7 @@ const colors: Colors = {
   $data_yellow: lightColorScheme.$secondary_lace_yellow,
   $data_orange: lightColorScheme.$secondary_data_orange,
   $white: lightColorScheme.$primary_white,
+  $data_bright_blue: lightColorScheme.$secondary_data_bright_blue,
 
   $educational_card_root_container_bgColor: lightColorScheme.$primary_white,
   $educational_card_root_container_borderColor: