From f609540809c789adfa07e9c2a7138fb2b22d66a6 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Thu, 15 Feb 2024 16:22:20 +0100 Subject: [PATCH] feat: prepared everything for modal interaction --- .../account/AccountDetails/index.tsx | 8 +++--- src/components/common/Background.tsx | 26 ++++++++++++++----- src/components/header/DesktopHeader.tsx | 4 ++- src/components/v1/Deposits.tsx | 2 -- .../v1/Table/deposits/Columns/Manage.tsx | 2 -- src/store/slices/common.ts | 1 + src/types/interfaces/store/common.d.ts | 1 + src/utils/route.ts | 1 + tailwind.config.js | 4 +++ 9 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/components/account/AccountDetails/index.tsx b/src/components/account/AccountDetails/index.tsx index 1ac488f9..e0ad160b 100644 --- a/src/components/account/AccountDetails/index.tsx +++ b/src/components/account/AccountDetails/index.tsx @@ -37,6 +37,7 @@ import { export default function AccountDetailsController() { const address = useStore((s) => s.address) const isHLS = useStore((s) => s.isHLS) + const isV1 = useStore((s) => s.isV1) const { data: _, isLoading } = useAccounts('default', address) const { data: accountIds } = useAccountIds(address, false, true) @@ -45,10 +46,11 @@ export default function AccountDetailsController() { const account = useCurrentAccount() const focusComponent = useStore((s) => s.focusComponent) const isOwnAccount = accountId && accountIds?.includes(accountId) + const hideAccountDetails = !address || focusComponent || !isOwnAccount || isHLS || isV1 + const isLoadingAccountDetails = (isLoading && accountId && !focusComponent) || !account - if (!address || focusComponent || !isOwnAccount || isHLS) return null - - if ((isLoading && accountId && !focusComponent) || !account) return + if (hideAccountDetails) return null + if (isLoadingAccountDetails) return return } diff --git a/src/components/common/Background.tsx b/src/components/common/Background.tsx index 54ef2924..3bdca489 100644 --- a/src/components/common/Background.tsx +++ b/src/components/common/Background.tsx @@ -15,11 +15,23 @@ export default function Background() { ) const { pathname } = useLocation() const page = getPage(pathname) - const isHLS = useMemo(() => page.split('-')[0] === 'hls', [page]) + const [isHLS, isV1] = useMemo(() => [page.split('-')[0] === 'hls', page === 'v1'], [page]) useEffect(() => { - useStore.setState({ isHLS }) - }, [isHLS]) + useStore.setState({ isHLS: isHLS, isV1: isV1 }) + }, [isHLS, isV1]) + + const [primaryOrbClassName, secondaryOrbClassName, tertiaryOrbClassName, bodyClassName] = + useMemo(() => { + if (isHLS) { + return ['bg-orb-primary-hls', 'bg-orb-secondary-hls', 'bg-orb-tertiary-hls', 'bg-body-hls'] + } + if (isV1) { + return ['bg-orb-primary-v1', 'bg-orb-secondary-v1', 'bg-orb-tertiary-v1', 'bg-body-v1'] + } + + return ['bg-orb-primary', 'bg-orb-secondary', 'bg-orb-tertiary', 'bg-body'] + }, [isHLS, isV1]) return (
@@ -39,7 +51,7 @@ export default function Background() { 'max-h-[500px] max-w-[500px]', 'left-[-10vw] top-[-10vw]', 'blur-orb-primary', - isHLS ? ' bg-orb-primary-hls' : 'bg-orb-primary', + primaryOrbClassName, 'translate-x-0 translate-y-0 rounded-full opacity-20', !reduceMotion && 'animate-[float_120s_ease-in-out_infinite_2s]', !reduceMotion && 'transition-bg duration-1000 delay-300', @@ -53,7 +65,7 @@ export default function Background() { 'max-h-[1000px] max-w-[1000px]', 'bottom-[-20vw] right-[-10vw]', 'blur-orb-secondary', - isHLS ? ' bg-orb-secondary-hls' : 'bg-orb-secondary', + secondaryOrbClassName, 'translate-x-0 translate-y-0 rounded-full opacity-30', !reduceMotion && 'transition-bg duration-1000 delay-300', )} @@ -66,7 +78,7 @@ export default function Background() { 'max-h-[600px] max-w-[600px]', 'right-[-4vw] top-[-10vw]', 'blur-orb-tertiary ', - isHLS ? ' bg-orb-tertiary-hls' : 'bg-orb-tertiary', + tertiaryOrbClassName, 'translate-x-0 translate-y-0 rounded-full opacity-20', !reduceMotion && 'animate-[float_180s_ease-in_infinite]', !reduceMotion && 'transition-bg duration-1000 delay-300', diff --git a/src/components/header/DesktopHeader.tsx b/src/components/header/DesktopHeader.tsx index 77ade9f4..493e6f73 100644 --- a/src/components/header/DesktopHeader.tsx +++ b/src/components/header/DesktopHeader.tsx @@ -49,7 +49,9 @@ export default function DesktopHeader() { const focusComponent = useStore((s) => s.focusComponent) const isOracleStale = useStore((s) => s.isOracleStale) const isHLS = useStore((s) => s.isHLS) + const isV1 = useStore((s) => s.isV1) const accountId = useAccountId() + const showAccountMenu = address && !isHLS && !isV1 function handleCloseFocusMode() { if (focusComponent && focusComponent.onClose) focusComponent.onClose() @@ -93,7 +95,7 @@ export default function DesktopHeader() {
{showStaleOracle && } {accountId && } - {address && !isHLS && } + {showAccountMenu && } diff --git a/src/components/v1/Deposits.tsx b/src/components/v1/Deposits.tsx index 997243bc..4fc025af 100644 --- a/src/components/v1/Deposits.tsx +++ b/src/components/v1/Deposits.tsx @@ -10,8 +10,6 @@ export default function Deposits() { return } - console.log(depositAssets) - return ( <> diff --git a/src/components/v1/Table/deposits/Columns/Manage.tsx b/src/components/v1/Table/deposits/Columns/Manage.tsx index 28ca2bef..51c447a7 100644 --- a/src/components/v1/Table/deposits/Columns/Manage.tsx +++ b/src/components/v1/Table/deposits/Columns/Manage.tsx @@ -17,8 +17,6 @@ export default function Manage(props: Props) { const { data: balances } = useWalletBalances(address) const hasBalance = !!balances.find(byDenom(props.data.asset.denom)) - console.log(balances) - const ITEMS: DropDownItem[] = useMemo( () => [ { diff --git a/src/store/slices/common.ts b/src/store/slices/common.ts index eee116cc..f8ffb448 100644 --- a/src/store/slices/common.ts +++ b/src/store/slices/common.ts @@ -19,5 +19,6 @@ export default function createCommonSlice(set: SetState, get: GetSt useAutoRepay: true, isOracleStale: false, isHLS: false, + isV1: false, } } diff --git a/src/types/interfaces/store/common.d.ts b/src/types/interfaces/store/common.d.ts index 93d61291..9c9122cd 100644 --- a/src/types/interfaces/store/common.d.ts +++ b/src/types/interfaces/store/common.d.ts @@ -18,6 +18,7 @@ interface CommonSlice { useAutoRepay: boolean isOracleStale: boolean isHLS: boolean + isV1: boolean } interface FocusComponent { diff --git a/src/utils/route.ts b/src/utils/route.ts index aae1b19e..723cc922 100644 --- a/src/utils/route.ts +++ b/src/utils/route.ts @@ -40,6 +40,7 @@ export function getPage(pathname: string): Page { 'portfolio', 'hls-farm', 'hls-staking', + 'v1', ] const segments = pathname.split('/') diff --git a/tailwind.config.js b/tailwind.config.js index 321717d1..1bc2f416 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -102,6 +102,7 @@ module.exports = { axlusdc: '#478edc', body: '#0D0012', 'body-hls': '#090000', + 'body-v1': '#10000a', 'body-dark': '#141621', chart: '#220e1d', error: '#F04438', @@ -123,10 +124,13 @@ module.exports = { osmo: '#9f1ab9', 'orb-primary': '#b12f25', 'orb-primary-hls': '#FF645F', + 'orb-primary-v1': '#612e4d', 'orb-secondary': '#530781', 'orb-secondary-hls': '#a03b45', + 'orb-secondary-v1': '#692f55', 'orb-tertiary': '#ff00c7', 'orb-tertiary-hls': '#FB9562', + 'orb-tertiary-v1': '#993878', profit: '#4CA30D', primary: '#FF625E', secondary: '#FB9562',