fix the compacttable

kadena-community · Nov 7, 2024 · 6760af5 · 6760af5
1 parent f34f2e2
commit 6760af5
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 75 deletions.
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatCreationDateWrapper.tsx
@@ -2,7 +2,11 @@ import { IPactCommand } from '@kadena/client';
 import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
 
-export const FormatCreationDateWrapper: () => FC<ICompactTableFormatterProps> =
+type IProps = Exclude<ICompactTableFormatterProps, 'value'> & {
+  value: string;
+};
+
+export const FormatCreationDateWrapper: () => FC<IProps> =
   () =>
   ({ value }) => {
     const date = new Date(

diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatHash.tsx
@@ -2,7 +2,11 @@ import { shorten } from '@/utils/helpers';
 import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
 
-export const FormatHash: () => FC<ICompactTableFormatterProps> =
+type IProps = Exclude<ICompactTableFormatterProps, 'value'> & {
+  value: string;
+};
+
+export const FormatHash: () => FC<IProps> =
   () =>
   ({ value }) =>
     shorten(value);
diff --git a/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx b/packages/apps/dev-wallet/src/Components/Table/FormatKeys.tsx
@@ -1,17 +1,15 @@
-import { IKeySet } from '@/modules/account/account.repository';
 import { shorten } from '@/utils/helpers';
 import { MonoKey } from '@kadena/kode-icons/system';
 import { Stack, Text } from '@kadena/kode-ui';
 import { ICompactTableFormatterProps } from '@kadena/kode-ui/patterns';
-import type { FC } from 'react';
 
-export const FormatKeys: () => FC<ICompactTableFormatterProps> =
+export const FormatKeys =
   () =>
-  ({ value }) => {
-    console.log(1111, value);
-    const keyset: string[] = value.length > 1 ? (value[1] as string) : [];
+  ({ value }: ICompactTableFormatterProps) => {
+    if (typeof value === 'string') return null;
+    const keyset: string[] =
+      value.length > 1 ? (value[1] as unknown as string[]) : [];
 
-    console.log(keyset);
     return (
       <Stack gap={'sm'} alignItems={'center'}>
         {value[0]}:

diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/KeySets.tsx
@@ -1,9 +1,6 @@
-import { ListItem } from '@/Components/ListItem/ListItem';
 import { FormatKeys } from '@/Components/Table/FormatKeys';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { shorten } from '@/utils/helpers';
-import { MonoKey } from '@kadena/kode-icons/system';
-import { Button, Heading, Stack, Text } from '@kadena/kode-ui';
+import { Button, Heading, Stack } from '@kadena/kode-ui';
 import { CompactTable, useLayout } from '@kadena/kode-ui/patterns';
 import { CreateKeySetForm } from './CreateKeySetForm';
 

diff --git a/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx b/packages/apps/explorer/src/components/CompactTable/FormatLinkWrapper.tsx
@@ -4,7 +4,6 @@ import type {
   ICompactTableFormatterProps,
 } from '@kadena/kode-ui/patterns';
 import { CompactTableFormatters } from '@kadena/kode-ui/patterns';
-import type { FC } from 'react';
 import React from 'react';
 
 const formatURL = (url: string, value: string): string => {
@@ -14,11 +13,20 @@ const formatURL = (url: string, value: string): string => {
   return url;
 };
 
-export const FormatLinkWrapper = ({
-  url,
-}: ICompactTableFormatterLinkProps): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
-    <Link href={formatURL(url, value)} passHref legacyBehavior>
+export const valueToString = (value: string | string[]): string => {
+  if (typeof value === 'object') {
+    return value.reduce((acc, val) => {
+      if (!val) return acc;
+      return `${acc}${val} `;
+    }, '');
+  }
+
+  return value;
+};
+
+export const FormatLinkWrapper = ({ url }: ICompactTableFormatterLinkProps) => {
+  const Component = ({ value }: ICompactTableFormatterProps) => (
+    <Link href={formatURL(url, valueToString(value))} passHref legacyBehavior>
       {CompactTableFormatters.FormatLink({ url })({ value })}
     </Link>
   );

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAccount.tsx
@@ -1,8 +1,8 @@
-import type { FC } from 'react';
 import { maskValue } from './../../../components';
 import type { ICompactTableFormatterProps } from './types';
+import { valueToString } from './utils';
 
-export const FormatAccount: () => FC<ICompactTableFormatterProps> =
+export const FormatAccount =
   () =>
-  ({ value }) =>
-    value && maskValue(value);
+  ({ value }: ICompactTableFormatterProps) =>
+    value && maskValue(valueToString(value));
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatAmount.tsx
@@ -1,11 +1,11 @@
-import type { FC } from 'react';
 import React from 'react';
 import type { ICompactTableFormatterProps } from './types';
+import { valueToString } from './utils';
 
-export const FormatAmount = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => {
+export const FormatAmount = () => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
     if (!value) return null;
-    return <>{parseFloat(value).toLocaleString()} KDA</>;
+    return <>{parseFloat(valueToString(value)).toLocaleString()} KDA</>;
   };
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatDefault.tsx
@@ -1,17 +1,10 @@
-import type { FC } from 'react';
 import React from 'react';
 import type { ICompactTableFormatterProps } from './types';
+import { valueToString } from './utils';
 
-export const FormatDefault = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => {
-    if (typeof value === 'object') {
-      return value.reduce((acc, val) => {
-        if (!val) return acc;
-        return `${acc}${val} `;
-      }, '');
-    }
-
-    return <>{value}</>;
+export const FormatDefault = () => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
+    return <>{valueToString(value)}</>;
   };
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatJsonParse.tsx
@@ -1,14 +1,16 @@
-import type { FC } from 'react';
 import React from 'react';
 import { dataFieldClass } from '../styles.css';
 import { Text } from './../../../components';
 import type { ICompactTableFormatterProps } from './types';
 
-export const FormatJsonParse = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
-    <Text variant="code" className={dataFieldClass}>
-      {!!value && value?.length > 0 ? JSON.parse(value) : value}
-    </Text>
-  );
+export const FormatJsonParse = () => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
+    const valueString = typeof value === 'string' ? JSON.parse(value) : value;
+    return (
+      <Text variant="code" className={dataFieldClass}>
+        {!!value && value?.length > 0 ? JSON.parse(valueString) : value}
+      </Text>
+    );
+  };
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLink.tsx
@@ -1,5 +1,4 @@
 import { MonoArrowOutward } from '@kadena/kode-icons';
-import type { FC } from 'react';
 import React from 'react';
 import {
   dataFieldClass,
@@ -12,6 +11,7 @@ import type {
   ICompactTableFormatterLinkProps,
   ICompactTableFormatterProps,
 } from './types';
+import { valueToString } from './utils';
 
 const formatURL = (url: string, value: string): string => {
   if (url.includes(':value')) {
@@ -20,21 +20,22 @@ const formatURL = (url: string, value: string): string => {
   return url;
 };
 
-export const FormatLink = ({
-  url,
-}: ICompactTableFormatterLinkProps): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
-    <Stack alignItems="center" className={linkWrapperClass}>
-      <a href={formatURL(url, value)} className={linkClass}>
-        <Text variant="code" className={dataFieldClass}>
-          {value}
-        </Text>
-      </a>
-      <a href={formatURL(url, value)} className={value}>
-        <MonoArrowOutward className={linkIconClass} />
-      </a>
-    </Stack>
-  );
+export const FormatLink = ({ url }: ICompactTableFormatterLinkProps) => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
+    const valueString = valueToString(value);
+    return (
+      <Stack alignItems="center" className={linkWrapperClass}>
+        <a href={formatURL(url, valueString)} className={linkClass}>
+          <Text variant="code" className={dataFieldClass}>
+            {valueString}
+          </Text>
+        </a>
+        <a href={formatURL(url, valueString)}>
+          <MonoArrowOutward className={linkIconClass} />
+        </a>
+      </Stack>
+    );
+  };
 
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatLinkWrapper.tsx
@@ -1,5 +1,4 @@
 import { MonoArrowOutward } from '@kadena/kode-icons/system';
-import type { FC } from 'react';
 import React, { forwardRef } from 'react';
 import {
   dataFieldClass,
@@ -13,6 +12,7 @@ import type {
   ICompactTableFormatterLinkProps,
   ICompactTableFormatterProps,
 } from './types';
+import { valueToString } from './utils';
 
 const formatURL = (url: string, value: string): string => {
   if (url.includes(':value')) {
@@ -33,14 +33,14 @@ InnerAnchor.displayName = 'Anchor';
 export const FormatLinkWrapper = ({
   url,
   linkComponent,
-}: ICompactTableFormatterLinkProps): FC<ICompactTableFormatterProps> => {
+}: ICompactTableFormatterLinkProps) => {
   const LinkWrapper = linkComponent ?? InnerAnchor;
 
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => (
+  const Component = ({ value }: ICompactTableFormatterProps) => (
     <Stack alignItems="center" className={linkWrapperClass}>
       <LinkWrapper
-        href={formatURL(url, value)}
-        to={formatURL(url, value)}
+        href={formatURL(url, valueToString(value))}
+        to={formatURL(url, valueToString(value))}
         passHref
         legacyBehavior
         className={linkClass}
@@ -51,8 +51,8 @@ export const FormatLinkWrapper = ({
       </LinkWrapper>
 
       <LinkWrapper
-        href={formatURL(url, value)}
-        to={formatURL(url, value)}
+        href={formatURL(url, valueToString(value))}
+        to={formatURL(url, valueToString(value))}
         passHref
         legacyBehavior
       >

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatMultiStepTx.tsx
@@ -1,10 +1,9 @@
 import { MonoAirlineStops } from '@kadena/kode-icons/system';
-import type { FC } from 'react';
 import React from 'react';
 import type { ICompactTableFormatterProps } from './types';
 
-export const FormatMultiStepTx = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) => {
+export const FormatMultiStepTx = () => {
+  const Component = ({ value }: ICompactTableFormatterProps) => {
     return value ? <MonoAirlineStops title="Multistep Tx" /> : undefined;
   };
   return Component;

diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/FormatStatus.tsx
@@ -1,10 +1,10 @@
 import { MonoCheck, MonoClear } from '@kadena/kode-icons/system';
-import type { FC } from 'react';
 import React from 'react';
 import type { ICompactTableFormatterProps } from './types';
+import { valueToString } from './utils';
 
-export const FormatStatus = (): FC<ICompactTableFormatterProps> => {
-  const Component: FC<ICompactTableFormatterProps> = ({ value }) =>
-    value ? <MonoCheck /> : <MonoClear />;
+export const FormatStatus = () => {
+  const Component = ({ value }: ICompactTableFormatterProps) =>
+    valueToString(value) ? <MonoCheck /> : <MonoClear />;
   return Component;
 };
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/utils.ts b/packages/libs/kode-ui/src/patterns/CompactTable/TableFormatters/utils.ts
@@ -0,0 +1,10 @@
+export const valueToString = (value: string | string[]): string => {
+  if (typeof value === 'object') {
+    return value.reduce((acc, val) => {
+      if (!val) return acc;
+      return `${acc}${val} `;
+    }, '');
+  }
+
+  return value;
+};