LaconicNetwork/dydx-v4-web
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/TRCL-2892-configs-changes' into feature/minor-configs-change

Browse Source 
# Conflicts:
#	public/configs/env.json
This commit is contained in:
John Huang 2023-10-09 14:12:34 -04:00
commit af23fecb3d
No known key found for this signature in database
GPG Key ID: 7BEF1876FF3664D9
11 changed files with 710 additions and 634 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -37,9 +37,9 @@
"@cosmjs/proto-signing": "^0.31.0",
"@cosmjs/stargate": "^0.31.0",
"@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^0.6.3",
"@dydxprotocol/v4-abacus": "^0.6.4",
"@dydxprotocol/v4-client-js": "^0.36.1",
"@dydxprotocol/v4-localization": "^0.1.23",
"@dydxprotocol/v4-localization": "^0.1.24",
"@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3",
"@radix-ui/react-collapsible": "^1.0.3",

16
pnpm-lock.yaml generated
View File

@ -27,14 +27,14 @@ dependencies:
specifier: ^0.31.0
version: 0.31.0
'@dydxprotocol/v4-abacus':
specifier: ^0.6.3
version: 0.6.3
specifier: ^0.6.4
version: 0.6.4
'@dydxprotocol/v4-client-js':
specifier: ^0.36.1
version: 0.36.1
'@dydxprotocol/v4-localization':
specifier: ^0.1.23
version: 0.1.23
specifier: ^0.1.24
version: 0.1.24
'@ethersproject/providers':
specifier: ^5.7.2
version: 5.7.2
@ -979,8 +979,8 @@ packages:
resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
dev: true
/@dydxprotocol/v4-abacus@0.6.3:
resolution: {integrity: sha512-oYMbII7o7fXjNpl2PZpG6mwKQ49e8Qky5vA8Ua9boNs7nRUx3PC6azfoPtjHKMdYY33eHoXcZBpTynhneLXCVg==}
/@dydxprotocol/v4-abacus@0.6.4:
resolution: {integrity: sha512-eH+/9Q/OnQtwzBwM1BJyXybFPdivGmFQWrxM71MFWGs6uIQGbZX775mpoa8deweSTyQ/QrRLRQ1mP2BPDgBQYg==}
dev: false
/@dydxprotocol/v4-client-js@0.36.1:
@ -1010,8 +1010,8 @@ packages:
- utf-8-validate
dev: false
/@dydxprotocol/v4-localization@0.1.23:
resolution: {integrity: sha512-TaEey7dINwxELlEyA8XsQ4GQLfJ7e1b434bafpnlG9ccW1sIW7TYTsfaSkck2egR4R736hA7k5WvVy0aI/0TFw==}
/@dydxprotocol/v4-localization@0.1.24:
resolution: {integrity: sha512-zSiu8+/6BWNWZXxe73zUp/UjuLG1Cp5UuhXKtbATqqkeZyVCs01QxbBCTs1MLfgsLh02IrfhXCPHvXnzZyReEw==}
dev: false
/@dydxprotocol/v4-proto@0.2.1:

1146
public/configs/env.json
View File

File diff suppressed because it is too large Load Diff

29
src/constants/wallets.ts
View File

@ -24,6 +24,8 @@ import {
import { isMetaMask } from '@/lib/wallet/providers';
import { DydxNetwork, ENVIRONMENT_CONFIG_MAP } from './networks';
// Wallet connection types
export enum WalletConnectionType {
@ -318,20 +320,21 @@ export type WalletConnection = {
export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";
/**
* @description typed data to sign for v4 onboarding
* @description typed data to sign for dYdX Chain onboarding
*/
export const SIGN_TYPED_DATA = {
primaryType: 'dYdX',
domain: {
name: 'dYdX V4',
},
types: {
dYdX: [{ name: 'action', type: 'string' }],
},
message: {
action: 'dYdX V4 Onboarding',
},
} as const;
export const getSignTypedData = (selectedNetwork: DydxNetwork) =>
({
primaryType: 'dYdX',
domain: {
name: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataDomainName,
},
types: {
dYdX: [{ name: 'action', type: 'string' }],
},
message: {
action: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataAction,
},
} as const);
export type PrivateInformation = ReturnType<typeof onboarding.deriveHDKeyFromEthereumSignature>;

11
src/views/TransferStatus.tsx
View File

@ -53,6 +53,15 @@ export const TransferStatusToast = ({
if (!status) return <LoadingDots size={3} />;
const statusString =
type === 'deposit'
? status?.squidTransactionStatus === 'success'
? STRING_KEYS.DEPOSIT_COMPLETE
: STRING_KEYS.DEPOSIT_STATUS
: status?.squidTransactionStatus === 'success'
? STRING_KEYS.WITHDRAW_COMPLETE
: STRING_KEYS.WITHDRAW_STATUS;
return (
<Styled.Root open={open} onOpenChange={setOpen}>
<WithReceipt
@ -67,7 +76,7 @@ export const TransferStatusToast = ({
<Styled.BridgingStatus>
<Styled.Status>
{stringGetter({
key: type === 'deposit' ? STRING_KEYS.DEPOSIT_STATUS : STRING_KEYS.WITHDRAW_STATUS,
key: statusString,
params: {
AMOUNT_USD: <Styled.InlineOutput type={OutputType.Fiat} value={toAmount} />,
ESTIMATED_DURATION: (

2
src/views/TransferStatusSteps.tsx
View File

@ -51,7 +51,7 @@ export const TransferStatusSteps = ({ status }: ElementProps) => {
label: stringGetter({
key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN,
params: {
CHAIN: status?.toChain?.chainData?.chainName,
CHAIN: type === 'deposit' ? 'dYdX' : status?.toChain?.chainData?.chainName,
},
}),
step: TransferStatusStep.ToChain,

11
src/views/dialogs/OnboardingDialog/GenerateKeys.tsx
View File

@ -10,7 +10,7 @@ import { AnalyticsEvent } from '@/constants/analytics';
import { ButtonAction } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { DydxAddress, SIGN_TYPED_DATA } from '@/constants/wallets';
import { DydxAddress, getSignTypedData } from '@/constants/wallets';
import { useAccounts, useBreakpoints, useDydxClient, useStringGetter } from '@/hooks';
import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
@ -85,10 +85,11 @@ export const GenerateKeys = ({
EvmDerivedAccountStatus.Derived,
].includes(status);
const signTypedData = getSignTypedData(selectedNetwork);
const { signTypedDataAsync } = useSignTypedData({
...SIGN_TYPED_DATA,
...signTypedData,
domain: {
...SIGN_TYPED_DATA.domain,
...signTypedData.domain,
chainId,
},
});
@ -165,8 +166,8 @@ export const GenerateKeys = ({
{[
{
status: EvmDerivedAccountStatus.Deriving,
title: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
description: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
title: stringGetter({ key: STRING_KEYS.GENERATE_DYDX_WALLET }),
description: stringGetter({ key: STRING_KEYS.VERIFY_WALLET_OWNERSHIP }),
},
status === EvmDerivedAccountStatus.EnsuringDeterminism && {
status: EvmDerivedAccountStatus.EnsuringDeterminism,

13
src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx
View File

@ -168,6 +168,19 @@ export const DepositButtonAndReceipt = ({
/>
),
},
{
key: 'estimatedRouteDuration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && (
<Output
type={OutputType.Text}
value={stringGetter({
key: STRING_KEYS.X_MINUTES_LOWERCASED,
params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
})}
/>
),
},
];
const isFormValid = !isDisabled && !isEditingSlippage;

20
src/views/forms/AccountManagementForms/WithdrawForm.tsx
View File

@ -4,6 +4,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
import type { NumberFormatValues } from 'react-number-format';
import { shallowEqual, useSelector } from 'react-redux';
import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
import { isAddress } from 'viem';
import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
import { AlertType } from '@/constants/alerts';
@ -26,6 +27,7 @@ import { Link } from '@/components/Link';
import { OutputType } from '@/components/Output';
import { Tag } from '@/components/Tag';
import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
import { Icon, IconName } from '@/components/Icon';
import { ChainSelectMenu } from '@/views/forms/AccountManagementForms/ChainSelectMenu';
@ -59,6 +61,8 @@ export const WithdrawForm = () => {
resources,
} = useSelector(getTransferInputs, shallowEqual) || {};
const isValidAddress = toAddress && isAddress(toAddress);
const toToken = useMemo(
() => (token ? resources?.tokenResources?.get(token) : undefined),
[token, resources]
@ -179,7 +183,6 @@ export const WithdrawForm = () => {
const onSelectChain = useCallback((chain: string) => {
if (chain) {
abacusStateManager.clearTransferInputValues();
abacusStateManager.setTransferValue({
field: TransferInputField.chain,
value: chain,
@ -190,7 +193,6 @@ export const WithdrawForm = () => {
const onSelectToken = useCallback((token: TransferInputTokenResource) => {
if (token) {
abacusStateManager.clearTransferInputValues();
abacusStateManager.setTransferValue({
field: TransferInputField.token,
value: token.address,
@ -265,7 +267,12 @@ export const WithdrawForm = () => {
placeholder={stringGetter({ key: STRING_KEYS.ADDRESS })}
onChange={onChangeAddress}
value={toAddress || ''}
label={stringGetter({ key: STRING_KEYS.DESTINATION })}
label={
<span>
{stringGetter({ key: STRING_KEYS.DESTINATION })}{' '}
{isValidAddress ? <Styled.CheckIcon iconName={IconName.Check} /> : null}
</span>
}
/>
<ChainSelectMenu
label={stringGetter({ key: STRING_KEYS.NETWORK })}
@ -342,3 +349,10 @@ Styled.TransactionInfo = styled.span`
Styled.FormInputButton = styled(Button)`
${formMixins.inputInnerButton}
`;
Styled.CheckIcon = styled(Icon)`
margin: 0 1ch;
color: var(--color-positive);
font-size: 0.625rem;
`;

78
src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx
View File

@ -1,14 +1,19 @@
import { useState } from 'react';
import { shallowEqual, useSelector } from 'react-redux';
import styled, { type AnyStyledComponent } from 'styled-components';
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 { layoutMixins } from '@/styles/layoutMixins';
import { useStringGetter } from '@/hooks';
import { useAccountBalance } from '@/hooks/useAccountBalance';
import { layoutMixins } from '@/styles/layoutMixins';
import { Button } from '@/components/Button';
@ -16,6 +21,7 @@ import { Details, DetailsItem } from '@/components/Details';
import { DiffOutput } from '@/components/DiffOutput';
import { Icon, IconName } from '@/components/Icon';
import { Output, OutputType } from '@/components/Output';
import { Tag } from '@/components/Tag';
import { ToggleButton } from '@/components/ToggleButton';
import { WithReceipt } from '@/components/WithReceipt';
@ -49,22 +55,14 @@ export const WithdrawButtonAndReceipt = ({
const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
const stringGetter = useStringGetter();
// TODO: uncomment when we have a way to get token amount estimate from abacus
// const { balance, queryStatus } = useAccountBalance({
// addressOrDenom: withdrawToken?.address || undefined,
// assetSymbol: withdrawToken?.symbol || undefined,
// chainId: withdrawChain ? parseInt(withdrawChain) : undefined,
// decimals: withdrawToken?.decimals || undefined,
// isCosmosChain: false,
// });
// const balanceBN = MustBigNumber(balance);
// const newBalance =
// // toAmountMin && withdrawToken && parseUnits(toAmountMin, withdrawToken.decimals).toString();
const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const toAmount =
summary?.toAmount &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
const feeSubitems: DetailsItem[] = [];
if (typeof summary?.gasFee === 'number') {
@ -98,9 +96,27 @@ export const WithdrawButtonAndReceipt = ({
),
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.LEVERAGE })}</span>,
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
value: (
<Styled.DiffOutput
type={OutputType.Multiple}
@ -137,25 +153,19 @@ export const WithdrawButtonAndReceipt = ({
/>
),
},
// TODO: uncomment when we have a way to get token amount estimate from abacus
// {
// key: 'wallet',
// label: (
// <span>
// {stringGetter({ key: STRING_KEYS.WALLET })}{' '}
// {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
// </span>
// ),
// value: (
// <Styled.DiffOutput
// type={OutputType.Asset}
// value={balanceBN?.toString()}
// newValue={newBalance}
// sign={NumberSign.Negative}
// withDiff={Boolean(balance !== newBalance)}
// />
// ),
// },
{
key: 'estimatedRouteDuration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && (
<Output
type={OutputType.Text}
value={stringGetter({
key: STRING_KEYS.X_MINUTES_LOWERCASED,
params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
})}
/>
),
},
];
const isFormValid = !isDisabled && !isEditingSlippage;

14
src/views/forms/TradeForm/AdvancedTradeOptions.tsx
View File

@ -6,7 +6,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
import { formMixins } from '@/styles/formMixins';
import { TradeInputField } from '@/constants/abacus';
import { STRING_KEYS } from '@/constants/localization';
import { STRING_KEYS, StringKey } from '@/constants/localization';
import { INTEGER_DECIMALS } from '@/constants/numbers';
import { TimeUnitShort } from '@/constants/time';
import { GOOD_TIL_TIME_TIMESCALE_STRINGS } from '@/constants/trade';
@ -29,12 +29,12 @@ export const AdvancedTradeOptions = () => {
const currentTradeFormConfig = useSelector(getInputTradeOptions, shallowEqual);
const inputTradeData = useSelector(getInputTradeData, shallowEqual);
const { execution, goodUntil, postOnly, reduceOnly, timeInForce } = inputTradeData || {};
const { execution, goodTil, postOnly, reduceOnly, timeInForce } = inputTradeData || {};
const { executionOptions, needsGoodUntil, needsPostOnly, needsReduceOnly, timeInForceOptions } =
currentTradeFormConfig || {};
const { duration, unit } = goodUntil || {};
const { duration, unit } = goodTil || {};
const needsExecution = executionOptions || needsPostOnly || needsReduceOnly;
@ -62,7 +62,7 @@ export const AdvancedTradeOptions = () => {
<Styled.SelectItem
key={type}
value={type}
label={stringGetter({ key: stringKey })}
label={stringGetter({ key: stringKey as StringKey })}
/>
))}
</Styled.SelectMenu>
@ -76,7 +76,7 @@ export const AdvancedTradeOptions = () => {
onChange={({ value }: NumberFormatValues) => {
abacusStateManager.setTradeValue({
value: Number(value),
field: TradeInputField.goodUntilDuration,
field: TradeInputField.goodTilDuration,
});
}}
value={duration ?? ''}
@ -86,7 +86,7 @@ export const AdvancedTradeOptions = () => {
onValueChange={(goodTilTimeTimescale: string) => {
abacusStateManager.setTradeValue({
value: goodTilTimeTimescale,
field: TradeInputField.goodUntilUnit,
field: TradeInputField.goodTilUnit,
});
}}
>
@ -121,7 +121,7 @@ export const AdvancedTradeOptions = () => {
<Styled.SelectItem
key={type}
value={type}
label={stringGetter({ key: stringKey })}
label={stringGetter({ key: stringKey as StringKey })}
/>
))}
</Styled.SelectMenu>