feat: update styles for Modal and transaction table

JoinColony · Nov 5, 2024 · c7bff3a · c7bff3a
1 parent 041c358
commit c7bff3a
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 135 deletions.
diff --git a/src/components/v5/common/ActionSidebar/partials/UserSelect/UserSelect.tsx b/src/components/v5/common/ActionSidebar/partials/UserSelect/UserSelect.tsx
@@ -13,6 +13,7 @@ import Tooltip from '~shared/Extensions/Tooltip/Tooltip.tsx';
 import { type User } from '~types/graphql.ts';
 import { formatText } from '~utils/intl.ts';
 import { splitWalletAddress } from '~utils/splitWalletAddress.ts';
+import AvatarWithAddress from '~v5/common/AvatarWithAddress/index.ts';
 import SearchSelect from '~v5/shared/SearchSelect/SearchSelect.tsx';
 import UserAvatar from '~v5/shared/UserAvatar/index.ts';
 import UserInfoPopover from '~v5/shared/UserInfoPopover/UserInfoPopover.tsx';
@@ -108,43 +109,16 @@ const UserSelect: FC<UserSelectProps> = ({
         disabled={disabled}
       >
         {selectedUser || field.value ? (
-          <>
-            {isUserAddressValid ? (
-              <>
-                <UserAvatar
-                  userName={
-                    selectedUser?.profile?.displayName?.toString() ?? undefined
-                  }
-                  userAddress={userWalletAddress}
-                  userAvatarSrc={selectedUser?.profile?.avatar ?? undefined}
-                  size={20}
-                />
-                <p
-                  className={clsx('ml-2 truncate text-md font-medium', {
-                    'text-warning-400': !selectedUser?.isVerified,
-                    'text-gray-900': selectedUser?.isVerified,
-                  })}
-                >
-                  {formatText(userName || '')}
-                </p>
-                {selectedUser?.isVerified && (
-                  <CircleWavyCheck
-                    size={14}
-                    className="ml-1 flex-shrink-0 text-blue-400"
-                  />
-                )}
-              </>
-            ) : (
-              <div className="flex items-center gap-1 text-negative-400">
-                <WarningCircle size={16} />
-                <span className="text-md">
-                  {formatText({
-                    id: 'actionSidebar.addressError',
-                  })}
-                </span>
-              </div>
-            )}
-          </>
+          <AvatarWithAddress
+            userName={
+              selectedUser?.profile?.displayName?.toString() ?? undefined
+            }
+            address={userWalletAddress}
+            userAvatarSrc={selectedUser?.profile?.avatar ?? undefined}
+            size={20}
+            isVerified={selectedUser?.isVerified}
+            title={formatText(userName || '')}
+          />
         ) : (
           formatText({ id: 'actionSidebar.selectMember' })
         )}

diff --git a/...ebar/partials/forms/ArbitraryTxsForm/partials/AddTransactionModal/AddTransactionModal.tsx b/...ebar/partials/forms/ArbitraryTxsForm/partials/AddTransactionModal/AddTransactionModal.tsx
@@ -1,6 +1,5 @@
 import { CodeBlock } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
-import { defineMessages } from 'react-intl';
 
 import { Form } from '~shared/Fields/index.ts';
 import { formatText } from '~utils/intl.ts';
@@ -14,71 +13,15 @@ import FormTextareaBase from '~v5/common/Fields/TextareaBase/FormTextareaBase.ts
 import Button from '~v5/shared/Button/index.ts';
 import Modal from '~v5/shared/Modal/index.ts';
 
-const displayName =
-  'v5.common.ActionSidebar.partials.ArbitraryTxsForm.partials.AddTransactionModal';
-
-const MSG = defineMessages({
-  title: {
-    id: `${displayName}.title`,
-    defaultMessage: 'Contract interaction',
-  },
-  description: {
-    id: `${displayName}.description`,
-    defaultMessage:
-      'Provide the contract address you want to interact with it. We will try to generate the ABI if found, otherwise, you can enter it in manually. Then select the action you want to take.',
-  },
-  link: {
-    id: `${displayName}.link`,
-    defaultMessage: 'Learn more about contract interactions',
-  },
-  contractAddressField: {
-    id: `${displayName}.contractAddressField`,
-    defaultMessage: 'Target contract address',
-  },
-  contractAddressPlaceholder: {
-    id: `${displayName}.contractAddressPlaceholder`,
-    defaultMessage: 'Enter contract address',
-  },
-  abiJsonField: {
-    id: `${displayName}.abiJsonField`,
-    defaultMessage: 'ABI/JSON',
-  },
-  methodField: {
-    id: `${displayName}.methodField`,
-    defaultMessage: 'Select a method to interact with',
-  },
-  methodPlaceholder: {
-    id: `${displayName}.methodPlaceholder`,
-    defaultMessage: 'Select method',
-  },
-  toField: {
-    id: `${displayName}.toField`,
-    defaultMessage: '_to (address)',
-  },
-  toPlaceholder: {
-    id: `${displayName}.toPlaceholder`,
-    defaultMessage: 'Enter value',
-  },
-  amountField: {
-    id: `${displayName}.amountField`,
-    defaultMessage: '_amount (uint256)',
-  },
-  amountPlaceholder: {
-    id: `${displayName}.amountPlaceholder`,
-    defaultMessage: 'Enter value',
-  },
-  submitButton: {
-    id: `${displayName}.submitButton`,
-    defaultMessage: 'Confirm',
-  },
-});
+import { displayName, MSG } from './translation.ts';
 
 const AddTransactionModal: FC<AddTransactionFormModalProps> = ({
   onSubmit,
   ...rest
 }) => {
   const { onClose } = rest;
 
+  // @TODO: it will be dynamic and will be updated in the next iteration
   const methodOptions = [
     {
       value: 'mint',

diff --git a/...ActionSidebar/partials/forms/ArbitraryTxsForm/partials/AddTransactionModal/translation.ts b/...ActionSidebar/partials/forms/ArbitraryTxsForm/partials/AddTransactionModal/translation.ts
@@ -0,0 +1,60 @@
+import { defineMessages } from 'react-intl';
+
+export const displayName =
+  'v5.common.ActionSidebar.partials.ArbitraryTxsForm.partials.AddTransactionModal';
+
+export const MSG = defineMessages({
+  title: {
+    id: `${displayName}.title`,
+    defaultMessage: 'Contract interaction',
+  },
+  description: {
+    id: `${displayName}.description`,
+    defaultMessage:
+      'Provide the contract address you want to interact with it. We will try to generate the ABI if found, otherwise, you can enter it in manually. Then select the action you want to take.',
+  },
+  link: {
+    id: `${displayName}.link`,
+    defaultMessage: 'Learn more about contract interactions',
+  },
+  contractAddressField: {
+    id: `${displayName}.contractAddressField`,
+    defaultMessage: 'Target contract address',
+  },
+  contractAddressPlaceholder: {
+    id: `${displayName}.contractAddressPlaceholder`,
+    defaultMessage: 'Enter contract address',
+  },
+  abiJsonField: {
+    id: `${displayName}.abiJsonField`,
+    defaultMessage: 'ABI/JSON',
+  },
+  methodField: {
+    id: `${displayName}.methodField`,
+    defaultMessage: 'Select a method to interact with',
+  },
+  methodPlaceholder: {
+    id: `${displayName}.methodPlaceholder`,
+    defaultMessage: 'Select method',
+  },
+  toField: {
+    id: `${displayName}.toField`,
+    defaultMessage: '_to (address)',
+  },
+  toPlaceholder: {
+    id: `${displayName}.toPlaceholder`,
+    defaultMessage: 'Enter value',
+  },
+  amountField: {
+    id: `${displayName}.amountField`,
+    defaultMessage: '_amount (uint256)',
+  },
+  amountPlaceholder: {
+    id: `${displayName}.amountPlaceholder`,
+    defaultMessage: 'Enter value',
+  },
+  submitButton: {
+    id: `${displayName}.submitButton`,
+    defaultMessage: 'Confirm',
+  },
+});
diff --git a/...forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx b/...forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx
@@ -44,10 +44,10 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
   const fieldState = getFieldState(name);
 
   return (
-    <>
+    <div className="pt-4">
       {!!data.length && (
         <>
-          <h5 className="mb-3 mt-6 text-2">
+          <h5 className="mb-4 text-2">
             {formatText({ id: 'actionSidebar.transactions' })}
           </h5>
           <Table<AddTransactionTableModel>
@@ -77,7 +77,6 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
             {formatText({ id: 'button.addTransaction' })}
           </Button>
           <AddTransactionModal
-            defaultValues={data}
             onClose={() => setIsModalOpen(false)}
             isOpen={isModalOpen}
             onSubmit={({ json, contract, method, amount, to }) => {
@@ -93,7 +92,7 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
           />
         </>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/...r/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/CellDescription.tsx b/...r/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/CellDescription.tsx
@@ -0,0 +1,24 @@
+import React, { type FC } from 'react';
+
+interface CellDescriptionProps {
+  data: {
+    title: string;
+    value: string;
+  }[];
+}
+
+const CellDescription: FC<CellDescriptionProps> = ({ data }) => {
+  return (
+    <div>
+      {data.map(({ title, value }) => {
+        return (
+          <span className="mb-3 flex flex-col">
+            <b className="text-gray-900">{title}:</b>{' '}
+            <span className="text-gray-600">{value}</span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+export default CellDescription;
diff --git a/...tionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx b/...tionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx
@@ -1,9 +1,11 @@
 import { createColumnHelper, type ColumnDef } from '@tanstack/react-table';
-import clsx from 'clsx';
 import React, { useMemo } from 'react';
 
 import { formatText } from '~utils/intl.ts';
 import { type AddTransactionTableModel } from '~v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/types.ts';
+import AvatarWithAddress from '~v5/common/AvatarWithAddress/index.ts';
+
+import CellDescription from './CellDescription.tsx';
 
 export const useArbitraryTxsTableColumns = (): ColumnDef<
   AddTransactionTableModel,
@@ -23,44 +25,42 @@ export const useArbitraryTxsTableColumns = (): ColumnDef<
             {formatText({ id: 'table.row.contract' })}
           </span>
         ),
-        cell: ({ getValue }) => (
-          <span className="max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-md font-normal">
-            {getValue()}
-          </span>
-        ),
-        size: 35,
+        cellContentWrapperClassName: '!justify-start',
+
+        cell: ({ getValue }) => {
+          const address = getValue();
+          return (
+            <span className="flex max-w-full  self-start overflow-hidden overflow-ellipsis whitespace-nowrap text-md font-normal">
+              <AvatarWithAddress address={address} />
+            </span>
+          );
+        },
+        size: 30,
       }),
-      columnHelper.accessor('method', {
-        enableSorting: false,
+      columnHelper.display({
+        id: 'description',
         header: () => (
           <span className="text-sm text-gray-600">
             {formatText({ id: 'table.row.details' })}
           </span>
         ),
         cell: ({ row: { original } }) => (
-          <div>
-            <span
-              className={clsx(
-                'block max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-md font-normal',
-              )}
-            >
-              <b>Method:</b> {original.method}
-            </span>
-            <span
-              className={clsx(
-                'block max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-md font-normal',
-              )}
-            >
-              <b>_to (address):</b> {original.to}
-            </span>
-            <span
-              className={clsx(
-                'block max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-md font-normal',
-              )}
-            >
-              <b>_amount (uint256):</b> {original.amount}
-            </span>
-          </div>
+          <CellDescription
+            data={[
+              {
+                title: 'Method',
+                value: original.method,
+              },
+              {
+                title: '_to (address)',
+                value: original.to,
+              },
+              {
+                title: '_amount (uint256)',
+                value: original.amount,
+              },
+            ]}
+          />
         ),
         size: 67,
       }),

diff --git a/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/types.ts b/src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/types.ts
@@ -2,7 +2,6 @@ import { type ModalProps } from '~v5/shared/Modal/types.ts';
 
 export interface AddTransactionFormModalProps extends ModalProps {
   onSubmit: (link: AddTransactionTableModel) => void;
-  defaultValues: any;
 }
 
 export interface AddTransactionTableModel {