Merge pull request #2453 from JoinColony/feat/#2446-update-incoming-f…

…unds-table Update incoming funds table
JoinColony · Jun 3, 2024 · fffb504 · fffb504
2 parents ebdffea + e210685
commit fffb504
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 109 deletions.
diff --git a/amplify/backend/api/colonycdapp/schema.graphql b/amplify/backend/api/colonycdapp/schema.graphql
@@ -1906,7 +1906,7 @@ type DomainMetadataChangelog {
 """
 Represents a Colony Funds Claim for all ERC20 tokens (except native chain tokens)
 """
-type ColonyFundsClaim @model @searchable {
+type ColonyFundsClaim @model {
   """
   Unique identifier for the Colony Funds Claim
   """

diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/FundsTable.tsx
@@ -26,8 +26,9 @@ const FundsTable: FC = () => {
   const isMobile = useMobile();
   const { filters, searchedTokens, activeFilters } = useFundsTable();
   const claims = useColonyFundsClaims();
-  const allClaims = Array.from(
-    new Set(claims.map((claim) => claim.token?.tokenAddress || '')),
+  const unclaimedClaims = claims.filter((claim) => !claim.isClaimed);
+  const allUnclaimedClaims = Array.from(
+    new Set(unclaimedClaims.map((claim) => claim.token?.tokenAddress || '')),
   );
 
   return (
@@ -72,9 +73,9 @@ const FundsTable: FC = () => {
               ) : null,
             )}
           <Filter {...filters} />
-          {claims.length > 0 && (
+          {unclaimedClaims.length > 0 && (
             <AcceptButton
-              tokenAddresses={allClaims}
+              tokenAddresses={allUnclaimedClaims}
               disabled={!searchedTokens.length}
             >
               {formatText({ id: 'incomingFundsPage.table.claimAllFunds' })}

diff --git a/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx b/src/components/frame/v5/pages/FundsPage/partials/TokenTable/TokenTable.tsx
@@ -1,8 +1,8 @@
 import { CaretDown } from '@phosphor-icons/react';
-import { getSortedRowModel, type SortingState } from '@tanstack/react-table';
+import { getSortedRowModel } from '@tanstack/react-table';
 import clsx from 'clsx';
 import { BigNumber } from 'ethers';
-import React, { type FC, useState } from 'react';
+import React, { type FC } from 'react';
 
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { useMobile } from '~hooks/index.ts';
@@ -11,6 +11,8 @@ import useRelativePortalElement from '~hooks/useRelativePortalElement.ts';
 import useToggle from '~hooks/useToggle/index.ts';
 import Numeral from '~shared/Numeral/index.ts';
 import TokenInfo from '~shared/TokenInfo/index.ts';
+import { formatText } from '~utils/intl.ts';
+import PillsBase from '~v5/common/Pills/index.ts';
 import Table from '~v5/common/Table/index.ts';
 import AccordionItem from '~v5/shared/Accordion/partials/AccordionItem/index.ts';
 import MenuContainer from '~v5/shared/MenuContainer/index.ts';
@@ -33,13 +35,14 @@ const TokenTable: FC<TokenTableProps> = ({ token }) => {
     ({ token: currentClaimToken }) => currentClaimToken?.name === token?.name,
   );
   const claimsAmount =
-    currentClaims.reduce(
-      (acc, { amount }) => acc.add(amount),
-      BigNumber.from(0),
-    ) || 0;
+    currentClaims.reduce((acc, { amount, isClaimed }) => {
+      if (isClaimed) {
+        return acc;
+      }
+      return acc.add(amount);
+    }, BigNumber.from(0)) || 0;
   const [isTableRowOpen, { toggle: toggleTableRowAccordion }] = useToggle();
   const columns = useTokenTableColumns();
-  const [sorting, setSorting] = useState<SortingState>([]);
 
   const [
     isTokenModalOpened,
@@ -67,7 +70,7 @@ const TokenTable: FC<TokenTableProps> = ({ token }) => {
     }
   };
 
-  return claimsAmount.gt(0) && token ? (
+  return token ? (
     <>
       <AccordionItem
         className="w-full text-gray-900 text-1 [&_.accordion-toggler]:px-[1.125rem] sm:hover:[&_.accordion-toggler]:bg-gray-25"
@@ -99,20 +102,44 @@ const TokenTable: FC<TokenTableProps> = ({ token }) => {
                 {token.name}
               </span>
             </button>
-            <div>
-              <Numeral value={claimsAmount} decimals={token.decimals} />{' '}
-              {token?.symbol}
+            <div className="flex items-center gap-2">
+              {claimsAmount.gt(0) && (
+                <PillsBase
+                  className={clsx(
+                    'bg-success-100 text-sm font-medium text-success-400',
+                  )}
+                >
+                  {formatText({ id: 'incomingFundsPage.table.new' })}
+                </PillsBase>
+              )}
+              <div className="w-[116px]">
+                <Numeral value={claimsAmount} decimals={token.decimals} />{' '}
+                {token?.symbol}
+              </div>
             </div>
           </div>
         }
       >
         <Table
           data={currentClaims}
-          state={{ sorting }}
-          onSortingChange={setSorting}
           getSortedRowModel={getSortedRowModel()}
           columns={columns}
           className="-mx-[1.125rem] !w-[calc(100%+2.25rem)] rounded-none border-0 border-gray-200 px-[1.125rem] [&_td]:px-[1.125rem] [&_td]:py-4 [&_th]:border-y"
+          initialState={{
+            sorting: [
+              {
+                id: 'isClaimed',
+                desc: true,
+              },
+              {
+                id: 'amount',
+                desc: true,
+              },
+            ],
+          }}
+          // This ensures that all sort actions made by the user are multisort.
+          // In other words, it's always sorting by all columns.
+          isMultiSortEvent={() => true}
         />
       </AccordionItem>
       {isMobile ? (

diff --git a/src/components/frame/v5/pages/FundsPage/partials/TokenTable/hooks.tsx b/src/components/frame/v5/pages/FundsPage/partials/TokenTable/hooks.tsx
@@ -1,4 +1,5 @@
 import { type ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import { BigNumber } from 'ethers';
 import React, { useMemo } from 'react';
 
 import Numeral from '~shared/Numeral/index.ts';
@@ -10,9 +11,19 @@ import AcceptButton from '../AcceptButton/index.ts';
 export const useTokenTableColumns = (): ColumnDef<ColonyClaims, string>[] => {
   const columnHelper = useMemo(() => createColumnHelper<ColonyClaims>(), []);
 
-  const columns: ColumnDef<ColonyClaims, string>[] = useMemo(
+  const columns: ColumnDef<
+    ColonyClaims,
+    string | boolean | null | undefined
+  >[] = useMemo(
     () => [
       columnHelper.accessor('amount', {
+        sortingFn: (a, b) => {
+          return BigNumber.from(a.original.amount).gt(
+            BigNumber.from(b.original.amount),
+          )
+            ? 1
+            : -1;
+        },
         header: () => formatText({ id: 'incomingFundsPage.table.amount' }),
         cell: ({ row }) => (
           <Numeral
@@ -23,17 +34,28 @@ export const useTokenTableColumns = (): ColumnDef<ColonyClaims, string>[] => {
           />
         ),
       }),
-      columnHelper.display({
-        id: 'claim',
-        size: 101,
+      columnHelper.accessor('isClaimed', {
+        size: 120,
+        sortUndefined: 1,
+        invertSorting: true,
         header: () => formatText({ id: 'incomingFundsPage.table.claim' }),
-        cell: ({ row }) => (
-          <AcceptButton
-            tokenAddresses={[row.original.token?.tokenAddress || '']}
-          >
-            {formatText({ id: 'button.accept' })}
-          </AcceptButton>
-        ),
+        cell: ({ row }) => {
+          return (
+            <div className="flex w-full items-center justify-end">
+              {row.original.isClaimed ? (
+                <p className="w-full text-right text-sm text-gray-400">
+                  {formatText({ id: 'incomingFundsPage.table.accepted' })}
+                </p>
+              ) : (
+                <AcceptButton
+                  tokenAddresses={[row.original.token?.tokenAddress || '']}
+                >
+                  {formatText({ id: 'button.accept' })}
+                </AcceptButton>
+              )}
+            </div>
+          );
+        },
       }),
     ],
     [columnHelper],

diff --git a/src/graphql/fragments/colony.graphql b/src/graphql/fragments/colony.graphql
@@ -154,13 +154,15 @@ fragment FundsClaim on ColonyFundsClaim {
   createdAtBlock
   createdAt
   amount
+  isClaimed
 }
 
 fragment ChainFundsClaim on ColonyChainFundsClaim {
   id
   createdAtBlock
   createdAt
   amount
+  isClaimed
 }
 
 fragment ColonyRole on ColonyRole {

diff --git a/src/graphql/generated.ts b/src/graphql/generated.ts
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1484,7 +1484,9 @@
     "incomingFundsPage.table.title": "Incoming funds",
     "incomingFundsPage.table.amount": "Amount",
     "incomingFundsPage.table.claim": "Claim",
-    "incomingFundsPage.table.claimAllFunds": "Claim all available funds",
+    "incomingFundsPage.table.accepted": "Accepted",
+    "incomingFundsPage.table.new": "New",
+    "incomingFundsPage.table.claimAllFunds": "Accept all available funds",
     "incomingFundsPage.filter.tokenStatus": "Token status",
     "incomingFundsPage.filter.tokenType": "Token type",
     "incomingFundsPage.filter.approvedTokens": "approved token types",