Compare commits

..
Author SHA1 Message Date
Bill He 4e7527b797 remove testnet cctp chains 2024-01-03 11:38:32 -08:00
Jared Vu 29526b927f Update deposit and withdrawal receipts (#212)
* Update receipts

* Remove duplicate const

* Restore env

* format

* Try using raw

* Use 3 spaces T.T

* copy from main

* Update abacus, display proper toAmount and toAmountMin

* nits
2024-01-03 09:56:01 -08:00
Jared Vu 503e089efa temp hide fees for cctp route (#213) 2023-12-23 01:17:41 -08:00
Jared Vu c3495f462c Additional Withdraw/Deposit validation (#211)
* Add cctp amount check and price impact check

* 2.5% -> 2%
2023-12-22 17:31:32 -08:00
Billandjaredvu 6da6eeb2a4 Enable CCTP (#194)
* Enable CCTP

* Handle base64 encode

* Update localization package

---------

Co-authored-by: jaredvu <jaredvu@gmail.com>
2023-12-22 11:12:41 -08:00
mike-dydx 0cf3e81bd7 Create documentation.json (#205) 2023-12-21 15:08:08 -05:00
aleka f8cf1d364b update coinbase connect app name (#208) 2023-12-21 10:58:57 -08:00
Jared Vu 6f344c6b5d Update comparison function in Table (#207) 2023-12-21 10:53:56 -08:00
Jared Vu 133856afca Export secret phrase help article (#206)
* Update config with correct article link

* Remove auto-format of json
2023-12-21 10:49:52 -08:00
Jared Vu 33c543daaf Update bridgeFee in Withdraw/Deposit forms (#202)
* Update Withdraw form receipt

* Bump abacus 1.1.27

* pnpm-lock

* bump v4-localization
2023-12-19 23:36:13 -08:00
Jared Vu c77e727d2b TRCL-3406: firefox mobile position table row has stretched icon (#204)
* Fix PositionsTable assetIcon

* Mobile width of HelpDialog
2023-12-19 23:33:36 -08:00
Jared Vu b94538711d Lazy load Pages (#203)
* Lazy import pages

* Fix import order
2023-12-19 23:30:51 -08:00
Jared Vu b83479f45c Handle New Markets added by Gov (#201)
* Add celestia assets

* Handle symbol not yet added
2023-12-19 23:25:14 -08:00
Jared Vu 001aad3abc Navigate to the Markets page if the current marketId is not included in subscribed markets (#198)
* Navigate to markets if current url is invalid

* nits
2023-12-19 15:58:49 -08:00
Jared Vu f8db5e1ba0 Update abacus to 1.1.25: Good til time fix (#199) 2023-12-19 09:49:51 -08:00
Jared Vu f8bec0fb3d Update Withdraw form receipt (#200) 2023-12-19 09:49:37 -08:00
30 changed files with 744 additions and 581 deletions
+2 -2
View File
@@ -39,9 +39,9 @@
"@cosmjs/proto-signing": "^0.31.0",
"@cosmjs/stargate": "^0.31.0",
"@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^1.1.24",
"@dydxprotocol/v4-abacus": "^1.1.32",
"@dydxprotocol/v4-client-js": "^1.0.11",
"@dydxprotocol/v4-localization": "^1.0.19",
"@dydxprotocol/v4-localization": "^1.1.5",
"@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3",
"@radix-ui/react-checkbox": "^1.0.4",
+331 -293
View File
File diff suppressed because it is too large Load Diff
-29
View File
@@ -4,38 +4,9 @@
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
"name": "Ethereum"
},
{
"chainId": "421613",
"tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
"name": "Arbitrum Goerli"
},
{
"chainId": "43113",
"tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
"name": "Avalanche Fuji"
},
{
"chainId": "84531",
"tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
"name": "Base Goerli"
},
{
"chainId": "5",
"tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
"name": "Ethereum Goerli"
},
{
"chainId": "grand-1",
"tokenAddress": "uusdc",
"name": "Noble Testnet"
},
{
"chainId": "420",
"tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
"name": "OP Goerli"
},
{
"chainId": "103",
"name": "Solana Devnet"
}
]
+16
View File
@@ -0,0 +1,16 @@
{
"tradingRewardsFAQs": [
{
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_QUESTION",
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_ANSWER"
},
{
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_QUESTION",
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_ANSWER"
},
{
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_QUESTION",
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_ANSWER"
}
]
}
+12 -12
View File
@@ -89,7 +89,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -162,7 +162,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -235,7 +235,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -308,7 +308,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -383,7 +383,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -531,7 +531,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -610,7 +610,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -686,7 +686,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -762,7 +762,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -838,7 +838,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -914,7 +914,7 @@
"governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/",
"accountExportLearnMore": "https://help.dydx.exchange",
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
},
"wallets": {
@@ -1126,7 +1126,7 @@
"blogs": "[HTTP link to blogs, can be null]",
"foundation": "[HTTP link to foundation, can be null]",
"initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
"reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
"documentation": "[HTTP link to documentation, can be null]",
"community": "[HTTP link to community, can be null]",
"help": "[HTTP link to help page, can be null]",
+13 -12
View File
@@ -1,4 +1,4 @@
import { Suspense } from 'react';
import { lazy, Suspense } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import styled, { AnyStyledComponent, css } from 'styled-components';
import { WagmiConfig } from 'wagmi';
@@ -25,16 +25,6 @@ import { SubaccountProvider } from '@/hooks/useSubaccount';
import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
import MarketsPage from '@/pages/markets/Markets';
import PortfolioPage from '@/pages/portfolio/Portfolio';
import { AlertsPage } from '@/pages/AlertsPage';
import ProfilePage from '@/pages/Profile';
import { SettingsPage } from '@/pages/settings/Settings';
import TradePage from '@/pages/trade/Trade';
import { RewardsPage } from '@/pages/rewards/RewardsPage';
import { TermsOfUsePage } from '@/pages/TermsOfUsePage';
import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage';
import { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
import { FooterMobile } from '@/layout/Footer/FooterMobile';
@@ -46,11 +36,22 @@ import { config } from '@/lib/wagmi';
import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins';
import { LoadingSpace } from './components/Loading/LoadingSpinner';
import '@/styles/constants.css';
import '@/styles/fonts.css';
import '@/styles/web3modal.css';
const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
const ProfilePage = lazy(() => import('@/pages/Profile'));
const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
const TradePage = lazy(() => import('@/pages/trade/Trade'));
const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage'));
const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage'));
const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage'));
const queryClient = new QueryClient();
const Content = () => {
@@ -69,7 +70,7 @@ const Content = () => {
{isNotTablet && <HeaderDesktop />}
<Styled.Main>
<Suspense fallback={null}>
<Suspense fallback={<LoadingSpace id="main" />}>
<Routes>
<Route path={AppRoute.Trade}>
<Route path=":market" element={<TradePage />} />
+2 -4
View File
@@ -43,6 +43,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
import { Icon, IconName } from './Icon';
import { Tag } from './Tag';
import { MustBigNumber } from '@/lib/numbers';
export { TableCell } from './Table/TableCell';
export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -161,10 +162,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
? // String
collator.compare(first as string, second as string)
: // Number
Math.sign(
(parseInt(first as string) || (first as number)) -
(parseInt(second as string) || (second as number))
)) *
MustBigNumber(first).comparedTo(MustBigNumber(second))) *
// Flip the direction if descending order is specified.
(sortDirection === 'descending' ? -1 : 1)
);
+5
View File
@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
export const TOKEN_DECIMALS = 4;
export const LARGE_TOKEN_DECIMALS = 2;
export const FEE_DECIMALS = 3;
export const FUNDING_DECIMALS = 6;
export const QUANTUM_MULTIPLIER = 1_000_000;
@@ -18,3 +19,7 @@ export enum NumberSign {
Negative = 'Negative',
Neutral = 'Neutral',
}
// Deposit/Withdraw
export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
export const MAX_PRICE_IMPACT = 0.02; // 2%
+4
View File
@@ -1,6 +1,10 @@
import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';
export const depositTooltips: TooltipStrings = {
'minimum-deposit-amount': ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
}),
swap: ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),
+4
View File
@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
}),
'minimum-amount-received': ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
}),
'withdraw-types': ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),
+28 -11
View File
@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
import { LocalStorageKey } from '@/constants/localStorage';
import { DEFAULT_MARKETID } from '@/constants/markets';
import { AppRoute } from '@/constants/routes';
import { useLocalStorage } from '@/hooks/useLocalStorage';
import { getSelectedNetwork } from '@/state/appSelectors';
import { closeDialogInTradeBox } from '@/state/dialogs';
import { setCurrentMarketId } from '@/state/perpetuals';
import { getMarketIds } from '@/state/perpetualsSelectors';
import abacusStateManager from '@/lib/abacus';
import { useLocalStorage } from './useLocalStorage';
import { getMarketIds } from '@/state/perpetualsSelectors';
export const useCurrentMarketId = () => {
const navigate = useNavigate();
const match = useMatch(`/${AppRoute.Trade}/:marketId`);
@@ -33,17 +32,35 @@ export const useCurrentMarketId = () => {
if (marketIds.length === 0) return marketId ?? lastViewedMarket;
if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
return marketId ?? lastViewedMarket;
}, [marketIds, marketId]);
}, [hasMarketIds, marketId]);
useEffect(() => {
setLastViewedMarket(validId);
dispatch(setCurrentMarketId(validId));
dispatch(closeDialogInTradeBox());
// If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
if (!hasMarketIds || !marketId) {
setLastViewedMarket(validId);
dispatch(setCurrentMarketId(validId));
dispatch(closeDialogInTradeBox());
navigate(`${AppRoute.Trade}/${validId}`, {
replace: true,
});
}, [validId]);
if (validId !== marketId) {
navigate(`${AppRoute.Trade}/${validId}`, {
replace: true,
});
}
} else {
// If v4_markets has been subscribed to, check if marketId is valid
if (!marketIds.includes(marketId)) {
// If marketId is not valid (i.e. final settlement), navigate to markets page
navigate(AppRoute.Markets, {
replace: true,
});
} else {
// If marketId is valid, set currentMarketId
setLastViewedMarket(marketId);
dispatch(setCurrentMarketId(marketId));
dispatch(closeDialogInTradeBox());
}
}
}, [hasMarketIds, marketId]);
useEffect(() => {
// Check for marketIds otherwise Abacus will silently fail its isMarketValid check
+2 -2
View File
@@ -157,8 +157,8 @@ export const notificationTypes: NotificationTypeConfig[] = [
const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
const transferType = type ??
fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
const transferType =
type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
? TransferNotificationTypes.Withdrawal
: TransferNotificationTypes.Deposit;
+25 -33
View File
@@ -212,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
timeInForce as OrderTimeInForce,
goodTilTimeInSeconds ?? 0,
execution as OrderExecution,
postOnly,
reduceOnly,
postOnly ?? undefined,
reduceOnly ?? undefined,
triggerPrice ?? undefined
);
@@ -351,12 +351,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
}
}
async sendNobleIBC(
params: {
msgTypeUrl: string,
msg: any,
}
): Promise<string> {
async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
if (!this.nobleClient?.isConnected) {
throw new Error('Missing nobleClient or localWallet');
}
@@ -367,15 +362,16 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
value: params.msg,
};
const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
// take out fee from amount before sweeping
const amount = parseInt(ibcMsg.value.token.amount, 10) -
const amount =
parseInt(ibcMsg.value.token.amount, 10) -
Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
if (amount <= 0) {
throw new Error('noble balance does not cover fees');
}
ibcMsg.value.token.amount = amount.toString();
const tx = await this.nobleClient.send([ibcMsg]);
@@ -391,23 +387,21 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
}
}
async withdrawToNobleIBC(
params: {
subaccountNumber: number,
amount: string,
ibcPayload: string,
}
): Promise<string> {
async withdrawToNobleIBC(params: {
subaccountNumber: number;
amount: string;
ibcPayload: string;
}): Promise<string> {
if (!this.compositeClient || !this.localWallet) {
throw new Error('Missing compositeClient or localWallet');
}
const { subaccountNumber, amount, ibcPayload } = params ?? {};
const parsedIbcPayload: {
msgTypeUrl: string,
msg: any,
} = ibcPayload ? JSON.parse(ibcPayload) : undefined;
msgTypeUrl: string;
msg: any;
} = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
try {
const msg = this.compositeClient.withdrawFromSubaccountMessage(
new SubaccountClient(this.localWallet, subaccountNumber),
@@ -425,7 +419,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
);
return JSON.stringify({
txHash: hashFromTx(tx?.hash)
txHash: hashFromTx(tx?.hash),
});
} catch (error) {
log('DydxChainTransactions/withdrawToNobleIBC', error);
@@ -436,10 +430,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
}
}
async cctpWithdraw(params: {
typeUrl: string,
value: any,
}): Promise<string> {
async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
if (!this.nobleClient?.isConnected) {
throw new Error('Missing nobleClient or localWallet');
}
@@ -450,17 +441,18 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
value: params.value,
};
const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
// take out fee from amount before sweeping
const amount = parseInt(ibcMsg.value.amount, 10) -
const amount =
parseInt(ibcMsg.value.amount, 10) -
Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
if (amount <= 0) {
throw new Error('noble balance does not cover fees');
}
ibcMsg.value.amount = amount.toString();
const tx = await this.nobleClient.send([ibcMsg]);
const parsedTx = this.parseToPrimitives(tx);
+1 -2
View File
@@ -84,8 +84,7 @@ class AbacusStateManager {
);
const appConfigs = AbacusAppConfig.Companion.forWeb;
if (!isMainnet || testFlags.withCCTP)
appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
this.stateManager = new AsyncAbacusStateManager(
'',
+1 -1
View File
@@ -146,7 +146,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
new CoinbaseWalletConnector({
chains,
options: {
appName: 'wagmi',
appName: 'dYdX',
reloadOnDisconnect: false,
},
}),
+3 -1
View File
@@ -1,4 +1,6 @@
import { DialogPlacement } from '@/components/Dialog';
import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
export default AlertsPage;
+3 -1
View File
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { articleMixins } from '@/styles/articleMixins';
export const PrivacyPolicyPage = () => (
const PrivacyPolicyPage = () => (
<Styled.Article>
<header>
<h1>Privacy Policy</h1>
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
</Styled.Article>
);
export default PrivacyPolicyPage;
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Article = styled.article`
+3 -1
View File
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { articleMixins } from '@/styles/articleMixins';
export const TermsOfUsePage = () => (
const TermsOfUsePage = () => (
<Styled.Article>
<header>
<h1>Sample Terms of Use</h1>
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
</Styled.Article>
);
export default TermsOfUsePage;
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Article = styled.article`
+58 -53
View File
@@ -1,17 +1,20 @@
import { lazy, Suspense } 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 { ButtonAction } from '@/constants/buttons';
import { DialogTypes } from '@/constants/dialogs';
import { STRING_KEYS } from '@/constants/localization';
import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
import { Button } from '@/components/Button';
import { Icon, IconName } from '@/components/Icon';
import { NavigationMenu } from '@/components/NavigationMenu';
import { WithSidebar } from '@/components/WithSidebar';
@@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
import { openDialog } from '@/state/dialogs';
import { PortfolioNavMobile } from './PortfolioNavMobile';
import { Overview } from './Overview';
import { Positions } from './Positions';
import { Orders } from './Orders';
import { Fees } from './Fees';
import { History } from './History';
import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
import { layoutMixins } from '@/styles/layoutMixins';
import { Button } from '@/components/Button';
import { ButtonAction } from '@/constants/buttons';
const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
const Positions = lazy(() =>
import('./Positions').then((module) => ({ default: module.Positions }))
);
const Orders = lazy(() => import('./Orders').then((module) => ({ default: module.Orders })));
const Fees = lazy(() => import('./Fees').then((module) => ({ default: module.Fees })));
const History = lazy(() => import('./History').then((module) => ({ default: module.History })));
export default () => {
const dispatch = useDispatch();
@@ -44,49 +47,51 @@ export default () => {
useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
const routesComponent = (
<Routes>
<Route path={PortfolioRoute.Overview} element={<Overview />} />
<Route path={PortfolioRoute.Positions} element={<Positions />} />
<Route path={PortfolioRoute.Orders} element={<Orders />} />
<Route path={PortfolioRoute.Fees} element={<Fees />} />
<Route path={PortfolioRoute.History} element={<History />}>
<Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
<Route
path={HistoryRoute.Trades}
element={
<FillsTable
columnKeys={
isTablet
? [
FillsTableColumnKey.Time,
FillsTableColumnKey.TypeAmount,
FillsTableColumnKey.PriceFee,
]
: [
FillsTableColumnKey.Time,
FillsTableColumnKey.Market,
FillsTableColumnKey.Side,
FillsTableColumnKey.AmountPrice,
FillsTableColumnKey.TotalFee,
FillsTableColumnKey.Type,
FillsTableColumnKey.Liquidity,
]
}
withOuterBorder={isNotTablet}
/>
}
/>
<Route
path={HistoryRoute.Transfers}
element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
/>
<Route
path={HistoryRoute.Payments}
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
/>
</Route>
<Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
</Routes>
<Suspense fallback={<LoadingSpace id="portfolio" />}>
<Routes>
<Route path={PortfolioRoute.Overview} element={<Overview />} />
<Route path={PortfolioRoute.Positions} element={<Positions />} />
<Route path={PortfolioRoute.Orders} element={<Orders />} />
<Route path={PortfolioRoute.Fees} element={<Fees />} />
<Route path={PortfolioRoute.History} element={<History />}>
<Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
<Route
path={HistoryRoute.Trades}
element={
<FillsTable
columnKeys={
isTablet
? [
FillsTableColumnKey.Time,
FillsTableColumnKey.TypeAmount,
FillsTableColumnKey.PriceFee,
]
: [
FillsTableColumnKey.Time,
FillsTableColumnKey.Market,
FillsTableColumnKey.Side,
FillsTableColumnKey.AmountPrice,
FillsTableColumnKey.TotalFee,
FillsTableColumnKey.Type,
FillsTableColumnKey.Liquidity,
]
}
withOuterBorder={isNotTablet}
/>
}
/>
<Route
path={HistoryRoute.Transfers}
element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
/>
<Route
path={HistoryRoute.Payments}
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
/>
</Route>
<Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
</Routes>
</Suspense>
);
return isTablet ? (
@@ -191,7 +196,7 @@ Styled.SideBar = styled.div`
Styled.Footer = styled.div`
${layoutMixins.row}
flex-wrap: wrap;
padding: 1rem;
gap: 0.5rem;
+3 -1
View File
@@ -21,7 +21,7 @@ import { DYDXBalancePanel } from './DYDXBalancePanel';
import { MigratePanel } from './MigratePanel';
import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
export const RewardsPage = () => {
const RewardsPage = () => {
const dispatch = useDispatch();
const stringGetter = useStringGetter();
const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
@@ -84,6 +84,8 @@ export const RewardsPage = () => {
);
};
export default RewardsPage;
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Page = styled.div`
+3 -1
View File
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
import { SettingsHeader } from './SettingsHeader';
import { ComingSoonSpace } from '@/components/ComingSoon';
export const SettingsPage = () => {
const SettingsPage = () => {
const stringGetter = useStringGetter();
const { pathname } = useLocation();
const dispatch = useDispatch();
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
</>
);
};
export default SettingsPage;
-1
View File
@@ -83,7 +83,6 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
const tabItems = useMemo(
() => [
{
asChild: true,
value: InfoSection.Position,
label: stringGetter({
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
+5 -1
View File
@@ -8,6 +8,7 @@ import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
import { Icon, IconName } from '@/components/Icon';
import { isTruthy } from '@/lib/isTruthy';
import { breakpoints } from '@/styles';
type ElementProps = {
setIsOpen: (open: boolean) => void;
@@ -72,8 +73,11 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
const Styled: Record<string, AnyStyledComponent> = {};
Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)`
--dialog-width: var(--dialog-small-width);
--dialog-content-paddingTop: 1rem;
--dialog-content-paddingBottom: 1rem;
--comboxDialogMenu-item-gap: 1rem;
@media ${breakpoints.notMobile} {
--dialog-width: var(--dialog-small-width);
}
`;
@@ -18,11 +18,7 @@ type ElementProps = {
onSelectChain: (chain: string) => void;
};
export const ChainSelectMenu = ({
label,
selectedChain,
onSelectChain,
}: ElementProps) => {
export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
const stringGetter = useStringGetter();
const { type, depositOptions, withdrawalOptions, resources } =
useSelector(getTransferInputs, shallowEqual) || {};
@@ -38,7 +34,7 @@ export const ChainSelectMenu = ({
slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
}));
const selectedOption = chains.find((item) => item.type === selectedChain);
const selectedOption = chains.find((item) => item.type === selectedChain);
return (
<SearchSelectMenu
@@ -81,4 +77,4 @@ Styled.ChainRow = styled.div`
gap: 0.5rem;
color: var(--color-text-2);
font: var(--font-base-book);
`;
`;
@@ -10,9 +10,8 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
import { AlertType } from '@/constants/alerts';
import { ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { NotificationStatus } from '@/constants/notifications';
import { NumberSign } from '@/constants/numbers';
import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
import type { EvmAddress } from '@/constants/wallets';
import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
@@ -253,7 +252,9 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
if (txHash) {
addTransferNotification({
txHash: txHash,
toChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
toChainId: !isCctp
? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
: getNobleChainId(),
fromChainId: chainIdStr || undefined,
toAmount: summary?.usdcSize || undefined,
triggeredAt: Date.now(),
@@ -324,6 +325,21 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
return stringGetter({ key: STRING_KEYS.DEPOSIT_MORE_THAN_BALANCE });
}
if (isCctp) {
if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
return stringGetter({
key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
params: {
MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
},
});
}
}
if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
}
return undefined;
}, [
error,
@@ -334,6 +350,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
fromAmount,
sourceToken,
stringGetter,
summary,
]);
const isDisabled =
@@ -1,21 +1,16 @@
import { type Dispatch, type SetStateAction, useState, type ReactNode } from 'react';
import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
import styled, { type AnyStyledComponent } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux';
import type { RouteData } from '@0xsquid/sdk';
import { formatUnits } from 'viem';
import {
ButtonAction,
ButtonShape,
ButtonSize,
ButtonState,
ButtonType,
} from '@/constants/buttons';
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
import { TransferInputTokenResource } from '@/constants/abacus';
import { STRING_KEYS } from '@/constants/localization';
import { NumberSign } from '@/constants/numbers';
import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
import { useStringGetter } from '@/hooks';
import { useStringGetter, useTokenConfigs } from '@/hooks';
import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,6 +29,7 @@ import { calculateCanAccountTrade } from '@/state/accountCalculators';
import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
import { getTransferInputs } from '@/state/inputsSelectors';
import { isTruthy } from '@/lib/isTruthy';
import { MustBigNumber } from '@/lib/numbers';
import { SlippageEditor } from '../SlippageEditor';
@@ -83,7 +79,8 @@ export const DepositButtonAndReceipt = ({
const { current: buyingPower, postOrder: newBuyingPower } =
useSelector(getSubaccountBuyingPower, shallowEqual) || {};
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const { usdcDecimals, usdcLabel } = useTokenConfigs();
const feeSubitems: DetailsItem[] = [];
@@ -98,7 +95,7 @@ export const DepositButtonAndReceipt = ({
if (typeof summary?.bridgeFee === 'number') {
feeSubitems.push({
key: 'bridge-fees',
label: <span>Bridge Fee</span>,
label: <span>{stringGetter({ key: STRING_KEYS.BRIDGE_FEE })}</span>,
value: <Output type={OutputType.Fiat} value={summary?.bridgeFee} />,
});
}
@@ -111,12 +108,68 @@ export const DepositButtonAndReceipt = ({
const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
const { toAmount, toAmountMin } = useMemo(() => {
if (isCctp) {
return {
toAmount: summary?.toAmount,
toAmountMin: summary?.toAmountMin,
};
} else {
return {
toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals),
toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals),
};
}
}, [isCctp, summary]);
const submitButtonReceipt = [
{
key: 'expected-deposit-amount',
label: (
<span>
{stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
</span>
),
value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
subitems: [
{
key: 'minimum-deposit-amount',
label: (
<span>
{stringGetter({ key: STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
</span>
),
value: (
<Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
),
tooltip: 'minimum-deposit-amount',
},
],
},
{
key: 'exchange-rate',
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
value:
typeof summary?.exchangeRate === 'number' ? (
<Styled.ExchangeRate>
<Output
type={OutputType.Asset}
value={1}
fractionDigits={0}
tag={sourceToken?.symbol}
/>
=
<Output type={OutputType.Asset} value={summary?.exchangeRate} tag={usdcLabel} />
</Styled.ExchangeRate>
) : (
<Output type={OutputType.Asset} />
),
},
{
key: 'equity',
label: (
<span>
{stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>USDC</Tag>
{stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>{usdcLabel}</Tag>
</span>
),
value: (
@@ -133,7 +186,7 @@ export const DepositButtonAndReceipt = ({
key: 'buying-power',
label: (
<span>
{stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>USDC</Tag>
{stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>{usdcLabel}</Tag>
</span>
),
value: (
@@ -146,18 +199,7 @@ export const DepositButtonAndReceipt = ({
/>
),
},
{
key: 'exchange-rate',
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
value: typeof summary?.exchangeRate === 'number' && (
<Styled.ExchangeRate>
<Output type={OutputType.Asset} value={1} fractionDigits={0} tag={sourceToken?.symbol} />
=
<Output type={OutputType.Asset} value={summary?.exchangeRate} tag="USDC" />
</Styled.ExchangeRate>
),
},
{
!isCctp && {
key: 'total-fees',
label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
value: <Output type={OutputType.Fiat} value={totalFees} />,
@@ -165,7 +207,7 @@ export const DepositButtonAndReceipt = ({
},
{
key: 'slippage',
label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
value: (
<SlippageEditor
disabled
@@ -178,22 +220,26 @@ export const DepositButtonAndReceipt = ({
{
key: 'estimatedRouteDuration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && (
value: (
<Output
type={OutputType.Text}
value={stringGetter({
key: STRING_KEYS.X_MINUTES_LOWERCASED,
params: {
X:
summary?.estimatedRouteDuration < 60
? '< 1'
: Math.round(summary?.estimatedRouteDuration / 60),
},
})}
value={
typeof summary?.estimatedRouteDuration === 'number'
? stringGetter({
key: STRING_KEYS.X_MINUTES_LOWERCASED,
params: {
X:
summary?.estimatedRouteDuration < 60
? '< 1'
: Math.round(summary?.estimatedRouteDuration / 60),
},
})
: null
}
/>
),
},
];
].filter(isTruthy);
const isFormValid = !isDisabled && !isEditingSlippage;
@@ -9,9 +9,9 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
import { AlertType } from '@/constants/alerts';
import { ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { NotificationStatus, TransferNotificationTypes } from '@/constants/notifications';
import { NumberSign } from '@/constants/numbers';
import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
import { TransferNotificationTypes } from '@/constants/notifications';
import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
import {
useAccounts,
@@ -67,7 +67,8 @@ export const WithdrawForm = () => {
resources,
errors: routeErrors,
errorMessage: routeErrorMessage,
isCctp
isCctp,
summary,
} = useSelector(getTransferInputs, shallowEqual) || {};
// User input
@@ -75,7 +76,6 @@ export const WithdrawForm = () => {
const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage
const debouncedAmount = useDebounce<string>(withdrawAmount, 500);
const isValidAddress = toAddress && isAddress(toAddress);
const toToken = useMemo(
@@ -168,12 +168,18 @@ export const WithdrawForm = () => {
})
);
} else {
const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data, isCctp);
const txHash = await sendSquidWithdraw(
debouncedAmountBN.toNumber(),
requestPayload.data,
isCctp
);
if (txHash) {
addTransferNotification({
txHash: txHash,
type: TransferNotificationTypes.Withdrawal,
fromChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
fromChainId: !isCctp
? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
: getNobleChainId(),
toChainId: chainIdStr || undefined,
toAmount: debouncedAmountBN.toNumber(),
triggeredAt: Date.now(),
@@ -283,10 +289,7 @@ export const WithdrawForm = () => {
const errorMessage = useMemo(() => {
if (error) {
return stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: { ERROR_MESSAGE: error },
});
return error;
}
if (routeErrors) {
@@ -317,6 +320,21 @@ export const WithdrawForm = () => {
return stringGetter({ key: STRING_KEYS.WITHDRAW_MORE_THAN_FREE });
}
if (isCctp) {
if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
return stringGetter({
key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
params: {
MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
},
});
}
}
if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
}
return undefined;
}, [
error,
@@ -329,6 +347,7 @@ export const WithdrawForm = () => {
toAddress,
sanctionedAddresses,
stringGetter,
summary,
]);
const isDisabled =
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { shallowEqual, useSelector } from 'react-redux';
import styled, { type AnyStyledComponent } from 'styled-components';
import { formatUnits } from 'viem';
@@ -6,14 +6,11 @@ import { formatUnits } from 'viem';
import { TransferInputTokenResource } from '@/constants/abacus';
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { NumberSign } from '@/constants/numbers';
import { formatSeconds } from '@/lib/timeUtils';
import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
import { layoutMixins } from '@/styles/layoutMixins';
import { useStringGetter } from '@/hooks';
import { useAccountBalance } from '@/hooks/useAccountBalance';
import { useStringGetter, useTokenConfigs } from '@/hooks';
import { Button } from '@/components/Button';
@@ -58,13 +55,9 @@ export const WithdrawButtonAndReceipt = ({
const stringGetter = useStringGetter();
const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
const toAmount =
summary?.toAmount &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
const { usdcLabel } = useTokenConfigs();
const feeSubitems: DetailsItem[] = [];
@@ -89,9 +82,29 @@ export const WithdrawButtonAndReceipt = ({
const showSubitemsToggle = showFeeBreakdown
? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
: stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
const { toAmount, toAmountMin } = useMemo(() => {
if (isCctp) {
return {
toAmount: summary?.toAmount,
toAmountMin: summary?.toAmountMin,
};
} else {
return {
toAmount:
summary?.toAmount &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
toAmountMin:
summary?.toAmountMin &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
};
}
}, [isCctp, summary, withdrawToken]);
const submitButtonReceipt = [
{
key: 'total-fees',
@@ -99,43 +112,12 @@ export const WithdrawButtonAndReceipt = ({
value: <Output type={OutputType.Fiat} value={totalFees} />,
subitems: feeSubitems,
},
{
key: 'wallet',
label: (
<span>
{stringGetter({ key: STRING_KEYS.AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: (
<Styled.DiffOutput
type={OutputType.Asset}
value={'0'}
newValue={toAmount}
sign={NumberSign.Positive}
withDiff={Boolean(toAmount)}
/>
),
},
{
key: 'leverage',
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
value: (
<Styled.DiffOutput
type={OutputType.Multiple}
value={leverage?.current}
newValue={leverage?.postOrder}
sign={NumberSign.Negative}
withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
/>
),
},
{
key: 'exchange-rate',
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
value: withdrawToken && typeof summary?.exchangeRate === 'number' && (
<Styled.ExchangeRate>
<Output type={OutputType.Asset} value={1} fractionDigits={0} tag="USDC" />
<Output type={OutputType.Asset} value={1} fractionDigits={0} tag={usdcLabel} />
=
<Output
type={OutputType.Asset}
@@ -146,19 +128,7 @@ export const WithdrawButtonAndReceipt = ({
),
},
{
key: 'slippage',
label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
value: (
<SlippageEditor
disabled
slippage={slippage}
setIsEditing={setIsEditingSlipapge}
setSlippage={setSlippage}
/>
),
},
{
key: 'estimatedRouteDuration',
key: 'estimated-route-duration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && (
<Output
@@ -175,6 +145,56 @@ export const WithdrawButtonAndReceipt = ({
/>
),
},
{
key: 'expected-amount-received',
label: (
<span>
{stringGetter({ key: STRING_KEYS.EXPECTED_AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
subitems: [
{
key: 'minimum-amount-received',
label: (
<span>
{stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: (
<Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
),
tooltip: 'minimum-amount-received',
},
],
},
{
key: 'slippage',
label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
value: (
<SlippageEditor
disabled
slippage={slippage}
setIsEditing={setIsEditingSlipapge}
setSlippage={setSlippage}
/>
),
},
{
key: 'leverage',
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
value: (
<Styled.DiffOutput
type={OutputType.Multiple}
value={leverage?.current}
newValue={leverage?.postOrder}
sign={NumberSign.Negative}
withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
/>
),
},
];
const isFormValid = !isDisabled && !isEditingSlippage;
+3 -2
View File
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { STRING_KEYS } from '@/constants/localization';
import { MarketFilters, type MarketData } from '@/constants/markets';
import { LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
import { AppRoute } from '@/constants/routes';
import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -128,7 +128,8 @@ export const MarketsTable = ({ className }: { className?: string }) => {
label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
renderCell: (row) => (
<Styled.Output
type={OutputType.SmallPercent}
type={OutputType.Percent}
fractionDigits={FUNDING_DECIMALS}
value={row.nextFundingRate}
isPositive={MustBigNumber(row.nextFundingRate).gt(0)}
isNegative={MustBigNumber(row.nextFundingRate).isNegative()}
+1
View File
@@ -366,6 +366,7 @@ Styled.InlineRow = styled.div`
Styled.AssetIcon = styled(AssetIcon)`
${layoutMixins.inlineRow}
min-width: unset;
font-size: 2.25rem;
`;