Merge pull request #70 from input-output-hk/feat/add-edit-to-wallet-option

feat: add edit to wallet option

Author: greatertomi

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

@@ -2,9 +2,9 @@ import type { ComponentPropsWithoutRef } from 'react';
 import React from 'react';
 
 import ChevronRight from '@icons/ChevronRightThinComponent';
+import EditComponent from '@icons/EditComponent';
 import classNames from 'classnames';
 
-import { Box } from '../box';
 import { Icon as IconButton } from '../control-buttons';
 import { Flex } from '../flex';
 
@@ -21,6 +21,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   profile?: ProfileType;
   type: WalletType;
   onOpenAccountsMenu?: () => void;
+  onOpenEditWallet?: () => void;
 };
 
 export const WalletOption = ({
@@ -32,6 +33,7 @@ export const WalletOption = ({
   profile,
   type,
   onOpenAccountsMenu,
+  onOpenEditWallet,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
@@ -53,15 +55,23 @@ export const WalletOption = ({
           type={type}
           testId="wallet-option"
         />
-        {type !== 'shared' && onOpenAccountsMenu && (
-          <Box ml="$10">
-            <Flex
-              className={cx.icon}
-              w="$24"
-              h="$24"
-              alignItems="center"
-              justifyContent="center"
-            >
+        <Flex ml="$10" gap="$4">
+          {onOpenEditWallet && (
+            <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
+              <IconButton
+                onClick={(event): void => {
+                  onOpenEditWallet?.();
+                  event.stopPropagation();
+                }}
+                icon={<EditComponent />}
+                size="extraSmall"
+                as="div"
+                testId="wallet-option-edit-wallet-button"
+              />
+            </Flex>
+          )}
+          {type !== 'shared' && onOpenAccountsMenu && (
+            <Flex w="$24" h="$24" alignItems="center" justifyContent="center">
               <IconButton
                 onClick={(event): void => {
                   onOpenAccountsMenu?.();
@@ -73,8 +83,8 @@ export const WalletOption = ({
                 testId="wallet-option-accounts-menu-button"
               />
             </Flex>
-          </Box>
-        )}
+          )}
+        </Flex>
       </Flex>
     </button>
   );

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

@@ -42,5 +42,3 @@ export const container = style([
     },
   },
 ]);
-
-export const icon = style({});

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { action } from '@storybook/addon-actions';
 import type { Meta } from '@storybook/react';
 
 import { page, Variants, Section, UIStateTable } from '../decorators';
@@ -91,6 +92,45 @@ export const Overview = (): JSX.Element => (
 
       <Divider my="$64" />
 
+      <Section title="Example with actions">
+        <Flex flexDirection="column" alignItems="center" w="$fill">
+          <Variants.Table
+            headers={['Hot wallet', 'Cold wallet', 'Shared wallet']}
+          >
+            <Variants.Row>
+              <Variants.Cell>
+                <WalletOption
+                  title="Alice's wallet"
+                  subtitle="Account #0"
+                  type="hot"
+                  onOpenAccountsMenu={action('onOpenAccountsMenu')}
+                  onOpenEditWallet={action('onOpenEditWallet')}
+                />
+              </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Alice's wallet"
+                  subtitle="Account #0"
+                  type="cold"
+                  onOpenAccountsMenu={action('onOpenAccountsMenu')}
+                  onOpenEditWallet={action('onOpenEditWallet')}
+                />
+              </Variants.Cell>
+              <Variants.Cell>
+                <WalletOption
+                  title="Shared Wallet"
+                  subtitle="Lace Team"
+                  type="shared"
+                  onOpenEditWallet={action('onOpenEditWallet')}
+                />
+              </Variants.Cell>
+            </Variants.Row>
+          </Variants.Table>
+        </Flex>
+      </Section>
+
+      <Divider my="$64" />
+
       <Section title="Main components">
         <UIStateTable>
           <WalletOptionUIStates />

src/icons/EditComponent.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+const SvgEditComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M12.5932 3.4068L13.0351 2.96486V2.96486L12.5932 3.4068ZM4.94445 13.0197V13.6447C5.11021 13.6447 5.26918 13.5789 5.38639 13.4617L4.94445 13.0197ZM3 13.0197H2.375C2.375 13.3649 2.65482 13.6447 3 13.6447V13.0197ZM3 11.0358L2.55806 10.5939C2.44085 10.7111 2.375 10.87 2.375 11.0358H3ZM11.071 3.84874C11.3693 3.55042 11.8529 3.55042 12.1513 3.84874L13.0351 2.96486C12.2487 2.17838 10.9735 2.17838 10.1871 2.96486L11.071 3.84874ZM12.1513 3.84874C12.4496 4.14706 12.4496 4.63073 12.1513 4.92905L13.0351 5.81293C13.8216 5.02646 13.8216 3.75133 13.0351 2.96486L12.1513 3.84874ZM12.1513 4.92905L4.50251 12.5778L5.38639 13.4617L13.0351 5.81293L12.1513 4.92905ZM4.94445 12.3947H3V13.6447H4.94445V12.3947ZM10.1871 2.96486L2.55806 10.5939L3.44194 11.4777L11.071 3.84874L10.1871 2.96486ZM2.375 11.0358V13.0197H3.625V11.0358H2.375ZM9.35373 4.68208L11.3179 6.64627L12.2018 5.76238L10.2376 3.79819L9.35373 4.68208Z"
+      fill="#3D3B39"
+    />
+  </svg>
+);
+export default SvgEditComponent;

src/icons/index.ts

@@ -78,3 +78,4 @@ export { default as WalletComponent } from './WalletComponent';
 export { default as WarningIconCircleComponent } from './WarningIconCircleComponent';
 export { default as WarningIconTriangleSolidComponent } from './WarningIconTriangleSolidComponent';
 export { default as WarningIconTriangleComponent } from './WarningIconTriangleComponent';
+export { default as EditComponent } from './EditComponent';