fix(wallet): crash when spend limit not set

(#651)

Author: jim380

apps/deploy-web/src/components/authorizations/AllowanceGrantedRow.tsx

@@ -16,7 +16,7 @@ type Props = {
 };
 
 export const AllowanceGrantedRow: React.FunctionComponent<Props> = ({ allowance, selected, onSelect }) => {
-  const limit = allowance?.allowance.spend_limit[0];
+  const limit = allowance?.allowance?.spend_limit?.[0];
   return (
     <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>
@@ -25,8 +25,13 @@ export const AllowanceGrantedRow: React.FunctionComponent<Props> = ({ allowance,
       <TableCell>{getAllowanceTitleByType(allowance)}</TableCell>
       <TableCell>{allowance.granter && <Address address={allowance.granter} isCopyable />}</TableCell>
       <TableCell>
-        {limit && <AKTAmount uakt={coinToUDenom(limit)} />}
-        {limit && "AKT"}
+        {limit ? (
+          <>
+            <AKTAmount uakt={coinToUDenom(limit)} /> AKT
+          </>
+        ) : (
+          <span>Unlimited</span>
+        )}
       </TableCell>
       <TableCell align="right">{<FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={allowance.allowance.expiration} />}</TableCell>
     </TableRow>

apps/deploy-web/src/components/authorizations/AllowanceIssuedRow.tsx

@@ -19,14 +19,22 @@ type Props = {
 };
 
 export const AllowanceIssuedRow: React.FunctionComponent<Props> = ({ allowance, checked, onEditAllowance, setDeletingAllowance, onSelectAllowance }) => {
+  const limit = allowance?.allowance?.spend_limit?.[0];
+
   return (
     <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>{getAllowanceTitleByType(allowance)}</TableCell>
       <TableCell align="center">
         <Address address={allowance.grantee} isCopyable />
       </TableCell>
       <TableCell align="center">
-        <AKTAmount uakt={coinToUDenom(allowance.allowance.spend_limit[0])} /> AKT
+        {limit ? (
+          <>
+            <AKTAmount uakt={coinToUDenom(limit)} /> AKT
+          </>
+        ) : (
+          <span>Unlimited</span>
+        )}
       </TableCell>
       <TableCell align="center">
         <FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={allowance.allowance.expiration} />

apps/deploy-web/src/components/authorizations/GranteeRow.tsx

@@ -14,15 +14,22 @@ type Props = {
 };
 
 export const GranteeRow: React.FunctionComponent<Props> = ({ grant }) => {
-  const denomData = useDenomData(grant.authorization.spend_limit.denom);
+  const limit = grant?.authorization?.spend_limit;
+  const denomData = limit ? useDenomData(limit.denom) : null;
 
   return (
     <TableRow className="[&>td]:px-2 [&>td]:py-1">
       <TableCell>
         <Address address={grant.granter} isCopyable />
       </TableCell>
       <TableCell align="right">
-        <AKTAmount uakt={coinToUDenom(grant.authorization.spend_limit)} /> {denomData?.label}
+        {limit ? (
+          <>
+            <AKTAmount uakt={coinToUDenom(limit)} /> {denomData?.label}
+          </>
+        ) : (
+          <span>Unlimited</span>
+        )}
       </TableCell>
       <TableCell align="right">
         <FormattedTime year="numeric" month={"numeric"} day={"numeric"} value={grant.expiration} />