Compare commits

...
Author SHA1 Message Date
John Huang d40465e9ca TRCL-3010 Change test net chain ID and token denom 2023-10-16 13:37:11 -07:00
aleka 348e82293e show exchange offline dialog for testnet reset (#71) 2023-10-16 13:08:54 -04:00
Jared Vu 48a48b4d70 Screen (#56)
* useDydxClient: Add screen endpoint

* Screen api in onboarding flow

* PnlChart rounding

* UnauthorizedDialog

* Add RateLimitDialog

* Update dialog open logic

* nits

* Screen before Transfer

* Validate network, remove input autofill color

* Use screenAddresses from dydxClient

* Check recipientAddresses

* lock-file

* Change Wallet Restricted Dialog to v4-blocked message

* nits

* Unused param

* consolidate environment validateFn

* Remove extra space, simplify WithdrawForm error msg

* Simply map logic, rearrange priority of screened messages

* WalletRestricted -> RestrictedWallet

* Update restriction modal title and add something went wrong

* Handle 429 rate limit
2023-10-16 09:36:09 -07:00
33 changed files with 595 additions and 233 deletions
+1 -1
View File
@@ -40,7 +40,7 @@
"@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^0.6.4",
"@dydxprotocol/v4-client-js": "^0.36.1",
"@dydxprotocol/v4-localization": "^0.1.28",
"@dydxprotocol/v4-localization": "^0.1.30",
"@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3",
"@radix-ui/react-collapsible": "^1.0.3",
+8 -8
View File
@@ -1,5 +1,9 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
'@0xsquid/sdk':
specifier: ^1.10.0
@@ -29,8 +33,8 @@ dependencies:
specifier: ^0.36.1
version: 0.36.1
'@dydxprotocol/v4-localization':
specifier: ^0.1.28
version: 0.1.28
specifier: ^0.1.30
version: 0.1.30
'@ethersproject/providers':
specifier: ^5.7.2
version: 5.7.2
@@ -1006,8 +1010,8 @@ packages:
- utf-8-validate
dev: false
/@dydxprotocol/v4-localization@0.1.28:
resolution: {integrity: sha512-g6LwjX7EIRm9HISfSX0H6yhktBCZby5opP/yI2aIUvn2OYyB25WcjLEuEvzW5Bh9XXiLijgLf3Tk91wPKWuFbA==}
/@dydxprotocol/v4-localization@0.1.30:
resolution: {integrity: sha512-xTlQuQmPz7wfGkjd07giYMAxRrolDbJE3DryJSIMB6R1MBq1wLzAcwp/iR/nELRwilRX9c44Tap0gGt+oAajiQ==}
dev: false
/@dydxprotocol/v4-proto@0.2.1:
@@ -14095,7 +14099,3 @@ packages:
/zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
dev: true
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
+19 -19
View File
@@ -41,7 +41,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -102,7 +102,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -162,7 +162,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -222,7 +222,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -282,7 +282,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -346,7 +346,7 @@
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -403,14 +403,14 @@
"dydxprotocol-testnet": {
"name": "v4 Public Testnet",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -469,14 +469,14 @@
"dydxprotocol-testnet-dydx": {
"name": "v4 Public Testnet/dYdX",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -534,14 +534,14 @@
"dydxprotocol-testnet-dsrv": {
"name": "v4 Public Testnet/DSRV",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -599,14 +599,14 @@
"dydxprotocol-testnet-nodefleet": {
"name": "v4 Public Testnet/nodefleet",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -664,14 +664,14 @@
"dydxprotocol-testnet-kingnodes": {
"name": "v4 Public Testnet/KingNodes",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -729,14 +729,14 @@
"dydxprotocol-testnet-liquify": {
"name": "v4 Public Testnet/Liquify",
"ethereumChainId": "5",
"dydxChainId": "dydx-testnet-3",
"dydxChainId": "dydx-testnet-4",
"chainName": "dYdX Chain",
"chainLogo": "dydx-chain.png",
"isMainNet": false,
"tokens": {
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
@@ -802,7 +802,7 @@
"comment": "Change according to mainnet release",
"chain": {
"name": "DYDX",
"denom": "dv4tnt",
"denom": "adv4tnt",
"image": "/currencies/dydx.png"
},
"usdc": {
+4
View File
@@ -14,6 +14,7 @@ import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
import { LocaleProvider } from '@/hooks/useLocaleSeparators';
import { NotificationsProvider } from '@/hooks/useNotifications';
import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
import { RestrictionProvider } from '@/hooks/useRestrictions';
import { SubaccountProvider } from '@/hooks/useSubaccount';
import { SquidProvider } from '@/hooks/useSquid';
@@ -66,6 +67,7 @@ const Content = () => {
<Route path=":market" element={<TradePage />} />
<Route path={AppRoute.Trade} element={<TradePage />} />
</Route>
<Route path={AppRoute.Markets} element={<MarketsPage />} />
<Route path={AppRoute.Rewards} element={<RewardsPage />} />
{isTablet && (
@@ -79,6 +81,7 @@ const Content = () => {
<Route element={<GuardedMobileRoute />}>
<Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
</Route>
<Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
</Routes>
</Suspense>
@@ -109,6 +112,7 @@ const providers = [
wrapProvider(GrazProvider),
wrapProvider(WagmiConfig, { config }),
wrapProvider(LocaleProvider),
wrapProvider(RestrictionProvider),
wrapProvider(DydxProvider),
wrapProvider(AccountsProvider),
wrapProvider(SubaccountProvider),
+10
View File
@@ -207,6 +207,16 @@ const InputStyle = css`
color: var(--color-text-0);
opacity: 1;
}
// Input autofill Styles
&:-webkit-autofill,
&:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
&[data-autocompleted] {
background-color: var(--input-backgroundColor) !important;
}
`;
Styled.NumericFormat = styled(NumericFormat)`
+11
View File
@@ -78,8 +78,13 @@ export const Changes = Abacus.exchange.dydx.abacus.state.changes.Changes;
export type PerpetualStateChanges = Abacus.exchange.dydx.abacus.state.changes.StateChanges;
export const AsyncAbacusStateManager =
Abacus.exchange.dydx.abacus.state.manager.AsyncAbacusStateManager;
// ------ Parsing Errors ------ //
export type ParsingError = Abacus.exchange.dydx.abacus.responses.ParsingError;
export type ParsingErrors = kollections.List<ParsingError>;
export const ParsingErrorType = Abacus.exchange.dydx.abacus.responses.ParsingErrorType;
const parsingErrorTypes = [...ParsingErrorType.values()] as const;
export type ParsingErrorTypes = (typeof parsingErrorTypes)[number];
// ------ Perpetuals/Markets ------ //
export type PerpetualState = Abacus.exchange.dydx.abacus.output.PerpetualState;
@@ -199,6 +204,12 @@ export type RiskLevels = (typeof riskLevels)[number];
// ------ Notifications ------ //
export type AbacusNotification = Abacus.exchange.dydx.abacus.output.Notification;
// ------ Restrictions ------ //
export type UsageRestriction = Abacus.exchange.dydx.abacus.output.UsageRestriction;
export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction;
const restrictionTypes = [...RestrictionType.values()] as const;
export type RestrictionTypes = (typeof restrictionTypes)[number];
// ------ Enum Conversions ------ //
type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
? A
+3
View File
@@ -10,7 +10,10 @@ export enum DialogTypes {
MobileSignIn = 'MobileSignIn',
Onboarding = 'Onboarding',
OrderDetails = 'OrderDetails',
RateLimit = 'RateLimit',
Receive = 'Receive',
RestrictedGeo = 'RestrictedGeo',
RestrictedWallet = 'RestrictedWallet',
Trade = 'Trade',
Transfer = 'Transfer',
Withdraw = 'Withdraw',
+2
View File
@@ -16,6 +16,7 @@ import { useLocalStorage } from './useLocalStorage';
import { useNow } from './useNow';
import { useOnClickOutside } from './useOnClickOutside';
import { usePageTitlePriceUpdates } from './usePageTitlePriceUpdates';
import { useRestrictions } from './useRestrictions';
import { useShouldShowFooter } from './useShouldShowFooter';
import { useSelectedNetwork } from './useSelectedNetwork';
import { useStringGetter } from './useStringGetter';
@@ -40,6 +41,7 @@ export {
useNow,
useOnClickOutside,
usePageTitlePriceUpdates,
useRestrictions,
useShouldShowFooter,
useSelectedNetwork,
useStringGetter,
+23 -5
View File
@@ -5,18 +5,20 @@ import { AES, enc } from 'crypto-js';
import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-client-js';
import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
import { DialogTypes } from '@/constants/dialogs';
import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
import { setOnboardingState, setOnboardingGuard } from '@/state/account';
import { forceOpenDialog } from '@/state/dialogs';
import abacusStateManager from '@/lib/abacus';
import { log } from '@/lib/telemetry';
import { useLocalStorage } from './useLocalStorage';
import { useWalletConnection } from './useWalletConnection';
import { useDydxClient } from './useDydxClient';
import { useLocalStorage } from './useLocalStorage';
import { useRestrictions } from './useRestrictions';
import { useWalletConnection } from './useWalletConnection';
const AccountsContext = createContext<ReturnType<typeof useAccountsContext> | undefined>(undefined);
@@ -57,7 +59,9 @@ const useAccountsContext = () => {
forgetEvmSignature(previousEvmAddress);
}
if (evmAddress) abacusStateManager.setTransfersSourceAddress(evmAddress);
if (evmAddress) {
abacusStateManager.setTransfersSourceAddress(evmAddress);
}
setPreviousEvmAddress(evmAddress);
}, [evmAddress]);
@@ -217,7 +221,6 @@ const useAccountsContext = () => {
}, [evmAddress, evmDerivedAddresses, signerWagmi, connectedDydxAddress, signerGraz]);
// abacus
// TODO: useAbacus({ dydxAddress })
useEffect(() => {
if (dydxAddress) abacusStateManager.setAccount(localDydxWallet);
else abacusStateManager.attemptDisconnectAccount();
@@ -258,6 +261,21 @@ const useAccountsContext = () => {
);
}, [dydxSubaccounts]);
// Restrictions
const { isBadActor, sanctionedAddresses } = useRestrictions();
useEffect(() => {
if (
dydxAddress &&
(isBadActor ||
sanctionedAddresses.has(dydxAddress) ||
(evmAddress && sanctionedAddresses.has(evmAddress)))
) {
dispatch(forceOpenDialog({ type: DialogTypes.RestrictedWallet }));
disconnect();
}
}, [isBadActor, evmAddress, dydxAddress, sanctionedAddresses]);
// Disconnect wallet / accounts
const disconnectLocalDydxWallet = () => {
setLocalDydxWallet(undefined);
+25 -1
View File
@@ -17,8 +17,11 @@ import type { NetworkConfig, ConnectNetworkEvent } from '@/constants/abacus';
import { type Candle, RESOLUTION_MAP } from '@/constants/candles';
import { getSelectedNetwork } from '@/state/appSelectors';
import { log } from '@/lib/telemetry';
import { useRestrictions } from './useRestrictions';
type DydxContextType = ReturnType<typeof useDydxClientContext>;
const DydxContext = createContext<DydxContextType>({} as DydxContextType);
DydxContext.displayName = 'dYdXClient';
@@ -178,7 +181,27 @@ const useDydxClientContext = () => {
[requestCandles]
);
// ------ Subacount Methods ------ //
const { updateSanctionedAddresses } = useRestrictions();
const screenAddresses = useCallback(
async ({ addresses }: { addresses: string[] }) => {
if (compositeClient) {
const promises = addresses.map((address) =>
compositeClient.indexerClient.utility.screen(address)
);
const results = await Promise.all(promises);
const screenedAddresses = Object.fromEntries(
addresses.map((address, index) => [address, results[index]?.restricted])
);
updateSanctionedAddresses(screenedAddresses);
return screenedAddresses;
}
},
[compositeClient]
);
return {
// Client initialization
@@ -192,5 +215,6 @@ const useDydxClientContext = () => {
// Public Methods
getCandlesForDatafeed,
screenAddresses,
};
};
+2
View File
@@ -10,6 +10,7 @@ import { useLocalStorage } from '@/hooks';
import { initializeLocalization } from '@/state/app';
import abacusStateManager from '@/lib/abacus';
import { validateAgainstAvailableEnvironments } from '@/lib/network';
export const useInitializePage = () => {
const dispatch = useDispatch();
@@ -18,6 +19,7 @@ export const useInitializePage = () => {
const [localStorageNetwork] = useLocalStorage<DydxNetwork>({
key: LocalStorageKey.SelectedNetwork,
defaultValue: DEFAULT_APP_ENVIRONMENT,
validateFn: validateAgainstAvailableEnvironments,
});
useEffect(() => {
+53
View File
@@ -0,0 +1,53 @@
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { RestrictionType } from '@/constants/abacus';
import { DialogTypes } from '@/constants/dialogs';
import { getRestrictionType } from '@/state/accountSelectors';
import { forceOpenDialog } from '@/state/dialogs';
import { isTruthy } from '@/lib/isTruthy';
const useRestrictionContext = () => {
const dispatch = useDispatch();
const restrictionType = useSelector(getRestrictionType, shallowEqual);
const [sanctionedAddresses, setSanctionedAddresses] = useState<string[]>([]);
useEffect(() => {
if (restrictionType === RestrictionType.GEO_RESTRICTED) {
dispatch(
forceOpenDialog({ type: DialogTypes.RestrictedGeo, dialogProps: { preventClose: true } })
);
}
}, [restrictionType, dispatch]);
const updateSanctionedAddresses = useCallback(
(screenedAddresses: { [address: string]: boolean }) => {
const toAdd = Object.entries(screenedAddresses)
.filter(([, isSanctioned]) => isSanctioned)
.map(([address]) => address);
if (toAdd.length) {
setSanctionedAddresses([...sanctionedAddresses, ...toAdd]);
}
},
[sanctionedAddresses]
);
return {
isBadActor: restrictionType === RestrictionType.USER_RESTRICTED,
isGeoRestricted: restrictionType === RestrictionType.GEO_RESTRICTED,
updateSanctionedAddresses,
sanctionedAddresses: useMemo(() => new Set(sanctionedAddresses), [sanctionedAddresses]),
};
};
type RestrictionContextType = ReturnType<typeof useRestrictionContext>;
const RestrictionContext = createContext<RestrictionContextType>({} as RestrictionContextType);
RestrictionContext.displayName = 'Restriction';
export const RestrictionProvider = ({ ...props }) => (
<RestrictionContext.Provider value={useRestrictionContext()} {...props} />
);
export const useRestrictions = () => useContext(RestrictionContext);
+18 -2
View File
@@ -1,13 +1,17 @@
import { useCallback } from 'react';
import { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { DialogTypes } from '@/constants/dialogs';
import { LocalStorageKey } from '@/constants/localStorage';
import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { useAccounts, useLocalStorage } from '@/hooks';
import { setSelectedNetwork } from '@/state/app';
import { getSelectedNetwork } from '@/state/appSelectors';
import { openDialog } from '@/state/dialogs';
import { validateAgainstAvailableEnvironments } from '@/lib/network';
export const useSelectedNetwork = (): {
switchNetwork: (network: DydxNetwork) => void;
@@ -20,8 +24,20 @@ export const useSelectedNetwork = (): {
const [, setLocalStorageNetwork] = useLocalStorage<DydxNetwork>({
key: LocalStorageKey.SelectedNetwork,
defaultValue: DEFAULT_APP_ENVIRONMENT,
validateFn: validateAgainstAvailableEnvironments,
});
useEffect(() => {
if (
import.meta.env.MODE === 'production' &&
ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId === 'dydx-testnet-3'
) {
dispatch(
openDialog({ type: DialogTypes.ExchangeOffline, dialogProps: { preventClose: true } })
);
}
}, [selectedNetwork]);
const switchNetwork = useCallback(
(network: DydxNetwork) => {
disconnect();
+1 -1
View File
@@ -36,7 +36,6 @@ import { log } from '@/lib/telemetry';
import { useAccounts } from './useAccounts';
import { useDydxClient } from './useDydxClient';
type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
SubaccountContext.displayName = 'Subaccount';
@@ -275,6 +274,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
await getFaucetFunds({ dydxAddress, subaccountNumber });
} catch (error) {
log('useSubaccount/getFaucetFunds', error);
throw error;
}
}, [dydxAddress, getFaucetFunds, subaccountNumber]);
+6
View File
@@ -15,9 +15,12 @@ import { ExternalNavKeplrDialog } from '@/views/dialogs/ExternalNavKeplrDialog';
import { MnemonicExportDialog } from '@/views/dialogs/MnemonicExportDialog';
import { MobileSignInDialog } from '@/views/dialogs/MobileSignInDialog';
import { OnboardingDialog } from '@/views/dialogs/OnboardingDialog';
import { RateLimitDialog } from '@/views/dialogs/RateLimitDialog';
import { ReceiveDialog } from '@/views/dialogs/ReceiveDialog';
import { RestrictedGeoDialog } from '@/views/dialogs/RestrictedGeoDialog';
import { TradeDialog } from '@/views/dialogs/TradeDialog';
import { TransferDialog } from '@/views/dialogs/TransferDialog';
import { RestrictedWalletDialog } from '@/views/dialogs/RestrictedWalletDialog';
import { WithdrawDialog } from '@/views/dialogs/WithdrawDialog';
import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDialog';
@@ -53,7 +56,10 @@ export const DialogManager = () => {
[DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
[DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
[DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,
[DialogTypes.RateLimit]: <RateLimitDialog {...modalProps} />,
[DialogTypes.Receive]: <ReceiveDialog {...modalProps} />,
[DialogTypes.RestrictedGeo]: <RestrictedGeoDialog {...modalProps} />,
[DialogTypes.RestrictedWallet]: <RestrictedWalletDialog {...modalProps} />,
[DialogTypes.Trade]: <TradeDialog {...modalProps} />,
[DialogTypes.Transfer]: <TransferDialog {...modalProps} />,
[DialogTypes.Withdraw]: <WithdrawDialog {...modalProps} />,
+5
View File
@@ -47,6 +47,11 @@ class AbacusRest implements AbacusRestProtocol {
body,
};
if (!url) {
callback(null, 0);
return;
}
fetch(url, options)
.then(async (response) => {
const data = await response.text();
+5
View File
@@ -25,6 +25,7 @@ import {
setFundingPayments,
setHistoricalPnl,
setLatestOrder,
setRestrictionType,
setSubaccount,
setTransfers,
setWallet,
@@ -121,6 +122,10 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
);
}
if (changes.has(Changes.restriction)) {
dispatch(setRestrictionType(updatedState.restriction));
}
subaccountNumbers?.forEach((subaccountId: number) => {
if (subaccountId !== null) {
if (changes.has(Changes.subaccount)) {
+4
View File
@@ -0,0 +1,4 @@
import { type DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
export const validateAgainstAvailableEnvironments = (value: DydxNetwork) =>
Object.keys(ENVIRONMENT_CONFIG_MAP).includes(value);
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
import styled, { AnyStyledComponent, css } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux';
import { TooltipContextType } from '@visx/xychart';
import BigNumber from 'bignumber.js';
import type { Nullable } from '@/constants/abacus';
import { OnboardingState } from '@/constants/account';
@@ -25,7 +26,6 @@ import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton
import { isTruthy } from '@/lib/isTruthy';
import { MustBigNumber } from '@/lib/numbers';
export const usePortfolioValues = ({
equity,
visibleData,
@@ -140,7 +140,12 @@ export const AccountDetailsAndHistory = () => {
<Styled.AccountValue>
<Styled.WithLabel label={accountValueLabel}>
<Styled.AccountEquity>
<Output type={OutputType.Fiat} value={accountEquity} withBaseFont />
<Output
type={OutputType.Fiat}
value={accountEquity}
roundingMode={BigNumber.ROUND_FLOOR}
withBaseFont
/>
</Styled.AccountEquity>
<Styled.PnlDiff isPositive={MustBigNumber(pnlDiff).gte(0)}>
{pnlDiff && <TriangleIndicator value={MustBigNumber(pnlDiff)} />}
-4
View File
@@ -3,7 +3,6 @@ import { configureStore } from '@reduxjs/toolkit';
import abacusStateManager from '@/lib/abacus';
import appMiddleware from './appMiddleware';
import localizationMiddleware from './localizationMiddleware';
import routerMiddleware from './routerMiddleware';
import { accountSlice } from './account';
import { appSlice } from './app';
@@ -13,7 +12,6 @@ import { dialogsSlice } from './dialogs';
import { inputsSlice } from './inputs';
import { layoutSlice } from './layout';
import { localizationSlice } from './localization';
import { navigationSlice } from './navigation';
import { perpetualsSlice } from './perpetuals';
export const commandMenuSlices = [layoutSlice, localizationSlice];
@@ -28,7 +26,6 @@ export const store = configureStore({
inputs: inputsSlice.reducer,
layout: layoutSlice.reducer,
localization: localizationSlice.reducer,
navigation: navigationSlice.reducer,
perpetuals: perpetualsSlice.reducer,
},
@@ -38,7 +35,6 @@ export const store = configureStore({
}),
appMiddleware,
localizationMiddleware,
routerMiddleware,
],
devTools: process.env.NODE_ENV !== 'production',
+40 -18
View File
@@ -12,6 +12,7 @@ import type {
SubaccountTransfers,
HistoricalPnlPeriods,
SubAccountHistoricalPNLs,
UsageRestriction,
} from '@/constants/abacus';
import { OnboardingGuard, OnboardingState } from '@/constants/account';
@@ -21,34 +22,46 @@ import { WalletType } from '@/constants/wallets';
import { getLocalStorage } from '@/lib/localStorage';
export type AccountState = {
balances?: Record<string, AccountBalance>;
stakingBalances?: Record<string, AccountBalance>;
wallet?: Nullable<Wallet>;
walletType?: WalletType;
subaccount?: Nullable<Subaccount>;
fills?: SubaccountFills;
fundingPayments?: SubaccountFundingPayments;
transfers?: SubaccountTransfers;
historicalPnl?: SubAccountHistoricalPNLs;
onboardingGuards: Record<OnboardingGuard, boolean | undefined>;
onboardingState: OnboardingState;
clearedOrderIds?: string[];
hasUnseenFillUpdates: boolean;
hasUnseenOrderUpdates: boolean;
historicalPnl?: SubAccountHistoricalPNLs;
latestOrder?: Nullable<SubaccountOrder>;
onboardingGuards: Record<OnboardingGuard, boolean | undefined>;
onboardingState: OnboardingState;
subaccount?: Nullable<Subaccount>;
uncommittedOrderClientIds: number[];
wallet?: Nullable<Wallet>;
walletType?: WalletType;
historicalPnlPeriod?: HistoricalPnlPeriods;
balances?: Record<string, AccountBalance>;
stakingBalances?: Record<string, AccountBalance>;
uncommittedOrderClientIds: number[];
restriction?: Nullable<UsageRestriction>;
};
const initialState: AccountState = {
// Wallet
balances: undefined,
wallet: undefined,
walletType: getLocalStorage<WalletType>({
key: LocalStorageKey.OnboardingSelectedWalletType,
}),
// Subaccount
subaccount: undefined,
fills: undefined,
fundingPayments: undefined,
transfers: undefined,
clearedOrderIds: undefined,
hasUnseenFillUpdates: false,
hasUnseenOrderUpdates: false,
historicalPnl: undefined,
latestOrder: undefined,
// Onboarding
onboardingGuards: {
[OnboardingGuard.hasAcknowledgedTerms]: Boolean(
getLocalStorage<boolean>({
@@ -59,12 +72,17 @@ const initialState: AccountState = {
[OnboardingGuard.hasPreviousTransactions]: undefined,
},
onboardingState: OnboardingState.Disconnected,
subaccount: undefined,
// UI
clearedOrderIds: undefined,
hasUnseenFillUpdates: false,
hasUnseenOrderUpdates: false,
latestOrder: undefined,
uncommittedOrderClientIds: [],
wallet: undefined,
walletType: getLocalStorage<WalletType>({
key: LocalStorageKey.OnboardingSelectedWalletType,
}),
historicalPnlPeriod: undefined,
// Restriction
restriction: undefined,
};
export const accountSlice = createSlice({
@@ -124,6 +142,9 @@ export const accountSlice = createSlice({
state.historicalPnl = action.payload;
}
},
setRestrictionType: (state, action: PayloadAction<Nullable<UsageRestriction>>) => {
state.restriction = action.payload;
},
setSubaccount: (state, action: PayloadAction<Nullable<Subaccount>>) => {
const existingOrderIds = state.subaccount?.orders
? state.subaccount.orders.toArray().map((order) => order.id)
@@ -178,6 +199,7 @@ export const {
setOnboardingGuard,
setOnboardingState,
setHistoricalPnl,
setRestrictionType,
setSubaccount,
setWallet,
viewedFills,
+10
View File
@@ -342,3 +342,13 @@ export const getBalances = (state: RootState) => state.account?.balances;
* @returns user wallet staking balances
* */
export const getStakingBalances = (state: RootState) => state.account?.stakingBalances;
/**
* @returns UsageRestriction of the current session
*/
export const getUsageRestriction = (state: RootState) => state.account.restriction;
/**
* @returns RestrictionType from the current session
*/
export const getRestrictionType = (state: RootState) => state.account.restriction?.restriction;
+2 -1
View File
@@ -2,10 +2,10 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AbacusApiState } from '@/constants/abacus';
import { LocalStorageKey } from '@/constants/localStorage';
import { DEFAULT_APP_ENVIRONMENT, type DydxNetwork } from '@/constants/networks';
import { getLocalStorage } from '@/lib/localStorage';
import { validateAgainstAvailableEnvironments } from '@/lib/network';
export interface AppState {
apiState: AbacusApiState | undefined;
@@ -19,6 +19,7 @@ const initialState: AppState = {
selectedNetwork: getLocalStorage({
key: LocalStorageKey.SelectedNetwork,
defaultValue: DEFAULT_APP_ENVIRONMENT,
validateFn: validateAgainstAvailableEnvironments,
}),
};
+22 -25
View File
@@ -23,39 +23,36 @@ export const dialogsSlice = createSlice({
name: 'Dialogs',
initialState,
reducers: {
addDialogToQueue: (state: DialogsState, action: PayloadAction<DialogInfo<DialogTypes>>) => {
const dialogQueue = state.dialogQueue;
dialogQueue.push(action.payload);
return {
...state,
dialogQueue,
};
openDialog: (state: DialogsState, action: PayloadAction<DialogInfo<DialogTypes>>) => {
if (state.activeDialog) {
state.dialogQueue.push(action.payload);
} else {
state.activeDialog = action.payload;
}
},
closeDialog: (state: DialogsState) => {
state.activeDialog = state.dialogQueue.shift();
},
forceOpenDialog: (state: DialogsState, action: PayloadAction<DialogInfo<DialogTypes>>) => {
if (state.activeDialog) {
state.dialogQueue.unshift(state.activeDialog);
}
state.activeDialog = action.payload;
},
closeDialogInTradeBox: (state: DialogsState) => {
state.activeTradeBoxDialog = undefined;
},
closeDialog: (state: DialogsState) => ({
...state,
activeDialog: state.dialogQueue.shift(),
}),
openDialog: (state: DialogsState, action: PayloadAction<DialogInfo<DialogTypes>>) => ({
...state,
activeDialog: action.payload,
}),
closeDialogInTradeBox: (state: DialogsState) => ({
...state,
activeTradeBoxDialog: undefined,
}),
openDialogInTradeBox: (
state: DialogsState,
action: PayloadAction<DialogInfo<TradeBoxDialogTypes>>
) => ({
...state,
activeTradeBoxDialog: action.payload,
}),
) => {
state.activeTradeBoxDialog = action.payload;
},
},
});
export const {
addDialogToQueue,
forceOpenDialog,
closeDialog,
closeDialogInTradeBox,
openDialog,
-42
View File
@@ -1,42 +0,0 @@
import { createSlice } from '@reduxjs/toolkit';
export interface NavigationState {
tradeLocation: {
hash: string;
key: string;
pathname: string;
search: string;
state: any;
};
}
export const CLEAR_TRADE_LOCATION = {
hash: '',
key: '',
pathname: '',
search: '',
state: null,
};
const initialState: NavigationState = {
tradeLocation: {
hash: '',
key: '',
pathname: '',
search: '',
state: null,
},
};
export const navigationSlice = createSlice({
name: 'Navigation',
initialState,
reducers: {
setTradeLocation: (state, { payload }) => ({
...state,
tradeLocation: payload,
}),
},
});
export const { setTradeLocation } = navigationSlice.actions;
-33
View File
@@ -1,33 +0,0 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { LocalStorageKey } from '@/constants/localStorage';
import { closeDialogInTradeBox } from '@/state/dialogs';
import { setTradeLocation } from '@/state/navigation';
import abacusStateManager from '@/lib/abacus';
import { setLocalStorage } from '@/lib/localStorage';
import { getMarketIdFromLocation } from '@/lib/tradeData';
export default (store: any) => (next: any) => async (action: PayloadAction<any>) => {
next(action);
const { type, payload } = action;
switch (type) {
case setTradeLocation.type: {
const marketId = getMarketIdFromLocation(payload);
if (marketId) {
abacusStateManager.setMarket(marketId);
store.dispatch(closeDialogInTradeBox());
setLocalStorage({ key: LocalStorageKey.LastViewedMarket, value: marketId });
}
break;
}
default: {
break;
}
}
};
+5 -1
View File
@@ -25,7 +25,11 @@ import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
// import { TooltipContent } from '@/components/visx/TooltipContent';
import { getSubaccount, getSubaccountHistoricalPnl, getSubaccountId } from '@/state/accountSelectors';
import {
getSubaccount,
getSubaccountHistoricalPnl,
getSubaccountId,
} from '@/state/accountSelectors';
import abacusStateManager from '@/lib/abacus';
import { formatRelativeTime } from '@/lib/dateTime';
+22 -2
View File
@@ -5,6 +5,9 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { AbacusApiStatus } from '@/constants/abacus';
import { DialogTypes } from '@/constants/dialogs';
import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { UNICODE } from '@/constants/unicode';
import { useApiState, useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
@@ -29,8 +32,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
const selectedNetwork = useSelector(getSelectedNetwork);
const activeDialog = useSelector(getActiveDialog, shallowEqual);
const showOfflineMessage =
import.meta.env.MODE === 'production' &&
ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId === 'dydx-testnet-3';
useEffect(() => {
if (activeDialog?.type === DialogTypes.ExchangeOffline && status === AbacusApiStatus.NORMAL) {
if (
activeDialog?.type === DialogTypes.ExchangeOffline &&
status === AbacusApiStatus.NORMAL &&
!showOfflineMessage
) {
dispatch(closeDialog());
}
}, [status, selectedNetwork]);
@@ -43,7 +54,16 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
title={stringGetter({ key: STRING_KEYS.UNAVAILABLE })}
>
<Styled.Content>
<p>{statusErrorMessage}</p>
{showOfflineMessage ? (
<>
<p>Testnet is currently offline. Please check back!</p>
<Styled.Link href="https://v4-teacher.vercel.app/testnets/schedule">
{stringGetter({ key: STRING_KEYS.LEARN_MORE })} {UNICODE.ARROW_RIGHT}
</Styled.Link>
</>
) : (
<p>{statusErrorMessage}</p>
)}
{import.meta.env.MODE !== 'production' && <NetworkSelectMenu />}
</Styled.Content>
</Dialog>
+42
View File
@@ -0,0 +1,42 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { STRING_KEYS } from '@/constants/localization';
import { useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { Dialog } from '@/components/Dialog';
import { Icon, IconName } from '@/components/Icon';
type ElementProps = {
preventClose?: boolean;
setIsOpen?: (open: boolean) => void;
};
export const RateLimitDialog = ({ preventClose, setIsOpen }: ElementProps) => {
const stringGetter = useStringGetter();
return (
<Dialog
isOpen
preventClose={preventClose}
setIsOpen={setIsOpen}
title={stringGetter({ key: STRING_KEYS.RATE_LIMIT_REACHED_ERROR_TITLE })}
slotIcon={<Styled.Icon iconName={IconName.Warning} />}
>
<Styled.Content>
{stringGetter({ key: STRING_KEYS.RATE_LIMIT_REACHED_ERROR_MESSAGE })}
</Styled.Content>
</Dialog>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Icon = styled(Icon)`
color: var(--color-warning);
`;
Styled.Content = styled.div`
${layoutMixins.column}
gap: 1rem;
`;
+42
View File
@@ -0,0 +1,42 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { STRING_KEYS } from '@/constants/localization';
import { useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { Dialog } from '@/components/Dialog';
import { Icon, IconName } from '@/components/Icon';
type ElementProps = {
preventClose?: boolean;
setIsOpen?: (open: boolean) => void;
};
export const RestrictedGeoDialog = ({ preventClose, setIsOpen }: ElementProps) => {
const stringGetter = useStringGetter();
return (
<Dialog
isOpen
preventClose={preventClose}
setIsOpen={setIsOpen}
title={stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_TITLE })}
slotIcon={<Styled.Icon iconName={IconName.Warning} />}
>
<Styled.Content>
{stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })}
</Styled.Content>
</Dialog>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Icon = styled(Icon)`
color: var(--color-warning);
`;
Styled.Content = styled.div`
${layoutMixins.column}
gap: 1rem;
`;
@@ -0,0 +1,42 @@
import styled, { AnyStyledComponent } from 'styled-components';
import { STRING_KEYS } from '@/constants/localization';
import { useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { Dialog } from '@/components/Dialog';
import { Icon, IconName } from '@/components/Icon';
type ElementProps = {
preventClose?: boolean;
setIsOpen?: (open: boolean) => void;
};
export const RestrictedWalletDialog = ({ preventClose, setIsOpen }: ElementProps) => {
const stringGetter = useStringGetter();
return (
<Dialog
isOpen
preventClose={preventClose}
setIsOpen={setIsOpen}
title={stringGetter({ key: STRING_KEYS.WALLET_RESTRICTED_ERROR_TITLE })}
slotIcon={<Styled.Icon iconName={IconName.Warning} />}
>
<Styled.Content>
{stringGetter({ key: STRING_KEYS.REGION_NOT_PERMITTED_SUBTITLE })}
</Styled.Content>
</Dialog>
);
};
const Styled: Record<string, AnyStyledComponent> = {};
Styled.Icon = styled(Icon)`
color: var(--color-warning);
`;
Styled.Content = styled.div`
${layoutMixins.column}
gap: 1rem;
`;
@@ -10,9 +10,16 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
import { AlertType } from '@/constants/alerts';
import { ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers';
import { NumberSign } from '@/constants/numbers';
import { useDebounce, useStringGetter, useSubaccount } from '@/hooks';
import {
useAccounts,
useDebounce,
useDydxClient,
useRestrictions,
useStringGetter,
useSubaccount,
} from '@/hooks';
import { useLocalNotifications } from '@/hooks/useLocalNotifications';
import { layoutMixins } from '@/styles/layoutMixins';
@@ -39,10 +46,11 @@ import { MustBigNumber } from '@/lib/numbers';
import { TokenSelectMenu } from './TokenSelectMenu';
import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
import { join } from 'path';
export const WithdrawForm = () => {
const stringGetter = useStringGetter();
const [error, setError] = useState<Error | null>(null);
const [error, setError] = useState<string>();
const [isLoading, setIsLoading] = useState(false);
const { sendSquidWithdraw } = useSubaccount();
@@ -71,9 +79,11 @@ export const WithdrawForm = () => {
const { addTransferNotification } = useLocalNotifications();
// Async Data
const debouncedAmountBN = MustBigNumber(debouncedAmount);
const withdrawAmountBN = MustBigNumber(withdrawAmount);
const freeCollateralBN = MustBigNumber(freeCollateral?.current);
const debouncedAmountBN = useMemo(() => MustBigNumber(debouncedAmount), [debouncedAmount]);
const freeCollateralBN = useMemo(
() => MustBigNumber(freeCollateral?.current),
[freeCollateral?.current]
);
useEffect(() => {
abacusStateManager.setTransferValue({
@@ -105,50 +115,85 @@ export const WithdrawForm = () => {
value: debouncedAmount,
field: TransferInputField.usdcSize,
});
setError(null);
setError(undefined);
}
} catch (error) {
setError(error);
setError(error.message);
} finally {
setIsLoading(false);
}
};
setTransferValue();
}, [debouncedAmountBN.toNumber()]);
}, [debouncedAmountBN]);
const { screenAddresses } = useDydxClient();
const { dydxAddress } = useAccounts();
const onSubmit = useCallback(
async (e: FormEvent) => {
try {
e.preventDefault();
if (!requestPayload?.data || !debouncedAmountBN.toNumber()) {
if (!requestPayload?.data || !debouncedAmountBN.toNumber() || !toAddress || !dydxAddress) {
throw new Error('Invalid request payload');
}
setIsLoading(true);
const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload?.data);
setError(undefined);
if (txHash?.hash) {
const hash = `0x${Buffer.from(txHash.hash).toString('hex')}`;
const screenResults = await screenAddresses({
addresses: [toAddress, dydxAddress],
});
addTransferNotification({
txHash: hash,
fromChainId: TESTNET_CHAIN_ID,
toChainId: chainIdStr || undefined,
toAmount: debouncedAmountBN.toNumber(),
triggeredAt: Date.now(),
});
abacusStateManager.clearTransferInputValues();
setWithdrawAmount('');
if (screenResults?.[dydxAddress]) {
setError(
stringGetter({
key: STRING_KEYS.WALLET_RESTRICTED_WITHDRAWAL_TRANSFER_ORIGINATION_ERROR_MESSAGE,
})
);
} else if (screenResults?.[toAddress]) {
setError(
stringGetter({
key: STRING_KEYS.WALLET_RESTRICTED_WITHDRAWAL_TRANSFER_DESTINATION_ERROR_MESSAGE,
})
);
} else {
const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data);
if (txHash?.hash) {
const hash = `0x${Buffer.from(txHash.hash).toString('hex')}`;
addTransferNotification({
txHash: hash,
fromChainId: TESTNET_CHAIN_ID,
toChainId: chainIdStr || undefined,
toAmount: debouncedAmountBN.toNumber(),
triggeredAt: Date.now(),
});
abacusStateManager.clearTransferInputValues();
setWithdrawAmount('');
}
}
} catch (error) {
setError(error);
if (error?.code === 429) {
setError(stringGetter({ key: STRING_KEYS.RATE_LIMIT_REACHED_ERROR_MESSAGE }));
} else {
setError(
error.message
? stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: {
ERROR_MESSAGE:
error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
},
})
: stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG })
);
}
} finally {
setIsLoading(false);
}
},
[requestPayload, debouncedAmountBN, chainIdStr]
[requestPayload, debouncedAmountBN, chainIdStr, toAddress, screenAddresses, stringGetter]
);
const onChangeAddress = useCallback((e: ChangeEvent<HTMLInputElement>) => {
@@ -179,7 +224,7 @@ export const WithdrawForm = () => {
const onClickMax = useCallback(() => {
setWithdrawAmount(freeCollateralBN.toString());
}, [freeCollateral?.current, setWithdrawAmount]);
}, [freeCollateralBN, setWithdrawAmount]);
const onSelectChain = useCallback((chain: string) => {
if (chain) {
@@ -215,7 +260,7 @@ export const WithdrawForm = () => {
value={freeCollateral?.current}
newValue={freeCollateral?.postOrder}
sign={NumberSign.Negative}
hasInvalidNewValue={withdrawAmountBN.minus(freeCollateralBN).isNegative()}
hasInvalidNewValue={MustBigNumber(withdrawAmount).minus(freeCollateralBN).isNegative()}
withDiff={
Boolean(withdrawAmount) && !debouncedAmountBN.isNaN() && !debouncedAmountBN.isZero()
}
@@ -224,18 +269,23 @@ export const WithdrawForm = () => {
},
];
const { sanctionedAddresses } = useRestrictions();
const errorMessage = useMemo(() => {
if (error) {
return error?.message
? stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: { ERROR_MESSAGE: error.message },
})
: stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG });
return stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: { ERROR_MESSAGE: error },
});
}
if (!toAddress) return stringGetter({ key: STRING_KEYS.WITHDRAW_MUST_SPECIFY_ADDRESS });
if (sanctionedAddresses.has(toAddress))
return stringGetter({
key: STRING_KEYS.TRANSFER_INVALID_DYDX_ADDRESS,
});
if (debouncedAmountBN) {
if (!chainIdStr) {
return stringGetter({ key: STRING_KEYS.WITHDRAW_MUST_SPECIFY_CHAIN });
@@ -249,7 +299,15 @@ export const WithdrawForm = () => {
}
return undefined;
}, [error, freeCollateralBN, chainIdStr, debouncedAmountBN, toToken]);
}, [
error,
freeCollateralBN,
chainIdStr,
debouncedAmountBN,
toToken,
toAddress,
sanctionedAddresses,
]);
const isDisabled =
!!errorMessage ||
@@ -257,7 +315,8 @@ export const WithdrawForm = () => {
!chainIdStr ||
!toAddress ||
debouncedAmountBN.isNaN() ||
debouncedAmountBN.isZero();
debouncedAmountBN.isZero() ||
isLoading;
return (
<Styled.Form onSubmit={onSubmit}>
+68 -34
View File
@@ -3,8 +3,6 @@ import styled, { type AnyStyledComponent } from 'styled-components';
import { type NumberFormatValues } from 'react-number-format';
import { shallowEqual, useSelector } from 'react-redux';
import type { SyntheticInputEvent } from 'react-number-format/types/types';
import { debounce } from 'lodash';
import { StdFee } from '@cosmjs/stargate';
import { validation } from '@dydxprotocol/v4-client-js';
import { TransferInputField, TransferType } from '@/constants/abacus';
@@ -12,7 +10,7 @@ import { AlertType } from '@/constants/alerts';
import { ButtonShape, ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers';
import { NumberSign } from '@/constants/numbers';
import {
DYDX_CHAIN_ASSET_COIN_DENOM,
DYDX_CHAIN_ASSET_TAGS,
@@ -22,6 +20,8 @@ import {
import {
useAccountBalance,
useAccounts,
useDydxClient,
useRestrictions,
useSelectedNetwork,
useStringGetter,
useSubaccount,
@@ -77,7 +77,7 @@ export const TransferForm = ({
const [asset, setAsset] = useState<DydxChainAsset>(selectedAsset);
// Form states
const [error, setError] = useState<Error | undefined>();
const [error, setError] = useState<string>();
const [isLoading, setIsLoading] = useState(false);
const balance = asset === DydxChainAsset.USDC ? freeCollateral?.current : nativeTokenBalance;
@@ -96,16 +96,6 @@ export const TransferForm = ({
const balanceBN = MustBigNumber(balance);
const newBalanceBN = MustBigNumber(newBalance);
const isAddressValid = useMemo(
() =>
recipientAddress &&
dydxAddress !== recipientAddress &&
validation.isValidAddress(recipientAddress),
[recipientAddress]
);
const isAmountValid = balance && amount && amountBN.gt(0) && newBalanceBN.gte(0);
useEffect(() => {
abacusStateManager.setTransferValue({
value: TransferType.transferOut.rawValue,
@@ -125,6 +115,21 @@ export const TransferForm = ({
});
}, [asset]);
const { sanctionedAddresses } = useRestrictions();
const isAddressValid = useMemo(
() =>
recipientAddress &&
dydxAddress !== recipientAddress &&
validation.isValidAddress(recipientAddress) &&
!sanctionedAddresses.has(recipientAddress),
[recipientAddress, sanctionedAddresses, dydxAddress]
);
const isAmountValid = balance && amount && amountBN.gt(0) && newBalanceBN.gte(0);
const { screenAddresses } = useDydxClient();
const onTransfer = async () => {
if (!isAmountValid || !isAddressValid || !fee) return;
setIsLoading(true);
@@ -136,20 +141,51 @@ export const TransferForm = ({
asset === DydxChainAsset.DYDX ? amountBN.minus(fee) : amountBN
).toNumber();
const txResponse = await transfer(
amountToTransfer,
recipientAddress as string,
DYDX_CHAIN_ASSET_COIN_DENOM[asset]
);
const screenResults = await screenAddresses({
addresses: [recipientAddress!, dydxAddress!],
});
if (txResponse?.code === 0) {
console.log('TransferForm > txReceipt > ', txResponse?.hash);
onDone?.();
if (screenResults?.[dydxAddress!]) {
setError(
stringGetter({
key: STRING_KEYS.WALLET_RESTRICTED_WITHDRAWAL_TRANSFER_ORIGINATION_ERROR_MESSAGE,
})
);
} else if (screenResults?.[recipientAddress!]) {
setError(
stringGetter({
key: STRING_KEYS.WALLET_RESTRICTED_WITHDRAWAL_TRANSFER_DESTINATION_ERROR_MESSAGE,
})
);
} else {
throw new Error(txResponse?.rawLog ?? 'Transaction did not commit.');
const txResponse = await transfer(
amountToTransfer,
recipientAddress as string,
DYDX_CHAIN_ASSET_COIN_DENOM[asset]
);
if (txResponse?.code === 0) {
console.log('TransferForm > txReceipt > ', txResponse?.hash);
onDone?.();
} else {
throw new Error(txResponse?.rawLog ?? 'Transaction did not commit.');
}
}
} catch (error) {
setError(error);
if (error?.code === 429) {
setError(stringGetter({ key: STRING_KEYS.RATE_LIMIT_REACHED_ERROR_MESSAGE }));
} else {
setError(
error.message
? stringGetter({
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: {
ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
},
})
: stringGetter({ key: STRING_KEYS.SOMETHING_WENT_WRONG })
);
}
log('TransferForm/onTransfer', error);
} finally {
setIsLoading(false);
@@ -231,13 +267,6 @@ export const TransferForm = ({
},
];
const addressValidationErrorMessage = stringGetter({
key:
dydxAddress === recipientAddress
? STRING_KEYS.TRANSFER_TO_YOURSELF
: STRING_KEYS.TRANSFER_INVALID_DYDX_ADDRESS,
});
const renderFormInputButton = ({
label,
isInputEmpty,
@@ -302,7 +331,12 @@ export const TransferForm = ({
{recipientAddress && !isAddressValid && (
<Styled.AddressValidationAlertMessage type={AlertType.Error}>
{addressValidationErrorMessage}
{stringGetter({
key:
dydxAddress === recipientAddress
? STRING_KEYS.TRANSFER_TO_YOURSELF
: STRING_KEYS.TRANSFER_INVALID_DYDX_ADDRESS,
})}
</Styled.AddressValidationAlertMessage>
)}
@@ -342,13 +376,13 @@ export const TransferForm = ({
</AlertMessage>
)}
{error && <AlertMessage type={AlertType.Error}>{error.message}</AlertMessage>}
{error && <AlertMessage type={AlertType.Error}>{error}</AlertMessage>}
<Styled.Footer>
<TransferButtonAndReceipt
selectedAsset={asset}
fees={fee || undefined}
isDisabled={!isAmountValid || !isAddressValid || !fee}
isDisabled={!isAmountValid || !isAddressValid || !fee || isLoading}
isLoading={isLoading || Boolean(isAmountValid && isAddressValid && !fee)}
/>
</Styled.Footer>