Merge branch 'main' into adamfraser-testnet-node-updates

* show loading instead of unavailable for place order button

package.json

@@ -40,8 +40,8 @@
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-abacus": "^1.0.3",
-    "@dydxprotocol/v4-client-js": "^0.40.3",
+    "@dydxprotocol/v4-client-js": "^1.0.0",
-    "@dydxprotocol/v4-localization": "^0.1.32",
+    "@dydxprotocol/v4-localization": "^1.0.0",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -30,11 +26,11 @@ dependencies:
     specifier: ^1.0.3
     version: 1.0.3
   '@dydxprotocol/v4-client-js':
-    specifier: ^0.40.3
+    specifier: ^1.0.0
-    version: 0.40.3
+    version: 1.0.0
   '@dydxprotocol/v4-localization':
-    specifier: ^0.1.32
+    specifier: ^1.0.0
-    version: 0.1.32
+    version: 1.0.0
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -983,8 +979,8 @@ packages:
     resolution: {integrity: sha512-GuX37/DMMNSke8ZFcw52II7IVJfUgVGHqoi1Uw2cUb+hgIjjSG3OtbyRWedm5r6nqWq8BNLOexI0VVFB6OMVYg==}
     dev: false
 
-  /@dydxprotocol/v4-client-js@0.40.3:
+  /@dydxprotocol/v4-client-js@1.0.0:
-    resolution: {integrity: sha512-nMQd6tYisKDKIbfx0BGJSYEOSt+I+t5SsaBSmlgTdso+w2rCRO9vyxS+u6MF9h4w5FsVRfhHo3e6uTWX48WpGQ==}
+    resolution: {integrity: sha512-ehfHO+zQy795TcJRwtiawadFHZyh4HnpJNP26hCGsIjLE5q6LLHweQHpK/1N/sXU1PBOuQwc7iaJnFop6gYauQ==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/encoding': 0.31.1
@@ -1011,8 +1007,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.1.32:
+  /@dydxprotocol/v4-localization@1.0.0:
-    resolution: {integrity: sha512-ZtXScxgFLjUt0Ag52RyFnQe9aEl1Aky5fp+vMGOBduVkFiCEMRMkSsSgg6grMdyw/x0AbnxOTRkhYoX2MsK9Ow==}
+    resolution: {integrity: sha512-U7QjOlzpfSAVEchkNDB3xYRx7okzdeYi83XsnHwI+EHa2quFm/2Y2dhrBkT5fqpZmhcwxb/vG8AZmFSToOf9hA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:
@@ -14100,3 +14096,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

public/configs/env.json

@@ -22,11 +22,11 @@
             "dydxprotocol-staging-west",
             "dydxprotocol-testnet",
             "dydxprotocol-testnet-dydx",
-            "dydxprotocol-testnet-dsrv",
             "dydxprotocol-testnet-nodefleet",
             "dydxprotocol-testnet-kingnodes",
             "dydxprotocol-testnet-liquify",
-            "dydxprotocol-testnet-polkachu"
+            "dydxprotocol-testnet-polkachu",
+            "dydxprotocol-testnet-bware"
          ],
          "default": "dydxprotocol-testnet"
       }
@@ -427,6 +427,7 @@
                }
             ],
             "validators": [
+               "https://dydx-testnet-full-rpc.public.blastapi.io/",
                "https://dydx-testnet-rpc.polkachu.com/",
                "https://dydx-testnet.nodefleet.org",
                "https://test-dydx.kingnodes.com",
@@ -527,70 +528,6 @@
             "signTypedDataDomainName": "dYdX V4"
          }
       },
-      "dydxprotocol-testnet-dsrv": {
-         "name": "v4 Public Testnet/DSRV",
-         "ethereumChainId": "5",
-         "dydxChainId": "dydx-testnet-4",
-         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
-         "isMainNet": false,
-         "tokens": {
-            "chain": {
-               "name": "Dv4TNT",
-               "denom": "adv4tnt",
-               "decimals": 18,
-               "image": "/currencies/dydx.png"
-            },
-            "usdc": {
-               "name": "USDC",
-               "denom": "ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5",
-               "gasDenom": "uusdc",
-               "decimals": 6,
-               "image": "/currencies/usdc.png"
-            }
-         },
-         "endpoints": {
-            "indexers": [
-               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
-               }
-            ],
-            "validators": [
-               "https://dydx-testnet-archive.allthatnode.com:26657/XZvMM41hESf8PJrEQiTzbCOMVyFca79R"
-            ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
-            "faucet": "https://faucet.v4testnet.dydx.exchange"
-         },
-         "links": {
-            "tos": "https://dydx.exchange/v4-terms",
-            "privacy": "https://dydx.exchange/privacy",
-            "statusPage": "https://status.v4testnet.dydx.exchange/",
-            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "documentation": "https://docs.dydx.exchange/",
-            "community": "https://discord.com/invite/dydx",
-            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
-         },
-         "wallets": {
-            "walletconnect": {
-               "client": {
-                  "name": "dYdX v4",
-                  "description": "dYdX v4 App",
-                  "iconUrl": "/logos/dydx-x.png"
-               },
-               "v2": {
-                  "projectId": "47559b2ec96c09aed9ff2cb54a31ab0e"
-               }
-            },
-            "walletSegue": {
-               "callbackUrl": "/walletsegue"
-            },
-            "images": "/wallets/",
-            "signTypedDataAction": "dYdX Chain Onboarding",
-            "signTypedDataDomainName": "dYdX V4"
-         }
-      },
       "dydxprotocol-testnet-nodefleet": {
          "name": "v4 Public Testnet/nodefleet",
          "ethereumChainId": "5",
@@ -818,6 +755,70 @@
             "0xsquid": "https://testnet.api.squidrouter.com",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
+         "links": {
+            "tos": "https://dydx.exchange/v4-terms",
+            "privacy": "https://dydx.exchange/privacy",
+            "statusPage": "https://status.v4testnet.dydx.exchange/",
+            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
+            "documentation": "https://docs.dydx.exchange/",
+            "community": "https://discord.com/invite/dydx",
+            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
+            "blogs": "https://www.dydx.foundation/blog"
+         },
+         "wallets": {
+            "walletconnect": {
+               "client": {
+                  "name": "dYdX v4",
+                  "description": "dYdX v4 App",
+                  "iconUrl": "/logos/dydx-x.png"
+               },
+               "v2": {
+                  "projectId": "47559b2ec96c09aed9ff2cb54a31ab0e"
+               }
+            },
+            "walletSegue": {
+               "callbackUrl": "/walletsegue"
+            },
+            "images": "/wallets/",
+            "signTypedDataAction": "dYdX Chain Onboarding",
+            "signTypedDataDomainName": "dYdX V4"
+         }
+      },
+      "dydxprotocol-testnet-bware": {
+         "name": "v4 Public Testnet/BWare",
+         "ethereumChainId": "5",
+         "dydxChainId": "dydx-testnet-4",
+         "chainName": "dYdX Chain",
+         "chainLogo": "dydx-chain.png",
+         "isMainNet": false,
+         "tokens": {
+            "chain": {
+               "name": "Dv4TNT",
+               "denom": "adv4tnt",
+               "decimals": 18,
+               "image": "/currencies/dydx.png"
+            },
+            "usdc": {
+               "name": "USDC",
+               "denom": "ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5",
+               "gasDenom": "uusdc",
+               "decimals": 6,
+               "image": "/currencies/usdc.png"
+            }
+         },
+         "endpoints": {
+            "indexers": [
+               {
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
+               }
+            ],
+            "validators": [
+               "https://dydx-testnet-full-rpc.public.blastapi.io/"
+            ],
+            "0xsquid": "https://testnet.api.squidrouter.com",
+            "faucet": "https://faucet.v4testnet.dydx.exchange"
+         },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
             "privacy": "https://dydx.exchange/privacy",

src/components/Collapsible.tsx

@@ -80,7 +80,7 @@ Styled.TriggerIcon = styled.span`
   width: var(--trigger-icon-width);
 
   display: inline-flex;
-  transition: transform 0.3s var(--ease-out-expo);
+  transition: rotate 0.3s var(--ease-out-expo);
   color: var(--trigger-icon-color);
 
   ${Styled.Trigger}[data-state='open'] & {

src/components/Icon.tsx

@@ -24,10 +24,9 @@ import {
   CommentIcon,
   CopyIcon,
   CubeIcon,
-  DepositIcon,
-  DepthChartIcon,
   DiscordIcon,
   EtherscanIcon,
+  DepthChartIcon,
   ExportKeysIcon,
   FeedbackIcon,
   FileIcon,
@@ -70,7 +69,6 @@ import {
   WarningIcon,
   WebsiteIcon,
   WhitepaperIcon,
-  WithdrawIcon,
 } from '@/icons';
 
 export enum IconName {
@@ -95,7 +93,6 @@ export enum IconName {
   Comment = 'Comment',
   Copy = 'Copy',
   Cube = 'Cube',
-  Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
   Etherscan = 'Etherscan',
@@ -142,7 +139,6 @@ export enum IconName {
   Warning = 'Warning',
   Website = 'Website',
   Whitepaper = 'Whitepaper',
-  Withdraw = 'Withdraw',
 }
 
 const icons = {
@@ -167,7 +163,6 @@ const icons = {
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
   [IconName.Cube]: CubeIcon,
-  [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
   [IconName.Etherscan]: EtherscanIcon,
@@ -213,7 +208,6 @@ const icons = {
   [IconName.Warning]: WarningIcon,
   [IconName.Website]: WebsiteIcon,
   [IconName.Whitepaper]: WhitepaperIcon,
-  [IconName.Withdraw]: WithdrawIcon,
 } as Record<IconName, ElementType>;
 
 type ElementProps = {

src/components/NavigationMenu.tsx

@@ -525,6 +525,9 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
 `;
 
 Styled.Icon = styled(Icon)`
+  height: 0.75em;
+  transition: rotate 0.3s var(--ease-out-expo);
+
   ${Styled.List}[data-orientation="menu"] & {
     rotate: -0.25turn;
   }

src/icons/deposit.svg

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-  <g clip-path="url(#clip0_18204_36775)">
-    <path d="M13.2426 6.25736C14.0817 7.09647 14.6531 8.16557 14.8846 9.32946C15.1162 10.4933 14.9973 11.6997 14.5432 12.7961C14.0891 13.8925 13.32 14.8295 12.3334 15.4888C11.3467 16.1481 10.1866 16.5 8.99993 16.5C7.81324 16.5 6.6532 16.1481 5.66651 15.4888C4.67981 14.8295 3.91078 13.8925 3.45665 12.7961C3.00253 11.6997 2.88371 10.4933 3.11522 9.32946C3.34673 8.16557 3.91817 7.09647 4.75729 6.25736" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
-    <path d="M11.25 9L9 11.25M9 11.25L6.75 9M9 11.25V1.6875" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_18204_36775">
-      <rect width="18" height="18" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>

src/icons/index.ts

@@ -19,7 +19,6 @@ export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
 export { default as CubeIcon } from './cube.svg';
-export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
 export { default as ExportKeysIcon } from './export-keys.svg';
@@ -60,7 +59,6 @@ export { default as TransferIcon } from './transfer.svg';
 export { default as TriangleIcon } from './triangle.svg';
 export { default as TryAgainIcon } from './try-again.svg';
 export { default as WarningIcon } from './warning.svg';
-export { default as WithdrawIcon } from './withdraw.svg';
 
 // Wallets
 export { default as BitkeepIcon } from './wallets/bitkeep.svg';

src/icons/withdraw.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-  <path d="M13.2426 6.2573C14.0817 7.09641 14.6531 8.16551 14.8846 9.3294C15.1162 10.4933 14.9973 11.6997 14.5432 12.796C14.0891 13.8924 13.32 14.8295 12.3334 15.4888C11.3467 16.148 10.1866 16.4999 8.99993 16.4999C7.81324 16.4999 6.6532 16.148 5.66651 15.4888C4.67981 14.8295 3.91078 13.8924 3.45665 12.796C3.00253 11.6997 2.88371 10.4933 3.11522 9.3294C3.34673 8.16551 3.91817 7.09641 4.75729 6.2573" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round"/>
-  <path d="M11.25 2.9375L9 0.6875M9 0.6875L6.75 2.9375M9 0.6875V10.25" stroke="#C8C7D8" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/layout/Header/HeaderDesktop.tsx

@@ -24,6 +24,7 @@ import { openDialog } from '@/state/dialogs';
 
 import { headerMixins } from '@/styles/headerMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
+import breakpoints from '@/styles/breakpoints';
 
 export const HeaderDesktop = () => {
   const stringGetter = useStringGetter();
@@ -34,26 +35,26 @@ export const HeaderDesktop = () => {
     {
       group: 'navigation',
       items: [
-        {
-          value: 'MARKET',
-          label: stringGetter({ key: STRING_KEYS.MARKET }),
-          href: AppRoute.Markets,
-        },
         {
           value: 'TRADE',
           label: stringGetter({ key: STRING_KEYS.TRADE }),
           href: AppRoute.Trade,
         },
-        {
-          value: chainTokenLabel,
-          label: chainTokenLabel,
-          href: `/${chainTokenLabel}`,
-        },
         {
           value: 'PORTFOLIO',
           label: stringGetter({ key: STRING_KEYS.PORTFOLIO }),
           href: AppRoute.Portfolio,
         },
+        {
+          value: 'MARKETS',
+          label: stringGetter({ key: STRING_KEYS.MARKETS }),
+          href: AppRoute.Markets,
+        },
+        {
+          value: chainTokenLabel,
+          label: chainTokenLabel,
+          href: `/${chainTokenLabel}`,
+        },
         {
           value: 'MORE',
           label: stringGetter({ key: STRING_KEYS.MORE }),
@@ -150,6 +151,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Header = styled.header`
   --header-horizontal-padding-mobile: 0.5rem;
+  --trigger-height: 2.25rem;
   --logo-width: 3.5rem;
 
   ${layoutMixins.container}
@@ -157,6 +159,8 @@ Styled.Header = styled.header`
   ${layoutMixins.scrollSnapItem}
   backdrop-filter: none;
 
+  height: var(--page-currentHeaderHeight);
+
   grid-area: Header;
 
   display: grid;
@@ -169,6 +173,14 @@ Styled.Header = styled.header`
     )
     var(--border-width) 1fr var(--border-width) auto;
 
+  @media ${breakpoints.tablet} {
+    --trigger-height: 3rem;
+  }
+
+  @media ${breakpoints.mobile} {
+    --navBefore-width: 7rem;
+  }
+
   font-size: 0.9375rem;
 
   :before {
@@ -179,6 +191,7 @@ Styled.Header = styled.header`
 Styled.NavigationMenu = styled(NavigationMenu)`
   & {
     --navigationMenu-height: var(--stickyArea-topHeight);
+    --navigationMenu-item-height: var(--trigger-height);
   }
 
   ${layoutMixins.scrollArea}

src/pages/trade/TradeHeaderMobile.tsx

@@ -17,7 +17,7 @@ import { MustBigNumber } from '@/lib/numbers';
 import { MidMarketPrice } from '@/views/MidMarketPrice';
 
 export const TradeHeaderMobile = () => {
-  const { name, symbol } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+  const { name, id } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
   const navigate = useNavigate();
 
   const { market, priceChange24H, priceChange24HPercent } =
@@ -27,7 +27,7 @@ export const TradeHeaderMobile = () => {
     <Styled.Header>
       <BackButton onClick={() => navigate(AppRoute.Markets)} />
       <Styled.MarketName>
-        <Styled.AssetIcon symbol={symbol} />
+        <Styled.AssetIcon symbol={id} />
         <Styled.Name>
           <h3>{name}</h3>
           <span>{market}</span>

src/views/TransferStatus.tsx

@@ -168,7 +168,7 @@ Styled.TriggerIcon = styled.span`
   width: 0.75em;
 
   display: inline-flex;
-  transition: transform 0.3s var(--ease-out-expo);
+  transition: rotate 0.3s var(--ease-out-expo);
 
   ${Styled.Trigger}[data-state='open'] & {
     rotate: -0.5turn;

src/views/dialogs/TradeDialog.tsx

@@ -37,7 +37,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
   const selectedTradeType = getSelectedTradeType(type);
   const { typeOptions } = useSelector(getInputTradeOptions, shallowEqual) ?? {};
 
-  const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
+  const allTradeTypeItems = (typeOptions?.toArray() ?? []).map(({ type, stringKey }) => ({
     value: type,
     label: stringGetter({
       key: stringKey as StringKey,

src/views/forms/TradeForm.tsx

@@ -322,7 +322,6 @@ export const TradeForm = ({
           summary={summary ?? undefined}
           currentStep={currentStep}
           showDeposit={inputAlert?.errorAction === TradeInputErrorAction.DEPOSIT}
-          showConnectWallet={inputAlert?.errorAction === TradeInputErrorAction.CONNECT_WALLET}
         />
       </Styled.Footer>
     </Styled.TradeForm>

src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx

@@ -7,9 +7,8 @@ import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
 
-import { useStringGetter } from '@/hooks';
+import { useStringGetter, useTokenConfigs } from '@/hooks';
 
-import { AssetIcon } from '@/components/AssetIcon';
 import { Button } from '@/components/Button';
 import { Output, OutputType, ShowSign } from '@/components/Output';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
@@ -47,6 +46,7 @@ export const PlaceOrderButtonAndReceipt = ({
 }: ElementProps) => {
   const stringGetter = useStringGetter();
   const dispatch = useDispatch();
+  const { chainTokenLabel } = useTokenConfigs();
 
   const canAccountTrade = useSelector(calculateCanAccountTrade);
   const subaccountNumber = useSelector(getSubaccountId);
@@ -88,7 +88,14 @@ export const PlaceOrderButtonAndReceipt = ({
           {/* <AssetIcon symbol="DYDX" /> */}
         </>
       ),
-      value: <Output type={OutputType.Asset} value={reward} useGrouping tag={reward ? "Dv4TNT" : ''} />,
+      value: (
+        <Output
+          type={OutputType.Asset}
+          value={reward}
+          useGrouping
+          tag={reward ? chainTokenLabel : ''}
+        />
+      ),
       tooltip: 'max-reward',
     },
     {
@@ -111,7 +118,7 @@ export const PlaceOrderButtonAndReceipt = ({
         ? actionStringKey
         : STRING_KEYS.UNAVAILABLE,
       buttonAction: ButtonAction.Primary,
-      buttonState: { isDisabled: !shouldEnableTrade },
+      buttonState: { isDisabled: !shouldEnableTrade, isLoading: hasMissingData },
     },
 
     [MobilePlaceOrderSteps.PreviewOrder]: {
@@ -148,7 +155,10 @@ export const PlaceOrderButtonAndReceipt = ({
 
   const buttonState = currentStep
     ? buttonStatesPerStep[currentStep].buttonState
-    : { isDisabled: !shouldEnableTrade || isLoading, isLoading };
+    : {
+        isDisabled: !shouldEnableTrade || isLoading,
+        isLoading: isLoading || hasMissingData,
+      };
 
   return (
     <WithDetailsReceipt detailItems={items}>

src/views/menus/AccountMenu.tsx

@@ -139,7 +139,7 @@ export const AccountMenu = () => {
                     fractionDigits={2}
                   />
                 </div>
-                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} withOnboarding />
+                <AssetActions asset={DydxChainAsset.USDC} dispatch={dispatch} />
               </div>
             </Styled.Balances>
           </Styled.AccountInfo>
@@ -212,45 +212,28 @@ export const AccountMenu = () => {
   );
 };
 
-const AssetActions = memo(
+const AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
-  ({
+  <Styled.InlineRow>
-    asset,
+    {[
-    dispatch,
+      // TODO(@rosepuppy): Add withdraw action for USDC
-    withOnboarding,
+      {
-  }: {
+        dialogType: DialogTypes.Receive,
-    asset: DydxChainAsset;
+        iconName: IconName.Qr,
-    dispatch: Dispatch;
+      },
-    withOnboarding?: boolean;
+      { dialogType: DialogTypes.Transfer, iconName: IconName.Send },
-  }) => (
+    ].map(({ iconName, dialogType }) => (
-    <Styled.InlineRow>
+      <IconButton
-      {[
+        key={dialogType}
-        withOnboarding && {
+        action={ButtonAction.Base}
-          dialogType: DialogTypes.Withdraw,
+        shape={ButtonShape.Square}
-          iconName: IconName.Withdraw,
+        iconName={iconName}
-        },
+        onClick={() =>
-        withOnboarding && {
+          dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
-          dialogType: DialogTypes.Deposit,
+        }
-          iconName: IconName.Deposit,
+      />
-        },
+    ))}
-        {
+  </Styled.InlineRow>
-          dialogType: DialogTypes.Transfer,
+));
-          dialogProps: { selectedAsset: asset },
-          iconName: IconName.Send,
-        },
-      ]
-        .filter(isTruthy)
-        .map(({ iconName, dialogType, dialogProps }) => (
-          <Styled.IconButton
-            key={dialogType}
-            action={ButtonAction.Base}
-            shape={ButtonShape.Square}
-            iconName={iconName}
-            onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
-          />
-        ))}
-    </Styled.InlineRow>
-  )
-);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
@@ -368,7 +351,3 @@ Styled.ConnectToChain = styled(Styled.Column)`
     font: var(--font-small-book);
   }
 `;
-
-Styled.IconButton = styled(IconButton)`
-  --button-padding: 0 0.25rem;
-`;

src/views/tables/OrdersTable.tsx

@@ -231,7 +231,7 @@ const getOrdersTableColumnDef = ({
           key: STRING_KEYS.FILL,
         })}`,
         renderCell: ({
-          asset: { symbol: assetSymbol },
+          asset,
           createdAtMilliseconds,
           size,
           status,
@@ -254,7 +254,7 @@ const getOrdersTableColumnDef = ({
                     value={createdAtMilliseconds}
                   />
                   <Styled.AssetIconWithStatus>
-                    <Styled.AssetIcon symbol={assetSymbol} />
+                    <Styled.AssetIcon symbol={asset?.id} />
                     <Styled.StatusDot color={statusIconColor} />
                   </Styled.AssetIconWithStatus>
                 </>
@@ -276,7 +276,7 @@ const getOrdersTableColumnDef = ({
                   type={OutputType.Asset}
                   value={size}
                   fractionDigits={TOKEN_DECIMALS}
-                  tag={assetSymbol}
+                  tag={asset?.id}
                 />
               </Styled.InlineRow>
             </TableCell>