Skip to content

Commit e31fd6a

Browse files
swiftcc624swiftcc624
authored
fix(web): disable save page for production (#905)
1 parent 55f22a2 commit e31fd6a

File tree

3 files changed

+19
-300
lines changed

3 files changed

+19
-300
lines changed

‎apps/web/app/(apps)/save/page.tsx‎

Lines changed: 4 additions & 224 deletions
Original file line numberDiff line numberDiff line change
@@ -1,229 +1,9 @@
11
'use client';
22

3-
import { itemVariants, listVariants } from '@/constants/animation';
4-
import { motion } from 'framer-motion';
5-
import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
6-
import BigNumber from 'bignumber.js';
7-
import AnimatedNumber from '@/components/shared/animated-number';
8-
import AssetList from './_components/asset-list';
9-
import { delay, getMoneymarketTokens, getUniqueTokenSymbols, calculateAPY, formatBalance } from '@/lib/utils';
10-
import DepositOverview from './_components/deposit-overview';
11-
import TotalSaveAssets from './_components/total-save-assets';
12-
import { useSaveActions, useSaveState } from './_stores/save-store-provider';
13-
import { useReservesUsdFormat } from '@sodax/dapp-kit';
14-
import { useTokenSupplyBalances } from '@/hooks/useTokenSupplyBalances';
15-
import { useAllTokenPrices } from '@/hooks/useAllTokenPrices';
16-
import type { XToken } from '@sodax/types';
17-
import type { CarouselApi } from '@/components/ui/carousel';
18-
import CurrencySearchPanel from './_components/currency-search-panel';
19-
import type { DepositItemData, NetworkBalance } from '@/constants/save';
20-
21-
export default function SavingsPage() {
22-
const [isOpen, setIsOpen] = useState(false);
23-
const { setDepositValue, setTotalDepositedUsdValue, reset } = useSaveActions();
24-
const { activeAsset, isSwitchingChain } = useSaveState();
25-
const carouselApiRef = useRef<CarouselApi | undefined>(undefined);
26-
const [searchQuery, setSearchQuery] = useState('');
27-
const { data: formattedReserves } = useReservesUsdFormat();
28-
const allTokens = useMemo(() => getMoneymarketTokens(), []);
29-
const allAssets = useMemo(() => getUniqueTokenSymbols(allTokens), [allTokens]);
30-
const originalTokensWithSupplyBalances = useTokenSupplyBalances(allTokens, formattedReserves || []);
31-
const [selectedChain, setSelectedChain] = useState<string | null>(null);
32-
const cachedTokensWithSupplyBalancesRef = useRef<typeof originalTokensWithSupplyBalances>(
33-
originalTokensWithSupplyBalances,
34-
);
35-
36-
const tokensWithSupplyBalances = useMemo(() => {
37-
if (isSwitchingChain) {
38-
return cachedTokensWithSupplyBalancesRef.current;
39-
}
40-
cachedTokensWithSupplyBalancesRef.current = originalTokensWithSupplyBalances;
41-
return originalTokensWithSupplyBalances;
42-
}, [originalTokensWithSupplyBalances, isSwitchingChain]);
43-
44-
const { data: tokenPrices } = useAllTokenPrices(allTokens);
45-
46-
const highestAPY = useMemo((): number => {
47-
if (!formattedReserves || allTokens.length === 0) {
48-
return 0;
49-
}
50-
51-
let maxAPY = 0;
52-
53-
allTokens.forEach(token => {
54-
const apyString = calculateAPY(formattedReserves, token);
55-
if (apyString !== '-') {
56-
const apyValue = Number.parseFloat(apyString.replace('%', ''));
57-
if (!Number.isNaN(apyValue) && apyValue > maxAPY) {
58-
maxAPY = apyValue;
59-
}
60-
}
61-
});
62-
63-
return maxAPY;
64-
}, [allTokens, formattedReserves]);
65-
66-
const suppliedAssets = useMemo((): DepositItemData[] => {
67-
const items: DepositItemData[] = [];
68-
69-
allAssets.forEach(asset => {
70-
const tokensWithBalance = tokensWithSupplyBalances.filter(
71-
token => token.symbol === asset.symbol && Number(token.supplyBalance) > 0,
72-
);
73-
74-
if (tokensWithBalance.length === 0) {
75-
return;
76-
}
77-
78-
const totalBalance = tokensWithBalance.reduce((sum, token) => {
79-
return sum + Number(token.supplyBalance || '0');
80-
}, 0);
81-
82-
const networksWithFunds: NetworkBalance[] = tokensWithBalance
83-
.map(token => ({
84-
networkId: token.xChainId,
85-
balance: token.supplyBalance || '0',
86-
token,
87-
}))
88-
.filter(network => network.networkId);
89-
90-
const firstToken = tokensWithBalance[0];
91-
if (!firstToken) {
92-
return;
93-
}
94-
95-
let fiatValue = '$0.00';
96-
if (tokenPrices && Number(totalBalance) > 0) {
97-
const priceKey = `${firstToken.symbol}-${firstToken.xChainId}`;
98-
const tokenPrice = tokenPrices[priceKey] || 0;
99-
const usdValue = new BigNumber(totalBalance).multipliedBy(tokenPrice).toString();
100-
fiatValue = `$${formatBalance(usdValue, tokenPrice)}`;
101-
}
102-
103-
const apy = calculateAPY(formattedReserves, firstToken);
104-
105-
items.push({
106-
asset: firstToken,
107-
totalBalance: totalBalance.toFixed(6),
108-
fiatValue,
109-
networksWithFunds,
110-
apy,
111-
});
112-
});
113-
114-
return items;
115-
}, [allAssets, tokensWithSupplyBalances, tokenPrices, formattedReserves]);
116-
117-
const totalUsdValue = useMemo((): string => {
118-
if (suppliedAssets.length === 0) {
119-
return '$0.00';
120-
}
121-
122-
let total = new BigNumber(0);
123-
124-
suppliedAssets.forEach(item => {
125-
const numericValue = item.fiatValue.replace(/[$,]/g, '');
126-
const value = Number(numericValue);
127-
if (!Number.isNaN(value) && value > 0) {
128-
total = total.plus(value);
129-
}
130-
});
131-
setTotalDepositedUsdValue(Number(total.toString()));
132-
return formatBalance(total.toString(), 0);
133-
}, [suppliedAssets, setTotalDepositedUsdValue]);
134-
135-
const hasDeposits = suppliedAssets.length > 0;
136-
137-
useEffect(() => {
138-
delay(500).then(() => {
139-
setIsOpen(true);
140-
});
141-
}, []);
142-
143-
useEffect(() => {
144-
if (activeAsset !== '') {
145-
setDepositValue(0);
146-
}
147-
}, [activeAsset, setDepositValue]);
148-
149-
useEffect(() => {
150-
return () => {
151-
reset();
152-
};
153-
}, [reset]);
154-
155-
const navigateToAsset = useCallback(
156-
(asset: XToken): void => {
157-
if (!carouselApiRef.current) {
158-
return;
159-
}
160-
161-
const assetIndex = suppliedAssets.findIndex(item => item.asset.symbol === asset.symbol);
162-
if (assetIndex !== -1) {
163-
carouselApiRef.current.scrollTo(assetIndex);
164-
}
165-
},
166-
[suppliedAssets],
167-
);
168-
169-
const handleCarouselApiReady = useCallback((api: CarouselApi | undefined): void => {
170-
carouselApiRef.current = api;
171-
}, []);
172-
3+
export default function SavePage() {
1734
return (
174-
<motion.div
175-
className="w-full flex flex-col gap-(--layout-space-comfortable)"
176-
variants={listVariants}
177-
initial={false}
178-
animate={isOpen ? 'open' : 'closed'}
179-
>
180-
{hasDeposits ? (
181-
<motion.div className="w-full flex flex-col gap-4" variants={itemVariants}>
182-
<DepositOverview
183-
suppliedAssets={suppliedAssets}
184-
tokenPrices={tokenPrices}
185-
onApiReady={handleCarouselApiReady}
186-
/>
187-
<TotalSaveAssets
188-
suppliedAssets={suppliedAssets}
189-
onAssetClick={navigateToAsset}
190-
totalUsdValue={totalUsdValue}
191-
/>
192-
</motion.div>
193-
) : (
194-
<motion.div className="inline-flex flex-col justify-start items-start gap-4" variants={itemVariants}>
195-
<div className="self-stretch mix-blend-multiply justify-end">
196-
<div className="text-yellow-dark text-(length:--app-title) font-bold font-['InterRegular'] leading-9">
197-
Deposit and earn{' '}
198-
</div>
199-
<div className="text-yellow-dark text-(length:--app-title) font-normal font-['Shrikhand'] leading-9">
200-
instantly
201-
</div>
202-
</div>
203-
<div className="mix-blend-multiply justify-start text-clay-light font-normal font-['InterRegular'] leading-snug !text-(length:--subtitle) flex">
204-
Up to
205-
<AnimatedNumber
206-
to={highestAPY}
207-
decimalPlaces={2}
208-
className="text-clay-light font-normal font-['InterRegular'] leading-snug !text-(length:--subtitle) min-w-6 ml-1"
209-
/>
210-
% with no lockups.
211-
</div>
212-
</motion.div>
213-
)}
214-
215-
<motion.div className="w-full flex-grow-1" variants={itemVariants}>
216-
<CurrencySearchPanel
217-
searchQuery={searchQuery}
218-
onSearchChange={setSearchQuery}
219-
selectedChain={selectedChain}
220-
setSelectedChain={setSelectedChain}
221-
/>
222-
</motion.div>
223-
224-
<motion.div className="w-full flex-grow-1 relative" variants={itemVariants}>
225-
<AssetList searchQuery={searchQuery} selectedChain={selectedChain} />
226-
</motion.div>
227-
</motion.div>
5+
<div className="inline-flex flex-col justify-start items-start gap-4">
6+
<div>SavePage</div>
7+
</div>
2288
);
2299
}

‎apps/web/app/(apps)/stake/page.tsx‎

Lines changed: 4 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,9 @@
11
'use client';
22

3-
import { StakeHeader, StakeInputPanel, StakeSelectorPanel, StakeStatsCard } from './_components';
4-
import { useStakeActions, useStakeState } from './_stores/stake-store-provider';
5-
import { UnstakeRequests } from './_components/unstake-requests';
6-
import { STAKING_APR } from './_components/constants';
7-
import Tip from './_components/icons/tip';
8-
import { useEffect, useState } from 'react';
9-
import { cn } from '@/lib/utils';
10-
import { motion } from 'framer-motion';
11-
import { itemVariants, listVariants } from '@/constants/animation';
12-
13-
export default function StakePage(): React.JSX.Element {
14-
const { isNetworkPickerOpened } = useStakeState();
15-
const { reset } = useStakeActions();
16-
17-
const [isOpen, setIsOpen] = useState(false);
18-
19-
useEffect(() => {
20-
setTimeout(() => {
21-
setIsOpen(true);
22-
}, 500);
23-
}, []);
24-
25-
useEffect(() => {
26-
return () => {
27-
reset();
28-
};
29-
}, [reset]);
30-
3+
export default function StakePage() {
314
return (
32-
<motion.div
33-
className="w-full flex flex-col justify-start items-start gap-(--layout-space-normal)"
34-
variants={listVariants}
35-
initial={false}
36-
animate={isOpen ? 'open' : 'closed'}
37-
>
38-
<StakeHeader apr={STAKING_APR} />
39-
<motion.div className="relative w-full flex flex-col justify-start items-start gap-0" variants={itemVariants}>
40-
<StakeSelectorPanel />
41-
<div
42-
className={cn(
43-
'relative w-full rounded-tl-(--layout-container-radius) rounded-tr-(--layout-container-radius)',
44-
'before:absolute before:inset-0 before:border-almost-white before:border-[3px] before:border-b-0 before:rounded-tl-(--layout-container-radius) before:rounded-tr-(--layout-container-radius) before:mix-blend-multiply before:pointer-events-none',
45-
'transition-[filter] duration-300',
46-
isNetworkPickerOpened && 'blur-sm',
47-
)}
48-
>
49-
{isNetworkPickerOpened && <div className="inset-0 absolute w-full h-full bg-transparent-white z-20" />}
50-
<StakeInputPanel />
51-
</div>
52-
<div
53-
className={cn(
54-
'relative p-(--layout-space-big) w-full flex flex-col justify-start items-start bg-almost-white mix-blend-multiply rounded-bl-(--layout-container-radius) rounded-br-(--layout-container-radius)',
55-
'transition-[filter] duration-300',
56-
isNetworkPickerOpened && 'blur-sm',
57-
)}
58-
>
59-
<div className="absolute top-0 left-[72px]">
60-
<Tip fill="white" />
61-
</div>
62-
63-
<StakeStatsCard />
64-
</div>
65-
</motion.div>
66-
67-
<UnstakeRequests />
68-
</motion.div>
5+
<div className="inline-flex flex-col justify-start items-start gap-4">
6+
<div>StakePage</div>
7+
</div>
698
);
709
}

‎apps/web/components/shared/route-tabs.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
MIGRATE_ROUTE,
1414
PARTNER_DASHBOARD_ROUTE,
1515
SAVE_ROUTE,
16-
STAKE_ROUTE,
16+
// STAKE_ROUTE,
1717
SWAP_ROUTE,
1818
isPartnerRoute,
1919
} from '@/constants/routes';
@@ -42,7 +42,7 @@ export const tabConfigs: TabConfig[] = [
4242
type: 'save',
4343
label: 'Save',
4444
content: 'a quick save',
45-
enabled: true,
45+
enabled: false,
4646
href: SAVE_ROUTE,
4747
},
4848
{
@@ -53,14 +53,14 @@ export const tabConfigs: TabConfig[] = [
5353
enabled: false,
5454
href: LOANS_ROUTE,
5555
},
56-
{
57-
value: 'stake',
58-
type: 'stake',
59-
label: 'Stake',
60-
content: 'a quick stake',
61-
enabled: true,
62-
href: STAKE_ROUTE,
63-
},
56+
// {
57+
// value: 'stake',
58+
// type: 'stake',
59+
// label: 'Stake',
60+
// content: 'a quick stake',
61+
// enabled: true,
62+
// href: STAKE_ROUTE,
63+
// },
6464
{
6565
value: 'migrate',
6666
type: 'migrate',
@@ -218,7 +218,7 @@ export function RouteTabs({ tabs, hrefPrefix }: RouteTabsProps = {}): React.JSX.
218218
<div ref={mobileTabsContainerRef} className="w-full px-4 py-4 bg-cream-white h-24 flex">
219219
<div className="grid grid-cols-4 gap-4 bg-transparent py-0 w-full">
220220
{usedTabs
221-
.filter(tab => !(tab.value === 'loans'))
221+
// .filter(tab => !(tab.value === 'loans'))
222222
.map(tab => {
223223
const href = tab.href ?? `/${tab.value}`;
224224
const active = current === tab.value;

0 commit comments

Comments
 (0)