diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
index d8969b8..dc64379 100644
--- a/src/pages/portfolio/Portfolio.tsx
+++ b/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 () => {
,
- label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
- href: PortfolioRoute.Overview,
- },
- {
- value: PortfolioRoute.Positions,
- slotBefore: ,
- label: stringGetter({ key: STRING_KEYS.POSITIONS }),
- href: PortfolioRoute.Positions,
- },
- {
- value: PortfolioRoute.Orders,
- slotBefore: ,
- label: stringGetter({ key: STRING_KEYS.ORDERS }),
- href: PortfolioRoute.Orders,
- },
- {
- value: PortfolioRoute.Fees,
- slotBefore: ,
- label: stringGetter({ key: STRING_KEYS.FEES }),
- href: PortfolioRoute.Fees,
- },
- {
- value: PortfolioRoute.History,
- slotBefore: ,
- label: stringGetter({ key: STRING_KEYS.HISTORY }),
- href: PortfolioRoute.History,
- },
- ],
- },
- ]}
- />
+
+ ,
+ label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
+ href: PortfolioRoute.Overview,
+ },
+ {
+ value: PortfolioRoute.Positions,
+ slotBefore: ,
+ label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+ href: PortfolioRoute.Positions,
+ },
+ {
+ value: PortfolioRoute.Orders,
+ slotBefore: ,
+ label: stringGetter({ key: STRING_KEYS.ORDERS }),
+ href: PortfolioRoute.Orders,
+ },
+ {
+ value: PortfolioRoute.Fees,
+ slotBefore: ,
+ label: stringGetter({ key: STRING_KEYS.FEES }),
+ href: PortfolioRoute.Fees,
+ },
+ {
+ value: PortfolioRoute.History,
+ slotBefore: ,
+ label: stringGetter({ key: STRING_KEYS.HISTORY }),
+ href: PortfolioRoute.History,
+ },
+ ],
+ },
+ ]}
+ />
+ {onboardingState === OnboardingState.AccountConnected && (
+
+
+ {usdcBalance > 0 && (
+
+ )}
+ {(usdcBalance > 0 || nativeTokenBalance.gt(0)) && (
+
+ )}
+
+ )}
+
)
}
>
@@ -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;
diff --git a/src/pages/rewards/DYDXBalancePanel.tsx b/src/pages/rewards/DYDXBalancePanel.tsx
index e6ee4bf..ee4bd10 100644
--- a/src/pages/rewards/DYDXBalancePanel.tsx
+++ b/src/pages/rewards/DYDXBalancePanel.tsx
@@ -43,23 +43,14 @@ export const DYDXBalancePanel = () => {
{!canAccountTrade ? (
) : (
- <>
- }
- size={ButtonSize.Small}
- onClick={() => dispatch(openDialog({ type: DialogTypes.Receive }))}
- >
- {stringGetter({ key: STRING_KEYS.RECEIVE })}
-
- }
- size={ButtonSize.Small}
- action={ButtonAction.Primary}
- onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
- >
- {stringGetter({ key: STRING_KEYS.TRANSFER })}
-
- >
+ }
+ size={ButtonSize.Small}
+ action={ButtonAction.Primary}
+ onClick={() => dispatch(openDialog({ type: DialogTypes.Transfer }))}
+ >
+ {stringGetter({ key: STRING_KEYS.TRANSFER })}
+
)}
diff --git a/src/views/TransferStatusSteps.tsx b/src/views/TransferStatusSteps.tsx
index e158e00..1bbf5c8 100644
--- a/src/views/TransferStatusSteps.tsx
+++ b/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,
},
];