feat(trading): deposit form order (#43)

* fix: svg attributes in jsx

* fix(trading): alignment of input and dropdowns in market filter (vegaprotocol#7037)

* feat: change order of fields on depsoit form

* chore: remove incorrect asset warning

* fix: position of node health indicator

* feat: change field order and tidy up

* feat: add targeted asset for squid onboard form

* fix: make from asset not required when depositing without squid

* feat: remove squid from onboarding

* test: fix tvl test which requires specific id

---------

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/trading/client-pages/invite/step-deposit.tsx

@@ -4,7 +4,6 @@ import { StepHeader } from './step-header';
 import { Link } from 'react-router-dom';
 import { Card } from '../../components/card';
 import { OnboardDeposit } from '../../components/deposit-container';
-import { ONBOARDING_TARGET_ASSET } from '../../lib/constants';
 import { Links } from '../../lib/links';
 import { useOnboardStore } from '../../stores/onboard';
 import { ProgressionChain } from './step-progression-chain';
@@ -29,7 +28,6 @@ export const StepDeposit = (props: { onComplete: () => void }) => {
         <OnboardDeposit
           onDeposit={props.onComplete}
           minAmount={requiredFunds?.toString()}
-          initialAssetId={ONBOARDING_TARGET_ASSET}
         />
       </Card>
       <p className="flex gap-4 justify-center text-center">

apps/trading/components/asset-option/asset-option.tsx

@@ -26,13 +26,7 @@ export const AssetOption = ({
             : asset.source.__typename}
         </div>
       </div>
-      {balance && (
-        <div className="ml-auto text-sm">
-          {typeof balance === 'string'
-            ? addDecimalsFormatNumber(balance, asset.decimals)
-            : balance}
-        </div>
-      )}
+      {balance && <div className="ml-auto text-sm">{balance}</div>}
     </div>
   );
 };

apps/trading/components/deposit-container/deposit-form.tsx

@@ -15,6 +15,7 @@ import * as Fields from './fields';
 import { FeedbackDialog, SquidFeedbackDialog } from './feedback-dialog';
 import { type TxDeposit, type TxSquidDeposit } from '../../stores/evm';
 import { useDepositForm } from './use-deposit-form';
+import { APP_TOKEN_ID } from '../../lib/constants';
 
 export const DepositForm = (props: {
   squid: Squid;
@@ -42,22 +43,6 @@ export const DepositForm = (props: {
   return (
     <FormProvider {...form}>
       <form data-testid="deposit-form" onSubmit={onSubmit}>
-        <Fields.FromAddress control={form.control} />
-        <Fields.FromChain
-          control={form.control}
-          chains={props.squid.chains}
-          tokens={props.squid.tokens}
-        />
-        <Fields.FromAsset
-          control={form.control}
-          tokens={tokens}
-          chain={chain}
-        />
-        <Fields.Amount
-          control={form.control}
-          balanceOf={balances.data?.balanceOf}
-          nativeBalanceOf={nativeBalance.data}
-        />
         <Fields.ToPubKeySelect control={form.control} pubKeys={pubKeys} />
         <Fields.ToAsset
           control={form.control}
@@ -66,6 +51,26 @@ export const DepositForm = (props: {
           queryKey={balances.queryKey}
           route={route.data?.route}
         />
+        <Fields.FromAddress control={form.control} />
+        {toAsset?.id !== APP_TOKEN_ID && (
+          <>
+            <Fields.FromChain
+              control={form.control}
+              chains={props.squid.chains}
+              tokens={props.squid.tokens}
+            />
+            <Fields.FromAsset
+              control={form.control}
+              tokens={tokens}
+              chain={chain}
+            />
+          </>
+        )}
+        <Fields.Amount
+          control={form.control}
+          balanceOf={balances.data?.balanceOf}
+          nativeBalanceOf={nativeBalance.data}
+        />
         {isSwap && (
           <div className="mb-4">
             <SwapInfo route={route.data?.route} error={route.error} />

apps/trading/components/deposit-container/fallback-deposit-form.tsx

@@ -1,21 +1,14 @@
 import { FormProvider } from 'react-hook-form';
 
 import { type AssetERC20 } from '@vegaprotocol/assets';
-import {
-  Button,
-  Intent,
-  TradingRichSelectTriggerContent,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
+import { Button, Intent } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet-react';
 
 import { useT } from '../../lib/use-t';
 
 import * as Fields from './fields';
 
 import { type Configs } from './form-schema';
-import { AssetOption } from '../asset-option';
-import { formatNumber } from '@vegaprotocol/utils';
 import { FeedbackDialog } from './feedback-dialog';
 import { useFallbackDepositForm } from './use-fallback-deposit-form';
 import { type TxDeposit } from '../../stores/evm';
@@ -35,42 +28,14 @@ export const FallbackDepositForm = (props: {
   return (
     <FormProvider {...form}>
       <form data-testid="deposit-form" onSubmit={onSubmit}>
-        <Fields.FromAddress control={form.control} />
-        <Fields.FromChain control={form.control} disabled={true} />
-        <Fields.FromAsset
-          control={form.control}
-          disabled={true}
-          disabledMessage={
-            toAsset ? (
-              <Tooltip
-                description={t('Swaps not available')}
-                align="center"
-                side="bottom"
-                sideOffset={1}
-              >
-                <span>
-                  <TradingRichSelectTriggerContent>
-                    <AssetOption
-                      asset={toAsset}
-                      balance={
-                        <span>
-                          {formatNumber(balances.data?.balanceOf || 0)}
-                        </span>
-                      }
-                    />
-                  </TradingRichSelectTriggerContent>
-                </span>
-              </Tooltip>
-            ) : undefined
-          }
-        />
         <Fields.ToPubKeySelect control={form.control} pubKeys={pubKeys} />
         <Fields.ToAsset
           control={form.control}
           assets={props.assets}
           toAsset={toAsset}
           queryKey={balances.queryKey}
         />
+        <Fields.FromAddress control={form.control} />
         <Fields.Amount
           control={form.control}
           balanceOf={balances.data?.balanceOf}

apps/trading/components/deposit-container/fields/from-address.tsx

@@ -43,8 +43,8 @@ export function FromAddress(props: { control: Control<FormFields> }) {
           return (
             <>
               {isConnected ? (
-                <div className="flex items-center gap-1">
-                  <Emblem chain={String(chainId)} />
+                <div className="flex items-center gap-2">
+                  <Emblem chain={String(chainId)} size={25} />
                   <input
                     value={address}
                     readOnly

apps/trading/components/deposit-container/fields/from-chain.tsx

@@ -11,10 +11,7 @@ import { type Token, type ChainData } from '@0xsquid/squid-types';
 import { useChainId, useSwitchChain } from 'wagmi';
 import { isAssetNative } from '@vegaprotocol/utils';
 
-export function FromChain({
-  disabled = false,
-  ...props
-}: {
+export function FromChain(props: {
   control: Control<FormFields>;
   chains?: ChainData[];
   tokens?: Token[];
@@ -32,65 +29,59 @@ export function FromChain({
       render={({ field, fieldState }) => {
         return (
           <FormGroup label="From chain" labelFor="chain">
-            {disabled ? (
-              <p className="text-surface-1-fg-muted text-xs">
-                {t('Swaps not available')}
-              </p>
-            ) : (
-              <>
-                <TradingRichSelect
-                  placeholder={t('Select chain')}
-                  value={field.value}
-                  onValueChange={async (value) => {
-                    // Set the from asset immediately to the native asset for the
-                    // selected chain
-                    const defaultToken = props.tokens?.find((t) => {
-                      return t.chainId === value && isAssetNative(t.address);
-                    });
+            <>
+              <TradingRichSelect
+                placeholder={t('Select chain')}
+                value={field.value}
+                onValueChange={async (value) => {
+                  // Set the from asset immediately to the native asset for the
+                  // selected chain
+                  const defaultToken = props.tokens?.find((t) => {
+                    return t.chainId === value && isAssetNative(t.address);
+                  });
 
-                    field.onChange(value);
-                    form.setValue('fromAsset', defaultToken?.address || '');
+                  field.onChange(value);
+                  form.setValue('fromAsset', defaultToken?.address || '');
 
-                    if (value !== String(chainId)) {
-                      await switchChainAsync({ chainId: Number(value) });
-                    }
-                  }}
-                >
-                  {props.chains?.map((c) => {
-                    return (
-                      <TradingRichSelectOption
-                        value={c.chainId.toString()}
-                        key={c.chainId}
-                      >
-                        <div className="w-full flex items-center gap-2 h-10">
-                          {/* eslint-disable-next-line @next/next/no-img-element */}
-                          <img
-                            alt={t('Logo for {{name}}', {
-                              name: c.networkName,
-                            })}
-                            src={c.chainIconURI}
-                            width="30"
-                            height="30"
-                            className="rounded-full bg-surface-1 border-surface-1 border-2"
-                          />
-                          <div className="text-sm text-left leading-4">
-                            <div>{c.networkName}</div>
-                            <div className="text-secondary text-xs">
-                              {c.chainId}
-                            </div>
+                  if (value !== String(chainId)) {
+                    await switchChainAsync({ chainId: Number(value) });
+                  }
+                }}
+              >
+                {props.chains?.map((c) => {
+                  return (
+                    <TradingRichSelectOption
+                      value={c.chainId.toString()}
+                      key={c.chainId}
+                    >
+                      <div className="w-full flex items-center gap-2 h-10">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          alt={t('Logo for {{name}}', {
+                            name: c.networkName,
+                          })}
+                          src={c.chainIconURI}
+                          width="30"
+                          height="30"
+                          className="rounded-full bg-surface-1 border-surface-1 border-2"
+                        />
+                        <div className="text-sm text-left leading-4">
+                          <div>{c.networkName}</div>
+                          <div className="text-secondary text-xs">
+                            {c.chainId}
                           </div>
                         </div>
-                      </TradingRichSelectOption>
-                    );
-                  })}
-                </TradingRichSelect>
-                {fieldState.error && (
-                  <TradingInputError>
-                    {fieldState.error.message}
-                  </TradingInputError>
-                )}
-              </>
-            )}
+                      </div>
+                    </TradingRichSelectOption>
+                  );
+                })}
+              </TradingRichSelect>
+              {fieldState.error && (
+                <TradingInputError>
+                  {fieldState.error.message}
+                </TradingInputError>
+              )}
+            </>
           </FormGroup>
         );
       }}

apps/trading/components/deposit-container/fields/index.ts

@@ -5,4 +5,5 @@ export { Amount } from './amount';
 export { ToPubKeySelect } from './to-pubkey-select';
 export { ToPubKey } from './to-pubkey';
 export { ToAsset } from './to-asset';
+export { ToAssetTargeted } from './to-asset-targeted';
 export { Receives } from './receives';

apps/trading/components/deposit-container/fields/to-asset-targeted.tsx

@@ -0,0 +1,16 @@
+import { FormGroup } from '@vegaprotocol/ui-toolkit';
+import { AssetOption } from '../../asset-option';
+import { type AssetERC20 } from '@vegaprotocol/assets';
+import { useT } from '../../../lib/use-t';
+
+export const ToAssetTargeted = (props: {
+  toAsset: AssetERC20;
+  balance: string;
+}) => {
+  const t = useT();
+  return (
+    <FormGroup label={t('Asset')} labelFor="asset">
+      <AssetOption asset={props.toAsset} balance={props.balance} />
+    </FormGroup>
+  );
+};

apps/trading/components/deposit-container/fields/to-asset.tsx

@@ -13,7 +13,6 @@ import {
 } from '../../form-secondary-action';
 import { Faucet } from '../faucet';
 import { type FormFields } from '../form-schema';
-import { isAssetUSDTArb } from '../../../lib/utils/is-asset-usdt-arb';
 import { useT } from '../../../lib/use-t';
 import {
   type AssetERC20,
@@ -77,13 +76,6 @@ export function ToAsset(props: {
             {fieldState.error && (
               <TradingInputError>{fieldState.error.message}</TradingInputError>
             )}
-            {props.toAsset && !isAssetUSDTArb(props.toAsset) && (
-              <TradingInputError intent="warning">
-                {t(
-                  'The majority of markets on the network settle in USDT Arb. Are you sure you wish to deposit the selected asset?'
-                )}
-              </TradingInputError>
-            )}
             {props.toAsset && (
               <FormSecondaryActionWrapper>
                 <FormSecondaryActionButton

apps/trading/components/deposit-container/fields/to-pubkey.tsx

@@ -1,9 +1,4 @@
-import {
-  FormGroup,
-  Input,
-  TradingInputError,
-  truncateMiddle,
-} from '@vegaprotocol/ui-toolkit';
+import { FormGroup, Input, TradingInputError } from '@vegaprotocol/ui-toolkit';
 import { type Control, Controller } from 'react-hook-form';
 import { type FormFields } from '../form-schema';
 import { useT } from '../../../lib/use-t';
@@ -22,25 +17,20 @@ export function ToPubKey(props: {
       render={({ field, fieldState }) => {
         const key = props.pubKeys.find((p) => p.publicKey === field.value);
 
-        if (key) {
-          return (
-            <div className="grid grid-cols-2 text-xs">
-              <dt className="text-surface-1-fg-muted">{t('Recipient')}</dt>
-              <dd className="text-right">
-                <div>
-                  {key.name} | {truncateMiddle(key.publicKey)}
-                </div>
-              </dd>
-            </div>
-          );
-        }
-
         return (
           <FormGroup
             label={t('DEPOSIT_FIELD_TO_PUBKEY', { appName: APP_NAME })}
             labelFor="toPubKey"
           >
-            <Input {...field} value={field.value} />
+            {key ? (
+              <input
+                className="appearance-none bg-transparent text-sm text-surface-0-fg-muted w-full focus:outline-none"
+                readOnly
+                value={field.value}
+              />
+            ) : (
+              <Input {...field} value={field.value} />
+            )}
             {fieldState.error && (
               <TradingInputError>{fieldState.error.message}</TradingInputError>
             )}