fix: validate size accepts string

Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into fix/step-fix-8-market-dp
fix(explorer): incorrect destination in market link components (#2968 )
2023-02-23 10:56:24 +00:00 · 2023-02-23 10:48:43 +00:00 · 2023-02-23 10:46:55 +00:00 · 2023-02-23 10:35:52 +00:00 · 2023-02-23 10:16:22 +00:00 · 2023-02-23 09:57:54 +00:00
24 changed files with 1888 additions and 1453 deletions
@@ -48,7 +48,7 @@ const MarketLink = ({
      <Link
        className="underline"
        {...props}
-        to={`/${Routes.MARKETS}#${id}`}
+        to={`/${Routes.MARKETS}/${id}`}
        title={id}
      >
        {label}
@@ -56,7 +56,7 @@ const MarketLink = ({
    );
  } else {
    return (
-      <Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
+      <Link className="underline" {...props} to={`/${Routes.MARKETS}/${id}`}>
        <Hash text={id} />
      </Link>
    );
@@ -22,8 +22,7 @@ export const MarketDetails = ({
 }: {
  market: MarketInfoNoCandlesQuery['market'];
 }) => {
-  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
+  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
  const assetId = useMemo(
    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
    [market]
@@ -39,6 +38,10 @@ export const MarketDetails = ({
  const assetDecimals =
    market.tradableInstrument.instrument.product.settlementAsset.decimals;

+  const liquidityPriceRange = formatNumberPercentage(
+    new BigNumber(market.lpPriceRange).times(100)
+  );
+
  const panels = [
    {
      title: t('Key details'),
@@ -179,32 +182,41 @@ export const MarketDetails = ({
    {
      title: t('Liquidity price range'),
      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            liquidityPriceRange: formatNumberPercentage(
-              new BigNumber(market.lpPriceRange).times(100)
-            ),
-            LPVolumeMin:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .minus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-            LPVolumeMax:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .plus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-          }}
-        ></MarketInfoTable>
+        <>
+          <p className="text-xs mb-4">
+            {`For liquidity orders count towards a commitment they have to be
+        within either the liquidity or price monitoring bounds (whichever is
+        tighter).`}
+          </p>
+          <p className="text-xs mb-4">
+            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
+        price.`}
+          </p>
+          <MarketInfoTable
+            noBorder={false}
+            data={{
+              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+              lowestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .minus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+              highestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .plus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+            }}
+          ></MarketInfoTable>
+        </>
      ),
    },
    {
@@ -72,7 +72,11 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
    cy.getByTestId('deposit-button').click();
    connectEthereumWallet('Unknown');
    cy.get(assetSelectField, txTimeout).select(btcName, { force: true });
-    cy.getByTestId('deposit-approve-submit').click();
+    cy.getByTestId('approve-warning').should(
+      'contain.text',
+      `Deposits of ${btcSymbol} not approved`
+    );
+    cy.getByTestId('deposit-submit').click();
    cy.getByTestId('dialog-title').should('contain.text', 'Approve complete');
    cy.get('[data-testid="Return to deposit"]').click();
    cy.get(amountField).clear().type('10');
@@ -407,7 +411,7 @@ describe('capsule', { tags: '@slow' }, () => {
    cy.getByTestId('deposit-button').click();
    connectEthereumWallet('Unknown');
    cy.get(assetSelectField, txTimeout).select(vegaName, { force: true });
-    cy.getByTestId('deposit-approve-submit').click();
+    cy.getByTestId('deposit-submit').click();
    cy.getByTestId('dialog-title').should('contain.text', 'Approve complete');
    cy.get('[data-testid="Return to deposit"]').click();
    cy.get(amountField).clear().type('10000');
@@ -1,3 +1,5 @@
+import { removeDecimal } from '@vegaprotocol/cypress';
+import { ethers } from 'ethers';
 import { connectEthereumWallet } from '../support/ethereum-wallet';
 import { selectAsset } from '../support/helpers';

@@ -9,7 +11,7 @@ const formFieldError = 'input-error-text';
 const ASSET_EURO = 1;

 describe('deposit form validation', { tags: '@smoke' }, () => {
-  before(() => {
+  function openDepositForm() {
    cy.mockWeb3Provider();
    cy.mockSubscription();
    cy.mockTradingPage();
@@ -20,10 +22,14 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
    cy.getByTestId('deposit-button').click();
    cy.wait('@Assets');
    connectEthereumWallet('MetaMask');
-    cy.getByTestId('deposit-submit').click();
+  }
+
+  before(() => {
+    openDepositForm();
  });

  it('handles empty fields', () => {
+    cy.getByTestId('deposit-submit').click();
    cy.getByTestId(formFieldError).should('contain.text', 'Required');
    cy.getByTestId(formFieldError).should('have.length', 2);
  });
@@ -44,6 +50,13 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
  });

  it('invalid amount', () => {
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
    // Deposit amount smaller than minimum viable for selected asset
    // Select an amount so that we have a known decimal places value to work with
    selectAsset(ASSET_EURO);
@@ -56,12 +69,16 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
  });

  it('insufficient funds', () => {
-    // 1001-DEPO-005
-    // Deposit amount is valid, but less than approved. This will always be the case because our
-    // CI wallet wont have approved any assets
+    mockWeb3DepositCalls({
+      allowance: '1000',
+      depositLifetimeLimit: '1000',
+      balance: '800',
+      deposited: '0',
+      dps: 5,
+    });
    cy.get(amountField)
      .clear()
-      .type('100')
+      .type('850')
      .next(`[data-testid="${formFieldError}"]`)
      .should('have.text', 'Insufficient amount in Ethereum wallet');
  });
@@ -88,3 +105,90 @@ describe('deposit actions', { tags: '@smoke' }, () => {
    cy.getByTestId('deposit-submit').should('be.visible');
  });
 });
+
+function mockWeb3DepositCalls({
+  allowance,
+  depositLifetimeLimit,
+  balance,
+  deposited,
+  dps,
+}: {
+  allowance: string;
+  depositLifetimeLimit: string;
+  balance: string;
+  deposited: string;
+  dps: number;
+}) {
+  const assetContractAddress = '0x0158031158bb4df2ad02eaa31e8963e84ea978a4';
+  const collateralBridgeAddress = '0x7fe27d970bc8afc3b11cc8d9737bfb66b1efd799';
+  const toResult = (value: string, dps: number) => {
+    const rawValue = removeDecimal(value, dps);
+    return ethers.utils.hexZeroPad(
+      ethers.utils.hexlify(parseInt(rawValue)),
+      32
+    );
+  };
+  cy.intercept('POST', 'http://localhost:8545', (req) => {
+    // Mock chainId call
+    if (req.body.method === 'eth_chainId') {
+      req.alias = 'eth_chainId';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: '0xaa36a7', // 11155111 for sepolia chain id
+      });
+    }
+
+    // Mock deposited amount
+    if (req.body.method === 'eth_getStorageAt') {
+      req.alias = 'eth_getStorageAt';
+      req.reply({
+        id: req.body.id,
+        jsonrpc: req.body.jsonrpc,
+        result: toResult(deposited, dps),
+      });
+    }
+
+    if (req.body.method === 'eth_call') {
+      // Mock approved amount for asset on collateral bridge
+      if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0xdd62ed3e000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f0000000000000000000000007fe27d970bc8afc3b11cc8d9737bfb66b1efd799'
+      ) {
+        req.alias = 'eth_call_allowance';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(allowance, dps),
+        });
+      }
+      // Mock balance of asset in Ethereum wallet
+      else if (
+        req.body.params[0].to === assetContractAddress &&
+        req.body.params[0].data ===
+          '0x70a08231000000000000000000000000ee7d375bcb50c26d52e1a4a472d8822a2a22d94f'
+      ) {
+        req.alias = 'eth_call_balanceOf';
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(balance, dps),
+        });
+      }
+      // Mock deposit lifetime limit
+      else if (
+        req.body.params[0].to === collateralBridgeAddress &&
+        req.body.params[0].data ===
+          '0x354a897a0000000000000000000000000158031158bb4df2ad02eaa31e8963e84ea978a4'
+      ) {
+        req.alias = 'eth_call_get_deposit_maximum'; // deposit lifetime limit
+        req.reply({
+          id: req.body.id,
+          jsonrpc: req.body.jsonrpc,
+          result: toResult(depositLifetimeLimit, dps),
+        });
+      }
+    }
+  });
+}
@@ -29,6 +29,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
    validateMarketDataRow(0, 'Mark Price', '0.05749');
    validateMarketDataRow(1, 'Best Bid Price', '6.81765 ');
    validateMarketDataRow(2, 'Best Offer Price', '6.81769 ');
+    validateMarketDataRow(3, 'Quote Unit', 'BTC');
  });

  it('market volume displayed', () => {
@@ -168,9 +169,9 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
  it('liquidity price range displayed', () => {
    cy.getByTestId(marketTitle).contains('Liquidity price range').click();

-    validateMarketDataRow(0, 'Liquidity Price Range', '2.00%');
-    validateMarketDataRow(1, 'LP Volume Min', '0.05634 tBTC');
-    validateMarketDataRow(2, 'LP Volume Max', '0.05864 tBTC');
+    validateMarketDataRow(0, 'Liquidity Price Range', '2.00% of mid price');
+    validateMarketDataRow(1, 'Lowest Price', '0.05634 BTC');
+    validateMarketDataRow(2, 'Highest Price', '0.05864 BTC');
  });

  it('oracle displayed', () => {
@@ -17,19 +17,50 @@ describe('connect hosted wallet', { tags: '@smoke' }, () => {
  });

  it('can connect', () => {
+    // Mock authentication
+    cy.intercept('POST', 'https://wallet.testnet.vega.xyz/api/v1/auth/token', {
+      body: {
+        token: 'test-token',
+      },
+    });
+    // Mock getting keys from wallet
+    cy.intercept('GET', 'https://wallet.testnet.vega.xyz/api/v1/keys', {
+      body: {
+        keys: [
+          {
+            algorithm: {
+              name: 'algo',
+              version: 1,
+            },
+            index: 0,
+            meta: [],
+            pub: 'HOSTED_PUBKEY',
+            tainted: false,
+          },
+        ],
+      },
+    });
    cy.getByTestId(connectVegaBtn).click();
-    mockConnectWallet();
    cy.contains('Connect Vega wallet');
    cy.contains('Hosted Fairground wallet');

    cy.getByTestId('connectors-list')
-      .find('[data-testid="connector-jsonRpc"]')
+      .find('[data-testid="connector-hosted"]')
      .click();
-    cy.wait('@walletReq');
+    cy.getByTestId(form).find('#wallet').click().type('user');
+    cy.getByTestId(form).find('#passphrase').click().type('pass');
+    cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
    cy.getByTestId(manageVegaBtn).should('exist');
  });

  it('doesnt connect with invalid credentials', () => {
+    // Mock incorrect username/password
+    cy.intercept('POST', 'https://wallet.testnet.vega.xyz/api/v1/auth/token', {
+      body: {
+        error: 'No wallet',
+      },
+      statusCode: 403, // 403 forbidden invalid crednetials
+    });
    cy.getByTestId(connectVegaBtn).click();
    cy.getByTestId('connectors-list')
      .find('[data-testid="connector-hosted"]')
@@ -40,7 +71,7 @@ describe('connect hosted wallet', { tags: '@smoke' }, () => {
    cy.getByTestId('form-error').should('have.text', 'Invalid credentials');
  });

-  it('doesnt connect with invalid fields', () => {
+  it('doesnt connect with empty fields', () => {
    cy.getByTestId(connectVegaBtn).click();
    cy.getByTestId('connectors-list')
      .find('[data-testid="connector-hosted"]')
@@ -123,7 +123,7 @@ export const MarketLiquiditySupplied = ({
      {showMessage && (
        <p className="mt-4">
          {t(
-            'The market is in an auction because there are no priced limit orders, which are required to deploy liquidity commitment pegged orders. This means the order book is empty on one or both sides.'
+            'The market has sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.'
          )}
        </p>
      )}
@@ -58,6 +58,7 @@ export const AssetDetailsDialog = ({
  const { data } = useAssetsDataProvider();

  const asset = data?.find((a) => a.id === assetId);
+  const assetSymbol = asset?.symbol || '';

  const content = asset ? (
    <div className="my-2">
@@ -97,6 +98,12 @@ export const AssetDetailsDialog = ({
      }}
    >
      {content}
+      <p className="text-sm mb-4">
+        {t(
+          'There is 1 unit of the settlement asset (%s) to every 1 quote unit.',
+          [assetSymbol]
+        )}
+      </p>
      <div className="w-1/4">
        <Button
          data-testid="close-asset-details-dialog"
@@ -48,7 +48,7 @@ export const DealTicketEstimates = ({
        <DataTitle quoteName={quoteName}>{t('Est. Position Size')}</DataTitle>
        <ValueTooltipRow
          value={notionalSize}
-          description={constants.NOTIONAL_SIZE_TOOLTIP_TEXT}
+          description={constants.NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName || '')}
        />
      </div>
    )}
@@ -66,7 +66,7 @@ export const DealTicketEstimates = ({
        <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
        <ValueTooltipRow
          value={estMargin}
-          description={constants.EST_MARGIN_TOOLTIP_TEXT}
+          description={constants.EST_MARGIN_TOOLTIP_TEXT(quoteName || '')}
        />
      </div>
    )}
@@ -75,7 +75,7 @@ export const DealTicketEstimates = ({
        <DataTitle quoteName={quoteName}>{t('Est. Close out')}</DataTitle>
        <ValueTooltipRow
          value={estCloseOut}
-          description={constants.EST_CLOSEOUT_TOOLTIP_TEXT}
+          description={constants.EST_CLOSEOUT_TOOLTIP_TEXT(quoteName || '')}
        />
      </div>
    )}
@@ -318,33 +318,37 @@ const SummaryMessage = memo(
    }
    if (!pubKey) {
      return (
-        <Notification
-          testId={'deal-ticket-connect-wallet'}
-          intent={Intent.Warning}
-          message={
-            <p className="text-sm pb-2">
-              You need a{' '}
-              <ExternalLink href="https://vega.xyz/wallet">
-                Vega wallet
-              </ExternalLink>{' '}
-              with {assetSymbol} to start trading in this market.
-            </p>
-          }
-          buttonProps={{
-            text: t('Connect wallet'),
-            action: openVegaWalletDialog,
-            dataTestId: 'order-connect-wallet',
-            size: 'md',
-          }}
-        />
+        <div className="mb-4">
+          <Notification
+            testId={'deal-ticket-connect-wallet'}
+            intent={Intent.Warning}
+            message={
+              <p className="text-sm pb-2">
+                You need a{' '}
+                <ExternalLink href="https://vega.xyz/wallet">
+                  Vega wallet
+                </ExternalLink>{' '}
+                with {assetSymbol} to start trading in this market.
+              </p>
+            }
+            buttonProps={{
+              text: t('Connect wallet'),
+              action: openVegaWalletDialog,
+              dataTestId: 'order-connect-wallet',
+              size: 'md',
+            }}
+          />
+        </div>
      );
    }
    if (errorMessage === SummaryValidationType.NoCollateral) {
      return (
-        <ZeroBalanceError
-          asset={market.tradableInstrument.instrument.product.settlementAsset}
-          onClickCollateral={onClickCollateral}
-        />
+        <div className="mb-4">
+          <ZeroBalanceError
+            asset={market.tradableInstrument.instrument.product.settlementAsset}
+            onClickCollateral={onClickCollateral}
+          />
+        </div>
      );
    }

@@ -363,7 +367,11 @@ const SummaryMessage = memo(
    // If there is no blocking error but user doesn't have enough
    // balance render the margin warning, but still allow submission
    if (balanceError) {
-      return <MarginWarning balance={balance} margin={margin} asset={asset} />;
+      return (
+        <div className="mb-4">
+          <MarginWarning balance={balance} margin={margin} asset={asset} />;
+        </div>
+      );
    }

    // Show auction mode warning
@@ -375,13 +383,15 @@ const SummaryMessage = memo(
      ].includes(marketData.marketTradingMode)
    ) {
      return (
-        <Notification
-          intent={Intent.Warning}
-          testId={'dealticket-warning-auction'}
-          message={t(
-            'Any orders placed now will not trade until the auction ends'
-          )}
-        />
+        <div className="mb-4">
+          <Notification
+            intent={Intent.Warning}
+            testId={'dealticket-warning-auction'}
+            message={t(
+              'Any orders placed now will not trade until the auction ends'
+            )}
+          />
+        </div>
      );
    }

@@ -9,6 +9,7 @@ import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { createDocsLinks } from '@vegaprotocol/react-helpers';
 import { compileGridData } from './compile-grid-data';
 import { useMarket, useStaticMarketData } from '@vegaprotocol/market-list';
+import BigNumber from 'bignumber.js';

 type TradingModeTooltipProps = {
  marketId?: string;
@@ -115,13 +116,21 @@ export const TradingModeTooltip = ({
    case Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION: {
      switch (trigger) {
        case Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY: {
+          const notEnoughLiquidity = new BigNumber(
+            marketData.suppliedStake || 0
+          ).isLessThan(marketData.targetStake || 0);
          return (
            <section data-testid="trading-mode-tooltip">
              <p className={classNames({ 'mb-4': Boolean(compiledGrid) })}>
-                <span>
-                  {t(
-                    'This market is in auction until it reaches sufficient liquidity.'
-                  )}
+                <span className="mb-2">
+                  {notEnoughLiquidity &&
+                    t(
+                      'This market is in auction until it reaches sufficient liquidity.'
+                    )}
+                  {!notEnoughLiquidity &&
+                    t(
+                      'This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.'
+                    )}
                </span>{' '}
                {VEGA_DOCS_URL && (
                  <ExternalLink
@@ -1,17 +1,27 @@
 import { t } from '@vegaprotocol/react-helpers';

-export const EST_MARGIN_TOOLTIP_TEXT = t(
-  'When opening a position on a futures market, you must post margin to cover any potential losses that you may incur. The margin is typically a fraction of the notional position size. For example, for a notional position size of $500, if the margin requirement is 10%, then the estimated margin would be approximately $50.'
-);
+export const EST_MARGIN_TOOLTIP_TEXT = (settlementAsset: string) =>
+  t(
+    `A fraction of the notional position size, in the market's settlement asset %s, to cover any potential losses that you may incur.
+
+  For example, for a notional size of $500, if the margin requirement is 10%, then the estimated margin would be approximately $50.`,
+    [settlementAsset]
+  );
 export const CONTRACTS_MARGIN_TOOLTIP_TEXT = t(
  'The number of contracts determines how many units of the futures contract to buy or sell. For example, this is similar to buying one share of a listed company. The value of 1 contract is equivalent to the price of the contract. For example, if the current price is $50, then one contract is worth $50.'
 );
-export const EST_CLOSEOUT_TOOLTIP_TEXT = t(
-  'Because you only need to post a fraction of your position size as margin when trading futures, it is possible to obtain leverage meaning your notional position size exceeds your account balance. In this scenario, if the market moves against your position, it will sometimes be necessary to force close your position due to insufficient funds. The estimated close out tells you the price at which that would happen based on current position and account balance.'
-);
-export const NOTIONAL_SIZE_TOOLTIP_TEXT = t(
-  'The notional size represents the position size in the settlement asset of the futures contract. The notional size is calculated by multiplying the number of contracts by the price of the contract. For example, ten contracts traded at a price of $50 has a notional size of $500.'
-);
+export const EST_CLOSEOUT_TOOLTIP_TEXT = (quote: string) =>
+  t(
+    `If the price drops below this number, measured in the market price quote unit %s, you will be closed out, based on your current position and account balance.`,
+    [quote]
+  );
+export const NOTIONAL_SIZE_TOOLTIP_TEXT = (settlementAsset: string) =>
+  t(
+    `The notional size represents the position size in the settlement asset %s of the futures contract. This is calculated by multiplying the number of contracts by the prices of the contract.
+
+  For example 10 contracts traded at a price of $50 has a notional size of $500.`,
+    [settlementAsset]
+  );
 export const EST_FEES_TOOLTIP_TEXT = t(
  'When you execute a new buy or sell order, you must pay a small amount of commission to the network for doing so. This fee is used to provide income to the node operates of the network and market makers who make prices on the futures market you are trading.'
 );
@@ -72,13 +72,13 @@ export const useFeeDealTicketDetails = (
    return null;
  }, [derivedPrice, order.size, market.decimalPlaces]);

-  const symbol =
+  const assetSymbol =
    market.tradableInstrument.instrument.product.settlementAsset.symbol;

  return useMemo(() => {
    return {
      market,
-      symbol,
+      assetSymbol,
      notionalSize,
      estMargin,
      estCloseOut,
@@ -87,7 +87,7 @@ export const useFeeDealTicketDetails = (
    };
  }, [
    market,
-    symbol,
+    assetSymbol,
    notionalSize,
    estMargin,
    estCloseOut,
@@ -98,7 +98,7 @@ export const useFeeDealTicketDetails = (

 export interface FeeDetails {
  market: Market;
-  symbol: string;
+  assetSymbol: string;
  notionalSize: string | null;
  estMargin: OrderMargin | null;
  estCloseOut: string | null;
@@ -106,7 +106,7 @@ export interface FeeDetails {
 }

 export const getFeeDetailsValues = ({
-  symbol,
+  assetSymbol,
  notionalSize,
  estMargin,
  estCloseOut,
@@ -114,6 +114,7 @@ export const getFeeDetailsValues = ({
 }: FeeDetails) => {
  const assetDecimals =
    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
  const formatValueWithMarketDp = (
    value: string | number | null | undefined
  ): string => {
@@ -132,8 +133,8 @@ export const getFeeDetailsValues = ({
    {
      label: t('Notional'),
      value: formatValueWithMarketDp(notionalSize),
-      symbol,
-      labelDescription: NOTIONAL_SIZE_TOOLTIP_TEXT,
+      symbol: assetSymbol,
+      labelDescription: NOTIONAL_SIZE_TOOLTIP_TEXT(assetSymbol),
    },
    {
      label: t('Fees'),
@@ -144,31 +145,31 @@ export const getFeeDetailsValues = ({
        <>
          <span>
            {t(
-              'The most you would be expected to pay in fees, the actual amount may vary.'
+              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
            )}
          </span>
          <FeesBreakdown
            fees={estMargin?.fees}
            feeFactors={market.fees.factors}
-            symbol={symbol}
+            symbol={assetSymbol}
            decimals={assetDecimals}
          />
        </>
      ),
-      symbol,
+      symbol: assetSymbol,
    },
    {
      label: t('Margin'),
      value:
        estMargin?.margin && `~${formatValueWithAssetDp(estMargin?.margin)}`,
-      symbol,
-      labelDescription: EST_MARGIN_TOOLTIP_TEXT,
+      symbol: assetSymbol,
+      labelDescription: EST_MARGIN_TOOLTIP_TEXT(assetSymbol),
    },
    {
      label: t('Liquidation'),
      value: estCloseOut && `~${formatValueWithMarketDp(estCloseOut)}`,
      symbol: market.tradableInstrument.instrument.product.quoteName,
-      labelDescription: EST_CLOSEOUT_TOOLTIP_TEXT,
+      labelDescription: EST_CLOSEOUT_TOOLTIP_TEXT(quoteName),
    },
  ];
 };
@@ -4,10 +4,12 @@ import type { DepositFormProps } from './deposit-form';
 import { DepositForm } from './deposit-form';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useWeb3ConnectStore } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';

 jest.mock('@vegaprotocol/wallet');
+jest.mock('@vegaprotocol/web3');
 jest.mock('@web3-react/core');

 const mockConnector = { deactivate: jest.fn() };
@@ -37,6 +39,8 @@ function generateAsset(): AssetFieldsFragment {
 let asset: AssetFieldsFragment;
 let props: DepositFormProps;
 const MOCK_ETH_ADDRESS = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853';
+const MOCK_VEGA_KEY =
+  '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680';

 beforeEach(() => {
  asset = generateAsset();
@@ -89,14 +93,17 @@ describe('Deposit form', () => {
      });
    });

-    it('fails when submitted with invalid ethereum address', async () => {
-      (useWeb3React as jest.Mock).mockReturnValue({ account: '123' });
+    it('fails when Ethereum wallet not connected', async () => {
+      (useWeb3React as jest.Mock).mockReturnValue({
+        isActive: false,
+        account: '',
+      });
      render(<DepositForm {...props} />);

      fireEvent.submit(screen.getByTestId('deposit-form'));

      expect(
-        await screen.findByText('Invalid Ethereum address')
+        await screen.findByText('Connect Ethereum wallet')
      ).toBeInTheDocument();
    });

@@ -138,7 +145,7 @@ describe('Deposit form', () => {
      fireEvent.submit(screen.getByTestId('deposit-form'));

      expect(
-        await screen.findByText('Insufficient amount in Ethereum wallet')
+        await screen.findByText('Amount is above deposit limit')
      ).toBeInTheDocument();
    });

@@ -159,7 +166,7 @@ describe('Deposit form', () => {
      fireEvent.submit(screen.getByTestId('deposit-form'));

      expect(
-        await screen.findByText('Amount is above approved amount')
+        await screen.findByText('Amount is above approved amount.')
      ).toBeInTheDocument();
    });

@@ -193,9 +200,9 @@ describe('Deposit form', () => {
    });
  });

-  it('handles deposit approvals', () => {
+  it('handles deposit approvals', async () => {
    const mockUseVegaWallet = useVegaWallet as jest.Mock;
-    mockUseVegaWallet.mockReturnValue({ pubKey: null });
+    mockUseVegaWallet.mockReturnValue({ pubKey: MOCK_VEGA_KEY });

    const mockUseWeb3React = useWeb3React as jest.Mock;
    mockUseWeb3React.mockReturnValue({
@@ -212,13 +219,18 @@ describe('Deposit form', () => {
      />
    );

-    fireEvent.click(
-      screen.getByText(`Approve ${asset.symbol}`, {
-        selector: '[type="button"]',
-      })
+    expect(screen.queryByLabelText('Amount')).not.toBeInTheDocument();
+    expect(screen.getByTestId('approve-warning')).toHaveTextContent(
+      `Deposits of ${asset.symbol} not approved`
    );

-    expect(props.submitApprove).toHaveBeenCalled();
+    fireEvent.click(
+      screen.getByRole('button', { name: `Approve ${asset.symbol}` })
+    );
+
+    await waitFor(() => {
+      expect(props.submitApprove).toHaveBeenCalled();
+    });
  });

  it('handles submitting a deposit', async () => {
@@ -284,4 +296,55 @@ describe('Deposit form', () => {
    render(<DepositForm {...props} />);
    expect(await screen.queryAllByTestId('view-asset-details')).toHaveLength(0);
  });
+
+  it('renders a connect button if Ethereum wallet is not connected', () => {
+    (useWeb3React as jest.Mock).mockReturnValue({
+      isActive: false,
+      account: '',
+    });
+    render(<DepositForm {...props} />);
+
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('From (Ethereum address)')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders a disabled input if Ethereum wallet is connected', () => {
+    (useWeb3React as jest.Mock).mockReturnValue({
+      isActive: true,
+      account: MOCK_ETH_ADDRESS,
+    });
+    render(<DepositForm {...props} />);
+
+    expect(
+      screen.queryByRole('button', { name: 'Connect' })
+    ).not.toBeInTheDocument();
+    const fromInput = screen.getByLabelText('From (Ethereum address)');
+    expect(fromInput).toHaveValue(MOCK_ETH_ADDRESS);
+    expect(fromInput).toBeDisabled();
+    expect(fromInput).toHaveAttribute('readonly');
+  });
+
+  it('prevents submission if you are on the wrong chain', () => {
+    (useWeb3React as jest.Mock).mockReturnValue({
+      isActive: true,
+      account: MOCK_ETH_ADDRESS,
+      chainId: 1,
+    });
+    (useWeb3ConnectStore as unknown as jest.Mock).mockImplementation(
+      // eslint-disable-next-line
+      (selector: (result: ReturnType<typeof useWeb3ConnectStore>) => any) => {
+        return selector({
+          desiredChainId: 11155111,
+          open: jest.fn(),
+          foo: 'asdf',
+        });
+      }
+    );
+    render(<DepositForm {...props} />);
+    expect(screen.getByTestId('chain-error')).toHaveTextContent(
+      /this app only works on/i
+    );
+  });
 });
@@ -1,8 +1,8 @@
 import type { Asset } from '@vegaprotocol/assets';
 import { AssetOption } from '@vegaprotocol/assets';
 import {
-  ethereumAddress,
  t,
+  ethereumAddress,
  required,
  vegaPublicKey,
  minSafe,
@@ -14,17 +14,19 @@ import {
 import {
  Button,
  FormGroup,
-  Icon,
  Input,
  InputError,
  RichSelect,
+  Notification,
+  Intent,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useWeb3React } from '@web3-react/core';
 import BigNumber from 'bignumber.js';
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
 import { useMemo } from 'react';
-import { Controller, useForm, useWatch } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { DepositLimits } from './deposit-limits';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import {
@@ -72,7 +74,8 @@ export const DepositForm = ({
  isFaucetable,
 }: DepositFormProps) => {
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  const { account } = useWeb3React();
+  const openDialog = useWeb3ConnectStore((store) => store.open);
+  const { isActive, account } = useWeb3React();
  const { pubKey } = useVegaWallet();
  const {
    register,
@@ -83,26 +86,27 @@ export const DepositForm = ({
    formState: { errors },
  } = useForm<FormFields>({
    defaultValues: {
-      from: account,
      to: pubKey ? pubKey : undefined,
      asset: selectedAsset?.id || '',
    },
  });

-  const onDeposit = async (fields: FormFields) => {
+  const onSubmit = async (fields: FormFields) => {
    if (!selectedAsset || selectedAsset.source.__typename !== 'ERC20') {
      throw new Error('Invalid asset');
    }

-    submitDeposit({
-      assetSource: selectedAsset.source.contractAddress,
-      amount: fields.amount,
-      vegaPublicKey: fields.to,
-    });
+    if (approved) {
+      submitDeposit({
+        assetSource: selectedAsset.source.contractAddress,
+        amount: fields.amount,
+        vegaPublicKey: fields.to,
+      });
+    } else {
+      submitApprove();
+    }
  };

-  const amount = useWatch({ name: 'amount', control });
-
  const maxAmount = useMemo(() => {
    const maxApproved = allowance ? allowance : new BigNumber(0);
    const maxAvailable = balance ? balance : new BigNumber(0);
@@ -133,9 +137,12 @@ export const DepositForm = ({
    return minViableAmount;
  }, [selectedAsset]);

+  const approved = allowance && allowance.isGreaterThan(0) ? true : false;
+  const formState = getFormState(selectedAsset, isActive, approved);
+
  return (
    <form
-      onSubmit={handleSubmit(onDeposit)}
+      onSubmit={handleSubmit(onSubmit)}
      noValidate={true}
      data-testid="deposit-form"
    >
@@ -143,19 +150,54 @@ export const DepositForm = ({
        label={t('From (Ethereum address)')}
        labelFor="ethereum-address"
      >
-        <Input
-          id="ethereum-address"
-          {...register('from', {
+        <Controller
+          name="from"
+          control={control}
+          rules={{
            validate: {
-              required,
+              required: (value) => {
+                if (!value) return t('Connect Ethereum wallet');
+                return true;
+              },
              ethereumAddress,
            },
-          })}
-        />
-        <EthereumButton
-          clearAddress={() => {
-            setValue('from', '');
-            clearErrors('from');
+          }}
+          defaultValue={account}
+          render={() => {
+            if (isActive && account) {
+              return (
+                <>
+                  <Input
+                    id="ethereum-address"
+                    value={account}
+                    readOnly={true}
+                    disabled={true}
+                    {...register('from', {
+                      validate: {
+                        required,
+                        ethereumAddress,
+                      },
+                    })}
+                  />
+                  <DisconnectEthereumButton
+                    onDisconnect={() => {
+                      setValue('from', ''); // clear from value so required ethereum connection validation works
+                    }}
+                  />
+                </>
+              );
+            }
+            return (
+              <Button
+                onClick={openDialog}
+                variant="primary"
+                fill={true}
+                type="button"
+                data-testid="connect-eth-wallet-btn"
+              >
+                {t('Connect')}
+              </Button>
+            );
          }}
        />
        {errors.from?.message && (
@@ -241,148 +283,136 @@ export const DepositForm = ({
            deposited={deposited}
            balance={balance}
            asset={selectedAsset}
+            allowance={allowance}
          />
        </div>
      )}
-      <FormGroup label={t('Amount')} labelFor="amount">
-        <Input
-          type="number"
-          autoComplete="off"
-          id="amount"
-          {...register('amount', {
-            validate: {
-              required,
-              minSafe: (value) => minSafe(new BigNumber(min))(value),
-              maxSafe: (v) => {
-                const value = new BigNumber(v);
-                if (value.isGreaterThan(maxAmount.available)) {
-                  return t('Insufficient amount in Ethereum wallet');
-                } else if (value.isGreaterThan(maxAmount.limit)) {
-                  return t('Amount is above temporary deposit limit');
-                } else if (value.isGreaterThan(maxAmount.approved)) {
-                  return t('Amount is above approved amount');
-                }
-                return maxSafe(maxAmount.amount)(v);
+      {formState === 'deposit' && (
+        <FormGroup label={t('Amount')} labelFor="amount">
+          <Input
+            type="number"
+            autoComplete="off"
+            id="amount"
+            {...register('amount', {
+              validate: {
+                required,
+                minSafe: (value) => minSafe(new BigNumber(min))(value),
+                approved: (v) => {
+                  const value = new BigNumber(v);
+                  if (value.isGreaterThan(maxAmount.approved)) {
+                    return t('Amount is above approved amount');
+                  }
+                  return true;
+                },
+                limit: (v) => {
+                  const value = new BigNumber(v);
+                  if (value.isGreaterThan(maxAmount.limit)) {
+                    return t('Amount is above deposit limit');
+                  }
+                  return true;
+                },
+                balance: (v) => {
+                  const value = new BigNumber(v);
+                  if (value.isGreaterThan(maxAmount.available)) {
+                    return t('Insufficient amount in Ethereum wallet');
+                  }
+                  return true;
+                },
+                maxSafe: (v) => {
+                  return maxSafe(maxAmount.amount)(v);
+                },
              },
-            },
-          })}
-        />
-        {errors.amount?.message && (
-          <InputError intent="danger" forInput="amount">
-            {errors.amount.message}
-          </InputError>
-        )}
-        {selectedAsset && balance && (
-          <UseButton
-            onClick={() => {
-              setValue('amount', balance.toFixed(selectedAsset.decimals));
-              clearErrors('amount');
-            }}
-          >
-            {t('Use maximum')}
-          </UseButton>
-        )}
-      </FormGroup>
-      <FormButton
-        selectedAsset={selectedAsset}
-        amount={new BigNumber(amount || 0)}
-        allowance={allowance}
-        onApproveClick={submitApprove}
-      />
+            })}
+          />
+          {errors.amount?.message && (
+            <AmountError error={errors.amount} submitApprove={submitApprove} />
+          )}
+          {selectedAsset && balance && (
+            <UseButton
+              onClick={() => {
+                setValue('amount', balance.toFixed(selectedAsset.decimals));
+                clearErrors('amount');
+              }}
+            >
+              {t('Use maximum')}
+            </UseButton>
+          )}
+        </FormGroup>
+      )}
+      <FormButton selectedAsset={selectedAsset} formState={formState} />
    </form>
  );
 };

+const AmountError = ({
+  error,
+  submitApprove,
+}: {
+  error: FieldError;
+  submitApprove: () => void;
+}) => {
+  if (error.type === 'approved') {
+    return (
+      <InputError intent="danger" forInput="amount">
+        {error.message}.
+        <button onClick={submitApprove} className="underline ml-2">
+          {t('Update approve amount')}
+        </button>
+      </InputError>
+    );
+  }
+  return (
+    <InputError intent="danger" forInput="amount">
+      {error.message}
+    </InputError>
+  );
+};
+
 interface FormButtonProps {
  selectedAsset?: Asset;
-  amount: BigNumber;
-  allowance: BigNumber | undefined;
-  onApproveClick: () => void;
+  formState: ReturnType<typeof getFormState>;
 }

-const FormButton = ({
-  selectedAsset,
-  amount,
-  allowance,
-  onApproveClick,
-}: FormButtonProps) => {
-  const { open, desiredChainId } = useWeb3ConnectStore((store) => ({
-    open: store.open,
-    desiredChainId: store.desiredChainId,
-  }));
+const FormButton = ({ selectedAsset, formState }: FormButtonProps) => {
  const { isActive, chainId } = useWeb3React();
-  const approved =
-    allowance && allowance.isGreaterThan(0) && amount.isLessThan(allowance);
-  let button = null;
-  let message: ReactNode = '';
-
-  if (!isActive) {
-    button = (
-      <Button onClick={open} data-testid="connect-eth-wallet-btn">
-        {t('Connect Ethereum wallet')}
-      </Button>
-    );
-  } else if (chainId !== desiredChainId) {
-    const chainName = getChainName(desiredChainId);
-    message = t(`This app only works on ${chainName}.`);
-    button = (
-      <Button
-        type="submit"
-        data-testid="deposit-submit"
-        variant="primary"
-        fill={true}
-        disabled={true}
-      >
-        {t('Deposit')}
-      </Button>
-    );
-  } else if (!selectedAsset) {
-    button = (
-      <Button
-        type="submit"
-        data-testid="deposit-submit"
-        variant="primary"
-        fill={true}
-      >
-        {t('Deposit')}
-      </Button>
-    );
-  } else if (approved) {
-    message = (
-      <>
-        <Icon name="tick" className="mr-2" />
-        <span>{t('Approved')}</span>
-      </>
-    );
-    button = (
-      <Button
-        type="submit"
-        data-testid="deposit-submit"
-        variant="primary"
-        fill={true}
-      >
-        {t('Deposit')}
-      </Button>
-    );
-  } else {
-    message = t(`Deposits of ${selectedAsset.symbol} not approved`);
-    button = (
-      <Button
-        onClick={onApproveClick}
-        data-testid="deposit-approve-submit"
-        variant="primary"
-        fill={true}
-      >
-        {t(`Approve ${selectedAsset.symbol}`)}
-      </Button>
-    );
-  }
-
+  const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId);
+  const submitText =
+    formState === 'approve'
+      ? t(`Approve ${selectedAsset ? selectedAsset.symbol : ''}`)
+      : t('Deposit');
+  const invalidChain = isActive && chainId !== desiredChainId;
  return (
-    <div className="flex flex-col gap-4">
-      {message && <p className="text-center">{message}</p>}
-      {button}
-    </div>
+    <>
+      {formState === 'approve' && (
+        <div className="mb-2">
+          <Notification
+            intent={Intent.Warning}
+            testId="approve-warning"
+            message={t(`Deposits of ${selectedAsset?.symbol} not approved`)}
+          />
+        </div>
+      )}
+      {invalidChain && (
+        <div className="mb-2">
+          <Notification
+            intent={Intent.Danger}
+            testId="chain-error"
+            message={t(
+              `This app only works on ${getChainName(desiredChainId)}.`
+            )}
+          />
+        </div>
+      )}
+      <Button
+        type="submit"
+        data-testid="deposit-submit"
+        variant={isActive ? 'primary' : 'default'}
+        fill={true}
+        disabled={invalidChain}
+      >
+        {submitText}
+      </Button>
+    </>
  );
 };

@@ -398,21 +428,20 @@ const UseButton = (props: UseButtonProps) => {
  );
 };

-const EthereumButton = ({ clearAddress }: { clearAddress: () => void }) => {
-  const openDialog = useWeb3ConnectStore((state) => state.open);
-  const { isActive, connector } = useWeb3React();
+const DisconnectEthereumButton = ({
+  onDisconnect,
+}: {
+  onDisconnect: () => void;
+}) => {
+  const { connector } = useWeb3React();
  const [, , removeEagerConnector] = useLocalStorage(ETHEREUM_EAGER_CONNECT);

-  if (!isActive) {
-    return <UseButton onClick={openDialog}>{t('Connect')}</UseButton>;
-  }
-
  return (
    <UseButton
      onClick={() => {
        connector.deactivate();
-        clearAddress();
        removeEagerConnector();
+        onDisconnect();
      }}
      data-testid="disconnect-ethereum-wallet"
    >
@@ -420,3 +449,14 @@ const EthereumButton = ({ clearAddress }: { clearAddress: () => void }) => {
    </UseButton>
  );
 };
+
+const getFormState = (
+  selectedAsset: Asset | undefined,
+  isActive: boolean,
+  approved: boolean
+) => {
+  if (!selectedAsset) return 'deposit';
+  if (!isActive) return 'deposit';
+  if (approved) return 'deposit';
+  return 'approve';
+};
@@ -11,6 +11,7 @@ interface DepositLimitsProps {
  deposited: BigNumber;
  asset: Asset;
  balance?: BigNumber;
+  allowance?: BigNumber;
 }

 export const DepositLimits = ({
@@ -18,6 +19,7 @@ export const DepositLimits = ({
  deposited,
  asset,
  balance,
+  allowance,
 }: DepositLimitsProps) => {
  const limits = [
    {
@@ -44,6 +46,12 @@ export const DepositLimits = ({
      rawValue: max.minus(deposited),
      value: compactNumber(max.minus(deposited), asset.decimals),
    },
+    {
+      key: 'ALLOWANCE',
+      label: t('Approved'),
+      rawValue: allowance,
+      value: allowance ? compactNumber(allowance, asset.decimals) : '-',
+    },
  ];

  return (
@@ -27,12 +27,13 @@ export const AssetProposalNotification = ({
      </>
    );
    return (
-      <Notification
-        intent={Intent.Warning}
-        message={message}
-        testId="asset-proposal-notification"
-        className="mb-2"
-      />
+      <div className="mb-2">
+        <Notification
+          intent={Intent.Warning}
+          message={message}
+          testId="asset-proposal-notification"
+        />
+      </div>
    );
  }

@@ -34,7 +34,6 @@ export const MarketProposalNotification = ({
          intent={Intent.Warning}
          message={message}
          testId="market-proposal-notification"
-          className="px-2 py-1"
        />
      </div>
    );
@@ -93,7 +93,9 @@ export const Info = ({ market, onSelect }: InfoProps) => {
  const headerClassName = 'uppercase text-lg';
  const dayVolume = calcCandleVolume(market);
  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
+  const quoteUnit =
+    market?.tradableInstrument.instrument.product?.quoteName || '';
  const assetId = useMemo(
    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
    [market]
@@ -129,16 +131,27 @@ export const Info = ({ market, onSelect }: InfoProps) => {
    {
      title: t('Market price'),
      content: (
-        <MarketInfoTable
-          data={pick(
-            market.data,
-            'name',
-            'markPrice',
-            'bestBidPrice',
-            'bestOfferPrice'
-          )}
-          decimalPlaces={market.decimalPlaces}
-        />
+        <>
+          <MarketInfoTable
+            data={{
+              ...pick(
+                market.data,
+                'name',
+                'markPrice',
+                'bestBidPrice',
+                'bestOfferPrice'
+              ),
+              quoteUnit: market.tradableInstrument.instrument.product.quoteName,
+            }}
+            decimalPlaces={market.decimalPlaces}
+          />
+          <p className="text-xs">
+            {t(
+              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
+              [assetSymbol, quoteUnit]
+            )}
+          </p>
+        </>
      ),
    },
    {
@@ -189,6 +202,10 @@ export const Info = ({ market, onSelect }: InfoProps) => {
  const assetDecimals =
    market.tradableInstrument.instrument.product.settlementAsset.decimals;

+  const liquidityPriceRange = formatNumberPercentage(
+    new BigNumber(market.lpPriceRange).times(100)
+  );
+
  const marketSpecPanels = [
    {
      title: t('Key details'),
@@ -224,13 +241,21 @@ export const Info = ({ market, onSelect }: InfoProps) => {
    {
      title: t('Settlement asset'),
      content: asset ? (
-        <AssetDetailsTable
-          asset={asset}
-          inline={true}
-          noBorder={true}
-          dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
-          ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
-        />
+        <>
+          <AssetDetailsTable
+            asset={asset}
+            inline={true}
+            noBorder={true}
+            dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
+            ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
+          />
+          <p className="text-xs">
+            {t(
+              'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
+              [assetSymbol, quoteUnit]
+            )}
+          </p>
+        </>
      ) : (
        <Splash>{t('No data')}</Splash>
      ),
@@ -342,31 +367,40 @@ export const Info = ({ market, onSelect }: InfoProps) => {
    {
      title: t('Liquidity price range'),
      content: (
-        <MarketInfoTable
-          data={{
-            liquidityPriceRange: formatNumberPercentage(
-              new BigNumber(market.lpPriceRange).times(100)
-            ),
-            LPVolumeMin:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .minus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-            LPVolumeMax:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .plus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-          }}
-        ></MarketInfoTable>
+        <>
+          <p className="text-xs mb-4">
+            {`For liquidity orders count towards a commitment they have to be
+            within either the liquidity or price monitoring bounds (whichever is
+            tighter).`}
+          </p>
+          <p className="text-xs mb-4">
+            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
+            price.`}
+          </p>
+          <MarketInfoTable
+            data={{
+              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+              lowestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .minus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+              highestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .plus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+            }}
+          ></MarketInfoTable>
+        </>
      ),
    },
    {
@@ -16,6 +16,9 @@ export const tooltipMapping: Record<string, ReactNode> = {
  markPrice: t(
    'A concept derived from traditional markets. It is a calculated value for the ‘current market price’ on a market.'
  ),
+  quoteUnit: t(
+    `The underlying that is being priced by the market, described by the market's oracle.`
+  ),
  openInterest: t(
    'The volume of all open positions in a given market (the sum of the size of all positions greater than 0).'
  ),
@@ -98,7 +101,4 @@ export const tooltipMapping: Record<string, ReactNode> = {
    `The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.`
  ),
  suppliedStake: t('The current amount of liquidity supplied for this market.'),
-  liquidityPriceRange: t(
-    `Percentage move up and down from the mid price, which specifies the range of price levels over which automated liquidity provision orders will be deployed.`
-  ),
 };
@@ -10,7 +10,9 @@ const MIN_FRACTION_DIGITS = 2;
 const MAX_FRACTION_DIGITS = 20;

 export function toDecimal(numberOfDecimals: number) {
-  return 1 / Math.pow(10, numberOfDecimals);
+  return new BigNumber(1)
+    .dividedBy(Math.pow(10, numberOfDecimals))
+    .toString(10);
 }

 export function toBigNum(
@@ -1,6 +1,6 @@
 import { t } from '../i18n';

-export const validateAmount = (step: number, field: string) => {
+export const validateAmount = (step: number | string, field: string) => {
  const [, stepDecimals = ''] = String(step).split('.');

  return (value: string) => {
@@ -19,7 +19,6 @@ type NotificationProps = {
    size?: ButtonSize;
  };
  testId?: string;
-  className?: string;
 };

 const getIcon = (intent: Intent): IconName => {
@@ -39,7 +38,6 @@ export const Notification = ({
  title,
  testId,
  buttonProps,
-  className,
 }: NotificationProps) => {
  return (
    <div
@@ -61,8 +59,7 @@ export const Notification = ({
            intent === Intent.Warning,
          'bg-vega-pink-300 dark:bg-vega-pink-650': intent === Intent.Danger,
        },
-        'border rounded p-2 flex items-start gap-2.5 my-4',
-        className
+        'border rounded p-2 flex items-start gap-2.5'
      )}
    >
      <div
Author	SHA1	Message	Date
Madalina Raicu	2d880ea2a9	fix: validate size accepts string	2023-02-23 10:56:24 +00:00
Madalina Raicu	ce6c305a24	Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into fix/step-fix-8-market-dp	2023-02-23 10:48:43 +00:00
Edd	0ba54cd8a4	fix(explorer): incorrect destination in market link components (#2968 )	2023-02-23 10:46:55 +00:00
Madalina Raicu	834823258b	fix(trading): update toDecimal to use big number	2023-02-23 10:35:52 +00:00
daro-maj	eee85c231b	test(trading): improved a dropdown verification test (#2969 )	2023-02-23 10:16:22 +00:00
Madalina Raicu	402be82802	fix: step fix on 8 market dp	2023-02-23 09:57:54 +00:00
mattrussell36	afdb387742	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-23 06:08:36 +00:00
Matthew Russell	63698fbb80	feat(trading,deposits): improve ethereum connection and approve step (#2926 )	2023-02-22 16:27:17 -08:00
mattrussell36	58d8f7857e	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-23 00:13:13 +00:00
mattrussell36	0931730582	chore: update tranches Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>	2023-02-22 18:06:22 +00:00
m.ray	3aefa10a4f	feat(trading): quote unit and settlement asset relation (#2953 )	2023-02-22 17:05:31 +00:00