Show na without icon

frontend/components/table/CoinCell.tsx

@@ -1,8 +1,9 @@
-import Coin from '@images/coin.inline.svg'
 import Tooltip from '@components/Tooltip'
+import { classNames } from 'utils/classNames'
+import Coin from '@images/coin.inline.svg'
 
 export type CoinCellProps = {
-  coins: string
+  coins?: string
   isStriked?: boolean
   rowTooltipContent?: string
 }
@@ -15,8 +16,19 @@ export function CoinCell({
   return (
     <td className="min-w-[130px] border-l border-light-35 bg-dark-25">
       <Tooltip content={rowTooltipContent} placement={'right'}>
-        <span className="flex items-center justify-center  gap-1 text-[20px]">
-          {isStriked ? <s>{coins}</s> : <>{coins}</>} <Coin />
+        <span
+          className={classNames(
+            'flex items-center justify-center  gap-1 text-[20px]',
+            isStriked ? 'line-through' : ''
+          )}
+        >
+          {!coins ? (
+            'N/A'
+          ) : (
+            <>
+              {coins} <Coin />
+            </>
+          )}
         </span>
       </Tooltip>
     </td>

frontend/components/table/SignAndClaimRowLayout.tsx

@@ -0,0 +1,62 @@
+import { useEligibility } from '@components/Ecosystem/EligibilityProvider'
+import { EcosystemConnectButton } from '@components/EcosystemConnectButton'
+import { useCoins } from 'hooks/useCoins'
+import { useSignAndClaimRowState } from 'hooks/useSignAndClaimRowState'
+import { classNames } from 'utils/classNames'
+import { getEcosystemTableLabel } from 'utils/getEcosystemTableLabel'
+import { CoinCell } from './CoinCell'
+import { Ecosystem } from '@components/Ecosystem'
+import { ReactNode } from 'react'
+
+type SignAndClaimRowLayoutProps = {
+  ecosystem: Ecosystem
+  children: ReactNode
+}
+export function SignAndClaimRowLayout({
+  ecosystem,
+  children,
+}: SignAndClaimRowLayoutProps) {
+  const getEligibleCoins = useCoins()
+  const { getEligibility } = useEligibility()
+
+  const eligibility = getEligibility(ecosystem)
+  const eligibleCoins = getEligibleCoins(ecosystem)
+
+  const { disabled: rowDisabled, tooltipContent: rowTooltipContent } =
+    useSignAndClaimRowState(ecosystem)
+
+  return (
+    <tr className={classNames('border-b border-light-35 ')}>
+      <td
+        className={classNames(
+          'w-full py-2 pl-10 pr-4',
+          rowDisabled ? 'opacity-25' : ''
+        )}
+      >
+        <div
+          className={classNames(
+            'flex items-center justify-between',
+            rowDisabled ? 'pointer-events-none' : ''
+          )}
+        >
+          <span className="min-w-[150px] font-header text-base18 font-thin">
+            {getEcosystemTableLabel(ecosystem)}
+          </span>
+
+          <span className="flex flex-1  items-center justify-between gap-5">
+            <EcosystemConnectButton
+              ecosystem={ecosystem}
+              disableOnConnect={true}
+            />
+            {children}
+          </span>
+        </div>
+      </td>
+      <CoinCell
+        coins={eligibleCoins}
+        isStriked={eligibility?.isClaimAlreadySubmitted}
+        rowTooltipContent={rowTooltipContent}
+      />
+    </tr>
+  )
+}

frontend/hooks/useCoins.tsx

@@ -7,7 +7,7 @@ import { toStringWithDecimals } from 'utils/toStringWithDecimals'
 // useCoins return a function which can read the granted amount from the eligiblityMap
 // stored in the global context
 // For given ecosystem, we will first check if the user has selected active or not.
-// If not, returns 'N/A'. Else
+// If not, returns undefined. Else
 // If the wallet is not eligible, returns '0'
 // Else, it will return the amount if it is stored
 export function useCoins() {
@@ -16,7 +16,7 @@ export function useCoins() {
 
   return useCallback(
     (ecosystem: Ecosystem) => {
-      if (activity[ecosystem] === false) return 'N/A'
+      if (activity[ecosystem] === false) return undefined
 
       const eligibility = getEligibility(ecosystem)
       if (eligibility === undefined) return '0'

frontend/hooks/useSignAndClaimRowState.ts

@@ -0,0 +1,54 @@
+import { Ecosystem } from '@components/Ecosystem'
+import { useActivity } from '@components/Ecosystem/ActivityProvider'
+import { useEligibility } from '@components/Ecosystem/EligibilityProvider'
+import { useMemo } from 'react'
+
+type RowStateRet = {
+  disabled: boolean
+  tooltipContent?: string
+}
+
+export function useSignAndClaimRowState(ecosystem: Ecosystem): RowStateRet {
+  const { activity } = useActivity()
+  const { getEligibility } = useEligibility()
+
+  return useMemo(() => {
+    // Row is disabled when
+    // - Ecosystem is inactive or
+    // - Ecosystem is active but
+    // - - No Claim Info found or
+    // - - Claim already submitted
+
+    // Rows is enabled if
+    // - Ecosystem is active and
+    // - Ecosystem has a claim info and
+    // - Claim has not been submitted
+
+    const isActive = activity[ecosystem]
+    // (NOTE: ecosystem will have a claim info only if the connected identity has a claim info)
+    const eligibility = getEligibility(ecosystem)
+    if (isActive === true) {
+      if (eligibility?.claimInfo !== undefined) {
+        if (eligibility?.isClaimAlreadySubmitted) {
+          return {
+            disabled: true,
+            tooltipContent:
+              'The tokens for this ecosystem has already been claimed.',
+          }
+        } else {
+          return {
+            disabled: false,
+          }
+        }
+      } else {
+        return {
+          disabled: true,
+          tooltipContent: 'There are no tokens to claim for this ecosystem.',
+        }
+      }
+    } else
+      return {
+        disabled: true,
+      }
+  }, [activity, ecosystem, getEligibility])
+}

frontend/pages/next-steps.tsx

@@ -19,9 +19,7 @@ export default function NextStepsPage() {
   const params = useSearchParams()
   return (
     <Layout>
-      <TokensReceived
-        totalCoinsClaimed={params.get('totalTokensClaimed') ?? 'N/A'}
-      />
+      <TokensReceived totalCoinsClaimed={params.get('totalTokensClaimed')} />
     </Layout>
   )
 }

frontend/sections/ClaimStatus.tsx

@@ -1,19 +1,15 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import Coin from '@images/coin.inline.svg'
 
-import { classNames } from 'utils/classNames'
-import { useCoins } from 'hooks/useCoins'
 import { Ecosystem } from '@components/Ecosystem'
 import { EcosystemClaimState } from './SignAndClaim'
 
 import Loader from '@images/loader.inline.svg'
 import Failed from '@images/not.inline.svg'
 import Success from '@images/verified.inline.svg'
-import { EcosystemConnectButton } from '@components/EcosystemConnectButton'
-import { getEcosystemTableLabel } from 'utils/getEcosystemTableLabel'
-import Tooltip from '@components/Tooltip'
 import { useTotalGrantedCoins } from 'hooks/useTotalGrantedCoins'
 import { ProceedButton } from '@components/buttons'
+import { SignAndClaimRowLayout } from '@components/table/SignAndClaimRowLayout'
 import { Box } from '@components/Box'
 
 export const ClaimStatus = ({
@@ -66,11 +62,13 @@ export const ClaimStatus = ({
         <table className="">
           <tbody>
             {Object.values(Ecosystem).map((ecosystem) => (
-              <TableRow
-                ecosystem={ecosystem}
-                ecosystemClaimState={ecosystemsClaimState?.[ecosystem]}
-                key={ecosystem}
-              />
+              <SignAndClaimRowLayout ecosystem={ecosystem} key={ecosystem}>
+                {ecosystemsClaimState?.[ecosystem] !== undefined && (
+                  <ClaimState
+                    ecosystemClaimState={ecosystemsClaimState?.[ecosystem]!}
+                  />
+                )}
+              </SignAndClaimRowLayout>
             ))}
             <tr className="border-b border-light-35 ">
               <td className="w-full bg-darkGray5 py-2 pl-10 pr-4">
@@ -93,68 +91,6 @@ export const ClaimStatus = ({
   )
 }
 
-type TableRowProps = {
-  ecosystem: Ecosystem
-  ecosystemClaimState: EcosystemClaimState | undefined
-}
-function TableRow({ ecosystem, ecosystemClaimState }: TableRowProps) {
-  const getEligibleCoins = useCoins()
-  const [rowDisabled, setRowDisabled] = useState(true)
-
-  useEffect(() => {
-    // Row is disabled if ecosystemClaimState is undefined
-    if (ecosystemClaimState === undefined) {
-      setRowDisabled(true)
-    } else {
-      setRowDisabled(false)
-    }
-  }, [ecosystemClaimState])
-
-  // Showing coins only for ecosytem for which we submitted a claim.
-  const coins = useMemo(() => {
-    if (ecosystemClaimState === undefined) return 'N/A'
-    return getEligibleCoins(ecosystem)
-  }, [ecosystem, ecosystemClaimState, getEligibleCoins])
-
-  return (
-    <tr className={classNames('border-b border-light-35 ')}>
-      <td
-        className={classNames(
-          'w-full py-2 pl-10 pr-4',
-          rowDisabled ? 'opacity-25' : ''
-        )}
-      >
-        <div
-          className={classNames(
-            'flex items-center justify-between',
-            rowDisabled ? 'pointer-events-none' : ''
-          )}
-        >
-          <span className="min-w-[150px] font-header text-base18 font-thin">
-            {getEcosystemTableLabel(ecosystem)}
-          </span>
-
-          <span className="flex flex-1  items-center justify-between gap-5">
-            <EcosystemConnectButton
-              ecosystem={ecosystem}
-              disableOnConnect={true}
-            />
-            {ecosystemClaimState !== undefined && (
-              <ClaimState ecosystemClaimState={ecosystemClaimState} />
-            )}
-          </span>
-        </div>
-      </td>
-      <td className="min-w-[130px] border-l border-light-35 bg-darkGray5">
-        <span className="flex items-center justify-center  gap-1 text-[20px]">
-          {coins}
-          <Coin />
-        </span>
-      </td>
-    </tr>
-  )
-}
-
 function ClaimState({
   ecosystemClaimState,
 }: {