From b9550890da513ec7468d2cc314662600839e0d4f Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 10 Nov 2023 19:05:46 -0800 Subject: [PATCH] Add additional onboarding entry points (#146) * Add additional onboarding entry points * flex-wrap --- src/pages/portfolio/Portfolio.tsx | 146 ++++++++++++++++++------- src/pages/rewards/DYDXBalancePanel.tsx | 25 ++--- src/views/TransferStatusSteps.tsx | 9 +- 3 files changed, 119 insertions(+), 61 deletions(-) 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 })} - - - + )} 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, }, ];