[stablecoin-issuance] update the datamanagertable to display the uplo…

…aded logo along with the name. Update onhover styling so it does not overlap with the logo. (#14664)

This change updates the stablecoin issuance ui to display the logo alongside the name.
This change was achieved by adding the ability to add custom base 64 icons to the Table component.

Border styling on hover was also updated to encompass the elements within a table row.

![Screenshot 2025-01-03 at 2.32.04 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/AMCzR6ldnuRamjbkxWC9/20d3b69d-63c1-4da1-96aa-cdb6844b8fae.png)

GitOrigin-RevId: 1ae4cc2e2eafc53a8913334ac0aa64638df8c96e

packages/ui/src/components/Table/Table.tsx

@@ -51,6 +51,7 @@ export type TableCell =
 type ObjectCell = {
   text: string;
   icon?: IconName | undefined;
+  base64icon?: string | undefined;
 };
 const isObjectCell = (value: unknown): value is ObjectCell => {
   return isObject(value) && "text" in value && typeof value.text === "string";
@@ -150,24 +151,26 @@ export function Table<T extends Record<string, unknown>>({
         accessorKey: column.accessorKey.toString(),
         cell: (context: CellContext<T, TableCell>) => {
           const value = context.getValue();
-
           let content: ReactNode = null;
           let icon = null;
           if (isObjectCell(value)) {
+            const base64icon = value.base64icon ? (
+              <Base64Icon src={value.base64icon} alt="Icon" />
+            ) : null;
             icon = value.icon ? (
               <Icon name={value.icon} width={14} mr={4} color="c4Neutral" />
             ) : null;
             if (isMultilineCell(value)) {
               content = (
                 <LineClampSpan>
-                  {icon}
+                  {base64icon ? base64icon : icon}
                   {value.text}
                 </LineClampSpan>
               );
             } else {
               content = (
                 <Fragment>
-                  {icon}
+                  {base64icon ? base64icon : icon}
                   {value.text}
                 </Fragment>
               );
@@ -432,6 +435,14 @@ const LineClampSpan = styled.span`
   ${lineClamp(2)}
 `;
 
+const Base64Icon = styled.img`
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  border-radius: 4px;
+  margin-right: 12px;
+`;
+
 const cellPaddingPx = 15;
 const StyledTable = styled.table<StyledTableProps>`
   position: relative;
@@ -478,10 +489,10 @@ const StyledTable = styled.table<StyledTableProps>`
       position: absolute;
       /* Position offsets inside trs do not properly follow relatively positioned
          parents in Safari (see bug https://bit.ly/49dViWy), use margin instead: */
-      margin-top: 5px;
       left: -12px;
       width: calc(100% + 24px);
-      height: 32px;
+      top: 0;
+      bottom: 0px;
       border: 1px solid ${({ theme }) => theme.c1Neutral};
       pointer-events: none;
     }