Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
93c92a4f9c | ||
|
|
a7b2a1a98e | ||
|
|
2437272cce | ||
|
|
5643ca1d81 |
@@ -1 +0,0 @@
|
|||||||
if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })
|
|
||||||
+1
-4
@@ -39,13 +39,11 @@
|
|||||||
"@cosmjs/proto-signing": "^0.31.0",
|
"@cosmjs/proto-signing": "^0.31.0",
|
||||||
"@cosmjs/stargate": "^0.31.0",
|
"@cosmjs/stargate": "^0.31.0",
|
||||||
"@cosmjs/tendermint-rpc": "^0.31.0",
|
"@cosmjs/tendermint-rpc": "^0.31.0",
|
||||||
"@dydxprotocol/v4-abacus": "^1.2.5",
|
"@dydxprotocol/v4-abacus": "^1.2.3",
|
||||||
"@dydxprotocol/v4-client-js": "^1.0.11",
|
"@dydxprotocol/v4-client-js": "^1.0.11",
|
||||||
"@dydxprotocol/v4-localization": "^1.1.11",
|
"@dydxprotocol/v4-localization": "^1.1.11",
|
||||||
"@ethersproject/providers": "^5.7.2",
|
"@ethersproject/providers": "^5.7.2",
|
||||||
"@js-joda/core": "^5.5.3",
|
"@js-joda/core": "^5.5.3",
|
||||||
"@privy-io/react-auth": "^1.53.1",
|
|
||||||
"@privy-io/wagmi-connector": "^0.1.12",
|
|
||||||
"@radix-ui/react-accordion": "^1.1.2",
|
"@radix-ui/react-accordion": "^1.1.2",
|
||||||
"@radix-ui/react-checkbox": "^1.0.4",
|
"@radix-ui/react-checkbox": "^1.0.4",
|
||||||
"@radix-ui/react-collapsible": "^1.0.3",
|
"@radix-ui/react-collapsible": "^1.0.3",
|
||||||
@@ -153,7 +151,6 @@
|
|||||||
"url-polyfill": "^1.1.12",
|
"url-polyfill": "^1.1.12",
|
||||||
"util": "^0.12.5",
|
"util": "^0.12.5",
|
||||||
"vite": "^4.3.9",
|
"vite": "^4.3.9",
|
||||||
"vite-plugin-pwa": "^0.17.4",
|
|
||||||
"vite-plugin-svgr": "^3.2.0",
|
"vite-plugin-svgr": "^3.2.0",
|
||||||
"vitest": "^0.32.2",
|
"vitest": "^0.32.2",
|
||||||
"w3name": "^1.0.8",
|
"w3name": "^1.0.8",
|
||||||
|
|||||||
Generated
+46
-2708
File diff suppressed because it is too large
Load Diff
+1
-8
@@ -2,8 +2,6 @@ import { lazy, Suspense } from 'react';
|
|||||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||||
import styled, { AnyStyledComponent, css } from 'styled-components';
|
import styled, { AnyStyledComponent, css } from 'styled-components';
|
||||||
import { WagmiConfig } from 'wagmi';
|
import { WagmiConfig } from 'wagmi';
|
||||||
import { PrivyProvider } from '@privy-io/react-auth';
|
|
||||||
import { PrivyWagmiConnector } from '@privy-io/wagmi-connector';
|
|
||||||
import { QueryClient, QueryClientProvider } from 'react-query';
|
import { QueryClient, QueryClientProvider } from 'react-query';
|
||||||
import { GrazProvider } from 'graz';
|
import { GrazProvider } from 'graz';
|
||||||
|
|
||||||
@@ -34,7 +32,7 @@ import { NotificationsToastArea } from '@/layout/NotificationsToastArea';
|
|||||||
import { DialogManager } from '@/layout/DialogManager';
|
import { DialogManager } from '@/layout/DialogManager';
|
||||||
import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
|
import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
|
||||||
|
|
||||||
import { config, privyConfig } from '@/lib/wagmi';
|
import { config } from '@/lib/wagmi';
|
||||||
|
|
||||||
import { breakpoints } from '@/styles';
|
import { breakpoints } from '@/styles';
|
||||||
import { layoutMixins } from '@/styles/layoutMixins';
|
import { layoutMixins } from '@/styles/layoutMixins';
|
||||||
@@ -122,13 +120,8 @@ const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const providers = [
|
const providers = [
|
||||||
wrapProvider(PrivyProvider, {
|
|
||||||
appId: import.meta.env.VITE_PRIVY_APP_ID,
|
|
||||||
config: privyConfig,
|
|
||||||
}),
|
|
||||||
wrapProvider(QueryClientProvider, { client: queryClient }),
|
wrapProvider(QueryClientProvider, { client: queryClient }),
|
||||||
wrapProvider(GrazProvider),
|
wrapProvider(GrazProvider),
|
||||||
wrapProvider(PrivyWagmiConnector, { wagmiChainsConfig: config }),
|
|
||||||
wrapProvider(WagmiConfig, { config }),
|
wrapProvider(WagmiConfig, { config }),
|
||||||
wrapProvider(LocaleProvider),
|
wrapProvider(LocaleProvider),
|
||||||
wrapProvider(RestrictionProvider),
|
wrapProvider(RestrictionProvider),
|
||||||
|
|||||||
@@ -96,7 +96,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
|
|||||||
elapsedTime?: number;
|
elapsedTime?: number;
|
||||||
blockHeight?: number;
|
blockHeight?: number;
|
||||||
indexerBlockHeight?: number;
|
indexerBlockHeight?: number;
|
||||||
trailingBlocks?: number;
|
|
||||||
}
|
}
|
||||||
: // Navigation
|
: // Navigation
|
||||||
T extends AnalyticsEvent.NavigatePage
|
T extends AnalyticsEvent.NavigatePage
|
||||||
|
|||||||
@@ -31,7 +31,6 @@ import { DydxNetwork, ENVIRONMENT_CONFIG_MAP } from './networks';
|
|||||||
export enum WalletConnectionType {
|
export enum WalletConnectionType {
|
||||||
CoinbaseWalletSdk = 'coinbaseWalletSdk',
|
CoinbaseWalletSdk = 'coinbaseWalletSdk',
|
||||||
CosmosSigner = 'CosmosSigner',
|
CosmosSigner = 'CosmosSigner',
|
||||||
Privy = 'Privy',
|
|
||||||
InjectedEip1193 = 'injectedEip1193',
|
InjectedEip1193 = 'injectedEip1193',
|
||||||
WalletConnect2 = 'walletConnect2',
|
WalletConnect2 = 'walletConnect2',
|
||||||
}
|
}
|
||||||
@@ -69,9 +68,6 @@ export const walletConnectionTypes: Record<WalletConnectionType, WalletConnectio
|
|||||||
[WalletConnectionType.CosmosSigner]: {
|
[WalletConnectionType.CosmosSigner]: {
|
||||||
name: 'CosmosSigner',
|
name: 'CosmosSigner',
|
||||||
},
|
},
|
||||||
[WalletConnectionType.Privy]: {
|
|
||||||
name: 'Privy',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Wallets
|
// Wallets
|
||||||
@@ -94,7 +90,6 @@ export enum WalletType {
|
|||||||
WalletConnect2 = 'WALLETCONNECT_2',
|
WalletConnect2 = 'WALLETCONNECT_2',
|
||||||
// TestWallet = 'TEST_WALLET',
|
// TestWallet = 'TEST_WALLET',
|
||||||
OtherWallet = 'OTHER_WALLET',
|
OtherWallet = 'OTHER_WALLET',
|
||||||
Privy = 'PRIVY',
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const WALLET_CONNECT_EXPLORER_RECOMMENDED_WALLETS = {
|
const WALLET_CONNECT_EXPLORER_RECOMMENDED_WALLETS = {
|
||||||
@@ -248,12 +243,6 @@ export const wallets: Record<WalletType, WalletConfig> = {
|
|||||||
icon: KeplrIcon,
|
icon: KeplrIcon,
|
||||||
connectionTypes: [WalletConnectionType.CosmosSigner],
|
connectionTypes: [WalletConnectionType.CosmosSigner],
|
||||||
},
|
},
|
||||||
[WalletType.Privy]: {
|
|
||||||
type: WalletType.Privy,
|
|
||||||
stringKey: STRING_KEYS.KEPLR,
|
|
||||||
icon: GenericWalletIcon,
|
|
||||||
connectionTypes: [WalletConnectionType.Privy],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Injected EIP-1193 Providers
|
// Injected EIP-1193 Providers
|
||||||
|
|||||||
@@ -1,19 +1,13 @@
|
|||||||
import { useCallback, useContext, createContext, useEffect, useState, useMemo } from 'react';
|
import { useCallback, useContext, createContext, useEffect, useState, useMemo } from 'react';
|
||||||
|
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { AES, enc } from 'crypto-js';
|
import { AES, enc } from 'crypto-js';
|
||||||
import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
|
import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
|
||||||
|
|
||||||
import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
|
import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
|
||||||
import { DialogTypes } from '@/constants/dialogs';
|
import { DialogTypes } from '@/constants/dialogs';
|
||||||
import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
|
import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
|
||||||
import {
|
import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
|
||||||
DydxAddress,
|
|
||||||
EvmAddress,
|
|
||||||
PrivateInformation,
|
|
||||||
WalletConnectionType,
|
|
||||||
getSignTypedData,
|
|
||||||
} from '@/constants/wallets';
|
|
||||||
|
|
||||||
import { setOnboardingState, setOnboardingGuard } from '@/state/account';
|
import { setOnboardingState, setOnboardingGuard } from '@/state/account';
|
||||||
import { forceOpenDialog } from '@/state/dialogs';
|
import { forceOpenDialog } from '@/state/dialogs';
|
||||||
@@ -26,11 +20,6 @@ import { useLocalStorage } from './useLocalStorage';
|
|||||||
import { useRestrictions } from './useRestrictions';
|
import { useRestrictions } from './useRestrictions';
|
||||||
import { useWalletConnection } from './useWalletConnection';
|
import { useWalletConnection } from './useWalletConnection';
|
||||||
|
|
||||||
import { useSignTypedData } from 'wagmi';
|
|
||||||
import { getSelectedNetwork } from '@/state/appSelectors';
|
|
||||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
|
||||||
import { usePrivy } from '@privy-io/react-auth';
|
|
||||||
|
|
||||||
const AccountsContext = createContext<ReturnType<typeof useAccountsContext> | undefined>(undefined);
|
const AccountsContext = createContext<ReturnType<typeof useAccountsContext> | undefined>(undefined);
|
||||||
|
|
||||||
AccountsContext.displayName = 'Accounts';
|
AccountsContext.displayName = 'Accounts';
|
||||||
@@ -164,7 +153,6 @@ const useAccountsContext = () => {
|
|||||||
|
|
||||||
// dYdX wallet / onboarding state
|
// dYdX wallet / onboarding state
|
||||||
const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
|
const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
|
||||||
const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
|
|
||||||
const [hdKey, setHdKey] = useState<PrivateInformation>();
|
const [hdKey, setHdKey] = useState<PrivateInformation>();
|
||||||
|
|
||||||
const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
|
const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
|
||||||
@@ -174,11 +162,6 @@ const useAccountsContext = () => {
|
|||||||
[localDydxWallet]
|
[localDydxWallet]
|
||||||
);
|
);
|
||||||
|
|
||||||
const nobleAddress = useMemo(
|
|
||||||
() => localNobleWallet?.address,
|
|
||||||
[localNobleWallet]
|
|
||||||
);
|
|
||||||
|
|
||||||
const setWalletFromEvmSignature = async (signature: string) => {
|
const setWalletFromEvmSignature = async (signature: string) => {
|
||||||
const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
|
const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
|
||||||
signature,
|
signature,
|
||||||
@@ -193,20 +176,6 @@ const useAccountsContext = () => {
|
|||||||
}
|
}
|
||||||
}, [evmAddress, dydxAddress]);
|
}, [evmAddress, dydxAddress]);
|
||||||
|
|
||||||
const selectedNetwork = useSelector(getSelectedNetwork);
|
|
||||||
|
|
||||||
const chainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId);
|
|
||||||
|
|
||||||
const signTypedData = getSignTypedData(selectedNetwork);
|
|
||||||
const { signTypedDataAsync } = useSignTypedData({
|
|
||||||
...signTypedData,
|
|
||||||
domain: {
|
|
||||||
...signTypedData.domain,
|
|
||||||
chainId,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const { ready, authenticated } = usePrivy();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
if (connectedDydxAddress && signerGraz) {
|
if (connectedDydxAddress && signerGraz) {
|
||||||
@@ -223,17 +192,7 @@ const useAccountsContext = () => {
|
|||||||
|
|
||||||
const evmDerivedAccount = evmDerivedAddresses[evmAddress];
|
const evmDerivedAccount = evmDerivedAddresses[evmAddress];
|
||||||
|
|
||||||
if (walletConnectionType === WalletConnectionType.Privy && authenticated && ready) {
|
if (evmDerivedAccount?.encryptedSignature) {
|
||||||
try {
|
|
||||||
const signature = await signTypedDataAsync();
|
|
||||||
|
|
||||||
await setWalletFromEvmSignature(signature);
|
|
||||||
dispatch(setOnboardingState(OnboardingState.AccountConnected));
|
|
||||||
} catch (error) {
|
|
||||||
log('useAccounts/decryptSignature', error);
|
|
||||||
forgetEvmSignature();
|
|
||||||
}
|
|
||||||
} else if (evmDerivedAccount?.encryptedSignature) {
|
|
||||||
try {
|
try {
|
||||||
const signature = decryptSignature(evmDerivedAccount.encryptedSignature);
|
const signature = decryptSignature(evmDerivedAccount.encryptedSignature);
|
||||||
|
|
||||||
@@ -252,15 +211,7 @@ const useAccountsContext = () => {
|
|||||||
dispatch(setOnboardingState(OnboardingState.Disconnected));
|
dispatch(setOnboardingState(OnboardingState.Disconnected));
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
}, [
|
}, [evmAddress, evmDerivedAddresses, signerWagmi, connectedDydxAddress, signerGraz]);
|
||||||
evmAddress,
|
|
||||||
evmDerivedAddresses,
|
|
||||||
signerWagmi,
|
|
||||||
connectedDydxAddress,
|
|
||||||
signerGraz,
|
|
||||||
authenticated,
|
|
||||||
ready,
|
|
||||||
]);
|
|
||||||
|
|
||||||
// abacus
|
// abacus
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -273,7 +224,6 @@ const useAccountsContext = () => {
|
|||||||
if (hdKey?.mnemonic) {
|
if (hdKey?.mnemonic) {
|
||||||
const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
|
const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
|
||||||
abacusStateManager.setNobleWallet(nobleWallet);
|
abacusStateManager.setNobleWallet(nobleWallet);
|
||||||
setLocalNobleWallet(nobleWallet);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
setNobleWallet();
|
setNobleWallet();
|
||||||
@@ -372,7 +322,6 @@ const useAccountsContext = () => {
|
|||||||
localDydxWallet,
|
localDydxWallet,
|
||||||
dydxAccounts,
|
dydxAccounts,
|
||||||
dydxAddress,
|
dydxAddress,
|
||||||
nobleAddress,
|
|
||||||
|
|
||||||
// Onboarding state
|
// Onboarding state
|
||||||
saveHasAcknowledgedTerms,
|
saveHasAcknowledgedTerms,
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// AnalyticsEvent.NetworkStatus
|
// AnalyticsEvent.NetworkStatus
|
||||||
const { height, indexerHeight, status, trailingBlocks} = useApiState();
|
const { height, indexerHeight, status } = useApiState();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (status) {
|
if (status) {
|
||||||
@@ -114,7 +114,6 @@ export const useAnalytics = () => {
|
|||||||
elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
|
elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
|
||||||
blockHeight: height ?? undefined,
|
blockHeight: height ?? undefined,
|
||||||
indexerBlockHeight: indexerHeight ?? undefined,
|
indexerBlockHeight: indexerHeight ?? undefined,
|
||||||
trailingBlocks: trailingBlocks ?? undefined
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, [status]);
|
}, [status]);
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
|
|||||||
export const useApiState = () => {
|
export const useApiState = () => {
|
||||||
const stringGetter = useStringGetter();
|
const stringGetter = useStringGetter();
|
||||||
const apiState = useSelector(getApiState, shallowEqual);
|
const apiState = useSelector(getApiState, shallowEqual);
|
||||||
const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
|
const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
|
||||||
const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
|
const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
|
||||||
const indexerHeight = getIndexerHeight(apiState);
|
const indexerHeight = getIndexerHeight(apiState);
|
||||||
|
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ export const useDisplayedWallets = () => {
|
|||||||
// WalletType.BitKeep,
|
// WalletType.BitKeep,
|
||||||
// WalletType.Coin98,
|
// WalletType.Coin98,
|
||||||
|
|
||||||
WalletType.Privy,
|
|
||||||
WalletType.OtherWallet,
|
WalletType.OtherWallet,
|
||||||
].filter(isTruthy);
|
].filter(isTruthy);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
import { useCallback, useEffect, useMemo } from 'react';
|
import { useCallback, useEffect, useMemo } from 'react';
|
||||||
import { useNetwork, useSwitchNetwork } from 'wagmi';
|
import { useNetwork, useSwitchNetwork } from 'wagmi';
|
||||||
import { useSwitchNetwork as useSwitchNetworkPrivy } from '@privy-io/wagmi-connector';
|
|
||||||
import { WalletConnectionType } from '@/constants/wallets';
|
|
||||||
|
|
||||||
import { useWalletConnection } from './useWalletConnection';
|
|
||||||
|
|
||||||
export const useMatchingEvmNetwork = ({
|
export const useMatchingEvmNetwork = ({
|
||||||
chainId,
|
chainId,
|
||||||
@@ -15,10 +11,7 @@ export const useMatchingEvmNetwork = ({
|
|||||||
onError?: (error: Error) => void;
|
onError?: (error: Error) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { chain } = useNetwork();
|
const { chain } = useNetwork();
|
||||||
const { walletConnectionType } = useWalletConnection();
|
|
||||||
const { isLoading, switchNetworkAsync } = useSwitchNetwork({ onError });
|
const { isLoading, switchNetworkAsync } = useSwitchNetwork({ onError });
|
||||||
const { isLoading: isLoadingPrivy, switchNetworkAsync: switchNetworkAsyncPrivy } =
|
|
||||||
useSwitchNetworkPrivy({ onError });
|
|
||||||
|
|
||||||
// If chainId is not a number, we can assume it is a non EVM compatible chain
|
// If chainId is not a number, we can assume it is a non EVM compatible chain
|
||||||
const isMatchingNetwork = useMemo(
|
const isMatchingNetwork = useMemo(
|
||||||
@@ -28,11 +21,7 @@ export const useMatchingEvmNetwork = ({
|
|||||||
|
|
||||||
const matchNetwork = useCallback(async () => {
|
const matchNetwork = useCallback(async () => {
|
||||||
if (!isMatchingNetwork) {
|
if (!isMatchingNetwork) {
|
||||||
if (walletConnectionType === WalletConnectionType.Privy) {
|
await switchNetworkAsync?.(Number(chainId));
|
||||||
await switchNetworkAsyncPrivy?.(Number(chainId));
|
|
||||||
} else {
|
|
||||||
await switchNetworkAsync?.(Number(chainId));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}, [chainId, chain]);
|
}, [chainId, chain]);
|
||||||
|
|
||||||
@@ -45,6 +34,6 @@ export const useMatchingEvmNetwork = ({
|
|||||||
return {
|
return {
|
||||||
isMatchingNetwork,
|
isMatchingNetwork,
|
||||||
matchNetwork,
|
matchNetwork,
|
||||||
isSwitchingNetwork: isLoading || isLoadingPrivy,
|
isSwitchingNetwork: isLoading,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { useCallback, useEffect, useState, useMemo } from 'react';
|
import { useCallback, useEffect, useState, useMemo } from 'react';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import { usePrivy, useLogout } from '@privy-io/react-auth';
|
|
||||||
|
|
||||||
import { LocalStorageKey } from '@/constants/localStorage';
|
import { LocalStorageKey } from '@/constants/localStorage';
|
||||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
||||||
@@ -105,10 +104,8 @@ export const useWalletConnection = () => {
|
|||||||
[walletConnectConfig, walletType, walletConnectionType]
|
[walletConnectConfig, walletType, walletConnectionType]
|
||||||
);
|
);
|
||||||
|
|
||||||
const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
|
const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
|
||||||
const { suggestAndConnect: connectGraz } = useConnectGraz();
|
const { suggestAndConnect: connectGraz } = useConnectGraz();
|
||||||
const { login, ready, authenticated } = usePrivy();
|
|
||||||
const { logout } = useLogout();
|
|
||||||
|
|
||||||
const connectWallet = useCallback(
|
const connectWallet = useCallback(
|
||||||
async ({ walletType }: { walletType: WalletType }) => {
|
async ({ walletType }: { walletType: WalletType }) => {
|
||||||
@@ -117,11 +114,6 @@ export const useWalletConnection = () => {
|
|||||||
try {
|
try {
|
||||||
if (!walletConnection) {
|
if (!walletConnection) {
|
||||||
throw new Error('Onboarding: No wallet connection found.');
|
throw new Error('Onboarding: No wallet connection found.');
|
||||||
} else if (walletConnection.type === WalletConnectionType.Privy) {
|
|
||||||
|
|
||||||
if (!isConnectedWagmi && !authenticated && ready) {
|
|
||||||
login();
|
|
||||||
}
|
|
||||||
} else if (walletConnection.type === WalletConnectionType.CosmosSigner) {
|
} else if (walletConnection.type === WalletConnectionType.CosmosSigner) {
|
||||||
const cosmosWalletType = {
|
const cosmosWalletType = {
|
||||||
[WalletType.Keplr as string]: CosmosWalletType.KEPLR,
|
[WalletType.Keplr as string]: CosmosWalletType.KEPLR,
|
||||||
@@ -164,7 +156,7 @@ export const useWalletConnection = () => {
|
|||||||
walletConnectionType: walletConnection.type,
|
walletConnectionType: walletConnection.type,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
[isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi, login, ready, authenticated]
|
[isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]
|
||||||
);
|
);
|
||||||
|
|
||||||
const disconnectWallet = useCallback(async () => {
|
const disconnectWallet = useCallback(async () => {
|
||||||
@@ -173,7 +165,6 @@ export const useWalletConnection = () => {
|
|||||||
|
|
||||||
if (isConnectedWagmi) await disconnectWagmi();
|
if (isConnectedWagmi) await disconnectWagmi();
|
||||||
if (isConnectedGraz) await disconnectGraz();
|
if (isConnectedGraz) await disconnectGraz();
|
||||||
if (authenticated) await logout();
|
|
||||||
}, [isConnectedGraz, isConnectedWagmi]);
|
}, [isConnectedGraz, isConnectedWagmi]);
|
||||||
|
|
||||||
// Wallet selection
|
// Wallet selection
|
||||||
|
|||||||
@@ -11,16 +11,16 @@ class TestFlags {
|
|||||||
const params = new URLSearchParams(queryParamsString);
|
const params = new URLSearchParams(queryParamsString);
|
||||||
|
|
||||||
for (const [key, value] of params) {
|
for (const [key, value] of params) {
|
||||||
this.queryParams[key.toLowerCase()] = value;
|
this.queryParams[key] = value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get displayInitializingMarkets() {
|
get displayInitializingMarkets() {
|
||||||
return !!this.queryParams.displayinitializingmarkets;
|
return !!this.queryParams.displayInitializingMarkets;
|
||||||
}
|
}
|
||||||
|
|
||||||
get showMobileSignInOption() {
|
get withCCTP() {
|
||||||
return !!this.queryParams.mobilesignin;
|
return !!this.queryParams.withCCTP;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
|
import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
|
||||||
import { goerli } from 'wagmi/chains';
|
import { goerli } from 'wagmi/chains';
|
||||||
import type { PrivyClientConfig } from '@privy-io/react-auth';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
arbitrum,
|
arbitrum,
|
||||||
@@ -86,19 +85,6 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
|
|||||||
kava,
|
kava,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const privyConfig: PrivyClientConfig = {
|
|
||||||
embeddedWallets: {
|
|
||||||
createOnLogin: 'users-without-wallets',
|
|
||||||
requireUserPasswordOnCreate: true,
|
|
||||||
noPromptOnSignature: true,
|
|
||||||
},
|
|
||||||
loginMethods: ['email', 'sms', 'twitter', 'google', 'apple'],
|
|
||||||
appearance: {
|
|
||||||
theme: '#28283c',
|
|
||||||
},
|
|
||||||
defaultChain: sepolia
|
|
||||||
};
|
|
||||||
|
|
||||||
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||||
WAGMI_SUPPORTED_CHAINS,
|
WAGMI_SUPPORTED_CHAINS,
|
||||||
[
|
[
|
||||||
|
|||||||
@@ -62,12 +62,6 @@ export const getWalletConnection = ({
|
|||||||
type: WalletConnectionType.CosmosSigner,
|
type: WalletConnectionType.CosmosSigner,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
case WalletConnectionType.Privy: {
|
|
||||||
return {
|
|
||||||
type: WalletConnectionType.Privy,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ export const MarketDetails: React.FC = () => {
|
|||||||
if (!configs) return null;
|
if (!configs) return null;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
basePositionNotional,
|
||||||
tickSize,
|
tickSize,
|
||||||
stepSize,
|
stepSize,
|
||||||
initialMarginFraction,
|
initialMarginFraction,
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
import styled, { AnyStyledComponent } from 'styled-components';
|
import styled, { AnyStyledComponent } from 'styled-components';
|
||||||
|
import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import { AlertType } from '@/constants/alerts';
|
import { AlertType } from '@/constants/alerts';
|
||||||
import { STRING_KEYS } from '@/constants/localization';
|
import { STRING_KEYS } from '@/constants/localization';
|
||||||
@@ -11,7 +13,7 @@ import { Button } from '@/components/Button';
|
|||||||
import { Icon } from '@/components/Icon';
|
import { Icon } from '@/components/Icon';
|
||||||
import { Link } from '@/components/Link';
|
import { Link } from '@/components/Link';
|
||||||
|
|
||||||
import { useAccounts, useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';
|
import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
|
||||||
import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
|
import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
|
||||||
|
|
||||||
import { breakpoints } from '@/styles';
|
import { breakpoints } from '@/styles';
|
||||||
@@ -25,8 +27,6 @@ export const ChooseWallet = () => {
|
|||||||
|
|
||||||
const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();
|
const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();
|
||||||
|
|
||||||
const { isMobile } = useBreakpoints();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{selectedWalletType && selectedWalletError && (
|
{selectedWalletType && selectedWalletError && (
|
||||||
@@ -56,11 +56,7 @@ export const ChooseWallet = () => {
|
|||||||
slotLeft={<Styled.Icon iconComponent={wallets[walletType].icon} />}
|
slotLeft={<Styled.Icon iconComponent={wallets[walletType].icon} />}
|
||||||
size={ButtonSize.Small}
|
size={ButtonSize.Small}
|
||||||
>
|
>
|
||||||
<div>
|
<div>{stringGetter({ key: wallets[walletType].stringKey })}</div>
|
||||||
{walletType !== WalletType.Privy && import.meta.env.VITE_PRIVY_APP_ID
|
|
||||||
? stringGetter({ key: wallets[walletType].stringKey })
|
|
||||||
: `Socials ${isMobile ? '' : '(Email, SMS, etc.)'}`}
|
|
||||||
</div>
|
|
||||||
</Styled.WalletButton>
|
</Styled.WalletButton>
|
||||||
))}
|
))}
|
||||||
</Styled.Wallets>
|
</Styled.Wallets>
|
||||||
|
|||||||
@@ -34,30 +34,11 @@ export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: Element
|
|||||||
slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
|
slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const selectedOption = selectedChain === 'coinbase' ? {
|
const selectedOption = chains.find((item) => item.type === selectedChain);
|
||||||
stringKey: 'Coinbase',
|
|
||||||
iconUrl: '/wallets/coinbase-wallet.png',
|
|
||||||
} : chains.find((item) => item.type === selectedChain);
|
|
||||||
|
|
||||||
const exchanges = [
|
|
||||||
{
|
|
||||||
value: 'coinbase',
|
|
||||||
label: 'Coinbase',
|
|
||||||
onSelect: () => {
|
|
||||||
onSelectChain('coinbase');
|
|
||||||
},
|
|
||||||
slotBefore: <Styled.Img src="/wallets/coinbase-wallet.png" alt="" />,
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SearchSelectMenu
|
<SearchSelectMenu
|
||||||
items={[
|
items={[
|
||||||
{
|
|
||||||
group: 'exchanges',
|
|
||||||
groupLabel: 'Exchanges',
|
|
||||||
items: exchanges,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
group: 'chains',
|
group: 'chains',
|
||||||
groupLabel: stringGetter({ key: STRING_KEYS.CHAINS }),
|
groupLabel: stringGetter({ key: STRING_KEYS.CHAINS }),
|
||||||
|
|||||||
@@ -38,14 +38,12 @@ import abacusStateManager from '@/lib/abacus';
|
|||||||
import { MustBigNumber } from '@/lib/numbers';
|
import { MustBigNumber } from '@/lib/numbers';
|
||||||
import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
|
import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
|
||||||
import { log } from '@/lib/telemetry';
|
import { log } from '@/lib/telemetry';
|
||||||
import { parseWalletError, truncateAddress } from '@/lib/wallet';
|
import { parseWalletError } from '@/lib/wallet';
|
||||||
|
|
||||||
import { ChainSelectMenu } from './ChainSelectMenu';
|
import { ChainSelectMenu } from './ChainSelectMenu';
|
||||||
import { TokenSelectMenu } from './TokenSelectMenu';
|
import { TokenSelectMenu } from './TokenSelectMenu';
|
||||||
|
|
||||||
import { DepositButtonAndReceipt } from './DepositForm/DepositButtonAndReceipt';
|
import { DepositButtonAndReceipt } from './DepositForm/DepositButtonAndReceipt';
|
||||||
import { QrCode } from '@/components/QrCode';
|
|
||||||
import { CopyButton } from '@/components/CopyButton';
|
|
||||||
|
|
||||||
type DepositFormProps = {
|
type DepositFormProps = {
|
||||||
onDeposit?: () => void;
|
onDeposit?: () => void;
|
||||||
@@ -57,9 +55,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
|||||||
const [error, setError] = useState<Error | null>(null);
|
const [error, setError] = useState<Error | null>(null);
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const { selectedNetwork } = useSelectedNetwork();
|
const { selectedNetwork } = useSelectedNetwork();
|
||||||
const [isCoinbase, setIsCoinbase] = useState(false);
|
|
||||||
|
|
||||||
const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
|
const { evmAddress, signerWagmi, publicClientWagmi } = useAccounts();
|
||||||
|
|
||||||
const { addTransferNotification } = useLocalNotifications();
|
const { addTransferNotification } = useLocalNotifications();
|
||||||
|
|
||||||
@@ -136,10 +133,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
|||||||
}, [error]);
|
}, [error]);
|
||||||
|
|
||||||
const onSelectChain = useCallback((chain: string) => {
|
const onSelectChain = useCallback((chain: string) => {
|
||||||
if (chain === 'coinbase') {
|
if (chain) {
|
||||||
setIsCoinbase(true);
|
|
||||||
} else if (chain) {
|
|
||||||
setIsCoinbase(false);
|
|
||||||
abacusStateManager.clearTransferInputValues();
|
abacusStateManager.clearTransferInputValues();
|
||||||
abacusStateManager.setTransferValue({
|
abacusStateManager.setTransferValue({
|
||||||
field: TransferInputField.chain,
|
field: TransferInputField.chain,
|
||||||
@@ -370,43 +364,9 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
|||||||
return <LoadingSpace id="DepositForm" />;
|
return <LoadingSpace id="DepositForm" />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isCoinbase) {
|
|
||||||
return (
|
|
||||||
<Styled.Form onSubmit={onSubmit}>
|
|
||||||
<ChainSelectMenu
|
|
||||||
selectedChain={isCoinbase ? 'coinbase' : chainIdStr || undefined}
|
|
||||||
onSelectChain={onSelectChain}
|
|
||||||
/>
|
|
||||||
{nobleAddress && (
|
|
||||||
<>
|
|
||||||
<Styled.ReceiveQr
|
|
||||||
side="bottom"
|
|
||||||
detailItems={[
|
|
||||||
{
|
|
||||||
key: 'nobleAddress',
|
|
||||||
label: "Noble Address",
|
|
||||||
value: nobleAddress,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<QrCode size={432} value={nobleAddress} />
|
|
||||||
</Styled.ReceiveQr>
|
|
||||||
<p>
|
|
||||||
* This address only supports transfers of USDC to the Noble chain.
|
|
||||||
</p>
|
|
||||||
<CopyButton value={nobleAddress} />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Styled.Form>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Styled.Form onSubmit={onSubmit}>
|
<Styled.Form onSubmit={onSubmit}>
|
||||||
<ChainSelectMenu
|
<ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
|
||||||
selectedChain={isCoinbase ? 'coinbase' : chainIdStr || undefined}
|
|
||||||
onSelectChain={onSelectChain}
|
|
||||||
/>
|
|
||||||
<TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
|
<TokenSelectMenu selectedToken={sourceToken || undefined} onSelectToken={onSelectToken} />
|
||||||
<Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
|
<Styled.WithDetailsReceipt side="bottom" detailItems={amountInputReceipt}>
|
||||||
<FormInput
|
<FormInput
|
||||||
@@ -467,13 +427,3 @@ Styled.TransactionInfo = styled.span`
|
|||||||
Styled.FormInputButton = styled(Button)`
|
Styled.FormInputButton = styled(Button)`
|
||||||
${formMixins.inputInnerButton}
|
${formMixins.inputInnerButton}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
Styled.Exchange = styled.div`
|
|
||||||
${layoutMixins.flexColumn}
|
|
||||||
gap: 1rem;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
Styled.ReceiveQr = styled(WithDetailsReceipt)`
|
|
||||||
`;
|
|
||||||
|
|||||||
@@ -10,9 +10,6 @@ import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/consta
|
|||||||
import { isMainnet } from '@/constants/networks';
|
import { isMainnet } from '@/constants/networks';
|
||||||
import { DydxChainAsset, wallets } from '@/constants/wallets';
|
import { DydxChainAsset, wallets } from '@/constants/wallets';
|
||||||
|
|
||||||
import { layoutMixins } from '@/styles/layoutMixins';
|
|
||||||
import { headerMixins } from '@/styles/headerMixins';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
useAccounts,
|
useAccounts,
|
||||||
useBreakpoints,
|
useBreakpoints,
|
||||||
@@ -38,8 +35,10 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
|
|||||||
|
|
||||||
import { isTruthy } from '@/lib/isTruthy';
|
import { isTruthy } from '@/lib/isTruthy';
|
||||||
import { truncateAddress } from '@/lib/wallet';
|
import { truncateAddress } from '@/lib/wallet';
|
||||||
|
|
||||||
|
import { layoutMixins } from '@/styles/layoutMixins';
|
||||||
|
import { headerMixins } from '@/styles/headerMixins';
|
||||||
import { MustBigNumber } from '@/lib/numbers';
|
import { MustBigNumber } from '@/lib/numbers';
|
||||||
import { testFlags } from '@/lib/testFlags';
|
|
||||||
|
|
||||||
export const AccountMenu = () => {
|
export const AccountMenu = () => {
|
||||||
const stringGetter = useStringGetter();
|
const stringGetter = useStringGetter();
|
||||||
@@ -179,7 +178,7 @@ export const AccountMenu = () => {
|
|||||||
},
|
},
|
||||||
...(onboardingState === OnboardingState.AccountConnected && hdKey
|
...(onboardingState === OnboardingState.AccountConnected && hdKey
|
||||||
? [
|
? [
|
||||||
(!isMainnet || testFlags.showMobileSignInOption) && {
|
!isMainnet && {
|
||||||
value: 'MobileQrSignIn',
|
value: 'MobileQrSignIn',
|
||||||
icon: <Icon iconName={IconName.Qr} />,
|
icon: <Icon iconName={IconName.Qr} />,
|
||||||
label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
|
label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import { defineConfig } from 'vite';
|
|||||||
import react from '@vitejs/plugin-react';
|
import react from '@vitejs/plugin-react';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import svgr from 'vite-plugin-svgr';
|
import svgr from 'vite-plugin-svgr';
|
||||||
import { VitePWA } from 'vite-plugin-pwa';
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig(({ mode }) => ({
|
export default defineConfig(({ mode }) => ({
|
||||||
@@ -51,12 +50,6 @@ export default defineConfig(({ mode }) => ({
|
|||||||
svgr({
|
svgr({
|
||||||
exportAsDefault: true,
|
exportAsDefault: true,
|
||||||
}),
|
}),
|
||||||
VitePWA({
|
|
||||||
registerType: 'autoUpdate',
|
|
||||||
devOptions: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
publicDir: 'public',
|
publicDir: 'public',
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user