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

reorder header, center align header, update collapse caret icons (#110 )
show loading state instead of "Unavailable" for place order button (#104 )
2023-10-30 17:57:34 +01:00 · 2023-10-27 23:32:51 -04:00 · 2023-10-27 17:39:12 -04:00 · 2023-10-27 16:47:34 -04:00 · 2023-10-27 19:34:18 +02:00 · 2023-10-27 19:19:00 +02:00
17 changed files with 154 additions and 172 deletions
@@ -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-localization": "^0.1.32",
+    "@dydxprotocol/v4-client-js": "^1.0.0",
+    "@dydxprotocol/v4-localization": "^1.0.0",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-collapsible": "^1.0.3",
@@ -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
-    version: 0.40.3
+    specifier: ^1.0.0
+    version: 1.0.0
  '@dydxprotocol/v4-localization':
-    specifier: ^0.1.32
-    version: 0.1.32
+    specifier: ^1.0.0
+    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:
-    resolution: {integrity: sha512-nMQd6tYisKDKIbfx0BGJSYEOSt+I+t5SsaBSmlgTdso+w2rCRO9vyxS+u6MF9h4w5FsVRfhHo3e6uTWX48WpGQ==}
+  /@dydxprotocol/v4-client-js@1.0.0:
+    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:
-    resolution: {integrity: sha512-ZtXScxgFLjUt0Ag52RyFnQe9aEl1Aky5fp+vMGOBduVkFiCEMRMkSsSgg6grMdyw/x0AbnxOTRkhYoX2MsK9Ow==}
+  /@dydxprotocol/v4-localization@1.0.0:
+    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
@@ -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",
@@ -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'] & {
@@ -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 = {
@@ -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;
  }
@@ -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>
@@ -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';
@@ -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>
@@ -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}
@@ -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>
@@ -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;
@@ -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,
@@ -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>
@@ -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}>
@@ -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(
-  ({
-    asset,
-    dispatch,
-    withOnboarding,
-  }: {
-    asset: DydxChainAsset;
-    dispatch: Dispatch;
-    withOnboarding?: boolean;
-  }) => (
-    <Styled.InlineRow>
-      {[
-        withOnboarding && {
-          dialogType: DialogTypes.Withdraw,
-          iconName: IconName.Withdraw,
-        },
-        withOnboarding && {
-          dialogType: DialogTypes.Deposit,
-          iconName: IconName.Deposit,
-        },
-        {
-          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 AssetActions = memo(({ asset, dispatch }: { asset: DydxChainAsset; dispatch: Dispatch }) => (
+  <Styled.InlineRow>
+    {[
+      // TODO(@rosepuppy): Add withdraw action for USDC
+      {
+        dialogType: DialogTypes.Receive,
+        iconName: IconName.Qr,
+      },
+      { dialogType: DialogTypes.Transfer, iconName: IconName.Send },
+    ].map(({ iconName, dialogType }) => (
+      <IconButton
+        key={dialogType}
+        action={ButtonAction.Base}
+        shape={ButtonShape.Square}
+        iconName={iconName}
+        onClick={() =>
+          dispatch(openDialog({ type: dialogType, dialogProps: { selectedAsset: asset } }))
+        }
+      />
+    ))}
+  </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;
-`;
@@ -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>
Author	SHA1	Message	Date
Adam Fraser	d524bbebfe	Merge branch 'main' into adamfraser-testnet-node-updates	2023-10-30 17:57:34 +01:00
aleka	2fe6c2bb3b	reorder header, center align header, update collapse caret icons (#110 )	2023-10-27 23:32:51 -04:00
aleka	e6858ca917	show loading state instead of "Unavailable" for place order button (#104 ) * show loading instead of unavailable for place order button	2023-10-27 17:39:12 -04:00
aleka	d92b49f4fa	bump packages, fix missing asset symbol (#106 )	2023-10-27 16:47:34 -04:00
Adam Fraser	7ab892e56c	Add Bware to testnet node config	2023-10-27 19:34:18 +02:00
Adam Fraser	296cec98f4	Remove DSRV from Testnet node config options	2023-10-27 19:19:00 +02:00