feat(Labels): add tags to AddressRow

Lily-Technologies · Oct 14, 2022 · 20cd7c6 · 20cd7c6
1 parent 5a658bb
commit 20cd7c6
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 33 deletions.
diff --git a/apps/frontend/src/pages/Vault/Settings/Addresses/AddressRow.tsx b/apps/frontend/src/pages/Vault/Settings/Addresses/AddressRow.tsx
@@ -1,39 +1,65 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { Badge } from 'src/components';
 
+import { LabelTag } from './LabelTag';
+
 import { gray500 } from 'src/utils/colors';
 import { classNames } from 'src/utils/other';
 
-import { Address } from '@lily/types';
+import { Address, AddressLabel } from '@lily/types';
+import { PlatformContext } from 'src/context';
 
 interface Props {
   address: Address;
   status: 'used' | 'unused';
   onClick: () => void;
 }
 
-const AddressRow = ({ address, status, onClick }: Props) => (
-  <tr className='cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700' onClick={() => onClick()}>
-    <td className='py-2'>
-      <UtxoHeader className='text-gray-900 dark:text-gray-200'>{address.address}</UtxoHeader>
-      <UtxoSubheader>{address.bip32derivation[0].path}</UtxoSubheader>
-    </td>
-    <td className='text-right'>
-      <Badge
-        className={classNames(
-          status === 'used'
-            ? 'bg-yellow-100 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-100'
-            : 'bg-green-100 dark:bg-green-600 text-green-800 dark:text-green-100'
-        )}
-        style={{ marginRight: '1em' }}
-      >
-        {status}
-      </Badge>
-    </td>
-  </tr>
-);
+const AddressRow = ({ address, status, onClick }: Props) => {
+  const { platform } = useContext(PlatformContext);
+  const [labels, setLabels] = useState<AddressLabel[]>([]);
+
+  useEffect(() => {
+    const retrieveLabels = async () => {
+      const currentLabels = await platform.getAddressLabels(address.address);
+      setLabels(currentLabels);
+    };
+    retrieveLabels();
+  }, [address]);
+
+  return (
+    <tr
+      className='cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 py-2 items-center flex justify-between'
+      onClick={() => onClick()}
+    >
+      <td className=''>
+        <UtxoHeader className='text-gray-900 dark:text-gray-200'>{address.address}</UtxoHeader>
+        {/* <UtxoSubheader>{address.bip32derivation[0].path}</UtxoSubheader> */}
+      </td>
+      <td className='flex justify-end items-center space-x-1'>
+        <ul className=''>
+          {labels.map((label) => (
+            <li className='inline' key={label.id}>
+              <LabelTag label={label} />
+            </li>
+          ))}
+        </ul>
+        <Badge
+          className={classNames(
+            status === 'used'
+              ? 'bg-yellow-100 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-100'
+              : 'bg-green-100 dark:bg-green-600 text-green-800 dark:text-green-100'
+          )}
+          style={{ marginRight: '1em' }}
+        >
+          {status}
+        </Badge>
+      </td>
+    </tr>
+  );
+};
 
 const UtxoHeader = styled.div`
   font-size: 0.875rem;

diff --git a/apps/frontend/src/pages/Vault/Settings/Addresses/LabelTag.tsx b/apps/frontend/src/pages/Vault/Settings/Addresses/LabelTag.tsx
@@ -4,23 +4,27 @@ import { AddressLabel } from '@lily/types';
 
 interface Props {
   label: AddressLabel;
-  deleteLabel: (id: number) => void;
+  deleteLabel?: (id: number) => void;
 }
 
 export const LabelTag = ({ label, deleteLabel }: Props) => {
   return (
     <span className='inline-flex whitespace-nowrap items-center rounded-full bg-slate-100 py-0.5 pl-2.5 pr-1 text-sm font-medium text-slate-700'>
       {label.label}
-      <button
-        type='button'
-        className='cursor-pointer ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-slate-400 hover:bg-slate-200 hover:text-slate-500 focus:bg-slate-500 focus:text-white focus:outline-none'
-        onClick={() => deleteLabel(label.id)}
-      >
-        <span className='sr-only'>Remove {label.label} label</span>
-        <svg className='h-2 w-2' stroke='currentColor' fill='none' viewBox='0 0 8 8'>
-          <path strokeLinecap='round' strokeWidth='1.5' d='M1 1l6 6m0-6L1 7' />
-        </svg>
-      </button>
+      {deleteLabel ? (
+        <button
+          type='button'
+          className='cursor-pointer ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full text-slate-400 hover:bg-slate-200 hover:text-slate-500 focus:bg-slate-500 focus:text-white focus:outline-none'
+          onClick={() => {
+            deleteLabel(label.id);
+          }}
+        >
+          <span className='sr-only'>Remove {label.label} label</span>
+          <svg className='h-2 w-2' stroke='currentColor' fill='none' viewBox='0 0 8 8'>
+            <path strokeLinecap='round' strokeWidth='1.5' d='M1 1l6 6m0-6L1 7' />
+          </svg>
+        </button>
+      ) : null}
     </span>
   );
 };