feat: Update grant consent message to clarify access vs payment (#2158)

* Update grant consent message to clarify access vs payment

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>

* lint fixed

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>

* remove duplication

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>

---------

Signed-off-by: Arya Pratap Singh <notaryasingh@gmail.com>

Author: ARYPROGRAMMER

packages/wallet/frontend/src/pages/grant-interactions/index.tsx

@@ -22,10 +22,9 @@ const GrantInteractionPage = ({
   grant,
   interactionId,
   nonce,
-  clientName
+  clientName: _clientName
 }: GrantInteractionPageProps) => {
   const [openDialog, closeDialog] = useDialog()
-  const client = clientName ? clientName : grant.client
   const router = useRouter()
   const isPendingGrant = grant.state === 'PENDING'
   const imageName =
@@ -67,33 +66,27 @@ const GrantInteractionPage = ({
           height={150}
         />
         <div className="mt-20 text-base">
-          <div>
-            <span className="font-semibold">{client}</span> is requesting access
-            to make{' '}
-            {grant.access.length > 1 ? 'a list of payments' : 'a payment'} on
-            your behalf.
-          </div>
-          <div>
-            Wallet Address client:{' '}
-            <span className="font-semibold">{grant.client}</span>
-          </div>
           {grant.access.length === 1 ? (
             <div>
-              Total amount to debit:{' '}
-              <span className="font-semibold">
-                {grant.access[0]?.limits?.debitAmount?.formattedAmount}
-              </span>
+              Your wallet is requesting access to an amount of{' '}
+              {grant.access[0]?.limits?.debitAmount?.formattedAmount}.
             </div>
           ) : (
-            <div className="mt-4">
-              <div className="font-semibold mb-2">Payment Amounts:</div>
-              {grant.access.map((accessItem, index) => (
-                <div key={index} className="mb-1">
-                  {accessItem.limits?.debitAmount?.formattedAmount}
-                </div>
-              ))}
+            <div>
+              Your wallet is requesting access to the following amounts:{' '}
+              {grant.access
+                .map(
+                  (accessItem) =>
+                    accessItem.limits?.debitAmount?.formattedAmount
+                )
+                .join(', ')}
+              .
             </div>
           )}
+          <div>
+            Wallet Address client:{' '}
+            <span className="font-semibold">{grant.client}</span>
+          </div>
         </div>
         <div className="mx-auto mt-10 flex w-full max-w-xl justify-evenly">
           <Button
@@ -128,26 +121,22 @@ const GrantInteractionPage = ({
           height={150}
         />
         <div className="mt-20 text-xl">
-          The request from <span className="font-semibold">{client}</span> was
-          previously processed
-          {grant.access.length > 1 ? ' with a list of payments' : ''}.
           {grant.access.length === 1 ? (
-            <>
-              {' '}
-              for the amount of{' '}
-              {grant.access[0]?.limits?.debitAmount?.formattedAmount}
-            </>
+            <div>
+              Your wallet previously granted access to an amount of{' '}
+              {grant.access[0]?.limits?.debitAmount?.formattedAmount}.
+            </div>
           ) : (
-            <>
-              <div className="mt-4">
-                <div className="font-semibold mb-2">Payment Amounts:</div>
-                {grant.access.map((accessItem, index) => (
-                  <div key={index} className="mb-1">
-                    {accessItem.limits?.debitAmount?.formattedAmount}
-                  </div>
-                ))}
-              </div>
-            </>
+            <div>
+              Your wallet previously granted access to the following amounts:{' '}
+              {grant.access
+                .map(
+                  (accessItem) =>
+                    accessItem.limits?.debitAmount?.formattedAmount
+                )
+                .join(', ')}
+              .
+            </div>
           )}
         </div>
         <div className="mx-auto mt-10 flex w-full max-w-xl justify-evenly">