UI/UX: Add EIP7702 authorization status (#3080)

Resolves #2771

types/api/transaction.ts

@@ -219,6 +219,7 @@ export interface TxAuthorization {
   authority: string;
   chain_id: number;
   nonce: number;
+  status: 'ok' | 'invalid_chain_id' | 'invalid_nonce' | 'invalid_signature' | null;
 }
 
 export interface InteropTransactionInfo {

ui/shared/statusTag/TxAuthorizationStatus.tsx

@@ -0,0 +1,39 @@
+import { upperFirst } from 'es-toolkit';
+import React from 'react';
+
+import type { TxAuthorization } from 'types/api/transaction';
+
+import type { BadgeProps } from 'toolkit/chakra/badge';
+
+import StatusTag from './StatusTag';
+
+export interface Props extends BadgeProps {
+  status: TxAuthorization['status'];
+}
+
+const TxAuthorizationStatus = ({ status, ...rest }: Props) => {
+
+  const type = (() => {
+    if (!status) {
+      return 'pending';
+    }
+    if (status === 'ok') {
+      return 'ok';
+    }
+    return 'error';
+  })();
+
+  const text = (() => {
+    if (!status) {
+      return 'Pending';
+    }
+    if (status === 'ok') {
+      return 'Success';
+    }
+    return upperFirst(status.replace('_', ' '));
+  })();
+
+  return <StatusTag { ...rest } type={ type } text={ text }/>;
+};
+
+export default TxAuthorizationStatus;

ui/tx/authorizations/TxAuthorizationsListItem.tsx

@@ -7,22 +7,23 @@ import config from 'configs/app';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TxAuthorizationStatus from 'ui/shared/statusTag/TxAuthorizationStatus';
 
 interface Props extends TxAuthorization {
   isLoading?: boolean;
 }
 
-const TxAuthorizationsListItem = ({ address_hash: addressHash, authority, chain_id: chainId, nonce, isLoading }: Props) => {
+const TxAuthorizationsListItem = ({ address_hash: addressHash, authority, chain_id: chainId, nonce, isLoading, status }: Props) => {
   return (
     <ListItemMobile rowGap={ 3 } fontSize="sm">
-      <HStack gap={ 3 } w="100%">
-        <Skeleton loading={ isLoading } fontWeight={ 500 }>Address</Skeleton>
-        <AddressEntity address={{ hash: addressHash }} isLoading={ isLoading } noIcon/>
-      </HStack>
       <HStack gap={ 3 } w="100%">
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Authority</Skeleton>
         <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
       </HStack>
+      <HStack gap={ 3 } w="100%">
+        <Skeleton loading={ isLoading } fontWeight={ 500 } flexShrink={ 0 }>Delegated address</Skeleton>
+        <AddressEntity address={{ hash: addressHash }} isLoading={ isLoading } noIcon/>
+      </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Chain</Skeleton>
         <Skeleton loading={ isLoading } color="text.secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
@@ -31,6 +32,10 @@ const TxAuthorizationsListItem = ({ address_hash: addressHash, authority, chain_
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Nonce</Skeleton>
         <Skeleton loading={ isLoading } color="text.secondary">{ nonce }</Skeleton>
       </HStack>
+      <HStack gap={ 3 }>
+        <Skeleton loading={ isLoading } fontWeight={ 500 }>Status</Skeleton>
+        <TxAuthorizationStatus status={ status } loading={ isLoading }/>
+      </HStack>
     </ListItemMobile>
   );
 };

ui/tx/authorizations/TxAuthorizationsTable.tsx

@@ -18,10 +18,11 @@ const TxAuthorizationsTable = ({ data, isLoading }: Props) => {
       <TableRoot>
         <TableHeaderSticky>
           <TableRow>
-            <TableColumnHeader width="50%">Address</TableColumnHeader>
             <TableColumnHeader width="50%">Authority</TableColumnHeader>
+            <TableColumnHeader width="50%">Delegated address</TableColumnHeader>
             <TableColumnHeader width="120px">Chain</TableColumnHeader>
-            <TableColumnHeader width="120px" isNumeric>Nonce</TableColumnHeader>
+            <TableColumnHeader width="120px">Nonce</TableColumnHeader>
+            <TableColumnHeader width="200px">Status</TableColumnHeader>
           </TableRow>
         </TableHeaderSticky>
         <TableBody>

ui/tx/authorizations/TxAuthorizationsTableItem.tsx

@@ -1,3 +1,4 @@
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxAuthorization } from 'types/api/transaction';
@@ -6,30 +7,38 @@ import config from 'configs/app';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableRow, TableCell } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import TxAuthorizationStatus from 'ui/shared/statusTag/TxAuthorizationStatus';
 
 interface Props extends TxAuthorization {
   isLoading?: boolean;
 }
 
-const TxAuthorizationsItem = ({ address_hash: addressHash, authority, chain_id: chainId, nonce, isLoading }: Props) => {
+const TxAuthorizationsItem = ({ address_hash: addressHash, authority, chain_id: chainId, nonce, isLoading, status }: Props) => {
   return (
     <TableRow alignItems="top">
       <TableCell>
-        <AddressEntity address={{ hash: addressHash }} isLoading={ isLoading } noIcon/>
+        <Flex>
+          <AddressEntity address={{ hash: addressHash }} isLoading={ isLoading } noIcon/>
+        </Flex>
       </TableCell>
       <TableCell verticalAlign="middle">
-        <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
+        <Flex>
+          <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
+        </Flex>
       </TableCell>
       <TableCell verticalAlign="middle">
         <Skeleton loading={ isLoading } display="inline-block">
           { chainId === Number(config.chain.id) ? 'this' : 'any' }
         </Skeleton>
       </TableCell>
-      <TableCell isNumeric verticalAlign="middle">
+      <TableCell verticalAlign="middle">
         <Skeleton loading={ isLoading } display="inline-block">
           { nonce }
         </Skeleton>
       </TableCell>
+      <TableCell verticalAlign="middle">
+        <TxAuthorizationStatus status={ status } loading={ isLoading }/>
+      </TableCell>
     </TableRow>
   );
 };