Configurable "data" in Send Transactions (#815)

* Configurable "data" in Send Transactions

* update preferences defaults

* Use custom data input for native assets only

* Use action title from simulation in confirmation view

Author: everdimension

src/background/Wallet/WalletRecord.ts

@@ -846,6 +846,7 @@ export class WalletRecordModel {
       showNetworkSwitchShortcut: true,
       overviewChain: '',
       configurableNonce: false,
+      configurableTransactionData: false,
       invitationBannerDismissed: false,
       recentAddresses: [],
       mintDnaBannerDismissed: false,

src/background/Wallet/model/types.ts

@@ -43,6 +43,8 @@ interface PublicPreferences {
    * Allow to configure nonce before signing transactions
    */
   configurableNonce?: boolean;
+  /** Custom field for "data" in Send Form */
+  configurableTransactionData?: boolean;
   invitationBannerDismissed?: boolean;
   recentAddresses?: string[];
   mintDnaBannerDismissed?: boolean;

src/ui/components/address-action/TransactionConfirmationView/TransactionConfirmationView.tsx

@@ -103,7 +103,9 @@ export function TransactionConfirmationView({
             borderRadius: 12,
           }}
         >
-          <UIText kind="headline/h2">{title}</UIText>
+          <UIText kind="headline/h2">
+            {txInterpretQuery.data?.action?.type.display_value ?? title}
+          </UIText>
           <HStack gap={8} alignItems="center">
             <WalletAvatar
               address={wallet.address}

src/ui/pages/SendForm/SendForm.tsx

@@ -60,6 +60,7 @@ import { getError } from 'get-error';
 import type { AddressAction } from 'src/modules/zerion-api/requests/wallet-get-actions';
 import BigNumber from 'bignumber.js';
 import { useAssetFullInfo } from 'src/modules/zerion-api/hooks/useAssetFullInfo';
+import { FormFieldset } from 'src/ui/ui-kit/FormFieldset';
 import { TransactionConfiguration } from '../SendTransaction/TransactionConfiguration';
 import { NetworkSelect } from '../Networks/NetworkSelect';
 import { NetworkFeeLineInfo } from '../SendTransaction/TransactionConfiguration/TransactionConfiguration';
@@ -163,6 +164,8 @@ function SendFormComponent() {
     tokenChain = '',
     tokenValue = '',
     addressInputValue = '',
+    data = '',
+    tokenAssetCode = '',
   } = formState;
   const chain = tokenChain ? createChain(tokenChain) : null;
   const currentPosition = useCurrentPosition(formState, currentPositions);
@@ -210,6 +213,8 @@ function SendFormComponent() {
     supportsSponsoredTransactions: network?.supports_sponsored_transactions,
   });
 
+  const nativeAssetId = network?.native_asset?.id;
+  const isNativeAsset = tokenAssetCode === nativeAssetId;
   const configuration = useMemo(() => toConfiguration(formState), [formState]);
 
   const snapshotRef = useRef<{ state: SendFormState } | null>(null);
@@ -461,7 +466,7 @@ function SendFormComponent() {
                 value={tokenValue}
                 network={network}
                 onChange={(value) => handleChange('tokenValue', value)}
-                tokenAssetCode={formState.tokenAssetCode || null}
+                tokenAssetCode={tokenAssetCode || null}
                 currentItem={currentPosition ?? null}
                 items={currentPositions}
                 onAssetCodeChange={(value) =>
@@ -478,6 +483,41 @@ function SendFormComponent() {
                 networkId={formState.tokenChain || null}
               />
             ) : null}
+            {preferences?.configurableTransactionData &&
+            isNativeAsset &&
+            addressType === 'evm' ? (
+              <FormFieldset
+                title="Data"
+                style={{ borderBottomRightRadius: 4 }}
+                startInput={
+                  <textarea
+                    name="data"
+                    value={data}
+                    onChange={(event) => {
+                      handleChange('data', event.currentTarget.value);
+                    }}
+                    style={{
+                      border: 'none',
+                      outline: 'none',
+                      backgroundColor: 'transparent',
+                      fontSize: 'inherit',
+                      fontFamily: 'inherit',
+                      fontWeight: 'inherit',
+                      fontStyle: 'inherit',
+                      lineHeight: 'inherit',
+                      padding: 16,
+                      paddingTop: 0,
+                      width: 'calc(100% + 32px)',
+                      marginLeft: -16,
+                      marginBottom: -16,
+                      resize: 'vertical',
+                    }}
+                    rows={2}
+                    placeholder="0x..."
+                  />
+                }
+              />
+            ) : null}
           </VStack>
         </VStack>
       </form>

src/ui/pages/SendForm/shared/SendFormState.ts

@@ -10,6 +10,7 @@ export type SendFormState = {
    * @see SendFormState.addressInputValue
    */
   to?: string;
+  data?: string; // custom data
   tokenValue?: string;
   tokenChain?: string;
   tokenAssetCode?: string;

src/ui/pages/SendForm/shared/prepareSendData.ts

@@ -170,6 +170,7 @@ export async function prepareSendData(
     gasLimit,
     nftAmount,
     nftId,
+    data,
   } = formState;
   if (!from || !to || !tokenChain) {
     return EMPTY_SEND_DATA;
@@ -225,6 +226,9 @@ export async function prepareSendData(
           getDecimals({ asset: position.asset, chain })
         ).toFixed(),
       });
+      if (data && isNativeAsset) {
+        tx = { ...tx, data };
+      }
     }
     if (gasLimit) {
       invariant(isNumeric(gasLimit), 'Gas limit must be numeric');

src/ui/pages/Settings/Settings.tsx

@@ -458,6 +458,16 @@ function DeveloperTools() {
               </span>
             }
           />
+          <ToggleSettingLine
+            text="Custom Data"
+            checked={preferences?.configurableTransactionData ?? false}
+            onChange={(event) => {
+              setPreferences({
+                configurableTransactionData: event.target.checked,
+              });
+            }}
+            detailText={<span>Attach arbitrary data to Send transactions</span>}
+          />
           <ToggleSettingLine
             text="Recognizable Connect Buttons"
             checked={globalPreferences?.recognizableConnectButtons || false}