TW-1630 Apply new design for Tezos transfers and EVM unknown operations

package.json

@@ -231,6 +231,7 @@
     "@taquito/contracts-library": "20.1.0",
     "@taquito/tzip16": "20.1.0",
     "bignumber.js": "9.1.2",
+    "elliptic": "6.6.1",
     "graphql-request": "^6.1.0",
     "json5": "^2.2.2",
     "follow-redirects": "^1.15.4"

public/_locales/en/messages.json

@@ -1656,6 +1656,15 @@
   "transaction": {
     "message": "Transaction"
   },
+  "transactionInfo": {
+    "message": "Transaction info"
+  },
+  "estimatedTxDetails": {
+    "message": "Est. transaction details"
+  },
+  "noValue": {
+    "message": "No value"
+  },
   "recipient": {
     "message": "Recipient"
   },
@@ -1904,6 +1913,12 @@
   "transfers": {
     "message": "Transfers"
   },
+  "unknownToken": {
+    "message": "Unknown Token"
+  },
+  "unknownTokenAcronym": {
+    "message": "UT"
+  },
   "someUnknownToken": {
     "message": "unknown token $token$",
     "placeholders": {
@@ -3929,10 +3944,25 @@
   "disabledInTestnetMode": {
     "message": "Disabled in Testnet Mode"
   },
+  "unknownTransaction": {
+    "message": "Unknown Transaction"
+  },
+  "interactionWith": {
+    "message": "Interaction With"
+  },
   "earn": {
     "message": "Earn"
   },
   "marketPageDisclaimer": {
     "message": "Temple integrated third-party solutions to buy or exchange crypto."
+  },
+  "txCouldNotBeEstimated": {
+    "message": "Transaction could not be estimated"
+  },
+  "txCouldNotBeEstimatedDescription": {
+    "message": "Fee estimation isn't available. Default values are used, but the transaction may fail. Please retry or adjust transaction parameters manually."
+  },
+  "genericTxError": {
+    "message": "Something’s not right. Please review a message."
   }
 }

src/app/ConfirmPage/add-asset/context.ts

@@ -20,34 +20,34 @@ export const [AddAssetProvider, useAddAsset] = constate(() => {
 
   const handleConfirm = useCallback(
     async (id: string, confirmed: boolean, dAppAssetMetadata: EvmAssetToAddMetadata) => {
-      if (confirmed) {
-        if (assetMetadata && accountPkh) {
-          const assetSlug = toTokenSlug(assetMetadata.address);
-
-          dispatch(
-            putNewEvmTokenAction({
-              publicKeyHash: accountPkh,
-              chainId: dAppAssetMetadata.chainId,
-              assetSlug
-            })
-          );
-
-          dispatch(
-            putEvmTokensMetadataAction({
-              chainId: dAppAssetMetadata.chainId,
-              records: { [assetSlug]: assetMetadata }
-            })
-          );
-
-          // ensuring the last changes to the store will be persisted before window closes
-          await persistor.flush();
-
-          confirmDAppEvmAssetAdding(id, confirmed);
-        } else {
-          setErrorMessage('Something’s not right. Please try again later.');
-        }
-      } else {
+      if (!confirmed) {
+        return void confirmDAppEvmAssetAdding(id, confirmed);
+      }
+
+      if (assetMetadata && accountPkh) {
+        const assetSlug = toTokenSlug(assetMetadata.address);
+
+        dispatch(
+          putNewEvmTokenAction({
+            publicKeyHash: accountPkh,
+            chainId: dAppAssetMetadata.chainId,
+            assetSlug
+          })
+        );
+
+        dispatch(
+          putEvmTokensMetadataAction({
+            chainId: dAppAssetMetadata.chainId,
+            records: { [assetSlug]: assetMetadata }
+          })
+        );
+
+        // ensuring the last changes to the store will be persisted before window closes
+        await persistor.flush();
+
         confirmDAppEvmAssetAdding(id, confirmed);
+      } else {
+        setErrorMessage('Something’s not right. Please try again later.');
       }
     },
     [accountPkh, assetMetadata, confirmDAppEvmAssetAdding]

src/app/ConfirmPage/confirm-dapp-form.tsx

@@ -20,17 +20,28 @@ import { StoredAccount, TempleAccountType, TempleDAppPayload } from 'lib/temple/
 import { useBooleanState, useSafeState } from 'lib/ui/hooks';
 import { delay } from 'lib/utils';
 import { useCurrentAccountId } from 'temple/front';
+import { TempleChainKind } from 'temple/types';
 
 import { useAddAsset } from './add-asset/context';
 import { ConfirmPageSelectors } from './selectors';
 
+export interface ConfirmDAppFormContentProps {
+  selectedAccount: StoredAccount;
+  error: any;
+  formId: string;
+  openAccountsModal: EmptyFn;
+  onSubmit: EmptyFn;
+}
+
 interface ConfirmDAppFormProps {
   accounts: StoredAccount[];
   payload: TempleDAppPayload;
   onConfirm: (confirmed: boolean, selectedAccount: StoredAccount) => Promise<void>;
-  children: (openAccountsModal: EmptyFn, selectedAccount: StoredAccount) => ReactNode | ReactNode[];
+  children: (props: ConfirmDAppFormContentProps) => ReactNode | ReactNode[];
 }
 
+const CONFIRM_OPERATIONS_FORM_ID = 'confirm-operations-form';
+
 export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload, onConfirm, children }) => {
   const [accountsModalIsOpen, openAccountsModal, closeAccountsModal] = useBooleanState(false);
   const [bottomEdgeIsVisible, setBottomEdgeIsVisible] = useState(true);
@@ -79,16 +90,16 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
 
     setIsConfirming(true);
     await confirm(true);
-    setIsDeclining(false);
-  }, [confirm, isConfirming, isDeclining, setIsConfirming, setIsDeclining]);
+    setIsConfirming(false);
+  }, [confirm, isConfirming, isDeclining, setIsConfirming]);
 
   const handleDeclineClick = useCallback(async () => {
     if (isConfirming || isDeclining) return;
 
-    setIsConfirming(true);
+    setIsDeclining(true);
     await confirm(false);
     setIsDeclining(false);
-  }, [confirm, isConfirming, isDeclining, setIsConfirming, setIsDeclining]);
+  }, [confirm, isConfirming, isDeclining, setIsDeclining]);
 
   const handleErrorAlertClose = useCallback(() => setError(null), [setError]);
 
@@ -103,6 +114,15 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
             : ConfirmPageSelectors.ConnectAction_ConnectButton,
           declineTestID: ConfirmPageSelectors.ConnectAction_CancelButton
         };
+      case 'sign_typed':
+      case 'personal_sign':
+      case 'sign':
+        return {
+          title: <T id="signatureRequest" />,
+          confirmButtonName: <T id="signAction" />,
+          confirmTestID: ConfirmPageSelectors.SignAction_SignButton,
+          declineTestID: ConfirmPageSelectors.SignAction_RejectButton
+        };
       case 'add_asset':
         return {
           title: <T id="addToken" />,
@@ -122,24 +142,25 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
             : ConfirmPageSelectors.ConfirmOperationsAction_ConfirmButton,
           declineTestID: ConfirmPageSelectors.ConfirmOperationsAction_RejectButton
         };
-      case 'confirm_operations':
+      default:
+        // TODO: add other variants of title using ABIs and payload data
         return {
-          title: <T id="confirmAction" substitutions={<T id="operations" />} />,
+          title:
+            payload.chainType === TempleChainKind.EVM ? (
+              <T id="unknownTransaction" />
+            ) : (
+              <T id="confirmAction" substitutions={<T id="transfer" />} />
+            ),
           confirmButtonName: <T id={error ? 'retry' : 'confirm'} />,
           confirmTestID: error
             ? ConfirmPageSelectors.ConfirmOperationsAction_RetryButton
             : ConfirmPageSelectors.ConfirmOperationsAction_ConfirmButton,
           declineTestID: ConfirmPageSelectors.ConfirmOperationsAction_RejectButton
         };
-      default:
-        return {
-          title: <T id="signatureRequest" />,
-          confirmButtonName: <T id="signAction" />,
-          confirmTestID: ConfirmPageSelectors.SignAction_SignButton,
-          declineTestID: ConfirmPageSelectors.SignAction_RejectButton
-        };
     }
-  }, [addAssetErrorMessage, error, payload.type]);
+  }, [payload.type, payload.chainType, error, addAssetErrorMessage]);
+
+  const isOperationsConfirm = payload.type === 'confirm_operations';
 
   return (
     <PageModal
@@ -190,7 +211,7 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
               </div>
             )}
 
-            {error && (
+            {error && !isOperationsConfirm && (
               <Alert
                 closable
                 onClose={handleErrorAlertClose}
@@ -201,7 +222,13 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
               />
             )}
 
-            {children(openAccountsModal, selectedAccount)}
+            {children({
+              openAccountsModal,
+              selectedAccount,
+              formId: CONFIRM_OPERATIONS_FORM_ID,
+              onSubmit: handleConfirmClick,
+              error
+            })}
           </ScrollView>
 
           <ActionsButtonsBox shouldCastShadow={!bottomEdgeIsVisible} flexDirection="row">
@@ -222,7 +249,9 @@ export const ConfirmDAppForm = memo<ConfirmDAppFormProps>(({ accounts, payload,
               className="w-full"
               loading={isConfirming}
               testID={confirmTestID}
-              onClick={handleConfirmClick}
+              type={isOperationsConfirm ? 'submit' : 'button'}
+              onClick={isOperationsConfirm ? undefined : handleConfirmClick}
+              form={isOperationsConfirm ? CONFIRM_OPERATIONS_FORM_ID : undefined}
               disabled={confirmDisabled}
             >
               {confirmButtonName}