flex-wrap

src/pages/portfolio/Portfolio.tsx

@@ -1,11 +1,13 @@
-import { useEffect } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
+import { OnboardingState } from '@/constants/account';
+import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
 
-import { useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
+import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
 
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
@@ -14,6 +16,9 @@ import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { WithSidebar } from '@/components/WithSidebar';
 
+import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
+import { openDialog } from '@/state/dialogs';
+
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { Overview } from './Overview';
 import { Positions } from './Positions';
@@ -22,11 +27,20 @@ import { Fees } from './Fees';
 import { History } from './History';
 
 import { layoutMixins } from '@/styles/layoutMixins';
+import { Button } from '@/components/Button';
+import { ButtonAction } from '@/constants/buttons';
 
 export default () => {
+  const dispatch = useDispatch();
   const stringGetter = useStringGetter();
   const { isTablet, isNotTablet } = useBreakpoints();
 
+  const onboardingState = useSelector(getOnboardingState);
+  const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
+  const { nativeTokenBalance } = useAccountBalance();
+
+  const usdcBalance = freeCollateral?.current || 0;
+
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
 
   const routesComponent = (
@@ -84,46 +98,74 @@ export default () => {
     <WithSidebar
       sidebar={
         isTablet ? null : (
-          <Styled.NavigationMenu
+          <Styled.SideBar>
-            items={[
+            <Styled.NavigationMenu
-              {
+              items={[
-                group: 'views',
+                {
-                groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
+                  group: 'views',
-                items: [
+                  groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
-                  {
+                  items: [
-                    value: PortfolioRoute.Overview,
+                    {
-                    slotBefore: <Styled.Icon iconName={IconName.Overview} />,
+                      value: PortfolioRoute.Overview,
-                    label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
+                      slotBefore: <Styled.Icon iconName={IconName.Overview} />,
-                    href: PortfolioRoute.Overview,
+                      label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
-                  },
+                      href: PortfolioRoute.Overview,
-                  {
+                    },
-                    value: PortfolioRoute.Positions,
+                    {
-                    slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      value: PortfolioRoute.Positions,
-                    label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
-                    href: PortfolioRoute.Positions,
+                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
-                  },
+                      href: PortfolioRoute.Positions,
-                  {
+                    },
-                    value: PortfolioRoute.Orders,
+                    {
-                    slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
+                      value: PortfolioRoute.Orders,
-                    label: stringGetter({ key: STRING_KEYS.ORDERS }),
+                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                    href: PortfolioRoute.Orders,
+                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
-                  },
+                      href: PortfolioRoute.Orders,
-                  {
+                    },
-                    value: PortfolioRoute.Fees,
+                    {
-                    slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
+                      value: PortfolioRoute.Fees,
-                    label: stringGetter({ key: STRING_KEYS.FEES }),
+                      slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
-                    href: PortfolioRoute.Fees,
+                      label: stringGetter({ key: STRING_KEYS.FEES }),
-                  },
+                      href: PortfolioRoute.Fees,
-                  {
+                    },
-                    value: PortfolioRoute.History,
+                    {
-                    slotBefore: <Styled.Icon iconName={IconName.History} />,
+                      value: PortfolioRoute.History,
-                    label: stringGetter({ key: STRING_KEYS.HISTORY }),
+                      slotBefore: <Styled.Icon iconName={IconName.History} />,
-                    href: PortfolioRoute.History,
+                      label: stringGetter({ key: STRING_KEYS.HISTORY }),
-                  },
+                      href: PortfolioRoute.History,
-                ],
+                    },
-              },
+                  ],
-            ]}
+                },
-          />
+              ]}
+            />
+            {onboardingState === OnboardingState.AccountConnected && (
+              <Styled.Footer>
+                <Button
+                  action={ButtonAction.Primary}
+                  onClick={() => dispatch(openDialog({ type: DialogTypes.Deposit }))}
+                >
+                  {stringGetter({ key: STRING_KEYS.DEPOSIT })}
+                </Button>
+                {usdcBalance > 0 && (
+                  <Button
+                    action={ButtonAction.Base}
+                    onClick={() => dispatch(openDialog({ type: DialogTypes.Withdraw }))}
+                  >
+                    {stringGetter({ key: STRING_KEYS.WITHDRAW })}
+                  </Button>
+                )}
+                {(usdcBalance > 0 || nativeTokenBalance.gt(0)) && (
+                  <Button
+                    action={ButtonAction.Base}
+                    onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+                  >
+                    {stringGetter({ key: STRING_KEYS.TRANSFER })}
+                  </Button>
+                )}
+              </Styled.Footer>
+            )}
+          </Styled.SideBar>
         )
       }
     >
@@ -139,6 +181,26 @@ Styled.PortfolioMobile = styled.div`
   ${layoutMixins.expandingColumnWithHeader}
 `;
 
+Styled.SideBar = styled.div`
+  ${layoutMixins.flexColumn}
+  justify-content: space-between;
+
+  height: 100%;
+`;
+
+Styled.Footer = styled.div`
+  ${layoutMixins.row}
+  flex-wrap: wrap;
+  
+  padding: 1rem;
+
+  gap: 0.5rem;
+
+  > button {
+    flex-grow: 1;
+  }
+`;
+
 Styled.NavigationMenu = styled(NavigationMenu)`
   padding: 0.5rem;
   padding-top: 0;

src/pages/rewards/DYDXBalancePanel.tsx

@@ -43,23 +43,14 @@ export const DYDXBalancePanel = () => {
             {!canAccountTrade ? (
               <OnboardingTriggerButton size={ButtonSize.Small} />
             ) : (
-              <>
+              <Button
-                <Styled.ReceiveButton
+                slotLeft={<Icon iconName={IconName.Send} />}
-                  slotLeft={<Icon iconName={IconName.Qr} />}
+                size={ButtonSize.Small}
-                  size={ButtonSize.Small}
+                action={ButtonAction.Primary}
-                  onClick={() => dispatch(openDialog({ type: DialogTypes.Receive }))}
+                onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
-                >
+              >
-                  {stringGetter({ key: STRING_KEYS.RECEIVE })}
+                {stringGetter({ key: STRING_KEYS.TRANSFER })}
-                </Styled.ReceiveButton>
+              </Button>
-                <Button
-                  slotLeft={<Icon iconName={IconName.Send} />}
-                  size={ButtonSize.Small}
-                  action={ButtonAction.Primary}
-                  onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
-                >
-                  {stringGetter({ key: STRING_KEYS.TRANSFER })}
-                </Button>
-              </>
             )}
           </Styled.ReceiveAndTransferButtons>
         </Styled.Header>

src/views/TransferStatusSteps.tsx

@@ -45,7 +45,12 @@ export const TransferStatusSteps = ({ status, type }: ElementProps) => {
             type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL,
         }),
         step: TransferStatusStep.FromChain,
-        link: status?.fromChain?.transactionUrl,
+        link: 
+          type === 'deposit'
+            ? status?.fromChain?.transactionUrl
+            : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
+            ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
+            : undefined,
       },
       {
         label: stringGetter({ key: STRING_KEYS.BRIDGING_TOKENS }),
@@ -64,7 +69,7 @@ export const TransferStatusSteps = ({ status, type }: ElementProps) => {
           type === 'withdrawal'
             ? status?.toChain?.transactionUrl
             : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
-            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash)}`
+            ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
             : undefined,
       },
     ];