From 0012b8736acecdb21889ea14715e80222f33694e Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Wed, 5 Apr 2023 14:46:50 +0100 Subject: [PATCH 01/58] Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version --- package.json | 2 +- .../Transfer/CrossChainTransferForm/index.tsx | 18 +++++++----------- yarn.lock | 8 ++++---- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index cb4610b868..5f9f972556 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.0", - "@interlay/bridge": "^0.2.4", + "@interlay/bridge": "^0.2.7", "@interlay/interbtc-api": "2.0.3", "@interlay/monetary-js": "0.7.2", "@polkadot/api": "9.14.2", diff --git a/src/pages/Transfer/CrossChainTransferForm/index.tsx b/src/pages/Transfer/CrossChainTransferForm/index.tsx index 06b64723ca..c5f88a6cda 100644 --- a/src/pages/Transfer/CrossChainTransferForm/index.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/index.tsx @@ -128,17 +128,13 @@ const CrossChainTransferForm = (): JSX.Element => { if (!XCMBridge) return; if (!XCMProvider) return; - const availableFromChains: Array = XCMBridge.adapters - // TODO: This is a kintsugi-only hotfix to temporarily disable - // originating chains other than kintsugi. - .filter((adapter) => adapter.chain.id === 'kintsugi') - .map((adapter: any) => { - return { - type: adapter.chain.id, - name: adapter.chain.id, - icon: - }; - }); + const availableFromChains: Array = XCMBridge.adapters.map((adapter: any) => { + return { + type: adapter.chain.id, + name: adapter.chain.id, + icon: + }; + }); setFromChains(availableFromChains); setFromChain(availableFromChains[0]); diff --git a/yarn.lock b/yarn.lock index e1db99f1ba..f357f1ca28 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2542,10 +2542,10 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.2.4": - version "0.2.4" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.2.4.tgz#83f446575d1b66cac7601bc4b771c3b19b9137b5" - integrity sha512-XYgLhd4anvoaLL9C+Su/BDATd0K6rQipZXjQW3wuqTYyy+Pr7ItNGu4FbSGLqid1osn7b7No4sXQ5WwFJsZSQA== +"@interlay/bridge@^0.2.7": + version "0.2.7" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.2.7.tgz#06b5e4bf531f5aad55e9258ee606b1dfb62e8b5a" + integrity sha512-kpdqBw+AFPx41nsnfEpBbfkQRbt+x1dyKq7zoEfm4a4vHQMgl15BK6UCvpO8LN4o6iRpIYP4xTOcfYytC7BzhQ== dependencies: "@acala-network/api" "4.1.8-9" "@acala-network/sdk" "4.1.8-9" From 22f0dd0e7106ac66aec9231982a45de1328d42db Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 6 Apr 2023 11:32:05 +0100 Subject: [PATCH 02/58] Release/kintsugi/2.29.1 (#1107) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --- package.json | 2 +- src/pages/AMM/Swap/Swap.tsx | 7 +++---- src/utils/hooks/api/use-get-currencies.tsx | 6 +++--- src/utils/hooks/use-query-params.ts | 6 +++++- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 5f9f972556..e67772b164 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.29.0", + "version": "2.29.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/pages/AMM/Swap/Swap.tsx b/src/pages/AMM/Swap/Swap.tsx index 7dab9ff3b1..cc0be6ffdf 100644 --- a/src/pages/AMM/Swap/Swap.tsx +++ b/src/pages/AMM/Swap/Swap.tsx @@ -23,14 +23,14 @@ const Swap = (): JSX.Element => { const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { data: liquidityPools, refetch } = useGetLiquidityPools(); - const { data, getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); + const { data: currencies, getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); const [pair, setPair] = useState(DEFAULT_PAIR); const pooledTickers = useMemo(() => liquidityPools && getPooledTickers(liquidityPools), [liquidityPools]); useEffect(() => { - if (!pooledTickers || !data) return; + if (!currencies) return; const inputQuery = query.get(QUERY_PARAMETERS.SWAP.FROM); const outputQuery = query.get(QUERY_PARAMETERS.SWAP.TO); @@ -39,8 +39,7 @@ const Swap = (): JSX.Element => { const toCurrency = outputQuery ? getCurrencyFromTicker(outputQuery) : DEFAULT_PAIR.output; setPair({ input: fromCurrency, output: toCurrency }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [pooledTickers, data]); + }, [currencies, query, getCurrencyFromTicker]); if (liquidityPools === undefined || pooledTickers === undefined) { return ; diff --git a/src/utils/hooks/api/use-get-currencies.tsx b/src/utils/hooks/api/use-get-currencies.tsx index 1442f6a14c..5be4a1bff0 100644 --- a/src/utils/hooks/api/use-get-currencies.tsx +++ b/src/utils/hooks/api/use-get-currencies.tsx @@ -46,7 +46,7 @@ const useGetCurrencies = (bridgeLoaded: boolean): UseGetCurrenciesResult => { return targetCurrency; }, - [queryResult] + [queryResult.data] ); // Throws when passed parameter is not id of any foreign currency or currencies are not loaded yet. @@ -65,7 +65,7 @@ const useGetCurrencies = (bridgeLoaded: boolean): UseGetCurrenciesResult => { return foreignCurrency; }, - [queryResult] + [queryResult.data] ); // Throws when passed parameter is not id of any foreign currency or currencies are not loaded yet. @@ -82,7 +82,7 @@ const useGetCurrencies = (bridgeLoaded: boolean): UseGetCurrenciesResult => { return lendCurrency; }, - [queryResult] + [queryResult.data] ); // TODO: add getter according to existing LP Tokens identifiers diff --git a/src/utils/hooks/use-query-params.ts b/src/utils/hooks/use-query-params.ts index 073726a09a..7ff3abf17d 100644 --- a/src/utils/hooks/use-query-params.ts +++ b/src/utils/hooks/use-query-params.ts @@ -1,7 +1,11 @@ +import { useMemo } from 'react'; import { useLocation } from 'react-router-dom'; const useQueryParams = (): URLSearchParams => { - return new URLSearchParams(useLocation().search); + const location = useLocation(); + const queryParams = useMemo(() => new URLSearchParams(location.search), [location]); + + return queryParams; }; export default useQueryParams; From 0df4ac5a3f707dcfdac886a5f95b59cb84bbdcf4 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 11 Apr 2023 11:10:21 +0100 Subject: [PATCH 03/58] Tom/release/kintsugi/2.29.2 (#1116) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --- package.json | 4 +-- src/App.tsx | 2 +- .../WalletInsights/WalletInsights.tsx | 20 ++++++++++---- .../hooks/api/amm/use-get-account-pools.tsx | 26 ++++++++++++++++--- yarn.lock | 2 +- 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index e67772b164..69f68bac8b 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "interbtc-ui", - "version": "2.29.1", + "version": "2.29.2", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.0", - "@interlay/bridge": "^0.2.7", + "@interlay/bridge": "0.2.7", "@interlay/interbtc-api": "2.0.3", "@interlay/monetary-js": "0.7.2", "@polkadot/api": "9.14.2", diff --git a/src/App.tsx b/src/App.tsx index fc2f89f241..3a16fbf509 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -215,7 +215,7 @@ const App = (): JSX.Element => { - + diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx index 234b4368db..ddbfbe04d3 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx @@ -5,6 +5,8 @@ import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/uti import { Card, Dd, Dl, DlGroup, Dt, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; +import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -18,9 +20,12 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); + const { data: accountLendingStatistics } = useGetAccountLendingStatistics(); + const { data: accountPools } = useGetAccountPools(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); - const totalBalance = + const rawBalance = balances && Object.values(balances).reduce( (total, balance) => @@ -33,9 +38,14 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { new Big(0) ); + const totalBalance = rawBalance + ?.add(accountLendingStatistics?.supplyAmountUSD || 0) + .sub(accountLendingStatistics?.borrowAmountUSD || 0) + .add(accountPools?.accountLiquidityUSD || 0); + const totalBalanceLabel = totalBalance ? formatUSD(totalBalance.toNumber(), { compact: true }) : '-'; - const transfarableBalance = + const transferableBalance = balances && Object.values(balances).reduce( (total, balance) => @@ -48,8 +58,8 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { new Big(0) ); - const transfarableBalanceLabel = transfarableBalance - ? formatUSD(transfarableBalance.toNumber(), { compact: true }) + const transferableBalanceLabel = transferableBalance + ? formatUSD(transferableBalance.toNumber(), { compact: true }) : '-'; return ( @@ -73,7 +83,7 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { {t('transferable_balance')}
- {transfarableBalanceLabel} + {transferableBalanceLabel}
diff --git a/src/utils/hooks/api/amm/use-get-account-pools.tsx b/src/utils/hooks/api/amm/use-get-account-pools.tsx index 4c38e495db..2d440ddbae 100644 --- a/src/utils/hooks/api/amm/use-get-account-pools.tsx +++ b/src/utils/hooks/api/amm/use-get-account-pools.tsx @@ -1,10 +1,13 @@ import { CurrencyExt, isCurrencyEqual, LiquidityPool, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { AccountId } from '@polkadot/types/interfaces'; +import Big from 'big.js'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; +import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; +import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; import useAccountId from '../../use-account-id'; import { useGetLiquidityPools } from './use-get-liquidity-pools'; @@ -14,9 +17,14 @@ type AccountLiquidityPool = { data: LiquidityPool; amount: MonetaryAmount[]>; + accountLiquidityUSD: Big; } -const getAccountLiqudityPools = async (accountId: AccountId, pools: LiquidityPool[]): Promise => { +const getAccountLiqudityPools = async ( + accountId: AccountId, + pools: LiquidityPool[], + prices: Prices +): Promise => { const accountLiquidityPools = await window.bridge.amm.getLiquidityProvidedByAccount(accountId); const claimableRewards = await window.bridge.amm.getClaimableFarmingRewards(accountId, accountLiquidityPools, pools); const filteredPools = accountLiquidityPools.filter((lpToken) => !lpToken.isZero()); @@ -31,7 +39,18 @@ const getAccountLiqudityPools = async (accountId: AccountId, pools: LiquidityPoo return [...acc, data]; }, []); - return { positions, claimableRewards }; + const accountLiquidityUSD = positions + .map(({ data, amount: accountLPTokenAmount }) => { + const { pooledCurrencies, totalSupply } = data; + const totalLiquidityUSD = calculateTotalLiquidityUSD(pooledCurrencies, prices); + + return accountLPTokenAmount + ? calculateAccountLiquidityUSD(accountLPTokenAmount, totalLiquidityUSD, totalSupply) + : 0; + }) + .reduce((total, accountLPTokenAmount) => total.add(accountLPTokenAmount), new Big(0)); + + return { positions, claimableRewards, accountLiquidityUSD }; }; interface UseGetAccountProvidedLiquidity { @@ -42,12 +61,13 @@ interface UseGetAccountProvidedLiquidity { // Mixes current pools with liquidity provided by the account const useGetAccountPools = (): UseGetAccountProvidedLiquidity => { const accountId = useAccountId(); + const prices = useGetPrices(); const { data: liquidityPools, refetch: refetchLiquidityPools } = useGetLiquidityPools(); const queryKey = ['account-pools', accountId]; const { data, error, refetch: refetchQuery } = useQuery({ queryKey: ['account-pools', accountId], - queryFn: () => accountId && liquidityPools && getAccountLiqudityPools(accountId, liquidityPools), + queryFn: () => accountId && liquidityPools && prices && getAccountLiqudityPools(accountId, liquidityPools, prices), enabled: !!liquidityPools, refetchInterval: BLOCKTIME_REFETCH_INTERVAL }); diff --git a/yarn.lock b/yarn.lock index f357f1ca28..26da5434a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2542,7 +2542,7 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.2.7": +"@interlay/bridge@0.2.7": version "0.2.7" resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.2.7.tgz#06b5e4bf531f5aad55e9258ee606b1dfb62e8b5a" integrity sha512-kpdqBw+AFPx41nsnfEpBbfkQRbt+x1dyKq7zoEfm4a4vHQMgl15BK6UCvpO8LN4o6iRpIYP4xTOcfYytC7BzhQ== From c6b0508cb35ce632d0d15692291e7a27291a0010 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 11 Apr 2023 13:29:10 +0100 Subject: [PATCH 04/58] Tom/release/kintsugi/2.9.3 (#1121) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --- package.json | 2 +- src/pages/Staking/index.tsx | 5 +++-- src/pages/Transfer/CrossChainTransferForm/index.tsx | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 69f68bac8b..178f2c55c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.29.2", + "version": "2.29.3", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index d56075801e..15914d27ff 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -319,10 +319,11 @@ const Staking = (): JSX.Element => { React.useEffect(() => { if (!lockTime) return; + if (!currentBlockNumber) return; const lockTimeValue = Number(lockTime); - setBlockLockTimeExtension(convertWeeksToBlockNumbers(lockTimeValue)); - }, [lockTime]); + setBlockLockTimeExtension(currentBlockNumber + convertWeeksToBlockNumbers(lockTimeValue)); + }, [currentBlockNumber, lockTime]); React.useEffect(() => { reset({ diff --git a/src/pages/Transfer/CrossChainTransferForm/index.tsx b/src/pages/Transfer/CrossChainTransferForm/index.tsx index c5f88a6cda..16dbf590aa 100644 --- a/src/pages/Transfer/CrossChainTransferForm/index.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/index.tsx @@ -131,7 +131,7 @@ const CrossChainTransferForm = (): JSX.Element => { const availableFromChains: Array = XCMBridge.adapters.map((adapter: any) => { return { type: adapter.chain.id, - name: adapter.chain.id, + name: adapter.chain.display, icon: }; }); @@ -149,7 +149,7 @@ const CrossChainTransferForm = (): JSX.Element => { const availableToChains = destinationChains.map((chain: any) => { return { type: chain.id, - name: chain.id, + name: chain.display, icon: }; }); From f4d70ca58acbe2de120036b4191695588e4b9bb7 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Wed, 12 Apr 2023 15:08:12 +0100 Subject: [PATCH 05/58] [release] Kintsugi 2.9.5 (#1127) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --- package.json | 2 +- src/pages/Staking/index.tsx | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 178f2c55c0..06c5febd3c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.29.3", + "version": "2.29.5", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index 15914d27ff..fd3582752c 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -106,6 +106,7 @@ interface LockingAmountAndTime { const Staking = (): JSX.Element => { const [blockLockTimeExtension, setBlockLockTimeExtension] = React.useState(0); + const [calculateRewards, setCalculateRewards] = React.useState(false); const dispatch = useDispatch(); const { t } = useTranslation(); @@ -190,7 +191,7 @@ const Staking = (): JSX.Element => { [GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccountAddress], genericFetcher(), { - enabled: !!bridgeLoaded + enabled: !!bridgeLoaded && calculateRewards } ); useErrorHandler(rewardAmountAndAPYError); @@ -213,7 +214,7 @@ const Staking = (): JSX.Element => { ], genericFetcher(), { - enabled: !!bridgeLoaded + enabled: !!bridgeLoaded && calculateRewards } ); useErrorHandler(estimatedRewardAmountAndAPYError); @@ -320,10 +321,14 @@ const Staking = (): JSX.Element => { React.useEffect(() => { if (!lockTime) return; if (!currentBlockNumber) return; + if (!stakedAmountAndEndBlock) return; const lockTimeValue = Number(lockTime); - setBlockLockTimeExtension(currentBlockNumber + convertWeeksToBlockNumbers(lockTimeValue)); - }, [currentBlockNumber, lockTime]); + const extensionTime = + stakedAmountAndEndBlock.endBlock + currentBlockNumber + convertWeeksToBlockNumbers(lockTimeValue); + + setBlockLockTimeExtension(extensionTime); + }, [currentBlockNumber, lockTime, stakedAmountAndEndBlock]); React.useEffect(() => { reset({ @@ -421,6 +426,8 @@ const Staking = (): JSX.Element => { }; const validateLockingAmount = (value: string): string | undefined => { + setCalculateRewards(false); + const valueWithFallback = value || '0'; const monetaryLockingAmount = newMonetaryAmount(valueWithFallback, GOVERNANCE_TOKEN, true); @@ -435,6 +442,8 @@ const Staking = (): JSX.Element => { return 'Locking amount must not be greater than available balance!'; } + setCalculateRewards(true); + const planckLockingAmount = monetaryLockingAmount.toBig(0); const lockBlocks = convertWeeksToBlockNumbers(parseInt(lockTime)); // This is related to the on-chain implementation where currency values are integers. From a6971142941829d03021483af004b9ad57f3cb27 Mon Sep 17 00:00:00 2001 From: Thomas Jeatt Date: Thu, 13 Apr 2023 08:17:06 +0100 Subject: [PATCH 06/58] fix: revert change which blocks rewards calculation --- src/pages/Staking/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index fd3582752c..e948aff225 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -106,7 +106,6 @@ interface LockingAmountAndTime { const Staking = (): JSX.Element => { const [blockLockTimeExtension, setBlockLockTimeExtension] = React.useState(0); - const [calculateRewards, setCalculateRewards] = React.useState(false); const dispatch = useDispatch(); const { t } = useTranslation(); @@ -191,7 +190,7 @@ const Staking = (): JSX.Element => { [GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccountAddress], genericFetcher(), { - enabled: !!bridgeLoaded && calculateRewards + enabled: !!bridgeLoaded } ); useErrorHandler(rewardAmountAndAPYError); @@ -214,7 +213,7 @@ const Staking = (): JSX.Element => { ], genericFetcher(), { - enabled: !!bridgeLoaded && calculateRewards + enabled: !!bridgeLoaded } ); useErrorHandler(estimatedRewardAmountAndAPYError); @@ -426,8 +425,6 @@ const Staking = (): JSX.Element => { }; const validateLockingAmount = (value: string): string | undefined => { - setCalculateRewards(false); - const valueWithFallback = value || '0'; const monetaryLockingAmount = newMonetaryAmount(valueWithFallback, GOVERNANCE_TOKEN, true); @@ -442,8 +439,6 @@ const Staking = (): JSX.Element => { return 'Locking amount must not be greater than available balance!'; } - setCalculateRewards(true); - const planckLockingAmount = monetaryLockingAmount.toBig(0); const lockBlocks = convertWeeksToBlockNumbers(parseInt(lockTime)); // This is related to the on-chain implementation where currency values are integers. From a6f38155538356900d1af6debc8bbb8d36bef970 Mon Sep 17 00:00:00 2001 From: ns212 Date: Fri, 28 Apr 2023 14:21:49 +0000 Subject: [PATCH 07/58] chore: update coingecko api endpoint --- api/market_data.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/api/market_data.py b/api/market_data.py index bbcf4d232f..5aeb576dfa 100644 --- a/api/market_data.py +++ b/api/market_data.py @@ -23,9 +23,8 @@ def get_price(): headers_dict = { "content-type": "application/json", "accept": "application/json", - "x-cg-pro-api-key": api_key, } - url = "https://pro-api.coingecko.com/api/v3/simple/price" + url = "https://api.coingecko.com/api/v3/simple/price" resp = requests.get(url, params=args, headers=headers_dict) data = resp.json() return jsonify(data) From 543cf5f3b58910a11bb47edd83b5ff71dda791df Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 22 May 2023 11:55:47 +0100 Subject: [PATCH 08/58] [release] Kintsugi 2.32.0 (#1215) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão --- package.json | 5 +- src/assets/icons/ArrowRightCircle.tsx | 13 + src/assets/icons/index.ts | 1 + src/assets/locales/en/translation.json | 1 + src/component-library/Label/Label.style.tsx | 1 + .../Select/SelectTrigger.tsx | 2 +- src/component-library/index.tsx | 2 + src/component-library/theme/theme.ts | 10 +- src/components/AccountSelect/AccountLabel.tsx | 34 ++ src/components/AccountSelect/AccountList.tsx | 58 +++ .../AccountSelect/AccountListModal.tsx | 34 ++ .../AccountSelect/AccountSelect.style.tsx | 68 +++ .../AccountSelect/AccountSelect.tsx | 99 +++++ src/components/AccountSelect/index.tsx | 2 + src/components/Geoblock/Geoblock.tsx | 14 + src/components/index.tsx | 2 + src/config/links.ts | 5 + src/config/relay-chains.tsx | 14 +- src/index.tsx | 43 +- .../Chains/ChainSelector/index.tsx | 64 --- src/legacy-components/Chains/index.tsx | 24 -- src/lib/form/index.tsx | 6 + src/lib/form/schemas/index.ts | 9 + src/lib/form/schemas/transfers.ts | 54 +++ src/lib/form/use-form.tsx | 4 +- .../CrossChainTransferForm.styles.tsx | 42 ++ .../CrossChainTransferForm.tsx | 293 +++++++++++++ .../components/ChainIcon/ChainIcon.tsx | 6 +- .../components/ChainIcon/icons/Bifrost.tsx | 38 ++ .../components/ChainIcon/icons/Heiko.tsx | 47 ++ .../components/ChainIcon/icons/Hydra.tsx | 32 ++ .../components/ChainIcon/icons/Karura.tsx | 51 +++ .../components/ChainIcon/icons/index.ts | 4 + .../ChainSelect/ChainSelect.style.tsx | 29 ++ .../components/ChainSelect/ChainSelect.tsx | 53 +++ .../components/ChainSelect/index.tsx | 2 + .../components/index.tsx | 6 +- .../Transfer/CrossChainTransferForm/index.tsx | 378 +--------------- src/pages/Transfer/Transfer.style.tsx | 9 + src/pages/Transfer/index.tsx | 112 +---- src/types/chains.d.ts | 10 + src/types/chains.types.ts | 3 - src/utils/hooks/api/xcm/use-xcm-bridge.ts | 182 +++++--- src/utils/hooks/api/xcm/xcm-endpoints.ts | 33 ++ src/utils/hooks/use-geoblocking.ts | 22 + yarn.lock | 402 ++++++++++++------ 46 files changed, 1543 insertions(+), 780 deletions(-) create mode 100644 src/assets/icons/ArrowRightCircle.tsx create mode 100644 src/components/AccountSelect/AccountLabel.tsx create mode 100644 src/components/AccountSelect/AccountList.tsx create mode 100644 src/components/AccountSelect/AccountListModal.tsx create mode 100644 src/components/AccountSelect/AccountSelect.style.tsx create mode 100644 src/components/AccountSelect/AccountSelect.tsx create mode 100644 src/components/AccountSelect/index.tsx create mode 100644 src/components/Geoblock/Geoblock.tsx delete mode 100644 src/legacy-components/Chains/ChainSelector/index.tsx delete mode 100644 src/legacy-components/Chains/index.tsx create mode 100644 src/lib/form/schemas/transfers.ts create mode 100644 src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx create mode 100644 src/pages/Transfer/Transfer.style.tsx create mode 100644 src/types/chains.d.ts delete mode 100644 src/types/chains.types.ts create mode 100644 src/utils/hooks/api/xcm/xcm-endpoints.ts create mode 100644 src/utils/hooks/use-geoblocking.ts diff --git a/package.json b/package.json index 04cc1a8497..c87aea2430 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,17 @@ { "name": "interbtc-ui", - "version": "2.31.3", + "version": "2.32.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.0", - "@interlay/bridge": "0.2.7", + "@interlay/bridge": "^0.3.9", "@interlay/interbtc-api": "2.2.2", "@interlay/monetary-js": "0.7.2", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", + "@polkadot/react-identicon": "^2.11.1", "@polkadot/ui-keyring": "^2.9.7", "@reach/tooltip": "^0.16.0", "@react-aria/accordion": "^3.0.0-alpha.14", diff --git a/src/assets/icons/ArrowRightCircle.tsx b/src/assets/icons/ArrowRightCircle.tsx new file mode 100644 index 0000000000..8cef0e7841 --- /dev/null +++ b/src/assets/icons/ArrowRightCircle.tsx @@ -0,0 +1,13 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ArrowRightCircle = forwardRef((props, ref) => ( + + + +)); + +ArrowRightCircle.displayName = 'ArrowRightCircle'; + +export { ArrowRightCircle }; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 6393c7b057..bf537097cc 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,4 +1,5 @@ export { ArrowRight } from './ArrowRight'; +export { ArrowRightCircle } from './ArrowRightCircle'; export { ArrowsUpDown } from './ArrowsUpDown'; export { ArrowTopRightOnSquare } from './ArrowTopRightOnSquare'; export { ChevronDown } from './ChevronDown'; diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 439791e0dd..2959b1bd8d 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -602,6 +602,7 @@ }, "forms": { "please_enter_your_field": "Please enter your {{field}}", + "please_select_your_field": "Please select your {{field}}", "please_enter_the_amount_to": "Please enter the amount to {{field}}", "amount_must_be_at_least": "Amount to {{action}} must be at least {{amount}} {{token}}", "amount_must_be_at_most": "Amount to {{action}} must be at most {{amount}}", diff --git a/src/component-library/Label/Label.style.tsx b/src/component-library/Label/Label.style.tsx index 55c1a22cb1..d3209b0dee 100644 --- a/src/component-library/Label/Label.style.tsx +++ b/src/component-library/Label/Label.style.tsx @@ -8,6 +8,7 @@ const StyledLabel = styled.label` font-size: ${theme.text.xs}; color: ${theme.colors.textTertiary}; padding: ${theme.spacing.spacing1} 0; + align-self: flex-start; `; export { StyledLabel }; diff --git a/src/component-library/Select/SelectTrigger.tsx b/src/component-library/Select/SelectTrigger.tsx index 2229fd8f1c..8c2b52e27e 100644 --- a/src/component-library/Select/SelectTrigger.tsx +++ b/src/component-library/Select/SelectTrigger.tsx @@ -8,7 +8,7 @@ import { Sizes } from '../utils/prop-types'; import { StyledChevronDown, StyledTrigger, StyledTriggerValue } from './Select.style'; type Props = { - as: any; + as?: any; size?: Sizes; isOpen?: boolean; hasError?: boolean; diff --git a/src/component-library/index.tsx b/src/component-library/index.tsx index b91ec169da..d385b075d1 100644 --- a/src/component-library/index.tsx +++ b/src/component-library/index.tsx @@ -32,6 +32,8 @@ export type { ModalBodyProps, ModalDividerProps, ModalFooterProps, ModalHeaderPr export { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from './Modal'; export type { NumberInputProps } from './NumberInput'; export { NumberInput } from './NumberInput'; +export type { SelectProps } from './Select'; +export { Item, Select } from './Select'; export type { StackProps } from './Stack'; export { Stack } from './Stack'; export type { SwitchProps } from './Switch'; diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts index 86e1295e36..c7a21c8791 100644 --- a/src/component-library/theme/theme.ts +++ b/src/component-library/theme/theme.ts @@ -510,15 +510,19 @@ const theme = { size: { small: { padding: 'var(--spacing-1)', - text: 'var(--text-s)' + text: 'var(--text-s)', + // TODO: to be determined + maxHeight: 'calc(var(--spacing-6) - 1px)' }, medium: { padding: 'var(--spacing-2)', - text: 'var(--text-base)' + text: 'var(--text-base)', + maxHeight: 'calc(var(--spacing-10) - 1px)' }, large: { padding: 'var(--spacing-5) var(--spacing-2)', - text: 'var(--text-lg)' + text: 'var(--text-lg)', + maxHeight: 'calc(var(--spacing-16) - 1px)' } } } diff --git a/src/components/AccountSelect/AccountLabel.tsx b/src/components/AccountSelect/AccountLabel.tsx new file mode 100644 index 0000000000..965d1128c2 --- /dev/null +++ b/src/components/AccountSelect/AccountLabel.tsx @@ -0,0 +1,34 @@ +import Identicon from '@polkadot/react-identicon'; + +import { FlexProps } from '@/component-library/Flex'; + +import { StyledAccountLabelAddress, StyledAccountLabelName, StyledAccountLabelWrapper } from './AccountSelect.style'; + +type Props = { + isSelected?: boolean; + address: string; + name?: string; +}; + +type InheritAttrs = Omit; + +type AccountLabelProps = Props & InheritAttrs; + +const AccountLabel = ({ isSelected, address, name, ...props }: AccountLabelProps): JSX.Element => ( + + + + {name && ( + + {name} + + )} + + {address} + + + +); + +export { AccountLabel }; +export type { AccountLabelProps }; diff --git a/src/components/AccountSelect/AccountList.tsx b/src/components/AccountSelect/AccountList.tsx new file mode 100644 index 0000000000..ca12d8b20e --- /dev/null +++ b/src/components/AccountSelect/AccountList.tsx @@ -0,0 +1,58 @@ +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; + +import { ListItem, ListProps } from '@/component-library/List'; + +import { AccountLabel } from './AccountLabel'; +import { StyledList } from './AccountSelect.style'; + +type Props = { + items: InjectedAccountWithMeta[]; + selectedAccount?: string; + onSelectionChange?: (account: string) => void; +}; + +type InheritAttrs = Omit; + +type AccountListProps = Props & InheritAttrs; + +const AccountList = ({ items, selectedAccount, onSelectionChange, ...props }: AccountListProps): JSX.Element => { + const handleSelectionChange: ListProps['onSelectionChange'] = (key) => { + const [selectedKey] = [...key]; + + if (!selectedKey) return; + + onSelectionChange?.(selectedKey as string); + }; + + return ( + + {items.map((item) => { + const accountText = item.address; + + const isSelected = selectedAccount === accountText; + + return ( + + + + ); + })} + + ); +}; + +export { AccountList }; +export type { AccountListProps }; diff --git a/src/components/AccountSelect/AccountListModal.tsx b/src/components/AccountSelect/AccountListModal.tsx new file mode 100644 index 0000000000..07b211e2a9 --- /dev/null +++ b/src/components/AccountSelect/AccountListModal.tsx @@ -0,0 +1,34 @@ +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; + +import { Modal, ModalBody, ModalHeader, ModalProps } from '@/component-library/Modal'; + +import { AccountList } from './AccountList'; + +type Props = { + accounts: InjectedAccountWithMeta[]; + onSelectionChange?: (account: string) => void; + selectedAccount?: string; +}; + +type InheritAttrs = Omit; + +type AccountListModalProps = Props & InheritAttrs; + +const AccountListModal = ({ + selectedAccount, + accounts, + onSelectionChange, + ...props +}: AccountListModalProps): JSX.Element => ( + + + Select Account + + + + + +); + +export { AccountListModal }; +export type { AccountListModalProps }; diff --git a/src/components/AccountSelect/AccountSelect.style.tsx b/src/components/AccountSelect/AccountSelect.style.tsx new file mode 100644 index 0000000000..850c26e0fc --- /dev/null +++ b/src/components/AccountSelect/AccountSelect.style.tsx @@ -0,0 +1,68 @@ +import styled from 'styled-components'; + +import { ChevronDown } from '@/assets/icons'; +import { Flex } from '@/component-library/Flex'; +import { List } from '@/component-library/List'; +import { Span } from '@/component-library/Text'; +import { theme } from '@/component-library/theme'; + +type StyledClickableProps = { + $isClickable: boolean; +}; + +type StyledListItemSelectedLabelProps = { + $isSelected: boolean; +}; + +const StyledAccount = styled.span` + font-size: ${theme.text.s}; + color: ${theme.colors.textPrimary}; + overflow: hidden; + text-overflow: ellipsis; +`; + +const StyledAccountSelect = styled(Flex)` + background-color: ${theme.tokenInput.endAdornment.bg}; + border-radius: ${theme.rounded.md}; + font-size: ${theme.text.xl2}; + padding: ${theme.spacing.spacing3}; + cursor: ${({ $isClickable }) => $isClickable && 'pointer'}; + height: 3rem; + width: auto; + overflow: hidden; +`; + +const StyledChevronDown = styled(ChevronDown)` + margin-left: ${theme.spacing.spacing1}; +`; + +const StyledAccountLabelAddress = styled(Span)` + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +`; + +const StyledAccountLabelName = styled(StyledAccountLabelAddress)` + color: ${({ $isSelected }) => + $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; +`; + +const StyledList = styled(List)` + overflow: auto; + padding: 0 ${theme.modal.body.paddingX} ${theme.modal.body.paddingY} ${theme.modal.body.paddingX}; +`; + +const StyledAccountLabelWrapper = styled(Flex)` + flex-grow: 1; + overflow: hidden; +`; + +export { + StyledAccount, + StyledAccountLabelAddress, + StyledAccountLabelName, + StyledAccountLabelWrapper, + StyledAccountSelect, + StyledChevronDown, + StyledList +}; diff --git a/src/components/AccountSelect/AccountSelect.tsx b/src/components/AccountSelect/AccountSelect.tsx new file mode 100644 index 0000000000..b9712491b5 --- /dev/null +++ b/src/components/AccountSelect/AccountSelect.tsx @@ -0,0 +1,99 @@ +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; +import { useLabel } from '@react-aria/label'; +import { chain, mergeProps } from '@react-aria/utils'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; +import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useState } from 'react'; + +import { Flex, Label } from '@/component-library'; +import { SelectTrigger } from '@/component-library/Select'; +import { useDOMRef } from '@/component-library/utils/dom'; +import { triggerChangeEvent } from '@/component-library/utils/input'; + +import { AccountLabel } from './AccountLabel'; +import { AccountListModal } from './AccountListModal'; + +const getAccount = (accountValue?: string, accounts?: InjectedAccountWithMeta[]) => + accounts?.find((account) => account.address === accountValue); + +type Props = { + value: string; + defaultValue?: string; + icons?: string[]; + isDisabled?: boolean; + label?: ReactNode; + accounts?: InjectedAccountWithMeta[]; +}; + +type NativeAttrs = Omit & { ref?: any }, keyof Props>; + +type AccountSelectProps = Props & NativeAttrs; + +const AccountSelect = forwardRef( + ({ value: valueProp, defaultValue = '', accounts, disabled, label, className, ...props }, ref): JSX.Element => { + const inputRef = useDOMRef(ref); + + const [isOpen, setOpen] = useState(false); + const [value, setValue] = useState(defaultValue); + + const { fieldProps, labelProps } = useLabel({ ...props, label }); + + useEffect(() => { + if (valueProp === undefined) return; + + setValue(valueProp); + }, [valueProp]); + + const handleAccount = (account: string) => { + triggerChangeEvent(inputRef, account); + setValue(account); + }; + + const handleClose = () => setOpen(false); + + const isDisabled = !accounts?.length || disabled; + + const selectedAccount = getAccount(value, accounts); + + return ( + <> + + {label && } + setOpen(true)} + disabled={isDisabled} + {...mergeProps(fieldProps, { + // MEMO: when the button is blurred, a focus and blur is executed on the input + // so that validation gets triggered. + onBlur: () => { + if (!isOpen) { + inputRef.current?.focus(); + inputRef.current?.blur(); + } + } + })} + > + {selectedAccount && } + + + + + + {accounts && ( + + )} + + ); + } +); + +AccountSelect.displayName = 'AccountSelect'; + +export { AccountSelect }; +export type { AccountSelectProps }; diff --git a/src/components/AccountSelect/index.tsx b/src/components/AccountSelect/index.tsx new file mode 100644 index 0000000000..83aa80ccbd --- /dev/null +++ b/src/components/AccountSelect/index.tsx @@ -0,0 +1,2 @@ +export type { AccountSelectProps } from './AccountSelect'; +export { AccountSelect } from './AccountSelect'; diff --git a/src/components/Geoblock/Geoblock.tsx b/src/components/Geoblock/Geoblock.tsx new file mode 100644 index 0000000000..43493562d3 --- /dev/null +++ b/src/components/Geoblock/Geoblock.tsx @@ -0,0 +1,14 @@ +import React, { ReactNode } from 'react'; + +import { useGeoblocking } from '@/utils/hooks/use-geoblocking'; + +type Props = { + children: ReactNode; +}; + +const GeoblockingWrapper = ({ children }: Props): JSX.Element => { + useGeoblocking(); + return <>{children}; +}; + +export { GeoblockingWrapper }; diff --git a/src/components/index.tsx b/src/components/index.tsx index 51545514ef..5149bf3220 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,3 +1,5 @@ +export type { AccountSelectProps } from './AccountSelect'; +export { AccountSelect } from './AccountSelect'; export type { AuthCTAProps } from './AuthCTA'; export { AuthCTA } from './AuthCTA'; export type { AssetCellProps, BalanceCellProps, CellProps, TableProps } from './DataGrid'; diff --git a/src/config/links.ts b/src/config/links.ts index 8f1d7557b1..b2d84b6a02 100644 --- a/src/config/links.ts +++ b/src/config/links.ts @@ -21,8 +21,13 @@ const INTERLAY_DOS_AND_DONTS_DOCS_LINK = 'https://docs.interlay.io/#/vault/insta const BANXA_LINK = 'http://talisman.banxa.com/'; +const GEOBLOCK_API_ENDPOINT = '/check_access'; +const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock'; + export { BANXA_LINK, + GEOBLOCK_API_ENDPOINT, + GEOBLOCK_REDIRECTION_LINK, INTERLAY_COMPANY_LINK, INTERLAY_CROWDLOAN_LINK, INTERLAY_DISCORD_LINK, diff --git a/src/config/relay-chains.tsx b/src/config/relay-chains.tsx index d358c50be6..de9302d73f 100644 --- a/src/config/relay-chains.tsx +++ b/src/config/relay-chains.tsx @@ -1,4 +1,9 @@ +import { AcalaAdapter, KaruraAdapter } from '@interlay/bridge/build/adapters/acala'; +import { AstarAdapter } from '@interlay/bridge/build/adapters/astar'; +import { BifrostAdapter } from '@interlay/bridge/build/adapters/bifrost'; +import { HydraAdapter } from '@interlay/bridge/build/adapters/hydradx'; import { InterlayAdapter, KintsugiAdapter } from '@interlay/bridge/build/adapters/interlay'; +import { HeikoAdapter, ParallelAdapter } from '@interlay/bridge/build/adapters/parallel'; import { KusamaAdapter, PolkadotAdapter } from '@interlay/bridge/build/adapters/polkadot'; import { StatemineAdapter, StatemintAdapter } from '@interlay/bridge/build/adapters/statemint'; import { BaseCrossChainAdapter } from '@interlay/bridge/build/base-chain-adapter'; @@ -156,6 +161,10 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { TRANSACTION_FEE_AMOUNT = newMonetaryAmount(0.2, GOVERNANCE_TOKEN, true); XCM_ADAPTERS = { interlay: new InterlayAdapter(), + acala: new AcalaAdapter(), + astar: new AstarAdapter(), + hydra: new HydraAdapter(), + parallel: new ParallelAdapter(), polkadot: new PolkadotAdapter(), statemint: new StatemintAdapter() }; @@ -199,7 +208,10 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { XCM_ADAPTERS = { kintsugi: new KintsugiAdapter(), kusama: new KusamaAdapter(), - statemine: new StatemineAdapter() + karura: new KaruraAdapter(), + statemine: new StatemineAdapter(), + bifrost: new BifrostAdapter(), + heiko: new HeikoAdapter() }; SS58_PREFIX = 2; break; diff --git a/src/index.tsx b/src/index.tsx index 4a8ef1ba46..4901f7d9a1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,6 +18,7 @@ import ThemeWrapper from '@/parts/ThemeWrapper'; import { Subscriptions } from '@/utils/hooks/api/tokens/use-balances-subscription'; import App from './App'; +import { GeoblockingWrapper } from './components/Geoblock/Geoblock'; import reportWebVitals from './reportWebVitals'; import { store } from './store'; @@ -30,26 +31,28 @@ const queryClient = new QueryClient(); // MEMO: temporarily removed React.StrictMode. We should add back when react-spectrum handles // it across their library. (Issue: https://github.com/adobe/react-spectrum/issues/779#issuecomment-1353734729) ReactDOM.render( - - - - - - - - - - - - - - - - - - - - , + + + + + + + + + + + + + + + + + + + + + + , document.getElementById('root') ); diff --git a/src/legacy-components/Chains/ChainSelector/index.tsx b/src/legacy-components/Chains/ChainSelector/index.tsx deleted file mode 100644 index aa3c8d0e7c..0000000000 --- a/src/legacy-components/Chains/ChainSelector/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import clsx from 'clsx'; - -import Select, { - SELECT_VARIANTS, - SelectBody, - SelectButton, - SelectCheck, - SelectLabel, - SelectOption, - SelectOptions, - SelectText -} from '@/legacy-components/Select'; -import { XCMChains } from '@/types/chains.types'; - -interface ChainOption { - type: XCMChains; - name: string; - icon: JSX.Element; -} - -interface Props { - chainOptions: Array; - selectedChain: ChainOption | undefined; - label: string; - onChange?: (chain: ChainOption) => void; -} - -const ChainSelector = ({ chainOptions, selectedChain, label, onChange }: Props): JSX.Element => ( - -); - -export type { ChainOption }; -export default ChainSelector; diff --git a/src/legacy-components/Chains/index.tsx b/src/legacy-components/Chains/index.tsx deleted file mode 100644 index 16873ecdbf..0000000000 --- a/src/legacy-components/Chains/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import ChainSelector, { ChainOption } from './ChainSelector'; - -interface Props { - label: string; - chainOptions: Array | undefined; - onChange?: (chain: ChainOption) => void; - selectedChain: ChainOption | undefined; -} - -const Chains = ({ onChange, chainOptions, label, selectedChain }: Props): JSX.Element | null => { - if (!selectedChain || !chainOptions) { - return null; - } - - return ( -
- -
- ); -}; - -export type { ChainOption }; - -export default Chains; diff --git a/src/lib/form/index.tsx b/src/lib/form/index.tsx index 60fbf3b63b..af76026d2e 100644 --- a/src/lib/form/index.tsx +++ b/src/lib/form/index.tsx @@ -1,3 +1,9 @@ +export type { + CreateVaultFormData, + CrossChainTransferFormData, + DepositLiquidityPoolFormData, + LoanFormData +} from './schemas'; export * from './schemas'; export type { FormErrors } from './use-form'; export { useForm } from './use-form'; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index 1d584fcd5d..a792ef0fbe 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -15,5 +15,14 @@ export { SwapErrorMessage, swapSchema } from './swap'; +export type { CrossChainTransferFormData, CrossChainTransferValidationParams } from './transfers'; +export { + CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, + CROSS_CHAIN_TRANSFER_FROM_FIELD, + CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, + CROSS_CHAIN_TRANSFER_TO_FIELD, + CROSS_CHAIN_TRANSFER_TOKEN_FIELD, + crossChainTransferSchema +} from './transfers'; export type { CreateVaultFormData } from './vaults'; export { CREATE_VAULT_DEPOSIT_FIELD, createVaultSchema } from './vaults'; diff --git a/src/lib/form/schemas/transfers.ts b/src/lib/form/schemas/transfers.ts new file mode 100644 index 0000000000..a6fe5c5f47 --- /dev/null +++ b/src/lib/form/schemas/transfers.ts @@ -0,0 +1,54 @@ +import { ChainName } from '@interlay/bridge'; +import { TFunction } from 'react-i18next'; + +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const CROSS_CHAIN_TRANSFER_FROM_FIELD = 'transfer-from'; +const CROSS_CHAIN_TRANSFER_TO_FIELD = 'transfer-to'; +const CROSS_CHAIN_TRANSFER_AMOUNT_FIELD = 'transfer-amount'; +const CROSS_CHAIN_TRANSFER_TOKEN_FIELD = 'transfer-token'; +const CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD = 'transfer-account'; + +type CrossChainTransferFormData = { + [CROSS_CHAIN_TRANSFER_FROM_FIELD]?: ChainName; + [CROSS_CHAIN_TRANSFER_TO_FIELD]?: ChainName; + [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]?: string; + [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]?: string; + [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]?: string; +}; + +type CrossChainTransferValidationParams = { + [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: Partial & Partial; +}; + +// MEMO: until now, only CROSS_CHAIN_TRANSFER_AMOUNT_FIELD needs validation +const crossChainTransferSchema = (params: CrossChainTransferValidationParams, t: TFunction): yup.ObjectSchema => + yup.object().shape({ + [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: yup + .string() + .requiredAmount('transfer') + .maxAmount(params[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] as MaxAmountValidationParams) + .minAmount(params[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] as MinAmountValidationParams, 'transfer'), + [CROSS_CHAIN_TRANSFER_FROM_FIELD]: yup + .string() + .required(t('forms.please_enter_your_field', { field: 'source chain' })), + [CROSS_CHAIN_TRANSFER_TO_FIELD]: yup + .string() + .required(t('forms.please_enter_your_field', { field: 'destination chain' })), + [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]: yup + .string() + .required(t('forms.please_enter_your_field', { field: 'destination' })), + [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]: yup + .string() + .required(t('forms.please_select_your_field', { field: 'transfer token' })) + }); + +export { + CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, + CROSS_CHAIN_TRANSFER_FROM_FIELD, + CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, + CROSS_CHAIN_TRANSFER_TO_FIELD, + CROSS_CHAIN_TRANSFER_TOKEN_FIELD, + crossChainTransferSchema +}; +export type { CrossChainTransferFormData, CrossChainTransferValidationParams }; diff --git a/src/lib/form/use-form.tsx b/src/lib/form/use-form.tsx index 48c668f13e..7e62e97bd9 100644 --- a/src/lib/form/use-form.tsx +++ b/src/lib/form/use-form.tsx @@ -15,7 +15,7 @@ type GetFieldProps = ( withErrorMessage?: boolean ) => FieldInputProps & { errorMessage?: string | string[] }; -type UseFormAgrs = FormikConfig & { +type UseFormArgs = FormikConfig & { disableValidation?: boolean; getFieldProps?: GetFieldProps; }; @@ -25,7 +25,7 @@ const useForm = ({ validationSchema, disableValidation, ...args -}: UseFormAgrs) => { +}: UseFormArgs) => { const { t } = useTranslation(); const { validateForm, values, getFieldProps: getFormikFieldProps, ...formik } = useFormik({ ...args, diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx new file mode 100644 index 0000000000..1c1ee33b0b --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx @@ -0,0 +1,42 @@ +import styled from 'styled-components'; + +import { ArrowRightCircle } from '@/assets/icons'; +import { Dl, Flex, theme } from '@/component-library'; + +import { ChainSelect } from './components'; + +const StyledDl = styled(Dl)` + background-color: ${theme.card.bg.secondary}; + padding: ${theme.spacing.spacing4}; + font-size: ${theme.text.xs}; + border-radius: ${theme.rounded.rg}; +`; + +const StyledArrowRightCircle = styled(ArrowRightCircle)` + transform: rotate(90deg); + align-self: center; + + @media (min-width: 30em) { + transform: rotate(0deg); + margin-top: 1.75rem; + } +`; + +const ChainSelectSection = styled(Flex)` + flex-direction: column; + + @media (min-width: 30em) { + flex-direction: row; + gap: ${theme.spacing.spacing4}; + } +`; + +const StyledSourceChainSelect = styled(ChainSelect)` + margin-bottom: ${theme.spacing.spacing3}; + + @media (min-width: 30em) { + margin-bottom: 0; + } +`; + +export { ChainSelectSection, StyledArrowRightCircle, StyledDl, StyledSourceChainSelect }; diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx new file mode 100644 index 0000000000..85b5cd0eb1 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx @@ -0,0 +1,293 @@ +import { FixedPointNumber } from '@acala-network/sdk-core'; +import { ChainName, CrossChainTransferParams } from '@interlay/bridge'; +import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { web3FromAddress } from '@polkadot/extension-dapp'; +import { mergeProps } from '@react-aria/utils'; +import { ChangeEventHandler, Key, useCallback, useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useMutation } from 'react-query'; +import { toast } from 'react-toastify'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Dd, DlGroup, Dt, Flex, LoadingSpinner, TokenInput } from '@/component-library'; +import { AccountSelect, AuthCTA } from '@/components'; +import { + CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, + CROSS_CHAIN_TRANSFER_FROM_FIELD, + CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, + CROSS_CHAIN_TRANSFER_TO_FIELD, + CROSS_CHAIN_TRANSFER_TOKEN_FIELD, + CrossChainTransferFormData, + crossChainTransferSchema, + CrossChainTransferValidationParams, + isFormDisabled, + useForm +} from '@/lib/form'; +import { useSubstrateSecureState } from '@/lib/substrate'; +import { Chains } from '@/types/chains'; +import { submitExtrinsic } from '@/utils/helpers/extrinsic'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { useXCMBridge, XCMTokenData } from '@/utils/hooks/api/xcm/use-xcm-bridge'; +import useAccountId from '@/utils/hooks/use-account-id'; + +import { ChainSelect } from './components'; +import { + ChainSelectSection, + StyledArrowRightCircle, + StyledDl, + StyledSourceChainSelect +} from './CrossChainTransferForm.styles'; + +const CrossChainTransferForm = (): JSX.Element => { + const [destinationChains, setDestinationChains] = useState([]); + const [transferableTokens, setTransferableTokens] = useState([]); + const [currentToken, setCurrentToken] = useState(); + + const prices = useGetPrices(); + const { t } = useTranslation(); + const { getCurrencyFromTicker } = useGetCurrencies(true); + + const accountId = useAccountId(); + const { accounts } = useSubstrateSecureState(); + + const { data, getDestinationChains, originatingChains, getAvailableTokens } = useXCMBridge(); + + const schema: CrossChainTransferValidationParams = { + [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: { + minAmount: currentToken + ? newMonetaryAmount(currentToken.minTransferAmount, getCurrencyFromTicker(currentToken.value), true) + : undefined, + maxAmount: currentToken + ? newMonetaryAmount(currentToken.balance, getCurrencyFromTicker(currentToken.value), true) + : undefined + } + }; + + const mutateXcmTransfer = async (formData: CrossChainTransferFormData) => { + if (!data || !formData || !currentToken) return; + + const { signer } = await web3FromAddress(formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string); + const adapter = data.bridge.findAdapter(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName); + const apiPromise = data.provider.getApiPromise(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as string); + + apiPromise.setSigner(signer); + adapter.setApi(apiPromise); + + const transferAmount = newMonetaryAmount( + form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] || 0, + getCurrencyFromTicker(currentToken.value), + true + ); + + const transferAmountString = transferAmount.toString(true); + const transferAmountDecimals = transferAmount.currency.decimals; + + const tx = adapter.createTx({ + amount: FixedPointNumber.fromInner(transferAmountString, transferAmountDecimals), + to: formData[CROSS_CHAIN_TRANSFER_TO_FIELD], + token: formData[CROSS_CHAIN_TRANSFER_TOKEN_FIELD], + address: formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] + } as CrossChainTransferParams); + + await submitExtrinsic({ extrinsic: tx }); + }; + + const handleSubmit = (formData: CrossChainTransferFormData) => { + xcmTransferMutation.mutate(formData); + }; + + const form = useForm({ + initialValues: { + [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: '', + [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]: '', + [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]: accountId?.toString() || '' + }, + onSubmit: handleSubmit, + validationSchema: crossChainTransferSchema(schema, t) + }); + + const xcmTransferMutation = useMutation(mutateXcmTransfer, { + onSuccess: async () => { + toast.success('Transfer successful'); + + setTokenData(form.values[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName); + form.setFieldValue(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, ''); + }, + onError: (err) => { + toast.error(err.message); + } + }); + + const handleOriginatingChainChange = (chain: ChainName, name: string) => { + form.setFieldValue(name, chain); + + const destinationChains = getDestinationChains(chain); + + setDestinationChains(destinationChains); + form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_FIELD, destinationChains[0].id); + }; + + const handleDestinationChainChange = async (chain: ChainName, name: string) => { + if (!accountId) return; + + form.setFieldValue(name, chain); + + setTokenData(chain); + }; + + const handleTickerChange = (ticker: string, name: string) => { + form.setFieldValue(name, ticker); + setCurrentToken(transferableTokens.find((token) => token.value === ticker)); + }; + + const handleDestinationAccountChange: ChangeEventHandler = (e) => { + form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, e.target.value); + }; + + const setTokenData = useCallback( + async (destination: ChainName) => { + if (!accountId || !form) return; + + const tokens = await getAvailableTokens( + form.values[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName, + destination, + accountId.toString(), + form.values[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string + ); + + if (!tokens) return; + + setTransferableTokens(tokens); + + // Update token data if selected token exists in new data + const token = tokens.find((token) => token.value === currentToken?.value) || tokens[0]; + + setCurrentToken(token); + form.setFieldValue(CROSS_CHAIN_TRANSFER_TOKEN_FIELD, token.value); + }, + [accountId, currentToken, form, getAvailableTokens] + ); + + const transferMonetaryAmount = currentToken + ? newSafeMonetaryAmount( + form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] || 0, + getCurrencyFromTicker(currentToken.value), + true + ) + : 0; + + const valueUSD = transferMonetaryAmount + ? convertMonetaryAmountToValueInUSD( + transferMonetaryAmount, + getTokenPrice(prices, currentToken?.value as string)?.usd + ) + : 0; + + const isCTADisabled = isFormDisabled(form) || form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] === ''; + const amountShouldValidate = form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] !== ''; + + useEffect(() => { + if (!originatingChains?.length) return; + + // This prevents a render loop caused by setFieldValue + if (form.values[CROSS_CHAIN_TRANSFER_FROM_FIELD]) return; + + const destinationChains = getDestinationChains(originatingChains[0].id); + + form.setFieldValue(CROSS_CHAIN_TRANSFER_FROM_FIELD, originatingChains[0].id); + form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_FIELD, destinationChains[0].id); + + setDestinationChains(destinationChains); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [originatingChains]); + + useEffect(() => { + if (!destinationChains?.length) return; + if (!accountId) return; + + setTokenData(destinationChains[0].id); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accountId, destinationChains]); + + if (!originatingChains || !destinationChains || !transferableTokens.length) { + return ( + + + + ); + } + + return ( +
+ + + + handleOriginatingChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_FROM_FIELD) + } + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false), { + onChange: handleOriginatingChainChange + })} + /> + + + handleDestinationChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_TO_FIELD) + } + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false), { + onChange: handleDestinationChainChange + })} + /> + +
+ + handleTickerChange(ticker as string, CROSS_CHAIN_TRANSFER_TOKEN_FIELD), + items: transferableTokens + })} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, amountShouldValidate))} + /> +
+ + + +
+ Origin chain transfer fee +
+
{currentToken?.originFee}
+ + +
+ Destination chain transfer fee estimate +
+
{`${currentToken?.destFee.toString()} ${currentToken?.value}`}
+ + + + {isCTADisabled ? 'Enter transfer amount' : t('transfer')} + + +
+ ); +}; + +export default CrossChainTransferForm; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx index 3a6611d6e2..339e83d336 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx @@ -3,12 +3,16 @@ import { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react'; import { IconProps } from '@/component-library/Icon'; import { StyledFallbackIcon } from './ChainIcon.style'; -import { INTERLAY, KINTSUGI, KUSAMA, POLKADOT, STATEMINE, STATEMINT } from './icons'; +import { BIFROST, HEIKO, HYDRA, INTERLAY, KARURA, KINTSUGI, KUSAMA, POLKADOT, STATEMINE, STATEMINT } from './icons'; type ChainComponent = ForwardRefExoticComponent>; const chainsIcon: Record = { + BIFROST, + HEIKO, + HYDRA, INTERLAY, + KARURA, KINTSUGI, KUSAMA, POLKADOT, diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx new file mode 100644 index 0000000000..6abf1e24bd --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx @@ -0,0 +1,38 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const BIFROST = forwardRef((props, ref) => ( + + BIFROST + + + + + + + + + + + + + + + + + + + + + + +)); + +BIFROST.displayName = 'KINTSUGI'; + +export { BIFROST }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx new file mode 100644 index 0000000000..39afe777c3 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx @@ -0,0 +1,47 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const HEIKO = forwardRef((props, ref) => ( + + HEIKO + + + + + + + + + + + + + + + + + +)); + +HEIKO.displayName = 'HEIKO'; + +export { HEIKO }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx new file mode 100644 index 0000000000..58f99aa0e3 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const HYDRA = forwardRef((props, ref) => ( + + HYDRA + + + + + + + + + + + + + + + +)); + +HYDRA.displayName = 'INTERLAY'; + +export { HYDRA }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx new file mode 100644 index 0000000000..2306754c2f --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx @@ -0,0 +1,51 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const KARURA = forwardRef((props, ref) => ( + + KARURA + + + + + + + + + + + + + + + + + + + +)); + +KARURA.displayName = 'KINTSUGI'; + +export { KARURA }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts index df6ed50da9..e5d13a7014 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts @@ -1,4 +1,8 @@ +export { BIFROST } from './Bifrost'; +export { HEIKO } from './Heiko'; +export { HYDRA } from './Hydra'; export { INTERLAY } from './Interlay'; +export { KARURA } from './Karura'; export { KINTSUGI } from './Kintsugi'; export { KUSAMA } from './Kusama'; export { POLKADOT } from './Polkadot'; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx new file mode 100644 index 0000000000..fe740a65eb --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components'; + +import { Flex } from '@/component-library/Flex'; +import { Span } from '@/component-library/Text'; +import { theme } from '@/component-library/theme'; + +type StyledListItemSelectedLabelProps = { + $isSelected: boolean; +}; + +const StyledChain = styled.span` + font-size: ${theme.text.s}; + color: ${theme.colors.textPrimary}; + overflow: hidden; + text-overflow: ellipsis; +`; + +const StyledListItemLabel = styled(Span)` + color: ${({ $isSelected }) => + $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; + text-overflow: ellipsis; + overflow: hidden; +`; + +const StyledListChainWrapper = styled(Flex)` + overflow: hidden; +`; + +export { StyledChain, StyledListChainWrapper, StyledListItemLabel }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx new file mode 100644 index 0000000000..1506d894e6 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx @@ -0,0 +1,53 @@ +import { Flex } from '@/component-library'; +import { Item, Select, SelectProps } from '@/component-library'; +import { useSelectModalContext } from '@/component-library/Select/SelectModalContext'; +import { ChainData } from '@/types/chains'; + +import { ChainIcon } from '../ChainIcon'; +import { StyledChain, StyledListChainWrapper, StyledListItemLabel } from './ChainSelect.style'; + +type ChainSelectProps = Omit, 'children' | 'type'>; + +const ListItem = ({ data }: { data: ChainData }) => { + const isSelected = useSelectModalContext().selectedItem?.key === data.id; + + return ( + + + + {data.display} + + + ); +}; + +const Value = ({ data }: { data: ChainData }) => ( + + + {data.display} + +); + +const ChainSelect = ({ ...props }: ChainSelectProps): JSX.Element => { + return ( + + + {...props} + type='modal' + renderValue={(item) => } + modalTitle='Select Token' + > + {(data: ChainData) => ( + + + + )} + + + ); +}; + +ChainSelect.displayName = 'ChainSelect'; + +export { ChainSelect }; +export type { ChainSelectProps }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx new file mode 100644 index 0000000000..2e2851d120 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx @@ -0,0 +1,2 @@ +export type { ChainSelectProps } from './ChainSelect'; +export { ChainSelect } from './ChainSelect'; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/index.tsx b/src/pages/Transfer/CrossChainTransferForm/components/index.tsx index 98ff9e319b..6cb7e0e8e5 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/index.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/components/index.tsx @@ -1,4 +1,4 @@ -import { ChainIcon, ChainIconProps } from './ChainIcon'; +import { ChainSelect, ChainSelectProps } from './ChainSelect'; -export { ChainIcon }; -export type { ChainIconProps }; +export { ChainSelect }; +export type { ChainSelectProps }; diff --git a/src/pages/Transfer/CrossChainTransferForm/index.tsx b/src/pages/Transfer/CrossChainTransferForm/index.tsx index 0996fe956d..b2417c4fb7 100644 --- a/src/pages/Transfer/CrossChainTransferForm/index.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/index.tsx @@ -1,377 +1,3 @@ -import { FixedPointNumber } from '@acala-network/sdk-core'; -import { BasicToken, CrossChainTransferParams } from '@interlay/bridge'; -import { CurrencyExt, DefaultTransactionAPI, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { ApiPromise } from '@polkadot/api'; -import { web3FromAddress } from '@polkadot/extension-dapp'; -import Big from 'big.js'; -import * as React from 'react'; -import { useEffect } from 'react'; -import { withErrorBoundary } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; -import { firstValueFrom } from 'rxjs'; +import CrossChainTransferForm from './CrossChainTransferForm'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; -import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { AuthCTA } from '@/components'; -import Accounts from '@/legacy-components/Accounts'; -import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; -import Chains, { ChainOption } from '@/legacy-components/Chains'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; -import FormTitle from '@/legacy-components/FormTitle'; -import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; -import TokenField from '@/legacy-components/TokenField'; -import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; -import STATUSES from '@/utils/constants/statuses'; -import { getExtrinsicStatus } from '@/utils/helpers/extrinsic'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useXCMBridge } from '@/utils/hooks/api/xcm/use-xcm-bridge'; - -import { ChainIcon } from './components'; - -const TRANSFER_AMOUNT = 'transfer-amount'; - -type CrossChainTransferFormData = { - [TRANSFER_AMOUNT]: string; -}; - -const CrossChainTransferForm = (): JSX.Element => { - const [fromChains, setFromChains] = React.useState | undefined>(undefined); - const [fromChain, setFromChain] = React.useState(undefined); - const [toChains, setToChains] = React.useState | undefined>(undefined); - const [toChain, setToChain] = React.useState(undefined); - const [transferableBalance, setTransferableBalance] = React.useState(undefined); - const [destination, setDestination] = React.useState(undefined); - const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); - const [approxUsdValue, setApproxUsdValue] = React.useState('0'); - const [currency, setCurrency] = React.useState(undefined); - - // TODO: this will need to be refactored when we support multiple currencies - // per channel, but so will the UI so better to handle this then. - const { t } = useTranslation(); - const prices = useGetPrices(); - - const { XCMBridge, XCMProvider } = useXCMBridge(); - - const { - register, - handleSubmit, - formState: { errors }, - reset, - setValue, - trigger - } = useForm({ - mode: 'onChange' - }); - - const { selectedAccount } = useSubstrateSecureState(); - const { parachainStatus } = useSelector((state: StoreType) => state.general); - - useEffect(() => { - if (!XCMBridge) return; - if (!fromChain) return; - if (!toChain) return; - // TODO: This handles a race condition. Will need to be fixed properly - // when supporting USDT - if (fromChain.name === toChain.name) return; - - const tokens = XCMBridge.router.getAvailableTokens({ from: fromChain.type, to: toChain.type }); - - const supportedCurrency = XCMBridge.findAdapter(fromChain.type).getToken(tokens[0], fromChain.type); - - setCurrency(supportedCurrency); - }, [fromChain, toChain, XCMBridge]); - - useEffect(() => { - if (!XCMBridge) return; - if (!fromChain) return; - if (!toChain) return; - if (!selectedAccount) return; - if (!currency) return; - if (!destination) return; - // TODO: This handles a race condition. Will need to be fixed properly - // when supporting USDT - if (toChain.type === fromChain.type) return; - - const getMaxTransferrable = async () => { - // TODO: Resolve type issue caused by version mismatch - // and remove casting to `any` - const inputConfigs: any = await firstValueFrom( - XCMBridge.findAdapter(fromChain.type).subscribeInputConfigs({ - to: toChain?.type, - token: currency.symbol, - address: destination.address, - signer: selectedAccount.address - }) as any - ); - - const maxInputToBig = Big(inputConfigs.maxInput.toString()); - - // Never show less than zero - const transferableBalance = inputConfigs.maxInput < inputConfigs.minInput ? 0 : maxInputToBig; - - setTransferableBalance(newMonetaryAmount(transferableBalance, (currency as unknown) as CurrencyExt, true)); - }; - - getMaxTransferrable(); - }, [currency, fromChain, toChain, selectedAccount, destination, XCMBridge]); - - useEffect(() => { - if (!XCMBridge) return; - if (!XCMProvider) return; - - const availableFromChains: Array = XCMBridge.adapters.map((adapter: any) => { - return { - type: adapter.chain.id, - name: adapter.chain.display, - icon: - }; - }); - - setFromChains(availableFromChains); - setFromChain(availableFromChains[0]); - }, [XCMBridge, XCMProvider]); - - useEffect(() => { - if (!XCMBridge) return; - if (!fromChain) return; - - const destinationChains = XCMBridge.router.getDestinationChains({ from: fromChain.type }); - - const availableToChains = destinationChains.map((chain: any) => { - return { - type: chain.id, - name: chain.display, - icon: - }; - }); - - setToChains(availableToChains); - setToChain(availableToChains[0]); - }, [fromChain, XCMBridge]); - - const onSubmit = async (data: CrossChainTransferFormData) => { - if (!selectedAccount) return; - if (!destination) return; - - try { - setSubmitStatus(STATUSES.PENDING); - - if (!XCMBridge || !fromChain || !toChain) return; - - const sendTransaction = async () => { - const { signer } = await web3FromAddress(selectedAccount.address.toString()); - - const adapter = XCMBridge.findAdapter(fromChain.type); - - const apiPromise = (XCMProvider.getApiPromise(fromChain.type) as unknown) as ApiPromise; - - apiPromise.setSigner(signer); - - // TODO: Version mismatch with ApiPromise type. This should be inferred. - adapter.setApi(apiPromise as any); - - const transferAmount = new MonetaryAmount((currency as unknown) as CurrencyExt, data[TRANSFER_AMOUNT]); - const transferAmountString = transferAmount.toString(true); - const transferAmountDecimals = transferAmount.currency.decimals; - - // TODO: Transaction is in promise form - const tx: any = adapter.createTx({ - amount: FixedPointNumber.fromInner(transferAmountString, transferAmountDecimals), - to: toChain.type, - token: currency?.symbol, - address: destination.address - } as CrossChainTransferParams); - - const inBlockStatus = getExtrinsicStatus('InBlock'); - - await DefaultTransactionAPI.sendLogged(apiPromise, selectedAccount.address, tx, undefined, inBlockStatus); - }; - - await sendTransaction(); - - setSubmitStatus(STATUSES.RESOLVED); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - setSubmitError(error); - } - }; - - const handleUpdateUsdAmount = (value: string) => { - if (!value) return; - - const tokenAmount = newMonetaryAmount(value, (currency as unknown) as CurrencyExt, true); - - const usd = currency - ? displayMonetaryAmountInUSDFormat(tokenAmount, getTokenPrice(prices, currency.symbol)?.usd) - : '0'; - - setApproxUsdValue(usd); - }; - - const validateTransferAmount = async (value: string) => { - if (!toChain) return; - if (!fromChain) return; - if (!destination) return; - if (!selectedAccount) return; - if (!currency) return; - - const balanceMonetaryAmount = newMonetaryAmount(transferableBalance, (currency as unknown) as CurrencyExt, true); - const transferAmount = newMonetaryAmount(value, (currency as unknown) as CurrencyExt, true); - - // TODO: Resolve type issue caused by version mismatch - // and remove casting to `any` - const inputConfigs: any = await firstValueFrom( - XCMBridge.findAdapter(fromChain.type).subscribeInputConfigs({ - to: toChain?.type, - token: currency?.symbol, - address: destination.address, - signer: selectedAccount.address - }) as any - ); - - const minInputToBig = Big(inputConfigs.minInput.toString()); - const maxInputToBig = Big(inputConfigs.maxInput.toString()); - - if (balanceMonetaryAmount.lt(transferAmount)) { - return t('xcm_transfer.validation.insufficient_funds'); - } else if (minInputToBig.gt(transferableBalance)) { - return t('xcm_transfer.validation.balance_lower_minimum'); - } else if (minInputToBig.gt(transferAmount.toBig())) { - return t('xcm_transfer.validation.transfer_more_than_minimum', { - amount: `${inputConfigs.minInput.toString()} ${currency.symbol}` - }); - } else if (maxInputToBig.lt(transferAmount.toBig())) { - return t('xcm_transfer.validation.transfer_less_than_maximum', { - amount: `${inputConfigs.maxInput.toString()} ${currency.symbol}` - }); - } else { - return undefined; - } - }; - - const handleSetFromChain = (chain: ChainOption) => { - // Return from function is user clicks on current chain option - if (chain === fromChain) return; - - // Note: this is a workaround but ok for now. Component will be refactored - // when we introduce support for multiple currencies per channel - setCurrency(undefined); - setToChain(undefined); - setValue(TRANSFER_AMOUNT, ''); - setFromChain(chain); - }; - - const handleSetToChain = (chain: ChainOption) => { - // Return from function is user clicks on current chain option - if (chain === toChain) return; - - // Note: this is a workaround but ok for now. Component will be refactored - // when we introduce support for multiple currencies per channel - setCurrency(undefined); - setValue(TRANSFER_AMOUNT, ''); - setToChain(chain); - }; - - const handleClickBalance = () => { - setValue(TRANSFER_AMOUNT, transferableBalance.toString()); - handleUpdateUsdAmount(transferableBalance); - trigger(TRANSFER_AMOUNT); - }; - - // This ensures that triggering the notification and clearing - // the form happen at the same time. - React.useEffect(() => { - if (submitStatus !== STATUSES.RESOLVED) return; - - toast.success(t('transfer_page.successfully_transferred')); - - reset({ - [TRANSFER_AMOUNT]: '' - }); - }, [submitStatus, reset, t]); - - if (!XCMBridge || !toChain || !fromChain || !currency) { - return ; - } - - return ( - <> -
- {t('transfer_page.cross_chain_transfer_form.title')} -
- - handleUpdateUsdAmount(e.target.value), - required: { - value: true, - message: t('transfer_page.cross_chain_transfer_form.please_enter_amount') - }, - validate: (value) => validateTransferAmount(value) - })} - error={!!errors[TRANSFER_AMOUNT]} - helperText={errors[TRANSFER_AMOUNT]?.message} - label={currency.symbol} - approxUSD={`≈ ${approxUsdValue}`} - /> -
- - - - - {t('transfer')} - - - {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} - - ); -}; - -export default withErrorBoundary(CrossChainTransferForm, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); +export default CrossChainTransferForm; diff --git a/src/pages/Transfer/Transfer.style.tsx b/src/pages/Transfer/Transfer.style.tsx new file mode 100644 index 0000000000..4ec3066518 --- /dev/null +++ b/src/pages/Transfer/Transfer.style.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import { theme } from '@/component-library'; + +const StyledWrapper = styled.div` + margin-top: ${theme.spacing.spacing6}; +`; + +export { StyledWrapper }; diff --git a/src/pages/Transfer/index.tsx b/src/pages/Transfer/index.tsx index ed2ea96777..2dbbc7ac0b 100644 --- a/src/pages/Transfer/index.tsx +++ b/src/pages/Transfer/index.tsx @@ -1,111 +1,31 @@ import clsx from 'clsx'; -import * as React from 'react'; -import { useTranslation } from 'react-i18next'; -import Hr1 from '@/legacy-components/hrs/Hr1'; +import { Flex, Tabs, TabsItem } from '@/component-library'; import Panel from '@/legacy-components/Panel'; -import InterlayRouterLink from '@/legacy-components/UI/InterlayRouterLink'; -import InterlayTabGroup, { - InterlayTab, - InterlayTabList, - InterlayTabPanel, - InterlayTabPanels -} from '@/legacy-components/UI/InterlayTabGroup'; -import WarningBanner from '@/legacy-components/WarningBanner'; import MainContainer from '@/parts/MainContainer'; -import { QUERY_PARAMETERS } from '@/utils/constants/links'; -import { POLKADOT } from '@/utils/constants/relay-chain-names'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters, { QueryParameters } from '@/utils/hooks/use-update-query-parameters'; import CrossChainTransferForm from './CrossChainTransferForm'; +import { StyledWrapper } from './Transfer.style'; import TransferForm from './TransferForm'; -const TAB_IDS = Object.freeze({ - transfer: 'transfer', - crossChainTransfer: 'crossChainTransfer' -}); - -const TAB_ITEMS = [ - { - id: TAB_IDS.transfer, - label: 'transfer' - }, - { - id: TAB_IDS.crossChainTransfer, - label: 'cross chain transfer' - } -]; - const Transfer = (): JSX.Element | null => { - const queryParams = useQueryParams(); - const selectedTabId = queryParams.get(QUERY_PARAMETERS.TAB); - const updateQueryParameters = useUpdateQueryParameters(); - - const { t } = useTranslation(); - - const updateQueryParametersRef = React.useRef<(newQueryParameters: QueryParameters) => void>(); - - React.useLayoutEffect(() => { - updateQueryParametersRef.current = updateQueryParameters; - }); - - React.useEffect(() => { - if (!updateQueryParametersRef.current) return; - - const tabIdValues = Object.values(TAB_IDS); - switch (true) { - case selectedTabId === null: - case selectedTabId && !tabIdValues.includes(selectedTabId): - updateQueryParametersRef.current({ - [QUERY_PARAMETERS.TAB]: TAB_IDS.transfer - }); - } - }, [selectedTabId]); - - const selectedTabIndex = TAB_ITEMS.findIndex((tabItem) => tabItem.id === selectedTabId); - - const handleTabSelect = (index: number) => { - updateQueryParameters({ - [QUERY_PARAMETERS.TAB]: TAB_ITEMS[index].id - }); - }; - return ( - {process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT && ( - -

- In order to transfer Interlay tokens to Acala or Moonbeam, please use their respective dApps. Send tokens to{' '} - - Acala - {' '} - |{' '} - - Moonbeam - -

- - )} - - - {TAB_ITEMS.map((tabItem) => ( - - {t(tabItem.label)} - - ))} - - - - - - - - - - - + + + + + + + + + + + + + + ); diff --git a/src/types/chains.d.ts b/src/types/chains.d.ts new file mode 100644 index 0000000000..4f3fdfb322 --- /dev/null +++ b/src/types/chains.d.ts @@ -0,0 +1,10 @@ +import { ChainName } from '@interlay/bridge'; + +type ChainData = { + display: string; + id: ChainName; +}; + +type Chains = ChainData[]; + +export type { ChainData, Chains }; diff --git a/src/types/chains.types.ts b/src/types/chains.types.ts deleted file mode 100644 index 74ee07fd8b..0000000000 --- a/src/types/chains.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -type XCMChains = 'polkadot' | 'interlay'; - -export type { XCMChains }; diff --git a/src/utils/hooks/api/xcm/use-xcm-bridge.ts b/src/utils/hooks/api/xcm/use-xcm-bridge.ts index 4b086c55c8..32a6845d77 100644 --- a/src/utils/hooks/api/xcm/use-xcm-bridge.ts +++ b/src/utils/hooks/api/xcm/use-xcm-bridge.ts @@ -1,70 +1,150 @@ +import { FixedPointNumber } from '@acala-network/sdk-core'; import { ApiProvider, Bridge, ChainName } from '@interlay/bridge/build'; -import { useEffect, useState } from 'react'; +import { BaseCrossChainAdapter } from '@interlay/bridge/build/base-chain-adapter'; +import { atomicToBaseAmount, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import Big from 'big.js'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryResult } from 'react-query'; import { firstValueFrom } from 'rxjs'; +import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; import { XCM_ADAPTERS } from '@/config/relay-chains'; -import { BITCOIN_NETWORK } from '@/constants'; +import { Chains } from '@/types/chains'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -// MEMO: BitcoinNetwork type is not available on XCM bridge -const XCMNetwork = BITCOIN_NETWORK === 'mainnet' ? 'mainnet' : 'testnet'; +import { XCMEndpoints } from './xcm-endpoints'; const XCMBridge = new Bridge({ adapters: Object.values(XCM_ADAPTERS) }); -// TODO: This config needs to be pushed higher up the app. -// Not sure how this will look: something to decide when -// adding USDT support. -const getEndpoints = (chains: ChainName[]) => { - switch (true) { - case chains.includes('kusama'): - return { - kusama: ['wss://kusama-rpc.polkadot.io', 'wss://kusama.api.onfinality.io/public-ws'], - kintsugi: ['wss://api-kusama.interlay.io/parachain', 'wss://kintsugi.api.onfinality.io/public-ws'], - statemine: ['wss://statemine-rpc.polkadot.io', 'wss://statemine.api.onfinality.io/public-ws'] - }; - case chains.includes('polkadot'): - return { - polkadot: ['wss://rpc.polkadot.io', 'wss://polkadot.api.onfinality.io/public-ws'], - interlay: ['wss://api.interlay.io/parachain', 'wss://interlay.api.onfinality.io/public-ws'], - statemint: ['wss://statemint-rpc.polkadot.io', 'wss://statemint.api.onfinality.io/public-ws'] - }; - - default: - return undefined; - } +type XCMBridgeData = { + bridge: Bridge; + provider: ApiProvider; }; -// const useXCMBridge = (): { XCMProvider: ApiProvider; XCMBridge: Bridge } => { -const useXCMBridge = (): { XCMProvider: ApiProvider; XCMBridge: Bridge } => { - const [XCMProvider, setXCMProvider] = useState(); - - useEffect(() => { - const createBridge = async () => { - const XCMProvider = new ApiProvider(XCMNetwork); - const chains = Object.keys(XCM_ADAPTERS) as ChainName[]; - - // Check connection - // TODO: Get rid of any casting - mismatch between ApiRx types - await firstValueFrom(XCMProvider.connectFromChain(chains, getEndpoints(chains)) as any); - - // Set Apis - await Promise.all( - chains.map((chain: ChainName) => - // TODO: Get rid of any casting - mismatch between ApiRx types - XCMBridge.findAdapter(chain).setApi(XCMProvider.getApi(chain) as any) - ) - ); +type XCMTokenData = { + balance: string; + balanceUSD: string; + destFee: FixedPointNumber; + originFee: string; + minTransferAmount: Big; + value: string; +}; + +type UseXCMBridge = UseQueryResult & { + originatingChains: Chains | undefined; + getDestinationChains: (chain: ChainName) => Chains; + getAvailableTokens: ( + from: ChainName, + to: ChainName, + originAddress: string, + destinationAddress: string + ) => Promise; +}; + +const initXCMBridge = async () => { + const XCMProvider = new ApiProvider(); + const chains = Object.keys(XCM_ADAPTERS) as ChainName[]; + + await firstValueFrom(XCMProvider.connectFromChain(chains, XCMEndpoints)); + + // Set Apis + await Promise.all(chains.map((chain: ChainName) => XCMBridge.findAdapter(chain).setApi(XCMProvider.getApi(chain)))); + + return { provider: XCMProvider, bridge: XCMBridge }; +}; + +const useXCMBridge = (): UseXCMBridge => { + const queryKey = ['available-xcm-channels']; + + const queryResult = useQuery({ + queryKey, + queryFn: initXCMBridge, + refetchInterval: false + }); + + const { data, error } = queryResult; + const prices = useGetPrices(); - setXCMProvider(XCMProvider); + const originatingChains = data?.bridge.adapters.map((adapter: BaseCrossChainAdapter) => { + return { + display: adapter.chain.display, + id: adapter.chain.id as ChainName }; + }); + + const getDestinationChains = useCallback( + (chain: ChainName): Chains => { + return XCMBridge.router + .getDestinationChains({ from: chain }) + .filter((destinationChain) => + originatingChains?.some((originatingChain) => originatingChain.id === destinationChain.id) + ) as Chains; + }, + [originatingChains] + ); + + const getAvailableTokens = useCallback( + async (from, to, originAddress, destinationAddress) => { + if (!data) return; + + const tokens = XCMBridge.router.getAvailableTokens({ from, to }); + + const inputConfigs = await Promise.all( + tokens.map(async (token) => { + const inputConfig = await firstValueFrom( + data.bridge.findAdapter(from).subscribeInputConfigs({ + to, + token, + address: destinationAddress, + signer: originAddress + }) + ); + + // TODO: resolve type mismatch with BaseCrossChainAdapter and remove `any` + const originAdapter = data.bridge.findAdapter(from) as any; + + const maxInputToBig = Big(inputConfig.maxInput.toString()); + const minInputToBig = Big(inputConfig.minInput.toString()); + + // Never show less than zero + const transferableBalance = inputConfig.maxInput < inputConfig.minInput ? 0 : maxInputToBig; + const currency = XCMBridge.findAdapter(from).getToken(token, from); + + const nativeToken = originAdapter.getNativeToken(); + + const amount = newMonetaryAmount(transferableBalance, (currency as unknown) as CurrencyExt, true); + const balanceUSD = convertMonetaryAmountToValueInUSD(amount, getTokenPrice(prices, token)?.usd); + const originFee = atomicToBaseAmount(inputConfig.estimateFee, nativeToken as CurrencyExt); + + return { + balance: transferableBalance.toString(), + balanceUSD: formatUSD(balanceUSD || 0, { compact: true }), + destFee: inputConfig.destFee.balance, + originFee: `${originFee.toString()} ${nativeToken.symbol}`, + minTransferAmount: minInputToBig, + value: token + }; + }) + ); + + return inputConfigs; + }, + [data, prices] + ); - if (!XCMProvider) { - createBridge(); - } - }, [XCMProvider]); + useErrorHandler(error); - return { XCMProvider, XCMBridge }; + return { + ...queryResult, + originatingChains, + getDestinationChains, + getAvailableTokens + }; }; export { useXCMBridge }; +export type { UseXCMBridge, XCMTokenData }; diff --git a/src/utils/hooks/api/xcm/xcm-endpoints.ts b/src/utils/hooks/api/xcm/xcm-endpoints.ts new file mode 100644 index 0000000000..6b8407c0df --- /dev/null +++ b/src/utils/hooks/api/xcm/xcm-endpoints.ts @@ -0,0 +1,33 @@ +import { ChainName } from '@interlay/bridge'; + +type XCMEndpointsRecord = Record; + +const XCMEndpoints: XCMEndpointsRecord = { + acala: [ + 'wss://acala-rpc-0.aca-api.network', + 'wss://acala-rpc-1.aca-api.network', + 'wss://acala-rpc-3.aca-api.network/ws', + 'wss://acala-rpc.dwellir.com' + ], + astar: ['wss://rpc.astar.network', 'wss://astar-rpc.dwellir.com'], + bifrost: ['wss://bifrost-rpc.dwellir.com'], + heiko: ['wss://heiko-rpc.parallel.fi'], + hydra: ['wss://rpc.hydradx.cloud', 'wss://hydradx-rpc.dwellir.com'], + interlay: ['wss://api.interlay.io/parachain'], + karura: [ + 'wss://karura-rpc-0.aca-api.network', + 'wss://karura-rpc-1.aca-api.network', + 'wss://karura-rpc-2.aca-api.network/ws', + 'wss://karura-rpc-3.aca-api.network/ws', + 'wss://karura-rpc.dwellir.com' + ], + kintsugi: ['wss://api-kusama.interlay.io/parachain'], + kusama: ['wss://kusama-rpc.polkadot.io', 'wss://kusama-rpc.dwellir.com'], + parallel: ['wss://rpc.parallel.fi'], + polkadot: ['wss://rpc.polkadot.io', 'wss://polkadot-rpc.dwellir.com'], + statemine: ['wss://statemine-rpc.polkadot.io', 'wss://statemine-rpc.dwellir.com'], + statemint: ['wss://statemint-rpc.polkadot.io', 'wss://statemint-rpc.dwellir.com'] +}; + +export { XCMEndpoints }; +export type { XCMEndpointsRecord }; diff --git a/src/utils/hooks/use-geoblocking.ts b/src/utils/hooks/use-geoblocking.ts new file mode 100644 index 0000000000..6ca37d3a02 --- /dev/null +++ b/src/utils/hooks/use-geoblocking.ts @@ -0,0 +1,22 @@ +import { useEffect } from 'react'; + +import { GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK } from '@/config/links'; + +const useGeoblocking = (): void => { + useEffect(() => { + const checkCountry = async () => { + try { + const response = await fetch(GEOBLOCK_API_ENDPOINT); + if (response.status === 403) { + console.log('Access from forbidden country detected, user will be redirected.'); + window.location.replace(GEOBLOCK_REDIRECTION_LINK); + } + } catch (error) { + console.log(error); + } + }; + checkCountry(); + }, []); +}; + +export { useGeoblocking }; diff --git a/yarn.lock b/yarn.lock index c5f7031b8b..c887f3b4fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,16 @@ # yarn lockfile v1 +"@acala-network/api-derive@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/api-derive/-/api-derive-4.1.8-13.tgz#0ac02da5494c9f6ea8d52235836ecb369dea443d" + integrity sha512-Bm7005fPvFMcohvlpbGJMpm0Vm/63PTkRcg0shZvcjuMak3YSR0NhceZRnMoHz+I0Ond5XGRjZVZA/eyRMbSsg== + dependencies: + "@acala-network/types" "4.1.8-13" + "@babel/runtime" "^7.10.2" + "@open-web3/orml-types" "^1.1.4" + "@polkadot/api-derive" "^8.5.1" + "@acala-network/api-derive@4.1.8-9": version "4.1.8-9" resolved "https://registry.yarnpkg.com/@acala-network/api-derive/-/api-derive-4.1.8-9.tgz#f4d3969665fe2e92d2fca73d2c403e4f26b519bd" @@ -12,7 +22,19 @@ "@open-web3/orml-types" "^1.1.4" "@polkadot/api-derive" "^8.5.1" -"@acala-network/api@4.1.8-9", "@acala-network/api@~4.1.8-9": +"@acala-network/api@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/api/-/api-4.1.8-13.tgz#8127edaba9802eaa6a20678e823f43f2affb6067" + integrity sha512-+m032NiYPAvbOHeaJrCKQuACe9hykNTpQpDKeKkg0RME9JnFKeR7TYLkWtInhbmql6b8LxAAdpy2gdQctrsCRA== + dependencies: + "@acala-network/api-derive" "4.1.8-13" + "@acala-network/types" "4.1.8-13" + "@babel/runtime" "^7.10.2" + "@open-web3/orml-api-derive" "^1.1.4" + "@polkadot/api" "^9.9.1" + "@polkadot/rpc-core" "^9.9.1" + +"@acala-network/api@~4.1.8-9": version "4.1.8-9" resolved "https://registry.yarnpkg.com/@acala-network/api/-/api-4.1.8-9.tgz#9213e09b7c43b3df95eaf47fe78c989ddfe4207e" integrity sha512-9kpYQYe5vBCKWlyABh+Q2sjONDdtNfdv0PL0Tek3bpt00a3VjNIZvQro5ZSwzdpGJs5YcsiWPRMBq3iMgJNtGQ== @@ -29,7 +51,7 @@ resolved "https://registry.yarnpkg.com/@acala-network/contracts/-/contracts-4.3.4.tgz#f37cf54894c72b762df539042a61f90b10b68600" integrity sha512-oBgXGUjRW+lRo9TWGtCB1+OpEOFfhxW//wReb7V/YdbEElVvYuKw3lmfly/eZ/mdBgqxA3eXxNW0AgXiyOn2NQ== -"@acala-network/eth-providers@^2.5.4": +"@acala-network/eth-providers@^2.5.9": version "2.6.5" resolved "https://registry.yarnpkg.com/@acala-network/eth-providers/-/eth-providers-2.6.5.tgz#9087abe44a0686de5188ea962961519ecff20e66" integrity sha512-Y0hi0LRN8pJ144dv9WcSi9nPn5Wez0h745EGa1/6NFtU7jsua0jg25WYJ53s17rXIMz8GUKdln9SAIeShQiEtw== @@ -79,10 +101,10 @@ "@ethersproject/wallet" "~5.7.0" "@polkadot/util-crypto" "^10.2.1" -"@acala-network/sdk-core@4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/sdk-core/-/sdk-core-4.1.8-9.tgz#47de650483f74aa9320d9ff9a8cdcf0e48b4a192" - integrity sha512-hjJ4Qs20aacg9vUnt2xZne3nN+c73zS7sBklVwtzXLlW87QWKDHdvkRkGZyeeKujaGRnqODhYIPtGtPqd0t+ag== +"@acala-network/sdk-core@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/sdk-core/-/sdk-core-4.1.8-13.tgz#ff69ef993f5a36caa31744384c389765ede7cc96" + integrity sha512-4q9lksLJ/8lXA/f/t9GHQqv8ePIT2vId7rkaoqE/jASq6ngRFg2heV/6eScCKudr2aJN68YX3Jf0hwH6eazVLQ== dependencies: "@polkadot/api" "^9.9.1" "@polkadot/types" "^9.9.1" @@ -91,14 +113,14 @@ events "^3.2.0" lodash "^4.17.20" -"@acala-network/sdk@4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/sdk/-/sdk-4.1.8-9.tgz#3501296ec663346e2118dcfcc72e31afcdf63fbb" - integrity sha512-/e624PRyzwUJUEW4g7y4kVjs4WsDU2S6KPvn2Nbojl0bz0wrm05ghjD3lW98m8CcLLLv4wa4hldegFzx79LYgw== +"@acala-network/sdk@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/sdk/-/sdk-4.1.8-13.tgz#f603a6c84c4654971495676345f4a24041ff1c02" + integrity sha512-3apYrmQ+WZWzEYd0sdLCpTYe8SagMMK2+0vj35ANVvD92FHUUkHTtJAEiCu81y0ujFuFbtx/VxA0uGVb/fBZ6A== dependencies: - "@acala-network/api" "4.1.8-9" - "@acala-network/eth-providers" "^2.5.4" - "@acala-network/type-definitions" "4.1.8-9" + "@acala-network/api" "4.1.8-13" + "@acala-network/eth-providers" "^2.5.9" + "@acala-network/type-definitions" "4.1.8-13" "@ethersproject/bignumber" "^5.7.0" "@polkadot/api" "^9.9.1" "@polkadot/types" "^9.9.1" @@ -114,6 +136,13 @@ lru-cache "^7.14.1" rxjs "^7.5.7" +"@acala-network/type-definitions@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-13.tgz#a295d3f3feb1d36cadbda634c180f53eb90cca61" + integrity sha512-AMXbqsJehhDcwEngSB173eQvuCAsXEm/7rNZMQ8KLG56a8FrNAgrEz+83foogLuTcehCPUPfC0R1Ef/+874rRw== + dependencies: + "@open-web3/orml-type-definitions" "^1.1.4" + "@acala-network/type-definitions@4.1.8-9": version "4.1.8-9" resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-9.tgz#be238e2e269cd701b79b0af5f9ed4d9c168d94c0" @@ -121,13 +150,23 @@ dependencies: "@open-web3/orml-type-definitions" "^1.1.4" -"@acala-network/type-definitions@^4.1.5": - version "4.1.5" - resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.5.tgz#c02624ba9bb637588ddd184a4ce35ab7d9de2bf6" - integrity sha512-XwXtKf5ESfzGk32N1sE3MlBtnamz2JZYtjB6KcKe9eOyv+3lowQvRn4Z347rNSEp+tpenZWnLwBXk4XWhdiSoQ== +"@acala-network/type-definitions@^4.1.8-1": + version "4.1.8-14" + resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-14.tgz#f0d1dd5f0e50c5b16e19fc222d351b4ec4524928" + integrity sha512-3PDYFaT8s9PYgZZNNtOEco5Oyn/oQlnuYrBe6WQX1bQBhAbUQjMDhuaqoqRF61CFtxYTgw/6kiFRf/aUNhigGQ== dependencies: "@open-web3/orml-type-definitions" "^1.1.4" +"@acala-network/types@4.1.8-13": + version "4.1.8-13" + resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-4.1.8-13.tgz#919fc5ad818f535caba0fc2ea0477085e570d93b" + integrity sha512-XBIupGrNyY1xSptC59GNE89C4wJ2pb/QwRiRkQUNzDSTfLbjUSCOpDqjSfZIxj21+/zhZtw+6+uS+HnoTpsQeg== + dependencies: + "@acala-network/type-definitions" "4.1.8-13" + "@babel/runtime" "^7.10.2" + "@open-web3/api-mobx" "^1.1.4" + "@open-web3/orml-types" "^1.1.4" + "@acala-network/types@4.1.8-9", "@acala-network/types@~4.1.8-9": version "4.1.8-9" resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-4.1.8-9.tgz#afc11f555dc900149eff132857f456500dcfb892" @@ -1270,7 +1309,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== @@ -1321,10 +1360,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@bifrost-finance/type-definitions@1.7.1": - version "1.7.1" - resolved "https://registry.yarnpkg.com/@bifrost-finance/type-definitions/-/type-definitions-1.7.1.tgz#d64e89eebf5d325ecca636261373945e14c4c508" - integrity sha512-9AJIFFtlTKUGNJ8ITkgDUUJD+Iodb2Cp6qbVl5mAKuaws9QrLpgKYTT09GoKltQTg5bbDc8+ygbcabntUeTZGw== +"@bifrost-finance/type-definitions@1.7.2": + version "1.7.2" + resolved "https://registry.yarnpkg.com/@bifrost-finance/type-definitions/-/type-definitions-1.7.2.tgz#13139a69e3e98d175a4751d7fd78dcfebac29943" + integrity sha512-JL19CHFL4DxO29LRrv9o7r7Au9TtY+8pwG4fMP8M6jq2/MkvWd7OQFn1lmEy58akntNrVReIkZPuP81MFKv9jg== dependencies: "@open-web3/orml-type-definitions" "^0.9.4-38" @@ -1552,10 +1591,10 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== -"@docknetwork/node-types@0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@docknetwork/node-types/-/node-types-0.13.0.tgz#8b643f9cb52c3563d3db91ac84e06836b0f6f199" - integrity sha512-k+NZksUGqc1Cz8eG+EzCPRyRalgho/xy4fh5Dqsbe9LwLeklrrtfAMaklPRtkt0yja8ueg1DGnCtHq00e99j4Q== +"@docknetwork/node-types@0.15.0": + version "0.15.0" + resolved "https://registry.yarnpkg.com/@docknetwork/node-types/-/node-types-0.15.0.tgz#eed5c719380865bf989ccd2550844dadb7abdd19" + integrity sha512-ACIHUIiAt82nhYxtwHSyS4JaJ28UbWS+fAwbTblKcsQBe7YRM2tjbLmkaqQjGPjxJS+wmh/xf7/PnA8PfboNZg== "@edgeware/node-types@3.6.2-wako": version "3.6.2-wako" @@ -1584,10 +1623,10 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== -"@equilab/definitions@1.4.14": - version "1.4.14" - resolved "https://registry.yarnpkg.com/@equilab/definitions/-/definitions-1.4.14.tgz#c384f3eca003293d5f2c0a42235bdbe0a60626dd" - integrity sha512-F8jDESrhUpapqGSTXWND+5/DOqFlnh/oEejIYVIzF2WeUreHJzUPpI8a8Hb9plCLxj5sxYJ+3JL/5epMcrXDaQ== +"@equilab/definitions@1.4.18": + version "1.4.18" + resolved "https://registry.yarnpkg.com/@equilab/definitions/-/definitions-1.4.18.tgz#e544951b50278705af3d9fa4ba91e04df53a3d06" + integrity sha512-rFEPaHmdn5I1QItbQun9H/x+o3hgjA6kLYLrNN6nl/ndtQMY2tqx/mQfcGIlKA1xVmyn9mUAqD8G0P/nBHD3yA== "@eslint/eslintrc@^0.4.3": version "0.4.3" @@ -1985,6 +2024,15 @@ dependencies: tslib "2.4.0" +"@frequency-chain/api-augment@^1.0.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@frequency-chain/api-augment/-/api-augment-1.6.0.tgz#a611d191328e11ccf24aff82fe2d165b9b6a0eb8" + integrity sha512-OkyLC4ttgkB+6PpTN94NIWPgi6rEclzK7pBSULtfl6ZhgjW9IalykbJmispG3Ntgwdb69TMUU0wSdDPBS15r9A== + dependencies: + "@polkadot/api" "^10.3.2" + "@polkadot/rpc-provider" "^10.3.2" + "@polkadot/types" "^10.3.2" + "@gar/promisify@^1.0.1": version "1.1.3" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" @@ -2051,18 +2099,17 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@0.2.7": - version "0.2.7" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.2.7.tgz#06b5e4bf531f5aad55e9258ee606b1dfb62e8b5a" - integrity sha512-kpdqBw+AFPx41nsnfEpBbfkQRbt+x1dyKq7zoEfm4a4vHQMgl15BK6UCvpO8LN4o6iRpIYP4xTOcfYytC7BzhQ== - dependencies: - "@acala-network/api" "4.1.8-9" - "@acala-network/sdk" "4.1.8-9" - "@acala-network/sdk-core" "4.1.8-9" - "@polkadot/api" "^9.11.1" - "@polkadot/apps-config" "^0.122.2" - "@polkadot/types" "^9.11.1" - "@polkadot/types-augment" "^9.11.1" +"@interlay/bridge@^0.3.9": + version "0.3.9" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.9.tgz#fc39c64708eab2f55cb0bbb970f2f0e72583cb37" + integrity sha512-QCeTux1f3LwLJ/dcfHmOTOuF8ocfpo9WDNV7Z1GWTHX/I8lspidj4xh8c/g2+jNZnHMiINXCSvHGPPr05lTnQg== + dependencies: + "@acala-network/api" "4.1.8-13" + "@acala-network/sdk" "4.1.8-13" + "@acala-network/sdk-core" "4.1.8-13" + "@polkadot/api" "^9.14.2" + "@polkadot/apps-config" "^0.124.1" + "@polkadot/types" "^9.14.2" axios "^0.27.2" lodash "^4.17.20" @@ -2090,16 +2137,16 @@ isomorphic-fetch "^3.0.0" regtest-client "^0.2.0" +"@interlay/interbtc-types@1.11.0": + version "1.11.0" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.11.0.tgz#5b94066ddee1fd677de928531db36e6ae439e08f" + integrity sha512-bn3XjyRlXyhe1QKUHx5IEQJDNC6LoSCJJIkTnSp5xm52GRBEWgHOvLAnfJi3gyj7A3lV/yA2Xjqf294bZgMmfw== + "@interlay/interbtc-types@1.12.0": version "1.12.0" resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.12.0.tgz#07dc8e15690292387124dbc2bbb7bf5bc8b68001" integrity sha512-ELJa2ftIbe8Ds2ejS7kO5HumN9EB5l2OBi3Qsy5iHJsHKq2HtXfFoKnW38HarM6hADrWG+e/yNGHSKJIJzEZuA== -"@interlay/interbtc-types@1.9.0": - version "1.9.0" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.9.0.tgz#beffd3b04bc1d9dba49f3ddc338b5867b81dec3d" - integrity sha512-G/jOHXM6lqoFAPquESAxsjt5ETrmcPTDC36WFRWYpoRUfFxcjq6TkWGxUC5/RS6jIoWMQ6lEJZupmlm/QNdbAg== - "@interlay/monetary-js@0.7.2": version "0.7.2" resolved "https://registry.yarnpkg.com/@interlay/monetary-js/-/monetary-js-0.7.2.tgz#a54a315b60be12f5b1a9c31f0d71d5e8ee7ba174" @@ -2434,10 +2481,10 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kiltprotocol/type-definitions@^0.2.1": - version "0.2.1" - resolved "https://registry.yarnpkg.com/@kiltprotocol/type-definitions/-/type-definitions-0.2.1.tgz#0469b0bcc58063be0b02ffbf6f779176c6b0a00d" - integrity sha512-By09MH20P+rXadiZDnw2XeAw7bQLgNazOyNS3gPdU1L4Jx+lU9OtvIgZEA+T/TY/KM5nTv32s3c4wZ7v1s2znw== +"@kiltprotocol/type-definitions@^0.30.0": + version "0.30.0" + resolved "https://registry.yarnpkg.com/@kiltprotocol/type-definitions/-/type-definitions-0.30.0.tgz#00e99636a1c4405071021242cd509090c8f14287" + integrity sha512-1UpPDjX8PFqTFm3lRRfYUPEY9M8KrbpRinf4q4K843lY5GdTxQaevrVdK9/WCHKywLyDa4tSrlUv9KQjrTP4bg== "@laminar/type-definitions@0.3.1": version "0.3.1" @@ -2446,22 +2493,22 @@ dependencies: "@open-web3/orml-type-definitions" "^0.8.2-9" -"@logion/node-api@^0.7.0": - version "0.7.2" - resolved "https://registry.yarnpkg.com/@logion/node-api/-/node-api-0.7.2.tgz#af164f13831f1b89b130597ca70bf0e863f0b79f" - integrity sha512-EAyRp1MAAS4bGuxnuAYExssfwvFHLsmCyPWH0wMIik5eLHqNiPA1LwylYH5AQx8P1w11/nHVqRc5ly7dlf5E+w== +"@logion/node-api@^0.9.0-3": + version "0.9.0-3" + resolved "https://registry.yarnpkg.com/@logion/node-api/-/node-api-0.9.0-3.tgz#b02741acbf30517d537d48b75ffc83b366f09b87" + integrity sha512-6m2My8yI9jmhqP6FHPJdrsqdg/1vyJtY1/4cnuqCByJaVgNDGrcdtcmzW4BXCww+hJMrdm3PeLthKHCrwpo0gA== dependencies: - "@polkadot/api" "^9.8.1" - "@polkadot/util" "^10.1.12" - "@polkadot/util-crypto" "^10.1.12" + "@polkadot/api" "^9.10.1" + "@polkadot/util" "^10.2.1" + "@polkadot/util-crypto" "^10.2.1" "@types/uuid" "^8.3.4" fast-sha256 "^1.3.0" uuid "^8.3.2" -"@mangata-finance/types@^0.9.0": - version "0.9.0" - resolved "https://registry.yarnpkg.com/@mangata-finance/types/-/types-0.9.0.tgz#8272a01d87243f693d0e0889070afb0d00b4f91f" - integrity sha512-37yIP9xh+6kTt+UQJsbPt0OCrDIZsqGRh3f7sEtK7zX4G8uWrg/GHcHtGZQRruNIOAO8+1PLXuMfLokSzojVBw== +"@mangata-finance/types@^0.17.0": + version "0.17.0" + resolved "https://registry.yarnpkg.com/@mangata-finance/types/-/types-0.17.0.tgz#299b0bd21e30e17ee65c25f18d4a89871f521930" + integrity sha512-v0o7rePG4P2fDH1yVvSfuHpHQCA7Xki9IwPMTu51Y4FoQdvD1zHUOI4mIOc3ssjOAJsCePNdsTm+/xj3DeiSxQ== "@mdx-js/mdx@^1.6.22": version "1.6.22" @@ -2732,17 +2779,17 @@ dependencies: "@open-web3/orml-type-definitions" "1.1.4" -"@parallel-finance/type-definitions@1.7.13": - version "1.7.13" - resolved "https://registry.yarnpkg.com/@parallel-finance/type-definitions/-/type-definitions-1.7.13.tgz#08c92e07496d2757d9a89879e7d3d08b2bf49744" - integrity sha512-v2M1uCfBnQ2wiYEk/2ftTdSB4OV8nTL38qhB6ApykxHCdXu4Nz1lJKFjW8OW1DTXB8xCfkj8VX8eY0UDez535g== +"@parallel-finance/type-definitions@1.7.14": + version "1.7.14" + resolved "https://registry.yarnpkg.com/@parallel-finance/type-definitions/-/type-definitions-1.7.14.tgz#02ca0d8a8d2894fa1d22c8625bd4edfcfbeffc4c" + integrity sha512-64cIrOcS5z2SSzTAITg3qDdQReoBLCZhAGHzR1VnYQzF0u59Ow6XnWmg0/R4EuyhnsqW4aMhnrmlVE7RhG9kPg== dependencies: "@open-web3/orml-type-definitions" "^1.1.4" -"@phala/typedefs@0.2.32": - version "0.2.32" - resolved "https://registry.yarnpkg.com/@phala/typedefs/-/typedefs-0.2.32.tgz#4c66dce9b5a975226bbbdbdef09bccfde2e54878" - integrity sha512-G1ifICDNW6NtixqCVfJHBI82Detwzzmzs4gpE1RrMsTxfoKIbxkX8nx3DxZUhFYqikGEkQVxNmEi3jpC0zDrsw== +"@phala/typedefs@0.2.33": + version "0.2.33" + resolved "https://registry.yarnpkg.com/@phala/typedefs/-/typedefs-0.2.33.tgz#6f18d73b5104db6a594d08be571954385b3e509b" + integrity sha512-CaRzIGfU6CUIKLPswYtOw/xbtTttqmJZpr3fhkxLvkBQMXIH14iISD763OFXtWui7DrAMBKo/bHawvFNgWGKTg== "@pmmmwh/react-refresh-webpack-plugin@0.4.3", "@pmmmwh/react-refresh-webpack-plugin@^0.4.3": version "0.4.3" @@ -2829,7 +2876,7 @@ "@polkadot/util-crypto" "^10.4.2" rxjs "^7.8.0" -"@polkadot/api-derive@9.10.3", "@polkadot/api-derive@9.14.2", "@polkadot/api-derive@^8.5.1", "@polkadot/api-derive@^9.14.2", "@polkadot/api-derive@^9.7.1": +"@polkadot/api-derive@9.10.3", "@polkadot/api-derive@9.14.2", "@polkadot/api-derive@^8.5.1", "@polkadot/api-derive@^9.13.2", "@polkadot/api-derive@^9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-9.14.2.tgz#e8fcd4ee3f2b80b9fe34d4dec96169c3bdb4214d" integrity sha512-yw9OXucmeggmFqBTMgza0uZwhNjPxS7MaT7lSCUIRKckl1GejdV+qMhL3XFxPFeYzXwzFpdPG11zWf+qJlalqw== @@ -2845,7 +2892,7 @@ "@polkadot/util-crypto" "^10.4.2" rxjs "^7.8.0" -"@polkadot/api@9.10.3", "@polkadot/api@9.14.2", "@polkadot/api@^7.2.1", "@polkadot/api@^9.11.1", "@polkadot/api@^9.14.2", "@polkadot/api@^9.4.2", "@polkadot/api@^9.7.1", "@polkadot/api@^9.8.1", "@polkadot/api@^9.9.1", "@polkadot/api@latest": +"@polkadot/api@9.10.3", "@polkadot/api@9.14.2", "@polkadot/api@^10.3.2", "@polkadot/api@^7.2.1", "@polkadot/api@^9.10.1", "@polkadot/api@^9.13.2", "@polkadot/api@^9.14.2", "@polkadot/api@^9.4.2", "@polkadot/api@^9.9.1", "@polkadot/api@latest": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-9.14.2.tgz#d5cee02236654c6063d7c4b70c78c290db5aba8d" integrity sha512-R3eYFj2JgY1zRb+OCYQxNlJXCs2FA+AU4uIEiVcXnVLmR3M55tkRNEwYAZmiFxx0pQmegGgPMc33q7TWGdw24A== @@ -2868,48 +2915,49 @@ eventemitter3 "^5.0.0" rxjs "^7.8.0" -"@polkadot/apps-config@^0.122.2": - version "0.122.2" - resolved "https://registry.yarnpkg.com/@polkadot/apps-config/-/apps-config-0.122.2.tgz#b15d2dbfc43b0e8bc32fc14bd56b97de3abb83e3" - integrity sha512-EBINVhOe4w5gzjOJ/lIzYJDP1DiZY8SWBf8Jp25DOwdSvUsyV1AYyrGAgmz+kE+jtakEMKOZpXdRt3OwGYLPqw== +"@polkadot/apps-config@^0.124.1": + version "0.124.1" + resolved "https://registry.yarnpkg.com/@polkadot/apps-config/-/apps-config-0.124.1.tgz#4d993fcc198118dfe4aa9200ce6055b48cab96b3" + integrity sha512-SqDLf0ksU5WkU96L3nIiICwaBDLj4APYjKkwpSUAWk1NcvXDWZQQG56obgaLPHZ2If6GZrQge/fUmItuRBIZrg== dependencies: - "@acala-network/type-definitions" "^4.1.5" - "@babel/runtime" "^7.20.1" - "@bifrost-finance/type-definitions" "1.7.1" + "@acala-network/type-definitions" "^4.1.8-1" + "@babel/runtime" "^7.20.13" + "@bifrost-finance/type-definitions" "1.7.2" "@crustio/type-definitions" "1.3.0" "@darwinia/types" "2.8.10" "@darwinia/types-known" "2.8.10" "@digitalnative/type-definitions" "1.1.27" - "@docknetwork/node-types" "0.13.0" + "@docknetwork/node-types" "0.15.0" "@edgeware/node-types" "3.6.2-wako" - "@equilab/definitions" "1.4.14" - "@interlay/interbtc-types" "1.9.0" - "@kiltprotocol/type-definitions" "^0.2.1" + "@equilab/definitions" "1.4.18" + "@frequency-chain/api-augment" "^1.0.0" + "@interlay/interbtc-types" "1.11.0" + "@kiltprotocol/type-definitions" "^0.30.0" "@laminar/type-definitions" "0.3.1" - "@logion/node-api" "^0.7.0" - "@mangata-finance/types" "^0.9.0" + "@logion/node-api" "^0.9.0-3" + "@mangata-finance/types" "^0.17.0" "@metaverse-network-sdk/type-definitions" "^0.0.1-13" - "@parallel-finance/type-definitions" "1.7.13" - "@phala/typedefs" "0.2.32" - "@polkadot/api" "^9.7.1" - "@polkadot/api-derive" "^9.7.1" - "@polkadot/networks" "^10.1.11" - "@polkadot/types" "^9.7.1" - "@polkadot/util" "^10.1.11" - "@polkadot/x-fetch" "^10.1.11" + "@parallel-finance/type-definitions" "1.7.14" + "@phala/typedefs" "0.2.33" + "@polkadot/api" "^9.13.2" + "@polkadot/api-derive" "^9.13.2" + "@polkadot/networks" "^10.3.1" + "@polkadot/types" "^9.13.2" + "@polkadot/util" "^10.3.1" + "@polkadot/x-fetch" "^10.3.1" "@polymathnetwork/polymesh-types" "0.0.2" "@snowfork/snowbridge-types" "0.2.7" - "@sora-substrate/type-definitions" "1.10.21" - "@subsocial/definitions" "^0.7.8-dev.0" - "@unique-nft/opal-testnet-types" "930.31.0" - "@unique-nft/quartz-mainnet-types" "930.31.0" - "@unique-nft/unique-mainnet-types" "930.31.0" - "@zeitgeistpm/type-defs" "0.9.0" + "@sora-substrate/type-definitions" "1.12.4" + "@subsocial/definitions" "^0.7.9" + "@unique-nft/opal-testnet-types" "930.34.0" + "@unique-nft/quartz-mainnet-types" "930.34.0" + "@unique-nft/unique-mainnet-types" "930.33.0" + "@zeitgeistpm/type-defs" "0.10.0" "@zeroio/type-definitions" "0.0.14" lodash "^4.17.21" moonbeam-types-bundle "2.0.9" pontem-types-bundle "1.0.15" - rxjs "^7.5.7" + rxjs "^7.8.0" "@polkadot/extension-dapp@0.44.1": version "0.44.1" @@ -2942,6 +2990,15 @@ "@polkadot/util" "10.4.2" "@polkadot/util-crypto" "10.4.2" +"@polkadot/keyring@^10.3.1": + version "10.3.1" + resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-10.3.1.tgz#f13fed33686ff81b1e486721e52299eba9e6c4a6" + integrity sha512-xBkUtyQ766NVS1ccSYbQssWpxAhSf0uwkw9Amj8TFhu++pnZcVm+EmM2VczWqgOkmWepO7MGRjEXeOIw1YUGiw== + dependencies: + "@babel/runtime" "^7.20.13" + "@polkadot/util" "10.3.1" + "@polkadot/util-crypto" "10.3.1" + "@polkadot/keyring@^6.9.1": version "6.11.1" resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-6.11.1.tgz#2510c349c965c74cc2f108f114f1048856940604" @@ -2969,7 +3026,7 @@ "@polkadot/util" "8.7.1" "@polkadot/util-crypto" "8.7.1" -"@polkadot/networks@10.4.2", "@polkadot/networks@^10.1.11", "@polkadot/networks@^10.1.6", "@polkadot/networks@^10.4.2": +"@polkadot/networks@10.4.2", "@polkadot/networks@^10.1.6", "@polkadot/networks@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-10.4.2.tgz#d7878c6aad8173c800a21140bfe5459261724456" integrity sha512-FAh/znrEvWBiA/LbcT5GXHsCFUl//y9KqxLghSr/CreAmAergiJNT0MVUezC7Y36nkATgmsr4ylFwIxhVtuuCw== @@ -2978,6 +3035,32 @@ "@polkadot/util" "10.4.2" "@substrate/ss58-registry" "^1.38.0" +"@polkadot/networks@^10.3.1": + version "10.3.1" + resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-10.3.1.tgz#097a2c4cd25eff59fe6c11299f58feedd4335042" + integrity sha512-W9E1g6zRbIVyF7sGqbpxH0P6caxtBHNEwvDa5/8ZQi9UsLj6mUs0HdwZtAdIo3KcSO4uAyV9VYJjY/oAWWcnXg== + dependencies: + "@babel/runtime" "^7.20.13" + "@polkadot/util" "10.3.1" + "@substrate/ss58-registry" "^1.38.0" + +"@polkadot/react-identicon@^2.11.1": + version "2.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-2.11.1.tgz#8f81f142f7c7763fe2d499580b85b3879f4eb081" + integrity sha512-pqEsiXuKOXDrXNnsFB1JyBbFqedbiDwtP0yewIQ9vtwJwm01o7oE0yGfYS88hnPN1mLDc++MMcqvrHBsxYr2Lw== + dependencies: + "@babel/runtime" "^7.20.13" + "@polkadot/keyring" "^10.3.1" + "@polkadot/ui-settings" "2.11.1" + "@polkadot/ui-shared" "2.11.1" + "@polkadot/util" "^10.3.1" + "@polkadot/util-crypto" "^10.3.1" + color "^3.2.1" + ethereum-blockies-base64 "^1.0.2" + jdenticon "3.2.0" + react-copy-to-clipboard "^5.1.0" + styled-components "^5.3.6" + "@polkadot/rpc-augment@9.14.2", "@polkadot/rpc-augment@^9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/rpc-augment/-/rpc-augment-9.14.2.tgz#eb70d5511463dab8d995faeb77d4edfe4952fe26" @@ -3001,7 +3084,7 @@ "@polkadot/util" "^10.4.2" rxjs "^7.8.0" -"@polkadot/rpc-provider@9.14.2", "@polkadot/rpc-provider@^8.7.1", "@polkadot/rpc-provider@^9.14.2": +"@polkadot/rpc-provider@9.14.2", "@polkadot/rpc-provider@^10.3.2", "@polkadot/rpc-provider@^8.7.1", "@polkadot/rpc-provider@^9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-9.14.2.tgz#0dea667f3a03bf530f202cba5cd360df19b32e30" integrity sha512-YTSywjD5PF01V47Ru5tln2LlpUwJiSOdz6rlJXPpMaY53hUp7+xMU01FVAQ1bllSBNisSD1Msv/mYHq84Oai2g== @@ -3021,7 +3104,7 @@ optionalDependencies: "@substrate/connect" "0.7.19" -"@polkadot/types-augment@9.14.2", "@polkadot/types-augment@^9.11.1", "@polkadot/types-augment@^9.14.2": +"@polkadot/types-augment@9.14.2", "@polkadot/types-augment@^9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-augment/-/types-augment-9.14.2.tgz#1a478e18e713b04038f3e171287ee5abe908f0aa" integrity sha512-WO9d7RJufUeY3iFgt2Wz762kOu1tjEiGBR5TT4AHtpEchVHUeosVTrN9eycC+BhleqYu52CocKz6u3qCT/jKLg== @@ -3069,7 +3152,7 @@ "@babel/runtime" "^7.20.13" "@polkadot/util" "^10.4.2" -"@polkadot/types@9.10.3", "@polkadot/types@9.14.2", "@polkadot/types@^4.13.1", "@polkadot/types@^6.0.5", "@polkadot/types@^7.2.1", "@polkadot/types@^8.7.1", "@polkadot/types@^9.11.1", "@polkadot/types@^9.14.2", "@polkadot/types@^9.7.1", "@polkadot/types@^9.9.1": +"@polkadot/types@9.10.3", "@polkadot/types@9.14.2", "@polkadot/types@^10.3.2", "@polkadot/types@^4.13.1", "@polkadot/types@^6.0.5", "@polkadot/types@^7.2.1", "@polkadot/types@^8.7.1", "@polkadot/types@^9.13.2", "@polkadot/types@^9.14.2", "@polkadot/types@^9.9.1": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-9.14.2.tgz#5105f41eb9e8ea29938188d21497cbf1753268b8" integrity sha512-hGLddTiJbvowhhUZJ3k+olmmBc1KAjWIQxujIUIYASih8FQ3/YJDKxaofGOzh0VygOKW3jxQBN2VZPofyDP9KQ== @@ -3097,6 +3180,17 @@ rxjs "^7.5.6" store "^2.0.12" +"@polkadot/ui-settings@2.11.1": + version "2.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-2.11.1.tgz#e3474097a6f4246423731e9b5cce3a5bb9482349" + integrity sha512-7yZwb3VxGh7VPHkyygktL7Oep0c4XUyKkYGwSmgP2Gt2IcvnGXFUQVSEARKs9FCanl19f2CEU1m19+FFrjlUNQ== + dependencies: + "@babel/runtime" "^7.20.13" + "@polkadot/networks" "^10.3.1" + "@polkadot/util" "^10.3.1" + eventemitter3 "^4.0.7" + store "^2.0.12" + "@polkadot/ui-settings@2.9.7": version "2.9.7" resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-2.9.7.tgz#c9fcd7dc8d1de36826e06c347f27d9a9df56810c" @@ -3108,7 +3202,15 @@ eventemitter3 "^4.0.7" store "^2.0.12" -"@polkadot/util-crypto@10.4.2", "@polkadot/util-crypto@6.11.1", "@polkadot/util-crypto@7.9.2", "@polkadot/util-crypto@8.7.1", "@polkadot/util-crypto@^10.1.12", "@polkadot/util-crypto@^10.1.6", "@polkadot/util-crypto@^10.2.1", "@polkadot/util-crypto@^10.2.4", "@polkadot/util-crypto@^10.4.2", "@polkadot/util-crypto@^9.4.1": +"@polkadot/ui-shared@2.11.1": + version "2.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-2.11.1.tgz#b4dfe2310003ce4621fcbb5e94daa8c76b45a028" + integrity sha512-+qCLPT3SEnHOG3WvO0iYSJ6zArPQGCz9nHx8X8rw9GhffdiEC20ae63jB6dQTjR5GppPQx0aLE/cOppWn/HpRg== + dependencies: + "@babel/runtime" "^7.20.13" + color "^3.2.1" + +"@polkadot/util-crypto@10.3.1", "@polkadot/util-crypto@10.4.2", "@polkadot/util-crypto@6.11.1", "@polkadot/util-crypto@7.9.2", "@polkadot/util-crypto@8.7.1", "@polkadot/util-crypto@^10.1.6", "@polkadot/util-crypto@^10.2.1", "@polkadot/util-crypto@^10.2.4", "@polkadot/util-crypto@^10.3.1", "@polkadot/util-crypto@^10.4.2", "@polkadot/util-crypto@^9.4.1": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-10.4.2.tgz#871fb69c65768bd48c57bb5c1f76a85d979fb8b5" integrity sha512-RxZvF7C4+EF3fzQv8hZOLrYCBq5+wA+2LWv98nECkroChY3C2ZZvyWDqn8+aonNULt4dCVTWDZM0QIY6y4LUAQ== @@ -3125,7 +3227,7 @@ ed2curve "^0.3.0" tweetnacl "^1.0.3" -"@polkadot/util@10.4.2", "@polkadot/util@6.11.1", "@polkadot/util@7.9.2", "@polkadot/util@8.7.1", "@polkadot/util@^10.1.11", "@polkadot/util@^10.1.12", "@polkadot/util@^10.1.6", "@polkadot/util@^10.2.1", "@polkadot/util@^10.2.4", "@polkadot/util@^10.4.2", "@polkadot/util@^9.4.1": +"@polkadot/util@10.3.1", "@polkadot/util@10.4.2", "@polkadot/util@6.11.1", "@polkadot/util@7.9.2", "@polkadot/util@8.7.1", "@polkadot/util@^10.1.6", "@polkadot/util@^10.2.1", "@polkadot/util@^10.2.4", "@polkadot/util@^10.3.1", "@polkadot/util@^10.4.2", "@polkadot/util@^9.4.1": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-10.4.2.tgz#df41805cb27f46b2b4dad24c371fa2a68761baa1" integrity sha512-0r5MGICYiaCdWnx+7Axlpvzisy/bi1wZGXgCSw5+ZTyPTOqvsYRqM2X879yxvMsGfibxzWqNzaiVjToz1jvUaA== @@ -3197,7 +3299,7 @@ "@babel/runtime" "^7.20.13" "@polkadot/x-global" "10.4.2" -"@polkadot/x-fetch@^10.1.11", "@polkadot/x-fetch@^10.4.2": +"@polkadot/x-fetch@^10.3.1", "@polkadot/x-fetch@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-fetch/-/x-fetch-10.4.2.tgz#bc6ba70de71a252472fbe36180511ed920e05f05" integrity sha512-Ubb64yaM4qwhogNP+4mZ3ibRghEg5UuCYRMNaCFoPgNAY8tQXuDKrHzeks3+frlmeH9YRd89o8wXLtWouwZIcw== @@ -4599,10 +4701,10 @@ "@polkadot/keyring" "^8.2.2" "@polkadot/types" "^7.2.1" -"@sora-substrate/type-definitions@1.10.21": - version "1.10.21" - resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-1.10.21.tgz#1fb225cc8036729cdfb8fd2fcdc72bfa18251781" - integrity sha512-QPtJk6ZjPK9RwpMG+YdMI319dRbSr01C5D52TNOf9UAk6FA9fGTXtn6kH6pR185Ssu/Ww50LmU+NpDP45RPYVA== +"@sora-substrate/type-definitions@1.12.4": + version "1.12.4" + resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-1.12.4.tgz#e4bfc1d5d58c20dd589cfcd73ab86f798684221f" + integrity sha512-G+s1DTKGfkncUXUPXQNNrbj/9ZnNxksEXBmqP/RQrmnfYE3C59P5Zkp+D98WsXobkWOnMxqBDlK+VbUQbvMoRA== dependencies: "@open-web3/orml-type-definitions" "0.9.4-26" @@ -5434,7 +5536,7 @@ regenerator-runtime "^0.13.7" resolve-from "^5.0.0" -"@subsocial/definitions@^0.7.8-dev.0": +"@subsocial/definitions@^0.7.9": version "0.7.14" resolved "https://registry.yarnpkg.com/@subsocial/definitions/-/definitions-0.7.14.tgz#1397f1ec806d60d9deb112b9f36d530400b711fe" integrity sha512-dor5S6/tbY09n40e/dh7qFcqF9slMihOMDTXWBM5hTe8nS/Pf5Zp4/r9WiZxxYLoY2v5MlSqyJxjiSCjTxxjUw== @@ -5465,9 +5567,9 @@ ws "^8.8.1" "@substrate/ss58-registry@^1.38.0": - version "1.39.0" - resolved "https://registry.yarnpkg.com/@substrate/ss58-registry/-/ss58-registry-1.39.0.tgz#eb916ff5fea7fa02e77745823fde21af979273d2" - integrity sha512-qZYpuE6n+mwew+X71dOur/CbMXj6rNW27o63JeJwdQH/GvcSKm3JLNhd+bGzwUKg0D/zD30Qc6p4JykArzM+tA== + version "1.38.0" + resolved "https://registry.yarnpkg.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz#b50cb28c77a0375fbf33dd29b7b28ee32871af9f" + integrity sha512-sHiVRWekGMRZAjPukN9/W166NM6D5wtHcK6RVyLy66kg3CHNZ1BXfpXcjOiXSwhbd7guQFDEwnOVaDrbk1XL1g== "@surma/rollup-plugin-off-main-thread@^1.1.1": version "1.4.2" @@ -6311,20 +6413,20 @@ "@typescript-eslint/types" "4.33.0" eslint-visitor-keys "^2.0.0" -"@unique-nft/opal-testnet-types@930.31.0": - version "930.31.0" - resolved "https://registry.yarnpkg.com/@unique-nft/opal-testnet-types/-/opal-testnet-types-930.31.0.tgz#dc989976b5e91b4d8358a7af624d6e5e2ebf0b87" - integrity sha512-IY4AxUx3uqjMEXy6iXrfVmu4oDTXOXaPjg5sb3WqnXpA7czjfSWZsQ/OtJFAWO+cbXUt8DM9ifs9/2hY2+O4RA== +"@unique-nft/opal-testnet-types@930.34.0": + version "930.34.0" + resolved "https://registry.yarnpkg.com/@unique-nft/opal-testnet-types/-/opal-testnet-types-930.34.0.tgz#e4274976ebc9614dbec6c1a074674a3620eacb6f" + integrity sha512-6N5MQC5o4V5J0PZ/JmhRfYOtJTSpCjxxM1pdGysh6aIu/rSey8ELa/9BnGwLIZsOPxW77PKwnt7NIRc01Sze3g== -"@unique-nft/quartz-mainnet-types@930.31.0": - version "930.31.0" - resolved "https://registry.yarnpkg.com/@unique-nft/quartz-mainnet-types/-/quartz-mainnet-types-930.31.0.tgz#009a37ac2dad085cfe0ebdca98de06f345fa35d6" - integrity sha512-oZdHnX2TfglJ43PjKwAnUhx5VIcCDpeeQtRC8cXSvVKE2CqkW5ry/rgyavAs+HeUrwsD5JXHtebgH9P1dZ4vOw== +"@unique-nft/quartz-mainnet-types@930.34.0": + version "930.34.0" + resolved "https://registry.yarnpkg.com/@unique-nft/quartz-mainnet-types/-/quartz-mainnet-types-930.34.0.tgz#d99a744b10575533441a0ca13f855eeca45a9047" + integrity sha512-YwJ3h7Q0crnvGsYfBXjxtPIpQnB9T5JY1LLAapLGvOO3A0iA1PWbSiqAgOdjZTt4zivYm3IbdhxQhyyY6d5jLA== -"@unique-nft/unique-mainnet-types@930.31.0": - version "930.31.0" - resolved "https://registry.yarnpkg.com/@unique-nft/unique-mainnet-types/-/unique-mainnet-types-930.31.0.tgz#ea79a6fd3d9e8c115b13ef3048a87bf0a853c269" - integrity sha512-acAKLL2TNS7X886SiNjMHo0dVmCECFd9vUSJxBZ1yjVVOhf6P6Nn+gA8jjgLKSg89VAqNQ9Op7a/vBN0Xo8+nw== +"@unique-nft/unique-mainnet-types@930.33.0": + version "930.33.0" + resolved "https://registry.yarnpkg.com/@unique-nft/unique-mainnet-types/-/unique-mainnet-types-930.33.0.tgz#196bbe704882ad826b709c5ec9cbbb8067e456ee" + integrity sha512-KlliDzrwcyl1igi/rjltue/T6DZQP5yAijcFzWtCsKfLzkCPxcplzYgd5S+VKRoAFrndOMVXleXTUgpPSYiL9Q== "@uphold/request-logger@^2.0.0": version "2.0.0" @@ -6614,10 +6716,10 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== -"@zeitgeistpm/type-defs@0.9.0": - version "0.9.0" - resolved "https://registry.yarnpkg.com/@zeitgeistpm/type-defs/-/type-defs-0.9.0.tgz#95496d4c7984c87cf53eeed1b97283e5c4538362" - integrity sha512-H3EuEjrKtMlZBKEl08427Bda/c0t9BaUiwBNPn2T8ppM1RCEzfd1/3riHce6CyBCAQKR+w47Dylc+qK2VrBbNQ== +"@zeitgeistpm/type-defs@0.10.0": + version "0.10.0" + resolved "https://registry.yarnpkg.com/@zeitgeistpm/type-defs/-/type-defs-0.10.0.tgz#7f551f949b45b082541a254a9845ab15b2ff9148" + integrity sha512-nQBdyRbkIopPOVjRHk9c/RBWiQI6iYE8fs5rmtSNCXm6IxoXssk/1PtWE+UxXXq9mco7rPao9nJMeYXJ1Ro2kg== "@zeroio/type-definitions@0.0.14": version "0.0.14" @@ -8160,6 +8262,13 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, can resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz#87152b1e3b950d1fbf0093e23f00b6c8e8f1da96" integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA== +canvas-renderer@~2.2.0: + version "2.2.1" + resolved "https://registry.yarnpkg.com/canvas-renderer/-/canvas-renderer-2.2.1.tgz#c1d131f78a9799aca8af9679ad0a005052b65550" + integrity sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg== + dependencies: + "@types/node" "*" + capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -8547,7 +8656,7 @@ color-support@^1.1.2: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color@^3.0.0: +color@^3.0.0, color@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== @@ -10464,6 +10573,13 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= +ethereum-blockies-base64@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/ethereum-blockies-base64/-/ethereum-blockies-base64-1.0.2.tgz#4aebca52142bf4d16a3144e6e2b59303e39ed2b3" + integrity sha512-Vg2HTm7slcWNKaRhCUl/L3b4KrB8ohQXdd5Pu3OI897EcR6tVRvUqdTwAyx+dnmoDzj8e2bwBLDQ50ByFmcz6w== + dependencies: + pnglib "0.0.1" + ethers@^5.6.2, ethers@~5.7.0: version "5.7.2" resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e" @@ -13086,6 +13202,13 @@ iterate-value@^1.0.2: es-get-iterator "^1.0.2" iterate-iterator "^1.0.1" +jdenticon@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/jdenticon/-/jdenticon-3.2.0.tgz#b5b9ef413cb66f70c600d6e69a764c977f248a46" + integrity sha512-z6Iq3fTODUMSOiR2nNYrqigS6Y0GvdXfyQWrUby7htDHvX7GNEwaWR4hcaL+FmhEgBe08Xkup/BKxXQhDJByPA== + dependencies: + canvas-renderer "~2.2.0" + jest-changed-files@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0" @@ -15843,6 +15966,11 @@ please-upgrade-node@^3.2.0: dependencies: semver-compare "^1.0.0" +pnglib@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/pnglib/-/pnglib-0.0.1.tgz#f9ab6f9c688f4a9d579ad8be28878a716e30c096" + integrity sha512-95ChzOoYLOPIyVmL+Y6X+abKGXUJlvOVLkB1QQkyXl7Uczc6FElUy/x01NS7r2GX6GRezloO/ecCX9h4U9KadA== + pnp-webpack-plugin@1.6.4: version "1.6.4" resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149" @@ -17071,6 +17199,14 @@ react-chartjs-2@^2.11.1: lodash "^4.17.19" prop-types "^15.7.2" +react-copy-to-clipboard@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c" + integrity sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A== + dependencies: + copy-to-clipboard "^3.3.1" + prop-types "^15.8.1" + react-dev-utils@^11.0.3: version "11.0.4" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a" @@ -19177,7 +19313,7 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@^5, styled-components@^5.3.5: +styled-components@^5, styled-components@^5.3.5, styled-components@^5.3.6: version "5.3.5" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== From ceb3bee0f38a59e698babe807733bb021398c15c Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Wed, 24 May 2023 12:28:16 +0100 Subject: [PATCH 09/58] [release] Kintsugi 2.32.2 (#1223) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> --- .env.dev | 2 +- api/health.py | 91 ++++++++--- package.json | 10 +- src/App.tsx | 13 +- src/assets/locales/en/translation.json | 1 + .../ConfirmedIssueRequest/index.tsx | 37 ++--- .../ManualIssueExecutionUI/index.tsx | 44 +++--- .../components/DepositForm/DepositForm.tsx | 26 +--- .../PoolsInsights/PoolsInsights.tsx | 15 +- .../components/WithdrawForm/WithdrawForm.tsx | 25 +-- .../AMM/Swap/components/SwapForm/SwapForm.tsx | 55 +++---- src/pages/Bridge/BurnForm/index.tsx | 9 +- src/pages/Bridge/IssueForm/index.tsx | 12 +- src/pages/Bridge/RedeemForm/index.tsx | 27 ++-- src/pages/EarnStrategies/EarnStrategies.tsx | 14 ++ src/pages/EarnStrategies/index.tsx | 3 + .../CollateralModal/CollateralModal.tsx | 48 +++--- .../components/LoanForm/LoanForm.tsx | 59 ++++--- .../LoansInsights/LoansInsights.tsx | 30 ++-- .../Staking/ClaimRewardsButton/index.tsx | 32 ++-- src/pages/Staking/index.tsx | 123 ++++++--------- .../components/ChainIcon/ChainIcon.tsx | 19 ++- .../components/ChainIcon/icons/Acala.tsx | 147 ++++++++++++++++++ .../components/ChainIcon/icons/Astar.tsx | 58 +++++++ .../components/ChainIcon/icons/Parallel.tsx | 47 ++++++ .../components/ChainIcon/icons/index.ts | 3 + src/pages/Transfer/TransferForm/index.tsx | 12 +- .../Vaults/Vault/RequestIssueModal/index.tsx | 11 +- .../Vaults/Vault/RequestRedeemModal/index.tsx | 10 +- .../Vault/RequestReplacementModal/index.tsx | 10 +- .../Vault/UpdateCollateralModal/index.tsx | 8 +- .../Vault/components/Rewards/Rewards.tsx | 56 +++---- .../DespositCollateralStep.tsx | 27 ++-- .../SidebarContent/Navigation/index.tsx | 16 +- src/utils/constants/links.ts | 1 + .../hooks/api/loans/use-loan-mutation.tsx | 49 ------ src/utils/hooks/api/xcm/xcm-endpoints.ts | 7 +- src/utils/hooks/transaction/index.ts | 2 + src/utils/hooks/transaction/types/amm.ts | 28 ++++ src/utils/hooks/transaction/types/escrow.ts | 46 ++++++ src/utils/hooks/transaction/types/index.ts | 79 ++++++++++ src/utils/hooks/transaction/types/issue.ts | 18 +++ src/utils/hooks/transaction/types/loans.ts | 62 ++++++++ src/utils/hooks/transaction/types/redeem.ts | 23 +++ src/utils/hooks/transaction/types/replace.ts | 13 ++ src/utils/hooks/transaction/types/rewards.ts | 13 ++ src/utils/hooks/transaction/types/tokens.ts | 13 ++ src/utils/hooks/transaction/types/vaults.ts | 23 +++ .../hooks/transaction/use-transaction.ts | 122 +++++++++++++++ .../hooks/transaction/utils/extrinsic.ts | 133 ++++++++++++++++ src/utils/hooks/transaction/utils/submit.ts | 107 +++++++++++++ src/utils/hooks/use-feature-flag.ts | 6 +- yarn.lock | 34 ++-- 53 files changed, 1378 insertions(+), 501 deletions(-) create mode 100644 src/pages/EarnStrategies/EarnStrategies.tsx create mode 100644 src/pages/EarnStrategies/index.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx create mode 100644 src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx delete mode 100644 src/utils/hooks/api/loans/use-loan-mutation.tsx create mode 100644 src/utils/hooks/transaction/index.ts create mode 100644 src/utils/hooks/transaction/types/amm.ts create mode 100644 src/utils/hooks/transaction/types/escrow.ts create mode 100644 src/utils/hooks/transaction/types/index.ts create mode 100644 src/utils/hooks/transaction/types/issue.ts create mode 100644 src/utils/hooks/transaction/types/loans.ts create mode 100644 src/utils/hooks/transaction/types/redeem.ts create mode 100644 src/utils/hooks/transaction/types/replace.ts create mode 100644 src/utils/hooks/transaction/types/rewards.ts create mode 100644 src/utils/hooks/transaction/types/tokens.ts create mode 100644 src/utils/hooks/transaction/types/vaults.ts create mode 100644 src/utils/hooks/transaction/use-transaction.ts create mode 100644 src/utils/hooks/transaction/utils/extrinsic.ts create mode 100644 src/utils/hooks/transaction/utils/submit.ts diff --git a/.env.dev b/.env.dev index 11f16713a9..95c64b470e 100644 --- a/.env.dev +++ b/.env.dev @@ -4,7 +4,7 @@ REACT_APP_FEATURE_FLAG_LENDING=enabled REACT_APP_FEATURE_FLAG_AMM=enabled REACT_APP_FEATURE_FLAG_WALLET=enabled REACT_APP_FEATURE_FLAG_BANXA=enabled - +REACT_APP_FEATURE_FLAG_EARN_STRATEGIES=enabled /* DEVELOPMENT */ diff --git a/api/health.py b/api/health.py index 6638f2a4e8..ae977b2b53 100644 --- a/api/health.py +++ b/api/health.py @@ -2,7 +2,7 @@ import dateutil.parser from datetime import datetime from dateutil.tz import tzutc -from flask import Flask, jsonify +from flask import Flask, jsonify, abort class Oracle: @@ -80,30 +80,85 @@ def isHealthy(self): return status["chainHeightDiff"] < 3 and status["secondsDiff"] < 7200 # 2hrs -KSM_URL = "https://api-kusama.interlay.io/graphql/graphql" -INTR_URL = "https://api.interlay.io/graphql/graphql" - -app = Flask(__name__) - +class Vault: + def __init__(self, baseUrl) -> None: + self.baseUrl = baseUrl -@app.route("/_health/ksm/oracle", methods=["GET"]) -def get_ksm_oracle_health(): - return jsonify(Oracle(KSM_URL, "KSM").isHealthy()) + def _latestVaults(self): + q = """ + query MyQuery { + vaults(limit: 10, orderBy: registrationBlock_active_DESC) { + id + registrationTimestamp + } + } + """ + payload = {"query": q, "variables": None} + resp = requests.post(self.baseUrl, json=payload) + return resp.json()["data"]["vaults"] + def isHealthy(self): + vaults = self._latestVaults() + return len(self._latestVaults()) > 0 -@app.route("/_health/ksm/relay", methods=["GET"]) -def get_ksm_relayer_health(): - return jsonify(Relayer(KSM_URL).isHealthy()) +KSM_URL = "https://api-kusama.interlay.io/graphql/graphql" +INTR_URL = "https://api.interlay.io/graphql/graphql" +TESTNET_INTR = "https://api-testnet.interlay.io/graphql/graphql" +TESTNET_KINT = "https://api-dev-kintsugi.interlay.io/graphql/graphql" -@app.route("/_health/intr/oracle", methods=["GET"]) -def get_intr_oracle_health(): - return jsonify(Oracle(INTR_URL, "DOT").isHealthy()) +app = Flask(__name__) -@app.route("/_health/intr/relay", methods=["GET"]) -def get_intr_relayer_health(): - return jsonify(Relayer(INTR_URL).isHealthy()) +@app.route("/_health//oracle", methods=["GET"]) +def get_oracle_health(chain): + def oracle(): + if chain == "kint": + return Oracle(KSM_URL, "KSM") + elif chain == "intr": + return Oracle(INTR_URL, "DOT") + elif chain == "testnet_kint": + return Oracle(TESTNET_KINT, "KSM") + elif chain == "testnet_intr": + return Oracle(TESTNET_INTR, "DOT") + else: + abort(404) + + return jsonify(oracle().isHealthy()) + + +@app.route("/_health//relay", methods=["GET"]) +def get_relay_health(chain): + def relay(): + if chain == "kint": + return Relayer(KSM_URL) + elif chain == "intr": + return Relayer(INTR_URL) + elif chain == "testnet_kint": + return Relayer(TESTNET_KINT) + elif chain == "testnet_intr": + return Relayer(TESTNET_INTR) + else: + abort(404) + + return jsonify(relay().isHealthy()) + + +@app.route("/_health//vault", methods=["GET"]) +def get_vault_health(chain): + def vault(): + if chain == "kint": + return Vault(KSM_URL) + elif chain == "intr": + return Vault(INTR_URL) + elif chain == "testnet_kint": + return Vault(TESTNET_KINT) + elif chain == "testnet_intr": + return Vault(TESTNET_INTR) + else: + abort(404) + + return jsonify(vault().isHealthy()) if __name__ == "__main__": diff --git a/package.json b/package.json index c87aea2430..389305f0a0 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "interbtc-ui", - "version": "2.32.0", + "version": "2.32.2", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", - "@heroicons/react": "^2.0.0", - "@interlay/bridge": "^0.3.9", - "@interlay/interbtc-api": "2.2.2", - "@interlay/monetary-js": "0.7.2", + "@heroicons/react": "^2.0.18", + "@interlay/bridge": "^0.3.10", + "@interlay/interbtc-api": "2.2.4", + "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", "@polkadot/react-identicon": "^2.11.1", diff --git a/src/App.tsx b/src/App.tsx index 3a16fbf509..463f6f1528 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,6 +26,7 @@ import TestnetBanner from './legacy-components/TestnetBanner'; import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge')); +const EarnStrategies = React.lazy(() => import(/* webpackChunkName: 'earn-strategies' */ '@/pages/EarnStrategies')); const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer')); const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); @@ -35,9 +36,9 @@ const Vaults = React.lazy(() => import(/* webpackChunkName: 'vaults' */ '@/pages // TODO: last task will be to delete legacy dashboard and rename vault dashboard const Vault = React.lazy(() => import(/* webpackChunkName: 'vault' */ '@/pages/Vaults/Vault')); const Loans = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/Loans')); -const Swap = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/AMM')); -const Pools = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/AMM/Pools')); -const Wallet = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/Wallet')); +const Swap = React.lazy(() => import(/* webpackChunkName: 'amm' */ '@/pages/AMM')); +const Pools = React.lazy(() => import(/* webpackChunkName: 'amm/pools' */ '@/pages/AMM/Pools')); +const Wallet = React.lazy(() => import(/* webpackChunkName: 'wallet' */ '@/pages/Wallet')); const Actions = React.lazy(() => import(/* webpackChunkName: 'actions' */ '@/pages/Actions')); const NoMatch = React.lazy(() => import(/* webpackChunkName: 'no-match' */ '@/pages/NoMatch')); @@ -50,6 +51,7 @@ const App = (): JSX.Element => { const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); + const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); // Loads the connection to the faucet - only for testnet purposes const loadFaucet = React.useCallback(async (): Promise => { @@ -212,6 +214,11 @@ const App = (): JSX.Element => { )} + {isEarnStrategiesEnabled && ( + + + + )} diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 2959b1bd8d..e3a0d7164b 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -74,6 +74,7 @@ "issue": "Issue", "redeem": "Redeem", "nav_bridge": "Bridge", + "nav_earn_strategies": "Earn Strategies", "nav_transfer": "Transfer", "nav_lending": "Lending", "nav_swap": "Swap", diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx index 3a758d2989..e76d52fe2d 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx @@ -1,8 +1,7 @@ -import { ISubmittableResult } from '@polkadot/types/types'; import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import { FaCheckCircle } from 'react-icons/fa'; -import { useMutation, useQueryClient } from 'react-query'; +import { useQueryClient } from 'react-query'; import { toast } from 'react-toastify'; import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; @@ -16,7 +15,7 @@ import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; -import { submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useQueryParams from '@/utils/hooks/use-query-params'; import ManualIssueExecutionUI from '../ManualIssueExecutionUI'; @@ -34,21 +33,15 @@ const ConfirmedIssueRequest = ({ request }: Props): JSX.Element => { const selectedPageIndex = selectedPage - 1; const queryClient = useQueryClient(); - // TODO: should type properly (`Relay`) - const executeMutation = useMutation( - (variables: any) => { - if (!variables.backingPayment.btcTxId) { - throw new Error('Bitcoin transaction ID not identified yet.'); - } - return submitExtrinsicPromise(window.bridge.issue.execute(variables.id, variables.backingPayment.btcTxId)); - }, - { - onSuccess: (_, variables) => { - queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); - toast.success(t('issue_page.successfully_executed', { id: variables.id })); - } + + // TODO: check if this transaction is necessary + const transaction = useTransaction(Transaction.ISSUE_EXECUTE, { + onSuccess: (_, variables) => { + const [requestId] = variables.args; + queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); + toast.success(t('issue_page.successfully_executed', { id: requestId })); } - ); + }); return ( <> @@ -82,16 +75,14 @@ const ConfirmedIssueRequest = ({ request }: Props): JSX.Element => {

- {executeMutation.isError && executeMutation.error && ( + {transaction.isError && transaction.error && ( { - executeMutation.reset(); + transaction.reset(); }} title='Error' - description={ - typeof executeMutation.error === 'string' ? executeMutation.error : executeMutation.error.message - } + description={typeof transaction.error === 'string' ? transaction.error : transaction.error.message} /> )} diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx index 5aee169f45..c93aa9aae2 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx @@ -5,10 +5,9 @@ import { newAccountId, newMonetaryAmount } from '@interlay/interbtc-api'; -import { ISubmittableResult } from '@polkadot/types/types'; import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery, useQueryClient } from 'react-query'; import { toast } from 'react-toastify'; import { displayMonetaryAmount } from '@/common/utils/utils'; @@ -21,7 +20,7 @@ import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; -import { submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useQueryParams from '@/utils/hooks/use-query-params'; // TODO: issue requests should not be typed here but further above in the app @@ -57,21 +56,13 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { const queryClient = useQueryClient(); - // TODO: should type properly (`Relay`) - const executeMutation = useMutation( - (variables: any) => { - if (!variables.backingPayment.btcTxId) { - throw new Error('Bitcoin transaction ID not identified yet.'); - } - return submitExtrinsicPromise(window.bridge.issue.execute(variables.id, variables.backingPayment.btcTxId)); - }, - { - onSuccess: (_, variables) => { - queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); - toast.success(t('issue_page.successfully_executed', { id: variables.id })); - } + const transaction = useTransaction(Transaction.ISSUE_EXECUTE, { + onSuccess: (_, variables) => { + const [requestId] = variables.args; + queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); + toast.success(t('issue_page.successfully_executed', { id: requestId })); } - ); + }); const { data: vaultCapacity, error: vaultCapacityError } = useQuery({ queryKey: 'vault-capacity', @@ -91,7 +82,12 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { // TODO: should type properly (`Relay`) const handleExecute = (request: any) => () => { - executeMutation.mutate(request); + if (!request.backingPayment.btcTxId) { + console.error('Bitcoin transaction ID not identified yet.'); + return; + } + + transaction.execute(request.id, request.backingPayment.btcTxId); }; const backingPaymentAmount = newMonetaryAmount(request.backingPayment.amount, WRAPPED_TOKEN); @@ -135,7 +131,7 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { )} @@ -143,16 +139,14 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL })} - {executeMutation.isError && executeMutation.error && ( + {transaction.isError && transaction.error && ( { - executeMutation.reset(); + transaction.reset(); }} title='Error' - description={ - typeof executeMutation.error === 'string' ? executeMutation.error : executeMutation.error.message - } + description={typeof transaction.error === 'string' ? transaction.error : transaction.error.message} /> )} diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx index 4a7030bc4c..4baf947a1b 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx @@ -1,11 +1,8 @@ -import { CurrencyExt, LiquidityPool, newMonetaryAmount, PooledCurrencies } from '@interlay/interbtc-api'; -import { AccountId } from '@polkadot/types/interfaces'; -import { ISubmittableResult } from '@polkadot/types/types'; +import { CurrencyExt, LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; import { ChangeEventHandler, RefObject, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { toast } from 'react-toastify'; import { displayMonetaryAmountInUSDFormat, newSafeMonetaryAmount } from '@/common/utils/utils'; @@ -21,10 +18,10 @@ import { } from '@/lib/form'; import { SlippageManager } from '@/pages/AMM/shared/components'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; @@ -35,17 +32,6 @@ import { DepositOutputAssets } from './DepositOutputAssets'; const isCustomAmountsMode = (form: ReturnType) => form.dirty && Object.values(form.touched).filter(Boolean).length > 0; -type DepositData = { - amounts: PooledCurrencies; - pool: LiquidityPool; - slippage: number; - deadline: number; - accountId: AccountId; -}; - -const mutateDeposit = ({ amounts, pool, slippage, deadline, accountId }: DepositData) => - submitExtrinsic(window.bridge.amm.addLiquidity(amounts, pool, slippage, deadline, accountId)); - type DepositFormProps = { pool: LiquidityPool; slippageModalRef: RefObject; @@ -65,7 +51,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J const governanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); - const depositMutation = useMutation(mutateDeposit, { + const transaction = useTransaction(Transaction.AMM_ADD_LIQUIDITY, { onSuccess: () => { onDeposit?.(); toast.success('Deposit successful'); @@ -85,7 +71,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); - return depositMutation.mutate({ amounts, pool, slippage, deadline, accountId }); + return transaction.execute(amounts, pool, slippage, deadline, accountId); } catch (err: any) { toast.error(err.toString()); } @@ -106,7 +92,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J initialValues: defaultValues, validationSchema: depositLiquidityPoolSchema({ transactionFee: TRANSACTION_FEE_AMOUNT, governanceBalance, tokens }), onSubmit: handleSubmit, - disableValidation: depositMutation.isLoading + disableValidation: transaction.isLoading }); const handleChange: ChangeEventHandler = (e) => { @@ -203,7 +189,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J - + {t('amm.pools.add_liquidity')} diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx index a845df1639..1689c20a32 100644 --- a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx +++ b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx @@ -1,16 +1,15 @@ import { LiquidityPool } from '@interlay/interbtc-api'; import Big from 'big.js'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { toast } from 'react-toastify'; import { formatUSD } from '@/common/utils/utils'; import { Card, Dl, DlGroup } from '@/component-library'; import { AuthCTA } from '@/components'; import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { StyledDd, StyledDt } from './PoolsInsights.style'; import { calculateClaimableFarmingRewardUSD } from './utils'; @@ -55,17 +54,11 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) refetch(); }; - const mutateClaimRewards = async () => { - if (accountPoolsData !== undefined) { - await submitExtrinsic(window.bridge.amm.claimFarmingRewards(accountPoolsData.claimableRewards)); - } - }; - - const claimRewardsMutation = useMutation(mutateClaimRewards, { + const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, { onSuccess: handleSuccess }); - const handleClickClaimRewards = () => claimRewardsMutation.mutate(); + const handleClickClaimRewards = () => accountPoolsData && transaction.execute(accountPoolsData.claimableRewards); const hasClaimableRewards = totalClaimableRewardUSD > 0; return ( @@ -88,7 +81,7 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) {formatUSD(totalClaimableRewardUSD, { compact: true })} {hasClaimableRewards && ( - + Claim )} diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx index 3eeb392479..4f2ea60b55 100644 --- a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -1,11 +1,7 @@ -import { LiquidityPool, LpCurrency, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { AccountId } from '@polkadot/types/interfaces'; -import { ISubmittableResult } from '@polkadot/types/types'; +import { LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; import Big from 'big.js'; import { RefObject, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { toast } from 'react-toastify'; import { @@ -20,27 +16,16 @@ import { isFormDisabled, useForm, WITHDRAW_LIQUIDITY_POOL_FIELD } from '@/lib/fo import { WithdrawLiquidityPoolFormData, withdrawLiquidityPoolSchema } from '@/lib/form/schemas'; import { SlippageManager } from '@/pages/AMM/shared/components'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; import { WithdrawAssets } from './WithdrawAssets'; import { StyledDl } from './WithdrawForm.styles'; -type DepositData = { - amount: MonetaryAmount; - pool: LiquidityPool; - slippage: number; - deadline: number; - accountId: AccountId; -}; - -const mutateWithdraw = ({ amount, pool, slippage, deadline, accountId }: DepositData) => - submitExtrinsic(window.bridge.amm.removeLiquidity(amount, pool, slippage, deadline, accountId)); - type WithdrawFormProps = { pool: LiquidityPool; slippageModalRef: RefObject; @@ -55,7 +40,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) const prices = useGetPrices(); const { getBalance } = useGetBalances(); - const withdrawMutation = useMutation(mutateWithdraw, { + const transaction = useTransaction(Transaction.AMM_REMOVE_LIQUIDITY, { onSuccess: () => { onWithdraw?.(); toast.success('Withdraw successful'); @@ -85,7 +70,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) const amount = newMonetaryAmount(data[WITHDRAW_LIQUIDITY_POOL_FIELD] || 0, lpToken, true); const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); - return withdrawMutation.mutate({ amount, pool, deadline, slippage, accountId }); + return transaction.execute(amount, pool, slippage, deadline, accountId); } catch (err: any) { toast.error(err.toString()); } @@ -157,7 +142,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) - + {t('amm.pools.remove_liquidity')} diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx index 716ca91398..a4d60bbcf6 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx @@ -1,12 +1,8 @@ import { CurrencyExt, LiquidityPool, newMonetaryAmount, Trade } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { AddressOrPair } from '@polkadot/api/types'; -import { ISubmittableResult } from '@polkadot/types/types'; import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; import { ChangeEventHandler, Key, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { useSelector } from 'react-redux'; import { toast } from 'react-toastify'; import { useDebounce } from 'react-use'; @@ -26,11 +22,11 @@ import { import { SlippageManager } from '@/pages/AMM/shared/components'; import { SwapPair } from '@/types/swap'; import { SWAP_PRICE_IMPACT_LIMIT } from '@/utils/constants/swap'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { PriceImpactModal } from '../PriceImpactModal'; @@ -83,16 +79,6 @@ const getPoolPriceImpact = (trade: Trade | null | undefined, inputAmountUSD: num : new Big(0) }); -type SwapData = { - trade: Trade; - minimumAmountOut: MonetaryAmount; - recipient: AddressOrPair; - deadline: string | number; -}; - -const mutateSwap = ({ deadline, minimumAmountOut, recipient, trade }: SwapData) => - submitExtrinsic(window.bridge.amm.swap(trade, minimumAmountOut, recipient, deadline)); - type Props = { pair: SwapPair; liquidityPools: LiquidityPool[]; @@ -126,6 +112,18 @@ const SwapForm = ({ const { data: balances, getBalance, getAvailableBalance } = useGetBalances(); const { data: currencies } = useGetCurrencies(bridgeLoaded); + const transaction = useTransaction(Transaction.AMM_SWAP, { + onSuccess: () => { + toast.success('Swap successful'); + setTrade(undefined); + setInputAmount(undefined); + onSwap(); + }, + onError: (err) => { + toast.error(err.message); + } + }); + useDebounce( () => { if (!pair.input || !pair.output || !inputAmount) { @@ -141,18 +139,6 @@ const SwapForm = ({ [inputAmount, pair] ); - const swapMutation = useMutation(mutateSwap, { - onSuccess: () => { - toast.success('Swap successful'); - setTrade(undefined); - setInputAmount(undefined); - onSwap(); - }, - onError: (err) => { - toast.error(err.message); - } - }); - const inputBalance = pair.input && getAvailableBalance(pair.input.ticker); const outputBalance = pair.output && getAvailableBalance(pair.output.ticker); @@ -174,12 +160,7 @@ const SwapForm = ({ const deadline = await window.bridge.system.getFutureBlockNumber(30 * 60); - return swapMutation.mutate({ - trade, - recipient: accountId, - minimumAmountOut, - deadline - }); + return transaction.execute(trade, minimumAmountOut, accountId, deadline); } catch (err: any) { toast.error(err.toString()); } @@ -212,7 +193,7 @@ const SwapForm = ({ initialValues, validationSchema: swapSchema({ [SWAP_INPUT_AMOUNT_FIELD]: inputSchemaParams }), onSubmit: handleSubmit, - disableValidation: swapMutation.isLoading, + disableValidation: transaction.isLoading, validateOnMount: true }); @@ -239,11 +220,11 @@ const SwapForm = ({ useEffect(() => { const isAmountFieldEmpty = form.values[SWAP_INPUT_AMOUNT_FIELD] === ''; - if (isAmountFieldEmpty || !swapMutation.isSuccess) return; + if (isAmountFieldEmpty || !transaction.isSuccess) return; form.setFieldValue(SWAP_INPUT_AMOUNT_FIELD, ''); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [swapMutation.isSuccess]); + }, [transaction.isSuccess]); const handleChangeInput: ChangeEventHandler = (e) => { setInputAmount(e.target.value); @@ -341,7 +322,7 @@ const SwapForm = ({ /> {trade && } - + diff --git a/src/pages/Bridge/BurnForm/index.tsx b/src/pages/Bridge/BurnForm/index.tsx index 622b842372..2063218a57 100644 --- a/src/pages/Bridge/BurnForm/index.tsx +++ b/src/pages/Bridge/BurnForm/index.tsx @@ -25,11 +25,11 @@ import Tokens, { TokenOption } from '@/legacy-components/Tokens'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetCollateralCurrencies } from '@/utils/hooks/api/use-get-collateral-currencies'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const WRAPPED_TOKEN_AMOUNT = 'wrapped-token-amount'; @@ -73,6 +73,8 @@ const BurnForm = (): JSX.Element | null => { const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); const [submitError, setSubmitError] = React.useState(null); + const transaction = useTransaction(Transaction.REDEEM_BURN); + const handleUpdateCollateral = (collateral: TokenOption) => { const selectedCollateral = burnableCollateral?.find( (token: BurnableCollateral) => token.currency.ticker === collateral.token.ticker @@ -150,9 +152,8 @@ const BurnForm = (): JSX.Element | null => { const onSubmit = async (data: BurnFormData) => { try { setSubmitStatus(STATUSES.PENDING); - await submitExtrinsic( - window.bridge.redeem.burn(new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT]), selectedCollateral.currency) - ); + + await transaction.executeAsync(new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT]), selectedCollateral.currency); setSubmitStatus(STATUSES.RESOLVED); } catch (error) { diff --git a/src/pages/Bridge/IssueForm/index.tsx b/src/pages/Bridge/IssueForm/index.tsx index 6a871b7c1c..2e3b83db45 100644 --- a/src/pages/Bridge/IssueForm/index.tsx +++ b/src/pages/Bridge/IssueForm/index.tsx @@ -56,11 +56,11 @@ import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fet import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; -import { getExtrinsicStatus, submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import ManualVaultSelectUI from '../ManualVaultSelectUI'; import SubmittedIssueRequestModal from './SubmittedIssueRequestModal'; @@ -142,6 +142,8 @@ const IssueForm = (): JSX.Element | null => { }); useErrorHandler(requestLimitsError); + const transaction = useTransaction(Transaction.ISSUE_REQUEST); + React.useEffect(() => { if (!bridgeLoaded) return; if (!dispatch) return; @@ -321,18 +323,14 @@ const IssueForm = (): JSX.Element | null => { const collateralToken = await currencyIdToMonetaryCurrency(window.bridge.api, vaultId.currencies.collateral); - const extrinsicData = await window.bridge.issue.request( + const result = await transaction.executeAsync( monetaryBtcAmount, vaultId.accountId, collateralToken, false, // default vaults ); - // When requesting an issue, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - const finalizedStatus = getExtrinsicStatus('Finalized'); - const extrinsicResult = await submitExtrinsic(extrinsicData, finalizedStatus); - const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, extrinsicResult); + const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result); // TODO: handle issue aggregation const issueRequest = issueRequests[0]; diff --git a/src/pages/Bridge/RedeemForm/index.tsx b/src/pages/Bridge/RedeemForm/index.tsx index 1248b5167d..357bfcf540 100644 --- a/src/pages/Bridge/RedeemForm/index.tsx +++ b/src/pages/Bridge/RedeemForm/index.tsx @@ -1,5 +1,10 @@ -import { CollateralCurrencyExt, InterbtcPrimitivesVaultId, newMonetaryAmount, Redeem } from '@interlay/interbtc-api'; -import { getRedeemRequestsFromExtrinsicResult } from '@interlay/interbtc-api'; +import { + CollateralCurrencyExt, + getRedeemRequestsFromExtrinsicResult, + InterbtcPrimitivesVaultId, + newMonetaryAmount, + Redeem +} from '@interlay/interbtc-api'; import { Bitcoin, BitcoinAmount, ExchangeRate } from '@interlay/monetary-js'; import Big from 'big.js'; import clsx from 'clsx'; @@ -44,11 +49,11 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; import { getColorShade } from '@/utils/helpers/colors'; -import { getExtrinsicStatus, submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import ManualVaultSelectUI from '../ManualVaultSelectUI'; import SubmittedRedeemRequestModal from './SubmittedRedeemRequestModal'; @@ -114,6 +119,8 @@ const RedeemForm = (): JSX.Element | null => { const [selectedVault, setSelectedVault] = React.useState(); + const transaction = useTransaction(Transaction.REDEEM_REQUEST); + React.useEffect(() => { if (!monetaryWrappedTokenAmount) return; if (!maxRedeemableCapacity) return; @@ -295,16 +302,10 @@ const RedeemForm = (): JSX.Element | null => { const relevantVaults = new Map(); // FIXME: a bit of a dirty workaround with the capacity relevantVaults.set(vaultId, monetaryWrappedTokenAmount.mul(2)); - const extrinsicData = await window.bridge.redeem.request( - monetaryWrappedTokenAmount, - data[BTC_ADDRESS], - vaultId - ); - // When requesting a redeem, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - const finalizedStatus = getExtrinsicStatus('Finalized'); - const extrinsicResult = await submitExtrinsic(extrinsicData, finalizedStatus); - const redeemRequests = await getRedeemRequestsFromExtrinsicResult(window.bridge, extrinsicResult); + + const result = await transaction.executeAsync(monetaryWrappedTokenAmount, data[BTC_ADDRESS], vaultId); + + const redeemRequests = await getRedeemRequestsFromExtrinsicResult(window.bridge, result); // TODO: handle redeem aggregator const redeemRequest = redeemRequests[0]; diff --git a/src/pages/EarnStrategies/EarnStrategies.tsx b/src/pages/EarnStrategies/EarnStrategies.tsx new file mode 100644 index 0000000000..84ab2c0d2b --- /dev/null +++ b/src/pages/EarnStrategies/EarnStrategies.tsx @@ -0,0 +1,14 @@ +import { withErrorBoundary } from 'react-error-boundary'; + +import ErrorFallback from '@/legacy-components/ErrorFallback'; + +const EarnStrategies = (): JSX.Element => { + return

Earn Strategies

; +}; + +export default withErrorBoundary(EarnStrategies, { + FallbackComponent: ErrorFallback, + onReset: () => { + window.location.reload(); + } +}); diff --git a/src/pages/EarnStrategies/index.tsx b/src/pages/EarnStrategies/index.tsx new file mode 100644 index 0000000000..7a73a2c641 --- /dev/null +++ b/src/pages/EarnStrategies/index.tsx @@ -0,0 +1,3 @@ +import EarnStrategies from './EarnStrategies'; + +export default EarnStrategies; diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx index 9b545e17ff..2ec3d03b04 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx @@ -1,31 +1,19 @@ -import { CollateralPosition, CurrencyExt, LoanAsset } from '@interlay/interbtc-api'; -import { ISubmittableResult } from '@polkadot/types/types'; +import { CollateralPosition, LoanAsset } from '@interlay/interbtc-api'; import { TFunction, useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { toast } from 'react-toastify'; import { Flex, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps, Status } from '@/component-library'; import { AuthCTA } from '@/components'; import ErrorModal from '@/legacy-components/ErrorModal'; -import { submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { useGetLTV } from '../../hooks/use-get-ltv'; import { BorrowLimit } from '../BorrowLimit'; import { LoanActionInfo } from '../LoanActionInfo'; import { StyledDescription } from './CollateralModal.style'; -type ToggleCollateralVariables = { isEnabling: boolean; underlyingCurrency: CurrencyExt }; - -const toggleCollateral = ({ isEnabling, underlyingCurrency }: ToggleCollateralVariables) => { - if (isEnabling) { - return submitExtrinsicPromise(window.bridge.loans.enableAsCollateral(underlyingCurrency)); - } else { - return submitExtrinsicPromise(window.bridge.loans.disableAsCollateral(underlyingCurrency)); - } -}; - type CollateralModalVariant = 'enable' | 'disable' | 'disable-error'; const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: LoanAsset) => @@ -73,14 +61,12 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal const { getLTV } = useGetLTV(); const prices = useGetPrices(); - const handleSuccess = () => { - toast.success('Successfully toggled collateral'); - onClose?.(); - refetch(); - }; - - const toggleCollateralMutation = useMutation(toggleCollateral, { - onSuccess: handleSuccess + const transaction = useTransaction({ + onSuccess: () => { + toast.success('Successfully toggled collateral'); + onClose?.(); + refetch(); + } }); if (!asset || !position) { @@ -100,9 +86,11 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal return onClose?.(); } - const isEnabling = variant === 'enable'; - - return toggleCollateralMutation.mutate({ isEnabling, underlyingCurrency: position.amount.currency }); + if (variant === 'enable') { + return transaction.execute(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); + } else { + return transaction.execute(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); + } }; return ( @@ -117,17 +105,17 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal - + {content.buttonLabel} - {toggleCollateralMutation.isError && ( + {transaction.isError && ( toggleCollateralMutation.reset()} + open={transaction.isError} + onClose={() => transaction.reset()} title='Error' - description={toggleCollateralMutation.error?.message || ''} + description={transaction.error?.message || ''} /> )} diff --git a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx index bd89f6b57e..edc7763901 100644 --- a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx @@ -12,8 +12,8 @@ import { AuthCTA } from '@/components'; import { isFormDisabled, LoanFormData, loanSchema, LoanValidationParams, useForm } from '@/lib/form'; import { LoanAction } from '@/types/loans'; import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; -import { useLoanMutation } from '@/utils/hooks/api/loans/use-loan-mutation'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { useLoanFormData } from '../../hooks/use-loan-form-data'; import { isLendAsset } from '../../utils/is-loan-asset'; @@ -116,18 +116,45 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS [inputAmount] ); - const handleSuccess = () => { - toast.success(`Successful ${content.title.toLowerCase()}`); - onChangeLoan?.(); - refetch(); - }; + const transaction = useTransaction({ + onSuccess: () => { + toast.success(`Successful ${content.title.toLowerCase()}`); + onChangeLoan?.(); + refetch(); + }, + onError: (error: Error) => { + toast.error(error.message); + } + }); - const handleError = (error: Error) => { - toast.error(error.message); + const handleSubmit = (data: LoanFormData) => { + try { + const amount = data[variant] || 0; + const monetaryAmount = newMonetaryAmount(amount, asset.currency, true); + + switch (variant) { + case 'lend': + return transaction.execute(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); + case 'withdraw': + if (isMaxAmount) { + return transaction.execute(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); + } else { + return transaction.execute(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); + } + case 'borrow': + return transaction.execute(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); + case 'repay': + if (isMaxAmount) { + return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency); + } else { + return transaction.execute(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); + } + } + } catch (err: any) { + toast.error(err.toString()); + } }; - const loanMutation = useLoanMutation({ onSuccess: handleSuccess, onError: handleError }); - const schemaParams: LoanValidationParams = { governanceBalance, transactionFee, @@ -135,16 +162,6 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS maxAmount: assetAmount.available }; - const handleSubmit = (data: LoanFormData) => { - try { - const submittedAmount = data[variant] || 0; - const submittedMonetaryAmount = newMonetaryAmount(submittedAmount, asset.currency, true); - loanMutation.mutate({ amount: submittedMonetaryAmount, loanType: variant, isMaxAmount }); - } catch (err: any) { - toast.error(err.toString()); - } - }; - const form = useForm({ initialValues: { [variant]: '' }, validationSchema: loanSchema(variant, schemaParams), @@ -199,7 +216,7 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS - + {content.title} diff --git a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx index 41bfd6a148..6ad85f8d82 100644 --- a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx @@ -1,20 +1,16 @@ -import { ISubmittableResult } from '@polkadot/types/types'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { toast } from 'react-toastify'; import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils'; import { Card, Dl, DlGroup } from '@/component-library'; import { AuthCTA } from '@/components'; import ErrorModal from '@/legacy-components/ErrorModal'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { StyledDd, StyledDt } from './LoansInsights.style'; -const mutateClaimRewards = () => submitExtrinsic(window.bridge.loans.claimAllSubsidyRewards()); - type LoansInsightsProps = { statistics?: AccountLendingStatistics; }; @@ -23,16 +19,14 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { const { t } = useTranslation(); const { data: subsidyRewards, refetch } = useGetAccountSubsidyRewards(); - const handleSuccess = () => { - toast.success(t('successfully_claimed_rewards')); - refetch(); - }; - - const claimRewardsMutation = useMutation(mutateClaimRewards, { - onSuccess: handleSuccess + const transaction = useTransaction(Transaction.LOANS_CLAIM_REWARDS, { + onSuccess: () => { + toast.success(t('successfully_claimed_rewards')); + refetch(); + } }); - const handleClickClaimRewards = () => claimRewardsMutation.mutate(); + const handleClickClaimRewards = () => transaction.execute(); const { supplyAmountUSD, netAPY } = statistics || {}; @@ -76,18 +70,18 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { {subsidyRewardsAmountLabel} {hasSubsidyRewards && ( - + Claim )} - {claimRewardsMutation.isError && ( + {transaction.isError && ( claimRewardsMutation.reset()} + open={transaction.isError} + onClose={() => transaction.reset()} title='Error' - description={claimRewardsMutation.error?.message || ''} + description={transaction.error?.message || ''} /> )} diff --git a/src/pages/Staking/ClaimRewardsButton/index.tsx b/src/pages/Staking/ClaimRewardsButton/index.tsx index 2ad34879cd..442da162c0 100644 --- a/src/pages/Staking/ClaimRewardsButton/index.tsx +++ b/src/pages/Staking/ClaimRewardsButton/index.tsx @@ -1,6 +1,5 @@ -import { ISubmittableResult } from '@polkadot/types/types'; import clsx from 'clsx'; -import { useMutation, useQueryClient } from 'react-query'; +import { useQueryClient } from 'react-query'; import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; import InterlayDenimOrKintsugiSupernovaContainedButton, { @@ -9,7 +8,7 @@ import InterlayDenimOrKintsugiSupernovaContainedButton, { import ErrorModal from '@/legacy-components/ErrorModal'; import { useSubstrateSecureState } from '@/lib/substrate'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; interface CustomProps { claimableRewardAmount: string; @@ -24,20 +23,15 @@ const ClaimRewardsButton = ({ const queryClient = useQueryClient(); - const claimRewardsMutation = useMutation( - () => { - return submitExtrinsic(window.bridge.escrow.withdrawRewards()); - }, - { - onSuccess: () => { - queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccount?.address]); - queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getRewards', selectedAccount?.address]); - } + const transaction = useTransaction(Transaction.ESCROW_WITHDRAW_REWARDS, { + onSuccess: () => { + queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccount?.address]); + queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getRewards', selectedAccount?.address]); } - ); + }); const handleClaimRewards = () => { - claimRewardsMutation.mutate(); + transaction.execute(); }; return ( @@ -45,19 +39,19 @@ const ClaimRewardsButton = ({ Claim {claimableRewardAmount} {GOVERNANCE_TOKEN_SYMBOL} Rewards - {claimRewardsMutation.isError && ( + {transaction.isError && ( { - claimRewardsMutation.reset(); + transaction.reset(); }} title='Error' - description={claimRewardsMutation.error?.message || ''} + description={transaction.error?.message || ''} /> )} diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index e7c8dfd505..043d6b1185 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -1,5 +1,4 @@ import { newMonetaryAmount } from '@interlay/interbtc-api'; -import { ISubmittableResult } from '@polkadot/types/types'; import Big from 'big.js'; import clsx from 'clsx'; import { add, format } from 'date-fns'; @@ -7,7 +6,7 @@ import * as React from 'react'; import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery, useQueryClient } from 'react-query'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; @@ -44,10 +43,10 @@ import { } from '@/services/fetchers/staking-transaction-fee-reserve-fetcher'; import { ZERO_GOVERNANCE_TOKEN_AMOUNT, ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { useSignMessage } from '@/utils/hooks/use-sign-message'; import BalancesUI from './BalancesUI'; @@ -100,11 +99,6 @@ interface StakedAmountAndEndBlock { endBlock: number; } -interface LockingAmountAndTime { - amount: GovernanceTokenMonetaryAmount; - time: number; // Weeks -} - const Staking = (): JSX.Element => { const [blockLockTimeExtension, setBlockLockTimeExtension] = React.useState(0); @@ -248,63 +242,25 @@ const Staking = (): JSX.Element => { ); useErrorHandler(transactionFeeReserveError); - const initialStakeMutation = useMutation( - (variables: LockingAmountAndTime) => { - if (currentBlockNumber === undefined) { - throw new Error('Something went wrong!'); - } - const unlockHeight = currentBlockNumber + convertWeeksToBlockNumbers(variables.time); - - return submitExtrinsic(window.bridge.escrow.createLock(variables.amount, unlockHeight)); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); - reset({ - [LOCKING_AMOUNT]: '0.0', - [LOCK_TIME]: '0' - }); - } + const initialStakeTransaction = useTransaction(Transaction.ESCROW_CREATE_LOCK, { + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); + reset({ + [LOCKING_AMOUNT]: '0.0', + [LOCK_TIME]: '0' + }); } - ); - - const moreStakeMutation = useMutation( - (variables: LockingAmountAndTime) => { - return (async () => { - if (stakedAmountAndEndBlock === undefined) { - throw new Error('Something went wrong!'); - } + }); - if (checkIncreaseLockAmountAndExtendLockTime(variables.time, variables.amount)) { - const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(variables.time); - - const txs = [ - window.bridge.api.tx.escrow.increaseAmount(variables.amount.toString(true)), - window.bridge.api.tx.escrow.increaseUnlockHeight(unlockHeight) - ]; - const batch = window.bridge.api.tx.utility.batchAll(txs); - await submitExtrinsic({ extrinsic: batch }); - } else if (checkOnlyIncreaseLockAmount(variables.time, variables.amount)) { - await submitExtrinsic(window.bridge.escrow.increaseAmount(variables.amount)); - } else if (checkOnlyExtendLockTime(variables.time, variables.amount)) { - const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(variables.time); - - await submitExtrinsic(window.bridge.escrow.increaseUnlockHeight(unlockHeight)); - } else { - throw new Error('Something went wrong!'); - } - })(); - }, - { - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); - reset({ - [LOCKING_AMOUNT]: '0.0', - [LOCK_TIME]: '0' - }); - } + const existingStakeTransaction = useTransaction({ + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); + reset({ + [LOCKING_AMOUNT]: '0.0', + [LOCK_TIME]: '0' + }); } - ); + }); React.useEffect(() => { if (isValidating || !isValid || !estimatedRewardAmountAndAPYRefetch) return; @@ -409,15 +365,30 @@ const Staking = (): JSX.Element => { const numberTime = parseInt(lockTimeWithFallback); if (votingBalanceGreaterThanZero) { - moreStakeMutation.mutate({ - amount: monetaryAmount, - time: numberTime - }); + if (stakedAmountAndEndBlock === undefined) { + throw new Error('Something went wrong!'); + } + + if (checkIncreaseLockAmountAndExtendLockTime(numberTime, monetaryAmount)) { + const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(numberTime); + + existingStakeTransaction.execute( + Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT, + monetaryAmount.toString(true), + unlockHeight + ); + } else if (checkOnlyIncreaseLockAmount(numberTime, monetaryAmount)) { + existingStakeTransaction.execute(Transaction.ESCROW_INCREASE_LOCKED_AMOUNT, monetaryAmount); + } else if (checkOnlyExtendLockTime(numberTime, monetaryAmount)) { + const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(numberTime); + + existingStakeTransaction.execute(Transaction.ESCROW_INCREASE_LOCKED_TIME, unlockHeight); + } else { + throw new Error('Something went wrong!'); + } } else { - initialStakeMutation.mutate({ - amount: monetaryAmount, - time: numberTime - }); + const unlockHeight = currentBlockNumber + convertWeeksToBlockNumbers(numberTime); + initialStakeTransaction.execute(monetaryAmount, unlockHeight); } }; @@ -856,7 +827,7 @@ const Staking = (): JSX.Element => { size='large' type='submit' disabled={initializing || unlockFirst || !isValid} - loading={initialStakeMutation.isLoading || moreStakeMutation.isLoading} + loading={initialStakeTransaction.isLoading || existingStakeTransaction.isLoading} > {submitButtonLabel}{' '} {unlockFirst ? ( @@ -866,15 +837,15 @@ const Staking = (): JSX.Element => { - {(initialStakeMutation.isError || moreStakeMutation.isError) && ( + {(initialStakeTransaction.isError || existingStakeTransaction.isError) && ( { - initialStakeMutation.reset(); - moreStakeMutation.reset(); + initialStakeTransaction.reset(); + existingStakeTransaction.reset(); }} title='Error' - description={initialStakeMutation.error?.message || moreStakeMutation.error?.message || ''} + description={initialStakeTransaction.error?.message || existingStakeTransaction.error?.message || ''} /> )} diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx index 339e83d336..dd99e9e509 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx @@ -3,11 +3,27 @@ import { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react'; import { IconProps } from '@/component-library/Icon'; import { StyledFallbackIcon } from './ChainIcon.style'; -import { BIFROST, HEIKO, HYDRA, INTERLAY, KARURA, KINTSUGI, KUSAMA, POLKADOT, STATEMINE, STATEMINT } from './icons'; +import { + ACALA, + ASTAR, + BIFROST, + HEIKO, + HYDRA, + INTERLAY, + KARURA, + KINTSUGI, + KUSAMA, + PARALLEL, + POLKADOT, + STATEMINE, + STATEMINT +} from './icons'; type ChainComponent = ForwardRefExoticComponent>; const chainsIcon: Record = { + ACALA, + ASTAR, BIFROST, HEIKO, HYDRA, @@ -15,6 +31,7 @@ const chainsIcon: Record = { KARURA, KINTSUGI, KUSAMA, + PARALLEL, POLKADOT, STATEMINE, STATEMINT diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx new file mode 100644 index 0000000000..137ffa2a35 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx @@ -0,0 +1,147 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ACALA = forwardRef((props, ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)); + +ACALA.displayName = 'ACALA'; + +export { ACALA }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx new file mode 100644 index 0000000000..61601ee25d --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx @@ -0,0 +1,58 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ASTAR = forwardRef((props, ref) => ( + + ASTAR + + + + + + + + + + + + + + + + + + + +)); + +ASTAR.displayName = 'ASTAR'; + +export { ASTAR }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx new file mode 100644 index 0000000000..b6fc644b49 --- /dev/null +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx @@ -0,0 +1,47 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const PARALLEL = forwardRef((props, ref) => ( + + PARALLEL + + + + + + + + + + + + + + + + + +)); + +PARALLEL.displayName = 'PARALLEL'; + +export { PARALLEL }; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts index e5d13a7014..d3c471eb7a 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts +++ b/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts @@ -1,3 +1,5 @@ +export { ACALA } from './Acala'; +export { ASTAR } from './Astar'; export { BIFROST } from './Bifrost'; export { HEIKO } from './Heiko'; export { HYDRA } from './Hydra'; @@ -5,6 +7,7 @@ export { INTERLAY } from './Interlay'; export { KARURA } from './Karura'; export { KINTSUGI } from './Kintsugi'; export { KUSAMA } from './Kusama'; +export { PARALLEL } from './Parallel'; export { POLKADOT } from './Polkadot'; export { STATEMINE } from './Statemine'; export { STATEMINT } from './Statemint'; diff --git a/src/pages/Transfer/TransferForm/index.tsx b/src/pages/Transfer/TransferForm/index.tsx index e588456dc1..a488cd288f 100644 --- a/src/pages/Transfer/TransferForm/index.tsx +++ b/src/pages/Transfer/TransferForm/index.tsx @@ -18,8 +18,8 @@ import Tokens, { TokenOption } from '@/legacy-components/Tokens'; import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import isValidPolkadotAddress from '@/utils/helpers/is-valid-polkadot-address'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import TokenAmountField from '../TokenAmountField'; @@ -50,6 +50,8 @@ const TransferForm = (): JSX.Element => { const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); const [submitError, setSubmitError] = React.useState(null); + const transaction = useTransaction(Transaction.TOKENS_TRANSFER); + const onSubmit = async (data: TransferFormData) => { if (!activeToken) return; if (data[TRANSFER_AMOUNT] === undefined) return; @@ -57,11 +59,9 @@ const TransferForm = (): JSX.Element => { try { setSubmitStatus(STATUSES.PENDING); - await submitExtrinsic( - window.bridge.tokens.transfer( - data[RECIPIENT_ADDRESS], - newMonetaryAmount(data[TRANSFER_AMOUNT], activeToken.token, true) - ) + await transaction.executeAsync( + data[RECIPIENT_ADDRESS], + newMonetaryAmount(data[TRANSFER_AMOUNT], activeToken.token, true) ); setSubmitStatus(STATUSES.RESOLVED); diff --git a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx index 91c08d48cb..4e9215ce82 100644 --- a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx @@ -44,11 +44,11 @@ import SubmittedIssueRequestModal from '@/pages/Bridge/IssueForm/SubmittedIssueR import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; -import { getExtrinsicStatus, submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; const WRAPPED_TOKEN_AMOUNT = 'amount'; @@ -108,6 +108,8 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro const vaultAccountId = useAccountId(vaultAddress); + const transaction = useTransaction(Transaction.ISSUE_REQUEST); + React.useEffect(() => { if (!bridgeLoaded) return; if (!handleError) return; @@ -180,17 +182,14 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); - const extrinsicData = await window.bridge.issue.request( + const extrinsicResult = await transaction.executeAsync( wrappedTokenAmount, vaultAccountId, collateralToken, false, // default vaults ); - // When requesting an issue, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - const finalizedStatus = getExtrinsicStatus('Finalized'); - const extrinsicResult = await submitExtrinsic(extrinsicData, finalizedStatus); + const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, extrinsicResult); // TODO: handle issue aggregation diff --git a/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx b/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx index 300211d7ec..dde21974e5 100644 --- a/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx @@ -17,7 +17,7 @@ import ErrorMessage from '@/legacy-components/ErrorMessage'; import NumberInput from '@/legacy-components/NumberInput'; import TextField from '@/legacy-components/TextField'; import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; -import { getExtrinsicStatus, submitExtrinsic } from '@/utils/helpers/extrinsic'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const WRAPPED_TOKEN_AMOUNT = 'amount'; const BTC_ADDRESS = 'btc-address'; @@ -47,6 +47,8 @@ const RequestRedeemModal = ({ onClose, open, collateralToken, vaultAddress, lock const { t } = useTranslation(); const focusRef = React.useRef(null); + const transaction = useTransaction(Transaction.REDEEM_REQUEST); + const onSubmit = handleSubmit(async (data) => { setRequestPending(true); try { @@ -61,11 +63,7 @@ const RequestRedeemModal = ({ onClose, open, collateralToken, vaultAddress, lock } const vaultId = newVaultId(window.bridge.api, vaultAddress, collateralToken, WRAPPED_TOKEN); - const extrinsicData = await window.bridge.redeem.request(amountPolkaBtc, data[BTC_ADDRESS], vaultId); - // When requesting a redeem, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - const finalizedStatus = getExtrinsicStatus('Finalized'); - await submitExtrinsic(extrinsicData, finalizedStatus); + await transaction.executeAsync(amountPolkaBtc, data[BTC_ADDRESS], vaultId); queryClient.invalidateQueries(['vaultsOverview', vaultAddress, collateralToken.ticker]); diff --git a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx index b296f04bf0..a92acc73b2 100644 --- a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx @@ -25,9 +25,9 @@ import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsis import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; -import { getExtrinsicStatus, submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const AMOUNT = 'amount'; @@ -78,6 +78,8 @@ const RequestReplacementModal = ({ ); const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); + const transaction = useTransaction(Transaction.REPLACE_REQUEST); + useEffect(() => { if (!bridgeLoaded) return; if (!handleError) return; @@ -105,10 +107,8 @@ const RequestReplacementModal = ({ try { setSubmitStatus(STATUSES.PENDING); const amountPolkaBtc = new BitcoinAmount(data[AMOUNT]); - // When requesting a replace, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - const finalizedStatus = getExtrinsicStatus('Finalized'); - submitExtrinsic(window.bridge.replace.request(amountPolkaBtc, collateralToken), finalizedStatus); + + await transaction.executeAsync(amountPolkaBtc, collateralToken); const vaultId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, vaultAddress); queryClient.invalidateQueries([GENERIC_FETCHER, 'mapReplaceRequests', vaultId]); diff --git a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx index 772fa93e3d..dad669da97 100644 --- a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx +++ b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx @@ -21,10 +21,10 @@ import TokenField from '@/legacy-components/TokenField'; import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; -import { submitExtrinsic, submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; enum CollateralUpdateStatus { Close, @@ -129,6 +129,8 @@ const UpdateCollateralModal = ({ ); useErrorHandler(vaultCollateralizationError); + const transaction = useTransaction(); + const handleClose = chain(() => resetField(COLLATERAL_TOKEN_AMOUNT), onClose); const onSubmit = async (data: UpdateCollateralFormData) => { @@ -142,9 +144,9 @@ const UpdateCollateralModal = ({ true ) as MonetaryAmount; if (collateralUpdateStatus === CollateralUpdateStatus.Deposit) { - await submitExtrinsic(window.bridge.vaults.depositCollateral(collateralTokenAmount)); + await transaction.executeAsync(Transaction.VAULTS_DEPOSIT_COLLATERAL, collateralTokenAmount); } else if (collateralUpdateStatus === CollateralUpdateStatus.Withdraw) { - await submitExtrinsicPromise(window.bridge.vaults.withdrawCollateral(collateralTokenAmount)); + await transaction.executeAsync(Transaction.VAULTS_WITHDRAW_COLLATERAL, collateralTokenAmount); } else { throw new Error('Something went wrong!'); } diff --git a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx index e2bc840f77..2b8cedbe6b 100644 --- a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx +++ b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx @@ -1,7 +1,6 @@ import { CollateralCurrencyExt, newVaultId, WrappedCurrency, WrappedIdLiteral } from '@interlay/interbtc-api'; -import { ISubmittableResult } from '@polkadot/types/types'; import Big from 'big.js'; -import { useMutation, useQueryClient } from 'react-query'; +import { useQueryClient } from 'react-query'; import { toast } from 'react-toastify'; import { formatNumber, formatUSD } from '@/common/utils/utils'; @@ -10,8 +9,8 @@ import { LoadingSpinner } from '@/component-library/LoadingSpinner'; import { GOVERNANCE_TOKEN_SYMBOL, WRAPPED_TOKEN } from '@/config/relay-chains'; import ErrorModal from '@/legacy-components/ErrorModal'; import { ZERO_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; -import { submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { InsightListItem, InsightsList } from '../InsightsList'; @@ -49,31 +48,24 @@ const Rewards = ({ const queryClient = useQueryClient(); const vaultAccountId = useAccountId(vaultAddress); - const claimRewardsMutation = useMutation( - () => { - if (vaultAccountId === undefined) { - throw new Error('Something went wrong!'); - } - - const vaultId = newVaultId( - window.bridge.api, - vaultAccountId.toString(), - collateralToken, - WRAPPED_TOKEN as WrappedCurrency - ); - - return submitExtrinsicPromise(window.bridge.rewards.withdrawRewards(vaultId)); - }, - { - onSuccess: () => { - queryClient.invalidateQueries(['vaultsOverview', vaultAddress, collateralToken.ticker]); - toast.success('Your rewards were successfully withdrawn.'); - } + const transaction = useTransaction(Transaction.REWARDS_WITHDRAW, { + onSuccess: () => { + queryClient.invalidateQueries(['vaultsOverview', vaultAddress, collateralToken.ticker]); + toast.success('Your rewards were successfully withdrawn.'); } - ); + }); const handleClickWithdrawRewards = () => { - claimRewardsMutation.mutate(); + if (vaultAccountId === undefined) return; + + const vaultId = newVaultId( + window.bridge.api, + vaultAccountId.toString(), + collateralToken, + WRAPPED_TOKEN as WrappedCurrency + ); + + transaction.execute(vaultId); }; const hasWithdrawableRewards = @@ -87,11 +79,11 @@ const Rewards = ({ size='small' variant='outlined' onClick={handleClickWithdrawRewards} - disabled={!hasWithdrawableRewards || claimRewardsMutation.isLoading} - $loading={claimRewardsMutation.isLoading} + disabled={!hasWithdrawableRewards || transaction.isLoading} + $loading={transaction.isLoading} > {/* TODO: temporary approach. Loading spinner should be added to the CTA itself */} - {claimRewardsMutation.isLoading && ( + {transaction.isLoading && ( @@ -99,12 +91,12 @@ const Rewards = ({ Withdraw all rewards )} - {claimRewardsMutation.isError && ( + {transaction.isError && ( claimRewardsMutation.reset()} + open={transaction.isError} + onClose={() => transaction.reset()} title='Error' - description={claimRewardsMutation.error?.message || ''} + description={transaction.error?.message || ''} /> )} diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx index 32f28166d1..4fbe4efd89 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx @@ -1,9 +1,7 @@ import { CollateralCurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { ISubmittableResult } from '@polkadot/types/types'; import { useId } from '@react-aria/utils'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { CTA, ModalBody, ModalDivider, ModalFooter, ModalHeader, Span, Stack, TokenInput } from '@/component-library'; @@ -16,8 +14,8 @@ import { isFormDisabled, useForm } from '@/lib/form'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { StepComponentProps, withStep } from '@/utils/hocs/step'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { useDepositCollateral } from '../../utils/use-deposit-collateral'; import { StyledDd, StyledDItem, StyledDl, StyledDt, StyledHr } from './CreateVaultWizard.styles'; @@ -39,6 +37,10 @@ const DepositCollateralStep = ({ const { t } = useTranslation(); const { collateral, fee, governance } = useDepositCollateral(collateralCurrency, minCollateralAmount); + const transaction = useTransaction(Transaction.VAULTS_REGISTER_NEW_COLLATERAL, { + onSuccess: onSuccessfulDeposit + }); + const validationParams = { minAmount: collateral.min.raw, maxAmount: collateral.balance.raw, @@ -50,7 +52,7 @@ const DepositCollateralStep = ({ if (!data.deposit) return; const amount = newMonetaryAmount(data.deposit || 0, collateral.currency, true); - registerNewVaultMutation.mutate(amount); + transaction.execute(amount); }; const form = useForm({ @@ -59,13 +61,6 @@ const DepositCollateralStep = ({ onSubmit: handleSubmit }); - const registerNewVaultMutation = useMutation>( - (collateralAmount) => submitExtrinsic(window.bridge.vaults.registerNewCollateralVault(collateralAmount)), - { - onSuccess: onSuccessfulDeposit - } - ); - const inputCollateralAmount = newSafeMonetaryAmount(form.values.deposit || 0, collateral.currency, true); const isBtnDisabled = isFormDisabled(form); @@ -108,17 +103,17 @@ const DepositCollateralStep = ({ - + {t('vault.deposit_collateral')} - {registerNewVaultMutation.isError && ( + {transaction.isError && ( registerNewVaultMutation.reset()} + open={transaction.isError} + onClose={() => transaction.reset()} title='Error' - description={registerNewVaultMutation.error?.message || ''} + description={transaction.error?.message || ''} /> )} diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx index 83581e5880..54dabf7446 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx @@ -70,6 +70,7 @@ const Navigation = ({ const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); + const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); const NAVIGATION_ITEMS = React.useMemo( () => [ @@ -79,6 +80,12 @@ const Navigation = ({ icon: UserIcon, disabled: !isWalletEnabled }, + { + name: 'nav_earn_strategies', + link: PAGES.EARN_STRATEGIES, + icon: BanknotesIcon, + disabled: !isEarnStrategiesEnabled + }, { name: 'nav_bridge', link: PAGES.BRIDGE, @@ -193,7 +200,14 @@ const Navigation = ({ } } ], - [isWalletEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] + [ + isWalletEnabled, + isEarnStrategiesEnabled, + isLendingEnabled, + isAMMEnabled, + selectedAccount?.address, + vaultClientLoaded + ] ); return ( diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index 7c64f49388..fb189728c4 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -12,6 +12,7 @@ const URL_PARAMETERS = Object.freeze({ const PAGES = Object.freeze({ HOME: '/', BRIDGE: '/bridge', + EARN_STRATEGIES: '/earn-strategies', TRANSFER: '/transfer', TRANSACTIONS: '/transactions', TX: '/tx', diff --git a/src/utils/hooks/api/loans/use-loan-mutation.tsx b/src/utils/hooks/api/loans/use-loan-mutation.tsx deleted file mode 100644 index 0057369b36..0000000000 --- a/src/utils/hooks/api/loans/use-loan-mutation.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { ISubmittableResult } from '@polkadot/types/types'; -import { useMutation, UseMutationResult } from 'react-query'; - -import { LoanAction } from '@/types/loans'; -import { submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; - -type CreateLoanVariables = { loanType: LoanAction; amount: MonetaryAmount; isMaxAmount: boolean }; - -const mutateLoan = ({ loanType, amount, isMaxAmount }: CreateLoanVariables) => { - const extrinsicData = (() => { - switch (loanType) { - case 'lend': - return window.bridge.loans.lend(amount.currency, amount); - case 'withdraw': - if (isMaxAmount) { - return window.bridge.loans.withdrawAll(amount.currency); - } else { - return window.bridge.loans.withdraw(amount.currency, amount); - } - case 'borrow': - return window.bridge.loans.borrow(amount.currency, amount); - case 'repay': - if (isMaxAmount) { - return window.bridge.loans.repayAll(amount.currency); - } else { - return window.bridge.loans.repay(amount.currency, amount); - } - } - })(); - - return submitExtrinsicPromise(extrinsicData); -}; - -type UseLoanMutation = { onSuccess: () => void; onError: (error: Error) => void }; - -const useLoanMutation = ({ - onSuccess, - onError -}: UseLoanMutation): UseMutationResult => { - return useMutation(mutateLoan, { - onSuccess, - onError - }); -}; - -export { useLoanMutation }; -export type { UseLoanMutation }; diff --git a/src/utils/hooks/api/xcm/xcm-endpoints.ts b/src/utils/hooks/api/xcm/xcm-endpoints.ts index 6b8407c0df..fe751d615b 100644 --- a/src/utils/hooks/api/xcm/xcm-endpoints.ts +++ b/src/utils/hooks/api/xcm/xcm-endpoints.ts @@ -3,12 +3,7 @@ import { ChainName } from '@interlay/bridge'; type XCMEndpointsRecord = Record; const XCMEndpoints: XCMEndpointsRecord = { - acala: [ - 'wss://acala-rpc-0.aca-api.network', - 'wss://acala-rpc-1.aca-api.network', - 'wss://acala-rpc-3.aca-api.network/ws', - 'wss://acala-rpc.dwellir.com' - ], + acala: ['wss://acala-rpc-1.aca-api.network', 'wss://acala-rpc-3.aca-api.network/ws', 'wss://acala-rpc.dwellir.com'], astar: ['wss://rpc.astar.network', 'wss://astar-rpc.dwellir.com'], bifrost: ['wss://bifrost-rpc.dwellir.com'], heiko: ['wss://heiko-rpc.parallel.fi'], diff --git a/src/utils/hooks/transaction/index.ts b/src/utils/hooks/transaction/index.ts new file mode 100644 index 0000000000..3a845f06ae --- /dev/null +++ b/src/utils/hooks/transaction/index.ts @@ -0,0 +1,2 @@ +export { Transaction } from './types'; +export { useTransaction } from './use-transaction'; diff --git a/src/utils/hooks/transaction/types/amm.ts b/src/utils/hooks/transaction/types/amm.ts new file mode 100644 index 0000000000..7b6cc56af9 --- /dev/null +++ b/src/utils/hooks/transaction/types/amm.ts @@ -0,0 +1,28 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface SwapAction extends TransactionAction { + type: Transaction.AMM_SWAP; + args: Parameters; +} + +interface PoolAddLiquidityAction extends TransactionAction { + type: Transaction.AMM_ADD_LIQUIDITY; + args: Parameters; +} + +interface PoolRemoveLiquidityAction extends TransactionAction { + type: Transaction.AMM_REMOVE_LIQUIDITY; + args: Parameters; +} + +interface PoolClaimRewardsAction extends TransactionAction { + type: Transaction.AMM_CLAIM_REWARDS; + args: Parameters; +} + +type AMMActions = SwapAction | PoolAddLiquidityAction | PoolRemoveLiquidityAction | PoolClaimRewardsAction; + +export type { AMMActions }; diff --git a/src/utils/hooks/transaction/types/escrow.ts b/src/utils/hooks/transaction/types/escrow.ts new file mode 100644 index 0000000000..7003d1f796 --- /dev/null +++ b/src/utils/hooks/transaction/types/escrow.ts @@ -0,0 +1,46 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface EscrowCreateLockAction extends TransactionAction { + type: Transaction.ESCROW_CREATE_LOCK; + args: Parameters; +} + +interface EscrowInscreaseLookedTimeAndAmountAction extends TransactionAction { + type: Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT; + args: [ + ...Parameters, + ...Parameters + ]; +} +interface EscrowIncreaseLockAmountAction extends TransactionAction { + type: Transaction.ESCROW_INCREASE_LOCKED_AMOUNT; + args: Parameters; +} + +interface EscrowIncreaseLockTimeAction extends TransactionAction { + type: Transaction.ESCROW_INCREASE_LOCKED_TIME; + args: Parameters; +} + +interface EscrowWithdrawRewardsAction extends TransactionAction { + type: Transaction.ESCROW_WITHDRAW_REWARDS; + args: Parameters; +} + +interface EscrowWithdrawAction extends TransactionAction { + type: Transaction.ESCROW_WITHDRAW; + args: Parameters; +} + +type EscrowActions = + | EscrowCreateLockAction + | EscrowInscreaseLookedTimeAndAmountAction + | EscrowIncreaseLockAmountAction + | EscrowIncreaseLockTimeAction + | EscrowWithdrawRewardsAction + | EscrowWithdrawAction; + +export type { EscrowActions }; diff --git a/src/utils/hooks/transaction/types/index.ts b/src/utils/hooks/transaction/types/index.ts new file mode 100644 index 0000000000..538f820678 --- /dev/null +++ b/src/utils/hooks/transaction/types/index.ts @@ -0,0 +1,79 @@ +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; + +import { AMMActions } from './amm'; +import { EscrowActions } from './escrow'; +import { IssueActions } from './issue'; +import { LoansActions } from './loans'; +import { RedeemActions } from './redeem'; +import { ReplaceActions } from './replace'; +import { RewardsActions } from './rewards'; +import { TokensActions } from './tokens'; +import { VaultsActions } from './vaults'; + +enum Transaction { + // Issue + ISSUE_REQUEST = 'ISSUE_REQUEST', + ISSUE_EXECUTE = 'ISSUE_EXECUTE', + // Redeem + REDEEM_REQUEST = 'REDEEM_REQUEST', + REDEEM_CANCEL = 'REDEEM_CANCEL', + REDEEM_BURN = 'REDEEM_BURN', + // Replace + REPLACE_REQUEST = 'REPLACE_REQUEST', + // Escrow + ESCROW_CREATE_LOCK = 'ESCROW_CREATE_LOCK', + ESCROW_INCREASE_LOCKED_TIME = 'ESCROW_INCREASE_LOCKED_TIME', + ESCROW_INCREASE_LOCKED_AMOUNT = 'ESCROW_INCREASE_LOCKED_AMOUNT', + ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT = 'ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT', + ESCROW_WITHDRAW_REWARDS = 'ESCROW_WITHDRAW_REWARDS', + ESCROW_WITHDRAW = 'ESCROW_WITHDRAW', + // Tokens + TOKENS_TRANSFER = 'TOKENS_TRANSFER', + // Vaults + VAULTS_DEPOSIT_COLLATERAL = 'VAULTS_DEPOSIT_COLLATERAL', + VAULTS_WITHDRAW_COLLATERAL = 'VAULTS_WITHDRAW_COLLATERAL', + VAULTS_REGISTER_NEW_COLLATERAL = 'VAULTS_REGISTER_NEW_COLLATERAL', + // Rewards + REWARDS_WITHDRAW = 'REWARDS_WITHDRAW', + // Loans + LOANS_CLAIM_REWARDS = 'LOANS_CLAIM_REWARDS', + LOANS_ENABLE_COLLATERAL = 'LOANS_ENABLE_COLLATERAL', + LOANS_DISABLE_COLLATERAL = 'LOANS_DISABLE_COLLATERAL', + LOANS_LEND = 'LOANS_LEND', + LOANS_WITHDRAW = 'LOANS_WITHDRAW', + LOANS_WITHDRAW_ALL = 'LOANS_WITHDRAW_ALL', + LOANS_BORROW = 'LOANS_BORROW', + LOANS_REPAY = 'LOANS_REPAY', + LOANS_REPAY_ALL = 'LOANS_REPAY_ALL', + // AMM + AMM_SWAP = 'AMM_SWAP', + AMM_ADD_LIQUIDITY = 'AMM_ADD_LIQUIDITY', + AMM_REMOVE_LIQUIDITY = 'AMM_REMOVE_LIQUIDITY', + AMM_CLAIM_REWARDS = 'AMM_CLAIM_REWARDS' +} + +type TransactionEvents = { + onReady?: () => void; +}; + +interface TransactionAction { + accountAddress: string; + events: TransactionEvents; + customStatus?: ExtrinsicStatus['type']; +} + +type TransactionActions = + | EscrowActions + | IssueActions + | RedeemActions + | ReplaceActions + | TokensActions + | LoansActions + | AMMActions + | VaultsActions + | RewardsActions; + +type TransactionArgs = Extract['args']; + +export { Transaction }; +export type { TransactionAction, TransactionActions, TransactionArgs, TransactionEvents }; diff --git a/src/utils/hooks/transaction/types/issue.ts b/src/utils/hooks/transaction/types/issue.ts new file mode 100644 index 0000000000..dfa3b9d5a3 --- /dev/null +++ b/src/utils/hooks/transaction/types/issue.ts @@ -0,0 +1,18 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface IssueRequestAction extends TransactionAction { + type: Transaction.ISSUE_REQUEST; + args: Parameters; +} + +interface IssueExecuteAction extends TransactionAction { + type: Transaction.ISSUE_EXECUTE; + args: Parameters; +} + +type IssueActions = IssueRequestAction | IssueExecuteAction; + +export type { IssueActions }; diff --git a/src/utils/hooks/transaction/types/loans.ts b/src/utils/hooks/transaction/types/loans.ts new file mode 100644 index 0000000000..27797c68d9 --- /dev/null +++ b/src/utils/hooks/transaction/types/loans.ts @@ -0,0 +1,62 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface LoansClaimRewardsAction extends TransactionAction { + type: Transaction.LOANS_CLAIM_REWARDS; + args: Parameters; +} + +interface LoansEnabledCollateralAction extends TransactionAction { + type: Transaction.LOANS_ENABLE_COLLATERAL; + args: Parameters; +} + +interface LoansDisabledCollateralAction extends TransactionAction { + type: Transaction.LOANS_DISABLE_COLLATERAL; + args: Parameters; +} + +interface LoansLendAction extends TransactionAction { + type: Transaction.LOANS_LEND; + args: Parameters; +} + +interface LoansWithdrawAction extends TransactionAction { + type: Transaction.LOANS_WITHDRAW; + args: Parameters; +} + +interface LoansWithdrawAllAction extends TransactionAction { + type: Transaction.LOANS_WITHDRAW_ALL; + args: Parameters; +} + +interface LoansBorrowAction extends TransactionAction { + type: Transaction.LOANS_BORROW; + args: Parameters; +} + +interface LoansRepayAction extends TransactionAction { + type: Transaction.LOANS_REPAY; + args: Parameters; +} + +interface LoansRepayAllAction extends TransactionAction { + type: Transaction.LOANS_REPAY_ALL; + args: Parameters; +} + +type LoansActions = + | LoansClaimRewardsAction + | LoansEnabledCollateralAction + | LoansDisabledCollateralAction + | LoansLendAction + | LoansWithdrawAction + | LoansWithdrawAllAction + | LoansBorrowAction + | LoansRepayAction + | LoansRepayAllAction; + +export type { LoansActions }; diff --git a/src/utils/hooks/transaction/types/redeem.ts b/src/utils/hooks/transaction/types/redeem.ts new file mode 100644 index 0000000000..1282278693 --- /dev/null +++ b/src/utils/hooks/transaction/types/redeem.ts @@ -0,0 +1,23 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface RedeemCancelAction extends TransactionAction { + type: Transaction.REDEEM_CANCEL; + args: Parameters; +} + +interface RedeemBurnAction extends TransactionAction { + type: Transaction.REDEEM_BURN; + args: Parameters; +} + +interface RedeemRequestAction extends TransactionAction { + type: Transaction.REDEEM_REQUEST; + args: Parameters; +} + +type RedeemActions = RedeemRequestAction | RedeemCancelAction | RedeemBurnAction; + +export type { RedeemActions }; diff --git a/src/utils/hooks/transaction/types/replace.ts b/src/utils/hooks/transaction/types/replace.ts new file mode 100644 index 0000000000..4fab08e0e7 --- /dev/null +++ b/src/utils/hooks/transaction/types/replace.ts @@ -0,0 +1,13 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface ReplaceRequestAction extends TransactionAction { + type: Transaction.REPLACE_REQUEST; + args: Parameters; +} + +type ReplaceActions = ReplaceRequestAction; + +export type { ReplaceActions }; diff --git a/src/utils/hooks/transaction/types/rewards.ts b/src/utils/hooks/transaction/types/rewards.ts new file mode 100644 index 0000000000..f77f61f7c4 --- /dev/null +++ b/src/utils/hooks/transaction/types/rewards.ts @@ -0,0 +1,13 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '.'; +import { TransactionAction } from '.'; + +interface RewardsWithdrawAction extends TransactionAction { + type: Transaction.REWARDS_WITHDRAW; + args: Parameters; +} + +type RewardsActions = RewardsWithdrawAction; + +export type { RewardsActions }; diff --git a/src/utils/hooks/transaction/types/tokens.ts b/src/utils/hooks/transaction/types/tokens.ts new file mode 100644 index 0000000000..a1c1e0da64 --- /dev/null +++ b/src/utils/hooks/transaction/types/tokens.ts @@ -0,0 +1,13 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface TokensTransferAction extends TransactionAction { + type: Transaction.TOKENS_TRANSFER; + args: Parameters; +} + +type TokensActions = TokensTransferAction; + +export type { TokensActions }; diff --git a/src/utils/hooks/transaction/types/vaults.ts b/src/utils/hooks/transaction/types/vaults.ts new file mode 100644 index 0000000000..1c4040fd17 --- /dev/null +++ b/src/utils/hooks/transaction/types/vaults.ts @@ -0,0 +1,23 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { TransactionAction } from '.'; + +interface VaultsDepositCollateralAction extends TransactionAction { + type: Transaction.VAULTS_DEPOSIT_COLLATERAL; + args: Parameters; +} + +interface VaultsWithdrawCollateralAction extends TransactionAction { + type: Transaction.VAULTS_WITHDRAW_COLLATERAL; + args: Parameters; +} + +interface VaultsRegisterNewCollateralAction extends TransactionAction { + type: Transaction.VAULTS_REGISTER_NEW_COLLATERAL; + args: Parameters; +} + +type VaultsActions = VaultsDepositCollateralAction | VaultsWithdrawCollateralAction | VaultsRegisterNewCollateralAction; + +export type { VaultsActions }; diff --git a/src/utils/hooks/transaction/use-transaction.ts b/src/utils/hooks/transaction/use-transaction.ts new file mode 100644 index 0000000000..d18291f94c --- /dev/null +++ b/src/utils/hooks/transaction/use-transaction.ts @@ -0,0 +1,122 @@ +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; +import { ISubmittableResult } from '@polkadot/types/types'; +import { useCallback } from 'react'; +import { MutationFunction, useMutation, UseMutationOptions, UseMutationResult } from 'react-query'; + +import { useSubstrate } from '@/lib/substrate'; + +import { Transaction, TransactionActions, TransactionArgs } from './types'; +import { getExtrinsic, getStatus } from './utils/extrinsic'; +import { submitTransaction } from './utils/submit'; + +type UseTransactionOptions = Omit< + UseMutationOptions, + 'mutationFn' +> & { + customStatus?: ExtrinsicStatus['type']; +}; + +// TODO: add feeEstimate and feeEstimateAsync +type ExecuteArgs = { + // Executes the transaction + execute(...args: TransactionArgs): void; + // Similar to execute but returns a promise which can be awaited. + executeAsync(...args: TransactionArgs): Promise; +}; + +// TODO: add feeEstimate and feeEstimateAsync +type ExecuteTypeArgs = { + execute(type: D, ...args: TransactionArgs): void; + executeAsync(type: D, ...args: TransactionArgs): Promise; +}; + +type InheritAttrs = Omit< + UseMutationResult, + 'mutate' | 'mutateAsync' +>; + +type UseTransactionResult = InheritAttrs & (ExecuteArgs | ExecuteTypeArgs); + +const mutateTransaction: MutationFunction = async (params) => { + const extrinsics = await getExtrinsic(params); + const expectedStatus = params.customStatus || getStatus(params.type); + + return submitTransaction(window.bridge.api, params.accountAddress, extrinsics, expectedStatus, params.events); +}; + +// The three declared functions are use to infer types on diferent implementations +// TODO: missing xcm transaction +function useTransaction( + type: T, + options?: UseTransactionOptions +): Exclude, ExecuteTypeArgs>; +function useTransaction( + options?: UseTransactionOptions +): Exclude, ExecuteArgs>; +function useTransaction( + typeOrOptions?: T | UseTransactionOptions, + options?: UseTransactionOptions +): UseTransactionResult { + const { state } = useSubstrate(); + + const hasOnlyOptions = typeof typeOrOptions !== 'string'; + + const { mutate, mutateAsync, ...transactionMutation } = useMutation( + mutateTransaction, + (hasOnlyOptions ? typeOrOptions : options) as UseTransactionOptions + ); + + // Handles params for both type of implementations + const getParams = useCallback( + (args: Parameters['execute']>) => { + let params = {}; + + // Assign correct params for when transaction type is declared on hook params + if (typeof typeOrOptions === 'string') { + params = { type: typeOrOptions, args }; + } else { + // Assign correct params for when transaction type is declared on execution level + const [type, ...restArgs] = args; + params = { type, args: restArgs }; + } + + // Execution should only ran when authenticated + const accountAddress = state.selectedAccount?.address; + + // TODO: add event `onReady` + return { + ...params, + accountAddress, + customStatus: options?.customStatus + } as TransactionActions; + }, + [options?.customStatus, state.selectedAccount?.address, typeOrOptions] + ); + + const handleExecute = useCallback( + (...args: Parameters['execute']>) => { + const params = getParams(args); + + return mutate(params); + }, + [getParams, mutate] + ); + + const handleExecuteAsync = useCallback( + (...args: Parameters['executeAsync']>) => { + const params = getParams(args); + + return mutateAsync(params); + }, + [getParams, mutateAsync] + ); + + return { + ...transactionMutation, + execute: handleExecute, + executeAsync: handleExecuteAsync + }; +} + +export { useTransaction }; +export type { UseTransactionResult }; diff --git a/src/utils/hooks/transaction/utils/extrinsic.ts b/src/utils/hooks/transaction/utils/extrinsic.ts new file mode 100644 index 0000000000..23346819db --- /dev/null +++ b/src/utils/hooks/transaction/utils/extrinsic.ts @@ -0,0 +1,133 @@ +import { ExtrinsicData } from '@interlay/interbtc-api'; +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; + +import { Transaction, TransactionActions } from '../types'; + +/** + * SUMMARY: Maps each transaction to the correct lib call, + * while maintaining a safe-type check. + * HOW TO ADD NEW TRANSACTION: find the correct module to add the transaction + * in the types folder. In case you are adding a new type to the loans modules, go + * to types/loans and add your new transaction as an action. This actions needs to also be added to the + * types/index TransactionActions type. After that, you should be able to add it to the function. + * @param {TransactionActions} params contains the type of transaction and + * the related args to call the mapped lib call + * @return {Promise} every transaction return an extrinsic + */ +const getExtrinsic = async (params: TransactionActions): Promise => { + switch (params.type) { + /* START - AMM */ + case Transaction.AMM_SWAP: + return window.bridge.amm.swap(...params.args); + case Transaction.AMM_ADD_LIQUIDITY: + return window.bridge.amm.addLiquidity(...params.args); + case Transaction.AMM_REMOVE_LIQUIDITY: + return window.bridge.amm.removeLiquidity(...params.args); + case Transaction.AMM_CLAIM_REWARDS: + return window.bridge.amm.claimFarmingRewards(...params.args); + /* END - AMM */ + + /* START - ISSUE */ + case Transaction.ISSUE_REQUEST: + return window.bridge.issue.request(...params.args); + case Transaction.ISSUE_EXECUTE: + return window.bridge.issue.execute(...params.args); + /* END - ISSUE */ + + /* START - REDEEM */ + case Transaction.REDEEM_CANCEL: + return window.bridge.redeem.cancel(...params.args); + case Transaction.REDEEM_BURN: + return window.bridge.redeem.burn(...params.args); + case Transaction.REDEEM_REQUEST: + return window.bridge.redeem.request(...params.args); + /* END - REDEEM */ + + /* START - REPLACE */ + case Transaction.REPLACE_REQUEST: + return window.bridge.replace.request(...params.args); + /* END - REPLACE */ + + /* START - TOKENS */ + case Transaction.TOKENS_TRANSFER: + return window.bridge.tokens.transfer(...params.args); + /* END - TOKENS */ + + /* START - LOANS */ + case Transaction.LOANS_CLAIM_REWARDS: + return window.bridge.loans.claimAllSubsidyRewards(); + case Transaction.LOANS_BORROW: + return window.bridge.loans.borrow(...params.args); + case Transaction.LOANS_LEND: + return window.bridge.loans.lend(...params.args); + case Transaction.LOANS_REPAY: + return window.bridge.loans.repay(...params.args); + case Transaction.LOANS_REPAY_ALL: + return window.bridge.loans.repayAll(...params.args); + case Transaction.LOANS_WITHDRAW: + return window.bridge.loans.withdraw(...params.args); + case Transaction.LOANS_WITHDRAW_ALL: + return window.bridge.loans.withdrawAll(...params.args); + case Transaction.LOANS_DISABLE_COLLATERAL: + return window.bridge.loans.disableAsCollateral(...params.args); + case Transaction.LOANS_ENABLE_COLLATERAL: + return window.bridge.loans.enableAsCollateral(...params.args); + /* END - LOANS */ + + /* START - LOANS */ + case Transaction.VAULTS_DEPOSIT_COLLATERAL: + return window.bridge.vaults.depositCollateral(...params.args); + case Transaction.VAULTS_WITHDRAW_COLLATERAL: + return window.bridge.vaults.withdrawCollateral(...params.args); + case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: + return window.bridge.vaults.registerNewCollateralVault(...params.args); + /* START - REWARDS */ + case Transaction.REWARDS_WITHDRAW: + return window.bridge.rewards.withdrawRewards(...params.args); + /* START - REWARDS */ + /* END - LOANS */ + + /* START - ESCROW */ + case Transaction.ESCROW_CREATE_LOCK: + return window.bridge.escrow.createLock(...params.args); + case Transaction.ESCROW_INCREASE_LOCKED_AMOUNT: + return window.bridge.escrow.increaseAmount(...params.args); + case Transaction.ESCROW_INCREASE_LOCKED_TIME: + return window.bridge.escrow.increaseUnlockHeight(...params.args); + case Transaction.ESCROW_WITHDRAW: + return window.bridge.escrow.withdraw(...params.args); + case Transaction.ESCROW_WITHDRAW_REWARDS: + return window.bridge.escrow.withdrawRewards(...params.args); + case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: { + const [amount, unlockHeight] = params.args; + const txs = [ + window.bridge.api.tx.escrow.increaseAmount(amount), + window.bridge.api.tx.escrow.increaseUnlockHeight(unlockHeight) + ]; + const batch = window.bridge.api.tx.utility.batchAll(txs); + + return { extrinsic: batch }; + } + /* END - ESCROW */ + } +}; + +/** + * The status where we want to be notified on the transaction completion + * @param {Transaction} type type of transaction + * @return {ExtrinsicStatus.type} transaction status + */ +const getStatus = (type: Transaction): ExtrinsicStatus['type'] => { + switch (type) { + // When requesting a replace, wait for the finalized event because we cannot revert BTC transactions. + // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 + case Transaction.ISSUE_REQUEST: + case Transaction.REDEEM_REQUEST: + case Transaction.REPLACE_REQUEST: + return 'Finalized'; + default: + return 'InBlock'; + } +}; + +export { getExtrinsic, getStatus }; diff --git a/src/utils/hooks/transaction/utils/submit.ts b/src/utils/hooks/transaction/utils/submit.ts new file mode 100644 index 0000000000..d1c832b023 --- /dev/null +++ b/src/utils/hooks/transaction/utils/submit.ts @@ -0,0 +1,107 @@ +import { ExtrinsicData } from '@interlay/interbtc-api'; +import { ApiPromise } from '@polkadot/api'; +import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types'; +import { DispatchError } from '@polkadot/types/interfaces'; +import { ExtrinsicStatus } from '@polkadot/types/interfaces/author'; +import { ISubmittableResult } from '@polkadot/types/types'; + +import { TransactionEvents } from '../types'; + +type HandleTransactionResult = { result: ISubmittableResult; unsubscribe: () => void }; + +// When passing { nonce: -1 } to signAndSend the API will use system.accountNextIndex to determine the nonce +const transactionOptions = { nonce: -1 }; + +const handleTransaction = async ( + account: AddressOrPair, + extrinsicData: ExtrinsicData, + expectedStatus?: ExtrinsicStatus['type'], + callbacks?: TransactionEvents +) => { + let isComplete = false; + + // Extrinsic status + let isReady = false; + + return new Promise((resolve, reject) => { + let unsubscribe: () => void; + + (extrinsicData.extrinsic as SubmittableExtrinsic<'promise'>) + .signAndSend(account, transactionOptions, callback) + .then((unsub) => (unsubscribe = unsub)) + .catch((error) => reject(error)); + + function callback(result: ISubmittableResult): void { + const { onReady } = callbacks || {}; + + if (!isReady && result.status.isReady) { + onReady?.(); + isReady = true; + } + + if (!isComplete) { + isComplete = expectedStatus === result.status.type; + } + + if (isComplete) { + resolve({ unsubscribe, result }); + } + } + }); +}; + +const getErrorMessage = (api: ApiPromise, dispatchError: DispatchError) => { + const { isModule, asModule, isBadOrigin } = dispatchError; + + // Construct error message + const message = 'The transaction failed.'; + + // Runtime error in one of the parachain modules + if (isModule) { + // for module errors, we have the section indexed, lookup + const decoded = api.registry.findMetaError(asModule); + const { docs, name, section } = decoded; + return message.concat(` The error code is ${section}.${name}. ${docs.join(' ')}`); + } + + // Bad origin + if (isBadOrigin) { + return message.concat( + ` The error is caused by using an incorrect account. The error code is BadOrigin ${dispatchError}.` + ); + } + + return message.concat(` The error is ${dispatchError}.`); +}; + +/** + * Handles transaction submittion and error + * @param {ApiPromise} api polkadot api wrapper + * @param {AddressOrPair} account account address + * @param {ExtrinsicData} extrinsicData transaction extrinsic data + * @param {ExtrinsicStatus.type} expectedStatus status where the transaction is counted as fulfilled + * @param {TransactionEvents} callbacks a set of events emitted accross the lifecycle of the transaction (i.e Bro) + * @return {Promise} transaction data that also can contain meta data in case of error + */ +const submitTransaction = async ( + api: ApiPromise, + account: AddressOrPair, + extrinsicData: ExtrinsicData, + expectedStatus?: ExtrinsicStatus['type'], + callbacks?: TransactionEvents +): Promise => { + const { result, unsubscribe } = await handleTransaction(account, extrinsicData, expectedStatus, callbacks); + + unsubscribe(); + + const { dispatchError } = result; + + if (dispatchError) { + const message = getErrorMessage(api, dispatchError); + throw new Error(message); + } + + return result; +}; + +export { submitTransaction }; diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 9b5676a053..8f9254eab3 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -2,14 +2,16 @@ enum FeatureFlags { LENDING = 'lending', AMM = 'amm', WALLET = 'wallet', - BANXA = 'banxa' + BANXA = 'banxa', + EARN_STRATEGIES = 'earn-strategies' } const featureFlags: Record = { [FeatureFlags.LENDING]: process.env.REACT_APP_FEATURE_FLAG_LENDING, [FeatureFlags.AMM]: process.env.REACT_APP_FEATURE_FLAG_AMM, [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, - [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA + [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, + [FeatureFlags.EARN_STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES }; const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled'; diff --git a/yarn.lock b/yarn.lock index c887f3b4fd..269fc4fdba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2075,10 +2075,10 @@ resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.5.0.tgz#483b44ba2c8b8d4391e1d2c863898d7dd0cc0296" integrity sha512-aaRnYxBb3MU2FNJf3Ut9RMTUqqU3as0aI1lQhgo2n9Fa67wRu14iOGqx93xB+uMNVfNwZ5B3y/Ndm7qZGuFeMQ== -"@heroicons/react@^2.0.0": - version "2.0.12" - resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.12.tgz#7e5a16c82512f89a30266dd36f8b8465b3e3e216" - integrity sha512-FZxKh3i9aKIDxyALTgIpSF2t6V6/eZfF5mRu41QlwkX3Oxzecdm1u6dpft6PQGxIBwO7TKYWaMAYYL8mp/EaOg== +"@heroicons/react@^2.0.18": + version "2.0.18" + resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1" + integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw== "@humanwhocodes/config-array@^0.5.0": version "0.5.0" @@ -2099,10 +2099,10 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.3.9": - version "0.3.9" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.9.tgz#fc39c64708eab2f55cb0bbb970f2f0e72583cb37" - integrity sha512-QCeTux1f3LwLJ/dcfHmOTOuF8ocfpo9WDNV7Z1GWTHX/I8lspidj4xh8c/g2+jNZnHMiINXCSvHGPPr05lTnQg== +"@interlay/bridge@^0.3.10": + version "0.3.10" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.10.tgz#d686b83af91f99a1f62b72cfbb8d127c60557200" + integrity sha512-8yDfhvDNIeaW07Kbfvjp37YUNpsKsSXooT5JVfC1AdQs9ej51fbuhINUK31JNncI0xCWhTBu72Wq0ZFIQNm8RA== dependencies: "@acala-network/api" "4.1.8-13" "@acala-network/sdk" "4.1.8-13" @@ -2120,14 +2120,14 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.2.2": - version "2.2.2" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.2.2.tgz#4803a80244abc9ef404dddefd265b9ece7ca859f" - integrity sha512-NuRjjIqeUPkt+aOTTmjMhx3TKAsL4id8kubiQsrAcyhsZnsnv/1bCXECzAWaZHVSi+XcxzfuoNLOxqrrx2+ISw== +"@interlay/interbtc-api@2.2.4": + version "2.2.4" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.2.4.tgz#28b429d066d35f77fdc72f4cf57e2452507c37f7" + integrity sha512-cJxSE7J41JPE8QhV0YiLCJEfvpv9JcSWmieITTSOWQCW8GFFXnSTU0iPA2Tgw6s9ea3uxoM2DLGhlDQL8c0ktw== dependencies: "@interlay/esplora-btc-api" "0.4.0" "@interlay/interbtc-types" "1.12.0" - "@interlay/monetary-js" "0.7.2" + "@interlay/monetary-js" "0.7.3" "@polkadot/api" "9.14.2" big.js "6.1.1" bitcoin-core "^3.0.0" @@ -2147,10 +2147,10 @@ resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.12.0.tgz#07dc8e15690292387124dbc2bbb7bf5bc8b68001" integrity sha512-ELJa2ftIbe8Ds2ejS7kO5HumN9EB5l2OBi3Qsy5iHJsHKq2HtXfFoKnW38HarM6hADrWG+e/yNGHSKJIJzEZuA== -"@interlay/monetary-js@0.7.2": - version "0.7.2" - resolved "https://registry.yarnpkg.com/@interlay/monetary-js/-/monetary-js-0.7.2.tgz#a54a315b60be12f5b1a9c31f0d71d5e8ee7ba174" - integrity sha512-SqNKJKBEstXuLnzqWi+ON+9ImrNVlKqZpXfiTtT3bcvxqh4jnVsGbYVe2I0FqDWtilCWq6/1RjKkpaSG2dvJhA== +"@interlay/monetary-js@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@interlay/monetary-js/-/monetary-js-0.7.3.tgz#0bf4c56b15fde2fd0573e6cac185b0703f368133" + integrity sha512-LbCtLRNjl1/LO8R1ay6lJwKgOC/J40YywF+qSuQ7hEjLIkAslY5dLH11heQgQW9hOmqCSS5fTUQWXhmYQr6Ksg== dependencies: "@types/big.js" "6.1.2" big.js "6.1.1" From 4f470ae38432a10670f4b58e059be00634d3c82b Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 25 May 2023 09:04:59 +0100 Subject: [PATCH 10/58] [release] Kintsugi 2.32.3 (#1228) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> --- package.json | 2 +- .../CrossChainTransferForm/CrossChainTransferForm.tsx | 8 ++++++++ src/utils/hooks/api/xcm/use-xcm-bridge.ts | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 389305f0a0..312ec05883 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.32.2", + "version": "2.32.3", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx index 85b5cd0eb1..1e7a864185 100644 --- a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx @@ -212,6 +212,14 @@ const CrossChainTransferForm = (): JSX.Element => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [accountId, destinationChains]); + // TODO: When we refactor account select this should be handled there so + // that it's consitent across the application + useEffect(() => { + if (!accountId) return; + form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, accountId?.toString()); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accountId]); + if (!originatingChains || !destinationChains || !transferableTokens.length) { return ( diff --git a/src/utils/hooks/api/xcm/use-xcm-bridge.ts b/src/utils/hooks/api/xcm/use-xcm-bridge.ts index 32a6845d77..491a8931d3 100644 --- a/src/utils/hooks/api/xcm/use-xcm-bridge.ts +++ b/src/utils/hooks/api/xcm/use-xcm-bridge.ts @@ -111,7 +111,7 @@ const useXCMBridge = (): UseXCMBridge => { const minInputToBig = Big(inputConfig.minInput.toString()); // Never show less than zero - const transferableBalance = inputConfig.maxInput < inputConfig.minInput ? 0 : maxInputToBig; + const transferableBalance = inputConfig.maxInput.isLessThan(inputConfig.minInput) ? 0 : maxInputToBig; const currency = XCMBridge.findAdapter(from).getToken(token, from); const nativeToken = originAdapter.getNativeToken(); From c14b10ac2efb2145521e49286cda35dcd18e6620 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 25 May 2023 11:52:20 +0100 Subject: [PATCH 11/58] [release] Kintsugi 2.32.4 (#1232) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> --- package.json | 2 +- src/components/Geoblock/Geoblock.tsx | 2 +- src/utils/hooks/use-feature-flag.ts | 6 ++++-- src/utils/hooks/use-geoblocking.ts | 7 ++++++- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 312ec05883..735d72e184 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.32.3", + "version": "2.32.4", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/components/Geoblock/Geoblock.tsx b/src/components/Geoblock/Geoblock.tsx index 43493562d3..0a308d5619 100644 --- a/src/components/Geoblock/Geoblock.tsx +++ b/src/components/Geoblock/Geoblock.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import { ReactNode } from 'react'; import { useGeoblocking } from '@/utils/hooks/use-geoblocking'; diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 8f9254eab3..917bd3b3c8 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -3,7 +3,8 @@ enum FeatureFlags { AMM = 'amm', WALLET = 'wallet', BANXA = 'banxa', - EARN_STRATEGIES = 'earn-strategies' + EARN_STRATEGIES = 'earn-strategies', + GEOBLOCK = 'geoblock' } const featureFlags: Record = { @@ -11,7 +12,8 @@ const featureFlags: Record = { [FeatureFlags.AMM]: process.env.REACT_APP_FEATURE_FLAG_AMM, [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, - [FeatureFlags.EARN_STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES + [FeatureFlags.EARN_STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, + [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK }; const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled'; diff --git a/src/utils/hooks/use-geoblocking.ts b/src/utils/hooks/use-geoblocking.ts index 6ca37d3a02..09805c8398 100644 --- a/src/utils/hooks/use-geoblocking.ts +++ b/src/utils/hooks/use-geoblocking.ts @@ -1,9 +1,14 @@ import { useEffect } from 'react'; import { GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK } from '@/config/links'; +import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; const useGeoblocking = (): void => { + const isGeoblockEnabled = useFeatureFlag(FeatureFlags.GEOBLOCK); + useEffect(() => { + if (!isGeoblockEnabled) return; + const checkCountry = async () => { try { const response = await fetch(GEOBLOCK_API_ENDPOINT); @@ -16,7 +21,7 @@ const useGeoblocking = (): void => { } }; checkCountry(); - }, []); + }, [isGeoblockEnabled]); }; export { useGeoblocking }; From a9851f6c9f776d29cedfaeea36a08ac2b5b8e8e7 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Fri, 26 May 2023 11:29:51 +0100 Subject: [PATCH 12/58] [release] Kintsugi 2.32.5 (#1234) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 735d72e184..3b6ae00edf 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "interbtc-ui", - "version": "2.32.4", + "version": "2.32.5", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", - "@interlay/bridge": "^0.3.10", + "@interlay/bridge": "^0.3.11", "@interlay/interbtc-api": "2.2.4", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", diff --git a/yarn.lock b/yarn.lock index 269fc4fdba..77273acb3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2099,10 +2099,10 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.3.10": - version "0.3.10" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.10.tgz#d686b83af91f99a1f62b72cfbb8d127c60557200" - integrity sha512-8yDfhvDNIeaW07Kbfvjp37YUNpsKsSXooT5JVfC1AdQs9ej51fbuhINUK31JNncI0xCWhTBu72Wq0ZFIQNm8RA== +"@interlay/bridge@^0.3.11": + version "0.3.11" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.11.tgz#45b2f3bb44d5e7eb1777ba82cfdf1a2f5dbf2b1d" + integrity sha512-HMgUlSFw5wOR7Qi+JxrDeY8TqoybRd7MWdXUqswDpiCgc0WZGTSDK+2NmuKRgDjRYoly0xIpzpkb8oek6v/JQw== dependencies: "@acala-network/api" "4.1.8-13" "@acala-network/sdk" "4.1.8-13" From cadd1d34273050673ab7c2dfbce60234e381fb03 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Wed, 31 May 2023 11:53:00 +0100 Subject: [PATCH 13/58] [release] Kintsugi 2.32.6 (#1249) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> --- .env.dev | 2 +- package.json | 8 +- src/App.tsx | 10 +- src/assets/locales/en/translation.json | 9 +- .../Dialog/Dialog.stories.tsx | 208 ++++++++++++++++++ src/component-library/Dialog/Dialog.style.tsx | 54 +++++ src/component-library/Dialog/Dialog.tsx | 52 +++++ src/component-library/Dialog/DialogBody.tsx | 14 ++ .../Dialog/DialogContext.tsx | 18 ++ .../Dialog/DialogDivider.tsx | 14 ++ src/component-library/Dialog/DialogFooter.tsx | 16 ++ src/component-library/Dialog/DialogHeader.tsx | 34 +++ src/component-library/Dialog/index.tsx | 10 + .../Divider/Divider.style.tsx | 5 +- src/component-library/Divider/Divider.tsx | 8 +- src/component-library/Modal/Dialog.tsx | 46 ---- src/component-library/Modal/Modal.style.tsx | 81 +------ src/component-library/Modal/Modal.tsx | 60 +++-- src/component-library/Modal/ModalBody.tsx | 17 +- src/component-library/Modal/ModalContext.tsx | 2 - src/component-library/Modal/ModalDivider.tsx | 9 +- src/component-library/Modal/ModalFooter.tsx | 9 +- src/component-library/Modal/ModalHeader.tsx | 42 +--- src/component-library/Modal/ModalWrapper.tsx | 11 +- .../Overlay/Overlay.style.tsx | 25 ++- src/component-library/Overlay/Overlay.tsx | 5 +- src/component-library/Overlay/Underlay.tsx | 19 ++ src/component-library/Overlay/index.tsx | 2 + .../Popover/Popover.stories.tsx | 40 ++++ .../Popover/Popover.style.tsx | 32 +++ src/component-library/Popover/Popover.tsx | 54 +++++ src/component-library/Popover/PopoverBody.tsx | 8 + .../Popover/PopoverContent.tsx | 40 ++++ .../Popover/PopoverContentWrapper.tsx | 74 +++++++ .../Popover/PopoverContext.tsx | 22 ++ .../Popover/PopoverFooter.tsx | 10 + .../Popover/PopoverHeader.tsx | 12 + .../Popover/PopoverTrigger.tsx | 38 ++++ src/component-library/Popover/index.tsx | 12 + .../ProgressBar/ProgressBar.stories.tsx | 18 ++ .../ProgressBar/ProgressBar.style.tsx | 27 +++ .../ProgressBar/ProgressBar.tsx | 51 +++++ src/component-library/ProgressBar/index.tsx | 2 + src/component-library/Select/Select.style.tsx | 3 +- src/component-library/Text/style.tsx | 17 +- src/component-library/Text/types.ts | 1 + src/component-library/Text/utils.ts | 6 +- .../TextLink/TextLink.style.tsx | 23 +- src/component-library/TextLink/TextLink.tsx | 25 ++- .../TokenInput/TokenInput.style.tsx | 4 +- src/component-library/Tooltip/Tooltip.tsx | 3 +- src/component-library/index.tsx | 11 + src/component-library/theme/theme.base.css | 1 + src/component-library/theme/theme.ts | 103 +++++++-- src/component-library/utils/prop-types.ts | 5 +- src/component-library/utils/theme.ts | 6 + .../AccountSelect/AccountSelect.style.tsx | 3 +- .../FundWallet/FundWallet.style.tsx | 2 +- .../ReceivableAssets/index.tsx} | 14 +- src/components/index.tsx | 1 + src/lib/form/schemas/index.ts | 1 + src/lib/form/schemas/strategy.ts | 21 ++ .../components/PoolModal/PoolModal.style.tsx | 2 +- .../components/WithdrawForm/WithdrawForm.tsx | 5 +- .../components/LoanModal/LoanModal.style.tsx | 2 +- src/pages/Strategies/Strategies.style.tsx | 13 ++ src/pages/Strategies/Strategies.tsx | 21 ++ .../StrategyDepositForm.tsx | 66 ++++++ .../StrategyForm/StrategyDepositForm/index.ts | 1 + .../StrategyForm/StrategyForm.style.tsx | 34 +++ .../components/StrategyForm/StrategyForm.tsx | 61 +++++ .../StrategyForm/StrategyFormFees.tsx | 35 +++ .../StrategyWithdrawalForm.tsx | 104 +++++++++ .../StrategyWithdrawalForm/index.ts | 1 + .../components/StrategyForm/index.ts | 1 + src/pages/Strategies/components/index.ts | 1 + src/pages/Strategies/index.tsx | 3 + src/pages/Strategies/types/form.ts | 13 ++ .../SidebarContent/Navigation/index.tsx | 17 +- src/utils/constants/links.ts | 2 +- src/utils/hooks/use-feature-flag.ts | 4 +- yarn.lock | 149 ++++++++++++- 82 files changed, 1723 insertions(+), 292 deletions(-) create mode 100644 src/component-library/Dialog/Dialog.stories.tsx create mode 100644 src/component-library/Dialog/Dialog.style.tsx create mode 100644 src/component-library/Dialog/Dialog.tsx create mode 100644 src/component-library/Dialog/DialogBody.tsx create mode 100644 src/component-library/Dialog/DialogContext.tsx create mode 100644 src/component-library/Dialog/DialogDivider.tsx create mode 100644 src/component-library/Dialog/DialogFooter.tsx create mode 100644 src/component-library/Dialog/DialogHeader.tsx create mode 100644 src/component-library/Dialog/index.tsx delete mode 100644 src/component-library/Modal/Dialog.tsx create mode 100644 src/component-library/Overlay/Underlay.tsx create mode 100644 src/component-library/Popover/Popover.stories.tsx create mode 100644 src/component-library/Popover/Popover.style.tsx create mode 100644 src/component-library/Popover/Popover.tsx create mode 100644 src/component-library/Popover/PopoverBody.tsx create mode 100644 src/component-library/Popover/PopoverContent.tsx create mode 100644 src/component-library/Popover/PopoverContentWrapper.tsx create mode 100644 src/component-library/Popover/PopoverContext.tsx create mode 100644 src/component-library/Popover/PopoverFooter.tsx create mode 100644 src/component-library/Popover/PopoverHeader.tsx create mode 100644 src/component-library/Popover/PopoverTrigger.tsx create mode 100644 src/component-library/Popover/index.tsx create mode 100644 src/component-library/ProgressBar/ProgressBar.stories.tsx create mode 100644 src/component-library/ProgressBar/ProgressBar.style.tsx create mode 100644 src/component-library/ProgressBar/ProgressBar.tsx create mode 100644 src/component-library/ProgressBar/index.tsx rename src/{pages/AMM/Pools/components/WithdrawForm/WithdrawAssets.tsx => components/ReceivableAssets/index.tsx} (82%) create mode 100644 src/lib/form/schemas/strategy.ts create mode 100644 src/pages/Strategies/Strategies.style.tsx create mode 100644 src/pages/Strategies/Strategies.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyForm.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts create mode 100644 src/pages/Strategies/components/StrategyForm/index.ts create mode 100644 src/pages/Strategies/components/index.ts create mode 100644 src/pages/Strategies/index.tsx create mode 100644 src/pages/Strategies/types/form.ts diff --git a/.env.dev b/.env.dev index 95c64b470e..5c4633047e 100644 --- a/.env.dev +++ b/.env.dev @@ -4,7 +4,7 @@ REACT_APP_FEATURE_FLAG_LENDING=enabled REACT_APP_FEATURE_FLAG_AMM=enabled REACT_APP_FEATURE_FLAG_WALLET=enabled REACT_APP_FEATURE_FLAG_BANXA=enabled -REACT_APP_FEATURE_FLAG_EARN_STRATEGIES=enabled +REACT_APP_FEATURE_FLAG_STRATEGIES=enabled /* DEVELOPMENT */ diff --git a/package.json b/package.json index 3b6ae00edf..581d654255 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.32.5", + "version": "2.32.6", "private": true, "dependencies": { "@craco/craco": "^6.1.1", @@ -24,8 +24,8 @@ "@react-aria/link": "^3.4.0", "@react-aria/listbox": "^3.8.1", "@react-aria/meter": "^3.2.1", - "@react-aria/overlays": "^3.12.0", - "@react-aria/progress": "^3.3.0", + "@react-aria/overlays": "^3.14.0", + "@react-aria/progress": "^3.4.1", "@react-aria/select": "^3.9.0", "@react-aria/separator": "^3.2.5", "@react-aria/switch": "^3.2.4", @@ -37,7 +37,7 @@ "@react-aria/visually-hidden": "^3.6.1", "@react-stately/collections": "^3.4.1", "@react-stately/list": "^3.6.1", - "@react-stately/overlays": "^3.4.3", + "@react-stately/overlays": "^3.5.1", "@react-stately/select": "^3.4.0", "@react-stately/table": "^3.3.0", "@react-stately/tabs": "^3.4.0", diff --git a/src/App.tsx b/src/App.tsx index 463f6f1528..a94a8a4eb2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,7 +26,7 @@ import TestnetBanner from './legacy-components/TestnetBanner'; import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge')); -const EarnStrategies = React.lazy(() => import(/* webpackChunkName: 'earn-strategies' */ '@/pages/EarnStrategies')); +const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer')); const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); @@ -51,7 +51,7 @@ const App = (): JSX.Element => { const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); - const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); + const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); // Loads the connection to the faucet - only for testnet purposes const loadFaucet = React.useCallback(async (): Promise => { @@ -214,9 +214,9 @@ const App = (): JSX.Element => { )} - {isEarnStrategiesEnabled && ( - - + {isStrategiesEnabled && ( + + )} diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index e3a0d7164b..9e03c16050 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -20,6 +20,7 @@ "reimbursed": "Reimbursed", "online": "Online", "offline": "Offline", + "available": "Available", "unavailable": "Unavailable", "ok": "OK", "pending": "Pending", @@ -74,7 +75,7 @@ "issue": "Issue", "redeem": "Redeem", "nav_bridge": "Bridge", - "nav_earn_strategies": "Earn Strategies", + "nav_strategies": "Strategies", "nav_transfer": "Transfer", "nav_lending": "Lending", "nav_swap": "Swap", @@ -154,6 +155,7 @@ "unlocks": "Unlocks", "staked": "Staked", "sign_t&cs": "Sign T&Cs", + "receivable_assets": "Receivable Assets", "redeem_page": { "maximum_in_single_request": "Max redeemable in single request", "redeem": "Redeem", @@ -586,7 +588,6 @@ "pool_name": "Pool Name", "add_liquidity": "Add Liquidity", "remove_liquidity": "Remove Liquidity", - "receivable_assets": "Receivable Assets", "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please." }, "swap": "Swap", @@ -631,5 +632,9 @@ "total_governance_locked": "Total {{token}} Locked", "available_to_stake": "Available to stake", "voting_power_governance": "Voting Power {{token}}" + }, + "strategy": { + "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:", + "update_position": "Update position" } } diff --git a/src/component-library/Dialog/Dialog.stories.tsx b/src/component-library/Dialog/Dialog.stories.tsx new file mode 100644 index 0000000000..86b2a655a5 --- /dev/null +++ b/src/component-library/Dialog/Dialog.stories.tsx @@ -0,0 +1,208 @@ +import { Meta, Story } from '@storybook/react'; + +import { CTA } from '../CTA'; +import { Dialog, DialogBody, DialogDivider, DialogFooter, DialogHeader, DialogProps } from '.'; + +const Template: Story = ({ + children, + hasFooter, + hasTitle, + ...args +}) => { + return ( + <> + + {hasTitle && ( + <> + + Title + + + + )} + {children} + {hasFooter && ( + + Procced + + )} + + + ); +}; + +const Default = Template.bind({}); +Default.args = { + children: ( + <> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + + ) +}; + +const WithTitle = Template.bind({}); +WithTitle.args = { + hasTitle: true, + children: ( + <> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + + ) +}; + +const WithFooter = Template.bind({}); +WithFooter.args = { + hasFooter: true, + children: ( + <> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + + ) +}; + +const LargeContent = Template.bind({}); +LargeContent.args = { + hasFooter: true, + hasTitle: true, + children: ( + <> + Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. + Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac + facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo + cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo + odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. + Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet + fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, + vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur + purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac + consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras + mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi + leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl + consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, + egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, + vel scelerisque nisl consectetur et. + + ) +}; + +export { Default, LargeContent, WithFooter, WithTitle }; + +export default { + title: 'Overlays/Dialog', + component: Dialog +} as Meta; diff --git a/src/component-library/Dialog/Dialog.style.tsx b/src/component-library/Dialog/Dialog.style.tsx new file mode 100644 index 0000000000..59c0278559 --- /dev/null +++ b/src/component-library/Dialog/Dialog.style.tsx @@ -0,0 +1,54 @@ +import styled from 'styled-components'; + +import { CTA } from '../CTA'; +import { Divider } from '../Divider'; +import { Flex } from '../Flex'; +import { H3 } from '../Text'; +import { theme } from '../theme'; +import { Sizes } from '../utils/prop-types'; + +type StyledDialogProps = { + $size: Sizes; +}; + +const StyledDialog = styled.section` + background: ${theme.colors.bgPrimary}; + border: ${theme.border.default}; + border-radius: ${theme.rounded.md}; + color: ${theme.colors.textPrimary}; + max-width: 100%; + width: ${({ $size }) => theme.dialog[$size].width}; + display: flex; + flex-direction: column; + position: relative; + outline: none; +`; + +const StyledCloseCTA = styled(CTA)` + position: absolute; + top: ${theme.spacing.spacing2}; + right: ${theme.spacing.spacing2}; + z-index: ${theme.dialog.closeBtn.zIndex}; +`; + +const StyledDialogHeader = styled(H3)` + padding: ${({ $size }) => theme.dialog[$size].header.padding}; + overflow: hidden; + flex-shrink: 0; +`; + +const StyledDialogDivider = styled(Divider)` + margin: ${({ $size }) => `0 ${theme.dialog[$size].divider.marginX} ${theme.dialog[$size].divider.marginBottom}`}; + flex-shrink: 0; +`; + +const StyledDialogBody = styled(Flex)` + padding: ${({ $size }) => `${theme.dialog[$size].body.paddingY} ${theme.dialog[$size].body.paddingX}`}; + flex: 1 1 auto; +`; + +const StyledDialogFooter = styled(Flex)` + padding: ${({ $size }) => theme.dialog[$size].footer.padding}; +`; + +export { StyledCloseCTA, StyledDialog, StyledDialogBody, StyledDialogDivider, StyledDialogFooter, StyledDialogHeader }; diff --git a/src/component-library/Dialog/Dialog.tsx b/src/component-library/Dialog/Dialog.tsx new file mode 100644 index 0000000000..cf706540e5 --- /dev/null +++ b/src/component-library/Dialog/Dialog.tsx @@ -0,0 +1,52 @@ +import { AriaDialogProps, useDialog } from '@react-aria/dialog'; +import { mergeProps } from '@react-aria/utils'; +import { PressEvent } from '@react-types/shared'; +import { forwardRef, ReactNode } from 'react'; + +import { XMark } from '@/assets/icons'; + +import { useDOMRef } from '../utils/dom'; +import { CTASizes, Sizes } from '../utils/prop-types'; +import { StyledCloseCTA, StyledDialog } from './Dialog.style'; +import { DialogContext } from './DialogContext'; + +const closeCTASizeMap: Record = { small: 'x-small', medium: 'small', large: 'small' }; + +type Props = { + children?: ReactNode; + onClose?: (e: PressEvent) => void; + size?: Sizes; +}; + +type InheritAttrs = Omit; + +type DialogProps = Props & InheritAttrs; + +const Dialog = forwardRef( + ({ children, onClose, size = 'medium', ...props }, ref): JSX.Element => { + const dialogRef = useDOMRef(ref); + + // Get props for the dialog and its title + const { dialogProps, titleProps } = useDialog(props, dialogRef); + + const closeCTASize = closeCTASizeMap[size]; + + return ( + + + {onClose && ( + + + + )} + {children} + + + ); + } +); + +Dialog.displayName = 'Dialog'; + +export { Dialog }; +export type { DialogProps }; diff --git a/src/component-library/Dialog/DialogBody.tsx b/src/component-library/Dialog/DialogBody.tsx new file mode 100644 index 0000000000..0c7a36d260 --- /dev/null +++ b/src/component-library/Dialog/DialogBody.tsx @@ -0,0 +1,14 @@ +import { FlexProps } from '../Flex'; +import { StyledDialogBody } from './Dialog.style'; +import { useDialogContext } from './DialogContext'; + +type DialogBodyProps = FlexProps; + +const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => { + const { size } = useDialogContext(); + + return ; +}; + +export { DialogBody }; +export type { DialogBodyProps }; diff --git a/src/component-library/Dialog/DialogContext.tsx b/src/component-library/Dialog/DialogContext.tsx new file mode 100644 index 0000000000..ca351cb5b4 --- /dev/null +++ b/src/component-library/Dialog/DialogContext.tsx @@ -0,0 +1,18 @@ +import { DOMAttributes } from '@react-types/shared'; +import React from 'react'; + +import { Sizes } from '../utils/prop-types'; + +interface DialogConfig { + titleProps?: DOMAttributes; + size: Sizes; +} + +const defaultContext: DialogConfig = { size: 'medium' }; + +const DialogContext = React.createContext(defaultContext); + +const useDialogContext = (): DialogConfig => React.useContext(DialogContext); + +export { DialogContext, useDialogContext }; +export type { DialogConfig }; diff --git a/src/component-library/Dialog/DialogDivider.tsx b/src/component-library/Dialog/DialogDivider.tsx new file mode 100644 index 0000000000..e724cd4293 --- /dev/null +++ b/src/component-library/Dialog/DialogDivider.tsx @@ -0,0 +1,14 @@ +import { DividerProps } from '../Divider'; +import { StyledDialogDivider } from './Dialog.style'; +import { useDialogContext } from './DialogContext'; + +type DialogDividerProps = Omit; + +const DialogDivider = (props: DialogDividerProps): JSX.Element => { + const { size } = useDialogContext(); + + return ; +}; + +export { DialogDivider }; +export type { DialogDividerProps }; diff --git a/src/component-library/Dialog/DialogFooter.tsx b/src/component-library/Dialog/DialogFooter.tsx new file mode 100644 index 0000000000..a9212d5a6f --- /dev/null +++ b/src/component-library/Dialog/DialogFooter.tsx @@ -0,0 +1,16 @@ +import { FlexProps } from '../Flex'; +import { StyledDialogFooter } from './Dialog.style'; +import { useDialogContext } from './DialogContext'; + +type InheritAttrs = FlexProps; + +type DialogFooterProps = InheritAttrs; + +const DialogFooter = (props: DialogFooterProps): JSX.Element => { + const { size } = useDialogContext(); + + return ; +}; + +export { DialogFooter }; +export type { DialogFooterProps }; diff --git a/src/component-library/Dialog/DialogHeader.tsx b/src/component-library/Dialog/DialogHeader.tsx new file mode 100644 index 0000000000..4130cb70b3 --- /dev/null +++ b/src/component-library/Dialog/DialogHeader.tsx @@ -0,0 +1,34 @@ +import { mergeProps } from '@react-aria/utils'; +import { ElementType } from 'react'; + +import { TextProps } from '../Text'; +import { FontSize, Sizes } from '../utils/prop-types'; +import { StyledDialogHeader } from './Dialog.style'; +import { useDialogContext } from './DialogContext'; + +const sizeMap: Record = { + small: 'base', + medium: 'xl', + large: 'xl' +}; + +type Props = { + elementType?: ElementType; +}; + +type InheritAttrs = Omit; + +type DialogHeaderProps = Props & InheritAttrs; + +const DialogHeader = ({ elementType, children, ...props }: DialogHeaderProps): JSX.Element => { + const { titleProps, size } = useDialogContext(); + + return ( + + {children} + + ); +}; + +export { DialogHeader }; +export type { DialogHeaderProps }; diff --git a/src/component-library/Dialog/index.tsx b/src/component-library/Dialog/index.tsx new file mode 100644 index 0000000000..b5980d46cd --- /dev/null +++ b/src/component-library/Dialog/index.tsx @@ -0,0 +1,10 @@ +export type { DialogProps } from './Dialog'; +export { Dialog } from './Dialog'; +export type { DialogBodyProps } from './DialogBody'; +export { DialogBody } from './DialogBody'; +export type { DialogDividerProps } from './DialogDivider'; +export { DialogDivider } from './DialogDivider'; +export type { DialogFooterProps } from './DialogFooter'; +export { DialogFooter } from './DialogFooter'; +export type { DialogHeaderProps } from './DialogHeader'; +export { DialogHeader } from './DialogHeader'; diff --git a/src/component-library/Divider/Divider.style.tsx b/src/component-library/Divider/Divider.style.tsx index 28d8b361bc..2cf4de19ef 100644 --- a/src/component-library/Divider/Divider.style.tsx +++ b/src/component-library/Divider/Divider.style.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; +import { marginCSS, StyledMarginProps } from '../css/margin'; import { theme } from '../theme'; import { DividerVariants, Orientation, Sizes } from '../utils/prop-types'; import { resolveColor } from '../utils/theme'; @@ -8,7 +9,7 @@ type StyledDividerProps = { $color: DividerVariants; $orientation: Orientation; $size: Sizes; -}; +} & StyledMarginProps; const StyledDivider = styled.hr` background-color: ${({ $color }) => ($color === 'default' ? 'var(--colors-border)' : resolveColor($color))}; @@ -17,6 +18,8 @@ const StyledDivider = styled.hr` border: 0; margin: 0; align-self: stretch; + flex-shrink: 0; + ${(props) => marginCSS(props)}; `; export { StyledDivider }; diff --git a/src/component-library/Divider/Divider.tsx b/src/component-library/Divider/Divider.tsx index 6d1e3cebfa..6b71b7a1e2 100644 --- a/src/component-library/Divider/Divider.tsx +++ b/src/component-library/Divider/Divider.tsx @@ -2,7 +2,8 @@ import { useSeparator } from '@react-aria/separator'; import { mergeProps } from '@react-aria/utils'; import { forwardRef, HTMLAttributes } from 'react'; -import { DividerVariants, ElementTypeProp, Orientation, Sizes } from '../utils/prop-types'; +import { DividerVariants, ElementTypeProp, MarginProps, Orientation, Sizes } from '../utils/prop-types'; +import { useStyleProps } from '../utils/use-style-props'; import { StyledDivider } from './Divider.style'; type Props = { @@ -13,7 +14,7 @@ type Props = { type NativeAttrs = Omit, keyof Props>; -type DividerProps = Props & NativeAttrs & ElementTypeProp; +type DividerProps = Props & NativeAttrs & ElementTypeProp & MarginProps; const Divider = forwardRef( ( @@ -26,6 +27,7 @@ const Divider = forwardRef( ...props, elementType }); + const { styleProps, componentProps } = useStyleProps(props); return ( ( $color={color} $orientation={orientation} $size={size} - {...mergeProps(separatorProps, props)} + {...mergeProps(separatorProps, styleProps, componentProps)} /> ); } diff --git a/src/component-library/Modal/Dialog.tsx b/src/component-library/Modal/Dialog.tsx deleted file mode 100644 index ecd782729a..0000000000 --- a/src/component-library/Modal/Dialog.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { AriaDialogProps, useDialog } from '@react-aria/dialog'; -import { forwardRef, ReactNode } from 'react'; - -import { XMark } from '@/assets/icons'; - -import { useDOMRef } from '../utils/dom'; -import { StyledCloseCTA, StyledDialog } from './Modal.style'; -import { ModalContext } from './ModalContext'; - -type Props = { - children: ReactNode; - align?: 'top' | 'center'; - hasMaxHeight?: boolean; - onClose: () => void; -}; - -type InheritAttrs = Omit; - -type DialogProps = Props & InheritAttrs; - -const Dialog = forwardRef( - ({ children, align = 'center', hasMaxHeight, onClose, ...props }, ref): JSX.Element | null => { - const dialogRef = useDOMRef(ref); - - // Get props for the dialog and its title - const { dialogProps, titleProps } = useDialog(props, dialogRef); - - const isCentered = align === 'center'; - - return ( - - - - - - {children} - - - ); - } -); - -Dialog.displayName = 'Dialog'; - -export { Dialog }; -export type { DialogProps }; diff --git a/src/component-library/Modal/Modal.style.tsx b/src/component-library/Modal/Modal.style.tsx index 1dc9da67af..250dad20f8 100644 --- a/src/component-library/Modal/Modal.style.tsx +++ b/src/component-library/Modal/Modal.style.tsx @@ -1,10 +1,7 @@ import styled from 'styled-components'; import { overlayCSS } from '../css/overlay'; -import { CTA } from '../CTA'; -import { Divider } from '../Divider'; -import { Flex } from '../Flex'; -import { H3 } from '../Text'; +import { Dialog, DialogBody } from '../Dialog'; import { theme } from '../theme'; import { Overflow } from '../utils/prop-types'; @@ -23,26 +20,6 @@ type StyledModalBodyProps = { $noPadding?: boolean; }; -type StyledUnderlayProps = { - $isOpen: boolean; - $isCentered?: boolean; -}; - -const StyledUnderlay = styled.div` - position: fixed; - z-index: ${theme.modal.underlay.zIndex}; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - - background: ${theme.modal.underlay.bg}; - - ${({ $isOpen }) => overlayCSS($isOpen)} - transition: ${({ $isOpen }) => - $isOpen ? theme.modal.underlay.transition.entering : theme.modal.underlay.transition.exiting}; -`; - const StyledWrapper = styled.div` position: fixed; top: 0; @@ -59,8 +36,7 @@ const StyledWrapper = styled.div` `; const StyledModal = styled.div` - width: 100%; - max-width: ${theme.modal.maxWidth}; + max-width: calc(100% - ${theme.spacing.spacing12}); max-height: ${({ $isCentered }) => $isCentered && theme.modal.maxHeight}; margin: ${({ $isCentered }) => ($isCentered ? 0 : theme.spacing.spacing16)} ${theme.spacing.spacing6}; @@ -77,60 +53,15 @@ const StyledModal = styled.div` outline: none; `; -const StyledDialog = styled.section` - background: ${theme.colors.bgPrimary}; - border: ${theme.border.default}; - border-radius: ${theme.rounded.md}; - color: ${theme.colors.textPrimary}; - - width: 100%; +const StyledDialog = styled(Dialog)` max-height: ${({ $hasMaxHeight }) => $hasMaxHeight && '560px'}; overflow: ${({ $isCentered }) => $isCentered && 'hidden'}; - - display: flex; - flex-direction: column; - position: relative; - - outline: none; `; -const StyledCloseCTA = styled(CTA)` - position: absolute; - top: ${theme.spacing.spacing2}; - right: ${theme.spacing.spacing2}; - z-index: ${theme.modal.closeBtn.zIndex}; -`; - -const StyledModalHeader = styled(H3)` - padding: ${theme.modal.header.paddingY} ${theme.modal.header.paddingRight} ${theme.modal.header.paddingY} - ${theme.modal.header.paddingX}; - flex-shrink: 0; -`; - -const StyledModalDivider = styled(Divider)` - margin: 0 ${theme.modal.divider.marginX} ${theme.modal.divider.marginBottom}; - flex-shrink: 0; -`; - -const StyledModalBody = styled(Flex)` - flex: 1 1 auto; +const StyledDialogBody = styled(DialogBody)` overflow-y: ${({ $overflow }) => $overflow}; position: relative; - padding: ${({ $noPadding }) => !$noPadding && `${theme.modal.body.paddingY} ${theme.modal.body.paddingX}`}; + padding: ${({ $noPadding }) => $noPadding && 0}; `; -const StyledModalFooter = styled(Flex)` - padding: ${theme.modal.footer.paddingTop} ${theme.modal.footer.paddingX} ${theme.modal.footer.paddingBottom}; -`; - -export { - StyledCloseCTA, - StyledDialog, - StyledModal, - StyledModalBody, - StyledModalDivider, - StyledModalFooter, - StyledModalHeader, - StyledUnderlay, - StyledWrapper -}; +export { StyledDialog, StyledDialogBody, StyledModal, StyledWrapper }; diff --git a/src/component-library/Modal/Modal.tsx b/src/component-library/Modal/Modal.tsx index 9bff5876a4..54e1723365 100644 --- a/src/component-library/Modal/Modal.tsx +++ b/src/component-library/Modal/Modal.tsx @@ -1,17 +1,27 @@ -import { forwardRef } from 'react'; +import { forwardRef, useRef } from 'react'; +import { DialogProps } from '../Dialog'; import { Overlay } from '../Overlay'; import { useDOMRef } from '../utils/dom'; -import { Dialog, DialogProps } from './Dialog'; +import { StyledDialog } from './Modal.style'; +import { ModalContext } from './ModalContext'; import { ModalWrapper, ModalWrapperProps } from './ModalWrapper'; +const isInteractingWithToasts = (element: Element) => { + const toastsContainer = document.querySelector('.Toastify'); + + if (!toastsContainer) return false; + + return toastsContainer.contains(element); +}; + type Props = { container?: Element; hasMaxHeight?: boolean; align?: 'top' | 'center'; }; -type InheritAttrs = Omit; +type InheritAttrs = Omit; type ModalProps = Props & InheritAttrs; @@ -32,24 +42,36 @@ const Modal = forwardRef( ): JSX.Element | null => { const domRef = useDOMRef(ref); const { isOpen, onClose } = props; + const wrapperRef = useRef(null); + + const isCentered = align === 'center'; + + // Does not allow the modal to close when clicking on toasts + const handleShouldCloseOnInteractOutside = (element: Element) => + shouldCloseOnInteractOutside + ? shouldCloseOnInteractOutside?.(element) && !isInteractingWithToasts(element) + : !isInteractingWithToasts(element); return ( - - - - {children} - - - + + + + + {children} + + + + ); } ); diff --git a/src/component-library/Modal/ModalBody.tsx b/src/component-library/Modal/ModalBody.tsx index b888725293..7f949b254c 100644 --- a/src/component-library/Modal/ModalBody.tsx +++ b/src/component-library/Modal/ModalBody.tsx @@ -1,6 +1,6 @@ -import { FlexProps } from '../Flex'; +import { DialogBodyProps } from '../Dialog'; import { Overflow } from '../utils/prop-types'; -import { StyledModalBody } from './Modal.style'; +import { StyledDialogBody } from './Modal.style'; import { useModalContext } from './ModalContext'; type Props = { @@ -8,21 +8,14 @@ type Props = { noPadding?: boolean; }; -type InheritAttrs = Omit; +type InheritAttrs = Omit; type ModalBodyProps = Props & InheritAttrs; -const ModalBody = ({ overflow, noPadding, direction = 'column', ...props }: ModalBodyProps): JSX.Element => { +const ModalBody = ({ overflow, noPadding, ...props }: ModalBodyProps): JSX.Element => { const { bodyProps } = useModalContext(); - return ( - - ); + return ; }; export { ModalBody }; diff --git a/src/component-library/Modal/ModalContext.tsx b/src/component-library/Modal/ModalContext.tsx index 4c890537fe..42353cbe0e 100644 --- a/src/component-library/Modal/ModalContext.tsx +++ b/src/component-library/Modal/ModalContext.tsx @@ -1,10 +1,8 @@ -import { DOMAttributes } from '@react-types/shared'; import React from 'react'; import { ModalBodyProps } from './ModalBody'; interface ModalConfig { - titleProps?: DOMAttributes; bodyProps?: ModalBodyProps; } diff --git a/src/component-library/Modal/ModalDivider.tsx b/src/component-library/Modal/ModalDivider.tsx index 7159d73208..1e9630a48e 100644 --- a/src/component-library/Modal/ModalDivider.tsx +++ b/src/component-library/Modal/ModalDivider.tsx @@ -1,11 +1,8 @@ -import { DividerProps } from '../Divider'; -import { StyledModalDivider } from './Modal.style'; +import { DialogDivider, DialogDividerProps } from '../Dialog'; -type ModalDividerProps = Omit; +type ModalDividerProps = DialogDividerProps; -const ModalDivider = (props: ModalDividerProps): JSX.Element => ( - -); +const ModalDivider = (props: ModalDividerProps): JSX.Element => ; export { ModalDivider }; export type { ModalDividerProps }; diff --git a/src/component-library/Modal/ModalFooter.tsx b/src/component-library/Modal/ModalFooter.tsx index bd66ff2c3d..655a8d5d20 100644 --- a/src/component-library/Modal/ModalFooter.tsx +++ b/src/component-library/Modal/ModalFooter.tsx @@ -1,12 +1,9 @@ -import { FlexProps } from '../Flex'; -import { StyledModalFooter } from './Modal.style'; +import { DialogFooter, DialogFooterProps } from '../Dialog'; -type InheritAttrs = FlexProps; - -type ModalFooterProps = InheritAttrs; +type ModalFooterProps = DialogFooterProps; const ModalFooter = ({ direction = 'column', gap = 'spacing4', ...props }: ModalFooterProps): JSX.Element => ( - + ); export { ModalFooter }; diff --git a/src/component-library/Modal/ModalHeader.tsx b/src/component-library/Modal/ModalHeader.tsx index 38545726fc..decf2059e3 100644 --- a/src/component-library/Modal/ModalHeader.tsx +++ b/src/component-library/Modal/ModalHeader.tsx @@ -1,40 +1,12 @@ -import { mergeProps } from '@react-aria/utils'; -import { ElementType } from 'react'; +import { DialogHeader, DialogHeaderProps } from '../Dialog'; -import { TextProps } from '../Text'; -import { StyledModalHeader } from './Modal.style'; -import { useModalContext } from './ModalContext'; +type ModalHeaderProps = DialogHeaderProps; -type Props = { - elementType?: ElementType; -}; - -type InheritAttrs = Omit; - -type ModalHeaderProps = Props & InheritAttrs; - -const ModalHeader = ({ - align = 'center', - size = 'xl', - weight = 'semibold', - elementType, - children, - ...props -}: ModalHeaderProps): JSX.Element => { - const { titleProps } = useModalContext(); - - return ( - - {children} - - ); -}; +const ModalHeader = ({ align = 'center', children, ...props }: ModalHeaderProps): JSX.Element => ( + + {children} + +); export { ModalHeader }; export type { ModalHeaderProps }; diff --git a/src/component-library/Modal/ModalWrapper.tsx b/src/component-library/Modal/ModalWrapper.tsx index 3bb7dab4c9..8ce98068e6 100644 --- a/src/component-library/Modal/ModalWrapper.tsx +++ b/src/component-library/Modal/ModalWrapper.tsx @@ -3,13 +3,15 @@ import { mergeProps } from '@react-aria/utils'; import { OverlayTriggerState } from '@react-stately/overlays'; import { forwardRef, ReactNode, RefObject } from 'react'; -import { StyledModal, StyledUnderlay, StyledWrapper } from './Modal.style'; +import { Underlay } from '../Overlay'; +import { StyledModal, StyledWrapper } from './Modal.style'; type Props = { children: ReactNode; align?: 'top' | 'center'; isOpen?: boolean; onClose: () => void; + wrapperRef: RefObject; }; type InheritAttrs = Omit; @@ -27,6 +29,7 @@ const ModalWrapper = forwardRef( isOpen, shouldCloseOnInteractOutside, shouldCloseOnBlur, + wrapperRef, ...props }, ref @@ -49,14 +52,14 @@ const ModalWrapper = forwardRef( const isCentered = align === 'center'; return ( - <> - +
+ {children} - +
); } ); diff --git a/src/component-library/Overlay/Overlay.style.tsx b/src/component-library/Overlay/Overlay.style.tsx index 770f816067..d348e5594f 100644 --- a/src/component-library/Overlay/Overlay.style.tsx +++ b/src/component-library/Overlay/Overlay.style.tsx @@ -1,8 +1,31 @@ import styled from 'styled-components'; +import { overlayCSS } from '../css/overlay'; +import { theme } from '../theme'; + +type StyledUnderlayProps = { + $isOpen: boolean; + $isTransparent: boolean; +}; + const StyledOverlayWrapper = styled.div` isolation: isolate; background: transparent; `; -export { StyledOverlayWrapper }; +const StyledUnderlay = styled.div` + position: fixed; + z-index: ${theme.modal.underlay.zIndex}; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + background: ${({ $isTransparent }) => ($isTransparent ? 'transparent' : theme.modal.underlay.bg)}; + + ${({ $isOpen }) => overlayCSS($isOpen)} + transition: ${({ $isOpen }) => + $isOpen ? theme.modal.underlay.transition.entering : theme.modal.underlay.transition.exiting}; +`; + +export { StyledOverlayWrapper, StyledUnderlay }; diff --git a/src/component-library/Overlay/Overlay.tsx b/src/component-library/Overlay/Overlay.tsx index 45cafff805..3e92902704 100644 --- a/src/component-library/Overlay/Overlay.tsx +++ b/src/component-library/Overlay/Overlay.tsx @@ -1,11 +1,12 @@ import { Overlay as AriaOverlay } from '@react-aria/overlays'; -import { ReactNode, useCallback, useState } from 'react'; +import { ReactNode, RefObject, useCallback, useState } from 'react'; import { OpenTransition } from './OpenTransition'; import { StyledOverlayWrapper } from './Overlay.style'; type OverlayProps = { children: ReactNode; + nodeRef: RefObject; isOpen?: boolean; container?: Element; onEnter?: () => void; @@ -18,6 +19,7 @@ type OverlayProps = { const Overlay = ({ children, + nodeRef, isOpen, container, onEnter, @@ -64,6 +66,7 @@ const Overlay = ({ onEnter={onEnter} onEntering={onEntering} onEntered={handleEntered} + nodeRef={nodeRef} > {children} diff --git a/src/component-library/Overlay/Underlay.tsx b/src/component-library/Overlay/Underlay.tsx new file mode 100644 index 0000000000..9dfcbebc8f --- /dev/null +++ b/src/component-library/Overlay/Underlay.tsx @@ -0,0 +1,19 @@ +import { HTMLAttributes } from 'react'; + +import { StyledUnderlay } from './Overlay.style'; + +type Props = { + isTransparent?: boolean; + isOpen?: boolean; +}; + +type NativeAttrs = Omit, keyof Props>; + +type UnderlayProps = Props & NativeAttrs; + +const Underlay = ({ isTransparent = false, isOpen = false, ...props }: UnderlayProps): JSX.Element => ( + +); + +export { Underlay }; +export type { UnderlayProps }; diff --git a/src/component-library/Overlay/index.tsx b/src/component-library/Overlay/index.tsx index 9c047f467d..ac912a2e2b 100644 --- a/src/component-library/Overlay/index.tsx +++ b/src/component-library/Overlay/index.tsx @@ -1,2 +1,4 @@ export type { OverlayProps } from './Overlay'; export { Overlay } from './Overlay'; +export type { UnderlayProps } from './Underlay'; +export { Underlay } from './Underlay'; diff --git a/src/component-library/Popover/Popover.stories.tsx b/src/component-library/Popover/Popover.stories.tsx new file mode 100644 index 0000000000..68ef806297 --- /dev/null +++ b/src/component-library/Popover/Popover.stories.tsx @@ -0,0 +1,40 @@ +import { Meta, Story } from '@storybook/react'; + +import { CTA } from '../CTA'; +import { P } from '../Text'; +import { Placement } from '../utils/prop-types'; +import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverProps, PopoverTrigger } from '.'; + +const Template: Story = ({ placement, ...args }) => { + return ( + + + Open Popover + + + Popover Header + +

+ Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget + quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel + scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus + ac facilisis in, egestas eget quam. +

+ + + Confirm + + + + ); +}; + +const Default = Template.bind({}); +Default.args = { placement: 'right' }; + +export { Default }; + +export default { + title: 'Overlays/Popover', + component: Popover +} as Meta; diff --git a/src/component-library/Popover/Popover.style.tsx b/src/component-library/Popover/Popover.style.tsx new file mode 100644 index 0000000000..26fe2d5f73 --- /dev/null +++ b/src/component-library/Popover/Popover.style.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components'; + +import { getOverlayPlacementCSS, overlayCSS } from '../css/overlay'; +import { theme } from '../theme'; +import { Placement } from '../utils/prop-types'; + +type StyledPopoverProps = { + $placement?: Placement | 'center'; + $isOpen: boolean; +}; + +const StyledPopover = styled.div` + display: inline-flex; + flex-direction: column; + box-sizing: border-box; + + min-width: ${theme.spacing.spacing8}; + min-height: ${theme.spacing.spacing8}; + max-width: calc(100% - ${theme.spacing.spacing8}); + + position: absolute; + + outline: none; /* Hide focus outline */ + box-sizing: border-box; + + ${({ $isOpen }) => overlayCSS(!!$isOpen)} + ${({ $placement }) => $placement && getOverlayPlacementCSS($placement as any)} + + transition: transform 100ms ease-in-out, opacity 100ms ease-in-out, visibility 0s linear 100ms; +`; + +export { StyledPopover }; diff --git a/src/component-library/Popover/Popover.tsx b/src/component-library/Popover/Popover.tsx new file mode 100644 index 0000000000..0d974f04af --- /dev/null +++ b/src/component-library/Popover/Popover.tsx @@ -0,0 +1,54 @@ +import { useOverlayTrigger } from '@react-aria/overlays'; +import { OverlayTriggerProps, useOverlayTriggerState } from '@react-stately/overlays'; +import { ReactNode, useRef } from 'react'; + +import { Placement } from '../utils/prop-types'; +import { PopoverContext } from './PopoverContext'; + +type Props = { + children?: ReactNode; + placement?: Placement; + offset?: number; + crossOffset?: number; + /* usePopover attempts to flip popovers on the main axis */ + /* overrides usePopover flip */ + shouldFlip?: boolean; + /* Control the minimum padding required between the popover and the surrounding container. */ + /* Affects the popover flip */ + containerPadding?: number; +}; + +type InheritAttrs = Omit; + +type PopoverProps = Props & InheritAttrs; + +const Popover = ({ + children, + placement, + offset, + crossOffset, + shouldFlip, + containerPadding, + ...props +}: PopoverProps): JSX.Element | null => { + const triggerRef = useRef(null); + const state = useOverlayTriggerState(props); + const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef); + + return ( + + {children} + + ); +}; + +export { Popover }; +export type { PopoverProps }; diff --git a/src/component-library/Popover/PopoverBody.tsx b/src/component-library/Popover/PopoverBody.tsx new file mode 100644 index 0000000000..d39dd0fcd0 --- /dev/null +++ b/src/component-library/Popover/PopoverBody.tsx @@ -0,0 +1,8 @@ +import { DialogBody, DialogBodyProps } from '../Dialog'; + +type PopoverBodyProps = DialogBodyProps; + +const PopoverBody = (props: PopoverBodyProps): JSX.Element => ; + +export { PopoverBody }; +export type { PopoverBodyProps }; diff --git a/src/component-library/Popover/PopoverContent.tsx b/src/component-library/Popover/PopoverContent.tsx new file mode 100644 index 0000000000..8becd5f989 --- /dev/null +++ b/src/component-library/Popover/PopoverContent.tsx @@ -0,0 +1,40 @@ +import { forwardRef, ReactNode, useRef } from 'react'; + +import { Overlay } from '../Overlay'; +import { useDOMRef } from '../utils/dom'; +import { PopoverContentWrapper } from './PopoverContentWrapper'; +import { usePopoverContext } from './PopoverContext'; + +type Props = { children?: ReactNode }; + +type PopoverContentProps = Props; + +const PopoverContent = forwardRef( + (props, ref): JSX.Element => { + const { children, ...otherProps } = props; + const domRef = useDOMRef(ref); + const wrapperRef = useRef(null); + const { state, triggerRef, dialogProps, popoverProps } = usePopoverContext(); + + return ( + + } + wrapperRef={wrapperRef} + > + {children} + + + ); + } +); + +PopoverContent.displayName = 'PopoverContent'; + +export { PopoverContent }; +export type { PopoverContentProps }; diff --git a/src/component-library/Popover/PopoverContentWrapper.tsx b/src/component-library/Popover/PopoverContentWrapper.tsx new file mode 100644 index 0000000000..7287366a9f --- /dev/null +++ b/src/component-library/Popover/PopoverContentWrapper.tsx @@ -0,0 +1,74 @@ +import { AriaPopoverProps, DismissButton, usePopover } from '@react-aria/overlays'; +import { OverlayTriggerState } from '@react-stately/overlays'; +import { DOMProps } from '@react-types/shared'; +import { forwardRef, HTMLAttributes, RefObject } from 'react'; + +import { Dialog } from '../Dialog'; +import { Underlay } from '../Overlay'; +import { StyledPopover } from './Popover.style'; + +type Props = { + state: OverlayTriggerState; + wrapperRef: RefObject; + isOpen?: boolean; + dialogProps?: DOMProps; + popoverProps?: Partial; +}; + +type InheritAttrs = Omit; + +type NativeAttrs = Omit, keyof Props & InheritAttrs>; + +type PopoverContentWrapperProps = Props & InheritAttrs & NativeAttrs; + +const PopoverContentWrapper = forwardRef( + (props, ref): JSX.Element | null => { + const { + children, + wrapperRef, + state, + isOpen, + className, + style, + isNonModal, + dialogProps, + popoverProps: popoverPropsProp + } = props; + + const { popoverProps, underlayProps, placement } = usePopover( + { + ...props, + popoverRef: ref as RefObject, + ...popoverPropsProp + }, + state + ); + + return ( +
+ {!isNonModal && } + + {!isNonModal && } + + {children} + + + +
+ ); + } +); + +PopoverContentWrapper.displayName = 'PopoverContentWrapper'; + +export { PopoverContentWrapper }; +export type { PopoverContentWrapperProps }; diff --git a/src/component-library/Popover/PopoverContext.tsx b/src/component-library/Popover/PopoverContext.tsx new file mode 100644 index 0000000000..37c34dc9fc --- /dev/null +++ b/src/component-library/Popover/PopoverContext.tsx @@ -0,0 +1,22 @@ +import { AriaButtonProps } from '@react-aria/button'; +import { AriaPopoverProps } from '@react-aria/overlays'; +import { OverlayTriggerState } from '@react-stately/overlays'; +import { DOMProps } from '@react-types/shared'; +import React, { RefObject } from 'react'; + +interface PopoverConfig { + state: OverlayTriggerState; + triggerRef?: RefObject; + triggerProps?: AriaButtonProps<'button'>; + dialogProps?: DOMProps; + popoverProps?: Partial; +} + +const defaultContext = { state: { isOpen: false } as OverlayTriggerState }; + +const PopoverContext = React.createContext(defaultContext); + +const usePopoverContext = (): PopoverConfig => React.useContext(PopoverContext); + +export { PopoverContext, usePopoverContext }; +export type { PopoverConfig }; diff --git a/src/component-library/Popover/PopoverFooter.tsx b/src/component-library/Popover/PopoverFooter.tsx new file mode 100644 index 0000000000..83a07a5524 --- /dev/null +++ b/src/component-library/Popover/PopoverFooter.tsx @@ -0,0 +1,10 @@ +import { DialogFooter, DialogFooterProps } from '../Dialog'; + +type PopoverFooterProps = DialogFooterProps; + +const PopoverFooter = ({ justifyContent = 'flex-end', ...props }: PopoverFooterProps): JSX.Element => ( + +); + +export { PopoverFooter }; +export type { PopoverFooterProps }; diff --git a/src/component-library/Popover/PopoverHeader.tsx b/src/component-library/Popover/PopoverHeader.tsx new file mode 100644 index 0000000000..04ea84f09e --- /dev/null +++ b/src/component-library/Popover/PopoverHeader.tsx @@ -0,0 +1,12 @@ +import { DialogHeader, DialogHeaderProps } from '../Dialog'; + +type PopoverHeaderProps = DialogHeaderProps; + +const PopoverHeader = ({ size = 'base', weight = 'semibold', children, ...props }: PopoverHeaderProps): JSX.Element => ( + + {children} + +); + +export { PopoverHeader }; +export type { PopoverHeaderProps }; diff --git a/src/component-library/Popover/PopoverTrigger.tsx b/src/component-library/Popover/PopoverTrigger.tsx new file mode 100644 index 0000000000..812b6b0516 --- /dev/null +++ b/src/component-library/Popover/PopoverTrigger.tsx @@ -0,0 +1,38 @@ +import { useButton } from '@react-aria/button'; +import { mergeProps } from '@react-aria/utils'; +import React, { Children, cloneElement, ElementType, ReactNode, RefObject } from 'react'; + +import { useDOMRef } from '../utils/dom'; +import { usePopoverContext } from './PopoverContext'; + +type Props = { + children?: ReactNode; +}; + +type PopoverTriggerProps = Props; + +const PopoverTrigger = ({ children }: PopoverTriggerProps): JSX.Element => { + const { triggerRef, triggerProps: { onPress, ...triggerAriaProps } = {} } = usePopoverContext(); + const ref = useDOMRef(triggerRef as RefObject); + + // MEMO: Ensure tooltip has only one child node + const child = Children.only(children) as React.ReactElement & { + ref?: React.Ref; + }; + + const elementType = ref.current?.tagName.toLowerCase() as ElementType; + + const { buttonProps } = useButton({ onPress, elementType, isDisabled: elementType === 'button' } || {}, ref); + + const triggerProps = + elementType === 'button' + ? mergeProps(child.props, triggerAriaProps, { onPress }) + : mergeProps(child.props, triggerAriaProps, buttonProps); + + const trigger = cloneElement(child, mergeProps(triggerProps, { ref })); + + return trigger; +}; + +export { PopoverTrigger }; +export type { PopoverTriggerProps }; diff --git a/src/component-library/Popover/index.tsx b/src/component-library/Popover/index.tsx new file mode 100644 index 0000000000..a69a739789 --- /dev/null +++ b/src/component-library/Popover/index.tsx @@ -0,0 +1,12 @@ +export type { PopoverProps } from './Popover'; +export { Popover } from './Popover'; +export type { PopoverBodyProps } from './PopoverBody'; +export { PopoverBody } from './PopoverBody'; +export type { PopoverContentProps } from './PopoverContent'; +export { PopoverContent } from './PopoverContent'; +export type { PopoverFooterProps } from './PopoverFooter'; +export { PopoverFooter } from './PopoverFooter'; +export type { PopoverHeaderProps } from './PopoverHeader'; +export { PopoverHeader } from './PopoverHeader'; +export type { PopoverTriggerProps } from './PopoverTrigger'; +export { PopoverTrigger } from './PopoverTrigger'; diff --git a/src/component-library/ProgressBar/ProgressBar.stories.tsx b/src/component-library/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 0000000000..d0047ef340 --- /dev/null +++ b/src/component-library/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,18 @@ +import { Meta, Story } from '@storybook/react'; + +import { ProgressBar, ProgressBarProps } from '.'; + +const Template: Story = (args) => ; + +const Default = Template.bind({}); +Default.args = { + value: 20, + label: 'Loading...' +}; + +export { Default }; + +export default { + title: 'Elements/ProgressBar', + component: ProgressBar +} as Meta; diff --git a/src/component-library/ProgressBar/ProgressBar.style.tsx b/src/component-library/ProgressBar/ProgressBar.style.tsx new file mode 100644 index 0000000000..feeff94120 --- /dev/null +++ b/src/component-library/ProgressBar/ProgressBar.style.tsx @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +import { theme } from '../theme'; +import { ProgressBarColors } from '../utils/prop-types'; + +type StyledFillProps = { + $color: ProgressBarColors; +}; + +const StyledTrack = styled.div` + overflow: hidden; + z-index: 1; + width: 100%; + min-width: ${theme.spacing.spacing6}; + background-color: ${theme.progressBar.bg}; + height: 1px; +`; + +const StyledFill = styled.div` + background-color: ${({ $color }) => ($color === 'red' ? theme.alert.status.error : theme.colors.textSecondary)}; + height: 1px; + border: none; + transition: width ${theme.transition.duration.duration100}ms; + will-change: width; +`; + +export { StyledFill, StyledTrack }; diff --git a/src/component-library/ProgressBar/ProgressBar.tsx b/src/component-library/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000000..a7eaf508ff --- /dev/null +++ b/src/component-library/ProgressBar/ProgressBar.tsx @@ -0,0 +1,51 @@ +import { AriaProgressBarProps, useProgressBar } from '@react-aria/progress'; +import { CSSProperties } from 'react'; + +import { Flex, FlexProps } from '../Flex'; +import { Span } from '../Text'; +import { ProgressBarColors } from '../utils/prop-types'; +import { StyledFill, StyledTrack } from './ProgressBar.style'; + +type Props = { color?: ProgressBarColors; showValueLabel?: boolean }; + +type AriaAttrs = Omit; + +type InheritAttrs = Omit; + +type ProgressBarProps = Props & InheritAttrs & AriaAttrs; + +const ProgressBar = (props: ProgressBarProps): JSX.Element => { + const { progressBarProps, labelProps } = useProgressBar(props); + + const { + value = 0, + minValue = 0, + maxValue = 100, + color = 'default', + showValueLabel, + label, + className, + style, + hidden + } = props; + + const percentage = (value - minValue) / (maxValue - minValue); + const barStyle: CSSProperties = { width: `${Math.round(percentage * 100)}%` }; + + return ( + + ); +}; + +export { ProgressBar }; +export type { ProgressBarProps }; diff --git a/src/component-library/ProgressBar/index.tsx b/src/component-library/ProgressBar/index.tsx new file mode 100644 index 0000000000..098ea9d4bb --- /dev/null +++ b/src/component-library/ProgressBar/index.tsx @@ -0,0 +1,2 @@ +export type { ProgressBarProps } from './ProgressBar'; +export { ProgressBar } from './ProgressBar'; diff --git a/src/component-library/Select/Select.style.tsx b/src/component-library/Select/Select.style.tsx index d79d62f111..03a766d386 100644 --- a/src/component-library/Select/Select.style.tsx +++ b/src/component-library/Select/Select.style.tsx @@ -66,7 +66,8 @@ const StyledTriggerValue = styled(Span)` const StyledList = styled(List)` overflow: auto; - padding: 0 ${theme.modal.body.paddingX} ${theme.modal.body.paddingY} ${theme.modal.body.paddingX}; + padding: 0 ${theme.dialog.medium.body.paddingX} ${theme.dialog.medium.body.paddingY} + ${theme.dialog.medium.body.paddingX}; `; const StyledChevronDown = styled(ChevronDown)` diff --git a/src/component-library/Text/style.tsx b/src/component-library/Text/style.tsx index abf26946fa..2299c8592c 100644 --- a/src/component-library/Text/style.tsx +++ b/src/component-library/Text/style.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { theme } from '../theme'; import { Colors, FontSize, FontWeight, NormalAlignments } from '../utils/prop-types'; @@ -9,6 +9,7 @@ type StyledTextProps = { $size?: FontSize; $align?: NormalAlignments; $weight?: FontWeight; + $rows?: number; }; const Text = styled.p` @@ -17,6 +18,20 @@ const Text = styled.p` line-height: ${({ $size }) => resolveHeight($size)}; font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]}; text-align: ${({ $align }) => $align}; + + ${({ $rows }) => { + return ( + $rows && + css` + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + line-clamp: ${$rows}; + -webkit-line-clamp: ${$rows}; + -webkit-box-orient: vertical; + ` + ); + }} `; export { Text }; diff --git a/src/component-library/Text/types.ts b/src/component-library/Text/types.ts index 812bcc7def..56f047f723 100644 --- a/src/component-library/Text/types.ts +++ b/src/component-library/Text/types.ts @@ -7,6 +7,7 @@ type Props = { size?: FontSize; align?: NormalAlignments; weight?: FontWeight; + rows?: number; }; type NativeAttrs = Omit, keyof Props>; diff --git a/src/component-library/Text/utils.ts b/src/component-library/Text/utils.ts index ea9034044d..fa16b5d428 100644 --- a/src/component-library/Text/utils.ts +++ b/src/component-library/Text/utils.ts @@ -6,13 +6,15 @@ const mapTextProps = ({ size, align, weight, + rows, ...props -}: T): Omit & StyledTextProps => ({ +}: T): Omit & StyledTextProps => ({ ...props, $color: color, $size: size, $weight: weight, - $align: align + $align: align, + $rows: rows }); export { mapTextProps }; diff --git a/src/component-library/TextLink/TextLink.style.tsx b/src/component-library/TextLink/TextLink.style.tsx index 4fdb3ccce7..e3bdf78580 100644 --- a/src/component-library/TextLink/TextLink.style.tsx +++ b/src/component-library/TextLink/TextLink.style.tsx @@ -1,15 +1,25 @@ import styled from 'styled-components'; -import { Colors } from '../utils/prop-types'; -import { resolveColor } from '../utils/theme'; +import { ArrowTopRightOnSquare } from '@/assets/icons'; + +import { theme } from '../theme'; +import { Colors, FontSize, FontWeight } from '../utils/prop-types'; +import { resolveColor, resolveHeight } from '../utils/theme'; type BaseTextLinkProps = { $color?: Colors; $underlined?: boolean; + $size?: FontSize; + $weight?: FontWeight; }; const BaseTextLink = styled.a` + display: inline-flex; + align-items: center; color: ${({ $color }) => resolveColor($color)}; + font-size: ${({ $size }) => $size && theme.text[$size]}; + line-height: ${({ $size }) => resolveHeight($size)}; + font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]}; text-decoration: ${(props) => props.$underlined && 'underline'}; &:hover, @@ -18,4 +28,11 @@ const BaseTextLink = styled.a` } `; -export { BaseTextLink }; +const StyledIcon = styled(ArrowTopRightOnSquare)` + margin-left: ${theme.spacing.spacing2}; + width: 1em; + height: 1em; + color: inherit; +`; + +export { BaseTextLink, StyledIcon }; diff --git a/src/component-library/TextLink/TextLink.tsx b/src/component-library/TextLink/TextLink.tsx index 25fec25ee1..7bb6cb05ab 100644 --- a/src/component-library/TextLink/TextLink.tsx +++ b/src/component-library/TextLink/TextLink.tsx @@ -1,13 +1,16 @@ import { forwardRef } from 'react'; import { Link, LinkProps } from 'react-router-dom'; -import { Colors } from '../utils/prop-types'; -import { BaseTextLink } from './TextLink.style'; +import { Colors, FontSize, FontWeight } from '../utils/prop-types'; +import { BaseTextLink, StyledIcon } from './TextLink.style'; type Props = { color?: Colors; external?: boolean; underlined?: boolean; + size?: FontSize; + weight?: FontWeight; + icon?: boolean; }; type NativeAttrs = Omit; @@ -16,12 +19,26 @@ type TextLinkProps = Props & NativeAttrs; // TODO: merge this with CTALink const TextLink = forwardRef( - ({ color = 'primary', external, to, underlined, ...props }, ref): JSX.Element => { + ({ color = 'primary', external, to, underlined, size, weight, icon, children, ...props }, ref): JSX.Element => { const linkProps: TextLinkProps = external ? { to: { pathname: to as string }, target: '_blank', rel: 'noreferrer' } : { to }; - return ; + return ( + + {children} + {icon && } + + ); } ); diff --git a/src/component-library/TokenInput/TokenInput.style.tsx b/src/component-library/TokenInput/TokenInput.style.tsx index 3331c5b6d2..5ba46b0c61 100644 --- a/src/component-library/TokenInput/TokenInput.style.tsx +++ b/src/component-library/TokenInput/TokenInput.style.tsx @@ -89,11 +89,11 @@ const StyledListItemLabel = styled(Span)` const StyledList = styled(List)` overflow: auto; - padding: 0 ${theme.modal.body.paddingX} ${theme.modal.body.paddingY} ${theme.modal.body.paddingX}; + padding: 0 ${theme.spacing.spacing4} ${theme.spacing.spacing2} ${theme.spacing.spacing4}; `; const StyledListHeader = styled(Flex)` - padding: ${theme.modal.body.paddingY} ${theme.modal.body.paddingX}; + padding: ${theme.spacing.spacing2} ${theme.spacing.spacing4}; `; const StyledListTokenWrapper = styled(Flex)` diff --git a/src/component-library/Tooltip/Tooltip.tsx b/src/component-library/Tooltip/Tooltip.tsx index 6077f95860..7e83274bb8 100644 --- a/src/component-library/Tooltip/Tooltip.tsx +++ b/src/component-library/Tooltip/Tooltip.tsx @@ -6,14 +6,13 @@ import { AriaTooltipProps, TooltipTriggerProps as StatelyTooltipTriggerProps } f import React, { Children, cloneElement, HTMLAttributes, ReactElement, ReactNode, useRef } from 'react'; import { Span } from '../Text'; -import { theme } from '../theme'; import { Placement } from '../utils/prop-types'; import { StyledTooltip, StyledTooltipLabel, StyledTooltipTip } from './Tooltip.style'; // MEMO: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tooltip/src/TooltipTrigger.tsx#L22 const DEFAULT_OFFSET = -1; const DEFAULT_CROSS_OFFSET = 0; -const DEFAULT_DELAY = Number(theme.transition.default); +const DEFAULT_DELAY = 500; type Props = { label?: ReactNode; diff --git a/src/component-library/index.tsx b/src/component-library/index.tsx index d385b075d1..2a09fe612f 100644 --- a/src/component-library/index.tsx +++ b/src/component-library/index.tsx @@ -32,6 +32,17 @@ export type { ModalBodyProps, ModalDividerProps, ModalFooterProps, ModalHeaderPr export { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from './Modal'; export type { NumberInputProps } from './NumberInput'; export { NumberInput } from './NumberInput'; +export type { + PopoverBodyProps, + PopoverContentProps, + PopoverFooterProps, + PopoverHeaderProps, + PopoverProps, + PopoverTriggerProps +} from './Popover'; +export { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger } from './Popover'; +export type { ProgressBarProps } from './ProgressBar'; +export { ProgressBar } from './ProgressBar'; export type { SelectProps } from './Select'; export { Item, Select } from './Select'; export type { StackProps } from './Stack'; diff --git a/src/component-library/theme/theme.base.css b/src/component-library/theme/theme.base.css index 532086f98e..801f09e550 100644 --- a/src/component-library/theme/theme.base.css +++ b/src/component-library/theme/theme.base.css @@ -98,6 +98,7 @@ --spacing-12: 3rem; --spacing-14: 3.5rem; --spacing-16: 4rem; + --spacing-18: 4.5rem; --spacing-28: 7rem; --rounded-sm: 2px; diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts index c7a21c8791..45f079bb66 100644 --- a/src/component-library/theme/theme.ts +++ b/src/component-library/theme/theme.ts @@ -16,7 +16,10 @@ const theme = { textSecondary: 'var(--colors-text-secondary)', textTertiary: 'var(--colors-text-tertiary)', bgPrimary: 'var(--colors-bg-primary)', - warn: `var(--colors-shared-red)` + warn: `var(--colors-shared-red)`, + error: 'var(--colors-error)', + warning: 'var(--colors-warning)', + success: 'var(--colors-success-darker)' }, font: { primary: 'var(--fonts-primary)' @@ -60,6 +63,7 @@ const theme = { spacing12: 'var(--spacing-12)', spacing14: 'var(--spacing-14)', spacing16: 'var(--spacing-16)', + spacing18: 'var(--spacing-18)', spacing28: 'var(--spacing-28)' }, rounded: { @@ -320,6 +324,9 @@ const theme = { } } }, + progressBar: { + bg: 'var(--colors-border)' + }, spinner: { determinate: { color: 'var(--colors-cta-primary)', @@ -381,8 +388,79 @@ const theme = { width: '5.625rem' } }, + dialog: { + small: { + width: '400px', + header: { + paddingTop: 'var(--spacing-4)', + paddingBottom: 'var(--spacing-2)', + paddingX: 'var(--spacing-4)', + padding: 'var(--spacing-4) var(--spacing-8) var(--spacing-2) var(--spacing-4)' + }, + divider: { + marginX: 'var(--spacing-4)', + marginBottom: 'var(--spacing-1)' + }, + body: { + paddingY: 'var(--spacing-2)', + paddingX: 'var(--spacing-4)' + }, + footer: { + paddingTop: 'var(--spacing-1)', + paddingBottom: 'var(--spacing-4)', + paddingX: 'var(--spacing-4)', + padding: 'var(--spacing-1) var(--spacing-4) var(--spacing-4)' + } + }, + medium: { + width: '32rem', + header: { + paddingY: 'var(--spacing-4)', + paddingX: 'var(--spacing-6)', + padding: 'var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-6)' + }, + divider: { + marginX: 'var(--spacing-6)', + marginBottom: 'var(--spacing-2)' + }, + body: { + paddingY: 'var(--spacing-3)', + paddingX: 'var(--spacing-6)' + }, + footer: { + paddingTop: 'var(--spacing-4)', + paddingBottom: 'var(--spacing-6)', + paddingX: 'var(--spacing-6)', + padding: 'var(--spacing-4) var(--spacing-6) var(--spacing-6)' + } + }, + large: { + width: '32rem', + header: { + paddingY: 'var(--spacing-4)', + paddingX: 'var(--spacing-6)', + padding: 'var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-6)' + }, + divider: { + marginX: 'var(--spacing-6)', + marginBottom: 'var(--spacing-2)' + }, + body: { + paddingY: 'var(--spacing-3)', + paddingX: 'var(--spacing-6)' + }, + footer: { + paddingTop: 'var(--spacing-4)', + paddingBottom: 'var(--spacing-6)', + paddingX: 'var(--spacing-6)', + padding: 'var(--spacing-4) var(--spacing-6) var(--spacing-6)' + } + }, + closeBtn: { + zIndex: 100 + } + }, modal: { - maxWidth: '32rem', maxHeight: 'calc(100vh - var(--spacing-12))', // TODO: z-index needs to be higher zIndex: 2, @@ -394,27 +472,6 @@ const theme = { exiting: 'opacity .1s cubic-bezier(0.5,0,1,1), visibility 0s linear .1s' } }, - header: { - paddingY: 'var(--spacing-4)', - paddingX: 'var(--spacing-6)', - paddingRight: 'var(--spacing-8)' - }, - divider: { - marginX: 'var(--spacing-6)', - marginBottom: 'var(--spacing-2)' - }, - body: { - paddingY: 'var(--spacing-3)', - paddingX: 'var(--spacing-6)' - }, - footer: { - paddingTop: 'var(--spacing-4)', - paddingBottom: 'var(--spacing-6)', - paddingX: 'var(--spacing-6)' - }, - closeBtn: { - zIndex: 100 - }, transition: { entering: 'transform .15s cubic-bezier(0,0,0.4,1) .1s, opacity .15s cubic-bezier(0,0,0.4,1)', exiting: 'opacity .1s cubic-bezier(0.5,0,1,1), visibility 0s linear, transform 0s linear .1s' diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts index ee0db47dc0..2b5d4b629d 100644 --- a/src/component-library/utils/prop-types.ts +++ b/src/component-library/utils/prop-types.ts @@ -12,7 +12,8 @@ export const status = tuple('error', 'warning', 'success'); export const sizes = tuple('small', 'medium', 'large'); -export const colors = tuple('primary', 'secondary', 'tertiary'); +// TODO: add info +export const colors = tuple('primary', 'secondary', 'tertiary', 'success', 'warning', 'error'); export const justifyContent = tuple( 'flex-start', @@ -105,3 +106,5 @@ export type IconSize = keyof typeof theme.icon.sizes; export type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit'; export type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +export type ProgressBarColors = 'default' | 'red'; diff --git a/src/component-library/utils/theme.ts b/src/component-library/utils/theme.ts index d9ff873a53..7f597b8379 100644 --- a/src/component-library/utils/theme.ts +++ b/src/component-library/utils/theme.ts @@ -9,6 +9,12 @@ const resolveColor = (color: Colors | undefined): string => { return theme.colors.textSecondary; case 'tertiary': return theme.colors.textTertiary; + case 'success': + return theme.colors.success; + case 'warning': + return theme.colors.warning; + case 'error': + return theme.colors.error; default: return theme.colors.textPrimary; } diff --git a/src/components/AccountSelect/AccountSelect.style.tsx b/src/components/AccountSelect/AccountSelect.style.tsx index 850c26e0fc..ea962fc8e0 100644 --- a/src/components/AccountSelect/AccountSelect.style.tsx +++ b/src/components/AccountSelect/AccountSelect.style.tsx @@ -49,7 +49,8 @@ const StyledAccountLabelName = styled(StyledAccountLabelAddress)[]; +type ReceivableAssetsProps = { + assetAmounts: MonetaryAmount[]; prices?: Prices; }; -const WithdrawAssets = ({ pooledAmounts, prices }: WithdrawAssetsProps): JSX.Element => { +const ReceivableAssets = ({ assetAmounts: pooledAmounts, prices }: ReceivableAssetsProps): JSX.Element => { const { t } = useTranslation(); return (

- {t('amm.pools.receivable_assets')} + {t('receivable_assets')}

{pooledAmounts.map((amount) => { @@ -50,7 +50,7 @@ const WithdrawAssets = ({ pooledAmounts, prices }: WithdrawAssetsProps): JSX.Ele ); }; -WithdrawAssets.displayName = 'WithdrawAssets'; +ReceivableAssets.displayName = 'ReceivableAssets'; -export { WithdrawAssets }; -export type { WithdrawAssetsProps }; +export { ReceivableAssets }; +export type { ReceivableAssetsProps }; diff --git a/src/components/index.tsx b/src/components/index.tsx index 5149bf3220..83fc0ca6aa 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -12,3 +12,4 @@ export type { LoanPositionsTableProps } from './LoanPositionsTable'; export { LoanPositionsTable } from './LoanPositionsTable'; export type { PoolsTableProps } from './PoolsTable'; export { PoolsTable } from './PoolsTable'; +export { ReceivableAssets } from './ReceivableAssets'; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index a792ef0fbe..fac035a489 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -7,6 +7,7 @@ export type { export { depositLiquidityPoolSchema, WITHDRAW_LIQUIDITY_POOL_FIELD, withdrawLiquidityPoolSchema } from './amm'; export type { LoanFormData, LoanValidationParams } from './loans'; export { loanSchema } from './loans'; +export { StrategySchema } from './strategy'; export type { SwapFormData, SwapValidationParams } from './swap'; export { SWAP_INPUT_AMOUNT_FIELD, diff --git a/src/lib/form/schemas/strategy.ts b/src/lib/form/schemas/strategy.ts new file mode 100644 index 0000000000..66a38c8ce0 --- /dev/null +++ b/src/lib/form/schemas/strategy.ts @@ -0,0 +1,21 @@ +import { StrategyFormType } from '@/pages/Strategies/types/form'; + +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +type StrategyValidationParams = MaxAmountValidationParams & MinAmountValidationParams; + +const StrategySchema = ( + StrategyFormType: StrategyFormType, + params: StrategyValidationParams +): yup.ObjectSchema => { + return yup.object().shape({ + [StrategyFormType]: yup + .string() + .requiredAmount(StrategyFormType) + .maxAmount(params) + .minAmount(params, StrategyFormType) + }); +}; + +export { StrategySchema }; +export type { StrategyValidationParams }; diff --git a/src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx b/src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx index a5d267eb8a..5eb48649f0 100644 --- a/src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx +++ b/src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Tabs, theme } from '@/component-library'; const StyledTabs = styled(Tabs)` - padding: ${theme.spacing.spacing14} ${theme.modal.header.paddingX} ${theme.modal.footer.paddingBottom}; + padding: ${theme.spacing.spacing14} ${theme.dialog.medium.header.paddingX} ${theme.dialog.medium.header.paddingX}; `; const StyledWrapper = styled.div` diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx index 4f2ea60b55..2d74a356af 100644 --- a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -10,7 +10,7 @@ import { newSafeMonetaryAmount } from '@/common/utils/utils'; import { Dd, DlGroup, Dt, Flex, TokenInput } from '@/component-library'; -import { AuthCTA } from '@/components'; +import { AuthCTA, ReceivableAssets } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { isFormDisabled, useForm, WITHDRAW_LIQUIDITY_POOL_FIELD } from '@/lib/form'; import { WithdrawLiquidityPoolFormData, withdrawLiquidityPoolSchema } from '@/lib/form/schemas'; @@ -23,7 +23,6 @@ import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; -import { WithdrawAssets } from './WithdrawAssets'; import { StyledDl } from './WithdrawForm.styles'; type WithdrawFormProps = { @@ -126,7 +125,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) {...form.getFieldProps(WITHDRAW_LIQUIDITY_POOL_FIELD)} /> - +
diff --git a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.style.tsx b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.style.tsx index 44d7d55056..3ed7f426dd 100644 --- a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.style.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.style.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Tabs, theme } from '@/component-library'; const StyledTabs = styled(Tabs)` - padding: ${theme.spacing.spacing14} ${theme.modal.header.paddingX} ${theme.modal.footer.paddingBottom}; + padding: ${theme.spacing.spacing14} ${theme.dialog.medium.header.paddingX} ${theme.dialog.medium.header.paddingX}; `; const StyledWrapper = styled.div` diff --git a/src/pages/Strategies/Strategies.style.tsx b/src/pages/Strategies/Strategies.style.tsx new file mode 100644 index 0000000000..a9bf6f17ea --- /dev/null +++ b/src/pages/Strategies/Strategies.style.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { theme } from '@/component-library'; +const StyledStrategiesLayout = styled.div` + display: grid; + gap: ${theme.spacing.spacing6}; + @media (min-width: 80em) { + grid-template-columns: 1fr 1fr; + } + padding: ${theme.spacing.spacing6}; +`; + +export { StyledStrategiesLayout }; diff --git a/src/pages/Strategies/Strategies.tsx b/src/pages/Strategies/Strategies.tsx new file mode 100644 index 0000000000..88c8b90357 --- /dev/null +++ b/src/pages/Strategies/Strategies.tsx @@ -0,0 +1,21 @@ +import { withErrorBoundary } from 'react-error-boundary'; + +import ErrorFallback from '@/legacy-components/ErrorFallback'; + +import { StrategyForm } from './components/StrategyForm'; +import { StyledStrategiesLayout } from './Strategies.style'; + +const Strategies = (): JSX.Element => { + return ( + + + + ); +}; + +export default withErrorBoundary(Strategies, { + FallbackComponent: ErrorFallback, + onReset: () => { + window.location.reload(); + } +}); diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx new file mode 100644 index 0000000000..ab318185af --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx @@ -0,0 +1,66 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; +import { useTranslation } from 'react-i18next'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { TokenInput } from '@/component-library'; +import { AuthCTA } from '@/components'; +import { TRANSACTION_FEE_AMOUNT, WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; +import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { useTransaction } from '@/utils/hooks/transaction'; + +import { StrategyDepositFormData } from '../../../types/form'; +import { StrategyFormBaseProps } from '../StrategyForm'; +import { StyledStrategyFormContent } from '../StrategyForm.style'; +import { StrategyFormFees } from '../StrategyFormFees'; + +const StrategyDepositForm = ({ riskVariant, hasActiveStrategy }: StrategyFormBaseProps): JSX.Element => { + const { getAvailableBalance } = useGetBalances(); + const prices = useGetPrices(); + const { t } = useTranslation(); + // TODO: add transaction + const transaction = useTransaction(); + + const handleSubmit = (data: StrategyDepositFormData) => { + // TODO: Execute transaction with params + // transaction.execute(); + console.log(`transaction should be executed with parameters: ${data}, ${riskVariant}`); + }; + + const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); + const maxDepositAmount = getAvailableBalance(WRAPPED_TOKEN_SYMBOL) || newMonetaryAmount(0, WRAPPED_TOKEN); + + const form = useForm({ + initialValues: { deposit: '' }, + validationSchema: StrategySchema('deposit', { maxAmount: maxDepositAmount, minAmount }), + onSubmit: handleSubmit + }); + + const inputMonetaryAmount = newSafeMonetaryAmount(form.values['deposit'] || 0, WRAPPED_TOKEN, true); + const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd); + const isSubmitButtonDisabled = isFormDisabled(form); + + return ( +
+ + + + + {hasActiveStrategy ? t('strategy.update_position') : t('deposit')} + + +
+ ); +}; + +export { StrategyDepositForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts new file mode 100644 index 0000000000..3cf5b84bea --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts @@ -0,0 +1 @@ +export { StrategyDepositForm } from './StrategyDepositForm'; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx new file mode 100644 index 0000000000..59c4bd98a5 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx @@ -0,0 +1,34 @@ +import styled from 'styled-components'; + +import { Dl, Flex, theme } from '@/component-library'; + +const StyledStrategyForm = styled(Flex)` + margin-top: ${theme.spacing.spacing8}; + background: ${theme.colors.bgPrimary}; + padding: ${theme.spacing.spacing6}; + border-radius: ${theme.rounded.md}; +`; + +const StyledDl = styled(Dl)` + background-color: ${theme.card.bg.secondary}; + padding: ${theme.spacing.spacing4}; + font-size: ${theme.text.xs}; + border-radius: ${theme.rounded.rg}; +`; + +const StyledStrategyFormContent = styled(Flex)` + margin-top: ${theme.spacing.spacing8}; + flex-direction: column; + gap: ${theme.spacing.spacing8}; +`; + +const StyledSwitchLabel = styled('label')` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + font-weight: ${theme.fontWeight.bold}; +`; + +export { StyledDl, StyledStrategyForm, StyledStrategyFormContent, StyledSwitchLabel }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx new file mode 100644 index 0000000000..4dee2206fa --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx @@ -0,0 +1,61 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; + +import { Tabs, TabsItem } from '@/component-library'; +import { WRAPPED_TOKEN } from '@/config/relay-chains'; + +import { StrategyFormType, StrategyRiskVariant } from '../../types/form'; +import { StrategyDepositForm } from './StrategyDepositForm'; +import { StyledStrategyForm } from './StrategyForm.style'; +import { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; + +interface StrategyFormProps { + riskVariant: StrategyRiskVariant; +} + +interface StrategyFormBaseProps extends StrategyFormProps { + hasActiveStrategy: boolean | undefined; +} + +type TabData = { type: StrategyFormType; title: string }; + +const tabs: Array = [ + { + type: 'deposit', + title: 'Deposit' + }, + { + type: 'withdraw', + title: 'Withdraw' + } +]; + +const StrategyForm = ({ riskVariant }: StrategyFormProps): JSX.Element => { + // TODO: replace with actually withdrawable amount once we know how to get that information, + // for now it's statically set for display purposes + const maxWithdrawableAmount = newMonetaryAmount(1.337, WRAPPED_TOKEN, true); + const hasActiveStrategy = maxWithdrawableAmount && !maxWithdrawableAmount.isZero(); + + return ( + + + {tabs.map(({ type, title }) => ( + + {type === 'deposit' ? ( + + ) : ( + + )} + + ))} + + + ); +}; + +export { StrategyForm }; +export type { StrategyFormBaseProps, StrategyFormProps }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx b/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx new file mode 100644 index 0000000000..13fd333592 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx @@ -0,0 +1,35 @@ +import { GovernanceCurrency } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { useTranslation } from 'react-i18next'; + +import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; +import { Dd, DlGroup, Dt } from '@/component-library'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; + +import { StyledDl } from './StrategyForm.style'; + +interface StrategyFormFeesProps { + amount: MonetaryAmount; +} + +const StrategyFormFees = ({ amount }: StrategyFormFeesProps): JSX.Element => { + const prices = useGetPrices(); + const { t } = useTranslation(); + + return ( + + +
+ {t('fees')} +
+
+ {amount.toHuman()} {amount.currency.ticker} ( + {displayMonetaryAmountInUSDFormat(amount, getTokenPrice(prices, amount.currency.ticker)?.usd)}) +
+ + + ); +}; + +export { StrategyFormFees }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx new file mode 100644 index 0000000000..bcf30df624 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx @@ -0,0 +1,104 @@ +import { CurrencyExt, newMonetaryAmount, WrappedCurrency } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { useTranslation } from 'react-i18next'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Switch, TokenInput } from '@/component-library'; +import { AuthCTA, ReceivableAssets } from '@/components'; +import { + RELAY_CHAIN_NATIVE_TOKEN, + TRANSACTION_FEE_AMOUNT, + WRAPPED_TOKEN, + WRAPPED_TOKEN_SYMBOL +} from '@/config/relay-chains'; +import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { useTransaction } from '@/utils/hooks/transaction'; + +import { StrategyWithdrawalFormData } from '../../../types/form'; +import { StrategyFormBaseProps } from '../StrategyForm'; +import { StyledStrategyFormContent, StyledSwitchLabel } from '../StrategyForm.style'; +import { StrategyFormFees } from '../StrategyFormFees'; + +interface StrategyWithdrawalFormProps extends StrategyFormBaseProps { + maxWithdrawableAmount: MonetaryAmount | undefined; +} + +const calculateReceivableAssets = ( + amountToWithdraw: MonetaryAmount, + withdrawInWrapped: boolean +): Array> => { + if (withdrawInWrapped) { + return [amountToWithdraw]; + } + // TODO: do some magic calculation to get the receivable assets based on input amount here, + // or better move this computation to strategy hook + const mockedReceivableAssets = [ + amountToWithdraw.div(1.2), + newMonetaryAmount(amountToWithdraw.toBig().mul(213.2), RELAY_CHAIN_NATIVE_TOKEN, true) + ]; + + return mockedReceivableAssets; +}; + +const StrategyWithdrawalForm = ({ + riskVariant, + hasActiveStrategy, + maxWithdrawableAmount +}: StrategyWithdrawalFormProps): JSX.Element => { + const { t } = useTranslation(); + const prices = useGetPrices(); + // TODO: add transaction + const transaction = useTransaction(); + + const handleSubmit = (data: StrategyWithdrawalFormData) => { + // TODO: Execute transaction with params + // transaction.execute() + console.log(data, riskVariant); + }; + + const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); + + const form = useForm({ + initialValues: { withdraw: '', withdrawAsWrapped: true }, + validationSchema: StrategySchema('withdraw', { + maxAmount: maxWithdrawableAmount || newMonetaryAmount(0, WRAPPED_TOKEN), + minAmount + }), + onSubmit: handleSubmit + }); + + const inputMonetaryAmount = newSafeMonetaryAmount(form.values['withdraw'] || 0, WRAPPED_TOKEN, true); + const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd); + const receivableAssets = calculateReceivableAssets(inputMonetaryAmount, !!form.values['withdrawAsWrapped']); + const isSubmitButtonDisabled = isFormDisabled(form); + + return ( +
+ + + + {t('strategy.withdraw_rewards_in_wrapped', { wrappedCurrencySymbol: WRAPPED_TOKEN_SYMBOL })}{' '} + + + + + + {hasActiveStrategy ? t('strategy.update_position') : t('withdraw')} + + +
+ ); +}; + +export { StrategyWithdrawalForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts new file mode 100644 index 0000000000..26ff40f62c --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts @@ -0,0 +1 @@ +export { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; diff --git a/src/pages/Strategies/components/StrategyForm/index.ts b/src/pages/Strategies/components/StrategyForm/index.ts new file mode 100644 index 0000000000..2088c63879 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/index.ts @@ -0,0 +1 @@ +export { StrategyForm } from './StrategyForm'; diff --git a/src/pages/Strategies/components/index.ts b/src/pages/Strategies/components/index.ts new file mode 100644 index 0000000000..2088c63879 --- /dev/null +++ b/src/pages/Strategies/components/index.ts @@ -0,0 +1 @@ +export { StrategyForm } from './StrategyForm'; diff --git a/src/pages/Strategies/index.tsx b/src/pages/Strategies/index.tsx new file mode 100644 index 0000000000..617a2532db --- /dev/null +++ b/src/pages/Strategies/index.tsx @@ -0,0 +1,3 @@ +import Strategies from './Strategies'; + +export default Strategies; diff --git a/src/pages/Strategies/types/form.ts b/src/pages/Strategies/types/form.ts new file mode 100644 index 0000000000..c6b5d6bad5 --- /dev/null +++ b/src/pages/Strategies/types/form.ts @@ -0,0 +1,13 @@ +type StrategyFormType = 'deposit' | 'withdraw'; +type StrategyRiskVariant = 'low' | 'high'; + +interface StrategyDepositFormData { + deposit?: string; +} + +interface StrategyWithdrawalFormData { + withdraw?: string; + withdrawAsWrapped?: boolean; +} + +export type { StrategyDepositFormData, StrategyFormType, StrategyRiskVariant, StrategyWithdrawalFormData }; diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx index 54dabf7446..065c5be8e2 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx @@ -70,7 +70,7 @@ const Navigation = ({ const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); - const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES); + const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const NAVIGATION_ITEMS = React.useMemo( () => [ @@ -81,10 +81,10 @@ const Navigation = ({ disabled: !isWalletEnabled }, { - name: 'nav_earn_strategies', - link: PAGES.EARN_STRATEGIES, + name: 'nav_strategies', + link: PAGES.STRATEGIES, icon: BanknotesIcon, - disabled: !isEarnStrategiesEnabled + disabled: !isStrategiesEnabled }, { name: 'nav_bridge', @@ -200,14 +200,7 @@ const Navigation = ({ } } ], - [ - isWalletEnabled, - isEarnStrategiesEnabled, - isLendingEnabled, - isAMMEnabled, - selectedAccount?.address, - vaultClientLoaded - ] + [isWalletEnabled, isStrategiesEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] ); return ( diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index fb189728c4..c6cd038371 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -12,7 +12,7 @@ const URL_PARAMETERS = Object.freeze({ const PAGES = Object.freeze({ HOME: '/', BRIDGE: '/bridge', - EARN_STRATEGIES: '/earn-strategies', + STRATEGIES: '/strategies', TRANSFER: '/transfer', TRANSACTIONS: '/transactions', TX: '/tx', diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 917bd3b3c8..94a1f979f0 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -3,7 +3,7 @@ enum FeatureFlags { AMM = 'amm', WALLET = 'wallet', BANXA = 'banxa', - EARN_STRATEGIES = 'earn-strategies', + STRATEGIES = 'strategies', GEOBLOCK = 'geoblock' } @@ -12,7 +12,7 @@ const featureFlags: Record = { [FeatureFlags.AMM]: process.env.REACT_APP_FEATURE_FLAG_AMM, [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, - [FeatureFlags.EARN_STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, + [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK }; diff --git a/yarn.lock b/yarn.lock index 77273acb3a..f662a8bcb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2156,6 +2156,15 @@ big.js "6.1.1" typescript "^4.3.2" +"@interlay/monetary-js@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@interlay/monetary-js/-/monetary-js-0.7.3.tgz#0bf4c56b15fde2fd0573e6cac185b0703f368133" + integrity sha512-LbCtLRNjl1/LO8R1ay6lJwKgOC/J40YywF+qSuQ7hEjLIkAslY5dLH11heQgQW9hOmqCSS5fTUQWXhmYQr6Ksg== + dependencies: + "@types/big.js" "6.1.2" + big.js "6.1.1" + typescript "^4.3.2" + "@internationalized/date@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.1.tgz#66332e9ca8f59b7be010ca65d946bca430ba4b66" @@ -3488,6 +3497,17 @@ "@swc/helpers" "^0.4.14" clsx "^1.1.1" +"@react-aria/focus@^3.12.1": + version "3.12.1" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.12.1.tgz#5976fa41f36d09a0271f736d7c01414704ea1ca2" + integrity sha512-i1bRz27mRFnrDpYpRvm/6Zm+FbGo0WygNQiLVgTce7WY+39oLERIGRrE8Ovy6rY9Hr4MGBAXz2Q+o9oTOgeBgA== + dependencies: + "@react-aria/interactions" "^3.15.1" + "@react-aria/utils" "^3.17.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + "@react-aria/focus@^3.6.1": version "3.6.1" resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.6.1.tgz#46478d0919bdc4fedfa1ea115b36f93c055ce8d8" @@ -3656,6 +3676,20 @@ "@react-types/shared" "^3.18.0" "@swc/helpers" "^0.4.14" +"@react-aria/i18n@^3.7.2": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.7.2.tgz#7e42943a5e0584dca60c72830175edbae4d9be9f" + integrity sha512-GsVioW8RGOmwebTruEBAmGYJunY0WS7Ljfn5n7Mec3eoMKdQjH2M70fHwCOWqJo8Ufq7A7p0ypBVCv4d4sbSdw== + dependencies: + "@internationalized/date" "^3.2.0" + "@internationalized/message" "^3.1.0" + "@internationalized/number" "^3.2.0" + "@internationalized/string" "^3.1.0" + "@react-aria/ssr" "^3.6.0" + "@react-aria/utils" "^3.17.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + "@react-aria/interactions@^3.10.0": version "3.10.0" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.10.0.tgz#d60cc42c3904c1578f9c356fba4bab7003102dee" @@ -3720,6 +3754,16 @@ "@react-types/shared" "^3.18.0" "@swc/helpers" "^0.4.14" +"@react-aria/interactions@^3.15.1": + version "3.15.1" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.15.1.tgz#10d82fd2ce7a3088713c59cb10b63613c8344052" + integrity sha512-khtpxSvos885rxMep6DRe8RGZjtD16ZuLxhFBtL1dXqSv5XZxaXKOmI8Yx1F8AkVIPdB72MmjG8dz3PpM3PPYg== + dependencies: + "@react-aria/ssr" "^3.6.0" + "@react-aria/utils" "^3.17.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + "@react-aria/interactions@^3.9.1": version "3.9.1" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.9.1.tgz#1860b905d9a0b17ed74dd7fe769370e017cb3015" @@ -3769,6 +3813,16 @@ "@react-types/shared" "^3.18.0" "@swc/helpers" "^0.4.14" +"@react-aria/label@^3.5.2": + version "3.5.2" + resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.5.2.tgz#fa667c04fc19546030e13b49a12dbcd5db323ef1" + integrity sha512-YtLJl3l11TKzGhSMuUqp1DdQ6s3hbT1buiC+jPPKv81PcjjoUDpj+hAVnc1cigtvrEFSMpi2Z+KYREmYYj4GDQ== + dependencies: + "@react-aria/utils" "^3.17.0" + "@react-types/label" "^3.7.4" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + "@react-aria/link@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.4.0.tgz#f3f7c5277ab9fc0b8c55c76503e1fbe764e02ca6" @@ -3889,7 +3943,24 @@ "@react-types/shared" "^3.17.0" "@swc/helpers" "^0.4.14" -"@react-aria/progress@^3.2.1", "@react-aria/progress@^3.3.0": +"@react-aria/overlays@^3.14.0": + version "3.14.1" + resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.14.1.tgz#2e18bd78eef145dc1353490dbe29f04622cfbafe" + integrity sha512-xJCw0oSDtwBCCqf0EMMeeLYOEFSCdd1cWFS0O3980SObFQPHwP5KOX5SAs7lVvIlZUvEdpo6sOytcQTjv5U9QA== + dependencies: + "@react-aria/focus" "^3.12.1" + "@react-aria/i18n" "^3.7.2" + "@react-aria/interactions" "^3.15.1" + "@react-aria/ssr" "^3.6.0" + "@react-aria/utils" "^3.17.0" + "@react-aria/visually-hidden" "^3.8.1" + "@react-stately/overlays" "^3.5.2" + "@react-types/button" "^3.7.3" + "@react-types/overlays" "^3.7.2" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + +"@react-aria/progress@^3.2.1": version "3.3.0" resolved "https://registry.yarnpkg.com/@react-aria/progress/-/progress-3.3.0.tgz#ae2745da40ad84331c05ec33efe0d5f3a9220df5" integrity sha512-VenJJWOErvD12RKoffQomlTc2Zl6snrTT6aoM6APApW/QORUyyI8VW6CTUM68RkoQ0q3qySjsL+7yyrd6sping== @@ -3901,6 +3972,18 @@ "@react-types/progress" "^3.2.2" "@react-types/shared" "^3.14.0" +"@react-aria/progress@^3.4.1": + version "3.4.2" + resolved "https://registry.yarnpkg.com/@react-aria/progress/-/progress-3.4.2.tgz#a4357c718808cacf01e83e162d2e3968dc623629" + integrity sha512-9VQbZGWnzQz8pW7NoOzUNzVkWemTaCfut8KJHcyW/KicoNfNHNuhaBcFvor0pAGIYT4Kdxlv0aG6i3N1xit6aQ== + dependencies: + "@react-aria/i18n" "^3.7.2" + "@react-aria/label" "^3.5.2" + "@react-aria/utils" "^3.17.0" + "@react-types/progress" "^3.4.1" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + "@react-aria/select@^3.9.0": version "3.9.0" resolved "https://registry.yarnpkg.com/@react-aria/select/-/select-3.9.0.tgz#cada84973b2fd16cdc0215f7a5e30ac1b60e1970" @@ -4120,6 +4203,17 @@ "@swc/helpers" "^0.4.14" clsx "^1.1.1" +"@react-aria/utils@^3.17.0": + version "3.17.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.17.0.tgz#b462afad9a25505394a714a69b9f238c24dd15a7" + integrity sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg== + dependencies: + "@react-aria/ssr" "^3.6.0" + "@react-stately/utils" "^3.6.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + "@react-aria/visually-hidden@^3.6.0": version "3.6.0" resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.6.0.tgz#cc4dd9e648a5c8b6d8dfbd1f70d8672b36d3f1bc" @@ -4153,6 +4247,17 @@ "@swc/helpers" "^0.4.14" clsx "^1.1.1" +"@react-aria/visually-hidden@^3.8.1": + version "3.8.1" + resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.8.1.tgz#f035d3461671ae6f3af534e615df009ca9c08c4a" + integrity sha512-aojoZXw5iaFDOgqmGuCyaTG9PFqfav5ABXX/W/0Q2YNj6Tb3i6++m2+8RMHlz2b6Dj+rXLiTxa00t7BSgJbUvA== + dependencies: + "@react-aria/interactions" "^3.15.1" + "@react-aria/utils" "^3.17.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + "@react-stately/collections@^3.4.1": version "3.4.1" resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.4.1.tgz#12fb2244243d3b6deec6b5e4f59b8979f745efda" @@ -4275,6 +4380,15 @@ "@react-types/overlays" "^3.7.0" "@swc/helpers" "^0.4.14" +"@react-stately/overlays@^3.5.1", "@react-stately/overlays@^3.5.2": + version "3.5.2" + resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.5.2.tgz#b084789fa2e3bcf30348fe09e848acccf01957c9" + integrity sha512-NEwkF/ukXzI/Ku+6j6MhhqdMc5xMgDnuR6RwFPsoPq6UoHw9/ojifxg/sDj5e1gPoegNZ2nM8G6VmnPUGabg/g== + dependencies: + "@react-stately/utils" "^3.6.0" + "@react-types/overlays" "^3.7.2" + "@swc/helpers" "^0.4.14" + "@react-stately/select@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-stately/select/-/select-3.4.0.tgz#e6df572279b5baed264552032f8060dbf49c9ebb" @@ -4446,6 +4560,13 @@ dependencies: "@react-types/shared" "^3.17.0" +"@react-types/button@^3.7.3": + version "3.7.3" + resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.7.3.tgz#00ad45ff0a304a6f6ef29a5d6adda73cea10942f" + integrity sha512-Fz1t/kYinHDunmct3tADD2h3UDBPZUfRE+zCzYiymz0g+v/zYHTAqnkWToTF9ptf8HIB5L2Z2VFYpeUHFfpWzg== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/checkbox@^3.3.2": version "3.3.2" resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.3.2.tgz#513442cb2e73a4d8c8ad14021c424612e98e7cd7" @@ -4496,6 +4617,13 @@ dependencies: "@react-types/shared" "^3.16.0" +"@react-types/label@^3.7.4": + version "3.7.4" + resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.7.4.tgz#db7ce5cc82785b11ed4c80308b2ec40768fec6e0" + integrity sha512-SfTqPRI39GE3GFD5ZGYEeX9jXQrNqDeaaI36PJhnbgGVFz96oVVkhy9t9c2bMHcbhLLENYIHMzxrvVqXS07e7A== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/link@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-types/link/-/link-3.4.0.tgz#1c549ffbc594e49726a4c4e912bea36718feb4cf" @@ -4548,6 +4676,13 @@ dependencies: "@react-types/shared" "^3.18.0" +"@react-types/overlays@^3.7.2": + version "3.7.2" + resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.7.2.tgz#40881c6c6e05330e0ea8960646ca2371378b95c0" + integrity sha512-I/mm/xjJVJX2VC4UwNwzhsgVKh8eTHjE2NT6Ek70t/AMR/AT8i3m+eLYb4LEoRFFuZ0ctoJDLKkSCAP7nTkT0A== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/progress@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@react-types/progress/-/progress-3.2.2.tgz#17fd42b0241eba5a21ab4128c654f8d0e0738138" @@ -4555,6 +4690,13 @@ dependencies: "@react-types/shared" "^3.14.0" +"@react-types/progress@^3.4.1": + version "3.4.1" + resolved "https://registry.yarnpkg.com/@react-types/progress/-/progress-3.4.1.tgz#3b45df4780b70573c27b316d557ce71b546e32bf" + integrity sha512-Y6cTvvJjbfFBeB7Zb3PizhhO3+YLWXpIP8opto15RWu11ktgZVMUgsnlsJgE3dFeoZ7UHwXdCYf8JOzBw5VPHA== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/select@^3.7.0": version "3.7.0" resolved "https://registry.yarnpkg.com/@react-types/select/-/select-3.7.0.tgz#7d1840525d345625ac6ad69005b192930ca5abec" @@ -4597,6 +4739,11 @@ resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.18.0.tgz#4f2bacad5912eba6667695ee3f9e8ac9f79849f7" integrity sha512-WJj7RAPj7NLdR/VzFObgvCju9NMDktWSruSPJ3DrL5qyrrvJoyMW67L4YjNoVp2b7Y+k10E0q4fSMV0PlJoL0w== +"@react-types/shared@^3.18.1": + version "3.18.1" + resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.18.1.tgz#45bac7a1a433916d16535ea583d86a2b4c72ff8c" + integrity sha512-OpTYRFS607Ctfd6Tmhyk6t6cbFyDhO5K+etU35X50pMzpypo1b7vF0mkngEeTc0Xwl0e749ONZNPZskMyu5k8w== + "@react-types/switch@^3.2.4": version "3.2.4" resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.2.4.tgz#6853793032da50415be1abbac1374fca08ea5e44" From 381028ef0ee2fa5a6e8e48af0e63e292986d01c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20Slan=C3=BD?= <47864599+peterslany@users.noreply.github.com> Date: Thu, 1 Jun 2023 12:27:06 +0200 Subject: [PATCH 14/58] hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR --- src/components/LoanApyTooltip/BreakdownGroup.tsx | 2 +- .../LoansOverview/components/LoanActionInfo/RewardsGroup.tsx | 2 +- src/utils/helpers/loans.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/LoanApyTooltip/BreakdownGroup.tsx b/src/components/LoanApyTooltip/BreakdownGroup.tsx index ebfbd86e95..be97f0249f 100644 --- a/src/components/LoanApyTooltip/BreakdownGroup.tsx +++ b/src/components/LoanApyTooltip/BreakdownGroup.tsx @@ -29,7 +29,7 @@ const BreakdownGroup = ({ apy, rewardsApy, ticker, rewardsTicker, isBorrow }: Br {!!rewardsApy && ( -
Rewards APY {rewardsTicker}:
+
Rewards APR {rewardsTicker}:
{getApyLabel(rewardsApy)}
 )} diff --git a/src/pages/Loans/LoansOverview/components/LoanActionInfo/RewardsGroup.tsx b/src/pages/Loans/LoansOverview/components/LoanActionInfo/RewardsGroup.tsx index 29164ddbc2..6dd8c5372b 100644 --- a/src/pages/Loans/LoansOverview/components/LoanActionInfo/RewardsGroup.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanActionInfo/RewardsGroup.tsx @@ -26,7 +26,7 @@ const RewardsGroup = ({ isBorrow, apy, assetCurrency, rewards, prices }: Rewards return ( <> -
Rewards APY {rewards.currency.ticker}
+
Rewards APR {rewards.currency.ticker}
{getApyLabel(subsidyRewardApy)}
 diff --git a/src/utils/helpers/loans.ts b/src/utils/helpers/loans.ts index c7241abb5e..a731bfaed5 100644 --- a/src/utils/helpers/loans.ts +++ b/src/utils/helpers/loans.ts @@ -41,7 +41,7 @@ const getSubsidyRewardApy = ( } const exchangeRate = rewardCurrencyPriceUSD / positionCurrencyPriceUSD; - const apy = reward.toBig().mul(exchangeRate); + const apy = reward.toBig().mul(exchangeRate).mul(100); return apy; }; From 30a6aff92b6eed7e1f294cd61c087f95776b9225 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 15 Jun 2023 13:48:08 +0100 Subject: [PATCH 15/58] [release] Kintsugi 2.33.0 (#1280) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * fix: merge error --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru --- package.json | 6 +- src/App.tsx | 3 +- src/assets/icons/CheckCircle.tsx | 25 ++ src/assets/icons/ListBullet.tsx | 25 ++ src/assets/icons/XCircle.tsx | 25 ++ src/assets/icons/index.ts | 3 + src/assets/locales/en/translation.json | 76 ++++ src/common/actions/general.actions.ts | 20 +- src/common/reducers/general.reducer.ts | 29 +- src/common/types/actions.types.ts | 21 +- src/common/types/util.types.ts | 22 ++ .../TokenInput/TokenInput.tsx | 2 +- .../LoanApyTooltip/LoanApyTooltip.tsx | 9 +- src/components/LoanPositionsTable/ApyCell.tsx | 6 +- .../LoanPositionsTable/LoanPositionsTable.tsx | 8 +- .../NotificationsList.tsx | 35 ++ .../NotificationsListItem.tsx | 42 ++ .../NotificationsPopover.styles.tsx | 18 + .../NotificationsPopover.tsx | 55 +++ src/components/NotificationsPopover/index.tsx | 2 + .../ToastContainer/ToastContainer.styles.tsx | 36 ++ .../ToastContainer/ToastContainer.tsx | 5 + src/components/ToastContainer/index.tsx | 2 + .../TransactionModal.style.tsx | 21 + .../TransactionModal/TransactionModal.tsx | 112 ++++++ src/components/TransactionModal/index.tsx | 1 + .../TransactionToast.styles.tsx | 13 + .../TransactionToast/TransactionToast.tsx | 132 +++++++ src/components/TransactionToast/index.tsx | 2 + src/components/index.tsx | 6 + src/index.tsx | 9 +- src/legacy-components/ErrorModal/index.tsx | 34 -- .../ConfirmedIssueRequest/index.tsx | 33 -- .../ManualIssueExecutionUI/index.tsx | 16 +- src/legacy-components/IssueUI/index.tsx | 5 +- .../RedeemUI/ReimburseStatusUI/index.tsx | 70 ++-- src/legacy-components/RedeemUI/index.tsx | 5 +- .../index.tsx | 3 +- .../components/DepositForm/DepositForm.tsx | 24 +- .../Pools/components/PoolModal/PoolModal.tsx | 9 +- .../PoolsInsights/PoolsInsights.tsx | 8 +- .../components/WithdrawForm/WithdrawForm.tsx | 21 +- .../AMM/Swap/components/SwapForm/SwapCTA.tsx | 8 +- .../AMM/Swap/components/SwapForm/SwapForm.tsx | 30 +- src/pages/Bridge/BurnForm/index.tsx | 51 +-- .../SubmittedIssueRequestModal/index.tsx | 42 +- src/pages/Bridge/IssueForm/index.tsx | 80 ++-- .../SubmittedRedeemRequestModal/index.tsx | 16 +- src/pages/Bridge/RedeemForm/index.tsx | 18 +- .../BorrowAssetsTable/BorrowAssetsTable.tsx | 6 +- .../CollateralModal/CollateralModal.tsx | 49 +-- .../LendAssetsTable/LendAssetsTable.tsx | 6 +- .../components/LoanForm/LoanForm.tsx | 58 ++- .../LoansInsights/LoansInsights.tsx | 18 +- .../Staking/ClaimRewardsButton/index.tsx | 29 +- src/pages/Staking/WithdrawButton/index.tsx | 39 +- src/pages/Staking/index.tsx | 12 - .../IssueRequestModal/index.tsx | 23 +- .../RedeemRequestModal/index.tsx | 23 +- .../CrossChainTransferForm.tsx | 62 +-- src/pages/Transfer/TransferForm/index.tsx | 53 +-- .../Vaults/Vault/RequestIssueModal/index.tsx | 68 ++-- .../Vaults/Vault/RequestRedeemModal/index.tsx | 26 +- .../Vault/RequestReplacementModal/index.tsx | 23 +- .../Vault/UpdateCollateralModal/index.tsx | 23 +- .../CollateralForm/CollateralForm.styles.tsx | 44 --- .../CollateralForm/CollateralForm.tsx | 312 --------------- .../Vault/components/CollateralForm/index.tsx | 2 - .../Vault/components/Rewards/Rewards.tsx | 11 - src/pages/Vaults/Vault/components/index.tsx | 4 +- .../DespositCollateralStep.tsx | 12 +- .../AvailableAssetsTable/ActionsCell.tsx | 22 +- src/parts/Topbar/index.tsx | 6 +- src/utils/constants/links.ts | 21 +- src/utils/context/Notifications.tsx | 141 +++++++ .../use-get-account-lending-statistics.tsx | 1 + src/utils/hooks/api/use-get-vesting-data.tsx | 2 +- .../transaction/extrinsics/extrinsics.ts | 46 +++ .../hooks/transaction/extrinsics/index.ts | 1 + .../{utils/extrinsic.ts => extrinsics/lib.ts} | 44 +-- src/utils/hooks/transaction/extrinsics/xcm.ts | 27 ++ src/utils/hooks/transaction/types/index.ts | 29 +- src/utils/hooks/transaction/types/vesting.ts | 13 + src/utils/hooks/transaction/types/xcm.ts | 21 + .../use-transaction-notifications.tsx | 107 ++++++ .../hooks/transaction/use-transaction.ts | 95 +++-- .../hooks/transaction/utils/description.ts | 363 ++++++++++++++++++ src/utils/hooks/transaction/utils/submit.ts | 37 +- src/utils/hooks/use-copy-tooltip.tsx | 1 + src/utils/hooks/use-countdown.ts | 67 ++++ src/utils/hooks/use-sign-message.ts | 1 + .../hooks/use-update-query-parameters.ts | 2 +- src/utils/hooks/use-window-focus.ts | 26 ++ yarn.lock | 86 ++++- 94 files changed, 2063 insertions(+), 1243 deletions(-) create mode 100644 src/assets/icons/CheckCircle.tsx create mode 100644 src/assets/icons/ListBullet.tsx create mode 100644 src/assets/icons/XCircle.tsx create mode 100644 src/components/NotificationsPopover/NotificationsList.tsx create mode 100644 src/components/NotificationsPopover/NotificationsListItem.tsx create mode 100644 src/components/NotificationsPopover/NotificationsPopover.styles.tsx create mode 100644 src/components/NotificationsPopover/NotificationsPopover.tsx create mode 100644 src/components/NotificationsPopover/index.tsx create mode 100644 src/components/ToastContainer/ToastContainer.styles.tsx create mode 100644 src/components/ToastContainer/ToastContainer.tsx create mode 100644 src/components/ToastContainer/index.tsx create mode 100644 src/components/TransactionModal/TransactionModal.style.tsx create mode 100644 src/components/TransactionModal/TransactionModal.tsx create mode 100644 src/components/TransactionModal/index.tsx create mode 100644 src/components/TransactionToast/TransactionToast.styles.tsx create mode 100644 src/components/TransactionToast/TransactionToast.tsx create mode 100644 src/components/TransactionToast/index.tsx delete mode 100644 src/legacy-components/ErrorModal/index.tsx delete mode 100644 src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.styles.tsx delete mode 100644 src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.tsx delete mode 100644 src/pages/Vaults/Vault/components/CollateralForm/index.tsx create mode 100644 src/utils/context/Notifications.tsx create mode 100644 src/utils/hooks/transaction/extrinsics/extrinsics.ts create mode 100644 src/utils/hooks/transaction/extrinsics/index.ts rename src/utils/hooks/transaction/{utils/extrinsic.ts => extrinsics/lib.ts} (70%) create mode 100644 src/utils/hooks/transaction/extrinsics/xcm.ts create mode 100644 src/utils/hooks/transaction/types/vesting.ts create mode 100644 src/utils/hooks/transaction/types/xcm.ts create mode 100644 src/utils/hooks/transaction/use-transaction-notifications.tsx create mode 100644 src/utils/hooks/transaction/utils/description.ts create mode 100644 src/utils/hooks/use-countdown.ts create mode 100644 src/utils/hooks/use-window-focus.ts diff --git a/package.json b/package.json index 581d654255..80b15375cc 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "interbtc-ui", - "version": "2.32.6", + "version": "2.33.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", "@interlay/bridge": "^0.3.11", - "@interlay/interbtc-api": "2.2.4", + "@interlay/interbtc-api": "2.3.1", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", @@ -69,7 +69,7 @@ "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "react-table": "^7.6.3", - "react-toastify": "^6.0.5", + "react-toastify": "^9.1.2", "react-transition-group": "^4.4.5", "react-use": "^17.2.3", "redux": "^4.0.5", diff --git a/src/App.tsx b/src/App.tsx index a94a8a4eb2..1722f65d75 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,3 @@ -import 'react-toastify/dist/ReactToastify.css'; import './i18n'; import { FaucetClient, SecurityStatusCode } from '@interlay/interbtc-api'; @@ -21,6 +20,7 @@ import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query import { BitcoinNetwork } from '@/types/bitcoin'; import { PAGES } from '@/utils/constants/links'; +import { TransactionModal } from './components/TransactionModal'; import * as constants from './constants'; import TestnetBanner from './legacy-components/TestnetBanner'; import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; @@ -234,6 +234,7 @@ const App = (): JSX.Element => { )} /> + ); }; diff --git a/src/assets/icons/CheckCircle.tsx b/src/assets/icons/CheckCircle.tsx new file mode 100644 index 0000000000..2bcca13aed --- /dev/null +++ b/src/assets/icons/CheckCircle.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const CheckCircle = forwardRef((props, ref) => ( + + + +)); + +CheckCircle.displayName = 'CheckCircle'; + +export { CheckCircle }; diff --git a/src/assets/icons/ListBullet.tsx b/src/assets/icons/ListBullet.tsx new file mode 100644 index 0000000000..21eb5ba490 --- /dev/null +++ b/src/assets/icons/ListBullet.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ListBullet = forwardRef((props, ref) => ( + + + +)); + +ListBullet.displayName = 'ListBullet'; + +export { ListBullet }; diff --git a/src/assets/icons/XCircle.tsx b/src/assets/icons/XCircle.tsx new file mode 100644 index 0000000000..c1b84d58cd --- /dev/null +++ b/src/assets/icons/XCircle.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const XCircle = forwardRef((props, ref) => ( + + + +)); + +XCircle.displayName = 'XCircle'; + +export { XCircle }; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index bf537097cc..2508fb9299 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -2,11 +2,14 @@ export { ArrowRight } from './ArrowRight'; export { ArrowRightCircle } from './ArrowRightCircle'; export { ArrowsUpDown } from './ArrowsUpDown'; export { ArrowTopRightOnSquare } from './ArrowTopRightOnSquare'; +export { CheckCircle } from './CheckCircle'; export { ChevronDown } from './ChevronDown'; export { Cog } from './Cog'; export { DocumentDuplicate } from './DocumentDuplicate'; export { InformationCircle } from './InformationCircle'; +export { ListBullet } from './ListBullet'; export { PencilSquare } from './PencilSquare'; export { PlusCircle } from './PlusCircle'; export { Warning } from './Warning'; +export { XCircle } from './XCircle'; export { XMark } from './XMark'; diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 9e03c16050..e6cd47edf2 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -156,6 +156,7 @@ "staked": "Staked", "sign_t&cs": "Sign T&Cs", "receivable_assets": "Receivable Assets", + "dismiss": "Dismiss", "redeem_page": { "maximum_in_single_request": "Max redeemable in single request", "redeem": "Redeem", @@ -636,5 +637,80 @@ "strategy": { "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:", "update_position": "Update position" + }, + "transaction": { + "recent_transactions": "Recent transactions", + "no_recent_transactions": "No recent transactions", + "confirm_transaction_wallet": "Confirm this transaction in your wallet", + "confirm_transaction": "Confirm transaction", + "transaction_processing": "Transaction processing", + "transaction_failed": "Transaction failed", + "transaction_successful": "Transaction successful", + "swapping_to": "Swapping {{fromAmount}} {{fromCurrency}} to {{toAmount}} {{toCurrency}}", + "swapped_to": "Swapped {{fromAmount}} {{fromCurrency}} to {{toAmount}} {{toCurrency}}", + "adding_liquidity_to_pool": "Adding liquidity to {{poolName}} Pool", + "added_liquidity_to_pool": "Added liquidity to {{poolName}} Pool", + "removing_liquidity_from_pool": "Removing liquidity from {{poolName}} Pool", + "removed_liquidity_from_pool": "Removed liquidity from {{poolName}} Pool", + "claiming_pool_rewards": "Claiming pools rewards", + "claimed_pool_rewards": "Claimed pools rewards", + "issuing_amount": "Issuing {{amount}} {{currency}}", + "issued_amount": "Issuing {{amount}} {{currency}}", + "redeeming_amount": "Redeeming {{amount}} {{currency}}", + "redeemed_amount": "Redeemed {{amount}} {{currency}}", + "burning_amount": "Burning {{amount}} {{currency}}", + "burned_amount": "Burned {{amount}} {{currency}}", + "retrying_redeem_id": "Retrying redeem {{resquestId}}", + "retried_redeem_id": "Retried redeem {{resquestId}}", + "reimbursing_redeem_id": "Reimbursing redeem {{resquestId}}", + "reimbersed_redeem_id": "Reimbursed redeem {{resquestId}}", + "executing_issue": "Executing issue", + "executed_issue": "Executed issue", + "transfering_amount_to_address": "Transfering {{amount}} {{currency}} to {{address}}", + "transfered_amount_to_address": "Transfered {{amount}} {{currency}} to {{address}}", + "transfering_amount_from_chain_to_chain": "Transfering {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", + "transfered_amount_from_chain_to_chain": "Transfered {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", + "claiming_lending_rewards": "Claiming lending rewards", + "claimed_lending_rewards": "Claimed lending rewards", + "borrowing_amount": "Borrowing {{amount}} {{currency}}", + "borrowed_amount": "Borrowed {{amount}} {{currency}}", + "lending_amount": "Lending {{amount}} {{currency}}", + "lent_amount": "Lent {{amount}} {{currency}}", + "repaying_amount": "Repaying {{amount}} {{currency}}", + "repaid_amount": "Repaid {{amount}} {{currency}}", + "repaying": "Repaying {{currency}}", + "repaid": "Repaid {{currency}}", + "withdrawing_amount": "Withdrawing {{amount}} {{currency}}", + "withdrew_amount": "Withdrew {{amount}} {{currency}}", + "withdrawing": "Withdrawing {{currency}}", + "withdrew": "Withdrew {{currency}}", + "disabling_loan_as_collateral": "Disabling {{currency}} as collateral", + "disabled_loan_as_collateral": "Disabled {{currency}} as collateral", + "enabling_loan_as_collateral": "Enabling {{currency}} as collateral", + "enabled_loan_as_collateral": "Enabled {{currency}} as collateral", + "creating_currency_vault": "Creating {{currency}} vault", + "created_currency_vault": "Created {{currency}} vault", + "depositing_amount_to_vault": "Depositing {{amount}} {{currency}} to vault", + "deposited_amount_to_vault": "Deposited {{amount}} {{currency}} to vault", + "withdrawing_amount_from_vault": "Withdrawing {{amount}} {{currency}} from vault", + "withdrew_amount_from_vault": "Withdrew {{amount}} {{currency}} from vault", + "claiming_vault_rewards": "Claiming vault rewards", + "claimed_vault_rewards": "Claimed vault rewards", + "staking_amount": "Staking {{amount}} {{currency}}", + "staked_amount": "Staking {{amount}} {{currency}}", + "adding_amount_to_staked_amount": "Adding {{amount}} {{currency}} to staked amount", + "added_amount_to_staked_amount": "Added {{amount}} {{currency}} to staked amount", + "increasing_stake_lock_time": "Increasing stake lock time", + "increased_stake_lock_time": "Increased stake lock time", + "withdrawing_stake": "Withdrawing stake", + "withdrew_stake": "Withdrew stake", + "claiming_staking_rewards": "Claiming staking rewards", + "claimed_staking_rewards": "Claimed staking rewards", + "increasing_stake_locked_time_amount": "Increasing stake locked time and amount", + "increased_stake_locked_time_amount": "Increased stake locked time and amount", + "requesting_vault_replacement": "Requesting vault replacement", + "requested_vault_replacement": "Requested vault replacement", + "claiming_vesting": "Claiming vesting", + "claimed_vesting": "Claimed vesting" } } diff --git a/src/common/actions/general.actions.ts b/src/common/actions/general.actions.ts index 8bfaa85c76..880e1da1ce 100644 --- a/src/common/actions/general.actions.ts +++ b/src/common/actions/general.actions.ts @@ -4,6 +4,8 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains'; import { + ADD_NOTIFICATION, + AddNotification, INIT_GENERAL_DATA_ACTION, InitGeneralDataAction, IS_BRIDGE_LOADED, @@ -20,10 +22,12 @@ import { ShowSignTermsModal, UPDATE_HEIGHTS, UPDATE_TOTALS, + UPDATE_TRANSACTION_MODAL_STATUS, UpdateHeights, - UpdateTotals + UpdateTotals, + UpdateTransactionModal } from '../types/actions.types'; -import { ParachainStatus } from '../types/util.types'; +import { Notification, ParachainStatus, TransactionModalData } from '../types/util.types'; export const isBridgeLoaded = (isLoaded = false): IsBridgeLoaded => ({ type: IS_BRIDGE_LOADED, @@ -86,3 +90,15 @@ export const updateTotalsAction = ( totalLockedCollateralTokenAmount, totalWrappedTokenAmount }); + +export const addNotification = (accountAddress: string, notification: Notification): AddNotification => ({ + type: ADD_NOTIFICATION, + accountAddress, + notification +}); + +export const updateTransactionModal = (isOpen: boolean, data: TransactionModalData): UpdateTransactionModal => ({ + type: UPDATE_TRANSACTION_MODAL_STATUS, + isOpen, + data +}); diff --git a/src/common/reducers/general.reducer.ts b/src/common/reducers/general.reducer.ts index cc89bc33e7..23093c810a 100644 --- a/src/common/reducers/general.reducer.ts +++ b/src/common/reducers/general.reducer.ts @@ -2,8 +2,10 @@ import { newMonetaryAmount } from '@interlay/interbtc-api'; import { BitcoinAmount } from '@interlay/monetary-js'; import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; import { + ADD_NOTIFICATION, GeneralActions, INIT_GENERAL_DATA_ACTION, IS_BRIDGE_LOADED, @@ -12,7 +14,8 @@ import { SHOW_BUY_MODAL, SHOW_SIGN_TERMS_MODAL, UPDATE_HEIGHTS, - UPDATE_TOTALS + UPDATE_TOTALS, + UPDATE_TRANSACTION_MODAL_STATUS } from '../types/actions.types'; import { GeneralState, ParachainStatus } from '../types/util.types'; @@ -33,6 +36,11 @@ const initialState = { relayChainNativeToken: { usd: 0 }, governanceToken: { usd: 0 }, wrappedToken: { usd: 0 } + }, + notifications: {}, + transactionModal: { + isOpen: false, + data: { variant: TransactionStatus.CONFIRM } } }; @@ -65,6 +73,25 @@ export const generalReducer = (state: GeneralState = initialState, action: Gener return { ...state, isBuyModalOpen: action.isBuyModalOpen }; case SHOW_SIGN_TERMS_MODAL: return { ...state, isSignTermsModalOpen: action.isSignTermsModalOpen }; + case ADD_NOTIFICATION: { + const newAccountNotifications = [...(state.notifications[action.accountAddress] || []), action.notification]; + + return { + ...state, + notifications: { + ...state.notifications, + [action.accountAddress]: newAccountNotifications + } + }; + } + case UPDATE_TRANSACTION_MODAL_STATUS: + return { + ...state, + transactionModal: { + ...state.transactionModal, + ...action + } + }; default: return state; } diff --git a/src/common/types/actions.types.ts b/src/common/types/actions.types.ts index 4ebf3cb5df..f4744b03ac 100644 --- a/src/common/types/actions.types.ts +++ b/src/common/types/actions.types.ts @@ -3,7 +3,7 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains'; -import { ParachainStatus, StoreType } from './util.types'; +import { Notification, ParachainStatus, StoreType, TransactionModalData } from './util.types'; // GENERAL ACTIONS export const IS_BRIDGE_LOADED = 'IS_BRIDGE_LOADED'; @@ -20,6 +20,9 @@ export const SHOW_SIGN_TERMS_MODAL = 'SHOW_SIGN_TERMS_MODAL'; export const UPDATE_HEIGHTS = 'UPDATE_HEIGHTS'; export const UPDATE_TOTALS = 'UPDATE_TOTALS'; export const SHOW_BUY_MODAL = 'SHOW_BUY_MODAL'; +export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'; +export const SHOW_TRANSACTION_MODAL = 'SHOW_TRANSACTION_MODAL'; +export const UPDATE_TRANSACTION_MODAL_STATUS = 'UPDATE_TRANSACTION_MODAL_STATUS'; export interface UpdateTotals { type: typeof UPDATE_TOTALS; @@ -98,6 +101,18 @@ export interface ShowBuyModal { isBuyModalOpen: boolean; } +export interface AddNotification { + type: typeof ADD_NOTIFICATION; + accountAddress: string; + notification: Notification; +} + +export interface UpdateTransactionModal { + type: typeof UPDATE_TRANSACTION_MODAL_STATUS; + isOpen: boolean; + data: TransactionModalData; +} + export type GeneralActions = | IsBridgeLoaded | InitGeneralDataAction @@ -110,7 +125,9 @@ export type GeneralActions = | UpdateHeights | UpdateTotals | ShowBuyModal - | ShowSignTermsModal; + | ShowSignTermsModal + | AddNotification + | UpdateTransactionModal; // REDEEM export const ADD_VAULT_REDEEMS = 'ADD_VAULT_REDEEMS'; diff --git a/src/common/types/util.types.ts b/src/common/types/util.types.ts index b49a70f30b..922531dad0 100644 --- a/src/common/types/util.types.ts +++ b/src/common/types/util.types.ts @@ -3,6 +3,8 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; import { u256 } from '@polkadot/types/primitive'; import { CombinedState, Store } from 'redux'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; + import { rootReducer } from '../reducers/index'; import { GeneralActions, RedeemActions, VaultActions } from './actions.types'; import { RedeemState } from './redeem.types'; @@ -45,6 +47,21 @@ export enum ParachainStatus { Shutdown } +export type Notification = { + status: TransactionStatus; + description: string; + date: Date; + url?: string; +}; + +export type TransactionModalData = { + variant: TransactionStatus; + timestamp?: number; + description?: string; + url?: string; + errorMessage?: string; +}; + export type GeneralState = { bridgeLoaded: boolean; vaultClientLoaded: boolean; @@ -56,6 +73,11 @@ export type GeneralState = { btcRelayHeight: number; bitcoinHeight: number; parachainStatus: ParachainStatus; + notifications: Record; + transactionModal: { + isOpen: boolean; + data: TransactionModalData; + }; }; export type AppState = ReturnType; diff --git a/src/component-library/TokenInput/TokenInput.tsx b/src/component-library/TokenInput/TokenInput.tsx index ebf89b542f..109f6148ad 100644 --- a/src/component-library/TokenInput/TokenInput.tsx +++ b/src/component-library/TokenInput/TokenInput.tsx @@ -63,7 +63,7 @@ const TokenInput = forwardRef( const itemsArr = Array.from(selectProps?.items || []); const isSelectAdornment = itemsArr.length > 1; - const adornmentTicker = !isSelectAdornment && selectProps?.items ? itemsArr[0]?.value : ticker; + const adornmentTicker = !isSelectAdornment && selectProps?.items ? itemsArr[0]?.value : tickerProp; useEffect(() => { if (selectProps?.value === undefined) return; diff --git a/src/components/LoanApyTooltip/LoanApyTooltip.tsx b/src/components/LoanApyTooltip/LoanApyTooltip.tsx index 37a2dbc5d2..f6cb684837 100644 --- a/src/components/LoanApyTooltip/LoanApyTooltip.tsx +++ b/src/components/LoanApyTooltip/LoanApyTooltip.tsx @@ -4,12 +4,12 @@ import { TooltipProps } from '@reach/tooltip'; import Big from 'big.js'; import { Dd, Dl, DlGroup } from '@/component-library'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { Prices } from '@/utils/hooks/api/use-get-prices'; import { AssetGroup } from './AssetGroup'; import { BreakdownGroup } from './BreakdownGroup'; import { StyledApyTooltipTitle, StyledTooltip } from './LoanApyTooltip.style'; -import { RewardsGroup } from './RewardsGroup'; type Props = { apy: Big; @@ -17,7 +17,6 @@ type Props = { earnedInterest?: MonetaryAmount; accumulatedDebt?: MonetaryAmount; rewardsApy?: Big; - rewards: MonetaryAmount | null; prices: Prices; isBorrow: boolean; }; @@ -32,12 +31,11 @@ const LoanApyTooltip = ({ earnedInterest, accumulatedDebt, rewardsApy, - rewards, prices, isBorrow, ...props }: LoanApyTooltipProps): JSX.Element => { - const showEarnedRewards = !!rewards || !!earnedInterest; + const showEarnedRewards = !!earnedInterest; const label = (
@@ -45,7 +43,7 @@ const LoanApyTooltip = ({ apy={apy} isBorrow={isBorrow} rewardsApy={rewardsApy} - rewardsTicker={rewards?.currency.ticker} + rewardsTicker={GOVERNANCE_TOKEN.ticker} ticker={currency.ticker} /> {accumulatedDebt && ( @@ -64,7 +62,6 @@ const LoanApyTooltip = ({
{earnedInterest && } - {!!rewards && }
diff --git a/src/components/LoanPositionsTable/ApyCell.tsx b/src/components/LoanPositionsTable/ApyCell.tsx index 1860138278..97cba39349 100644 --- a/src/components/LoanPositionsTable/ApyCell.tsx +++ b/src/components/LoanPositionsTable/ApyCell.tsx @@ -15,7 +15,6 @@ type ApyCellProps = { earnedInterest?: MonetaryAmount; accumulatedDebt?: MonetaryAmount; rewardsPerYear: MonetaryAmount | null; - accruedRewards: MonetaryAmount | null; prices?: Prices; isBorrow?: boolean; onClick?: () => void; @@ -25,7 +24,6 @@ const ApyCell = ({ apy, currency, rewardsPerYear, - accruedRewards, accumulatedDebt, earnedInterest, prices, @@ -35,7 +33,8 @@ const ApyCell = ({ const rewardsApy = getSubsidyRewardApy(currency, rewardsPerYear, prices); const totalApy = isBorrow ? apy.sub(rewardsApy || 0) : apy.add(rewardsApy || 0); - const totalApyLabel = isBorrow ? `-${getApyLabel(totalApy)}` : getApyLabel(totalApy); + + const totalApyLabel = getApyLabel(totalApy); const earnedAsset = accumulatedDebt || earnedInterest; @@ -54,7 +53,6 @@ const ApyCell = ({ apy={apy} currency={currency} prices={prices} - rewards={accruedRewards} rewardsApy={rewardsApy} isBorrow={isBorrow} accumulatedDebt={accumulatedDebt} diff --git a/src/components/LoanPositionsTable/LoanPositionsTable.tsx b/src/components/LoanPositionsTable/LoanPositionsTable.tsx index ac3ad99d26..ed56422a75 100644 --- a/src/components/LoanPositionsTable/LoanPositionsTable.tsx +++ b/src/components/LoanPositionsTable/LoanPositionsTable.tsx @@ -7,7 +7,6 @@ import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils'; import { Switch } from '@/component-library'; import { LoanType } from '@/types/loans'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { AssetCell, BalanceCell, Table, TableProps } from '../DataGrid'; @@ -53,7 +52,6 @@ const LoanPositionsTable = ({ const titleId = useId(); const { t } = useTranslation(); const prices = useGetPrices(); - const { data: subsidyRewards } = useGetAccountSubsidyRewards(); const isLending = variant === 'lend'; const showCollateral = !!onPressCollateralSwitch && isLending; @@ -91,13 +89,11 @@ const LoanPositionsTable = ({ const apyCellProps = isLending ? { apy: lendApy, - rewardsPerYear: lendReward, - accruedRewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null + rewardsPerYear: lendReward } : { apy: borrowApy, rewardsPerYear: borrowReward, - accruedRewards: subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null, accumulatedDebt: (position as BorrowPosition).accumulatedDebt, isBorrow: true }; @@ -140,7 +136,7 @@ const LoanPositionsTable = ({ collateral }; }), - [assets, isLending, onPressCollateralSwitch, onRowAction, positions, prices, showCollateral, subsidyRewards] + [assets, isLending, onPressCollateralSwitch, onRowAction, positions, prices, showCollateral] ); return ( diff --git a/src/components/NotificationsPopover/NotificationsList.tsx b/src/components/NotificationsPopover/NotificationsList.tsx new file mode 100644 index 0000000000..a84dc4091e --- /dev/null +++ b/src/components/NotificationsPopover/NotificationsList.tsx @@ -0,0 +1,35 @@ +import { useTranslation } from 'react-i18next'; + +import { Notification } from '@/common/types/util.types'; +import { Flex, P } from '@/component-library'; + +import { NotificationListItem } from './NotificationsListItem'; + +type NotificationsListProps = { + items: Notification[]; +}; + +const NotificationsList = ({ items }: NotificationsListProps): JSX.Element => { + const { t } = useTranslation(); + + if (!items.length) { + return ( +

+ {t('transaction.no_recent_transactions')} +

+ ); + } + + const latestTransactions = items.slice(-5).sort((a, b) => b.date.getTime() - a.date.getTime()); + + return ( + + {latestTransactions.map((item, index) => ( + + ))} + + ); +}; + +export { NotificationsList }; +export type { NotificationsListProps }; diff --git a/src/components/NotificationsPopover/NotificationsListItem.tsx b/src/components/NotificationsPopover/NotificationsListItem.tsx new file mode 100644 index 0000000000..7c29cdfce8 --- /dev/null +++ b/src/components/NotificationsPopover/NotificationsListItem.tsx @@ -0,0 +1,42 @@ +import { useButton } from '@react-aria/button'; +import { formatDistanceToNowStrict } from 'date-fns'; +import { useRef } from 'react'; + +import { CheckCircle, XCircle } from '@/assets/icons'; +import { Notification } from '@/common/types/util.types'; +import { Flex, P } from '@/component-library'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; + +import { StyledListItem } from './NotificationsPopover.styles'; + +type NotificationListItemProps = Notification; + +const NotificationListItem = ({ date, description, status, url }: NotificationListItemProps): JSX.Element => { + const ref = useRef(null); + + const ariaLabel = url ? 'navigate to transaction subscan page' : undefined; + + const handlePress = () => window.open(url, '_blank', 'noopener'); + + const { buttonProps } = useButton( + { 'aria-label': ariaLabel, isDisabled: !url, elementType: 'div', onPress: handlePress }, + ref + ); + + return ( + + + + {status === TransactionStatus.SUCCESS ? : } +

{description}

+ +

+ {formatDistanceToNowStrict(date)} ago +

+ + + ); +}; + +export { NotificationListItem }; +export type { NotificationListItemProps }; diff --git a/src/components/NotificationsPopover/NotificationsPopover.styles.tsx b/src/components/NotificationsPopover/NotificationsPopover.styles.tsx new file mode 100644 index 0000000000..828c137438 --- /dev/null +++ b/src/components/NotificationsPopover/NotificationsPopover.styles.tsx @@ -0,0 +1,18 @@ +import styled from 'styled-components'; + +import { CTA, theme } from '@/component-library'; + +const StyledListItem = styled.div` + padding: ${theme.spacing.spacing3} ${theme.spacing.spacing2}; + + &:not(:last-of-type) { + border-bottom: ${theme.border.default}; + } +`; + +const StyledCTA = styled(CTA)` + padding: ${theme.spacing.spacing3}; + border: ${theme.border.default}; +`; + +export { StyledCTA, StyledListItem }; diff --git a/src/components/NotificationsPopover/NotificationsPopover.tsx b/src/components/NotificationsPopover/NotificationsPopover.tsx new file mode 100644 index 0000000000..334298a192 --- /dev/null +++ b/src/components/NotificationsPopover/NotificationsPopover.tsx @@ -0,0 +1,55 @@ +import { useTranslation } from 'react-i18next'; + +import { ListBullet } from '@/assets/icons'; +import { Notification } from '@/common/types/util.types'; +import { + Popover, + PopoverBody, + PopoverContent, + PopoverFooter, + PopoverHeader, + PopoverTrigger, + TextLink +} from '@/component-library'; +import { EXTERNAL_PAGES, EXTERNAL_URL_PARAMETERS } from '@/utils/constants/links'; + +import { NotificationsList } from './NotificationsList'; +import { StyledCTA } from './NotificationsPopover.styles'; + +type NotificationsPopoverProps = { + address?: string; + items: Notification[]; +}; + +const NotificationsPopover = ({ address, items }: NotificationsPopoverProps): JSX.Element => { + const { t } = useTranslation(); + + const accountTransactionsUrl = + address && EXTERNAL_PAGES.SUBSCAN.ACCOUNT.replace(`:${EXTERNAL_URL_PARAMETERS.SUBSCAN.ACCOUNT.ADDRESS}`, address); + + return ( + + + + + + + + {t('transaction.recent_transactions')} + + + + {accountTransactionsUrl && ( + + + View all transactions + + + )} + + + ); +}; + +export { NotificationsPopover }; +export type { NotificationsPopoverProps }; diff --git a/src/components/NotificationsPopover/index.tsx b/src/components/NotificationsPopover/index.tsx new file mode 100644 index 0000000000..9d68f4a5e0 --- /dev/null +++ b/src/components/NotificationsPopover/index.tsx @@ -0,0 +1,2 @@ +export type { NotificationsPopoverProps } from './NotificationsPopover'; +export { NotificationsPopover } from './NotificationsPopover'; diff --git a/src/components/ToastContainer/ToastContainer.styles.tsx b/src/components/ToastContainer/ToastContainer.styles.tsx new file mode 100644 index 0000000000..0de455dab2 --- /dev/null +++ b/src/components/ToastContainer/ToastContainer.styles.tsx @@ -0,0 +1,36 @@ +import 'react-toastify/dist/ReactToastify.css'; + +import { ToastContainer } from 'react-toastify'; +import styled from 'styled-components'; + +import { theme } from '@/component-library'; + +// &&& is used to override css styles +const StyledToastContainer = styled(ToastContainer)` + &&&.Toastify__toast-container { + color: ${theme.colors.textPrimary}; + padding: 0 ${theme.spacing.spacing4}; + } + + @media ${theme.breakpoints.up('sm')} { + &&&.Toastify__toast-container { + padding: 0; + } + } + + .Toastify__toast { + margin-bottom: 1rem; + padding: 0; + border-radius: 12px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + font-family: inherit; + background: ${theme.colors.bgPrimary}; + border: ${theme.border.default}; + } + + .Toastify__toast-body { + padding: 0; + } +`; + +export { StyledToastContainer }; diff --git a/src/components/ToastContainer/ToastContainer.tsx b/src/components/ToastContainer/ToastContainer.tsx new file mode 100644 index 0000000000..8119b67efd --- /dev/null +++ b/src/components/ToastContainer/ToastContainer.tsx @@ -0,0 +1,5 @@ +import { ToastContainerProps } from 'react-toastify'; + +import { StyledToastContainer } from './ToastContainer.styles'; +export { StyledToastContainer as ToastContainer }; +export type { ToastContainerProps }; diff --git a/src/components/ToastContainer/index.tsx b/src/components/ToastContainer/index.tsx new file mode 100644 index 0000000000..31f30105c2 --- /dev/null +++ b/src/components/ToastContainer/index.tsx @@ -0,0 +1,2 @@ +export type { ToastContainerProps } from './ToastContainer'; +export { ToastContainer } from './ToastContainer'; diff --git a/src/components/TransactionModal/TransactionModal.style.tsx b/src/components/TransactionModal/TransactionModal.style.tsx new file mode 100644 index 0000000000..7819fa032b --- /dev/null +++ b/src/components/TransactionModal/TransactionModal.style.tsx @@ -0,0 +1,21 @@ +import styled from 'styled-components'; + +import { CheckCircle, XCircle } from '@/assets/icons'; +import { Card, theme } from '@/component-library'; + +const StyledXCircle = styled(XCircle)` + width: 4rem; + height: 4rem; +`; + +const StyledCheckCircle = styled(CheckCircle)` + width: 4rem; + height: 4rem; +`; + +const StyledCard = styled(Card)` + border-radius: ${theme.rounded.rg}; + padding: ${theme.spacing.spacing4}; +`; + +export { StyledCard, StyledCheckCircle, StyledXCircle }; diff --git a/src/components/TransactionModal/TransactionModal.tsx b/src/components/TransactionModal/TransactionModal.tsx new file mode 100644 index 0000000000..6ab35ada22 --- /dev/null +++ b/src/components/TransactionModal/TransactionModal.tsx @@ -0,0 +1,112 @@ +import { TFunction } from 'i18next'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { updateTransactionModal } from '@/common/actions/general.actions'; +import { StoreType } from '@/common/types/util.types'; +import { + CTA, + Flex, + H4, + H5, + LoadingSpinner, + Modal, + ModalBody, + ModalFooter, + ModalHeader, + P, + TextLink +} from '@/component-library'; +import { NotificationToast, useNotifications } from '@/utils/context/Notifications'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; + +import { StyledCard, StyledCheckCircle, StyledXCircle } from './TransactionModal.style'; + +const loadingSpinner = ; + +const getData = (t: TFunction, variant: TransactionStatus) => + ({ + [TransactionStatus.CONFIRM]: { + title: t('transaction.confirm_transaction'), + subtitle: t('transaction.confirm_transaction_wallet'), + icon: loadingSpinner + }, + [TransactionStatus.SUBMITTING]: { + title: t('transaction.transaction_processing'), + icon: loadingSpinner + }, + [TransactionStatus.ERROR]: { + title: t('transaction.transaction_failed'), + icon: + }, + [TransactionStatus.SUCCESS]: { + title: t('transaction.transaction_successful'), + icon: + } + }[variant]); + +const TransactionModal = (): JSX.Element => { + const { t } = useTranslation(); + + const notifications = useNotifications(); + + const { isOpen, data } = useSelector((state: StoreType) => state.general.transactionModal); + const { variant, description, url, timestamp, errorMessage } = data; + const dispatch = useDispatch(); + + const { title, subtitle, icon } = getData(t, variant); + + const hasDismiss = variant !== TransactionStatus.CONFIRM; + + const handleClose = () => { + // Only show toast if the current transaction variant is CONFIRM or SUBMITTING. + // No need to show toast if the transaction is SUCCESS or ERROR + if (timestamp && (variant === TransactionStatus.CONFIRM || variant === TransactionStatus.SUBMITTING)) { + notifications.show(timestamp, { + type: NotificationToast.TRANSACTION, + props: { variant: variant, url, description } + }); + } + + dispatch(updateTransactionModal(false, data)); + }; + + return ( + + {title} + + {icon} + + {subtitle && ( +

+ {subtitle} +

+ )} + {description && ( +

+ {description} +

+ )} + {errorMessage && ( + +
+ Message: +
+

+ {errorMessage} +

+ + )} + {url && ( + + View transaction on Subscan + + )} + + + {hasDismiss && {t('dismiss')}} + + ); +}; + +export { TransactionModal }; diff --git a/src/components/TransactionModal/index.tsx b/src/components/TransactionModal/index.tsx new file mode 100644 index 0000000000..db2576f068 --- /dev/null +++ b/src/components/TransactionModal/index.tsx @@ -0,0 +1 @@ +export { TransactionModal } from './TransactionModal'; diff --git a/src/components/TransactionToast/TransactionToast.styles.tsx b/src/components/TransactionToast/TransactionToast.styles.tsx new file mode 100644 index 0000000000..11a85da6e7 --- /dev/null +++ b/src/components/TransactionToast/TransactionToast.styles.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { Flex, ProgressBar, theme } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + padding: ${theme.spacing.spacing4}; +`; + +const StyledProgressBar = styled(ProgressBar)` + margin-top: ${theme.spacing.spacing4}; +`; + +export { StyledProgressBar, StyledWrapper }; diff --git a/src/components/TransactionToast/TransactionToast.tsx b/src/components/TransactionToast/TransactionToast.tsx new file mode 100644 index 0000000000..fc413baba1 --- /dev/null +++ b/src/components/TransactionToast/TransactionToast.tsx @@ -0,0 +1,132 @@ +import { useHover } from '@react-aria/interactions'; +import { mergeProps } from '@react-aria/utils'; +import { TFunction } from 'i18next'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; + +import { CheckCircle, XCircle } from '@/assets/icons'; +import { updateTransactionModal } from '@/common/actions/general.actions'; +import { CTA, CTALink, Divider, Flex, FlexProps, LoadingSpinner, P } from '@/component-library'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; +import { useCountdown } from '@/utils/hooks/use-countdown'; + +import { StyledProgressBar, StyledWrapper } from './TransactionToast.styles'; + +const loadingSpinner = ; + +const getData = (t: TFunction, variant: TransactionStatus) => + ({ + [TransactionStatus.CONFIRM]: { + title: t('transaction.confirm_transaction'), + icon: loadingSpinner + }, + [TransactionStatus.SUBMITTING]: { + title: t('transaction.transaction_processing'), + icon: loadingSpinner + }, + [TransactionStatus.SUCCESS]: { + title: t('transaction.transaction_successful'), + icon: + }, + [TransactionStatus.ERROR]: { + title: t('transaction.transaction_failed'), + icon: + } + }[variant]); + +type Props = { + variant?: TransactionStatus; + description?: string; + url?: string; + errorMessage?: string; + timeout?: number; + onDismiss?: () => void; +}; + +type InheritAttrs = Omit; + +type TransactionToastProps = Props & InheritAttrs; + +const TransactionToast = ({ + variant = TransactionStatus.SUCCESS, + timeout = 8000, + url, + description, + onDismiss, + errorMessage, + ...props +}: TransactionToastProps): JSX.Element => { + const { t } = useTranslation(); + const dispatch = useDispatch(); + + const showCountdown = variant === TransactionStatus.SUCCESS || variant === TransactionStatus.ERROR; + + const { value: countdown, start, stop } = useCountdown({ + timeout, + disabled: !showCountdown, + onEndCountdown: onDismiss + }); + + const { hoverProps } = useHover({ + onHoverStart: stop, + onHoverEnd: start, + isDisabled: !showCountdown + }); + + const handleViewDetails = () => { + dispatch(updateTransactionModal(true, { variant: TransactionStatus.ERROR, description, errorMessage })); + onDismiss?.(); + }; + + const { title, icon } = getData(t, variant); + + return ( + + + + {icon} + + +

+ {title} +

+ {description && ( +

+ {description} +

+ )} + + + {showCountdown && ( + + )} + + {(url || errorMessage) && ( + <> + {url && ( + + View Subscan + + )} + {errorMessage && !url && ( + + View Details + + )} + + + )} + + Dismiss + + + + ); +}; + +export { TransactionToast }; +export type { TransactionToastProps }; diff --git a/src/components/TransactionToast/index.tsx b/src/components/TransactionToast/index.tsx new file mode 100644 index 0000000000..36ce2db462 --- /dev/null +++ b/src/components/TransactionToast/index.tsx @@ -0,0 +1,2 @@ +export type { TransactionToastProps } from './TransactionToast'; +export { TransactionToast } from './TransactionToast'; diff --git a/src/components/index.tsx b/src/components/index.tsx index 83fc0ca6aa..bb20578fa9 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -10,6 +10,12 @@ export type { IsAuthenticatedProps } from './IsAuthenticated'; export { IsAuthenticated } from './IsAuthenticated'; export type { LoanPositionsTableProps } from './LoanPositionsTable'; export { LoanPositionsTable } from './LoanPositionsTable'; +export type { NotificationsPopoverProps } from './NotificationsPopover'; +export { NotificationsPopover } from './NotificationsPopover'; export type { PoolsTableProps } from './PoolsTable'; export { PoolsTable } from './PoolsTable'; export { ReceivableAssets } from './ReceivableAssets'; +export type { ToastContainerProps } from './ToastContainer'; +export { ToastContainer } from './ToastContainer'; +export type { TransactionToastProps } from './TransactionToast'; +export { TransactionToast } from './TransactionToast'; diff --git a/src/index.tsx b/src/index.tsx index 4901f7d9a1..327b7658e6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,6 +21,7 @@ import App from './App'; import { GeoblockingWrapper } from './components/Geoblock/Geoblock'; import reportWebVitals from './reportWebVitals'; import { store } from './store'; +import { NotificationsProvider } from './utils/context/Notifications'; configGlobalBig(); @@ -40,9 +41,11 @@ ReactDOM.render( - - - + + + + + diff --git a/src/legacy-components/ErrorModal/index.tsx b/src/legacy-components/ErrorModal/index.tsx deleted file mode 100644 index 8dc60f3f6e..0000000000 --- a/src/legacy-components/ErrorModal/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import clsx from 'clsx'; -import * as React from 'react'; - -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; -import InterlayModal, { - InterlayModalInnerWrapper, - InterlayModalTitle, - Props as ModalProps -} from '@/legacy-components/UI/InterlayModal'; - -interface CustomProps { - title: string; - description: string; -} - -const ErrorModal = ({ open, onClose, title, description }: Props): JSX.Element => { - const focusRef = React.useRef(null); - - return ( - - - - {title} - - -

{description}

- - - ); -}; - -export type Props = Omit & CustomProps; - -export default ErrorModal; diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx index e76d52fe2d..3472455342 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx @@ -1,22 +1,14 @@ import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import { FaCheckCircle } from 'react-icons/fa'; -import { useQueryClient } from 'react-query'; -import { toast } from 'react-toastify'; import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; -import ErrorModal from '@/legacy-components/ErrorModal'; import ExternalLink from '@/legacy-components/ExternalLink'; import RequestWrapper from '@/pages/Bridge/RequestWrapper'; -import { ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; -import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; -import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useQueryParams from '@/utils/hooks/use-query-params'; import ManualIssueExecutionUI from '../ManualIssueExecutionUI'; @@ -28,21 +20,6 @@ interface Props { const ConfirmedIssueRequest = ({ request }: Props): JSX.Element => { const { t } = useTranslation(); - const queryParams = useQueryParams(); - const selectedPage = Number(queryParams.get(QUERY_PARAMETERS.PAGE)) || 1; - const selectedPageIndex = selectedPage - 1; - - const queryClient = useQueryClient(); - - // TODO: check if this transaction is necessary - const transaction = useTransaction(Transaction.ISSUE_EXECUTE, { - onSuccess: (_, variables) => { - const [requestId] = variables.args; - queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); - toast.success(t('issue_page.successfully_executed', { id: requestId })); - } - }); - return ( <> @@ -75,16 +52,6 @@ const ConfirmedIssueRequest = ({ request }: Props): JSX.Element => {

- {transaction.isError && transaction.error && ( - { - transaction.reset(); - }} - title='Error' - description={typeof transaction.error === 'string' ? transaction.error : transaction.error.message} - /> - )} ); }; diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx index c93aa9aae2..a111faff63 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx @@ -8,12 +8,10 @@ import { import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import { useQuery, useQueryClient } from 'react-query'; -import { toast } from 'react-toastify'; import { displayMonetaryAmount } from '@/common/utils/utils'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import InterlayDenimOrKintsugiMidnightOutlinedButton from '@/legacy-components/buttons/InterlayDenimOrKintsugiMidnightOutlinedButton'; -import ErrorModal from '@/legacy-components/ErrorModal'; import { useSubstrateSecureState } from '@/lib/substrate'; import { ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; @@ -57,10 +55,8 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { const queryClient = useQueryClient(); const transaction = useTransaction(Transaction.ISSUE_EXECUTE, { - onSuccess: (_, variables) => { - const [requestId] = variables.args; + onSuccess: () => { queryClient.invalidateQueries([ISSUES_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT]); - toast.success(t('issue_page.successfully_executed', { id: requestId })); } }); @@ -139,16 +135,6 @@ const ManualIssueExecutionUI = ({ request }: Props): JSX.Element => { wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL })} - {transaction.isError && transaction.error && ( - { - transaction.reset(); - }} - title='Error' - description={typeof transaction.error === 'string' ? transaction.error : transaction.error.message} - /> - )} ); }; diff --git a/src/legacy-components/IssueUI/index.tsx b/src/legacy-components/IssueUI/index.tsx index 2158916386..4edd9b6878 100644 --- a/src/legacy-components/IssueUI/index.tsx +++ b/src/legacy-components/IssueUI/index.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; +import { Flex } from '@/component-library'; import { WRAPPED_TOKEN_SYMBOL, WrappedTokenAmount } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; @@ -52,7 +53,7 @@ const IssueUI = ({ issue }: Props): JSX.Element => { const sentBackingTokenAmount = receivedWrappedTokenAmount.add(bridgeFee); return ( -
+
{/* TODO: could componentize */} @@ -184,7 +185,7 @@ const IssueUI = ({ issue }: Props): JSX.Element => {

<>{renderModalStatusPanel(issue)} -
+ ); }; diff --git a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx index 2e2cc3b19e..541f4ef875 100644 --- a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx +++ b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx @@ -1,14 +1,12 @@ import { newMonetaryAmount } from '@interlay/interbtc-api'; -import { ISubmittableResult } from '@polkadot/types/types'; import Big from 'big.js'; import clsx from 'clsx'; import * as React from 'react'; import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import { FaExclamationCircle } from 'react-icons/fa'; -import { useMutation, useQueryClient } from 'react-query'; +import { useQueryClient } from 'react-query'; import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; @@ -22,10 +20,10 @@ import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import { REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; interface Props { redeem: any; // TODO: should type properly (`Relay`) @@ -45,6 +43,20 @@ const ReimburseStatusUI = ({ redeem, onClose }: Props): JSX.Element => { ); const { t } = useTranslation(); const handleError = useErrorHandler(); + const queryClient = useQueryClient(); + + const [cancelType, setCancelType] = React.useState<'reimburse' | 'retry'>(); + + const transaction = useTransaction(Transaction.REDEEM_CANCEL, { + onSuccess: () => { + queryClient.invalidateQueries([REDEEMS_FETCHER]); + setCancelType(undefined); + onClose(); + }, + onError: () => { + setCancelType(undefined); + } + }); React.useEffect(() => { if (!bridgeLoaded) return; @@ -67,48 +79,13 @@ const ReimburseStatusUI = ({ redeem, onClose }: Props): JSX.Element => { })(); }, [redeem, bridgeLoaded, handleError]); - const queryClient = useQueryClient(); - // TODO: should type properly (`Relay`) - const retryMutation = useMutation( - (variables: any) => { - return submitExtrinsic(window.bridge.redeem.cancel(variables.id, false)); - }, - { - onSuccess: () => { - queryClient.invalidateQueries([REDEEMS_FETCHER]); - toast.success(t('redeem_page.successfully_cancelled_redeem')); - onClose(); - }, - onError: (error) => { - console.log('[useMutation] error => ', error); - toast.error(t('redeem_page.error_cancelling_redeem')); - } - } - ); - // TODO: should type properly (`Relay`) - const reimburseMutation = useMutation( - (variables: any) => { - return submitExtrinsic(window.bridge.redeem.cancel(variables.id, true)); - }, - { - onSuccess: () => { - queryClient.invalidateQueries([REDEEMS_FETCHER]); - toast.success(t('redeem_page.successfully_cancelled_redeem')); - onClose(); - }, - onError: (error) => { - console.log('[useMutation] error => ', error); - toast.error(t('redeem_page.error_cancelling_redeem')); - } - } - ); - const handleRetry = () => { if (!bridgeLoaded) { throw new Error('Bridge is not loaded!'); } - retryMutation.mutate(redeem); + setCancelType('retry'); + transaction.execute(redeem.id, false); }; const handleReimburse = () => { @@ -116,7 +93,8 @@ const ReimburseStatusUI = ({ redeem, onClose }: Props): JSX.Element => { throw new Error('Bridge is not loaded!'); } - reimburseMutation.mutate(redeem); + setCancelType('reimburse'); + transaction.execute(redeem.id, true); }; const isOwner = selectedAccount?.address === redeem.userParachainAddress; @@ -198,8 +176,8 @@ const ReimburseStatusUI = ({ redeem, onClose }: Props): JSX.Element => {

{t('retry')} @@ -239,8 +217,8 @@ const ReimburseStatusUI = ({ redeem, onClose }: Props): JSX.Element => {

{t('redeem_page.reimburse')} diff --git a/src/legacy-components/RedeemUI/index.tsx b/src/legacy-components/RedeemUI/index.tsx index 34820878c5..229f1f3619 100644 --- a/src/legacy-components/RedeemUI/index.tsx +++ b/src/legacy-components/RedeemUI/index.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'; import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; +import { Flex } from '@/component-library'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; @@ -43,7 +44,7 @@ const RedeemUI = ({ redeem, onClose }: Props): JSX.Element => { }; return ( -
+

@@ -160,7 +161,7 @@ const RedeemUI = ({ redeem, onClose }: Props): JSX.Element => {

<>{renderModalStatusPanel(redeem)} -
+ ); }; diff --git a/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx b/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx index 1c378b87cf..0e6a048b99 100644 --- a/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx +++ b/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx @@ -1,5 +1,5 @@ import { useDispatch } from 'react-redux'; -import { toast, ToastContainer } from 'react-toastify'; +import { toast } from 'react-toastify'; import { isBridgeLoaded } from '@/common/actions/general.actions'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; @@ -66,7 +66,6 @@ const SubstrateLoadingAndErrorHandlingWrapper = ({ return ( <> - {children} ); diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx index 4baf947a1b..6b7387aeee 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; import { ChangeEventHandler, RefObject, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; import { displayMonetaryAmountInUSDFormat, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Alert, Dd, DlGroup, Dt, Flex, TokenInput } from '@/component-library'; @@ -35,10 +34,11 @@ const isCustomAmountsMode = (form: ReturnType) => type DepositFormProps = { pool: LiquidityPool; slippageModalRef: RefObject; - onDeposit?: () => void; + onSuccess?: () => void; + onSigning?: () => void; }; -const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): JSX.Element => { +const DepositForm = ({ pool, slippageModalRef, onSuccess, onSigning }: DepositFormProps): JSX.Element => { const { pooledCurrencies } = pool; const defaultValues = pooledCurrencies.reduce((acc, amount) => ({ ...acc, [amount.currency.ticker]: '' }), {}); @@ -52,13 +52,8 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J const governanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); const transaction = useTransaction(Transaction.AMM_ADD_LIQUIDITY, { - onSuccess: () => { - onDeposit?.(); - toast.success('Deposit successful'); - }, - onError: (error) => { - toast.error(error.message); - } + onSuccess, + onSigning }); const handleSubmit = async (data: DepositLiquidityPoolFormData) => { @@ -72,8 +67,8 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); return transaction.execute(amounts, pool, slippage, deadline, accountId); - } catch (err: any) { - toast.error(err.toString()); + } catch (error: any) { + transaction.reject(error); } }; @@ -91,8 +86,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J const form = useForm({ initialValues: defaultValues, validationSchema: depositLiquidityPoolSchema({ transactionFee: TRANSACTION_FEE_AMOUNT, governanceBalance, tokens }), - onSubmit: handleSubmit, - disableValidation: transaction.isLoading + onSubmit: handleSubmit }); const handleChange: ChangeEventHandler = (e) => { @@ -189,7 +183,7 @@ const DepositForm = ({ pool, slippageModalRef, onDeposit }: DepositFormProps): J - + {t('amm.pools.add_liquidity')} diff --git a/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx b/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx index 2e1086a25b..b768873cff 100644 --- a/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx +++ b/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx @@ -26,11 +26,6 @@ const PoolModal = ({ pool, onClose, ...props }: PoolModalProps): JSX.Element | n return null; } - const handleAction = () => { - refetch(); - onClose?.(); - }; - return ( - + - + diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx index 1689c20a32..961db4e3c0 100644 --- a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx +++ b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx @@ -1,7 +1,6 @@ import { LiquidityPool } from '@interlay/interbtc-api'; import Big from 'big.js'; import { useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; import { formatUSD } from '@/common/utils/utils'; import { Card, Dl, DlGroup } from '@/component-library'; @@ -49,13 +48,8 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) const totalClaimableRewardUSD = calculateClaimableFarmingRewardUSD(accountPoolsData?.claimableRewards, prices); - const handleSuccess = () => { - toast.success(t('successfully_claimed_rewards')); - refetch(); - }; - const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, { - onSuccess: handleSuccess + onSuccess: refetch }); const handleClickClaimRewards = () => accountPoolsData && transaction.execute(accountPoolsData.claimableRewards); diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx index 2d74a356af..10d7f0fa85 100644 --- a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -2,7 +2,6 @@ import { LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; import Big from 'big.js'; import { RefObject, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; import { convertMonetaryAmountToValueInUSD, @@ -28,10 +27,11 @@ import { StyledDl } from './WithdrawForm.styles'; type WithdrawFormProps = { pool: LiquidityPool; slippageModalRef: RefObject; - onWithdraw?: () => void; + onSuccess?: () => void; + onSigning?: () => void; }; -const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps): JSX.Element => { +const WithdrawForm = ({ pool, slippageModalRef, onSuccess, onSigning }: WithdrawFormProps): JSX.Element => { const [slippage, setSlippage] = useState(0.1); const accountId = useAccountId(); @@ -40,13 +40,8 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) const { getBalance } = useGetBalances(); const transaction = useTransaction(Transaction.AMM_REMOVE_LIQUIDITY, { - onSuccess: () => { - onWithdraw?.(); - toast.success('Withdraw successful'); - }, - onError: (err) => { - toast.error(err.message); - } + onSuccess, + onSigning }); const { lpToken } = pool; @@ -70,8 +65,8 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); return transaction.execute(amount, pool, slippage, deadline, accountId); - } catch (err: any) { - toast.error(err.toString()); + } catch (error: any) { + transaction.reject(error); } }; @@ -141,7 +136,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onWithdraw }: WithdrawFormProps) - + {t('amm.pools.remove_liquidity')} diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx index 3ef5503393..a817c120ff 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx @@ -45,8 +45,7 @@ const getProps = ( } return { - children: t('amm.swap'), - disabled: false + children: t('amm.swap') }; }; @@ -54,15 +53,14 @@ type SwapCTAProps = { pair: SwapPair; trade: Trade | null | undefined; errors: FormErrors; - loading: boolean; }; -const SwapCTA = ({ pair, trade, errors, loading }: SwapCTAProps): JSX.Element | null => { +const SwapCTA = ({ pair, trade, errors }: SwapCTAProps): JSX.Element | null => { const { t } = useTranslation(); const otherProps = getProps(pair, trade, errors, t); - return ; + return ; }; export { SwapCTA }; diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx index a4d60bbcf6..eeccf0d580 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx @@ -4,7 +4,6 @@ import Big from 'big.js'; import { ChangeEventHandler, Key, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { useDebounce } from 'react-use'; import { StoreType } from '@/common/types/util.types'; @@ -113,15 +112,12 @@ const SwapForm = ({ const { data: currencies } = useGetCurrencies(bridgeLoaded); const transaction = useTransaction(Transaction.AMM_SWAP, { - onSuccess: () => { - toast.success('Swap successful'); - setTrade(undefined); + onSigning: () => { setInputAmount(undefined); - onSwap(); + form.setFieldValue(SWAP_INPUT_AMOUNT_FIELD, '', true); + setTrade(undefined); }, - onError: (err) => { - toast.error(err.message); - } + onSuccess: onSwap }); useDebounce( @@ -157,12 +153,11 @@ const SwapForm = ({ try { const minimumAmountOut = trade.getMinimumOutputAmount(slippage); - const deadline = await window.bridge.system.getFutureBlockNumber(30 * 60); return transaction.execute(trade, minimumAmountOut, accountId, deadline); - } catch (err: any) { - toast.error(err.toString()); + } catch (error: any) { + transaction.reject(error); } }; @@ -193,7 +188,6 @@ const SwapForm = ({ initialValues, validationSchema: swapSchema({ [SWAP_INPUT_AMOUNT_FIELD]: inputSchemaParams }), onSubmit: handleSubmit, - disableValidation: transaction.isLoading, validateOnMount: true }); @@ -216,16 +210,6 @@ const SwapForm = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [pair]); - // MEMO: amount field cleaned up after successful swap - useEffect(() => { - const isAmountFieldEmpty = form.values[SWAP_INPUT_AMOUNT_FIELD] === ''; - - if (isAmountFieldEmpty || !transaction.isSuccess) return; - - form.setFieldValue(SWAP_INPUT_AMOUNT_FIELD, ''); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [transaction.isSuccess]); - const handleChangeInput: ChangeEventHandler = (e) => { setInputAmount(e.target.value); setTrade(undefined); @@ -322,7 +306,7 @@ const SwapForm = ({ /> {trade && } - + diff --git a/src/pages/Bridge/BurnForm/index.tsx b/src/pages/Bridge/BurnForm/index.tsx index 2063218a57..4699f19aa7 100644 --- a/src/pages/Bridge/BurnForm/index.tsx +++ b/src/pages/Bridge/BurnForm/index.tsx @@ -6,7 +6,6 @@ import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { ParachainStatus, StoreType } from '@/common/types/util.types'; import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; @@ -15,7 +14,6 @@ import { AuthCTA } from '@/components'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL, WrappedTokenLogoIcon } from '@/config/relay-chains'; import { BALANCE_MAX_INTEGER_LENGTH } from '@/constants'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; import FormTitle from '@/legacy-components/FormTitle'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -70,10 +68,12 @@ const BurnForm = (): JSX.Element | null => { const [burnableCollateral, setBurnableCollateral] = React.useState(); const [selectedCollateral, setSelectedCollateral] = React.useState(); - const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); - - const transaction = useTransaction(Transaction.REDEEM_BURN); + const transaction = useTransaction(Transaction.REDEEM_BURN, { + onSuccess: () => + reset({ + [WRAPPED_TOKEN_AMOUNT]: '' + }) + }); const handleUpdateCollateral = (collateral: TokenOption) => { const selectedCollateral = burnableCollateral?.find( @@ -128,18 +128,6 @@ const BurnForm = (): JSX.Element | null => { })(); }, [bridgeLoaded, collateralCurrencies, handleError]); - // This ensures that triggering the notification and clearing - // the form happen at the same time. - React.useEffect(() => { - if (submitStatus !== STATUSES.RESOLVED) return; - - toast.success(t('burn_page.successfully_burned')); - - reset({ - [WRAPPED_TOKEN_AMOUNT]: '' - }); - }, [submitStatus, reset, t]); - if (status === STATUSES.IDLE || status === STATUSES.PENDING) { return ; } @@ -149,18 +137,8 @@ const BurnForm = (): JSX.Element | null => { throw new Error('Something went wrong!'); } - const onSubmit = async (data: BurnFormData) => { - try { - setSubmitStatus(STATUSES.PENDING); - - await transaction.executeAsync(new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT]), selectedCollateral.currency); - - setSubmitStatus(STATUSES.RESOLVED); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - setSubmitError(error); - } - }; + const onSubmit = async (data: BurnFormData) => + transaction.execute(new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT]), selectedCollateral.currency); const validateForm = (value: string): string | undefined => { // TODO: should use wrapped token amount type (e.g. InterBtcAmount or KBtcAmount) @@ -305,23 +283,12 @@ const BurnForm = (): JSX.Element | null => { fullWidth size='large' type='submit' - loading={submitStatus === STATUSES.PENDING} + loading={transaction.isLoading} disabled={parachainStatus === ParachainStatus.Loading || parachainStatus === ParachainStatus.Shutdown} > {t('burn')} - {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} ); } diff --git a/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx b/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx index b8569c7ee6..e5afdc0146 100644 --- a/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx +++ b/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx @@ -1,12 +1,11 @@ import { Issue } from '@interlay/interbtc-api'; import clsx from 'clsx'; -import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; +import { Modal, ModalBody, ModalFooter } from '@/component-library'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import BTCPaymentPendingStatusUI from '@/legacy-components/IssueUI/BTCPaymentPendingStatusUI'; -import InterlayModal, { InterlayModalInnerWrapper, Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; +import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; import InterlayRouterLink from '@/legacy-components/UI/InterlayRouterLink'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; @@ -24,32 +23,31 @@ const SubmittedIssueRequestModal = ({ }: CustomProps & Omit): JSX.Element => { const { t } = useTranslation(); - const focusRef = React.useRef(null); - return ( - - - + +

{t('issue_page.deposit')}

- - - {t('issue_page.i_have_made_the_payment')} - -
- - + + + + + {t('issue_page.i_have_made_the_payment')} + + {' '} + + ); }; diff --git a/src/pages/Bridge/IssueForm/index.tsx b/src/pages/Bridge/IssueForm/index.tsx index 2e3b83db45..fbffaaae14 100644 --- a/src/pages/Bridge/IssueForm/index.tsx +++ b/src/pages/Bridge/IssueForm/index.tsx @@ -42,7 +42,6 @@ import { } from '@/config/relay-chains'; import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; import FormTitle from '@/legacy-components/FormTitle'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -126,7 +125,6 @@ const IssueForm = (): JSX.Element | null => { ); const [dustValue, setDustValue] = React.useState(new BitcoinAmount(DEFAULT_ISSUE_DUST_AMOUNT)); const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); const [submittedRequest, setSubmittedRequest] = React.useState(); const [selectVaultManually, setSelectVaultManually] = React.useState(false); const [selectedVault, setSelectedVault] = React.useState(); @@ -142,7 +140,7 @@ const IssueForm = (): JSX.Element | null => { }); useErrorHandler(requestLimitsError); - const transaction = useTransaction(Transaction.ISSUE_REQUEST); + const transaction = useTransaction(Transaction.ISSUE_REQUEST, { showSuccessModal: false }); React.useEffect(() => { if (!bridgeLoaded) return; @@ -303,43 +301,38 @@ const IssueForm = (): JSX.Element | null => { }; const onSubmit = async (data: IssueFormData) => { - try { - setSubmitStatus(STATUSES.PENDING); - await requestLimitsRefetch(); - await trigger(BTC_AMOUNT); - - const monetaryBtcAmount = new BitcoinAmount(data[BTC_AMOUNT] || '0'); - const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); - - let vaultId: InterbtcPrimitivesVaultId; - if (selectVaultManually) { - if (!selectedVault) { - throw new Error('Specific vault is not selected!'); - } - vaultId = selectedVault[0]; - } else { - vaultId = getRandomVaultIdWithCapacity(Array.from(vaults), monetaryBtcAmount); - } + setSubmitStatus(STATUSES.PENDING); + await requestLimitsRefetch(); + await trigger(BTC_AMOUNT); - const collateralToken = await currencyIdToMonetaryCurrency(window.bridge.api, vaultId.currencies.collateral); - - const result = await transaction.executeAsync( - monetaryBtcAmount, - vaultId.accountId, - collateralToken, - false, // default - vaults - ); - const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result); - - // TODO: handle issue aggregation - const issueRequest = issueRequests[0]; - handleSubmittedRequestModalOpen(issueRequest); - setSubmitStatus(STATUSES.RESOLVED); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - setSubmitError(error); + const monetaryBtcAmount = new BitcoinAmount(data[BTC_AMOUNT] || '0'); + const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); + + let vaultId: InterbtcPrimitivesVaultId; + if (selectVaultManually) { + if (!selectedVault) { + throw new Error('Specific vault is not selected!'); + } + vaultId = selectedVault[0]; + } else { + vaultId = getRandomVaultIdWithCapacity(Array.from(vaults), monetaryBtcAmount); } + + const collateralToken = await currencyIdToMonetaryCurrency(window.bridge.api, vaultId.currencies.collateral); + + const result = await transaction.executeAsync( + monetaryBtcAmount, + vaultId.accountId, + collateralToken, + false, // default + vaults + ); + const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); + + // TODO: handle issue aggregation + const issueRequest = issueRequests[0]; + handleSubmittedRequestModalOpen(issueRequest); + setSubmitStatus(STATUSES.RESOLVED); }; const monetaryBtcAmount = new BitcoinAmount(btcAmount); @@ -536,17 +529,6 @@ const IssueForm = (): JSX.Element | null => { {t('confirm')} - {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} {submittedRequest && ( - - + +

{t('redeem_page.redeem')} @@ -114,8 +110,8 @@ const SubmittedRedeemRequestModal = ({

- - + + ); }; diff --git a/src/pages/Bridge/RedeemForm/index.tsx b/src/pages/Bridge/RedeemForm/index.tsx index 357bfcf540..f934ae0a99 100644 --- a/src/pages/Bridge/RedeemForm/index.tsx +++ b/src/pages/Bridge/RedeemForm/index.tsx @@ -35,7 +35,6 @@ import { import { BALANCE_MAX_INTEGER_LENGTH, BTC_ADDRESS_REGEX } from '@/constants'; import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; import FormTitle from '@/legacy-components/FormTitle'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -112,14 +111,13 @@ const RedeemForm = (): JSX.Element | null => { const [premiumRedeemFee, setPremiumRedeemFee] = React.useState(new Big(0)); const [currentInclusionFee, setCurrentInclusionFee] = React.useState(BitcoinAmount.zero()); const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); const [submittedRequest, setSubmittedRequest] = React.useState(); const [selectVaultManually, setSelectVaultManually] = React.useState(false); const [selectedVault, setSelectedVault] = React.useState(); - const transaction = useTransaction(Transaction.REDEEM_REQUEST); + const transaction = useTransaction(Transaction.REDEEM_REQUEST, { showSuccessModal: false }); React.useEffect(() => { if (!monetaryWrappedTokenAmount) return; @@ -305,7 +303,7 @@ const RedeemForm = (): JSX.Element | null => { const result = await transaction.executeAsync(monetaryWrappedTokenAmount, data[BTC_ADDRESS], vaultId); - const redeemRequests = await getRedeemRequestsFromExtrinsicResult(window.bridge, result); + const redeemRequests = await getRedeemRequestsFromExtrinsicResult(window.bridge, result.data); // TODO: handle redeem aggregator const redeemRequest = redeemRequests[0]; @@ -313,7 +311,6 @@ const RedeemForm = (): JSX.Element | null => { setSubmitStatus(STATUSES.RESOLVED); } catch (error) { setSubmitStatus(STATUSES.REJECTED); - setSubmitError(error); } }; @@ -533,17 +530,6 @@ const RedeemForm = (): JSX.Element | null => { {t('confirm')} - {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} {submittedRequest && ( Object.values(assets).map(({ borrowApy, currency, availableCapacity, totalBorrows, borrowReward }) => { const asset = ; - const accruedRewards = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].borrow : null; const apy = ( { - toast.success('Successfully toggled collateral'); - onClose?.(); - refetch(); - } + onSigning: onClose, + onSuccess: refetch }); if (!asset || !position) { @@ -94,31 +89,21 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal }; return ( - <> - - {content.title} - - - {content.description} - - {variant !== 'disable-error' && } - - - - - {content.buttonLabel} - - - - {transaction.isError && ( - transaction.reset()} - title='Error' - description={transaction.error?.message || ''} - /> - )} - + + {content.title} + + + {content.description} + + {variant !== 'disable-error' && } + + + + + {content.buttonLabel} + + + ); }; diff --git a/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx b/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx index ab5e125316..ea399226b5 100644 --- a/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx +++ b/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx @@ -8,7 +8,6 @@ import { AssetCell, BalanceCell, Cell, Table, TableProps } from '@/components'; import { ApyCell } from '@/components/LoanPositionsTable/ApyCell'; import { LoanTablePlaceholder } from '@/components/LoanPositionsTable/LoanTablePlaceholder'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -48,20 +47,17 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps const { t } = useTranslation(); const prices = useGetPrices(); const { data: balances } = useGetBalances(); - const { data: subsidyRewards } = useGetAccountSubsidyRewards(); const rows: LendAssetsTableRow[] = useMemo( () => Object.values(assets).map(({ lendApy, currency, totalLiquidity, lendReward }) => { const asset = ; - const accruedRewards = subsidyRewards ? subsidyRewards.perMarket[currency.ticker].lend : null; const apy = ( onRowAction?.(currency.ticker as Key)} @@ -87,7 +83,7 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps totalSupply }; }), - [assets, balances, onRowAction, prices, subsidyRewards] + [assets, balances, onRowAction, prices] ); return ( diff --git a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx index edc7763901..390be8cba5 100644 --- a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx @@ -3,7 +3,6 @@ import { MonetaryAmount } from '@interlay/monetary-js'; import { mergeProps } from '@react-aria/utils'; import { ChangeEventHandler, useState } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; import { useDebounce } from 'react-use'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; @@ -116,42 +115,29 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS [inputAmount] ); - const transaction = useTransaction({ - onSuccess: () => { - toast.success(`Successful ${content.title.toLowerCase()}`); - onChangeLoan?.(); - refetch(); - }, - onError: (error: Error) => { - toast.error(error.message); - } - }); + const transaction = useTransaction({ onSigning: onChangeLoan, onSuccess: refetch }); const handleSubmit = (data: LoanFormData) => { - try { - const amount = data[variant] || 0; - const monetaryAmount = newMonetaryAmount(amount, asset.currency, true); - - switch (variant) { - case 'lend': - return transaction.execute(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); - case 'withdraw': - if (isMaxAmount) { - return transaction.execute(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); - } else { - return transaction.execute(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); - } - case 'borrow': - return transaction.execute(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); - case 'repay': - if (isMaxAmount) { - return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency); - } else { - return transaction.execute(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); - } - } - } catch (err: any) { - toast.error(err.toString()); + const amount = data[variant] || 0; + const monetaryAmount = newMonetaryAmount(amount, asset.currency, true); + + switch (variant) { + case 'lend': + return transaction.execute(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); + case 'withdraw': + if (isMaxAmount) { + return transaction.execute(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); + } else { + return transaction.execute(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); + } + case 'borrow': + return transaction.execute(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); + case 'repay': + if (isMaxAmount) { + return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency); + } else { + return transaction.execute(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); + } } }; @@ -216,7 +202,7 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS - + {content.title} diff --git a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx index 6ad85f8d82..2ef53674f4 100644 --- a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx @@ -1,10 +1,6 @@ -import { useTranslation } from 'react-i18next'; -import { toast } from 'react-toastify'; - import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils'; import { Card, Dl, DlGroup } from '@/component-library'; import { AuthCTA } from '@/components'; -import ErrorModal from '@/legacy-components/ErrorModal'; import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -16,14 +12,10 @@ type LoansInsightsProps = { }; const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { - const { t } = useTranslation(); const { data: subsidyRewards, refetch } = useGetAccountSubsidyRewards(); const transaction = useTransaction(Transaction.LOANS_CLAIM_REWARDS, { - onSuccess: () => { - toast.success(t('successfully_claimed_rewards')); - refetch(); - } + onSuccess: refetch }); const handleClickClaimRewards = () => transaction.execute(); @@ -76,14 +68,6 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { )}
- {transaction.isError && ( - transaction.reset()} - title='Error' - description={transaction.error?.message || ''} - /> - )} ); }; diff --git a/src/pages/Staking/ClaimRewardsButton/index.tsx b/src/pages/Staking/ClaimRewardsButton/index.tsx index 442da162c0..e7ab257735 100644 --- a/src/pages/Staking/ClaimRewardsButton/index.tsx +++ b/src/pages/Staking/ClaimRewardsButton/index.tsx @@ -5,7 +5,6 @@ import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; import InterlayDenimOrKintsugiSupernovaContainedButton, { Props as InterlayDenimOrKintsugiMidnightContainedButtonProps } from '@/legacy-components/buttons/InterlayDenimOrKintsugiSupernovaContainedButton'; -import ErrorModal from '@/legacy-components/ErrorModal'; import { useSubstrateSecureState } from '@/lib/substrate'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -35,26 +34,14 @@ const ClaimRewardsButton = ({ }; return ( - <> - - Claim {claimableRewardAmount} {GOVERNANCE_TOKEN_SYMBOL} Rewards - - {transaction.isError && ( - { - transaction.reset(); - }} - title='Error' - description={transaction.error?.message || ''} - /> - )} - + + Claim {claimableRewardAmount} {GOVERNANCE_TOKEN_SYMBOL} Rewards + ); }; diff --git a/src/pages/Staking/WithdrawButton/index.tsx b/src/pages/Staking/WithdrawButton/index.tsx index 7093017a52..190d2a628c 100644 --- a/src/pages/Staking/WithdrawButton/index.tsx +++ b/src/pages/Staking/WithdrawButton/index.tsx @@ -1,19 +1,17 @@ -import { ISubmittableResult } from '@polkadot/types/types'; import clsx from 'clsx'; import { add, format } from 'date-fns'; -import { useMutation, useQueryClient } from 'react-query'; +import { useQueryClient } from 'react-query'; import { BLOCK_TIME } from '@/config/parachain'; import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; import InterlayDenimOrKintsugiSupernovaContainedButton, { Props as InterlayDenimOrKintsugiMidnightContainedButtonProps } from '@/legacy-components/buttons/InterlayDenimOrKintsugiSupernovaContainedButton'; -import ErrorModal from '@/legacy-components/ErrorModal'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import { useSubstrateSecureState } from '@/lib/substrate'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const getFormattedUnlockDate = (remainingBlockNumbersToUnstake: number, formatPattern: string) => { const unlockDate = add(new Date(), { @@ -36,22 +34,15 @@ const WithdrawButton = ({ }: CustomProps & InterlayDenimOrKintsugiMidnightContainedButtonProps): JSX.Element => { const { selectedAccount } = useSubstrateSecureState(); - const queryClient = useQueryClient(); - - const withdrawMutation = useMutation( - () => { - return submitExtrinsic(window.bridge.escrow.withdraw()); - }, - { - onSuccess: () => { - queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getStakedBalance', selectedAccount?.address]); - } + const transaction = useTransaction(Transaction.ESCROW_WITHDRAW, { + onSuccess: () => { + queryClient.invalidateQueries([GENERIC_FETCHER, 'escrow', 'getStakedBalance', selectedAccount?.address]); } - ); + }); - const handleUnstake = () => { - withdrawMutation.mutate(); - }; + const queryClient = useQueryClient(); + + const handleUnstake = () => transaction.execute(); const disabled = remainingBlockNumbersToUnstake ? remainingBlockNumbersToUnstake > 0 : false; @@ -79,22 +70,12 @@ const WithdrawButton = ({ /> } onClick={handleUnstake} - pending={withdrawMutation.isLoading} + pending={transaction.isLoading} disabled={disabled} {...rest} > Withdraw Staked {GOVERNANCE_TOKEN_SYMBOL} {renderUnlockDateLabel()} - {withdrawMutation.isError && ( - { - withdrawMutation.reset(); - }} - title='Error' - description={withdrawMutation.error?.message || ''} - /> - )} ); }; diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index 043d6b1185..df2f0b697f 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -29,7 +29,6 @@ import { } from '@/config/relay-chains'; import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; import Panel from '@/legacy-components/Panel'; import TitleWithUnderline from '@/legacy-components/TitleWithUnderline'; import TokenField from '@/legacy-components/TokenField'; @@ -837,17 +836,6 @@ const Staking = (): JSX.Element => { - {(initialStakeTransaction.isError || existingStakeTransaction.isError) && ( - { - initialStakeTransaction.reset(); - existingStakeTransaction.reset(); - }} - title='Error' - description={initialStakeTransaction.error?.message || existingStakeTransaction.error?.message || ''} - /> - )} ); }; diff --git a/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx b/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx index c1457d5a8d..765659e2d9 100644 --- a/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx +++ b/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx @@ -1,13 +1,8 @@ -import clsx from 'clsx'; -import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; -import Hr1 from '@/legacy-components/hrs/Hr1'; +import { Modal, ModalBody, ModalHeader } from '@/component-library'; import IssueUI from '@/legacy-components/IssueUI'; -import InterlayModal, { InterlayModalInnerWrapper, Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; - -import RequestModalTitle from '../../RequestModalTitle'; +import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; interface CustomProps { request: any; // TODO: should type properly (`Relay`) @@ -16,17 +11,13 @@ interface CustomProps { const IssueRequestModal = ({ open, onClose, request }: CustomProps & Omit): JSX.Element => { const { t } = useTranslation(); - const focusRef = React.useRef(null); - return ( - - - {t('issue_page.request', { id: request.id })} - - + + {t('issue_page.request', { id: request.id })} + - - + + ); }; diff --git a/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx b/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx index ccc3fba223..fee187b468 100644 --- a/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx +++ b/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx @@ -1,13 +1,8 @@ -import clsx from 'clsx'; -import * as React from 'react'; import { useTranslation } from 'react-i18next'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; -import Hr1 from '@/legacy-components/hrs/Hr1'; +import { Modal, ModalBody, ModalHeader } from '@/component-library'; import RedeemUI from '@/legacy-components/RedeemUI'; -import InterlayModal, { InterlayModalInnerWrapper, Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; - -import RequestModalTitle from '../../RequestModalTitle'; +import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; interface CustomProps { // TODO: should type properly (`Relay`) @@ -21,17 +16,13 @@ const RedeemRequestModal = ({ }: CustomProps & Omit): JSX.Element | null => { const { t } = useTranslation(); - const focusRef = React.useRef(null); - return ( - - - {t('issue_page.request', { id: request.id })} - - + + {t('issue_page.request', { id: request.id })} + - - + + ); }; diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx index 1e7a864185..fbd54a3cd8 100644 --- a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx +++ b/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx @@ -1,12 +1,9 @@ -import { FixedPointNumber } from '@acala-network/sdk-core'; -import { ChainName, CrossChainTransferParams } from '@interlay/bridge'; +import { ChainName } from '@interlay/bridge'; import { newMonetaryAmount } from '@interlay/interbtc-api'; import { web3FromAddress } from '@polkadot/extension-dapp'; import { mergeProps } from '@react-aria/utils'; import { ChangeEventHandler, Key, useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; -import { toast } from 'react-toastify'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Dd, DlGroup, Dt, Flex, LoadingSpinner, TokenInput } from '@/component-library'; @@ -25,11 +22,11 @@ import { } from '@/lib/form'; import { useSubstrateSecureState } from '@/lib/substrate'; import { Chains } from '@/types/chains'; -import { submitExtrinsic } from '@/utils/helpers/extrinsic'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { useXCMBridge, XCMTokenData } from '@/utils/hooks/api/xcm/use-xcm-bridge'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { ChainSelect } from './components'; @@ -65,37 +62,36 @@ const CrossChainTransferForm = (): JSX.Element => { } }; - const mutateXcmTransfer = async (formData: CrossChainTransferFormData) => { + const transaction = useTransaction(Transaction.XCM_TRANSFER, { + onSuccess: () => { + setTokenData(form.values[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName); + form.setFieldValue(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, ''); + } + }); + + const handleSubmit = async (formData: CrossChainTransferFormData) => { if (!data || !formData || !currentToken) return; - const { signer } = await web3FromAddress(formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string); + const address = formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string; + + const { signer } = await web3FromAddress(address); const adapter = data.bridge.findAdapter(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName); const apiPromise = data.provider.getApiPromise(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as string); apiPromise.setSigner(signer); adapter.setApi(apiPromise); + const transferCurrency = getCurrencyFromTicker(currentToken.value); const transferAmount = newMonetaryAmount( form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] || 0, - getCurrencyFromTicker(currentToken.value), + transferCurrency, true ); - const transferAmountString = transferAmount.toString(true); - const transferAmountDecimals = transferAmount.currency.decimals; - - const tx = adapter.createTx({ - amount: FixedPointNumber.fromInner(transferAmountString, transferAmountDecimals), - to: formData[CROSS_CHAIN_TRANSFER_TO_FIELD], - token: formData[CROSS_CHAIN_TRANSFER_TOKEN_FIELD], - address: formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] - } as CrossChainTransferParams); - - await submitExtrinsic({ extrinsic: tx }); - }; + const fromChain = formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName; + const toChain = formData[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName; - const handleSubmit = (formData: CrossChainTransferFormData) => { - xcmTransferMutation.mutate(formData); + transaction.execute(adapter, fromChain, toChain, address, transferAmount); }; const form = useForm({ @@ -108,18 +104,6 @@ const CrossChainTransferForm = (): JSX.Element => { validationSchema: crossChainTransferSchema(schema, t) }); - const xcmTransferMutation = useMutation(mutateXcmTransfer, { - onSuccess: async () => { - toast.success('Transfer successful'); - - setTokenData(form.values[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName); - form.setFieldValue(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, ''); - }, - onError: (err) => { - toast.error(err.message); - } - }); - const handleOriginatingChainChange = (chain: ChainName, name: string) => { form.setFieldValue(name, chain); @@ -238,9 +222,7 @@ const CrossChainTransferForm = (): JSX.Element => { onSelectionChange={(chain: Key) => handleOriginatingChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_FROM_FIELD) } - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false), { - onChange: handleOriginatingChainChange - })} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false))} /> { onSelectionChange={(chain: Key) => handleDestinationChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_TO_FIELD) } - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false), { - onChange: handleDestinationChainChange - })} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false))} />
@@ -290,7 +270,7 @@ const CrossChainTransferForm = (): JSX.Element => {
{`${currentToken?.destFee.toString()} ${currentToken?.value}`}
- + {isCTADisabled ? 'Enter transfer amount' : t('transfer')} diff --git a/src/pages/Transfer/TransferForm/index.tsx b/src/pages/Transfer/TransferForm/index.tsx index a488cd288f..2bc9ed3f19 100644 --- a/src/pages/Transfer/TransferForm/index.tsx +++ b/src/pages/Transfer/TransferForm/index.tsx @@ -5,19 +5,16 @@ import { withErrorBoundary } from 'react-error-boundary'; import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { ParachainStatus, StoreType } from '@/common/types/util.types'; import { formatNumber } from '@/common/utils/utils'; import { AuthCTA } from '@/components'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import ErrorModal from '@/legacy-components/ErrorModal'; import FormTitle from '@/legacy-components/FormTitle'; import TextField from '@/legacy-components/TextField'; import Tokens, { TokenOption } from '@/legacy-components/Tokens'; import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import STATUSES from '@/utils/constants/statuses'; import isValidPolkadotAddress from '@/utils/helpers/is-valid-polkadot-address'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -47,28 +44,21 @@ const TransferForm = (): JSX.Element => { }); const [activeToken, setActiveToken] = React.useState(undefined); - const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); - const transaction = useTransaction(Transaction.TOKENS_TRANSFER); + const transaction = useTransaction(Transaction.TOKENS_TRANSFER, { + onSigning: () => { + reset({ + [TRANSFER_AMOUNT]: '', + [RECIPIENT_ADDRESS]: '' + }); + } + }); const onSubmit = async (data: TransferFormData) => { if (!activeToken) return; if (data[TRANSFER_AMOUNT] === undefined) return; - try { - setSubmitStatus(STATUSES.PENDING); - - await transaction.executeAsync( - data[RECIPIENT_ADDRESS], - newMonetaryAmount(data[TRANSFER_AMOUNT], activeToken.token, true) - ); - - setSubmitStatus(STATUSES.RESOLVED); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - setSubmitError(error); - } + transaction.execute(data[RECIPIENT_ADDRESS], newMonetaryAmount(data[TRANSFER_AMOUNT], activeToken.token, true)); }; const validateTransferAmount = React.useCallback( @@ -96,19 +86,6 @@ const TransferForm = (): JSX.Element => { const handleClickBalance = () => setValue(TRANSFER_AMOUNT, activeToken?.transferableBalance || ''); - // This ensures that triggering the notification and clearing - // the form happen at the same time. - React.useEffect(() => { - if (submitStatus !== STATUSES.RESOLVED) return; - - toast.success(t('transfer_page.successfully_transferred')); - - reset({ - [TRANSFER_AMOUNT]: '', - [RECIPIENT_ADDRESS]: '' - }); - }, [submitStatus, reset, t]); - return ( <>
@@ -171,22 +148,10 @@ const TransferForm = (): JSX.Element => { size='large' type='submit' disabled={parachainStatus === (ParachainStatus.Loading || ParachainStatus.Shutdown)} - loading={submitStatus === STATUSES.PENDING} > {t('transfer')}
- {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} ); }; diff --git a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx index 4e9215ce82..4eec9acdd1 100644 --- a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx @@ -16,6 +16,7 @@ import { useSelector } from 'react-redux'; import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; import { ParachainStatus, StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; +import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { BLOCKS_BEHIND_LIMIT, DEFAULT_ISSUE_BRIDGE_FEE_RATE, @@ -30,15 +31,12 @@ import { WRAPPED_TOKEN_SYMBOL, WrappedTokenLogoIcon } from '@/config/relay-chains'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; -import ErrorModal from '@/legacy-components/ErrorModal'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; import SubmitButton from '@/legacy-components/SubmitButton'; import TokenField from '@/legacy-components/TokenField'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; -import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; import { useSubstrateSecureState } from '@/lib/substrate'; import SubmittedIssueRequestModal from '@/pages/Bridge/IssueForm/SubmittedIssueRequestModal'; import { ForeignAssetIdLiteral } from '@/types/currency'; @@ -90,12 +88,10 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro ); const [dustValue, setDustValue] = React.useState(new BitcoinAmount(DEFAULT_ISSUE_DUST_AMOUNT)); const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submitError, setSubmitError] = React.useState(null); const [submittedRequest, setSubmittedRequest] = React.useState(); const { t } = useTranslation(); const prices = useGetPrices(); - const focusRef = React.useRef(null); const handleError = useErrorHandler(); @@ -108,7 +104,7 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro const vaultAccountId = useAccountId(vaultAddress); - const transaction = useTransaction(Transaction.ISSUE_REQUEST); + const transaction = useTransaction(Transaction.ISSUE_REQUEST, { showSuccessModal: false }); React.useEffect(() => { if (!bridgeLoaded) return; @@ -174,31 +170,29 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro } const onSubmit = async (data: RequestIssueFormData) => { - try { - setSubmitStatus(STATUSES.PENDING); - await trigger(WRAPPED_TOKEN_AMOUNT); + setSubmitStatus(STATUSES.PENDING); - const wrappedTokenAmount = new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT] || '0'); + await trigger(WRAPPED_TOKEN_AMOUNT); - const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); + const wrappedTokenAmount = new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT] || '0'); - const extrinsicResult = await transaction.executeAsync( - wrappedTokenAmount, - vaultAccountId, - collateralToken, - false, // default - vaults - ); + const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); - const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, extrinsicResult); + const result = await transaction.executeAsync( + wrappedTokenAmount, + vaultAccountId, + collateralToken, + false, // default + vaults + ); - // TODO: handle issue aggregation - const issueRequest = issueRequests[0]; - handleSubmittedRequestModalOpen(issueRequest); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - } + const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); + + // TODO: handle issue aggregation + const issueRequest = issueRequests[0]; + handleSubmittedRequestModalOpen(issueRequest); setSubmitStatus(STATUSES.RESOLVED); + onClose(); }; const validateForm = (value: string): string | undefined => { @@ -267,12 +261,9 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro return ( <> - - - - {t('vault.request_issue')} - - + + {t('vault.request_issue')} +

{t('vault.issue_description')}

@@ -416,19 +407,8 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro {t('confirm')}

- - - {submitStatus === STATUSES.REJECTED && submitError && ( - { - setSubmitStatus(STATUSES.IDLE); - setSubmitError(null); - }} - title='Error' - description={typeof submitError === 'string' ? submitError : submitError.message} - /> - )} + + {submittedRequest && ( (); const [isRequestPending, setRequestPending] = React.useState(false); const { t } = useTranslation(); - const focusRef = React.useRef(null); const transaction = useTransaction(Transaction.REDEEM_REQUEST); const onSubmit = handleSubmit(async (data) => { setRequestPending(true); + try { // Represents being less than 1 Satoshi if (new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT])._rawAmount.lt(1)) { @@ -67,12 +65,11 @@ const RequestRedeemModal = ({ onClose, open, collateralToken, vaultAddress, lock queryClient.invalidateQueries(['vaultsOverview', vaultAddress, collateralToken.ticker]); - toast.success('Redeem request submitted'); onClose(); - } catch (error) { - toast.error(error.toString()); + setRequestPending(false); + } catch (error: any) { + transaction.reject(error); } - setRequestPending(false); }); const validateAmount = (value: string): string | undefined => { @@ -89,12 +86,9 @@ const RequestRedeemModal = ({ onClose, open, collateralToken, vaultAddress, lock }; return ( - - - - {t('vault.request_redeem')} - - + + {t('vault.request_redeem')} +

{t('vault.redeem_description')}

@@ -142,8 +136,8 @@ const RequestRedeemModal = ({ onClose, open, collateralToken, vaultAddress, lock

- - + + ); }; diff --git a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx index a92acc73b2..3001474981 100644 --- a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx @@ -9,20 +9,18 @@ import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useQueryClient } from 'react-query'; import { useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount } from '@/common/utils/utils'; +import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; import { DEFAULT_REDEEM_DUST_AMOUNT } from '@/config/parachain'; import { GOVERNANCE_TOKEN, GOVERNANCE_TOKEN_SYMBOL, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; import InterlayCinnabarOutlinedButton from '@/legacy-components/buttons/InterlayCinnabarOutlinedButton'; import InterlayMulberryOutlinedButton from '@/legacy-components/buttons/InterlayMulberryOutlinedButton'; import ErrorMessage from '@/legacy-components/ErrorMessage'; import NumberInput from '@/legacy-components/NumberInput'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; -import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; import { getExchangeRate } from '@/utils/helpers/oracle'; @@ -66,8 +64,6 @@ const RequestReplacementModal = ({ const handleError = useErrorHandler(); const { isLoading: isBalancesLoading, data: balances } = useGetBalances(); - const focusRef = React.useRef(null); - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const [status, setStatus] = React.useState(STATUSES.IDLE); @@ -112,10 +108,10 @@ const RequestReplacementModal = ({ const vaultId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, vaultAddress); queryClient.invalidateQueries([GENERIC_FETCHER, 'mapReplaceRequests', vaultId]); - toast.success('Replacement request is submitted'); setSubmitStatus(STATUSES.RESOLVED); onClose(); - } catch (error) { + } catch (error: any) { + transaction.reject(error); setSubmitStatus(STATUSES.REJECTED); } }); @@ -158,12 +154,9 @@ const RequestReplacementModal = ({ const securityDeposit = btcToGovernanceTokenRate.toCounter(wrappedTokenAmount).mul(griefingRate); return ( - - - - {t('vault.request_replacement')} - - + + {t('vault.request_replacement')} +

{t('vault.withdraw_your_collateral')}

{t('vault.you_have')}

@@ -197,8 +190,8 @@ const RequestReplacementModal = ({
- - + + ); } return null; diff --git a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx index dad669da97..c01420c02c 100644 --- a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx +++ b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx @@ -9,16 +9,14 @@ import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useQuery, useQueryClient } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { updateCollateralAction, updateCollateralizationAction } from '@/common/actions/vault.actions'; import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat, formatPercentage } from '@/common/utils/utils'; +import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; -import CloseIconButton from '@/legacy-components/buttons/CloseIconButton'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import TokenField from '@/legacy-components/TokenField'; -import InterlayModal, { InterlayModalInnerWrapper, InterlayModalTitle } from '@/legacy-components/UI/InterlayModal'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; import { getTokenPrice } from '@/utils/helpers/prices'; @@ -73,7 +71,6 @@ const UpdateCollateralModal = ({ const dispatch = useDispatch(); const { t } = useTranslation(); - const focusRef = React.useRef(null); const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); const handleError = useErrorHandler(); @@ -164,11 +161,10 @@ const UpdateCollateralModal = ({ dispatch(updateCollateralizationAction(strVaultCollateralizationPercentage)); } - toast.success(t('vault.successfully_updated_collateral')); setSubmitStatus(STATUSES.RESOLVED); handleClose(); - } catch (error) { - toast.error(error.message); + } catch (error: any) { + transaction.reject(error); handleError(error); setSubmitStatus(STATUSES.REJECTED); } @@ -271,12 +267,9 @@ const UpdateCollateralModal = ({ }; return ( - - - - {collateralUpdateStatusText} - - + + {collateralUpdateStatusText} +

{t('vault.current_total_collateral', { @@ -326,8 +319,8 @@ const UpdateCollateralModal = ({

{renderSubmitButton()}
- - + + ); }; diff --git a/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.styles.tsx b/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.styles.tsx deleted file mode 100644 index c0591711d6..0000000000 --- a/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.styles.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import styled from 'styled-components'; - -import { H2, theme } from '@/component-library'; - -const StyledDl = styled.dl` - display: flex; - flex-direction: column; - gap: ${theme.spacing.spacing2}; -`; - -const StyledDItem = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - gap: ${theme.spacing.spacing2}; -`; - -const StyledDt = styled.dt` - font-size: ${theme.text.xs}; - line-height: ${theme.lineHeight.base}; - color: ${theme.colors.textTertiary}; -`; - -const StyledDd = styled.dd` - font-size: ${theme.text.xs}; - line-height: ${theme.lineHeight.base}; -`; - -const StyledTitle = styled(H2)` - font-size: ${theme.text.base}; - line-height: ${theme.lineHeight.base}; - color: #d57b33; - padding: ${theme.spacing.spacing3}; - border-bottom: 2px solid #feca2f; - text-align: center; -`; - -const StyledHr = styled.hr` - border: 0; - border-bottom: ${theme.border.default}; - margin: ${theme.spacing.spacing4} 0; -`; - -export { StyledDd, StyledDItem, StyledDl, StyledDt, StyledHr, StyledTitle }; diff --git a/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.tsx b/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.tsx deleted file mode 100644 index 7f00b8be13..0000000000 --- a/src/pages/Vaults/Vault/components/CollateralForm/CollateralForm.tsx +++ /dev/null @@ -1,312 +0,0 @@ -import { CollateralCurrencyExt, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { useId } from '@react-aria/utils'; -import Big from 'big.js'; -import { FormHTMLAttributes, useEffect, useState } from 'react'; -import { useErrorHandler } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; -import { useSelector } from 'react-redux'; -import { useParams } from 'react-router'; - -import { StoreType } from '@/common/types/util.types'; -import { - convertMonetaryAmountToValueInUSD, - displayMonetaryAmount, - displayMonetaryAmountInUSDFormat, - formatNumber, - formatUSD -} from '@/common/utils/utils'; -import { CTA, Span, Stack, TokenInput } from '@/component-library'; -import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { URL_PARAMETERS } from '@/utils/constants/links'; -import { submitExtrinsic, submitExtrinsicPromise } from '@/utils/helpers/extrinsic'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; - -import { CollateralActions, CollateralStatusRanges } from '../../types'; -import { StyledDd, StyledDItem, StyledDl, StyledDt, StyledHr, StyledTitle } from './CollateralForm.styles'; - -// const getCollateralStatusLabel = (status: CollateralStatus) => { -// switch (status) { -// case 'error': -// return '(High Risk)'; -// case 'warning': -// return '(Medium Risk)'; -// case 'success': -// return '(Low Risk)'; -// } -// }; - -const getCollateralTokenAmount = ( - vaultCollateral: Big, - inputCollateral: MonetaryAmount, - token: CurrencyExt, - collateralAction: CollateralActions -) => { - let amount = newMonetaryAmount(vaultCollateral, token, true) as MonetaryAmount; - - switch (collateralAction) { - case 'deposit': { - amount = amount.add(inputCollateral); - break; - } - case 'withdraw': { - amount = amount.sub(inputCollateral); - break; - } - } - - return amount; -}; - -const DEPOSIT_COLLATERAL_AMOUNT = 'deposit-collateral-amount'; -const WITHDRAW_COLLATERAL_AMOUNT = 'withdraw-collateral-amount'; - -type CollateralFormData = { - [DEPOSIT_COLLATERAL_AMOUNT]?: string; - [WITHDRAW_COLLATERAL_AMOUNT]?: string; -}; - -const collateralInputId: Record = { - deposit: DEPOSIT_COLLATERAL_AMOUNT, - withdraw: WITHDRAW_COLLATERAL_AMOUNT -}; - -type Props = { - collateral: VaultData['collateral']; - collateralToken: CurrencyExt; - variant?: CollateralActions; - onSubmit?: () => void; - ranges: CollateralStatusRanges; -}; - -type NativeAttrs = Omit, keyof Props | 'children'>; - -type CollateralFormProps = Props & NativeAttrs; - -const CollateralForm = ({ - variant = 'deposit', - onSubmit, - collateral, - collateralToken, - ...props -}: CollateralFormProps): JSX.Element => { - const { t } = useTranslation(); - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); - const { [URL_PARAMETERS.VAULT.ACCOUNT]: vaultAddress } = useParams>(); - const [isSubmitting, setIsSubmitting] = useState(false); - const prices = useGetPrices(); - const { register, handleSubmit: h, watch } = useForm({ - mode: 'onChange' - }); - // const [score, setScore] = useState(0); - - const tokenInputId = collateralInputId[variant]; - const inputCollateral = watch(tokenInputId) || '0'; - const inputCollateralAmount = newMonetaryAmount( - inputCollateral, - collateralToken, - true - ) as MonetaryAmount; - - const { - isIdle: requiredCollateralTokenAmountIdle, - isLoading: requiredCollateralTokenAmountLoading, - data: requiredCollateralTokenAmount, - error: requiredCollateralTokenAmountError - } = useQuery, Error>( - [GENERIC_FETCHER, 'vaults', 'getRequiredCollateralForVault', vaultAddress, collateralToken], - genericFetcher>(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(requiredCollateralTokenAmountError); - - const collateralTokenAmount = getCollateralTokenAmount( - collateral.amount, - inputCollateralAmount, - collateralToken, - variant - ); - - const { isLoading: isGetCollateralizationLoading, data: unparsedScore, error } = useQuery( - [GENERIC_FETCHER, 'vaults', 'getVaultCollateralization', vaultAddress, collateralToken, collateralTokenAmount], - genericFetcher(), - { - enabled: bridgeLoaded - // TODO: add hasLockedBTC - // && hasLockedBTC - } - ); - useErrorHandler(error); - - useEffect(() => { - if (!isGetCollateralizationLoading) { - // setScore(unparsedScore?.toNumber() ?? 0); - } - }, [isGetCollateralizationLoading, unparsedScore]); - - const handleSubmit = async (data: CollateralFormData) => { - if (!bridgeLoaded) return; - onSubmit?.(); - setIsSubmitting(true); - - try { - const collateralTokenAmount = newMonetaryAmount( - data[tokenInputId] || '0', - collateralToken, - true - ) as MonetaryAmount; - - switch (variant) { - case 'deposit': { - await submitExtrinsic(window.bridge.vaults.depositCollateral(collateralTokenAmount)); - break; - } - case 'withdraw': { - await submitExtrinsicPromise(window.bridge.vaults.withdrawCollateral(collateralTokenAmount)); - break; - } - } - - // TODO: state changes - - // const balanceLockedCollateral = (await window.bridge.tokens.balance(collateralToken, vaultAddress)).reserved; - // dispatch(updateCollateralAction(balanceLockedCollateral as MonetaryAmount)); - - // if (vaultCollateralization === undefined) { - // dispatch(updateCollateralizationAction('∞')); - // } else { - // // The vault API returns collateralization as a regular number rather than a percentage - // const strVaultCollateralizationPercentage = vaultCollateralization.mul(100).toString(); - // dispatch(updateCollateralizationAction(strVaultCollateralizationPercentage)); - // } - - // toast.success(t('vault.successfully_updated_collateral')); - // setSubmitStatus(STATUSES.RESOLVED); - // onClose(); - } catch (error) { - // toast.error(error.message); - // handleError(error); - setIsSubmitting(false); - } - }; - - const validateCollateralTokenAmount = (value?: string): string | undefined => { - const collateralTokenAmount = newMonetaryAmount(value || '0', collateralToken, true); - - // Collateral update only allowed if above required collateral - if (variant === 'withdraw' && requiredCollateralTokenAmount) { - const maxWithdrawableCollateralTokenAmount = collateralTokenAmount.sub(requiredCollateralTokenAmount); - - return collateralTokenAmount.gt(maxWithdrawableCollateralTokenAmount) - ? t('vault.collateral_below_threshold') - : undefined; - } - - if (collateralTokenAmount.lte(newMonetaryAmount(0, collateralToken, true))) { - return t('vault.collateral_higher_than_0'); - } - - // Represents being less than 1 Planck - if (collateralTokenAmount.toBig(0).lte(1)) { - return 'Please enter an amount greater than 1 Planck'; - } - - // if (collateralBalance && collateralTokenAmount.gt(collateralBalance.transferable)) { - // return t(`Must be less than ${collateralToken.ticker} balance!`); - // } - - if (!bridgeLoaded) { - return 'Bridge must be loaded!'; - } - - return undefined; - }; - - const collateralUSDAmount = getTokenPrice(prices, collateralToken.ticker)?.usd; - const isMinCollateralLoading = requiredCollateralTokenAmountIdle || requiredCollateralTokenAmountLoading; - - const titleId = useId(); - const title = variant === 'deposit' ? 'Deposit Collateral' : 'Withdraw Collateral'; - - // TODO: handle infinity collateralization in form - // const collateralStatus = getCollateralStatus(score, ranges, false); - - return ( -
- - {title} - - - - Current Total Collateral - - {formatNumber(collateral.amount.toNumber())} {collateralToken.ticker} ({formatUSD(collateral.usd)}) - - - - Minimum Required Collateral - - {isMinCollateralLoading ? ( - '-' - ) : ( - <> - {displayMonetaryAmount(requiredCollateralTokenAmount)} {collateralToken.ticker} ( - {displayMonetaryAmountInUSDFormat(requiredCollateralTokenAmount as any, collateralUSDAmount)}) - - )} - - - {/* New Collateralization} - sublabel={{getCollateralStatusLabel(collateralStatus)}} - ranges={ranges} - /> */} - - New liquidation Price - - {formatUSD(12.32)} {collateralToken.ticker} / {formatUSD(42324.32)} BTC - - - - - Fees - - 0.01 KINT ({formatUSD(0.24)}) - - - - - {title} - - -
- ); -}; - -export { CollateralForm }; -export type { CollateralFormProps }; diff --git a/src/pages/Vaults/Vault/components/CollateralForm/index.tsx b/src/pages/Vaults/Vault/components/CollateralForm/index.tsx deleted file mode 100644 index 1e29b6d0c5..0000000000 --- a/src/pages/Vaults/Vault/components/CollateralForm/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { CollateralFormProps } from './CollateralForm'; -export { CollateralForm } from './CollateralForm'; diff --git a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx index 2b8cedbe6b..d372470202 100644 --- a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx +++ b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx @@ -1,13 +1,11 @@ import { CollateralCurrencyExt, newVaultId, WrappedCurrency, WrappedIdLiteral } from '@interlay/interbtc-api'; import Big from 'big.js'; import { useQueryClient } from 'react-query'; -import { toast } from 'react-toastify'; import { formatNumber, formatUSD } from '@/common/utils/utils'; import { CardProps } from '@/component-library'; import { LoadingSpinner } from '@/component-library/LoadingSpinner'; import { GOVERNANCE_TOKEN_SYMBOL, WRAPPED_TOKEN } from '@/config/relay-chains'; -import ErrorModal from '@/legacy-components/ErrorModal'; import { ZERO_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -51,7 +49,6 @@ const Rewards = ({ const transaction = useTransaction(Transaction.REWARDS_WITHDRAW, { onSuccess: () => { queryClient.invalidateQueries(['vaultsOverview', vaultAddress, collateralToken.ticker]); - toast.success('Your rewards were successfully withdrawn.'); } }); @@ -91,14 +88,6 @@ const Rewards = ({ Withdraw all rewards )} - {transaction.isError && ( - transaction.reset()} - title='Error' - description={transaction.error?.message || ''} - /> - )} ); diff --git a/src/pages/Vaults/Vault/components/index.tsx b/src/pages/Vaults/Vault/components/index.tsx index e85ac5e4b4..eefb92e3b4 100644 --- a/src/pages/Vaults/Vault/components/index.tsx +++ b/src/pages/Vaults/Vault/components/index.tsx @@ -1,4 +1,3 @@ -import { CollateralForm, CollateralFormProps } from './CollateralForm'; import { InsightListItem, InsightsList, InsightsListProps } from './InsightsList'; import { PageTitle, PageTitleProps } from './PageTitle'; import { Rewards, RewardsProps } from './Rewards'; @@ -6,9 +5,8 @@ import { TransactionHistory, TransactionHistoryProps } from './TransactionHistor import { VaultCollateral, VaultCollateralProps } from './VaultCollateral'; import { VaultInfo, VaultInfoProps } from './VaultInfo'; -export { CollateralForm, InsightsList, PageTitle, Rewards, TransactionHistory, VaultCollateral, VaultInfo }; +export { InsightsList, PageTitle, Rewards, TransactionHistory, VaultCollateral, VaultInfo }; export type { - CollateralFormProps, InsightListItem, InsightsListProps, PageTitleProps, diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx index 4fbe4efd89..62a3bc21fe 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx @@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { CTA, ModalBody, ModalDivider, ModalFooter, ModalHeader, Span, Stack, TokenInput } from '@/component-library'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; -import ErrorModal from '@/legacy-components/ErrorModal'; import { CREATE_VAULT_DEPOSIT_FIELD, CreateVaultFormData, @@ -38,7 +37,8 @@ const DepositCollateralStep = ({ const { collateral, fee, governance } = useDepositCollateral(collateralCurrency, minCollateralAmount); const transaction = useTransaction(Transaction.VAULTS_REGISTER_NEW_COLLATERAL, { - onSuccess: onSuccessfulDeposit + onSuccess: onSuccessfulDeposit, + showSuccessModal: false }); const validationParams = { @@ -108,14 +108,6 @@ const DepositCollateralStep = ({ - {transaction.isError && ( - transaction.reset()} - title='Error' - description={transaction.error?.message || ''} - /> - )} ); }; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index ca103cb82d..4eeb9f33c4 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -1,21 +1,16 @@ import { CurrencyExt } from '@interlay/interbtc-api'; import { useTranslation } from 'react-i18next'; -import { useMutation } from 'react-query'; import { useDispatch } from 'react-redux'; -import { toast } from 'react-toastify'; import { showBuyModal } from '@/common/actions/general.actions'; import { CTA, CTALink, CTAProps, Divider, Flex, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const queryString = require('query-string'); -const claimVesting = async () => { - await window.bridge.api.tx.vesting.claim(); -}; - type ActionsCellProps = { currency: CurrencyExt; isWrappedToken: boolean; @@ -39,20 +34,9 @@ const ActionsCell = ({ const isMobile = useMediaQuery(theme.breakpoints.down('md')); const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm')); - const handleClaimVestingSuccess = () => { - toast.success('Successfully claimed vesting'); - }; - - const handleClaimVestingError = (error: Error) => { - toast.success(error); - }; - - const claimVestingMutation = useMutation(claimVesting, { - onSuccess: handleClaimVestingSuccess, - onError: handleClaimVestingError - }); + const vestingClaimTransaction = useTransaction(Transaction.VESTING_CLAIM); - const handlePressClaimVesting = () => claimVestingMutation.mutate(); + const handlePressClaimVesting = () => vestingClaimTransaction.execute(); const handlePressBuyGovernance = () => dispatch(showBuyModal(true)); diff --git a/src/parts/Topbar/index.tsx b/src/parts/Topbar/index.tsx index b287a4420d..4b7aa388e4 100644 --- a/src/parts/Topbar/index.tsx +++ b/src/parts/Topbar/index.tsx @@ -9,7 +9,7 @@ import { toast } from 'react-toastify'; import { showAccountModalAction, showSignTermsModalAction } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; -import { FundWallet } from '@/components'; +import { FundWallet, NotificationsPopover } from '@/components'; import { AuthModal, SignTermsModal } from '@/components/AuthModal'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; @@ -21,6 +21,7 @@ import Tokens from '@/legacy-components/Tokens'; import InterlayLink from '@/legacy-components/UI/InterlayLink'; import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; import { BitcoinNetwork } from '@/types/bitcoin'; +import { useNotifications } from '@/utils/context/Notifications'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import { useSignMessage } from '@/utils/hooks/use-sign-message'; @@ -38,6 +39,7 @@ const Topbar = (): JSX.Element => { const isBanxaEnabled = useFeatureFlag(FeatureFlags.BANXA); const { setSelectedAccount, removeSelectedAccount } = useSubstrate(); const { selectProps } = useSignMessage(); + const { list } = useNotifications(); const kintBalanceIsZero = getAvailableBalance('KINT')?.isZero(); @@ -47,6 +49,7 @@ const Topbar = (): JSX.Element => { try { const receiverId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, selectedAccount.address); await window.faucet.fundAccount(receiverId, GOVERNANCE_TOKEN); + // TODO: show new notification toast.success('Your account has been funded.'); } catch (error) { toast.error(`Funding failed. ${error.message}`); @@ -134,6 +137,7 @@ const Topbar = (): JSX.Element => { )} + {accountLabel} diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index c6cd038371..7a62ca51f9 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -1,4 +1,5 @@ import { BANXA_LINK } from '@/config/links'; +import { SUBSCAN_LINK } from '@/config/relay-chains'; const URL_PARAMETERS = Object.freeze({ VAULT: { @@ -35,8 +36,24 @@ const PAGES = Object.freeze({ WALLET: '/wallet' }); +const EXTERNAL_URL_PARAMETERS = Object.freeze({ + SUBSCAN: { + BLOCK: { + HASH: 'hash' + }, + ACCOUNT: { + ADDRESS: 'address' + } + } +}); + const EXTERNAL_PAGES = Object.freeze({ - BANXA: `${BANXA_LINK}` + BANXA: `${BANXA_LINK}`, + SUBSCAN: { + BLOCKS: `${SUBSCAN_LINK}/block`, + BLOCK: `${SUBSCAN_LINK}/block/:${EXTERNAL_URL_PARAMETERS.SUBSCAN.BLOCK.HASH}`, + ACCOUNT: `${SUBSCAN_LINK}/account/:${EXTERNAL_URL_PARAMETERS.SUBSCAN.ACCOUNT.ADDRESS}` + } }); const QUERY_PARAMETERS = Object.freeze({ @@ -60,4 +77,4 @@ const EXTERNAL_QUERY_PARAMETERS = Object.freeze({ } }); -export { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS, PAGES, QUERY_PARAMETERS, URL_PARAMETERS }; +export { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS, EXTERNAL_URL_PARAMETERS, PAGES, QUERY_PARAMETERS, URL_PARAMETERS }; diff --git a/src/utils/context/Notifications.tsx b/src/utils/context/Notifications.tsx new file mode 100644 index 0000000000..3dd7f48752 --- /dev/null +++ b/src/utils/context/Notifications.tsx @@ -0,0 +1,141 @@ +import { Overlay } from '@react-aria/overlays'; +import { mergeProps } from '@react-aria/utils'; +import React, { useEffect, useRef } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { Id as NotificationId, toast, ToastOptions } from 'react-toastify'; + +import { addNotification } from '@/common/actions/general.actions'; +import { Notification, StoreType } from '@/common/types/util.types'; +import { ToastContainer, TransactionToast, TransactionToastProps } from '@/components'; + +import { useWallet } from '../hooks/use-wallet'; + +// Allows the introduction of diferent +// notifications toast beyond transactions +// i.e. claiming faucet funds or sign T&Cs +enum NotificationToast { + TRANSACTION +} + +type NotificationToastAction = { type: NotificationToast.TRANSACTION; props: TransactionToastProps }; + +const toastComponentMap = { [NotificationToast.TRANSACTION]: TransactionToast }; + +type ToastMap = Record; + +type NotifcationInfo = { + // NotificationId - toast is on the screen + // null - toast has been dismissed + // undefined - toast never existed + id: NotificationId | null | undefined; + hasRendered: boolean; + isOnScreen: boolean; +}; + +type NotificationOptions = ToastOptions; + +const toastConfig: NotificationOptions = { + closeButton: false, + autoClose: false, + closeOnClick: false, + draggable: false, + icon: false +}; + +type NotificationsConfig = { + list: Notification[]; + // gets notification meta data + get: (id: number | string) => NotifcationInfo; + // adds to the redux notifications list + add: (notification: Omit) => void; + // renders toast + show: (id: number | string, action: NotificationToastAction) => void; + // removes toast from the screen + dismiss: (id: number | string) => void; +}; + +const defaultContext: NotificationsConfig = {} as NotificationsConfig; + +const NotificationsContext = React.createContext(defaultContext); + +const useNotifications = (): NotificationsConfig => React.useContext(NotificationsContext); + +const NotificationsProvider: React.FC = ({ children }) => { + const toastContainerRef = useRef(null); + + const dispatch = useDispatch(); + + const { account } = useWallet(); + const { notifications } = useSelector((state: StoreType) => state.general); + + const idsMap = useRef({}); + + const get = (id: number | string) => { + const toastId = idsMap.current[id]; + + return { + id: toastId, + hasRendered: toastId === null, + isOnScreen: !!toastId + }; + }; + + const add = (notification: Omit) => + dispatch(addNotification(account?.toString() as string, { ...notification, date: new Date() })); + + const show = (id: number | string, action: NotificationToastAction) => { + const toastInfo = get(id); + + const ToastComponent = toastComponentMap[action.type]; + + const onDismiss = () => dismiss(id); + + const render = ; + + if (toastInfo.id) { + return toast.update(toastInfo.id, { render, ...toastConfig }); + } + + const newToastId = toast(render, toastConfig); + idsMap.current[id] = newToastId; + }; + + const dismiss = (id: number | string) => { + const toasInfo = get(id); + + if (!toasInfo.id) return; + + toast.dismiss(toasInfo.id); + // Set to null, meaning that this toast should never appear again, even if updated + idsMap.current[id] = null; + }; + + // Applying data-react-aria-top-layer="true" makes react-aria overlay consider the element as a visible element. + // Non-visible elements get forced with aria-hidden=true. + // Check: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L32 + useEffect(() => { + if (!toastContainerRef.current) return; + + toastContainerRef.current.setAttribute('data-react-aria-top-layer', 'true'); + }, [toastContainerRef]); + + return ( + + {children} + + + + + ); +}; + +export { NotificationsContext, NotificationsProvider, NotificationToast, useNotifications }; +export type { NotificationToastAction }; diff --git a/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx b/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx index 0aa6d77d05..3facffc723 100644 --- a/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx +++ b/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx @@ -60,6 +60,7 @@ const getNetAPY = ( const totalBorrowApy = borrowPositions.reduce((total, position) => { const { currency } = position.amount; const { borrowApy, borrowReward } = assets[currency.ticker]; + const rewardsApy = getSubsidyRewardApy(currency, borrowReward, prices); const positionApy = borrowApy.sub(rewardsApy || 0); const positionUSDValue = convertMonetaryAmountToValueInUSD( diff --git a/src/utils/hooks/api/use-get-vesting-data.tsx b/src/utils/hooks/api/use-get-vesting-data.tsx index 48972a88f1..5c011ef2cc 100644 --- a/src/utils/hooks/api/use-get-vesting-data.tsx +++ b/src/utils/hooks/api/use-get-vesting-data.tsx @@ -23,7 +23,7 @@ const getVestingData = async (accountId: AccountId): Promise => { const schedules = await window.bridge.api.query.vesting.vestingSchedules(accountId); const schedule = schedules[0]; - const isClaimable = !!schedule && currentBlockNumber > schedule.start + schedule.period; + const isClaimable = !!schedule && currentBlockNumber > schedule.start.toNumber() + schedule.period.toNumber(); return { schedules, diff --git a/src/utils/hooks/transaction/extrinsics/extrinsics.ts b/src/utils/hooks/transaction/extrinsics/extrinsics.ts new file mode 100644 index 0000000000..cf63d868c9 --- /dev/null +++ b/src/utils/hooks/transaction/extrinsics/extrinsics.ts @@ -0,0 +1,46 @@ +import { ExtrinsicData } from '@interlay/interbtc-api'; +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; + +import { Transaction, TransactionActions } from '../types'; +import { getLibExtrinsic } from './lib'; +import { getXCMExtrinsic } from './xcm'; + +/** + * SUMMARY: Maps each transaction to the correct lib call, + * while maintaining a safe-type check. + * HOW TO ADD NEW TRANSACTION: find the correct module to add the transaction + * in the types folder. In case you are adding a new type to the loans modules, go + * to types/loans and add your new transaction as an action. This actions needs to also be added to the + * types/index TransactionActions type. After that, you should be able to add it to the function. + * @param {TransactionActions} params contains the type of transaction and + * the related args to call the mapped lib call + * @return {Promise} every transaction return an extrinsic + */ +const getExtrinsic = async (params: TransactionActions): Promise => { + switch (params.type) { + case Transaction.XCM_TRANSFER: + return getXCMExtrinsic(params); + default: + return getLibExtrinsic(params); + } +}; + +/** + * The status where we want to be notified on the transaction completion + * @param {Transaction} type type of transaction + * @return {ExtrinsicStatus.type} transaction status + */ +const getStatus = (type: Transaction): ExtrinsicStatus['type'] => { + switch (type) { + // When requesting a replace, wait for the finalized event because we cannot revert BTC transactions. + // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 + case Transaction.ISSUE_REQUEST: + case Transaction.REDEEM_REQUEST: + case Transaction.REPLACE_REQUEST: + return 'Finalized'; + default: + return 'InBlock'; + } +}; + +export { getExtrinsic, getStatus }; diff --git a/src/utils/hooks/transaction/extrinsics/index.ts b/src/utils/hooks/transaction/extrinsics/index.ts new file mode 100644 index 0000000000..ff986fb28c --- /dev/null +++ b/src/utils/hooks/transaction/extrinsics/index.ts @@ -0,0 +1 @@ +export { getExtrinsic, getStatus } from './extrinsics'; diff --git a/src/utils/hooks/transaction/utils/extrinsic.ts b/src/utils/hooks/transaction/extrinsics/lib.ts similarity index 70% rename from src/utils/hooks/transaction/utils/extrinsic.ts rename to src/utils/hooks/transaction/extrinsics/lib.ts index 23346819db..0d2b90a727 100644 --- a/src/utils/hooks/transaction/utils/extrinsic.ts +++ b/src/utils/hooks/transaction/extrinsics/lib.ts @@ -1,20 +1,8 @@ import { ExtrinsicData } from '@interlay/interbtc-api'; -import { ExtrinsicStatus } from '@polkadot/types/interfaces'; -import { Transaction, TransactionActions } from '../types'; +import { LibActions, Transaction } from '../types'; -/** - * SUMMARY: Maps each transaction to the correct lib call, - * while maintaining a safe-type check. - * HOW TO ADD NEW TRANSACTION: find the correct module to add the transaction - * in the types folder. In case you are adding a new type to the loans modules, go - * to types/loans and add your new transaction as an action. This actions needs to also be added to the - * types/index TransactionActions type. After that, you should be able to add it to the function. - * @param {TransactionActions} params contains the type of transaction and - * the related args to call the mapped lib call - * @return {Promise} every transaction return an extrinsic - */ -const getExtrinsic = async (params: TransactionActions): Promise => { +const getLibExtrinsic = async (params: LibActions): Promise => { switch (params.type) { /* START - AMM */ case Transaction.AMM_SWAP: @@ -74,18 +62,19 @@ const getExtrinsic = async (params: TransactionActions): Promise return window.bridge.loans.enableAsCollateral(...params.args); /* END - LOANS */ - /* START - LOANS */ + /* START - VAULTS */ case Transaction.VAULTS_DEPOSIT_COLLATERAL: return window.bridge.vaults.depositCollateral(...params.args); case Transaction.VAULTS_WITHDRAW_COLLATERAL: return window.bridge.vaults.withdrawCollateral(...params.args); case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: return window.bridge.vaults.registerNewCollateralVault(...params.args); + /* END - VAULTS */ + /* START - REWARDS */ case Transaction.REWARDS_WITHDRAW: return window.bridge.rewards.withdrawRewards(...params.args); /* START - REWARDS */ - /* END - LOANS */ /* START - ESCROW */ case Transaction.ESCROW_CREATE_LOCK: @@ -109,25 +98,12 @@ const getExtrinsic = async (params: TransactionActions): Promise return { extrinsic: batch }; } /* END - ESCROW */ - } -}; -/** - * The status where we want to be notified on the transaction completion - * @param {Transaction} type type of transaction - * @return {ExtrinsicStatus.type} transaction status - */ -const getStatus = (type: Transaction): ExtrinsicStatus['type'] => { - switch (type) { - // When requesting a replace, wait for the finalized event because we cannot revert BTC transactions. - // For more details see: https://github.com/interlay/interbtc-api/pull/373#issuecomment-1058949000 - case Transaction.ISSUE_REQUEST: - case Transaction.REDEEM_REQUEST: - case Transaction.REPLACE_REQUEST: - return 'Finalized'; - default: - return 'InBlock'; + /* START - VESTING */ + case Transaction.VESTING_CLAIM: + return { extrinsic: window.bridge.api.tx.vesting.claim() }; + /* END - VESTING */ } }; -export { getExtrinsic, getStatus }; +export { getLibExtrinsic }; diff --git a/src/utils/hooks/transaction/extrinsics/xcm.ts b/src/utils/hooks/transaction/extrinsics/xcm.ts new file mode 100644 index 0000000000..785369df31 --- /dev/null +++ b/src/utils/hooks/transaction/extrinsics/xcm.ts @@ -0,0 +1,27 @@ +import { FixedPointNumber } from '@acala-network/sdk-core'; +import { CrossChainTransferParams } from '@interlay/bridge'; +import { ExtrinsicData } from '@interlay/interbtc-api'; + +import { Transaction } from '../types'; +import { XCMActions } from '../types/xcm'; + +const getXCMExtrinsic = async (params: XCMActions): Promise => { + switch (params.type) { + case Transaction.XCM_TRANSFER: { + const [adapter, , toChain, address, transferAmount] = params.args; + + const transferAmountString = transferAmount.toString(true); + const transferAmountDecimals = transferAmount.currency.decimals; + const tx = adapter.createTx({ + amount: FixedPointNumber.fromInner(transferAmountString, transferAmountDecimals), + to: toChain, + token: transferAmount.currency.ticker, + address + } as CrossChainTransferParams); + + return { extrinsic: tx }; + } + } +}; + +export { getXCMExtrinsic }; diff --git a/src/utils/hooks/transaction/types/index.ts b/src/utils/hooks/transaction/types/index.ts index 538f820678..81d43097a0 100644 --- a/src/utils/hooks/transaction/types/index.ts +++ b/src/utils/hooks/transaction/types/index.ts @@ -9,6 +9,8 @@ import { ReplaceActions } from './replace'; import { RewardsActions } from './rewards'; import { TokensActions } from './tokens'; import { VaultsActions } from './vaults'; +import { VestingActions } from './vesting'; +import { XCMActions } from './xcm'; enum Transaction { // Issue @@ -29,6 +31,8 @@ enum Transaction { ESCROW_WITHDRAW = 'ESCROW_WITHDRAW', // Tokens TOKENS_TRANSFER = 'TOKENS_TRANSFER', + // XCM + XCM_TRANSFER = 'XCM_TRANSFER', // Vaults VAULTS_DEPOSIT_COLLATERAL = 'VAULTS_DEPOSIT_COLLATERAL', VAULTS_WITHDRAW_COLLATERAL = 'VAULTS_WITHDRAW_COLLATERAL', @@ -49,7 +53,11 @@ enum Transaction { AMM_SWAP = 'AMM_SWAP', AMM_ADD_LIQUIDITY = 'AMM_ADD_LIQUIDITY', AMM_REMOVE_LIQUIDITY = 'AMM_REMOVE_LIQUIDITY', - AMM_CLAIM_REWARDS = 'AMM_CLAIM_REWARDS' + AMM_CLAIM_REWARDS = 'AMM_CLAIM_REWARDS', + // Vesting + VESTING_CLAIM = 'VESTING_CLAIM', + // Faucet + FAUCET_FUND_WALLET = 'FAUCET_FUND_WALLET' } type TransactionEvents = { @@ -59,10 +67,11 @@ type TransactionEvents = { interface TransactionAction { accountAddress: string; events: TransactionEvents; + timestamp: number; customStatus?: ExtrinsicStatus['type']; } -type TransactionActions = +type LibActions = | EscrowActions | IssueActions | RedeemActions @@ -71,9 +80,19 @@ type TransactionActions = | LoansActions | AMMActions | VaultsActions - | RewardsActions; + | RewardsActions + | VestingActions; + +type TransactionActions = XCMActions | LibActions; type TransactionArgs = Extract['args']; -export { Transaction }; -export type { TransactionAction, TransactionActions, TransactionArgs, TransactionEvents }; +enum TransactionStatus { + CONFIRM, + SUBMITTING, + SUCCESS, + ERROR +} + +export { Transaction, TransactionStatus }; +export type { LibActions, TransactionAction, TransactionActions, TransactionArgs, TransactionEvents, XCMActions }; diff --git a/src/utils/hooks/transaction/types/vesting.ts b/src/utils/hooks/transaction/types/vesting.ts new file mode 100644 index 0000000000..ab4ce9a00e --- /dev/null +++ b/src/utils/hooks/transaction/types/vesting.ts @@ -0,0 +1,13 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '.'; +import { TransactionAction } from '.'; + +interface VestingClaimAction extends TransactionAction { + type: Transaction.VESTING_CLAIM; + args: Parameters; +} + +type VestingActions = VestingClaimAction; + +export type { VestingActions }; diff --git a/src/utils/hooks/transaction/types/xcm.ts b/src/utils/hooks/transaction/types/xcm.ts new file mode 100644 index 0000000000..71b0276c11 --- /dev/null +++ b/src/utils/hooks/transaction/types/xcm.ts @@ -0,0 +1,21 @@ +import { ChainName } from '@interlay/bridge'; +import { BaseCrossChainAdapter } from '@interlay/bridge/build/base-chain-adapter'; +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; + +import { Transaction, TransactionAction } from '.'; + +interface XCMTransferAction extends TransactionAction { + type: Transaction.XCM_TRANSFER; + args: [ + adapter: BaseCrossChainAdapter, + fromChain: ChainName, + toChain: ChainName, + destinatary: string, + transferAmount: MonetaryAmount + ]; +} + +type XCMActions = XCMTransferAction; + +export type { XCMActions }; diff --git a/src/utils/hooks/transaction/use-transaction-notifications.tsx b/src/utils/hooks/transaction/use-transaction-notifications.tsx new file mode 100644 index 0000000000..abcb7fda2e --- /dev/null +++ b/src/utils/hooks/transaction/use-transaction-notifications.tsx @@ -0,0 +1,107 @@ +import { ISubmittableResult } from '@polkadot/types/types'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; + +import { updateTransactionModal } from '@/common/actions/general.actions'; +import { TransactionModalData } from '@/common/types/util.types'; +import { EXTERNAL_PAGES, EXTERNAL_URL_PARAMETERS } from '@/utils/constants/links'; +import { NotificationToast, NotificationToastAction, useNotifications } from '@/utils/context/Notifications'; + +import { TransactionActions, TransactionStatus } from './types'; +import { TransactionResult } from './use-transaction'; +import { getTransactionDescription } from './utils/description'; + +type TransactionNotificationsOptions = { + showSuccessModal?: boolean; +}; + +type UseTransactionNotificationsResult = { + onReject: (error?: Error) => void; + mutationProps: { + onMutate: (variables: TransactionActions) => void; + onSigning: (variables: TransactionActions) => void; + onSuccess: (data: TransactionResult, variables: TransactionActions) => void; + onError: (error: Error, variables: TransactionActions, context: unknown) => void; + }; +}; + +// Handles both transactions notifications and modal +const useTransactionNotifications = ({ + showSuccessModal = true +}: TransactionNotificationsOptions): UseTransactionNotificationsResult => { + const { t } = useTranslation(); + + const notifications = useNotifications(); + + const dispatch = useDispatch(); + + const handleModalOrToast = ( + status: TransactionStatus, + variables: TransactionActions, + data?: ISubmittableResult, + error?: Error + ) => { + const toastInfo = notifications.get(variables.timestamp); + + const url = + data?.txHash && + EXTERNAL_PAGES.SUBSCAN.BLOCK.replace(`:${EXTERNAL_URL_PARAMETERS.SUBSCAN.BLOCK.HASH}`, data.txHash.toString()); + + const description = getTransactionDescription(variables, status, t); + + // Add notification to history if status is SUCCESS or ERROR + if (description && (status === TransactionStatus.SUCCESS || status === TransactionStatus.ERROR)) { + notifications.add({ description, status, url }); + } + + // If toast already rendered, it means that the user did already dismiss the transaction modal and the toast + if (toastInfo.hasRendered) return; + + // creating or updating notification + if (toastInfo.isOnScreen) { + const toastAction: NotificationToastAction = { + type: NotificationToast.TRANSACTION, + props: { + variant: status, + url, + errorMessage: error?.message, + description + } + }; + + return notifications.show(variables.timestamp, toastAction); + } + + // only reach here if the modal has not been dismissed + const modalData: TransactionModalData = { + url, + description, + variant: status, + errorMessage: error?.message, + timestamp: variables?.timestamp + }; + + const isModalOpen = status === TransactionStatus.SUCCESS ? showSuccessModal : true; + + return dispatch(updateTransactionModal(isModalOpen, modalData)); + }; + + const handleSuccess = (result: TransactionResult, variables: TransactionActions) => { + const status = result.status === 'error' ? TransactionStatus.ERROR : TransactionStatus.SUCCESS; + + handleModalOrToast(status, variables, result.data, result.error); + }; + + return { + onReject: (error) => + dispatch(updateTransactionModal(true, { variant: TransactionStatus.ERROR, errorMessage: error?.message })), + mutationProps: { + onMutate: (variables) => handleModalOrToast(TransactionStatus.CONFIRM, variables), + onSigning: (variables) => handleModalOrToast(TransactionStatus.SUBMITTING, variables), + onSuccess: (result, variables) => handleSuccess(result, variables), + onError: (error, variables) => handleModalOrToast(TransactionStatus.ERROR, variables, undefined, error) + } + }; +}; + +export { useTransactionNotifications }; diff --git a/src/utils/hooks/transaction/use-transaction.ts b/src/utils/hooks/transaction/use-transaction.ts index d18291f94c..3fa2cda32e 100644 --- a/src/utils/hooks/transaction/use-transaction.ts +++ b/src/utils/hooks/transaction/use-transaction.ts @@ -1,51 +1,62 @@ import { ExtrinsicStatus } from '@polkadot/types/interfaces'; import { ISubmittableResult } from '@polkadot/types/types'; -import { useCallback } from 'react'; +import { mergeProps } from '@react-aria/utils'; +import { useCallback, useState } from 'react'; import { MutationFunction, useMutation, UseMutationOptions, UseMutationResult } from 'react-query'; import { useSubstrate } from '@/lib/substrate'; +import { getExtrinsic, getStatus } from './extrinsics'; import { Transaction, TransactionActions, TransactionArgs } from './types'; -import { getExtrinsic, getStatus } from './utils/extrinsic'; +import { useTransactionNotifications } from './use-transaction-notifications'; import { submitTransaction } from './utils/submit'; -type UseTransactionOptions = Omit< - UseMutationOptions, - 'mutationFn' -> & { - customStatus?: ExtrinsicStatus['type']; -}; +type TransactionResult = { status: 'success' | 'error'; data: ISubmittableResult; error?: Error }; // TODO: add feeEstimate and feeEstimateAsync type ExecuteArgs = { // Executes the transaction execute(...args: TransactionArgs): void; // Similar to execute but returns a promise which can be awaited. - executeAsync(...args: TransactionArgs): Promise; + executeAsync(...args: TransactionArgs): Promise; }; // TODO: add feeEstimate and feeEstimateAsync type ExecuteTypeArgs = { execute(type: D, ...args: TransactionArgs): void; - executeAsync(type: D, ...args: TransactionArgs): Promise; + executeAsync(type: D, ...args: TransactionArgs): Promise; }; -type InheritAttrs = Omit< - UseMutationResult, +type ExecuteFunctions = ExecuteArgs | ExecuteTypeArgs; + +type ReactQueryUseMutationResult = Omit< + UseMutationResult, 'mutate' | 'mutateAsync' >; -type UseTransactionResult = InheritAttrs & (ExecuteArgs | ExecuteTypeArgs); +type UseTransactionResult = { + reject: (error?: Error) => void; + isSigned: boolean; +} & ReactQueryUseMutationResult & + ExecuteFunctions; -const mutateTransaction: MutationFunction = async (params) => { +const mutateTransaction: MutationFunction = async (params) => { const extrinsics = await getExtrinsic(params); const expectedStatus = params.customStatus || getStatus(params.type); return submitTransaction(window.bridge.api, params.accountAddress, extrinsics, expectedStatus, params.events); }; +type UseTransactionOptions = Omit< + UseMutationOptions, + 'mutationFn' +> & { + customStatus?: ExtrinsicStatus['type']; + onSigning?: (variables: TransactionActions) => void; + showSuccessModal?: boolean; +}; + // The three declared functions are use to infer types on diferent implementations -// TODO: missing xcm transaction function useTransaction( type: T, options?: UseTransactionOptions @@ -59,13 +70,31 @@ function useTransaction( ): UseTransactionResult { const { state } = useSubstrate(); - const hasOnlyOptions = typeof typeOrOptions !== 'string'; + const [isSigned, setSigned] = useState(false); + + const { showSuccessModal, customStatus, ...mutateOptions } = + (typeof typeOrOptions === 'string' ? options : typeOrOptions) || {}; - const { mutate, mutateAsync, ...transactionMutation } = useMutation( - mutateTransaction, - (hasOnlyOptions ? typeOrOptions : options) as UseTransactionOptions + const notifications = useTransactionNotifications({ showSuccessModal }); + + const handleMutate = () => setSigned(false); + + const handleSigning = () => setSigned(true); + + const handleError = (error: Error) => console.error(error.message); + + const { onSigning, ...optionsProp } = mergeProps( + mutateOptions, + { + onMutate: handleMutate, + onSigning: handleSigning, + onError: handleError + }, + notifications.mutationProps ); + const { mutate, mutateAsync, ...transactionMutation } = useMutation(mutateTransaction, optionsProp); + // Handles params for both type of implementations const getParams = useCallback( (args: Parameters['execute']>) => { @@ -83,14 +112,21 @@ function useTransaction( // Execution should only ran when authenticated const accountAddress = state.selectedAccount?.address; - // TODO: add event `onReady` - return { + const variables = { ...params, accountAddress, - customStatus: options?.customStatus + timestamp: new Date().getTime(), + customStatus } as TransactionActions; + + return { + ...variables, + events: { + onReady: () => onSigning(variables) + } + }; }, - [options?.customStatus, state.selectedAccount?.address, typeOrOptions] + [onSigning, customStatus, state.selectedAccount?.address, typeOrOptions] ); const handleExecute = useCallback( @@ -111,12 +147,23 @@ function useTransaction( [getParams, mutateAsync] ); + const handleReject = (error?: Error) => { + notifications.onReject(error); + setSigned(false); + + if (error) { + console.error(error.message); + } + }; + return { ...transactionMutation, + isSigned, + reject: handleReject, execute: handleExecute, executeAsync: handleExecuteAsync }; } export { useTransaction }; -export type { UseTransactionResult }; +export type { TransactionResult, UseTransactionResult }; diff --git a/src/utils/hooks/transaction/utils/description.ts b/src/utils/hooks/transaction/utils/description.ts new file mode 100644 index 0000000000..f79c121332 --- /dev/null +++ b/src/utils/hooks/transaction/utils/description.ts @@ -0,0 +1,363 @@ +import { StringMap, TOptions } from 'i18next'; +import { TFunction } from 'react-i18next'; + +import { shortAddress } from '@/common/utils/utils'; + +import { Transaction, TransactionActions, TransactionStatus } from '../types'; + +const getTranslationArgs = ( + params: TransactionActions, + status: TransactionStatus +): { key: string; args?: TOptions } | undefined => { + const isPast = status === TransactionStatus.SUCCESS; + + switch (params.type) { + /* START - AMM */ + case Transaction.AMM_SWAP: { + const [trade] = params.args; + + return { + key: isPast ? 'transaction.swapped_to' : 'transaction.swapping_to', + args: { + fromAmount: trade.inputAmount.toHuman(), + fromCurrency: trade.inputAmount.currency.ticker, + toAmount: trade.outputAmount.toHuman(), + toCurrency: trade.outputAmount.currency.ticker + } + }; + } + case Transaction.AMM_ADD_LIQUIDITY: { + const [, pool] = params.args; + + return { + key: isPast ? 'transaction.added_liquidity_to_pool' : 'transaction.adding_liquidity_to_pool', + args: { + poolName: pool.lpToken.ticker + } + }; + } + case Transaction.AMM_REMOVE_LIQUIDITY: { + const [, pool] = params.args; + + return { + key: isPast ? 'transaction.removed_liquidity_from_pool' : 'transaction.removing_liquidity_from_pool', + args: { + poolName: pool.lpToken.ticker + } + }; + } + case Transaction.AMM_CLAIM_REWARDS: { + return { + key: isPast ? 'transaction.claimed_pool_rewards' : 'transaction.claiming_pool_rewards' + }; + } + /* END - AMM */ + + /* START - ISSUE */ + case Transaction.ISSUE_REQUEST: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.issued_amount' : 'transaction.issuing_amount', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.ISSUE_EXECUTE: { + return { + key: isPast ? 'transaction.executed_issue' : 'transaction.executing_issue' + }; + } + /* END - ISSUE */ + + /* START - REDEEM */ + case Transaction.REDEEM_CANCEL: { + const [redeemId, isReimburse] = params.args; + + const args = { + requestId: shortAddress(redeemId) + }; + + if (isReimburse) { + return { + key: isPast ? 'transaction.reimbersed_redeem_id' : 'transaction.reimbursing_redeem_id', + args + }; + } + + return { + key: isPast ? 'transaction.retried_redeem_id' : 'transaction.retrying_redeem_id', + args + }; + } + case Transaction.REDEEM_BURN: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.burned_amount' : 'transaction.burning_amount', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.REDEEM_REQUEST: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.redeemed_amount' : 'transaction.redeeming_amount', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + /* END - REDEEM */ + + /* START - REPLACE */ + case Transaction.REPLACE_REQUEST: { + return { + key: isPast ? 'transaction.requested_vault_replacement' : 'transaction.requesting_vault_replacement' + }; + } + /* END - REPLACE */ + + /* START - TOKENS */ + case Transaction.TOKENS_TRANSFER: { + const [destination, amount] = params.args; + + return { + key: isPast ? 'transaction.transfered_amount_to_address' : 'transaction.transfering_amount_to_address', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker, + address: shortAddress(destination) + } + }; + } + /* END - TOKENS */ + + /* START - XCM */ + case Transaction.XCM_TRANSFER: { + const [, fromChain, toChain, , transferAmount] = params.args; + + return { + key: isPast + ? 'transaction.transfered_amount_from_chain_to_chain' + : 'transaction.transfering_amount_from_chain_to_chain', + args: { + amount: transferAmount.toHuman(), + currency: transferAmount.currency.ticker, + fromChain: fromChain.toUpperCase(), + toChain: toChain.toUpperCase() + } + }; + } + /* END - XCM */ + + /* START - LOANS */ + case Transaction.LOANS_CLAIM_REWARDS: { + return { + key: isPast ? 'transaction.claimed_lending_rewards' : 'transaction.claiming_lending_rewards' + }; + } + case Transaction.LOANS_BORROW: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.borrowed_amount' : 'transaction.borrowing_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.LOANS_LEND: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.lent_amount' : 'transaction.lending_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.LOANS_REPAY: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.repaid_amount' : 'transaction.repaying_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.LOANS_REPAY_ALL: { + const [currency] = params.args; + + return { + key: isPast ? 'transaction.repaid' : 'transaction.repaying', + args: { + currency: currency.ticker + } + }; + } + case Transaction.LOANS_WITHDRAW: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.withdrew_amount' : 'transaction.withdrawing_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.LOANS_WITHDRAW_ALL: { + const [currency] = params.args; + + return { + key: isPast ? 'transaction.withdrew' : 'transaction.withdrawing', + args: { + currency: currency.ticker + } + }; + } + case Transaction.LOANS_DISABLE_COLLATERAL: { + const [currency] = params.args; + + return { + key: isPast ? 'transaction.disabled_loan_as_collateral' : 'transaction.disabling_loan_as_collateral', + args: { + currency: currency.ticker + } + }; + } + case Transaction.LOANS_ENABLE_COLLATERAL: { + const [currency] = params.args; + + return { + key: isPast ? 'transaction.enabled_loan_as_collateral' : 'transaction.enabling_loan_as_collateral', + args: { + currency: currency.ticker + } + }; + } + /* END - LOANS */ + + /* START - VAULTS */ + case Transaction.VAULTS_DEPOSIT_COLLATERAL: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.deposited_amount_to_vault' : 'transaction.depositing_amount_to_vault', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.VAULTS_WITHDRAW_COLLATERAL: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.withdrew_amount_from_vault' : 'transaction.withdrawing_amount_from_vault', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: { + const [collateralAmount] = params.args; + + return { + key: isPast ? 'transaction.created_currency_vault' : 'transaction.creating_currency_vault', + args: { + currency: collateralAmount.currency.ticker + } + }; + } + /* END - VAULTS */ + + /* START - REWARDS */ + case Transaction.REWARDS_WITHDRAW: { + return { + key: isPast ? 'transaction.claimed_vault_rewards' : 'transaction.claiming_vault_rewards' + }; + } + /* START - REWARDS */ + + /* START - ESCROW */ + case Transaction.ESCROW_CREATE_LOCK: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.staked_amount' : 'transaction.staking_amount', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.ESCROW_INCREASE_LOCKED_AMOUNT: { + const [amount] = params.args; + + return { + key: isPast ? 'transaction.added_amount_to_staked_amount' : 'transaction.adding_amount_to_staked_amount', + args: { + amount: amount.toHuman(), + currency: amount.currency.ticker + } + }; + } + case Transaction.ESCROW_INCREASE_LOCKED_TIME: { + return { + key: isPast ? 'transaction.increased_stake_lock_time' : 'transaction.increasing_stake_lock_time' + }; + } + case Transaction.ESCROW_WITHDRAW: { + return { + key: isPast ? 'transaction.withdrew_stake' : 'transaction.withdrawing_stake' + }; + } + case Transaction.ESCROW_WITHDRAW_REWARDS: { + return { + key: isPast ? 'transaction.claimed_staking_rewards' : 'transaction.claiming_staking_rewards' + }; + } + case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: { + return { + key: isPast + ? 'transaction.increased_stake_locked_time_amount' + : 'transaction.increasing_stake_locked_time_amount' + }; + } + /* END - ESCROW */ + /* START - VESTING */ + case Transaction.VESTING_CLAIM: { + return { + key: isPast ? 'transaction.claimed_vesting' : 'transaction.claiming_vesting' + }; + } + /* END - VESTING */ + } +}; + +const getTransactionDescription = ( + params: TransactionActions, + status: TransactionStatus, + t: TFunction +): string | undefined => { + const translation = getTranslationArgs(params, status); + + if (!translation) return; + + return t(translation.key, translation.args); +}; + +export { getTransactionDescription }; diff --git a/src/utils/hooks/transaction/utils/submit.ts b/src/utils/hooks/transaction/utils/submit.ts index d1c832b023..ceb930d7db 100644 --- a/src/utils/hooks/transaction/utils/submit.ts +++ b/src/utils/hooks/transaction/utils/submit.ts @@ -6,12 +6,10 @@ import { ExtrinsicStatus } from '@polkadot/types/interfaces/author'; import { ISubmittableResult } from '@polkadot/types/types'; import { TransactionEvents } from '../types'; +import { TransactionResult } from '../use-transaction'; type HandleTransactionResult = { result: ISubmittableResult; unsubscribe: () => void }; -// When passing { nonce: -1 } to signAndSend the API will use system.accountNextIndex to determine the nonce -const transactionOptions = { nonce: -1 }; - const handleTransaction = async ( account: AddressOrPair, extrinsicData: ExtrinsicData, @@ -27,7 +25,7 @@ const handleTransaction = async ( let unsubscribe: () => void; (extrinsicData.extrinsic as SubmittableExtrinsic<'promise'>) - .signAndSend(account, transactionOptions, callback) + .signAndSend(account, { nonce: -1 }, callback) .then((unsub) => (unsubscribe = unsub)) .catch((error) => reject(error)); @@ -43,7 +41,7 @@ const handleTransaction = async ( isComplete = expectedStatus === result.status.type; } - if (isComplete) { + if (isComplete || result.status.isUsurped) { resolve({ unsubscribe, result }); } } @@ -53,25 +51,20 @@ const handleTransaction = async ( const getErrorMessage = (api: ApiPromise, dispatchError: DispatchError) => { const { isModule, asModule, isBadOrigin } = dispatchError; - // Construct error message - const message = 'The transaction failed.'; - // Runtime error in one of the parachain modules if (isModule) { // for module errors, we have the section indexed, lookup const decoded = api.registry.findMetaError(asModule); const { docs, name, section } = decoded; - return message.concat(` The error code is ${section}.${name}. ${docs.join(' ')}`); + return `The error code is ${section}.${name}. ${docs.join(' ')}.`; } // Bad origin if (isBadOrigin) { - return message.concat( - ` The error is caused by using an incorrect account. The error code is BadOrigin ${dispatchError}.` - ); + return `The error is caused by using an incorrect account. The error code is BadOrigin ${dispatchError}.`; } - return message.concat(` The error is ${dispatchError}.`); + return `The error is ${dispatchError}.`; }; /** @@ -89,19 +82,29 @@ const submitTransaction = async ( extrinsicData: ExtrinsicData, expectedStatus?: ExtrinsicStatus['type'], callbacks?: TransactionEvents -): Promise => { +): Promise => { const { result, unsubscribe } = await handleTransaction(account, extrinsicData, expectedStatus, callbacks); unsubscribe(); + let error: Error | undefined; + const { dispatchError } = result; if (dispatchError) { - const message = getErrorMessage(api, dispatchError); - throw new Error(message); + error = new Error(getErrorMessage(api, dispatchError)); + } + + // TODO: determine a description to when transaction ends up usurped + if (result.status.isUsurped) { + error = new Error(); } - return result; + return { + status: error ? 'error' : 'success', + data: result, + error + }; }; export { submitTransaction }; diff --git a/src/utils/hooks/use-copy-tooltip.tsx b/src/utils/hooks/use-copy-tooltip.tsx index 36ec13ccd4..42ce3c1fcc 100644 --- a/src/utils/hooks/use-copy-tooltip.tsx +++ b/src/utils/hooks/use-copy-tooltip.tsx @@ -15,6 +15,7 @@ type CopyTooltipResult = { }; }; +// FIX: is openning tooltip too fast const useCopyTooltip = (props?: CopyTooltipProp): CopyTooltipResult => { const { t } = useTranslation(); diff --git a/src/utils/hooks/use-countdown.ts b/src/utils/hooks/use-countdown.ts new file mode 100644 index 0000000000..49e74aa05d --- /dev/null +++ b/src/utils/hooks/use-countdown.ts @@ -0,0 +1,67 @@ +import { useCallback, useEffect, useState } from 'react'; +import { useInterval } from 'react-use'; + +import { theme } from '@/component-library'; +import { useWindowFocus } from '@/utils/hooks/use-window-focus'; + +type UseCountdownProps = { + value?: number; + timeout?: number; + disabled?: boolean; + onEndCountdown?: () => void; +}; + +type UseCountdownResult = { + value: number; + start: () => void; + stop: () => void; +}; + +const useCountdown = ({ + value = 100, + timeout = 8000, + disabled, + onEndCountdown +}: UseCountdownProps): UseCountdownResult => { + const windowFocused = useWindowFocus(); + + const [countdown, setProgress] = useState(value); + const [isRunning, setRunning] = useState(disabled); + + // handles the countdown + useInterval( + () => setProgress((prev) => prev - 1), + isRunning ? timeout / theme.transition.duration.duration100 : null + ); + + const handleStartCountdown = useCallback(() => { + const shouldRun = !disabled && countdown > 0; + setRunning(shouldRun); + }, [countdown, disabled]); + + const handleStopCountdown = () => setRunning(false); + + useEffect(() => { + if (isRunning && countdown === 0) { + onEndCountdown?.(); + handleStopCountdown(); + } + }, [isRunning, countdown, onEndCountdown]); + + useEffect(() => { + if (windowFocused && !disabled) { + handleStartCountdown(); + } else { + handleStopCountdown(); + } + }, [windowFocused, handleStartCountdown, disabled]); + + return { + value: countdown, + start: handleStartCountdown, + stop: handleStopCountdown + }; +}; + +export { useCountdown }; +export type { UseCountdownProps, UseCountdownResult }; diff --git a/src/utils/hooks/use-sign-message.ts b/src/utils/hooks/use-sign-message.ts index 78ef745257..ef57dbdfd0 100644 --- a/src/utils/hooks/use-sign-message.ts +++ b/src/utils/hooks/use-sign-message.ts @@ -96,6 +96,7 @@ const useSignMessage = (): UseSignMessageResult => { queryFn: () => selectedAccount && getSignature(selectedAccount) }); + // TODO: add new notification const signMessageMutation = useMutation((account: KeyringPair) => postSignature(account), { onError: (_, variables) => { setSignature(variables.address, false); diff --git a/src/utils/hooks/use-update-query-parameters.ts b/src/utils/hooks/use-update-query-parameters.ts index 80ba8ff7ed..9970299c52 100644 --- a/src/utils/hooks/use-update-query-parameters.ts +++ b/src/utils/hooks/use-update-query-parameters.ts @@ -13,7 +13,7 @@ const useUpdateQueryParameters = (): ((newQueryParameters: QueryParameters) => v ...newQueryParameters }; - history.push({ + history.replace({ ...location, search: queryString.stringify(queryParameters) }); diff --git a/src/utils/hooks/use-window-focus.ts b/src/utils/hooks/use-window-focus.ts new file mode 100644 index 0000000000..27d63b7c54 --- /dev/null +++ b/src/utils/hooks/use-window-focus.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from 'react'; + +const hasFocus = () => typeof document !== 'undefined' && document.hasFocus(); + +const useWindowFocus = (): boolean => { + const [focused, setFocused] = useState(hasFocus); // Focus for first render + + useEffect(() => { + setFocused(hasFocus()); // Focus for additional renders + + const onFocus = () => setFocused(true); + const onBlur = () => setFocused(false); + + window.addEventListener('focus', onFocus); + window.addEventListener('blur', onBlur); + + return () => { + window.removeEventListener('focus', onFocus); + window.removeEventListener('blur', onBlur); + }; + }, []); + + return focused; +}; + +export { useWindowFocus }; diff --git a/yarn.lock b/yarn.lock index f662a8bcb9..bdfcd1b1a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2120,15 +2120,16 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.2.4": - version "2.2.4" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.2.4.tgz#28b429d066d35f77fdc72f4cf57e2452507c37f7" - integrity sha512-cJxSE7J41JPE8QhV0YiLCJEfvpv9JcSWmieITTSOWQCW8GFFXnSTU0iPA2Tgw6s9ea3uxoM2DLGhlDQL8c0ktw== +"@interlay/interbtc-api@2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.1.tgz#99bd9058453f6125d0fe1aa7bae208acda3191ed" + integrity sha512-XTbFNz0W/ev9cLfO0hKOfoPa79ARUrhKItrNolA98n055DMWHS7Lu9P1HUBG9KfKvgoiB5hQBo1Gc4hG+oPKQg== dependencies: "@interlay/esplora-btc-api" "0.4.0" "@interlay/interbtc-types" "1.12.0" "@interlay/monetary-js" "0.7.3" "@polkadot/api" "9.14.2" + "@types/bitcoinjs-lib" "^5.0.0" big.js "6.1.1" bitcoin-core "^3.0.0" bitcoinjs-lib "^5.2.0" @@ -2156,15 +2157,6 @@ big.js "6.1.1" typescript "^4.3.2" -"@interlay/monetary-js@0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@interlay/monetary-js/-/monetary-js-0.7.3.tgz#0bf4c56b15fde2fd0573e6cac185b0703f368133" - integrity sha512-LbCtLRNjl1/LO8R1ay6lJwKgOC/J40YywF+qSuQ7hEjLIkAslY5dLH11heQgQW9hOmqCSS5fTUQWXhmYQr6Ksg== - dependencies: - "@types/big.js" "6.1.2" - big.js "6.1.1" - typescript "^4.3.2" - "@internationalized/date@^3.0.1": version "3.0.1" resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.1.tgz#66332e9ca8f59b7be010ca65d946bca430ba4b66" @@ -2574,6 +2566,11 @@ resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.2.0.tgz#a3150eeb09cc7ab207ebf6d7b9ad311a9bdbed12" integrity sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ== +"@noble/hashes@^1.2.0": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9" + integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA== + "@noble/secp256k1@1.7.1": version "1.7.1" resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c" @@ -6004,6 +6001,13 @@ resolved "https://registry.yarnpkg.com/@types/big.js/-/big.js-6.1.2.tgz#68a952b629a6aaa2b5855a2f63363d1e77f6dd91" integrity sha512-h24JIZ52rvSvi2jkpYDk2yLH99VzZoCJiSfDWwjst7TwJVuXN61XVCUlPCzRl7mxKEMsGf8z42Q+J4TZwU3z2w== +"@types/bitcoinjs-lib@^5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@types/bitcoinjs-lib/-/bitcoinjs-lib-5.0.0.tgz#f2905d673d1c4b42a91d64d95f1c464f1a48cb56" + integrity sha512-9zXjgmH2E8qEZ9gQ9GH+I6Cze3bweQbyXtR/X4RD3SdR5I4jdRPvmBrKmjegV3HZG03KNricjEoq+lQUtIXCKQ== + dependencies: + bitcoinjs-lib "*" + "@types/bn.js@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-5.1.1.tgz#b51e1b55920a4ca26e9285ff79936bbdec910682" @@ -7727,6 +7731,11 @@ base-x@^3.0.2: dependencies: safe-buffer "^5.0.1" +base-x@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a" + integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw== + base64-js@^1.0.2, base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -7762,6 +7771,11 @@ bech32@1.1.4, bech32@^1.1.2: resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9" integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ== +bech32@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/bech32/-/bech32-2.0.0.tgz#078d3686535075c8c79709f054b1b226a133b355" + integrity sha512-LcknSilhIGatDAsY1ak2I8VtGaHNhgMSYVxFrGLXv+xLHytaKZKcaUJJUE7qmBr7h33o5YQwP55pMI0xmkpJwg== + before-after-hook@^2.2.0: version "2.2.3" resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c" @@ -7831,6 +7845,11 @@ bip174@^2.0.1: resolved "https://registry.yarnpkg.com/bip174/-/bip174-2.0.1.tgz#39cf8ca99e50ce538fb762589832f4481d07c254" integrity sha512-i3X26uKJOkDTAalYAp0Er+qGMDhrbbh2o93/xiPyAN2s25KrClSpe3VXo/7mNJoqA5qfko8rLS2l3RWZgYmjKQ== +bip174@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/bip174/-/bip174-2.1.0.tgz#cd3402581feaa5116f0f00a0eaee87a5843a2d30" + integrity sha512-lkc0XyiX9E9KiVAS1ZiOqK1xfiwvf4FXDDdkDq5crcDzOq+xGytY+14qCsqz7kCiy8rpN1CRNfacRhf9G3JNSA== + bip32@^2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/bip32/-/bip32-2.0.6.tgz#6a81d9f98c4cd57d05150c60d8f9e75121635134" @@ -7869,6 +7888,18 @@ bitcoin-ops@^1.3.0, bitcoin-ops@^1.4.0: resolved "https://registry.yarnpkg.com/bitcoin-ops/-/bitcoin-ops-1.4.1.tgz#e45de620398e22fd4ca6023de43974ff42240278" integrity sha512-pef6gxZFztEhaE9RY9HmWVmiIHqCb2OyS4HPKkpc6CIiiOa3Qmuoylxc5P2EkU3w+5eTSifI9SEZC88idAIGow== +bitcoinjs-lib@*: + version "6.1.1" + resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-6.1.1.tgz#3950c29fd96f07131e41a36a265b17ebd02b4a11" + integrity sha512-FYihfgTk29lt1eK2y48OtuarEDUnTprNBW3ctT8yHiOhvmeS3DzAVG6gI0VCvMkydz6UdlXlYNWIPqGD0SUYRQ== + dependencies: + "@noble/hashes" "^1.2.0" + bech32 "^2.0.0" + bip174 "^2.1.0" + bs58check "^3.0.1" + typeforce "^1.11.3" + varuint-bitcoin "^1.1.2" + bitcoinjs-lib@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-5.2.0.tgz#caf8b5efb04274ded1b67e0706960b93afb9d332" @@ -8121,6 +8152,13 @@ bs58@^4.0.0: dependencies: base-x "^3.0.2" +bs58@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279" + integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ== + dependencies: + base-x "^4.0.0" + bs58check@<3.0.0, bs58check@^2.0.0, bs58check@^2.1.1, bs58check@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" @@ -8130,6 +8168,14 @@ bs58check@<3.0.0, bs58check@^2.0.0, bs58check@^2.1.1, bs58check@^2.1.2: create-hash "^1.1.0" safe-buffer "^5.1.2" +bs58check@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-3.0.1.tgz#2094d13720a28593de1cba1d8c4e48602fdd841c" + integrity sha512-hjuuJvoWEybo7Hn/0xOrczQKKEKD63WguEjlhLExYs2wUBcebDC1jDNK17eEAD2lYfw82d5ASC1d7K3SWszjaQ== + dependencies: + "@noble/hashes" "^1.2.0" + bs58 "^5.0.0" + bser@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -17669,16 +17715,14 @@ react-table@^7.6.3: resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912" integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA== -react-toastify@^6.0.5: - version "6.2.0" - resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-6.2.0.tgz#f2d76747c70b9de91f71f253d9feae6b53dc836c" - integrity sha512-XpjFrcBhQ0/nBOL4syqgP/TywFnOyxmstYLWgSQWcj39qpp+WU4vPt3C/ayIDx7RFyxRWfzWTdR2qOcDGo7G0w== +react-toastify@^9.1.2: + version "9.1.2" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.2.tgz#293aa1f952240129fe485ae5cb2f8d09c652cf3f" + integrity sha512-PBfzXO5jMGEtdYR5jxrORlNZZe/EuOkwvwKijMatsZZm8IZwLj01YvobeJYNjFcA6uy6CVrx2fzL9GWbhWPTDA== dependencies: clsx "^1.1.1" - prop-types "^15.7.2" - react-transition-group "^4.4.1" -react-transition-group@^4.4.1, react-transition-group@^4.4.5: +react-transition-group@^4.4.5: version "4.4.5" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== @@ -20553,7 +20597,7 @@ value-equal@^1.0.1: resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== -varuint-bitcoin@^1.0.4: +varuint-bitcoin@^1.0.4, varuint-bitcoin@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/varuint-bitcoin/-/varuint-bitcoin-1.1.2.tgz#e76c138249d06138b480d4c5b40ef53693e24e92" integrity sha512-4EVb+w4rx+YfVM32HQX42AbbT7/1f5zwAYhIujKXKk8NQK+JfRVl3pqT3hjNn/L+RstigmGGKVwHA/P0wgITZw== From d1924e1418af651bead3c4fb71e552a3a541d1e2 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 20 Jun 2023 12:41:49 +0100 Subject: [PATCH 16/58] [release] Kintsugi 2.34.0 (#1311) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru --- api/market_data.py | 66 +++++++++++++++++-- package.json | 6 +- src/components/LoanPositionsTable/ApyCell.tsx | 2 +- .../DepositForm/DepositOutputAssets.tsx | 2 +- .../AMM/Swap/components/SwapForm/SwapForm.tsx | 28 ++++---- src/parts/Topbar/index.tsx | 4 +- src/utils/helpers/loans.ts | 3 + yarn.lock | 16 ++--- 8 files changed, 94 insertions(+), 33 deletions(-) diff --git a/api/market_data.py b/api/market_data.py index 5aeb576dfa..49e74f33a6 100644 --- a/api/market_data.py +++ b/api/market_data.py @@ -8,6 +8,9 @@ api_key = os.environ.get("CG_API_KEY") +tickers = { + "Tether USD": "tether", +} @app.after_request def add_header(response): @@ -15,11 +18,7 @@ def add_header(response): response.cache_control.s_maxage = 300 return response - -@app.route("/marketdata/price", methods=["GET"]) -def get_price(): - args = request.args - +def coingecko(args): headers_dict = { "content-type": "application/json", "accept": "application/json", @@ -27,6 +26,63 @@ def get_price(): url = "https://api.coingecko.com/api/v3/simple/price" resp = requests.get(url, params=args, headers=headers_dict) data = resp.json() + return data + +def dia(asset): + headers_dict = { + "content-type": "application/json", + "accept": "application/json", + "x-cg-pro-api-key": api_key, + } + url = "https://api.diadata.org/v1/assetQuotation" + if asset == "bitcoin": + url += "/Bitcoin/0x0000000000000000000000000000000000000000" + elif asset == "interlay": + url += "/Interlay/0x0000000000000000000000000000000000000000" + elif asset == "liquid-staking-dot": + return { "liquid-staking-dot": None } + elif asset == "polkadot": + url += "/Polkadot/0x0000000000000000000000000000000000000000/" + elif asset == "tether": + url += "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7" + + resp = requests.get(url, headers=headers_dict) + data = resp.json() + + # optionally rename the ticker + ticker = tickers.get(data["Name"], data["Name"]).lower() + + return { + ticker: { + "usd": data["Price"], + } + } + + +@app.route("/marketdata/price", methods=["GET"]) +def get_price(): + args = request.args + + price_source = args.get('price-source') + + data = {} + + def _dia(): + ticker_ids = args["ids"].split(",") + for ticker_id in ticker_ids: + data.update(dia(ticker_id)) + + if price_source == "dia": + _dia() + elif price_source == "coingecko": + data = coingecko(args) + else: + try: + _dia() + except Exception as e: + print("Error", e) + data = coingecko(args) + return jsonify(data) diff --git a/package.json b/package.json index 80b15375cc..138d888dde 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "interbtc-ui", - "version": "2.33.0", + "version": "2.34.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", - "@interlay/bridge": "^0.3.11", - "@interlay/interbtc-api": "2.3.1", + "@interlay/bridge": "^0.3.13", + "@interlay/interbtc-api": "2.3.3", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", diff --git a/src/components/LoanPositionsTable/ApyCell.tsx b/src/components/LoanPositionsTable/ApyCell.tsx index 97cba39349..d36911f7be 100644 --- a/src/components/LoanPositionsTable/ApyCell.tsx +++ b/src/components/LoanPositionsTable/ApyCell.tsx @@ -32,7 +32,7 @@ const ApyCell = ({ }: ApyCellProps): JSX.Element => { const rewardsApy = getSubsidyRewardApy(currency, rewardsPerYear, prices); - const totalApy = isBorrow ? apy.sub(rewardsApy || 0) : apy.add(rewardsApy || 0); + const totalApy = isBorrow ? (rewardsApy || Big(0)).sub(apy) : apy.add(rewardsApy || 0); const totalApyLabel = getApyLabel(totalApy); diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx index 5a17465ec9..f21e8f81af 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx +++ b/src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx @@ -56,7 +56,7 @@ const DepositOutputAssets = ({ pool, values, prices }: DepositOutputAssetsProps) return (

- {t('amm.pools.receivable_assets')} + {t('receivable_assets')}

diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx index eeccf0d580..25753b06ca 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx @@ -4,7 +4,7 @@ import Big from 'big.js'; import { ChangeEventHandler, Key, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { useDebounce } from 'react-use'; +import { useDebounce, useInterval } from 'react-use'; import { StoreType } from '@/common/types/util.types'; import { convertMonetaryAmountToValueInUSD, formatUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; @@ -20,6 +20,7 @@ import { } from '@/lib/form'; import { SlippageManager } from '@/pages/AMM/shared/components'; import { SwapPair } from '@/types/swap'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; import { SWAP_PRICE_IMPACT_LIMIT } from '@/utils/constants/swap'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; @@ -120,20 +121,21 @@ const SwapForm = ({ onSuccess: onSwap }); - useDebounce( - () => { - if (!pair.input || !pair.output || !inputAmount) { - return setTrade(undefined); - } + const handleChangeTrade = () => { + if (!pair.input || !pair.output || !inputAmount) { + return setTrade(undefined); + } - const inputMonetaryAmount = newMonetaryAmount(inputAmount, pair.input, true); - const trade = window.bridge.amm.getOptimalTrade(inputMonetaryAmount, pair.output, liquidityPools); + const inputMonetaryAmount = newMonetaryAmount(inputAmount, pair.input, true); + const trade = window.bridge.amm.getOptimalTrade(inputMonetaryAmount, pair.output, liquidityPools); - setTrade(trade); - }, - 500, - [inputAmount, pair] - ); + setTrade(trade); + }; + + // attemp to update trade object on each new block + useInterval(handleChangeTrade, REFETCH_INTERVAL.BLOCK); + + useDebounce(handleChangeTrade, 500, [inputAmount, pair]); const inputBalance = pair.input && getAvailableBalance(pair.input.ticker); const outputBalance = pair.output && getAvailableBalance(pair.output.ticker); diff --git a/src/parts/Topbar/index.tsx b/src/parts/Topbar/index.tsx index 4b7aa388e4..63098f3442 100644 --- a/src/parts/Topbar/index.tsx +++ b/src/parts/Topbar/index.tsx @@ -41,7 +41,7 @@ const Topbar = (): JSX.Element => { const { selectProps } = useSignMessage(); const { list } = useNotifications(); - const kintBalanceIsZero = getAvailableBalance('KINT')?.isZero(); + const governanceTokenBalanceIsZero = getAvailableBalance(GOVERNANCE_TOKEN.ticker)?.isZero(); const handleRequestFromFaucet = async (): Promise => { if (!selectedAccount) return; @@ -106,7 +106,7 @@ const Topbar = (): JSX.Element => { {isBanxaEnabled ? : } {selectedAccount !== undefined && ( <> - {process.env.REACT_APP_FAUCET_URL && kintBalanceIsZero && ( + {process.env.REACT_APP_FAUCET_URL && governanceTokenBalanceIsZero && ( <> { + if (apy.eq(0)) { + return formatPercentage(0); + } const isPositive = apy.gt(0); const isTinyApy = isPositive ? apy.lt(MIN_DECIMAL_NUMBER) : apy.gt(-MIN_DECIMAL_NUMBER); diff --git a/yarn.lock b/yarn.lock index bdfcd1b1a2..8b0e526b36 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2099,10 +2099,10 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.3.11": - version "0.3.11" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.11.tgz#45b2f3bb44d5e7eb1777ba82cfdf1a2f5dbf2b1d" - integrity sha512-HMgUlSFw5wOR7Qi+JxrDeY8TqoybRd7MWdXUqswDpiCgc0WZGTSDK+2NmuKRgDjRYoly0xIpzpkb8oek6v/JQw== +"@interlay/bridge@^0.3.13": + version "0.3.13" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.13.tgz#8add2a9d8a811ea3bbe73498bf3ebc19cd279ec6" + integrity sha512-LXXomxfI2n1h2MHeN8woRaQgh+gLKKlHfH1oTBAMyKPpSI7tTvtrE2XwIKt+Qg1TvmukRngtmwWtEXh760Dtkw== dependencies: "@acala-network/api" "4.1.8-13" "@acala-network/sdk" "4.1.8-13" @@ -2120,10 +2120,10 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.3.1": - version "2.3.1" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.1.tgz#99bd9058453f6125d0fe1aa7bae208acda3191ed" - integrity sha512-XTbFNz0W/ev9cLfO0hKOfoPa79ARUrhKItrNolA98n055DMWHS7Lu9P1HUBG9KfKvgoiB5hQBo1Gc4hG+oPKQg== +"@interlay/interbtc-api@2.3.3": + version "2.3.3" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.3.tgz#e75f0aa64ae6db604d4314cadf307fe09d128741" + integrity sha512-q5uDFejEJoy4ZC5sc2YSmksILDA14qR/A+oQonMJGIh2F8k58YHdC8Zpp+6ayYUjp13rwkeQQwoBS1kwBFFdqg== dependencies: "@interlay/esplora-btc-api" "0.4.0" "@interlay/interbtc-types" "1.12.0" From ad50b6bf496b448095c98d3a80874cd14aa82706 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 22 Jun 2023 12:29:15 +0100 Subject: [PATCH 17/58] [release] Kintsugi 2.34.1 (#1326) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru --- package.json | 2 +- src/utils/hooks/api/xcm/xcm-endpoints.ts | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 138d888dde..ffc891796a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.34.0", + "version": "2.34.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/utils/hooks/api/xcm/xcm-endpoints.ts b/src/utils/hooks/api/xcm/xcm-endpoints.ts index fe751d615b..73fbbe80c7 100644 --- a/src/utils/hooks/api/xcm/xcm-endpoints.ts +++ b/src/utils/hooks/api/xcm/xcm-endpoints.ts @@ -20,8 +20,16 @@ const XCMEndpoints: XCMEndpointsRecord = { kusama: ['wss://kusama-rpc.polkadot.io', 'wss://kusama-rpc.dwellir.com'], parallel: ['wss://rpc.parallel.fi'], polkadot: ['wss://rpc.polkadot.io', 'wss://polkadot-rpc.dwellir.com'], - statemine: ['wss://statemine-rpc.polkadot.io', 'wss://statemine-rpc.dwellir.com'], - statemint: ['wss://statemint-rpc.polkadot.io', 'wss://statemint-rpc.dwellir.com'] + statemine: [ + 'wss://kusama-asset-hub-rpc.polkadot.io', + 'wss://statemine-rpc.dwellir.com', + 'wss://statemine-rpc-tn.dwellir.com' + ], + statemint: [ + 'wss://polkadot-asset-hub-rpc.polkadot.io', + 'wss://statemint-rpc.dwellir.com', + 'wss://statemint-rpc-tn.dwellir.com' + ] }; export { XCMEndpoints }; From 96ed28cf6c8f4f302508a53c3f040ba63fc830c1 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 3 Jul 2023 15:28:35 +0100 Subject: [PATCH 18/58] chore: bump lib (#1394) --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index ffc891796a..8470aa537b 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "interbtc-ui", - "version": "2.34.1", + "version": "2.34.2", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", "@interlay/bridge": "^0.3.13", - "@interlay/interbtc-api": "2.3.3", + "@interlay/interbtc-api": "2.3.5", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", diff --git a/yarn.lock b/yarn.lock index 8b0e526b36..cf7bff8882 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2120,10 +2120,10 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.3.3": - version "2.3.3" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.3.tgz#e75f0aa64ae6db604d4314cadf307fe09d128741" - integrity sha512-q5uDFejEJoy4ZC5sc2YSmksILDA14qR/A+oQonMJGIh2F8k58YHdC8Zpp+6ayYUjp13rwkeQQwoBS1kwBFFdqg== +"@interlay/interbtc-api@2.3.5": + version "2.3.5" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.5.tgz#d73c57e04391f9c300ca361cb9e0f2226c867b9c" + integrity sha512-sCaV+aI2oyQnP03PBBad/wqYMuZ3GlaDDrkbkr+LGshHgxwB42pvEeEehaEiXh0qsym6ZeH2FU6T++FP9PGlnQ== dependencies: "@interlay/esplora-btc-api" "0.4.0" "@interlay/interbtc-types" "1.12.0" From 921fc95148e84f08030fefd7e2649b3e193d89f8 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 4 Jul 2023 11:24:48 +0100 Subject: [PATCH 19/58] [release] Kintsugi 2.35.4 (#1404) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz --- .env.dev | 5 +- .storybook/preview.js | 1 - api/market_data.py | 53 +- package.json | 3 +- src/App.tsx | 16 +- src/assets/img/btc-defi.svg | 705 ++++++++++++++++++ src/assets/img/dysonsphere.svg | 1 + src/assets/img/exchanges/acala-logo.svg | 2 +- src/assets/img/exchanges/lbank-logo.svg | 1 - src/assets/img/interlay-logo-with-text.svg | 29 +- src/assets/locales/en/translation.json | 63 +- src/common/utils/utils.ts | 12 +- .../Accordion/Accordion.style.tsx | 4 +- .../Accordion/AccordionItem.tsx | 2 +- src/component-library/Alert/Alert.tsx | 18 +- src/component-library/CTA/CTA.style.tsx | 25 +- src/component-library/CTA/CTA.tsx | 7 +- src/component-library/CTA/CTALink.tsx | 5 +- src/component-library/Card/Card.style.tsx | 16 +- src/component-library/Card/Card.tsx | 12 +- src/component-library/CoinIcon/icons/LDOT.tsx | 44 ++ src/component-library/CoinIcon/icons/index.ts | 1 + src/component-library/CoinIcon/utils.ts | 2 + src/component-library/Input/BaseInput.tsx | 7 +- src/component-library/Input/Input.style.tsx | 22 +- src/component-library/Label/Label.style.tsx | 2 +- src/component-library/List/List.style.tsx | 5 +- src/component-library/Meter/Meter.style.tsx | 4 +- src/component-library/Meter/Meter.tsx | 4 +- src/component-library/Modal/Modal.style.tsx | 2 + src/component-library/Modal/Modal.tsx | 2 +- .../Select/Select.stories.tsx | 2 +- src/component-library/Select/Select.style.tsx | 5 +- src/component-library/Select/Select.tsx | 45 +- src/component-library/Select/SelectModal.tsx | 10 +- .../Select/SelectTrigger.tsx | 13 +- src/component-library/Switch/Switch.style.tsx | 9 +- src/component-library/Switch/Switch.tsx | 17 +- src/component-library/Tabs/Tabs.style.tsx | 4 + src/component-library/TextLink/TextLink.tsx | 6 +- .../TokenInput/TokenInput.style.tsx | 3 +- .../TokenInput/TokenListItem.tsx | 30 + .../TokenInput/TokenSelect.tsx | 31 +- src/component-library/TokenInput/index.tsx | 4 +- src/component-library/Tooltip/Tooltip.tsx | 2 +- src/component-library/index.tsx | 4 +- .../theme/theme.interlay.css | 22 +- .../theme/theme.kintsugi.css | 5 + src/component-library/theme/theme.ts | 23 +- src/component-library/utils/prop-types.ts | 10 +- src/components/DataGrid/AssetCell.tsx | 11 +- src/components/FundWallet/use-entities.tsx | 5 - .../NotificationToast.styles.tsx | 13 + .../NotificationToast/NotificationToast.tsx | 103 +++ .../NotificationToast/TransactionToast.tsx | 84 +++ src/components/NotificationToast/index.tsx | 4 + .../PlusDivider/PlusDivider.styles.tsx | 30 + src/components/PlusDivider/PlusDivider.tsx | 19 + src/components/PlusDivider/index.tsx | 2 + src/components/PoolsTable/PoolsTable.tsx | 8 +- .../TransactionDetails.style.tsx | 41 + .../TransactionDetails/TransactionDetails.tsx | 14 + .../TransactionDetailsDd.tsx | 10 + .../TransactionDetailsDt.tsx | 33 + .../TransactionDetailsGroup.tsx | 16 + .../TransactionSelectToken.tsx | 67 ++ src/components/TransactionDetails/index.tsx | 10 + .../TransactionFeeDetails.tsx | 96 +++ .../TransactionFeeDetails/index.tsx | 2 + .../TransactionModal/TransactionModal.tsx | 4 +- src/components/index.tsx | 11 +- src/config/links.ts | 4 + src/config/relay-chains.tsx | 5 + .../CancelledIssueRequest/index.tsx | 2 +- .../CompletedIssueRequest/index.tsx | 2 +- .../ConfirmedIssueRequest/index.tsx | 2 +- .../ReceivedIssueRequest/index.tsx | 2 +- .../IssueUI/WhoopsStatusUI/index.tsx | 2 +- src/legacy-components/IssueUI/index.tsx | 11 + .../CompletedRedeemRequest/index.tsx | 2 +- .../DefaultRedeemRequest/index.tsx | 2 +- .../index.tsx | 2 +- .../ReimbursedRedeemRequest/index.tsx | 2 +- .../RetriedRedeemRequest/index.tsx | 2 +- .../RedeemUI/ReimburseStatusUI/index.tsx | 2 +- src/legacy-components/RedeemUI/index.tsx | 11 + .../RequestWrapper/index.tsx | 0 .../InterlayDefaultContainedButton/index.tsx | 5 +- src/lib/form/index.tsx | 7 +- src/lib/form/schemas/amm.ts | 51 -- src/lib/form/schemas/bridge.ts | 105 +++ src/lib/form/schemas/index.ts | 36 +- src/lib/form/schemas/loans.ts | 53 +- src/lib/form/schemas/pools.ts | 72 ++ src/lib/form/schemas/swap.ts | 28 +- src/lib/form/schemas/transfers.ts | 48 +- src/lib/form/schemas/vaults.ts | 32 +- src/lib/form/use-form.tsx | 131 +++- src/lib/form/validate.ts | 21 + src/lib/form/yup.custom.ts | 56 +- .../components/DepositForm/DepositDivider.tsx | 15 - .../DepositForm/DepositForm.styles.tsx | 49 +- .../components/DepositForm/DepositForm.tsx | 158 ++-- .../Pools/components/PoolModal/PoolModal.tsx | 18 +- .../PoolsInsights/PoolsInsights.tsx | 149 +++- .../components/WithdrawForm/WithdrawForm.tsx | 112 +-- .../AMM/Swap/components/SwapForm/SwapCTA.tsx | 28 +- .../Swap/components/SwapForm/SwapDivider.tsx | 5 +- .../components/SwapForm/SwapForm.style.tsx | 10 +- .../AMM/Swap/components/SwapForm/SwapForm.tsx | 114 +-- .../components/SwapInfo/SwapInfo.style.tsx | 7 +- .../AMM/Swap/components/SwapInfo/SwapInfo.tsx | 73 +- .../ManualIssueExecutionActionsTable.tsx | 2 +- src/pages/Bridge/Bridge.tsx | 16 + .../BridgeOverview/BridgeOverview.styles.tsx | 19 + .../Bridge/BridgeOverview/BridgeOverview.tsx | 62 ++ .../components/IssueForm/IssueForm.styles.tsx | 23 + .../components/IssueForm/IssueForm.tsx | 296 ++++++++ .../components/IssueForm/index.tsx | 2 + .../LegacyBurnForm/LegacyBurnForm.tsx} | 12 +- .../components/LegacyBurnForm/index.tsx | 1 + .../LegacyIssueModal/LegacyIssueModal.tsx | 50 ++ .../components/LegacyIssueModal/index.tsx | 1 + .../LegacyRedeemModal/LegacyRedeemModal.tsx} | 28 +- .../components/LegacyRedeemModal/index.tsx | 1 + .../IssueRequestModal/index.tsx | 19 + .../IssueRequestsTable/index.tsx | 114 +-- .../RedeemRequestModal/index.tsx | 24 + .../RedeemRequestsTable/index.tsx | 115 +-- .../RequestModalTitle/index.tsx | 0 .../components/LegacyTransactions}/index.tsx | 14 +- .../RedeemForm/PremiumRedeemCard.tsx | 33 + .../RedeemForm/RedeemForm.styles.tsx | 23 + .../components/RedeemForm/RedeemForm.tsx | 338 +++++++++ .../components/RedeemForm/index.tsx | 2 + .../RequestLimitsCard/RequestLimitsCard.tsx | 46 ++ .../components/RequestLimitsCard/index.tsx | 2 + .../SelectVaultCard/SelectVaultCard.tsx | 43 ++ .../SelectVaultCard/VaultListItem.tsx | 48 ++ .../SelectVaultCard/VaultSelect.style.tsx | 63 ++ .../SelectVaultCard/VaultSelect.tsx | 27 + .../components/SelectVaultCard/index.tsx | 2 + .../TransactionDetails.style.tsx | 11 + .../TransactionDetails/TransactionDetails.tsx | 137 ++++ .../components/TransactionDetails/index.tsx | 2 + .../BridgeOverview/components/index.tsx | 7 + src/pages/Bridge/BridgeOverview/index.tsx | 3 + src/pages/Bridge/IssueForm/index.tsx | 551 -------------- .../Bridge/ManualVaultSelectUI/index.tsx | 54 -- .../Bridge/ParachainStatusInfo/index.tsx | 51 -- src/pages/Bridge/RedeemForm/index.tsx | 554 -------------- src/pages/Bridge/index.tsx | 149 +--- .../cards/OracleStatusCard/index.tsx | 57 +- .../CollateralModal/CollateralModal.tsx | 91 ++- .../LoanActionInfo/LoanActionInfo.style.tsx | 12 - .../LoanActionInfo/LoanActionInfo.tsx | 36 - .../components/LoanActionInfo/LoanGroup.tsx | 42 -- .../components/LoanActionInfo/index.tsx | 2 - .../LoanDetails/LoanDetails.style.tsx} | 0 .../components/LoanDetails/LoanDetails.tsx | 47 ++ .../components/LoanDetails/RewardsDetails.tsx | 40 + .../components/LoanDetails/index.tsx | 2 + .../components/LoanForm/LoanForm.tsx | 110 ++- .../components/LoanModal/LoanModal.tsx | 18 +- .../LoansInsights/LoansInsights.tsx | 86 ++- .../components/LoansTables/LendTables.tsx | 14 +- .../hooks/use-loan-form-data.tsx | 10 +- src/pages/Onboarding/Onboarding.style.tsx | 11 + src/pages/Onboarding/Onboarding.tsx | 190 +++++ .../components/Tutorial/Tutorial.tsx | 124 +++ .../Onboarding/components/Tutorial/index.tsx | 1 + src/pages/Onboarding/components/index.tsx | 1 + src/pages/Onboarding/index.tsx | 3 + .../components/index.tsx | 4 - .../Transfer/CrossChainTransferForm/index.tsx | 3 - src/pages/Transfer/TokenAmountField/index.tsx | 73 -- src/pages/Transfer/Transfer.tsx | 16 + src/pages/Transfer/TransferForm/index.tsx | 164 ---- .../TransferForms/TransferForms.styles.tsx | 19 + .../Transfer/TransferForms/TransferForms.tsx | 35 + .../components/ChainIcon/ChainIcon.style.tsx | 0 .../components/ChainIcon/ChainIcon.tsx | 0 .../components/ChainIcon/icons/Acala.tsx | 0 .../components/ChainIcon/icons/Astar.tsx | 0 .../components/ChainIcon/icons/Bifrost.tsx | 0 .../components/ChainIcon/icons/Heiko.tsx | 0 .../components/ChainIcon/icons/Hydra.tsx | 0 .../components/ChainIcon/icons/Interlay.tsx | 0 .../components/ChainIcon/icons/Karura.tsx | 0 .../components/ChainIcon/icons/Kintsugi.tsx | 0 .../components/ChainIcon/icons/Kusama.tsx | 0 .../components/ChainIcon/icons/Parallel.tsx | 0 .../components/ChainIcon/icons/Polkadot.tsx | 0 .../components/ChainIcon/icons/Statemine.tsx | 0 .../components/ChainIcon/icons/Statemint.tsx | 0 .../components/ChainIcon/icons/index.ts | 0 .../components/ChainIcon/index.tsx | 0 .../ChainSelect/ChainSelect.style.tsx | 0 .../components/ChainSelect/ChainSelect.tsx | 4 +- .../components/ChainSelect/index.tsx | 0 .../CrossChainTransferForm.styles.tsx | 13 +- .../CrossChainTransferForm.tsx | 75 +- .../CrossChainTransferForm/index.tsx | 1 + .../components/TransferForm/TransferForm.tsx | 162 ++++ .../components/TransferForm/index.tsx | 1 + .../TransferForms/components/index.tsx | 4 + src/pages/Transfer/TransferForms/index.tsx | 3 + src/pages/Transfer/index.tsx | 33 +- .../Vaults/Vault/RequestIssueModal/index.tsx | 3 +- .../SubmittedIssueRequestModal/index.tsx | 2 +- src/pages/Vaults/Vault/VaultDashboard.tsx | 22 +- .../TransactionHistory.styles.tsx | 84 --- .../TransactionHistory/TransactionHistory.tsx | 76 -- .../TransactionStatusTag.tsx | 41 - .../TransactionHistory/TransactionTable.tsx | 82 -- .../components/TransactionHistory/index.tsx | 2 - src/pages/Vaults/Vault/components/index.tsx | 13 +- .../CreateVaultWizard.styles.tsx | 7 - .../CreateVaultWizard/CreateVaultWizard.tsx | 6 +- .../DespositCollateralStep.tsx | 138 ++-- .../components/CreateVaults/CreateVaults.tsx | 13 +- .../utils/use-deposit-collateral.tsx | 24 +- .../Wallet/WalletOverview/WalletOverview.tsx | 8 +- .../AvailableAssetsTable/ActionsCell.tsx | 17 +- .../AvailableAssetsTable.tsx | 39 +- .../WalletInsights/WalletInsights.tsx | 3 +- .../WelcomeBanner/WelcomeBanner.styles.tsx | 106 +++ .../WelcomeBanner/WelcomeBanner.tsx | 66 ++ .../components/WelcomeBanner/index.tsx | 2 + .../WalletOverview/components/index.tsx | 5 +- .../Navigation/SidebarNavLink/index.tsx | 2 +- .../SidebarContent/Navigation/index.tsx | 107 ++- .../SocialMediaContainer/index.tsx | 12 +- src/parts/Sidebar/SidebarContent/index.tsx | 4 +- .../Topbar/GetGovernanceTokenUI/index.tsx | 14 +- src/parts/Topbar/index.tsx | 26 +- src/parts/Wrapper/Wrapper.style.tsx | 12 + src/parts/Wrapper/index.tsx | 12 + .../fetchers/oracle-exchange-rates-fetcher.ts | 40 +- src/types/bridge.ts | 7 + src/types/currency.ts | 16 +- src/utils/constants/currency.ts | 3 + src/utils/constants/date-time.ts | 4 +- src/utils/constants/general.ts | 2 +- src/utils/constants/links.ts | 15 +- src/utils/context/Notifications.tsx | 29 +- .../helpers/is-valid-polkadot-address.ts | 14 - .../hooks/api/amm/use-get-account-pools.tsx | 4 +- .../hooks/api/bridge/use-get-issue-data.tsx | 77 ++ .../bridge/use-get-issue-request-limits.tsx | 30 + .../bridge/use-get-max-burnable-tokens.tsx | 59 ++ .../hooks/api/bridge/use-get-redeem-data.tsx | 98 +++ src/utils/hooks/api/bridge/use-get-vaults.tsx | 132 ++++ .../api/oracle/use-get-oracle-currencies.ts | 40 + .../hooks/api/oracle/use-get-oracle-status.ts | 31 + .../hooks/api/tokens/use-get-balances.tsx | 23 +- .../api/use-get-collateral-currencies.tsx | 1 + src/utils/hooks/api/use-get-currencies.tsx | 26 +- src/utils/hooks/api/use-get-exchange-rate.tsx | 26 + .../hooks/api/use-get-pools-trading-apr.tsx | 188 +++++ .../api/vaults/use-get-vault-transactions.tsx | 14 +- src/utils/hooks/api/xcm/use-xcm-bridge.ts | 3 +- src/utils/hooks/transaction/extrinsics/lib.ts | 12 +- src/utils/hooks/transaction/types/hook.ts | 109 +++ src/utils/hooks/transaction/types/index.ts | 2 +- src/utils/hooks/transaction/types/loans.ts | 7 +- .../use-transaction-notifications.tsx | 9 +- .../hooks/transaction/use-transaction.ts | 206 +++-- src/utils/hooks/transaction/utils/fee.ts | 179 +++++ src/utils/hooks/transaction/utils/form.ts | 11 + src/utils/hooks/transaction/utils/params.ts | 29 + src/utils/hooks/use-feature-flag.ts | 6 +- src/utils/hooks/use-local-storage.ts | 16 +- src/utils/hooks/use-select-currency.tsx | 106 +++ src/utils/hooks/use-sign-message.ts | 19 +- src/utils/hooks/use-tab-page-location.tsx | 37 + yarn.lock | 81 ++ 277 files changed, 7042 insertions(+), 3408 deletions(-) create mode 100644 src/assets/img/btc-defi.svg create mode 100644 src/assets/img/dysonsphere.svg delete mode 100644 src/assets/img/exchanges/lbank-logo.svg create mode 100644 src/component-library/CoinIcon/icons/LDOT.tsx create mode 100644 src/component-library/TokenInput/TokenListItem.tsx create mode 100644 src/components/NotificationToast/NotificationToast.styles.tsx create mode 100644 src/components/NotificationToast/NotificationToast.tsx create mode 100644 src/components/NotificationToast/TransactionToast.tsx create mode 100644 src/components/NotificationToast/index.tsx create mode 100644 src/components/PlusDivider/PlusDivider.styles.tsx create mode 100644 src/components/PlusDivider/PlusDivider.tsx create mode 100644 src/components/PlusDivider/index.tsx create mode 100644 src/components/TransactionDetails/TransactionDetails.style.tsx create mode 100644 src/components/TransactionDetails/TransactionDetails.tsx create mode 100644 src/components/TransactionDetails/TransactionDetailsDd.tsx create mode 100644 src/components/TransactionDetails/TransactionDetailsDt.tsx create mode 100644 src/components/TransactionDetails/TransactionDetailsGroup.tsx create mode 100644 src/components/TransactionDetails/TransactionSelectToken.tsx create mode 100644 src/components/TransactionDetails/index.tsx create mode 100644 src/components/TransactionFeeDetails/TransactionFeeDetails.tsx create mode 100644 src/components/TransactionFeeDetails/index.tsx rename src/{pages/Bridge => legacy-components}/RequestWrapper/index.tsx (100%) delete mode 100644 src/lib/form/schemas/amm.ts create mode 100644 src/lib/form/schemas/bridge.ts create mode 100644 src/lib/form/schemas/pools.ts create mode 100644 src/lib/form/validate.ts delete mode 100644 src/pages/AMM/Pools/components/DepositForm/DepositDivider.tsx create mode 100644 src/pages/Bridge/Bridge.tsx create mode 100644 src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx create mode 100644 src/pages/Bridge/BridgeOverview/BridgeOverview.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx rename src/pages/Bridge/{BurnForm/index.tsx => BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx} (97%) create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/index.tsx rename src/pages/Bridge/{RedeemForm/SubmittedRedeemRequestModal/index.tsx => BridgeOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx} (81%) create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/IssueRequestModal/index.tsx rename src/pages/{Transactions => Bridge/BridgeOverview/components/LegacyTransactions}/IssueRequestsTable/index.tsx (81%) create mode 100644 src/pages/Bridge/BridgeOverview/components/LegacyTransactions/RedeemRequestsTable/RedeemRequestModal/index.tsx rename src/pages/{Transactions => Bridge/BridgeOverview/components/LegacyTransactions}/RedeemRequestsTable/index.tsx (84%) rename src/pages/{Transactions => Bridge/BridgeOverview/components/LegacyTransactions}/RequestModalTitle/index.tsx (100%) rename src/pages/{Transactions => Bridge/BridgeOverview/components/LegacyTransactions}/index.tsx (81%) create mode 100644 src/pages/Bridge/BridgeOverview/components/RedeemForm/PremiumRedeemCard.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/components/index.tsx create mode 100644 src/pages/Bridge/BridgeOverview/index.tsx delete mode 100644 src/pages/Bridge/IssueForm/index.tsx delete mode 100644 src/pages/Bridge/ManualVaultSelectUI/index.tsx delete mode 100644 src/pages/Bridge/ParachainStatusInfo/index.tsx delete mode 100644 src/pages/Bridge/RedeemForm/index.tsx delete mode 100644 src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.style.tsx delete mode 100644 src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.tsx delete mode 100644 src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanGroup.tsx delete mode 100644 src/pages/Loans/LoansOverview/components/LoanActionInfo/index.tsx rename src/pages/{AMM/Pools/components/WithdrawForm/WithdrawForm.styles.tsx => Loans/LoansOverview/components/LoanDetails/LoanDetails.style.tsx} (100%) create mode 100644 src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx create mode 100644 src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx create mode 100644 src/pages/Loans/LoansOverview/components/LoanDetails/index.tsx create mode 100644 src/pages/Onboarding/Onboarding.style.tsx create mode 100644 src/pages/Onboarding/Onboarding.tsx create mode 100644 src/pages/Onboarding/components/Tutorial/Tutorial.tsx create mode 100644 src/pages/Onboarding/components/Tutorial/index.tsx create mode 100644 src/pages/Onboarding/components/index.tsx create mode 100644 src/pages/Onboarding/index.tsx delete mode 100644 src/pages/Transfer/CrossChainTransferForm/components/index.tsx delete mode 100644 src/pages/Transfer/CrossChainTransferForm/index.tsx delete mode 100644 src/pages/Transfer/TokenAmountField/index.tsx create mode 100644 src/pages/Transfer/Transfer.tsx delete mode 100644 src/pages/Transfer/TransferForm/index.tsx create mode 100644 src/pages/Transfer/TransferForms/TransferForms.styles.tsx create mode 100644 src/pages/Transfer/TransferForms/TransferForms.tsx rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/ChainIcon.style.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/ChainIcon.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Acala.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Astar.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Bifrost.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Heiko.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Hydra.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Interlay.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Karura.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Kintsugi.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Kusama.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Parallel.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Polkadot.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Statemine.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/Statemint.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/icons/index.ts (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainIcon/index.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainSelect/ChainSelect.style.tsx (100%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainSelect/ChainSelect.tsx (93%) rename src/pages/Transfer/{CrossChainTransferForm => TransferForms}/components/ChainSelect/index.tsx (100%) rename src/pages/Transfer/{ => TransferForms/components}/CrossChainTransferForm/CrossChainTransferForm.styles.tsx (62%) rename src/pages/Transfer/{ => TransferForms/components}/CrossChainTransferForm/CrossChainTransferForm.tsx (83%) create mode 100644 src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx create mode 100644 src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx create mode 100644 src/pages/Transfer/TransferForms/components/TransferForm/index.tsx create mode 100644 src/pages/Transfer/TransferForms/components/index.tsx create mode 100644 src/pages/Transfer/TransferForms/index.tsx rename src/pages/{Bridge/IssueForm => Vaults/Vault}/SubmittedIssueRequestModal/index.tsx (97%) delete mode 100644 src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.styles.tsx delete mode 100644 src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.tsx delete mode 100644 src/pages/Vaults/Vault/components/TransactionHistory/TransactionStatusTag.tsx delete mode 100644 src/pages/Vaults/Vault/components/TransactionHistory/TransactionTable.tsx delete mode 100644 src/pages/Vaults/Vault/components/TransactionHistory/index.tsx create mode 100644 src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles.tsx create mode 100644 src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx create mode 100644 src/pages/Wallet/WalletOverview/components/WelcomeBanner/index.tsx create mode 100644 src/parts/Wrapper/Wrapper.style.tsx create mode 100644 src/parts/Wrapper/index.tsx create mode 100644 src/types/bridge.ts delete mode 100644 src/utils/helpers/is-valid-polkadot-address.ts create mode 100644 src/utils/hooks/api/bridge/use-get-issue-data.tsx create mode 100644 src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx create mode 100644 src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx create mode 100644 src/utils/hooks/api/bridge/use-get-redeem-data.tsx create mode 100644 src/utils/hooks/api/bridge/use-get-vaults.tsx create mode 100644 src/utils/hooks/api/oracle/use-get-oracle-currencies.ts create mode 100644 src/utils/hooks/api/oracle/use-get-oracle-status.ts create mode 100644 src/utils/hooks/api/use-get-exchange-rate.tsx create mode 100644 src/utils/hooks/api/use-get-pools-trading-apr.tsx create mode 100644 src/utils/hooks/transaction/types/hook.ts create mode 100644 src/utils/hooks/transaction/utils/fee.ts create mode 100644 src/utils/hooks/transaction/utils/form.ts create mode 100644 src/utils/hooks/transaction/utils/params.ts create mode 100644 src/utils/hooks/use-select-currency.tsx create mode 100644 src/utils/hooks/use-tab-page-location.tsx diff --git a/.env.dev b/.env.dev index 5c4633047e..60869e7489 100644 --- a/.env.dev +++ b/.env.dev @@ -5,6 +5,7 @@ REACT_APP_FEATURE_FLAG_AMM=enabled REACT_APP_FEATURE_FLAG_WALLET=enabled REACT_APP_FEATURE_FLAG_BANXA=enabled REACT_APP_FEATURE_FLAG_STRATEGIES=enabled +REACT_APP_FEATURE_FLAG_ONBOARDING=enabled /* DEVELOPMENT */ @@ -58,7 +59,7 @@ REACT_APP_PARACHAIN_ID="2092" DOCKER_RELAY_CHAIN_CURRENCY="KSM" REACT_APP_SQUID_URL="https://api-kusama.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" -REACT_APP_SIGNER_API_URL="https://interbtc-ui-kintsugi-testnet-git-api-terms-interlay.vercel.app/terms" +REACT_APP_SIGNER_API_URL="https://interbtc-ui-kintsugi-git-api-terms-interlay.vercel.app/terms" // Interlay mainnet @@ -72,4 +73,4 @@ REACT_APP_PARACHAIN_ID="2032" DOCKER_RELAY_CHAIN_CURRENCY="DOT" REACT_APP_SQUID_URL="https://api.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" -REACT_APP_SIGNER_API_URL="https://interbtc-ui-kintsugi-testnet-git-api-terms-interlay.vercel.app/terms" +REACT_APP_SIGNER_API_URL="https://interbtc-ui-interlay-git-api-terms-interlay.vercel.app/terms" diff --git a/.storybook/preview.js b/.storybook/preview.js index ce6935b51d..71eafc0e1c 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,7 +2,6 @@ import '../src/component-library/theme/theme.interlay.css'; import '../src/component-library/theme/theme.kintsugi.css'; import './sb-preview.css'; import '../src/i18n'; -import "../src/lib/form/yup.custom" import { withThemes } from 'storybook-addon-themes/react'; import { addDecorator } from "@storybook/react"; import { MemoryRouter } from "react-router-dom"; diff --git a/api/market_data.py b/api/market_data.py index 49e74f33a6..d23829f4fa 100644 --- a/api/market_data.py +++ b/api/market_data.py @@ -10,6 +10,18 @@ tickers = { "Tether USD": "tether", + "Acala USD": "acala-dollar" +} + +# map coingecko ids to dia ids +dia_assets = { + "bitcoin": "/Bitcoin/0x0000000000000000000000000000000000000000", + "interlay": "/Interlay/0x0000000000000000000000000000000000000000", + "polkadot": "/Polkadot/0x0000000000000000000000000000000000000000", + "kusama": "/Kusama/0x0000000000000000000000000000000000000000", + "kintsugi": "/Kintsugi/Token:KINT", + "acala-dollar": "/Acala/Token:AUSD", + "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7" } @app.after_request @@ -23,7 +35,7 @@ def coingecko(args): "content-type": "application/json", "accept": "application/json", } - url = "https://api.coingecko.com/api/v3/simple/price" + url = "https://pro-api.coingecko.com/api/v3/simple/price" resp = requests.get(url, params=args, headers=headers_dict) data = resp.json() return data @@ -31,32 +43,25 @@ def coingecko(args): def dia(asset): headers_dict = { "content-type": "application/json", - "accept": "application/json", - "x-cg-pro-api-key": api_key, + "accept": "application/json" } - url = "https://api.diadata.org/v1/assetQuotation" - if asset == "bitcoin": - url += "/Bitcoin/0x0000000000000000000000000000000000000000" - elif asset == "interlay": - url += "/Interlay/0x0000000000000000000000000000000000000000" - elif asset == "liquid-staking-dot": - return { "liquid-staking-dot": None } - elif asset == "polkadot": - url += "/Polkadot/0x0000000000000000000000000000000000000000/" - elif asset == "tether": - url += "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7" - - resp = requests.get(url, headers=headers_dict) - data = resp.json() - - # optionally rename the ticker - ticker = tickers.get(data["Name"], data["Name"]).lower() - return { - ticker: { - "usd": data["Price"], + url = "https://api.diadata.org/v1/assetQuotation" + try: + url += dia_assets[asset] + resp = requests.get(url, headers=headers_dict) + data = resp.json() + + # optionally rename the ticker + ticker = tickers.get(data["Name"], data["Name"]).lower() + + return { + ticker: { + "usd": data["Price"], + } } - } + except KeyError: + return { asset: None } @app.route("/marketdata/price", methods=["GET"]) diff --git a/package.json b/package.json index 8470aa537b..8496ceeea7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.34.2", + "version": "2.35.4", "private": true, "dependencies": { "@craco/craco": "^6.1.1", @@ -62,6 +62,7 @@ "react-hook-form": "^7.33.1", "react-i18next": "^11.7.4", "react-icons": "^3.10.0", + "react-joyride": "^2.5.4", "react-paginate": "^7.1.3", "react-query": "^3.19.6", "react-redux": "^7.2.1", diff --git a/src/App.tsx b/src/App.tsx index 1722f65d75..be7a0ee0bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import ErrorFallback from '@/legacy-components/ErrorFallback'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; import Layout from '@/parts/Layout'; +import Wrapper from '@/parts/Wrapper'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query'; import { BitcoinNetwork } from '@/types/bitcoin'; @@ -28,7 +29,6 @@ import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge')); const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer')); -const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); const Staking = React.lazy(() => import(/* webpackChunkName: 'staking' */ '@/pages/Staking')); const Dashboard = React.lazy(() => import(/* webpackChunkName: 'dashboard' */ '@/pages/Dashboard')); @@ -39,6 +39,7 @@ const Loans = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/L const Swap = React.lazy(() => import(/* webpackChunkName: 'amm' */ '@/pages/AMM')); const Pools = React.lazy(() => import(/* webpackChunkName: 'amm/pools' */ '@/pages/AMM/Pools')); const Wallet = React.lazy(() => import(/* webpackChunkName: 'wallet' */ '@/pages/Wallet')); +const Onboarding = React.lazy(() => import(/* webpackChunkName: 'onboarding' */ '@/pages/Onboarding')); const Actions = React.lazy(() => import(/* webpackChunkName: 'actions' */ '@/pages/Actions')); const NoMatch = React.lazy(() => import(/* webpackChunkName: 'no-match' */ '@/pages/NoMatch')); @@ -52,6 +53,7 @@ const App = (): JSX.Element => { const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); + const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); // Loads the connection to the faucet - only for testnet purposes const loadFaucet = React.useCallback(async (): Promise => { @@ -159,7 +161,7 @@ const App = (): JSX.Element => { }, [setSelectedAccount, extensions.length]); return ( - <> + {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && } { - - - @@ -219,6 +218,11 @@ const App = (): JSX.Element => { )} + {isOnboardingEnabled && ( + + + + )} @@ -235,7 +239,7 @@ const App = (): JSX.Element => { /> - + ); }; diff --git a/src/assets/img/btc-defi.svg b/src/assets/img/btc-defi.svg new file mode 100644 index 0000000000..db27ab2b23 --- /dev/null +++ b/src/assets/img/btc-defi.svg @@ -0,0 +1,705 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/dysonsphere.svg b/src/assets/img/dysonsphere.svg new file mode 100644 index 0000000000..e4b8acdd7b --- /dev/null +++ b/src/assets/img/dysonsphere.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/exchanges/acala-logo.svg b/src/assets/img/exchanges/acala-logo.svg index 131dd650d9..1f28383591 100644 --- a/src/assets/img/exchanges/acala-logo.svg +++ b/src/assets/img/exchanges/acala-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/img/exchanges/lbank-logo.svg b/src/assets/img/exchanges/lbank-logo.svg deleted file mode 100644 index 8affe1645f..0000000000 --- a/src/assets/img/exchanges/lbank-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/img/interlay-logo-with-text.svg b/src/assets/img/interlay-logo-with-text.svg index c7c1537eec..9679df8441 100644 --- a/src/assets/img/interlay-logo-with-text.svg +++ b/src/assets/img/interlay-logo-with-text.svg @@ -1,17 +1,14 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index e6cd47edf2..ed5e84f250 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -5,6 +5,7 @@ "receive": "You will receive", "confirm": "Confirm", "connect_wallet": "Connect Wallet", + "install_wallet": "Install Wallet", "next": "Next", "loading_ellipsis": "Loading...", "note": "Note", @@ -76,11 +77,10 @@ "redeem": "Redeem", "nav_bridge": "Bridge", "nav_strategies": "Strategies", - "nav_transfer": "Transfer", + "nav_transfer": "Transfer / Bridge", "nav_lending": "Lending", "nav_swap": "Swap", "nav_pools": "Pools", - "nav_transactions": "My Transactions", "nav_staking": "Staking", "nav_stats": "Stats", "nav_dashboard": "Dashboard", @@ -92,6 +92,7 @@ "nav_use_wrapped": "Use {{wrappedTokenSymbol}}", "nav_governance": "Governance", "nav_wallet": "Wallet", + "nav_onboarding": "Onboarding", "report_bug": "Report a bug:", "request_funds": "Faucet", "request_btc": "BTC Faucet", @@ -148,7 +149,7 @@ "asset": "Asset", "price": "Price", "balance": "Balance", - "show_zero_balance": "Show Zero Balance", + "show_all": "Show All", "total_balance": "Total Balance", "transferable_balance": "Transferable Balance", "fund_wallet": "Fund Wallet", @@ -157,6 +158,14 @@ "sign_t&cs": "Sign T&Cs", "receivable_assets": "Receivable Assets", "dismiss": "Dismiss", + "insufficient_token_balance": "Insufficient {{token}} balance", + "amount": "Amount", + "select_token": "Select Token", + "fee_token": "Fee token", + "claim_rewards": "Claim Rewards", + "tx_fees": "Tx fees", + "view_subscan": "View Subscan", + "redeem_page": { "maximum_in_single_request": "Max redeemable in single request", "redeem": "Redeem", @@ -168,13 +177,13 @@ "with_added": "(≈ {{amountPrice}}) with added", "as_compensation_instead": "(≈ {{compensationPrice}}) as compensation instead.", "view_progress": "View Progress", + "close": "Close", "btc_destination_address": "BTC destination address", "you_will_receive": "Redeem {{wrappedTokenSymbol}} 1:1 for BTC", "waiting_for": "Waiting for", "vault": "Vault", - "typically_takes": "This typically takes only a few minutes but may sometimes take up to 6 hours.", + "typically_takes": "The BTC typically takes only a few minutes to arrive but may take up to 6 hours.", "from_vault": "from Vault", - "we_will_inform_you_btc": "We will inform you when the BTC payment is executed.", "redeem_processed": "Your Redeem request is being processed", "retried": "Retried", "error_more_than_6_blocks_behind": "You can't redeem {{wrappedTokenSymbol}} at the moment because {{wrappedTokenSymbol}} parachain is more than 6 blocks behind.", @@ -349,7 +358,7 @@ "maximum_in_single_request": "Max issuable in single request", "maximum_total_request": "Max issuable in total", "maximum_in_single_request_error": "Please enter less than {{maxAmount}} {{wrappedTokenSymbol}}.", - "request": "Request id #{{id}}", + "request": "Request id", "you_received": "You have received", "contact_team": "Contact the team for debugging if you think this is an error.", "you_did_not_send": "You did not send the BTC transaction in time or transferred amount did not not meet the requested amount of {{wrappedTokenSymbol}}.", @@ -554,7 +563,6 @@ "no_account": "You don't have an account. Create one", "install_supported_wallets": "Please install one of the currently supported wallets. By connecting the wallet you accept the ", "select_account": "Please select an account", - "install_wallet": "Please install supported wallet", "select_wallet": "Please select a wallet", "exclude_us_citizens": "By proceeding you confirm that you have read and accepted the <1>terms and conditions, and represent and warrant that you are not a Resident of the United States or a \"U.S. person\" within the meaning of Rule 902(k) under the United States Securities Act of 1933 (the \"Securities Act\").", "sign_terms": "Please sign the terms and conditions using your account's digital signature. This is required for each account that you connect to this website.", @@ -563,7 +571,7 @@ "change_wallet": "Change Wallet", "disconnect": "Disconnect", "please_select_an_account": "Please select an account", - "please_install_supported_wallet": "Please install supported wallet", + "please_install_supported_wallet": "Please install a supported wallet", "please_select_a_wallet": "Please select a wallet" }, "loans": { @@ -598,8 +606,8 @@ "insufficient_liquidity_trade": "Insufficient liquidity for this trade", "from": "From", "to": "To", - "swap_has_price_inpact_of": "Considering external price sources, this swap has a price impact of", - "you_are_swapping_input_for_output": "Your are swapping {{inputAmount}} {{inputTicker}} ({{inputAmountUSD}}) for {{outputAmount}} {{outputTicker}} ({{outputAmountUSD}})", + "swap_has_price_inpact_of": "According to external price sources, this swap would result in a monetary loss of", + "you_are_swapping_input_for_output": "You are swapping {{inputAmount}} {{inputTicker}} ({{inputAmountUSD}}) for {{outputAmount}} {{outputTicker}} ({{outputAmountUSD}})", "cancel_swap": "Cancel swap", "confirm_swap": "Confirm swap" }, @@ -610,7 +618,9 @@ "amount_must_be_at_least": "Amount to {{action}} must be at least {{amount}} {{token}}", "amount_must_be_at_most": "Amount to {{action}} must be at most {{amount}}", "please_enter_no_higher_available_balance": "Please enter an amount no higher than your available balance", - "field_amount": "{{field}} amount" + "field_amount": "{{field}} amount", + "please_enter_a_valid_address": "Please enter a valid address", + "ensure_adequate_amount_left_to_cover_action": "Ensure that an adequate number of coins are left to cover the {{ action }}" }, "xcm_transfer": { "validation": { @@ -629,10 +639,13 @@ }, "wallet": { "available_assets": "Available assets", + "get_asset": "Get {{token}}", "no_assets_available": "No assets available", "total_governance_locked": "Total {{token}} Locked", "available_to_stake": "Available to stake", - "voting_power_governance": "Voting Power {{token}}" + "voting_power_governance": "Voting Power {{token}}", + "welcome_to_dapp": "Welcome to {{ name }}", + "dapp_is_a_one_stop_shop_for_bitcoin_defi": "{{ name }} is a one-stop shop for Bitcoin DeFi: swaps, lending, staking, and 1-click strategies. {{ wrappedToken }} is trustless multi-chain Bitcoin, secured by collateral, cryptography, and a decentralized vault network." }, "strategy": { "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:", @@ -712,5 +725,31 @@ "requested_vault_replacement": "Requested vault replacement", "claiming_vesting": "Claiming vesting", "claimed_vesting": "Claimed vesting" + }, + "bridge": { + "max_issuable": "Max issuable", + "max_redeemable": "Max redeemable", + "in_single_request": "In single request", + "in_total": "In total", + "manually_select_vault": "Manually Select Vault", + "select_vault": "Select Vault", + "select_a_vault": "Select a vault", + "compensation_amount": "Compensation amount", + "bridge_fee": "Bridge Fee", + "fee_paids_to_vaults_relayers_maintainers": "The bridge fee paid to the vaults, relayers and maintainers of the system", + "security_deposit": "Security Deposit", + "security_deposit_token": "Security deposit token", + "security_deposit_is_a_denial_of_service_protection": "The security deposit is a denial-of-service protection for Vaults that is refunded to you after the minting process is completed", + "bitcoin_network_fee": "Bitcoin Network Fee", + "transaction_fee": "Transaction Fee", + "fee_for_transaction_to_be_included_in_the_parachain": "The fee for the transaction to be included in the parachain", + "premium_redeem": "Premium Redeem", + "premium_redeem_info": "If you select premium redeem, you will try to redeem with a vault that is below the secure collateral threshold. This operation has a higher risk since the vault might be liquidated. For this higher risk, you will receive a compensation." + }, + "notifications": { + "signature_submission_failed": "Signature submission failed", + "signature_submission_successful": "Signature submission successful", + "funding_account_failed": "Funding account failed", + "funding_account_successful": "Funding account successful" } } diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts index 7bd290766f..e753acbb28 100644 --- a/src/common/utils/utils.ts +++ b/src/common/utils/utils.ts @@ -1,6 +1,6 @@ import { CurrencyExt, InterbtcPrimitivesVaultId, newMonetaryAmount } from '@interlay/interbtc-api'; import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; -import Big from 'big.js'; +import Big, { BigSource } from 'big.js'; import { PARACHAIN_URL } from '@/constants'; import { getTokenPrice } from '@/utils/helpers/prices'; @@ -177,6 +177,14 @@ const newSafeMonetaryAmount: typeof newMonetaryAmount = (...args) => { } }; +const safeBitcoinAmount = (amount: BigSource): BitcoinAmount => { + try { + return new BitcoinAmount(amount); + } catch (e) { + return new BitcoinAmount(0); + } +}; + export { convertMonetaryAmountToUsdBig as convertMonetaryAmountToBigUSD, convertMonetaryAmountToValueInUSD, @@ -190,9 +198,11 @@ export { formatUSD, getLastMidnightTimestamps, getPolkadotLink, + getRandomArrayElement, getRandomVaultIdWithCapacity, monetaryToNumber, newSafeMonetaryAmount, + safeBitcoinAmount, shortAddress, shortTxId }; diff --git a/src/component-library/Accordion/Accordion.style.tsx b/src/component-library/Accordion/Accordion.style.tsx index fc4916d609..270ef209cb 100644 --- a/src/component-library/Accordion/Accordion.style.tsx +++ b/src/component-library/Accordion/Accordion.style.tsx @@ -28,7 +28,7 @@ const StyledAccordionItemWrapper = styled.div` @@ -49,7 +49,7 @@ const StyledAccordionItemButton = styled.button` `; const StyledChevronDown = styled(ChevronDown)>` - transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-90deg)'}; + transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-180deg)'}; transition: transform ${theme.transition.duration.duration150}ms ease; `; diff --git a/src/component-library/Accordion/AccordionItem.tsx b/src/component-library/Accordion/AccordionItem.tsx index 5ec1dd7593..85c5fbac08 100644 --- a/src/component-library/Accordion/AccordionItem.tsx +++ b/src/component-library/Accordion/AccordionItem.tsx @@ -41,7 +41,7 @@ const AccordionItem = >({ $isFocusVisible={isFocusVisible} > {item.props.title} - + diff --git a/src/component-library/Alert/Alert.tsx b/src/component-library/Alert/Alert.tsx index e49d9d204b..2b58cfecf6 100644 --- a/src/component-library/Alert/Alert.tsx +++ b/src/component-library/Alert/Alert.tsx @@ -1,15 +1,17 @@ -import { ReactNode } from 'react'; - +import { FlexProps } from '../Flex'; import { Status } from '../utils/prop-types'; import { StyledAlert, StyledWarningIcon } from './Alert.style'; -interface AlertProps { - status: Status; - children: ReactNode; -} +type Props = { + status?: Status; +}; + +type InheritAttrs = Omit; + +type AlertProps = Props & InheritAttrs; -const Alert = ({ status, children }: AlertProps): JSX.Element => ( - +const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => ( +
{children}
diff --git a/src/component-library/CTA/CTA.style.tsx b/src/component-library/CTA/CTA.style.tsx index 017da13651..a1a54cb29d 100644 --- a/src/component-library/CTA/CTA.style.tsx +++ b/src/component-library/CTA/CTA.style.tsx @@ -1,7 +1,10 @@ import styled from 'styled-components'; +import { ArrowTopRightOnSquare } from '@/assets/icons'; + +import { LoadingSpinner } from '../LoadingSpinner'; import { theme } from '../theme'; -import { CTASizes } from '../utils/prop-types'; +import { CTASizes, CTAVariants } from '../utils/prop-types'; interface StyledCTAProps { $fullWidth: boolean; @@ -9,6 +12,10 @@ interface StyledCTAProps { $isFocusVisible?: boolean; } +type StyledLoadingSpinnerProps = { + $variant: CTAVariants; +}; + const BaseCTA = styled.button` display: inline-flex; align-items: center; @@ -70,5 +77,19 @@ const LoadingWrapper = styled.span` margin-right: ${theme.spacing.spacing2}; `; -export { LoadingWrapper, OutlinedCTA, PrimaryCTA, SecondaryCTA, TextCTA }; +const StyledLoadingSpinner = styled(LoadingSpinner)` + border-top-color: ${({ $variant }) => theme.cta[$variant].text}; + border-right-color: ${({ $variant }) => theme.cta[$variant].text}; + border-bottom-color: ${({ $variant }) => theme.cta[$variant].text}; + border-left-color: transparent; +`; + +const StyledIcon = styled(ArrowTopRightOnSquare)` + margin-left: ${theme.spacing.spacing2}; + width: 1.2em; + height: 1.2em; + color: inherit; +`; + +export { LoadingWrapper, OutlinedCTA, PrimaryCTA, SecondaryCTA, StyledIcon, StyledLoadingSpinner, TextCTA }; export type { StyledCTAProps }; diff --git a/src/component-library/CTA/CTA.tsx b/src/component-library/CTA/CTA.tsx index dfe98e7cf2..5c00938b02 100644 --- a/src/component-library/CTA/CTA.tsx +++ b/src/component-library/CTA/CTA.tsx @@ -4,11 +4,10 @@ import { mergeProps } from '@react-aria/utils'; import { PressEvent } from '@react-types/shared'; import { ButtonHTMLAttributes, forwardRef } from 'react'; -import { LoadingSpinner } from '../LoadingSpinner'; import { useDOMRef } from '../utils/dom'; import { CTASizes } from '../utils/prop-types'; import { BaseCTA, BaseCTAProps } from './BaseCTA'; -import { LoadingWrapper } from './CTA.style'; +import { LoadingWrapper, StyledLoadingSpinner } from './CTA.style'; const loadingSizes: Record = { 'x-small': 14, @@ -54,9 +53,9 @@ const CTA = forwardRef( > {loading && ( - ; @@ -22,7 +24,7 @@ type CTALinkProps = Props & NativeAttrs & AriaAttrs & InheritAttrs; // TODO: Does this need to be changed to a React Router link component? const CTALink = forwardRef( - ({ disabled, external, to: toProp, children, ...props }, ref): JSX.Element => { + ({ disabled, external, to: toProp, children, icon, ...props }, ref): JSX.Element => { const linkRef = useDOMRef(ref); const ariaProps = { @@ -49,6 +51,7 @@ const CTALink = forwardRef( })} > {children} + {icon && } ); } diff --git a/src/component-library/Card/Card.style.tsx b/src/component-library/Card/Card.style.tsx index 84379aa430..15ea888a55 100644 --- a/src/component-library/Card/Card.style.tsx +++ b/src/component-library/Card/Card.style.tsx @@ -2,25 +2,33 @@ import styled, { css } from 'styled-components'; import { Flex } from '../Flex'; import { theme } from '../theme'; -import { CardVariants, Variants } from '../utils/prop-types'; +import { BorderRadius, CardVariants, Spacing, Variants } from '../utils/prop-types'; type StyledCardProps = { $variant: CardVariants; + $rounded: BorderRadius; + $padding: Spacing; + $shadowed: boolean; $background: Variants; $isHoverable?: boolean; $isPressable?: boolean; }; const StyledCard = styled(Flex)` - box-shadow: ${theme.boxShadow.default}; color: ${theme.colors.textPrimary}; background-color: ${({ $background }) => theme.card.bg[$background]}; border: ${({ $variant }) => ($variant === 'bordered' ? theme.border.default : theme.card.outlined.border)}; - border-radius: ${theme.rounded.xl}; - padding: ${theme.spacing.spacing6}; + border-radius: ${({ $rounded }) => theme.rounded[$rounded]}; + padding: ${({ $padding }) => theme.spacing[$padding]}; cursor: ${({ $isPressable }) => $isPressable && 'pointer'}; outline: none; + ${({ $shadowed }) => + $shadowed && + css` + box-shadow: ${theme.boxShadow.default}; + `} + ${({ $isHoverable }) => $isHoverable && css` diff --git a/src/component-library/Card/Card.tsx b/src/component-library/Card/Card.tsx index e5671390c5..ff0f164c21 100644 --- a/src/component-library/Card/Card.tsx +++ b/src/component-library/Card/Card.tsx @@ -5,7 +5,7 @@ import { forwardRef } from 'react'; import { FlexProps } from '../Flex'; import { useDOMRef } from '../utils/dom'; -import { CardVariants, Variants } from '../utils/prop-types'; +import { BorderRadius, CardVariants, Spacing, Variants } from '../utils/prop-types'; import { StyledCard } from './Card.style'; type Props = { @@ -14,6 +14,10 @@ type Props = { isHoverable?: boolean; isPressable?: boolean; isDisabled?: boolean; + rounded?: BorderRadius; + padding?: Spacing; + shadowed?: boolean; + onPress?: (e: PressEvent) => void; }; @@ -33,6 +37,9 @@ const Card = forwardRef( children, elementType, isDisabled, + rounded = 'xl', + padding = 'spacing6', + shadowed = true, ...props }, ref @@ -50,6 +57,9 @@ const Card = forwardRef( $background={background} $isHoverable={isHoverable} $isPressable={isPressable} + $rounded={rounded} + $padding={padding} + $shadowed={shadowed} direction={direction} elementType={elementType} {...mergeProps(props, isPressable ? buttonProps : {})} diff --git a/src/component-library/CoinIcon/icons/LDOT.tsx b/src/component-library/CoinIcon/icons/LDOT.tsx new file mode 100644 index 0000000000..b826a718de --- /dev/null +++ b/src/component-library/CoinIcon/icons/LDOT.tsx @@ -0,0 +1,44 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const LDOT = forwardRef((props, ref) => ( + + LDOT + + + + + + + + + + + + + + + + + +)); + +LDOT.displayName = 'LDOT'; + +export { LDOT }; diff --git a/src/component-library/CoinIcon/icons/index.ts b/src/component-library/CoinIcon/icons/index.ts index 610888ac36..fc94af8105 100644 --- a/src/component-library/CoinIcon/icons/index.ts +++ b/src/component-library/CoinIcon/icons/index.ts @@ -8,6 +8,7 @@ export { KAR } from './KAR'; export { KBTC } from './KBTC'; export { KINT } from './KINT'; export { KSM } from './KSM'; +export { LDOT } from './LDOT'; export { LKSM } from './LKSM'; export { LSKSM } from './LSKSM'; export { MOVR } from './MOVR'; diff --git a/src/component-library/CoinIcon/utils.ts b/src/component-library/CoinIcon/utils.ts index c9ebbb691f..04f540e234 100644 --- a/src/component-library/CoinIcon/utils.ts +++ b/src/component-library/CoinIcon/utils.ts @@ -9,6 +9,7 @@ import { KBTC, KINT, KSM, + LDOT, LKSM, LSKSM, MOVR, @@ -34,6 +35,7 @@ export const coins: Record = { KBTC, KINT, KSM, + LDOT, LKSM, USDT, VKSM, diff --git a/src/component-library/Input/BaseInput.tsx b/src/component-library/Input/BaseInput.tsx index c058bc71c3..3f02528dd6 100644 --- a/src/component-library/Input/BaseInput.tsx +++ b/src/component-library/Input/BaseInput.tsx @@ -5,7 +5,7 @@ import { Field, useFieldProps } from '../Field'; import { HelperTextProps } from '../HelperText'; import { LabelProps } from '../Label'; import { hasError } from '../utils/input'; -import { Sizes } from '../utils/prop-types'; +import { Sizes, Spacing } from '../utils/prop-types'; import { Adornment, StyledBaseInput } from './Input.style'; type Props = { @@ -17,6 +17,8 @@ type Props = { value?: string | ReadonlyArray | number; defaultValue?: string | ReadonlyArray | number; size?: Sizes; + // TODO: temporary + padding?: { top?: Spacing; bottom?: Spacing; left?: Spacing; right?: Spacing }; validationState?: ValidationState; onChange?: (e: React.ChangeEvent) => void; }; @@ -29,7 +31,7 @@ type BaseInputProps = Props & NativeAttrs & InheritAttrs; const BaseInput = forwardRef( ( - { startAdornment, endAdornment, bottomAdornment, disabled, size = 'medium', validationState, ...props }, + { startAdornment, endAdornment, bottomAdornment, disabled, size = 'medium', validationState, padding, ...props }, ref ): JSX.Element => { const endAdornmentRef = useRef(null); @@ -57,6 +59,7 @@ const BaseInput = forwardRef( $hasError={error} $isDisabled={!!disabled} $endAdornmentWidth={endAdornmentWidth} + $padding={padding} {...elementProps} /> {bottomAdornment && {bottomAdornment}} diff --git a/src/component-library/Input/Input.style.tsx b/src/component-library/Input/Input.style.tsx index e65ed6be50..60fab0fa0f 100644 --- a/src/component-library/Input/Input.style.tsx +++ b/src/component-library/Input/Input.style.tsx @@ -1,11 +1,14 @@ import styled from 'styled-components'; import { theme } from '../theme'; -import { Placement, Sizes } from '../utils/prop-types'; +import { Placement, Sizes, Spacing } from '../utils/prop-types'; + +const getSpacing = (padding?: Spacing) => (padding ? theme.spacing[padding] : undefined); type BaseInputProps = { $size: Sizes; $adornments: { bottom: boolean; left: boolean; right: boolean }; + $padding?: { top: Spacing; bottom: Spacing; left: Spacing; right: Spacing }; $isDisabled: boolean; $hasError: boolean; $endAdornmentWidth: number; @@ -29,8 +32,9 @@ const StyledBaseInput = styled.input` font-size: ${({ $size, $adornments }) => $adornments.bottom ? theme.input.overflow.large.text : theme.input[$size].text}; line-height: ${theme.lineHeight.base}; + font-weight: ${({ $size }) => theme.input[$size].weight}; - background-color: ${theme.input.background}; + background-color: ${({ $isDisabled }) => ($isDisabled ? theme.input.disabled.bg : theme.input.background)}; overflow: hidden; border: ${(props) => @@ -39,15 +43,16 @@ const StyledBaseInput = styled.input` : props.$hasError ? theme.input.error.border : theme.border.default}; - border-radius: ${theme.rounded.md}; + border-radius: ${theme.rounded.lg}; transition: border-color ${theme.transition.duration.duration150}ms ease-in-out, box-shadow ${theme.transition.duration.duration150}ms ease-in-out; - padding-top: ${theme.spacing.spacing2}; - padding-left: ${({ $adornments }) => ($adornments.left ? theme.input.paddingX.md : theme.spacing.spacing2)}; + padding-top: ${({ $padding }) => getSpacing($padding?.top) || theme.spacing.spacing2}; + padding-left: ${({ $adornments, $padding }) => + getSpacing($padding?.left) || ($adornments.left ? theme.input.paddingX.md : theme.spacing.spacing2)}; - padding-right: ${({ $adornments, $endAdornmentWidth }) => { - if (!$adornments.right) return theme.spacing.spacing2; + padding-right: ${({ $adornments, $endAdornmentWidth, $padding }) => { + if (!$adornments.right) return getSpacing($padding?.right) || theme.spacing.spacing2; // MEMO: adding `spacing6` is a hacky solution because // the `endAdornmentWidth` does not update width correctly @@ -56,7 +61,8 @@ const StyledBaseInput = styled.input` // the input overlap the adornment. return `calc(${$endAdornmentWidth}px + ${theme.spacing.spacing6})`; }}; - padding-bottom: ${({ $adornments }) => ($adornments.bottom ? theme.spacing.spacing6 : theme.spacing.spacing2)}; + padding-bottom: ${({ $adornments, $padding }) => + getSpacing($padding?.bottom) || ($adornments.bottom ? theme.spacing.spacing6 : theme.spacing.spacing2)}; &:hover:not(:disabled):not(:focus) { border: ${(props) => !props.$isDisabled && !props.$hasError && theme.border.focus}; diff --git a/src/component-library/Label/Label.style.tsx b/src/component-library/Label/Label.style.tsx index d3209b0dee..242de77506 100644 --- a/src/component-library/Label/Label.style.tsx +++ b/src/component-library/Label/Label.style.tsx @@ -6,7 +6,7 @@ const StyledLabel = styled.label` font-weight: ${theme.fontWeight.medium}; line-height: ${theme.lineHeight.lg}; font-size: ${theme.text.xs}; - color: ${theme.colors.textTertiary}; + color: ${theme.label.text}; padding: ${theme.spacing.spacing1} 0; align-self: flex-start; `; diff --git a/src/component-library/List/List.style.tsx b/src/component-library/List/List.style.tsx index 1e6d436bfd..d252659b61 100644 --- a/src/component-library/List/List.style.tsx +++ b/src/component-library/List/List.style.tsx @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'; import { Flex } from '../Flex'; import { theme } from '../theme'; -import { ListVariants, Variants } from '../utils/prop-types'; +import { ListVariants } from '../utils/prop-types'; type StyledListProps = { $variant: ListVariants; @@ -16,7 +16,7 @@ const StyledList = styled(Flex)` `; type StyledListItemProps = { - $variant: Variants | 'card'; + $variant: ListVariants; $isDisabled: boolean; $isHovered: boolean; $isInteractable: boolean; @@ -34,6 +34,7 @@ const StyledListItem = styled.li` color: ${theme.colors.textPrimary}; cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'}; outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'}; + opacity: ${({ $isDisabled }) => $isDisabled && 0.5}; ${({ $variant }) => { if ($variant === 'card') { diff --git a/src/component-library/Meter/Meter.style.tsx b/src/component-library/Meter/Meter.style.tsx index 1d23a075a5..72c5c5ad83 100644 --- a/src/component-library/Meter/Meter.style.tsx +++ b/src/component-library/Meter/Meter.style.tsx @@ -3,7 +3,7 @@ import styled, { css } from 'styled-components'; import { Flex } from '../Flex'; import { Span } from '../Text'; import { theme } from '../theme'; -import { Status, Variants } from '../utils/prop-types'; +import { MeterVariants, Status, Variants } from '../utils/prop-types'; type StyledWrapperProps = { $variant: Variants; @@ -11,7 +11,7 @@ type StyledWrapperProps = { type StyledMeterProps = { $position: number; - $variant: Variants; + $variant: MeterVariants; $hasRanges: boolean; }; diff --git a/src/component-library/Meter/Meter.tsx b/src/component-library/Meter/Meter.tsx index a907c9ca26..9e331b88fd 100644 --- a/src/component-library/Meter/Meter.tsx +++ b/src/component-library/Meter/Meter.tsx @@ -1,7 +1,7 @@ import { HTMLAttributes, useEffect, useState } from 'react'; import { Span } from '../Text'; -import { Status, Variants } from '../utils/prop-types'; +import { MeterVariants, Status } from '../utils/prop-types'; import { Indicator } from './Indicator'; import { StyledContainer, StyledIndicatorWrapper, StyledMeter, StyledWrapper } from './Meter.style'; import { RangeIndicators } from './RangeIndicators'; @@ -12,7 +12,7 @@ const getPosition = (percentage: number) => (percentage > 100 ? 100 : percentage type MeterRanges = [number, number, number, number]; type Props = { - variant?: Variants; + variant?: MeterVariants; value?: number; ranges?: MeterRanges; showIndicator?: boolean; diff --git a/src/component-library/Modal/Modal.style.tsx b/src/component-library/Modal/Modal.style.tsx index 250dad20f8..5610cda07b 100644 --- a/src/component-library/Modal/Modal.style.tsx +++ b/src/component-library/Modal/Modal.style.tsx @@ -13,6 +13,7 @@ type StyledModalProps = { type StyledDialogProps = { $isCentered?: boolean; $hasMaxHeight?: boolean; + $isOpen?: boolean; }; type StyledModalBodyProps = { @@ -56,6 +57,7 @@ const StyledModal = styled.div` const StyledDialog = styled(Dialog)` max-height: ${({ $hasMaxHeight }) => $hasMaxHeight && '560px'}; overflow: ${({ $isCentered }) => $isCentered && 'hidden'}; + pointer-events: ${({ $isOpen }) => !$isOpen && 'none'}; `; const StyledDialogBody = styled(DialogBody)` diff --git a/src/component-library/Modal/Modal.tsx b/src/component-library/Modal/Modal.tsx index 54e1723365..c00e8fec21 100644 --- a/src/component-library/Modal/Modal.tsx +++ b/src/component-library/Modal/Modal.tsx @@ -66,7 +66,7 @@ const Modal = forwardRef( onClose={onClose} wrapperRef={wrapperRef} > - + {children} diff --git a/src/component-library/Select/Select.stories.tsx b/src/component-library/Select/Select.stories.tsx index f233b502d4..a596980646 100644 --- a/src/component-library/Select/Select.stories.tsx +++ b/src/component-library/Select/Select.stories.tsx @@ -6,7 +6,7 @@ import { Flex } from '../Flex'; import { Select, SelectProps } from './Select'; import { SelectTrigger, SelectTriggerProps } from './SelectTrigger'; -const SelectTemplate: Story> = (args) => { +const SelectTemplate: Story> = (args) => { return ( @@ -65,4 +46,4 @@ const TokenSelect = ({ label: labelProp, 'aria-label': ariaLabelProp, ...props } }; export { TokenSelect }; -export type { TokenSelectProps }; +export type { TokenData, TokenSelectProps }; diff --git a/src/component-library/TokenInput/index.tsx b/src/component-library/TokenInput/index.tsx index 3454a8938d..e1687df30e 100644 --- a/src/component-library/TokenInput/index.tsx +++ b/src/component-library/TokenInput/index.tsx @@ -1,3 +1,5 @@ export type { TokenInputProps } from './TokenInput'; export { TokenInput } from './TokenInput'; -export type { TokenSelectProps } from './TokenSelect'; +export type { TokenListItemProps } from './TokenListItem'; +export { TokenListItem } from './TokenListItem'; +export type { TokenData, TokenSelectProps } from './TokenSelect'; diff --git a/src/component-library/Tooltip/Tooltip.tsx b/src/component-library/Tooltip/Tooltip.tsx index 7e83274bb8..822f0f5022 100644 --- a/src/component-library/Tooltip/Tooltip.tsx +++ b/src/component-library/Tooltip/Tooltip.tsx @@ -12,7 +12,7 @@ import { StyledTooltip, StyledTooltipLabel, StyledTooltipTip } from './Tooltip.s // MEMO: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tooltip/src/TooltipTrigger.tsx#L22 const DEFAULT_OFFSET = -1; const DEFAULT_CROSS_OFFSET = 0; -const DEFAULT_DELAY = 500; +const DEFAULT_DELAY = 250; type Props = { label?: ReactNode; diff --git a/src/component-library/index.tsx b/src/component-library/index.tsx index 2a09fe612f..f71642c245 100644 --- a/src/component-library/index.tsx +++ b/src/component-library/index.tsx @@ -59,8 +59,8 @@ export type { TextLinkProps } from './TextLink'; export { TextLink } from './TextLink'; export type { ComponentLibraryTheme } from './theme'; export { theme } from './theme'; -export type { TokenInputProps, TokenSelectProps } from './TokenInput'; -export { TokenInput } from './TokenInput'; +export type { TokenData, TokenInputProps, TokenListItemProps, TokenSelectProps } from './TokenInput'; +export { TokenInput, TokenListItem } from './TokenInput'; export type { TokenStackProps } from './TokenStack'; export { TokenStack } from './TokenStack'; export type { TooltipProps } from './Tooltip'; diff --git a/src/component-library/theme/theme.interlay.css b/src/component-library/theme/theme.interlay.css index 05ca316875..649c6c2cf4 100644 --- a/src/component-library/theme/theme.interlay.css +++ b/src/component-library/theme/theme.interlay.css @@ -10,11 +10,12 @@ } .theme-interlay { - --colors-border: var(--colors-neutral-black-25); + --colors-border: #dee3f5; --colors-bg-primary: var(--colors-neutral-white); /* Card */ --color-card-primary-bg: var(--colors-neutral-white); --color-card-secondary-bg: var(--colors-light-blue-10); + --color-card-tertiary-bg: #fbfbfc; /* CTA */ --colors-cta-primary: var(--colors-light-blue); --colors-cta-primary-hover: var(--colors-light-blue-90); @@ -34,13 +35,13 @@ /* Tabs */ --colors-tabs-bg: var(--colors-neutral-white); --colors-tabs-text: var(--colors-neutral-black-9); - --colors-tabs-active-color: var(--colors-light-blue); - --colors-tabs-active-bg: var(--colors-lighter-blue); + --colors-tabs-active-color: var(--colors-neutral-white); + --colors-tabs-active-bg: var(--colors-light-blue); /* Loading Spinner */ - --colors-indeterminate-primary-color: var(--colors-lighter-blue); - --colors-indeterminate-primary-bg: var(--colors-neutral-black-20); - --colors-indeterminate-secondary-color: var(--colors-light-blue); - --colors-indeterminate-secondary-bg: var(--colors-light-blue-10); + --colors-indeterminate-primary-color: var(--colors-light-blue); + --colors-indeterminate-primary-bg: var(--colors-light-blue-10); + --colors-indeterminate-secondary-color: var(--colors-lighter-blue); + --colors-indeterminate-secondary-bg: var(--colors-neutral-black-20); --colors-indeterminate-outlined-color: var(--colors-neutral-black-80); --colors-indeterminate-outlined-bg: var(--colors-neutral-black-20); /* Meter */ @@ -54,14 +55,17 @@ --color-progress-circle-fill: var(--colors-light-blue); /* Input */ --colors-input-text: var(--colors-neutral-black); - --colors-input-default-border: var(--colors-neutral-light-grey); + --colors-input-default-border: #dee3f5; --colors-input-hover-border: var(--colors-lighter-blue); --colors-input-focus-border: var(--colors-light-blue-90); --colors-input-disabled-text: #9a9a9a; --colors-input-disabled-border: var(--colors-neutral-lighter-grey); --colors-input-background: var(--colors-neutral-white); + --colors-input-disabled-bg: #fbfbfc; + /* Label */ + --colors-label-text: var(--colors-neutral-black); /* Token Input */ - --colors-token-input-end-adornment-bg: var(--colors-neutral-lighter-grey); + --colors-token-input-end-adornment-bg: var(--colors-neutral-white); /* Token List */ --colors-token-list-item-text: var(--colors-neutral-black); --colors-token-list-item-select-text: var(--colors-neutral-white); diff --git a/src/component-library/theme/theme.kintsugi.css b/src/component-library/theme/theme.kintsugi.css index 5b3df686b3..3ab36b5e61 100644 --- a/src/component-library/theme/theme.kintsugi.css +++ b/src/component-library/theme/theme.kintsugi.css @@ -18,6 +18,8 @@ /* Card */ --color-card-primary-bg: var(--colors-dark-blue); --color-card-secondary-bg: var(--colors-neutral-white-06); + /* TODO: add */ + --color-card-tertiary-bg: var(--colors-neutral-white-06); /* CTA */ --colors-cta-primary: var(--colors-yellow); --colors-cta-primary-hover: var(--colors-dark-yellow); @@ -63,6 +65,9 @@ --colors-input-disabled-text: var(--colors-slate-gray); --colors-input-disabled-border: var(--colors-mid-blue); --colors-input-background: var(--colors-blue); + --colors-input-disabled-bg: var(--colors-blue); + /* Label */ + --colors-label-text: var(--colors-neutral-white); /* Token Input */ --colors-token-input-end-adornment-bg: var(--colors-neutral-white-25); /* Token List */ diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts index 45f079bb66..22f6d5f2cf 100644 --- a/src/component-library/theme/theme.ts +++ b/src/component-library/theme/theme.ts @@ -110,6 +110,7 @@ const theme = { }, disabled: { color: 'var(--colors-input-disabled-text)', + bg: 'var(--colors-input-disabled-bg)', border: '1px solid var(--colors-input-disabled-border)' }, helperText: { @@ -119,15 +120,18 @@ const theme = { }, small: { text: 'var(--text-s)', - maxHeight: 'var(--spacing-8)' + maxHeight: 'var(--spacing-8)', + weight: 'var(--font-weights-book)' }, medium: { text: 'var(--text-base)', - maxHeight: 'var(--spacing-10)' + maxHeight: 'var(--spacing-10)', + weight: 'var(--font-weights-book)' }, large: { text: 'var(--text-4xl)', - maxHeight: 'var(--spacing-16)' + maxHeight: 'var(--spacing-16)', + weight: 'var(--font-weights-medium)' }, overflow: { large: { @@ -142,6 +146,9 @@ const theme = { xl2: '9.5rem' } }, + label: { + text: 'var(--colors-label-text)' + }, tokenInput: { endAdornment: { bg: 'var(--colors-token-input-end-adornment-bg)' @@ -161,7 +168,11 @@ const theme = { outlined: { border: '1px solid transparent' }, - bg: { primary: 'var(--color-card-primary-bg)', secondary: 'var(--color-card-secondary-bg)' } + bg: { + primary: 'var(--color-card-primary-bg)', + secondary: 'var(--color-card-secondary-bg)', + tertiary: 'var(--color-card-tertiary-bg)' + } }, cta: { primary: { @@ -566,8 +577,8 @@ const theme = { color: 'var(--color-select-text)', size: { small: { - padding: 'var(--spacing-1)', - text: 'var(--text-s)', + padding: 'var(--spacing-1) var(--spacing-2)', + text: 'var(--text-xs)', // TODO: to be determined maxHeight: 'calc(var(--spacing-6) - 1px)' }, diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts index 2b5d4b629d..cdeb314c12 100644 --- a/src/component-library/utils/prop-types.ts +++ b/src/component-library/utils/prop-types.ts @@ -4,9 +4,9 @@ import { theme } from '../theme'; export const tuple = (...args: T): T => args; -export const variant = tuple('primary', 'secondary'); +export const variant = tuple('primary', 'secondary', 'tertiary'); -export const ctaVariant = tuple(...variant, 'outlined', 'text'); +export const ctaVariant = tuple('primary', 'secondary', 'outlined', 'text'); export const status = tuple('error', 'warning', 'success'); @@ -51,7 +51,9 @@ export type CTAVariants = typeof ctaVariant[number]; export type CardVariants = 'default' | 'bordered'; -export type ListVariants = Variants | 'card'; +export type ListVariants = Exclude | 'card'; + +export type MeterVariants = Exclude; export type DividerVariants = Colors | 'default'; @@ -108,3 +110,5 @@ export type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit'; export type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export type ProgressBarColors = 'default' | 'red'; + +export type BorderRadius = keyof typeof theme.rounded; diff --git a/src/components/DataGrid/AssetCell.tsx b/src/components/DataGrid/AssetCell.tsx index 90726ce648..e127f58e93 100644 --- a/src/components/DataGrid/AssetCell.tsx +++ b/src/components/DataGrid/AssetCell.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; -import { CoinIcon, Flex, FlexProps, FontSize, IconSize, Span } from '@/component-library'; +import { InformationCircle } from '@/assets/icons'; +import { CoinIcon, Flex, FlexProps, FontSize, IconSize, Span, Tooltip } from '@/component-library'; import { StyledCellTag } from './DataGrid.style'; @@ -10,19 +11,25 @@ type Props = { size?: IconSize; textSize?: FontSize; tag?: ReactNode; + tooltip?: ReactNode; }; type InheritAttrs = Omit; type AssetCellProps = Props & InheritAttrs; -const AssetCell = ({ ticker, tickers, size, tag, textSize = 's', ...props }: AssetCellProps): JSX.Element => ( +const AssetCell = ({ ticker, tickers, size, tag, textSize = 's', tooltip, ...props }: AssetCellProps): JSX.Element => ( {ticker} {tag && {tag}} + {tooltip && ( + + + + )} ); diff --git a/src/components/FundWallet/use-entities.tsx b/src/components/FundWallet/use-entities.tsx index afb4868502..5ab066ed40 100644 --- a/src/components/FundWallet/use-entities.tsx +++ b/src/components/FundWallet/use-entities.tsx @@ -5,7 +5,6 @@ import BANXA_KITNSUGI from '@/assets/img/banxa-white.png'; import { ReactComponent as AcalaLogoIcon } from '@/assets/img/exchanges/acala-logo.svg'; import { ReactComponent as GateLogoIcon } from '@/assets/img/exchanges/gate-logo.svg'; import { ReactComponent as KrakenLogoIcon } from '@/assets/img/exchanges/kraken-logo.svg'; -import { ReactComponent as LbankLogoIcon } from '@/assets/img/exchanges/lbank-logo.svg'; import { ReactComponent as MexcLogoForInterlayIcon } from '@/assets/img/exchanges/mexc-logo-for-interlay.svg'; import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchanges/mexc-logo-for-kintsugi.svg'; import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg'; @@ -57,10 +56,6 @@ const useEntities = (): UseEntitiesResult => { { pathname: 'https://www.mexc.com/exchange/INTR_USDT', icon: - }, - { - pathname: 'https://www.lbank.info/exchange/intr/usdt', - icon: } ]; diff --git a/src/components/NotificationToast/NotificationToast.styles.tsx b/src/components/NotificationToast/NotificationToast.styles.tsx new file mode 100644 index 0000000000..11a85da6e7 --- /dev/null +++ b/src/components/NotificationToast/NotificationToast.styles.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { Flex, ProgressBar, theme } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + padding: ${theme.spacing.spacing4}; +`; + +const StyledProgressBar = styled(ProgressBar)` + margin-top: ${theme.spacing.spacing4}; +`; + +export { StyledProgressBar, StyledWrapper }; diff --git a/src/components/NotificationToast/NotificationToast.tsx b/src/components/NotificationToast/NotificationToast.tsx new file mode 100644 index 0000000000..f4a6b8bb64 --- /dev/null +++ b/src/components/NotificationToast/NotificationToast.tsx @@ -0,0 +1,103 @@ +import { useHover } from '@react-aria/interactions'; +import { mergeProps } from '@react-aria/utils'; +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { CheckCircle, XCircle } from '@/assets/icons'; +import { CTA, Divider, Flex, FlexProps, LoadingSpinner, P } from '@/component-library'; +import { useCountdown } from '@/utils/hooks/use-countdown'; + +import { StyledProgressBar, StyledWrapper } from './NotificationToast.styles'; + +type NotificationToastVariant = 'success' | 'error' | 'loading'; + +const loadingSpinner = ; + +const getIcon = (variant: NotificationToastVariant) => + ({ + loading: loadingSpinner, + success: , + error: + }[variant]); + +type Props = { + title?: ReactNode; + variant?: NotificationToastVariant; + description?: string; + timeout?: number; + action?: ReactNode; + onDismiss?: () => void; +}; + +type InheritAttrs = Omit; + +type NotificationToastProps = Props & InheritAttrs; + +const NotificationToast = ({ + variant = 'success', + title, + timeout = 8000, + description, + onDismiss, + action, + ...props +}: NotificationToastProps): JSX.Element => { + const { t } = useTranslation(); + + const showCountdown = variant === 'success' || variant === 'error'; + + const { value: countdown, start, stop } = useCountdown({ + timeout, + disabled: !showCountdown, + onEndCountdown: onDismiss + }); + + const { hoverProps } = useHover({ + onHoverStart: stop, + onHoverEnd: start, + isDisabled: !showCountdown + }); + + const icon = getIcon(variant); + + return ( + + + + {icon} + + +

+ {title} +

+ {description && ( +

+ {description} +

+ )} + + + {showCountdown && ( + + )} + + {action && ( + <> + {action} + + + )} + + {t('dismiss')} + + + + ); +}; + +export { NotificationToast }; +export type { NotificationToastProps, NotificationToastVariant }; diff --git a/src/components/NotificationToast/TransactionToast.tsx b/src/components/NotificationToast/TransactionToast.tsx new file mode 100644 index 0000000000..9c0152a319 --- /dev/null +++ b/src/components/NotificationToast/TransactionToast.tsx @@ -0,0 +1,84 @@ +import { TFunction } from 'i18next'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; + +import { updateTransactionModal } from '@/common/actions/general.actions'; +import { CTA, CTALink } from '@/component-library'; +import { TransactionStatus } from '@/utils/hooks/transaction/types'; + +import { NotificationToast, NotificationToastProps, NotificationToastVariant } from './NotificationToast'; + +const getData = (t: TFunction, variant: TransactionStatus) => + (({ + [TransactionStatus.CONFIRM]: { + title: t('transaction.confirm_transaction'), + status: 'loading' + }, + [TransactionStatus.SUBMITTING]: { + title: t('transaction.transaction_processing'), + status: 'loading' + }, + [TransactionStatus.SUCCESS]: { + title: t('transaction.transaction_successful'), + status: 'success' + }, + [TransactionStatus.ERROR]: { + title: t('transaction.transaction_failed'), + status: 'error' + } + } as Record)[variant]); + +type Props = { + variant?: TransactionStatus; + url?: string; + errorMessage?: string; +}; + +type InheritAttrs = Omit; + +type TransactionToastProps = Props & InheritAttrs; + +const TransactionToast = ({ + variant = TransactionStatus.SUCCESS, + url, + description, + errorMessage, + onDismiss, + ...props +}: TransactionToastProps): JSX.Element => { + const { t } = useTranslation(); + const dispatch = useDispatch(); + + const handleViewDetails = () => { + dispatch(updateTransactionModal(true, { variant: TransactionStatus.ERROR, description, errorMessage })); + onDismiss?.(); + }; + + const { title, status } = getData(t, variant); + + const action = url ? ( + + {t('view_subscan')} + + ) : ( + errorMessage && ( + + View Details + + ) + ); + + return ( + + ); +}; + +export { TransactionToast }; +export type { TransactionToastProps }; diff --git a/src/components/NotificationToast/index.tsx b/src/components/NotificationToast/index.tsx new file mode 100644 index 0000000000..4d0a75a2a1 --- /dev/null +++ b/src/components/NotificationToast/index.tsx @@ -0,0 +1,4 @@ +export type { NotificationToastProps } from './NotificationToast'; +export { NotificationToast } from './NotificationToast'; +export type { TransactionToastProps } from './TransactionToast'; +export { TransactionToast } from './TransactionToast'; diff --git a/src/components/PlusDivider/PlusDivider.styles.tsx b/src/components/PlusDivider/PlusDivider.styles.tsx new file mode 100644 index 0000000000..5fb117fae3 --- /dev/null +++ b/src/components/PlusDivider/PlusDivider.styles.tsx @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +import { Flex, theme } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + position: relative; + height: ${theme.spacing.spacing10}; +`; + +const StyledCircle = styled.div` + display: inline-flex; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + padding: ${theme.spacing.spacing2}; + background-color: var(--colors-border); + border-radius: ${theme.rounded.full}; +`; + +const StyledBackground = styled.div` + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + padding: ${theme.spacing.spacing1} ${theme.spacing.spacing8}; + background-color: ${theme.colors.bgPrimary}; +`; + +export { StyledBackground, StyledCircle, StyledWrapper }; diff --git a/src/components/PlusDivider/PlusDivider.tsx b/src/components/PlusDivider/PlusDivider.tsx new file mode 100644 index 0000000000..37fa6bfbf8 --- /dev/null +++ b/src/components/PlusDivider/PlusDivider.tsx @@ -0,0 +1,19 @@ +import { PlusCircle } from '@/assets/icons'; +import { Divider, FlexProps } from '@/component-library'; + +import { StyledBackground, StyledCircle, StyledWrapper } from './PlusDivider.styles'; + +type PlusDividerProps = FlexProps; + +const PlusDivider = (props: PlusDividerProps): JSX.Element => ( + + + + + + + +); + +export { PlusDivider }; +export type { PlusDividerProps }; diff --git a/src/components/PlusDivider/index.tsx b/src/components/PlusDivider/index.tsx new file mode 100644 index 0000000000..234145d40b --- /dev/null +++ b/src/components/PlusDivider/index.tsx @@ -0,0 +1,2 @@ +export type { PlusDividerProps } from './PlusDivider'; +export { PlusDivider } from './PlusDivider'; diff --git a/src/components/PoolsTable/PoolsTable.tsx b/src/components/PoolsTable/PoolsTable.tsx index cf1ff590bd..992401c460 100644 --- a/src/components/PoolsTable/PoolsTable.tsx +++ b/src/components/PoolsTable/PoolsTable.tsx @@ -9,6 +9,7 @@ import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/page import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { getFarmingApr } from '@/utils/helpers/pools'; import { DateRangeVolume, useGetDexVolumes } from '@/utils/hooks/api/use-get-dex-volume'; +import { useGetPoolsTradingApr } from '@/utils/hooks/api/use-get-pools-trading-apr'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { AssetCell, BalanceCell, Cell, Table, TableProps } from '../DataGrid'; @@ -42,6 +43,7 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS const prices = useGetPrices(); const titleId = useId(); const { getDexTotalVolumeUSD } = useGetDexVolumes(DateRangeVolume.D7); + const { getTradingAprOfPool } = useGetPoolsTradingApr(); const isAccountPools = variant === 'account-pools'; @@ -71,8 +73,8 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS const totalLiquidityUSD = calculateTotalLiquidityUSD(pooledCurrencies, prices); const farmingApr = getFarmingApr(rewardAmountsYearly, totalSupply, totalLiquidityUSD, prices); - // TODO: add also APR from trading volume based on squid data - const aprAmount = farmingApr; + const tradingApr = getTradingAprOfPool(data); + const aprAmount = farmingApr.add(tradingApr); const apr = ; // TODO: revert alignItems prop when `sevenDayVolume` is adressed @@ -103,7 +105,7 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS accountLiquidity }; }), - [getDexTotalVolumeUSD, isAccountPools, pools, prices, variant] + [getDexTotalVolumeUSD, isAccountPools, pools, prices, variant, getTradingAprOfPool] ); return ( diff --git a/src/components/TransactionDetails/TransactionDetails.style.tsx b/src/components/TransactionDetails/TransactionDetails.style.tsx new file mode 100644 index 0000000000..d93596d198 --- /dev/null +++ b/src/components/TransactionDetails/TransactionDetails.style.tsx @@ -0,0 +1,41 @@ +import styled from 'styled-components'; + +import { InformationCircle } from '@/assets/icons'; +import { Dl, DlGroup, Select, SelectProps, theme, TokenData } from '@/component-library'; + +const StyledDl = styled(Dl)` + border: ${theme.border.default}; + background-color: ${theme.card.bg.tertiary}; + padding: ${theme.spacing.spacing4}; + font-size: ${theme.text.xs}; + border-radius: ${theme.rounded.lg}; +`; + +const StyledInformationCircle = styled(InformationCircle)` + margin-left: ${theme.spacing.spacing2}; + vertical-align: text-top; +`; + +const SelectWrapper = ({ ...props }: SelectProps<'modal', TokenData>) => {...props} />; + +const StyledSelect = styled(SelectWrapper)` + flex-direction: row; + justify-content: space-between; +`; + +// This custom padding helps to keep harmony between normal elements and elements with small select +const StyledDlGroup = styled(DlGroup)` + &:first-of-type { + padding-bottom: 0.407rem; + } + + &:not(:first-of-type):not(:last-of-type) { + padding: 0.407rem 0; + } + + &:last-of-type { + padding-top: 0.407rem; + } +`; + +export { StyledDl, StyledDlGroup, StyledInformationCircle, StyledSelect }; diff --git a/src/components/TransactionDetails/TransactionDetails.tsx b/src/components/TransactionDetails/TransactionDetails.tsx new file mode 100644 index 0000000000..8ef48e9a0f --- /dev/null +++ b/src/components/TransactionDetails/TransactionDetails.tsx @@ -0,0 +1,14 @@ +import { DlProps } from '@/component-library'; + +import { StyledDl } from './TransactionDetails.style'; + +type TransactionDetailsProps = DlProps; + +const TransactionDetails = ({ children, direction = 'column', ...props }: TransactionDetailsProps): JSX.Element => ( + + {children} + +); + +export { TransactionDetails }; +export type { TransactionDetailsProps }; diff --git a/src/components/TransactionDetails/TransactionDetailsDd.tsx b/src/components/TransactionDetails/TransactionDetailsDd.tsx new file mode 100644 index 0000000000..9b0efe1280 --- /dev/null +++ b/src/components/TransactionDetails/TransactionDetailsDd.tsx @@ -0,0 +1,10 @@ +import { Dd, DdProps } from '@/component-library'; + +type TransactionDetailsDdProps = DdProps; + +const TransactionDetailsDd = ({ color = 'primary', size = 'xs', ...props }: TransactionDetailsDdProps): JSX.Element => ( +
+); + +export { TransactionDetailsDd }; +export type { TransactionDetailsDdProps }; diff --git a/src/components/TransactionDetails/TransactionDetailsDt.tsx b/src/components/TransactionDetails/TransactionDetailsDt.tsx new file mode 100644 index 0000000000..bf9f0bda48 --- /dev/null +++ b/src/components/TransactionDetails/TransactionDetailsDt.tsx @@ -0,0 +1,33 @@ +import { ReactNode } from 'react'; + +import { Dt, DtProps, Tooltip } from '@/component-library'; + +import { StyledInformationCircle } from './TransactionDetails.style'; + +type Props = { + tooltipLabel?: ReactNode; +}; + +type InheritAttrs = Omit; + +type TransactionDetailsDtProps = Props & InheritAttrs; + +const TransactionDetailsDt = ({ + color = 'primary', + size = 'xs', + tooltipLabel, + children, + ...props +}: TransactionDetailsDtProps): JSX.Element => ( +
+ {children} + {tooltipLabel && ( + + + + )} +
+); + +export { TransactionDetailsDt }; +export type { TransactionDetailsDtProps }; diff --git a/src/components/TransactionDetails/TransactionDetailsGroup.tsx b/src/components/TransactionDetails/TransactionDetailsGroup.tsx new file mode 100644 index 0000000000..764f582dd9 --- /dev/null +++ b/src/components/TransactionDetails/TransactionDetailsGroup.tsx @@ -0,0 +1,16 @@ +import { DlGroupProps } from '@/component-library'; + +import { StyledDlGroup } from './TransactionDetails.style'; + +type TransactionDetailsGroupProps = DlGroupProps; + +const TransactionDetailsGroup = ({ + flex = '1', + justifyContent = 'space-between', + ...props +}: TransactionDetailsGroupProps): JSX.Element => ( + +); + +export { TransactionDetailsGroup }; +export type { TransactionDetailsGroupProps }; diff --git a/src/components/TransactionDetails/TransactionSelectToken.tsx b/src/components/TransactionDetails/TransactionSelectToken.tsx new file mode 100644 index 0000000000..1475bace70 --- /dev/null +++ b/src/components/TransactionDetails/TransactionSelectToken.tsx @@ -0,0 +1,67 @@ +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Item, SelectProps, Span, TokenData, TokenListItem, Tooltip } from '@/component-library'; + +import { StyledInformationCircle, StyledSelect } from './TransactionDetails.style'; + +type Props = { + label?: ReactNode; + tooltipLabel?: ReactNode; +}; + +type InheritAttrs = Omit, keyof Props | 'children'>; + +type TransactionSelectTokenProps = Props & InheritAttrs; + +const TransactionSelectToken = ({ + label: labelProp, + tooltipLabel, + items, + value, + ...props +}: TransactionSelectTokenProps): JSX.Element => { + const { t } = useTranslation(); + + const label = tooltipLabel ? ( + + {labelProp} + {tooltipLabel && ( + + + + )} + + ) : ( + labelProp + ); + + // disabled zero balance currencies ignoring the current value + // even if the balance is zero + const disabledKeys = (items as TokenData[]) + ?.filter((item) => Number(item.balance) === 0 && item.value !== value) + .map((item) => item.value); + + return ( + item.value.value} + disabledKeys={disabledKeys} + label={label} + items={items} + value={value} + {...props} + > + {(data: TokenData) => ( + + + + )} + + ); +}; + +export { TransactionSelectToken }; +export type { TransactionSelectTokenProps }; diff --git a/src/components/TransactionDetails/index.tsx b/src/components/TransactionDetails/index.tsx new file mode 100644 index 0000000000..b81a57655b --- /dev/null +++ b/src/components/TransactionDetails/index.tsx @@ -0,0 +1,10 @@ +export type { TransactionDetailsProps } from './TransactionDetails'; +export { TransactionDetails } from './TransactionDetails'; +export type { TransactionDetailsDdProps } from './TransactionDetailsDd'; +export { TransactionDetailsDd } from './TransactionDetailsDd'; +export type { TransactionDetailsDtProps } from './TransactionDetailsDt'; +export { TransactionDetailsDt } from './TransactionDetailsDt'; +export type { TransactionDetailsGroupProps } from './TransactionDetailsGroup'; +export { TransactionDetailsGroup } from './TransactionDetailsGroup'; +export type { TransactionSelectTokenProps } from './TransactionSelectToken'; +export { TransactionSelectToken } from './TransactionSelectToken'; diff --git a/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx new file mode 100644 index 0000000000..2e8c69e4a4 --- /dev/null +++ b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx @@ -0,0 +1,96 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps, useId } from '@react-aria/utils'; +import { Key, ReactNode, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { displayMonetaryAmountInUSDFormat, formatUSD } from '@/common/utils/utils'; +import { Alert, Flex } from '@/component-library'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { SelectCurrencyFilter, useSelectCurrency } from '@/utils/hooks/use-select-currency'; + +import { + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionDetailsProps, + TransactionSelectToken, + TransactionSelectTokenProps +} from '../TransactionDetails'; + +type Props = { + defaultCurrency?: CurrencyExt; + amount?: MonetaryAmount; + label?: ReactNode; + showInsufficientBalance?: boolean; + tooltipLabel?: ReactNode; + selectProps?: TransactionSelectTokenProps; +}; + +type InheritAttrs = Omit; + +type TransactionFeeDetailsProps = Props & InheritAttrs; + +const TransactionFeeDetails = ({ + amount, + defaultCurrency, + showInsufficientBalance, + selectProps, + label, + tooltipLabel, + className, + ...props +}: TransactionFeeDetailsProps): JSX.Element => { + const prices = useGetPrices(); + const { t } = useTranslation(); + const selectCurrency = useSelectCurrency(SelectCurrencyFilter.TRADEABLE_FOR_NATIVE_CURRENCY); + const id = useId(); + const [ticker, setTicker] = useState(defaultCurrency?.ticker); + + const amountLabel = amount + ? `${amount.toHuman()} ${amount.currency.ticker} (${displayMonetaryAmountInUSDFormat( + amount, + getTokenPrice(prices, amount.currency.ticker)?.usd + )})` + : `${0.0} ${ticker} (${formatUSD(0)})`; + + const errorMessage = + showInsufficientBalance && + t('forms.ensure_adequate_amount_left_to_cover_action', { action: t('fees').toLowerCase() }); + + const handleSelectionChange = (key: Key) => setTicker(key as string); + + return ( + + + {selectProps && ( + + )} + + {label || t('tx_fees')} + {amountLabel} + + + {errorMessage && ( + + {errorMessage} + + )} + + ); +}; + +export { TransactionFeeDetails }; +export type { TransactionFeeDetailsProps }; diff --git a/src/components/TransactionFeeDetails/index.tsx b/src/components/TransactionFeeDetails/index.tsx new file mode 100644 index 0000000000..84405ffc89 --- /dev/null +++ b/src/components/TransactionFeeDetails/index.tsx @@ -0,0 +1,2 @@ +export type { TransactionFeeDetailsProps } from './TransactionFeeDetails'; +export { TransactionFeeDetails } from './TransactionFeeDetails'; diff --git a/src/components/TransactionModal/TransactionModal.tsx b/src/components/TransactionModal/TransactionModal.tsx index 6ab35ada22..2ae9d82102 100644 --- a/src/components/TransactionModal/TransactionModal.tsx +++ b/src/components/TransactionModal/TransactionModal.tsx @@ -17,7 +17,7 @@ import { P, TextLink } from '@/component-library'; -import { NotificationToast, useNotifications } from '@/utils/context/Notifications'; +import { NotificationToastType, useNotifications } from '@/utils/context/Notifications'; import { TransactionStatus } from '@/utils/hooks/transaction/types'; import { StyledCard, StyledCheckCircle, StyledXCircle } from './TransactionModal.style'; @@ -63,7 +63,7 @@ const TransactionModal = (): JSX.Element => { // No need to show toast if the transaction is SUCCESS or ERROR if (timestamp && (variant === TransactionStatus.CONFIRM || variant === TransactionStatus.SUBMITTING)) { notifications.show(timestamp, { - type: NotificationToast.TRANSACTION, + type: NotificationToastType.TRANSACTION, props: { variant: variant, url, description } }); } diff --git a/src/components/index.tsx b/src/components/index.tsx index bb20578fa9..67fb1e8d70 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -2,6 +2,8 @@ export type { AccountSelectProps } from './AccountSelect'; export { AccountSelect } from './AccountSelect'; export type { AuthCTAProps } from './AuthCTA'; export { AuthCTA } from './AuthCTA'; +export type { AuthModalProps, SignTermsModalProps } from './AuthModal'; +export { AuthModal, SignTermsModal } from './AuthModal'; export type { AssetCellProps, BalanceCellProps, CellProps, TableProps } from './DataGrid'; export { AssetCell, BalanceCell, Cell, Table } from './DataGrid'; export type { FundWalletProps } from './FundWallet'; @@ -12,10 +14,15 @@ export type { LoanPositionsTableProps } from './LoanPositionsTable'; export { LoanPositionsTable } from './LoanPositionsTable'; export type { NotificationsPopoverProps } from './NotificationsPopover'; export { NotificationsPopover } from './NotificationsPopover'; +export type { NotificationToastProps, TransactionToastProps } from './NotificationToast'; +export { NotificationToast, TransactionToast } from './NotificationToast'; +export type { PlusDividerProps } from './PlusDivider'; +export { PlusDivider } from './PlusDivider'; export type { PoolsTableProps } from './PoolsTable'; export { PoolsTable } from './PoolsTable'; export { ReceivableAssets } from './ReceivableAssets'; export type { ToastContainerProps } from './ToastContainer'; export { ToastContainer } from './ToastContainer'; -export type { TransactionToastProps } from './TransactionToast'; -export { TransactionToast } from './TransactionToast'; +export * from './TransactionDetails'; +export type { TransactionFeeDetailsProps } from './TransactionFeeDetails'; +export { TransactionFeeDetails } from './TransactionFeeDetails'; diff --git a/src/config/links.ts b/src/config/links.ts index b2d84b6a02..aaef5d2310 100644 --- a/src/config/links.ts +++ b/src/config/links.ts @@ -11,6 +11,7 @@ const INTERLAY_TERMS_AND_CONDITIONS_LINK = const KINTSUGI_TERMS_AND_CONDITIONS_LINK = 'https://github.com/interlay/terms/blob/master/kintsugi-dapp-terms-of-use.pdf'; const INTERLAY_USE_WRAPPED_CURRENCY_LINK = 'https://docs.interlay.io/#/interlay/earn-with-ibtc'; +const INTERLAY_GET_ASSETS_LINK = 'https://docs.interlay.io/#/guides/assets'; const KINTSUGI_USE_WRAPPED_CURRENCY_LINK = 'https://docs.interlay.io/#/kintsugi/Earn-With-kBTC'; const INTERLAY_GOVERNANCE_LINK = 'https://interlay.subsquare.io/'; const KINTSUGI_GOVERNANCE_LINK = 'https://kintsugi.subsquare.io'; @@ -18,6 +19,7 @@ const INTERLAY_SUBSCAN_LINK = 'https://interlay.subscan.io'; const KINTSUGI_SUBSCAN_LINK = 'https://kintsugi.subscan.io'; const INTERLAY_VAULT_DOCS_LINK = 'https://docs.interlay.io/#/vault/overview'; const INTERLAY_DOS_AND_DONTS_DOCS_LINK = 'https://docs.interlay.io/#/vault/installation?id=dos-and-donts'; +const INTERLAY_WHITEPAPPER = 'https://gateway.pinata.cloud/ipfs/QmWp62gdLssFpAoG2JqK8sy3m3rTRUa8LyzoSY8ZFisYNB'; const BANXA_LINK = 'http://talisman.banxa.com/'; @@ -34,6 +36,7 @@ export { INTERLAY_DOCS_LINK, INTERLAY_DOS_AND_DONTS_DOCS_LINK, INTERLAY_EMAIL_LINK, + INTERLAY_GET_ASSETS_LINK, INTERLAY_GITHUB_LINK, INTERLAY_GOVERNANCE_LINK, INTERLAY_SUBSCAN_LINK, @@ -41,6 +44,7 @@ export { INTERLAY_TWITTER_LINK, INTERLAY_USE_WRAPPED_CURRENCY_LINK, INTERLAY_VAULT_DOCS_LINK, + INTERLAY_WHITEPAPPER, KINTSUGI_CROWDLOAN_LINK, KINTSUGI_GOVERNANCE_LINK, KINTSUGI_SUBSCAN_LINK, diff --git a/src/config/relay-chains.tsx b/src/config/relay-chains.tsx index de9302d73f..fc0d3a9737 100644 --- a/src/config/relay-chains.tsx +++ b/src/config/relay-chains.tsx @@ -41,6 +41,7 @@ import { ReactComponent as KintsugiLogoWithTextIcon } from '@/assets/img/kintsug import { ReactComponent as KusamaLogoIcon } from '@/assets/img/kusama-logo.svg'; import { INTERLAY_CROWDLOAN_LINK, + INTERLAY_DOCS_LINK, INTERLAY_GOVERNANCE_LINK, INTERLAY_SUBSCAN_LINK, INTERLAY_TERMS_AND_CONDITIONS_LINK, @@ -68,6 +69,7 @@ let TERMS_AND_CONDITIONS_LINK: string; let USE_WRAPPED_CURRENCY_LINK: string; let GOVERNANCE_LINK: string; let SUBSCAN_LINK: string; +let DOCS_LINK: string; let WRAPPED_TOKEN: WrappedCurrency; let RELAY_CHAIN_NATIVE_TOKEN: RelayChainNativeToken; let GOVERNANCE_TOKEN: GovernanceCurrency; @@ -133,6 +135,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { USE_WRAPPED_CURRENCY_LINK = INTERLAY_USE_WRAPPED_CURRENCY_LINK; GOVERNANCE_LINK = INTERLAY_GOVERNANCE_LINK; SUBSCAN_LINK = INTERLAY_SUBSCAN_LINK; + DOCS_LINK = INTERLAY_DOCS_LINK; WRAPPED_TOKEN = InterBtc; RELAY_CHAIN_NATIVE_TOKEN = Polkadot; GOVERNANCE_TOKEN = Interlay; @@ -179,6 +182,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { USE_WRAPPED_CURRENCY_LINK = KINTSUGI_USE_WRAPPED_CURRENCY_LINK; GOVERNANCE_LINK = KINTSUGI_GOVERNANCE_LINK; SUBSCAN_LINK = KINTSUGI_SUBSCAN_LINK; + DOCS_LINK = INTERLAY_DOCS_LINK; WRAPPED_TOKEN = KBtc; RELAY_CHAIN_NATIVE_TOKEN = Kusama; GOVERNANCE_TOKEN = Kintsugi; @@ -234,6 +238,7 @@ export { BRIDGE_PARACHAIN_NAME, BridgeParachainLogoIcon, CROWDLOAN_LINK, + DOCS_LINK, GOVERNANCE_LINK, GOVERNANCE_TOKEN, GOVERNANCE_TOKEN_SYMBOL, diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/CancelledIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/CancelledIssueRequest/index.tsx index 80c887bdc6..eb8629f691 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/CancelledIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/CancelledIssueRequest/index.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'; import { FaExclamationCircle, FaTimesCircle } from 'react-icons/fa'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/CompletedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/CompletedIssueRequest/index.tsx index 5ca296666e..69f4df6f0a 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/CompletedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/CompletedIssueRequest/index.tsx @@ -7,8 +7,8 @@ import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx index 3472455342..8373dbff9b 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ConfirmedIssueRequest/index.tsx @@ -6,7 +6,7 @@ import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-link import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ExternalLink from '@/legacy-components/ExternalLink'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx index c824c7e26f..e6fba19589 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx @@ -7,8 +7,8 @@ import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-link import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; diff --git a/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx b/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx index 922f9b5e30..f1e35721b8 100644 --- a/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx +++ b/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx @@ -9,7 +9,7 @@ import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/IssueUI/index.tsx b/src/legacy-components/IssueUI/index.tsx index 4edd9b6878..640a417a15 100644 --- a/src/legacy-components/IssueUI/index.tsx +++ b/src/legacy-components/IssueUI/index.tsx @@ -169,6 +169,17 @@ const IssueUI = ({ issue }: Props): JSX.Element => { +
+ + {t('issue_page.request')} + + +

{t('note')}: diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/CompletedRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/CompletedRedeemRequest/index.tsx index d7efad9ffc..fb0a7f7513 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/CompletedRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/CompletedRedeemRequest/index.tsx @@ -6,8 +6,8 @@ import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-link import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx index a95aa49ae7..8b2ec9c856 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx @@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'; import { formatNumber } from '@/common/utils/utils'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/PendingWithBtcTxNotFoundRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/PendingWithBtcTxNotFoundRedeemRequest/index.tsx index 7eeac859db..4c0e1898ee 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/PendingWithBtcTxNotFoundRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/PendingWithBtcTxNotFoundRedeemRequest/index.tsx @@ -5,9 +5,9 @@ import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; import { BLOCK_TIME } from '@/config/parachain'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; import Timer from '@/legacy-components/Timer'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; interface Props { diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx index ccc50e5649..7d821b1deb 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx @@ -20,7 +20,7 @@ import ExternalLink from '@/legacy-components/ExternalLink'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx index 747b97f1c9..86f0f30879 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx @@ -19,7 +19,7 @@ import ExternalLink from '@/legacy-components/ExternalLink'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getExchangeRate } from '@/utils/helpers/oracle'; diff --git a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx index 541f4ef875..00d9d4bb24 100644 --- a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx +++ b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx @@ -15,8 +15,8 @@ import InterlayConiferOutlinedButton from '@/legacy-components/buttons/InterlayC import InterlayDenimOrKintsugiMidnightOutlinedButton from '@/legacy-components/buttons/InterlayDenimOrKintsugiMidnightOutlinedButton'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; +import RequestWrapper from '@/legacy-components/RequestWrapper'; import { useSubstrateSecureState } from '@/lib/substrate'; -import RequestWrapper from '@/pages/Bridge/RequestWrapper'; import { REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/RedeemUI/index.tsx b/src/legacy-components/RedeemUI/index.tsx index 229f1f3619..6e7fda6f02 100644 --- a/src/legacy-components/RedeemUI/index.tsx +++ b/src/legacy-components/RedeemUI/index.tsx @@ -158,6 +158,17 @@ const RedeemUI = ({ redeem, onClose }: Props): JSX.Element => { +

+ + {t('issue_page.request')} + + +
<>{renderModalStatusPanel(redeem)} diff --git a/src/pages/Bridge/RequestWrapper/index.tsx b/src/legacy-components/RequestWrapper/index.tsx similarity index 100% rename from src/pages/Bridge/RequestWrapper/index.tsx rename to src/legacy-components/RequestWrapper/index.tsx diff --git a/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx b/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx index e381ee79b3..b68a689d7c 100644 --- a/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx +++ b/src/legacy-components/buttons/InterlayDefaultContainedButton/index.tsx @@ -28,7 +28,8 @@ const InterlayDefaultContainedButton = React.forwardRef( 'focus:ring-opacity-50', 'border', - 'border-transparent', + 'border-black', + 'border-opacity-10', 'font-medium', disabledOrPending @@ -36,7 +37,7 @@ const InterlayDefaultContainedButton = React.forwardRef( : clsx( TEXT_CLASSES, 'dark:!text-black', // Suppressing white text color in this specific edge case - 'bg-interlayPaleSky-100', + 'bg-white', 'hover:bg-interlayPaleSky-200' ), diff --git a/src/lib/form/index.tsx b/src/lib/form/index.tsx index af76026d2e..54a5940bdc 100644 --- a/src/lib/form/index.tsx +++ b/src/lib/form/index.tsx @@ -1,9 +1,4 @@ -export type { - CreateVaultFormData, - CrossChainTransferFormData, - DepositLiquidityPoolFormData, - LoanFormData -} from './schemas'; +export type { CrossChainTransferFormData, DepositLiquidityPoolFormData, LoanFormData } from './schemas'; export * from './schemas'; export type { FormErrors } from './use-form'; export { useForm } from './use-form'; diff --git a/src/lib/form/schemas/amm.ts b/src/lib/form/schemas/amm.ts deleted file mode 100644 index def382e26f..0000000000 --- a/src/lib/form/schemas/amm.ts +++ /dev/null @@ -1,51 +0,0 @@ -import yup, { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; - -type DepositLiquidityPoolFormData = Record; - -type DepositLiquidityPoolValidationParams = FeesValidationParams & { - tokens: Record; -}; - -// MEMO: schema is dynamic because is deals with one to many fields -const depositLiquidityPoolSchema = (params: DepositLiquidityPoolValidationParams): yup.ObjectSchema => { - const shape = Object.keys(params.tokens).reduce((acc, ticker, idx) => { - const tokenParams = params.tokens[ticker]; - const validation = yup.string().requiredAmount('deposit').maxAmount(tokenParams).minAmount(tokenParams, 'deposit'); - - if (idx === 0) { - return { ...acc, [ticker]: validation.fees(params) }; - } - - return { ...acc, [ticker]: validation }; - }, {}); - - return yup.object().shape(shape); -}; - -const WITHDRAW_LIQUIDITY_POOL_FIELD = 'withdraw'; - -type WithdrawLiquidityPoolFormData = { - [WITHDRAW_LIQUIDITY_POOL_FIELD]?: number; -}; - -type WithdrawLiquidityPoolValidationParams = FeesValidationParams & - MaxAmountValidationParams & - MinAmountValidationParams; - -const withdrawLiquidityPoolSchema = (params: WithdrawLiquidityPoolValidationParams): yup.ObjectSchema => - yup.object().shape({ - [WITHDRAW_LIQUIDITY_POOL_FIELD]: yup - .string() - .requiredAmount(WITHDRAW_LIQUIDITY_POOL_FIELD) - .maxAmount(params) - .minAmount(params, WITHDRAW_LIQUIDITY_POOL_FIELD) - .fees(params) - }); - -export { depositLiquidityPoolSchema, WITHDRAW_LIQUIDITY_POOL_FIELD, withdrawLiquidityPoolSchema }; -export type { - DepositLiquidityPoolFormData, - DepositLiquidityPoolValidationParams, - WithdrawLiquidityPoolFormData, - WithdrawLiquidityPoolValidationParams -}; diff --git a/src/lib/form/schemas/bridge.ts b/src/lib/form/schemas/bridge.ts new file mode 100644 index 0000000000..f53a778e83 --- /dev/null +++ b/src/lib/form/schemas/bridge.ts @@ -0,0 +1,105 @@ +import i18n from 'i18next'; + +import yup, { AddressType, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const BRIDGE_ISSUE_AMOUNT_FIELD = 'issue-amount'; +const BRIDGE_ISSUE_CUSTOM_VAULT_FIELD = 'issue-custom-vault'; +const BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH = 'issue-custom-vault-switch'; +const BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN = 'issue-griefing-collateral-token'; +const BRIDGE_ISSUE_FEE_TOKEN = 'issue-fee-token'; + +type BridgeIssueFormData = { + [BRIDGE_ISSUE_AMOUNT_FIELD]?: string; + [BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]?: string; + [BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH]?: boolean; + [BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]?: string; + [BRIDGE_ISSUE_FEE_TOKEN]?: string; +}; + +type BridgeIssueValidationParams = { + [BRIDGE_ISSUE_AMOUNT_FIELD]: MaxAmountValidationParams & MinAmountValidationParams; +}; + +const bridgeIssueSchema = (params: BridgeIssueValidationParams): yup.ObjectSchema => + yup.object().shape({ + [BRIDGE_ISSUE_AMOUNT_FIELD]: yup + .string() + .requiredAmount('issue') + .maxAmount( + params[BRIDGE_ISSUE_AMOUNT_FIELD], + 'issue', + i18n.t('forms.amount_must_be_at_most', { + action: 'issue', + amount: params[BRIDGE_ISSUE_AMOUNT_FIELD].maxAmount.toString() + }) + ) + .minAmount(params[BRIDGE_ISSUE_AMOUNT_FIELD], 'issue'), + [BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]: yup.string().when([BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH], { + is: (isManualVault: string) => isManualVault, + then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'issue vault' })) + }), + [BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]: yup.string().required(), + [BRIDGE_ISSUE_FEE_TOKEN]: yup.string().required() + }); + +const BRIDGE_REDEEM_AMOUNT_FIELD = 'redeem-amount'; +const BRIDGE_REDEEM_CUSTOM_VAULT_FIELD = 'redeem-custom-vault'; +const BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH = 'redeem-custom-vault-switch'; +const BRIDGE_REDEEM_PREMIUM_VAULT_FIELD = 'redeem-premium-vault'; +const BRIDGE_REDEEM_ADDRESS = 'redeem-address'; +const BRIDGE_REDEEM_FEE_TOKEN = 'redeem-fee-token'; + +type BridgeRedeemFormData = { + [BRIDGE_REDEEM_AMOUNT_FIELD]?: string; + [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]?: string; + [BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]?: boolean; + [BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]?: boolean; + [BRIDGE_REDEEM_ADDRESS]?: string; + [BRIDGE_REDEEM_FEE_TOKEN]?: string; +}; + +type BridgeRedeemValidationParams = { + [BRIDGE_REDEEM_AMOUNT_FIELD]: MaxAmountValidationParams & MinAmountValidationParams; +}; + +const bridgeRedeemSchema = (params: BridgeRedeemValidationParams): yup.ObjectSchema => + yup.object().shape({ + [BRIDGE_REDEEM_AMOUNT_FIELD]: yup + .string() + .requiredAmount('redeem') + .maxAmount( + params[BRIDGE_REDEEM_AMOUNT_FIELD], + 'redeem', + i18n.t('forms.amount_must_be_at_most', { + action: 'redeem', + amount: params[BRIDGE_REDEEM_AMOUNT_FIELD].maxAmount.toString() + }) + ) + .minAmount(params[BRIDGE_REDEEM_AMOUNT_FIELD], 'redeem'), + [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]: yup.string().when([BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH], { + is: (isManualVault: string) => isManualVault, + then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'redeem vault' })) + }), + [BRIDGE_REDEEM_ADDRESS]: yup + .string() + .required(i18n.t('forms.please_enter_your_field', { field: 'BTC address' })) + .address(AddressType.BTC), + [BRIDGE_REDEEM_FEE_TOKEN]: yup.string().required() + }); + +export { + BRIDGE_ISSUE_AMOUNT_FIELD, + BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, + BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH, + BRIDGE_ISSUE_FEE_TOKEN, + BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, + BRIDGE_REDEEM_ADDRESS, + BRIDGE_REDEEM_AMOUNT_FIELD, + BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, + BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH, + BRIDGE_REDEEM_FEE_TOKEN, + BRIDGE_REDEEM_PREMIUM_VAULT_FIELD, + bridgeIssueSchema, + bridgeRedeemSchema +}; +export type { BridgeIssueFormData, BridgeRedeemFormData }; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index fac035a489..3c89f2e120 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -1,29 +1,7 @@ -export type { - DepositLiquidityPoolFormData, - DepositLiquidityPoolValidationParams, - WithdrawLiquidityPoolFormData, - WithdrawLiquidityPoolValidationParams -} from './amm'; -export { depositLiquidityPoolSchema, WITHDRAW_LIQUIDITY_POOL_FIELD, withdrawLiquidityPoolSchema } from './amm'; -export type { LoanFormData, LoanValidationParams } from './loans'; -export { loanSchema } from './loans'; -export { StrategySchema } from './strategy'; -export type { SwapFormData, SwapValidationParams } from './swap'; -export { - SWAP_INPUT_AMOUNT_FIELD, - SWAP_INPUT_TOKEN_FIELD, - SWAP_OUTPUT_TOKEN_FIELD, - SwapErrorMessage, - swapSchema -} from './swap'; -export type { CrossChainTransferFormData, CrossChainTransferValidationParams } from './transfers'; -export { - CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, - CROSS_CHAIN_TRANSFER_FROM_FIELD, - CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, - CROSS_CHAIN_TRANSFER_TO_FIELD, - CROSS_CHAIN_TRANSFER_TOKEN_FIELD, - crossChainTransferSchema -} from './transfers'; -export type { CreateVaultFormData } from './vaults'; -export { CREATE_VAULT_DEPOSIT_FIELD, createVaultSchema } from './vaults'; +export * from './bridge'; +export * from './loans'; +export * from './pools'; +export * from './strategy'; +export * from './swap'; +export * from './transfers'; +export * from './vaults'; diff --git a/src/lib/form/schemas/loans.ts b/src/lib/form/schemas/loans.ts index 42dcefcc52..43c02e3172 100644 --- a/src/lib/form/schemas/loans.ts +++ b/src/lib/form/schemas/loans.ts @@ -1,16 +1,57 @@ import { LoanAction } from '@/types/loans'; -import yup, { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; -type LoanFormData = Partial>; +const LOAN_AMOUNT_FIELD = 'loan-amount'; +const LOAN_FEE_TOKEN_FIELD = 'loan-fee-token'; -type LoanValidationParams = FeesValidationParams & MaxAmountValidationParams & MinAmountValidationParams; +type LoanFormData = { + [LOAN_AMOUNT_FIELD]?: string; + [LOAN_FEE_TOKEN_FIELD]?: string; +}; + +type LoanValidationParams = MaxAmountValidationParams & MinAmountValidationParams; const loanSchema = (loanAction: LoanAction, params: LoanValidationParams): yup.ObjectSchema => { return yup.object().shape({ - [loanAction]: yup.string().requiredAmount(loanAction).maxAmount(params).minAmount(params, loanAction).fees(params) + [LOAN_AMOUNT_FIELD]: yup + .string() + .requiredAmount(loanAction) + .maxAmount(params, loanAction) + .minAmount(params, loanAction), + [LOAN_FEE_TOKEN_FIELD]: yup.string().required() }); }; -export { loanSchema }; -export type { LoanFormData, LoanValidationParams }; +const LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD = 'loan-toggle-collateral-fee-token'; + +type ToggleCollateralLoansFormData = { + [LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]?: string; +}; + +const toggleCollateralLoanSchema = (): yup.ObjectSchema => + yup.object().shape({ + [LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]: yup.string().required() + }); + +const LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD = 'loan-claim-rewards-fee-token'; + +type ClaimRewardsLoansFormData = { + [LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD]?: string; +}; + +const claimRewardsLoanSchema = (): yup.ObjectSchema => + yup.object().shape({ + [LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD]: yup.string().required() + }); + +export { + claimRewardsLoanSchema, + LOAN_AMOUNT_FIELD, + LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, + LOAN_FEE_TOKEN_FIELD, + LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, + loanSchema, + toggleCollateralLoanSchema +}; +export type { ClaimRewardsLoansFormData, LoanFormData, LoanValidationParams, ToggleCollateralLoansFormData }; diff --git a/src/lib/form/schemas/pools.ts b/src/lib/form/schemas/pools.ts new file mode 100644 index 0000000000..43eea88722 --- /dev/null +++ b/src/lib/form/schemas/pools.ts @@ -0,0 +1,72 @@ +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const POOL_DEPOSIT_FEE_TOKEN_FIELD = 'despodit-fee-token'; + +type DepositLiquidityPoolFormData = { + [field: string]: string | undefined; + [POOL_DEPOSIT_FEE_TOKEN_FIELD]?: string; +}; + +type DepositLiquidityPoolValidationParams = { + tokens: Record; +}; + +// MEMO: schema is dynamic because is deals with one to many fields +const depositLiquidityPoolSchema = (params: DepositLiquidityPoolValidationParams): yup.ObjectSchema => { + const shape = Object.keys(params.tokens).reduce((acc, ticker) => { + const tokenParams = params.tokens[ticker]; + const validation = yup.string().requiredAmount('deposit').maxAmount(tokenParams).minAmount(tokenParams, 'deposit'); + + return { ...acc, [ticker]: validation }; + }, {}); + + return yup.object().shape({ ...shape, [POOL_DEPOSIT_FEE_TOKEN_FIELD]: yup.string().required() }); +}; + +const POOL_WITHDRAW_AMOUNT_FIELD = 'withdraw-amount'; +const POOL_WITHDRAW_FEE_TOKEN_FIELD = 'withdraw-fee-token'; + +type WithdrawLiquidityPoolFormData = { + [POOL_WITHDRAW_AMOUNT_FIELD]?: string; + [POOL_WITHDRAW_FEE_TOKEN_FIELD]?: string; +}; + +type WithdrawLiquidityPoolValidationParams = MaxAmountValidationParams & MinAmountValidationParams; + +const withdrawLiquidityPoolSchema = (params: WithdrawLiquidityPoolValidationParams): yup.ObjectSchema => + yup.object().shape({ + [POOL_WITHDRAW_AMOUNT_FIELD]: yup + .string() + .requiredAmount('withdraw') + .maxAmount(params) + .minAmount(params, 'withdraw'), + [POOL_WITHDRAW_FEE_TOKEN_FIELD]: yup.string().required() + }); + +const POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD = 'claim-rewards-fee-token'; + +type ClaimRewardsPoolFormData = { + [POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD]?: string; +}; + +const claimRewardsPoolSchema = (): yup.ObjectSchema => + yup.object().shape({ + [POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD]: yup.string().required() + }); + +export { + claimRewardsPoolSchema, + depositLiquidityPoolSchema, + POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, + POOL_DEPOSIT_FEE_TOKEN_FIELD, + POOL_WITHDRAW_AMOUNT_FIELD, + POOL_WITHDRAW_FEE_TOKEN_FIELD, + withdrawLiquidityPoolSchema +}; +export type { + ClaimRewardsPoolFormData, + DepositLiquidityPoolFormData, + DepositLiquidityPoolValidationParams, + WithdrawLiquidityPoolFormData, + WithdrawLiquidityPoolValidationParams +}; diff --git a/src/lib/form/schemas/swap.ts b/src/lib/form/schemas/swap.ts index 8b9a7855b2..3f1bbcfcc6 100644 --- a/src/lib/form/schemas/swap.ts +++ b/src/lib/form/schemas/swap.ts @@ -1,4 +1,4 @@ -import yup, { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; enum SwapErrorMessage { SELECT_TOKEN = 'SELECT_TOKEN', @@ -10,16 +10,16 @@ enum SwapErrorMessage { const SWAP_INPUT_AMOUNT_FIELD = 'input-amount'; const SWAP_INPUT_TOKEN_FIELD = 'input-token'; const SWAP_OUTPUT_TOKEN_FIELD = 'output-token'; +const SWAP_FEE_TOKEN_FIELD = 'fee-token'; type SwapFormData = { [SWAP_INPUT_AMOUNT_FIELD]?: string; [SWAP_INPUT_TOKEN_FIELD]?: string; [SWAP_OUTPUT_TOKEN_FIELD]?: string; + [SWAP_FEE_TOKEN_FIELD]?: string; }; -type SwapValidationParams = FeesValidationParams & - Partial & - Partial; +type SwapValidationParams = Partial & Partial; // Does not follow the normal pattern because this form has a // custom validation, specially when it comes to error messages @@ -28,7 +28,12 @@ const swapSchema = (params: { [SWAP_INPUT_AMOUNT_FIELD]: SwapValidationParams }) [SWAP_INPUT_TOKEN_FIELD]: yup.string().required('amm.select_token'), [SWAP_OUTPUT_TOKEN_FIELD]: yup.string().required('amm.select_token'), [SWAP_INPUT_AMOUNT_FIELD]: yup.string().when([SWAP_INPUT_TOKEN_FIELD, SWAP_OUTPUT_TOKEN_FIELD], { - is: (input: string, output: string) => input && output, + is: (input: string, output: string) => { + // only validates when params are declared + const { maxAmount, minAmount } = params[SWAP_INPUT_AMOUNT_FIELD]; + + return input && output && minAmount && maxAmount; + }, then: (schema) => schema .requiredAmount(undefined, 'amm.enter_token_amount') @@ -39,9 +44,16 @@ const swapSchema = (params: { [SWAP_INPUT_AMOUNT_FIELD]: SwapValidationParams }) undefined, 'amm.insufficient_token_balance' ) - .fees(params[SWAP_INPUT_AMOUNT_FIELD], 'insufficient_funds_fees') - }) + }), + [SWAP_FEE_TOKEN_FIELD]: yup.string().required() }); -export { SWAP_INPUT_AMOUNT_FIELD, SWAP_INPUT_TOKEN_FIELD, SWAP_OUTPUT_TOKEN_FIELD, SwapErrorMessage, swapSchema }; +export { + SWAP_FEE_TOKEN_FIELD, + SWAP_INPUT_AMOUNT_FIELD, + SWAP_INPUT_TOKEN_FIELD, + SWAP_OUTPUT_TOKEN_FIELD, + SwapErrorMessage, + swapSchema +}; export type { SwapFormData, SwapValidationParams }; diff --git a/src/lib/form/schemas/transfers.ts b/src/lib/form/schemas/transfers.ts index a6fe5c5f47..6adf8adcb0 100644 --- a/src/lib/form/schemas/transfers.ts +++ b/src/lib/form/schemas/transfers.ts @@ -1,4 +1,5 @@ import { ChainName } from '@interlay/bridge'; +import i18n from 'i18next'; import { TFunction } from 'react-i18next'; import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; @@ -43,12 +44,55 @@ const crossChainTransferSchema = (params: CrossChainTransferValidationParams, t: .required(t('forms.please_select_your_field', { field: 'transfer token' })) }); +const TRANSFER_RECIPIENT_FIELD = 'transfer-destination'; +const TRANSFER_TOKEN_FIELD = 'transfer-token'; +const TRANSFER_AMOUNT_FIELD = 'transfer-amount'; +const TRANSFER_FEE_TOKEN_FIELD = 'transfer-fee-token'; + +type TransferFormData = { + [TRANSFER_RECIPIENT_FIELD]?: string; + [TRANSFER_TOKEN_FIELD]?: string; + [TRANSFER_AMOUNT_FIELD]?: string; + [TRANSFER_FEE_TOKEN_FIELD]?: string; +}; + +type TransferValidationParams = { + [TRANSFER_AMOUNT_FIELD]: Partial & Partial; +}; + +const transferSchema = (params: TransferValidationParams): yup.ObjectSchema => + yup.object().shape({ + [TRANSFER_AMOUNT_FIELD]: yup + .string() + .requiredAmount('transfer') + .maxAmount(params[TRANSFER_AMOUNT_FIELD] as MaxAmountValidationParams) + .minAmount(params[TRANSFER_AMOUNT_FIELD] as MinAmountValidationParams, 'transfer'), + [TRANSFER_RECIPIENT_FIELD]: yup + .string() + .required(i18n.t('forms.please_enter_your_field', { field: 'recipient' })) + .address(), + [TRANSFER_TOKEN_FIELD]: yup + .string() + .required(i18n.t('forms.please_select_your_field', { field: 'transfer token' })), + [TRANSFER_FEE_TOKEN_FIELD]: yup.string().required() + }); + export { CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, CROSS_CHAIN_TRANSFER_FROM_FIELD, CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, CROSS_CHAIN_TRANSFER_TO_FIELD, CROSS_CHAIN_TRANSFER_TOKEN_FIELD, - crossChainTransferSchema + crossChainTransferSchema, + TRANSFER_AMOUNT_FIELD, + TRANSFER_FEE_TOKEN_FIELD, + TRANSFER_RECIPIENT_FIELD, + TRANSFER_TOKEN_FIELD, + transferSchema +}; +export type { + CrossChainTransferFormData, + CrossChainTransferValidationParams, + TransferFormData, + TransferValidationParams }; -export type { CrossChainTransferFormData, CrossChainTransferValidationParams }; diff --git a/src/lib/form/schemas/vaults.ts b/src/lib/form/schemas/vaults.ts index 0a348422c0..eda17492c2 100644 --- a/src/lib/form/schemas/vaults.ts +++ b/src/lib/form/schemas/vaults.ts @@ -1,22 +1,30 @@ -import yup, { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; +import i18n from 'i18next'; -const CREATE_VAULT_DEPOSIT_FIELD = 'deposit'; +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; -type CreateVaultFormData = { - [CREATE_VAULT_DEPOSIT_FIELD]?: number; +const VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD = 'vaults-deposit-collateral_amount'; +const VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD = 'vaults-deposit-collateral-fee-token'; + +type VaultsDepositCollateralFormData = { + [VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD]?: string; + [VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD]?: string; }; -type CreateVaultValidationParams = FeesValidationParams & MaxAmountValidationParams & MinAmountValidationParams; +type VaultsDepositCollateralValidationParams = MaxAmountValidationParams & MinAmountValidationParams; -const createVaultSchema = (params: CreateVaultValidationParams): yup.ObjectSchema => +const depositCollateralVaultsSchema = (params: VaultsDepositCollateralValidationParams): yup.ObjectSchema => yup.object().shape({ - [CREATE_VAULT_DEPOSIT_FIELD]: yup + [VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD]: yup .string() - .requiredAmount(CREATE_VAULT_DEPOSIT_FIELD) + .requiredAmount(i18n.t('deposit').toLowerCase()) .maxAmount(params) - .minAmount(params, CREATE_VAULT_DEPOSIT_FIELD) - .fees(params) + .minAmount(params, i18n.t('deposit').toLowerCase()), + [VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD]: yup.string().required() }); -export { CREATE_VAULT_DEPOSIT_FIELD, createVaultSchema }; -export type { CreateVaultFormData }; +export { + depositCollateralVaultsSchema, + VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD, + VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD +}; +export type { VaultsDepositCollateralFormData, VaultsDepositCollateralValidationParams }; diff --git a/src/lib/form/use-form.tsx b/src/lib/form/use-form.tsx index 7e62e97bd9..a85effedc3 100644 --- a/src/lib/form/use-form.tsx +++ b/src/lib/form/use-form.tsx @@ -1,66 +1,125 @@ -import { - FieldInputProps, - FormikConfig, - FormikErrors as FormErrors, - FormikValues, - useFormik, - validateYupSchema, - yupToFormErrors -} from 'formik'; -import { useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; +import { chain } from '@react-aria/utils'; +import { FieldInputProps, FormikConfig, FormikErrors as FormErrors, FormikValues, useFormik } from 'formik'; +import { FocusEvent, Key, useCallback } from 'react'; +import { useDebounce } from 'react-use'; type GetFieldProps = ( nameOrOptions: any, - withErrorMessage?: boolean -) => FieldInputProps & { errorMessage?: string | string[] }; + hideErrorMessage?: boolean, + hideUntouchedError?: boolean +) => FieldInputProps & { + errorMessage?: string | string[]; + onSelectionChange: (key: Key) => void; +}; type UseFormArgs = FormikConfig & { - disableValidation?: boolean; - getFieldProps?: GetFieldProps; + hideErrorMessages?: boolean; + onComplete?: (form: Values) => void; }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const useForm = ({ - validationSchema, - disableValidation, + hideErrorMessages, + onComplete, ...args }: UseFormArgs) => { - const { t } = useTranslation(); - const { validateForm, values, getFieldProps: getFormikFieldProps, ...formik } = useFormik({ - ...args, - validate: (values) => { - if (disableValidation) return; - - try { - validateYupSchema(values, validationSchema, true, { t }); - } catch (err) { - return yupToFormErrors(err); + const { + validateForm, + values, + getFieldProps: getFormikFieldProps, + setFieldTouched, + setFieldValue, + ...formik + } = useFormik(args); + + // emits onComplete event based on debounced values, only if form is modified and valid + // meaning that it will only check for completeness in 250ms interval of no changes to the values + useDebounce( + () => { + if (!formik.isValid || !formik.dirty) return; + + onComplete?.(values); + }, + 250, + // do not run debounce if onComplete is not passed + onComplete ? [values] : [] + ); + + // Handles when field gets forced blur to focus on modal + // If so, we dont want to consider it as touched if it has not yet been touched on + const handleBlur = useCallback( + (e: FocusEvent, fieldName: string, isTouched: boolean) => { + if (!isTouched) { + const relatedTargetEl = e.relatedTarget as HTMLElement; + const targetEl = e.target as HTMLElement; + + if (!relatedTargetEl || !targetEl) return; + + const isModal = relatedTargetEl.getAttribute('role') === 'dialog'; + + if (!isModal) return; + + const modalId = relatedTargetEl.getAttribute('id'); + const buttonAriaControls = targetEl.getAttribute('aria-controls'); + + if (!modalId || !buttonAriaControls) return; + + const isSelect = buttonAriaControls === modalId; + + if (!isSelect) return; + + setFieldTouched(fieldName, false); } - } - }); + }, + [setFieldTouched] + ); const getFieldProps: GetFieldProps = useCallback( - (nameOrOptions, withErrorMessage = true) => { - if (withErrorMessage) { - const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object'; - const errorMessage = isOptions ? formik.errors[nameOrOptions.name] : formik.errors[nameOrOptions]; + (nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean) => { + const fieldProps = getFormikFieldProps(nameOrOptions); + + const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object'; + const fieldName = isOptions ? nameOrOptions.name : nameOrOptions; + + const customFieldProps = { + ...fieldProps, + onSelectionChange: (key: Key) => { + setFieldValue(fieldName, key, true); + } + }; + + // Asses if error message is going to be omitted, but validation still takes place (approach used in swap due to custom error messages) + const hideError = hideErrorMessage || hideErrorMessages; + + if (!hideError) { + const isTouched = formik.touched[fieldName]; + + // Option allows to only show error when input is touched. + // Input is touched when if focus and blur events are emitted + const errorMessage = hideUntouchedError + ? isTouched + ? formik.errors[fieldName] + : undefined + : formik.errors[fieldName]; return { - ...getFormikFieldProps(nameOrOptions), + ...customFieldProps, + onBlur: chain(fieldProps.onBlur, (e: FocusEvent) => handleBlur(e, fieldName, isTouched as boolean)), errorMessage: errorMessage as string | string[] | undefined }; } - return getFormikFieldProps(nameOrOptions); + return customFieldProps; }, - [formik.errors, getFormikFieldProps] + [getFormikFieldProps, hideErrorMessages, formik.touched, formik.errors, setFieldValue, handleBlur] ); return { values, validateForm, getFieldProps, + setFieldTouched, + setFieldValue, ...formik }; }; diff --git a/src/lib/form/validate.ts b/src/lib/form/validate.ts new file mode 100644 index 0000000000..5e1c82adeb --- /dev/null +++ b/src/lib/form/validate.ts @@ -0,0 +1,21 @@ +import { decodeAddress, encodeAddress } from '@polkadot/keyring'; +import { hexToU8a, isHex } from '@polkadot/util'; + +import { BTC_ADDRESS_REGEX } from '@/constants'; + +const btcAddressRegex = new RegExp(BTC_ADDRESS_REGEX); + +// TODO: use library instead +const isValidBTCAddress = (address: string): boolean => btcAddressRegex.test(address); + +const isValidRelayAddress = (address: string): boolean => { + try { + encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address)); + + return true; + } catch { + return false; + } +}; + +export { isValidBTCAddress, isValidRelayAddress }; diff --git a/src/lib/form/yup.custom.ts b/src/lib/form/yup.custom.ts index f2195f81aa..b24a1b9af0 100644 --- a/src/lib/form/yup.custom.ts +++ b/src/lib/form/yup.custom.ts @@ -2,20 +2,16 @@ import { CurrencyExt } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; -import { TFunction } from 'react-i18next'; +import i18n from 'i18next'; import * as yup from 'yup'; import { AnyObject, Maybe } from 'yup/lib/types'; -type YupContext = { - t: TFunction; -}; +import { isValidBTCAddress, isValidRelayAddress } from './validate'; yup.addMethod(yup.string, 'requiredAmount', function (action: string, customMessage?: string) { return this.transform((value) => (isNaN(value) ? undefined : value)).test('requiredAmount', (value, ctx) => { if (value === undefined) { - const { t } = ctx.options.context as YupContext; - - const message = customMessage || t('forms.please_enter_the_amount_to', { field: action }); + const message = customMessage || i18n.t('forms.please_enter_the_amount_to', { field: action }); return ctx.createError({ message }); } @@ -34,12 +30,10 @@ yup.addMethod( 'fees', function ({ transactionFee, governanceBalance }: FeesValidationParams, customMessage?: string) { return this.test('fees', (_, ctx) => { - const { t } = ctx.options.context as YupContext; - if (governanceBalance.lt(transactionFee)) { const message = customMessage || - t('insufficient_funds_governance_token', { + i18n.t('insufficient_funds_governance_token', { governanceTokenSymbol: transactionFee.currency.ticker }); @@ -60,8 +54,6 @@ yup.addMethod( 'maxAmount', function ({ maxAmount }: MaxAmountValidationParams, action?: string, customMessage?: string) { return this.test('maxAmount', (value, ctx) => { - const { t } = ctx.options.context as YupContext; - if (value === undefined) return true; const amount = new Big(value); @@ -70,12 +62,13 @@ yup.addMethod( // same validation, just different data types that lead to different implementation if (isMonetaryAmount && amount.gt((maxAmount as MonetaryAmount).toBig())) { - const message = customMessage || t('forms.please_enter_no_higher_available_balance'); + const message = customMessage || i18n.t('forms.please_enter_no_higher_available_balance'); return ctx.createError({ message }); } if (amount.gt(maxAmount as Big)) { - const message = customMessage || t('forms.amount_must_be_at_most', { action, amount: maxAmount.toString() }); + const message = + customMessage || i18n.t('forms.amount_must_be_at_most', { action, amount: maxAmount.toString() }); return ctx.createError({ message }); } @@ -93,8 +86,6 @@ yup.addMethod( 'minAmount', function ({ minAmount }: MinAmountValidationParams, action: string, customMessage?: string) { return this.test('balance', (value, ctx) => { - const { t } = ctx.options.context as YupContext; - if (value === undefined) return true; const amount = new Big(value); @@ -102,7 +93,7 @@ yup.addMethod( if (amount.lt(minAmount.toBig())) { const message = customMessage || - t('forms.amount_must_be_at_least', { + i18n.t('forms.amount_must_be_at_least', { action, amount: minAmount.toString(), token: minAmount.currency.ticker @@ -115,6 +106,33 @@ yup.addMethod( } ); +enum AddressType { + RELAY_CHAIN, + BTC +} + +const addressValidationMap = { + [AddressType.RELAY_CHAIN]: isValidRelayAddress, + [AddressType.BTC]: isValidBTCAddress +}; + +yup.addMethod( + yup.string, + 'address', + function (addressType: AddressType = AddressType.RELAY_CHAIN, customMessage?: string) { + return this.test('address', (value, ctx) => { + const isValidAdress = addressValidationMap[addressType]; + + if (!value || !isValidAdress(value)) { + const message = customMessage || i18n.t('forms.please_enter_a_valid_address'); + return ctx.createError({ message }); + } + + return true; + }); + } +); + declare module 'yup' { interface StringSchema< TType extends Maybe = string | undefined, @@ -133,8 +151,10 @@ declare module 'yup' { action?: string, customMessage?: string ): StringSchema; + address(addressType?: AddressType, customMessage?: string): StringSchema; } } export default yup; -export type { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams, YupContext }; +export { AddressType }; +export type { FeesValidationParams, MaxAmountValidationParams, MinAmountValidationParams }; diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositDivider.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositDivider.tsx deleted file mode 100644 index 89ff283a43..0000000000 --- a/src/pages/AMM/Pools/components/DepositForm/DepositDivider.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { PlusCircle } from '@/assets/icons'; - -import { StyledBackground, StyledCircle, StyledDivider, StyledWrapper } from './DepositForm.styles'; - -const DepositDivider = (): JSX.Element => ( - - - - - - - -); - -export { DepositDivider }; diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx index 6baa738902..7f8d378c46 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx +++ b/src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx @@ -1,41 +1,7 @@ import styled from 'styled-components'; -import { Divider, Dl, DlGroup, theme } from '@/component-library'; - -const StyledDl = styled(Dl)` - background-color: ${theme.card.bg.secondary}; - padding: ${theme.spacing.spacing4}; - font-size: ${theme.text.xs}; - border-radius: ${theme.rounded.rg}; -`; - -const StyledWrapper = styled.div` - position: relative; -`; - -const StyledCircle = styled.div` - display: inline-flex; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - padding: ${theme.spacing.spacing2}; - background-color: var(--colors-token-input-end-adornment-bg); - border-radius: ${theme.rounded.full}; -`; - -const StyledBackground = styled.div` - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - padding: ${theme.spacing.spacing1} ${theme.spacing.spacing8}; - background-color: ${theme.colors.bgPrimary}; -`; - -const StyledDivider = styled(Divider)` - background-color: var(--colors-token-input-end-adornment-bg); -`; +import { DlGroup, theme, TokenInput } from '@/component-library'; +import { PlusDivider } from '@/components'; const StyledDlGroup = styled(DlGroup)` flex-direction: column; @@ -45,4 +11,13 @@ const StyledDlGroup = styled(DlGroup)` } `; -export { StyledBackground, StyledCircle, StyledDivider, StyledDl, StyledDlGroup, StyledWrapper }; +const StyledPlusDivider = styled(PlusDivider)` + margin-bottom: calc(${theme.spacing.spacing2} * -1); + z-index: 0; +`; + +const StyledTokenInput = styled(TokenInput)` + z-index: 1; +`; + +export { StyledDlGroup, StyledPlusDivider, StyledTokenInput }; diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx index 6b7387aeee..6a6c676b3a 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx @@ -1,18 +1,17 @@ import { CurrencyExt, LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; -import { ChangeEventHandler, RefObject, useState } from 'react'; +import { ChangeEventHandler, Fragment, RefObject, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { displayMonetaryAmountInUSDFormat, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { Alert, Dd, DlGroup, Dt, Flex, TokenInput } from '@/component-library'; -import { AuthCTA } from '@/components'; -import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; +import { newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Alert, Flex } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; import { DepositLiquidityPoolFormData, depositLiquidityPoolSchema, DepositLiquidityPoolValidationParams, - isFormDisabled, + POOL_DEPOSIT_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; import { SlippageManager } from '@/pages/AMM/shared/components'; @@ -21,11 +20,11 @@ import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; -import { DepositDivider } from './DepositDivider'; -import { StyledDl } from './DepositForm.styles'; +import { StyledPlusDivider, StyledTokenInput } from './DepositForm.styles'; import { DepositOutputAssets } from './DepositOutputAssets'; const isCustomAmountsMode = (form: ReturnType) => @@ -33,73 +32,102 @@ const isCustomAmountsMode = (form: ReturnType) => type DepositFormProps = { pool: LiquidityPool; - slippageModalRef: RefObject; + overlappingModalRef: RefObject; onSuccess?: () => void; onSigning?: () => void; }; -const DepositForm = ({ pool, slippageModalRef, onSuccess, onSigning }: DepositFormProps): JSX.Element => { +const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: DepositFormProps): JSX.Element => { const { pooledCurrencies } = pool; - const defaultValues = pooledCurrencies.reduce((acc, amount) => ({ ...acc, [amount.currency.ticker]: '' }), {}); const [slippage, setSlippage] = useState(0.1); const accountId = useAccountId(); const { t } = useTranslation(); - const { getAvailableBalance, getBalance } = useGetBalances(); + const { getAvailableBalance } = useGetBalances(); const prices = useGetPrices(); - const governanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); - const transaction = useTransaction(Transaction.AMM_ADD_LIQUIDITY, { onSuccess, onSigning }); - const handleSubmit = async (data: DepositLiquidityPoolFormData) => { - if (!accountId) return; + const getTransactionArgs = useCallback( + async (values: DepositLiquidityPoolFormData) => { + if (!accountId) return; - try { const amounts = pooledCurrencies.map((amount) => - newSafeMonetaryAmount(data[amount.currency.ticker] || 0, amount.currency, true) + newSafeMonetaryAmount(values[amount.currency.ticker] || 0, amount.currency, true) ); - const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); + try { + const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); - return transaction.execute(amounts, pool, slippage, deadline, accountId); - } catch (error: any) { - transaction.reject(error); - } + return { amounts, pool, slippage, deadline, accountId }; + } catch (error: any) { + transaction.reject(error); + } + }, + [accountId, pool, pooledCurrencies, slippage, transaction] + ); + + const handleSubmit = async (data: DepositLiquidityPoolFormData) => { + const transactionData = await getTransactionArgs(data); + + if (!transactionData) return; + + const { accountId, amounts, deadline, pool } = transactionData; + + return transaction.execute(amounts, pool, slippage, deadline, accountId); }; - const tokens = pooledCurrencies.reduce( - (acc: DepositLiquidityPoolValidationParams['tokens'], pooled) => ({ - ...acc, - [pooled.currency.ticker]: { - minAmount: newMonetaryAmount(1, pooled.currency), - maxAmount: getAvailableBalance(pooled.currency.ticker) || newMonetaryAmount(0, pooled.currency) - } - }), - {} + const tokens = useMemo( + () => + pooledCurrencies.reduce( + (acc: DepositLiquidityPoolValidationParams['tokens'], pooled) => ({ + ...acc, + [pooled.currency.ticker]: { + minAmount: newMonetaryAmount(1, pooled.currency), + maxAmount: getAvailableBalance(pooled.currency.ticker) || newMonetaryAmount(0, pooled.currency) + } + }), + {} + ), + [getAvailableBalance, pooledCurrencies] + ); + + const defaultValues = pooledCurrencies.reduce((acc, amount) => ({ ...acc, [amount.currency.ticker]: '' }), {}); + + const initialValues = useMemo( + () => ({ ...defaultValues, [POOL_DEPOSIT_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [] ); const form = useForm({ - initialValues: defaultValues, - validationSchema: depositLiquidityPoolSchema({ transactionFee: TRANSACTION_FEE_AMOUNT, governanceBalance, tokens }), - onSubmit: handleSubmit - }); + initialValues, + validationSchema: depositLiquidityPoolSchema({ tokens }), + onSubmit: handleSubmit, + onComplete: async (values) => { + const transactionData = await getTransactionArgs(values); - const handleChange: ChangeEventHandler = (e) => { - if (isCustomAmountsMode(form)) return; + if (!transactionData) return; - if (!e.target.value || isNaN(Number(e.target.value))) { - return form.setValues(defaultValues); + const { accountId, amounts, deadline, pool } = transactionData; + + const feeTicker = values[POOL_DEPOSIT_FEE_TOKEN_FIELD]; + + return transaction.fee.setCurrency(feeTicker).estimate(amounts, pool, slippage, deadline, accountId); } + }); + const handleChange: ChangeEventHandler = (e) => { // If pool has no liquidity, the assets ratio is set by the user, // therefore the value inputted is directly used. - if (pool.isEmpty) { - return form.setValues({ [e.target.name]: e.target.value }); + if (isCustomAmountsMode(form) || pool.isEmpty) return; + + if (!e.target.value || isNaN(Number(e.target.value))) { + return form.setValues({ ...form.values, ...defaultValues }); } const inputCurrency = pooledCurrencies.find((currency) => currency.currency.ticker === e.target.name); @@ -115,22 +143,22 @@ const DepositForm = ({ pool, slippageModalRef, onSuccess, onSigning }: DepositFo return { ...acc, [val.currency.ticker]: val.toBig().toString() }; }, {}); - form.setValues(newValues); + form.setValues({ ...form.values, ...newValues }); }; const poolName = ( amount.currency.ticker)} /> ); - const isBtnDisabled = isFormDisabled(form); + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); return (
- setSlippage(slippage)} /> + setSlippage(slippage)} /> {poolName} - + {pooledCurrencies.map((amount, index) => { const { currency: { ticker } @@ -141,8 +169,8 @@ const DepositForm = ({ pool, slippageModalRef, onSuccess, onSigning }: DepositFo const balance = getAvailableBalance(ticker); return ( - - + - {!isLastItem && } - + {!isLastItem && } + ); })} @@ -167,25 +195,15 @@ const DepositForm = ({ pool, slippageModalRef, onSuccess, onSigning }: DepositFo ) : ( )} - - - -
- {t('fees')} -
-
- {TRANSACTION_FEE_AMOUNT.toHuman()} {TRANSACTION_FEE_AMOUNT.currency.ticker} ( - {displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, TRANSACTION_FEE_AMOUNT.currency.ticker)?.usd - )} - ) -
- - - - {t('amm.pools.add_liquidity')} - + + + + {t('amm.pools.add_liquidity')} + + diff --git a/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx b/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx index b768873cff..65c4eaa63d 100644 --- a/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx +++ b/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx @@ -20,7 +20,7 @@ type PoolModalProps = Props & InheritAttrs; const PoolModal = ({ pool, onClose, ...props }: PoolModalProps): JSX.Element | null => { const { t } = useTranslation(); const { refetch } = useGetAccountPools(); - const ref = useRef(null); + const overlappingModalRef = useRef(null); if (!pool) { return null; @@ -32,19 +32,29 @@ const PoolModal = ({ pool, onClose, ...props }: PoolModalProps): JSX.Element | n onClose={onClose} align='top' // Pool modal should not close while user interacts with stacked modal (slippage modal) - shouldCloseOnInteractOutside={(el) => !ref.current?.contains(el)} + shouldCloseOnInteractOutside={(el) => !overlappingModalRef.current?.contains(el)} {...props} > - + - + diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx index 961db4e3c0..883ba28318 100644 --- a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx +++ b/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx @@ -1,14 +1,29 @@ import { LiquidityPool } from '@interlay/interbtc-api'; import Big from 'big.js'; +import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { formatUSD } from '@/common/utils/utils'; -import { Card, Dl, DlGroup } from '@/component-library'; -import { AuthCTA } from '@/components'; +import { Card, CTA, Dl, DlGroup, Flex, Modal, ModalBody, ModalFooter, ModalHeader } from '@/component-library'; +import { + AuthCTA, + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionFeeDetails +} from '@/components'; +import { + ClaimRewardsPoolFormData, + claimRewardsPoolSchema, + POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, + useForm +} from '@/lib/form'; import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { StyledDd, StyledDt } from './PoolsInsights.style'; import { calculateClaimableFarmingRewardUSD } from './utils'; @@ -22,6 +37,42 @@ type PoolsInsightsProps = { const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); + const [isOpen, setOpen] = useState(false); + const overlappingModalRef = useRef(null); + + const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, { + onSuccess: refetch, + onSigning: () => setOpen(false) + }); + + const handleSubmit = () => { + if (!accountPoolsData) return; + + transaction.execute(accountPoolsData.claimableRewards); + }; + + const form = useForm({ + initialValues: { + [POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD]: '' + }, + validationSchema: claimRewardsPoolSchema(), + onSubmit: handleSubmit, + onComplete: async (values) => { + if (!accountPoolsData) return; + + const feeTicker = values[POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD]; + + return transaction.fee.setCurrency(feeTicker).estimate(accountPoolsData.claimableRewards); + } + }); + + // Doing this call on mount so that the form becomes dirty + useEffect(() => { + form.setFieldValue(POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const handleCloseModal = () => setOpen(false); const accountPositions = accountPoolsData?.positions; @@ -47,40 +98,74 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) const totalLiquidityUSD = formatUSD(totalLiquidity?.toNumber() || 0, { compact: true }); const totalClaimableRewardUSD = calculateClaimableFarmingRewardUSD(accountPoolsData?.claimableRewards, prices); + const totalClaimableRewardUSDLabel = formatUSD(totalClaimableRewardUSD, { compact: true }); - const transaction = useTransaction(Transaction.AMM_CLAIM_REWARDS, { - onSuccess: refetch - }); - - const handleClickClaimRewards = () => accountPoolsData && transaction.execute(accountPoolsData.claimableRewards); + const handleClickClaimRewards = () => setOpen(true); const hasClaimableRewards = totalClaimableRewardUSD > 0; + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + return ( -
- - - {t('supply_balance')} - {supplyBalanceLabel} - - - - - {t('total_liquidity')} - {totalLiquidityUSD} - - - - - {t('rewards')} - {formatUSD(totalClaimableRewardUSD, { compact: true })} - - {hasClaimableRewards && ( - - Claim - - )} - -
+ <> +
+ + + {t('supply_balance')} + {supplyBalanceLabel} + + + + + {t('total_liquidity')} + {totalLiquidityUSD} + + + + + {t('rewards')} + {totalClaimableRewardUSDLabel} + + {hasClaimableRewards && ( + + Claim + + )} + +
+ !overlappingModalRef.current?.contains(el)} + > + Claim Rewards + + + + Amount + {totalClaimableRewardUSDLabel} + + + + +
+ + + + {t('claim_rewards')} + + +
+ + + ); }; diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx index 10d7f0fa85..f513e28299 100644 --- a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -1,17 +1,13 @@ import { LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; import Big from 'big.js'; -import { RefObject, useState } from 'react'; +import { RefObject, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { - convertMonetaryAmountToValueInUSD, - displayMonetaryAmountInUSDFormat, - newSafeMonetaryAmount -} from '@/common/utils/utils'; -import { Dd, DlGroup, Dt, Flex, TokenInput } from '@/component-library'; -import { AuthCTA, ReceivableAssets } from '@/components'; +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Flex, TokenInput } from '@/component-library'; +import { AuthCTA, ReceivableAssets, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; -import { isFormDisabled, useForm, WITHDRAW_LIQUIDITY_POOL_FIELD } from '@/lib/form'; +import { POOL_WITHDRAW_AMOUNT_FIELD, POOL_WITHDRAW_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; import { WithdrawLiquidityPoolFormData, withdrawLiquidityPoolSchema } from '@/lib/form/schemas'; import { SlippageManager } from '@/pages/AMM/shared/components'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; @@ -19,19 +15,19 @@ import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; -import { StyledDl } from './WithdrawForm.styles'; type WithdrawFormProps = { pool: LiquidityPool; - slippageModalRef: RefObject; + overlappingModalRef: RefObject; onSuccess?: () => void; onSigning?: () => void; }; -const WithdrawForm = ({ pool, slippageModalRef, onSuccess, onSigning }: WithdrawFormProps): JSX.Element => { +const WithdrawForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: WithdrawFormProps): JSX.Element => { const [slippage, setSlippage] = useState(0.1); const accountId = useAccountId(); @@ -57,32 +53,60 @@ const WithdrawForm = ({ pool, slippageModalRef, onSuccess, onSigning }: Withdraw transactionFee: TRANSACTION_FEE_AMOUNT }; + const getTransactionArgs = useCallback( + async (values: WithdrawLiquidityPoolFormData) => { + if (!accountId) return; + + try { + const amount = newMonetaryAmount(values[POOL_WITHDRAW_AMOUNT_FIELD] || 0, lpToken, true); + const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); + + return { amount, pool, slippage, deadline, accountId }; + } catch (error: any) { + transaction.reject(error); + } + }, + [accountId, lpToken, pool, slippage, transaction] + ); + const handleSubmit = async (data: WithdrawLiquidityPoolFormData) => { - if (!accountId) return; + const transactionData = await getTransactionArgs(data); - try { - const amount = newMonetaryAmount(data[WITHDRAW_LIQUIDITY_POOL_FIELD] || 0, lpToken, true); - const deadline = await window.bridge.system.getFutureBlockNumber(AMM_DEADLINE_INTERVAL); + if (!transactionData) return; - return transaction.execute(amount, pool, slippage, deadline, accountId); - } catch (error: any) { - transaction.reject(error); - } + const { accountId, amount, deadline, pool } = transactionData; + + return transaction.execute(amount, pool, slippage, deadline, accountId); }; + const initialValues = useMemo( + () => ({ + [POOL_WITHDRAW_AMOUNT_FIELD]: '', + [POOL_WITHDRAW_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }), + [transaction.fee.defaultCurrency.ticker] + ); + const form = useForm({ - initialValues: { withdraw: undefined }, + initialValues: initialValues, validationSchema: withdrawLiquidityPoolSchema(schemaParams), - onSubmit: handleSubmit + onSubmit: handleSubmit, + onComplete: async (values) => { + const transactionData = await getTransactionArgs(values); + + if (!transactionData) return; + + const { accountId, amount, deadline, pool } = transactionData; + + const feeTicker = values[POOL_WITHDRAW_FEE_TOKEN_FIELD]; + + return transaction.fee.setCurrency(feeTicker).estimate(amount, pool, slippage, deadline, accountId); + } }); - const lpTokenMonetaryAmount = newSafeMonetaryAmount( - form.values[WITHDRAW_LIQUIDITY_POOL_FIELD] || 0, - pool.lpToken, - true - ); + const lpTokenMonetaryAmount = newSafeMonetaryAmount(form.values[POOL_WITHDRAW_AMOUNT_FIELD] || 0, pool.lpToken, true); - const isBtnDisabled = isFormDisabled(form); + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); const tickers = pool.pooledCurrencies.map((currency) => currency.currency.ticker); const poolName = ; @@ -103,7 +127,7 @@ const WithdrawForm = ({ pool, slippageModalRef, onSuccess, onSigning }: Withdraw return (
- setSlippage(slippage)} /> + setSlippage(slippage)} /> {poolName} @@ -116,29 +140,19 @@ const WithdrawForm = ({ pool, slippageModalRef, onSuccess, onSigning }: Withdraw balance={balance?.toString() || 0} humanBalance={balance?.toHuman() || 0} valueUSD={pooledAmountsUSD} - errorMessage={form.errors[WITHDRAW_LIQUIDITY_POOL_FIELD]} - {...form.getFieldProps(WITHDRAW_LIQUIDITY_POOL_FIELD)} + {...form.getFieldProps(POOL_WITHDRAW_AMOUNT_FIELD)} /> - - -
- Fees -
-
- {TRANSACTION_FEE_AMOUNT.toHuman()} {TRANSACTION_FEE_AMOUNT.currency.ticker} ( - {displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, TRANSACTION_FEE_AMOUNT.currency.ticker)?.usd - )} - ) -
- - - - {t('amm.pools.remove_liquidity')} - + + + + {t('amm.pools.remove_liquidity')} + +
diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx index a817c120ff..9db4bed0a6 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx @@ -3,22 +3,20 @@ import { TFunction, useTranslation } from 'react-i18next'; import { CTAProps } from '@/component-library'; import { AuthCTA } from '@/components'; -import { - FormErrors, - SWAP_INPUT_AMOUNT_FIELD, - SWAP_INPUT_TOKEN_FIELD, - SWAP_OUTPUT_TOKEN_FIELD, - SwapFormData -} from '@/lib/form'; +import { SWAP_INPUT_AMOUNT_FIELD, SWAP_INPUT_TOKEN_FIELD, SWAP_OUTPUT_TOKEN_FIELD, useForm } from '@/lib/form'; import { SwapPair } from '@/types/swap'; +import { Transaction } from '@/utils/hooks/transaction'; +import { UseFeeEstimateResult } from '@/utils/hooks/transaction/types/hook'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; const getProps = ( pair: SwapPair, trade: Trade | null | undefined, - errors: FormErrors, + form: ReturnType, + fee: UseFeeEstimateResult, t: TFunction ): Pick => { - const tickersError = errors[SWAP_INPUT_TOKEN_FIELD] || errors[SWAP_OUTPUT_TOKEN_FIELD]; + const tickersError = (form.errors[SWAP_INPUT_TOKEN_FIELD] || form.errors[SWAP_OUTPUT_TOKEN_FIELD]) as string; if (tickersError) { return { @@ -27,7 +25,7 @@ const getProps = ( }; } - const inputError = errors[SWAP_INPUT_AMOUNT_FIELD]; + const inputError = form.errors[SWAP_INPUT_AMOUNT_FIELD] as string; if (inputError) { return { @@ -45,20 +43,22 @@ const getProps = ( } return { - children: t('amm.swap') + children: t('amm.swap'), + disabled: isTransactionFormDisabled(form, fee) }; }; type SwapCTAProps = { pair: SwapPair; trade: Trade | null | undefined; - errors: FormErrors; + form: ReturnType; + fee: UseFeeEstimateResult; }; -const SwapCTA = ({ pair, trade, errors }: SwapCTAProps): JSX.Element | null => { +const SwapCTA = ({ pair, trade, form, fee }: SwapCTAProps): JSX.Element | null => { const { t } = useTranslation(); - const otherProps = getProps(pair, trade, errors, t); + const otherProps = getProps(pair, trade, form, fee, t); return ; }; diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx index fa33bb2cd5..eb274de502 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx @@ -5,8 +5,9 @@ import { PressEvent } from '@react-types/shared'; import { useRef } from 'react'; import { ArrowsUpDown } from '@/assets/icons'; +import { Divider } from '@/component-library'; -import { StyledBackground, StyledCircle, StyledDivider, StyledWrapper } from './SwapForm.style'; +import { StyledBackground, StyledCircle, StyledWrapper } from './SwapForm.style'; type SwapDividerProps = { onPress: (e: PressEvent) => void; @@ -19,7 +20,7 @@ const SwapDivider = ({ onPress }: SwapDividerProps): JSX.Element | null => { return ( - + diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx index 5a662b756d..b321bb79f1 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Divider, theme } from '@/component-library'; +import { theme } from '@/component-library'; type StyledCircleProps = { $isFocusVisible: boolean; @@ -17,7 +17,7 @@ const StyledCircle = styled.button` top: 50%; transform: translate(-50%, -50%); padding: ${theme.spacing.spacing2}; - background-color: var(--colors-token-input-end-adornment-bg); + background-color: var(--colors-border); border-radius: ${theme.rounded.full}; outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'}; transition: transform ${theme.transition.duration.duration150}ms ease-in; @@ -37,8 +37,4 @@ const StyledBackground = styled.div` background-color: ${theme.colors.bgPrimary}; `; -const StyledDivider = styled(Divider)` - background-color: var(--colors-token-input-end-adornment-bg); -`; - -export { StyledBackground, StyledCircle, StyledDivider, StyledWrapper }; +export { StyledBackground, StyledCircle, StyledWrapper }; diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx index 25753b06ca..99d18a2385 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx @@ -1,16 +1,18 @@ import { CurrencyExt, LiquidityPool, newMonetaryAmount, Trade } from '@interlay/interbtc-api'; import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; -import { ChangeEventHandler, Key, useEffect, useMemo, useState } from 'react'; +import { ChangeEventHandler, Key, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { useDebounce, useInterval } from 'react-use'; import { StoreType } from '@/common/types/util.types'; -import { convertMonetaryAmountToValueInUSD, formatUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { Card, CardProps, Divider, Flex, H1, TokenInput, TokenSelectProps } from '@/component-library'; +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Card, CardProps, Divider, Flex, H1, TokenInput } from '@/component-library'; +import { TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { + SWAP_FEE_TOKEN_FIELD, SWAP_INPUT_AMOUNT_FIELD, SWAP_INPUT_TOKEN_FIELD, SWAP_OUTPUT_TOKEN_FIELD, @@ -28,6 +30,7 @@ import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; +import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; import { PriceImpactModal } from '../PriceImpactModal'; import { SwapInfo } from '../SwapInfo'; @@ -110,7 +113,7 @@ const SwapForm = ({ const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); const { data: balances, getBalance, getAvailableBalance } = useGetBalances(); - const { data: currencies } = useGetCurrencies(bridgeLoaded); + const selectCurrency = useSelectCurrency(); const transaction = useTransaction(Transaction.AMM_SWAP, { onSigning: () => { @@ -150,17 +153,35 @@ const SwapForm = ({ transactionFee: TRANSACTION_FEE_AMOUNT }; + const getTransactionArgs = useCallback( + async (trade: Trade | null | undefined) => { + if (!trade || !accountId) return; + + try { + const minimumAmountOut = trade.getMinimumOutputAmount(slippage); + const deadline = await window.bridge.system.getFutureBlockNumber(30 * 60); + + return { + trade, + minimumAmountOut, + accountId, + deadline + }; + } catch (error: any) { + transaction.reject(error); + } + }, + [accountId, slippage, transaction] + ); + const handleSwap = async () => { - if (!trade || !accountId) return; + const transactionData = await getTransactionArgs(trade); - try { - const minimumAmountOut = trade.getMinimumOutputAmount(slippage); - const deadline = await window.bridge.system.getFutureBlockNumber(30 * 60); + if (!transactionData) return; - return transaction.execute(trade, minimumAmountOut, accountId, deadline); - } catch (error: any) { - transaction.reject(error); - } + const { accountId, deadline, minimumAmountOut, trade: tradeData } = transactionData; + + transaction.execute(tradeData, minimumAmountOut, accountId, deadline); }; const handleSubmit = async (values: SwapFormData) => { @@ -180,7 +201,8 @@ const SwapForm = ({ () => ({ [SWAP_INPUT_AMOUNT_FIELD]: '', [SWAP_INPUT_TOKEN_FIELD]: pair.input?.ticker || '', - [SWAP_OUTPUT_TOKEN_FIELD]: pair.output?.ticker || '' + [SWAP_OUTPUT_TOKEN_FIELD]: pair.output?.ticker || '', + [SWAP_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker }), // eslint-disable-next-line react-hooks/exhaustive-deps [] @@ -212,18 +234,31 @@ const SwapForm = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [pair]); - const handleChangeInput: ChangeEventHandler = (e) => { - setInputAmount(e.target.value); - setTrade(undefined); - }; + const feeToken = form.values[SWAP_FEE_TOKEN_FIELD]; - const handlePairChange = (pair: SwapPair) => { - onChangePair(pair); - setTrade(undefined); - }; + useEffect(() => { + const estimateFee = async () => { + const transactionData = await getTransactionArgs(trade); + + if (!transactionData) return; + + const { accountId, deadline, minimumAmountOut, trade: tradeData } = transactionData; + + transaction.fee.setCurrency(feeToken).estimate(tradeData, minimumAmountOut, accountId, deadline); + }; + + if (!trade) return; + + estimateFee(); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [trade, feeToken]); + + const handleChangeInput: ChangeEventHandler = (e) => setInputAmount(e.target.value); + + const handlePairChange = (pair: SwapPair) => onChangePair(pair); const handleTickerChange = (ticker: string, name: string) => { - form.setFieldValue(name, ticker, true); const currency = getCurrencyFromTicker(ticker); const newPair = getPairChange(pair, currency, name); @@ -246,24 +281,7 @@ const SwapForm = ({ form.values[SWAP_INPUT_AMOUNT_FIELD] ); - const selectItems: TokenSelectProps['items'] = useMemo( - () => - currencies - ?.filter((currency) => pooledTickers.has(currency.ticker)) - .map((currency) => { - const balance = getAvailableBalance(currency.ticker); - const balanceUSD = balance - ? convertMonetaryAmountToValueInUSD(balance, getTokenPrice(prices, currency.ticker)?.usd) - : 0; - - return { - balance: balance?.toHuman() || 0, - balanceUSD: formatUSD(balanceUSD || 0, { compact: true }), - value: currency.ticker - }; - }) || [], - [currencies, getAvailableBalance, pooledTickers, prices] - ); + const selectItems = selectCurrency.items.filter((tokenData) => pooledTickers.has(tokenData.value)); const { poolImpact, marketPrice } = getPoolPriceImpact(trade, inputAmountUSD, outputAmountUSD); const priceImpact = (marketPrice || poolImpact).toNumber(); @@ -286,11 +304,11 @@ const SwapForm = ({ balance={inputBalance?.toString() || 0} humanBalance={inputBalance?.toHuman() || 0} valueUSD={inputAmountUSD} - selectProps={mergeProps(form.getFieldProps(SWAP_INPUT_TOKEN_FIELD, false), { + selectProps={mergeProps(form.getFieldProps(SWAP_INPUT_TOKEN_FIELD, true), { onSelectionChange: (ticker: Key) => handleTickerChange(ticker as string, SWAP_INPUT_TOKEN_FIELD), items: selectItems })} - {...mergeProps(form.getFieldProps(SWAP_INPUT_AMOUNT_FIELD, false), { onChange: handleChangeInput })} + {...mergeProps(form.getFieldProps(SWAP_INPUT_AMOUNT_FIELD, true), { onChange: handleChangeInput })} /> handleTickerChange(ticker as string, SWAP_OUTPUT_TOKEN_FIELD), items: selectItems })} />
- {trade && } - + + {trade && } + + + diff --git a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx b/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx index 2fc50a87cd..65421f1639 100644 --- a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx +++ b/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx @@ -1,6 +1,7 @@ import styled from 'styled-components'; import { theme } from '@/component-library'; +import { TransactionDetails } from '@/components'; const StyledCard = styled.div` background-color: ${theme.card.bg.secondary}; @@ -8,4 +9,8 @@ const StyledCard = styled.div` border-radius: ${theme.rounded.md}; `; -export { StyledCard }; +const StyledTransactionDetails = styled(TransactionDetails)` + padding: 0; +`; + +export { StyledCard, StyledTransactionDetails }; diff --git a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx b/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx index 23e343b8ae..15943eaa32 100644 --- a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx +++ b/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx @@ -1,12 +1,10 @@ import { Trade } from '@interlay/interbtc-api'; -import { displayMonetaryAmountInUSDFormat, formatPercentage } from '@/common/utils/utils'; -import { Accordion, AccordionItem, Dd, Dl, DlGroup, Dt } from '@/component-library'; -import { TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { formatPercentage } from '@/common/utils/utils'; +import { Accordion, AccordionItem } from '@/component-library'; +import { TransactionDetailsDd, TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; -import { StyledCard } from './SwapInfo.style'; +import { StyledTransactionDetails } from './SwapInfo.style'; type SwapInfoProps = { trade: Trade; @@ -14,8 +12,6 @@ type SwapInfoProps = { }; const SwapInfo = ({ trade, slippage }: SwapInfoProps): JSX.Element | null => { - const prices = useGetPrices(); - const { inputAmount, outputAmount, executionPrice, priceImpact } = trade; const title = `1 ${inputAmount.currency.ticker} = ${executionPrice.toHuman()} ${outputAmount.currency.ticker}`; @@ -23,50 +19,29 @@ const SwapInfo = ({ trade, slippage }: SwapInfoProps): JSX.Element | null => { const minimumReceived = outputAmount.sub(outputAmount.mul(slippage).div(100)); return ( - - + + -
- -
- Expected Output -
-
- {outputAmount.toHuman()} {outputAmount.currency.ticker} -
- - -
- Minimum Received -
-
- {minimumReceived.toHuman()} {outputAmount.currency.ticker} -
- - -
- Price Impact -
- {/* TODO: handle small percentages */} -
{formatPercentage(priceImpact.toNumber())}
- - -
- Fees -
-
- {TRANSACTION_FEE_AMOUNT.toHuman()} {TRANSACTION_FEE_AMOUNT.currency.ticker} ( - {displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, TRANSACTION_FEE_AMOUNT.currency.ticker)?.usd - )} - ) -
- -
+ + Expected Output + + {outputAmount.toHuman()} {outputAmount.currency.ticker} + + + + Minimum Received + + {minimumReceived.toHuman()} {outputAmount.currency.ticker} + + + + Price Impact + {/* TODO: handle small percentages */} + {formatPercentage(priceImpact.toNumber())} + - + ); }; diff --git a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx index 8ab0ffc851..5b4c48c85b 100644 --- a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx +++ b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx @@ -80,7 +80,7 @@ const ManualIssueExecutionActionsTable = (props: ManualIssueExecutionActionsTabl [ManualIssueExecutionActionsTableKeys.Action]: ( { + return ; +}; + +export default withErrorBoundary(Bridge, { + FallbackComponent: ErrorFallback, + onReset: () => { + window.location.reload(); + } +}); diff --git a/src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx b/src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx new file mode 100644 index 0000000000..34d264c703 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +import { Card, Flex, theme } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + max-width: 540px; + width: 100%; + margin: 0 auto; +`; + +const StyledCard = styled(Card)` + width: 100%; +`; + +const StyledFormWrapper = styled.div` + margin-top: ${theme.spacing.spacing8}; +`; + +export { StyledCard, StyledFormWrapper, StyledWrapper }; diff --git a/src/pages/Bridge/BridgeOverview/BridgeOverview.tsx b/src/pages/Bridge/BridgeOverview/BridgeOverview.tsx new file mode 100644 index 0000000000..d7b3ae546b --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/BridgeOverview.tsx @@ -0,0 +1,62 @@ +import { Flex, Tabs, TabsItem } from '@/component-library'; +import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; +import MainContainer from '@/parts/MainContainer'; +import { BridgeActions } from '@/types/bridge'; +import { useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; +import { useGetIssueRequestLimit } from '@/utils/hooks/api/bridge/use-get-issue-request-limits'; +import { useGetMaxBurnableTokens } from '@/utils/hooks/api/bridge/use-get-max-burnable-tokens'; +import { useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; +import { useTabPageLocation } from '@/utils/hooks/use-tab-page-location'; + +import { StyledCard, StyledFormWrapper, StyledWrapper } from './BridgeOverview.styles'; +import { IssueForm, LegacyBurnForm, LegacyTransactions, RedeemForm } from './components'; + +const BridgeOverview = (): JSX.Element => { + const { tabsProps } = useTabPageLocation(); + + const { defaultSelectedKey } = tabsProps; + + const { data: issueRequestLimit } = useGetIssueRequestLimit(); + const { data: maxBurnableTokensData } = useGetMaxBurnableTokens(); + const { data: issueData } = useGetIssueData(); + const { data: redeemData } = useGetRedeemData(); + + // Only show the loading bar if the tab needed data is still loading + const isIssueLoading = defaultSelectedKey === BridgeActions.ISSUE && issueData === undefined; + const isRedeemLoading = defaultSelectedKey === BridgeActions.REDEEM && redeemData === undefined; + + if (issueRequestLimit === undefined || isIssueLoading || isRedeemLoading) { + return ; + } + + return ( + + + + + + + + {issueData && } + + + + {redeemData && } + + {maxBurnableTokensData?.hasBurnableTokens && ( + + + + + + )} + + + + + + + ); +}; + +export default BridgeOverview; diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx b/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx new file mode 100644 index 0000000000..5c1eae4f4c --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +import { InformationCircle } from '@/assets/icons'; +import { Dl, Switch, theme } from '@/component-library'; + +const StyledDl = styled(Dl)` + background-color: ${theme.card.bg.secondary}; + padding: ${theme.spacing.spacing4}; + font-size: ${theme.text.xs}; + border-radius: ${theme.rounded.rg}; +`; + +const StyledInformationCircle = styled(InformationCircle)` + margin-left: ${theme.spacing.spacing2}; + vertical-align: text-top; +`; + +const StyledSwitch = styled(Switch)` + flex-direction: row-reverse; + justify-content: space-between; +`; + +export { StyledDl, StyledInformationCircle, StyledSwitch }; diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx b/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx new file mode 100644 index 0000000000..e56a1d854c --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx @@ -0,0 +1,296 @@ +import { + CurrencyExt, + getIssueRequestsFromExtrinsicResult, + isCurrencyEqual, + Issue, + newMonetaryAmount +} from '@interlay/interbtc-api'; +import { IssueLimits } from '@interlay/interbtc-api/build/src/parachain/issue'; +import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { ChangeEvent, Key, useCallback, useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDebounce } from 'react-use'; + +import { convertMonetaryAmountToValueInUSD, getRandomArrayElement, safeBitcoinAmount } from '@/common/utils/utils'; +import { Flex, TokenInput } from '@/component-library'; +import { AuthCTA } from '@/components'; +import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { + BRIDGE_ISSUE_AMOUNT_FIELD, + BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, + BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH, + BRIDGE_ISSUE_FEE_TOKEN, + BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, + BridgeIssueFormData, + bridgeIssueSchema, + useForm +} from '@/lib/form'; +import { BridgeActions } from '@/types/bridge'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { IssueData, useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; +import { BridgeVaultData, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { TransactionArgs } from '@/utils/hooks/transaction/types'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; + +import { LegacyIssueModal } from '../LegacyIssueModal'; +import { RequestLimitsCard } from '../RequestLimitsCard'; +import { SelectVaultCard } from '../SelectVaultCard'; +import { TransactionDetails } from '../TransactionDetails'; + +type IssueFormProps = { requestLimits: IssueLimits } & IssueData; + +const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX.Element => { + const { t } = useTranslation(); + const prices = useGetPrices(); + const { getAvailableBalance } = useGetBalances(); + const { getSecurityDeposit } = useGetIssueData(); + const { getCurrencyFromTicker, isLoading: isLoadingCurrencies } = useGetCurrencies(true); + + const [issueRequest, setIssueRequest] = useState(); + + const [amount, setAmount] = useState(); + const [debouncedAmount, setDebouncedAmount] = useState(); + + useDebounce(() => setDebouncedAmount(amount), 500, [amount]); + + const [securityDeposit, setSecurityDeposit] = useState>( + newMonetaryAmount(0, GOVERNANCE_TOKEN) + ); + + const [selectedVault, setSelectedVault] = useState(); + + const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.ISSUE); + + const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0); + const availableVaults = getAvailableVaults(debouncedMonetaryAmount); + const vaults = availableVaults?.length ? availableVaults : vaultsData?.list; + + const transaction = useTransaction(Transaction.ISSUE_REQUEST, { + showSuccessModal: false, + onSuccess: async (result) => { + try { + const [issueRequest] = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); + + setIssueRequest(issueRequest); + } catch (e: any) { + transaction.reject(e); + } + + setAmount(undefined); + setDebouncedAmount(undefined); + form.resetForm(); + } + }); + + const currentRequestLimit = selectedVault ? selectedVault.amount : requestLimits.singleVaultMaxIssuable; + + const transferAmountSchemaParams = { + maxAmount: currentRequestLimit, + minAmount: dustValue + }; + + const handleSubmit = async (values: BridgeIssueFormData) => { + const args = getTransactionArgs(values); + + if (!args) return; + + transaction.execute(...args); + }; + + const getTransactionArgs = useCallback( + (values: BridgeIssueFormData): TransactionArgs | undefined => { + const amount = values[BRIDGE_ISSUE_AMOUNT_FIELD]; + const griefingCollateralCurrencyTicker = values[BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]; + if (!vaultsData || !amount || griefingCollateralCurrencyTicker === undefined || isLoadingCurrencies) return; + + const monetaryAmount = new BitcoinAmount(amount); + + const availableVaults = getAvailableVaults(monetaryAmount); + + if (!availableVaults) return; + + const vaultId = values[BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]; + + let vault: BridgeVaultData | undefined; + + // If custom vault was select, try to find it in the data + if (vaultId) { + vault = availableVaults.find((item) => item.id === vaultId); + } + + // If no vault provided nor the custom vault wasn't found (unlikely), choose random vault + if (!vault) { + vault = getRandomArrayElement(availableVaults); + } + + const griefingCollateralCurrency = getCurrencyFromTicker(griefingCollateralCurrencyTicker); + return [ + monetaryAmount, + vault.vaultId.accountId, + vault.collateralCurrency, + false, + vaultsData.map, + griefingCollateralCurrency + ]; + }, + [getAvailableVaults, getCurrencyFromTicker, isLoadingCurrencies, vaultsData] + ); + + const form = useForm({ + initialValues: { + [BRIDGE_ISSUE_AMOUNT_FIELD]: '', + [BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]: '', + [BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH]: false, + [BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]: GOVERNANCE_TOKEN.ticker, + [BRIDGE_ISSUE_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker + }, + validateOnChange: true, + validationSchema: bridgeIssueSchema({ [BRIDGE_ISSUE_AMOUNT_FIELD]: transferAmountSchemaParams }), + onSubmit: handleSubmit, + hideErrorMessages: transaction.isLoading, + onComplete: (values) => { + const args = getTransactionArgs(values); + + if (!args) return; + + const feeTicker = values[BRIDGE_ISSUE_FEE_TOKEN]; + + transaction.fee.setCurrency(feeTicker).estimate(...args); + } + }); + + const griefingCollateralTicker = form.values[BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]; + + useEffect(() => { + const computeSecurityDeposit = async () => { + const btcAmount = safeBitcoinAmount(amount || 0); + const deposit = await getSecurityDeposit(btcAmount, griefingCollateralTicker); + + if (!deposit) return; + + setSecurityDeposit(deposit); + }; + + computeSecurityDeposit(); + }, [amount, griefingCollateralTicker, setSecurityDeposit, getSecurityDeposit]); + + const handleToggleCustomVault = (e: ChangeEvent) => { + if (!e.target.checked) { + form.setFieldTouched(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, false, true); + form.setFieldValue(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, '', true); + + setSelectedVault(undefined); + } + }; + + const handleChangeIssueAmount = (e: ChangeEvent) => setAmount(e.target.value); + + const handleVaultSelectionChange = (key: Key) => { + if (!vaults) return; + + const vault = vaults.find((item) => item.id === key); + + setSelectedVault(vault); + }; + + const monetaryAmount = safeBitcoinAmount(amount || 0); + const monetaryAmountUSD = monetaryAmount + ? convertMonetaryAmountToValueInUSD(monetaryAmount, getTokenPrice(prices, monetaryAmount.currency.ticker)?.usd) || 0 + : 0; + + const bridgeFee = monetaryAmount.mul(issueFee.toBig()); + + const totalAmount = monetaryAmount.gte(bridgeFee) ? monetaryAmount.sub(bridgeFee) : new BitcoinAmount(0); + const totalAmountUSD = totalAmount + ? convertMonetaryAmountToValueInUSD(totalAmount, getTokenPrice(prices, totalAmount.currency.ticker)?.usd) || 0 + : 0; + + const isSelectingVault = form.values[BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH]; + + const griefingCollateralCurrencyBalance = griefingCollateralTicker + ? getAvailableBalance(griefingCollateralTicker) + : undefined; + + const hasEnoughGriefingCollateralBalance = useMemo(() => { + if (!debouncedAmount) return true; + + if ( + !griefingCollateralCurrencyBalance || + !isCurrencyEqual(securityDeposit.currency, griefingCollateralCurrencyBalance.currency) + ) { + return false; + } + + return griefingCollateralCurrencyBalance.gte(securityDeposit); + }, [debouncedAmount, griefingCollateralCurrencyBalance, securityDeposit]); + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee) || !hasEnoughGriefingCollateralBalance; + + return ( + <> + +
+ + + + + + + + + + {t('issue')} + + + +
+ + {issueRequest && ( + setIssueRequest(undefined)} request={issueRequest} /> + )} + + ); +}; + +export { IssueForm }; +export type { IssueFormProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx b/src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx new file mode 100644 index 0000000000..0064135a8e --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx @@ -0,0 +1,2 @@ +export type { IssueFormProps } from './IssueForm'; +export { IssueForm } from './IssueForm'; diff --git a/src/pages/Bridge/BurnForm/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx similarity index 97% rename from src/pages/Bridge/BurnForm/index.tsx rename to src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx index 4699f19aa7..d64c39daf9 100644 --- a/src/pages/Bridge/BurnForm/index.tsx +++ b/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx @@ -2,7 +2,7 @@ import { CollateralCurrencyExt, CurrencyExt, newMonetaryAmount } from '@interlay import { Bitcoin, BitcoinAmount, Currency, ExchangeRate, MonetaryAmount } from '@interlay/monetary-js'; import clsx from 'clsx'; import * as React from 'react'; -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; +import { useErrorHandler } from 'react-error-boundary'; import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; @@ -13,7 +13,6 @@ import { CoinIcon } from '@/component-library'; import { AuthCTA } from '@/components'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL, WrappedTokenLogoIcon } from '@/config/relay-chains'; import { BALANCE_MAX_INTEGER_LENGTH } from '@/constants'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; import FormTitle from '@/legacy-components/FormTitle'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -41,7 +40,7 @@ type BurnableCollateral = { burnRate: ExchangeRate; }; -const BurnForm = (): JSX.Element | null => { +const LegacyBurnForm = (): JSX.Element | null => { const { t } = useTranslation(); const prices = useGetPrices(); @@ -296,9 +295,4 @@ const BurnForm = (): JSX.Element | null => { return null; }; -export default withErrorBoundary(BurnForm, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); +export { LegacyBurnForm }; diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx new file mode 100644 index 0000000000..ab69591fc2 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx @@ -0,0 +1 @@ +export { LegacyBurnForm } from './LegacyBurnForm'; diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx new file mode 100644 index 0000000000..b9def63cd5 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx @@ -0,0 +1,50 @@ +import { Issue } from '@interlay/interbtc-api'; +import clsx from 'clsx'; +import { useTranslation } from 'react-i18next'; + +import { Modal, ModalBody, ModalFooter } from '@/component-library'; +import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; +import BTCPaymentPendingStatusUI from '@/legacy-components/IssueUI/BTCPaymentPendingStatusUI'; +import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; +import InterlayRouterLink from '@/legacy-components/UI/InterlayRouterLink'; +import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; +import { getColorShade } from '@/utils/helpers/colors'; + +const queryString = require('query-string'); + +interface CustomProps { + request: Issue; +} + +const LegacyIssueModal = ({ open, onClose, request }: CustomProps & Omit): JSX.Element => { + const { t } = useTranslation(); + + return ( + + +
+

+ {t('issue_page.deposit')} +

+ +
+ + + + + {t('issue_page.i_have_made_the_payment')} + + {' '} + + + ); +}; + +export { LegacyIssueModal }; diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/index.tsx new file mode 100644 index 0000000000..30ac7029c7 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/index.tsx @@ -0,0 +1 @@ +export { LegacyIssueModal } from './LegacyIssueModal'; diff --git a/src/pages/Bridge/RedeemForm/SubmittedRedeemRequestModal/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx similarity index 81% rename from src/pages/Bridge/RedeemForm/SubmittedRedeemRequestModal/index.tsx rename to src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx index 8419404b6d..2742546756 100644 --- a/src/pages/Bridge/RedeemForm/SubmittedRedeemRequestModal/index.tsx +++ b/src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx @@ -8,27 +8,19 @@ import { Modal, ModalBody } from '@/component-library'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; -import InterlayRouterLink from '@/legacy-components/UI/InterlayRouterLink'; import { ForeignAssetIdLiteral } from '@/types/currency'; -import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -const queryString = require('query-string'); - const USER_BTC_ADDRESS = 'user-btc-address'; interface CustomProps { request: Redeem; } -const SubmittedRedeemRequestModal = ({ - open, - onClose, - request -}: CustomProps & Omit): JSX.Element => { +const LegacyRedeemModal = ({ open, onClose, request }: CustomProps & Omit): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); @@ -86,7 +78,6 @@ const SubmittedRedeemRequestModal = ({
-

{t('redeem_page.we_will_inform_you_btc')}

- - - {t('redeem_page.view_progress')} - - + + {t('redeem_page.close')} + ); }; -export default SubmittedRedeemRequestModal; +export { LegacyRedeemModal }; diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/index.tsx new file mode 100644 index 0000000000..8725366b14 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/LegacyRedeemModal/index.tsx @@ -0,0 +1 @@ +export { LegacyRedeemModal } from './LegacyRedeemModal'; diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/IssueRequestModal/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/IssueRequestModal/index.tsx new file mode 100644 index 0000000000..bec6a2f11e --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/IssueRequestModal/index.tsx @@ -0,0 +1,19 @@ +import { Modal, ModalBody } from '@/component-library'; +import IssueUI from '@/legacy-components/IssueUI'; +import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; + +interface CustomProps { + request: any; // TODO: should type properly (`Relay`) +} + +const IssueRequestModal = ({ open, onClose, request }: CustomProps & Omit): JSX.Element => { + return ( + + + + + + ); +}; + +export default IssueRequestModal; diff --git a/src/pages/Transactions/IssueRequestsTable/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx similarity index 81% rename from src/pages/Transactions/IssueRequestsTable/index.tsx rename to src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx index fdb72c9aa5..03d7e84fe0 100644 --- a/src/pages/Transactions/IssueRequestsTable/index.tsx +++ b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx @@ -225,64 +225,68 @@ const IssueRequestsTable = (): JSX.Element => { <> {t('issue_page.issue_requests')} - - - {/* TODO: should type properly */} - {headerGroups.map((headerGroup: any) => ( - // eslint-disable-next-line react/jsx-key - - {/* TODO: should type properly */} - {headerGroup.headers.map((column: any) => ( - // eslint-disable-next-line react/jsx-key - - {column.render('Header')} - - ))} - - ))} - - - {/* TODO: should type properly */} - {rows.map((row: any) => { - prepareRow(row); - - const { className: rowClassName, ...restRowProps } = row.getRowProps(); - - return ( + {issueRequests?.length ? ( + + + {/* TODO: should type properly */} + {headerGroups.map((headerGroup: any) => ( // eslint-disable-next-line react/jsx-key - + {/* TODO: should type properly */} - {row.cells.map((cell: any) => { - return ( - // eslint-disable-next-line react/jsx-key - - {cell.render('Cell')} - - ); - })} + {headerGroup.headers.map((column: any) => ( + // eslint-disable-next-line react/jsx-key + + {column.render('Header')} + + ))} - ); - })} - - + ))} + + + {/* TODO: should type properly */} + {rows.map((row: any) => { + prepareRow(row); + + const { className: rowClassName, ...restRowProps } = row.getRowProps(); + + return ( + // eslint-disable-next-line react/jsx-key + + {/* TODO: should type properly */} + {row.cells.map((cell: any) => { + return ( + // eslint-disable-next-line react/jsx-key + + {cell.render('Cell')} + + ); + })} + + ); + })} + + + ) : ( +

{t('empty_data')}

+ )} {pageCount > 0 && (
): JSX.Element | null => { + return ( + + + + + + ); +}; + +export default RedeemRequestModal; diff --git a/src/pages/Transactions/RedeemRequestsTable/index.tsx b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx similarity index 84% rename from src/pages/Transactions/RedeemRequestsTable/index.tsx rename to src/pages/Bridge/BridgeOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx index e8da48b299..d67f055f8b 100644 --- a/src/pages/Transactions/RedeemRequestsTable/index.tsx +++ b/src/pages/Bridge/BridgeOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx @@ -292,64 +292,69 @@ const RedeemRequestsTable = (): JSX.Element => { <> {t('redeem_requests')} - - - {/* TODO: should type properly */} - {headerGroups.map((headerGroup: any) => ( - // eslint-disable-next-line react/jsx-key - - {/* TODO: should type properly */} - {headerGroup.headers.map((column: any) => ( - // eslint-disable-next-line react/jsx-key - - {column.render('Header')} - - ))} - - ))} - - - {/* TODO: should type properly */} - {rows.map((row: any) => { - prepareRow(row); - - const { className: rowClassName, ...restRowProps } = row.getRowProps(); - - return ( + {redeemRequests.length ? ( + + + {/* TODO: should type properly */} + {headerGroups.map((headerGroup: any) => ( // eslint-disable-next-line react/jsx-key - + {/* TODO: should type properly */} - {row.cells.map((cell: any) => { - return ( - // eslint-disable-next-line react/jsx-key - - {cell.render('Cell')} - - ); - })} + {headerGroup.headers.map((column: any) => ( + // eslint-disable-next-line react/jsx-key + + {column.render('Header')} + + ))} - ); - })} - - + ))} + + + {/* TODO: should type properly */} + {rows.map((row: any) => { + prepareRow(row); + + const { className: rowClassName, ...restRowProps } = row.getRowProps(); + + return ( + // eslint-disable-next-line react/jsx-key + + {/* TODO: should type properly */} + {row.cells.map((cell: any) => { + return ( + // eslint-disable-next-line react/jsx-key + + {cell.render('Cell')} + + ); + })} + + ); + })} + + + ) : ( +

{t('empty_data')}

+ )} + {pageCount > 0 && (
{ +const LegacyTransactions = (): JSX.Element => { const { selectedAccount } = useSubstrateSecureState(); const { t } = useTranslation(); return ( - + + + {selectedAccount && ( {t('view_all_transactions_on_subscan')} )} - - - + ); }; -export default Transactions; +export { LegacyTransactions }; diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/PremiumRedeemCard.tsx b/src/pages/Bridge/BridgeOverview/components/RedeemForm/PremiumRedeemCard.tsx new file mode 100644 index 0000000000..9dd28db4ab --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RedeemForm/PremiumRedeemCard.tsx @@ -0,0 +1,33 @@ +import { useTranslation } from 'react-i18next'; + +import { Card, SwitchProps, Tooltip } from '@/component-library'; + +import { StyledInformationCircle, StyledSwitch } from './RedeemForm.styles'; + +type PremiumRedeemCardProps = { isPremiumRedeem?: boolean; switchProps: SwitchProps }; + +const PremiumRedeemCard = ({ isPremiumRedeem, switchProps }: PremiumRedeemCardProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + + + + {t('bridge.premium_redeem')} + + + + + ); +}; + +export { PremiumRedeemCard }; +export type { PremiumRedeemCardProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx b/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx new file mode 100644 index 0000000000..5c1eae4f4c --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +import { InformationCircle } from '@/assets/icons'; +import { Dl, Switch, theme } from '@/component-library'; + +const StyledDl = styled(Dl)` + background-color: ${theme.card.bg.secondary}; + padding: ${theme.spacing.spacing4}; + font-size: ${theme.text.xs}; + border-radius: ${theme.rounded.rg}; +`; + +const StyledInformationCircle = styled(InformationCircle)` + margin-left: ${theme.spacing.spacing2}; + vertical-align: text-top; +`; + +const StyledSwitch = styled(Switch)` + flex-direction: row-reverse; + justify-content: space-between; +`; + +export { StyledDl, StyledInformationCircle, StyledSwitch }; diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx b/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx new file mode 100644 index 0000000000..1ac925d0bd --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx @@ -0,0 +1,338 @@ +import { getRedeemRequestsFromExtrinsicResult, newMonetaryAmount, Redeem } from '@interlay/interbtc-api'; +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { ChangeEvent, Key, useCallback, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDebounce } from 'react-use'; + +import { + convertMonetaryAmountToValueInUSD, + getRandomArrayElement, + newSafeMonetaryAmount, + safeBitcoinAmount +} from '@/common/utils/utils'; +import { Flex, Input, TokenInput } from '@/component-library'; +import { AuthCTA } from '@/components'; +import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { + BRIDGE_REDEEM_ADDRESS, + BRIDGE_REDEEM_AMOUNT_FIELD, + BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, + BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH, + BRIDGE_REDEEM_FEE_TOKEN, + BRIDGE_REDEEM_PREMIUM_VAULT_FIELD, + BridgeRedeemFormData, + bridgeRedeemSchema, + useForm +} from '@/lib/form'; +import { BridgeActions } from '@/types/bridge'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { RedeemData, useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; +import { BridgeVaultData, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { TransactionArgs } from '@/utils/hooks/transaction/types'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; + +import { LegacyRedeemModal } from '../LegacyRedeemModal'; +import { RequestLimitsCard } from '../RequestLimitsCard'; +import { SelectVaultCard } from '../SelectVaultCard'; +import { TransactionDetails } from '../TransactionDetails'; +import { PremiumRedeemCard } from './PremiumRedeemCard'; + +const getRequestLimit = ( + redeemLimit: MonetaryAmount, + selectedVault?: BridgeVaultData, + premiumRedeemLimit?: MonetaryAmount, + isPremiumRedeem?: boolean +) => { + if (selectedVault) { + return selectedVault.amount; + } + + if (isPremiumRedeem && premiumRedeemLimit) { + return premiumRedeemLimit; + } + + return redeemLimit; +}; + +type RedeemFormProps = RedeemData; + +const RedeemForm = ({ + currentInclusionFee, + dustValue, + feeRate, + redeemLimit, + premium +}: RedeemFormProps): JSX.Element => { + const { t } = useTranslation(); + const prices = useGetPrices(); + const { getBalance, getAvailableBalance } = useGetBalances(); + const { getCompensationAmount } = useGetRedeemData(); + + const [redeemRequest, setRedeemRequest] = useState(); + + const [isPremiumRedeem, setPremiumRedeem] = useState(false); + + const [amount, setAmount] = useState(); + const [debouncedAmount, setDebouncedAmount] = useState(); + + useDebounce(() => setDebouncedAmount(amount), 500, [amount]); + + const [selectedVault, setSelectedVault] = useState(); + + const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.REDEEM); + + const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0); + const availableVaults = getAvailableVaults(debouncedMonetaryAmount); + const vaults = availableVaults?.length ? availableVaults : vaultsData?.list; + + const transaction = useTransaction(Transaction.REDEEM_REQUEST, { + onSuccess: async (result) => { + try { + const [redeemRequest] = await getRedeemRequestsFromExtrinsicResult(window.bridge, result.data); + + setRedeemRequest(redeemRequest); + } catch (e: any) { + transaction.reject(e); + } + + setAmount(undefined); + setDebouncedAmount(undefined); + form.resetForm(); + }, + showSuccessModal: false + }); + + const governanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); + + const assetBalance = getAvailableBalance(WRAPPED_TOKEN.ticker) || newMonetaryAmount(0, WRAPPED_TOKEN); + + const currentRequestLimit = getRequestLimit(redeemLimit, selectedVault, premium?.redeemLimit, isPremiumRedeem); + const redeemBalance = assetBalance.gt(currentRequestLimit) ? currentRequestLimit : assetBalance; + + const getTransactionArgs = useCallback( + (values: BridgeRedeemFormData): TransactionArgs | undefined => { + const amount = values[BRIDGE_REDEEM_AMOUNT_FIELD]; + const btcAddress = values[BRIDGE_REDEEM_ADDRESS]; + + if (!vaultsData || !amount || !btcAddress) return; + + const monetaryAmount = newMonetaryAmount(amount, WRAPPED_TOKEN, true); + + const isPremiumRedeem = values[BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]; + + const availableVaults = getAvailableVaults(monetaryAmount, isPremiumRedeem); + + if (!availableVaults) return; + + const vaultId = values[BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]; + + let vault: BridgeVaultData | undefined; + + // If custom vault was select, try to find it in the data + if (vaultId) { + vault = availableVaults.find((item) => item.id === vaultId); + } + + // If no vault provided nor the custom vault wasn't found (unlikely), choose random vault + if (!vault) { + vault = getRandomArrayElement(availableVaults); + } + + return [monetaryAmount, btcAddress, vault.vaultId]; + }, + [vaultsData, getAvailableVaults] + ); + + const handleSubmit = async (values: BridgeRedeemFormData) => { + const args = getTransactionArgs(values); + + if (!args) return; + + transaction.execute(...args); + }; + + const monetaryAmount = newSafeMonetaryAmount(amount || 0, WRAPPED_TOKEN, true); + + const bridgeFee = monetaryAmount.mul(feeRate); + + const totalFees = bridgeFee.add(currentInclusionFee); + + const minAmount = totalFees.add(dustValue).add(newMonetaryAmount(1, WRAPPED_TOKEN)); + + const transferAmountSchemaParams = { + governanceBalance, + maxAmount: redeemBalance, + minAmount + }; + + const form = useForm({ + initialValues: { + [BRIDGE_REDEEM_AMOUNT_FIELD]: '', + [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]: '', + [BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]: false, + [BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]: false, + [BRIDGE_REDEEM_ADDRESS]: '', + [BRIDGE_REDEEM_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker + }, + validationSchema: bridgeRedeemSchema({ [BRIDGE_REDEEM_AMOUNT_FIELD]: transferAmountSchemaParams }), + onSubmit: handleSubmit, + hideErrorMessages: transaction.isLoading, + onComplete: (values) => { + const args = getTransactionArgs(values); + + if (!args) return; + + const feeTicker = values[BRIDGE_REDEEM_FEE_TOKEN]; + + transaction.fee.setCurrency(feeTicker).estimate(...args); + } + }); + + const handleToggleCustomVault = (e: ChangeEvent) => { + const isChecked = e.target.checked; + + // make vault select field untouched + if (!isChecked) { + return form.setFieldTouched(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, false, true); + } + }; + + const handleTogglePremiumVault = (e: ChangeEvent) => { + const isChecked = e.target.checked; + + setPremiumRedeem(isChecked); + + const isSelectingVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]; + + // Do not continue if premium is unchecked and is not manually selecting vault + if (!isChecked || !isSelectingVault) return; + + const premiumVaults = getAvailableVaults(monetaryAmount, true); + + const selectedVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]; + + if (!selectedVault) return; + + const isSelectedVaultValid = premiumVaults?.find((vault) => vault.id === selectedVault); + + if (isSelectedVaultValid) return; + + form.setFieldValue(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, '', true); + }; + + const handleChangeIssueAmount = (e: ChangeEvent) => setAmount(e.target.value); + + const handleVaultSelectionChange = (key: Key) => { + if (!vaults) return; + + const vault = vaults.find((item) => item.id === key); + + setSelectedVault(vault); + }; + + const amountUSD = monetaryAmount + ? convertMonetaryAmountToValueInUSD(monetaryAmount, getTokenPrice(prices, monetaryAmount.currency.ticker)?.usd) || 0 + : 0; + + const totalAmount = monetaryAmount.gte(totalFees) + ? monetaryAmount.sub(totalFees) + : newMonetaryAmount(0, WRAPPED_TOKEN); + const totalAmountUSD = totalAmount + ? convertMonetaryAmountToValueInUSD(totalAmount, getTokenPrice(prices, totalAmount.currency.ticker)?.usd) || 0 + : 0; + + const compensationAmount = + monetaryAmount.isZero() && isPremiumRedeem ? getCompensationAmount(monetaryAmount) : undefined; + const compensationAmountUSD = compensationAmount + ? convertMonetaryAmountToValueInUSD( + compensationAmount, + getTokenPrice(prices, compensationAmount.currency.ticker)?.usd + ) || 0 + : 0; + + const isSelectingVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]; + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + + const hasPremiumRedeemFeature = premium; + + return ( + <> + +
+ + + + + {hasPremiumRedeemFeature && ( + + )} + + + + + + + {t('redeem')} + + + +
+ + {redeemRequest && ( + setRedeemRequest(undefined)} request={redeemRequest} /> + )} + + ); +}; + +export { RedeemForm }; +export type { RedeemFormProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx b/src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx new file mode 100644 index 0000000000..0e5a736b57 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx @@ -0,0 +1,2 @@ +export type { RedeemFormProps } from './RedeemForm'; +export { RedeemForm } from './RedeemForm'; diff --git a/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx b/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx new file mode 100644 index 0000000000..eae288b9e8 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx @@ -0,0 +1,46 @@ +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Card, Dd, Dl, DlGroup, Dt, Flex, P } from '@/component-library'; + +type RequestLimitsCardProps = { + title: ReactNode; + singleRequestLimit: MonetaryAmount; + maxRequestLimit?: MonetaryAmount; +}; + +const RequestLimitsCard = ({ title, singleRequestLimit, maxRequestLimit }: RequestLimitsCardProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + +

{title}

+ +
+ +
+ {t('bridge.in_single_request')} +
+
+ {singleRequestLimit.toHuman()} {singleRequestLimit.currency.ticker} +
+ + {maxRequestLimit && ( + +
+ {t('bridge.in_total')} +
+
+ {maxRequestLimit.toHuman()} {maxRequestLimit.currency.ticker} +
+ + )} +
+ + + ); +}; + +export { RequestLimitsCard }; +export type { RequestLimitsCardProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx b/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx new file mode 100644 index 0000000000..fb322f8032 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx @@ -0,0 +1,2 @@ +export type { RequestLimitsCardProps } from './RequestLimitsCard'; +export { RequestLimitsCard } from './RequestLimitsCard'; diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx new file mode 100644 index 0000000000..068bf1ba27 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx @@ -0,0 +1,43 @@ +import { useTranslation } from 'react-i18next'; + +import { Card, SwitchProps } from '@/component-library'; +import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; + +import { VaultSelect, VaultSelectProps } from './VaultSelect'; +import { StyledSwitch } from './VaultSelect.style'; + +type SelectVaultCardProps = { + isSelectingVault?: boolean; + vaults: BridgeVaultData[] | undefined; + switchProps: SwitchProps; + selectProps: VaultSelectProps; +}; + +const SelectVaultCard = ({ vaults, isSelectingVault, switchProps, selectProps }: SelectVaultCardProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + + + {t('bridge.manually_select_vault')} + + {isSelectingVault && vaults && ( + + )} + + ); +}; + +SelectVaultCard.displayName = 'SelectVaultCard'; + +export { SelectVaultCard }; +export type { SelectVaultCardProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx new file mode 100644 index 0000000000..0fd4507971 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx @@ -0,0 +1,48 @@ +import Identicon from '@polkadot/react-identicon'; + +import { CoinIcon, Flex } from '@/component-library'; +import { useSelectModalContext } from '@/component-library/Select/SelectModalContext'; +import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; + +import { + StyledListLabelWrapper, + StyledListWrapper, + StyledVaultAddress, + StyledVaultIcon, + StyledVaultName +} from './VaultSelect.style'; + +type VaultListItemProps = { data: BridgeVaultData }; + +const VaultListItem = ({ data }: VaultListItemProps): JSX.Element => { + const { id, vaultId, collateralCurrency, amount } = data; + + const isSelected = useSelectModalContext().selectedItem?.key === id; + + const accountAddress = vaultId.accountId.toString(); + + return ( + + + + + + + + + {collateralCurrency.ticker} Vault + + + {amount.toHuman()} BTC + + + + {accountAddress} + + + + ); +}; + +export { VaultListItem }; +export type { VaultListItemProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx new file mode 100644 index 0000000000..fdcb2a8a76 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx @@ -0,0 +1,63 @@ +import styled from 'styled-components'; + +import { Flex, Span, Switch, theme } from '@/component-library'; + +type StyledListItemSelectedLabelProps = { + $isSelected: boolean; +}; + +const StyledChain = styled.span` + font-size: ${theme.text.s}; + color: ${theme.colors.textPrimary}; + overflow: hidden; + text-overflow: ellipsis; +`; + +const StyledListItemLabel = styled(Span)` + color: ${({ $isSelected }) => + $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; + text-overflow: ellipsis; + overflow: hidden; +`; + +const StyledVaultName = styled(Span)` + color: ${({ $isSelected }) => + $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; +`; + +const StyledListWrapper = styled(Flex)` + overflow: hidden; +`; + +const StyledListLabelWrapper = styled(Flex)` + overflow: hidden; +`; + +const StyledVaultAddress = styled(Span)` + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +`; + +const StyledVaultIcon = styled(Flex)` + & :last-child { + margin-left: -25%; + z-index: 1; + } +`; + +const StyledSwitch = styled(Switch)` + flex-direction: row-reverse; + justify-content: space-between; +`; + +export { + StyledChain, + StyledListItemLabel, + StyledListLabelWrapper, + StyledListWrapper, + StyledSwitch, + StyledVaultAddress, + StyledVaultIcon, + StyledVaultName +}; diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx new file mode 100644 index 0000000000..7f71e9c14f --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx @@ -0,0 +1,27 @@ +import { useTranslation } from 'react-i18next'; + +import { Item, Select, SelectProps } from '@/component-library'; +import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; + +import { VaultListItem } from './VaultListItem'; + +type VaultSelectProps = Omit, 'children' | 'type'>; + +const VaultSelect = (props: VaultSelectProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + {...props} type='modal' modalTitle={t('bridge.select_vault')} size='large'> + {(data: BridgeVaultData) => ( + + + + )} + + ); +}; + +VaultSelect.displayName = 'VaultSelect'; + +export { VaultSelect }; +export type { VaultSelectProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx new file mode 100644 index 0000000000..dba800be13 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx @@ -0,0 +1,2 @@ +export type { SelectVaultCardProps } from './SelectVaultCard'; +export { SelectVaultCard } from './SelectVaultCard'; diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx new file mode 100644 index 0000000000..a806944d1c --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import { theme } from '@/component-library/theme'; +import { PlusDivider } from '@/components'; + +const StyledPlusDivider = styled(PlusDivider)` + margin-bottom: calc(${theme.spacing.spacing2} * -1); + z-index: 0; +`; + +export { StyledPlusDivider }; diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx new file mode 100644 index 0000000000..fe146237c0 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx @@ -0,0 +1,137 @@ +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import { useId } from '@react-aria/utils'; +import { useTranslation } from 'react-i18next'; + +import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; +import { Alert, Flex, TokenInput } from '@/component-library'; +import { + TransactionDetails as BaseTransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionFeeDetails, + TransactionFeeDetailsProps, + TransactionSelectToken, + TransactionSelectTokenProps +} from '@/components'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { SelectCurrencyFilter, useSelectCurrency } from '@/utils/hooks/use-select-currency'; + +import { StyledPlusDivider } from './TransactionDetails.style'; + +type TransactionDetailsProps = { + totalAmount: MonetaryAmount; + totalAmountUSD: number; + totalTicker: string; + compensationAmount?: MonetaryAmount; + compensationAmountUSD?: number; + bridgeFee: MonetaryAmount; + securityDeposit?: MonetaryAmount; + bitcoinNetworkFee?: MonetaryAmount; + feeDetailsProps?: TransactionFeeDetailsProps; + securityDepositSelectProps?: TransactionSelectTokenProps; + showInsufficientSecurityBalance?: boolean; +}; + +const TransactionDetails = ({ + totalAmount, + totalAmountUSD, + totalTicker, + compensationAmount, + compensationAmountUSD, + bridgeFee, + securityDeposit, + bitcoinNetworkFee, + feeDetailsProps, + securityDepositSelectProps, + showInsufficientSecurityBalance +}: TransactionDetailsProps): JSX.Element => { + const prices = useGetPrices(); + const { t } = useTranslation(); + + const griefingCollateralErrorMessageId = useId(); + + const { items: griefingCollateralCurrencies } = useSelectCurrency( + SelectCurrencyFilter.ISSUE_GRIEFING_COLLATERAL_CURRENCY + ); + + return ( + + + + {compensationAmount && ( + <> + + + + )} + + + + + {t('bridge.bridge_fee')} + + + {bridgeFee.toHuman()} {bridgeFee.currency.ticker} ( + {displayMonetaryAmountInUSDFormat(bridgeFee, getTokenPrice(prices, bridgeFee.currency.ticker)?.usd)}) + + + {securityDeposit && ( + <> + {securityDepositSelectProps && ( + + )} + + + {t('bridge.security_deposit')} + + + {securityDeposit.toHuman()} {securityDeposit.currency.ticker} ( + {displayMonetaryAmountInUSDFormat( + securityDeposit, + getTokenPrice(prices, securityDeposit.currency.ticker)?.usd + )} + ) + + + + )} + + {showInsufficientSecurityBalance && ( + + {t('forms.ensure_adequate_amount_left_to_cover_action', { + action: t('bridge.security_deposit_token').toLowerCase() + })} + + )} + {bitcoinNetworkFee && ( + + )} + {feeDetailsProps && } + + ); +}; + +export { TransactionDetails }; +export type { TransactionDetailsProps }; diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx new file mode 100644 index 0000000000..d8856d5ba5 --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx @@ -0,0 +1,2 @@ +export type { TransactionDetailsProps } from './TransactionDetails'; +export { TransactionDetails } from './TransactionDetails'; diff --git a/src/pages/Bridge/BridgeOverview/components/index.tsx b/src/pages/Bridge/BridgeOverview/components/index.tsx new file mode 100644 index 0000000000..20c449724d --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/components/index.tsx @@ -0,0 +1,7 @@ +import { IssueForm, IssueFormProps } from './IssueForm'; +import { LegacyBurnForm } from './LegacyBurnForm'; +import { LegacyTransactions } from './LegacyTransactions'; +import { RedeemForm, RedeemFormProps } from './RedeemForm'; + +export { IssueForm, LegacyBurnForm, LegacyTransactions, RedeemForm }; +export type { IssueFormProps, RedeemFormProps }; diff --git a/src/pages/Bridge/BridgeOverview/index.tsx b/src/pages/Bridge/BridgeOverview/index.tsx new file mode 100644 index 0000000000..a1de6d6a3f --- /dev/null +++ b/src/pages/Bridge/BridgeOverview/index.tsx @@ -0,0 +1,3 @@ +import BridgeOverview from './BridgeOverview'; + +export default BridgeOverview; diff --git a/src/pages/Bridge/IssueForm/index.tsx b/src/pages/Bridge/IssueForm/index.tsx deleted file mode 100644 index fbffaaae14..0000000000 --- a/src/pages/Bridge/IssueForm/index.tsx +++ /dev/null @@ -1,551 +0,0 @@ -import { - currencyIdToMonetaryCurrency, - getIssueRequestsFromExtrinsicResult, - GovernanceCurrency, - InterbtcPrimitivesVaultId, - Issue -} from '@interlay/interbtc-api'; -import { IssueLimits } from '@interlay/interbtc-api/build/src/parachain/issue'; -import { Bitcoin, BitcoinAmount, ExchangeRate } from '@interlay/monetary-js'; -import Big from 'big.js'; -import clsx from 'clsx'; -import * as React from 'react'; -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { Trans, useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; -import { useDispatch, useSelector } from 'react-redux'; - -import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; -import { VaultApiType } from '@/common/types/vault.types'; -import { - displayMonetaryAmount, - displayMonetaryAmountInUSDFormat, - getRandomVaultIdWithCapacity -} from '@/common/utils/utils'; -import { AuthCTA } from '@/components'; -import { INTERLAY_VAULT_DOCS_LINK } from '@/config/links'; -import { - BLOCKS_BEHIND_LIMIT, - DEFAULT_ISSUE_BRIDGE_FEE_RATE, - DEFAULT_ISSUE_DUST_AMOUNT, - DEFAULT_ISSUE_GRIEFING_COLLATERAL_RATE -} from '@/config/parachain'; -import { - GOVERNANCE_TOKEN, - GOVERNANCE_TOKEN_SYMBOL, - GovernanceTokenLogoIcon, - TRANSACTION_FEE_AMOUNT, - WRAPPED_TOKEN_SYMBOL, - WrappedTokenLogoIcon -} from '@/config/relay-chains'; -import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import FormTitle from '@/legacy-components/FormTitle'; -import Hr2 from '@/legacy-components/hrs/Hr2'; -import PriceInfo from '@/legacy-components/PriceInfo'; -import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; -import TokenField from '@/legacy-components/TokenField'; -import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; -import InterlayLink from '@/legacy-components/UI/InterlayLink'; -import { useSubstrateSecureState } from '@/lib/substrate'; -import ParachainStatusInfo from '@/pages/Bridge/ParachainStatusInfo'; -import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { ForeignAssetIdLiteral } from '@/types/currency'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import STATUSES from '@/utils/constants/statuses'; -import { getExchangeRate } from '@/utils/helpers/oracle'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; - -import ManualVaultSelectUI from '../ManualVaultSelectUI'; -import SubmittedIssueRequestModal from './SubmittedIssueRequestModal'; - -const BTC_AMOUNT = 'btc-amount'; -const VAULT_SELECTION = 'vault-selection'; - -const getTokenFieldHelperText = (message?: string) => { - switch (message) { - case 'no_issuable_token_available': - return ( - - Oh, snap! All iBTC minting capacity has been snatched up. Please come back a bit later, or{' '} - - consider running a Vault - - ! - - ); - default: - return message; - } -}; - -type IssueFormData = { - [BTC_AMOUNT]: string; - [VAULT_SELECTION]: string; -}; - -const IssueForm = (): JSX.Element | null => { - const dispatch = useDispatch(); - const { t } = useTranslation(); - const prices = useGetPrices(); - - const handleError = useErrorHandler(); - - const { selectedAccount } = useSubstrateSecureState(); - const { bridgeLoaded, bitcoinHeight, btcRelayHeight, parachainStatus } = useSelector( - (state: StoreType) => state.general - ); - const { isLoading: isBalancesLoading, data: balances } = useGetBalances(); - - const { - register, - handleSubmit, - watch, - formState: { errors }, - trigger, - setError, - clearErrors - } = useForm({ - mode: 'onChange' // 'onBlur' - }); - const btcAmount = watch(BTC_AMOUNT) || '0'; - - const [status, setStatus] = React.useState(STATUSES.IDLE); - // Additional info: bridge fee, security deposit, amount BTC - // Current fee model specification taken from: https://interlay.gitlab.io/polkabtc-spec/spec/fee.html - const [issueFeeRate, setIssueFeeRate] = React.useState(new Big(DEFAULT_ISSUE_BRIDGE_FEE_RATE)); - const [depositRate, setDepositRate] = React.useState(new Big(DEFAULT_ISSUE_GRIEFING_COLLATERAL_RATE)); - const [btcToGovernanceTokenRate, setBTCToGovernanceTokenRate] = React.useState( - new ExchangeRate(Bitcoin, GOVERNANCE_TOKEN, new Big(0)) - ); - const [dustValue, setDustValue] = React.useState(new BitcoinAmount(DEFAULT_ISSUE_DUST_AMOUNT)); - const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submittedRequest, setSubmittedRequest] = React.useState(); - const [selectVaultManually, setSelectVaultManually] = React.useState(false); - const [selectedVault, setSelectedVault] = React.useState(); - - const { - isIdle: requestLimitsIdle, - isLoading: requestLimitsLoading, - data: requestLimits, - error: requestLimitsError, - refetch: requestLimitsRefetch - } = useQuery([GENERIC_FETCHER, 'issue', 'getRequestLimits'], genericFetcher(), { - enabled: !!bridgeLoaded - }); - useErrorHandler(requestLimitsError); - - const transaction = useTransaction(Transaction.ISSUE_REQUEST, { showSuccessModal: false }); - - React.useEffect(() => { - if (!bridgeLoaded) return; - if (!dispatch) return; - if (!handleError) return; - - (async () => { - try { - setStatus(STATUSES.PENDING); - const [ - feeRateResult, - depositRateResult, - dustValueResult, - btcToGovernanceTokenResult - ] = await Promise.allSettled([ - // Loading this data is not strictly required as long as the constantly set values did - // not change. However, you will not see the correct value for the security deposit. - window.bridge.fee.getIssueFee(), - window.bridge.fee.getIssueGriefingCollateralRate(), - window.bridge.issue.getDustValue(), - getExchangeRate(GOVERNANCE_TOKEN) - ]); - setStatus(STATUSES.RESOLVED); - - if (feeRateResult.status === 'rejected') { - throw new Error(feeRateResult.reason); - } - - if (depositRateResult.status === 'rejected') { - throw new Error(depositRateResult.reason); - } - - if (dustValueResult.status === 'rejected') { - throw new Error(dustValueResult.reason); - } - - if (btcToGovernanceTokenResult.status === 'rejected') { - setError(BTC_AMOUNT, { - type: 'validate', - message: t('error_oracle_offline', { action: 'issue', wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL }) - }); - } - - if (btcToGovernanceTokenResult.status === 'fulfilled') { - setBTCToGovernanceTokenRate(btcToGovernanceTokenResult.value); - } - - setIssueFeeRate(feeRateResult.value); - setDepositRate(depositRateResult.value); - setDustValue(dustValueResult.value); - } catch (error) { - setStatus(STATUSES.REJECTED); - handleError(error); - } - })(); - }, [bridgeLoaded, dispatch, handleError, setError, t]); - - React.useEffect(() => { - // Deselect checkbox when required btcAmount exceeds capacity - if (requestLimits) { - const monetaryBtcAmount = new BitcoinAmount(btcAmount); - if (monetaryBtcAmount.gt(requestLimits.singleVaultMaxIssuable)) { - setSelectVaultManually(false); - } - } - }, [btcAmount, requestLimits]); - - React.useEffect(() => { - // Vault selection validation - const monetaryBtcAmount = new BitcoinAmount(btcAmount); - - if (selectVaultManually && selectedVault === undefined) { - setError(VAULT_SELECTION, { type: 'validate', message: t('issue_page.vault_must_be_selected') }); - } else if (selectVaultManually && selectedVault?.[1].lt(monetaryBtcAmount)) { - setError(VAULT_SELECTION, { type: 'validate', message: t('issue_page.selected_vault_has_no_enough_capacity') }); - } else { - clearErrors(VAULT_SELECTION); - } - }, [selectVaultManually, selectedVault, setError, clearErrors, t, btcAmount]); - - const hasIssuableToken = !requestLimits?.singleVaultMaxIssuable.isZero(); - - React.useEffect(() => { - if (!hasIssuableToken) { - setError(BTC_AMOUNT, { - type: 'validate', - message: 'no_issuable_token_available' - }); - } - }, [hasIssuableToken, setError]); - - if ( - status === STATUSES.IDLE || - status === STATUSES.PENDING || - requestLimitsIdle || - requestLimitsLoading || - isBalancesLoading - ) { - return ; - } - - if (requestLimits === undefined) { - throw new Error('Something went wrong!'); - } - - if (status === STATUSES.RESOLVED) { - const validateForm = (value: string): string | undefined => { - const governanceTokenBalance = balances?.[GOVERNANCE_TOKEN.ticker]; - - if (governanceTokenBalance === undefined) return; - - const numericValue = Number(value || '0'); - const btcAmount = new BitcoinAmount(numericValue); - - const securityDeposit = btcToGovernanceTokenRate.toCounter(btcAmount).mul(depositRate); - const minRequiredGovernanceTokenAmount = TRANSACTION_FEE_AMOUNT.add(securityDeposit); - if (governanceTokenBalance.transferable.lte(minRequiredGovernanceTokenAmount)) { - return t('issue_page.insufficient_funds', { - governanceTokenSymbol: GOVERNANCE_TOKEN_SYMBOL - }); - } - - if (btcAmount.lt(dustValue)) { - return `${t('issue_page.validation_min_value')}${displayMonetaryAmount(dustValue)} BTC).`; - } - - if (btcAmount.gt(requestLimits.singleVaultMaxIssuable)) { - return t('issue_page.maximum_in_single_request_error', { - maxAmount: displayMonetaryAmount(requestLimits.singleVaultMaxIssuable), - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - }); - } - - if (bitcoinHeight - btcRelayHeight > BLOCKS_BEHIND_LIMIT) { - return t('issue_page.error_more_than_6_blocks_behind', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - }); - } - - if (isOracleOffline) { - return t('error_oracle_offline', { action: 'issue', wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL }); - } - - return undefined; - }; - - const handleSubmittedRequestModalOpen = (newSubmittedRequest: Issue) => { - setSubmittedRequest(newSubmittedRequest); - }; - const handleSubmittedRequestModalClose = () => { - setSubmittedRequest(undefined); - }; - - const handleSelectVaultCheckboxChange = () => { - if (!isSelectVaultCheckboxDisabled) { - setSelectVaultManually((prev) => !prev); - } - }; - - const onSubmit = async (data: IssueFormData) => { - setSubmitStatus(STATUSES.PENDING); - await requestLimitsRefetch(); - await trigger(BTC_AMOUNT); - - const monetaryBtcAmount = new BitcoinAmount(data[BTC_AMOUNT] || '0'); - const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); - - let vaultId: InterbtcPrimitivesVaultId; - if (selectVaultManually) { - if (!selectedVault) { - throw new Error('Specific vault is not selected!'); - } - vaultId = selectedVault[0]; - } else { - vaultId = getRandomVaultIdWithCapacity(Array.from(vaults), monetaryBtcAmount); - } - - const collateralToken = await currencyIdToMonetaryCurrency(window.bridge.api, vaultId.currencies.collateral); - - const result = await transaction.executeAsync( - monetaryBtcAmount, - vaultId.accountId, - collateralToken, - false, // default - vaults - ); - const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); - - // TODO: handle issue aggregation - const issueRequest = issueRequests[0]; - handleSubmittedRequestModalOpen(issueRequest); - setSubmitStatus(STATUSES.RESOLVED); - }; - - const monetaryBtcAmount = new BitcoinAmount(btcAmount); - - const bridgeFee = monetaryBtcAmount.mul(issueFeeRate); - const bridgeFeeInBTC = bridgeFee.toHuman(8); - const bridgeFeeInUSD = displayMonetaryAmountInUSDFormat( - bridgeFee, - getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd - ); - - const securityDeposit = btcToGovernanceTokenRate.toCounter(monetaryBtcAmount).mul(depositRate); - const securityDepositInGovernanceToken = displayMonetaryAmount(securityDeposit); - const securityDepositInUSD = displayMonetaryAmountInUSDFormat( - securityDeposit, - getTokenPrice(prices, GOVERNANCE_TOKEN_SYMBOL)?.usd - ); - - const txFeeInGovernanceToken = displayMonetaryAmount(TRANSACTION_FEE_AMOUNT); - const txFeeInUSD = displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, GOVERNANCE_TOKEN_SYMBOL)?.usd - ); - - const total = monetaryBtcAmount.sub(bridgeFee); - const totalInBTC = total.toHuman(8); - const totalInUSD = displayMonetaryAmountInUSDFormat(total, getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd); - - const accountSet = !!selectedAccount; - - const isSelectVaultCheckboxDisabled = monetaryBtcAmount.gt(requestLimits.singleVaultMaxIssuable); - - // `btcToGovernanceTokenRate` has 0 value only if oracle call fails - const isOracleOffline = btcToGovernanceTokenRate.toBig().eq(0); - - // TODO: `parachainStatus` and `address` should be checked at upper levels - const isSubmitBtnDisabled = accountSet ? parachainStatus !== ParachainStatus.Running || !selectedAccount : false; - - return ( - <> -
- - {t('issue_page.mint_polka_by_wrapping', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - })} - -
- - - validateForm(value) - })} - approxUSD={`≈ ${displayMonetaryAmountInUSDFormat( - monetaryBtcAmount || BitcoinAmount.zero(), - getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd - )}`} - error={!!errors[BTC_AMOUNT]} - helperText={getTokenFieldHelperText(errors[BTC_AMOUNT]?.message)} - helperTextClassName={clsx({ 'h-12': !hasIssuableToken })} - /> -
- - - - {t('you_will_receive')} - - } - unitIcon={} - dataTestId='total-receiving-amount' - value={totalInBTC} - unitName={WRAPPED_TOKEN_SYMBOL} - approxUSD={totalInUSD} - /> - - - {t('bridge_fee')} - - } - unitIcon={} - dataTestId='issue-bridge-fee' - value={bridgeFeeInBTC} - unitName='BTC' - approxUSD={bridgeFeeInUSD} - tooltip={ - - } - /> - - {t('issue_page.security_deposit')} - - } - unitIcon={} - dataTestId='security-deposit' - value={securityDepositInGovernanceToken} - unitName={GOVERNANCE_TOKEN_SYMBOL} - approxUSD={securityDepositInUSD} - tooltip={ - - } - /> - - {t('issue_page.transaction_fee')} - - } - unitIcon={} - dataTestId='transaction-fee' - value={txFeeInGovernanceToken} - unitName={GOVERNANCE_TOKEN_SYMBOL} - approxUSD={txFeeInUSD} - tooltip={ - - } - /> - - - {t('confirm')} - - - {submittedRequest && ( - - )} - - ); - } - - return null; -}; - -export default withErrorBoundary(IssueForm, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/Bridge/ManualVaultSelectUI/index.tsx b/src/pages/Bridge/ManualVaultSelectUI/index.tsx deleted file mode 100644 index cf7246be17..0000000000 --- a/src/pages/Bridge/ManualVaultSelectUI/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { BitcoinAmount } from '@interlay/monetary-js'; -import clsx from 'clsx'; -import { FieldError } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; - -import { VaultApiType } from '@/common/types/vault.types'; -import Checkbox, { CheckboxLabelSide } from '@/legacy-components/Checkbox'; -import VaultsSelector from '@/legacy-components/VaultsSelector'; -import { TreasuryAction } from '@/types/general'; - -interface Props { - disabled: boolean; - checked: boolean; - treasuryAction: TreasuryAction; - requiredCapacity: BitcoinAmount; - error?: FieldError; - onSelectionCallback: (vault: VaultApiType | undefined) => void; - onCheckboxChange: () => void; -} - -const ManualVaultSelectUI = ({ - disabled, - checked, - treasuryAction, - requiredCapacity, - error, - onSelectionCallback, - onCheckboxChange -}: Props): JSX.Element => { - const { t } = useTranslation(); - - return ( -
- - -
- ); -}; - -export default ManualVaultSelectUI; diff --git a/src/pages/Bridge/ParachainStatusInfo/index.tsx b/src/pages/Bridge/ParachainStatusInfo/index.tsx deleted file mode 100644 index 764b5652a2..0000000000 --- a/src/pages/Bridge/ParachainStatusInfo/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import clsx from 'clsx'; -import { useTranslation } from 'react-i18next'; - -import { ParachainStatus } from '@/common/types/util.types'; -import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import { getColorShade } from '@/utils/helpers/colors'; - -interface Props { - status: ParachainStatus; - className?: string; -} - -const ParachainStatusInfo = ({ status, className }: Props): JSX.Element | null => { - const { t } = useTranslation(); - - switch (status) { - case ParachainStatus.Loading: - return ( -

- {t('interbtc_bridge_loading', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - })} -

- ); - case ParachainStatus.Running: - return null; - // Shutdown and Error cases - default: - return ( -
-

{t('issue_redeem_disabled')}

-

- {t('interbtc_bridge_recovery_mode', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - })} -

-
- ); - } -}; - -export default ParachainStatusInfo; diff --git a/src/pages/Bridge/RedeemForm/index.tsx b/src/pages/Bridge/RedeemForm/index.tsx deleted file mode 100644 index f934ae0a99..0000000000 --- a/src/pages/Bridge/RedeemForm/index.tsx +++ /dev/null @@ -1,554 +0,0 @@ -import { - CollateralCurrencyExt, - getRedeemRequestsFromExtrinsicResult, - InterbtcPrimitivesVaultId, - newMonetaryAmount, - Redeem -} from '@interlay/interbtc-api'; -import { Bitcoin, BitcoinAmount, ExchangeRate } from '@interlay/monetary-js'; -import Big from 'big.js'; -import clsx from 'clsx'; -import * as React from 'react'; -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { useDispatch, useSelector } from 'react-redux'; - -import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; -import { togglePremiumRedeemAction } from '@/common/actions/redeem.actions'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; -import { VaultApiType } from '@/common/types/vault.types'; -import { - displayMonetaryAmount, - displayMonetaryAmountInUSDFormat, - getRandomVaultIdWithCapacity -} from '@/common/utils/utils'; -import { AuthCTA } from '@/components'; -import { BLOCKS_BEHIND_LIMIT, DEFAULT_REDEEM_BRIDGE_FEE_RATE, DEFAULT_REDEEM_DUST_AMOUNT } from '@/config/parachain'; -import { - RELAY_CHAIN_NATIVE_TOKEN, - RELAY_CHAIN_NATIVE_TOKEN_SYMBOL, - RelayChainNativeTokenLogoIcon, - WRAPPED_TOKEN, - WRAPPED_TOKEN_SYMBOL -} from '@/config/relay-chains'; -import { BALANCE_MAX_INTEGER_LENGTH, BTC_ADDRESS_REGEX } from '@/constants'; -import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import FormTitle from '@/legacy-components/FormTitle'; -import Hr2 from '@/legacy-components/hrs/Hr2'; -import PriceInfo from '@/legacy-components/PriceInfo'; -import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; -import TextField from '@/legacy-components/TextField'; -import Toggle from '@/legacy-components/Toggle'; -import TokenField from '@/legacy-components/TokenField'; -import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; -import ParachainStatusInfo from '@/pages/Bridge/ParachainStatusInfo'; -import { ForeignAssetIdLiteral } from '@/types/currency'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import STATUSES from '@/utils/constants/statuses'; -import { getColorShade } from '@/utils/helpers/colors'; -import { getExchangeRate } from '@/utils/helpers/oracle'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; - -import ManualVaultSelectUI from '../ManualVaultSelectUI'; -import SubmittedRedeemRequestModal from './SubmittedRedeemRequestModal'; - -const WRAPPED_TOKEN_AMOUNT = 'wrapped-token-amount'; -const BTC_ADDRESS = 'btc-address'; -const VAULT_SELECTION = 'vault-selection'; - -const BTC_ADDRESS_LABEL = 'BTC Address'; - -type RedeemFormData = { - [WRAPPED_TOKEN_AMOUNT]: string; - [BTC_ADDRESS]: string; - [VAULT_SELECTION]: string; -}; - -const RedeemForm = (): JSX.Element | null => { - const dispatch = useDispatch(); - const { t } = useTranslation(); - const prices = useGetPrices(); - - const handleError = useErrorHandler(); - - const usdPrice = getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd; - const { bridgeLoaded, bitcoinHeight, btcRelayHeight, parachainStatus } = useSelector( - (state: StoreType) => state.general - ); - const premiumRedeemSelected = useSelector((state: StoreType) => state.redeem.premiumRedeem); - const { data: balances } = useGetBalances(); - - const { - register, - handleSubmit, - formState: { errors }, - watch, - setError, - clearErrors - } = useForm({ - mode: 'onChange' - }); - - const wrappedTokenAmount = watch(WRAPPED_TOKEN_AMOUNT) || '0'; - - const monetaryWrappedTokenAmount = React.useMemo(() => { - return new BitcoinAmount(wrappedTokenAmount); - }, [wrappedTokenAmount]); - - const [dustValue, setDustValue] = React.useState(new BitcoinAmount(DEFAULT_REDEEM_DUST_AMOUNT)); - const [status, setStatus] = React.useState(STATUSES.IDLE); - const [redeemFeeRate, setRedeemFeeRate] = React.useState(new Big(DEFAULT_REDEEM_BRIDGE_FEE_RATE)); - const [btcToRelayChainNativeTokenRate, setBtcToRelayChainNativeTokenRate] = React.useState( - new ExchangeRate(Bitcoin, RELAY_CHAIN_NATIVE_TOKEN, new Big(0)) - ); - const [hasPremiumRedeemVaults, setHasPremiumRedeemVaults] = React.useState(false); - const [maxRedeemableCapacity, setMaxRedeemableCapacity] = React.useState(BitcoinAmount.zero()); - const [premiumRedeemFee, setPremiumRedeemFee] = React.useState(new Big(0)); - const [currentInclusionFee, setCurrentInclusionFee] = React.useState(BitcoinAmount.zero()); - const [submitStatus, setSubmitStatus] = React.useState(STATUSES.IDLE); - const [submittedRequest, setSubmittedRequest] = React.useState(); - - const [selectVaultManually, setSelectVaultManually] = React.useState(false); - - const [selectedVault, setSelectedVault] = React.useState(); - - const transaction = useTransaction(Transaction.REDEEM_REQUEST, { showSuccessModal: false }); - - React.useEffect(() => { - if (!monetaryWrappedTokenAmount) return; - if (!maxRedeemableCapacity) return; - - if (monetaryWrappedTokenAmount.gt(maxRedeemableCapacity)) { - setSelectVaultManually(false); - } - }, [monetaryWrappedTokenAmount, maxRedeemableCapacity]); - - React.useEffect(() => { - if (!monetaryWrappedTokenAmount) return; - if (!setError) return; - if (!clearErrors) return; - - if (selectVaultManually && selectedVault === undefined) { - setError(VAULT_SELECTION, { type: 'validate', message: t('issue_page.vault_must_be_selected') }); - } else if (selectVaultManually && selectedVault?.[1].lt(monetaryWrappedTokenAmount)) { - setError(VAULT_SELECTION, { type: 'validate', message: t('issue_page.selected_vault_has_no_enough_capacity') }); - } else { - clearErrors(VAULT_SELECTION); - } - }, [selectVaultManually, selectedVault, setError, clearErrors, t, monetaryWrappedTokenAmount]); - - const bridgeFee = monetaryWrappedTokenAmount.mul(redeemFeeRate); - - React.useEffect(() => { - if (!bridgeLoaded) return; - if (!handleError) return; - - (async () => { - try { - setStatus(STATUSES.PENDING); - const [ - dustValueResult, - premiumRedeemVaultsResult, - premiumRedeemFeeRateResult, - btcToRelayChainNativeTokenRateResult, - feeRateResult, - currentInclusionFeeResult, - vaultsWithRedeemableTokensResult - ] = await Promise.allSettled([ - window.bridge.redeem.getDustValue(), - window.bridge.vaults.getPremiumRedeemVaults(), - window.bridge.redeem.getPremiumRedeemFeeRate(), - getExchangeRate(RELAY_CHAIN_NATIVE_TOKEN), - window.bridge.redeem.getFeeRate(), - window.bridge.redeem.getCurrentInclusionFee(), - window.bridge.vaults.getVaultsWithRedeemableTokens() - ]); - - if (dustValueResult.status === 'rejected') { - throw new Error(dustValueResult.reason); - } - if (premiumRedeemFeeRateResult.status === 'rejected') { - throw new Error(premiumRedeemFeeRateResult.reason); - } - if (feeRateResult.status === 'rejected') { - throw new Error(feeRateResult.reason); - } - if (currentInclusionFeeResult.status === 'rejected') { - throw new Error(currentInclusionFeeResult.reason); - } - if (btcToRelayChainNativeTokenRateResult.status === 'rejected') { - setError(WRAPPED_TOKEN_AMOUNT, { - type: 'validate', - message: t('error_oracle_offline', { action: 'redeem', wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL }) - }); - } - - if (premiumRedeemVaultsResult.status === 'fulfilled' && premiumRedeemVaultsResult.value.size > 0) { - // Premium redeem vaults are refetched on submission so we only need to set - // true/false rather than keep them in state. No need to set false as this is - // set as a default on render. - setHasPremiumRedeemVaults(true); - } - if ( - vaultsWithRedeemableTokensResult.status === 'fulfilled' && - vaultsWithRedeemableTokensResult.value.size > 0 - ) { - // Find the vault with the largest capacity - const theMaxRedeemableCapacity = vaultsWithRedeemableTokensResult.value.values().next().value; - setMaxRedeemableCapacity(theMaxRedeemableCapacity); - } - if (btcToRelayChainNativeTokenRateResult.status === 'fulfilled') { - setBtcToRelayChainNativeTokenRate(btcToRelayChainNativeTokenRateResult.value); - } - - setDustValue(dustValueResult.value); - setPremiumRedeemFee(new Big(premiumRedeemFeeRateResult.value)); - setRedeemFeeRate(feeRateResult.value); - setCurrentInclusionFee(currentInclusionFeeResult.value); - setStatus(STATUSES.RESOLVED); - } catch (error) { - setStatus(STATUSES.REJECTED); - handleError(error); - } - })(); - }, [bridgeLoaded, handleError, setError, t]); - - if (status === STATUSES.IDLE || status === STATUSES.PENDING) { - return ; - } - - if (status === STATUSES.RESOLVED) { - const handleSubmittedRequestModalOpen = (newSubmittedRequest: Redeem) => { - setSubmittedRequest(newSubmittedRequest); - }; - const handleSubmittedRequestModalClose = () => { - setSubmittedRequest(undefined); - }; - - const handleSelectVaultCheckboxChange = () => { - if (!isSelectVaultCheckboxDisabled) { - setSelectVaultManually((prev) => !prev); - } - }; - - const onSubmit = async (data: RedeemFormData) => { - try { - setSubmitStatus(STATUSES.PENDING); - const monetaryWrappedTokenAmount = new BitcoinAmount(data[WRAPPED_TOKEN_AMOUNT]); - - // Differentiate between premium and regular redeem - let vaultId: InterbtcPrimitivesVaultId; - if (premiumRedeemSelected) { - const premiumRedeemVaults = await window.bridge.vaults.getPremiumRedeemVaults(); - // Select a vault from the premium redeem vault list - for (const [id, redeemableTokenAmount] of premiumRedeemVaults) { - if (redeemableTokenAmount.gte(monetaryWrappedTokenAmount)) { - vaultId = id; - break; - } - } - if (vaultId === undefined) { - let maxAmount = BitcoinAmount.zero(); - for (const redeemableTokenAmount of premiumRedeemVaults.values()) { - if (maxAmount.lt(redeemableTokenAmount)) { - maxAmount = redeemableTokenAmount; - } - } - setError(WRAPPED_TOKEN_AMOUNT, { - type: 'manual', - message: t('redeem_page.error_max_premium_redeem', { - maxPremiumRedeem: displayMonetaryAmount(maxAmount), - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - }) - }); - - return; - } - } else { - const updatedVaults = await window.bridge.vaults.getVaultsWithRedeemableTokens(); - const updatedMaxCapacity = updatedVaults.values().next().value; - - if (monetaryWrappedTokenAmount.gte(updatedMaxCapacity)) { - setError(WRAPPED_TOKEN_AMOUNT, { - type: 'manual', - message: t('redeem_page.request_exceeds_capacity', { - maxRedeemableAmount: `${displayMonetaryAmount(maxRedeemableCapacity)} BTC` - }) - }); - - setSubmitStatus(STATUSES.RESOLVED); - - return; - } - - if (selectVaultManually) { - if (!selectedVault) { - throw new Error('Specific vault is not selected!'); - } - vaultId = selectedVault[0]; - } else { - vaultId = getRandomVaultIdWithCapacity(Array.from(updatedVaults || new Map()), monetaryWrappedTokenAmount); - } - } - - // FIXME: workaround to make premium redeem still possible - const relevantVaults = new Map(); - // FIXME: a bit of a dirty workaround with the capacity - relevantVaults.set(vaultId, monetaryWrappedTokenAmount.mul(2)); - - const result = await transaction.executeAsync(monetaryWrappedTokenAmount, data[BTC_ADDRESS], vaultId); - - const redeemRequests = await getRedeemRequestsFromExtrinsicResult(window.bridge, result.data); - - // TODO: handle redeem aggregator - const redeemRequest = redeemRequests[0]; - handleSubmittedRequestModalOpen(redeemRequest); - setSubmitStatus(STATUSES.RESOLVED); - } catch (error) { - setSubmitStatus(STATUSES.REJECTED); - } - }; - - const validateForm = (value: string): string | undefined => { - const monetaryValue = new BitcoinAmount(value); - - const wrappedTokenBalance = balances?.[WRAPPED_TOKEN.ticker].free || newMonetaryAmount(0, WRAPPED_TOKEN); - if (monetaryValue.gt(wrappedTokenBalance)) { - return `${t('redeem_page.current_balance')}${displayMonetaryAmount(wrappedTokenBalance)}`; - } - - if (monetaryValue.gt(maxRedeemableCapacity)) { - return `${t('redeem_page.request_exceeds_capacity', { - maxRedeemableAmount: `${maxRedeemableCapacity.toHuman(8)} ${ForeignAssetIdLiteral.BTC}`, - btcIdLiteral: `${ForeignAssetIdLiteral.BTC}` - })}`; - } - - const bridgeFee = monetaryValue.mul(redeemFeeRate); - const minValue = dustValue.add(currentInclusionFee).add(bridgeFee); - if (monetaryValue.lte(minValue)) { - return `${t('redeem_page.amount_greater_dust_inclusion')}${displayMonetaryAmount(minValue)} BTC).`; - } - - if (bitcoinHeight - btcRelayHeight > BLOCKS_BEHIND_LIMIT) { - return t('redeem_page.error_more_than_6_blocks_behind', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - }); - } - - const wrappedTokenAmountInteger = value.toString().split('.')[0]; - if (wrappedTokenAmountInteger.length > BALANCE_MAX_INTEGER_LENGTH) { - return 'Input value is too high!'; - } - - if (isOracleOffline) { - return t('error_oracle_offline', { action: 'redeem', wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL }); - } - - return undefined; - }; - - const handlePremiumRedeemToggle = () => { - // TODO: should not use redux - dispatch(togglePremiumRedeemAction(!premiumRedeemSelected)); - }; - - const bridgeFeeInBTC = bridgeFee.toHuman(8); - const bridgeFeeInUSD = displayMonetaryAmountInUSDFormat( - bridgeFee, - getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd - ); - - const total = monetaryWrappedTokenAmount.gt(bridgeFee.add(currentInclusionFee)) - ? monetaryWrappedTokenAmount.sub(bridgeFee).sub(currentInclusionFee) - : BitcoinAmount.zero(); - const totalInBTC = total.toHuman(8); - const totalInUSD = displayMonetaryAmountInUSDFormat(total, getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd); - - const totalRelayChainNativeToken = monetaryWrappedTokenAmount.gt(BitcoinAmount.zero()) - ? btcToRelayChainNativeTokenRate.toCounter(monetaryWrappedTokenAmount).mul(premiumRedeemFee) - : newMonetaryAmount(0, RELAY_CHAIN_NATIVE_TOKEN); - const totalRelayChainNativeTokenInUSD = displayMonetaryAmountInUSDFormat( - totalRelayChainNativeToken, - getTokenPrice(prices, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL)?.usd - ); - - const bitcoinNetworkFeeInBTC = currentInclusionFee.toHuman(8); - const bitcoinNetworkFeeInUSD = displayMonetaryAmountInUSDFormat( - currentInclusionFee, - getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd - ); - - // `btcToDotRate` has 0 value only if oracle call fails - const isOracleOffline = btcToRelayChainNativeTokenRate.toBig().eq(0); - - const isSelectVaultCheckboxDisabled = monetaryWrappedTokenAmount.gt(maxRedeemableCapacity); - - return ( - <> -
- - {t('redeem_page.you_will_receive', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - })} - -
- - validateForm(value) - })} - approxUSD={`≈ ${displayMonetaryAmountInUSDFormat(monetaryWrappedTokenAmount, usdPrice)}`} - error={!!errors[WRAPPED_TOKEN_AMOUNT]} - helperText={errors[WRAPPED_TOKEN_AMOUNT]?.message} - /> -
- - {!premiumRedeemSelected && ( - - )} - - {hasPremiumRedeemVaults && ( -
-
- {t('redeem_page.premium_redeem')} - -
- -
- )} - - {t('you_will_receive')} - - } - unitIcon={} - dataTestId='total-receiving-amount' - value={totalInBTC} - unitName='BTC' - approxUSD={totalInUSD} - /> - - - {t('bridge_fee')} - - } - unitIcon={} - dataTestId='redeem-bridge-fee' - value={bridgeFeeInBTC} - unitName='BTC' - approxUSD={bridgeFeeInUSD} - /> - - {t('bitcoin_network_fee')} - - } - unitIcon={} - dataTestId='redeem-bitcoin-network-fee' - value={bitcoinNetworkFeeInBTC} - unitName='BTC' - approxUSD={bitcoinNetworkFeeInUSD} - /> - {premiumRedeemSelected && ( - {t('redeem_page.earned_premium')}} - unitIcon={} - value={displayMonetaryAmount(totalRelayChainNativeToken)} - unitName={RELAY_CHAIN_NATIVE_TOKEN_SYMBOL} - approxUSD={totalRelayChainNativeTokenInUSD} - /> - )} - - {t('confirm')} - - - {submittedRequest && ( - - )} - - ); - } - - return null; -}; - -export { BTC_ADDRESS_LABEL }; - -export default withErrorBoundary(RedeemForm, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/Bridge/index.tsx b/src/pages/Bridge/index.tsx index 50a3bc78e1..4624eb9420 100644 --- a/src/pages/Bridge/index.tsx +++ b/src/pages/Bridge/index.tsx @@ -1,150 +1,3 @@ -import { BitcoinAmount } from '@interlay/monetary-js'; -import clsx from 'clsx'; -import * as React from 'react'; -import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; - -import { StoreType } from '@/common/types/util.types'; -import Hr1 from '@/legacy-components/hrs/Hr1'; -import Panel from '@/legacy-components/Panel'; -import InterlayTabGroup, { - InterlayTab, - InterlayTabList, - InterlayTabPanel, - InterlayTabPanels -} from '@/legacy-components/UI/InterlayTabGroup'; -import MainContainer from '@/parts/MainContainer'; -import { QUERY_PARAMETERS } from '@/utils/constants/links'; -import TAB_IDS from '@/utils/constants/tab-ids'; -import { useGetCollateralCurrencies } from '@/utils/hooks/api/use-get-collateral-currencies'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters, { QueryParameters } from '@/utils/hooks/use-update-query-parameters'; - -import BurnForm from './BurnForm'; -import IssueForm from './IssueForm'; -import RedeemForm from './RedeemForm'; - -const TAB_ITEMS_WITHOUT_BURN = [ - { - id: TAB_IDS.issue, - label: 'issue' - }, - { - id: TAB_IDS.redeem, - label: 'redeem' - } -]; - -const TAB_ITEMS_WITH_BURN = [ - ...TAB_ITEMS_WITHOUT_BURN, - { - id: TAB_IDS.burn, - label: 'burn' - } -]; - -const Bridge = (): JSX.Element | null => { - const { t } = useTranslation(); - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); - - const queryParams = useQueryParams(); - const selectedTabId = queryParams.get(QUERY_PARAMETERS.TAB); - const updateQueryParameters = useUpdateQueryParameters(); - - const [burnable, setBurnable] = React.useState(false); - - const { data: collateralCurrencies } = useGetCollateralCurrencies(bridgeLoaded); - - const updateQueryParametersRef = React.useRef<(newQueryParameters: QueryParameters) => void>(); - // MEMO: inspired by https://epicreact.dev/the-latest-ref-pattern-in-react/ - React.useLayoutEffect(() => { - updateQueryParametersRef.current = updateQueryParameters; - }); - - React.useEffect(() => { - if (!updateQueryParametersRef.current) return; - - const tabIdValues = Object.values(TAB_IDS); - switch (true) { - case selectedTabId === null: - case selectedTabId === TAB_IDS.burn && !burnable: - case selectedTabId && !tabIdValues.includes(selectedTabId): - updateQueryParametersRef.current({ - [QUERY_PARAMETERS.TAB]: TAB_IDS.issue - }); - } - }, [selectedTabId, burnable]); - - React.useEffect(() => { - if (!bridgeLoaded) return; - if (!collateralCurrencies) return; - - (async () => { - try { - const burnableTokens = await Promise.all( - collateralCurrencies.map(async (collateral) => { - const maxBurnable = await window.bridge.redeem.getMaxBurnableTokens(collateral); - - return maxBurnable.gt(BitcoinAmount.zero()); - }) - ); - - setBurnable(burnableTokens.includes(true)); - } catch (error) { - // TODO: should add error handling - console.log('[Bridge] error => ', error); - } - })(); - }, [bridgeLoaded, collateralCurrencies]); - - if (selectedTabId === null) { - return null; - } - - const TAB_ITEMS = burnable ? TAB_ITEMS_WITH_BURN : TAB_ITEMS_WITHOUT_BURN; - - const selectedTabIndex = TAB_ITEMS.findIndex((tabItem) => tabItem.id === selectedTabId); - - const handleTabSelect = (index: number) => { - updateQueryParameters({ - [QUERY_PARAMETERS.TAB]: TAB_ITEMS[index].id - }); - }; - - return ( - - - { - handleTabSelect(index); - }} - > - - {TAB_ITEMS.map((tabItem) => ( - - {t(tabItem.label)} - - ))} - - - - - - - - - - {burnable && ( - - - - )} - - - - - ); -}; +import Bridge from './Bridge'; export default Bridge; diff --git a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx index df6db65a1f..7718452741 100644 --- a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx +++ b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx @@ -1,23 +1,16 @@ import { CurrencyExt } from '@interlay/interbtc-api'; import { Bitcoin, ExchangeRate } from '@interlay/monetary-js'; import clsx from 'clsx'; -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; +import { withErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; -import { useSelector } from 'react-redux'; -import { StoreType } from '@/common/types/util.types'; import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL } from '@/config/relay-chains'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import Ring64, { Ring64Subtitle, Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; -import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { - BtcToCurrencyOracleStatus, - latestExchangeRateFetcher, - ORACLE_LATEST_EXCHANGE_RATE_FETCHER -} from '@/services/fetchers/oracle-exchange-rates-fetcher'; import { PAGES } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; +import { OracleStatus, useGetOracleStatus } from '@/utils/hooks/api/oracle/use-get-oracle-status'; +import { useGetExchangeRate } from '@/utils/hooks/api/use-get-exchange-rate'; import Stats, { StatsDd, StatsDt, StatsRouterLink } from '../../Stats'; import DashboardCard from '../DashboardCard'; @@ -28,53 +21,23 @@ interface Props { const OracleStatusCard = ({ hasLinks }: Props): JSX.Element => { const { t } = useTranslation(); - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); - const { - isIdle: oracleTimeoutIdle, - isLoading: oracleTimeoutLoading, - data: oracleTimeout, - error: oracleTimeoutError - } = useQuery([GENERIC_FETCHER, 'oracle', 'getOnlineTimeout'], genericFetcher(), { - enabled: !!bridgeLoaded - }); - useErrorHandler(oracleTimeoutError); - - const { - isIdle: oracleStatusIdle, - isLoading: oracleStatusLoading, - data: oracleStatus, - error: oracleStatusError - } = useQuery( - [ORACLE_LATEST_EXCHANGE_RATE_FETCHER, RELAY_CHAIN_NATIVE_TOKEN, oracleTimeout], - latestExchangeRateFetcher, - { - enabled: !!oracleTimeout - } + const { data: oracleStatus, isLoading: isLoadingOracleStatus } = useGetOracleStatus(); + const { data: relayChainExchangeRate, isLoading: isLoadingExchangeRate } = useGetExchangeRate( + RELAY_CHAIN_NATIVE_TOKEN ); - useErrorHandler(oracleStatusError); const renderContent = () => { // TODO: should use skeleton loaders - if (oracleStatusIdle || oracleStatusLoading || oracleTimeoutIdle || oracleTimeoutLoading) { + if (isLoadingOracleStatus || isLoadingExchangeRate) { return <>Loading...; } - if (oracleTimeout === undefined) { - throw new Error('Something went wrong!'); - } - - const exchangeRate = oracleStatus - ? new ExchangeRate( - Bitcoin, - RELAY_CHAIN_NATIVE_TOKEN, - oracleStatus.exchangeRate.toBig(), - 0, - 0 - ) + const exchangeRate = relayChainExchangeRate + ? new ExchangeRate(Bitcoin, RELAY_CHAIN_NATIVE_TOKEN, relayChainExchangeRate.toBig(), 0, 0) : 0; - const oracleOnline = oracleStatus && oracleStatus.online; + const oracleOnline = oracleStatus && oracleStatus === OracleStatus.ONLINE; let statusText; let statusCircleText; diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx index 9c46a763c8..934b8db2d7 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx @@ -1,15 +1,22 @@ import { CollateralPosition, LoanAsset } from '@interlay/interbtc-api'; +import { useEffect, useRef } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; -import { Flex, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps, Status } from '@/component-library'; -import { AuthCTA } from '@/components'; +import { CTA, Flex, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps, Status } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { + LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, + toggleCollateralLoanSchema, + ToggleCollateralLoansFormData, + useForm +} from '@/lib/form'; import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { useGetLTV } from '../../hooks/use-get-ltv'; import { BorrowLimit } from '../BorrowLimit'; -import { LoanActionInfo } from '../LoanActionInfo'; import { StyledDescription } from './CollateralModal.style'; type CollateralModalVariant = 'enable' | 'disable' | 'disable-error'; @@ -45,8 +52,8 @@ const getModalVariant = (isCollateralActive: boolean, ltvStatus?: Status): Colla }; type Props = { - asset?: LoanAsset; - position?: CollateralPosition; + asset: LoanAsset; + position: CollateralPosition; }; type InheritAttrs = Omit; @@ -59,28 +66,20 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal const { getLTV } = useGetLTV(); const prices = useGetPrices(); + const overlappingModalRef = useRef(null); + const transaction = useTransaction({ onSigning: onClose, onSuccess: refetch }); - if (!asset || !position) { - return null; - } - const { isCollateral: isCollateralActive, amount: lendPositionAmount } = position; const loanAction = isCollateralActive ? 'withdraw' : 'lend'; const currentLTV = getLTV({ type: loanAction, amount: lendPositionAmount }); const variant = getModalVariant(isCollateralActive, currentLTV?.status); - const content = getContentMap(t, variant, asset); - - const handleClickBtn = () => { - if (variant === 'disable-error') { - return onClose?.(); - } - + const handleSubmit = () => { if (variant === 'enable') { return transaction.execute(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); } else { @@ -88,20 +87,70 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal } }; + const form = useForm({ + initialValues: { + [LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]: '' + }, + validationSchema: toggleCollateralLoanSchema(), + onSubmit: handleSubmit, + onComplete: async (values) => { + const feeTicker = values[LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]; + + if (variant === 'enable') { + return transaction.fee.setCurrency(feeTicker).estimate(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); + } else { + return transaction.fee.setCurrency(feeTicker).estimate(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); + } + } + }); + + // Doing this call on mount so that the form becomes dirty + // TODO: find better approach + useEffect(() => { + if (variant === 'disable-error') return; + + form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const content = getContentMap(t, variant, asset); + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + return ( - + !overlappingModalRef.current?.contains(el)} + {...props} + > {content.title} {content.description} - {variant !== 'disable-error' && } - - {content.buttonLabel} - + {variant === 'disable-error' ? ( + + {content.buttonLabel} + + ) : ( +
+ + + + {content.buttonLabel} + + +
+ )} ); diff --git a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.style.tsx b/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.style.tsx deleted file mode 100644 index f4a56eb18a..0000000000 --- a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.style.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -import { Dl, theme } from '@/component-library'; - -const StyledDl = styled(Dl)` - background-color: ${theme.card.bg.secondary}; - padding: ${theme.spacing.spacing4}; - font-size: ${theme.text.xs}; - border-radius: ${theme.rounded.rg}; -`; - -export { StyledDl }; diff --git a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.tsx b/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.tsx deleted file mode 100644 index 9fde09bd7e..0000000000 --- a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanActionInfo.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { LoanAsset } from '@interlay/interbtc-api'; - -import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { Dd, DlGroup, Dt } from '@/component-library'; -import { TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; -import { LoanAction } from '@/types/loans'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { StyledDl } from './LoanActionInfo.style'; -import { LoanGroup } from './LoanGroup'; - -type LoanActionInfoProps = { - variant?: LoanAction; - asset?: LoanAsset; - prices?: Prices; -}; - -const LoanActionInfo = ({ variant, asset, prices }: LoanActionInfoProps): JSX.Element => ( - - {(variant === 'borrow' || variant === 'lend') && } - -
Fees
-
- {displayMonetaryAmount(TRANSACTION_FEE_AMOUNT)} {TRANSACTION_FEE_AMOUNT.currency.ticker} ( - {displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, TRANSACTION_FEE_AMOUNT.currency.ticker)?.usd - )} - ) -
- - -); -export { LoanActionInfo }; -export type { LoanActionInfoProps }; diff --git a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanGroup.tsx b/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanGroup.tsx deleted file mode 100644 index dbd6c7db93..0000000000 --- a/src/pages/Loans/LoansOverview/components/LoanActionInfo/LoanGroup.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { LoanAsset } from '@interlay/interbtc-api'; - -import { Dd, DlGroup, Dt } from '@/component-library'; -import { LoanAction } from '@/types/loans'; -import { getApyLabel } from '@/utils/helpers/loans'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { RewardsGroup } from './RewardsGroup'; - -type LoanGroupProps = { - variant?: Extract; - asset?: LoanAsset; - prices?: Prices; -}; - -const LoanGroup = ({ variant, asset, prices }: LoanGroupProps): JSX.Element | null => { - const isBorrow = variant === 'borrow'; - const apy = isBorrow ? asset?.borrowApy : asset?.lendApy; - - if (!apy || !asset) { - return null; - } - - const rewards = isBorrow ? asset?.borrowReward : asset?.lendReward; - - return ( - <> - -
- {isBorrow ? 'Borrow' : 'Lend'} APY {asset.currency.ticker} -
-
{getApyLabel(apy)}
- - {!!rewards && ( - - )} - - ); -}; - -export { LoanGroup }; -export type { LoanGroupProps }; diff --git a/src/pages/Loans/LoansOverview/components/LoanActionInfo/index.tsx b/src/pages/Loans/LoansOverview/components/LoanActionInfo/index.tsx deleted file mode 100644 index 8aef992fc2..0000000000 --- a/src/pages/Loans/LoansOverview/components/LoanActionInfo/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { LoanActionInfoProps } from './LoanActionInfo'; -export { LoanActionInfo } from './LoanActionInfo'; diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.styles.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.style.tsx similarity index 100% rename from src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.styles.tsx rename to src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.style.tsx diff --git a/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx new file mode 100644 index 0000000000..dc7ae9a09f --- /dev/null +++ b/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx @@ -0,0 +1,47 @@ +import { LoanAsset } from '@interlay/interbtc-api'; + +import { TransactionDetails, TransactionDetailsDd, TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; +import { LoanAction } from '@/types/loans'; +import { Prices } from '@/utils/hooks/api/use-get-prices'; + +import { getApyLabel } from '../../utils/apy'; +import { RewardsDetails } from './RewardsDetails'; + +type LoanDetailsProps = { + variant?: LoanAction; + asset?: LoanAsset; + prices?: Prices; +}; + +const LoanDetails = ({ variant, asset, prices }: LoanDetailsProps): JSX.Element | null => { + const isBorrow = variant === 'borrow'; + const apy = isBorrow ? asset?.borrowApy : asset?.lendApy; + + if (!apy || !asset) { + return null; + } + + const rewards = isBorrow ? asset?.borrowReward : asset?.lendReward; + + return ( + + + + {isBorrow ? 'Borrow' : 'Lend'} APY {asset.currency.ticker} + + {getApyLabel(apy)} + + {!!rewards && ( + + )} + + ); +}; +export { LoanDetails }; +export type { LoanDetailsProps }; diff --git a/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx new file mode 100644 index 0000000000..fcd5cc2462 --- /dev/null +++ b/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx @@ -0,0 +1,40 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; + +import { TransactionDetailsDd, TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; +import { getApyLabel, getSubsidyRewardApy } from '@/utils/helpers/loans'; +import { Prices } from '@/utils/hooks/api/use-get-prices'; + +type RewardsDetailsProps = { + apy: Big; + rewards: MonetaryAmount; + assetCurrency: CurrencyExt; + isBorrow: boolean; + prices?: Prices; +}; + +const RewardsDetails = ({ isBorrow, apy, assetCurrency, rewards, prices }: RewardsDetailsProps): JSX.Element | null => { + const subsidyRewardApy = getSubsidyRewardApy(assetCurrency, rewards, prices); + + if (!subsidyRewardApy) { + return null; + } + + const totalApy = isBorrow ? apy.sub(subsidyRewardApy) : apy.add(subsidyRewardApy); + + return ( + <> + + Rewards APR {rewards.currency.ticker} + {getApyLabel(subsidyRewardApy)} + + + Total APY + {getApyLabel(totalApy)} + + + ); +}; +export { RewardsDetails }; +export type { RewardsDetailsProps }; diff --git a/src/pages/Loans/LoansOverview/components/LoanDetails/index.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/index.tsx new file mode 100644 index 0000000000..0e313aad82 --- /dev/null +++ b/src/pages/Loans/LoansOverview/components/LoanDetails/index.tsx @@ -0,0 +1,2 @@ +export type { LoanDetailsProps } from './LoanDetails'; +export { LoanDetails } from './LoanDetails'; diff --git a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx index 390be8cba5..3b7c53160e 100644 --- a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx @@ -1,23 +1,31 @@ import { BorrowPosition, CollateralPosition, CurrencyExt, LoanAsset, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { mergeProps } from '@react-aria/utils'; -import { ChangeEventHandler, useState } from 'react'; +import { ChangeEventHandler, RefObject, useCallback, useState } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; import { useDebounce } from 'react-use'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Flex, TokenInput } from '@/component-library'; -import { AuthCTA } from '@/components'; -import { isFormDisabled, LoanFormData, loanSchema, LoanValidationParams, useForm } from '@/lib/form'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { + LOAN_AMOUNT_FIELD, + LOAN_FEE_TOKEN_FIELD, + LoanFormData, + loanSchema, + LoanValidationParams, + useForm +} from '@/lib/form'; import { LoanAction } from '@/types/loans'; import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { useLoanFormData } from '../../hooks/use-loan-form-data'; import { isLendAsset } from '../../utils/is-loan-asset'; import { BorrowLimit } from '../BorrowLimit'; -import { LoanActionInfo } from '../LoanActionInfo'; +import { LoanDetails } from '../LoanDetails'; import { StyledFormWrapper } from './LoanForm.style'; // The borrow limit component is only displayed when @@ -72,10 +80,11 @@ type LoanFormProps = { asset: LoanAsset; variant: LoanAction; position?: BorrowPosition | CollateralPosition; + overlappingModalRef: RefObject; onChangeLoan?: () => void; }; -const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JSX.Element => { +const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan }: LoanFormProps): JSX.Element => { const [inputAmount, setInputAmount] = useState(); const [isMaxAmount, setMaxAmount] = useState(false); @@ -85,7 +94,7 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS data: { hasCollateral } } = useGetAccountPositions(); const prices = useGetPrices(); - const { governanceBalance, assetAmount, assetPrice, transactionFee } = useLoanFormData(variant, asset, position); + const { assetAmount, assetPrice } = useLoanFormData(variant, asset, position); const { content } = getData(t, variant); @@ -117,9 +126,22 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS const transaction = useTransaction({ onSigning: onChangeLoan, onSuccess: refetch }); + const getTransactionArgs = useCallback( + (values: LoanFormData) => { + const amount = values[LOAN_AMOUNT_FIELD] || 0; + const monetaryAmount = newMonetaryAmount(amount, asset.currency, true); + + return { monetaryAmount }; + }, + [asset.currency] + ); + const handleSubmit = (data: LoanFormData) => { - const amount = data[variant] || 0; - const monetaryAmount = newMonetaryAmount(amount, asset.currency, true); + const transactionData = getTransactionArgs(data); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; switch (variant) { case 'lend': @@ -134,7 +156,7 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS return transaction.execute(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); case 'repay': if (isMaxAmount) { - return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency); + return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, assetAmount.available); } else { return transaction.execute(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); } @@ -142,21 +164,65 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS }; const schemaParams: LoanValidationParams = { - governanceBalance, - transactionFee, minAmount: assetAmount.min, maxAmount: assetAmount.available }; const form = useForm({ - initialValues: { [variant]: '' }, + initialValues: { [LOAN_AMOUNT_FIELD]: '', [LOAN_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker }, validationSchema: loanSchema(variant, schemaParams), - onSubmit: handleSubmit + onSubmit: handleSubmit, + onComplete: (values) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + const feeTicker = values[LOAN_FEE_TOKEN_FIELD]; + + switch (variant) { + case 'lend': + return transaction.fee + .setCurrency(feeTicker) + .estimate(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); + case 'withdraw': { + if (isMaxAmount) { + return transaction.fee + .setCurrency(feeTicker) + .estimate(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); + } else { + return transaction.fee + .setCurrency(feeTicker) + .estimate(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); + } + } + case 'borrow': + return transaction.fee + .setCurrency(feeTicker) + .estimate(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); + + case 'repay': { + if (isMaxAmount) { + return ( + transaction.fee + .setCurrency(feeTicker) + // passing the limit calculated, so it can be used in the validation in transaction hook + .estimate(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, assetAmount.available) + ); + } else { + return transaction.fee + .setCurrency(feeTicker) + .estimate(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); + } + } + } + } }); - const monetaryAmount = newSafeMonetaryAmount(form.values[variant] || 0, asset.currency, true); + const monetaryAmount = newSafeMonetaryAmount(form.values[LOAN_AMOUNT_FIELD] || 0, asset.currency, true); - const isBtnDisabled = isFormDisabled(form); + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); const handleClickBalance = () => { if (!hasMultiActionVariant) return; @@ -175,7 +241,7 @@ const LoanForm = ({ asset, variant, position, onChangeLoan }: LoanFormProps): JS return (
- + {showBorrowLimit && ( - + {(variant === 'lend' || variant === 'borrow') && ( + + )} + {content.title} diff --git a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx index 43d6ed4254..4066483f1a 100644 --- a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx @@ -1,4 +1,5 @@ import { BorrowPosition, CollateralPosition, LoanAsset } from '@interlay/interbtc-api'; +import { useRef } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; import { Modal, ModalBody, ModalProps, TabsItem } from '@/component-library'; @@ -42,6 +43,7 @@ type LoanModalProps = Props & InheritAttrs; const LoanModal = ({ variant = 'lend', asset, position, onClose, ...props }: LoanModalProps): JSX.Element | null => { const { t } = useTranslation(); + const overlappingModalRef = useRef(null); if (!asset) { return null; @@ -50,13 +52,25 @@ const LoanModal = ({ variant = 'lend', asset, position, onClose, ...props }: Loa const { tabs } = getData(t, variant); return ( - + !overlappingModalRef.current?.contains(el)} + {...props} + > {tabs.map((tab) => ( - + ))} diff --git a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx index 2ef53674f4..b5a9d0cf35 100644 --- a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx @@ -1,9 +1,26 @@ +import { useEffect, useRef, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils'; -import { Card, Dl, DlGroup } from '@/component-library'; -import { AuthCTA } from '@/components'; +import { Card, Dl, DlGroup, Flex, Modal, ModalBody, ModalFooter, ModalHeader } from '@/component-library'; +import { + AuthCTA, + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionFeeDetails +} from '@/components'; +import { + claimRewardsLoanSchema, + ClaimRewardsLoansFormData, + LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, + useForm +} from '@/lib/form'; import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { StyledDd, StyledDt } from './LoansInsights.style'; @@ -12,13 +29,37 @@ type LoansInsightsProps = { }; const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { + const { t } = useTranslation(); + const { data: subsidyRewards, refetch } = useGetAccountSubsidyRewards(); + const [isOpen, setOpen] = useState(false); + const overlappingModalRef = useRef(null); + const transaction = useTransaction(Transaction.LOANS_CLAIM_REWARDS, { - onSuccess: refetch + onSuccess: refetch, + onSigning: () => setOpen(false) + }); + + const form = useForm({ + initialValues: { + [LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD]: '' + }, + validationSchema: claimRewardsLoanSchema(), + onSubmit: () => transaction.execute(), + onComplete: async (values) => { + const feeTicker = values[LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD]; + + return transaction.fee.setCurrency(feeTicker).estimate(); + } }); - const handleClickClaimRewards = () => transaction.execute(); + // Doing this call on mount so that the form becomes dirty + // TODO: improve approach + useEffect(() => { + form.setFieldValue(LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); const { supplyAmountUSD, netAPY } = statistics || {}; @@ -34,6 +75,8 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { const subsidyRewardsAmountLabel = `${subsidyRewardsAmount} ${subsidyRewards?.total.currency.ticker || ''}`; const hasSubsidyRewards = !!subsidyRewards && !subsidyRewards?.total.isZero(); + const isModalBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + return ( <>
@@ -62,12 +105,45 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { {subsidyRewardsAmountLabel} {hasSubsidyRewards && ( - + setOpen(true)} loading={transaction.isLoading}> Claim )}
+ {hasSubsidyRewards && ( + setOpen(false)} + shouldCloseOnInteractOutside={(el) => !overlappingModalRef.current?.contains(el)} + > + Claim Rewards + + + + Amount + {subsidyRewardsAmountLabel} + + + + + + + + + {t('claim_rewards')} + + + + + + )} ); }; diff --git a/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx b/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx index 09dbdb5d7f..bafb8df232 100644 --- a/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx @@ -60,12 +60,14 @@ const LendTables = ({ assets, positions, disabledAssets, hasPositions }: LendTab position={selectedAsset.position} onClose={handleClose} /> - + {selectedAsset.data && selectedAsset.position && ( + + )} ); }; diff --git a/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx b/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx index 8db2cf8e30..5a0a850277 100644 --- a/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx +++ b/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx @@ -8,7 +8,6 @@ import { } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { BorrowAction, LendAction, LoanAction } from '@/types/loans'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; @@ -48,8 +47,6 @@ const getMaxCalculatedAmount = ({ }; type UseLoanFormData = { - governanceBalance: MonetaryAmount; - transactionFee: MonetaryAmount; assetPrice: number; assetAmount: { available: MonetaryAmount; @@ -58,20 +55,17 @@ type UseLoanFormData = { }; }; -// TODO: reduce GOVERNANCE for fees from max amount const useLoanFormData = ( loanAction: BorrowAction | LendAction, asset: LoanAsset, position?: CollateralPosition | BorrowPosition ): UseLoanFormData => { - const { getBalance, getAvailableBalance } = useGetBalances(); + const { getAvailableBalance } = useGetBalances(); const prices = useGetPrices(); const { data: statistics } = useGetAccountLendingStatistics(); const zeroAssetAmount = newMonetaryAmount(0, asset.currency); - const governanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); - const transactionFee = TRANSACTION_FEE_AMOUNT; const assetBalance = getAvailableBalance(asset.currency.ticker) || zeroAssetAmount; const assetPrice = getTokenPrice(prices, asset.currency.ticker)?.usd || 0; @@ -94,8 +88,6 @@ const useLoanFormData = ( : maxAmountData; return { - governanceBalance, - transactionFee, assetPrice, assetAmount: { available, diff --git a/src/pages/Onboarding/Onboarding.style.tsx b/src/pages/Onboarding/Onboarding.style.tsx new file mode 100644 index 0000000000..33efc3bb0a --- /dev/null +++ b/src/pages/Onboarding/Onboarding.style.tsx @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import { Flex } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + max-width: 540px; + width: 100%; + margin: 0 auto; +`; + +export { StyledWrapper }; diff --git a/src/pages/Onboarding/Onboarding.tsx b/src/pages/Onboarding/Onboarding.tsx new file mode 100644 index 0000000000..92e12337ec --- /dev/null +++ b/src/pages/Onboarding/Onboarding.tsx @@ -0,0 +1,190 @@ +import { Keyring } from '@polkadot/api'; +import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { showAccountModalAction, showSignTermsModalAction } from '@/common/actions/general.actions'; +import { StoreType } from '@/common/types/util.types'; +import { Card, CTA, CTALink, Flex, H1, H2, P, Strong } from '@/component-library'; +import { AuthModal, SignTermsModal } from '@/components'; +import { INTERLAY_DISCORD_LINK } from '@/config/links'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { SS58_FORMAT } from '@/constants'; +import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; +import MainContainer from '@/parts/MainContainer'; +import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { useSignMessage } from '@/utils/hooks/use-sign-message'; + +import { Tutorial } from './components'; +import { StyledWrapper } from './Onboarding.style'; + +type Steps = { + title: string; + content: ReactNode; + ctaType: typeof CTA | typeof CTALink | typeof Tutorial; + ctaText: string; + isCompleted: boolean; + isActive: boolean; + onPress?: () => void; + to?: string; +}; + +const Onboarding = (): JSX.Element => { + const { showAccountModal, isSignTermsModalOpen } = useSelector((state: StoreType) => state.general); + const dispatch = useDispatch(); + const { t } = useTranslation(); + const { getAvailableBalance } = useGetBalances(); + const { setSelectedAccount, removeSelectedAccount } = useSubstrate(); + const { selectProps } = useSignMessage(); + const { extensions, selectedAccount } = useSubstrateSecureState(); + const { hasSignature } = useSignMessage(); + + const governanceTokenBalance = getAvailableBalance(GOVERNANCE_TOKEN.ticker); + + const handleAccountModalOpen = () => dispatch(showAccountModalAction(true)); + + const handleAccountModalClose = () => dispatch(showAccountModalAction(false)); + + const handleAccountSelect = (account: InjectedAccountWithMeta) => { + const keyring = new Keyring({ type: 'sr25519', ss58Format: SS58_FORMAT }); + const keyringAccount = keyring.addFromAddress(account.address, account.meta); + setSelectedAccount(keyringAccount); + selectProps.onSelectionChange(keyringAccount as KeyringPair); + handleAccountModalClose(); + }; + + const handleDisconnect = () => { + removeSelectedAccount(); + handleAccountModalClose(); + }; + + const handleCloseSignTermsModal = () => dispatch(showSignTermsModalAction(false)); + + const steps: Steps[] = [ + { + title: 'Install a Wallet', + content: + 'Click this button to get a selection of wallets. We recommend installing Talisman or SubWallet for ease of use.', + ctaType: CTA, + ctaText: t('install_wallet'), + onPress: handleAccountModalOpen, + isCompleted: extensions.length > 0, + isActive: extensions.length === 0 + }, + { + title: 'Connect the Wallet', + content: 'After installing a wallet, click this button to connect your wallet.', + ctaType: CTA, + ctaText: t('connect_wallet'), + onPress: handleAccountModalOpen, + isCompleted: selectedAccount !== undefined, + isActive: extensions.length > 0 + }, + { + title: 'Sign the T&Cs', + content: 'Click this button to sign the T&Cs.', + ctaType: CTA, + ctaText: t('sign_t&cs'), + onPress: () => dispatch(showSignTermsModalAction(true)), + isCompleted: hasSignature ? true : false, + isActive: selectedAccount !== undefined + }, + { + title: 'Request Funds', + content: ( + <> + If you do not have any INTR, join our Discord and request funds in the #faucet channel. + + ), + ctaType: CTALink, + ctaText: `${t('faq.join_discord')} and ${t('fund_wallet')}`, + to: INTERLAY_DISCORD_LINK, + isCompleted: (() => { + if (governanceTokenBalance) { + return governanceTokenBalance.isZero() ? false : true; + } + return false; + })(), + isActive: hasSignature ? true : false + }, + { + title: 'Explore the App', + content: 'Click this button for a guided tour through the app.', + ctaType: Tutorial, + ctaText: 'Start Tutorial', + isCompleted: false, + isActive: selectedAccount !== undefined + } + ]; + + const getCta = (step: Steps) => { + const getCtaLabel = (step: Steps) => { + const completed = ' ✅'; + const pending = ' ⏳'; + + if (step.isCompleted) { + return step.ctaText.concat(completed); + } else { + return step.ctaText.concat(pending); + } + }; + + switch (step.ctaType) { + case CTA: + return ( + + {getCtaLabel(step)} + + ); + case CTALink: + return ( + + {getCtaLabel(step)} + + ); + case Tutorial: + return ; + default: + return null; + } + }; + + return ( + + +

+ Onboarding Tutorial +

+ {steps.map((step, index) => ( + + +

+ {step.title} +

+

+ {step.content} +

+ + {getCta(step)} + + ))} + + + + + ); +}; + +export default Onboarding; diff --git a/src/pages/Onboarding/components/Tutorial/Tutorial.tsx b/src/pages/Onboarding/components/Tutorial/Tutorial.tsx new file mode 100644 index 0000000000..68e0a1267f --- /dev/null +++ b/src/pages/Onboarding/components/Tutorial/Tutorial.tsx @@ -0,0 +1,124 @@ +import { useState } from 'react'; +import Joyride, { CallBackProps, STATUS, Step } from 'react-joyride'; + +import { CTA, theme } from '@/component-library'; + +type Props = { + disabled?: boolean; + label?: string; +}; + +type TutorialProps = Props; + +const steps: Step[] = [ + { + target: 'body', + placement: 'center', + title: 'Welcome to the Interlay app!', + content: 'Step through this tutorial to understand the different parts of the app.' + }, + { + target: '[href="/wallet"]', + title: 'Wallet', + content: 'You can find an overview of your assets and positions in the DeFi hub on the wallet page.' + }, + { + target: '[href="/bridge"]', + title: 'IBTC', + content: 'On the IBTC page you can bridge BTC from and to Interlay.' + }, + { + target: '[href="/transfer"]', + title: 'Transfer and Bridge', + content: 'You can transfer assets on Interlay and you can also...' + }, + { + target: '[href="/transfer"]', + title: 'Transfer and Bridge', + content: + '...bridge assets from other chains like Polkadot, Polkadot Asset Hub, Astar, HydraDX, and many more from and to Interlay.' + }, + { + target: '[href="/lending"]', + title: 'Lending', + content: 'Onwards to DeFi! On the lending page you can lend IBTC, DOT, USDT and others to earn interest.' + }, + { + target: '[href="/lending"]', + title: 'Lending', + content: 'You can also borrow assets like IBTC, DOT, USDT and others.' + }, + { + target: '[href="/swap"]', + title: 'Swap', + content: 'On the swap page you can swap assets like IBTC, DOT, USDT and others.' + }, + { + target: '[href="/pools"]', + title: 'Pools', + content: 'On the pools page you can provide liquidity to earn rewards.' + }, + { + target: '[href="/staking"]', + title: 'Staking', + content: 'Here you can stake INTR to enable you to participate in Interlay governance.' + }, + { + target: '[data-key="info"]', + title: 'Onboarding', + content: 'All done! You can always redo this tutorial under "More" and "Onboarding".' + }, + { + target: '[href="/wallet"]', + title: 'Wallet', + content: + 'As a first step, click on the wallet page and check the guide to get assets onto Interlay to join the DeFi hub.', + disableOverlayClose: true, + hideCloseButton: true, + hideFooter: true, + spotlightClicks: true + } +]; + +const Tutorial = ({ disabled = false, label = 'Start Tutorial' }: TutorialProps): JSX.Element => { + const [run, setRun] = useState(false); + + const handleStartTutorial = () => { + console.log('Starting tutorial...'); + setRun(true); + }; + + const handleJoyrideCallback = (data: CallBackProps) => { + const { action, status } = data; + const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED]; + + if (finishedStatuses.includes(status as string) || action === 'close') { + setRun(false); + } + }; + + return ( +
+ + {label} + + +
+ ); +}; + +export { Tutorial }; +export type { TutorialProps }; diff --git a/src/pages/Onboarding/components/Tutorial/index.tsx b/src/pages/Onboarding/components/Tutorial/index.tsx new file mode 100644 index 0000000000..7ea64a6854 --- /dev/null +++ b/src/pages/Onboarding/components/Tutorial/index.tsx @@ -0,0 +1 @@ +export { Tutorial } from './Tutorial'; \ No newline at end of file diff --git a/src/pages/Onboarding/components/index.tsx b/src/pages/Onboarding/components/index.tsx new file mode 100644 index 0000000000..4961ff1b8b --- /dev/null +++ b/src/pages/Onboarding/components/index.tsx @@ -0,0 +1 @@ +export { Tutorial } from './Tutorial'; diff --git a/src/pages/Onboarding/index.tsx b/src/pages/Onboarding/index.tsx new file mode 100644 index 0000000000..ab8456b4b8 --- /dev/null +++ b/src/pages/Onboarding/index.tsx @@ -0,0 +1,3 @@ +import Onboarding from "./Onboarding"; + +export default Onboarding; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/index.tsx b/src/pages/Transfer/CrossChainTransferForm/components/index.tsx deleted file mode 100644 index 6cb7e0e8e5..0000000000 --- a/src/pages/Transfer/CrossChainTransferForm/components/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { ChainSelect, ChainSelectProps } from './ChainSelect'; - -export { ChainSelect }; -export type { ChainSelectProps }; diff --git a/src/pages/Transfer/CrossChainTransferForm/index.tsx b/src/pages/Transfer/CrossChainTransferForm/index.tsx deleted file mode 100644 index b2417c4fb7..0000000000 --- a/src/pages/Transfer/CrossChainTransferForm/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import CrossChainTransferForm from './CrossChainTransferForm'; - -export default CrossChainTransferForm; diff --git a/src/pages/Transfer/TokenAmountField/index.tsx b/src/pages/Transfer/TokenAmountField/index.tsx deleted file mode 100644 index b47ff6ae4f..0000000000 --- a/src/pages/Transfer/TokenAmountField/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import clsx from 'clsx'; -import * as React from 'react'; - -import NumberInput, { Props as NumberInputProps } from '@/legacy-components/NumberInput'; -import { TextFieldContainer, TextFieldHelperText, TextFieldLabel } from '@/legacy-components/TextField'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; - -interface CustomProps { - error?: boolean; - helperText?: JSX.Element | string; - required?: boolean; - approxUSD?: string; -} - -type Ref = HTMLInputElement; -const TokenAmountField = React.forwardRef( - ({ id, error, helperText, required, approxUSD, ...rest }, ref): JSX.Element => { - return ( -
- - - - - {approxUSD} - - - - {helperText} - -
- ); - } -); - -TokenAmountField.displayName = 'TokenAmountField'; - -export default TokenAmountField; diff --git a/src/pages/Transfer/Transfer.tsx b/src/pages/Transfer/Transfer.tsx new file mode 100644 index 0000000000..4db6b8d1ba --- /dev/null +++ b/src/pages/Transfer/Transfer.tsx @@ -0,0 +1,16 @@ +import { withErrorBoundary } from 'react-error-boundary'; + +import ErrorFallback from '@/legacy-components/ErrorFallback'; + +import TransferForms from './TransferForms'; + +const Transfer = (): JSX.Element => { + return ; +}; + +export default withErrorBoundary(Transfer, { + FallbackComponent: ErrorFallback, + onReset: () => { + window.location.reload(); + } +}); diff --git a/src/pages/Transfer/TransferForm/index.tsx b/src/pages/Transfer/TransferForm/index.tsx deleted file mode 100644 index 2bc9ed3f19..0000000000 --- a/src/pages/Transfer/TransferForm/index.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; -import clsx from 'clsx'; -import * as React from 'react'; -import { withErrorBoundary } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; - -import { ParachainStatus, StoreType } from '@/common/types/util.types'; -import { formatNumber } from '@/common/utils/utils'; -import { AuthCTA } from '@/components'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import FormTitle from '@/legacy-components/FormTitle'; -import TextField from '@/legacy-components/TextField'; -import Tokens, { TokenOption } from '@/legacy-components/Tokens'; -import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import isValidPolkadotAddress from '@/utils/helpers/is-valid-polkadot-address'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; - -import TokenAmountField from '../TokenAmountField'; - -const TRANSFER_AMOUNT = 'transfer-amount'; -const RECIPIENT_ADDRESS = 'recipient-address'; - -type TransferFormData = { - [TRANSFER_AMOUNT]: string; - [RECIPIENT_ADDRESS]: string; -}; - -const TransferForm = (): JSX.Element => { - const { t } = useTranslation(); - - const { parachainStatus } = useSelector((state: StoreType) => state.general); - - const { - register, - handleSubmit, - setValue, - formState: { errors }, - reset - } = useForm({ - mode: 'onChange' - }); - - const [activeToken, setActiveToken] = React.useState(undefined); - - const transaction = useTransaction(Transaction.TOKENS_TRANSFER, { - onSigning: () => { - reset({ - [TRANSFER_AMOUNT]: '', - [RECIPIENT_ADDRESS]: '' - }); - } - }); - - const onSubmit = async (data: TransferFormData) => { - if (!activeToken) return; - if (data[TRANSFER_AMOUNT] === undefined) return; - - transaction.execute(data[RECIPIENT_ADDRESS], newMonetaryAmount(data[TRANSFER_AMOUNT], activeToken.token, true)); - }; - - const validateTransferAmount = React.useCallback( - (value: string): string | undefined => { - if (!activeToken) return; - - const balance = newMonetaryAmount(activeToken.transferableBalance, activeToken.token, true); - const transferAmount = newMonetaryAmount(value, activeToken.token, true); - - return balance.lt(transferAmount) ? t('insufficient_funds') : undefined; - }, - [activeToken, t] - ); - - const validateAddress = React.useCallback( - (address: string): string | undefined => { - return isValidPolkadotAddress(address) ? undefined : t('validation.invalid_polkadot_address'); - }, - [t] - ); - - const handleTokenChange = (token: any) => { - setActiveToken(token); - }; - - const handleClickBalance = () => setValue(TRANSFER_AMOUNT, activeToken?.transferableBalance || ''); - - return ( - <> -
- {t('transfer_page.transfer_currency')} -
-

- Transferable balance: - - {activeToken?.transferableBalance - ? formatNumber(Number(activeToken.transferableBalance), { - minimumFractionDigits: 0, - maximumFractionDigits: 5 - }) - : 0} - -

-
- {/* TODO: use forwardRef to pull in select value as form data */} - - validateTransferAmount(value) - })} - error={!!errors[TRANSFER_AMOUNT]} - helperText={errors[TRANSFER_AMOUNT]?.message} - /> -
-
-
- validateAddress(value) - })} - error={!!errors[RECIPIENT_ADDRESS]} - helperText={errors[RECIPIENT_ADDRESS]?.message} - /> -
- - {t('transfer')} - -
- - ); -}; - -export default withErrorBoundary(TransferForm, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/Transfer/TransferForms/TransferForms.styles.tsx b/src/pages/Transfer/TransferForms/TransferForms.styles.tsx new file mode 100644 index 0000000000..34d264c703 --- /dev/null +++ b/src/pages/Transfer/TransferForms/TransferForms.styles.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +import { Card, Flex, theme } from '@/component-library'; + +const StyledWrapper = styled(Flex)` + max-width: 540px; + width: 100%; + margin: 0 auto; +`; + +const StyledCard = styled(Card)` + width: 100%; +`; + +const StyledFormWrapper = styled.div` + margin-top: ${theme.spacing.spacing8}; +`; + +export { StyledCard, StyledFormWrapper, StyledWrapper }; diff --git a/src/pages/Transfer/TransferForms/TransferForms.tsx b/src/pages/Transfer/TransferForms/TransferForms.tsx new file mode 100644 index 0000000000..92dea5234f --- /dev/null +++ b/src/pages/Transfer/TransferForms/TransferForms.tsx @@ -0,0 +1,35 @@ +import { Flex, Tabs, TabsItem } from '@/component-library'; +import MainContainer from '@/parts/MainContainer'; +import { useTabPageLocation } from '@/utils/hooks/use-tab-page-location'; + +import { CrossChainTransferForm, TransferForm } from './components'; +import { StyledCard, StyledFormWrapper, StyledWrapper } from './TransferForms.styles'; + +const TransferForms = (): JSX.Element => { + const { tabsProps } = useTabPageLocation(); + + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TransferForms; diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.style.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.style.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.style.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.style.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/ChainIcon.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Acala.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Acala.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Astar.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Astar.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Bifrost.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Bifrost.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Bifrost.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Heiko.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Heiko.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Heiko.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Hydra.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Hydra.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Hydra.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Interlay.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Interlay.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Interlay.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Interlay.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Karura.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Karura.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Karura.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Kintsugi.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kintsugi.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Kintsugi.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kintsugi.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Kusama.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kusama.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Kusama.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kusama.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Parallel.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Parallel.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Polkadot.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Polkadot.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Polkadot.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Polkadot.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Statemine.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemine.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Statemine.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemine.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Statemint.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemint.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Statemint.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemint.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts b/src/pages/Transfer/TransferForms/components/ChainIcon/icons/index.ts similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/index.ts rename to src/pages/Transfer/TransferForms/components/ChainIcon/icons/index.ts diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/index.tsx b/src/pages/Transfer/TransferForms/components/ChainIcon/index.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/index.tsx rename to src/pages/Transfer/TransferForms/components/ChainIcon/index.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx b/src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.style.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.style.tsx rename to src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.style.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx b/src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.tsx similarity index 93% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx rename to src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.tsx index 1506d894e6..7359fb0188 100644 --- a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/ChainSelect.tsx +++ b/src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.tsx @@ -6,7 +6,7 @@ import { ChainData } from '@/types/chains'; import { ChainIcon } from '../ChainIcon'; import { StyledChain, StyledListChainWrapper, StyledListItemLabel } from './ChainSelect.style'; -type ChainSelectProps = Omit, 'children' | 'type'>; +type ChainSelectProps = Omit, 'children' | 'type'>; const ListItem = ({ data }: { data: ChainData }) => { const isSelected = useSelectModalContext().selectedItem?.key === data.id; @@ -31,7 +31,7 @@ const Value = ({ data }: { data: ChainData }) => ( const ChainSelect = ({ ...props }: ChainSelectProps): JSX.Element => { return ( - + {...props} type='modal' renderValue={(item) => } diff --git a/src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx b/src/pages/Transfer/TransferForms/components/ChainSelect/index.tsx similarity index 100% rename from src/pages/Transfer/CrossChainTransferForm/components/ChainSelect/index.tsx rename to src/pages/Transfer/TransferForms/components/ChainSelect/index.tsx diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx similarity index 62% rename from src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx rename to src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx index 1c1ee33b0b..ecc57c9eb0 100644 --- a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.styles.tsx +++ b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx @@ -1,16 +1,9 @@ import styled from 'styled-components'; import { ArrowRightCircle } from '@/assets/icons'; -import { Dl, Flex, theme } from '@/component-library'; +import { Flex, theme } from '@/component-library'; -import { ChainSelect } from './components'; - -const StyledDl = styled(Dl)` - background-color: ${theme.card.bg.secondary}; - padding: ${theme.spacing.spacing4}; - font-size: ${theme.text.xs}; - border-radius: ${theme.rounded.rg}; -`; +import { ChainSelect } from '../ChainSelect'; const StyledArrowRightCircle = styled(ArrowRightCircle)` transform: rotate(90deg); @@ -39,4 +32,4 @@ const StyledSourceChainSelect = styled(ChainSelect)` } `; -export { ChainSelectSection, StyledArrowRightCircle, StyledDl, StyledSourceChainSelect }; +export { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect }; diff --git a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx similarity index 83% rename from src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx rename to src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx index fbd54a3cd8..0205b1c07a 100644 --- a/src/pages/Transfer/CrossChainTransferForm/CrossChainTransferForm.tsx +++ b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx @@ -6,8 +6,15 @@ import { ChangeEventHandler, Key, useCallback, useEffect, useState } from 'react import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { Dd, DlGroup, Dt, Flex, LoadingSpinner, TokenInput } from '@/component-library'; -import { AccountSelect, AuthCTA } from '@/components'; +import { Flex, LoadingSpinner, TokenInput } from '@/component-library'; +import { + AccountSelect, + AuthCTA, + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup +} from '@/components'; import { CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, CROSS_CHAIN_TRANSFER_FROM_FIELD, @@ -29,13 +36,8 @@ import { useXCMBridge, XCMTokenData } from '@/utils/hooks/api/xcm/use-xcm-bridge import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; -import { ChainSelect } from './components'; -import { - ChainSelectSection, - StyledArrowRightCircle, - StyledDl, - StyledSourceChainSelect -} from './CrossChainTransferForm.styles'; +import { ChainSelect } from '../ChainSelect'; +import { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect } from './CrossChainTransferForm.styles'; const CrossChainTransferForm = (): JSX.Element => { const [destinationChains, setDestinationChains] = useState([]); @@ -104,20 +106,16 @@ const CrossChainTransferForm = (): JSX.Element => { validationSchema: crossChainTransferSchema(schema, t) }); - const handleOriginatingChainChange = (chain: ChainName, name: string) => { - form.setFieldValue(name, chain); - + const handleOriginatingChainChange = (chain: ChainName) => { const destinationChains = getDestinationChains(chain); setDestinationChains(destinationChains); form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_FIELD, destinationChains[0].id); }; - const handleDestinationChainChange = async (chain: ChainName, name: string) => { + const handleDestinationChainChange = async (chain: ChainName) => { if (!accountId) return; - form.setFieldValue(name, chain); - setTokenData(chain); }; @@ -169,8 +167,7 @@ const CrossChainTransferForm = (): JSX.Element => { ) : 0; - const isCTADisabled = isFormDisabled(form) || form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] === ''; - const amountShouldValidate = form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] !== ''; + const isCTADisabled = isFormDisabled(form); useEffect(() => { if (!originatingChains?.length) return; @@ -219,19 +216,17 @@ const CrossChainTransferForm = (): JSX.Element => { - handleOriginatingChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_FROM_FIELD) - } - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false))} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_FROM_FIELD, false), { + onSelectionChange: (key: Key) => handleOriginatingChainChange(key as ChainName) + })} /> - handleDestinationChainChange(chain as ChainName, CROSS_CHAIN_TRANSFER_TO_FIELD) - } - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false))} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TO_FIELD, false), { + onSelectionChange: (key: Key) => handleDestinationChainChange(key as ChainName) + })} />
@@ -246,7 +241,7 @@ const CrossChainTransferForm = (): JSX.Element => { handleTickerChange(ticker as string, CROSS_CHAIN_TRANSFER_TOKEN_FIELD), items: transferableTokens })} - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, amountShouldValidate))} + {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, false, true))} />
{ onChange: handleDestinationAccountChange })} /> - - -
+ + + Origin chain transfer fee -
-
{currentToken?.originFee}
- - -
- Destination chain transfer fee estimate -
-
{`${currentToken?.destFee.toString()} ${currentToken?.value}`}
- - + + {currentToken?.originFee} + + + Destination chain transfer fee estimate + {`${currentToken?.destFee.toString()} ${ + currentToken?.value + }`} + + {isCTADisabled ? 'Enter transfer amount' : t('transfer')} @@ -278,4 +273,4 @@ const CrossChainTransferForm = (): JSX.Element => { ); }; -export default CrossChainTransferForm; +export { CrossChainTransferForm }; diff --git a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx new file mode 100644 index 0000000000..40d3630569 --- /dev/null +++ b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx @@ -0,0 +1 @@ +export { CrossChainTransferForm } from './CrossChainTransferForm'; diff --git a/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx b/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx new file mode 100644 index 0000000000..a45b540242 --- /dev/null +++ b/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx @@ -0,0 +1,162 @@ +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; +import { Key, useCallback, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { StoreType } from '@/common/types/util.types'; +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Flex, Input, TokenInput } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { useForm } from '@/lib/form'; +import { + TRANSFER_AMOUNT_FIELD, + TRANSFER_FEE_TOKEN_FIELD, + TRANSFER_RECIPIENT_FIELD, + TRANSFER_TOKEN_FIELD, + TransferFormData, + transferSchema, + TransferValidationParams +} from '@/lib/form/schemas'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; +import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; +import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; + +const TransferForm = (): JSX.Element => { + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); + + const prices = useGetPrices(); + const { getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); + const { getBalance } = useGetBalances(); + const { items: selectItems } = useSelectCurrency(); + + const [transferToken, setTransferToken] = useState(GOVERNANCE_TOKEN); + + const transaction = useTransaction(Transaction.TOKENS_TRANSFER, { + onSuccess: () => { + form.resetForm(); + } + }); + + const transferTokenBalance = transferToken && getBalance(transferToken.ticker)?.transferable; + + const minAmount = transferToken && newMonetaryAmount(1, transferToken); + + const transferSchemaParams: TransferValidationParams = { + [TRANSFER_AMOUNT_FIELD]: { + maxAmount: transferTokenBalance, + minAmount + } + }; + + const getTransactionArgs = useCallback( + (values: TransferFormData) => { + const destination = values[TRANSFER_RECIPIENT_FIELD]; + const feeTicker = values[TRANSFER_FEE_TOKEN_FIELD]; + + if (!destination) return; + + const amount = newMonetaryAmount(values[TRANSFER_AMOUNT_FIELD] || 0, transferToken, true); + + return { destination, amount, feeTicker }; + }, + [transferToken] + ); + + const handleSubmit = async (values: TransferFormData) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { amount, destination } = transactionData; + + transaction.execute(destination, amount); + }; + + const initialValues = useMemo( + () => ({ + [TRANSFER_RECIPIENT_FIELD]: '', + [TRANSFER_AMOUNT_FIELD]: '', + [TRANSFER_TOKEN_FIELD]: transferToken.ticker || '', + [TRANSFER_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }), + // eslint-disable-next-line react-hooks/exhaustive-deps + [] + ); + + const form = useForm({ + initialValues, + validationSchema: transferSchema(transferSchemaParams), + onSubmit: handleSubmit, + hideErrorMessages: transaction.isLoading, + onComplete: (values) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { amount, destination, feeTicker } = transactionData; + + transaction.fee.setCurrency(feeTicker).estimate(destination, amount); + } + }); + + const handleTickerChange = (ticker: string, name: string) => { + form.setFieldValue(name, ticker, true); + const currency = getCurrencyFromTicker(ticker); + setTransferToken(currency); + }; + + const transferMonetaryAmount = newSafeMonetaryAmount(form.values[TRANSFER_AMOUNT_FIELD] || 0, transferToken, true); + const transferAmountUSD = transferMonetaryAmount + ? convertMonetaryAmountToValueInUSD( + transferMonetaryAmount, + getTokenPrice(prices, transferMonetaryAmount.currency.ticker)?.usd + ) || 0 + : 0; + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + + return ( + +
+ + + handleTickerChange(ticker as string, TRANSFER_TOKEN_FIELD), + items: selectItems + })} + {...mergeProps(form.getFieldProps(TRANSFER_AMOUNT_FIELD, false, true))} + /> + + + + + + Transfer + + + +
+ + ); +}; + +export { TransferForm }; diff --git a/src/pages/Transfer/TransferForms/components/TransferForm/index.tsx b/src/pages/Transfer/TransferForms/components/TransferForm/index.tsx new file mode 100644 index 0000000000..3fd228e19d --- /dev/null +++ b/src/pages/Transfer/TransferForms/components/TransferForm/index.tsx @@ -0,0 +1 @@ +export { TransferForm } from './TransferForm'; diff --git a/src/pages/Transfer/TransferForms/components/index.tsx b/src/pages/Transfer/TransferForms/components/index.tsx new file mode 100644 index 0000000000..3f964e425c --- /dev/null +++ b/src/pages/Transfer/TransferForms/components/index.tsx @@ -0,0 +1,4 @@ +import { CrossChainTransferForm } from './CrossChainTransferForm'; +import { TransferForm } from './TransferForm'; + +export { CrossChainTransferForm, TransferForm }; diff --git a/src/pages/Transfer/TransferForms/index.tsx b/src/pages/Transfer/TransferForms/index.tsx new file mode 100644 index 0000000000..a78f8eed42 --- /dev/null +++ b/src/pages/Transfer/TransferForms/index.tsx @@ -0,0 +1,3 @@ +import TransferOverview from './TransferForms'; + +export default TransferOverview; diff --git a/src/pages/Transfer/index.tsx b/src/pages/Transfer/index.tsx index 2dbbc7ac0b..bfd5635d2a 100644 --- a/src/pages/Transfer/index.tsx +++ b/src/pages/Transfer/index.tsx @@ -1,34 +1,3 @@ -import clsx from 'clsx'; - -import { Flex, Tabs, TabsItem } from '@/component-library'; -import Panel from '@/legacy-components/Panel'; -import MainContainer from '@/parts/MainContainer'; - -import CrossChainTransferForm from './CrossChainTransferForm'; -import { StyledWrapper } from './Transfer.style'; -import TransferForm from './TransferForm'; - -const Transfer = (): JSX.Element | null => { - return ( - - - - - - - - - - - - - - - - - - - ); -}; +import Transfer from './Transfer'; export default Transfer; diff --git a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx index 4eec9acdd1..39a0e01099 100644 --- a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx @@ -38,7 +38,6 @@ import TokenField from '@/legacy-components/TokenField'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; import { useSubstrateSecureState } from '@/lib/substrate'; -import SubmittedIssueRequestModal from '@/pages/Bridge/IssueForm/SubmittedIssueRequestModal'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; @@ -49,6 +48,8 @@ import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; +import SubmittedIssueRequestModal from '../SubmittedIssueRequestModal'; + const WRAPPED_TOKEN_AMOUNT = 'amount'; const BTC_ADDRESS = 'btc-address'; diff --git a/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx b/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx similarity index 97% rename from src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx rename to src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx index e5afdc0146..8461d4f704 100644 --- a/src/pages/Bridge/IssueForm/SubmittedIssueRequestModal/index.tsx +++ b/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx @@ -36,7 +36,7 @@ const SubmittedIssueRequestModal = ({ { hasWithdrawRewardsBtn={!isReadOnlyVault} /> - {collateralToken && ( - - )} - {collateralToken && ( - - )} - {collateralToken && ( - - )} + + {collateralToken && ( + + )} + {collateralToken && ( + + )} + {collateralToken && ( + + )} + ); diff --git a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.styles.tsx b/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.styles.tsx deleted file mode 100644 index 00345cb445..0000000000 --- a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.styles.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import styled from 'styled-components'; - -import { Card, CTALink, H3, P, Stack, Strong, Table, Tabs, theme } from '@/component-library'; -import { hideScrollbar } from '@/component-library/css'; - -const StyledWrapper = styled(Card)` - display: flex; - justify-content: space-between; - align-items: center; -`; - -const StyledStack = styled(Stack)` - width: 100%; - text-align: right; -`; - -const StyledTabs = styled(Tabs)` - text-align: right; -`; - -const StyledTitle = styled(H3)` - font-size: ${theme.text.xl2}; - line-height: ${theme.lineHeight.lg}; - padding: ${theme.spacing.spacing3} 0; -`; - -const StyledStatus = styled.div` - display: flex; - padding: ${theme.spacing.spacing2} ${theme.spacing.spacing4}; - font-weight: ${theme.fontWeight.book}; - font-size: ${theme.text.xs}; - line-height: ${theme.lineHeight.base}; - color: #ffffff; -`; - -const StyledTable = styled(Table)` - text-align: left; - margin-top: ${theme.spacing.spacing4}; - - /* TODO: better solution for this. Require UX input on hover state. - Should be handled in the component, not the application. */ - tr:hover { - cursor: pointer; - } -`; - -const StyledRequestCell = styled.div` - display: flex; - flex-direction: column; -`; - -const StyledRequest = styled(Strong)` - font-size: ${theme.text.s}; - line-height: ${theme.lineHeight.s}; -`; - -const StyledDate = styled(P)` - font-size: ${theme.text.xs}; - line-height: ${theme.lineHeight.s}; - white-space: nowrap; -`; - -const StyledTableWrapper = styled.div` - overflow-x: auto; - ${hideScrollbar()} -`; - -const StyledCTALink = styled(CTALink)` - align-self: flex-end; -`; - -export { - StyledCTALink, - StyledDate, - StyledRequest, - StyledRequestCell, - StyledStack, - StyledStatus, - StyledTable, - StyledTableWrapper, - StyledTabs, - StyledTitle, - StyledWrapper -}; diff --git a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.tsx b/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.tsx deleted file mode 100644 index d06896ca1e..0000000000 --- a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionHistory.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useId } from '@react-aria/utils'; -import { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { CardProps, TabsItem } from '@/component-library'; -import { PAGES } from '@/utils/constants/links'; - -import { - StyledCTALink, - StyledStack, - StyledTableWrapper, - StyledTabs, - StyledTitle, - StyledWrapper -} from './TransactionHistory.styles'; -import { TransactionTable, TransactionTableData } from './TransactionTable'; - -type Props = { - transactions: Array; -}; - -type InheritAttrs = Omit; - -type TransactionHistoryProps = Props & InheritAttrs; - -const tabKeys = ['all', 'pending', 'issue', 'redeem', 'replace'] as const; - -const TransactionHistory = (props: TransactionHistoryProps): JSX.Element => { - const { t } = useTranslation(); - const titleId = useId(); - const [filteredTransactionData, setFilteredTransactiondata] = useState>( - props.transactions - ); - const [tab, setTab] = useState('all'); - - useEffect(() => { - if (tab === 'all') { - setFilteredTransactiondata(props.transactions); - } else if (tab === 'pending') { - setFilteredTransactiondata(props.transactions.filter((data) => data.status === 'pending')); - } else { - setFilteredTransactiondata(props.transactions.filter((data) => data.request.toLowerCase() === tab)); - } - }, [tab, props.transactions]); - - const table = ( - - - - ); - - return props.transactions.length === 0 ? ( - No transactions found - ) : ( - <> - Transactions history - - - setTab(e as string)}> - {tabKeys.map((key) => ( - - {null} - - ))} - - - {'View All >'} - - - - - ); -}; - -export { TransactionHistory }; -export type { TransactionHistoryProps }; diff --git a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionStatusTag.tsx b/src/pages/Vaults/Vault/components/TransactionHistory/TransactionStatusTag.tsx deleted file mode 100644 index 11790a0ef2..0000000000 --- a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionStatusTag.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import { LoadingSpinner } from '@/component-library/LoadingSpinner'; -import { Status } from '@/component-library/utils/prop-types'; - -import { StatusTag, StatusTagProps } from '../StatusTag'; - -type TransactionStatus = 'pending' | 'cancelled' | 'completed' | 'confirmed' | 'received' | 'retried'; - -const transactionStatus: Record = { - pending: 'warning', - cancelled: 'error', - completed: 'success', - confirmed: 'warning', - received: 'success', - retried: 'success' -} as const; - -type Props = { - status: TransactionStatus; -}; - -type InheritAttr = Omit; - -type TransactionStatusTagProps = Props & InheritAttr; - -const TransactionStatusTag = ({ status, ...props }: TransactionStatusTagProps): JSX.Element => { - const { t } = useTranslation(); - - const tagStatus = transactionStatus[status]; - - return ( - - {status === 'pending' && } - {t(status)} - - ); -}; - -export { TransactionStatusTag }; -export type { TransactionStatus, TransactionStatusTagProps }; diff --git a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionTable.tsx b/src/pages/Vaults/Vault/components/TransactionHistory/TransactionTable.tsx deleted file mode 100644 index 07d29106af..0000000000 --- a/src/pages/Vaults/Vault/components/TransactionHistory/TransactionTable.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { HTMLAttributes, useState } from 'react'; - -import IssueRequestModal from '@/pages/Transactions/IssueRequestsTable/IssueRequestModal'; -import RedeemRequestModal from '@/pages/Transactions/RedeemRequestsTable/RedeemRequestModal'; - -import { StyledDate, StyledRequest, StyledRequestCell, StyledTable } from './TransactionHistory.styles'; -import { TransactionStatus, TransactionStatusTag } from './TransactionStatusTag'; - -const columns = [ - { name: 'Request', uid: 'request' }, - { name: 'Amount', uid: 'amount' }, - { name: 'Status', uid: 'status' } -]; - -type TransactionTableData = { - id: string; - request: string; - date: string; - amount: string; - status: TransactionStatus; - // This `any` is an upstream issue - issue and redeem request data - // hasn't been typed properly. This is a TODO, but out of scope here. - requestData: any; -}; - -type Props = { - data: TransactionTableData[]; -}; - -type NativeAttrs = Omit, keyof Props>; - -type TransactionTableProps = Props & NativeAttrs; - -const RequestCell = ({ request, date }: any) => ( - - {request} - {date} - -); - -const TransactionTable = ({ data, ...props }: TransactionTableProps): JSX.Element => { - const [selectedTableRow, setSelectedTableRow] = useState(undefined); - - const rows = data.map(({ request, amount, requestData, date, status }, key) => ({ - id: key, - amount, - requestData, - type: request, - request: , - status: - })); - - return ( - <> - setSelectedTableRow(rows.find((row) => row.id === key))} - columns={columns} - rows={rows} - {...props} - /> - {/* TODO: these modals should be refactored/replaced */} - {selectedTableRow?.type === 'Issue' && ( - setSelectedTableRow(undefined)} - request={selectedTableRow.requestData} - /> - )} - {selectedTableRow?.type === 'Redeem' && ( - setSelectedTableRow(undefined)} - request={selectedTableRow.requestData} - /> - )} - ; - - ); -}; - -export { TransactionTable }; -export type { TransactionTableData, TransactionTableProps }; diff --git a/src/pages/Vaults/Vault/components/TransactionHistory/index.tsx b/src/pages/Vaults/Vault/components/TransactionHistory/index.tsx deleted file mode 100644 index 509b17bbfb..0000000000 --- a/src/pages/Vaults/Vault/components/TransactionHistory/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { TransactionHistoryProps } from './TransactionHistory'; -export { TransactionHistory } from './TransactionHistory'; diff --git a/src/pages/Vaults/Vault/components/index.tsx b/src/pages/Vaults/Vault/components/index.tsx index eefb92e3b4..88e61e045d 100644 --- a/src/pages/Vaults/Vault/components/index.tsx +++ b/src/pages/Vaults/Vault/components/index.tsx @@ -1,17 +1,8 @@ import { InsightListItem, InsightsList, InsightsListProps } from './InsightsList'; import { PageTitle, PageTitleProps } from './PageTitle'; import { Rewards, RewardsProps } from './Rewards'; -import { TransactionHistory, TransactionHistoryProps } from './TransactionHistory'; import { VaultCollateral, VaultCollateralProps } from './VaultCollateral'; import { VaultInfo, VaultInfoProps } from './VaultInfo'; -export { InsightsList, PageTitle, Rewards, TransactionHistory, VaultCollateral, VaultInfo }; -export type { - InsightListItem, - InsightsListProps, - PageTitleProps, - RewardsProps, - TransactionHistoryProps, - VaultCollateralProps, - VaultInfoProps -}; +export { InsightsList, PageTitle, Rewards, VaultCollateral, VaultInfo }; +export type { InsightListItem, InsightsListProps, PageTitleProps, RewardsProps, VaultCollateralProps, VaultInfoProps }; diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.styles.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.styles.tsx index 8e0c6454df..1074cbfe75 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.styles.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.styles.tsx @@ -62,12 +62,6 @@ const StyledDd = styled.dd` line-height: ${theme.lineHeight.base}; `; -const StyledHr = styled.hr` - border: 0; - border-bottom: ${theme.border.default}; - margin: ${theme.spacing.spacing4} 0; -`; - export { StyledDd, StyledDisclaimerCard, @@ -77,7 +71,6 @@ export { StyledDItem, StyledDl, StyledDt, - StyledHr, StyledModalHeader, StyledWarningIcon }; diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.tsx index 22cca7891c..18264808bf 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/CreateVaultWizard.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { RefObject, useState } from 'react'; import { VaultsTableRow } from '../VaultsTable'; import DespositCollateralStep from './DespositCollateralStep'; @@ -9,9 +9,10 @@ type Steps = 1 | 2 | 3; interface CreateVaultWizardProps { vault?: VaultsTableRow; + overlappingModalRef: RefObject; } // TODO: Move this to a generic multi-step component -const CreateVaultWizard = ({ vault }: CreateVaultWizardProps): JSX.Element | null => { +const CreateVaultWizard = ({ vault, overlappingModalRef }: CreateVaultWizardProps): JSX.Element | null => { const [step, setStep] = useState(1); const handleNextStep = () => setStep((s) => (s + 1) as Steps); @@ -28,6 +29,7 @@ const CreateVaultWizard = ({ vault }: CreateVaultWizardProps): JSX.Element | nul onSuccessfulDeposit={handleNextStep} collateralCurrency={vault.collateralCurrency} minCollateralAmount={vault.minCollateralAmount} + overlappingModalRef={overlappingModalRef} /> diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx index 62a3bc21fe..62dfddcef8 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx @@ -1,28 +1,38 @@ import { CollateralCurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { useId } from '@react-aria/utils'; +import { RefObject, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { CTA, ModalBody, ModalDivider, ModalFooter, ModalHeader, Span, Stack, TokenInput } from '@/component-library'; -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { ModalBody, ModalDivider, ModalFooter, ModalHeader, TokenInput } from '@/component-library'; import { - CREATE_VAULT_DEPOSIT_FIELD, - CreateVaultFormData, - createVaultSchema, - isFormDisabled, - useForm + AuthCTA, + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionFeeDetails +} from '@/components'; +import { + depositCollateralVaultsSchema, + useForm, + VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD, + VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD, + VaultsDepositCollateralFormData, + VaultsDepositCollateralValidationParams } from '@/lib/form'; import { StepComponentProps, withStep } from '@/utils/hocs/step'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { useDepositCollateral } from '../../utils/use-deposit-collateral'; -import { StyledDd, StyledDItem, StyledDl, StyledDt, StyledHr } from './CreateVaultWizard.styles'; type Props = { collateralCurrency: CollateralCurrencyExt; minCollateralAmount: MonetaryAmount; onSuccessfulDeposit?: () => void; + overlappingModalRef: RefObject; }; type DespositCollateralStepProps = Props & StepComponentProps; @@ -30,40 +40,60 @@ type DespositCollateralStepProps = Props & StepComponentProps; const DepositCollateralStep = ({ onSuccessfulDeposit, collateralCurrency, - minCollateralAmount + minCollateralAmount, + overlappingModalRef }: DespositCollateralStepProps): JSX.Element => { const titleId = useId(); const { t } = useTranslation(); - const { collateral, fee, governance } = useDepositCollateral(collateralCurrency, minCollateralAmount); + + const { collateral } = useDepositCollateral(collateralCurrency, minCollateralAmount); const transaction = useTransaction(Transaction.VAULTS_REGISTER_NEW_COLLATERAL, { onSuccess: onSuccessfulDeposit, showSuccessModal: false }); - const validationParams = { + const getTransactionArgs = useCallback( + (values: VaultsDepositCollateralFormData) => { + const amount = values[VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD]; + const monetaryAmount = newMonetaryAmount(amount || 0, collateralCurrency, true); + + return { monetaryAmount }; + }, + [collateralCurrency] + ); + + const handleSubmit = (data: VaultsDepositCollateralFormData) => { + const transactionData = getTransactionArgs(data); + + transaction.execute(transactionData.monetaryAmount); + }; + + const validationParams: VaultsDepositCollateralValidationParams = { minAmount: collateral.min.raw, - maxAmount: collateral.balance.raw, - governanceBalance: governance.raw, - transactionFee: fee.raw + maxAmount: collateral.balance.raw }; - const handleSubmit = (data: CreateVaultFormData) => { - if (!data.deposit) return; + const form = useForm({ + initialValues: { + [VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD]: '', + [VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }, + validationSchema: depositCollateralVaultsSchema(validationParams), + onSubmit: handleSubmit, + onComplete: (values) => { + const transactionData = getTransactionArgs(values); - const amount = newMonetaryAmount(data.deposit || 0, collateral.currency, true); - transaction.execute(amount); - }; + const feeTicker = values[VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD]; - const form = useForm({ - initialValues: { deposit: undefined }, - validationSchema: createVaultSchema(validationParams), - onSubmit: handleSubmit + transaction.fee.setCurrency(feeTicker).estimate(transactionData.monetaryAmount); + } }); - const inputCollateralAmount = newSafeMonetaryAmount(form.values.deposit || 0, collateral.currency, true); + const amount = form.values[VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD]; + const monetaryAmount = newSafeMonetaryAmount(amount || 0, collateral.currency, true); - const isBtnDisabled = isFormDisabled(form); + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); return ( <> @@ -71,41 +101,35 @@ const DepositCollateralStep = ({
- - - - - {t('vault.minimum_required_collateral')} - - {collateral.min.amount} {collateral.currency.ticker} ({collateral.min.usd}) - - - - - {t('fees')} - - - {fee.amount} {GOVERNANCE_TOKEN.ticker} - {' '} - ({fee.usd}) - - - - + - + + + {t('vault.minimum_required_collateral')} + + {collateral.min.amount} {collateral.currency.ticker} ({collateral.min.usd}) + + + + + {t('vault.deposit_collateral')} - +
diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx index 8d21f8d080..093f7c4fc5 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx @@ -1,5 +1,5 @@ import { useId } from '@react-aria/utils'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { H3, Modal, Stack } from '@/component-library'; @@ -30,6 +30,8 @@ const CreateVaults = ({ vaults = [], ...props }: CreateVaultsProps): JSX.Element open: false }); + const overlappingModalRef = useRef(null); + const handleClickAddVault = (vault: VaultsTableRow) => setCollateralModal({ open: true, data: vault }); const handleCloseModal = () => setCollateralModal((s) => ({ ...s, open: false })); @@ -47,8 +49,13 @@ const CreateVaults = ({ vaults = [], ...props }: CreateVaultsProps): JSX.Element

{t('vault.create_vault')}

- - + !overlappingModalRef.current?.contains(el)} + > + ); diff --git a/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx b/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx index e3a464749b..f4ca6df865 100644 --- a/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx +++ b/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx @@ -2,7 +2,7 @@ import { CollateralCurrencyExt, CurrencyExt, newMonetaryAmount } from '@interlay import { MonetaryAmount } from '@interlay/monetary-js'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { GOVERNANCE_TOKEN, GOVERNANCE_TOKEN_SYMBOL, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -25,27 +25,18 @@ type UseDepositCollateral = { raw: MonetaryAmount; }; }; - governance: { - raw: MonetaryAmount; - }; - fee: { - amount: string; - usd: string; - raw: MonetaryAmount; - }; }; const useDepositCollateral = ( collateralCurrency: CollateralCurrencyExt, minCollateral: MonetaryAmount ): UseDepositCollateral => { - const { getAvailableBalance, getBalance } = useGetBalances(); + const { getAvailableBalance } = useGetBalances(); const prices = useGetPrices(); const collateralUSDAmount = getTokenPrice(prices, collateralCurrency.ticker)?.usd || 0; const isGovernanceCollateral = collateralCurrency === GOVERNANCE_TOKEN; - const freeGovernanceBalance = getBalance(GOVERNANCE_TOKEN.ticker)?.free || newMonetaryAmount(0, GOVERNANCE_TOKEN); const collateralTokenBalance = getAvailableBalance(collateralCurrency.ticker) || newMonetaryAmount(0, collateralCurrency); @@ -66,17 +57,6 @@ const useDepositCollateral = ( usd: displayMonetaryAmountInUSDFormat(minCollateral, collateralUSDAmount), raw: minCollateral } - }, - fee: { - amount: displayMonetaryAmount(TRANSACTION_FEE_AMOUNT), - usd: displayMonetaryAmountInUSDFormat( - TRANSACTION_FEE_AMOUNT, - getTokenPrice(prices, GOVERNANCE_TOKEN_SYMBOL)?.usd - ), - raw: TRANSACTION_FEE_AMOUNT - }, - governance: { - raw: freeGovernanceBalance } }; }; diff --git a/src/pages/Wallet/WalletOverview/WalletOverview.tsx b/src/pages/Wallet/WalletOverview/WalletOverview.tsx index 5506cf3f7e..d19cc7750f 100644 --- a/src/pages/Wallet/WalletOverview/WalletOverview.tsx +++ b/src/pages/Wallet/WalletOverview/WalletOverview.tsx @@ -10,10 +10,13 @@ import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account- import { useGetLoanAssets } from '@/utils/hooks/api/loans/use-get-loan-assets'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import useAccountId from '@/utils/hooks/use-account-id'; +import { LocalStorageKey, useLocalStorage } from '@/utils/hooks/use-local-storage'; -import { AvailableAssetsTable, StakingTable, WalletInsights } from './components'; +import { AvailableAssetsTable, StakingTable, WalletInsights, WelcomeBanner } from './components'; const WalletOverview = (): JSX.Element => { + const [isBannerOpen, setBannerOpen] = useLocalStorage(LocalStorageKey.WALLET_WELCOME_BANNER, true); + const accountId = useAccountId(); const { data: balances } = useGetBalances(); const { data: accountPoolsData } = useGetAccountPools(); @@ -29,6 +32,8 @@ const WalletOverview = (): JSX.Element => { return ; } + const handleCloseBanner = () => setBannerOpen(false); + const hasStakingTable = accountStakingData && accountVotingBalance && @@ -38,6 +43,7 @@ const WalletOverview = (): JSX.Element => { return ( + {isBannerOpen && } {!!lendPositions?.length && assets && ( diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index 4eeb9f33c4..309604552e 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -76,10 +76,6 @@ const ActionsCell = ({ {t('redeem')} )} - {/* TODO: add when xcm re-vamp is added */} - {/* - {t('transfer')} - */} {isPooledAsset && ( )} + {!isWrappedToken && ( + + Bridge + + )} ); diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx index 923a7eeec2..5c7469e636 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx @@ -3,11 +3,13 @@ import { ReactNode, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; -import { P, Switch, theme } from '@/component-library'; +import { P, Switch, TextLink, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { Cell } from '@/components'; import { AssetCell, DataGrid } from '@/components/DataGrid'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { FEE_TICKERS } from '@/utils/constants/currency'; +import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { getTokenPrice } from '@/utils/helpers/prices'; import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances'; @@ -16,6 +18,8 @@ import { useGetVestingData } from '@/utils/hooks/api/use-get-vesting-data'; import { ActionsCell } from './ActionsCell'; +const queryString = require('query-string'); + enum AvailableAssetsColumns { ASSET = 'asset', PRICE = 'price', @@ -42,20 +46,43 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP const { data: vestingData } = useGetVestingData(); const isMobile = useMediaQuery(theme.breakpoints.down('md')); - const [showZeroBalances, setShowZeroBalances] = useState(false); + const isFeeToken = (ticker: string) => FEE_TICKERS.includes(ticker); + + const [showAllBalances, setShowAllBalances] = useState(false); const rows: AvailableAssetsRows[] = useMemo(() => { const data = balances ? Object.values(balances) : []; - const filteredData = showZeroBalances ? data : data.filter((balance) => !balance.transferable.isZero()); + + const filteredData = showAllBalances + ? data + : data.filter((balance) => isFeeToken(balance.currency.ticker) || !balance.transferable.isZero()); return filteredData.map( ({ currency, transferable }): AvailableAssetsRows => { + const tooltip = isFeeToken(currency.ticker) && ( + + {t('wallet.get_asset', { token: currency.ticker })} + + ); + const asset = ( ); @@ -100,11 +127,11 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP }; } ); - }, [balances, showZeroBalances, isMobile, prices, pooledTickers, vestingData?.isClaimable]); + }, [balances, showAllBalances, isMobile, prices, pooledTickers, vestingData?.isClaimable, t]); const actions = ( - setShowZeroBalances(e.target.checked)}> - {t('show_zero_balance')} + setShowAllBalances(e.target.checked)}> + {t('show_all')} ); diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx index ddbfbe04d3..1cba2783bf 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx @@ -39,8 +39,7 @@ const WalletInsights = ({ balances }: WalletInsightsProps): JSX.Element => { ); const totalBalance = rawBalance - ?.add(accountLendingStatistics?.supplyAmountUSD || 0) - .sub(accountLendingStatistics?.borrowAmountUSD || 0) + ?.sub(accountLendingStatistics?.borrowAmountUSD || 0) .add(accountPools?.accountLiquidityUSD || 0); const totalBalanceLabel = totalBalance ? formatUSD(totalBalance.toNumber(), { compact: true }) : '-'; diff --git a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles.tsx b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles.tsx new file mode 100644 index 0000000000..85b19e9f01 --- /dev/null +++ b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles.tsx @@ -0,0 +1,106 @@ +import styled from 'styled-components'; + +import { XMark } from '@/assets/icons'; +import { ReactComponent as BTCDefi } from '@/assets/img/btc-defi.svg'; +import { Card, CTA, CTALink, Flex, H2, P, theme } from '@/component-library'; + +const StyledCard = styled(Card)` + position: relative; + overflow: hidden; + z-index: 0; + background-color: #1a0144; +`; + +const StyledImageWrapper = styled(Flex)` + display: none; + flex: 0; + + @media ${theme.breakpoints.up('md')} { + display: flex; + margin-right: ${theme.spacing.spacing6}; + } + + @media ${theme.breakpoints.up('lg')} { + margin-right: ${theme.spacing.spacing10}; + } +`; + +const StyledSVG = styled(BTCDefi)` + width: 9.875rem; + height: 8.125rem; + + @media ${theme.breakpoints.up('md')} { + display: block; + top: ${theme.spacing.spacing8}; + bottom: ${theme.spacing.spacing8}; + right: ${theme.spacing.spacing18}; + } +`; + +const StyledTextWrapper = styled(Flex)` + @media ${theme.breakpoints.up('md')} { + max-width: 70%; + } +`; + +const StyledCloseCTA = styled(CTA)` + position: absolute; + top: ${theme.spacing.spacing3}; + right: ${theme.spacing.spacing3}; +`; + +const StyledXMark = styled(XMark)` + color: var(--colors-neutral-white); +`; + +const StyledP = styled(P)` + color: #ffffffb2; +`; + +const StyledCTALink = styled(CTALink)` + border-radius: ${theme.rounded.lg}; + font-size: ${theme.text.s}; + padding: ${theme.spacing.spacing2} ${theme.spacing.spacing6}; + color: #1a0144; + background-color: var(--colors-neutral-white); + white-space: nowrap; + + &:hover:not([disabled]) { + background-color: var(--colors-neutral-lighter-grey); + } +`; + +const StyledTitle = styled(H2)` + color: var(--colors-neutral-white); + font-size: ${theme.text.lg}; +`; + +const StyledCTAGroup = styled(Flex)` + flex-wrap: wrap; + + @media ${theme.breakpoints.up('md')} { + max-width: 80%; + } + + @media ${theme.breakpoints.up('lg')} { + flex-wrap: nowrap; + max-width: 100%; + } + + @media ${theme.breakpoints.up('xl')} { + max-width: 70%; + } +`; + +export { + StyledCard, + StyledCloseCTA, + StyledCTAGroup, + StyledCTALink, + StyledImageWrapper, + StyledP, + StyledSVG, + StyledTextWrapper, + StyledTitle, + StyledXMark +}; diff --git a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx new file mode 100644 index 0000000000..3c1959202a --- /dev/null +++ b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx @@ -0,0 +1,66 @@ +import { useTranslation } from 'react-i18next'; + +import { Flex } from '@/component-library'; +import { INTERLAY_WHITEPAPPER } from '@/config/links'; +import { APP_NAME, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { PAGES } from '@/utils/constants/links'; + +import { + StyledCard, + StyledCloseCTA, + StyledCTAGroup, + StyledCTALink, + StyledImageWrapper, + StyledP, + StyledSVG, + StyledTextWrapper, + StyledTitle, + StyledXMark +} from './WelcomeBanner.styles'; + +type WelcomeBannerProps = { + onClose: () => void; +}; + +const WelcomeBanner = ({ onClose }: WelcomeBannerProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + + + + + {t('wallet.welcome_to_dapp', { name: APP_NAME })} + + + {t('wallet.dapp_is_a_one_stop_shop_for_bitcoin_defi', { + name: APP_NAME, + wrappedToken: WRAPPED_TOKEN.ticker + })} + + + + + Whitepaper + + {/* TODO: to be added */} + + Fund Wallet Guide + + + Tutorial + + + + + + + + + + + ); +}; + +export { WelcomeBanner }; +export type { WelcomeBannerProps }; diff --git a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/index.tsx b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/index.tsx new file mode 100644 index 0000000000..f2accab29b --- /dev/null +++ b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/index.tsx @@ -0,0 +1,2 @@ +export type { WelcomeBannerProps } from './WelcomeBanner'; +export { WelcomeBanner } from './WelcomeBanner'; diff --git a/src/pages/Wallet/WalletOverview/components/index.tsx b/src/pages/Wallet/WalletOverview/components/index.tsx index e4670e5c97..062097b3f1 100644 --- a/src/pages/Wallet/WalletOverview/components/index.tsx +++ b/src/pages/Wallet/WalletOverview/components/index.tsx @@ -1,6 +1,7 @@ import { AvailableAssetsTable, AvailableAssetsTableProps } from './AvailableAssetsTable'; import { StakingTable, StakingTableProps } from './StakingTable'; import { WalletInsights, WalletInsightsProps } from './WalletInsights'; +import { WelcomeBanner, WelcomeBannerProps } from './WelcomeBanner'; -export { AvailableAssetsTable, StakingTable, WalletInsights }; -export type { AvailableAssetsTableProps, StakingTableProps, WalletInsightsProps }; +export { AvailableAssetsTable, StakingTable, WalletInsights, WelcomeBanner }; +export type { AvailableAssetsTableProps, StakingTableProps, WalletInsightsProps, WelcomeBannerProps }; diff --git a/src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx index 0eebbc7bf4..e1e779b549 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx @@ -7,7 +7,7 @@ import InterlayRouterNavLink, { } from '@/legacy-components/UI/InterlayRouterNavLink'; interface CustomProps { - external: boolean; + external?: boolean; href: string; } diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx index 065c5be8e2..4898916cdf 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx @@ -3,15 +3,10 @@ import { ArrowPathRoundedSquareIcon, ArrowsRightLeftIcon, BanknotesIcon, - BookOpenIcon, ChartBarSquareIcon, CircleStackIcon, - ClipboardDocumentListIcon, CpuChipIcon, - DocumentTextIcon, - HandRaisedIcon, PresentationChartBarIcon, - ScaleIcon, Square3Stack3DIcon, UserIcon } from '@heroicons/react/24/outline'; @@ -23,6 +18,7 @@ import { matchPath } from 'react-router'; import { useLocation } from 'react-router-dom'; import { StoreType } from '@/common/types/util.types'; +import { Accordion, AccordionItem } from '@/component-library'; import { INTERLAY_DOCS_LINK } from '@/config/links'; import { CROWDLOAN_LINK, @@ -71,8 +67,9 @@ const Navigation = ({ const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); + const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); - const NAVIGATION_ITEMS = React.useMemo( + const PRIMARY_NAVIGATION_ITEMS = React.useMemo( () => [ { name: 'nav_wallet', @@ -87,7 +84,7 @@ const Navigation = ({ disabled: !isStrategiesEnabled }, { - name: 'nav_bridge', + name: `${WRAPPED_TOKEN_SYMBOL}`, link: PAGES.BRIDGE, icon: ArrowPathIcon, hidden: false @@ -115,12 +112,6 @@ const Navigation = ({ icon: Square3Stack3DIcon, disabled: !isAMMEnabled }, - { - name: 'nav_transactions', - link: PAGES.TRANSACTIONS, - icon: ClipboardDocumentListIcon, - hidden: false - }, { name: 'nav_staking', link: PAGES.STAKING, @@ -143,11 +134,21 @@ const Navigation = ({ link: '#', icon: () => null, separator: true + } + ], + [isWalletEnabled, isStrategiesEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] + ); + + const SECONDARY_NAVIGATION_ITEMS = React.useMemo( + () => [ + { + name: 'nav_onboarding', + link: PAGES.ONBOARDING, + hidden: !isOnboardingEnabled }, { name: 'nav_use_wrapped', link: USE_WRAPPED_CURRENCY_LINK, - icon: HandRaisedIcon, hidden: !USE_WRAPPED_CURRENCY_LINK, external: true, rest: { @@ -158,7 +159,6 @@ const Navigation = ({ { name: 'nav_crowdloan', link: CROWDLOAN_LINK, - icon: BanknotesIcon, external: true, // This will suppress the link on testnet hidden: process.env.REACT_APP_BITCOIN_NETWORK !== 'mainnet' || !CROWDLOAN_LINK, @@ -170,7 +170,6 @@ const Navigation = ({ { name: 'nav_docs', link: INTERLAY_DOCS_LINK, - icon: BookOpenIcon, external: true, rest: { target: '_blank', @@ -180,7 +179,6 @@ const Navigation = ({ { name: 'nav_governance', link: GOVERNANCE_LINK, - icon: ScaleIcon, external: true, hidden: !GOVERNANCE_LINK, rest: { @@ -191,7 +189,6 @@ const Navigation = ({ { name: 'nav_terms_and_conditions', link: TERMS_AND_CONDITIONS_LINK, - icon: DocumentTextIcon, external: true, hidden: !TERMS_AND_CONDITIONS_LINK, rest: { @@ -200,14 +197,14 @@ const Navigation = ({ } } ], - [isWalletEnabled, isStrategiesEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] + [isOnboardingEnabled] ); return ( ); }; diff --git a/src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx b/src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx index 877ccb3438..899ba353e0 100644 --- a/src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx +++ b/src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx @@ -13,19 +13,19 @@ import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; const SOCIAL_MEDIA_ITEMS = [ { link: INTERLAY_TWITTER_LINK, - icon: + icon: }, { link: INTERLAY_DISCORD_LINK, - icon: + icon: }, { link: INTERLAY_GITHUB_LINK, - icon: + icon: }, { link: INTERLAY_EMAIL_LINK, - icon: + icon: } ]; @@ -35,11 +35,11 @@ const SocialMediaContainer = ({ className, ...rest }: React.ComponentPropsWithRe ( 'flex-1', 'flex', 'flex-col', - { 'bg-white': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT }, - { 'dark:bg-kintsugiMidnight': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA } + { 'bg-interlayHaiti-50': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT }, + { 'dark:bg-kintsugiMidnight-900': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA } )} > {onSmallScreen && } diff --git a/src/parts/Topbar/GetGovernanceTokenUI/index.tsx b/src/parts/Topbar/GetGovernanceTokenUI/index.tsx index 36f23fc7b7..e37aad3b50 100644 --- a/src/parts/Topbar/GetGovernanceTokenUI/index.tsx +++ b/src/parts/Topbar/GetGovernanceTokenUI/index.tsx @@ -6,17 +6,15 @@ import { useDispatch, useSelector } from 'react-redux'; import { ReactComponent as AcalaLogoIcon } from '@/assets/img/exchanges/acala-logo.svg'; import { ReactComponent as GateLogoIcon } from '@/assets/img/exchanges/gate-logo.svg'; import { ReactComponent as KrakenLogoIcon } from '@/assets/img/exchanges/kraken-logo.svg'; -import { ReactComponent as LbankLogoIcon } from '@/assets/img/exchanges/lbank-logo.svg'; import { ReactComponent as MexcLogoForInterlayIcon } from '@/assets/img/exchanges/mexc-logo-for-interlay.svg'; import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchanges/mexc-logo-for-kintsugi.svg'; import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg'; import { ReactComponent as ZenlinkLogoIcon } from '@/assets/img/exchanges/zenlink-logo.svg'; import { showBuyModal } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; +import { CTA } from '@/component-library'; import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; -import InterlayDefaultOutlinedButton, { - Props as InterlayDefaultOutlinedButtonProps -} from '@/legacy-components/buttons/InterlayDefaultOutlinedButton'; +import { Props as InterlayDefaultOutlinedButtonProps } from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import TitleWithUnderline from '@/legacy-components/TitleWithUnderline'; import InterlayLink from '@/legacy-components/UI/InterlayLink'; import InterlayModal, { InterlayModalInnerWrapper } from '@/legacy-components/UI/InterlayModal'; @@ -49,10 +47,6 @@ if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) { { link: 'https://www.mexc.com/exchange/INTR_USDT', icon: - }, - { - link: 'https://www.lbank.info/exchange/intr/usdt', - icon: } ]; } else if (process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA) { @@ -120,9 +114,9 @@ const GetGovernanceTokenUI = (props: InterlayDefaultOutlinedButtonProps): JSX.El return ( <> - + {getGovernanceTokenLabel} - + diff --git a/src/parts/Topbar/index.tsx b/src/parts/Topbar/index.tsx index 63098f3442..0326055ca6 100644 --- a/src/parts/Topbar/index.tsx +++ b/src/parts/Topbar/index.tsx @@ -5,7 +5,6 @@ import clsx from 'clsx'; import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; -import { toast } from 'react-toastify'; import { showAccountModalAction, showSignTermsModalAction } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; @@ -21,7 +20,8 @@ import Tokens from '@/legacy-components/Tokens'; import InterlayLink from '@/legacy-components/UI/InterlayLink'; import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; import { BitcoinNetwork } from '@/types/bitcoin'; -import { useNotifications } from '@/utils/context/Notifications'; +import { POLKADOT } from '@/utils/constants/relay-chain-names'; +import { NotificationToastType, useNotifications } from '@/utils/context/Notifications'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import { useSignMessage } from '@/utils/hooks/use-sign-message'; @@ -39,7 +39,7 @@ const Topbar = (): JSX.Element => { const isBanxaEnabled = useFeatureFlag(FeatureFlags.BANXA); const { setSelectedAccount, removeSelectedAccount } = useSubstrate(); const { selectProps } = useSignMessage(); - const { list } = useNotifications(); + const notifications = useNotifications(); const governanceTokenBalanceIsZero = getAvailableBalance(GOVERNANCE_TOKEN.ticker)?.isZero(); @@ -49,10 +49,16 @@ const Topbar = (): JSX.Element => { try { const receiverId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, selectedAccount.address); await window.faucet.fundAccount(receiverId, GOVERNANCE_TOKEN); - // TODO: show new notification - toast.success('Your account has been funded.'); + + notifications.show('faucet', { + type: NotificationToastType.STANDARD, + props: { variant: 'success', title: t('notifications.funding_account_successful') } + }); } catch (error) { - toast.error(`Funding failed. ${error.message}`); + notifications.show('faucet', { + type: NotificationToastType.STANDARD, + props: { variant: 'error', title: t('notifications.funding_account_failed') } + }); } }; @@ -137,7 +143,13 @@ const Topbar = (): JSX.Element => { )} - +
+ +
{accountLabel} diff --git a/src/parts/Wrapper/Wrapper.style.tsx b/src/parts/Wrapper/Wrapper.style.tsx new file mode 100644 index 0000000000..a53ca66a46 --- /dev/null +++ b/src/parts/Wrapper/Wrapper.style.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +import dysonsphere from '@/assets/img/dysonsphere.svg'; + +const StyledWrapper = styled('div')` + background: url(${dysonsphere}) no-repeat; + background-size: 40%; + background-position: right bottom; + background-attachment: fixed; +`; + +export { StyledWrapper }; diff --git a/src/parts/Wrapper/index.tsx b/src/parts/Wrapper/index.tsx new file mode 100644 index 0000000000..8ff410f2d3 --- /dev/null +++ b/src/parts/Wrapper/index.tsx @@ -0,0 +1,12 @@ +import { StyledWrapper } from './Wrapper.style'; + +interface Props { + className?: string; + children: React.ReactNode; +} + +const Wrapper = ({ className, children }: Props): JSX.Element => { + return {children}; +}; + +export default Wrapper; diff --git a/src/services/fetchers/oracle-exchange-rates-fetcher.ts b/src/services/fetchers/oracle-exchange-rates-fetcher.ts index 3102c038ad..8b83a31d76 100644 --- a/src/services/fetchers/oracle-exchange-rates-fetcher.ts +++ b/src/services/fetchers/oracle-exchange-rates-fetcher.ts @@ -5,15 +5,12 @@ import { Bitcoin, ExchangeRate } from '@interlay/monetary-js'; import graphqlFetcher, { GRAPHQL_FETCHER } from '@/services/fetchers/graphql-fetcher'; import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; -import oracleExchangeRatesQuery, { composableExchangeRateSubquery } from '../queries/oracle-exchange-rates-query'; +import { composableExchangeRateSubquery } from '../queries/oracle-exchange-rates-query'; -const ORACLE_LATEST_EXCHANGE_RATE_FETCHER = 'oracle-exchange-rate-fetcher'; const ORACLE_ALL_LATEST_UPDATES_FETCHER = 'oracle-all-latest-updates-fetcher'; type BtcToCurrencyOracleStatus = OracleStatus; -type LatestExchangeRateFetcherParams = [key: string, currency: CurrencyExt, onlineTimeout: number]; - type AllOracleLatestUpdatesFetcherParams = [ key: string, currency: CurrencyExt, @@ -40,34 +37,6 @@ function decodeOracleValues( }; } -// TODO: should type properly (`Relay`) -const latestExchangeRateFetcher = async ( - // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types - { queryKey }: any -): Promise => { - const [key, currency, onlineTimeout] = queryKey as LatestExchangeRateFetcherParams; - - if (key !== ORACLE_LATEST_EXCHANGE_RATE_FETCHER) throw new Error('Invalid key!'); - - // TODO: should type properly (`Relay`) - // TODO: Need to refactor when we want to support lend tokens as collateral for vaults. - const cond = 'foreignAsset' in currency ? `asset_eq: ${currency.foreignAsset.id}` : `token_eq: ${currency.ticker}`; - const latestOracleData = await graphqlFetcher>()({ - queryKey: [GRAPHQL_FETCHER, oracleExchangeRatesQuery(`typeKey: {${cond}}`)] - }); - - // TODO: should type properly (`Relay`) - const rates = latestOracleData?.data?.oracleUpdates || []; - return rates.map((update) => - decodeOracleValues( - update, - currency, - onlineTimeout, - new Map([[update.oracleId, update.oracleId]]) // placeholder, as not used in card - ) - )[0]; -}; - const allLatestSubmissionsFetcher = async ( // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types { queryKey }: any @@ -95,11 +64,6 @@ const allLatestSubmissionsFetcher = async ( .map(([update]) => decodeOracleValues(update, currency, onlineTimeout, namesMap)); }; -export { - allLatestSubmissionsFetcher, - latestExchangeRateFetcher, - ORACLE_ALL_LATEST_UPDATES_FETCHER, - ORACLE_LATEST_EXCHANGE_RATE_FETCHER -}; +export { allLatestSubmissionsFetcher, ORACLE_ALL_LATEST_UPDATES_FETCHER }; export type { BtcToCurrencyOracleStatus }; diff --git a/src/types/bridge.ts b/src/types/bridge.ts new file mode 100644 index 0000000000..30d919ba5c --- /dev/null +++ b/src/types/bridge.ts @@ -0,0 +1,7 @@ +enum BridgeActions { + ISSUE = 'issue', + REDEEM = 'redeem', + BURN = 'burn' +} + +export { BridgeActions }; diff --git a/src/types/currency.ts b/src/types/currency.ts index 1a2dd6c416..24c47a929c 100644 --- a/src/types/currency.ts +++ b/src/types/currency.ts @@ -9,5 +9,19 @@ enum ForeignAssetIdLiteral { BTC = 'BTC' } -export type { BTCToCollateralTokenRate }; +type CurrencySquidFormat = + | { + __typename: 'NativeToken'; + token: string; + } + | { + __typename: 'ForeignAsset'; + asset: number; + } + | { + __typename: 'LendToken'; + lendTokenId: number; + }; + +export type { BTCToCollateralTokenRate, CurrencySquidFormat }; export { ForeignAssetIdLiteral }; diff --git a/src/utils/constants/currency.ts b/src/utils/constants/currency.ts index 1e8413d614..56ce40c701 100644 --- a/src/utils/constants/currency.ts +++ b/src/utils/constants/currency.ts @@ -21,6 +21,8 @@ const ZERO_GOVERNANCE_TOKEN_AMOUNT = newMonetaryAmount(0, GOVERNANCE_TOKEN, true const NATIVE_CURRENCIES: Array = process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT ? [Polkadot, InterBtc, Interlay] : [KBtc, Kintsugi, Kusama]; +const FEE_TICKERS = [...NATIVE_CURRENCIES.map(({ ticker }) => ticker), 'USDT']; + const COINGECKO_ID_BY_CURRENCY_TICKER: Record = Object.freeze({ [Bitcoin.ticker]: 'bitcoin', [Kintsugi.ticker]: 'kintsugi', @@ -33,6 +35,7 @@ const COINGECKO_ID_BY_CURRENCY_TICKER: Record; @@ -63,6 +70,14 @@ const useNotifications = (): NotificationsConfig => React.useContext(Notificatio const NotificationsProvider: React.FC = ({ children }) => { const toastContainerRef = useRef(null); + const toastComponentMap = useMemo( + () => ({ + [NotificationToastType.STANDARD]: NotificationToast, + [NotificationToastType.TRANSACTION]: TransactionToast + }), + [] + ); + const dispatch = useDispatch(); const { account } = useWallet(); @@ -137,5 +152,5 @@ const NotificationsProvider: React.FC = ({ children }) => { ); }; -export { NotificationsContext, NotificationsProvider, NotificationToast, useNotifications }; +export { NotificationsContext, NotificationsProvider, NotificationToastType, useNotifications }; export type { NotificationToastAction }; diff --git a/src/utils/helpers/is-valid-polkadot-address.ts b/src/utils/helpers/is-valid-polkadot-address.ts deleted file mode 100644 index 5ba84a3ed7..0000000000 --- a/src/utils/helpers/is-valid-polkadot-address.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { decodeAddress, encodeAddress } from '@polkadot/keyring'; -import { hexToU8a, isHex } from '@polkadot/util'; - -const isValidPolkadotAddress = (address: string): boolean => { - try { - encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address)); - - return true; - } catch { - return false; - } -}; - -export default isValidPolkadotAddress; diff --git a/src/utils/hooks/api/amm/use-get-account-pools.tsx b/src/utils/hooks/api/amm/use-get-account-pools.tsx index 5817208009..64aba678ce 100644 --- a/src/utils/hooks/api/amm/use-get-account-pools.tsx +++ b/src/utils/hooks/api/amm/use-get-account-pools.tsx @@ -20,7 +20,7 @@ interface AccountPoolsData { accountLiquidityUSD: Big; } -const getAccountLiqudityPools = async ( +const getAccountLiquidityPools = async ( accountId: AccountId, pools: LiquidityPool[], prices: Prices @@ -67,7 +67,7 @@ const useGetAccountPools = (): UseGetAccountProvidedLiquidity => { const queryKey = ['account-pools', accountId]; const { data, error, refetch: refetchQuery } = useQuery({ queryKey: ['account-pools', accountId], - queryFn: () => accountId && liquidityPools && prices && getAccountLiqudityPools(accountId, liquidityPools, prices), + queryFn: () => accountId && liquidityPools && prices && getAccountLiquidityPools(accountId, liquidityPools, prices), enabled: !!accountId && !!liquidityPools && !!prices, refetchInterval: BLOCKTIME_REFETCH_INTERVAL }); diff --git a/src/utils/hooks/api/bridge/use-get-issue-data.tsx b/src/utils/hooks/api/bridge/use-get-issue-data.tsx new file mode 100644 index 0000000000..483c446f7b --- /dev/null +++ b/src/utils/hooks/api/bridge/use-get-issue-data.tsx @@ -0,0 +1,77 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { BitcoinAmount, Currency, MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +import { useGetCurrencies } from '../use-get-currencies'; + +type IssueData = { + dustValue: MonetaryAmount; + issueFee: MonetaryAmount; + griefingCollateralRate: Big; +}; + +const getIssueData = async (): Promise => { + const [issueFee, griefingCollateralRate, dustValue] = await Promise.all([ + window.bridge.fee.getIssueFee(), + window.bridge.fee.getIssueGriefingCollateralRate(), + window.bridge.issue.getDustValue() + ]); + + return { + dustValue, + issueFee: new BitcoinAmount(issueFee), + griefingCollateralRate + }; +}; + +type UseGetIssueDataResult = { + data: IssueData | undefined; + getSecurityDeposit: ( + btcAmount: MonetaryAmount, + ticker: string | undefined + ) => Promise | undefined>; + refetch: () => void; +}; + +const useGetIssueData = (): UseGetIssueDataResult => { + const { getCurrencyFromTicker, isLoading: isLoadingCurrencies } = useGetCurrencies(true); + + const { data, error, refetch } = useQuery({ + queryKey: 'issue-data', + queryFn: getIssueData, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL + }); + + useErrorHandler(error); + + const getSecurityDeposit = useCallback( + async (btcAmount: MonetaryAmount, ticker: string | undefined) => { + if (isLoadingCurrencies || ticker === undefined) { + return; + } + const griefingCollateralCurrency = getCurrencyFromTicker(ticker); + const btcToGriefingCollateralCurrency = await window.bridge.oracle.getExchangeRate(griefingCollateralCurrency); + const { griefingCollateralRate } = data || {}; + + if (!btcToGriefingCollateralCurrency || !griefingCollateralRate) + return newMonetaryAmount(0, griefingCollateralCurrency); + + return btcToGriefingCollateralCurrency.toCounter(btcAmount).mul(griefingCollateralRate); + }, + [data, getCurrencyFromTicker, isLoadingCurrencies] + ); + + return { + data, + refetch, + getSecurityDeposit + }; +}; + +export { useGetIssueData }; +export type { IssueData, UseGetIssueDataResult }; diff --git a/src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx b/src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx new file mode 100644 index 0000000000..355a8958e7 --- /dev/null +++ b/src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx @@ -0,0 +1,30 @@ +import { IssueLimits } from '@interlay/interbtc-api/build/src/parachain/issue'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryOptions } from 'react-query'; + +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +const getIssueRequestLimits = async (): Promise => window.bridge.issue.getRequestLimits(); + +type UseGetIssueRequestLimitResult = { + data: IssueLimits | undefined; + refetch: () => void; +}; + +type UseGetIssueRequestLimitProps = UseQueryOptions; + +const useGetIssueRequestLimit = (props?: UseGetIssueRequestLimitProps): UseGetIssueRequestLimitResult => { + const queryResult = useQuery({ + queryKey: 'issue-request-limit', + queryFn: getIssueRequestLimits, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL, + ...props + }); + + useErrorHandler(queryResult.error); + + return queryResult; +}; + +export { useGetIssueRequestLimit }; +export type { UseGetIssueRequestLimitResult }; diff --git a/src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx b/src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx new file mode 100644 index 0000000000..22c3848929 --- /dev/null +++ b/src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx @@ -0,0 +1,59 @@ +import { CollateralCurrencyExt, isCurrencyEqual } from '@interlay/interbtc-api'; +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +import useAccountId from '../../use-account-id'; +import { useGetCollateralCurrencies } from '../use-get-collateral-currencies'; + +type MaxBurnableTokensData = { + amounts: MonetaryAmount[]; + hasBurnableTokens: boolean; +}; + +const getMaxBurnableTokensData = async (currencies: CollateralCurrencyExt[]): Promise => { + const amounts = await Promise.all(currencies.map((currency) => window.bridge.redeem.getMaxBurnableTokens(currency))); + + return { + amounts, + hasBurnableTokens: !!amounts?.find((amount) => !amount.isZero()) + }; +}; + +type UseGetMaxBurnableTokensResult = { + data: MaxBurnableTokensData | undefined; + getMaxBurnableTokens: (currency: Currency) => MonetaryAmount | undefined; + refetch: () => void; +}; + +const useGetMaxBurnableTokens = (): UseGetMaxBurnableTokensResult => { + const { data: collateralCurrencies } = useGetCollateralCurrencies(true); + + const accountId = useAccountId(); + + const { data, error, refetch } = useQuery({ + queryKey: ['max-burnable-tokens', accountId?.toString()], + queryFn: () => collateralCurrencies && getMaxBurnableTokensData(collateralCurrencies), + refetchInterval: BLOCKTIME_REFETCH_INTERVAL, + enabled: !!accountId && !!collateralCurrencies + }); + + useErrorHandler(error); + + const getMaxBurnableTokens = useCallback( + (currency: Currency) => data?.amounts.find((amount) => isCurrencyEqual(amount.currency, currency)), + [data?.amounts] + ); + + return { + data, + getMaxBurnableTokens, + refetch + }; +}; + +export { useGetMaxBurnableTokens }; +export type { MaxBurnableTokensData, UseGetMaxBurnableTokensResult }; diff --git a/src/utils/hooks/api/bridge/use-get-redeem-data.tsx b/src/utils/hooks/api/bridge/use-get-redeem-data.tsx new file mode 100644 index 0000000000..1cef3fcb3f --- /dev/null +++ b/src/utils/hooks/api/bridge/use-get-redeem-data.tsx @@ -0,0 +1,98 @@ +import { InterbtcPrimitivesVaultId } from '@interlay/interbtc-api'; +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +import { useGetExchangeRate } from '../use-get-exchange-rate'; + +const getPremiumRedeemVaults = async (): Promise>> => + window.bridge.vaults.getPremiumRedeemVaults().catch(() => new Map()); + +type RedeemData = { + dustValue: MonetaryAmount; + feeRate: Big; + redeemLimit: MonetaryAmount; + premium?: { + feeRate: Big; + redeemLimit: MonetaryAmount; + }; + currentInclusionFee: MonetaryAmount; +}; + +const getRedeemData = async (): Promise => { + const [ + premiumRedeemFeeRate, + dustValue, + premiumRedeemVaults, + feeRate, + currentInclusionFee, + vaultsWithRedeemableTokens + ] = await Promise.all([ + window.bridge.redeem.getPremiumRedeemFeeRate(), + window.bridge.redeem.getDustValue(), + getPremiumRedeemVaults(), + window.bridge.redeem.getFeeRate(), + window.bridge.redeem.getCurrentInclusionFee(), + window.bridge.vaults.getVaultsWithRedeemableTokens() + ]); + + const redeemLimit = vaultsWithRedeemableTokens.values().next().value; + + const premiumRedeemLimit = premiumRedeemVaults.values().next().value; + + const premium = premiumRedeemLimit + ? { + feeRate: premiumRedeemFeeRate, + redeemLimit: premiumRedeemLimit + } + : undefined; + + return { + dustValue, + feeRate, + redeemLimit, + premium, + currentInclusionFee + }; +}; + +type UseGetRedeemDataResult = { + data: RedeemData | undefined; + getCompensationAmount: (btcAmount: MonetaryAmount) => MonetaryAmount | undefined; + refetch: () => void; +}; + +const useGetRedeemData = (): UseGetRedeemDataResult => { + const { data: btcToRelayChainToken } = useGetExchangeRate(RELAY_CHAIN_NATIVE_TOKEN); + + const { data, error, refetch } = useQuery({ + queryKey: 'redeem-data', + queryFn: getRedeemData, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL + }); + + useErrorHandler(error); + + const getCompensationAmount = useCallback( + (btcAmount: MonetaryAmount) => { + if (!btcToRelayChainToken || !data?.premium) return; + + return btcToRelayChainToken.toCounter(btcAmount).mul(data.premium.feeRate); + }, + [btcToRelayChainToken, data] + ); + + return { + data, + refetch, + getCompensationAmount + }; +}; + +export { useGetRedeemData }; +export type { RedeemData, UseGetRedeemDataResult }; diff --git a/src/utils/hooks/api/bridge/use-get-vaults.tsx b/src/utils/hooks/api/bridge/use-get-vaults.tsx new file mode 100644 index 0000000000..3172414927 --- /dev/null +++ b/src/utils/hooks/api/bridge/use-get-vaults.tsx @@ -0,0 +1,132 @@ +import { CurrencyExt, InterbtcPrimitivesVaultId } from '@interlay/interbtc-api'; +import { Currency, MonetaryAmount } from '@interlay/monetary-js'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryOptions } from 'react-query'; + +import { BridgeActions } from '@/types/bridge'; +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +import { useGetCurrencies } from '../use-get-currencies'; + +const getPremiumRedeemVaults = async (): Promise>> => + window.bridge.vaults.getPremiumRedeemVaults().catch(() => new Map()); + +type BridgeVaultData = { + id: string; + vaultId: InterbtcPrimitivesVaultId; + amount: MonetaryAmount; + collateralCurrency: CurrencyExt; +}; + +type GetBridgeVaultData = { + list: BridgeVaultData[]; + map: Map>; + premium: T extends BridgeActions.REDEEM + ? { + list: BridgeVaultData[]; + map: Map>; + } + : never; +}; + +type UseGetBridgeVaultResult = { + data: GetBridgeVaultData | undefined; + getAvailableVaults: T extends BridgeActions.REDEEM + ? (requiredCapacity: MonetaryAmount, onlyPremiumVaults?: boolean) => BridgeVaultData[] | undefined + : (requiredCapacity: MonetaryAmount) => BridgeVaultData[] | undefined; + + refetch: () => void; +}; + +type UseGetVaultsOptions = UseQueryOptions< + GetBridgeVaultData, + unknown, + GetBridgeVaultData, + string[] +>; + +const useGetVaults = ( + action: T, + options?: UseGetVaultsOptions +): UseGetBridgeVaultResult => { + const { getCurrencyFromIdPrimitive, isLoading: isLoadingCurrencies } = useGetCurrencies(true); + + const composeVaultData = useCallback( + (map: Map>): BridgeVaultData[] => + [...map].map(([vaultId, amount], idx) => ({ + id: idx.toString(), + vaultId, + amount, + collateralCurrency: getCurrencyFromIdPrimitive(vaultId.currencies.collateral) + })), + [getCurrencyFromIdPrimitive] + ); + + const getVaults = useCallback(async (): Promise> => { + const isRedeem = action === BridgeActions.REDEEM; + const map = await (isRedeem + ? window.bridge.vaults.getVaultsWithRedeemableTokens() + : window.bridge.vaults.getVaultsWithIssuableTokens()); + + const list = composeVaultData(map); + + switch (action) { + case BridgeActions.REDEEM: { + const premiumVaultsMap = await getPremiumRedeemVaults(); + const premiumVaultsList = composeVaultData(premiumVaultsMap); + + const data: GetBridgeVaultData = { + list, + map, + premium: { + map: premiumVaultsMap, + list: premiumVaultsList + } + }; + + return data as GetBridgeVaultData; + } + default: + case BridgeActions.ISSUE: + return { + list, + map + } as GetBridgeVaultData; + } + }, [action, composeVaultData]); + + const { data, error, refetch } = useQuery({ + queryKey: ['vaults', action], + queryFn: getVaults, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL, + enabled: !isLoadingCurrencies, + ...options + }); + + const getAvailableVaults = useCallback( + (requiredCapacity: MonetaryAmount, onlyPremiumVaults?: boolean | never) => { + const list = onlyPremiumVaults ? data?.premium.list : data?.list; + + return list + ?.filter((vault) => vault.amount.gte(requiredCapacity)) + .sort((vaultA, vaultB) => { + const vaultAId = vaultA.vaultId.accountId.toString(); + const vaultBId = vaultB.vaultId.accountId.toString(); + return vaultAId < vaultBId ? -1 : vaultAId > vaultBId ? 1 : 0; + }); + }, + [data] + ); + + useErrorHandler(error); + + return { + data, + refetch, + getAvailableVaults + }; +}; + +export { useGetVaults }; +export type { BridgeVaultData, UseGetBridgeVaultResult }; diff --git a/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts b/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts new file mode 100644 index 0000000000..f0edcd8351 --- /dev/null +++ b/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts @@ -0,0 +1,40 @@ +import { CurrencyExt, InterbtcPrimitivesCurrencyId } from '@interlay/interbtc-api'; +import { useQuery } from 'react-query'; + +import { WRAPPED_TOKEN } from '@/config/relay-chains'; + +import { useGetCurrencies } from '../use-get-currencies'; + +const getOracleCurrencies = ( + getCurrencyFromIdPrimitive: (currencyPrimitive: InterbtcPrimitivesCurrencyId) => CurrencyExt +) => async (): Promise> => { + const keys = await window.bridge.api.query.oracle.aggregate.keys(); + + // MEMO: Primitive decoding, because`storageKeyToNthInner` is not decoding proper OracleKey type + const currencies = keys + .map((key) => key.toHuman() as any) + .filter((value) => value[0] !== 'FeeEstimation') + .map(([{ ExchangeRate }]) => + getCurrencyFromIdPrimitive(window.bridge.api.createType('InterbtcPrimitivesCurrencyId', ExchangeRate)) + ); + + // Add wrapped token manually as its exchange rate is always available - equal to BTC. + return [WRAPPED_TOKEN, ...currencies]; +}; + +interface UseGetOracleCurrenciesResult { + data: Array | undefined; +} + +const useGetOracleCurrencies = (): UseGetOracleCurrenciesResult => { + const { getCurrencyFromIdPrimitive, isLoading: isLoadingCurrencies } = useGetCurrencies(true); + + const { data } = useQuery({ + queryKey: 'getOracleCurrencies', + queryFn: getOracleCurrencies(getCurrencyFromIdPrimitive), + enabled: !isLoadingCurrencies + }); + + return { data }; +}; +export { useGetOracleCurrencies }; diff --git a/src/utils/hooks/api/oracle/use-get-oracle-status.ts b/src/utils/hooks/api/oracle/use-get-oracle-status.ts new file mode 100644 index 0000000000..a3b4fd632a --- /dev/null +++ b/src/utils/hooks/api/oracle/use-get-oracle-status.ts @@ -0,0 +1,31 @@ +import { useQuery } from 'react-query'; + +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +interface UseGetOracleStatusResult { + data: OracleStatus | undefined; + isLoading: boolean; +} + +enum OracleStatus { + ONLINE = 'ONLINE', + OFFLINE = 'OFFLINE' +} + +const getOracleStatus = async (): Promise => { + const isOracleOnline = await window.bridge.oracle.isOnline(); + return isOracleOnline ? OracleStatus.ONLINE : OracleStatus.OFFLINE; +}; + +const useGetOracleStatus = (): UseGetOracleStatusResult => { + const { data, isLoading } = useQuery({ + queryKey: 'oracle-status', + queryFn: getOracleStatus, + enabled: window.bridge !== undefined, + refetchInterval: REFETCH_INTERVAL.MINUTE + }); + + return { data, isLoading }; +}; + +export { OracleStatus, useGetOracleStatus }; diff --git a/src/utils/hooks/api/tokens/use-get-balances.tsx b/src/utils/hooks/api/tokens/use-get-balances.tsx index 27ba5f300c..d975710a09 100644 --- a/src/utils/hooks/api/tokens/use-get-balances.tsx +++ b/src/utils/hooks/api/tokens/use-get-balances.tsx @@ -1,4 +1,4 @@ -import { ChainBalance, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { ChainBalance, CurrencyExt } from '@interlay/interbtc-api'; import { AccountId } from '@polkadot/types/interfaces'; import { useCallback } from 'react'; import { useErrorHandler } from 'react-error-boundary'; @@ -6,7 +6,6 @@ import { useQuery, UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; -import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { useSubstrateSecureState } from '@/lib/substrate'; import { REFETCH_INTERVAL } from '@/utils/constants/api'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; @@ -55,25 +54,7 @@ const useGetBalances = (): UseGetBalances => { const getBalance = useCallback((ticker: string) => data?.[ticker], [data]); - // return available balance as well known as free field (ChainBalance). - // if the ticker is governance, the necessary for fees will be deducted - // from the return value - const getAvailableBalance = useCallback( - (ticker: string) => { - const { transferable } = getBalance(ticker) || {}; - - if (ticker === GOVERNANCE_TOKEN.ticker) { - if (!transferable) return undefined; - - const governanceBalance = transferable.sub(TRANSACTION_FEE_AMOUNT); - - return governanceBalance.toBig().gte(0) ? governanceBalance : newMonetaryAmount(0, governanceBalance.currency); - } - - return transferable; - }, - [getBalance] - ); + const getAvailableBalance = useCallback((ticker: string) => getBalance(ticker)?.transferable, [getBalance]); return { ...queryResult, getBalance, getAvailableBalance }; }; diff --git a/src/utils/hooks/api/use-get-collateral-currencies.tsx b/src/utils/hooks/api/use-get-collateral-currencies.tsx index 2e88864af9..2fde1a7d1f 100644 --- a/src/utils/hooks/api/use-get-collateral-currencies.tsx +++ b/src/utils/hooks/api/use-get-collateral-currencies.tsx @@ -3,6 +3,7 @@ import { useQuery, UseQueryResult } from 'react-query'; const getCurrencies = async (): Promise> => getCollateralCurrencies(window.bridge.api); +// TODO: adapt to lastest approach const useGetCollateralCurrencies = (bridgeLoaded: boolean): UseQueryResult> => { return useQuery({ queryKey: 'getCollateralCurrencies', queryFn: getCurrencies, enabled: bridgeLoaded }); }; diff --git a/src/utils/hooks/api/use-get-currencies.tsx b/src/utils/hooks/api/use-get-currencies.tsx index 5be4a1bff0..8d7c5c5d44 100644 --- a/src/utils/hooks/api/use-get-currencies.tsx +++ b/src/utils/hooks/api/use-get-currencies.tsx @@ -2,6 +2,7 @@ import { CurrencyExt, InterbtcPrimitivesCurrencyId, tokenSymbolToCurrency } from import { useCallback } from 'react'; import { useQuery, UseQueryResult } from 'react-query'; +import { CurrencySquidFormat } from '@/types/currency'; import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; import { FeatureFlags, useFeatureFlag } from '../use-feature-flag'; @@ -10,6 +11,7 @@ type UseGetCurrenciesResult = UseQueryResult> & { getCurrencyFromTicker: (ticker: string) => CurrencyExt; getForeignCurrencyFromId: (id: number) => CurrencyExt; getCurrencyFromIdPrimitive: (currencyPrimitive: InterbtcPrimitivesCurrencyId) => CurrencyExt; + getCurrencyFromSquidFormat: (currencySquidFormat: CurrencySquidFormat) => CurrencyExt; }; const getCurrencies = async (featureFlags: { lending: boolean; amm: boolean }): Promise> => { @@ -105,7 +107,29 @@ const useGetCurrencies = (bridgeLoaded: boolean): UseGetCurrenciesResult => { [getForeignCurrencyFromId, getLendCurrencyFromId] ); - return { ...queryResult, getCurrencyFromTicker, getForeignCurrencyFromId, getCurrencyFromIdPrimitive }; + const getCurrencyFromSquidFormat = useCallback( + (currencySquidFormat: CurrencySquidFormat) => { + switch (currencySquidFormat.__typename) { + case 'NativeToken': + return getCurrencyFromTicker(currencySquidFormat.token); + case 'ForeignAsset': + return getForeignCurrencyFromId(currencySquidFormat.asset); + case 'LendToken': + return getLendCurrencyFromId(currencySquidFormat.lendTokenId); + default: + throw new Error(`No handling implemented for currency format of ${currencySquidFormat}`); + } + }, + [getCurrencyFromTicker, getForeignCurrencyFromId, getLendCurrencyFromId] + ); + + return { + ...queryResult, + getCurrencyFromTicker, + getForeignCurrencyFromId, + getCurrencyFromIdPrimitive, + getCurrencyFromSquidFormat + }; }; export { useGetCurrencies }; diff --git a/src/utils/hooks/api/use-get-exchange-rate.tsx b/src/utils/hooks/api/use-get-exchange-rate.tsx new file mode 100644 index 0000000000..81e176c3e1 --- /dev/null +++ b/src/utils/hooks/api/use-get-exchange-rate.tsx @@ -0,0 +1,26 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { Currency, ExchangeRate } from '@interlay/monetary-js'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryResult } from 'react-query'; + +type UseGetExchangeRateResult = UseQueryResult, unknown>; + +const getExchangeRateData = ( + collateralCurrency: CurrencyExt, + wrappedCurrency?: Currency +): Promise> => + window.bridge.oracle.getExchangeRate(collateralCurrency, wrappedCurrency); + +const useGetExchangeRate = (collateralCurrency: CurrencyExt, wrappedCurrency?: Currency): UseGetExchangeRateResult => { + const queryResult = useQuery({ + queryKey: ['exchange-rates', collateralCurrency, wrappedCurrency], + queryFn: () => getExchangeRateData(collateralCurrency, wrappedCurrency) + }); + + useErrorHandler(queryResult.error); + + return queryResult; +}; + +export { useGetExchangeRate }; +export type { UseGetExchangeRateResult }; diff --git a/src/utils/hooks/api/use-get-pools-trading-apr.tsx b/src/utils/hooks/api/use-get-pools-trading-apr.tsx new file mode 100644 index 0000000000..d985298e35 --- /dev/null +++ b/src/utils/hooks/api/use-get-pools-trading-apr.tsx @@ -0,0 +1,188 @@ +import { + CurrencyExt, + isForeignAsset, + LiquidityPool, + newMonetaryAmount, + PooledCurrencies, + TickerToData +} from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { gql, GraphQLClient } from 'graphql-request'; +import { useCallback } from 'react'; +import { useQuery } from 'react-query'; + +import { convertMonetaryAmountToBigUSD } from '@/common/utils/utils'; +import { SQUID_URL } from '@/constants'; +import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; +import { CurrencySquidFormat } from '@/types/currency'; +import { MILLISECONDS_PER_DAY } from '@/utils/constants/date-time'; +import { getTokenPrice } from '@/utils/helpers/prices'; + +import { useGetLiquidityPools } from './amm/use-get-liquidity-pools'; +import { useGetCurrencies } from './use-get-currencies'; +import { useGetPrices } from './use-get-prices'; + +const graphQLClient = new GraphQLClient(SQUID_URL, { + headers: { + 'Content-Type': 'application/json' + } +}); + +const getPoolDataId = (pool: LiquidityPool): string => + `${pool.type}_${pool.pooledCurrencies.map(({ currency }) => currency.ticker).join('_')}`; + +const getPooledCurrenciesCondition = (pooledCurrencies: PooledCurrencies) => + `${pooledCurrencies + .map(({ currency }) => { + const currencyId = isForeignAsset(currency) ? currency.foreignAsset.id.toString() : currency.ticker; + return `AND: {poolId_contains: "${currencyId}"`; + }) + .join()}${pooledCurrencies.map((_) => '}').join('')}`; + +const getPoolsVolumesQuery = (pools: Array): string => gql` + fragment AmountFields on PooledAmount { + amount + amountHuman + token { + ... on NativeToken { + __typename + token + } + ... on ForeignAsset { + __typename + asset + } + ... on StableLpToken { + __typename + poolId + } + } + } + + fragment PoolVolumeFields on CumulativeDexTradingVolumePerPool { + poolId + poolType + tillTimestamp + amounts { + ...AmountFields + } + } + + query poolVolumes($start: DateTime, $end: DateTime) { + ${pools + .map((pool: LiquidityPool) => { + const poolDataId = getPoolDataId(pool); + const pooledCurrenciesCondition = getPooledCurrenciesCondition(pool.pooledCurrencies); + return `${poolDataId}__startVolumes: cumulativeDexTradingVolumePerPools(limit: 1, orderBy: tillTimestamp_ASC, where: {tillTimestamp_gte: $start, ${pooledCurrenciesCondition}}) { + ...PoolVolumeFields + } + ${poolDataId}__endVolumes:cumulativeDexTradingVolumePerPools(limit: 1, orderBy: tillTimestamp_DESC, where: {tillTimestamp_lte: $end, ${pooledCurrenciesCondition}}) { + ...PoolVolumeFields + } + `; + }) + .join('\n')} + } +`; + +const getYearlyVolume = ( + volumes: any, + dataId: string, + getCurrencyFromSquidFormat: (currencySquid: CurrencySquidFormat) => CurrencyExt +): Array> => { + const startVolumes = volumes[`${dataId}__startVolumes`]; + const endVolumes = volumes[`${dataId}__endVolumes`]; + if (startVolumes.length === 0 || endVolumes.length === 0) { + return []; + } + + const startDate = new Date(startVolumes[0].tillTimestamp); + const endDate = new Date(endVolumes[0].tillTimestamp); + const daysDelta = (endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY; + if (daysDelta < 1) { + return []; + } + // Extrapolate to yearly volume amount. + const toYearFactor = 365 / daysDelta; + + return startVolumes[0].amounts.map((amount: any, index: number) => { + const currency = getCurrencyFromSquidFormat(amount.token); + const endAmount = Big(endVolumes[0].amounts[index].amount); + const amountDelta = endAmount.sub(Big(amount.amount)); + + const yearlyVolumeAmount = amountDelta.mul(toYearFactor); + + return newMonetaryAmount(yearlyVolumeAmount, currency); + }); +}; + +interface UseGetPoolsTradingAPR { + isLoading: boolean; + getTradingAprOfPool: (pool: LiquidityPool) => number; +} + +const useGetPoolsTradingApr = (): UseGetPoolsTradingAPR => { + const { data: pools } = useGetLiquidityPools(); + const { isLoading: isLoadingCurrencies, getCurrencyFromSquidFormat } = useGetCurrencies(true); + const prices = useGetPrices(); + + const getPoolsTradingAPR = useCallback(async (): Promise> => { + if (!pools || !prices || isLoadingCurrencies) { + return {}; + } + + const query = getPoolsVolumesQuery(pools); + const endDate = new Date(); + const startDate = new Date(); + startDate.setMonth(endDate.getMonth() - 1); + + const volumes = await graphQLClient.request(query, { start: startDate.toISOString(), end: endDate.toISOString() }); + + const result = pools.map((pool: LiquidityPool) => { + const dataId = getPoolDataId(pool); + + const yearlyVolumes = getYearlyVolume(volumes, dataId, getCurrencyFromSquidFormat); + if (yearlyVolumes.length === 0) { + return { [dataId]: 0 }; + } + + const totalVolumeInUSD = yearlyVolumes + .reduce( + (total, amount) => + total.add(convertMonetaryAmountToBigUSD(amount, getTokenPrice(prices, amount.currency.ticker)?.usd)), + Big(0) + ) + // Divide by amount of pooled currencies. + .div(pool.pooledCurrencies.length); + + const totalLiquidityUSD = calculateTotalLiquidityUSD(pool.pooledCurrencies, prices); + + const yearlyAPR = totalVolumeInUSD.mul(pool.tradingFee).div(totalLiquidityUSD).mul(100).toNumber(); + return { [dataId]: yearlyAPR }; + }); + + return result.reduce((result, pool) => ({ ...result, ...pool })); + }, [pools, prices, isLoadingCurrencies, getCurrencyFromSquidFormat]); + + const { isLoading, data } = useQuery({ + queryKey: 'amm-pools-trading-apr', + queryFn: getPoolsTradingAPR, + enabled: !!pools || !!prices || !isLoadingCurrencies + }); + + const getTradingAprOfPool = useCallback( + (pool: LiquidityPool): number => { + if (!data) { + return 0; + } + const poolDataId = getPoolDataId(pool); + return data[poolDataId] || 0; + }, + [data] + ); + + return { isLoading, getTradingAprOfPool }; +}; + +export { useGetPoolsTradingApr }; diff --git a/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx b/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx index f789377278..37143436bf 100644 --- a/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx +++ b/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx @@ -5,7 +5,6 @@ import { useQuery } from 'react-query'; import { formatDateTimePrecise } from '@/common/utils/utils'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; -import { TransactionTableData } from '@/pages/Vaults/Vault/components/TransactionHistory/TransactionTable'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import issuesFetcher, { getIssueWithStatus, ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; @@ -16,6 +15,19 @@ import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; import { useGetCurrencies } from '../use-get-currencies'; +type TransactionStatus = 'pending' | 'cancelled' | 'completed' | 'confirmed' | 'received' | 'retried'; + +type TransactionTableData = { + id: string; + request: string; + date: string; + amount: string; + status: TransactionStatus; + // This `any` is an upstream issue - issue and redeem request data + // hasn't been typed properly. This is a TODO, but out of scope here. + requestData: any; +}; + // TODO: Bad stuff happening here! `getIssueWithStatus` and `getRedeemWithStatus` are // mutating the data which is why `status` is being set like this. We need to refactor // the modal and fetchers to handle all use cases better. diff --git a/src/utils/hooks/api/xcm/use-xcm-bridge.ts b/src/utils/hooks/api/xcm/use-xcm-bridge.ts index 491a8931d3..61543c9f42 100644 --- a/src/utils/hooks/api/xcm/use-xcm-bridge.ts +++ b/src/utils/hooks/api/xcm/use-xcm-bridge.ts @@ -63,7 +63,8 @@ const useXCMBridge = (): UseXCMBridge => { const queryResult = useQuery({ queryKey, queryFn: initXCMBridge, - refetchInterval: false + refetchInterval: false, + refetchOnWindowFocus: false }); const { data, error } = queryResult; diff --git a/src/utils/hooks/transaction/extrinsics/lib.ts b/src/utils/hooks/transaction/extrinsics/lib.ts index 0d2b90a727..aed8b5b968 100644 --- a/src/utils/hooks/transaction/extrinsics/lib.ts +++ b/src/utils/hooks/transaction/extrinsics/lib.ts @@ -50,12 +50,16 @@ const getLibExtrinsic = async (params: LibActions): Promise => { return window.bridge.loans.lend(...params.args); case Transaction.LOANS_REPAY: return window.bridge.loans.repay(...params.args); - case Transaction.LOANS_REPAY_ALL: - return window.bridge.loans.repayAll(...params.args); + case Transaction.LOANS_REPAY_ALL: { + const [underlyingCurrency] = params.args; + return window.bridge.loans.repayAll(underlyingCurrency); + } case Transaction.LOANS_WITHDRAW: return window.bridge.loans.withdraw(...params.args); - case Transaction.LOANS_WITHDRAW_ALL: - return window.bridge.loans.withdrawAll(...params.args); + case Transaction.LOANS_WITHDRAW_ALL: { + const [underlyingCurrency] = params.args; + return window.bridge.loans.withdrawAll(underlyingCurrency); + } case Transaction.LOANS_DISABLE_COLLATERAL: return window.bridge.loans.disableAsCollateral(...params.args); case Transaction.LOANS_ENABLE_COLLATERAL: diff --git a/src/utils/hooks/transaction/types/hook.ts b/src/utils/hooks/transaction/types/hook.ts new file mode 100644 index 0000000000..3ee83e942a --- /dev/null +++ b/src/utils/hooks/transaction/types/hook.ts @@ -0,0 +1,109 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; +import { ISubmittableResult } from '@polkadot/types/types'; +import { UseMutationOptions, UseMutationResult } from 'react-query'; + +import { Transaction, TransactionActions, TransactionArgs } from '.'; + +type FeeEstimateResult = { + amount?: MonetaryAmount; + isValid?: boolean; +}; + +type TransactionResult = { status: 'success' | 'error'; data: ISubmittableResult; error?: Error }; + +type ExecuteArgs = { + // Executes the transaction + execute(...args: TransactionArgs): void; + // Similar to execute but returns a promise which can be awaited. + executeAsync(...args: TransactionArgs): Promise; +}; + +type ExecuteTypeArgs = { + execute(type: D, ...args: TransactionArgs): void; + executeAsync(type: D, ...args: TransactionArgs): Promise; +}; + +type ExecuteFunctions = ExecuteArgs | ExecuteTypeArgs; + +type EstimateArgs = { + estimate(...args: TransactionArgs): void; + setCurrency(ticker?: string): { estimate(...args: TransactionArgs): void }; +}; + +type EstimateTypeArgs = { + estimate(type: D, ...args: TransactionArgs): void; + setCurrency(ticker?: string): { estimate(type: D, ...args: TransactionArgs): void }; +}; + +type EstimateFunctions = EstimateArgs | EstimateTypeArgs; + +type EstimateFeeParams = { ticker: string; params: TransactionActions }; + +type ReactQueryUseFeeEstimateResult = Omit< + UseMutationResult, + 'mutate' | 'mutateAsync' +>; + +type UseFeeEstimateResult = { + defaultCurrency: CurrencyExt; + detailsProps: { + defaultCurrency: CurrencyExt; + amount?: MonetaryAmount; + showInsufficientBalance?: boolean; + }; +} & ReactQueryUseFeeEstimateResult & + EstimateFunctions; + +type ReactQueryUseTransactionResult = Omit< + UseMutationResult, + 'mutate' | 'mutateAsync' +>; + +type UseTransactionResult = { + reject: (error?: Error) => void; + isSigned: boolean; + fee: UseFeeEstimateResult; +} & ReactQueryUseTransactionResult & + ExecuteFunctions; + +type UseTransactionOptions = Omit< + UseMutationOptions, + 'mutationFn' +> & { + customStatus?: ExtrinsicStatus['type']; + onSigning?: (variables: TransactionActions) => void; + showSuccessModal?: boolean; +}; + +type UseTransactionWithType = Omit< + Exclude, ExecuteTypeArgs>, + 'fee' +> & { + fee: Exclude, EstimateTypeArgs>; +}; + +type UseTransactionWithoutType = Omit< + Exclude, ExecuteArgs>, + 'fee' +> & { + fee: Exclude, EstimateArgs>; +}; + +export type { + EstimateArgs, + EstimateFeeParams, + EstimateFunctions, + EstimateTypeArgs, + ExecuteArgs, + ExecuteFunctions, + ExecuteTypeArgs, + FeeEstimateResult, + TransactionResult, + UseFeeEstimateResult, + UseTransactionOptions, + UseTransactionResult, + UseTransactionWithoutType, + UseTransactionWithType +}; diff --git a/src/utils/hooks/transaction/types/index.ts b/src/utils/hooks/transaction/types/index.ts index 81d43097a0..bad9729c68 100644 --- a/src/utils/hooks/transaction/types/index.ts +++ b/src/utils/hooks/transaction/types/index.ts @@ -66,7 +66,7 @@ type TransactionEvents = { interface TransactionAction { accountAddress: string; - events: TransactionEvents; + events?: TransactionEvents; timestamp: number; customStatus?: ExtrinsicStatus['type']; } diff --git a/src/utils/hooks/transaction/types/loans.ts b/src/utils/hooks/transaction/types/loans.ts index 27797c68d9..e6d33723e0 100644 --- a/src/utils/hooks/transaction/types/loans.ts +++ b/src/utils/hooks/transaction/types/loans.ts @@ -1,4 +1,5 @@ -import { InterBtcApi } from '@interlay/interbtc-api'; +import { CurrencyExt, InterBtcApi } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; import { Transaction } from '../types'; import { TransactionAction } from '.'; @@ -43,9 +44,11 @@ interface LoansRepayAction extends TransactionAction { args: Parameters; } +type CustomLoansRepayAllArgs = [calculatedLimit: MonetaryAmount]; + interface LoansRepayAllAction extends TransactionAction { type: Transaction.LOANS_REPAY_ALL; - args: Parameters; + args: [...Parameters, ...CustomLoansRepayAllArgs]; } type LoansActions = diff --git a/src/utils/hooks/transaction/use-transaction-notifications.tsx b/src/utils/hooks/transaction/use-transaction-notifications.tsx index abcb7fda2e..0d7dd5984d 100644 --- a/src/utils/hooks/transaction/use-transaction-notifications.tsx +++ b/src/utils/hooks/transaction/use-transaction-notifications.tsx @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'; import { updateTransactionModal } from '@/common/actions/general.actions'; import { TransactionModalData } from '@/common/types/util.types'; import { EXTERNAL_PAGES, EXTERNAL_URL_PARAMETERS } from '@/utils/constants/links'; -import { NotificationToast, NotificationToastAction, useNotifications } from '@/utils/context/Notifications'; +import { NotificationToastAction, NotificationToastType, useNotifications } from '@/utils/context/Notifications'; import { TransactionActions, TransactionStatus } from './types'; import { TransactionResult } from './use-transaction'; @@ -45,7 +45,10 @@ const useTransactionNotifications = ({ const url = data?.txHash && - EXTERNAL_PAGES.SUBSCAN.BLOCK.replace(`:${EXTERNAL_URL_PARAMETERS.SUBSCAN.BLOCK.HASH}`, data.txHash.toString()); + EXTERNAL_PAGES.SUBSCAN.EXTRINSIC.replace( + `:${EXTERNAL_URL_PARAMETERS.SUBSCAN.BLOCK.HASH}`, + data.txHash.toString() + ); const description = getTransactionDescription(variables, status, t); @@ -60,7 +63,7 @@ const useTransactionNotifications = ({ // creating or updating notification if (toastInfo.isOnScreen) { const toastAction: NotificationToastAction = { - type: NotificationToast.TRANSACTION, + type: NotificationToastType.TRANSACTION, props: { variant: status, url, diff --git a/src/utils/hooks/transaction/use-transaction.ts b/src/utils/hooks/transaction/use-transaction.ts index 3fa2cda32e..a83761d337 100644 --- a/src/utils/hooks/transaction/use-transaction.ts +++ b/src/utils/hooks/transaction/use-transaction.ts @@ -1,122 +1,154 @@ -import { ExtrinsicStatus } from '@polkadot/types/interfaces'; -import { ISubmittableResult } from '@polkadot/types/types'; +import { CurrencyExt, LiquidityPool } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; import { mergeProps } from '@react-aria/utils'; -import { useCallback, useState } from 'react'; -import { MutationFunction, useMutation, UseMutationOptions, UseMutationResult } from 'react-query'; +import { useCallback, useRef, useState } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { MutationFunction, useMutation } from 'react-query'; +import { useInterval } from 'react-use'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { useSubstrate } from '@/lib/substrate'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; +import { useGetLiquidityPools } from '../api/amm/use-get-liquidity-pools'; +import { useGetBalances } from '../api/tokens/use-get-balances'; +import { useGetCurrencies } from '../api/use-get-currencies'; import { getExtrinsic, getStatus } from './extrinsics'; -import { Transaction, TransactionActions, TransactionArgs } from './types'; +import { Transaction, TransactionActions } from './types'; +import { + EstimateFeeParams, + FeeEstimateResult, + TransactionResult, + UseTransactionOptions, + UseTransactionResult, + UseTransactionWithoutType, + UseTransactionWithType +} from './types/hook'; import { useTransactionNotifications } from './use-transaction-notifications'; +import { estimateTransactionFee, getActionAmount, wrapWithTxFeeSwap } from './utils/fee'; +import { getParams } from './utils/params'; import { submitTransaction } from './utils/submit'; -type TransactionResult = { status: 'success' | 'error'; data: ISubmittableResult; error?: Error }; +const defaultFeeCurrency = GOVERNANCE_TOKEN; -// TODO: add feeEstimate and feeEstimateAsync -type ExecuteArgs = { - // Executes the transaction - execute(...args: TransactionArgs): void; - // Similar to execute but returns a promise which can be awaited. - executeAsync(...args: TransactionArgs): Promise; -}; - -// TODO: add feeEstimate and feeEstimateAsync -type ExecuteTypeArgs = { - execute(type: D, ...args: TransactionArgs): void; - executeAsync(type: D, ...args: TransactionArgs): Promise; -}; - -type ExecuteFunctions = ExecuteArgs | ExecuteTypeArgs; - -type ReactQueryUseMutationResult = Omit< - UseMutationResult, - 'mutate' | 'mutateAsync' ->; - -type UseTransactionResult = { - reject: (error?: Error) => void; - isSigned: boolean; -} & ReactQueryUseMutationResult & - ExecuteFunctions; - -const mutateTransaction: MutationFunction = async (params) => { - const extrinsics = await getExtrinsic(params); +const mutateTransaction: ( + feeAmount: MonetaryAmount | undefined, + pools: Array +) => MutationFunction = (feeAmount, pools) => async (params) => { const expectedStatus = params.customStatus || getStatus(params.type); - - return submitTransaction(window.bridge.api, params.accountAddress, extrinsics, expectedStatus, params.events); -}; - -type UseTransactionOptions = Omit< - UseMutationOptions, - 'mutationFn' -> & { - customStatus?: ExtrinsicStatus['type']; - onSigning?: (variables: TransactionActions) => void; - showSuccessModal?: boolean; + const baseExtrinsic = await getExtrinsic(params); + const feeWrappedExtrinsic = wrapWithTxFeeSwap(feeAmount, baseExtrinsic, pools); + + return submitTransaction( + window.bridge.api, + params.accountAddress, + feeWrappedExtrinsic, + expectedStatus, + params.events + ); }; // The three declared functions are use to infer types on diferent implementations -function useTransaction( - type: T, - options?: UseTransactionOptions -): Exclude, ExecuteTypeArgs>; -function useTransaction( - options?: UseTransactionOptions -): Exclude, ExecuteArgs>; +function useTransaction(type: T, options?: UseTransactionOptions): UseTransactionWithType; +function useTransaction(options?: UseTransactionOptions): UseTransactionWithoutType; function useTransaction( typeOrOptions?: T | UseTransactionOptions, options?: UseTransactionOptions ): UseTransactionResult { const { state } = useSubstrate(); + const { data: pools } = useGetLiquidityPools(); + const { getCurrencyFromTicker } = useGetCurrencies(true); + const { getBalance } = useGetBalances(); const [isSigned, setSigned] = useState(false); const { showSuccessModal, customStatus, ...mutateOptions } = (typeof typeOrOptions === 'string' ? options : typeOrOptions) || {}; - const notifications = useTransactionNotifications({ showSuccessModal }); + const mutateFee: ( + pools: Array + ) => MutationFunction = useCallback( + (pools) => async ({ ticker, params }) => { + const currency = getCurrencyFromTicker(ticker); - const handleMutate = () => setSigned(false); + const feeBalance = getBalance(currency.ticker)?.transferable; - const handleSigning = () => setSigned(true); + // returning undefined means that action amount is not based on fee currency + const actionAmount = getActionAmount(params, currency); - const handleError = (error: Error) => console.error(error.message); + const availableBalance = actionAmount ? feeBalance?.sub(actionAmount) : feeBalance; + + const amount = await estimateTransactionFee(currency, pools || [], params); + + return { + amount, + isValid: !!availableBalance && !!amount && availableBalance.gte(amount) + }; + }, + [getBalance, getCurrencyFromTicker] + ); + + const { mutate: feeMutate, ...feeMutation } = useMutation( + mutateFee(pools || []) + ); + + useErrorHandler(feeMutation.error); + + const estimateFeeParamsRef = useRef(); + + const handleEstimateFee = useCallback( + (ticker: string = defaultFeeCurrency.ticker) => ( + ...args: Parameters['fee']['estimate']> + ) => { + const params = getParams(args, typeOrOptions, customStatus); + + const variables = { ticker, params }; + + estimateFeeParamsRef.current = variables; + + feeMutate(variables); + }, + [typeOrOptions, customStatus, feeMutate] + ); + + const handleSetCurrency = (ticker?: string) => ({ estimate: handleEstimateFee(ticker) }); + + // Re-estimate fee based on latest stored variables + useInterval(() => { + if (!estimateFeeParamsRef.current || feeMutation.isLoading) return; + + feeMutate(estimateFeeParamsRef.current); + }, REFETCH_INTERVAL.MINUTE); + + const notifications = useTransactionNotifications({ showSuccessModal }); const { onSigning, ...optionsProp } = mergeProps( mutateOptions, { - onMutate: handleMutate, - onSigning: handleSigning, - onError: handleError + onMutate: () => setSigned(false), + onSigning: () => setSigned(true), + onError: (error: Error) => console.error(error.message), + onSuccess: () => feeMutation.reset() }, notifications.mutationProps ); - const { mutate, mutateAsync, ...transactionMutation } = useMutation(mutateTransaction, optionsProp); + const { mutate, mutateAsync, ...transactionMutation } = useMutation( + mutateTransaction(feeMutation.data?.amount, pools || []), + optionsProp + ); // Handles params for both type of implementations - const getParams = useCallback( + const getBaseParams = useCallback( (args: Parameters['execute']>) => { - let params = {}; - - // Assign correct params for when transaction type is declared on hook params - if (typeof typeOrOptions === 'string') { - params = { type: typeOrOptions, args }; - } else { - // Assign correct params for when transaction type is declared on execution level - const [type, ...restArgs] = args; - params = { type, args: restArgs }; - } + const params = getParams(args, typeOrOptions, customStatus); // Execution should only ran when authenticated const accountAddress = state.selectedAccount?.address; const variables = { ...params, - accountAddress, - timestamp: new Date().getTime(), - customStatus + accountAddress } as TransactionActions; return { @@ -131,20 +163,20 @@ function useTransaction( const handleExecute = useCallback( (...args: Parameters['execute']>) => { - const params = getParams(args); + const params = getBaseParams(args); return mutate(params); }, - [getParams, mutate] + [getBaseParams, mutate] ); const handleExecuteAsync = useCallback( (...args: Parameters['executeAsync']>) => { - const params = getParams(args); + const params = getBaseParams(args); return mutateAsync(params); }, - [getParams, mutateAsync] + [getBaseParams, mutateAsync] ); const handleReject = (error?: Error) => { @@ -161,9 +193,21 @@ function useTransaction( isSigned, reject: handleReject, execute: handleExecute, - executeAsync: handleExecuteAsync + executeAsync: handleExecuteAsync, + fee: { + ...feeMutation, + defaultCurrency: defaultFeeCurrency, + estimate: handleEstimateFee(), + setCurrency: handleSetCurrency, + detailsProps: { + defaultCurrency: defaultFeeCurrency, + amount: feeMutation.data?.amount, + // could possible be undefined, so we want to check for that + showInsufficientBalance: feeMutation.data?.isValid === false + } + } }; } export { useTransaction }; -export type { TransactionResult, UseTransactionResult }; +export type { FeeEstimateResult, TransactionResult, UseTransactionOptions, UseTransactionResult }; diff --git a/src/utils/hooks/transaction/utils/fee.ts b/src/utils/hooks/transaction/utils/fee.ts new file mode 100644 index 0000000000..2eeaaf24e2 --- /dev/null +++ b/src/utils/hooks/transaction/utils/fee.ts @@ -0,0 +1,179 @@ +import { + CurrencyExt, + CurrencyId, + ExtrinsicData, + isCurrencyEqual, + LiquidityPool, + MultiPath, + newCurrencyId, + Trade +} from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { SubmittableExtrinsic } from '@polkadot/api/types'; + +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; + +import { getExtrinsic } from '../extrinsics'; +import { Transaction, TransactionActions } from '../types'; + +// 50% on top of trade to be safe (slippage, different weight) +const OUTPUT_AMOUNT_SAFE_OFFSET_MULTIPLIER = 1.5; + +const constructSwapPathPrimitive = (path: MultiPath): Array => { + const inputCurrency = newCurrencyId(window.bridge.api, path[0].input); + return [inputCurrency, ...path.map(({ output }) => newCurrencyId(window.bridge.api, output))]; +}; + +// Recursively double input amount until the trade with higher than minimum output +// amount is found. +const getOptimalTradeForTxFeeSwap = ( + minOutputAmount: MonetaryAmount, + inputAmount: MonetaryAmount, + pools: Array +): Trade => { + const trade = window.bridge.amm.getOptimalTrade(inputAmount, minOutputAmount.currency, pools); + + if (trade === null || trade.outputAmount.lt(minOutputAmount)) { + // If the output amount is lower than minimum trade or minimum txFee + // then double the input currency amount and check again. + return getOptimalTradeForTxFeeSwap(minOutputAmount, inputAmount.mul(2), pools); + } + return trade; +}; + +const getTxFeeSwapData = async ( + nativeTxFee: MonetaryAmount, + feeCurrency: CurrencyExt, + baseExtrinsic: SubmittableExtrinsic<'promise'>, + pools: Array +): Promise<{ swapPathPrimitive: Array; inputAmount: MonetaryAmount }> => { + // First we construct reverse direction trade to get estimated swap path and amount + const reverseDirectionTrade = window.bridge.amm.getOptimalTrade(nativeTxFee, feeCurrency, pools); + if (reverseDirectionTrade === null) { + throw new Error( + `Not possible to exchange ${feeCurrency.name} for ${nativeTxFee.currency.name}: trade path not found.` + ); + } + // Final native token transaction fee is estimated for base extrinsic wrapped in multiTransactionPayment call. + // NOTE: We assume here the reverse direction trade has similar weight. + const reverseDirectionExtrinsic = window.bridge.api.tx.multiTransactionPayment.withFeeSwapPath( + constructSwapPathPrimitive(reverseDirectionTrade.path), + reverseDirectionTrade.outputAmount.toString(true), + baseExtrinsic + ); + const withSwapTxFee = await window.bridge.transaction.getFeeEstimate(reverseDirectionExtrinsic); + const { inputAmount, path } = getOptimalTradeForTxFeeSwap( + withSwapTxFee.mul(OUTPUT_AMOUNT_SAFE_OFFSET_MULTIPLIER), + reverseDirectionTrade.outputAmount, + pools + ); + const swapPathPrimitive = constructSwapPathPrimitive(path); + + return { inputAmount, swapPathPrimitive }; +}; + +const estimateTransactionFee: ( + feeCurrency: CurrencyExt, + pools: Array, + params: TransactionActions +) => Promise> = async (feeCurrency, pools, params) => { + const baseExtrinsicData = await getExtrinsic(params); + const baseTxFee = await window.bridge.transaction.getFeeEstimate(baseExtrinsicData.extrinsic); + + if (isCurrencyEqual(feeCurrency, GOVERNANCE_TOKEN)) { + return baseTxFee; + } + + const { inputAmount: wrappedInSwapTxFee } = await getTxFeeSwapData( + baseTxFee, + feeCurrency, + baseExtrinsicData.extrinsic, + pools + ); + + return wrappedInSwapTxFee; +}; + +const wrapWithTxFeeSwap = ( + feeAmount: MonetaryAmount | undefined, + baseExtrinsicData: ExtrinsicData, + pools: Array +): ExtrinsicData => { + if (feeAmount === undefined || isCurrencyEqual(feeAmount.currency, GOVERNANCE_TOKEN)) { + return baseExtrinsicData; + } + + const trade = window.bridge.amm.getOptimalTrade(feeAmount, GOVERNANCE_TOKEN, pools); + + if (trade === null) { + throw new Error(`Trade path for ${feeAmount.currency.name} -> ${GOVERNANCE_TOKEN.name} not found.`); + } + + const swapPath = constructSwapPathPrimitive(trade.path); + const wrappedCall = window.bridge.api.tx.multiTransactionPayment.withFeeSwapPath( + swapPath, + feeAmount.toString(true), + baseExtrinsicData.extrinsic + ); + + return { extrinsic: wrappedCall }; +}; + +// MEMO: if we ever need toadd QTOKENS as a possible fee +// token, we will need to handle it here for loan withdraw and +// withdrawAll +const getActionAmount = ( + params: TransactionActions, + feeCurrency: CurrencyExt +): MonetaryAmount | undefined => { + let amounts: MonetaryAmount[] | undefined; + + switch (params.type) { + case Transaction.REDEEM_REQUEST: { + const [amount] = params.args; + amounts = [amount]; + break; + } + case Transaction.TOKENS_TRANSFER: { + const [, amount] = params.args; + amounts = [amount]; + break; + } + /* START - AMM */ + case Transaction.AMM_SWAP: { + const [trade] = params.args; + amounts = [trade.inputAmount]; + break; + } + case Transaction.AMM_ADD_LIQUIDITY: { + const [pooledAmounts] = params.args; + amounts = pooledAmounts; + break; + } + case Transaction.AMM_REMOVE_LIQUIDITY: { + const [amount] = params.args; + amounts = [amount]; + break; + } + /* END - AMM */ + /* START - LOANS */ + case Transaction.LOANS_REPAY: + case Transaction.LOANS_LEND: { + const [, amount] = params.args; + amounts = [amount]; + break; + } + case Transaction.LOANS_REPAY_ALL: { + const [, calculatedLimit] = params.args; + amounts = [calculatedLimit]; + break; + } + /* END - LOANS */ + } + + if (!amounts) return; + + return amounts.find((amount) => isCurrencyEqual(amount.currency, feeCurrency)); +}; + +export { estimateTransactionFee, getActionAmount, wrapWithTxFeeSwap }; diff --git a/src/utils/hooks/transaction/utils/form.ts b/src/utils/hooks/transaction/utils/form.ts new file mode 100644 index 0000000000..ccfbc58c61 --- /dev/null +++ b/src/utils/hooks/transaction/utils/form.ts @@ -0,0 +1,11 @@ +import { isFormDisabled, useForm } from '@/lib/form'; + +import { Transaction } from '../types'; +import { UseFeeEstimateResult } from '../types/hook'; + +const isTransactionFormDisabled = ( + form: ReturnType, + fee: UseFeeEstimateResult +): boolean => isFormDisabled(form) || !(fee.data && fee.data.isValid); + +export { isTransactionFormDisabled }; diff --git a/src/utils/hooks/transaction/utils/params.ts b/src/utils/hooks/transaction/utils/params.ts new file mode 100644 index 0000000000..2eaaf68810 --- /dev/null +++ b/src/utils/hooks/transaction/utils/params.ts @@ -0,0 +1,29 @@ +import { ExtrinsicStatus } from '@polkadot/types/interfaces'; + +import { Transaction, TransactionActions } from '../types'; +import { ExecuteFunctions } from '../types/hook'; + +const getParams = ( + args: Parameters['execute']>, + typeOrOptions?: T | Record, + customStatus?: ExtrinsicStatus['type'] +): TransactionActions => { + let params = {}; + + // Assign correct params for when transaction type is declared on hook params + if (typeof typeOrOptions === 'string') { + params = { type: typeOrOptions, args }; + } else { + // Assign correct params for when transaction type is declared on execution level + const [type, ...restArgs] = args; + params = { type, args: restArgs }; + } + + return { + ...params, + timestamp: new Date().getTime(), + customStatus + } as TransactionActions; +}; + +export { getParams }; diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 94a1f979f0..55648733f7 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -4,7 +4,8 @@ enum FeatureFlags { WALLET = 'wallet', BANXA = 'banxa', STRATEGIES = 'strategies', - GEOBLOCK = 'geoblock' + GEOBLOCK = 'geoblock', + ONBOARDING = 'onboarding' } const featureFlags: Record = { @@ -13,7 +14,8 @@ const featureFlags: Record = { [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, - [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK + [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK, + [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING }; const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled'; diff --git a/src/utils/hooks/use-local-storage.ts b/src/utils/hooks/use-local-storage.ts index d42db95ad2..0231eae45e 100644 --- a/src/utils/hooks/use-local-storage.ts +++ b/src/utils/hooks/use-local-storage.ts @@ -1,10 +1,14 @@ import { useLocalStorage as useLibLocalStorage } from 'react-use'; enum LocalStorageKey { - TC_SIGNATURES = 'TC_SIGNATURES' + TC_SIGNATURES = 'TC_SIGNATURES', + WALLET_WELCOME_BANNER = 'WALLET_WELCOME_BANNER' } -type TCSignaturesData = Record; +type LocalStorageValueTypes = { + [LocalStorageKey.TC_SIGNATURES]: Record; + [LocalStorageKey.WALLET_WELCOME_BANNER]: boolean; +}; type Options = | { @@ -18,8 +22,10 @@ type Options = | undefined; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -const useLocalStorage = (key: LocalStorageKey, initialValue?: T, options?: Options) => - useLibLocalStorage(key, initialValue, options); +const useLocalStorage = ( + key: T, + initialValue?: LocalStorageValueTypes[T], + options?: Options +) => useLibLocalStorage(key, initialValue, options); export { LocalStorageKey, useLocalStorage }; -export type { TCSignaturesData }; diff --git a/src/utils/hooks/use-select-currency.tsx b/src/utils/hooks/use-select-currency.tsx new file mode 100644 index 0000000000..5f17455811 --- /dev/null +++ b/src/utils/hooks/use-select-currency.tsx @@ -0,0 +1,106 @@ +import { CurrencyExt, LiquidityPool } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { useMemo } from 'react'; +import { useSelector } from 'react-redux'; + +import { StoreType } from '@/common/types/util.types'; +import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; +import { TokenData } from '@/component-library'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; + +import { getCoinIconProps } from '../helpers/coin-icon'; +import { getTokenPrice } from '../helpers/prices'; +import { useGetLiquidityPools } from './api/amm/use-get-liquidity-pools'; +import { useGetOracleCurrencies } from './api/oracle/use-get-oracle-currencies'; +import { useGetBalances } from './api/tokens/use-get-balances'; +import { useGetCurrencies } from './api/use-get-currencies'; +import { useGetPrices } from './api/use-get-prices'; + +type SelectCurrencyResult = { + items: TokenData[]; +}; + +const canBeSwappedForNativeCurrency = (pools: Array) => (currency: CurrencyExt): boolean => { + const trade = window.bridge.amm.getOptimalTrade(new MonetaryAmount(currency, 1), GOVERNANCE_TOKEN, pools); + return trade !== null; +}; + +const canBeUsedAsIssueGriefingCollateral = (oracleCurrencies: Array) => ( + currency: CurrencyExt +): boolean => { + return oracleCurrencies.map(({ ticker }) => ticker).includes(currency.ticker); +}; + +enum SelectCurrencyFilter { + TRADEABLE_FOR_NATIVE_CURRENCY = 'TRADEABLE_FOR_NATIVE_CURRENCY', + ISSUE_GRIEFING_COLLATERAL_CURRENCY = 'ISSUE_GRIEFING_COLLATERAL_CURRENCY' +} + +const useSelectCurrency = (filter?: SelectCurrencyFilter): SelectCurrencyResult => { + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); + + const { data: currencies } = useGetCurrencies(bridgeLoaded); + + const { getAvailableBalance } = useGetBalances(); + const prices = useGetPrices(); + + const { data: pools } = useGetLiquidityPools(); + const { data: oracleCurrencies } = useGetOracleCurrencies(); + + const filteredCurrencies = useMemo(() => { + if (!currencies) { + return []; + } + + switch (filter) { + case SelectCurrencyFilter.TRADEABLE_FOR_NATIVE_CURRENCY: { + if (!pools?.length) { + return [GOVERNANCE_TOKEN]; + } + + return currencies.filter(canBeSwappedForNativeCurrency(pools)); + } + case SelectCurrencyFilter.ISSUE_GRIEFING_COLLATERAL_CURRENCY: { + if (!oracleCurrencies?.length) { + return [GOVERNANCE_TOKEN]; + } + + return currencies.filter(canBeUsedAsIssueGriefingCollateral(oracleCurrencies)); + } + default: + return currencies; + } + }, [currencies, pools, filter, oracleCurrencies]); + + const items = useMemo(() => { + let parsedTokenData = filteredCurrencies.map((currency) => { + const balance = getAvailableBalance(currency.ticker); + const balanceUSD = balance + ? convertMonetaryAmountToValueInUSD(balance, getTokenPrice(prices, currency.ticker)?.usd) + : 0; + + return { + balance: balance?.toBig() || Big(0), + balanceUSD: formatUSD(balanceUSD || 0, { compact: true }), + value: currency.ticker, + ...getCoinIconProps(currency) + }; + }); + + if (!filter) { + parsedTokenData = parsedTokenData.sort((currencyA, currencyB) => + currencyB.balance.sub(currencyA.balance).toNumber() + ); + } + + return parsedTokenData.map((currency) => ({ ...currency, balance: currency.balance.toString() })); + }, [filteredCurrencies, getAvailableBalance, filter, prices]); + + return { + items + }; +}; + +export { SelectCurrencyFilter, useSelectCurrency }; +export type { SelectCurrencyResult }; diff --git a/src/utils/hooks/use-sign-message.ts b/src/utils/hooks/use-sign-message.ts index ef57dbdfd0..58c1c2fb2a 100644 --- a/src/utils/hooks/use-sign-message.ts +++ b/src/utils/hooks/use-sign-message.ts @@ -1,16 +1,17 @@ import { PressEvent } from '@react-types/shared'; import { useCallback, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; import { useMutation, useQuery, useQueryClient } from 'react-query'; import { useDispatch } from 'react-redux'; -import { toast } from 'react-toastify'; import { showSignTermsModalAction } from '@/common/actions/general.actions'; import { TERMS_AND_CONDITIONS_LINK } from '@/config/relay-chains'; import { SIGNER_API_URL } from '@/constants'; import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; +import { NotificationToastType, useNotifications } from '../context/Notifications'; import { signMessage } from '../helpers/wallet'; -import { LocalStorageKey, TCSignaturesData, useLocalStorage } from './use-local-storage'; +import { LocalStorageKey, useLocalStorage } from './use-local-storage'; interface GetSignatureData { exists: boolean; @@ -50,10 +51,12 @@ type UseSignMessageResult = { }; const useSignMessage = (): UseSignMessageResult => { + const { t } = useTranslation(); const queryClient = useQueryClient(); + const notifications = useNotifications(); const dispatch = useDispatch(); - const [signatures, setSignatures] = useLocalStorage(LocalStorageKey.TC_SIGNATURES); + const [signatures, setSignatures] = useLocalStorage(LocalStorageKey.TC_SIGNATURES); const { selectedAccount } = useSubstrateSecureState(); const setSignature = useCallback( @@ -100,13 +103,19 @@ const useSignMessage = (): UseSignMessageResult => { const signMessageMutation = useMutation((account: KeyringPair) => postSignature(account), { onError: (_, variables) => { setSignature(variables.address, false); - toast.error('Something went wrong!'); + notifications.show(variables.address, { + type: NotificationToastType.STANDARD, + props: { variant: 'error', title: t('notifications.signature_submission_failed') } + }); }, onSuccess: (_, variables) => { setSignature(variables.address, true); dispatch(showSignTermsModalAction(false)); refetchSignatureData(); - toast.success('Your signature was submitted successfully.'); + notifications.show(variables.address, { + type: NotificationToastType.STANDARD, + props: { variant: 'success', title: t('notifications.signature_submission_successful') } + }); } }); diff --git a/src/utils/hooks/use-tab-page-location.tsx b/src/utils/hooks/use-tab-page-location.tsx new file mode 100644 index 0000000000..4ac2e537e4 --- /dev/null +++ b/src/utils/hooks/use-tab-page-location.tsx @@ -0,0 +1,37 @@ +import { Key } from 'react'; +import { useHistory, useLocation } from 'react-router'; + +import { TabsProps } from '@/component-library'; + +const queryString = require('query-string'); + +type UseTabPageLocationResult = { + tabsProps: Pick; +}; + +const useTabPageLocation = (): UseTabPageLocationResult => { + const history = useHistory(); + const location = useLocation(); + const currentQueryParameters = queryString.parse(location.search); + + const handleSelectionChange = (key: Key) => { + const queryParameters = queryString.parse(location.search); + queryParameters.tab = key; + const updatedQueryString = queryString.stringify(queryParameters); + + history.replace({ + pathname: location.pathname, + search: updatedQueryString + }); + }; + + return { + tabsProps: { + defaultSelectedKey: currentQueryParameters.tab, + onSelectionChange: handleSelectionChange + } + }; +}; + +export { useTabPageLocation }; +export type { UseTabPageLocationResult }; diff --git a/yarn.lock b/yarn.lock index cf7bff8882..6162970431 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2038,6 +2038,11 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== +"@gilbarbara/deep-equal@^0.1.1": + version "0.1.2" + resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz#1a106721368dba5e7e9fb7e9a3a6f9efbd8df36d" + integrity sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA== + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -9752,6 +9757,11 @@ deepmerge@^4.2.2: resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== +deepmerge@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + default-browser-id@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-1.0.4.tgz#e59d09a5d157b828b876c26816e61c3d2a2c203a" @@ -10910,6 +10920,11 @@ execa@^5.0.0, execa@^5.1.1: signal-exit "^3.0.3" strip-final-newline "^2.0.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw== + exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -13022,6 +13037,16 @@ is-interactive@^2.0.0: resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-2.0.0.tgz#40c57614593826da1100ade6059778d597f16e90" integrity sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ== +is-lite@^0.8.2: + version "0.8.2" + resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.8.2.tgz#26ab98b32aae8cc8b226593b9a641d2bf4bd3b6a" + integrity sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw== + +is-lite@^0.9.2: + version "0.9.2" + resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.9.2.tgz#4b19e9a26b7c99ed50f748bcf088db57893d0730" + integrity sha512-qZuxbaEiKLOKhX4sbHLfhFN9iA3YciuZLb37/DfXCpWnz8p7qNL2lwkpxYMXfjlS8eEEjpULPZxAUI8N6FYvYQ== + is-map@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" @@ -16194,6 +16219,11 @@ pontem-types-bundle@1.0.15: "@polkadot/types" "^6.0.5" typescript "^4.4.3" +popper.js@^1.16.0: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + portfinder@^1.0.26: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -17510,6 +17540,19 @@ react-fast-compare@^3.2.0: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-floater@^0.7.6: + version "0.7.6" + resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.7.6.tgz#a98ee90e3d51200c6e6a564ff33496f3c0d7cfee" + integrity sha512-tt/15k/HpaShbtvWCwsQYLR+ebfUuYbl+oAUJ3DcEDkgYKeUcSkDey2PdAIERdVwzdFZANz47HbwoET2/Rduxg== + dependencies: + deepmerge "^4.2.2" + exenv "^1.2.2" + is-lite "^0.8.2" + popper.js "^1.16.0" + prop-types "^15.8.1" + react-proptype-conditional-require "^1.0.4" + tree-changes "^0.9.1" + react-helmet-async@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.2.3.tgz#57326a69304ea3293036eafb49475e9ba454cb37" @@ -17566,6 +17609,21 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-joyride@^2.5.4: + version "2.5.4" + resolved "https://registry.yarnpkg.com/react-joyride/-/react-joyride-2.5.4.tgz#e428fe322acf867624179cb3561ad128648495bd" + integrity sha512-CLV1Ju79iRKIP/KqsEX05nSxMBzT41BhPAyNrTdBQWEYAkpyo6iiCPelk6No2W8iPgw373JKk2cK7AQ5Q3lFew== + dependencies: + deepmerge "^4.3.1" + exenv "^1.2.2" + is-lite "^0.9.2" + prop-types "^15.8.1" + react-floater "^0.7.6" + react-is "^16.13.1" + scroll "^3.0.1" + scrollparent "^2.0.1" + tree-changes "^0.9.2" + react-paginate@^7.1.3: version "7.1.5" resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-7.1.5.tgz#fac437f67fbeb5bfa688a175142839d94240a58b" @@ -17573,6 +17631,11 @@ react-paginate@^7.1.3: dependencies: prop-types "^15.6.1" +react-proptype-conditional-require@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555" + integrity sha512-nopsRn7KnGgazBe2c3H2+Kf+Csp6PGDRLiBkYEDMKY8o/EIgft/WnIm/OnAKTawZiLnJXHAqhpFBddvs6NiXlw== + react-query@^3.19.6: version "3.34.16" resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.34.16.tgz#279ea180bcaeaec49c7864b29d1711ee9f152594" @@ -18589,6 +18652,16 @@ screenfull@^5.1.0: resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba" integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA== +scroll@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/scroll/-/scroll-3.0.1.tgz#d5afb59fb3592ee3df31c89743e78b39e4cd8a26" + integrity sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg== + +scrollparent@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.1.0.tgz#6cae915c953835886a6ba0d77fdc2bb1ed09076d" + integrity sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA== + scrypt-js@3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312" @@ -19965,6 +20038,14 @@ tr46@~0.0.3: resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= +tree-changes@^0.9.1, tree-changes@^0.9.2: + version "0.9.3" + resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.9.3.tgz#89433ab3b4250c2910d386be1f83912b7144efcc" + integrity sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ== + dependencies: + "@gilbarbara/deep-equal" "^0.1.1" + is-lite "^0.8.2" + trim-newlines@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" From 990a4129363d2620c193429cf9cdb59bc8fffa0b Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Wed, 19 Jul 2023 11:31:09 +0100 Subject: [PATCH 20/58] [Release] Kintsugi 2.36.0 (#1470) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 --- .env.dev | 8 +- .storybook/preview.js | 1 + api/market_data.py | 12 +- api/terms.js | 5 +- package.json | 4 +- src/App.tsx | 53 +- src/assets/img/btc-defi.svg | 962 +++++++++--------- src/assets/img/nova-logo.svg | 1 + .../img/parity-signer-companion-logo.svg | 1 + src/assets/locales/en/translation.json | 18 +- src/component-library/Modal/ModalWrapper.tsx | 2 +- .../WalletIcon/WalletIcon.stories.tsx | 16 +- .../WalletIcon/WalletIcon.tsx | 4 +- .../WalletIcon/icons/Nova.tsx | 42 + .../icons/ParitySignerCompanion.tsx | 17 + .../WalletIcon/icons/index.ts | 2 + src/components/AuthModal/AuthModal.test.tsx | 4 +- src/components/FundWallet/FundWallet.tsx | 4 +- src/components/PoolsTable/PoolsTable.tsx | 2 +- .../SlippageManager/SlippageManager.style.tsx | 0 .../SlippageManager/SlippageManager.tsx | 0 .../components/SlippageManager/index.tsx | 0 .../TransactionFeeDetails.tsx | 34 +- src/components/index.tsx | 2 + src/config/links.ts | 2 +- src/config/wallets.ts | 40 - src/constants.ts | 3 + src/lib/form/index.tsx | 2 +- src/lib/form/schemas/btc.ts | 105 ++ src/lib/form/schemas/index.ts | 2 +- src/lib/form/schemas/transfers.ts | 71 +- src/lib/form/use-form.tsx | 46 +- src/lib/substrate/context/provider.tsx | 2 +- src/pages/AMM/index.tsx | 3 - src/pages/AMM/shared/components/index.tsx | 2 - .../ManualIssueExecutionActionsTable.tsx | 2 +- src/pages/{Bridge/Bridge.tsx => BTC/BTC.tsx} | 8 +- .../BTCOverview/BTCOverview.styles.tsx} | 0 .../BTCOverview/BTCOverview.tsx} | 22 +- .../components/IssueForm/IssueForm.styles.tsx | 0 .../components/IssueForm/IssueForm.tsx | 105 +- .../components/IssueForm/index.tsx | 0 .../LegacyBurnForm/LegacyBurnForm.tsx | 0 .../components/LegacyBurnForm/index.tsx | 0 .../LegacyIssueModal/LegacyIssueModal.tsx | 2 +- .../components/LegacyIssueModal/index.tsx | 0 .../LegacyRedeemModal/LegacyRedeemModal.tsx | 0 .../components/LegacyRedeemModal/index.tsx | 0 .../IssueRequestModal/index.tsx | 0 .../IssueRequestsTable/index.tsx | 0 .../RedeemRequestModal/index.tsx | 0 .../RedeemRequestsTable/index.tsx | 0 .../RequestModalTitle/index.tsx | 0 .../components/LegacyTransactions/index.tsx | 0 .../RedeemForm/PremiumRedeemCard.tsx | 4 +- .../RedeemForm/RedeemForm.styles.tsx | 0 .../components/RedeemForm/RedeemForm.tsx | 96 +- .../components/RedeemForm/index.tsx | 0 .../RequestLimitsCard/RequestLimitsCard.tsx | 4 +- .../components/RequestLimitsCard/index.tsx | 0 .../SelectVaultCard/SelectVaultCard.tsx | 4 +- .../SelectVaultCard/VaultListItem.tsx | 0 .../SelectVaultCard/VaultSelect.style.tsx | 0 .../SelectVaultCard/VaultSelect.tsx | 2 +- .../components/SelectVaultCard/index.tsx | 0 .../TransactionDetails.style.tsx | 0 .../TransactionDetails/TransactionDetails.tsx | 30 +- .../components/TransactionDetails/index.tsx | 0 .../BTCOverview}/components/index.tsx | 0 src/pages/BTC/BTCOverview/index.tsx | 3 + src/pages/BTC/index.tsx | 3 + src/pages/Bridge/BridgeOverview/index.tsx | 3 - src/pages/Bridge/index.tsx | 3 - .../CollateralModal/CollateralModal.tsx | 47 +- .../components/LoanForm/LoanForm.tsx | 42 +- .../LoansInsights/LoansInsights.tsx | 14 +- .../utils/get-max-withdrawable-amount.tsx | 6 +- src/pages/{AMM => }/Pools/Pools.tsx | 0 .../DepositForm/DepositForm.styles.tsx | 0 .../components/DepositForm/DepositForm.tsx | 64 +- .../DepositForm/DepositOutputAssets.tsx | 0 .../Pools/components/DepositForm/index.tsx | 0 .../components/PoolModal/PoolModal.style.tsx | 0 .../Pools/components/PoolModal/PoolModal.tsx | 0 .../Pools/components/PoolModal/index.tsx | 0 .../components/PoolName/PoolName.style.tsx | 0 .../Pools/components/PoolName/PoolName.tsx | 0 .../Pools/components/PoolName/index.tsx | 0 .../components/PoolsBaseTable/BalanceCell.tsx | 0 .../PoolsBaseTable/MonetaryCell.tsx | 0 .../PoolsBaseTable/PoolsBaseTable.style.tsx | 0 .../PoolsBaseTable/PoolsBaseTable.tsx | 0 .../Pools/components/PoolsBaseTable/index.tsx | 0 .../PoolsInsights/PoolsInsights.style.tsx | 0 .../PoolsInsights/PoolsInsights.tsx | 16 +- .../Pools/components/PoolsInsights/index.tsx | 0 .../Pools/components/PoolsInsights/utils.ts | 2 +- .../components/PoolsTables/PoolsTables.tsx | 0 .../Pools/components/PoolsTables/index.tsx | 0 .../Pools/components/PoolsTables/utils.ts | 2 +- .../components/WithdrawForm/WithdrawForm.tsx | 20 +- .../Pools/components/WithdrawForm/index.tsx | 0 .../{AMM => }/Pools/components/index.tsx | 0 src/pages/{AMM => }/Pools/index.tsx | 0 .../SendAndReceive.tsx} | 8 +- .../SendAndReceiveForms.styles.tsx} | 0 .../SendAndReceiveForms.tsx | 38 + .../BridgeForm/BridgeForm.styles.tsx} | 0 .../components/BridgeForm/BridgeForm.tsx} | 98 +- .../components/BridgeForm/index.tsx | 1 + .../components/ChainIcon/ChainIcon.style.tsx | 0 .../components/ChainIcon/ChainIcon.tsx | 0 .../components/ChainIcon/icons/Acala.tsx | 0 .../components/ChainIcon/icons/Astar.tsx | 0 .../components/ChainIcon/icons/Bifrost.tsx | 0 .../components/ChainIcon/icons/Heiko.tsx | 0 .../components/ChainIcon/icons/Hydra.tsx | 0 .../components/ChainIcon/icons/Interlay.tsx | 0 .../components/ChainIcon/icons/Karura.tsx | 0 .../components/ChainIcon/icons/Kintsugi.tsx | 0 .../components/ChainIcon/icons/Kusama.tsx | 0 .../components/ChainIcon/icons/Parallel.tsx | 0 .../components/ChainIcon/icons/Polkadot.tsx | 0 .../components/ChainIcon/icons/Statemine.tsx | 0 .../components/ChainIcon/icons/Statemint.tsx | 0 .../components/ChainIcon/icons/index.ts | 0 .../components/ChainIcon/index.tsx | 0 .../ChainSelect/ChainSelect.style.tsx | 0 .../components/ChainSelect/ChainSelect.tsx | 0 .../components/ChainSelect/index.tsx | 0 .../components/TransferForm/TransferForm.tsx | 49 +- .../components/TransferForm/index.tsx | 0 .../SendAndReceiveForms/components/index.tsx | 4 + .../SendAndReceiveForms/index.tsx | 3 + src/pages/SendAndReceive/index.tsx | 3 + src/pages/{AMM => }/Swap/Swap.style.tsx | 0 src/pages/{AMM => }/Swap/Swap.tsx | 10 +- .../PriceImpactModal.style.tsx | 0 .../PriceImpactModal/PriceImpactModal.tsx | 0 .../components/PriceImpactModal/index.tsx | 0 .../Swap/components/SwapForm/SwapCTA.tsx | 0 .../Swap/components/SwapForm/SwapDivider.tsx | 0 .../components/SwapForm/SwapForm.style.tsx | 0 .../Swap/components/SwapForm/SwapForm.tsx | 92 +- .../Swap/components/SwapForm/index.tsx | 0 .../components/SwapInfo/SwapInfo.style.tsx | 0 .../Swap/components/SwapInfo/SwapInfo.tsx | 0 .../Swap/components/SwapInfo/index.tsx | 0 .../SwapLiquidity/SwapLiquidity.tsx | 3 +- .../Swap/components/SwapLiquidity/index.tsx | 0 src/pages/{AMM => }/Swap/components/index.tsx | 0 src/pages/{AMM => }/Swap/index.tsx | 0 src/pages/{AMM => }/Swap/types.ts | 0 src/pages/Transfer/Transfer.style.tsx | 9 - .../Transfer/TransferForms/TransferForms.tsx | 35 - .../CrossChainTransferForm/index.tsx | 1 - .../TransferForms/components/index.tsx | 4 - src/pages/Transfer/TransferForms/index.tsx | 3 - src/pages/Transfer/index.tsx | 3 - .../SubmittedIssueRequestModal/index.tsx | 2 +- src/pages/Vaults/Vault/VaultDashboard.tsx | 2 +- .../Vault/VaultIssueRequestsTable/index.tsx | 4 +- .../Vault/VaultRedeemRequestsTable/index.tsx | 4 +- .../DespositCollateralStep.tsx | 26 +- .../AvailableAssetsTable/ActionsCell.tsx | 50 +- .../AvailableAssetsTable.tsx | 3 +- .../components/WalletInsights/utils.ts | 2 +- .../WelcomeBanner/WelcomeBanner.tsx | 15 +- .../SidebarContent/Navigation/index.tsx | 25 +- src/parts/Topbar/index.tsx | 5 +- .../mocks/@interlay/interbtc-api/index.ts | 57 +- .../@interlay/interbtc-api/parachain/amm.ts | 189 ++-- .../interbtc-api/parachain/extrinsic.ts | 17 + .../@interlay/interbtc-api/parachain/index.ts | 2 + .../@interlay/interbtc-api/parachain/loans.ts | 6 +- .../interbtc-api/parachain/system.ts | 47 +- .../interbtc-api/parachain/transaction.ts | 20 + src/test/mocks/hooks/index.ts | 26 + src/test/mocks/setup.tsx | 9 +- src/test/mocks/utils/helpers/extrinsic.ts | 12 - src/test/mocks/utils/helpers/index.ts | 1 - src/test/mocks/utils/index.ts | 1 - src/test/pages/Burn.test.tsx | 2 +- src/test/pages/Issue.test.tsx | 2 +- src/test/pages/Loans/borrow.test.tsx | 12 +- src/test/pages/Loans/collateral.test.tsx | 2 +- src/test/pages/Loans/index.test.tsx | 2 +- src/test/pages/Loans/lend.test.tsx | 8 +- src/test/pages/Loans/repay.test.tsx | 12 +- src/test/pages/Loans/withdraw.test.tsx | 14 +- src/test/pages/Pools.test.tsx | 209 ++-- src/test/pages/Redeem.test.tsx | 5 +- src/test/pages/Swap.test.tsx | 100 +- src/test/pages/Wallet.test.tsx | 36 +- src/test/pages/utils/table.ts | 19 +- src/test/pages/utils/transaction.ts | 22 + src/test/test-utils.tsx | 13 +- src/utils/constants/account.ts | 5 + src/utils/constants/links.ts | 34 +- src/utils/constants/tab-ids.ts | 7 - src/utils/constants/wallets.ts | 42 +- src/utils/helpers/currencies.ts | 15 +- src/utils/helpers/extrinsic.ts | 36 - src/utils/helpers/input.tsx | 15 + .../shared/utils.ts => utils/helpers/pool.ts} | 0 src/utils/helpers/pools.ts | 3 +- .../hooks/api/amm/use-get-account-pools.tsx | 2 +- .../hooks/api/bridge/use-get-redeem-data.tsx | 6 +- src/utils/hooks/api/bridge/use-get-vaults.tsx | 28 +- .../api/oracle/use-get-oracle-currencies.ts | 10 +- src/utils/hooks/api/use-get-currencies.tsx | 13 +- src/utils/hooks/api/use-get-dex-volume.tsx | 7 +- .../hooks/api/use-get-pools-trading-apr.tsx | 2 +- src/utils/hooks/api/use-get-prices.tsx | 21 +- src/utils/hooks/api/vaults/get-vault-data.ts | 5 +- .../transaction/extrinsics/extrinsics.ts | 6 +- src/utils/hooks/transaction/extrinsics/xcm.ts | 2 +- .../transaction/hooks/use-fee-estimate.ts | 204 ++++ .../use-transaction-notifications.tsx | 4 +- .../transaction/hooks/use-transaction.ts | 150 +++ src/utils/hooks/transaction/index.ts | 3 +- src/utils/hooks/transaction/types/amm.ts | 9 +- src/utils/hooks/transaction/types/escrow.ts | 13 +- src/utils/hooks/transaction/types/hook.ts | 69 +- src/utils/hooks/transaction/types/index.ts | 15 +- src/utils/hooks/transaction/types/issue.ts | 5 +- src/utils/hooks/transaction/types/loans.ts | 19 +- src/utils/hooks/transaction/types/redeem.ts | 7 +- src/utils/hooks/transaction/types/replace.ts | 3 +- src/utils/hooks/transaction/types/rewards.ts | 3 +- src/utils/hooks/transaction/types/tokens.ts | 3 +- src/utils/hooks/transaction/types/vaults.ts | 7 +- src/utils/hooks/transaction/types/vesting.ts | 3 +- src/utils/hooks/transaction/types/xcm.ts | 11 +- .../hooks/transaction/use-transaction.ts | 213 ---- .../hooks/transaction/utils/description.ts | 10 +- src/utils/hooks/transaction/utils/fee.ts | 74 +- src/utils/hooks/transaction/utils/form.ts | 2 +- src/utils/hooks/transaction/utils/params.ts | 45 +- src/utils/hooks/transaction/utils/submit.ts | 2 +- src/utils/hooks/use-feature-flag.ts | 8 - src/utils/hooks/use-local-storage.ts | 2 +- src/utils/hooks/use-page-query-params.tsx | 50 + src/utils/hooks/use-select-currency.tsx | 4 +- src/utils/hooks/use-sign-message.ts | 31 +- vercel.json | 10 + yarn.lock | 65 +- 247 files changed, 2562 insertions(+), 2064 deletions(-) create mode 100644 src/assets/img/nova-logo.svg create mode 100644 src/assets/img/parity-signer-companion-logo.svg create mode 100644 src/component-library/WalletIcon/icons/Nova.tsx create mode 100644 src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx rename src/{pages/AMM/shared => }/components/SlippageManager/SlippageManager.style.tsx (100%) rename src/{pages/AMM/shared => }/components/SlippageManager/SlippageManager.tsx (100%) rename src/{pages/AMM/shared => }/components/SlippageManager/index.tsx (100%) delete mode 100644 src/config/wallets.ts create mode 100644 src/lib/form/schemas/btc.ts delete mode 100644 src/pages/AMM/index.tsx delete mode 100644 src/pages/AMM/shared/components/index.tsx rename src/pages/{Bridge/Bridge.tsx => BTC/BTC.tsx} (58%) rename src/pages/{Bridge/BridgeOverview/BridgeOverview.styles.tsx => BTC/BTCOverview/BTCOverview.styles.tsx} (100%) rename src/pages/{Bridge/BridgeOverview/BridgeOverview.tsx => BTC/BTCOverview/BTCOverview.tsx} (72%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/IssueForm/IssueForm.styles.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/IssueForm/IssueForm.tsx (70%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/IssueForm/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyBurnForm/LegacyBurnForm.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyBurnForm/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyIssueModal/LegacyIssueModal.tsx (98%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyIssueModal/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyRedeemModal/LegacyRedeemModal.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyRedeemModal/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/IssueRequestsTable/IssueRequestModal/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/IssueRequestsTable/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/RedeemRequestsTable/RedeemRequestModal/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/RedeemRequestsTable/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/RequestModalTitle/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/LegacyTransactions/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RedeemForm/PremiumRedeemCard.tsx (90%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RedeemForm/RedeemForm.styles.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RedeemForm/RedeemForm.tsx (77%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RedeemForm/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RequestLimitsCard/RequestLimitsCard.tsx (94%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/RequestLimitsCard/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/SelectVaultCard/SelectVaultCard.tsx (87%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/SelectVaultCard/VaultListItem.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/SelectVaultCard/VaultSelect.style.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/SelectVaultCard/VaultSelect.tsx (94%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/SelectVaultCard/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/TransactionDetails/TransactionDetails.style.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/TransactionDetails/TransactionDetails.tsx (79%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/TransactionDetails/index.tsx (100%) rename src/pages/{Bridge/BridgeOverview => BTC/BTCOverview}/components/index.tsx (100%) create mode 100644 src/pages/BTC/BTCOverview/index.tsx create mode 100644 src/pages/BTC/index.tsx delete mode 100644 src/pages/Bridge/BridgeOverview/index.tsx delete mode 100644 src/pages/Bridge/index.tsx rename src/pages/{AMM => }/Pools/Pools.tsx (100%) rename src/pages/{AMM => }/Pools/components/DepositForm/DepositForm.styles.tsx (100%) rename src/pages/{AMM => }/Pools/components/DepositForm/DepositForm.tsx (77%) rename src/pages/{AMM => }/Pools/components/DepositForm/DepositOutputAssets.tsx (100%) rename src/pages/{AMM => }/Pools/components/DepositForm/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolModal/PoolModal.style.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolModal/PoolModal.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolModal/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolName/PoolName.style.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolName/PoolName.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolName/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsBaseTable/BalanceCell.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsBaseTable/MonetaryCell.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsBaseTable/PoolsBaseTable.style.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsBaseTable/PoolsBaseTable.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsBaseTable/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsInsights/PoolsInsights.style.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsInsights/PoolsInsights.tsx (94%) rename src/pages/{AMM => }/Pools/components/PoolsInsights/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsInsights/utils.ts (91%) rename src/pages/{AMM => }/Pools/components/PoolsTables/PoolsTables.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsTables/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/PoolsTables/utils.ts (91%) rename src/pages/{AMM => }/Pools/components/WithdrawForm/WithdrawForm.tsx (89%) rename src/pages/{AMM => }/Pools/components/WithdrawForm/index.tsx (100%) rename src/pages/{AMM => }/Pools/components/index.tsx (100%) rename src/pages/{AMM => }/Pools/index.tsx (100%) rename src/pages/{Transfer/Transfer.tsx => SendAndReceive/SendAndReceive.tsx} (54%) rename src/pages/{Transfer/TransferForms/TransferForms.styles.tsx => SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.styles.tsx} (100%) create mode 100644 src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx rename src/pages/{Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx => SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.styles.tsx} (100%) rename src/pages/{Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx => SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx} (70%) create mode 100644 src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/index.tsx rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/ChainIcon.style.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/ChainIcon.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Acala.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Astar.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Bifrost.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Heiko.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Hydra.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Interlay.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Karura.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Kintsugi.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Kusama.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Parallel.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Polkadot.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Statemine.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/Statemint.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/icons/index.ts (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainIcon/index.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainSelect/ChainSelect.style.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainSelect/ChainSelect.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/ChainSelect/index.tsx (100%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/TransferForm/TransferForm.tsx (76%) rename src/pages/{Transfer/TransferForms => SendAndReceive/SendAndReceiveForms}/components/TransferForm/index.tsx (100%) create mode 100644 src/pages/SendAndReceive/SendAndReceiveForms/components/index.tsx create mode 100644 src/pages/SendAndReceive/SendAndReceiveForms/index.tsx create mode 100644 src/pages/SendAndReceive/index.tsx rename src/pages/{AMM => }/Swap/Swap.style.tsx (100%) rename src/pages/{AMM => }/Swap/Swap.tsx (89%) rename src/pages/{AMM => }/Swap/components/PriceImpactModal/PriceImpactModal.style.tsx (100%) rename src/pages/{AMM => }/Swap/components/PriceImpactModal/PriceImpactModal.tsx (100%) rename src/pages/{AMM => }/Swap/components/PriceImpactModal/index.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapForm/SwapCTA.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapForm/SwapDivider.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapForm/SwapForm.style.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapForm/SwapForm.tsx (84%) rename src/pages/{AMM => }/Swap/components/SwapForm/index.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapInfo/SwapInfo.style.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapInfo/SwapInfo.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapInfo/index.tsx (100%) rename src/pages/{AMM => }/Swap/components/SwapLiquidity/SwapLiquidity.tsx (96%) rename src/pages/{AMM => }/Swap/components/SwapLiquidity/index.tsx (100%) rename src/pages/{AMM => }/Swap/components/index.tsx (100%) rename src/pages/{AMM => }/Swap/index.tsx (100%) rename src/pages/{AMM => }/Swap/types.ts (100%) delete mode 100644 src/pages/Transfer/Transfer.style.tsx delete mode 100644 src/pages/Transfer/TransferForms/TransferForms.tsx delete mode 100644 src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx delete mode 100644 src/pages/Transfer/TransferForms/components/index.tsx delete mode 100644 src/pages/Transfer/TransferForms/index.tsx delete mode 100644 src/pages/Transfer/index.tsx create mode 100644 src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts create mode 100644 src/test/mocks/@interlay/interbtc-api/parachain/transaction.ts create mode 100644 src/test/mocks/hooks/index.ts delete mode 100644 src/test/mocks/utils/helpers/extrinsic.ts delete mode 100644 src/test/mocks/utils/helpers/index.ts delete mode 100644 src/test/mocks/utils/index.ts create mode 100644 src/test/pages/utils/transaction.ts create mode 100644 src/utils/constants/account.ts delete mode 100644 src/utils/constants/tab-ids.ts delete mode 100644 src/utils/helpers/extrinsic.ts create mode 100644 src/utils/helpers/input.tsx rename src/{pages/AMM/shared/utils.ts => utils/helpers/pool.ts} (100%) create mode 100644 src/utils/hooks/transaction/hooks/use-fee-estimate.ts rename src/utils/hooks/transaction/{ => hooks}/use-transaction-notifications.tsx (96%) create mode 100644 src/utils/hooks/transaction/hooks/use-transaction.ts delete mode 100644 src/utils/hooks/transaction/use-transaction.ts create mode 100644 src/utils/hooks/use-page-query-params.tsx diff --git a/.env.dev b/.env.dev index 60869e7489..883d93374a 100644 --- a/.env.dev +++ b/.env.dev @@ -1,9 +1,5 @@ /* FEATURE FLAGS */ -REACT_APP_FEATURE_FLAG_LENDING=enabled -REACT_APP_FEATURE_FLAG_AMM=enabled -REACT_APP_FEATURE_FLAG_WALLET=enabled -REACT_APP_FEATURE_FLAG_BANXA=enabled REACT_APP_FEATURE_FLAG_STRATEGIES=enabled REACT_APP_FEATURE_FLAG_ONBOARDING=enabled @@ -31,6 +27,7 @@ REACT_APP_PARACHAIN_ID="2121" DOCKER_RELAY_CHAIN_CURRENCY="KSM" REACT_APP_SQUID_URL="https://api-dev-kintsugi.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" +REACT_APP_TC_VERSION="1.0" // Interlay testnet @@ -44,6 +41,7 @@ REACT_APP_RELAY_CHAIN_NAME="polkadot" DOCKER_RELAY_CHAIN_CURRENCY="DOT" REACT_APP_SQUID_URL="https://api-testnet.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" +REACT_APP_TC_VERSION="1.0" /* PRODUCTION */ @@ -60,6 +58,7 @@ DOCKER_RELAY_CHAIN_CURRENCY="KSM" REACT_APP_SQUID_URL="https://api-kusama.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" REACT_APP_SIGNER_API_URL="https://interbtc-ui-kintsugi-git-api-terms-interlay.vercel.app/terms" +REACT_APP_TC_VERSION="1.0" // Interlay mainnet @@ -74,3 +73,4 @@ DOCKER_RELAY_CHAIN_CURRENCY="DOT" REACT_APP_SQUID_URL="https://api.interlay.io/graphql/graphql" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" REACT_APP_SIGNER_API_URL="https://interbtc-ui-interlay-git-api-terms-interlay.vercel.app/terms" +REACT_APP_TC_VERSION="1.0" \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js index 71eafc0e1c..e040262e5b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -25,6 +25,7 @@ const parameters = { // Needed to be specified here in order to apply styles to components rendered in portal. Decorator: withThemes }, + chromatic: { disableSnapshot: true }, }; addDecorator(story => {story()}); diff --git a/api/market_data.py b/api/market_data.py index d23829f4fa..42e5b9698f 100644 --- a/api/market_data.py +++ b/api/market_data.py @@ -16,11 +16,13 @@ # map coingecko ids to dia ids dia_assets = { "bitcoin": "/Bitcoin/0x0000000000000000000000000000000000000000", + "ethereum": "/Ethereum/0x0000000000000000000000000000000000000000", "interlay": "/Interlay/0x0000000000000000000000000000000000000000", "polkadot": "/Polkadot/0x0000000000000000000000000000000000000000", "kusama": "/Kusama/0x0000000000000000000000000000000000000000", "kintsugi": "/Kintsugi/Token:KINT", "acala-dollar": "/Acala/Token:AUSD", + "karura": "/Bifrost/518", "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7" } @@ -33,9 +35,9 @@ def add_header(response): def coingecko(args): headers_dict = { "content-type": "application/json", - "accept": "application/json", + "accept": "application/json" } - url = "https://pro-api.coingecko.com/api/v3/simple/price" + url = "https://api.coingecko.com/api/v3/simple/price" resp = requests.get(url, params=args, headers=headers_dict) data = resp.json() return data @@ -61,7 +63,11 @@ def dia(asset): } } except KeyError: - return { asset: None } + try: + return coingecko({"ids": [asset], "vs_currencies": ["usd"]}) + except Exception as e: + print("Coingecko error", e) + return { asset: None } @app.route("/marketdata/price", methods=["GET"]) diff --git a/api/terms.js b/api/terms.js index 9ae121aaef..28d252a88c 100644 --- a/api/terms.js +++ b/api/terms.js @@ -35,9 +35,10 @@ const terms = async (request, response) => { } const wallet = request.url.match(pattern).groups.wallet; + const version = request.query.version; if (request.method === 'GET') { - const result = await pool.query('select exists(select 1 from signed_terms where wallet_id=$1)', [wallet]) + const result = await pool.query('select exists(select 1 from signed_terms where wallet_id=$1 and version=$2)', [wallet, version]) return response.send(result.rows[0]); } else if (request.method === 'POST') { try { @@ -45,7 +46,7 @@ const terms = async (request, response) => { // const { signed_message } = JSON.parse(request.body); // const { isValid } = signatureVerify(MESSAGE, signed_message, wallet); - const result = await pool.query('insert into signed_terms (wallet_id) values ($1)', [wallet]) + const result = await pool.query('insert into signed_terms (wallet_id, version) values ($1, $2)', [wallet, version]) return response.status(201); } catch (error) { if (error.code === '23505') { diff --git a/package.json b/package.json index 8496ceeea7..06f5cf45b4 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "interbtc-ui", - "version": "2.35.4", + "version": "2.36.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", "@interlay/bridge": "^0.3.13", - "@interlay/interbtc-api": "2.3.5", + "@interlay/interbtc-api": "2.3.7", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", diff --git a/src/App.tsx b/src/App.tsx index be7a0ee0bb..83a883d5e9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,9 +26,9 @@ import * as constants from './constants'; import TestnetBanner from './legacy-components/TestnetBanner'; import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; -const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge')); +const BTC = React.lazy(() => import(/* webpackChunkName: 'btc' */ '@/pages/BTC')); const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); -const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer')); +const SendAndReceive = React.lazy(() => import(/* webpackChunkName: 'sendAndReceive' */ '@/pages/SendAndReceive')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); const Staking = React.lazy(() => import(/* webpackChunkName: 'staking' */ '@/pages/Staking')); const Dashboard = React.lazy(() => import(/* webpackChunkName: 'dashboard' */ '@/pages/Dashboard')); @@ -36,8 +36,8 @@ const Vaults = React.lazy(() => import(/* webpackChunkName: 'vaults' */ '@/pages // TODO: last task will be to delete legacy dashboard and rename vault dashboard const Vault = React.lazy(() => import(/* webpackChunkName: 'vault' */ '@/pages/Vaults/Vault')); const Loans = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/Loans')); -const Swap = React.lazy(() => import(/* webpackChunkName: 'amm' */ '@/pages/AMM')); -const Pools = React.lazy(() => import(/* webpackChunkName: 'amm/pools' */ '@/pages/AMM/Pools')); +const Swap = React.lazy(() => import(/* webpackChunkName: 'amm' */ '@/pages/Swap')); +const Pools = React.lazy(() => import(/* webpackChunkName: 'amm/pools' */ '@/pages/Pools')); const Wallet = React.lazy(() => import(/* webpackChunkName: 'wallet' */ '@/pages/Wallet')); const Onboarding = React.lazy(() => import(/* webpackChunkName: 'onboarding' */ '@/pages/Onboarding')); const Actions = React.lazy(() => import(/* webpackChunkName: 'actions' */ '@/pages/Actions')); @@ -49,9 +49,6 @@ const App = (): JSX.Element => { const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const dispatch = useDispatch(); - const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); - const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); - const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); @@ -187,32 +184,24 @@ const App = (): JSX.Element => { - - + + - - + + + + + + + + + + + + + + - {isLendingEnabled && ( - - - - )} - {isAMMEnabled && ( - - - - )} - {isAMMEnabled && ( - - - - )} - {isWalletEnabled && ( - - - - )} {isStrategiesEnabled && ( @@ -226,7 +215,7 @@ const App = (): JSX.Element => { - + diff --git a/src/assets/img/btc-defi.svg b/src/assets/img/btc-defi.svg index db27ab2b23..5f32ba0f24 100644 --- a/src/assets/img/btc-defi.svg +++ b/src/assets/img/btc-defi.svg @@ -1,507 +1,496 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + fill="#8500EA" stroke="black" stroke-width="1.71" stroke-miterlimit="10" /> - - - - - - - - + d="M316.412 374.49C384.668 374.49 440 314.545 440 240.6C440 166.655 384.668 106.71 316.412 106.71C248.156 106.71 192.824 166.655 192.824 240.6C192.824 314.545 248.156 374.49 316.412 374.49Z" + fill="url(#paint1_linear_298_552)" stroke="black" stroke-width="1.71" stroke-miterlimit="10" /> + + d="M316.412 374.49C384.668 374.49 440 314.545 440 240.6C440 166.655 384.668 106.71 316.412 106.71C248.156 106.71 192.824 166.655 192.824 240.6C192.824 314.545 248.156 374.49 316.412 374.49Z" + fill="white" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + d="M132.71 126.4C163.091 126.4 187.72 101.772 187.72 71.3904C187.72 41.0092 163.091 16.3804 132.71 16.3804C102.329 16.3804 77.7001 41.0092 77.7001 71.3904C77.7001 101.772 102.329 126.4 132.71 126.4Z" + fill="white" /> + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + d="M124.76 126.01C155.141 126.01 179.77 101.381 179.77 71.0002C179.77 40.6191 155.141 15.9902 124.76 15.9902C94.3789 15.9902 69.7501 40.6191 69.7501 71.0002C69.7501 101.381 94.3789 126.01 124.76 126.01Z" + fill="url(#paint6_linear_298_552)" stroke="black" stroke-width="0.7" stroke-miterlimit="10" /> + - - + d="M124.76 115.59C149.386 115.59 169.35 95.6265 169.35 71.0002C169.35 46.3738 149.386 26.4102 124.76 26.4102C100.134 26.4102 80.1702 46.3738 80.1702 71.0002C80.1702 95.6265 100.134 115.59 124.76 115.59Z" + fill="#FFD7B6" stroke="#FF9900" stroke-width="0.7" /> + + - + + d="M123.81 115.1C148.055 115.1 167.71 95.4456 167.71 71.2003C167.71 46.955 148.055 27.3003 123.81 27.3003C99.5648 27.3003 79.9102 46.955 79.9102 71.2003C79.9102 95.4456 99.5648 115.1 123.81 115.1Z" + fill="white" stroke="#E6007A" stroke-width="3.82" /> + + + + + + + + + + + + + + + + d="M506.23 110.76C536.611 110.76 561.24 86.1314 561.24 55.7502C561.24 25.369 536.611 0.740234 506.23 0.740234C475.849 0.740234 451.22 25.369 451.22 55.7502C451.22 86.1314 475.849 110.76 506.23 110.76Z" + fill="white" /> + + + + + + + + + + + + + + + + + + + + + + + + + d="M497.32 99.4606C521.565 99.4606 541.22 79.8059 541.22 55.5606C541.22 31.3153 521.565 11.6606 497.32 11.6606C473.075 11.6606 453.42 31.3153 453.42 55.5606C453.42 79.8059 473.075 99.4606 497.32 99.4606Z" + fill="white" stroke="#FF9900" stroke-width="3.82" /> + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + fill="#8500EA" stroke="black" stroke-width="0.7" stroke-miterlimit="10" /> - - + d="M590.56 261.06C620.941 261.06 645.57 236.431 645.57 206.05C645.57 175.669 620.941 151.04 590.56 151.04C560.179 151.04 535.55 175.669 535.55 206.05C535.55 236.431 560.179 261.06 590.56 261.06Z" + fill="url(#paint9_linear_298_552)" stroke="black" stroke-width="0.7" stroke-miterlimit="10" /> + + - - - - - - - + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + d="M582.61 250.26C607.236 250.26 627.2 230.296 627.2 205.67C627.2 181.044 607.236 161.08 582.61 161.08C557.984 161.08 538.02 181.044 538.02 205.67C538.02 230.296 557.984 250.26 582.61 250.26Z" + fill="white" stroke="#FF9900" stroke-width="0.7" /> + - - + d="M582.61 260.68C612.991 260.68 637.62 236.051 637.62 205.67C637.62 175.289 612.991 150.66 582.61 150.66C552.229 150.66 527.6 175.289 527.6 205.67C527.6 236.051 552.229 260.68 582.61 260.68Z" + fill="url(#paint10_linear_298_552)" stroke="black" stroke-width="0.7" stroke-miterlimit="10" /> + + - + - + d="M581.66 249.76C605.905 249.76 625.56 230.106 625.56 205.86C625.56 181.615 605.905 161.96 581.66 161.96C557.415 161.96 537.76 181.615 537.76 205.86C537.76 230.106 557.415 249.76 581.66 249.76Z" + fill="url(#paint11_linear_298_552)" stroke="#393939" stroke-width="3.82" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + - - @@ -513,7 +502,7 @@ - @@ -527,17 +516,17 @@ - - - @@ -549,7 +538,7 @@ - @@ -563,7 +552,7 @@ - @@ -575,7 +564,7 @@ - @@ -589,7 +578,7 @@ - @@ -601,7 +590,7 @@ - @@ -615,12 +604,12 @@ - - @@ -632,7 +621,7 @@ - @@ -646,7 +635,7 @@ - @@ -658,7 +647,7 @@ - @@ -672,7 +661,7 @@ - @@ -684,7 +673,7 @@ - @@ -698,8 +687,11 @@ - + + + + \ No newline at end of file diff --git a/src/assets/img/nova-logo.svg b/src/assets/img/nova-logo.svg new file mode 100644 index 0000000000..14390e1508 --- /dev/null +++ b/src/assets/img/nova-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/parity-signer-companion-logo.svg b/src/assets/img/parity-signer-companion-logo.svg new file mode 100644 index 0000000000..570488f664 --- /dev/null +++ b/src/assets/img/parity-signer-companion-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index ed5e84f250..aeeef76a11 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -75,9 +75,9 @@ "locked_btc": "Locked BTC", "issue": "Issue", "redeem": "Redeem", - "nav_bridge": "Bridge", + "nav_btc": "BTC", "nav_strategies": "Strategies", - "nav_transfer": "Transfer / Bridge", + "nav_send_and_receive": "Send and Receive", "nav_lending": "Lending", "nav_swap": "Swap", "nav_pools": "Pools", @@ -632,10 +632,10 @@ }, "fund_wallet_modal": { "buy": "Buy", - "buy_via_banxa": "Purchase KINT via Banxa.", + "buy_via_banxa": "Purchase {{ticker}} via Banxa.", "banxa_leading_solution": "Banxa is the leading global Web3 on-and-off ramp solution.", "exchange": "Exchange", - "please_check_terms": "Please check the individual terms and conditions of each exchange before you buy / trade {{token}}." + "please_check_terms": "Please check the individual terms and conditions of each exchange before you buy / trade {{ticker}}." }, "wallet": { "available_assets": "Available assets", @@ -679,10 +679,10 @@ "reimbersed_redeem_id": "Reimbursed redeem {{resquestId}}", "executing_issue": "Executing issue", "executed_issue": "Executed issue", - "transfering_amount_to_address": "Transfering {{amount}} {{currency}} to {{address}}", - "transfered_amount_to_address": "Transfered {{amount}} {{currency}} to {{address}}", - "transfering_amount_from_chain_to_chain": "Transfering {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", - "transfered_amount_from_chain_to_chain": "Transfered {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", + "transferring_amount_to_address": "Transferring {{amount}} {{currency}} to {{address}}", + "transferred_amount_to_address": "Transferred {{amount}} {{currency}} to {{address}}", + "transferring_amount_from_chain_to_chain": "Transferring {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", + "transferred_amount_from_chain_to_chain": "Transferred {{amount}} {{currency}} from {{fromChain}} to {{toChain}}", "claiming_lending_rewards": "Claiming lending rewards", "claimed_lending_rewards": "Claimed lending rewards", "borrowing_amount": "Borrowing {{amount}} {{currency}}", @@ -726,7 +726,7 @@ "claiming_vesting": "Claiming vesting", "claimed_vesting": "Claimed vesting" }, - "bridge": { + "btc": { "max_issuable": "Max issuable", "max_redeemable": "Max redeemable", "in_single_request": "In single request", diff --git a/src/component-library/Modal/ModalWrapper.tsx b/src/component-library/Modal/ModalWrapper.tsx index 8ce98068e6..742f5b3d42 100644 --- a/src/component-library/Modal/ModalWrapper.tsx +++ b/src/component-library/Modal/ModalWrapper.tsx @@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils'; import { OverlayTriggerState } from '@react-stately/overlays'; import { forwardRef, ReactNode, RefObject } from 'react'; -import { Underlay } from '../Overlay'; +import { Underlay } from '../Overlay/Underlay'; import { StyledModal, StyledWrapper } from './Modal.style'; type Props = { diff --git a/src/component-library/WalletIcon/WalletIcon.stories.tsx b/src/component-library/WalletIcon/WalletIcon.stories.tsx index fc65b0077b..f86da5de1f 100644 --- a/src/component-library/WalletIcon/WalletIcon.stories.tsx +++ b/src/component-library/WalletIcon/WalletIcon.stories.tsx @@ -7,17 +7,25 @@ import { WalletIcon, WalletIconProps } from './WalletIcon'; const Template: Story = (args) => ( - - SubWallet + + Nova - - Talisman + + Parity Signer Companion Polkadot.js + + + SubWallet + + + + Talisman + ); diff --git a/src/component-library/WalletIcon/WalletIcon.tsx b/src/component-library/WalletIcon/WalletIcon.tsx index 9533c7f87f..dca15275e2 100644 --- a/src/component-library/WalletIcon/WalletIcon.tsx +++ b/src/component-library/WalletIcon/WalletIcon.tsx @@ -4,11 +4,13 @@ import { WalletName } from '@/utils/constants/wallets'; import { IconProps } from '../Icon'; import { FallbackIcon } from './FallbackIcon'; -import { PolkadotJS, SubWallet, Talisman } from './icons'; +import { Nova, ParitySignerCompanion, PolkadotJS, SubWallet, Talisman } from './icons'; type WalletComponent = ForwardRefExoticComponent>; const wallet: Record = { + [WalletName.Nova]: Nova, + [WalletName.ParitySignerCompanion]: ParitySignerCompanion, [WalletName.PolkadotJS]: PolkadotJS, [WalletName.SubWallet]: SubWallet, [WalletName.Talisman]: Talisman diff --git a/src/component-library/WalletIcon/icons/Nova.tsx b/src/component-library/WalletIcon/icons/Nova.tsx new file mode 100644 index 0000000000..bff9026bc2 --- /dev/null +++ b/src/component-library/WalletIcon/icons/Nova.tsx @@ -0,0 +1,42 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const Nova = forwardRef((props, ref) => ( + + Nova + + + + + + + + + + + +)); + +Nova.displayName = 'Talisman'; + +export { Nova }; diff --git a/src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx b/src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx new file mode 100644 index 0000000000..a1b587c034 --- /dev/null +++ b/src/component-library/WalletIcon/icons/ParitySignerCompanion.tsx @@ -0,0 +1,17 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ParitySignerCompanion = forwardRef((props, ref) => ( + + Parity Signer Companion + + +)); + +ParitySignerCompanion.displayName = 'ParitySignerCompanion'; + +export { ParitySignerCompanion }; diff --git a/src/component-library/WalletIcon/icons/index.ts b/src/component-library/WalletIcon/icons/index.ts index b8e4fc140a..5a9304185a 100644 --- a/src/component-library/WalletIcon/icons/index.ts +++ b/src/component-library/WalletIcon/icons/index.ts @@ -1,3 +1,5 @@ +export { Nova } from './Nova'; +export { ParitySignerCompanion } from './ParitySignerCompanion'; export { PolkadotJS } from './PolkadotJS'; export { SubWallet } from './SubWallet'; export { Talisman } from './Talisman'; diff --git a/src/components/AuthModal/AuthModal.test.tsx b/src/components/AuthModal/AuthModal.test.tsx index d4d76f5d52..ea73cca3f4 100644 --- a/src/components/AuthModal/AuthModal.test.tsx +++ b/src/components/AuthModal/AuthModal.test.tsx @@ -21,11 +21,11 @@ describe('AuthModal', () => { await render(); - expect(screen.getByRole('heading', { name: /please install supported wallet/i })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: /please install a supported wallet/i })).toBeInTheDocument(); const items = screen.getAllByRole('button', { name: /navigate/i, exact: false }); - expect(items).toHaveLength(3); + expect(items).toHaveLength(5); const [item] = items; diff --git a/src/components/FundWallet/FundWallet.tsx b/src/components/FundWallet/FundWallet.tsx index a19c88b78f..8302f1fca5 100644 --- a/src/components/FundWallet/FundWallet.tsx +++ b/src/components/FundWallet/FundWallet.tsx @@ -20,7 +20,7 @@ const getData = (method: FundWalletMethod, entities: UseEntitiesResult, t: TFunc title: t('fund_wallet_modal.buy'), description: ( -

{t('fund_wallet_modal.buy_via_banxa')}

+

{t('fund_wallet_modal.buy_via_banxa', { ticker: GOVERNANCE_TOKEN.ticker })}

{t('fund_wallet_modal.banxa_leading_solution')}

 ), @@ -29,7 +29,7 @@ const getData = (method: FundWalletMethod, entities: UseEntitiesResult, t: TFunc exchange: { title: t('fund_wallet_modal.exchange'), description: ( -

{t('fund_wallet_modal.please_check_terms', { token: GOVERNANCE_TOKEN.ticker })}

+

{t('fund_wallet_modal.please_check_terms', { ticker: GOVERNANCE_TOKEN.ticker })}

), entities: entities.exchanges } diff --git a/src/components/PoolsTable/PoolsTable.tsx b/src/components/PoolsTable/PoolsTable.tsx index 992401c460..94fc78e75f 100644 --- a/src/components/PoolsTable/PoolsTable.tsx +++ b/src/components/PoolsTable/PoolsTable.tsx @@ -5,8 +5,8 @@ import { ReactNode, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { formatPercentage, formatUSD } from '@/common/utils/utils'; -import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; +import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { getFarmingApr } from '@/utils/helpers/pools'; import { DateRangeVolume, useGetDexVolumes } from '@/utils/hooks/api/use-get-dex-volume'; import { useGetPoolsTradingApr } from '@/utils/hooks/api/use-get-pools-trading-apr'; diff --git a/src/pages/AMM/shared/components/SlippageManager/SlippageManager.style.tsx b/src/components/SlippageManager/SlippageManager.style.tsx similarity index 100% rename from src/pages/AMM/shared/components/SlippageManager/SlippageManager.style.tsx rename to src/components/SlippageManager/SlippageManager.style.tsx diff --git a/src/pages/AMM/shared/components/SlippageManager/SlippageManager.tsx b/src/components/SlippageManager/SlippageManager.tsx similarity index 100% rename from src/pages/AMM/shared/components/SlippageManager/SlippageManager.tsx rename to src/components/SlippageManager/SlippageManager.tsx diff --git a/src/pages/AMM/shared/components/SlippageManager/index.tsx b/src/components/SlippageManager/index.tsx similarity index 100% rename from src/pages/AMM/shared/components/SlippageManager/index.tsx rename to src/components/SlippageManager/index.tsx diff --git a/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx index 2e8c69e4a4..fb1407b9b2 100644 --- a/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx +++ b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx @@ -1,13 +1,12 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; import { mergeProps, useId } from '@react-aria/utils'; -import { Key, ReactNode, useState } from 'react'; +import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { displayMonetaryAmountInUSDFormat, formatUSD } from '@/common/utils/utils'; import { Alert, Flex } from '@/component-library'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { UseFeeEstimateResult } from '@/utils/hooks/transaction/types/hook'; import { SelectCurrencyFilter, useSelectCurrency } from '@/utils/hooks/use-select-currency'; import { @@ -21,12 +20,10 @@ import { } from '../TransactionDetails'; type Props = { - defaultCurrency?: CurrencyExt; - amount?: MonetaryAmount; label?: ReactNode; - showInsufficientBalance?: boolean; tooltipLabel?: ReactNode; selectProps?: TransactionSelectTokenProps; + fee?: UseFeeEstimateResult; }; type InheritAttrs = Omit; @@ -34,44 +31,39 @@ type InheritAttrs = Omit; type TransactionFeeDetailsProps = Props & InheritAttrs; const TransactionFeeDetails = ({ - amount, - defaultCurrency, - showInsufficientBalance, selectProps, label, tooltipLabel, className, + fee, ...props }: TransactionFeeDetailsProps): JSX.Element => { - const prices = useGetPrices(); const { t } = useTranslation(); - const selectCurrency = useSelectCurrency(SelectCurrencyFilter.TRADEABLE_FOR_NATIVE_CURRENCY); const id = useId(); - const [ticker, setTicker] = useState(defaultCurrency?.ticker); + const prices = useGetPrices(); + const selectCurrency = useSelectCurrency(SelectCurrencyFilter.TRADEABLE_FOR_NATIVE_CURRENCY); + + const { selectProps: feeSelectProps, data } = fee || {}; + const { amount, isValid } = data || {}; const amountLabel = amount ? `${amount.toHuman()} ${amount.currency.ticker} (${displayMonetaryAmountInUSDFormat( amount, getTokenPrice(prices, amount.currency.ticker)?.usd )})` - : `${0.0} ${ticker} (${formatUSD(0)})`; + : `${0.0} ${selectProps?.value} (${formatUSD(0)})`; const errorMessage = - showInsufficientBalance && - t('forms.ensure_adequate_amount_left_to_cover_action', { action: t('fees').toLowerCase() }); - - const handleSelectionChange = (key: Key) => setTicker(key as string); + isValid === false && t('forms.ensure_adequate_amount_left_to_cover_action', { action: t('fees').toLowerCase() }); return ( {selectProps && ( >; - url: string; -} - -const WALLETS: { [wallet in WalletSourceName]: WalletData } = { - [WalletSourceName.PolkadotExtensionLogoIcon]: { - name: 'Polkadot{.js}', - LogoIcon: PolkadotExtensionLogoIcon, - url: 'https://polkadot.js.org/extension/' - }, - [WalletSourceName.Talisman]: { - name: 'Talisman', - LogoIcon: TalismanWalletLogoIcon, - url: 'https://talisman.xyz/' - }, - [WalletSourceName.SubWallet]: { - name: 'SubWallet', - LogoIcon: SubWalletLogoIcon, - url: 'https://subwallet.app/' - } -}; - -const SELECTED_ACCOUNT_LOCAL_STORAGE_KEY = `${APP_NAME}-selected-account`; - -export { SELECTED_ACCOUNT_LOCAL_STORAGE_KEY, WALLETS, WalletSourceName }; diff --git a/src/constants.ts b/src/constants.ts index 47adc8b025..fef65ea615 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -77,6 +77,8 @@ const VAULT_STATUS_LIQUIDATION = 'Being liquidated'; const BTC_RELAY_DELAY_WARNING = 6; const BTC_RELAY_DELAY_CRITICAL = 12; +const TC_VERSION = process.env.REACT_APP_TC_VERSION || ''; + export { ANALYTICS_CODE, BALANCE_MAX_INTEGER_LENGTH, @@ -96,6 +98,7 @@ export { SQUID_URL, SS58_FORMAT, STORE_NAME, + TC_VERSION, VAULT_STATUS_ACTIVE, VAULT_STATUS_BANNED, VAULT_STATUS_LIQUIDATED, diff --git a/src/lib/form/index.tsx b/src/lib/form/index.tsx index 54a5940bdc..4bb9cc5155 100644 --- a/src/lib/form/index.tsx +++ b/src/lib/form/index.tsx @@ -1,4 +1,4 @@ -export type { CrossChainTransferFormData, DepositLiquidityPoolFormData, LoanFormData } from './schemas'; +export type { DepositLiquidityPoolFormData, LoanFormData } from './schemas'; export * from './schemas'; export type { FormErrors } from './use-form'; export { useForm } from './use-form'; diff --git a/src/lib/form/schemas/btc.ts b/src/lib/form/schemas/btc.ts new file mode 100644 index 0000000000..c3e521efeb --- /dev/null +++ b/src/lib/form/schemas/btc.ts @@ -0,0 +1,105 @@ +import i18n from 'i18next'; + +import yup, { AddressType, MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const BTC_ISSUE_AMOUNT_FIELD = 'issue-amount'; +const BTC_ISSUE_CUSTOM_VAULT_FIELD = 'issue-custom-vault'; +const BTC_ISSUE_CUSTOM_VAULT_SWITCH = 'issue-custom-vault-switch'; +const BTC_ISSUE_SECURITY_DEPOSIT_TOKEN = 'issue-security-deposit-token'; +const BTC_ISSUE_FEE_TOKEN = 'issue-fee-token'; + +type BTCIssueFormData = { + [BTC_ISSUE_AMOUNT_FIELD]?: string; + [BTC_ISSUE_CUSTOM_VAULT_FIELD]?: string; + [BTC_ISSUE_CUSTOM_VAULT_SWITCH]?: boolean; + [BTC_ISSUE_SECURITY_DEPOSIT_TOKEN]?: string; + [BTC_ISSUE_FEE_TOKEN]?: string; +}; + +type BTCIssueValidationParams = { + [BTC_ISSUE_AMOUNT_FIELD]: MaxAmountValidationParams & MinAmountValidationParams; +}; + +const btcIssueSchema = (params: BTCIssueValidationParams): yup.ObjectSchema => + yup.object().shape({ + [BTC_ISSUE_AMOUNT_FIELD]: yup + .string() + .requiredAmount('issue') + .maxAmount( + params[BTC_ISSUE_AMOUNT_FIELD], + 'issue', + i18n.t('forms.amount_must_be_at_most', { + action: 'issue', + amount: params[BTC_ISSUE_AMOUNT_FIELD].maxAmount.toString() + }) + ) + .minAmount(params[BTC_ISSUE_AMOUNT_FIELD], 'issue'), + [BTC_ISSUE_CUSTOM_VAULT_FIELD]: yup.string().when([BTC_ISSUE_CUSTOM_VAULT_SWITCH], { + is: (isManualVault: string) => isManualVault, + then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'issue vault' })) + }), + [BTC_ISSUE_SECURITY_DEPOSIT_TOKEN]: yup.string().required(), + [BTC_ISSUE_FEE_TOKEN]: yup.string().required() + }); + +const BTC_REDEEM_AMOUNT_FIELD = 'redeem-amount'; +const BTC_REDEEM_CUSTOM_VAULT_FIELD = 'redeem-custom-vault'; +const BTC_REDEEM_CUSTOM_VAULT_SWITCH = 'redeem-custom-vault-switch'; +const BTC_REDEEM_PREMIUM_VAULT_FIELD = 'redeem-premium-vault'; +const BTC_REDEEM_ADDRESS = 'redeem-address'; +const BTC_REDEEM_FEE_TOKEN = 'redeem-fee-token'; + +type BTCRedeemFormData = { + [BTC_REDEEM_AMOUNT_FIELD]?: string; + [BTC_REDEEM_CUSTOM_VAULT_FIELD]?: string; + [BTC_REDEEM_CUSTOM_VAULT_SWITCH]?: boolean; + [BTC_REDEEM_PREMIUM_VAULT_FIELD]?: boolean; + [BTC_REDEEM_ADDRESS]?: string; + [BTC_REDEEM_FEE_TOKEN]?: string; +}; + +type BTCRedeemValidationParams = { + [BTC_REDEEM_AMOUNT_FIELD]: MaxAmountValidationParams & MinAmountValidationParams; +}; + +const btcRedeemSchema = (params: BTCRedeemValidationParams): yup.ObjectSchema => + yup.object().shape({ + [BTC_REDEEM_AMOUNT_FIELD]: yup + .string() + .requiredAmount('redeem') + .maxAmount( + params[BTC_REDEEM_AMOUNT_FIELD], + 'redeem', + i18n.t('forms.amount_must_be_at_most', { + action: 'redeem', + amount: params[BTC_REDEEM_AMOUNT_FIELD].maxAmount.toString() + }) + ) + .minAmount(params[BTC_REDEEM_AMOUNT_FIELD], 'redeem'), + [BTC_REDEEM_CUSTOM_VAULT_FIELD]: yup.string().when([BTC_REDEEM_CUSTOM_VAULT_SWITCH], { + is: (isManualVault: string) => isManualVault, + then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'redeem vault' })) + }), + [BTC_REDEEM_ADDRESS]: yup + .string() + .required(i18n.t('forms.please_enter_your_field', { field: 'BTC address' })) + .address(AddressType.BTC), + [BTC_REDEEM_FEE_TOKEN]: yup.string().required() + }); + +export { + BTC_ISSUE_AMOUNT_FIELD, + BTC_ISSUE_CUSTOM_VAULT_FIELD, + BTC_ISSUE_CUSTOM_VAULT_SWITCH, + BTC_ISSUE_FEE_TOKEN, + BTC_ISSUE_SECURITY_DEPOSIT_TOKEN, + BTC_REDEEM_ADDRESS, + BTC_REDEEM_AMOUNT_FIELD, + BTC_REDEEM_CUSTOM_VAULT_FIELD, + BTC_REDEEM_CUSTOM_VAULT_SWITCH, + BTC_REDEEM_FEE_TOKEN, + BTC_REDEEM_PREMIUM_VAULT_FIELD, + btcIssueSchema, + btcRedeemSchema +}; +export type { BTCIssueFormData, BTCRedeemFormData }; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index 3c89f2e120..b3f6ed79fe 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -1,4 +1,4 @@ -export * from './bridge'; +export * from './btc'; export * from './loans'; export * from './pools'; export * from './strategy'; diff --git a/src/lib/form/schemas/transfers.ts b/src/lib/form/schemas/transfers.ts index 6adf8adcb0..3f63dd705f 100644 --- a/src/lib/form/schemas/transfers.ts +++ b/src/lib/form/schemas/transfers.ts @@ -4,44 +4,36 @@ import { TFunction } from 'react-i18next'; import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; -const CROSS_CHAIN_TRANSFER_FROM_FIELD = 'transfer-from'; -const CROSS_CHAIN_TRANSFER_TO_FIELD = 'transfer-to'; -const CROSS_CHAIN_TRANSFER_AMOUNT_FIELD = 'transfer-amount'; -const CROSS_CHAIN_TRANSFER_TOKEN_FIELD = 'transfer-token'; -const CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD = 'transfer-account'; +const BRIDGE_FROM_FIELD = 'transfer-from'; +const BRIDGE_TO_FIELD = 'transfer-to'; +const BRIDGE_AMOUNT_FIELD = 'transfer-amount'; +const BRIDGE_TOKEN_FIELD = 'transfer-token'; +const BRIDGE_TO_ACCOUNT_FIELD = 'transfer-account'; -type CrossChainTransferFormData = { - [CROSS_CHAIN_TRANSFER_FROM_FIELD]?: ChainName; - [CROSS_CHAIN_TRANSFER_TO_FIELD]?: ChainName; - [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]?: string; - [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]?: string; - [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]?: string; +type BridgeFormData = { + [BRIDGE_FROM_FIELD]?: ChainName; + [BRIDGE_TO_FIELD]?: ChainName; + [BRIDGE_AMOUNT_FIELD]?: string; + [BRIDGE_TOKEN_FIELD]?: string; + [BRIDGE_TO_ACCOUNT_FIELD]?: string; }; -type CrossChainTransferValidationParams = { - [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: Partial & Partial; +type BridgeValidationParams = { + [BRIDGE_AMOUNT_FIELD]: Partial & Partial; }; -// MEMO: until now, only CROSS_CHAIN_TRANSFER_AMOUNT_FIELD needs validation -const crossChainTransferSchema = (params: CrossChainTransferValidationParams, t: TFunction): yup.ObjectSchema => +// MEMO: until now, only BRIDGE_AMOUNT_FIELD needs validation +const bridgeSchema = (params: BridgeValidationParams, t: TFunction): yup.ObjectSchema => yup.object().shape({ - [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: yup + [BRIDGE_AMOUNT_FIELD]: yup .string() .requiredAmount('transfer') - .maxAmount(params[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] as MaxAmountValidationParams) - .minAmount(params[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] as MinAmountValidationParams, 'transfer'), - [CROSS_CHAIN_TRANSFER_FROM_FIELD]: yup - .string() - .required(t('forms.please_enter_your_field', { field: 'source chain' })), - [CROSS_CHAIN_TRANSFER_TO_FIELD]: yup - .string() - .required(t('forms.please_enter_your_field', { field: 'destination chain' })), - [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]: yup - .string() - .required(t('forms.please_enter_your_field', { field: 'destination' })), - [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]: yup - .string() - .required(t('forms.please_select_your_field', { field: 'transfer token' })) + .maxAmount(params[BRIDGE_AMOUNT_FIELD] as MaxAmountValidationParams) + .minAmount(params[BRIDGE_AMOUNT_FIELD] as MinAmountValidationParams, 'transfer'), + [BRIDGE_FROM_FIELD]: yup.string().required(t('forms.please_enter_your_field', { field: 'source chain' })), + [BRIDGE_TO_FIELD]: yup.string().required(t('forms.please_enter_your_field', { field: 'destination chain' })), + [BRIDGE_TO_ACCOUNT_FIELD]: yup.string().required(t('forms.please_enter_your_field', { field: 'destination' })), + [BRIDGE_TOKEN_FIELD]: yup.string().required(t('forms.please_select_your_field', { field: 'transfer token' })) }); const TRANSFER_RECIPIENT_FIELD = 'transfer-destination'; @@ -78,21 +70,16 @@ const transferSchema = (params: TransferValidationParams): yup.ObjectSchema }); export { - CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, - CROSS_CHAIN_TRANSFER_FROM_FIELD, - CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, - CROSS_CHAIN_TRANSFER_TO_FIELD, - CROSS_CHAIN_TRANSFER_TOKEN_FIELD, - crossChainTransferSchema, + BRIDGE_AMOUNT_FIELD, + BRIDGE_FROM_FIELD, + BRIDGE_TO_ACCOUNT_FIELD, + BRIDGE_TO_FIELD, + BRIDGE_TOKEN_FIELD, + bridgeSchema, TRANSFER_AMOUNT_FIELD, TRANSFER_FEE_TOKEN_FIELD, TRANSFER_RECIPIENT_FIELD, TRANSFER_TOKEN_FIELD, transferSchema }; -export type { - CrossChainTransferFormData, - CrossChainTransferValidationParams, - TransferFormData, - TransferValidationParams -}; +export type { BridgeFormData, BridgeValidationParams, TransferFormData, TransferValidationParams }; diff --git a/src/lib/form/use-form.tsx b/src/lib/form/use-form.tsx index a85effedc3..a6e95955f8 100644 --- a/src/lib/form/use-form.tsx +++ b/src/lib/form/use-form.tsx @@ -3,15 +3,25 @@ import { FieldInputProps, FormikConfig, FormikErrors as FormErrors, FormikValues import { FocusEvent, Key, useCallback } from 'react'; import { useDebounce } from 'react-use'; +const getFieldName = (nameOrOptions: any) => { + const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object'; + return isOptions ? nameOrOptions.name : nameOrOptions; +}; + type GetFieldProps = ( nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean ) => FieldInputProps & { errorMessage?: string | string[]; - onSelectionChange: (key: Key) => void; }; +type GetSelectFieldProps = ( + nameOrOptions: any, + hideErrorMessage?: boolean, + hideUntouchedError?: boolean +) => Omit, 'onChange'> & { onSelectionChange?: (key: Key) => void }; + type UseFormArgs = FormikConfig & { hideErrorMessages?: boolean; onComplete?: (form: Values) => void; @@ -77,16 +87,7 @@ const useForm = ({ const getFieldProps: GetFieldProps = useCallback( (nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean) => { const fieldProps = getFormikFieldProps(nameOrOptions); - - const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object'; - const fieldName = isOptions ? nameOrOptions.name : nameOrOptions; - - const customFieldProps = { - ...fieldProps, - onSelectionChange: (key: Key) => { - setFieldValue(fieldName, key, true); - } - }; + const fieldName = getFieldName(nameOrOptions); // Asses if error message is going to be omitted, but validation still takes place (approach used in swap due to custom error messages) const hideError = hideErrorMessage || hideErrorMessages; @@ -103,21 +104,38 @@ const useForm = ({ : formik.errors[fieldName]; return { - ...customFieldProps, + ...fieldProps, onBlur: chain(fieldProps.onBlur, (e: FocusEvent) => handleBlur(e, fieldName, isTouched as boolean)), errorMessage: errorMessage as string | string[] | undefined }; } - return customFieldProps; + return fieldProps; + }, + [getFormikFieldProps, hideErrorMessages, formik.touched, formik.errors, handleBlur] + ); + + const getSelectFieldProps: GetSelectFieldProps = useCallback( + (nameOrOptions: any, hideErrorMessage?: boolean, hideUntouchedError?: boolean) => { + const props = getFieldProps(nameOrOptions, hideErrorMessage, hideUntouchedError); + const fieldName = getFieldName(nameOrOptions); + + return { + ...props, + onSelectionChange: (key: Key) => { + setFieldValue(fieldName, key, true); + }, + onChange: undefined + }; }, - [getFormikFieldProps, hideErrorMessages, formik.touched, formik.errors, setFieldValue, handleBlur] + [getFieldProps, setFieldValue] ); return { values, validateForm, getFieldProps, + getSelectFieldProps, setFieldTouched, setFieldValue, ...formik diff --git a/src/lib/substrate/context/provider.tsx b/src/lib/substrate/context/provider.tsx index 23f4e6d840..dc08b624b4 100644 --- a/src/lib/substrate/context/provider.tsx +++ b/src/lib/substrate/context/provider.tsx @@ -9,8 +9,8 @@ import * as React from 'react'; import { useLocalStorage } from 'react-use'; import { APP_NAME } from '@/config/relay-chains'; -import { SELECTED_ACCOUNT_LOCAL_STORAGE_KEY } from '@/config/wallets'; import * as constants from '@/constants'; +import { SELECTED_ACCOUNT_LOCAL_STORAGE_KEY } from '@/utils/constants/account'; import { substrateReducer } from './reducer'; import { diff --git a/src/pages/AMM/index.tsx b/src/pages/AMM/index.tsx deleted file mode 100644 index b5aab9cb83..0000000000 --- a/src/pages/AMM/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Swap from './Swap'; - -export default Swap; diff --git a/src/pages/AMM/shared/components/index.tsx b/src/pages/AMM/shared/components/index.tsx deleted file mode 100644 index 501bc2249c..0000000000 --- a/src/pages/AMM/shared/components/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { SlippageManagerProps } from './SlippageManager'; -export { SlippageManager } from './SlippageManager'; diff --git a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx index 5b4c48c85b..e061df3c8a 100644 --- a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx +++ b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx @@ -80,7 +80,7 @@ const ManualIssueExecutionActionsTable = (props: ManualIssueExecutionActionsTabl [ManualIssueExecutionActionsTableKeys.Action]: ( { - return ; +const BTC = (): JSX.Element => { + return ; }; -export default withErrorBoundary(Bridge, { +export default withErrorBoundary(BTC, { FallbackComponent: ErrorFallback, onReset: () => { window.location.reload(); diff --git a/src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx b/src/pages/BTC/BTCOverview/BTCOverview.styles.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/BridgeOverview.styles.tsx rename to src/pages/BTC/BTCOverview/BTCOverview.styles.tsx diff --git a/src/pages/Bridge/BridgeOverview/BridgeOverview.tsx b/src/pages/BTC/BTCOverview/BTCOverview.tsx similarity index 72% rename from src/pages/Bridge/BridgeOverview/BridgeOverview.tsx rename to src/pages/BTC/BTCOverview/BTCOverview.tsx index d7b3ae546b..9c53e8ee9d 100644 --- a/src/pages/Bridge/BridgeOverview/BridgeOverview.tsx +++ b/src/pages/BTC/BTCOverview/BTCOverview.tsx @@ -1,18 +1,18 @@ import { Flex, Tabs, TabsItem } from '@/component-library'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import MainContainer from '@/parts/MainContainer'; -import { BridgeActions } from '@/types/bridge'; +import { QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; import { useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; import { useGetIssueRequestLimit } from '@/utils/hooks/api/bridge/use-get-issue-request-limits'; import { useGetMaxBurnableTokens } from '@/utils/hooks/api/bridge/use-get-max-burnable-tokens'; import { useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; -import { useTabPageLocation } from '@/utils/hooks/use-tab-page-location'; +import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; -import { StyledCard, StyledFormWrapper, StyledWrapper } from './BridgeOverview.styles'; +import { StyledCard, StyledFormWrapper, StyledWrapper } from './BTCOverview.styles'; import { IssueForm, LegacyBurnForm, LegacyTransactions, RedeemForm } from './components'; -const BridgeOverview = (): JSX.Element => { - const { tabsProps } = useTabPageLocation(); +const BTCOverview = (): JSX.Element => { + const { tabsProps } = usePageQueryParams(); const { defaultSelectedKey } = tabsProps; @@ -22,8 +22,8 @@ const BridgeOverview = (): JSX.Element => { const { data: redeemData } = useGetRedeemData(); // Only show the loading bar if the tab needed data is still loading - const isIssueLoading = defaultSelectedKey === BridgeActions.ISSUE && issueData === undefined; - const isRedeemLoading = defaultSelectedKey === BridgeActions.REDEEM && redeemData === undefined; + const isIssueLoading = defaultSelectedKey === QUERY_PARAMETERS_VALUES.BRIDGE.TAB.ISSUE && issueData === undefined; + const isRedeemLoading = defaultSelectedKey === QUERY_PARAMETERS_VALUES.BRIDGE.TAB.REDEEM && redeemData === undefined; if (issueRequestLimit === undefined || isIssueLoading || isRedeemLoading) { return ; @@ -35,16 +35,16 @@ const BridgeOverview = (): JSX.Element => { - + {issueData && } - + {redeemData && } {maxBurnableTokensData?.hasBurnableTokens && ( - + @@ -59,4 +59,4 @@ const BridgeOverview = (): JSX.Element => { ); }; -export default BridgeOverview; +export default BTCOverview; diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx b/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.styles.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.styles.tsx rename to src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.styles.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx b/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx similarity index 70% rename from src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx rename to src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx index e56a1d854c..ac620188e0 100644 --- a/src/pages/Bridge/BridgeOverview/components/IssueForm/IssueForm.tsx +++ b/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx @@ -17,19 +17,18 @@ import { Flex, TokenInput } from '@/component-library'; import { AuthCTA } from '@/components'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; import { - BRIDGE_ISSUE_AMOUNT_FIELD, - BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, - BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH, - BRIDGE_ISSUE_FEE_TOKEN, - BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, - BridgeIssueFormData, - bridgeIssueSchema, + BTC_ISSUE_AMOUNT_FIELD, + BTC_ISSUE_CUSTOM_VAULT_FIELD, + BTC_ISSUE_CUSTOM_VAULT_SWITCH, + BTC_ISSUE_FEE_TOKEN, + BTC_ISSUE_SECURITY_DEPOSIT_TOKEN, + BTCIssueFormData, + btcIssueSchema, useForm } from '@/lib/form'; -import { BridgeActions } from '@/types/bridge'; import { getTokenPrice } from '@/utils/helpers/prices'; import { IssueData, useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; -import { BridgeVaultData, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { BridgeVaultData, GetVaultType, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -64,7 +63,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. const [selectedVault, setSelectedVault] = useState(); - const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.ISSUE); + const { data: vaultsData, getAvailableVaults } = useGetVaults(GetVaultType.ISSUE); const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0); const availableVaults = getAvailableVaults(debouncedMonetaryAmount); @@ -94,7 +93,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. minAmount: dustValue }; - const handleSubmit = async (values: BridgeIssueFormData) => { + const handleSubmit = async (values: BTCIssueFormData) => { const args = getTransactionArgs(values); if (!args) return; @@ -103,10 +102,10 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. }; const getTransactionArgs = useCallback( - (values: BridgeIssueFormData): TransactionArgs | undefined => { - const amount = values[BRIDGE_ISSUE_AMOUNT_FIELD]; - const griefingCollateralCurrencyTicker = values[BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]; - if (!vaultsData || !amount || griefingCollateralCurrencyTicker === undefined || isLoadingCurrencies) return; + (values: BTCIssueFormData): TransactionArgs | undefined => { + const amount = values[BTC_ISSUE_AMOUNT_FIELD]; + const securityDepositTicker = values[BTC_ISSUE_SECURITY_DEPOSIT_TOKEN]; + if (!vaultsData || !amount || securityDepositTicker === undefined || isLoadingCurrencies) return; const monetaryAmount = new BitcoinAmount(amount); @@ -114,7 +113,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. if (!availableVaults) return; - const vaultId = values[BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]; + const vaultId = values[BTC_ISSUE_CUSTOM_VAULT_FIELD]; let vault: BridgeVaultData | undefined; @@ -128,29 +127,29 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. vault = getRandomArrayElement(availableVaults); } - const griefingCollateralCurrency = getCurrencyFromTicker(griefingCollateralCurrencyTicker); + const securityDeposit = getCurrencyFromTicker(securityDepositTicker); return [ monetaryAmount, vault.vaultId.accountId, vault.collateralCurrency, false, vaultsData.map, - griefingCollateralCurrency + securityDeposit ]; }, [getAvailableVaults, getCurrencyFromTicker, isLoadingCurrencies, vaultsData] ); - const form = useForm({ + const form = useForm({ initialValues: { - [BRIDGE_ISSUE_AMOUNT_FIELD]: '', - [BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]: '', - [BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH]: false, - [BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]: GOVERNANCE_TOKEN.ticker, - [BRIDGE_ISSUE_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker + [BTC_ISSUE_AMOUNT_FIELD]: '', + [BTC_ISSUE_CUSTOM_VAULT_FIELD]: '', + [BTC_ISSUE_CUSTOM_VAULT_SWITCH]: false, + [BTC_ISSUE_SECURITY_DEPOSIT_TOKEN]: GOVERNANCE_TOKEN.ticker, + [BTC_ISSUE_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker }, validateOnChange: true, - validationSchema: bridgeIssueSchema({ [BRIDGE_ISSUE_AMOUNT_FIELD]: transferAmountSchemaParams }), + validationSchema: btcIssueSchema({ [BTC_ISSUE_AMOUNT_FIELD]: transferAmountSchemaParams }), onSubmit: handleSubmit, hideErrorMessages: transaction.isLoading, onComplete: (values) => { @@ -158,18 +157,16 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. if (!args) return; - const feeTicker = values[BRIDGE_ISSUE_FEE_TOKEN]; - - transaction.fee.setCurrency(feeTicker).estimate(...args); + transaction.fee.estimate(...args); } }); - const griefingCollateralTicker = form.values[BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]; + const securityDepositTicker = form.values[BTC_ISSUE_SECURITY_DEPOSIT_TOKEN]; useEffect(() => { const computeSecurityDeposit = async () => { - const btcAmount = safeBitcoinAmount(amount || 0); - const deposit = await getSecurityDeposit(btcAmount, griefingCollateralTicker); + const btcAmount = safeBitcoinAmount(debouncedAmount || 0); + const deposit = await getSecurityDeposit(btcAmount, securityDepositTicker); if (!deposit) return; @@ -177,12 +174,12 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. }; computeSecurityDeposit(); - }, [amount, griefingCollateralTicker, setSecurityDeposit, getSecurityDeposit]); + }, [debouncedAmount, securityDepositTicker, setSecurityDeposit, getSecurityDeposit]); const handleToggleCustomVault = (e: ChangeEvent) => { if (!e.target.checked) { - form.setFieldTouched(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, false, true); - form.setFieldValue(BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, '', true); + form.setFieldTouched(BTC_ISSUE_CUSTOM_VAULT_FIELD, false, true); + form.setFieldValue(BTC_ISSUE_CUSTOM_VAULT_FIELD, '', true); setSelectedVault(undefined); } @@ -210,26 +207,26 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. ? convertMonetaryAmountToValueInUSD(totalAmount, getTokenPrice(prices, totalAmount.currency.ticker)?.usd) || 0 : 0; - const isSelectingVault = form.values[BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH]; + const isSelectingVault = form.values[BTC_ISSUE_CUSTOM_VAULT_SWITCH]; - const griefingCollateralCurrencyBalance = griefingCollateralTicker - ? getAvailableBalance(griefingCollateralTicker) - : undefined; + const securityDepositBalance = securityDepositTicker ? getAvailableBalance(securityDepositTicker) : undefined; - const hasEnoughGriefingCollateralBalance = useMemo(() => { + const hasAvailableSecurityDepositBalance = useMemo(() => { if (!debouncedAmount) return true; - if ( - !griefingCollateralCurrencyBalance || - !isCurrencyEqual(securityDeposit.currency, griefingCollateralCurrencyBalance.currency) - ) { + if (!securityDepositBalance || !isCurrencyEqual(securityDeposit.currency, securityDepositBalance.currency)) { return false; } - return griefingCollateralCurrencyBalance.gte(securityDeposit); - }, [debouncedAmount, griefingCollateralCurrencyBalance, securityDeposit]); + // when security deposit currency is equal to fee currency it should be taken into account + if (transaction.fee.data && transaction.fee.isEqualFeeCurrency(securityDepositBalance.currency)) { + return securityDepositBalance.sub(transaction.fee.data.amount).gte(securityDeposit); + } + + return securityDepositBalance.gte(securityDeposit); + }, [debouncedAmount, securityDepositBalance, securityDeposit, transaction.fee]); - const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee) || !hasEnoughGriefingCollateralBalance; + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee) || !hasAvailableSecurityDepositBalance; return ( <> @@ -238,7 +235,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. @@ -247,18 +244,18 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX. label={t('amount')} ticker='BTC' valueUSD={monetaryAmountUSD} - {...mergeProps(form.getFieldProps(BRIDGE_ISSUE_AMOUNT_FIELD, false, true), { + {...mergeProps(form.getFieldProps(BTC_ISSUE_AMOUNT_FIELD, false, true), { onChange: handleChangeIssueAmount })} /> diff --git a/src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx b/src/pages/BTC/BTCOverview/components/IssueForm/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/IssueForm/index.tsx rename to src/pages/BTC/BTCOverview/components/IssueForm/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx b/src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/LegacyBurnForm.tsx rename to src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx b/src/pages/BTC/BTCOverview/components/LegacyBurnForm/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/LegacyBurnForm/index.tsx rename to src/pages/BTC/BTCOverview/components/LegacyBurnForm/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx b/src/pages/BTC/BTCOverview/components/LegacyIssueModal/LegacyIssueModal.tsx similarity index 98% rename from src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx rename to src/pages/BTC/BTCOverview/components/LegacyIssueModal/LegacyIssueModal.tsx index b9def63cd5..af9f8c2aa8 100644 --- a/src/pages/Bridge/BridgeOverview/components/LegacyIssueModal/LegacyIssueModal.tsx +++ b/src/pages/BTC/BTCOverview/components/LegacyIssueModal/LegacyIssueModal.tsx @@ -32,7 +32,7 @@ const LegacyIssueModal = ({ open, onClose, request }: CustomProps & Omit - + - {t('bridge.premium_redeem')} + {t('btc.premium_redeem')} diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.styles.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.styles.tsx rename to src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.styles.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx similarity index 77% rename from src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx rename to src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx index 1ac925d0bd..f43702e52b 100644 --- a/src/pages/Bridge/BridgeOverview/components/RedeemForm/RedeemForm.tsx +++ b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx @@ -15,20 +15,20 @@ import { Flex, Input, TokenInput } from '@/component-library'; import { AuthCTA } from '@/components'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; import { - BRIDGE_REDEEM_ADDRESS, - BRIDGE_REDEEM_AMOUNT_FIELD, - BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, - BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH, - BRIDGE_REDEEM_FEE_TOKEN, - BRIDGE_REDEEM_PREMIUM_VAULT_FIELD, - BridgeRedeemFormData, - bridgeRedeemSchema, + BTC_REDEEM_ADDRESS, + BTC_REDEEM_AMOUNT_FIELD, + BTC_REDEEM_CUSTOM_VAULT_FIELD, + BTC_REDEEM_CUSTOM_VAULT_SWITCH, + BTC_REDEEM_FEE_TOKEN, + BTC_REDEEM_PREMIUM_VAULT_FIELD, + BTCRedeemFormData, + btcRedeemSchema, useForm } from '@/lib/form'; -import { BridgeActions } from '@/types/bridge'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; import { RedeemData, useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; -import { BridgeVaultData, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { BridgeVaultData, GetVaultType, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -83,7 +83,7 @@ const RedeemForm = ({ const [selectedVault, setSelectedVault] = useState(); - const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.REDEEM); + const { data: vaultsData, getAvailableVaults } = useGetVaults(GetVaultType.REDEEM); const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0); const availableVaults = getAvailableVaults(debouncedMonetaryAmount); @@ -114,21 +114,21 @@ const RedeemForm = ({ const redeemBalance = assetBalance.gt(currentRequestLimit) ? currentRequestLimit : assetBalance; const getTransactionArgs = useCallback( - (values: BridgeRedeemFormData): TransactionArgs | undefined => { - const amount = values[BRIDGE_REDEEM_AMOUNT_FIELD]; - const btcAddress = values[BRIDGE_REDEEM_ADDRESS]; + (values: BTCRedeemFormData): TransactionArgs | undefined => { + const amount = values[BTC_REDEEM_AMOUNT_FIELD]; + const btcAddress = values[BTC_REDEEM_ADDRESS]; if (!vaultsData || !amount || !btcAddress) return; const monetaryAmount = newMonetaryAmount(amount, WRAPPED_TOKEN, true); - const isPremiumRedeem = values[BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]; + const isPremiumRedeem = values[BTC_REDEEM_PREMIUM_VAULT_FIELD]; const availableVaults = getAvailableVaults(monetaryAmount, isPremiumRedeem); if (!availableVaults) return; - const vaultId = values[BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]; + const vaultId = values[BTC_REDEEM_CUSTOM_VAULT_FIELD]; let vault: BridgeVaultData | undefined; @@ -147,12 +147,18 @@ const RedeemForm = ({ [vaultsData, getAvailableVaults] ); - const handleSubmit = async (values: BridgeRedeemFormData) => { + const handleSubmit = async (values: BTCRedeemFormData) => { const args = getTransactionArgs(values); if (!args) return; - transaction.execute(...args); + let [amount, ...rest] = args; + + if (transaction.fee.isEqualFeeCurrency(amount.currency)) { + amount = transaction.calculateAmountWithFeeDeducted(amount); + } + + transaction.execute(amount, ...rest); }; const monetaryAmount = newSafeMonetaryAmount(amount || 0, WRAPPED_TOKEN, true); @@ -169,16 +175,16 @@ const RedeemForm = ({ minAmount }; - const form = useForm({ + const form = useForm({ initialValues: { - [BRIDGE_REDEEM_AMOUNT_FIELD]: '', - [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]: '', - [BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]: false, - [BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]: false, - [BRIDGE_REDEEM_ADDRESS]: '', - [BRIDGE_REDEEM_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker + [BTC_REDEEM_AMOUNT_FIELD]: '', + [BTC_REDEEM_CUSTOM_VAULT_FIELD]: '', + [BTC_REDEEM_CUSTOM_VAULT_SWITCH]: false, + [BTC_REDEEM_PREMIUM_VAULT_FIELD]: false, + [BTC_REDEEM_ADDRESS]: '', + [BTC_REDEEM_FEE_TOKEN]: transaction.fee.defaultCurrency.ticker }, - validationSchema: bridgeRedeemSchema({ [BRIDGE_REDEEM_AMOUNT_FIELD]: transferAmountSchemaParams }), + validationSchema: btcRedeemSchema({ [BTC_REDEEM_AMOUNT_FIELD]: transferAmountSchemaParams }), onSubmit: handleSubmit, hideErrorMessages: transaction.isLoading, onComplete: (values) => { @@ -186,9 +192,7 @@ const RedeemForm = ({ if (!args) return; - const feeTicker = values[BRIDGE_REDEEM_FEE_TOKEN]; - - transaction.fee.setCurrency(feeTicker).estimate(...args); + transaction.fee.estimate(...args); } }); @@ -197,7 +201,7 @@ const RedeemForm = ({ // make vault select field untouched if (!isChecked) { - return form.setFieldTouched(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, false, true); + return form.setFieldTouched(BTC_REDEEM_CUSTOM_VAULT_FIELD, false, true); } }; @@ -206,14 +210,14 @@ const RedeemForm = ({ setPremiumRedeem(isChecked); - const isSelectingVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]; + const isSelectingVault = form.values[BTC_REDEEM_CUSTOM_VAULT_SWITCH]; // Do not continue if premium is unchecked and is not manually selecting vault if (!isChecked || !isSelectingVault) return; const premiumVaults = getAvailableVaults(monetaryAmount, true); - const selectedVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]; + const selectedVault = form.values[BTC_REDEEM_CUSTOM_VAULT_FIELD]; if (!selectedVault) return; @@ -221,7 +225,7 @@ const RedeemForm = ({ if (isSelectedVaultValid) return; - form.setFieldValue(BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, '', true); + form.setFieldValue(BTC_REDEEM_CUSTOM_VAULT_FIELD, '', true); }; const handleChangeIssueAmount = (e: ChangeEvent) => setAmount(e.target.value); @@ -254,7 +258,7 @@ const RedeemForm = ({ ) || 0 : 0; - const isSelectingVault = form.values[BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]; + const isSelectingVault = form.values[BTC_REDEEM_CUSTOM_VAULT_SWITCH]; const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); @@ -266,7 +270,7 @@ const RedeemForm = ({
- + {hasPremiumRedeemFeature && ( @@ -290,11 +298,11 @@ const RedeemForm = ({ @@ -316,8 +324,8 @@ const RedeemForm = ({ bridgeFee={bridgeFee} bitcoinNetworkFee={currentInclusionFee} feeDetailsProps={{ - ...transaction.fee.detailsProps, - selectProps: form.getFieldProps(BRIDGE_REDEEM_FEE_TOKEN, true) + fee: transaction.fee, + selectProps: form.getSelectFieldProps(BTC_REDEEM_FEE_TOKEN, true) }} /> diff --git a/src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx b/src/pages/BTC/BTCOverview/components/RedeemForm/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/RedeemForm/index.tsx rename to src/pages/BTC/BTCOverview/components/RedeemForm/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx b/src/pages/BTC/BTCOverview/components/RequestLimitsCard/RequestLimitsCard.tsx similarity index 94% rename from src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx rename to src/pages/BTC/BTCOverview/components/RequestLimitsCard/RequestLimitsCard.tsx index eae288b9e8..e7846703e9 100644 --- a/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/RequestLimitsCard.tsx +++ b/src/pages/BTC/BTCOverview/components/RequestLimitsCard/RequestLimitsCard.tsx @@ -20,7 +20,7 @@ const RequestLimitsCard = ({ title, singleRequestLimit, maxRequestLimit }: Reque
- {t('bridge.in_single_request')} + {t('btc.in_single_request')}
{singleRequestLimit.toHuman()} {singleRequestLimit.currency.ticker} @@ -29,7 +29,7 @@ const RequestLimitsCard = ({ title, singleRequestLimit, maxRequestLimit }: Reque {maxRequestLimit && (
- {t('bridge.in_total')} + {t('btc.in_total')}
{maxRequestLimit.toHuman()} {maxRequestLimit.currency.ticker} diff --git a/src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx b/src/pages/BTC/BTCOverview/components/RequestLimitsCard/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/RequestLimitsCard/index.tsx rename to src/pages/BTC/BTCOverview/components/RequestLimitsCard/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx similarity index 87% rename from src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx rename to src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx index 068bf1ba27..ec054e5320 100644 --- a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/SelectVaultCard.tsx +++ b/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx @@ -28,10 +28,10 @@ const SelectVaultCard = ({ vaults, isSelectingVault, switchProps, selectProps }: flex='1' > - {t('bridge.manually_select_vault')} + {t('btc.manually_select_vault')} {isSelectingVault && vaults && ( - + )} ); diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultListItem.tsx rename to src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.style.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.style.tsx rename to src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.style.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx similarity index 94% rename from src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx rename to src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx index 7f71e9c14f..2a84063612 100644 --- a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/VaultSelect.tsx +++ b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx @@ -11,7 +11,7 @@ const VaultSelect = (props: VaultSelectProps): JSX.Element => { const { t } = useTranslation(); return ( - {...props} type='modal' modalTitle={t('bridge.select_vault')} size='large'> + {...props} type='modal' modalTitle={t('btc.select_vault')} size='large'> {(data: BridgeVaultData) => ( diff --git a/src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/SelectVaultCard/index.tsx rename to src/pages/BTC/BTCOverview/components/SelectVaultCard/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx b/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.style.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.style.tsx rename to src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.style.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx b/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx similarity index 79% rename from src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx rename to src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx index fe146237c0..1003931a57 100644 --- a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/TransactionDetails.tsx +++ b/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx @@ -73,7 +73,7 @@ const TransactionDetails = ({ - - {t('bridge.bridge_fee')} + + {t('btc.bridge_fee')} {bridgeFee.toHuman()} {bridgeFee.currency.ticker} ( @@ -95,7 +95,7 @@ const TransactionDetails = ({ <> {securityDepositSelectProps && ( )} - - {t('bridge.security_deposit')} + + {t('btc.security_deposit')} {securityDeposit.toHuman()} {securityDeposit.currency.ticker} ( @@ -121,12 +121,26 @@ const TransactionDetails = ({ {showInsufficientSecurityBalance && ( {t('forms.ensure_adequate_amount_left_to_cover_action', { - action: t('bridge.security_deposit_token').toLowerCase() + action: t('btc.security_deposit_token').toLowerCase() })} )} {bitcoinNetworkFee && ( - + + + + {t('btc.bitcoin_network_fee')} + + + {bitcoinNetworkFee.toHuman()} {bitcoinNetworkFee.currency.ticker} ( + {displayMonetaryAmountInUSDFormat( + bitcoinNetworkFee, + getTokenPrice(prices, bitcoinNetworkFee.currency.ticker)?.usd + )} + ) + + + )} {feeDetailsProps && } diff --git a/src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx b/src/pages/BTC/BTCOverview/components/TransactionDetails/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/TransactionDetails/index.tsx rename to src/pages/BTC/BTCOverview/components/TransactionDetails/index.tsx diff --git a/src/pages/Bridge/BridgeOverview/components/index.tsx b/src/pages/BTC/BTCOverview/components/index.tsx similarity index 100% rename from src/pages/Bridge/BridgeOverview/components/index.tsx rename to src/pages/BTC/BTCOverview/components/index.tsx diff --git a/src/pages/BTC/BTCOverview/index.tsx b/src/pages/BTC/BTCOverview/index.tsx new file mode 100644 index 0000000000..616e915a66 --- /dev/null +++ b/src/pages/BTC/BTCOverview/index.tsx @@ -0,0 +1,3 @@ +import BTCOverview from './BTCOverview'; + +export default BTCOverview; diff --git a/src/pages/BTC/index.tsx b/src/pages/BTC/index.tsx new file mode 100644 index 0000000000..a4a294e46c --- /dev/null +++ b/src/pages/BTC/index.tsx @@ -0,0 +1,3 @@ +import BTC from './BTC'; + +export default BTC; diff --git a/src/pages/Bridge/BridgeOverview/index.tsx b/src/pages/Bridge/BridgeOverview/index.tsx deleted file mode 100644 index a1de6d6a3f..0000000000 --- a/src/pages/Bridge/BridgeOverview/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import BridgeOverview from './BridgeOverview'; - -export default BridgeOverview; diff --git a/src/pages/Bridge/index.tsx b/src/pages/Bridge/index.tsx deleted file mode 100644 index 4624eb9420..0000000000 --- a/src/pages/Bridge/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Bridge from './Bridge'; - -export default Bridge; diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx index 934b8db2d7..a67f41b51b 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx @@ -1,4 +1,5 @@ -import { CollateralPosition, LoanAsset } from '@interlay/interbtc-api'; +import { CollateralPosition, CurrencyExt, LoanAsset } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; import { useEffect, useRef } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; @@ -19,7 +20,7 @@ import { useGetLTV } from '../../hooks/use-get-ltv'; import { BorrowLimit } from '../BorrowLimit'; import { StyledDescription } from './CollateralModal.style'; -type CollateralModalVariant = 'enable' | 'disable' | 'disable-error'; +type CollateralModalVariant = 'enable' | 'disable' | 'disable-error' | 'disable-vault-collateral'; const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: LoanAsset) => ({ @@ -40,10 +41,21 @@ const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: Loa description: 'This asset is required to support your borrowed assets. Either repay borrowed assets, or supply another asset as collateral.', buttonLabel: `Dismiss` + }, + 'disable-vault-collateral': { + title: 'Already used as vault collateral', + description: + 'This asset is already used as vault collateral and therefore can not be used as collateral for lending.', + buttonLabel: `Dismiss` } }[variant]); -const getModalVariant = (isCollateralActive: boolean, ltvStatus?: Status): CollateralModalVariant => { +const getModalVariant = ( + isCollateralActive: boolean, + ltvStatus: Status | undefined, + vaultCollateralAmount: MonetaryAmount +): CollateralModalVariant => { + if (!vaultCollateralAmount.isZero()) return 'disable-vault-collateral'; if (!isCollateralActive) return 'enable'; // User is trying switching off collateral if (!ltvStatus || ltvStatus !== 'success') return 'disable-error'; @@ -60,7 +72,7 @@ type InheritAttrs = Omit; type CollateralModalProps = Props & InheritAttrs; -const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModalProps): JSX.Element | null => { +const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: CollateralModalProps): JSX.Element | null => { const { t } = useTranslation(); const { refetch } = useGetAccountLendingStatistics(); const { getLTV } = useGetLTV(); @@ -73,11 +85,11 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal onSuccess: refetch }); - const { isCollateral: isCollateralActive, amount: lendPositionAmount } = position; + const { isCollateral: isCollateralActive, amount: lendPositionAmount, vaultCollateralAmount } = position; const loanAction = isCollateralActive ? 'withdraw' : 'lend'; const currentLTV = getLTV({ type: loanAction, amount: lendPositionAmount }); - const variant = getModalVariant(isCollateralActive, currentLTV?.status); + const variant = getModalVariant(isCollateralActive, currentLTV?.status, vaultCollateralAmount); const handleSubmit = () => { if (variant === 'enable') { @@ -93,13 +105,11 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal }, validationSchema: toggleCollateralLoanSchema(), onSubmit: handleSubmit, - onComplete: async (values) => { - const feeTicker = values[LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]; - + onComplete: async () => { if (variant === 'enable') { - return transaction.fee.setCurrency(feeTicker).estimate(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); + return transaction.fee.estimate(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); } else { - return transaction.fee.setCurrency(feeTicker).estimate(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); + return transaction.fee.estimate(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); } } }); @@ -107,11 +117,11 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal // Doing this call on mount so that the form becomes dirty // TODO: find better approach useEffect(() => { - if (variant === 'disable-error') return; + if (variant === 'disable-error' || variant === 'disable-vault-collateral' || !isOpen) return; form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isOpen, variant]); const content = getContentMap(t, variant, asset); @@ -119,6 +129,7 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal return ( !overlappingModalRef.current?.contains(el)} {...props} @@ -127,11 +138,13 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal {content.description} - + {variant !== 'disable-vault-collateral' && ( + + )} - {variant === 'disable-error' ? ( + {variant === 'disable-error' || variant === 'disable-vault-collateral' ? ( {content.buttonLabel} @@ -139,9 +152,9 @@ const CollateralModal = ({ asset, position, onClose, ...props }: CollateralModal diff --git a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx index 3b7c53160e..ee2f28004b 100644 --- a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx @@ -17,6 +17,7 @@ import { useForm } from '@/lib/form'; import { LoanAction } from '@/types/loans'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -141,7 +142,11 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan if (!transactionData) return; - const { monetaryAmount } = transactionData; + let { monetaryAmount } = transactionData; + + if (transaction.fee.isEqualFeeCurrency(monetaryAmount.currency)) { + monetaryAmount = transaction.calculateAmountWithFeeDeducted(monetaryAmount); + } switch (variant) { case 'lend': @@ -179,41 +184,28 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan const { monetaryAmount } = transactionData; - const feeTicker = values[LOAN_FEE_TOKEN_FIELD]; - switch (variant) { case 'lend': - return transaction.fee - .setCurrency(feeTicker) - .estimate(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); + return transaction.fee.estimate(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); case 'withdraw': { if (isMaxAmount) { - return transaction.fee - .setCurrency(feeTicker) - .estimate(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); + return transaction.fee.estimate(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); } else { - return transaction.fee - .setCurrency(feeTicker) - .estimate(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); + return transaction.fee.estimate(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); } } case 'borrow': - return transaction.fee - .setCurrency(feeTicker) - .estimate(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); + return transaction.fee.estimate(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); case 'repay': { if (isMaxAmount) { return ( transaction.fee - .setCurrency(feeTicker) // passing the limit calculated, so it can be used in the validation in transaction hook .estimate(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, assetAmount.available) ); } else { - return transaction.fee - .setCurrency(feeTicker) - .estimate(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); + return transaction.fee.estimate(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); } } } @@ -247,12 +239,14 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan placeholder='0.00' ticker={asset.currency.ticker} aria-label={content.fieldAriaLabel} - balance={assetAmount.available.toString()} - humanBalance={assetAmount.available.toString()} balanceLabel={content.label} valueUSD={convertMonetaryAmountToValueInUSD(monetaryAmount, assetPrice) ?? 0} onClickBalance={handleClickBalance} - {...mergeProps(form.getFieldProps(LOAN_AMOUNT_FIELD, false, true), { onChange: handleChange })} + {...mergeProps( + form.getFieldProps(LOAN_AMOUNT_FIELD, false, true), + getTokenInputProps(assetAmount.available), + { onChange: handleChange } + )} /> {showBorrowLimit && ( )} {content.title} diff --git a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx index b5a9d0cf35..a593a41eaf 100644 --- a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx @@ -47,19 +47,17 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { }, validationSchema: claimRewardsLoanSchema(), onSubmit: () => transaction.execute(), - onComplete: async (values) => { - const feeTicker = values[LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD]; - - return transaction.fee.setCurrency(feeTicker).estimate(); - } + onComplete: async () => transaction.fee.estimate() }); // Doing this call on mount so that the form becomes dirty // TODO: improve approach useEffect(() => { + if (!isOpen) return; + form.setFieldValue(LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isOpen]); const { supplyAmountUSD, netAPY } = statistics || {}; @@ -130,9 +128,9 @@ const LoansInsights = ({ statistics }: LoansInsightsProps): JSX.Element => { diff --git a/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx b/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx index d0c8dd4b6a..0b9bf84d05 100644 --- a/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx +++ b/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx @@ -8,12 +8,14 @@ const getMaxWithdrawableAmountByBorrowLimit = ( position: CollateralPosition, lendingStats: LendingStats ): MonetaryAmount => { - const { amount, isCollateral } = position; + const { amount, isCollateral, vaultCollateralAmount } = position; const { collateralThreshold, exchangeRate, currency } = asset; const { borrowLimitBtc } = lendingStats; if (!isCollateral) { - return amount; + // MEMO: If the position is not used as loan collateral it can be used + // as vault collateral. + return amount.sub(vaultCollateralAmount); } const positionAmountBtc = exchangeRate.toBase(amount); diff --git a/src/pages/AMM/Pools/Pools.tsx b/src/pages/Pools/Pools.tsx similarity index 100% rename from src/pages/AMM/Pools/Pools.tsx rename to src/pages/Pools/Pools.tsx diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx b/src/pages/Pools/components/DepositForm/DepositForm.styles.tsx similarity index 100% rename from src/pages/AMM/Pools/components/DepositForm/DepositForm.styles.tsx rename to src/pages/Pools/components/DepositForm/DepositForm.styles.tsx diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx b/src/pages/Pools/components/DepositForm/DepositForm.tsx similarity index 77% rename from src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx rename to src/pages/Pools/components/DepositForm/DepositForm.tsx index 6a6c676b3a..a7ea4cdb6f 100644 --- a/src/pages/AMM/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/Pools/components/DepositForm/DepositForm.tsx @@ -1,4 +1,5 @@ import { CurrencyExt, LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; import { ChangeEventHandler, Fragment, RefObject, useCallback, useMemo, useState } from 'react'; @@ -6,7 +7,7 @@ import { useTranslation } from 'react-i18next'; import { newSafeMonetaryAmount } from '@/common/utils/utils'; import { Alert, Flex } from '@/component-library'; -import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { AuthCTA, SlippageManager, TransactionFeeDetails } from '@/components'; import { DepositLiquidityPoolFormData, depositLiquidityPoolSchema, @@ -14,8 +15,8 @@ import { POOL_DEPOSIT_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; -import { SlippageManager } from '@/pages/AMM/shared/components'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -27,8 +28,10 @@ import { PoolName } from '../PoolName'; import { StyledPlusDivider, StyledTokenInput } from './DepositForm.styles'; import { DepositOutputAssets } from './DepositOutputAssets'; -const isCustomAmountsMode = (form: ReturnType) => - form.dirty && Object.values(form.touched).filter(Boolean).length > 0; +const isCustomAmountsMode = (form: ReturnType, pool: LiquidityPool) => + // If pool has no liquidity, the assets ratio is set by the user, + // therefore the value inputted is directly used. + (form.dirty && Object.values(form.touched).filter(Boolean).length > 0) || pool.isEmpty; type DepositFormProps = { pool: LiquidityPool; @@ -42,6 +45,8 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi const [slippage, setSlippage] = useState(0.1); + const [isCustomMode, setCustomMode] = useState(false); + const accountId = useAccountId(); const { t } = useTranslation(); const { getAvailableBalance } = useGetBalances(); @@ -52,11 +57,32 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi onSigning }); + const getAmounts = useCallback( + (amounts: MonetaryAmount[]) => { + const feeCurrencyAmount = amounts.find((amount) => transaction.fee.isEqualFeeCurrency(amount.currency)); + + if (feeCurrencyAmount && transaction.fee.data) { + const newFeeCurrencyAmount = transaction.calculateAmountWithFeeDeducted(feeCurrencyAmount); + + if (isCustomMode) { + return amounts.map((amount) => + transaction.fee.isEqualFeeCurrency(amount.currency) ? newFeeCurrencyAmount : amount + ); + } else { + return pool.getLiquidityDepositInputAmounts(newFeeCurrencyAmount); + } + } + + return amounts; + }, + [isCustomMode, pool, transaction] + ); + const getTransactionArgs = useCallback( async (values: DepositLiquidityPoolFormData) => { if (!accountId) return; - const amounts = pooledCurrencies.map((amount) => + const amounts: MonetaryAmount[] = pooledCurrencies.map((amount) => newSafeMonetaryAmount(values[amount.currency.ticker] || 0, amount.currency, true) ); @@ -78,7 +104,9 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi const { accountId, amounts, deadline, pool } = transactionData; - return transaction.execute(amounts, pool, slippage, deadline, accountId); + const newAmounts = getAmounts(amounts); + + return transaction.execute(newAmounts, pool, slippage, deadline, accountId); }; const tokens = useMemo( @@ -115,16 +143,16 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi const { accountId, amounts, deadline, pool } = transactionData; - const feeTicker = values[POOL_DEPOSIT_FEE_TOKEN_FIELD]; - - return transaction.fee.setCurrency(feeTicker).estimate(amounts, pool, slippage, deadline, accountId); + return transaction.fee.estimate(amounts, pool, slippage, deadline, accountId); } }); - const handleChange: ChangeEventHandler = (e) => { - // If pool has no liquidity, the assets ratio is set by the user, - // therefore the value inputted is directly used. - if (isCustomAmountsMode(form) || pool.isEmpty) return; + const handleChange: ChangeEventHandler = async (e) => { + const isCustom = isCustomAmountsMode(form, pool); + + if (isCustom) { + return setCustomMode(true); + } if (!e.target.value || isNaN(Number(e.target.value))) { return form.setValues({ ...form.values, ...defaultValues }); @@ -176,12 +204,12 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi aria-label={t('forms.field_amount', { field: `${ticker} ${t('deposit').toLowerCase()}` })} - balance={balance?.toString() || 0} - humanBalance={balance?.toHuman() || 0} valueUSD={new Big(isNaN(Number(form.values[ticker])) ? 0 : form.values[ticker] || 0) .mul(getTokenPrice(prices, ticker)?.usd || 0) .toNumber()} - {...mergeProps(form.getFieldProps(ticker, false, true), { onChange: handleChange })} + {...mergeProps(form.getFieldProps(ticker, false, false), getTokenInputProps(balance), { + onChange: handleChange + })} /> {!isLastItem && } @@ -197,8 +225,8 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi )} {t('amm.pools.add_liquidity')} diff --git a/src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx b/src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx similarity index 100% rename from src/pages/AMM/Pools/components/DepositForm/DepositOutputAssets.tsx rename to src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx diff --git a/src/pages/AMM/Pools/components/DepositForm/index.tsx b/src/pages/Pools/components/DepositForm/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/DepositForm/index.tsx rename to src/pages/Pools/components/DepositForm/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx b/src/pages/Pools/components/PoolModal/PoolModal.style.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolModal/PoolModal.style.tsx rename to src/pages/Pools/components/PoolModal/PoolModal.style.tsx diff --git a/src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx b/src/pages/Pools/components/PoolModal/PoolModal.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolModal/PoolModal.tsx rename to src/pages/Pools/components/PoolModal/PoolModal.tsx diff --git a/src/pages/AMM/Pools/components/PoolModal/index.tsx b/src/pages/Pools/components/PoolModal/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolModal/index.tsx rename to src/pages/Pools/components/PoolModal/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolName/PoolName.style.tsx b/src/pages/Pools/components/PoolName/PoolName.style.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolName/PoolName.style.tsx rename to src/pages/Pools/components/PoolName/PoolName.style.tsx diff --git a/src/pages/AMM/Pools/components/PoolName/PoolName.tsx b/src/pages/Pools/components/PoolName/PoolName.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolName/PoolName.tsx rename to src/pages/Pools/components/PoolName/PoolName.tsx diff --git a/src/pages/AMM/Pools/components/PoolName/index.tsx b/src/pages/Pools/components/PoolName/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolName/index.tsx rename to src/pages/Pools/components/PoolName/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolsBaseTable/BalanceCell.tsx b/src/pages/Pools/components/PoolsBaseTable/BalanceCell.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsBaseTable/BalanceCell.tsx rename to src/pages/Pools/components/PoolsBaseTable/BalanceCell.tsx diff --git a/src/pages/AMM/Pools/components/PoolsBaseTable/MonetaryCell.tsx b/src/pages/Pools/components/PoolsBaseTable/MonetaryCell.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsBaseTable/MonetaryCell.tsx rename to src/pages/Pools/components/PoolsBaseTable/MonetaryCell.tsx diff --git a/src/pages/AMM/Pools/components/PoolsBaseTable/PoolsBaseTable.style.tsx b/src/pages/Pools/components/PoolsBaseTable/PoolsBaseTable.style.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsBaseTable/PoolsBaseTable.style.tsx rename to src/pages/Pools/components/PoolsBaseTable/PoolsBaseTable.style.tsx diff --git a/src/pages/AMM/Pools/components/PoolsBaseTable/PoolsBaseTable.tsx b/src/pages/Pools/components/PoolsBaseTable/PoolsBaseTable.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsBaseTable/PoolsBaseTable.tsx rename to src/pages/Pools/components/PoolsBaseTable/PoolsBaseTable.tsx diff --git a/src/pages/AMM/Pools/components/PoolsBaseTable/index.tsx b/src/pages/Pools/components/PoolsBaseTable/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsBaseTable/index.tsx rename to src/pages/Pools/components/PoolsBaseTable/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.style.tsx b/src/pages/Pools/components/PoolsInsights/PoolsInsights.style.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.style.tsx rename to src/pages/Pools/components/PoolsInsights/PoolsInsights.style.tsx diff --git a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx similarity index 94% rename from src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx rename to src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx index 883ba28318..8aa640d6e4 100644 --- a/src/pages/AMM/Pools/components/PoolsInsights/PoolsInsights.tsx +++ b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx @@ -19,7 +19,7 @@ import { POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; -import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; +import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; @@ -57,20 +57,20 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) }, validationSchema: claimRewardsPoolSchema(), onSubmit: handleSubmit, - onComplete: async (values) => { + onComplete: async () => { if (!accountPoolsData) return; - const feeTicker = values[POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD]; - - return transaction.fee.setCurrency(feeTicker).estimate(accountPoolsData.claimableRewards); + return transaction.fee.estimate(accountPoolsData.claimableRewards); } }); // Doing this call on mount so that the form becomes dirty useEffect(() => { + if (!isOpen) return; + form.setFieldValue(POOL_CLAIM_REWARDS_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [isOpen]); const handleCloseModal = () => setOpen(false); @@ -152,9 +152,9 @@ const PoolsInsights = ({ pools, accountPoolsData, refetch }: PoolsInsightsProps) diff --git a/src/pages/AMM/Pools/components/PoolsInsights/index.tsx b/src/pages/Pools/components/PoolsInsights/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsInsights/index.tsx rename to src/pages/Pools/components/PoolsInsights/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolsInsights/utils.ts b/src/pages/Pools/components/PoolsInsights/utils.ts similarity index 91% rename from src/pages/AMM/Pools/components/PoolsInsights/utils.ts rename to src/pages/Pools/components/PoolsInsights/utils.ts index f5d171d2a3..cd523dd59d 100644 --- a/src/pages/AMM/Pools/components/PoolsInsights/utils.ts +++ b/src/pages/Pools/components/PoolsInsights/utils.ts @@ -1,7 +1,7 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; +import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { Prices } from '@/utils/hooks/api/use-get-prices'; const calculateClaimableFarmingRewardUSD = ( diff --git a/src/pages/AMM/Pools/components/PoolsTables/PoolsTables.tsx b/src/pages/Pools/components/PoolsTables/PoolsTables.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsTables/PoolsTables.tsx rename to src/pages/Pools/components/PoolsTables/PoolsTables.tsx diff --git a/src/pages/AMM/Pools/components/PoolsTables/index.tsx b/src/pages/Pools/components/PoolsTables/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/PoolsTables/index.tsx rename to src/pages/Pools/components/PoolsTables/index.tsx diff --git a/src/pages/AMM/Pools/components/PoolsTables/utils.ts b/src/pages/Pools/components/PoolsTables/utils.ts similarity index 91% rename from src/pages/AMM/Pools/components/PoolsTables/utils.ts rename to src/pages/Pools/components/PoolsTables/utils.ts index fb29bc9922..48f7280618 100644 --- a/src/pages/AMM/Pools/components/PoolsTables/utils.ts +++ b/src/pages/Pools/components/PoolsTables/utils.ts @@ -2,7 +2,7 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; -import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; +import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { Prices } from '@/utils/hooks/api/use-get-prices'; const getFarmingApr = ( diff --git a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx similarity index 89% rename from src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx rename to src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx index f513e28299..27c4598d94 100644 --- a/src/pages/AMM/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -1,16 +1,17 @@ import { LiquidityPool, newMonetaryAmount } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; import Big from 'big.js'; import { RefObject, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Flex, TokenInput } from '@/component-library'; -import { AuthCTA, ReceivableAssets, TransactionFeeDetails } from '@/components'; +import { AuthCTA, ReceivableAssets, SlippageManager, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { POOL_WITHDRAW_AMOUNT_FIELD, POOL_WITHDRAW_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; import { WithdrawLiquidityPoolFormData, withdrawLiquidityPoolSchema } from '@/lib/form/schemas'; -import { SlippageManager } from '@/pages/AMM/shared/components'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -98,9 +99,7 @@ const WithdrawForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Withd const { accountId, amount, deadline, pool } = transactionData; - const feeTicker = values[POOL_WITHDRAW_FEE_TOKEN_FIELD]; - - return transaction.fee.setCurrency(feeTicker).estimate(amount, pool, slippage, deadline, accountId); + return transaction.fee.estimate(amount, pool, slippage, deadline, accountId); } }); @@ -137,17 +136,18 @@ const WithdrawForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Withd aria-label={t('forms.field_amount', { field: t('withdraw').toLowerCase() })} - balance={balance?.toString() || 0} - humanBalance={balance?.toHuman() || 0} valueUSD={pooledAmountsUSD} - {...form.getFieldProps(POOL_WITHDRAW_AMOUNT_FIELD)} + {...mergeProps(form.getFieldProps(POOL_WITHDRAW_AMOUNT_FIELD), getTokenInputProps(balance))} /> {t('amm.pools.remove_liquidity')} diff --git a/src/pages/AMM/Pools/components/WithdrawForm/index.tsx b/src/pages/Pools/components/WithdrawForm/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/WithdrawForm/index.tsx rename to src/pages/Pools/components/WithdrawForm/index.tsx diff --git a/src/pages/AMM/Pools/components/index.tsx b/src/pages/Pools/components/index.tsx similarity index 100% rename from src/pages/AMM/Pools/components/index.tsx rename to src/pages/Pools/components/index.tsx diff --git a/src/pages/AMM/Pools/index.tsx b/src/pages/Pools/index.tsx similarity index 100% rename from src/pages/AMM/Pools/index.tsx rename to src/pages/Pools/index.tsx diff --git a/src/pages/Transfer/Transfer.tsx b/src/pages/SendAndReceive/SendAndReceive.tsx similarity index 54% rename from src/pages/Transfer/Transfer.tsx rename to src/pages/SendAndReceive/SendAndReceive.tsx index 4db6b8d1ba..83465a09e5 100644 --- a/src/pages/Transfer/Transfer.tsx +++ b/src/pages/SendAndReceive/SendAndReceive.tsx @@ -2,13 +2,13 @@ import { withErrorBoundary } from 'react-error-boundary'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import TransferForms from './TransferForms'; +import SendAndReceiveForms from './SendAndReceiveForms'; -const Transfer = (): JSX.Element => { - return ; +const SendAndReceive = (): JSX.Element => { + return ; }; -export default withErrorBoundary(Transfer, { +export default withErrorBoundary(SendAndReceive, { FallbackComponent: ErrorFallback, onReset: () => { window.location.reload(); diff --git a/src/pages/Transfer/TransferForms/TransferForms.styles.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.styles.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/TransferForms.styles.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.styles.tsx diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx new file mode 100644 index 0000000000..bda9fd25c6 --- /dev/null +++ b/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx @@ -0,0 +1,38 @@ +import { Flex, Tabs, TabsItem } from '@/component-library'; +import MainContainer from '@/parts/MainContainer'; +import { QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; +import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; + +import { BridgeForm, TransferForm } from './components'; +import { StyledCard, StyledFormWrapper, StyledWrapper } from './SendAndReceiveForms.styles'; + +const SendAndReceiveForms = (): JSX.Element => { + const { data, tabsProps } = usePageQueryParams(); + + const ticker: string | undefined = data[QUERY_PARAMETERS.TRANSFER.TICKER]; + + return ( + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default SendAndReceiveForms; diff --git a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.styles.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.styles.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.styles.tsx diff --git a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx similarity index 70% rename from src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx index 0205b1c07a..1d03c7fe6a 100644 --- a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/CrossChainTransferForm.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx @@ -16,19 +16,19 @@ import { TransactionDetailsGroup } from '@/components'; import { - CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, - CROSS_CHAIN_TRANSFER_FROM_FIELD, - CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, - CROSS_CHAIN_TRANSFER_TO_FIELD, - CROSS_CHAIN_TRANSFER_TOKEN_FIELD, - CrossChainTransferFormData, - crossChainTransferSchema, - CrossChainTransferValidationParams, + BRIDGE_AMOUNT_FIELD, + BRIDGE_FROM_FIELD, + BRIDGE_TO_ACCOUNT_FIELD, + BRIDGE_TO_FIELD, + BRIDGE_TOKEN_FIELD, + BridgeFormData, + bridgeSchema, + BridgeValidationParams, isFormDisabled, useForm } from '@/lib/form'; import { useSubstrateSecureState } from '@/lib/substrate'; -import { Chains } from '@/types/chains'; +import { ChainData, Chains } from '@/types/chains'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; @@ -37,9 +37,10 @@ import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { ChainSelect } from '../ChainSelect'; -import { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect } from './CrossChainTransferForm.styles'; +import { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect } from './BridgeForm.styles'; -const CrossChainTransferForm = (): JSX.Element => { +// TODO: re-work code to allow ticker has query parameter +const BridgeForm = (): JSX.Element => { const [destinationChains, setDestinationChains] = useState([]); const [transferableTokens, setTransferableTokens] = useState([]); const [currentToken, setCurrentToken] = useState(); @@ -53,8 +54,8 @@ const CrossChainTransferForm = (): JSX.Element => { const { data, getDestinationChains, originatingChains, getAvailableTokens } = useXCMBridge(); - const schema: CrossChainTransferValidationParams = { - [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: { + const schema: BridgeValidationParams = { + [BRIDGE_AMOUNT_FIELD]: { minAmount: currentToken ? newMonetaryAmount(currentToken.minTransferAmount, getCurrencyFromTicker(currentToken.value), true) : undefined, @@ -66,51 +67,47 @@ const CrossChainTransferForm = (): JSX.Element => { const transaction = useTransaction(Transaction.XCM_TRANSFER, { onSuccess: () => { - setTokenData(form.values[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName); - form.setFieldValue(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, ''); + setTokenData(form.values[BRIDGE_TO_FIELD] as ChainName); + form.setFieldValue(BRIDGE_AMOUNT_FIELD, ''); } }); - const handleSubmit = async (formData: CrossChainTransferFormData) => { + const handleSubmit = async (formData: BridgeFormData) => { if (!data || !formData || !currentToken) return; - const address = formData[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string; + const address = formData[BRIDGE_TO_ACCOUNT_FIELD] as string; const { signer } = await web3FromAddress(address); - const adapter = data.bridge.findAdapter(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName); - const apiPromise = data.provider.getApiPromise(formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as string); + const adapter = data.bridge.findAdapter(formData[BRIDGE_FROM_FIELD] as ChainName); + const apiPromise = data.provider.getApiPromise(formData[BRIDGE_FROM_FIELD] as string); apiPromise.setSigner(signer); adapter.setApi(apiPromise); const transferCurrency = getCurrencyFromTicker(currentToken.value); - const transferAmount = newMonetaryAmount( - form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] || 0, - transferCurrency, - true - ); + const transferAmount = newMonetaryAmount(form.values[BRIDGE_AMOUNT_FIELD] || 0, transferCurrency, true); - const fromChain = formData[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName; - const toChain = formData[CROSS_CHAIN_TRANSFER_TO_FIELD] as ChainName; + const fromChain = originatingChains?.find((chain) => chain.id === formData[BRIDGE_FROM_FIELD]) as ChainData; + const toChain = destinationChains.find((chain) => chain.id === formData[BRIDGE_TO_FIELD]) as ChainData; transaction.execute(adapter, fromChain, toChain, address, transferAmount); }; - const form = useForm({ + const form = useForm({ initialValues: { - [CROSS_CHAIN_TRANSFER_AMOUNT_FIELD]: '', - [CROSS_CHAIN_TRANSFER_TOKEN_FIELD]: '', - [CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD]: accountId?.toString() || '' + [BRIDGE_AMOUNT_FIELD]: '', + [BRIDGE_TOKEN_FIELD]: '', + [BRIDGE_TO_ACCOUNT_FIELD]: accountId?.toString() || '' }, onSubmit: handleSubmit, - validationSchema: crossChainTransferSchema(schema, t) + validationSchema: bridgeSchema(schema, t) }); const handleOriginatingChainChange = (chain: ChainName) => { const destinationChains = getDestinationChains(chain); setDestinationChains(destinationChains); - form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_FIELD, destinationChains[0].id); + form.setFieldValue(BRIDGE_TO_FIELD, destinationChains[0].id); }; const handleDestinationChainChange = async (chain: ChainName) => { @@ -125,7 +122,7 @@ const CrossChainTransferForm = (): JSX.Element => { }; const handleDestinationAccountChange: ChangeEventHandler = (e) => { - form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, e.target.value); + form.setFieldValue(BRIDGE_TO_ACCOUNT_FIELD, e.target.value); }; const setTokenData = useCallback( @@ -133,10 +130,10 @@ const CrossChainTransferForm = (): JSX.Element => { if (!accountId || !form) return; const tokens = await getAvailableTokens( - form.values[CROSS_CHAIN_TRANSFER_FROM_FIELD] as ChainName, + form.values[BRIDGE_FROM_FIELD] as ChainName, destination, accountId.toString(), - form.values[CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD] as string + form.values[BRIDGE_TO_ACCOUNT_FIELD] as string ); if (!tokens) return; @@ -147,17 +144,13 @@ const CrossChainTransferForm = (): JSX.Element => { const token = tokens.find((token) => token.value === currentToken?.value) || tokens[0]; setCurrentToken(token); - form.setFieldValue(CROSS_CHAIN_TRANSFER_TOKEN_FIELD, token.value); + form.setFieldValue(BRIDGE_TOKEN_FIELD, token.value); }, [accountId, currentToken, form, getAvailableTokens] ); const transferMonetaryAmount = currentToken - ? newSafeMonetaryAmount( - form.values[CROSS_CHAIN_TRANSFER_AMOUNT_FIELD] || 0, - getCurrencyFromTicker(currentToken.value), - true - ) + ? newSafeMonetaryAmount(form.values[BRIDGE_AMOUNT_FIELD] || 0, getCurrencyFromTicker(currentToken.value), true) : 0; const valueUSD = transferMonetaryAmount @@ -173,12 +166,12 @@ const CrossChainTransferForm = (): JSX.Element => { if (!originatingChains?.length) return; // This prevents a render loop caused by setFieldValue - if (form.values[CROSS_CHAIN_TRANSFER_FROM_FIELD]) return; + if (form.values[BRIDGE_FROM_FIELD]) return; const destinationChains = getDestinationChains(originatingChains[0].id); - form.setFieldValue(CROSS_CHAIN_TRANSFER_FROM_FIELD, originatingChains[0].id); - form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_FIELD, destinationChains[0].id); + form.setFieldValue(BRIDGE_FROM_FIELD, originatingChains[0].id); + form.setFieldValue(BRIDGE_TO_FIELD, destinationChains[0].id); setDestinationChains(destinationChains); @@ -197,7 +190,7 @@ const CrossChainTransferForm = (): JSX.Element => { // that it's consitent across the application useEffect(() => { if (!accountId) return; - form.setFieldValue(CROSS_CHAIN_TRANSFER_TO_ACCOUNT_FIELD, accountId?.toString()); + form.setFieldValue(BRIDGE_TO_ACCOUNT_FIELD, accountId?.toString()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [accountId]); @@ -216,7 +209,7 @@ const CrossChainTransferForm = (): JSX.Element => { handleOriginatingChainChange(key as ChainName) })} /> @@ -224,7 +217,7 @@ const CrossChainTransferForm = (): JSX.Element => { handleDestinationChainChange(key as ChainName) })} /> @@ -236,18 +229,17 @@ const CrossChainTransferForm = (): JSX.Element => { balance={currentToken?.balance.toString() || 0} humanBalance={currentToken?.balance.toString() || 0} valueUSD={valueUSD || 0} - selectProps={mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_TOKEN_FIELD), { - onSelectionChange: (ticker: Key) => - handleTickerChange(ticker as string, CROSS_CHAIN_TRANSFER_TOKEN_FIELD), + selectProps={mergeProps(form.getSelectFieldProps(BRIDGE_TOKEN_FIELD), { + onSelectionChange: (ticker: Key) => handleTickerChange(ticker as string, BRIDGE_TOKEN_FIELD), items: transferableTokens })} - {...mergeProps(form.getFieldProps(CROSS_CHAIN_TRANSFER_AMOUNT_FIELD, false, true))} + {...mergeProps(form.getFieldProps(BRIDGE_AMOUNT_FIELD, false, true))} />
@@ -273,4 +265,4 @@ const CrossChainTransferForm = (): JSX.Element => { ); }; -export { CrossChainTransferForm }; +export { BridgeForm }; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/index.tsx new file mode 100644 index 0000000000..d6be25ecaf --- /dev/null +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/index.tsx @@ -0,0 +1 @@ +export { BridgeForm } from './BridgeForm'; diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.style.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.style.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.style.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.style.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/ChainIcon.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Acala.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Acala.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Acala.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Acala.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Astar.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Astar.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Astar.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Astar.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Bifrost.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Bifrost.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Bifrost.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Bifrost.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Heiko.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Heiko.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Heiko.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Heiko.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Hydra.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Hydra.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Hydra.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Hydra.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Interlay.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Interlay.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Interlay.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Interlay.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Karura.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Karura.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Karura.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Karura.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kintsugi.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Kintsugi.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kintsugi.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Kintsugi.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kusama.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Kusama.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Kusama.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Kusama.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Parallel.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Parallel.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Parallel.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Parallel.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Polkadot.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Polkadot.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Polkadot.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Polkadot.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemine.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Statemine.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemine.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Statemine.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemint.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Statemint.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/Statemint.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/Statemint.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/icons/index.ts b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/icons/index.ts rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts diff --git a/src/pages/Transfer/TransferForms/components/ChainIcon/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/index.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainIcon/index.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/index.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.style.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/ChainSelect.style.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.style.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/ChainSelect.style.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/ChainSelect.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainSelect/ChainSelect.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/ChainSelect.tsx diff --git a/src/pages/Transfer/TransferForms/components/ChainSelect/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/index.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/ChainSelect/index.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/ChainSelect/index.tsx diff --git a/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx similarity index 76% rename from src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx index a45b540242..cb12ef11a5 100644 --- a/src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx @@ -1,6 +1,6 @@ import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { mergeProps } from '@react-aria/utils'; -import { Key, useCallback, useMemo, useState } from 'react'; +import { Key, useCallback, useEffect, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; @@ -18,6 +18,7 @@ import { transferSchema, TransferValidationParams } from '@/lib/form/schemas'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; @@ -26,12 +27,15 @@ import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; -const TransferForm = (): JSX.Element => { - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); +type TransferFormProps = { + ticker?: string; +}; +const TransferForm = ({ ticker }: TransferFormProps): JSX.Element => { + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const prices = useGetPrices(); - const { getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); - const { getBalance } = useGetBalances(); + const { data: currencies, getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); + const { getAvailableBalance } = useGetBalances(); const { items: selectItems } = useSelectCurrency(); const [transferToken, setTransferToken] = useState(GOVERNANCE_TOKEN); @@ -42,7 +46,7 @@ const TransferForm = (): JSX.Element => { } }); - const transferTokenBalance = transferToken && getBalance(transferToken.ticker)?.transferable; + const transferTokenBalance = transferToken && getAvailableBalance(transferToken.ticker); const minAmount = transferToken && newMonetaryAmount(1, transferToken); @@ -72,7 +76,11 @@ const TransferForm = (): JSX.Element => { if (!transactionData) return; - const { amount, destination } = transactionData; + let { amount, destination } = transactionData; + + if (transaction.fee.isEqualFeeCurrency(amount.currency)) { + amount = transaction.calculateAmountWithFeeDeducted(amount); + } transaction.execute(destination, amount); }; @@ -98,12 +106,22 @@ const TransferForm = (): JSX.Element => { if (!transactionData) return; - const { amount, destination, feeTicker } = transactionData; + const { amount, destination } = transactionData; - transaction.fee.setCurrency(feeTicker).estimate(destination, amount); + transaction.fee.estimate(destination, amount); } }); + useEffect(() => { + if (!currencies || !ticker) return; + + const currency = getCurrencyFromTicker(ticker); + + setTransferToken(currency); + form.setFieldValue(TRANSFER_TOKEN_FIELD, ticker); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currencies, getCurrencyFromTicker, ticker]); + const handleTickerChange = (ticker: string, name: string) => { form.setFieldValue(name, ticker, true); const currency = getCurrencyFromTicker(ticker); @@ -128,14 +146,15 @@ const TransferForm = (): JSX.Element => { handleTickerChange(ticker as string, TRANSFER_TOKEN_FIELD), items: selectItems })} - {...mergeProps(form.getFieldProps(TRANSFER_AMOUNT_FIELD, false, true))} + {...mergeProps( + form.getFieldProps(TRANSFER_AMOUNT_FIELD, false, true), + getTokenInputProps(transferTokenBalance) + )} /> { Transfer diff --git a/src/pages/Transfer/TransferForms/components/TransferForm/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/index.tsx similarity index 100% rename from src/pages/Transfer/TransferForms/components/TransferForm/index.tsx rename to src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/index.tsx diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/index.tsx new file mode 100644 index 0000000000..65bc266770 --- /dev/null +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/index.tsx @@ -0,0 +1,4 @@ +import { BridgeForm } from './BridgeForm'; +import { TransferForm } from './TransferForm'; + +export { BridgeForm, TransferForm }; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/index.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/index.tsx new file mode 100644 index 0000000000..040b733b5a --- /dev/null +++ b/src/pages/SendAndReceive/SendAndReceiveForms/index.tsx @@ -0,0 +1,3 @@ +import SendAndReceiveOverview from './SendAndReceiveForms'; + +export default SendAndReceiveOverview; diff --git a/src/pages/SendAndReceive/index.tsx b/src/pages/SendAndReceive/index.tsx new file mode 100644 index 0000000000..594925dfa0 --- /dev/null +++ b/src/pages/SendAndReceive/index.tsx @@ -0,0 +1,3 @@ +import SendAndReceive from './SendAndReceive'; + +export default SendAndReceive; diff --git a/src/pages/AMM/Swap/Swap.style.tsx b/src/pages/Swap/Swap.style.tsx similarity index 100% rename from src/pages/AMM/Swap/Swap.style.tsx rename to src/pages/Swap/Swap.style.tsx diff --git a/src/pages/AMM/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx similarity index 89% rename from src/pages/AMM/Swap/Swap.tsx rename to src/pages/Swap/Swap.tsx index 427fd5b7f8..c3986c5ff2 100644 --- a/src/pages/AMM/Swap/Swap.tsx +++ b/src/pages/Swap/Swap.tsx @@ -11,7 +11,7 @@ import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getPooledTickers } from '@/utils/helpers/pools'; import { useGetLiquidityPools } from '@/utils/hooks/api/amm/use-get-liquidity-pools'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import useQueryParams from '@/utils/hooks/use-query-params'; +import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; import { SwapForm, SwapLiquidity } from './components'; import { StyledWrapper } from './Swap.style'; @@ -19,7 +19,7 @@ import { StyledWrapper } from './Swap.style'; const DEFAULT_PAIR: SwapPair = { input: RELAY_CHAIN_NATIVE_TOKEN }; const Swap = (): JSX.Element => { - const query = useQueryParams(); + const { data: queryParams } = usePageQueryParams(); const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { data: liquidityPools, refetch } = useGetLiquidityPools(); @@ -32,14 +32,14 @@ const Swap = (): JSX.Element => { useEffect(() => { if (!currencies) return; - const inputQuery = query.get(QUERY_PARAMETERS.SWAP.FROM); - const outputQuery = query.get(QUERY_PARAMETERS.SWAP.TO); + const inputQuery = queryParams[QUERY_PARAMETERS.SWAP.FROM]; + const outputQuery = queryParams[QUERY_PARAMETERS.SWAP.TO]; const fromCurrency = inputQuery ? getCurrencyFromTicker(inputQuery) : DEFAULT_PAIR.input; const toCurrency = outputQuery ? getCurrencyFromTicker(outputQuery) : DEFAULT_PAIR.output; setPair({ input: fromCurrency, output: toCurrency }); - }, [currencies, query, getCurrencyFromTicker]); + }, [currencies, queryParams, getCurrencyFromTicker]); if (liquidityPools === undefined || pooledTickers === undefined) { return ; diff --git a/src/pages/AMM/Swap/components/PriceImpactModal/PriceImpactModal.style.tsx b/src/pages/Swap/components/PriceImpactModal/PriceImpactModal.style.tsx similarity index 100% rename from src/pages/AMM/Swap/components/PriceImpactModal/PriceImpactModal.style.tsx rename to src/pages/Swap/components/PriceImpactModal/PriceImpactModal.style.tsx diff --git a/src/pages/AMM/Swap/components/PriceImpactModal/PriceImpactModal.tsx b/src/pages/Swap/components/PriceImpactModal/PriceImpactModal.tsx similarity index 100% rename from src/pages/AMM/Swap/components/PriceImpactModal/PriceImpactModal.tsx rename to src/pages/Swap/components/PriceImpactModal/PriceImpactModal.tsx diff --git a/src/pages/AMM/Swap/components/PriceImpactModal/index.tsx b/src/pages/Swap/components/PriceImpactModal/index.tsx similarity index 100% rename from src/pages/AMM/Swap/components/PriceImpactModal/index.tsx rename to src/pages/Swap/components/PriceImpactModal/index.tsx diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx b/src/pages/Swap/components/SwapForm/SwapCTA.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapForm/SwapCTA.tsx rename to src/pages/Swap/components/SwapForm/SwapCTA.tsx diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx b/src/pages/Swap/components/SwapForm/SwapDivider.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapForm/SwapDivider.tsx rename to src/pages/Swap/components/SwapForm/SwapDivider.tsx diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx b/src/pages/Swap/components/SwapForm/SwapForm.style.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapForm/SwapForm.style.tsx rename to src/pages/Swap/components/SwapForm/SwapForm.style.tsx diff --git a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx b/src/pages/Swap/components/SwapForm/SwapForm.tsx similarity index 84% rename from src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx rename to src/pages/Swap/components/SwapForm/SwapForm.tsx index 99d18a2385..45f9c964d9 100644 --- a/src/pages/AMM/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/Swap/components/SwapForm/SwapForm.tsx @@ -9,7 +9,7 @@ import { useDebounce, useInterval } from 'react-use'; import { StoreType } from '@/common/types/util.types'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Card, CardProps, Divider, Flex, H1, TokenInput } from '@/component-library'; -import { TransactionFeeDetails } from '@/components'; +import { SlippageManager, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; import { SWAP_FEE_TOKEN_FIELD, @@ -20,15 +20,15 @@ import { swapSchema, useForm } from '@/lib/form'; -import { SlippageManager } from '@/pages/AMM/shared/components'; import { SwapPair } from '@/types/swap'; import { REFETCH_INTERVAL } from '@/utils/constants/api'; import { SWAP_PRICE_IMPACT_LIMIT } from '@/utils/constants/swap'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; +import { FeeEstimateResult, Transaction, useTransaction } from '@/utils/hooks/transaction'; import useAccountId from '@/utils/hooks/use-account-id'; import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; @@ -68,9 +68,7 @@ const getAmountsUSD = (pair: SwapPair, prices?: Prices, trade?: Trade | null, in return { inputAmountUSD, - outputAmountUSD, - inputMonetary: monetaryAmount, - outputMonetary: trade?.outputAmount + outputAmountUSD }; }; @@ -121,10 +119,19 @@ const SwapForm = ({ form.setFieldValue(SWAP_INPUT_AMOUNT_FIELD, '', true); setTrade(undefined); }, - onSuccess: onSwap + onSuccess: onSwap, + onFeeChange: (data) => { + const previousFeeData = transaction.fee.data; + + // checks previous fee because it could be affecting the trade amounts + // only computes another trade when fee currency is equal to input currency + if (previousFeeData?.isEqualToActionCurrency || data.isEqualToActionCurrency) { + handleChangeTrade(data); + } + } }); - const handleChangeTrade = () => { + const handleChangeTrade = async (feeData?: FeeEstimateResult) => { if (!pair.input || !pair.output || !inputAmount) { return setTrade(undefined); } @@ -132,6 +139,25 @@ const SwapForm = ({ const inputMonetaryAmount = newMonetaryAmount(inputAmount, pair.input, true); const trade = window.bridge.amm.getOptimalTrade(inputMonetaryAmount, pair.output, liquidityPools); + if (trade) { + const transactionData = await getTransactionArgs(trade); + + if (!transactionData) return; + + const { accountId, deadline, minimumAmountOut, trade: tradeData } = transactionData; + + const feeEstimate = + feeData || (await transaction.fee.estimateAsync(tradeData, minimumAmountOut, accountId, deadline)); + + if (feeEstimate.isEqualToActionCurrency) { + const newInputMonetaryAmount = transaction.calculateAmountWithFeeDeducted(inputMonetaryAmount, feeEstimate); + + const trade = window.bridge.amm.getOptimalTrade(newInputMonetaryAmount, pair.output, liquidityPools); + + return setTrade(trade); + } + } + setTrade(trade); }; @@ -177,7 +203,7 @@ const SwapForm = ({ const handleSwap = async () => { const transactionData = await getTransactionArgs(trade); - if (!transactionData) return; + if (!transactionData || !transaction.fee.data || !inputBalance) return; const { accountId, deadline, minimumAmountOut, trade: tradeData } = transactionData; @@ -234,26 +260,6 @@ const SwapForm = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [pair]); - const feeToken = form.values[SWAP_FEE_TOKEN_FIELD]; - - useEffect(() => { - const estimateFee = async () => { - const transactionData = await getTransactionArgs(trade); - - if (!transactionData) return; - - const { accountId, deadline, minimumAmountOut, trade: tradeData } = transactionData; - - transaction.fee.setCurrency(feeToken).estimate(tradeData, minimumAmountOut, accountId, deadline); - }; - - if (!trade) return; - - estimateFee(); - - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [trade, feeToken]); - const handleChangeInput: ChangeEventHandler = (e) => setInputAmount(e.target.value); const handlePairChange = (pair: SwapPair) => onChangePair(pair); @@ -274,12 +280,7 @@ const SwapForm = ({ const handleClosePriceImpactModal = () => setPriceImpactModal(false); - const { inputAmountUSD, outputAmountUSD, inputMonetary, outputMonetary } = getAmountsUSD( - pair, - prices, - trade, - form.values[SWAP_INPUT_AMOUNT_FIELD] - ); + const { inputAmountUSD, outputAmountUSD } = getAmountsUSD(pair, prices, trade, form.values[SWAP_INPUT_AMOUNT_FIELD]); const selectItems = selectCurrency.items.filter((tokenData) => pooledTickers.has(tokenData.value)); @@ -301,35 +302,34 @@ const SwapForm = ({ handleTickerChange(ticker as string, SWAP_INPUT_TOKEN_FIELD), items: selectItems })} - {...mergeProps(form.getFieldProps(SWAP_INPUT_AMOUNT_FIELD, true), { onChange: handleChangeInput })} + {...mergeProps(form.getFieldProps(SWAP_INPUT_AMOUNT_FIELD, true), getTokenInputProps(inputBalance), { + onChange: handleChangeInput + })} /> handleTickerChange(ticker as string, SWAP_OUTPUT_TOKEN_FIELD), items: selectItems })} + {...getTokenInputProps(outputBalance)} /> {trade && } @@ -343,8 +343,8 @@ const SwapForm = ({ onConfirm={handleConfirmPriceImpactModal} inputValueUSD={inputAmountUSD} outputValueUSD={outputAmountUSD} - inputAmount={inputMonetary} - outputAmount={outputMonetary} + inputAmount={trade?.inputAmount} + outputAmount={trade?.outputAmount} pair={pair} priceImpact={priceImpact} /> diff --git a/src/pages/AMM/Swap/components/SwapForm/index.tsx b/src/pages/Swap/components/SwapForm/index.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapForm/index.tsx rename to src/pages/Swap/components/SwapForm/index.tsx diff --git a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx b/src/pages/Swap/components/SwapInfo/SwapInfo.style.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapInfo/SwapInfo.style.tsx rename to src/pages/Swap/components/SwapInfo/SwapInfo.style.tsx diff --git a/src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx b/src/pages/Swap/components/SwapInfo/SwapInfo.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapInfo/SwapInfo.tsx rename to src/pages/Swap/components/SwapInfo/SwapInfo.tsx diff --git a/src/pages/AMM/Swap/components/SwapInfo/index.tsx b/src/pages/Swap/components/SwapInfo/index.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapInfo/index.tsx rename to src/pages/Swap/components/SwapInfo/index.tsx diff --git a/src/pages/AMM/Swap/components/SwapLiquidity/SwapLiquidity.tsx b/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx similarity index 96% rename from src/pages/AMM/Swap/components/SwapLiquidity/SwapLiquidity.tsx rename to src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx index 65571a0230..ed88273a9a 100644 --- a/src/pages/AMM/Swap/components/SwapLiquidity/SwapLiquidity.tsx +++ b/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx @@ -2,11 +2,10 @@ import { CurrencyExt, LiquidityPool } from '@interlay/interbtc-api'; import { formatUSD } from '@/common/utils/utils'; import { Card, CardProps, CoinPair, Dd, Dl, DlGroup, Dt, Flex, H2 } from '@/component-library'; +import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { DateRangeVolume, useGetDexVolumes } from '@/utils/hooks/api/use-get-dex-volume'; import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { calculateTotalLiquidityUSD } from '../../../shared/utils'; - type Props = { input: CurrencyExt; output: CurrencyExt; diff --git a/src/pages/AMM/Swap/components/SwapLiquidity/index.tsx b/src/pages/Swap/components/SwapLiquidity/index.tsx similarity index 100% rename from src/pages/AMM/Swap/components/SwapLiquidity/index.tsx rename to src/pages/Swap/components/SwapLiquidity/index.tsx diff --git a/src/pages/AMM/Swap/components/index.tsx b/src/pages/Swap/components/index.tsx similarity index 100% rename from src/pages/AMM/Swap/components/index.tsx rename to src/pages/Swap/components/index.tsx diff --git a/src/pages/AMM/Swap/index.tsx b/src/pages/Swap/index.tsx similarity index 100% rename from src/pages/AMM/Swap/index.tsx rename to src/pages/Swap/index.tsx diff --git a/src/pages/AMM/Swap/types.ts b/src/pages/Swap/types.ts similarity index 100% rename from src/pages/AMM/Swap/types.ts rename to src/pages/Swap/types.ts diff --git a/src/pages/Transfer/Transfer.style.tsx b/src/pages/Transfer/Transfer.style.tsx deleted file mode 100644 index 4ec3066518..0000000000 --- a/src/pages/Transfer/Transfer.style.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -import { theme } from '@/component-library'; - -const StyledWrapper = styled.div` - margin-top: ${theme.spacing.spacing6}; -`; - -export { StyledWrapper }; diff --git a/src/pages/Transfer/TransferForms/TransferForms.tsx b/src/pages/Transfer/TransferForms/TransferForms.tsx deleted file mode 100644 index 92dea5234f..0000000000 --- a/src/pages/Transfer/TransferForms/TransferForms.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Flex, Tabs, TabsItem } from '@/component-library'; -import MainContainer from '@/parts/MainContainer'; -import { useTabPageLocation } from '@/utils/hooks/use-tab-page-location'; - -import { CrossChainTransferForm, TransferForm } from './components'; -import { StyledCard, StyledFormWrapper, StyledWrapper } from './TransferForms.styles'; - -const TransferForms = (): JSX.Element => { - const { tabsProps } = useTabPageLocation(); - - return ( - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TransferForms; diff --git a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx b/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx deleted file mode 100644 index 40d3630569..0000000000 --- a/src/pages/Transfer/TransferForms/components/CrossChainTransferForm/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { CrossChainTransferForm } from './CrossChainTransferForm'; diff --git a/src/pages/Transfer/TransferForms/components/index.tsx b/src/pages/Transfer/TransferForms/components/index.tsx deleted file mode 100644 index 3f964e425c..0000000000 --- a/src/pages/Transfer/TransferForms/components/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { CrossChainTransferForm } from './CrossChainTransferForm'; -import { TransferForm } from './TransferForm'; - -export { CrossChainTransferForm, TransferForm }; diff --git a/src/pages/Transfer/TransferForms/index.tsx b/src/pages/Transfer/TransferForms/index.tsx deleted file mode 100644 index a78f8eed42..0000000000 --- a/src/pages/Transfer/TransferForms/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import TransferOverview from './TransferForms'; - -export default TransferOverview; diff --git a/src/pages/Transfer/index.tsx b/src/pages/Transfer/index.tsx deleted file mode 100644 index bfd5635d2a..0000000000 --- a/src/pages/Transfer/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Transfer from './Transfer'; - -export default Transfer; diff --git a/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx b/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx index 8461d4f704..2b39453451 100644 --- a/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx +++ b/src/pages/Vaults/Vault/SubmittedIssueRequestModal/index.tsx @@ -36,7 +36,7 @@ const SubmittedIssueRequestModal = ({ { ); diff --git a/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx b/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx index 45894efb87..2ab3052dfa 100644 --- a/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx +++ b/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx @@ -58,7 +58,7 @@ const VaultIssueRequestsTable = ({ vaultAddress, collateralToken }: Props): JSX. } = useQuery, Error>( [ GRAPHQL_FETCHER, - issuesCountQuery(`vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`) // TODO: add condition for asset_eq when the page is refactored for accepting ForeignAsset currencies too (cf. e.g. issued graph in dashboard for example) + issuesCountQuery(`vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`) ], graphqlFetcher>() ); @@ -72,7 +72,7 @@ const VaultIssueRequestsTable = ({ vaultAddress, collateralToken }: Props): JSX. } = useIssueRequests( selectedPageIndex * TABLE_PAGE_LIMIT, TABLE_PAGE_LIMIT, - `vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`, // `WHERE` condition // TODO: add asset_eq, see comment above + `vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`, // `WHERE` condition ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL ); useErrorHandler(issueRequestsError); diff --git a/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx b/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx index 50800e0ea1..5eb15a2ae3 100644 --- a/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx +++ b/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx @@ -85,7 +85,7 @@ const VaultRedeemRequestsTable = ({ vaultAddress, collateralToken }: Props): JSX } = useQuery, Error>( [ GRAPHQL_FETCHER, - redeemCountQuery(`vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`) // TODO: add condition for asset_eq when the page is refactored for accepting ForeignAsset currencies too (cf. e.g. issued graph in dashboard for example) + redeemCountQuery(`vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}`) ], graphqlFetcher>() ); @@ -102,7 +102,7 @@ const VaultRedeemRequestsTable = ({ vaultAddress, collateralToken }: Props): JSX REDEEMS_FETCHER, selectedPageIndex * TABLE_PAGE_LIMIT, // offset TABLE_PAGE_LIMIT, // limit - `vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}` // `WHERE` condition // TODO: add asset_eq, see comment above + `vault: {accountId_eq: "${vaultAddress}", collateralToken: {${collateralTokenCondition}}}` // `WHERE` condition ], redeemsFetcher, { diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx index 62dfddcef8..bb7526c646 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx @@ -1,6 +1,6 @@ import { CollateralCurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { useId } from '@react-aria/utils'; +import { mergeProps, useId } from '@react-aria/utils'; import { RefObject, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -22,6 +22,7 @@ import { VaultsDepositCollateralFormData, VaultsDepositCollateralValidationParams } from '@/lib/form'; +import { getTokenInputProps } from '@/utils/helpers/input'; import { StepComponentProps, withStep } from '@/utils/hocs/step'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; @@ -64,9 +65,13 @@ const DepositCollateralStep = ({ ); const handleSubmit = (data: VaultsDepositCollateralFormData) => { - const transactionData = getTransactionArgs(data); + let { monetaryAmount } = getTransactionArgs(data); - transaction.execute(transactionData.monetaryAmount); + if (transaction.fee.isEqualFeeCurrency(monetaryAmount.currency)) { + monetaryAmount = transaction.calculateAmountWithFeeDeducted(monetaryAmount); + } + + transaction.execute(monetaryAmount); }; const validationParams: VaultsDepositCollateralValidationParams = { @@ -84,9 +89,7 @@ const DepositCollateralStep = ({ onComplete: (values) => { const transactionData = getTransactionArgs(values); - const feeTicker = values[VAULTS_DEPOSIT_COLLATERAL_FEE_TOKEN_FIELD]; - - transaction.fee.setCurrency(feeTicker).estimate(transactionData.monetaryAmount); + transaction.fee.estimate(transactionData.monetaryAmount); } }); @@ -106,9 +109,10 @@ const DepositCollateralStep = ({ placeholder='0.00' ticker={collateral.currency.ticker} valueUSD={convertMonetaryAmountToValueInUSD(monetaryAmount, collateral.price.usd) ?? 0} - balance={collateral.balance.raw.toString()} - humanBalance={collateral.balance.raw.toHuman()} - {...form.getFieldProps(VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD, false, true)} + {...mergeProps( + form.getFieldProps(VAULTS_DEPOSIT_COLLATERAL_AMOUNT_FIELD, false, true), + getTokenInputProps(collateral.balance.raw) + )} /> @@ -121,9 +125,9 @@ const DepositCollateralStep = ({ diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index 309604552e..75abbb43d2 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -1,4 +1,5 @@ import { CurrencyExt } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; @@ -6,10 +7,9 @@ import { showBuyModal } from '@/common/actions/general.actions'; import { CTA, CTALink, CTAProps, Divider, Flex, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; +import { PAGES, QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; import { Transaction, useTransaction } from '@/utils/hooks/transaction'; - -const queryString = require('query-string'); +import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; type ActionsCellProps = { currency: CurrencyExt; @@ -31,6 +31,8 @@ const ActionsCell = ({ const { t } = useTranslation(); const dispatch = useDispatch(); + const { getLinkProps } = usePageQueryParams(); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); const isSmallMobile = useMediaQuery(theme.breakpoints.down('sm')); @@ -52,40 +54,37 @@ const ActionsCell = ({ {isWrappedToken && ( {t('issue')} )} {isRedeemable && ( {t('redeem')} )} {isPooledAsset && ( {t('amm.swap')} @@ -104,13 +103,12 @@ const ActionsCell = ({ )} {!isWrappedToken && ( Bridge diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx index 5c7469e636..659ae498c4 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx @@ -7,6 +7,7 @@ import { P, Switch, TextLink, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { Cell } from '@/components'; import { AssetCell, DataGrid } from '@/components/DataGrid'; +import { INTERLAY_GET_ASSETS_LINK } from '@/config/links'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; import { FEE_TICKERS } from '@/utils/constants/currency'; import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; @@ -66,7 +67,7 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP external icon to={{ - pathname: 'https://docs.interlay.io/#/guides/assets', + pathname: INTERLAY_GET_ASSETS_LINK, search: queryString.stringify({ [EXTERNAL_QUERY_PARAMETERS.DOCS.ASSET.ID]: currency.ticker.toLowerCase() }) diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts b/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts index f5d171d2a3..cd523dd59d 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts @@ -1,7 +1,7 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; +import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { Prices } from '@/utils/hooks/api/use-get-prices'; const calculateClaimableFarmingRewardUSD = ( diff --git a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx index 3c1959202a..95293cd174 100644 --- a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx +++ b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx @@ -1,9 +1,10 @@ import { useTranslation } from 'react-i18next'; import { Flex } from '@/component-library'; -import { INTERLAY_WHITEPAPPER } from '@/config/links'; +import { INTERLAY_GET_ASSETS_LINK, INTERLAY_WHITEPAPPER } from '@/config/links'; import { APP_NAME, WRAPPED_TOKEN } from '@/config/relay-chains'; import { PAGES } from '@/utils/constants/links'; +import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import { StyledCard, @@ -24,6 +25,7 @@ type WelcomeBannerProps = { const WelcomeBanner = ({ onClose }: WelcomeBannerProps): JSX.Element => { const { t } = useTranslation(); + const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); return ( @@ -43,13 +45,14 @@ const WelcomeBanner = ({ onClose }: WelcomeBannerProps): JSX.Element => { Whitepaper - {/* TODO: to be added */} - + Fund Wallet Guide - - Tutorial - + {isOnboardingEnabled && ( + + Tutorial + + )} diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx index 4898916cdf..ebfdc411e2 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/parts/Sidebar/SidebarContent/Navigation/index.tsx @@ -63,9 +63,6 @@ const Navigation = ({ const { t } = useTranslation(); const { selectedAccount } = useSubstrateSecureState(); const { vaultClientLoaded } = useSelector((state: StoreType) => state.general); - const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); - const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); - const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); @@ -74,8 +71,7 @@ const Navigation = ({ { name: 'nav_wallet', link: PAGES.WALLET, - icon: UserIcon, - disabled: !isWalletEnabled + icon: UserIcon }, { name: 'nav_strategies', @@ -84,33 +80,30 @@ const Navigation = ({ disabled: !isStrategiesEnabled }, { - name: `${WRAPPED_TOKEN_SYMBOL}`, - link: PAGES.BRIDGE, + name: `nav_btc`, + link: PAGES.BTC, icon: ArrowPathIcon, hidden: false }, { - name: 'nav_transfer', - link: PAGES.TRANSFER, + name: 'nav_send_and_receive', + link: PAGES.SEND_AND_RECEIVE, icon: ArrowsRightLeftIcon }, { name: 'nav_lending', link: PAGES.LOANS, - icon: PresentationChartBarIcon, - disabled: !isLendingEnabled + icon: PresentationChartBarIcon }, { name: 'nav_swap', link: PAGES.SWAP, - icon: ArrowPathRoundedSquareIcon, - disabled: !isAMMEnabled + icon: ArrowPathRoundedSquareIcon }, { name: 'nav_pools', link: PAGES.POOLS, - icon: Square3Stack3DIcon, - disabled: !isAMMEnabled + icon: Square3Stack3DIcon }, { name: 'nav_staking', @@ -136,7 +129,7 @@ const Navigation = ({ separator: true } ], - [isWalletEnabled, isStrategiesEnabled, isLendingEnabled, isAMMEnabled, selectedAccount?.address, vaultClientLoaded] + [isStrategiesEnabled, selectedAccount?.address, vaultClientLoaded] ); const SECONDARY_NAVIGATION_ITEMS = React.useMemo( diff --git a/src/parts/Topbar/index.tsx b/src/parts/Topbar/index.tsx index 0326055ca6..d4c4309f37 100644 --- a/src/parts/Topbar/index.tsx +++ b/src/parts/Topbar/index.tsx @@ -23,10 +23,8 @@ import { BitcoinNetwork } from '@/types/bitcoin'; import { POLKADOT } from '@/utils/constants/relay-chain-names'; import { NotificationToastType, useNotifications } from '@/utils/context/Notifications'; import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import { useSignMessage } from '@/utils/hooks/use-sign-message'; -import GetGovernanceTokenUI from './GetGovernanceTokenUI'; import ManualIssueExecutionActionsBadge from './ManualIssueExecutionActionsBadge'; const SMALL_SIZE_BUTTON_CLASSES = clsx('leading-7', '!px-3'); @@ -36,7 +34,6 @@ const Topbar = (): JSX.Element => { const dispatch = useDispatch(); const { t } = useTranslation(); const { getAvailableBalance } = useGetBalances(); - const isBanxaEnabled = useFeatureFlag(FeatureFlags.BANXA); const { setSelectedAccount, removeSelectedAccount } = useSubstrate(); const { selectProps } = useSignMessage(); const notifications = useNotifications(); @@ -109,7 +106,7 @@ const Topbar = (): JSX.Element => { <>
- {isBanxaEnabled ? : } + {selectedAccount !== undefined && ( <> {process.env.REACT_APP_FAUCET_URL && governanceTokenBalanceIsZero && ( diff --git a/src/test/mocks/@interlay/interbtc-api/index.ts b/src/test/mocks/@interlay/interbtc-api/index.ts index d454deca31..9560c2bccc 100644 --- a/src/test/mocks/@interlay/interbtc-api/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/index.ts @@ -5,17 +5,16 @@ import { Interlay, Polkadot } from '@interlay/monetary-js'; import { AddressOrPair } from '@polkadot/api/types'; import { Signer } from '@polkadot/types/types'; -import { mockFaucet } from './faucet'; import { + MOCK_AMM, + MOCK_SYSTEM, + MOCK_TRANSACTION, mockApiCreateType, mockBtcRelayGetLatestBlockHeight, mockChainType, mockElectrsAPIGetLatestBlockHeight, mockFeeGetIssueFee, mockFeeGetIssueGriefingCollateralRate, - mockGetCurrentActiveBlockNumber, - mockGetCurrentBlockNumber, - mockGetFutureBlockNumber, mockGetStableBitcoinConfirmations, mockGetStableParachainConfirmations, mockIssueGetDustValue, @@ -31,7 +30,6 @@ import { mockRedeemGetPremiumRedeemFeeRate, mockRedeemRequest, mockSystemChain, - mockSystemGetStatusCode, mockTokensBalance, mockTokensSubscribeToBalance, mockTokensTotal, @@ -40,17 +38,6 @@ import { mockVaultsGetVaultsWithIssuableTokens, mockVaultsGetVaultsWithRedeemableTokens } from './parachain'; -import { - mockAddLiquidity, - mockClaimFarmingRewards, - mockGetClaimableFarmingRewards, - mockGetLiquidityPools, - mockGetLiquidityProvidedByAccount, - mockGetLpTokens, - mockGetOptimalTrade, - mockRemoveLiquidity, - mockSwap -} from './parachain/amm'; import { mockGetForeignAssets } from './parachain/assetRegistry'; import { mockGetStakedBalance, mockVotingBalance } from './parachain/escrow'; import { @@ -73,16 +60,12 @@ import { } from './parachain/loans'; import { mockClaimVesting, mockVestingSchedules } from './parachain/vesting'; -type RecursivePartial = { - [P in keyof T]?: RecursivePartial; -}; - const mockSetAccount = jest.fn((_account: AddressOrPair, _signer?: Signer) => undefined); const mockCollateralCurrencies = [Polkadot, Interlay]; // To mock new lib methods extend this object. -const mockInterBtcApi: RecursivePartial = { +const mockInterBtcApi: Partial> = { removeAccount: jest.fn(), setAccount: mockSetAccount, api: { @@ -97,6 +80,11 @@ const mockInterBtcApi: RecursivePartial = { query: { vesting: { vestingSchedules: mockVestingSchedules as any + }, + oracle: { + aggregate: { + keys: jest.fn().mockReturnValue([]) + } } }, tx: { @@ -154,12 +142,7 @@ const mockInterBtcApi: RecursivePartial = { getCurrentInclusionFee: mockRedeemGetCurrentInclusionFee, request: mockRedeemRequest }, - system: { - getStatusCode: mockSystemGetStatusCode, - getFutureBlockNumber: mockGetFutureBlockNumber, - getCurrentActiveBlockNumber: mockGetCurrentActiveBlockNumber, - getCurrentBlockNumber: mockGetCurrentBlockNumber - }, + system: MOCK_SYSTEM.MODULE, tokens: { balance: mockTokensBalance, total: mockTokensTotal, @@ -171,21 +154,12 @@ const mockInterBtcApi: RecursivePartial = { getPremiumRedeemVaults: mockVaultsGetPremiumRedeemVaults, getVaultsWithRedeemableTokens: mockVaultsGetVaultsWithRedeemableTokens }, - amm: { - getLiquidityPools: mockGetLiquidityPools, - getLiquidityProvidedByAccount: mockGetLiquidityProvidedByAccount, - getClaimableFarmingRewards: mockGetClaimableFarmingRewards, - addLiquidity: mockAddLiquidity, - removeLiquidity: mockRemoveLiquidity, - getLpTokens: mockGetLpTokens, - getOptimalTrade: mockGetOptimalTrade, - swap: mockSwap, - claimFarmingRewards: mockClaimFarmingRewards - }, + amm: MOCK_AMM.MODULE, escrow: { getStakedBalance: mockGetStakedBalance, votingBalance: mockVotingBalance - } + }, + transaction: MOCK_TRANSACTION.MODULE }; jest.mock('@interlay/interbtc-api', () => { @@ -196,12 +170,11 @@ jest.mock('@interlay/interbtc-api', () => { currencyIdToMonetaryCurrency: jest.fn(), newAccountId: jest.fn().mockReturnValue('a3aTRC4zs1djutYS9QuZSB3XmfRgNzFfyRtbZKaoQyv67Yzcc'), getCollateralCurrencies: jest.fn(() => mockCollateralCurrencies), - createInterBtcApi: jest.fn((..._argv) => mockInterBtcApi as InterBtcApi), - FaucetClient: mockFaucet, + createInterBtcApi: jest.fn((..._argv) => mockInterBtcApi), + FaucetClient: jest.fn().mockImplementation(() => ({ fundAccount: jest.fn() })), newExtrinsicStatus: jest.fn() }; }); -export * from './parachain'; export * from './parachain'; export { mockInterBtcApi, mockSetAccount }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts b/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts index 924df3e1fc..68d70904c6 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts @@ -1,4 +1,5 @@ import { + AMMAPI, MultiPathElementStandard, MultiPathElementType, newMonetaryAmount, @@ -10,11 +11,13 @@ import Big from 'big.js'; import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; -const DEFAULT_LP_TOKEN_1_NAME = `LP ${GOVERNANCE_TOKEN.ticker}-${RELAY_CHAIN_NATIVE_TOKEN.ticker}`; +import { DEFAULT_EXTRINSIC } from './extrinsic'; -const DEFAULT_LP_TOKEN_1: StandardLpToken = { - name: DEFAULT_LP_TOKEN_1_NAME, - ticker: DEFAULT_LP_TOKEN_1_NAME, +const LP_TOKEN_A_NAME = `LP ${GOVERNANCE_TOKEN.ticker}-${RELAY_CHAIN_NATIVE_TOKEN.ticker}`; + +const LP_TOKEN_A: StandardLpToken = { + name: LP_TOKEN_A_NAME, + ticker: LP_TOKEN_A_NAME, decimals: 12, lpToken: { token0: GOVERNANCE_TOKEN, @@ -22,11 +25,11 @@ const DEFAULT_LP_TOKEN_1: StandardLpToken = { } }; -const DEFAULT_LP_TOKEN_2_NAME = `LP ${WRAPPED_TOKEN.ticker}-${RELAY_CHAIN_NATIVE_TOKEN.ticker}`; +const LP_TOKEN_B_NAME = `LP ${WRAPPED_TOKEN.ticker}-${RELAY_CHAIN_NATIVE_TOKEN.ticker}`; -const DEFAULT_LP_TOKEN_2: StandardLpToken = { - name: DEFAULT_LP_TOKEN_2_NAME, - ticker: DEFAULT_LP_TOKEN_2_NAME, +const LP_TOKEN_B: StandardLpToken = { + name: LP_TOKEN_B_NAME, + ticker: LP_TOKEN_B_NAME, decimals: 12, lpToken: { token0: WRAPPED_TOKEN, @@ -34,104 +37,82 @@ const DEFAULT_LP_TOKEN_2: StandardLpToken = { } }; -const LP_TOKEN_3_NAME = `LP ${WRAPPED_TOKEN.ticker}-${GOVERNANCE_TOKEN.ticker}`; +const LP_TOKEN_EMPTY_NAME = `LP ${WRAPPED_TOKEN.ticker}-${GOVERNANCE_TOKEN.ticker}`; -const LP_TOKEN_3: StandardLpToken = { - name: LP_TOKEN_3_NAME, - ticker: LP_TOKEN_3_NAME, - decimals: 18, +const LP_TOKEN_EMPTY: StandardLpToken = { + name: LP_TOKEN_EMPTY_NAME, + ticker: LP_TOKEN_EMPTY_NAME, + decimals: 12, lpToken: { token0: WRAPPED_TOKEN, token1: GOVERNANCE_TOKEN } }; -const DEFAULT_POOLED_CURRENCIES_1 = [ - newMonetaryAmount(1, GOVERNANCE_TOKEN, true), - newMonetaryAmount(5, RELAY_CHAIN_NATIVE_TOKEN, true) -]; +const LP_TOKENS = [LP_TOKEN_A, LP_TOKEN_B, LP_TOKEN_EMPTY]; -const DEFAULT_POOLED_CURRENCIES_2 = [ - newMonetaryAmount(1, WRAPPED_TOKEN, true), - newMonetaryAmount(5, RELAY_CHAIN_NATIVE_TOKEN, true) -]; - -const EMPTY_POOL_POOLED_CURRENCIES = [newMonetaryAmount(0, WRAPPED_TOKEN), newMonetaryAmount(0, GOVERNANCE_TOKEN)]; - -const DEFAULT_LIQUIDITY_POOL_1 = new StandardLiquidityPool( - DEFAULT_LP_TOKEN_1, - DEFAULT_POOLED_CURRENCIES_1, +const LIQUIDITY_POOL_A = new StandardLiquidityPool( + LP_TOKEN_A, + [newMonetaryAmount(1, GOVERNANCE_TOKEN, true), newMonetaryAmount(5, RELAY_CHAIN_NATIVE_TOKEN, true)], [newMonetaryAmount(5, GOVERNANCE_TOKEN, true)], new Big('0.003'), true, - newMonetaryAmount(1, DEFAULT_LP_TOKEN_1, true), + newMonetaryAmount(1, LP_TOKEN_A, true), false ); -const DEFAULT_LIQUIDITY_POOL_2 = new StandardLiquidityPool( - DEFAULT_LP_TOKEN_2, - DEFAULT_POOLED_CURRENCIES_2, +const LIQUIDITY_POOL_B = new StandardLiquidityPool( + LP_TOKEN_B, + [newMonetaryAmount(1, WRAPPED_TOKEN, true), newMonetaryAmount(5, RELAY_CHAIN_NATIVE_TOKEN, true)], [newMonetaryAmount(5, GOVERNANCE_TOKEN, true)], new Big('0.003'), true, - newMonetaryAmount(1, DEFAULT_LP_TOKEN_2, true), + newMonetaryAmount(1, LP_TOKEN_B, true), false ); const EMPTY_LIQUIDITY_POOL = new StandardLiquidityPool( - LP_TOKEN_3, - EMPTY_POOL_POOLED_CURRENCIES, + LP_TOKEN_EMPTY, + [newMonetaryAmount(0, WRAPPED_TOKEN), newMonetaryAmount(0, GOVERNANCE_TOKEN)], [newMonetaryAmount(5, GOVERNANCE_TOKEN, true)], Big(0), true, - newMonetaryAmount(0, LP_TOKEN_3), + newMonetaryAmount(0, LP_TOKEN_EMPTY), true ); -const DEFAULT_LIQUIDITY_POOLS = [DEFAULT_LIQUIDITY_POOL_1, DEFAULT_LIQUIDITY_POOL_2]; - -const DEFAULT_ACCOUNT_LIQUIDITY = [newMonetaryAmount(0, DEFAULT_LP_TOKEN_1), newMonetaryAmount(0, DEFAULT_LP_TOKEN_2)]; +const LIQUIDITY_POOLS = [LIQUIDITY_POOL_A, LIQUIDITY_POOL_B, EMPTY_LIQUIDITY_POOL]; -const ACCOUNT_WITH_SOME_LIQUIDITY = [ - newMonetaryAmount(0, DEFAULT_LP_TOKEN_1), - newMonetaryAmount(1, DEFAULT_LP_TOKEN_2) +const ACCOUNT_EMPTY_LIQUIDITY = [ + newMonetaryAmount(0, LP_TOKEN_A), + newMonetaryAmount(0, LP_TOKEN_B), + newMonetaryAmount(0, LP_TOKEN_EMPTY) ]; -const ACCOUNT_WITH_FULL_LIQUIDITY = [ - newMonetaryAmount(2, DEFAULT_LP_TOKEN_1), - newMonetaryAmount(1, DEFAULT_LP_TOKEN_2) +const ACCOUNT_AVERAGE_LIQUIDITY = [ + newMonetaryAmount(0, LP_TOKEN_A), + newMonetaryAmount(1, LP_TOKEN_B), + newMonetaryAmount(0, LP_TOKEN_EMPTY) ]; -const mockGetLiquidityPools = jest.fn().mockResolvedValue(DEFAULT_LIQUIDITY_POOLS); - -const mockGetLiquidityProvidedByAccount = jest.fn().mockResolvedValue(DEFAULT_ACCOUNT_LIQUIDITY); - -const DEFAULT_CLAIMABLE_REWARDS = new Map(); - -DEFAULT_CLAIMABLE_REWARDS.set(DEFAULT_LP_TOKEN_1, [newMonetaryAmount(1, WRAPPED_TOKEN, true)]); - -const mockGetClaimableFarmingRewards = jest.fn().mockResolvedValue(DEFAULT_CLAIMABLE_REWARDS); - -const mockClaimFarmingRewards = jest.fn(); - -const mockAddLiquidity = jest.fn(); - -const mockRemoveLiquidity = jest.fn(); +const ACCOUNT_FULL_LIQUIDITY = [ + newMonetaryAmount(2, LP_TOKEN_A), + newMonetaryAmount(1, LP_TOKEN_B), + newMonetaryAmount(1, LP_TOKEN_EMPTY) +]; -const DEFAULT_LP_TOKENS = [DEFAULT_LP_TOKEN_1, DEFAULT_LP_TOKEN_2]; +const CLAIMABLE_REWARDS = new Map(); -const mockGetLpTokens = jest.fn().mockResolvedValue(DEFAULT_LP_TOKENS); +CLAIMABLE_REWARDS.set(LP_TOKEN_A, [newMonetaryAmount(1, WRAPPED_TOKEN, true)]); -const DEFAULT_TRADE_AMOUNT = { +const TRADE_AMOUNT = { INPUT: newMonetaryAmount(1, RELAY_CHAIN_NATIVE_TOKEN, true), OUTPUT: newMonetaryAmount(0.1, WRAPPED_TOKEN, true) }; -const mockGetOutputAmount = jest.fn().mockReturnValue(DEFAULT_TRADE_AMOUNT.OUTPUT); - -const DEFAULT_MULTI_PATH_ELEMENT: MultiPathElementStandard = { +const MULTI_PATH_ELEMENT: MultiPathElementStandard = { pair: { - getOutputAmount: mockGetOutputAmount, + getOutputAmount: jest.fn().mockReturnValue(TRADE_AMOUNT.OUTPUT), pathOf: jest.fn(), token0: RELAY_CHAIN_NATIVE_TOKEN, token1: WRAPPED_TOKEN, @@ -141,41 +122,47 @@ const DEFAULT_MULTI_PATH_ELEMENT: MultiPathElementStandard = { input: RELAY_CHAIN_NATIVE_TOKEN, output: WRAPPED_TOKEN, type: MultiPathElementType.STANDARD, - pool: DEFAULT_LIQUIDITY_POOL_2 + pool: LIQUIDITY_POOL_B +}; + +const TRADE = new Trade([MULTI_PATH_ELEMENT], TRADE_AMOUNT.INPUT, TRADE_AMOUNT.OUTPUT); + +jest.spyOn(TRADE, 'getMinimumOutputAmount').mockReturnValue(TRADE_AMOUNT.OUTPUT); + +const DATA = { + LP_TOKEN_A, + LP_TOKEN_B, + LP_TOKEN_EMPTY, + LIQUIDITY_POOLS: { + ONE: LIQUIDITY_POOL_A, + TWO: LIQUIDITY_POOL_B, + EMPTY: EMPTY_LIQUIDITY_POOL + }, + ACCOUNT_LIQUIDITY: { + EMPTY: ACCOUNT_EMPTY_LIQUIDITY, + AVERAGE: ACCOUNT_AVERAGE_LIQUIDITY, + FULL: ACCOUNT_FULL_LIQUIDITY + }, + CLAIMABLE_REWARDS, + TRADE }; -const DEFAULT_TRADE = new Trade([DEFAULT_MULTI_PATH_ELEMENT], DEFAULT_TRADE_AMOUNT.INPUT, DEFAULT_TRADE_AMOUNT.OUTPUT); -jest.spyOn(DEFAULT_TRADE, 'getMinimumOutputAmount').mockReturnValue(DEFAULT_TRADE_AMOUNT.OUTPUT); - -const mockGetOptimalTrade = jest.fn().mockReturnValue(DEFAULT_TRADE); - -const mockSwap = jest.fn(); - -export { - ACCOUNT_WITH_FULL_LIQUIDITY, - ACCOUNT_WITH_SOME_LIQUIDITY, - DEFAULT_ACCOUNT_LIQUIDITY, - DEFAULT_CLAIMABLE_REWARDS, - DEFAULT_LIQUIDITY_POOL_1, - DEFAULT_LIQUIDITY_POOL_2, - DEFAULT_LIQUIDITY_POOLS, - DEFAULT_LP_TOKEN_1, - DEFAULT_LP_TOKEN_2, - DEFAULT_LP_TOKENS, - DEFAULT_MULTI_PATH_ELEMENT, - DEFAULT_POOLED_CURRENCIES_1, - DEFAULT_POOLED_CURRENCIES_2, - DEFAULT_TRADE, - DEFAULT_TRADE_AMOUNT, - EMPTY_LIQUIDITY_POOL, - LP_TOKEN_3, - mockAddLiquidity, - mockClaimFarmingRewards, - mockGetClaimableFarmingRewards, - mockGetLiquidityPools, - mockGetLiquidityProvidedByAccount, - mockGetLpTokens, - mockGetOptimalTrade, - mockRemoveLiquidity, - mockSwap +const MODULE: Record> = { + getLiquidityPools: jest.fn().mockResolvedValue(LIQUIDITY_POOLS), + getLiquidityProvidedByAccount: jest.fn().mockResolvedValue(ACCOUNT_EMPTY_LIQUIDITY), + getClaimableFarmingRewards: jest.fn().mockResolvedValue(CLAIMABLE_REWARDS), + getLpTokens: jest.fn().mockResolvedValue(LP_TOKENS), + getOptimalTrade: jest.fn().mockReturnValue(TRADE), + // MUTATIONS + addLiquidity: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), + removeLiquidity: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), + claimFarmingRewards: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), + swap: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC) }; + +const MOCK_AMM = { + DATA, + MODULE +}; + +export { MOCK_AMM }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts b/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts new file mode 100644 index 0000000000..158d18c6c5 --- /dev/null +++ b/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts @@ -0,0 +1,17 @@ +import { ExtrinsicData } from '@interlay/interbtc-api'; + +const DEFAULT_EXTRINSIC: ExtrinsicData = { + extrinsic: ({ + signAndSend: jest.fn().mockImplementation(async (_a, _b, cb) => { + return new Promise((resolve) => { + resolve(jest.fn()); + + setTimeout(() => { + cb({ status: { isReady: true, isInBlock: true, isFinalized: true, type: 'Finalized' } }); + }, 1); + }); + }) + } as unknown) as ExtrinsicData['extrinsic'] +}; + +export { DEFAULT_EXTRINSIC }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts index 30ecf81dfb..e34900a823 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts @@ -1,3 +1,4 @@ +export * from './amm'; export * from './api'; export * from './btcRelay'; export * from './electrsAPI'; @@ -7,4 +8,5 @@ export * from './oracle'; export * from './redeem'; export * from './system'; export * from './tokens'; +export * from './transaction'; export * from './vaults'; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts b/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts index 4e2651d8b9..92b5968d2d 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts @@ -57,13 +57,15 @@ const DEFAULT_POSITIONS = { currency: WRAPPED_TOKEN, amount: DEFAULT_IBTC.MONETARY.MEDIUM, isCollateral: true, - earnedInterest: DEFAULT_IBTC.MONETARY.VERY_SMALL + earnedInterest: DEFAULT_IBTC.MONETARY.VERY_SMALL, + vaultCollateralAmount: DEFAULT_IBTC.MONETARY.EMPTY } as CollateralPosition, INTR: { currency: GOVERNANCE_TOKEN, amount: DEFAULT_INTR.MONETARY.MEDIUM, isCollateral: true, - earnedInterest: DEFAULT_INTR.MONETARY.SMALL + earnedInterest: DEFAULT_INTR.MONETARY.SMALL, + vaultCollateralAmount: DEFAULT_INTR.MONETARY.EMPTY } as CollateralPosition }, BORROW: { diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/system.ts b/src/test/mocks/@interlay/interbtc-api/parachain/system.ts index 5c1622cbcb..457501ec8f 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/system.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/system.ts @@ -1,26 +1,37 @@ -// Change to isError or isShutdown in order to simulate parachain being down. -const SYSTEM_STATUS_RUNNING = { isRunning: true }; - -const mockSystemGetStatusCode = jest.fn(() => SYSTEM_STATUS_RUNNING); +import { SystemAPI } from '@interlay/interbtc-api'; -const DEFAULT_DEADLINE_BLOCK_NUMBER = 0; +// Change to isError or isShutdown in order to simulate parachain being down. +const STATUS_CODE = { isRunning: true }; -const mockGetFutureBlockNumber = jest.fn().mockResolvedValue(DEFAULT_DEADLINE_BLOCK_NUMBER); +const FUTURE_BLOCK_NUMBER = 0; -const DEFAULT_CURRENT_ACTIVE_BLOCK_NUMBER = 1; +const CURRENT_ACTIVE_BLOCK_NUMBER = 1; -const mockGetCurrentActiveBlockNumber = jest.fn().mockResolvedValue(DEFAULT_CURRENT_ACTIVE_BLOCK_NUMBER); +const CURRENT_BLOCK_NUMBER = 0; -const DEFAULT_CURRENT_BLOCK_NUMBER = 0; +const DATA = { + STATUS_CODE, + BLOCK_NUMBER: { + CURRENT: CURRENT_BLOCK_NUMBER, + CURRENT_ACTIVE: CURRENT_ACTIVE_BLOCK_NUMBER, + FUTURE: FUTURE_BLOCK_NUMBER + } +}; -const mockGetCurrentBlockNumber = jest.fn().mockReturnValue(DEFAULT_CURRENT_BLOCK_NUMBER); +const MODULE: Record> = { + getCurrentActiveBlockNumber: jest.fn().mockResolvedValue(CURRENT_ACTIVE_BLOCK_NUMBER), + getCurrentBlockNumber: jest.fn().mockResolvedValue(CURRENT_BLOCK_NUMBER), + getFutureBlockNumber: jest.fn().mockResolvedValue(FUTURE_BLOCK_NUMBER), + getStatusCode: jest.fn().mockResolvedValue(STATUS_CODE), + getBlockHash: jest.fn(), + setCode: jest.fn(), + subscribeToCurrentBlockHeads: jest.fn(), + subscribeToFinalizedBlockHeads: jest.fn() +}; -export { - DEFAULT_CURRENT_ACTIVE_BLOCK_NUMBER, - DEFAULT_CURRENT_BLOCK_NUMBER, - DEFAULT_DEADLINE_BLOCK_NUMBER, - mockGetCurrentActiveBlockNumber, - mockGetCurrentBlockNumber, - mockGetFutureBlockNumber, - mockSystemGetStatusCode +const MOCK_SYSTEM = { + DATA, + MODULE }; + +export { MOCK_SYSTEM }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/transaction.ts b/src/test/mocks/@interlay/interbtc-api/parachain/transaction.ts new file mode 100644 index 0000000000..b46b426b69 --- /dev/null +++ b/src/test/mocks/@interlay/interbtc-api/parachain/transaction.ts @@ -0,0 +1,20 @@ +import { newMonetaryAmount, TransactionAPI } from '@interlay/interbtc-api'; + +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; + +const MODULE: Record> = { + getFeeEstimate: jest.fn().mockResolvedValue(newMonetaryAmount(0, GOVERNANCE_TOKEN)), + setAccount: jest.fn(), + sendLogged: jest.fn(), + removeAccount: jest.fn(), + getAccount: jest.fn(), + dryRun: jest.fn(), + buildBatchExtrinsic: jest.fn(), + api: {} as any +}; + +const MOCK_TRANSACTION = { + MODULE +}; + +export { MOCK_TRANSACTION }; diff --git a/src/test/mocks/hooks/index.ts b/src/test/mocks/hooks/index.ts new file mode 100644 index 0000000000..0fc4362450 --- /dev/null +++ b/src/test/mocks/hooks/index.ts @@ -0,0 +1,26 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; + +import { WRAPPED_TOKEN } from '@/config/relay-chains'; + +const mockGetDexVolumeByTicker = jest.fn().mockReturnValue({ amount: newMonetaryAmount(0, WRAPPED_TOKEN), usd: 0 }); + +const mockgetDexTotalVolumeUSD = jest.fn().mockReturnValue(0); + +jest.mock('@/utils/hooks/api/use-get-dex-volume', () => ({ + ...jest.requireActual('@/utils/hooks/api/use-get-dex-volume'), + useGetDexVolumes: jest.fn().mockReturnValue({ + data: {}, + getDexVolumeByTicker: mockGetDexVolumeByTicker, + getDexTotalVolumeUSD: mockgetDexTotalVolumeUSD + }) +})); + +jest.mock('@/utils/hooks/api/use-get-pools-trading-apr', () => ({ + ...jest.requireActual('@/utils/hooks/api/use-get-pools-trading-apr'), + useGetPoolsTradingApr: jest.fn().mockReturnValue({ + isLoading: false, + getTradingAprOfPool: jest.fn().mockReturnValue(2) + }) +})); + +export { mockgetDexTotalVolumeUSD, mockGetDexVolumeByTicker }; diff --git a/src/test/mocks/setup.tsx b/src/test/mocks/setup.tsx index 6834a22662..23f6259059 100644 --- a/src/test/mocks/setup.tsx +++ b/src/test/mocks/setup.tsx @@ -2,10 +2,10 @@ import './@interlay/interbtc-api'; import './@polkadot/api'; import './@polkadot/extension-dapp'; import './@polkadot/ui-keyring'; -import './intersectionObserver'; import './fetch'; +import './hooks'; +import './intersectionObserver'; import './substrate'; -import './utils'; import { createInterBtcApi } from '@interlay/interbtc-api'; import { FocusScope } from '@react-aria/focus'; @@ -16,6 +16,11 @@ afterAll(() => { if (global.gc) global.gc(); }); +// Removing transaction modal from showing on every single test +jest.mock('@/utils/hooks/transaction/hooks/use-transaction-notifications', () => ({ + useTransactionNotifications: () => ({ onReject: jest.fn(), mutationProps: {} }) +})); + // MEMO: mocking @react/aria overlay component because // of a error around `createTreeWalker` const mockOverlay: React.FC = ({ children, isOpen }: any) => diff --git a/src/test/mocks/utils/helpers/extrinsic.ts b/src/test/mocks/utils/helpers/extrinsic.ts deleted file mode 100644 index b35cc28b7a..0000000000 --- a/src/test/mocks/utils/helpers/extrinsic.ts +++ /dev/null @@ -1,12 +0,0 @@ -import '@testing-library/jest-dom'; - -jest.mock('../../../../utils/helpers/extrinsic', () => { - const actualModule = jest.requireActual('../../../../utils/helpers/extrinsic'); - - return { - ...actualModule, - submitExtrinsic: jest.fn(), - submitExtrinsicPromise: jest.fn(), - getExtrinsicStatus: jest.fn() - }; -}); diff --git a/src/test/mocks/utils/helpers/index.ts b/src/test/mocks/utils/helpers/index.ts deleted file mode 100644 index 93cce5a30e..0000000000 --- a/src/test/mocks/utils/helpers/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './extrinsic'; diff --git a/src/test/mocks/utils/index.ts b/src/test/mocks/utils/index.ts deleted file mode 100644 index 705f98aa92..0000000000 --- a/src/test/mocks/utils/index.ts +++ /dev/null @@ -1 +0,0 @@ -import './helpers'; diff --git a/src/test/pages/Burn.test.tsx b/src/test/pages/Burn.test.tsx index 64cacffe5e..e4c0068365 100644 --- a/src/test/pages/Burn.test.tsx +++ b/src/test/pages/Burn.test.tsx @@ -8,7 +8,7 @@ import { WRAPPED_TOKEN } from '@/config/relay-chains'; import { mockRedeemBurn, mockRedeemGetMaxBurnableTokens } from '../mocks/@interlay/interbtc-api'; import { act, render, screen, userEvent, waitFor } from '../test-utils'; -describe('Burn page', () => { +describe.skip('Burn page', () => { it('the burn tab is displayed when there is a liquidated vault', async () => { await render(, { path: '/bridge?tab=burn' }); diff --git a/src/test/pages/Issue.test.tsx b/src/test/pages/Issue.test.tsx index 3d4b3ba59d..4df7532d20 100644 --- a/src/test/pages/Issue.test.tsx +++ b/src/test/pages/Issue.test.tsx @@ -62,7 +62,7 @@ const renderIssueForm = async (props?: any) => { }; }; -describe('issue form', () => { +describe.skip('issue form', () => { it('if the issue method is called', async () => { const { changeAmountToIssue, submitForm } = await renderIssueForm(); diff --git a/src/test/pages/Loans/borrow.test.tsx b/src/test/pages/Loans/borrow.test.tsx index d8b2d22ab3..e21455c427 100644 --- a/src/test/pages/Loans/borrow.test.tsx +++ b/src/test/pages/Loans/borrow.test.tsx @@ -33,7 +33,7 @@ jest.mock('../../../parts/Layout', () => { return MockedLayout; }); -describe('Borrow Flow', () => { +describe.skip('Borrow Flow', () => { beforeEach(() => { mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); @@ -43,7 +43,7 @@ describe('Borrow Flow', () => { it('should be able to borrow', async () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab); userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.SMALL); @@ -58,7 +58,7 @@ describe('Borrow Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); // If there is collateral, modal LTV meter should be rendered expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); @@ -84,7 +84,7 @@ describe('Borrow Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); @@ -111,7 +111,7 @@ describe('Borrow Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); @@ -135,7 +135,7 @@ describe('Borrow Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); diff --git a/src/test/pages/Loans/collateral.test.tsx b/src/test/pages/Loans/collateral.test.tsx index 40534ca358..1ef83a519e 100644 --- a/src/test/pages/Loans/collateral.test.tsx +++ b/src/test/pages/Loans/collateral.test.tsx @@ -29,7 +29,7 @@ const withinCollateralModal = (asset = 'IBTC') => { return within(screen.getByRole('dialog')); }; -describe('Collateral Flow', () => { +describe.skip('Collateral Flow', () => { beforeEach(() => { mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); diff --git a/src/test/pages/Loans/index.test.tsx b/src/test/pages/Loans/index.test.tsx index 5d71f63017..78e896e181 100644 --- a/src/test/pages/Loans/index.test.tsx +++ b/src/test/pages/Loans/index.test.tsx @@ -25,7 +25,7 @@ import { TABLES } from './constants'; const path = '/lending'; -describe('Loans page', () => { +describe.skip('Loans page', () => { beforeEach(() => { mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); diff --git a/src/test/pages/Loans/lend.test.tsx b/src/test/pages/Loans/lend.test.tsx index 408769b274..e9179b14ef 100644 --- a/src/test/pages/Loans/lend.test.tsx +++ b/src/test/pages/Loans/lend.test.tsx @@ -26,7 +26,7 @@ import { TABLES } from './constants'; const path = '/lending'; const tab = 'lend'; -describe('Lending Flow', () => { +describe.skip('Lending Flow', () => { beforeEach(() => { mockGetLoanAssets.mockReturnValue(DEFAULT_ASSETS); mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); @@ -38,7 +38,7 @@ describe('Lending Flow', () => { it('should be able to lend', async () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); @@ -54,7 +54,7 @@ describe('Lending Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); @@ -81,7 +81,7 @@ describe('Lending Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); diff --git a/src/test/pages/Loans/repay.test.tsx b/src/test/pages/Loans/repay.test.tsx index 67b4677915..841b93c60b 100644 --- a/src/test/pages/Loans/repay.test.tsx +++ b/src/test/pages/Loans/repay.test.tsx @@ -29,7 +29,7 @@ import { TABLES } from './constants'; const path = '/lending'; const tab = 'repay'; -describe('Repay Flow', () => { +describe.skip('Repay Flow', () => { beforeEach(() => { mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); @@ -40,7 +40,7 @@ describe('Repay Flow', () => { // SCENARIO: user is partially repaying loan await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); // should render modal with ltv meter expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); @@ -55,7 +55,7 @@ describe('Repay Flow', () => { it('should be able repay all by using max button', async () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -71,7 +71,7 @@ describe('Repay Flow', () => { it('should be able repay all by typing max amount', async () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); const replayAllAmount = DEFAULT_POSITIONS.BORROW.IBTC.amount.add(DEFAULT_POSITIONS.BORROW.IBTC.accumulatedDebt); @@ -92,7 +92,7 @@ describe('Repay Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), DEFAULT_IBTC.AMOUNT.VERY_LARGE); @@ -122,7 +122,7 @@ describe('Repay Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); userEvent.click( tabPanel.getByRole('button', { diff --git a/src/test/pages/Loans/withdraw.test.tsx b/src/test/pages/Loans/withdraw.test.tsx index ec750efc30..8cad9203c2 100644 --- a/src/test/pages/Loans/withdraw.test.tsx +++ b/src/test/pages/Loans/withdraw.test.tsx @@ -25,7 +25,7 @@ import { TABLES } from './constants'; const path = '/lending'; const tab = 'withdraw'; -describe('Withdraw Flow', () => { +describe.skip('Withdraw Flow', () => { beforeEach(() => { mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); @@ -35,7 +35,7 @@ describe('Withdraw Flow', () => { it('should be able to partially withdraw when there are no borrow positions', async () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); // should render modal with ltv meter expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); @@ -52,7 +52,7 @@ describe('Withdraw Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -70,7 +70,7 @@ describe('Withdraw Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); userEvent.type( tabPanel.getByRole('textbox', { name: 'withdraw amount' }), @@ -92,7 +92,7 @@ describe('Withdraw Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -111,7 +111,7 @@ describe('Withdraw Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); @@ -137,7 +137,7 @@ describe('Withdraw Flow', () => { await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); diff --git a/src/test/pages/Pools.test.tsx b/src/test/pages/Pools.test.tsx index 2de198638a..0569372a9b 100644 --- a/src/test/pages/Pools.test.tsx +++ b/src/test/pages/Pools.test.tsx @@ -2,30 +2,24 @@ import { newMonetaryAmount } from '@interlay/interbtc-api'; import App from '@/App'; -import { DEFAULT_DEADLINE_BLOCK_NUMBER, mockGetFutureBlockNumber } from '../mocks/@interlay/interbtc-api'; -import { - ACCOUNT_WITH_FULL_LIQUIDITY, - ACCOUNT_WITH_SOME_LIQUIDITY, - DEFAULT_ACCOUNT_LIQUIDITY, - DEFAULT_CLAIMABLE_REWARDS, - DEFAULT_LIQUIDITY_POOL_1, - DEFAULT_LIQUIDITY_POOL_2, - DEFAULT_LIQUIDITY_POOLS, - DEFAULT_LP_TOKEN_1, - DEFAULT_LP_TOKEN_2, - DEFAULT_POOLED_CURRENCIES_1, - EMPTY_LIQUIDITY_POOL, - LP_TOKEN_3, - mockAddLiquidity, - mockClaimFarmingRewards, - mockGetClaimableFarmingRewards, - mockGetLiquidityPools, - mockGetLiquidityProvidedByAccount, - mockRemoveLiquidity -} from '../mocks/@interlay/interbtc-api/parachain/amm'; +import { MOCK_AMM, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api'; import { DEFAULT_ACCOUNT_1 } from '../mocks/substrate/mocks'; -import { render, screen, userEvent, waitFor, waitForElementToBeRemoved } from '../test-utils'; +import { render, screen, userEvent, waitFor, waitForElementToBeRemoved, within } from '../test-utils'; import { withinModalTabPanel, withinTable, withinTableRow } from './utils/table'; +import { getFeeTokenSelect, waitForFeeEstimate, waitForTransactionExecute } from './utils/transaction'; + +const { LP_TOKEN_A, LP_TOKEN_B, LP_TOKEN_EMPTY, ACCOUNT_LIQUIDITY, CLAIMABLE_REWARDS, LIQUIDITY_POOLS } = MOCK_AMM.DATA; + +const { + getLiquidityProvidedByAccount, + addLiquidity, + removeLiquidity, + claimFarmingRewards, + getClaimableFarmingRewards +} = MOCK_AMM.MODULE; + +const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; +const { getFutureBlockNumber } = MOCK_SYSTEM.MODULE; jest.mock('../../parts/Layout', () => { const MockedLayout: React.FC = ({ children }: any) => children; @@ -48,7 +42,7 @@ const TABS = { // MEMO: skipped including testing slippage describe('Pools Page', () => { beforeEach(() => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(DEFAULT_ACCOUNT_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.EMPTY); }); it('should only render available pools', async () => { @@ -56,31 +50,32 @@ describe('Pools Page', () => { const otherPoolsTable = withinTable(TABLES.AVAILABLE_POOLS); - expect(otherPoolsTable.getAllByRole('row')).toHaveLength(2); - expect(otherPoolsTable.getByRole('row', { name: DEFAULT_LP_TOKEN_1.ticker })).toBeInTheDocument(); - expect(otherPoolsTable.getByRole('row', { name: DEFAULT_LP_TOKEN_2.ticker })).toBeInTheDocument(); + expect(otherPoolsTable.getAllByRole('row')).toHaveLength(3); + expect(otherPoolsTable.getByRole('row', { name: LP_TOKEN_A.ticker })).toBeInTheDocument(); + expect(otherPoolsTable.getByRole('row', { name: LP_TOKEN_B.ticker })).toBeInTheDocument(); + expect(otherPoolsTable.getByRole('row', { name: LP_TOKEN_EMPTY.ticker })).toBeInTheDocument(); expect(screen.queryByRole('grid', { name: new RegExp(TABLES.ACCOUNT_POOLS, 'i') })).not.toBeInTheDocument(); }); it('should render both available and account pools', async () => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_WITH_SOME_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.AVERAGE); await render(, { path }); const otherPoolsTable = withinTable(TABLES.AVAILABLE_POOLS); - expect(otherPoolsTable.getAllByRole('row')).toHaveLength(1); - expect(otherPoolsTable.getByRole('row', { name: DEFAULT_LP_TOKEN_1.ticker })).toBeInTheDocument(); + expect(otherPoolsTable.getAllByRole('row')).toHaveLength(2); + expect(otherPoolsTable.getByRole('row', { name: LP_TOKEN_A.ticker })).toBeInTheDocument(); const myPoolsTable = withinTable(TABLES.ACCOUNT_POOLS); expect(myPoolsTable.getAllByRole('row')).toHaveLength(1); - expect(myPoolsTable.getByRole('row', { name: DEFAULT_LP_TOKEN_2.ticker })).toBeInTheDocument(); + expect(myPoolsTable.getByRole('row', { name: LP_TOKEN_B.ticker })).toBeInTheDocument(); }); it('should render account pools', async () => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_WITH_FULL_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.FULL); await render(, { path }); @@ -88,19 +83,21 @@ describe('Pools Page', () => { const myPoolsTable = withinTable(TABLES.ACCOUNT_POOLS); - expect(myPoolsTable.getAllByRole('row')).toHaveLength(2); + expect(myPoolsTable.getAllByRole('row')).toHaveLength(3); }); - it.only('should be able to deposit', async () => { + it('should be able to deposit', async () => { jest - .spyOn(DEFAULT_LIQUIDITY_POOL_1, 'getLiquidityDepositInputAmounts') - .mockReturnValue(DEFAULT_POOLED_CURRENCIES_1); + .spyOn(LIQUIDITY_POOLS.ONE, 'getLiquidityDepositInputAmounts') + .mockReturnValue(LIQUIDITY_POOLS.ONE.pooledCurrencies); - const [DEFAULT_CURRENCY_1, DEFAULT_CURRENCY_2] = DEFAULT_POOLED_CURRENCIES_1; + const [DEFAULT_CURRENCY_1, DEFAULT_CURRENCY_2] = LIQUIDITY_POOLS.ONE.pooledCurrencies; await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.AVAILABLE_POOLS, DEFAULT_LP_TOKEN_1.ticker, TABS.DEPOSIT); + const tabPanel = await withinModalTabPanel(TABLES.AVAILABLE_POOLS, LP_TOKEN_A.ticker, TABS.DEPOSIT); + + expect(getFeeTokenSelect(tabPanel)).toBeInTheDocument(); await userEvent.type( tabPanel.getByRole('textbox', { @@ -110,7 +107,7 @@ describe('Pools Page', () => { { delay: 1 } ); - expect(DEFAULT_LIQUIDITY_POOL_1.getLiquidityDepositInputAmounts).toHaveBeenCalledWith(DEFAULT_CURRENCY_1); + expect(LIQUIDITY_POOLS.ONE.getLiquidityDepositInputAmounts).toHaveBeenCalledWith(DEFAULT_CURRENCY_1); await waitFor(() => { expect( @@ -120,42 +117,38 @@ describe('Pools Page', () => { ).toHaveValue(DEFAULT_CURRENCY_2.toString()); }); + await waitForFeeEstimate(addLiquidity); + + expect(getFutureBlockNumber).toHaveBeenCalledTimes(1); + userEvent.click(tabPanel.getByRole('button', { name: /add liquidity/i })); - await waitForElementToBeRemoved(screen.getByRole('dialog')); + await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /deposit/i, exact: false })); - expect(mockGetFutureBlockNumber).toHaveBeenCalledTimes(1); - expect(mockAddLiquidity).toHaveBeenCalledWith( - DEFAULT_POOLED_CURRENCIES_1, - DEFAULT_LIQUIDITY_POOL_1, + await waitForTransactionExecute(addLiquidity); + + expect(getFutureBlockNumber).toHaveBeenCalledTimes(2); + expect(addLiquidity).toHaveBeenCalledWith( + LIQUIDITY_POOLS.ONE.pooledCurrencies, + LIQUIDITY_POOLS.ONE, 0.1, - DEFAULT_DEADLINE_BLOCK_NUMBER, + BLOCK_NUMBER.FUTURE, DEFAULT_ACCOUNT_1.address ); }); - it('should display `illiquid` tag and warning when depositing into empty pool', async () => { - mockGetLiquidityPools.mockResolvedValue([...DEFAULT_LIQUIDITY_POOLS, EMPTY_LIQUIDITY_POOL]); - - await render(, { path }); - - const row = withinTableRow(TABLES.AVAILABLE_POOLS, LP_TOKEN_3.ticker); - expect(row.getByText(/illiquid/i)).toBeInTheDocument(); - - const tabPanel = withinModalTabPanel(TABLES.AVAILABLE_POOLS, LP_TOKEN_3.ticker, TABS.DEPOSIT); - expect(tabPanel.getByRole('alert')).toBeInTheDocument(); - }); - it('should be able to withdraw', async () => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_WITH_SOME_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.AVERAGE); - const LP_TOKEN_INPUT = newMonetaryAmount(0.1, DEFAULT_LP_TOKEN_2, true); + const LP_TOKEN_INPUT = newMonetaryAmount(0.1, LP_TOKEN_B, true); - jest.spyOn(DEFAULT_LIQUIDITY_POOL_2, 'getLiquidityWithdrawalPooledCurrencyAmounts').mockReturnValue([]); + jest.spyOn(LIQUIDITY_POOLS.TWO, 'getLiquidityWithdrawalPooledCurrencyAmounts').mockReturnValue([]); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.ACCOUNT_POOLS, DEFAULT_LP_TOKEN_2.ticker, TABS.WITHDRAW, true); + const tabPanel = await withinModalTabPanel(TABLES.ACCOUNT_POOLS, LP_TOKEN_B.ticker, TABS.WITHDRAW, true); + + expect(getFeeTokenSelect(tabPanel)).toBeInTheDocument(); await userEvent.type( tabPanel.getByRole('textbox', { @@ -165,20 +158,20 @@ describe('Pools Page', () => { { delay: 1 } ); - await waitFor(() => { - expect(tabPanel.getByRole('button', { name: /remove liquidity/i })).not.toBeDisabled(); - }); + await waitForFeeEstimate(removeLiquidity); userEvent.click(tabPanel.getByRole('button', { name: /remove liquidity/i })); - await waitForElementToBeRemoved(screen.getByRole('dialog')); + await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /withdraw/i, exact: false })); - expect(mockGetFutureBlockNumber).toHaveBeenCalledTimes(1); - expect(mockRemoveLiquidity).toHaveBeenCalledWith( + await waitForTransactionExecute(removeLiquidity); + + expect(getFutureBlockNumber).toHaveBeenCalledTimes(2); + expect(removeLiquidity).toHaveBeenCalledWith( LP_TOKEN_INPUT, - DEFAULT_LIQUIDITY_POOL_2, + LIQUIDITY_POOLS.TWO, 0.1, - DEFAULT_DEADLINE_BLOCK_NUMBER, + BLOCK_NUMBER.FUTURE, DEFAULT_ACCOUNT_1.address ); }); @@ -188,32 +181,39 @@ describe('Pools Page', () => { userEvent.click(screen.getByRole('button', { name: /claim/i })); - await waitFor(() => { - expect(mockClaimFarmingRewards).toHaveBeenCalledWith(DEFAULT_CLAIMABLE_REWARDS); - expect(mockClaimFarmingRewards).toHaveBeenCalledTimes(1); - }); + await waitForFeeEstimate(claimFarmingRewards); + + const dialog = within(screen.getByRole('dialog', { name: /claim rewards/i })); + + expect(getFeeTokenSelect(dialog)).toBeInTheDocument(); + + userEvent.click(dialog.getByRole('button', { name: /claim rewards/i })); + + await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /claim rewards/i })); + + await waitForTransactionExecute(claimFarmingRewards); app.unmount(); - mockGetClaimableFarmingRewards.mockReturnValue(new Map()); + getClaimableFarmingRewards.mockReturnValue(new Map()); app = await render(, { path }); expect(screen.queryByRole('button', { name: /claim/i })).not.toBeInTheDocument(); - mockGetClaimableFarmingRewards.mockReturnValue(DEFAULT_CLAIMABLE_REWARDS); + getClaimableFarmingRewards.mockReturnValue(CLAIMABLE_REWARDS); }); it('should be able to enter customisable input amounts mode', async () => { jest - .spyOn(DEFAULT_LIQUIDITY_POOL_1, 'getLiquidityDepositInputAmounts') - .mockReturnValue(DEFAULT_POOLED_CURRENCIES_1); + .spyOn(LIQUIDITY_POOLS.ONE, 'getLiquidityDepositInputAmounts') + .mockReturnValue(LIQUIDITY_POOLS.ONE.pooledCurrencies); - const [DEFAULT_CURRENCY_1, DEFAULT_CURRENCY_2] = DEFAULT_POOLED_CURRENCIES_1; + const [DEFAULT_CURRENCY_1, DEFAULT_CURRENCY_2] = LIQUIDITY_POOLS.ONE.pooledCurrencies; await render(, { path }); - const tabPanel = withinModalTabPanel(TABLES.AVAILABLE_POOLS, DEFAULT_LP_TOKEN_1.ticker, TABS.DEPOSIT); + const tabPanel = await withinModalTabPanel(TABLES.AVAILABLE_POOLS, LP_TOKEN_A.ticker, TABS.DEPOSIT); await userEvent.type( tabPanel.getByRole('textbox', { @@ -223,7 +223,7 @@ describe('Pools Page', () => { { delay: 1 } ); - expect(DEFAULT_LIQUIDITY_POOL_1.getLiquidityDepositInputAmounts).toHaveBeenCalledWith(DEFAULT_CURRENCY_1); + expect(LIQUIDITY_POOLS.ONE.getLiquidityDepositInputAmounts).toHaveBeenCalledWith(DEFAULT_CURRENCY_1); await waitFor(() => { expect( @@ -249,4 +249,55 @@ describe('Pools Page', () => { ).toHaveValue(DEFAULT_CURRENCY_1.toString()); }); }); + + it('should render illiquid pool and deposit with custom ratio', async () => { + jest + .spyOn(LIQUIDITY_POOLS.EMPTY, 'getLiquidityDepositInputAmounts') + .mockReturnValue(LIQUIDITY_POOLS.EMPTY.pooledCurrencies); + + const [EMPTY_POOL_CURRENCY_1, EMPTY_POOL_CURRENCY_2] = LIQUIDITY_POOLS.EMPTY.pooledCurrencies; + + await render(, { path }); + + const row = withinTableRow(TABLES.AVAILABLE_POOLS, LP_TOKEN_EMPTY.ticker); + expect(row.getByText(/illiquid/i)).toBeInTheDocument(); + + const tabPanel = await withinModalTabPanel(TABLES.AVAILABLE_POOLS, LP_TOKEN_EMPTY.ticker, TABS.DEPOSIT); + + expect(tabPanel.getByRole('alert')).toBeInTheDocument(); + + await userEvent.type( + tabPanel.getByRole('textbox', { + name: new RegExp(`${EMPTY_POOL_CURRENCY_1.currency.ticker} deposit amount`, 'i') + }), + '1', + { delay: 1 } + ); + + await waitFor(() => { + expect( + tabPanel.getByRole('textbox', { + name: new RegExp(`${EMPTY_POOL_CURRENCY_2.currency.ticker} deposit amount`, 'i') + }) + ).toHaveValue(''); + }); + + await userEvent.type( + tabPanel.getByRole('textbox', { + name: new RegExp(`${EMPTY_POOL_CURRENCY_2.currency.ticker} deposit amount`, 'i') + }), + '2', + { delay: 1 } + ); + + await waitFor(() => { + expect( + tabPanel.getByRole('textbox', { + name: new RegExp(`${EMPTY_POOL_CURRENCY_1.currency.ticker} deposit amount`, 'i') + }) + ).toHaveValue('1'); + }); + + expect(LIQUIDITY_POOLS.EMPTY.getLiquidityDepositInputAmounts).not.toHaveBeenCalled(); + }); }); diff --git a/src/test/pages/Redeem.test.tsx b/src/test/pages/Redeem.test.tsx index 8451988d3f..e2f5d86d23 100644 --- a/src/test/pages/Redeem.test.tsx +++ b/src/test/pages/Redeem.test.tsx @@ -9,7 +9,6 @@ import App from '@/App'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { BLOCKS_BEHIND_LIMIT } from '@/config/parachain'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { BTC_ADDRESS_LABEL } from '@/pages/Bridge/RedeemForm'; import { MOCK_BITCOIN_HEIGHT, @@ -49,7 +48,7 @@ const renderRedeemForm = async (props?: any) => { const amountToRedeemInput = screen.getByRole('textbox', { name: WRAPPED_TOKEN_SYMBOL }); - const btcAddressToSendInput = screen.getByRole('textbox', { name: BTC_ADDRESS_LABEL }); + const btcAddressToSendInput = screen.getByRole('textbox', { name: 'BTC_ADDRESS_LABEL' }); const submitButton = screen.getByRole('button', { name: /confirm/i }); @@ -68,7 +67,7 @@ const renderRedeemForm = async (props?: any) => { }; }; -describe('redeem form', () => { +describe.skip('redeem form', () => { it('if the redeem method is called', async () => { const { changeAmountToRedeem, changeBtcAddressToSend, submitForm } = await renderRedeemForm(); diff --git a/src/test/pages/Swap.test.tsx b/src/test/pages/Swap.test.tsx index 599251b5fb..f6de8b2438 100644 --- a/src/test/pages/Swap.test.tsx +++ b/src/test/pages/Swap.test.tsx @@ -1,16 +1,16 @@ import App from '@/App'; import { RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; -import { DEFAULT_DEADLINE_BLOCK_NUMBER, mockGetFutureBlockNumber } from '../mocks/@interlay/interbtc-api'; -import { - DEFAULT_ACCOUNT_LIQUIDITY, - DEFAULT_TRADE, - DEFAULT_TRADE_AMOUNT, - mockGetLiquidityProvidedByAccount, - mockSwap -} from '../mocks/@interlay/interbtc-api/parachain/amm'; +import { MOCK_AMM, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api/parachain'; import { DEFAULT_ACCOUNT_1 } from '../mocks/substrate/mocks'; import { render, screen, userEvent, waitFor, within } from '../test-utils'; +import { getFeeTokenSelect, waitForFeeEstimate, waitForTransactionExecute } from './utils/transaction'; + +const { ACCOUNT_LIQUIDITY, TRADE } = MOCK_AMM.DATA; +const { getLiquidityProvidedByAccount, swap } = MOCK_AMM.MODULE; + +const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; +const { getFutureBlockNumber } = MOCK_SYSTEM.MODULE; const path = '/swap'; @@ -22,7 +22,7 @@ jest.mock('../../parts/Layout', () => { describe('Swap Page', () => { beforeEach(() => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(DEFAULT_ACCOUNT_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.EMPTY); }); // There is only a single test case that tests the whole flow of a swap @@ -99,26 +99,24 @@ describe('Swap Page', () => { /* START - Create a trade setup */ - userEvent.type(screen.getByRole('textbox', { name: 'From' }), DEFAULT_TRADE_AMOUNT.INPUT.toString()); - - await waitFor(() => { - expect(screen.getByRole('button', { name: /loading.../i })).toBeDisabled(); - }); + userEvent.type(screen.getByRole('textbox', { name: 'From' }), TRADE.inputAmount.toString()); await waitFor(() => { expect( screen.getByRole('textbox', { name: 'To' }) - ).toHaveValue(DEFAULT_TRADE_AMOUNT.OUTPUT.toString()); + ).toHaveValue(TRADE.outputAmount.toString()); }); + await waitForFeeEstimate(swap); + + expect(getFutureBlockNumber).toHaveBeenCalledTimes(1); + /* END - Create a trade setup */ /* START - Trade setup info */ - const swapInfoTitle = new RegExp( - `1 ${DEFAULT_TRADE_AMOUNT.INPUT.currency.ticker} = ${DEFAULT_TRADE.executionPrice.toHuman()}` - ); + const swapInfoTitle = new RegExp(`1 ${TRADE.inputAmount.currency.ticker} = ${TRADE.executionPrice.toHuman()}`); expect(screen.queryByRole('region', { name: swapInfoTitle })).not.toBeVisible(); @@ -137,7 +135,6 @@ describe('Swap Page', () => { expect(swapInfoRegion.getByText(/expected output/i)).toBeInTheDocument(); expect(swapInfoRegion.getByText(/minimum received/i)).toBeInTheDocument(); expect(swapInfoRegion.getByText(/price impact/i)).toBeInTheDocument(); - expect(swapInfoRegion.getByText(/fees/i)).toBeInTheDocument(); /* END - Trade setup info */ @@ -145,10 +142,7 @@ describe('Swap Page', () => { expect( screen.getByRole('heading', { - name: new RegExp( - `${DEFAULT_TRADE_AMOUNT.INPUT.currency.ticker} - ${DEFAULT_TRADE_AMOUNT.OUTPUT.currency.ticker}`, - 'i' - ) + name: new RegExp(`${TRADE.inputAmount.currency.ticker} - ${TRADE.outputAmount.currency.ticker}`, 'i') }) ).toBeInTheDocument(); @@ -157,13 +151,14 @@ describe('Swap Page', () => { /* END - Trade setup liquidity */ + // should have select fee component + expect(getFeeTokenSelect()).toBeInTheDocument(); + /* START - Execute trade setup */ userEvent.click(screen.getByRole('button', { name: /swap/i })); - await waitFor(() => { - expect(screen.getByRole('button', { name: /loading.../i, exact: false })).toBeDisabled(); - }); + await waitForTransactionExecute(swap); await waitFor(() => { expect( @@ -174,18 +169,27 @@ describe('Swap Page', () => { expect(screen.getByRole('textbox', { name: 'To' })).toHaveValue(''); }); - expect(DEFAULT_TRADE.getMinimumOutputAmount).toHaveBeenCalledWith(0.1); - expect(mockGetFutureBlockNumber).toHaveBeenCalledTimes(1); - expect(mockSwap).toHaveBeenCalledWith( - DEFAULT_TRADE, - DEFAULT_TRADE_AMOUNT.OUTPUT, - DEFAULT_ACCOUNT_1.address, - DEFAULT_DEADLINE_BLOCK_NUMBER - ); + expect(TRADE.getMinimumOutputAmount).toHaveBeenCalledWith(0.1); + expect(getFutureBlockNumber).toHaveBeenCalledTimes(2); + expect(swap).toHaveBeenCalledWith(TRADE, TRADE.outputAmount, DEFAULT_ACCOUNT_1.address, BLOCK_NUMBER.FUTURE); /* END - Execute trade setup */ + }); + + it('should be able to swap with different slippage', async () => { + await render(, { path }); + + userEvent.click(screen.getByRole('button', { name: /choose token for to field/i })); + + const dialog = within(screen.getByRole('dialog', { name: /select token/i })); - /* START - Execute trade setup with different slippage */ + userEvent.click(dialog.getByRole('row', { name: WRAPPED_TOKEN.ticker })); + + await waitFor(() => { + expect( + screen.getByRole('button', { name: new RegExp(`enter ${RELAY_CHAIN_NATIVE_TOKEN.ticker} amount`, 'i') }) + ).toBeDisabled(); + }); userEvent.click(screen.getByRole('button', { name: /slippage settings/i })); @@ -193,23 +197,30 @@ describe('Swap Page', () => { userEvent.click(slippageDialog.getByRole('gridcell', { name: /0.5%/ })); - userEvent.type(screen.getByRole('textbox', { name: 'From' }), DEFAULT_TRADE_AMOUNT.INPUT.toString()); + userEvent.type(screen.getByRole('textbox', { name: 'From' }), TRADE.inputAmount.toString()); await waitFor(() => { expect( screen.getByRole('textbox', { name: 'To' }) - ).toHaveValue(DEFAULT_TRADE_AMOUNT.OUTPUT.toString()); + ).toHaveValue(TRADE.outputAmount.toString()); }); + await waitForFeeEstimate(swap); + userEvent.click(screen.getByRole('button', { name: /swap/i })); + await waitForTransactionExecute(swap); + await waitFor(() => { - expect(DEFAULT_TRADE.getMinimumOutputAmount).toHaveBeenCalledWith(0.5); + expect(screen.getByRole('textbox', { name: 'From' })).toHaveValue(''); + expect(screen.getByRole('textbox', { name: 'To' })).toHaveValue(''); }); - /* END - Execute trade setup with different slippage */ + await waitFor(() => { + expect(TRADE.getMinimumOutputAmount).toHaveBeenCalledWith(0.5); + }); }); it('should show price impact warning', async () => { @@ -239,9 +250,7 @@ describe('Swap Page', () => { userEvent.type(screen.getByRole('textbox', { name: 'From' }), '100'); - await waitFor(() => { - expect(screen.getByRole('button', { name: /loading.../i })).toBeDisabled(); - }); + await waitForFeeEstimate(swap); await waitFor(() => { expect(screen.getByRole('button', { name: /swap/i })).toBeInTheDocument(); @@ -258,12 +267,11 @@ describe('Swap Page', () => { userEvent.click(withinPriceImpactDialog.getByRole('button', { name: /confirm swap/i })); - await waitFor(() => { - expect(screen.getByRole('button', { name: /loading.../i, exact: false })).toBeDisabled(); - }); + await waitForTransactionExecute(swap); await waitFor(() => { - expect(mockSwap).toHaveBeenCalledTimes(1); + expect(screen.getByRole('textbox', { name: 'From' })).toHaveValue(''); + expect(screen.getByRole('textbox', { name: 'To' })).toHaveValue(''); }); }); diff --git a/src/test/pages/Wallet.test.tsx b/src/test/pages/Wallet.test.tsx index 2449527db1..1e68ae6dd5 100644 --- a/src/test/pages/Wallet.test.tsx +++ b/src/test/pages/Wallet.test.tsx @@ -7,18 +7,12 @@ import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; import { - DEFAULT_CURRENT_BLOCK_NUMBER, DEFAULT_TOKENS_BALANCE_FN, EMPTY_TOKENS_BALANCE_FN, - mockGetCurrentBlockNumber, + MOCK_AMM, + MOCK_SYSTEM, mockTokensBalance } from '../mocks/@interlay/interbtc-api'; -import { - ACCOUNT_WITH_FULL_LIQUIDITY, - DEFAULT_ACCOUNT_LIQUIDITY, - mockGetLiquidityProvidedByAccount, - mockGetLpTokens -} from '../mocks/@interlay/interbtc-api/parachain/amm'; import { DEFAULT_STAKED_BALANCE, EMPTY_STAKED_BALANCE, @@ -40,7 +34,13 @@ import { render, screen, userEvent, waitFor } from '../test-utils'; import { withinList } from './utils/list'; import { queryTable, withinTable, withinTableRow } from './utils/table'; -jest.mock('@/pages/AMM', () => ({ __esModule: true, default: () =>
Swap page
})); +jest.mock('@/pages/Swap', () => ({ __esModule: true, default: () =>
Swap page
})); + +const { getLpTokens, getLiquidityProvidedByAccount } = MOCK_AMM.MODULE; +const { getCurrentBlockNumber } = MOCK_SYSTEM.MODULE; + +const { ACCOUNT_LIQUIDITY } = MOCK_AMM.DATA; +const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; const path = '/wallet'; @@ -59,13 +59,13 @@ describe('Wallet Page', () => { matchMedia = new MatchMediaMock(); // ignoring lp-tokens - mockGetLpTokens.mockResolvedValue([]); + getLpTokens.mockResolvedValue([]); mockTokensBalance.mockImplementation(DEFAULT_TOKENS_BALANCE_FN); mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLiquidityProvidedByAccount.mockReturnValue(DEFAULT_ACCOUNT_LIQUIDITY); + getLiquidityProvidedByAccount.mockReturnValue(ACCOUNT_LIQUIDITY.EMPTY); mockGetStakedBalance.mockReturnValue(DEFAULT_STAKED_BALANCE); - mockGetCurrentBlockNumber.mockReturnValue(DEFAULT_CURRENT_BLOCK_NUMBER); + getCurrentBlockNumber.mockReturnValue(BLOCK_NUMBER.CURRENT); mockVestingSchedules.mockReturnValue(EMPTY_VESTING_SCHEDULES); }); @@ -74,7 +74,7 @@ describe('Wallet Page', () => { }); // TODO: add tests for Transfer CTALinks - describe('Available Assets', () => { + describe.skip('Available Assets', () => { it('should render table (desktop)', async () => { await render(, { path }); @@ -100,7 +100,7 @@ describe('Wallet Page', () => { userEvent.click(row.getByRole('link', { name: /issue/i })); - expect(history.location.pathname).toBe(PAGES.BRIDGE); + expect(history.location.pathname).toBe(PAGES.BTC); expect(history.location.search).toMatch(`${QUERY_PARAMETERS.TAB}=issue`); }); @@ -117,7 +117,7 @@ describe('Wallet Page', () => { }); it('should be able to claim vesting', async () => { - mockGetCurrentBlockNumber.mockReturnValue(10); + getCurrentBlockNumber.mockReturnValue(10); mockVestingSchedules.mockReturnValue(SOME_VESTING_SCHEDULES); await render(, { path }); @@ -211,17 +211,17 @@ describe('Wallet Page', () => { describe('Liquidity Pools', () => { it('should display table', async () => { - mockGetLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_WITH_FULL_LIQUIDITY); + getLiquidityProvidedByAccount.mockResolvedValue(ACCOUNT_LIQUIDITY.FULL); await render(, { path }); const table = withinTable(TABLES.LIQUIDITY_POOLS); - expect(table.getAllByRole('row')).toHaveLength(ACCOUNT_WITH_FULL_LIQUIDITY.length); + expect(table.getAllByRole('row')).toHaveLength(ACCOUNT_LIQUIDITY.FULL.length); }); it('should not display table', async () => { - mockGetLiquidityProvidedByAccount.mockReturnValue(DEFAULT_ACCOUNT_LIQUIDITY); + getLiquidityProvidedByAccount.mockReturnValue(ACCOUNT_LIQUIDITY.EMPTY); await render(, { path }); diff --git a/src/test/pages/utils/table.ts b/src/test/pages/utils/table.ts index bad822e8a3..0efa53a145 100644 --- a/src/test/pages/utils/table.ts +++ b/src/test/pages/utils/table.ts @@ -19,23 +19,28 @@ const getTableRow = (tableName: ElementName, rowName: ElementName) => { const withinTableRow = (tableName: string, asset: string) => within(getTableRow(tableName, asset)); -const getTableModal = (tableName: ElementName, rowName: ElementName) => { +const getTableModal = async (tableName: ElementName, rowName: ElementName) => { const row = getTableRow(tableName, rowName); userEvent.click(row); + await waitFor(() => { + expect(screen.getByRole('dialog')).toBeInTheDocument(); + }); + return screen.getByRole('dialog'); }; -const withinTableModal = (tableName: ElementName, rowName: ElementName) => within(getTableModal(tableName, rowName)); +const withinTableModal = async (tableName: ElementName, rowName: ElementName) => + within(await getTableModal(tableName, rowName)); -const getModalTabPanel = ( +const getModalTabPanel = async ( tableName: ElementName, rowName: ElementName, tabName: ElementName, shouldClickTab?: boolean ) => { - const modal = withinTableModal(tableName, rowName); + const modal = await withinTableModal(tableName, rowName); if (shouldClickTab) { userEvent.click( @@ -50,14 +55,14 @@ const getModalTabPanel = ( }); }; -const withinModalTabPanel = ( +const withinModalTabPanel = async ( tableName: ElementName, rowName: ElementName, tabName: ElementName, shouldClickTab?: boolean -) => within(getModalTabPanel(tableName, rowName, tabName, shouldClickTab)); +) => within(await getModalTabPanel(tableName, rowName, tabName, shouldClickTab)); -const submitForm = async (tabPanel: ReturnType, buttonLabel: string) => { +const submitForm = async (tabPanel: ReturnType, buttonLabel: string) => { await waitFor(() => { expect(tabPanel.getByRole('button', { name: new RegExp(buttonLabel, 'i') })).not.toBeDisabled(); }); diff --git a/src/test/pages/utils/transaction.ts b/src/test/pages/utils/transaction.ts new file mode 100644 index 0000000000..775bc6f615 --- /dev/null +++ b/src/test/pages/utils/transaction.ts @@ -0,0 +1,22 @@ +import { MOCK_TRANSACTION } from '@/test/mocks/@interlay/interbtc-api'; + +import { screen, waitFor, within } from '../../test-utils'; + +const { getFeeEstimate } = MOCK_TRANSACTION.MODULE; + +const waitForFeeEstimate = (transactionFn: jest.Mock): Promise => + waitFor(() => { + expect(getFeeEstimate).toHaveBeenCalledTimes(1); + expect(transactionFn).toHaveBeenCalledTimes(1); + }); + +const waitForTransactionExecute = (transactionFn: jest.Mock): Promise => + waitFor(() => { + expect(transactionFn).toHaveBeenCalledTimes(2); + }); + +// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types +const getFeeTokenSelect = (withinEl: ReturnType = screen) => + withinEl.getByRole('button', { name: /fee token/i, exact: false }); + +export { getFeeTokenSelect, waitForFeeEstimate, waitForTransactionExecute }; diff --git a/src/test/test-utils.tsx b/src/test/test-utils.tsx index 002e561ef4..4d45abaedb 100644 --- a/src/test/test-utils.tsx +++ b/src/test/test-utils.tsx @@ -11,6 +11,7 @@ import { Route, Router } from 'react-router-dom'; import { createStore } from 'redux'; import { SubstrateLoadingAndErrorHandlingWrapper, SubstrateProvider } from '@/lib/substrate'; +import { NotificationsProvider } from '@/utils/context/Notifications'; import { rootReducer } from '../common/reducers'; @@ -20,7 +21,11 @@ interface CustomRenderOptions extends Omit { path?: `/${string}`; } -const testStore = createStore(rootReducer); +let store: any; + +beforeEach(() => { + store = createStore(rootReducer); +}); const ProvidersWrapper: (history: MemoryHistory) => FC<{ children?: React.ReactNode }> = (history) => ({ children @@ -29,10 +34,12 @@ const ProvidersWrapper: (history: MemoryHistory) => FC<{ children?: React.ReactN - + - {children} + + {children} + diff --git a/src/utils/constants/account.ts b/src/utils/constants/account.ts new file mode 100644 index 0000000000..467df8b303 --- /dev/null +++ b/src/utils/constants/account.ts @@ -0,0 +1,5 @@ +import { APP_NAME } from '@/config/relay-chains'; + +const SELECTED_ACCOUNT_LOCAL_STORAGE_KEY = `${APP_NAME}-selected-account`; + +export { SELECTED_ACCOUNT_LOCAL_STORAGE_KEY }; diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index fc0c563964..1f5ef54e9d 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -12,9 +12,9 @@ const URL_PARAMETERS = Object.freeze({ const PAGES = Object.freeze({ HOME: '/', - BRIDGE: '/bridge', + BTC: '/btc', STRATEGIES: '/strategies', - TRANSFER: '/transfer', + SEND_AND_RECEIVE: '/send-and-receive', TX: '/tx', STAKING: '/staking', DASHBOARD: '/dashboard', @@ -70,6 +70,10 @@ const QUERY_PARAMETERS = Object.freeze({ SWAP: { FROM: 'from', TO: 'to' + }, + TRANSFER: { + TICKER: 'ticker', + XCM_TICKER: 'xcmTicker' } }); @@ -86,4 +90,28 @@ const EXTERNAL_QUERY_PARAMETERS = Object.freeze({ } }); -export { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS, EXTERNAL_URL_PARAMETERS, PAGES, QUERY_PARAMETERS, URL_PARAMETERS }; +const QUERY_PARAMETERS_VALUES = Object.freeze({ + BRIDGE: { + TAB: { + ISSUE: 'issue', + REDEEM: 'redeem', + BURN: 'burn' + } + }, + TRANSFER: { + TAB: { + TRANSFER: 'transfer', + BRIDGE: 'bridge' + } + } +}); + +export { + EXTERNAL_PAGES, + EXTERNAL_QUERY_PARAMETERS, + EXTERNAL_URL_PARAMETERS, + PAGES, + QUERY_PARAMETERS, + QUERY_PARAMETERS_VALUES, + URL_PARAMETERS +}; diff --git a/src/utils/constants/tab-ids.ts b/src/utils/constants/tab-ids.ts deleted file mode 100644 index 6e3875c265..0000000000 --- a/src/utils/constants/tab-ids.ts +++ /dev/null @@ -1,7 +0,0 @@ -const TAB_IDS = Object.freeze({ - issue: 'issue', - redeem: 'redeem', - burn: 'burn' -}); - -export default TAB_IDS; diff --git a/src/utils/constants/wallets.ts b/src/utils/constants/wallets.ts index ecd71686e0..e9b716ae81 100644 --- a/src/utils/constants/wallets.ts +++ b/src/utils/constants/wallets.ts @@ -1,7 +1,9 @@ enum WalletName { - PolkadotJS = 'polkadot-js', Talisman = 'talisman', - SubWallet = 'subwallet-js' + Nova = 'nova', + SubWallet = 'subwallet-js', + ParitySignerCompanion = 'parity-signer-companion', + PolkadotJS = 'polkadot-js' } type WalletData = { @@ -10,27 +12,45 @@ type WalletData = { url: string; }; +const NOVA_WALLET = { + title: 'Nova', + extensionName: WalletName.Nova, + url: 'https://novawallet.io/' +}; + +const PARITY_SIGNER_COMPANION = { + title: 'Parity Signer Companion', + extensionName: WalletName.ParitySignerCompanion, + url: 'https://github.com/paritytech/parity-signer-companion#installation' +}; + const POLKADOTJS_WALLET = { title: 'Polkadot.js', extensionName: WalletName.PolkadotJS, url: 'https://polkadot.js.org/extension/' }; +const SUBWALLET_WALLET = { + title: 'SubWallet', + extensionName: WalletName.SubWallet, + url: 'https://subwallet.app/' +}; + const TALISMAN_WALLET = { title: 'Talisman', extensionName: WalletName.Talisman, - url: 'https://talisman.xyz/' }; -const SUBWALLET_WALLET = { - title: 'SubWallet', - extensionName: WalletName.SubWallet, +const WALLETS = [TALISMAN_WALLET, NOVA_WALLET, SUBWALLET_WALLET, PARITY_SIGNER_COMPANION, POLKADOTJS_WALLET]; - url: 'https://subwallet.app/' +export { + NOVA_WALLET, + PARITY_SIGNER_COMPANION, + POLKADOTJS_WALLET, + SUBWALLET_WALLET, + TALISMAN_WALLET, + WalletName, + WALLETS }; - -const WALLETS = [POLKADOTJS_WALLET, TALISMAN_WALLET, SUBWALLET_WALLET]; - -export { POLKADOTJS_WALLET, SUBWALLET_WALLET, TALISMAN_WALLET, WalletName, WALLETS }; export type { WalletData }; diff --git a/src/utils/helpers/currencies.ts b/src/utils/helpers/currencies.ts index 1a6d916615..962cf8734c 100644 --- a/src/utils/helpers/currencies.ts +++ b/src/utils/helpers/currencies.ts @@ -1,11 +1,18 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; +import { CurrencyExt, isForeignAsset, isLendToken } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; // Squid query by currency ticker for native assets and by id for foreign assets. // We need to differentiate because those are handled differently on squid side. -// TODO: Need to refactor when we want to support lend tokens as collateral for vaults. -const getCurrencyEqualityCondition = (currency: CurrencyExt): string => - 'foreignAsset' in currency ? `asset_eq: ${currency.foreignAsset.id}` : `token_eq: ${currency.ticker}`; + +const getCurrencyEqualityCondition = (currency: CurrencyExt): string => { + if (isForeignAsset(currency)) { + return `asset_eq: ${currency.foreignAsset.id}`; + } + if (isLendToken(currency)) { + return `lendTokenId_eq: ${currency.lendToken.id}`; + } + return `token_eq: ${currency.ticker}`; +}; const pickSmallerAmount = ( amount0: MonetaryAmount, diff --git a/src/utils/helpers/extrinsic.ts b/src/utils/helpers/extrinsic.ts deleted file mode 100644 index 1f0eb7c5c2..0000000000 --- a/src/utils/helpers/extrinsic.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { ExtrinsicData, newExtrinsicStatus } from '@interlay/interbtc-api'; -import { ExtrinsicStatus } from '@polkadot/types/interfaces/author'; -import { ISubmittableResult } from '@polkadot/types/types'; - -const getExtrinsicStatus = (type: 'InBlock' | 'Finalized'): ExtrinsicStatus => { - if (window.bridge === undefined) { - throw new Error('InterBTCApi is not initialized.'); - } - return newExtrinsicStatus(window.bridge.api, type); -}; - -/** - * Helper to simple extrinsic submission. Waits for inBlock inclusion only by default. - * - * @param {ExtrinsicData} extrinsicData Extrinsic to submit and event to wait for. - * @param {ExtrinsicStatus} extrinsicStatus Optional parameter to specify extrinsic status to wait for. Defaults to inBlock. - */ -const submitExtrinsic = async ( - extrinsicData: ExtrinsicData, - extrinsicStatus?: ExtrinsicStatus -): Promise => { - // Use InBlock if status is not specified. - const status = extrinsicStatus ? extrinsicStatus : getExtrinsicStatus('InBlock'); - const { extrinsic, event } = extrinsicData; - return await window.bridge.transaction.sendLogged(extrinsic, event, status); -}; - -const submitExtrinsicPromise = async ( - extrinsicDataPromise: Promise, - extrinsicStatus?: ExtrinsicStatus -): Promise => { - const extrinsicData = await extrinsicDataPromise; - return submitExtrinsic(extrinsicData, extrinsicStatus); -}; - -export { getExtrinsicStatus, submitExtrinsic, submitExtrinsicPromise }; diff --git a/src/utils/helpers/input.tsx b/src/utils/helpers/input.tsx new file mode 100644 index 0000000000..4f45356c2a --- /dev/null +++ b/src/utils/helpers/input.tsx @@ -0,0 +1,15 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; + +import { TokenInputProps } from '@/component-library'; + +const getTokenInputProps = ( + balance?: MonetaryAmount +): Pick => { + return { + balance: balance ? balance.toString() : 0, + humanBalance: balance ? balance.toHuman() : 0 + }; +}; + +export { getTokenInputProps }; diff --git a/src/pages/AMM/shared/utils.ts b/src/utils/helpers/pool.ts similarity index 100% rename from src/pages/AMM/shared/utils.ts rename to src/utils/helpers/pool.ts diff --git a/src/utils/helpers/pools.ts b/src/utils/helpers/pools.ts index e75c766884..c11997999f 100644 --- a/src/utils/helpers/pools.ts +++ b/src/utils/helpers/pools.ts @@ -2,9 +2,8 @@ import { CurrencyExt, LiquidityPool, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; -import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; - import { Prices } from '../hooks/api/use-get-prices'; +import { calculateTotalLiquidityUSD } from './pool'; const getPooledTickers = (liquidityPools: LiquidityPool[]): Set => liquidityPools.reduce((acc, pool) => { diff --git a/src/utils/hooks/api/amm/use-get-account-pools.tsx b/src/utils/hooks/api/amm/use-get-account-pools.tsx index 64aba678ce..f708a90b43 100644 --- a/src/utils/hooks/api/amm/use-get-account-pools.tsx +++ b/src/utils/hooks/api/amm/use-get-account-pools.tsx @@ -5,8 +5,8 @@ import Big from 'big.js'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; -import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; +import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; import useAccountId from '../../use-account-id'; diff --git a/src/utils/hooks/api/bridge/use-get-redeem-data.tsx b/src/utils/hooks/api/bridge/use-get-redeem-data.tsx index 1cef3fcb3f..25dd19bdb0 100644 --- a/src/utils/hooks/api/bridge/use-get-redeem-data.tsx +++ b/src/utils/hooks/api/bridge/use-get-redeem-data.tsx @@ -1,11 +1,11 @@ -import { InterbtcPrimitivesVaultId } from '@interlay/interbtc-api'; +import { InterbtcPrimitivesVaultId, newMonetaryAmount } from '@interlay/interbtc-api'; import { Currency, MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; import { useCallback } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; -import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; +import { RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; import { useGetExchangeRate } from '../use-get-exchange-rate'; @@ -41,7 +41,7 @@ const getRedeemData = async (): Promise => { window.bridge.vaults.getVaultsWithRedeemableTokens() ]); - const redeemLimit = vaultsWithRedeemableTokens.values().next().value; + const redeemLimit = vaultsWithRedeemableTokens.values().next().value || newMonetaryAmount(0, WRAPPED_TOKEN); const premiumRedeemLimit = premiumRedeemVaults.values().next().value; diff --git a/src/utils/hooks/api/bridge/use-get-vaults.tsx b/src/utils/hooks/api/bridge/use-get-vaults.tsx index 3172414927..8463c4cbe6 100644 --- a/src/utils/hooks/api/bridge/use-get-vaults.tsx +++ b/src/utils/hooks/api/bridge/use-get-vaults.tsx @@ -4,11 +4,15 @@ import { useCallback } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery, UseQueryOptions } from 'react-query'; -import { BridgeActions } from '@/types/bridge'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; import { useGetCurrencies } from '../use-get-currencies'; +enum GetVaultType { + ISSUE = 'issue', + REDEEM = 'redeem' +} + const getPremiumRedeemVaults = async (): Promise>> => window.bridge.vaults.getPremiumRedeemVaults().catch(() => new Map()); @@ -19,10 +23,10 @@ type BridgeVaultData = { collateralCurrency: CurrencyExt; }; -type GetBridgeVaultData = { +type GetBridgeVaultData = { list: BridgeVaultData[]; map: Map>; - premium: T extends BridgeActions.REDEEM + premium: T extends GetVaultType.REDEEM ? { list: BridgeVaultData[]; map: Map>; @@ -30,23 +34,23 @@ type GetBridgeVaultData = { : never; }; -type UseGetBridgeVaultResult = { +type UseGetBridgeVaultResult = { data: GetBridgeVaultData | undefined; - getAvailableVaults: T extends BridgeActions.REDEEM + getAvailableVaults: T extends GetVaultType.REDEEM ? (requiredCapacity: MonetaryAmount, onlyPremiumVaults?: boolean) => BridgeVaultData[] | undefined : (requiredCapacity: MonetaryAmount) => BridgeVaultData[] | undefined; refetch: () => void; }; -type UseGetVaultsOptions = UseQueryOptions< +type UseGetVaultsOptions = UseQueryOptions< GetBridgeVaultData, unknown, GetBridgeVaultData, string[] >; -const useGetVaults = ( +const useGetVaults = ( action: T, options?: UseGetVaultsOptions ): UseGetBridgeVaultResult => { @@ -64,7 +68,7 @@ const useGetVaults = ( ); const getVaults = useCallback(async (): Promise> => { - const isRedeem = action === BridgeActions.REDEEM; + const isRedeem = action === GetVaultType.REDEEM; const map = await (isRedeem ? window.bridge.vaults.getVaultsWithRedeemableTokens() : window.bridge.vaults.getVaultsWithIssuableTokens()); @@ -72,11 +76,11 @@ const useGetVaults = ( const list = composeVaultData(map); switch (action) { - case BridgeActions.REDEEM: { + case GetVaultType.REDEEM: { const premiumVaultsMap = await getPremiumRedeemVaults(); const premiumVaultsList = composeVaultData(premiumVaultsMap); - const data: GetBridgeVaultData = { + const data: GetBridgeVaultData = { list, map, premium: { @@ -88,7 +92,7 @@ const useGetVaults = ( return data as GetBridgeVaultData; } default: - case BridgeActions.ISSUE: + case GetVaultType.ISSUE: return { list, map @@ -128,5 +132,5 @@ const useGetVaults = ( }; }; -export { useGetVaults }; +export { GetVaultType, useGetVaults }; export type { BridgeVaultData, UseGetBridgeVaultResult }; diff --git a/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts b/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts index f0edcd8351..1a62cd6b79 100644 --- a/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts +++ b/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts @@ -26,13 +26,19 @@ interface UseGetOracleCurrenciesResult { data: Array | undefined; } -const useGetOracleCurrencies = (): UseGetOracleCurrenciesResult => { +type UseGetOracleCurrenciesProps = { + enabled?: boolean; +}; + +const useGetOracleCurrencies = ({ + enabled = true +}: UseGetOracleCurrenciesProps | undefined = {}): UseGetOracleCurrenciesResult => { const { getCurrencyFromIdPrimitive, isLoading: isLoadingCurrencies } = useGetCurrencies(true); const { data } = useQuery({ queryKey: 'getOracleCurrencies', queryFn: getOracleCurrencies(getCurrencyFromIdPrimitive), - enabled: !isLoadingCurrencies + enabled: enabled && !isLoadingCurrencies }); return { data }; diff --git a/src/utils/hooks/api/use-get-currencies.tsx b/src/utils/hooks/api/use-get-currencies.tsx index 8d7c5c5d44..c3b6af3f7b 100644 --- a/src/utils/hooks/api/use-get-currencies.tsx +++ b/src/utils/hooks/api/use-get-currencies.tsx @@ -5,8 +5,6 @@ import { useQuery, UseQueryResult } from 'react-query'; import { CurrencySquidFormat } from '@/types/currency'; import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; -import { FeatureFlags, useFeatureFlag } from '../use-feature-flag'; - type UseGetCurrenciesResult = UseQueryResult> & { getCurrencyFromTicker: (ticker: string) => CurrencyExt; getForeignCurrencyFromId: (id: number) => CurrencyExt; @@ -14,23 +12,20 @@ type UseGetCurrenciesResult = UseQueryResult> & { getCurrencyFromSquidFormat: (currencySquidFormat: CurrencySquidFormat) => CurrencyExt; }; -const getCurrencies = async (featureFlags: { lending: boolean; amm: boolean }): Promise> => { +const getCurrencies = async (): Promise> => { const [foreignCurrencies, lendCurrencies, lpTokens] = await Promise.all([ window.bridge.assetRegistry.getForeignAssets(), - featureFlags.lending ? window.bridge.loans.getLendTokens() : [], - featureFlags.amm ? window.bridge.amm.getLpTokens() : [] + window.bridge.loans.getLendTokens(), + window.bridge.amm.getLpTokens() ]); return [...NATIVE_CURRENCIES, ...foreignCurrencies, ...lendCurrencies, ...lpTokens]; }; // Returns all currencies, both native and foreign and helping utils to get CurrencyExt object. const useGetCurrencies = (bridgeLoaded: boolean): UseGetCurrenciesResult => { - const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); - const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM); - const queryResult = useQuery({ queryKey: 'getCurrencies', - queryFn: () => getCurrencies({ lending: isLendingEnabled, amm: isAMMEnabled }), + queryFn: () => getCurrencies(), enabled: bridgeLoaded }); diff --git a/src/utils/hooks/api/use-get-dex-volume.tsx b/src/utils/hooks/api/use-get-dex-volume.tsx index 2fd70e48b6..82ce60870b 100644 --- a/src/utils/hooks/api/use-get-dex-volume.tsx +++ b/src/utils/hooks/api/use-get-dex-volume.tsx @@ -3,6 +3,7 @@ import { MonetaryAmount } from '@interlay/monetary-js'; import { subDays } from 'date-fns'; import { gql, GraphQLClient } from 'graphql-request'; import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; import { useQuery, UseQueryResult } from 'react-query'; import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils'; @@ -48,8 +49,8 @@ const GET_DEX_VOLUMES = gql` query poolVolumes($start: DateTime, $end: DateTime) { startVolumes: cumulativeDexTradingVolumes( limit: 1 - orderBy: tillTimestamp_DESC - where: { tillTimestamp_lte: $start } + orderBy: tillTimestamp_ASC + where: { tillTimestamp_gte: $start } ) { tillTimestamp amounts { @@ -154,6 +155,8 @@ const useGetDexVolumes = (range: DateRangeVolume): UseGetCurrenciesResult => { [getDexVolumeByTicker] ); + useErrorHandler(queryResult.error); + return { ...queryResult, getDexTotalVolumeUSD, getDexVolumeByTicker }; }; diff --git a/src/utils/hooks/api/use-get-pools-trading-apr.tsx b/src/utils/hooks/api/use-get-pools-trading-apr.tsx index d985298e35..ba73ace329 100644 --- a/src/utils/hooks/api/use-get-pools-trading-apr.tsx +++ b/src/utils/hooks/api/use-get-pools-trading-apr.tsx @@ -14,9 +14,9 @@ import { useQuery } from 'react-query'; import { convertMonetaryAmountToBigUSD } from '@/common/utils/utils'; import { SQUID_URL } from '@/constants'; -import { calculateTotalLiquidityUSD } from '@/pages/AMM/shared/utils'; import { CurrencySquidFormat } from '@/types/currency'; import { MILLISECONDS_PER_DAY } from '@/utils/constants/date-time'; +import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; import { getTokenPrice } from '@/utils/helpers/prices'; import { useGetLiquidityPools } from './amm/use-get-liquidity-pools'; diff --git a/src/utils/hooks/api/use-get-prices.tsx b/src/utils/hooks/api/use-get-prices.tsx index 6526f96a65..8cacd07989 100644 --- a/src/utils/hooks/api/use-get-prices.tsx +++ b/src/utils/hooks/api/use-get-prices.tsx @@ -9,7 +9,6 @@ import { StoreType } from '@/common/types/util.types'; import { PRICES_API, REFETCH_INTERVAL } from '@/utils/constants/api'; import { COINGECKO_ID_BY_CURRENCY_TICKER } from '@/utils/constants/currency'; -import { FeatureFlags, useFeatureFlag } from '../use-feature-flag'; import { useGetCurrencies } from './use-get-currencies'; // MEMO: Returns `undefined` for currencies without coingecko ID. @@ -72,10 +71,7 @@ const getPricesByTicker = (currencies: CurrencyExt[], prices: Prices, lendTokenP return { ...acc, [currency.ticker]: prices[coingeckoId] }; }, {}); -const getPrices = async ( - currencies: CurrencyExt[] | undefined, - isLendingEnabled: boolean -): Promise => { +const getPrices = async (currencies: CurrencyExt[] | undefined): Promise => { if (!currencies) { return; } @@ -86,7 +82,7 @@ const getPrices = async ( const [pricesByCoingeckoId, lendTokenPrices] = await Promise.all([ fetchPricesFromCoingecko(endpoint), - isLendingEnabled ? window.bridge.loans.getLendTokenExchangeRates() : {} + window.bridge.loans.getLendTokenExchangeRates() ]); return getPricesByTicker(allCurrencies, pricesByCoingeckoId, lendTokenPrices); @@ -104,17 +100,12 @@ type Prices = { const useGetPrices = (): Prices | undefined => { const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { data: currencies, isSuccess: isGetCurrenciesSuccess } = useGetCurrencies(bridgeLoaded); - const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING); // TODO: error prone because the key computation is not complete - const { data, error } = useQuery( - ['prices'], - () => getPrices(currencies, isLendingEnabled), - { - enabled: isGetCurrenciesSuccess, - refetchInterval: REFETCH_INTERVAL.MINUTE - } - ); + const { data, error } = useQuery(['prices'], () => getPrices(currencies), { + enabled: isGetCurrenciesSuccess, + refetchInterval: REFETCH_INTERVAL.MINUTE + }); useEffect(() => { if (!error) return; diff --git a/src/utils/hooks/api/vaults/get-vault-data.ts b/src/utils/hooks/api/vaults/get-vault-data.ts index fa3f980a3a..57375cc562 100644 --- a/src/utils/hooks/api/vaults/get-vault-data.ts +++ b/src/utils/hooks/api/vaults/get-vault-data.ts @@ -67,12 +67,13 @@ interface VaultData { }; } +// note: returns percentage, so range is 0-100 const getRemainingCapacity = (issuableTokens: Big, vaultExt: VaultExt): number => { if (!issuableTokens.gt(0)) return 0; const backedTokens = vaultExt.getBackedTokens().toBig(); - if (!backedTokens.gt(0)) return 1; + if (!backedTokens.gt(0)) return 100; const totalTokens = issuableTokens.add(backedTokens); @@ -153,7 +154,7 @@ const getVaultData = async (vault: VaultExt, accountId: AccountId, prices: Price }, body: JSON.stringify({ query: redeemCountQuery( - `vault: {accountId_eq: "${formattedAccountId}", collateralToken: {${collateralTokenCondition}}}, status_eq: Pending` // TODO: add asset_eq, see comment above + `vault: {accountId_eq: "${formattedAccountId}", collateralToken: {${collateralTokenCondition}}}, status_eq: Pending` ) }) }); diff --git a/src/utils/hooks/transaction/extrinsics/extrinsics.ts b/src/utils/hooks/transaction/extrinsics/extrinsics.ts index cf63d868c9..6f561bd2fd 100644 --- a/src/utils/hooks/transaction/extrinsics/extrinsics.ts +++ b/src/utils/hooks/transaction/extrinsics/extrinsics.ts @@ -1,7 +1,7 @@ import { ExtrinsicData } from '@interlay/interbtc-api'; import { ExtrinsicStatus } from '@polkadot/types/interfaces'; -import { Transaction, TransactionActions } from '../types'; +import { Actions, Transaction } from '../types'; import { getLibExtrinsic } from './lib'; import { getXCMExtrinsic } from './xcm'; @@ -12,11 +12,11 @@ import { getXCMExtrinsic } from './xcm'; * in the types folder. In case you are adding a new type to the loans modules, go * to types/loans and add your new transaction as an action. This actions needs to also be added to the * types/index TransactionActions type. After that, you should be able to add it to the function. - * @param {TransactionActions} params contains the type of transaction and + * @param {Actions} params contains the type of transaction and * the related args to call the mapped lib call * @return {Promise} every transaction return an extrinsic */ -const getExtrinsic = async (params: TransactionActions): Promise => { +const getExtrinsic = async (params: Actions): Promise => { switch (params.type) { case Transaction.XCM_TRANSFER: return getXCMExtrinsic(params); diff --git a/src/utils/hooks/transaction/extrinsics/xcm.ts b/src/utils/hooks/transaction/extrinsics/xcm.ts index 785369df31..4f6d45c750 100644 --- a/src/utils/hooks/transaction/extrinsics/xcm.ts +++ b/src/utils/hooks/transaction/extrinsics/xcm.ts @@ -14,7 +14,7 @@ const getXCMExtrinsic = async (params: XCMActions): Promise => { const transferAmountDecimals = transferAmount.currency.decimals; const tx = adapter.createTx({ amount: FixedPointNumber.fromInner(transferAmountString, transferAmountDecimals), - to: toChain, + to: toChain.id, token: transferAmount.currency.ticker, address } as CrossChainTransferParams); diff --git a/src/utils/hooks/transaction/hooks/use-fee-estimate.ts b/src/utils/hooks/transaction/hooks/use-fee-estimate.ts new file mode 100644 index 0000000000..09878b5a01 --- /dev/null +++ b/src/utils/hooks/transaction/hooks/use-fee-estimate.ts @@ -0,0 +1,204 @@ +import { CurrencyExt, isCurrencyEqual } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { Key, useCallback, useRef, useState } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { MutationFunction, useMutation, UseMutationOptions, UseMutationResult } from 'react-query'; +import { useSelector } from 'react-redux'; +import { useInterval } from 'react-use'; + +import { StoreType } from '@/common/types/util.types'; +import { SelectProps } from '@/component-library'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +import { useGetLiquidityPools } from '../../api/amm/use-get-liquidity-pools'; +import { useGetBalances } from '../../api/tokens/use-get-balances'; +import { useGetCurrencies } from '../../api/use-get-currencies'; +import { Actions, Transaction, TransactionArgs } from '../types'; +import { estimateTransactionFee, getActionAmount } from '../utils/fee'; +import { getActionData } from '../utils/params'; + +// we are deducting the fee from the action amount when the user applies max, +// so we only need to check if the balance can atleast cover for the fee amount. +const isFeeValid = ( + amount: MonetaryAmount, + balance?: MonetaryAmount, + actionAmount?: MonetaryAmount +): boolean => { + if (!balance) { + return true; + } + + // when there isn't action amount involved, we check for greater or equal + if (!actionAmount) { + return balance.gte(amount); + } + + const isActionAmountInvalid = actionAmount.gt(balance); + + // when action amount (i.e transfer amount) is invalid, it is not necessary to show invalid fee error + if (isActionAmountInvalid) { + return true; + } + + // when there is action amount involved, the balance needs to be greater than + // the fee amount, because there needs to be a minimum amount in action amount + return balance.gt(amount); +}; + +type EstimateFeeVariables = { params: Actions; currency: CurrencyExt }; + +type FeeEstimateResult = { + amount: MonetaryAmount; + isEqualToActionCurrency: boolean; + isValid: boolean; +}; + +type EstimateArgs = { + estimate(...args: TransactionArgs): void; + estimateAsync(...args: TransactionArgs): Promise; +}; + +type EstimateTypeArgs = { + estimate(type: D, ...args: TransactionArgs): void; + estimateAsync(type: D, ...args: TransactionArgs): Promise; +}; + +type EstimateFunctions = EstimateArgs | EstimateTypeArgs; + +type ReactQueryUseFeeEstimateResult = Omit< + UseMutationResult, + 'mutate' | 'mutateAsync' +>; + +type UseFeeEstimateResult = { + defaultCurrency: CurrencyExt; + currency: CurrencyExt; + selectProps: Pick; + isEqualFeeCurrency: (currency: CurrencyExt) => boolean; +} & ReactQueryUseFeeEstimateResult & + EstimateFunctions; + +type FeeEstimateOptions = Omit< + UseMutationOptions, + 'mutationFn' +>; + +const defaultFeeCurrency = GOVERNANCE_TOKEN; + +function useFeeEstimate(type?: T, options?: FeeEstimateOptions): UseFeeEstimateResult { + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); + const { data: pools } = useGetLiquidityPools(); + const { getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded); + const { getBalance } = useGetBalances(); + + const [feeCurrency, setFeeCurrency] = useState(defaultFeeCurrency); + + const feeResultRef = useRef(); + const estimateFeeVariablesRef = useRef(); + + const mutateFee: MutationFunction = useCallback( + async ({ params, currency }) => { + const amount = await estimateTransactionFee(currency, pools || [], params); + + const feeBalance = getBalance(currency.ticker)?.transferable; + + const actionAmount = getActionAmount(params, amount.currency); + + const isValid = isFeeValid(amount, feeBalance, actionAmount); + + return { + amount, + isEqualToActionCurrency: !!actionAmount, + isValid + }; + }, + [getBalance, pools] + ); + + const { data, mutate, mutateAsync, ...feeMutation } = useMutation( + mutateFee, + mergeProps(options || {}, { + onSuccess: (data: FeeEstimateResult) => { + feeResultRef.current = data; + } + }) + ); + + useErrorHandler(feeMutation.error); + + const handleEstimateFee = useCallback( + (...args: Parameters['estimate']>) => { + const params = getActionData(args, type); + + const variables = { params, currency: feeCurrency }; + + estimateFeeVariablesRef.current = variables; + + mutate(variables); + }, + [type, feeCurrency, mutate] + ); + + const handleEstimateFeeAsync = useCallback( + (...args: Parameters['estimate']>) => { + const params = getActionData(args, type); + + const variables = { params, currency: feeCurrency }; + + estimateFeeVariablesRef.current = variables; + + return mutateAsync(variables); + }, + [type, feeCurrency, mutateAsync] + ); + + // Re-estimate fee based on latest stored variables + useInterval(() => { + if (!estimateFeeVariablesRef.current || feeMutation.isLoading) return; + mutate(estimateFeeVariablesRef.current); + }, REFETCH_INTERVAL.MINUTE); + + const handleFeeSelectionChange = useCallback( + (ticker: Key) => { + const currency = getCurrencyFromTicker(ticker as string); + + setFeeCurrency(currency); + + const { params } = estimateFeeVariablesRef.current || {}; + + if (!params) return; + + const variables = { params, currency }; + + estimateFeeVariablesRef.current = variables; + + mutate(variables); + }, + [getCurrencyFromTicker, mutate] + ); + + const isEqualFeeCurrency = useCallback((currency: CurrencyExt) => isCurrencyEqual(currency, feeCurrency), [ + feeCurrency + ]); + + const result = data || feeResultRef.current; + + return { + ...feeMutation, + data: result, + defaultCurrency: defaultFeeCurrency, + currency: feeCurrency, + estimate: handleEstimateFee, + estimateAsync: handleEstimateFeeAsync, + isEqualFeeCurrency, + selectProps: { + value: feeCurrency.ticker, + onSelectionChange: handleFeeSelectionChange + } + }; +} + +export { useFeeEstimate }; +export type { EstimateArgs, EstimateTypeArgs, FeeEstimateResult, UseFeeEstimateResult }; diff --git a/src/utils/hooks/transaction/use-transaction-notifications.tsx b/src/utils/hooks/transaction/hooks/use-transaction-notifications.tsx similarity index 96% rename from src/utils/hooks/transaction/use-transaction-notifications.tsx rename to src/utils/hooks/transaction/hooks/use-transaction-notifications.tsx index 0d7dd5984d..bc9be1e86b 100644 --- a/src/utils/hooks/transaction/use-transaction-notifications.tsx +++ b/src/utils/hooks/transaction/hooks/use-transaction-notifications.tsx @@ -7,9 +7,9 @@ import { TransactionModalData } from '@/common/types/util.types'; import { EXTERNAL_PAGES, EXTERNAL_URL_PARAMETERS } from '@/utils/constants/links'; import { NotificationToastAction, NotificationToastType, useNotifications } from '@/utils/context/Notifications'; -import { TransactionActions, TransactionStatus } from './types'; +import { TransactionActions, TransactionStatus } from '../types'; +import { getTransactionDescription } from '../utils/description'; import { TransactionResult } from './use-transaction'; -import { getTransactionDescription } from './utils/description'; type TransactionNotificationsOptions = { showSuccessModal?: boolean; diff --git a/src/utils/hooks/transaction/hooks/use-transaction.ts b/src/utils/hooks/transaction/hooks/use-transaction.ts new file mode 100644 index 0000000000..f10faa62c5 --- /dev/null +++ b/src/utils/hooks/transaction/hooks/use-transaction.ts @@ -0,0 +1,150 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { useCallback } from 'react'; +import { MutationFunction, useMutation } from 'react-query'; + +import { useSubstrate } from '@/lib/substrate'; + +import { useGetLiquidityPools } from '../../api/amm/use-get-liquidity-pools'; +import { useGetBalances } from '../../api/tokens/use-get-balances'; +import { getExtrinsic, getStatus } from '../extrinsics'; +import { Transaction, TransactionActions } from '../types'; +import { + TransactionResult, + UseTransactionOptions, + UseTransactionOptionsWithoutType, + UseTransactionOptionsWithType, + UseTransactionResult, + UseTransactionWithoutType, + UseTransactionWithType +} from '../types/hook'; +import { wrapWithTxFeeSwap } from '../utils/fee'; +import { getActionData, getAmountWithFeeDeducted } from '../utils/params'; +import { submitTransaction } from '../utils/submit'; +import { FeeEstimateResult, useFeeEstimate } from './use-fee-estimate'; +import { useTransactionNotifications } from './use-transaction-notifications'; + +// The three declared functions are use to infer types on diferent implementations +function useTransaction( + type: T, + options?: UseTransactionOptionsWithType +): UseTransactionWithType; +function useTransaction( + options?: UseTransactionOptionsWithoutType +): UseTransactionWithoutType; +function useTransaction( + typeOrOptions?: T | UseTransactionOptions, + options?: UseTransactionOptions +): UseTransactionResult { + const { state } = useSubstrate(); + const { data: pools } = useGetLiquidityPools(); + const { getAvailableBalance } = useGetBalances(); + + const { showSuccessModal, customStatus, onFeeChange, ...mutateOptions } = + (typeof typeOrOptions === 'string' ? options : typeOrOptions) || {}; + + const { data: feeData, ...feeEstimate } = useFeeEstimate( + typeof typeOrOptions === 'string' ? typeOrOptions : undefined, + { onSuccess: onFeeChange } + ); + + const notifications = useTransactionNotifications({ showSuccessModal }); + + const { onSigning, ...optionsProp } = mergeProps( + mutateOptions, + { + onError: (error: Error) => console.error(error.message), + onSuccess: () => feeEstimate.reset() + }, + notifications.mutationProps + ); + + const mutateTransaction: MutationFunction = useCallback( + async (params) => { + const expectedStatus = params.customStatus || getStatus(params.type); + const baseExtrinsic = await getExtrinsic(params); + const feeWrappedExtrinsic = wrapWithTxFeeSwap(feeData?.amount, baseExtrinsic, pools); + + const events = { + onReady: () => onSigning(params) + }; + + return submitTransaction(window.bridge.api, params.accountAddress, feeWrappedExtrinsic, expectedStatus, events); + }, + [feeData?.amount, onSigning, pools] + ); + + const { mutate, mutateAsync, ...transactionMutation } = useMutation(mutateTransaction, optionsProp); + + const getBaseParams = useCallback( + async (...args: Parameters['execute']>): Promise => { + const params = getActionData(args, typeOrOptions); + + return { + ...params, + customStatus, + timestamp: new Date().getTime(), + // Execution should only ran when authenticated + accountAddress: state.selectedAccount?.address as string + }; + }, + [typeOrOptions, customStatus, state.selectedAccount?.address] + ); + + const handleExecute = useCallback( + async (...args: Parameters['execute']>) => { + const params = await getBaseParams(...args); + + return mutate(params); + }, + [getBaseParams, mutate] + ); + + const handleExecuteAsync = useCallback( + async (...args: Parameters['executeAsync']>) => { + const params = await getBaseParams(...args); + + return mutateAsync(params); + }, + [getBaseParams, mutateAsync] + ); + + const handleReject = (error?: Error) => { + notifications.onReject(error); + + if (error) { + console.error(error.message); + } + }; + + const calculateAmountWithFeeDeducted = useCallback( + (amount: MonetaryAmount, fee?: FeeEstimateResult) => { + const feeResult = fee || feeData; + + const balance = feeResult && getAvailableBalance(feeResult.amount.currency.ticker); + + if (!feeResult || !balance) { + return amount; + } + + return getAmountWithFeeDeducted(amount, feeResult.amount, balance); + }, + [feeData, getAvailableBalance] + ); + + return { + ...transactionMutation, + reject: handleReject, + execute: handleExecute, + executeAsync: handleExecuteAsync, + calculateAmountWithFeeDeducted, + fee: { + ...feeEstimate, + data: feeData + } + }; +} + +export { useTransaction }; +export type { TransactionResult, UseTransactionOptions, UseTransactionResult }; diff --git a/src/utils/hooks/transaction/index.ts b/src/utils/hooks/transaction/index.ts index 3a845f06ae..749c3724a2 100644 --- a/src/utils/hooks/transaction/index.ts +++ b/src/utils/hooks/transaction/index.ts @@ -1,2 +1,3 @@ +export type { FeeEstimateResult } from './hooks/use-fee-estimate'; +export { useTransaction } from './hooks/use-transaction'; export { Transaction } from './types'; -export { useTransaction } from './use-transaction'; diff --git a/src/utils/hooks/transaction/types/amm.ts b/src/utils/hooks/transaction/types/amm.ts index 7b6cc56af9..96d5482ed8 100644 --- a/src/utils/hooks/transaction/types/amm.ts +++ b/src/utils/hooks/transaction/types/amm.ts @@ -1,24 +1,23 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface SwapAction extends TransactionAction { +interface SwapAction { type: Transaction.AMM_SWAP; args: Parameters; } -interface PoolAddLiquidityAction extends TransactionAction { +interface PoolAddLiquidityAction { type: Transaction.AMM_ADD_LIQUIDITY; args: Parameters; } -interface PoolRemoveLiquidityAction extends TransactionAction { +interface PoolRemoveLiquidityAction { type: Transaction.AMM_REMOVE_LIQUIDITY; args: Parameters; } -interface PoolClaimRewardsAction extends TransactionAction { +interface PoolClaimRewardsAction { type: Transaction.AMM_CLAIM_REWARDS; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/escrow.ts b/src/utils/hooks/transaction/types/escrow.ts index 7003d1f796..f64e85578b 100644 --- a/src/utils/hooks/transaction/types/escrow.ts +++ b/src/utils/hooks/transaction/types/escrow.ts @@ -1,36 +1,35 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface EscrowCreateLockAction extends TransactionAction { +interface EscrowCreateLockAction { type: Transaction.ESCROW_CREATE_LOCK; args: Parameters; } -interface EscrowInscreaseLookedTimeAndAmountAction extends TransactionAction { +interface EscrowInscreaseLookedTimeAndAmountAction { type: Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT; args: [ ...Parameters, ...Parameters ]; } -interface EscrowIncreaseLockAmountAction extends TransactionAction { +interface EscrowIncreaseLockAmountAction { type: Transaction.ESCROW_INCREASE_LOCKED_AMOUNT; args: Parameters; } -interface EscrowIncreaseLockTimeAction extends TransactionAction { +interface EscrowIncreaseLockTimeAction { type: Transaction.ESCROW_INCREASE_LOCKED_TIME; args: Parameters; } -interface EscrowWithdrawRewardsAction extends TransactionAction { +interface EscrowWithdrawRewardsAction { type: Transaction.ESCROW_WITHDRAW_REWARDS; args: Parameters; } -interface EscrowWithdrawAction extends TransactionAction { +interface EscrowWithdrawAction { type: Transaction.ESCROW_WITHDRAW; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/hook.ts b/src/utils/hooks/transaction/types/hook.ts index 3ee83e942a..06552e5cce 100644 --- a/src/utils/hooks/transaction/types/hook.ts +++ b/src/utils/hooks/transaction/types/hook.ts @@ -4,13 +4,9 @@ import { ExtrinsicStatus } from '@polkadot/types/interfaces'; import { ISubmittableResult } from '@polkadot/types/types'; import { UseMutationOptions, UseMutationResult } from 'react-query'; +import { EstimateArgs, EstimateTypeArgs, FeeEstimateResult, UseFeeEstimateResult } from '../hooks/use-fee-estimate'; import { Transaction, TransactionActions, TransactionArgs } from '.'; -type FeeEstimateResult = { - amount?: MonetaryAmount; - isValid?: boolean; -}; - type TransactionResult = { status: 'success' | 'error'; data: ISubmittableResult; error?: Error }; type ExecuteArgs = { @@ -27,35 +23,6 @@ type ExecuteTypeArgs = { type ExecuteFunctions = ExecuteArgs | ExecuteTypeArgs; -type EstimateArgs = { - estimate(...args: TransactionArgs): void; - setCurrency(ticker?: string): { estimate(...args: TransactionArgs): void }; -}; - -type EstimateTypeArgs = { - estimate(type: D, ...args: TransactionArgs): void; - setCurrency(ticker?: string): { estimate(type: D, ...args: TransactionArgs): void }; -}; - -type EstimateFunctions = EstimateArgs | EstimateTypeArgs; - -type EstimateFeeParams = { ticker: string; params: TransactionActions }; - -type ReactQueryUseFeeEstimateResult = Omit< - UseMutationResult, - 'mutate' | 'mutateAsync' ->; - -type UseFeeEstimateResult = { - defaultCurrency: CurrencyExt; - detailsProps: { - defaultCurrency: CurrencyExt; - amount?: MonetaryAmount; - showInsufficientBalance?: boolean; - }; -} & ReactQueryUseFeeEstimateResult & - EstimateFunctions; - type ReactQueryUseTransactionResult = Omit< UseMutationResult, 'mutate' | 'mutateAsync' @@ -63,20 +30,39 @@ type ReactQueryUseTransactionResult = Omit< type UseTransactionResult = { reject: (error?: Error) => void; - isSigned: boolean; fee: UseFeeEstimateResult; + calculateAmountWithFeeDeducted: ( + amount: MonetaryAmount, + feeData?: FeeEstimateResult + ) => MonetaryAmount; } & ReactQueryUseTransactionResult & ExecuteFunctions; -type UseTransactionOptions = Omit< - UseMutationOptions, - 'mutationFn' -> & { +type UseTransactionCommonOptions = { customStatus?: ExtrinsicStatus['type']; onSigning?: (variables: TransactionActions) => void; + onFeeChange?: (data: FeeEstimateResult) => void; showSuccessModal?: boolean; }; +type UseTransactionOptionsWithType = Omit< + UseMutationOptions, + 'mutationFn' +> & + UseTransactionCommonOptions; + +type UseTransactionOptionsWithoutType = Omit< + UseMutationOptions, + 'mutationFn' +> & + UseTransactionCommonOptions; + +type UseTransactionOptions = Omit< + UseMutationOptions, + 'mutationFn' +> & + UseTransactionCommonOptions; + type UseTransactionWithType = Omit< Exclude, ExecuteTypeArgs>, 'fee' @@ -93,16 +79,15 @@ type UseTransactionWithoutType = Omit< export type { EstimateArgs, - EstimateFeeParams, - EstimateFunctions, EstimateTypeArgs, ExecuteArgs, ExecuteFunctions, ExecuteTypeArgs, - FeeEstimateResult, TransactionResult, UseFeeEstimateResult, UseTransactionOptions, + UseTransactionOptionsWithoutType, + UseTransactionOptionsWithType, UseTransactionResult, UseTransactionWithoutType, UseTransactionWithType diff --git a/src/utils/hooks/transaction/types/index.ts b/src/utils/hooks/transaction/types/index.ts index bad9729c68..8fdd1f9bf3 100644 --- a/src/utils/hooks/transaction/types/index.ts +++ b/src/utils/hooks/transaction/types/index.ts @@ -66,7 +66,6 @@ type TransactionEvents = { interface TransactionAction { accountAddress: string; - events?: TransactionEvents; timestamp: number; customStatus?: ExtrinsicStatus['type']; } @@ -83,7 +82,9 @@ type LibActions = | RewardsActions | VestingActions; -type TransactionActions = XCMActions | LibActions; +type Actions = XCMActions | LibActions; + +type TransactionActions = Actions & TransactionAction; type TransactionArgs = Extract['args']; @@ -95,4 +96,12 @@ enum TransactionStatus { } export { Transaction, TransactionStatus }; -export type { LibActions, TransactionAction, TransactionActions, TransactionArgs, TransactionEvents, XCMActions }; +export type { + Actions, + LibActions, + TransactionAction, + TransactionActions, + TransactionArgs, + TransactionEvents, + XCMActions +}; diff --git a/src/utils/hooks/transaction/types/issue.ts b/src/utils/hooks/transaction/types/issue.ts index dfa3b9d5a3..5953875fcb 100644 --- a/src/utils/hooks/transaction/types/issue.ts +++ b/src/utils/hooks/transaction/types/issue.ts @@ -1,14 +1,13 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface IssueRequestAction extends TransactionAction { +interface IssueRequestAction { type: Transaction.ISSUE_REQUEST; args: Parameters; } -interface IssueExecuteAction extends TransactionAction { +interface IssueExecuteAction { type: Transaction.ISSUE_EXECUTE; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/loans.ts b/src/utils/hooks/transaction/types/loans.ts index e6d33723e0..e7d96b1ebb 100644 --- a/src/utils/hooks/transaction/types/loans.ts +++ b/src/utils/hooks/transaction/types/loans.ts @@ -2,51 +2,50 @@ import { CurrencyExt, InterBtcApi } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface LoansClaimRewardsAction extends TransactionAction { +interface LoansClaimRewardsAction { type: Transaction.LOANS_CLAIM_REWARDS; args: Parameters; } -interface LoansEnabledCollateralAction extends TransactionAction { +interface LoansEnabledCollateralAction { type: Transaction.LOANS_ENABLE_COLLATERAL; args: Parameters; } -interface LoansDisabledCollateralAction extends TransactionAction { +interface LoansDisabledCollateralAction { type: Transaction.LOANS_DISABLE_COLLATERAL; args: Parameters; } -interface LoansLendAction extends TransactionAction { +interface LoansLendAction { type: Transaction.LOANS_LEND; args: Parameters; } -interface LoansWithdrawAction extends TransactionAction { +interface LoansWithdrawAction { type: Transaction.LOANS_WITHDRAW; args: Parameters; } -interface LoansWithdrawAllAction extends TransactionAction { +interface LoansWithdrawAllAction { type: Transaction.LOANS_WITHDRAW_ALL; args: Parameters; } -interface LoansBorrowAction extends TransactionAction { +interface LoansBorrowAction { type: Transaction.LOANS_BORROW; args: Parameters; } -interface LoansRepayAction extends TransactionAction { +interface LoansRepayAction { type: Transaction.LOANS_REPAY; args: Parameters; } type CustomLoansRepayAllArgs = [calculatedLimit: MonetaryAmount]; -interface LoansRepayAllAction extends TransactionAction { +interface LoansRepayAllAction { type: Transaction.LOANS_REPAY_ALL; args: [...Parameters, ...CustomLoansRepayAllArgs]; } diff --git a/src/utils/hooks/transaction/types/redeem.ts b/src/utils/hooks/transaction/types/redeem.ts index 1282278693..24a77a9e13 100644 --- a/src/utils/hooks/transaction/types/redeem.ts +++ b/src/utils/hooks/transaction/types/redeem.ts @@ -1,19 +1,18 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface RedeemCancelAction extends TransactionAction { +interface RedeemCancelAction { type: Transaction.REDEEM_CANCEL; args: Parameters; } -interface RedeemBurnAction extends TransactionAction { +interface RedeemBurnAction { type: Transaction.REDEEM_BURN; args: Parameters; } -interface RedeemRequestAction extends TransactionAction { +interface RedeemRequestAction { type: Transaction.REDEEM_REQUEST; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/replace.ts b/src/utils/hooks/transaction/types/replace.ts index 4fab08e0e7..6dd5469cc0 100644 --- a/src/utils/hooks/transaction/types/replace.ts +++ b/src/utils/hooks/transaction/types/replace.ts @@ -1,9 +1,8 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface ReplaceRequestAction extends TransactionAction { +interface ReplaceRequestAction { type: Transaction.REPLACE_REQUEST; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/rewards.ts b/src/utils/hooks/transaction/types/rewards.ts index f77f61f7c4..2b8ccf077a 100644 --- a/src/utils/hooks/transaction/types/rewards.ts +++ b/src/utils/hooks/transaction/types/rewards.ts @@ -1,9 +1,8 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '.'; -import { TransactionAction } from '.'; -interface RewardsWithdrawAction extends TransactionAction { +interface RewardsWithdrawAction { type: Transaction.REWARDS_WITHDRAW; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/tokens.ts b/src/utils/hooks/transaction/types/tokens.ts index a1c1e0da64..c20e5a422c 100644 --- a/src/utils/hooks/transaction/types/tokens.ts +++ b/src/utils/hooks/transaction/types/tokens.ts @@ -1,9 +1,8 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface TokensTransferAction extends TransactionAction { +interface TokensTransferAction { type: Transaction.TOKENS_TRANSFER; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/vaults.ts b/src/utils/hooks/transaction/types/vaults.ts index 1c4040fd17..9f16752ce2 100644 --- a/src/utils/hooks/transaction/types/vaults.ts +++ b/src/utils/hooks/transaction/types/vaults.ts @@ -1,19 +1,18 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '../types'; -import { TransactionAction } from '.'; -interface VaultsDepositCollateralAction extends TransactionAction { +interface VaultsDepositCollateralAction { type: Transaction.VAULTS_DEPOSIT_COLLATERAL; args: Parameters; } -interface VaultsWithdrawCollateralAction extends TransactionAction { +interface VaultsWithdrawCollateralAction { type: Transaction.VAULTS_WITHDRAW_COLLATERAL; args: Parameters; } -interface VaultsRegisterNewCollateralAction extends TransactionAction { +interface VaultsRegisterNewCollateralAction { type: Transaction.VAULTS_REGISTER_NEW_COLLATERAL; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/vesting.ts b/src/utils/hooks/transaction/types/vesting.ts index ab4ce9a00e..98f34b3c01 100644 --- a/src/utils/hooks/transaction/types/vesting.ts +++ b/src/utils/hooks/transaction/types/vesting.ts @@ -1,9 +1,8 @@ import { InterBtcApi } from '@interlay/interbtc-api'; import { Transaction } from '.'; -import { TransactionAction } from '.'; -interface VestingClaimAction extends TransactionAction { +interface VestingClaimAction { type: Transaction.VESTING_CLAIM; args: Parameters; } diff --git a/src/utils/hooks/transaction/types/xcm.ts b/src/utils/hooks/transaction/types/xcm.ts index 71b0276c11..09565ea44e 100644 --- a/src/utils/hooks/transaction/types/xcm.ts +++ b/src/utils/hooks/transaction/types/xcm.ts @@ -1,16 +1,17 @@ -import { ChainName } from '@interlay/bridge'; import { BaseCrossChainAdapter } from '@interlay/bridge/build/base-chain-adapter'; import { CurrencyExt } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { Transaction, TransactionAction } from '.'; +import { ChainData } from '@/types/chains'; -interface XCMTransferAction extends TransactionAction { +import { Transaction } from '.'; + +interface XCMTransferAction { type: Transaction.XCM_TRANSFER; args: [ adapter: BaseCrossChainAdapter, - fromChain: ChainName, - toChain: ChainName, + fromChain: ChainData, + toChain: ChainData, destinatary: string, transferAmount: MonetaryAmount ]; diff --git a/src/utils/hooks/transaction/use-transaction.ts b/src/utils/hooks/transaction/use-transaction.ts deleted file mode 100644 index a83761d337..0000000000 --- a/src/utils/hooks/transaction/use-transaction.ts +++ /dev/null @@ -1,213 +0,0 @@ -import { CurrencyExt, LiquidityPool } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { mergeProps } from '@react-aria/utils'; -import { useCallback, useRef, useState } from 'react'; -import { useErrorHandler } from 'react-error-boundary'; -import { MutationFunction, useMutation } from 'react-query'; -import { useInterval } from 'react-use'; - -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; -import { useSubstrate } from '@/lib/substrate'; -import { REFETCH_INTERVAL } from '@/utils/constants/api'; - -import { useGetLiquidityPools } from '../api/amm/use-get-liquidity-pools'; -import { useGetBalances } from '../api/tokens/use-get-balances'; -import { useGetCurrencies } from '../api/use-get-currencies'; -import { getExtrinsic, getStatus } from './extrinsics'; -import { Transaction, TransactionActions } from './types'; -import { - EstimateFeeParams, - FeeEstimateResult, - TransactionResult, - UseTransactionOptions, - UseTransactionResult, - UseTransactionWithoutType, - UseTransactionWithType -} from './types/hook'; -import { useTransactionNotifications } from './use-transaction-notifications'; -import { estimateTransactionFee, getActionAmount, wrapWithTxFeeSwap } from './utils/fee'; -import { getParams } from './utils/params'; -import { submitTransaction } from './utils/submit'; - -const defaultFeeCurrency = GOVERNANCE_TOKEN; - -const mutateTransaction: ( - feeAmount: MonetaryAmount | undefined, - pools: Array -) => MutationFunction = (feeAmount, pools) => async (params) => { - const expectedStatus = params.customStatus || getStatus(params.type); - const baseExtrinsic = await getExtrinsic(params); - const feeWrappedExtrinsic = wrapWithTxFeeSwap(feeAmount, baseExtrinsic, pools); - - return submitTransaction( - window.bridge.api, - params.accountAddress, - feeWrappedExtrinsic, - expectedStatus, - params.events - ); -}; - -// The three declared functions are use to infer types on diferent implementations -function useTransaction(type: T, options?: UseTransactionOptions): UseTransactionWithType; -function useTransaction(options?: UseTransactionOptions): UseTransactionWithoutType; -function useTransaction( - typeOrOptions?: T | UseTransactionOptions, - options?: UseTransactionOptions -): UseTransactionResult { - const { state } = useSubstrate(); - const { data: pools } = useGetLiquidityPools(); - const { getCurrencyFromTicker } = useGetCurrencies(true); - const { getBalance } = useGetBalances(); - - const [isSigned, setSigned] = useState(false); - - const { showSuccessModal, customStatus, ...mutateOptions } = - (typeof typeOrOptions === 'string' ? options : typeOrOptions) || {}; - - const mutateFee: ( - pools: Array - ) => MutationFunction = useCallback( - (pools) => async ({ ticker, params }) => { - const currency = getCurrencyFromTicker(ticker); - - const feeBalance = getBalance(currency.ticker)?.transferable; - - // returning undefined means that action amount is not based on fee currency - const actionAmount = getActionAmount(params, currency); - - const availableBalance = actionAmount ? feeBalance?.sub(actionAmount) : feeBalance; - - const amount = await estimateTransactionFee(currency, pools || [], params); - - return { - amount, - isValid: !!availableBalance && !!amount && availableBalance.gte(amount) - }; - }, - [getBalance, getCurrencyFromTicker] - ); - - const { mutate: feeMutate, ...feeMutation } = useMutation( - mutateFee(pools || []) - ); - - useErrorHandler(feeMutation.error); - - const estimateFeeParamsRef = useRef(); - - const handleEstimateFee = useCallback( - (ticker: string = defaultFeeCurrency.ticker) => ( - ...args: Parameters['fee']['estimate']> - ) => { - const params = getParams(args, typeOrOptions, customStatus); - - const variables = { ticker, params }; - - estimateFeeParamsRef.current = variables; - - feeMutate(variables); - }, - [typeOrOptions, customStatus, feeMutate] - ); - - const handleSetCurrency = (ticker?: string) => ({ estimate: handleEstimateFee(ticker) }); - - // Re-estimate fee based on latest stored variables - useInterval(() => { - if (!estimateFeeParamsRef.current || feeMutation.isLoading) return; - - feeMutate(estimateFeeParamsRef.current); - }, REFETCH_INTERVAL.MINUTE); - - const notifications = useTransactionNotifications({ showSuccessModal }); - - const { onSigning, ...optionsProp } = mergeProps( - mutateOptions, - { - onMutate: () => setSigned(false), - onSigning: () => setSigned(true), - onError: (error: Error) => console.error(error.message), - onSuccess: () => feeMutation.reset() - }, - notifications.mutationProps - ); - - const { mutate, mutateAsync, ...transactionMutation } = useMutation( - mutateTransaction(feeMutation.data?.amount, pools || []), - optionsProp - ); - - // Handles params for both type of implementations - const getBaseParams = useCallback( - (args: Parameters['execute']>) => { - const params = getParams(args, typeOrOptions, customStatus); - - // Execution should only ran when authenticated - const accountAddress = state.selectedAccount?.address; - - const variables = { - ...params, - accountAddress - } as TransactionActions; - - return { - ...variables, - events: { - onReady: () => onSigning(variables) - } - }; - }, - [onSigning, customStatus, state.selectedAccount?.address, typeOrOptions] - ); - - const handleExecute = useCallback( - (...args: Parameters['execute']>) => { - const params = getBaseParams(args); - - return mutate(params); - }, - [getBaseParams, mutate] - ); - - const handleExecuteAsync = useCallback( - (...args: Parameters['executeAsync']>) => { - const params = getBaseParams(args); - - return mutateAsync(params); - }, - [getBaseParams, mutateAsync] - ); - - const handleReject = (error?: Error) => { - notifications.onReject(error); - setSigned(false); - - if (error) { - console.error(error.message); - } - }; - - return { - ...transactionMutation, - isSigned, - reject: handleReject, - execute: handleExecute, - executeAsync: handleExecuteAsync, - fee: { - ...feeMutation, - defaultCurrency: defaultFeeCurrency, - estimate: handleEstimateFee(), - setCurrency: handleSetCurrency, - detailsProps: { - defaultCurrency: defaultFeeCurrency, - amount: feeMutation.data?.amount, - // could possible be undefined, so we want to check for that - showInsufficientBalance: feeMutation.data?.isValid === false - } - } - }; -} - -export { useTransaction }; -export type { FeeEstimateResult, TransactionResult, UseTransactionOptions, UseTransactionResult }; diff --git a/src/utils/hooks/transaction/utils/description.ts b/src/utils/hooks/transaction/utils/description.ts index f79c121332..5f49809f6e 100644 --- a/src/utils/hooks/transaction/utils/description.ts +++ b/src/utils/hooks/transaction/utils/description.ts @@ -129,7 +129,7 @@ const getTranslationArgs = ( const [destination, amount] = params.args; return { - key: isPast ? 'transaction.transfered_amount_to_address' : 'transaction.transfering_amount_to_address', + key: isPast ? 'transaction.transferred_amount_to_address' : 'transaction.transferring_amount_to_address', args: { amount: amount.toHuman(), currency: amount.currency.ticker, @@ -145,13 +145,13 @@ const getTranslationArgs = ( return { key: isPast - ? 'transaction.transfered_amount_from_chain_to_chain' - : 'transaction.transfering_amount_from_chain_to_chain', + ? 'transaction.transferred_amount_from_chain_to_chain' + : 'transaction.transferring_amount_from_chain_to_chain', args: { amount: transferAmount.toHuman(), currency: transferAmount.currency.ticker, - fromChain: fromChain.toUpperCase(), - toChain: toChain.toUpperCase() + fromChain: fromChain.display, + toChain: toChain.display } }; } diff --git a/src/utils/hooks/transaction/utils/fee.ts b/src/utils/hooks/transaction/utils/fee.ts index 2eeaaf24e2..71b2acd1a4 100644 --- a/src/utils/hooks/transaction/utils/fee.ts +++ b/src/utils/hooks/transaction/utils/fee.ts @@ -14,7 +14,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/types'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { getExtrinsic } from '../extrinsics'; -import { Transaction, TransactionActions } from '../types'; +import { Actions, Transaction } from '../types'; // 50% on top of trade to be safe (slippage, different weight) const OUTPUT_AMOUNT_SAFE_OFFSET_MULTIPLIER = 1.5; @@ -41,6 +41,8 @@ const getOptimalTradeForTxFeeSwap = ( return trade; }; +// NOTE: This function assumes that there is existing swap path between feeCurrency and +// native fee currency const getTxFeeSwapData = async ( nativeTxFee: MonetaryAmount, feeCurrency: CurrencyExt, @@ -50,9 +52,8 @@ const getTxFeeSwapData = async ( // First we construct reverse direction trade to get estimated swap path and amount const reverseDirectionTrade = window.bridge.amm.getOptimalTrade(nativeTxFee, feeCurrency, pools); if (reverseDirectionTrade === null) { - throw new Error( - `Not possible to exchange ${feeCurrency.name} for ${nativeTxFee.currency.name}: trade path not found.` - ); + // If the trade is not found it means the input amount is too small - multiply it by 10 and repeat calculation. + return getTxFeeSwapData(nativeTxFee.mul(10), feeCurrency, baseExtrinsic, pools); } // Final native token transaction fee is estimated for base extrinsic wrapped in multiTransactionPayment call. // NOTE: We assume here the reverse direction trade has similar weight. @@ -75,7 +76,7 @@ const getTxFeeSwapData = async ( const estimateTransactionFee: ( feeCurrency: CurrencyExt, pools: Array, - params: TransactionActions + params: Actions ) => Promise> = async (feeCurrency, pools, params) => { const baseExtrinsicData = await getExtrinsic(params); const baseTxFee = await window.bridge.transaction.getFeeEstimate(baseExtrinsicData.extrinsic); @@ -91,13 +92,15 @@ const estimateTransactionFee: ( pools ); - return wrappedInSwapTxFee; + // final buffer so that the user won't be led to a failing transaction + // due to not enough funds + return wrappedInSwapTxFee.mul(1.05); }; const wrapWithTxFeeSwap = ( feeAmount: MonetaryAmount | undefined, baseExtrinsicData: ExtrinsicData, - pools: Array + pools: Array = [] ): ExtrinsicData => { if (feeAmount === undefined || isCurrencyEqual(feeAmount.currency, GOVERNANCE_TOKEN)) { return baseExtrinsicData; @@ -119,58 +122,69 @@ const wrapWithTxFeeSwap = ( return { extrinsic: wrappedCall }; }; -// MEMO: if we ever need toadd QTOKENS as a possible fee -// token, we will need to handle it here for loan withdraw and -// withdrawAll -const getActionAmount = ( - params: TransactionActions, - feeCurrency: CurrencyExt -): MonetaryAmount | undefined => { - let amounts: MonetaryAmount[] | undefined; - +const getAmount = (params: Actions): MonetaryAmount[] | undefined => { switch (params.type) { case Transaction.REDEEM_REQUEST: { const [amount] = params.args; - amounts = [amount]; - break; + return [amount]; } case Transaction.TOKENS_TRANSFER: { const [, amount] = params.args; - amounts = [amount]; - break; + return [amount]; } /* START - AMM */ case Transaction.AMM_SWAP: { const [trade] = params.args; - amounts = [trade.inputAmount]; - break; + return [trade.inputAmount]; } case Transaction.AMM_ADD_LIQUIDITY: { const [pooledAmounts] = params.args; - amounts = pooledAmounts; - break; + return pooledAmounts; } case Transaction.AMM_REMOVE_LIQUIDITY: { const [amount] = params.args; - amounts = [amount]; - break; + return [amount]; } /* END - AMM */ /* START - LOANS */ case Transaction.LOANS_REPAY: case Transaction.LOANS_LEND: { const [, amount] = params.args; - amounts = [amount]; - break; + return [amount]; } case Transaction.LOANS_REPAY_ALL: { const [, calculatedLimit] = params.args; - amounts = [calculatedLimit]; - break; + return [calculatedLimit]; } /* END - LOANS */ + case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: { + const [amount] = params.args; + return [amount]; + } + // transactions that do not envolve action amount, should + // be declared here + case Transaction.ISSUE_REQUEST: + case Transaction.ISSUE_EXECUTE: + case Transaction.LOANS_BORROW: + case Transaction.LOANS_CLAIM_REWARDS: + case Transaction.LOANS_WITHDRAW: + case Transaction.LOANS_WITHDRAW_ALL: + case Transaction.LOANS_ENABLE_COLLATERAL: + case Transaction.LOANS_DISABLE_COLLATERAL: + case Transaction.AMM_CLAIM_REWARDS: + return undefined; } + // helps find transactions that are missing handling here + throw new Error(`Transaction ${params.type} is not handled in fee estimate`); +}; + +// MEMO: if we ever need toadd QTOKENS as a possible fee +// token, we will need to handle it here for loan withdraw and +// withdrawAll +const getActionAmount = (params: Actions, feeCurrency: CurrencyExt): MonetaryAmount | undefined => { + const amounts = getAmount(params); + if (!amounts) return; return amounts.find((amount) => isCurrencyEqual(amount.currency, feeCurrency)); diff --git a/src/utils/hooks/transaction/utils/form.ts b/src/utils/hooks/transaction/utils/form.ts index ccfbc58c61..c608a10998 100644 --- a/src/utils/hooks/transaction/utils/form.ts +++ b/src/utils/hooks/transaction/utils/form.ts @@ -6,6 +6,6 @@ import { UseFeeEstimateResult } from '../types/hook'; const isTransactionFormDisabled = ( form: ReturnType, fee: UseFeeEstimateResult -): boolean => isFormDisabled(form) || !(fee.data && fee.data.isValid); +): boolean => isFormDisabled(form) || fee.isLoading || !(fee.data && fee.data.isValid); export { isTransactionFormDisabled }; diff --git a/src/utils/hooks/transaction/utils/params.ts b/src/utils/hooks/transaction/utils/params.ts index 2eaaf68810..060af925b8 100644 --- a/src/utils/hooks/transaction/utils/params.ts +++ b/src/utils/hooks/transaction/utils/params.ts @@ -1,13 +1,13 @@ -import { ExtrinsicStatus } from '@polkadot/types/interfaces'; +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; -import { Transaction, TransactionActions } from '../types'; +import { Actions, Transaction } from '../types'; import { ExecuteFunctions } from '../types/hook'; -const getParams = ( +const getActionData = ( args: Parameters['execute']>, - typeOrOptions?: T | Record, - customStatus?: ExtrinsicStatus['type'] -): TransactionActions => { + typeOrOptions?: T | Record +): Actions => { let params = {}; // Assign correct params for when transaction type is declared on hook params @@ -19,11 +19,32 @@ const getParams = ( params = { type, args: restArgs }; } - return { - ...params, - timestamp: new Date().getTime(), - customStatus - } as TransactionActions; + return params as Actions; }; -export { getParams }; +const getAmountWithFeeDeducted = ( + actionAmount: MonetaryAmount, + feeAmount: MonetaryAmount, + balance: MonetaryAmount +): MonetaryAmount => { + const isMaxAmount = balance.eq(actionAmount); + + // when the action amount is the max balance, the fee + // is deducted from that action amount + if (isMaxAmount) { + return actionAmount.sub(feeAmount); + } + + // is the balance left from the action amount + const leftoverBalance = balance.sub(actionAmount); + + // if this balance is lower than the needed amount to pay + // for fees, the rest is deducted from the action amount + if (leftoverBalance.lt(feeAmount)) { + return actionAmount.sub(feeAmount.sub(leftoverBalance)); + } + + return actionAmount; +}; + +export { getActionData, getAmountWithFeeDeducted }; diff --git a/src/utils/hooks/transaction/utils/submit.ts b/src/utils/hooks/transaction/utils/submit.ts index ceb930d7db..da4984cf2b 100644 --- a/src/utils/hooks/transaction/utils/submit.ts +++ b/src/utils/hooks/transaction/utils/submit.ts @@ -5,8 +5,8 @@ import { DispatchError } from '@polkadot/types/interfaces'; import { ExtrinsicStatus } from '@polkadot/types/interfaces/author'; import { ISubmittableResult } from '@polkadot/types/types'; +import { TransactionResult } from '../hooks/use-transaction'; import { TransactionEvents } from '../types'; -import { TransactionResult } from '../use-transaction'; type HandleTransactionResult = { result: ISubmittableResult; unsubscribe: () => void }; diff --git a/src/utils/hooks/use-feature-flag.ts b/src/utils/hooks/use-feature-flag.ts index 55648733f7..4184444a2c 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/utils/hooks/use-feature-flag.ts @@ -1,18 +1,10 @@ enum FeatureFlags { - LENDING = 'lending', - AMM = 'amm', - WALLET = 'wallet', - BANXA = 'banxa', STRATEGIES = 'strategies', GEOBLOCK = 'geoblock', ONBOARDING = 'onboarding' } const featureFlags: Record = { - [FeatureFlags.LENDING]: process.env.REACT_APP_FEATURE_FLAG_LENDING, - [FeatureFlags.AMM]: process.env.REACT_APP_FEATURE_FLAG_AMM, - [FeatureFlags.WALLET]: process.env.REACT_APP_FEATURE_FLAG_WALLET, - [FeatureFlags.BANXA]: process.env.REACT_APP_FEATURE_FLAG_BANXA, [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK, [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING diff --git a/src/utils/hooks/use-local-storage.ts b/src/utils/hooks/use-local-storage.ts index 0231eae45e..512bff8496 100644 --- a/src/utils/hooks/use-local-storage.ts +++ b/src/utils/hooks/use-local-storage.ts @@ -6,7 +6,7 @@ enum LocalStorageKey { } type LocalStorageValueTypes = { - [LocalStorageKey.TC_SIGNATURES]: Record; + [LocalStorageKey.TC_SIGNATURES]: { [account: string]: { version: string; isSigned: boolean } | boolean }; [LocalStorageKey.WALLET_WELCOME_BANNER]: boolean; }; diff --git a/src/utils/hooks/use-page-query-params.tsx b/src/utils/hooks/use-page-query-params.tsx new file mode 100644 index 0000000000..4300cac740 --- /dev/null +++ b/src/utils/hooks/use-page-query-params.tsx @@ -0,0 +1,50 @@ +import { Key, useMemo } from 'react'; +import { useHistory, useLocation } from 'react-router'; +import { LinkProps } from 'react-router-dom'; + +import { TabsProps } from '@/component-library'; + +const queryString = require('query-string'); + +type UsePageQueryParamsResult = { + data: Record; + tabsProps: Pick; + getLinkProps: (page: string, query: Record) => Pick; +}; + +const usePageQueryParams = (): UsePageQueryParamsResult => { + const history = useHistory(); + const location = useLocation(); + + const data = useMemo(() => queryString.parse(location.search), [location.search]); + + const handleSelectionChange = (key: Key) => { + const queryParameters = queryString.parse(location.search); + queryParameters.tab = key; + const updatedQueryString = queryString.stringify(queryParameters); + + history.replace({ + pathname: location.pathname, + search: updatedQueryString + }); + }; + + const getLinkProps = (page: string, query: Record) => ({ + to: { + pathname: page, + search: queryString.stringify(query) + } + }); + + return { + data, + getLinkProps, + tabsProps: { + defaultSelectedKey: data.tab, + onSelectionChange: handleSelectionChange + } + }; +}; + +export { usePageQueryParams }; +export type { UsePageQueryParamsResult }; diff --git a/src/utils/hooks/use-select-currency.tsx b/src/utils/hooks/use-select-currency.tsx index 5f17455811..d7381732bd 100644 --- a/src/utils/hooks/use-select-currency.tsx +++ b/src/utils/hooks/use-select-currency.tsx @@ -46,7 +46,9 @@ const useSelectCurrency = (filter?: SelectCurrencyFilter): SelectCurrencyResult const prices = useGetPrices(); const { data: pools } = useGetLiquidityPools(); - const { data: oracleCurrencies } = useGetOracleCurrencies(); + const { data: oracleCurrencies } = useGetOracleCurrencies({ + enabled: filter === SelectCurrencyFilter.ISSUE_GRIEFING_COLLATERAL_CURRENCY + }); const filteredCurrencies = useMemo(() => { if (!currencies) { diff --git a/src/utils/hooks/use-sign-message.ts b/src/utils/hooks/use-sign-message.ts index 58c1c2fb2a..22bde0319b 100644 --- a/src/utils/hooks/use-sign-message.ts +++ b/src/utils/hooks/use-sign-message.ts @@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux'; import { showSignTermsModalAction } from '@/common/actions/general.actions'; import { TERMS_AND_CONDITIONS_LINK } from '@/config/relay-chains'; -import { SIGNER_API_URL } from '@/constants'; +import { SIGNER_API_URL, TC_VERSION } from '@/constants'; import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; import { NotificationToastType, useNotifications } from '../context/Notifications'; @@ -24,7 +24,7 @@ const postSignature = async (account: KeyringPair) => { throw new Error('Failed to sign message'); } - return fetch(`${SIGNER_API_URL}/${account.address}`, { + return fetch(`${SIGNER_API_URL}/${account.address}?${new URLSearchParams({ version: TC_VERSION })}`, { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -50,6 +50,8 @@ type UseSignMessageResult = { }; }; +const shouldCheckSignature = !!TC_VERSION; + const useSignMessage = (): UseSignMessageResult => { const { t } = useTranslation(); const queryClient = useQueryClient(); @@ -57,22 +59,28 @@ const useSignMessage = (): UseSignMessageResult => { const dispatch = useDispatch(); const [signatures, setSignatures] = useLocalStorage(LocalStorageKey.TC_SIGNATURES); + const { selectedAccount } = useSubstrateSecureState(); const setSignature = useCallback( - (address: string, hasSignature: boolean) => setSignatures({ ...signatures, [address]: hasSignature }), + (address: string, hasSignature: boolean) => + setSignatures({ ...signatures, [address]: { isSigned: hasSignature, version: TC_VERSION } }), [setSignatures, signatures] ); const getSignature = useCallback( async (account: KeyringPair): Promise => { - const storedSignature = signatures?.[account.address]; + const signatureData = signatures?.[account.address]; + + // if the stored value is boolean, we will force to fetch, so we can migrate to lastest structure + const hasStoredSignature = + typeof signatureData === 'object' ? signatureData?.version === TC_VERSION && signatureData.isSigned : undefined; - if (storedSignature !== undefined) { - return storedSignature; + if (hasStoredSignature !== undefined) { + return hasStoredSignature; } - const res = await fetch(`${SIGNER_API_URL}/${account.address}`, { + const res = await fetch(`${SIGNER_API_URL}/${account.address}?${new URLSearchParams({ version: TC_VERSION })}`, { method: 'GET', headers: { 'Content-Type': 'application/json' @@ -95,11 +103,10 @@ const useSignMessage = (): UseSignMessageResult => { refetchOnWindowFocus: false, refetchOnMount: false, refetchOnReconnect: false, - enabled: !!selectedAccount, + enabled: !!selectedAccount && shouldCheckSignature, queryFn: () => selectedAccount && getSignature(selectedAccount) }); - // TODO: add new notification const signMessageMutation = useMutation((account: KeyringPair) => postSignature(account), { onError: (_, variables) => { setSignature(variables.address, false); @@ -130,13 +137,13 @@ const useSignMessage = (): UseSignMessageResult => { const handleSignMessage = (account?: KeyringPair) => { // should not sign message if there is already a stored signature // or if signer api url is not set - if (!account || !SIGNER_API_URL || hasSignature) return; + if (!account || !SIGNER_API_URL || hasSignature || !shouldCheckSignature) return; signMessageMutation.mutate(account); }; const handleOpenSignTermModal = async (account: KeyringPair) => { - if (!SIGNER_API_URL) return; + if (!SIGNER_API_URL || !shouldCheckSignature) return; // Cancel possible ongoing unwanted account queryClient.cancelQueries({ queryKey }); @@ -152,7 +159,7 @@ const useSignMessage = (): UseSignMessageResult => { }; return { - hasSignature: !!hasSignature, + hasSignature: shouldCheckSignature ? !!hasSignature : true, modal: { buttonProps: { onPress: () => handleSignMessage(selectedAccount), loading: signMessageMutation.isLoading } }, diff --git a/vercel.json b/vercel.json index 26b9642e89..99b54b6e47 100644 --- a/vercel.json +++ b/vercel.json @@ -53,5 +53,15 @@ } ] } + ], + "redirects": [ + { + "source": "/bridge", + "destination": "/btc" + }, + { + "source": "/transfer", + "destination": "/send-and-receive" + } ] } diff --git a/yarn.lock b/yarn.lock index 6162970431..fae3fcd531 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2125,16 +2125,15 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.3.5": - version "2.3.5" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.5.tgz#d73c57e04391f9c300ca361cb9e0f2226c867b9c" - integrity sha512-sCaV+aI2oyQnP03PBBad/wqYMuZ3GlaDDrkbkr+LGshHgxwB42pvEeEehaEiXh0qsym6ZeH2FU6T++FP9PGlnQ== +"@interlay/interbtc-api@2.3.7": + version "2.3.7" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.7.tgz#26d4fa574531fe9eea3f0d49364f7476da9713cf" + integrity sha512-w9xPaUa3wTTXOb83pHbSqlE3E8V2iA4WE4IlOu23Zqth4hnG0h819WynlfzUsAPGug6RkZkHWIKnu+85V95g5A== dependencies: "@interlay/esplora-btc-api" "0.4.0" "@interlay/interbtc-types" "1.12.0" "@interlay/monetary-js" "0.7.3" "@polkadot/api" "9.14.2" - "@types/bitcoinjs-lib" "^5.0.0" big.js "6.1.1" bitcoin-core "^3.0.0" bitcoinjs-lib "^5.2.0" @@ -2571,11 +2570,6 @@ resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.2.0.tgz#a3150eeb09cc7ab207ebf6d7b9ad311a9bdbed12" integrity sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ== -"@noble/hashes@^1.2.0": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9" - integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA== - "@noble/secp256k1@1.7.1": version "1.7.1" resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c" @@ -6006,13 +6000,6 @@ resolved "https://registry.yarnpkg.com/@types/big.js/-/big.js-6.1.2.tgz#68a952b629a6aaa2b5855a2f63363d1e77f6dd91" integrity sha512-h24JIZ52rvSvi2jkpYDk2yLH99VzZoCJiSfDWwjst7TwJVuXN61XVCUlPCzRl7mxKEMsGf8z42Q+J4TZwU3z2w== -"@types/bitcoinjs-lib@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@types/bitcoinjs-lib/-/bitcoinjs-lib-5.0.0.tgz#f2905d673d1c4b42a91d64d95f1c464f1a48cb56" - integrity sha512-9zXjgmH2E8qEZ9gQ9GH+I6Cze3bweQbyXtR/X4RD3SdR5I4jdRPvmBrKmjegV3HZG03KNricjEoq+lQUtIXCKQ== - dependencies: - bitcoinjs-lib "*" - "@types/bn.js@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-5.1.1.tgz#b51e1b55920a4ca26e9285ff79936bbdec910682" @@ -7736,11 +7723,6 @@ base-x@^3.0.2: dependencies: safe-buffer "^5.0.1" -base-x@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a" - integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw== - base64-js@^1.0.2, base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" @@ -7776,11 +7758,6 @@ bech32@1.1.4, bech32@^1.1.2: resolved "https://registry.yarnpkg.com/bech32/-/bech32-1.1.4.tgz#e38c9f37bf179b8eb16ae3a772b40c356d4832e9" integrity sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ== -bech32@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/bech32/-/bech32-2.0.0.tgz#078d3686535075c8c79709f054b1b226a133b355" - integrity sha512-LcknSilhIGatDAsY1ak2I8VtGaHNhgMSYVxFrGLXv+xLHytaKZKcaUJJUE7qmBr7h33o5YQwP55pMI0xmkpJwg== - before-after-hook@^2.2.0: version "2.2.3" resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c" @@ -7850,11 +7827,6 @@ bip174@^2.0.1: resolved "https://registry.yarnpkg.com/bip174/-/bip174-2.0.1.tgz#39cf8ca99e50ce538fb762589832f4481d07c254" integrity sha512-i3X26uKJOkDTAalYAp0Er+qGMDhrbbh2o93/xiPyAN2s25KrClSpe3VXo/7mNJoqA5qfko8rLS2l3RWZgYmjKQ== -bip174@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/bip174/-/bip174-2.1.0.tgz#cd3402581feaa5116f0f00a0eaee87a5843a2d30" - integrity sha512-lkc0XyiX9E9KiVAS1ZiOqK1xfiwvf4FXDDdkDq5crcDzOq+xGytY+14qCsqz7kCiy8rpN1CRNfacRhf9G3JNSA== - bip32@^2.0.4: version "2.0.6" resolved "https://registry.yarnpkg.com/bip32/-/bip32-2.0.6.tgz#6a81d9f98c4cd57d05150c60d8f9e75121635134" @@ -7893,18 +7865,6 @@ bitcoin-ops@^1.3.0, bitcoin-ops@^1.4.0: resolved "https://registry.yarnpkg.com/bitcoin-ops/-/bitcoin-ops-1.4.1.tgz#e45de620398e22fd4ca6023de43974ff42240278" integrity sha512-pef6gxZFztEhaE9RY9HmWVmiIHqCb2OyS4HPKkpc6CIiiOa3Qmuoylxc5P2EkU3w+5eTSifI9SEZC88idAIGow== -bitcoinjs-lib@*: - version "6.1.1" - resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-6.1.1.tgz#3950c29fd96f07131e41a36a265b17ebd02b4a11" - integrity sha512-FYihfgTk29lt1eK2y48OtuarEDUnTprNBW3ctT8yHiOhvmeS3DzAVG6gI0VCvMkydz6UdlXlYNWIPqGD0SUYRQ== - dependencies: - "@noble/hashes" "^1.2.0" - bech32 "^2.0.0" - bip174 "^2.1.0" - bs58check "^3.0.1" - typeforce "^1.11.3" - varuint-bitcoin "^1.1.2" - bitcoinjs-lib@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/bitcoinjs-lib/-/bitcoinjs-lib-5.2.0.tgz#caf8b5efb04274ded1b67e0706960b93afb9d332" @@ -8157,13 +8117,6 @@ bs58@^4.0.0: dependencies: base-x "^3.0.2" -bs58@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279" - integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ== - dependencies: - base-x "^4.0.0" - bs58check@<3.0.0, bs58check@^2.0.0, bs58check@^2.1.1, bs58check@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc" @@ -8173,14 +8126,6 @@ bs58check@<3.0.0, bs58check@^2.0.0, bs58check@^2.1.1, bs58check@^2.1.2: create-hash "^1.1.0" safe-buffer "^5.1.2" -bs58check@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-3.0.1.tgz#2094d13720a28593de1cba1d8c4e48602fdd841c" - integrity sha512-hjuuJvoWEybo7Hn/0xOrczQKKEKD63WguEjlhLExYs2wUBcebDC1jDNK17eEAD2lYfw82d5ASC1d7K3SWszjaQ== - dependencies: - "@noble/hashes" "^1.2.0" - bs58 "^5.0.0" - bser@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -20678,7 +20623,7 @@ value-equal@^1.0.1: resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== -varuint-bitcoin@^1.0.4, varuint-bitcoin@^1.1.2: +varuint-bitcoin@^1.0.4: version "1.1.2" resolved "https://registry.yarnpkg.com/varuint-bitcoin/-/varuint-bitcoin-1.1.2.tgz#e76c138249d06138b480d4c5b40ef53693e24e92" integrity sha512-4EVb+w4rx+YfVM32HQX42AbbT7/1f5zwAYhIujKXKk8NQK+JfRVl3pqT3hjNn/L+RstigmGGKVwHA/P0wgITZw== From bbc1402f140a65e2da0f8db870f03f6ae9a8e60e Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 20 Jul 2023 09:53:38 +0100 Subject: [PATCH 21/58] [Release] Kintsugi 2.36.1 (#1475) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 --- package.json | 2 +- src/utils/hooks/transaction/utils/params.ts | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 06f5cf45b4..68cca2c34e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.36.0", + "version": "2.36.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/utils/hooks/transaction/utils/params.ts b/src/utils/hooks/transaction/utils/params.ts index 060af925b8..2042407c19 100644 --- a/src/utils/hooks/transaction/utils/params.ts +++ b/src/utils/hooks/transaction/utils/params.ts @@ -1,4 +1,4 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { Actions, Transaction } from '../types'; @@ -27,6 +27,23 @@ const getAmountWithFeeDeducted = ( feeAmount: MonetaryAmount, balance: MonetaryAmount ): MonetaryAmount => { + const isFeeGreaterThanActionAmount = feeAmount.gte(actionAmount); + + // since our fees are low, this would mean that the user + // is trying to deal with very small action amount + if (isFeeGreaterThanActionAmount) { + return newMonetaryAmount(0, actionAmount.currency); + } + + const isActionAmountGreaterThanBalance = actionAmount.gt(balance); + + // if the action amount is greater than the balance, the user + // should not able to conduct the transaction but amount affected by the fee should + // be return anyway (specially relevant for swap) + if (isActionAmountGreaterThanBalance) { + return actionAmount.sub(feeAmount); + } + const isMaxAmount = balance.eq(actionAmount); // when the action amount is the max balance, the fee From 05c7acb6e240448c1ae1078aba1aeab17f6f983a Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 7 Aug 2023 08:52:18 +0100 Subject: [PATCH 22/58] [release] Kintsugi 2.37.0 (#1511) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * Fix conflicts --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 --- package.json | 5 +- src/App.tsx | 225 +++----- src/assets/icons/ArrowPathRoundedSquare.tsx | 25 + src/assets/icons/PresentationChartBar.tsx | 25 + src/assets/icons/index.ts | 2 + src/assets/img/dysonsphere.svg | 2 +- src/assets/locales/en/translation.json | 77 ++- src/common/actions/general.actions.ts | 52 +- src/common/live-data/block-height-watcher.ts | 22 - src/common/live-data/live-data.ts | 22 - src/common/live-data/totals-watcher.ts | 29 - src/common/reducers/general.reducer.ts | 33 +- src/common/types/actions.types.ts | 38 +- src/common/types/util.types.ts | 16 +- src/common/utils/utils.ts | 6 +- src/component-library/Card/Card.tsx | 1 - src/component-library/Select/Select.tsx | 2 +- .../Slider/Slider.stories.tsx | 34 ++ src/component-library/Slider/Slider.style.tsx | 156 ++++++ src/component-library/Slider/Slider.tsx | 100 ++++ src/component-library/Slider/SliderMarks.tsx | 61 +++ src/component-library/Slider/SliderThumb.tsx | 61 +++ src/component-library/Slider/index.tsx | 2 + src/component-library/Text/style.tsx | 2 + src/component-library/Text/types.ts | 1 + src/component-library/Text/utils.ts | 6 +- src/component-library/index.tsx | 2 + .../theme/theme.interlay.css | 7 +- .../theme/theme.kintsugi.css | 7 +- src/component-library/theme/theme.ts | 18 + src/components/AccountSelect/AccountItem.tsx | 38 ++ src/components/AccountSelect/AccountLabel.tsx | 34 -- src/components/AccountSelect/AccountList.tsx | 58 -- .../AccountSelect/AccountListModal.tsx | 34 -- .../AccountSelect/AccountSelect.style.tsx | 54 +- .../AccountSelect/AccountSelect.tsx | 101 +--- .../ApyDetails.style.tsx} | 0 src/components/ApyDetails/ApyDetails.tsx | 10 + src/components/ApyDetails/ApyDetailsGroup.tsx | 34 ++ .../ApyDetails/ApyDetailsGroupItem.tsx | 32 ++ src/components/ApyDetails/index.tsx | 6 + src/components/AuthCTA/AuthCTA.tsx | 32 +- src/components/AuthModal/AccountStep.tsx | 2 +- src/components/AuthModal/SignTermsModal.tsx | 2 +- src/components/FundWallet/use-entities.tsx | 2 +- src/components/Geoblock/Geoblock.tsx | 2 +- .../InterlayHelmet/index.tsx | 0 .../IsAuthenticated/IsAuthenticated.tsx | 2 +- .../Layout/Layout.styles.tsx} | 4 +- src/components/Layout/Layout.tsx | 19 + src/components/Layout/index.tsx | 1 + src/components/LoanApyTooltip/AssetGroup.tsx | 30 -- .../LoanApyTooltip/BreakdownGroup.tsx | 43 -- .../LoanApyTooltip/LoanApyTooltip.tsx | 76 --- .../LoanApyTooltip/RewardsGroup.tsx | 32 -- src/components/LoanApyTooltip/index.tsx | 2 - src/components/LoanPositionsTable/ApyCell.tsx | 68 --- .../LoanPositionsTable/LoanApyCell.tsx | 107 ++++ .../LoanPositionsTable.style.tsx | 9 + .../LoanPositionsTable/LoanPositionsTable.tsx | 26 +- src/components/LoanPositionsTable/index.tsx | 2 + .../MainContainer/MainContainer.styles.tsx | 29 + .../MainContainer/MainContainer.tsx | 11 + src/components/MainContainer/index.tsx | 1 + .../NotificationToast/NotificationToast.tsx | 2 +- .../NotificationToast/TransactionToast.tsx | 2 +- .../NotificationsListItem.tsx | 2 +- src/components/PoolsTable/PoolApyCell.tsx | 63 +++ .../PoolsTable/PoolsTable.style.tsx | 9 + src/components/PoolsTable/PoolsTable.tsx | 28 +- src/components/ReceivableAssets/index.tsx | 2 +- .../TransactionFeeDetails.tsx | 6 +- .../TransactionModal/TransactionModal.tsx | 2 +- .../TransactionToast.styles.tsx | 13 - .../TransactionToast/TransactionToast.tsx | 132 ----- src/components/TransactionToast/index.tsx | 2 - .../ViewRequestDetailsLink/index.tsx | 21 - src/components/index.tsx | 7 + src/config/links.ts | 3 + .../hooks/api/amm/use-get-account-pools.tsx | 2 +- .../hooks/api/amm/use-get-liquidity-pools.tsx | 0 .../hooks/api/bridge/use-get-issue-data.tsx | 0 .../bridge/use-get-issue-request-limits.tsx | 0 .../bridge/use-get-max-burnable-tokens.tsx | 0 .../hooks/api/bridge/use-get-redeem-data.tsx | 0 .../hooks/api/bridge/use-get-vaults.tsx | 0 .../escrow/use-get-account-staking-data.tsx | 0 .../escrow/use-get-account-voting-balance.tsx | 0 .../use-get-account-lending-statistics.tsx | 32 +- .../use-get-account-positions-earnings.tsx | 96 ++++ .../api/loans/use-get-account-positions.tsx | 132 +++++ .../loans/use-get-account-subsidy-rewards.tsx | 0 .../hooks/api/loans/use-get-loan-assets.tsx | 5 +- .../loans/use-get-loan-available-amounts.tsx | 185 +++++++ .../api/oracle/use-get-oracle-currencies.ts | 0 .../hooks/api/oracle/use-get-oracle-status.ts | 0 .../api/tokens/use-balances-subscription.tsx | 2 +- .../hooks/api/tokens/use-get-balances.tsx | 4 +- .../use-get-collateral-currencies-data.tsx | 0 .../api/use-get-collateral-currencies.tsx | 0 .../hooks/api/use-get-currencies.tsx | 0 .../hooks/api/use-get-dex-volume.tsx | 0 .../hooks/api/use-get-exchange-rate.tsx | 0 .../hooks/api/use-get-identities.ts | 0 .../hooks/api/use-get-pools-trading-apr.tsx | 0 src/{utils => }/hooks/api/use-get-prices.tsx | 0 .../hooks/api/use-get-vesting-data.tsx | 0 .../hooks/api/vaults/get-vault-data.ts | 0 .../api/vaults/use-get-available-vaults.tsx | 0 .../hooks/api/vaults/use-get-vault-data.tsx | 4 +- .../api/vaults/use-get-vault-transactions.tsx | 6 +- .../hooks/api/vaults/use-get-vaults.tsx | 0 .../hooks/api/xcm/use-xcm-bridge.ts | 58 +- .../hooks/api/xcm/xcm-endpoints.ts | 0 src/{services => }/hooks/issue-requests.ts | 6 +- .../transaction/extrinsics/extrinsics.ts | 0 .../hooks/transaction/extrinsics/index.ts | 0 .../hooks/transaction/extrinsics/lib.ts | 11 + .../hooks/transaction/extrinsics/xcm.ts | 0 .../transaction/hooks/use-fee-estimate.ts | 0 .../hooks/use-transaction-notifications.tsx | 0 .../transaction/hooks/use-transaction.ts | 2 +- src/{utils => }/hooks/transaction/index.ts | 0 src/hooks/transaction/submission/dry-run.ts | 36 ++ src/hooks/transaction/submission/error.ts | 23 + .../transaction/submission}/submit.ts | 29 +- .../hooks/transaction/types/amm.ts | 2 +- .../hooks/transaction/types/escrow.ts | 2 +- .../hooks/transaction/types/hook.ts | 0 .../hooks/transaction/types/index.ts | 6 + .../hooks/transaction/types/issue.ts | 2 +- .../hooks/transaction/types/loans.ts | 2 +- .../hooks/transaction/types/redeem.ts | 2 +- .../hooks/transaction/types/replace.ts | 2 +- .../hooks/transaction/types/rewards.ts | 0 src/hooks/transaction/types/strategies.ts | 22 + .../hooks/transaction/types/tokens.ts | 2 +- .../hooks/transaction/types/vaults.ts | 2 +- .../hooks/transaction/types/vesting.ts | 0 .../hooks/transaction/types/xcm.ts | 0 .../hooks/transaction/utils/description.ts | 35 ++ .../hooks/transaction/utils/fee.ts | 6 + .../hooks/transaction/utils/form.ts | 0 .../hooks/transaction/utils/params.ts | 0 src/{utils => }/hooks/use-account-id.ts | 0 .../hooks/use-copy-to-clipboard.tsx | 0 src/{utils => }/hooks/use-copy-tooltip.tsx | 0 src/{utils => }/hooks/use-countdown.ts | 2 +- .../use-cumulative-collateral-volumes.ts | 0 .../hooks/use-current-active-block-number.ts | 0 src/{utils => }/hooks/use-feature-flag.ts | 2 +- src/{utils => }/hooks/use-geoblocking.ts | 2 +- src/{utils => }/hooks/use-interval.ts | 0 src/{utils => }/hooks/use-local-storage.ts | 0 src/{utils => }/hooks/use-mount-transition.ts | 0 .../hooks/use-page-query-params.tsx | 0 src/{utils => }/hooks/use-query-params.ts | 0 src/{utils => }/hooks/use-select-currency.tsx | 4 +- src/{utils => }/hooks/use-sign-message.ts | 4 +- .../hooks/use-stable-bitcoin-confirmations.ts | 0 .../use-stable-parachain-confirmations.ts | 0 .../hooks/use-update-query-parameters.ts | 0 src/{utils => }/hooks/use-wallet.ts | 0 src/{utils => }/hooks/use-window-focus.ts | 0 src/index.tsx | 4 +- .../Accounts/AccountSelector/index.tsx | 64 --- src/legacy-components/Accounts/index.tsx | 43 -- .../CopyToClipboardButton/index.tsx | 2 +- .../BTCPaymentPendingStatusUI/index.tsx | 2 +- .../ManualIssueExecutionUI/index.tsx | 4 +- .../ReceivedIssueRequest/index.tsx | 6 +- .../IssueUI/WhoopsStatusUI/index.tsx | 2 +- src/legacy-components/IssueUI/index.tsx | 2 +- .../PageTitle/index.tsx | 0 .../Portal/index.tsx | 0 .../DefaultRedeemRequest/index.tsx | 6 +- .../ReimbursedRedeemRequest/index.tsx | 2 +- .../RetriedRedeemRequest/index.tsx | 2 +- .../RedeemUI/ReimburseStatusUI/index.tsx | 4 +- src/legacy-components/RedeemUI/index.tsx | 2 +- .../SectionTitle/index.tsx | 0 .../Sidebar/OpenButton/index.tsx | 0 .../SidebarContent/CloseButton/index.tsx | 0 .../Navigation/SidebarNavLink/index.tsx | 0 .../SidebarContent/Navigation/index.tsx | 34 +- .../SocialMediaContainer/index.tsx | 0 .../SidebarContent/TestnetBadge/index.tsx | 0 .../Sidebar/SidebarContent/index.tsx | 0 .../Sidebar/index.tsx | 2 +- .../ThemeWrapper/index.tsx | 0 .../TimerIncrement/index.tsx | 2 +- src/legacy-components/Tokens/index.tsx | 2 +- .../index.tsx | 2 +- .../Topbar/index.tsx | 66 +-- .../VaultsSelector/VaultSelect/index.tsx | 4 +- src/lib/form/index.tsx | 1 - src/lib/form/schemas/bridge.ts | 105 ---- src/lib/form/schemas/index.ts | 2 +- src/lib/form/schemas/strategies.ts | 50 ++ src/lib/form/schemas/strategy.ts | 21 - .../index.tsx | 2 +- src/pages/Actions/Actions/Actions.tsx | 2 +- .../ManualIssueExecutionActionsTable.tsx | 2 +- src/pages/BTC/BTCOverview/BTCOverview.tsx | 12 +- .../components/IssueForm/IssueForm.tsx | 16 +- .../LegacyBurnForm/LegacyBurnForm.tsx | 20 +- .../LegacyRedeemModal/LegacyRedeemModal.tsx | 2 +- .../IssueRequestsTable/index.tsx | 8 +- .../RedeemRequestsTable/index.tsx | 12 +- .../components/RedeemForm/RedeemForm.tsx | 14 +- .../SelectVaultCard/SelectVaultCard.tsx | 2 +- .../SelectVaultCard/VaultListItem.tsx | 2 +- .../SelectVaultCard/VaultSelect.tsx | 2 +- .../TransactionDetails/TransactionDetails.tsx | 4 +- .../Dashboard/cards/BTCRelayCard/index.tsx | 18 +- .../cards/OracleStatusCard/index.tsx | 4 +- .../cards/ParachainSecurityCard/index.tsx | 42 +- src/pages/Dashboard/index.tsx | 2 +- .../sub-pages/BTCRelay/BlocksTable/index.tsx | 6 +- .../BTCRelay/BlockstreamCard/index.tsx | 8 +- .../Dashboard/sub-pages/BTCRelay/index.tsx | 4 +- .../Home/LockedCollateralsCard/index.tsx | 4 +- .../sub-pages/Home/WrappedTokenCard/index.tsx | 14 +- src/pages/Dashboard/sub-pages/Home/index.tsx | 4 +- .../IssueRequestsTable/index.tsx | 8 +- .../IssueRequests/UpperContent/index.tsx | 14 +- .../sub-pages/IssueRequests/index.tsx | 4 +- .../sub-pages/Oracles/OraclesTable/index.tsx | 2 +- .../Dashboard/sub-pages/Oracles/index.tsx | 4 +- .../Dashboard/sub-pages/Parachain/index.tsx | 4 +- .../RedeemRequestsTable/index.tsx | 12 +- .../RedeemRequests/UpperContent/index.tsx | 2 +- .../sub-pages/RedeemRequests/index.tsx | 4 +- .../Vaults/LockedCollateralCard/index.tsx | 2 +- .../sub-pages/Vaults/VaultsTable/index.tsx | 10 +- .../Dashboard/sub-pages/Vaults/index.tsx | 8 +- src/pages/EarnStrategies/EarnStrategies.tsx | 14 - src/pages/EarnStrategies/index.tsx | 3 - .../Loans/LoansOverview/LoansOverview.tsx | 10 +- .../BorrowAssetsTable/BorrowAssetsTable.tsx | 26 +- .../components/BorrowLimit/BorrowLimit.tsx | 2 +- .../CollateralModal/CollateralForm.tsx | 93 ++++ .../CollateralModal/CollateralModal.tsx | 101 +--- .../components/LTVSection/LTVSection.tsx | 4 +- .../LendAssetsTable/LendAssetsTable.tsx | 27 +- .../LoanActionInfo/RewardsGroup.tsx | 40 -- .../components/LoanDetails/LoanDetails.tsx | 2 +- .../components/LoanDetails/RewardsDetails.tsx | 2 +- .../components/LoanForm/LoanForm.tsx | 107 ++-- .../components/LoanModal/LoanModal.tsx | 3 +- .../LoansInsights/LoansInsights.tsx | 8 +- .../components/LoansTables/LendTables.tsx | 31 +- .../components/LoansTables/LoansTables.tsx | 4 +- .../hooks/use-get-account-borrow-limit.tsx | 4 +- .../Loans/LoansOverview/hooks/use-get-ltv.tsx | 12 +- .../hooks/use-loan-form-data.tsx | 100 ---- .../utils/get-max-borrowable-amount.tsx | 33 -- .../utils/get-max-lendable-amount.ts | 15 - .../utils/get-max-withdrawable-amount.tsx | 58 -- .../Loans/LoansOverview/utils/get-position.ts | 2 +- src/pages/NoMatch/index.tsx | 2 +- src/pages/Onboarding/Onboarding.tsx | 7 +- src/pages/Pools/Pools.tsx | 8 +- .../components/DepositForm/DepositForm.tsx | 10 +- .../DepositForm/DepositOutputAssets.tsx | 2 +- .../Pools/components/PoolModal/PoolModal.tsx | 2 +- .../PoolsInsights/PoolsInsights.tsx | 8 +- .../Pools/components/PoolsInsights/utils.ts | 2 +- .../components/PoolsTables/PoolsTables.tsx | 15 +- .../Pools/components/PoolsTables/utils.ts | 2 +- .../components/WithdrawForm/WithdrawForm.tsx | 10 +- .../SendAndReceiveForms.tsx | 4 +- .../components/BridgeForm/BridgeForm.tsx | 33 +- .../components/TransferForm/TransferForm.tsx | 12 +- .../Staking/ClaimRewardsButton/index.tsx | 2 +- src/pages/Staking/WithdrawButton/index.tsx | 2 +- src/pages/Staking/index.tsx | 11 +- src/pages/Strategies/Strategies.style.tsx | 24 +- src/pages/Strategies/Strategies.tsx | 57 +- .../Strategies/Strategy/Strategy.styles.tsx | 23 + src/pages/Strategies/Strategy/Strategy.tsx | 84 +++ src/pages/Strategies/Strategy/index.ts | 1 + .../StrategyCard/StrategyCard.style.tsx | 19 + .../components/StrategyCard/StrategyCard.tsx | 55 ++ .../components/StrategyCard/index.tsx | 2 + .../StrategyForm/StrategyDepositForm.tsx | 115 ++++ .../StrategyDepositForm.tsx | 66 --- .../StrategyForm/StrategyDepositForm/index.ts | 1 - .../StrategyForm/StrategyForm.style.tsx | 34 -- .../components/StrategyForm/StrategyForm.tsx | 73 +-- .../StrategyForm/StrategyFormFees.tsx | 35 -- .../StrategyForm/StrategyWithdrawalForm.tsx | 131 +++++ .../StrategyWithdrawalForm.tsx | 104 ---- .../StrategyWithdrawalForm/index.ts | 1 - .../StrategyInfographicToken.tsx | 35 ++ .../StrategyInfographics.styles.tsx | 149 ++++++ .../StrategyInfographics.tsx | 61 +++ .../StrategyInfographicsIcon.tsx | 34 ++ .../StrategyInfographicsItem.tsx | 33 ++ .../components/StrategyInfographics/index.tsx | 2 + .../StrategyInsights.styles.tsx | 13 + .../StrategyInsights/StrategyInsights.tsx | 64 +++ .../components/StrategyInsights/index.tsx | 1 + .../StrategyTag/StrategyTag.style.tsx | 12 + .../components/StrategyTag/StrategyTag.tsx | 45 ++ .../components/StrategyTag/index.tsx | 2 + src/pages/Strategies/components/index.ts | 5 + src/pages/Strategies/helpers/content.ts | 31 ++ .../Strategies/hooks/use-get-strategies.ts | 60 +++ .../use-get-strategy-available-amounts.ts | 30 ++ .../hooks/use-get-strategy-position.ts | 62 +++ src/pages/Strategies/types.ts | 16 + src/pages/Strategies/types/form.ts | 13 - src/pages/Swap/Swap.tsx | 8 +- .../Swap/components/SwapForm/SwapCTA.tsx | 6 +- .../Swap/components/SwapForm/SwapForm.tsx | 12 +- .../SwapLiquidity/SwapLiquidity.tsx | 4 +- src/pages/TX/IssueTX/index.tsx | 8 +- src/pages/TX/RedeemTX/index.tsx | 8 +- src/pages/TX/index.tsx | 8 +- .../IssueRequestModal/index.tsx | 24 - .../RedeemRequestModal/index.tsx | 29 - src/pages/Vaults/Vault/ReplaceTable/index.tsx | 2 +- .../Vaults/Vault/RequestIssueModal/index.tsx | 68 ++- .../Vaults/Vault/RequestRedeemModal/index.tsx | 2 +- .../Vault/RequestReplacementModal/index.tsx | 4 +- .../Vault/UpdateCollateralModal/index.tsx | 6 +- src/pages/Vaults/Vault/VaultDashboard.tsx | 10 +- .../Vault/VaultIssueRequestsTable/index.tsx | 8 +- .../Vault/VaultRedeemRequestsTable/index.tsx | 12 +- .../IssueRedeemForm/IssueRedeemForm.tsx | 4 +- .../Vault/components/PageTitle/PageTitle.tsx | 2 +- .../Vault/components/Rewards/Rewards.tsx | 6 +- .../VaultCollateral/CollateralThresholds.tsx | 2 +- .../VaultCollateral/VaultCollateral.tsx | 2 +- .../Vaults/VaultsOverview/VaultsOverview.tsx | 4 +- .../DespositCollateralStep.tsx | 4 +- .../components/CreateVaults/CreateVaults.tsx | 4 +- .../components/VaultsHeader/index.tsx | 4 +- .../utils/use-deposit-collateral.tsx | 4 +- .../Wallet/WalletOverview/WalletOverview.tsx | 21 +- .../AvailableAssetsTable/ActionsCell.tsx | 4 +- .../AvailableAssetsTable.tsx | 12 +- .../components/StakingTable/StakingTable.tsx | 15 +- .../WalletInsights/WalletInsights.tsx | 8 +- .../components/WalletInsights/WalletMeta.tsx | 2 +- .../components/WalletInsights/utils.ts | 2 +- .../WelcomeBanner/WelcomeBanner.tsx | 6 +- src/parts/Layout/index.tsx | 24 - src/parts/MainContainer/index.tsx | 7 - src/parts/MaintenanceBanner/index.tsx | 68 --- .../Topbar/GetGovernanceTokenUI/index.tsx | 137 ----- src/parts/Wrapper/index.tsx | 12 - src/store.ts | 3 +- .../mocks/@interlay/interbtc-api/extrinsic.ts | 24 + .../mocks/@interlay/interbtc-api/index.ts | 79 +-- .../@interlay/interbtc-api/parachain/amm.ts | 10 +- .../@interlay/interbtc-api/parachain/api.ts | 61 ++- .../interbtc-api/parachain/extrinsic.ts | 17 - .../@interlay/interbtc-api/parachain/index.ts | 1 + .../@interlay/interbtc-api/parachain/loans.ts | 500 +++++++++++------- .../interbtc-api/parachain/tokens.ts | 72 ++- .../interbtc-api/parachain/vesting.ts | 9 - src/test/mocks/fetch/index.ts | 15 +- src/test/mocks/hooks/index.ts | 43 +- src/test/mocks/setup.tsx | 12 +- src/test/pages/Burn.test.tsx | 52 -- src/test/pages/Issue.test.tsx | 283 ---------- src/test/pages/Loans/borrow.test.tsx | 104 ++-- src/test/pages/Loans/collateral.test.tsx | 120 +++-- src/test/pages/Loans/index.test.tsx | 100 ++-- src/test/pages/Loans/lend.test.tsx | 79 +-- src/test/pages/Loans/repay.test.tsx | 114 ++-- src/test/pages/Loans/withdraw.test.tsx | 121 +++-- src/test/pages/Pools.test.tsx | 6 +- src/test/pages/Redeem.test.tsx | 274 ---------- src/test/pages/Swap.test.tsx | 16 +- src/test/pages/Wallet.test.tsx | 58 +- src/types/bridge.ts | 7 - src/types/loans.ts | 26 +- src/utils/constants/links.ts | 8 +- src/utils/context/Notifications.tsx | 2 +- src/utils/helpers/loans.ts | 2 +- src/utils/helpers/pool.ts | 2 +- src/utils/helpers/pools.ts | 2 +- src/utils/helpers/prices.ts | 2 +- .../api/loans/use-get-account-positions.tsx | 98 ---- .../api/system/use-get-parachain-status.tsx | 37 ++ .../tokens/use-get-total-locked-tokens.tsx | 40 ++ .../hooks/api/use-get-btc-block-height.tsx | 39 ++ src/utils/hooks/use-faucet.ts | 79 +++ src/utils/hooks/use-tab-page-location.tsx | 37 -- yarn.lock | 159 ++++++ 393 files changed, 4847 insertions(+), 4449 deletions(-) create mode 100644 src/assets/icons/ArrowPathRoundedSquare.tsx create mode 100644 src/assets/icons/PresentationChartBar.tsx delete mode 100644 src/common/live-data/block-height-watcher.ts delete mode 100644 src/common/live-data/live-data.ts delete mode 100644 src/common/live-data/totals-watcher.ts create mode 100644 src/component-library/Slider/Slider.stories.tsx create mode 100644 src/component-library/Slider/Slider.style.tsx create mode 100644 src/component-library/Slider/Slider.tsx create mode 100644 src/component-library/Slider/SliderMarks.tsx create mode 100644 src/component-library/Slider/SliderThumb.tsx create mode 100644 src/component-library/Slider/index.tsx create mode 100644 src/components/AccountSelect/AccountItem.tsx delete mode 100644 src/components/AccountSelect/AccountLabel.tsx delete mode 100644 src/components/AccountSelect/AccountList.tsx delete mode 100644 src/components/AccountSelect/AccountListModal.tsx rename src/components/{LoanApyTooltip/LoanApyTooltip.style.tsx => ApyDetails/ApyDetails.style.tsx} (100%) create mode 100644 src/components/ApyDetails/ApyDetails.tsx create mode 100644 src/components/ApyDetails/ApyDetailsGroup.tsx create mode 100644 src/components/ApyDetails/ApyDetailsGroupItem.tsx create mode 100644 src/components/ApyDetails/index.tsx rename src/{parts => components}/InterlayHelmet/index.tsx (100%) rename src/{parts/Wrapper/Wrapper.style.tsx => components/Layout/Layout.styles.tsx} (77%) create mode 100644 src/components/Layout/Layout.tsx create mode 100644 src/components/Layout/index.tsx delete mode 100644 src/components/LoanApyTooltip/AssetGroup.tsx delete mode 100644 src/components/LoanApyTooltip/BreakdownGroup.tsx delete mode 100644 src/components/LoanApyTooltip/LoanApyTooltip.tsx delete mode 100644 src/components/LoanApyTooltip/RewardsGroup.tsx delete mode 100644 src/components/LoanApyTooltip/index.tsx delete mode 100644 src/components/LoanPositionsTable/ApyCell.tsx create mode 100644 src/components/LoanPositionsTable/LoanApyCell.tsx create mode 100644 src/components/LoanPositionsTable/LoanPositionsTable.style.tsx create mode 100644 src/components/MainContainer/MainContainer.styles.tsx create mode 100644 src/components/MainContainer/MainContainer.tsx create mode 100644 src/components/MainContainer/index.tsx create mode 100644 src/components/PoolsTable/PoolApyCell.tsx create mode 100644 src/components/PoolsTable/PoolsTable.style.tsx delete mode 100644 src/components/TransactionToast/TransactionToast.styles.tsx delete mode 100644 src/components/TransactionToast/TransactionToast.tsx delete mode 100644 src/components/TransactionToast/index.tsx delete mode 100644 src/components/ViewRequestDetailsLink/index.tsx rename src/{utils => }/hooks/api/amm/use-get-account-pools.tsx (97%) rename src/{utils => }/hooks/api/amm/use-get-liquidity-pools.tsx (100%) rename src/{utils => }/hooks/api/bridge/use-get-issue-data.tsx (100%) rename src/{utils => }/hooks/api/bridge/use-get-issue-request-limits.tsx (100%) rename src/{utils => }/hooks/api/bridge/use-get-max-burnable-tokens.tsx (100%) rename src/{utils => }/hooks/api/bridge/use-get-redeem-data.tsx (100%) rename src/{utils => }/hooks/api/bridge/use-get-vaults.tsx (100%) rename src/{utils => }/hooks/api/escrow/use-get-account-staking-data.tsx (100%) rename src/{utils => }/hooks/api/escrow/use-get-account-voting-balance.tsx (100%) rename src/{utils => }/hooks/api/loans/use-get-account-lending-statistics.tsx (81%) create mode 100644 src/hooks/api/loans/use-get-account-positions-earnings.tsx create mode 100644 src/hooks/api/loans/use-get-account-positions.tsx rename src/{utils => }/hooks/api/loans/use-get-account-subsidy-rewards.tsx (100%) rename src/{utils => }/hooks/api/loans/use-get-loan-assets.tsx (84%) create mode 100644 src/hooks/api/loans/use-get-loan-available-amounts.tsx rename src/{utils => }/hooks/api/oracle/use-get-oracle-currencies.ts (100%) rename src/{utils => }/hooks/api/oracle/use-get-oracle-status.ts (100%) rename src/{utils => }/hooks/api/tokens/use-balances-subscription.tsx (97%) rename src/{utils => }/hooks/api/tokens/use-get-balances.tsx (94%) rename src/{utils => }/hooks/api/use-get-collateral-currencies-data.tsx (100%) rename src/{utils => }/hooks/api/use-get-collateral-currencies.tsx (100%) rename src/{utils => }/hooks/api/use-get-currencies.tsx (100%) rename src/{utils => }/hooks/api/use-get-dex-volume.tsx (100%) rename src/{utils => }/hooks/api/use-get-exchange-rate.tsx (100%) rename src/{utils => }/hooks/api/use-get-identities.ts (100%) rename src/{utils => }/hooks/api/use-get-pools-trading-apr.tsx (100%) rename src/{utils => }/hooks/api/use-get-prices.tsx (100%) rename src/{utils => }/hooks/api/use-get-vesting-data.tsx (100%) rename src/{utils => }/hooks/api/vaults/get-vault-data.ts (100%) rename src/{utils => }/hooks/api/vaults/use-get-available-vaults.tsx (100%) rename src/{utils => }/hooks/api/vaults/use-get-vault-data.tsx (95%) rename src/{utils => }/hooks/api/vaults/use-get-vault-transactions.tsx (95%) rename src/{utils => }/hooks/api/vaults/use-get-vaults.tsx (100%) rename src/{utils => }/hooks/api/xcm/use-xcm-bridge.ts (70%) rename src/{utils => }/hooks/api/xcm/xcm-endpoints.ts (100%) rename src/{services => }/hooks/issue-requests.ts (93%) rename src/{utils => }/hooks/transaction/extrinsics/extrinsics.ts (100%) rename src/{utils => }/hooks/transaction/extrinsics/index.ts (100%) rename src/{utils => }/hooks/transaction/extrinsics/lib.ts (91%) rename src/{utils => }/hooks/transaction/extrinsics/xcm.ts (100%) rename src/{utils => }/hooks/transaction/hooks/use-fee-estimate.ts (100%) rename src/{utils => }/hooks/transaction/hooks/use-transaction-notifications.tsx (100%) rename src/{utils => }/hooks/transaction/hooks/use-transaction.ts (98%) rename src/{utils => }/hooks/transaction/index.ts (100%) create mode 100644 src/hooks/transaction/submission/dry-run.ts create mode 100644 src/hooks/transaction/submission/error.ts rename src/{utils/hooks/transaction/utils => hooks/transaction/submission}/submit.ts (78%) rename src/{utils => }/hooks/transaction/types/amm.ts (94%) rename src/{utils => }/hooks/transaction/types/escrow.ts (97%) rename src/{utils => }/hooks/transaction/types/hook.ts (100%) rename src/{utils => }/hooks/transaction/types/index.ts (92%) rename src/{utils => }/hooks/transaction/types/issue.ts (90%) rename src/{utils => }/hooks/transaction/types/loans.ts (97%) rename src/{utils => }/hooks/transaction/types/redeem.ts (93%) rename src/{utils => }/hooks/transaction/types/replace.ts (86%) rename src/{utils => }/hooks/transaction/types/rewards.ts (100%) create mode 100644 src/hooks/transaction/types/strategies.ts rename src/{utils => }/hooks/transaction/types/tokens.ts (86%) rename src/{utils => }/hooks/transaction/types/vaults.ts (94%) rename src/{utils => }/hooks/transaction/types/vesting.ts (100%) rename src/{utils => }/hooks/transaction/types/xcm.ts (100%) rename src/{utils => }/hooks/transaction/utils/description.ts (91%) rename src/{utils => }/hooks/transaction/utils/fee.ts (97%) rename src/{utils => }/hooks/transaction/utils/form.ts (100%) rename src/{utils => }/hooks/transaction/utils/params.ts (100%) rename src/{utils => }/hooks/use-account-id.ts (100%) rename src/{utils => }/hooks/use-copy-to-clipboard.tsx (100%) rename src/{utils => }/hooks/use-copy-tooltip.tsx (100%) rename src/{utils => }/hooks/use-countdown.ts (96%) rename src/{services => }/hooks/use-cumulative-collateral-volumes.ts (100%) rename src/{services => }/hooks/use-current-active-block-number.ts (100%) rename src/{utils => }/hooks/use-feature-flag.ts (96%) rename src/{utils => }/hooks/use-geoblocking.ts (90%) rename src/{utils => }/hooks/use-interval.ts (100%) rename src/{utils => }/hooks/use-local-storage.ts (100%) rename src/{utils => }/hooks/use-mount-transition.ts (100%) rename src/{utils => }/hooks/use-page-query-params.tsx (100%) rename src/{utils => }/hooks/use-query-params.ts (100%) rename src/{utils => }/hooks/use-select-currency.tsx (96%) rename src/{utils => }/hooks/use-sign-message.ts (97%) rename src/{services => }/hooks/use-stable-bitcoin-confirmations.ts (100%) rename src/{services => }/hooks/use-stable-parachain-confirmations.ts (100%) rename src/{utils => }/hooks/use-update-query-parameters.ts (100%) rename src/{utils => }/hooks/use-wallet.ts (100%) rename src/{utils => }/hooks/use-window-focus.ts (100%) delete mode 100644 src/legacy-components/Accounts/AccountSelector/index.tsx delete mode 100644 src/legacy-components/Accounts/index.tsx rename src/{parts => legacy-components}/PageTitle/index.tsx (100%) rename src/{parts => legacy-components}/Portal/index.tsx (100%) rename src/{parts => legacy-components}/SectionTitle/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/OpenButton/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/CloseButton/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/Navigation/index.tsx (93%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/SocialMediaContainer/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/TestnetBadge/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/SidebarContent/index.tsx (100%) rename src/{parts => legacy-components}/Sidebar/index.tsx (95%) rename src/{parts => legacy-components}/ThemeWrapper/index.tsx (100%) rename src/{parts => legacy-components}/TimerIncrement/index.tsx (86%) rename src/{parts => legacy-components}/Topbar/ManualIssueExecutionActionsBadge/index.tsx (93%) rename src/{parts => legacy-components}/Topbar/index.tsx (66%) delete mode 100644 src/lib/form/schemas/bridge.ts create mode 100644 src/lib/form/schemas/strategies.ts delete mode 100644 src/lib/form/schemas/strategy.ts delete mode 100644 src/pages/EarnStrategies/EarnStrategies.tsx delete mode 100644 src/pages/EarnStrategies/index.tsx create mode 100644 src/pages/Loans/LoansOverview/components/CollateralModal/CollateralForm.tsx delete mode 100644 src/pages/Loans/LoansOverview/components/LoanActionInfo/RewardsGroup.tsx delete mode 100644 src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx delete mode 100644 src/pages/Loans/LoansOverview/utils/get-max-borrowable-amount.tsx delete mode 100644 src/pages/Loans/LoansOverview/utils/get-max-lendable-amount.ts delete mode 100644 src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx create mode 100644 src/pages/Strategies/Strategy/Strategy.styles.tsx create mode 100644 src/pages/Strategies/Strategy/Strategy.tsx create mode 100644 src/pages/Strategies/Strategy/index.ts create mode 100644 src/pages/Strategies/components/StrategyCard/StrategyCard.style.tsx create mode 100644 src/pages/Strategies/components/StrategyCard/StrategyCard.tsx create mode 100644 src/pages/Strategies/components/StrategyCard/index.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx delete mode 100644 src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts create mode 100644 src/pages/Strategies/components/StrategyInfographics/StrategyInfographicToken.tsx create mode 100644 src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.styles.tsx create mode 100644 src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.tsx create mode 100644 src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsIcon.tsx create mode 100644 src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsItem.tsx create mode 100644 src/pages/Strategies/components/StrategyInfographics/index.tsx create mode 100644 src/pages/Strategies/components/StrategyInsights/StrategyInsights.styles.tsx create mode 100644 src/pages/Strategies/components/StrategyInsights/StrategyInsights.tsx create mode 100644 src/pages/Strategies/components/StrategyInsights/index.tsx create mode 100644 src/pages/Strategies/components/StrategyTag/StrategyTag.style.tsx create mode 100644 src/pages/Strategies/components/StrategyTag/StrategyTag.tsx create mode 100644 src/pages/Strategies/components/StrategyTag/index.tsx create mode 100644 src/pages/Strategies/helpers/content.ts create mode 100644 src/pages/Strategies/hooks/use-get-strategies.ts create mode 100644 src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts create mode 100644 src/pages/Strategies/hooks/use-get-strategy-position.ts create mode 100644 src/pages/Strategies/types.ts delete mode 100644 src/pages/Strategies/types/form.ts delete mode 100644 src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx delete mode 100644 src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx delete mode 100644 src/parts/Layout/index.tsx delete mode 100644 src/parts/MainContainer/index.tsx delete mode 100644 src/parts/MaintenanceBanner/index.tsx delete mode 100644 src/parts/Topbar/GetGovernanceTokenUI/index.tsx delete mode 100644 src/parts/Wrapper/index.tsx create mode 100644 src/test/mocks/@interlay/interbtc-api/extrinsic.ts delete mode 100644 src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts delete mode 100644 src/test/mocks/@interlay/interbtc-api/parachain/vesting.ts delete mode 100644 src/test/pages/Burn.test.tsx delete mode 100644 src/test/pages/Issue.test.tsx delete mode 100644 src/test/pages/Redeem.test.tsx delete mode 100644 src/types/bridge.ts delete mode 100644 src/utils/hooks/api/loans/use-get-account-positions.tsx create mode 100644 src/utils/hooks/api/system/use-get-parachain-status.tsx create mode 100644 src/utils/hooks/api/tokens/use-get-total-locked-tokens.tsx create mode 100644 src/utils/hooks/api/use-get-btc-block-height.tsx create mode 100644 src/utils/hooks/use-faucet.ts delete mode 100644 src/utils/hooks/use-tab-page-location.tsx diff --git a/package.json b/package.json index 68cca2c34e..543bb257f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.36.1", + "version": "2.37.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", @@ -19,6 +19,7 @@ "@react-aria/dialog": "^3.3.1", "@react-aria/focus": "^3.6.1", "@react-aria/gridlist": "^3.1.2", + "@react-aria/i18n": "^3.8.0", "@react-aria/interactions": "^3.11.0", "@react-aria/label": "^3.4.3", "@react-aria/link": "^3.4.0", @@ -28,6 +29,7 @@ "@react-aria/progress": "^3.4.1", "@react-aria/select": "^3.9.0", "@react-aria/separator": "^3.2.5", + "@react-aria/slider": "^3.5.0", "@react-aria/switch": "^3.2.4", "@react-aria/table": "^3.4.0", "@react-aria/tabs": "^3.5.0", @@ -39,6 +41,7 @@ "@react-stately/list": "^3.6.1", "@react-stately/overlays": "^3.5.1", "@react-stately/select": "^3.4.0", + "@react-stately/slider": "^3.4.0", "@react-stately/table": "^3.3.0", "@react-stately/tabs": "^3.4.0", "@react-stately/toggle": "^3.4.2", diff --git a/src/App.tsx b/src/App.tsx index 83a883d5e9..461c4d81f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,30 @@ import './i18n'; -import { FaucetClient, SecurityStatusCode } from '@interlay/interbtc-api'; import { Keyring } from '@polkadot/keyring'; import * as React from 'react'; import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useQuery } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; -import { Redirect, Route, Switch } from 'react-router-dom'; +import { Route, Switch } from 'react-router-dom'; -import { initGeneralDataAction, isFaucetLoaded, isVaultClientLoaded } from '@/common/actions/general.actions'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; -import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { isVaultClientLoaded } from '@/common/actions/general.actions'; +import { StoreType } from '@/common/types/util.types'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; -import Layout from '@/parts/Layout'; -import Wrapper from '@/parts/Wrapper'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query'; import { BitcoinNetwork } from '@/types/bitcoin'; import { PAGES } from '@/utils/constants/links'; -import { TransactionModal } from './components/TransactionModal'; +import { Layout, TransactionModal } from './components'; import * as constants from './constants'; +import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag'; import TestnetBanner from './legacy-components/TestnetBanner'; -import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag'; const BTC = React.lazy(() => import(/* webpackChunkName: 'btc' */ '@/pages/BTC')); const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); +const Strategy = React.lazy(() => import(/* webpackChunkName: 'strategy' */ '@/pages/Strategies/Strategy')); const SendAndReceive = React.lazy(() => import(/* webpackChunkName: 'sendAndReceive' */ '@/pages/SendAndReceive')); const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX')); const Staking = React.lazy(() => import(/* webpackChunkName: 'staking' */ '@/pages/Staking')); @@ -52,30 +49,6 @@ const App = (): JSX.Element => { const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); - // Loads the connection to the faucet - only for testnet purposes - const loadFaucet = React.useCallback(async (): Promise => { - try { - window.faucet = new FaucetClient(window.bridge.api, constants.FAUCET_URL); - dispatch(isFaucetLoaded(true)); - } catch (error) { - console.log('[loadFaucet] error.message => ', error.message); - } - }, [dispatch]); - - // Loads the faucet - React.useEffect(() => { - if (!bridgeLoaded) return; - // if (process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Mainnet) return; - - (async () => { - try { - await loadFaucet(); - } catch (error) { - console.log('[App React.useEffect 8] error.message => ', error.message); - } - })(); - }, [bridgeLoaded, loadFaucet]); - // Detects if the connected account is a vault operator const { error: vaultsError } = useQuery, Error>( [GRAPHQL_FETCHER, vaultsByAccountIdQuery(selectedAccount?.address ?? '')], @@ -93,58 +66,6 @@ const App = (): JSX.Element => { ); useErrorHandler(vaultsError); - // Initializes data on app bootstrap - React.useEffect(() => { - if (!dispatch) return; - if (!bridgeLoaded) return; - - (async () => { - try { - const [ - totalWrappedTokenAmount, - totalLockedCollateralTokenAmount, - totalGovernanceTokenAmount, - btcRelayHeight, - bitcoinHeight, - state - ] = await Promise.all([ - window.bridge.tokens.total(WRAPPED_TOKEN), - window.bridge.tokens.total(RELAY_CHAIN_NATIVE_TOKEN), - window.bridge.tokens.total(GOVERNANCE_TOKEN), - window.bridge.btcRelay.getLatestBlockHeight(), - window.bridge.electrsAPI.getLatestBlockHeight(), - window.bridge.system.getStatusCode() - ]); - - const parachainStatus = (state: SecurityStatusCode) => { - if (state.isError) { - return ParachainStatus.Error; - } else if (state.isRunning) { - return ParachainStatus.Running; - } else if (state.isShutdown) { - return ParachainStatus.Shutdown; - } else { - return ParachainStatus.Loading; - } - }; - - dispatch( - initGeneralDataAction( - totalWrappedTokenAmount, - totalLockedCollateralTokenAmount, - totalGovernanceTokenAmount, - btcRelayHeight, - bitcoinHeight, - parachainStatus(state) - ) - ); - } catch (error) { - // TODO: should add error handling - console.log('[App React.useEffect 2] error.message => ', error.message); - } - })(); - }, [dispatch, bridgeLoaded]); - React.useEffect(() => { if (!setSelectedAccount) return; @@ -158,77 +79,79 @@ const App = (): JSX.Element => { }, [setSelectedAccount, extensions.length]); return ( - - - {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && } - ( - }> - {bridgeLoaded ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {isStrategiesEnabled && ( - + + {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && } + ( + }> + {bridgeLoaded ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {isStrategiesEnabled && ( + <> + - )} - {isOnboardingEnabled && ( - - + + - )} - - - - - - + + )} + {isOnboardingEnabled && ( + + - - ) : ( - - )} - - )} - /> - + )} + + + + + + + + ) : ( + + )} + + )} + /> - + ); }; diff --git a/src/assets/icons/ArrowPathRoundedSquare.tsx b/src/assets/icons/ArrowPathRoundedSquare.tsx new file mode 100644 index 0000000000..191335116b --- /dev/null +++ b/src/assets/icons/ArrowPathRoundedSquare.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ArrowPathRoundedSquare = forwardRef((props, ref) => ( + + + +)); + +ArrowPathRoundedSquare.displayName = 'ArrowPathRoundedSquare'; + +export { ArrowPathRoundedSquare }; diff --git a/src/assets/icons/PresentationChartBar.tsx b/src/assets/icons/PresentationChartBar.tsx new file mode 100644 index 0000000000..5c629984ea --- /dev/null +++ b/src/assets/icons/PresentationChartBar.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const PresentationChartBar = forwardRef((props, ref) => ( + + + +)); + +PresentationChartBar.displayName = 'PresentationChartBar'; + +export { PresentationChartBar }; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 2508fb9299..5ad0ea092d 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -1,3 +1,4 @@ +export { ArrowPathRoundedSquare } from './ArrowPathRoundedSquare'; export { ArrowRight } from './ArrowRight'; export { ArrowRightCircle } from './ArrowRightCircle'; export { ArrowsUpDown } from './ArrowsUpDown'; @@ -10,6 +11,7 @@ export { InformationCircle } from './InformationCircle'; export { ListBullet } from './ListBullet'; export { PencilSquare } from './PencilSquare'; export { PlusCircle } from './PlusCircle'; +export { PresentationChartBar } from './PresentationChartBar'; export { Warning } from './Warning'; export { XCircle } from './XCircle'; export { XMark } from './XMark'; diff --git a/src/assets/img/dysonsphere.svg b/src/assets/img/dysonsphere.svg index e4b8acdd7b..2014c053e9 100644 --- a/src/assets/img/dysonsphere.svg +++ b/src/assets/img/dysonsphere.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index aeeef76a11..9d245c5770 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -49,7 +49,7 @@ "update": "Update", "collateralization": "Collateralization", "fees_earned": "Fees earned", - "apy": "APR", + "apy": "APY", "apr": "APR", "here": "here", "refresh_page.": "Once you create a new account please refresh the page.", @@ -75,24 +75,6 @@ "locked_btc": "Locked BTC", "issue": "Issue", "redeem": "Redeem", - "nav_btc": "BTC", - "nav_strategies": "Strategies", - "nav_send_and_receive": "Send and Receive", - "nav_lending": "Lending", - "nav_swap": "Swap", - "nav_pools": "Pools", - "nav_staking": "Staking", - "nav_stats": "Stats", - "nav_dashboard": "Dashboard", - "nav_vaults": "Vaults", - "nav_crowdloan": "Claim {{governanceTokenSymbol}}", - "nav_feedback": "Feedback", - "nav_docs": "Docs", - "nav_terms_and_conditions": "Terms and Conditions", - "nav_use_wrapped": "Use {{wrappedTokenSymbol}}", - "nav_governance": "Governance", - "nav_wallet": "Wallet", - "nav_onboarding": "Onboarding", "report_bug": "Report a bug:", "request_funds": "Faucet", "request_btc": "BTC Faucet", @@ -165,7 +147,33 @@ "claim_rewards": "Claim Rewards", "tx_fees": "Tx fees", "view_subscan": "View Subscan", - + "apr_breakdown": "APR Breakdown", + "apy_breakdown": "APY Breakdown", + "earned": "Earned", + "rewards_apr": "Rewards APR", + "rewards_apr_ticker": "Rewards APR {{ticker}}", + "wallet": "Wallet", + "learn_more": "Learn more", + "navigation": { + "btc": "BTC", + "strategies": "Strategies", + "send_and_receive": "Send and Receive", + "lending": "Lending", + "swap": "Swap", + "pools": "Pools", + "staking": "Staking", + "stats": "Stats", + "dashboard": "Dashboard", + "vaults": "Vaults", + "crowdloan": "Claim {{governanceTokenSymbol}}", + "feedback": "Feedback", + "docs": "Docs", + "terms_and_conditions": "Terms and Conditions", + "use_wrapped": "Use {{wrappedTokenSymbol}}", + "governance": "Governance", + "wallet": "Wallet", + "onboarding": "Onboarding" + }, "redeem_page": { "maximum_in_single_request": "Max redeemable in single request", "redeem": "Redeem", @@ -575,7 +583,6 @@ "please_select_a_wallet": "Please select a wallet" }, "loans": { - "brand_name": "Interlend", "withdraw": "Withdraw", "withdrawing": "Withdrawing", "borrow": "Borrow", @@ -588,7 +595,17 @@ "my_borrow_positions": "My Borrow Positions", "action_liquidation_risk": "{{action}} this amount will increase your LTV, thus also increasing the risk of liquidation.", "no_loan_positions": "No {{loanType}} positions", - "your_loan_positions_will_show_here": "Your {{loanType}} positions will show here" + "your_loan_positions_will_show_here": "Your {{loanType}} positions will show here", + "use_ticker_as_collateral": "Use {{ticker}} as Collateral", + "disable_ticker": "Disable {{ticker}}", + "owed": "Owed", + "lend_apy_ticker": "Lend APY {{ticker}}", + "borrow_apy_ticker": "Borrow APY {{ticker}}", + "borrowed": "Borrowed", + "supplied": "Supplied", + "total_supplied": "Total Supplied", + "apy_earned": "APY / Earned", + "apy_accrued": "APY / Accrued" }, "amm": { "pools": { @@ -597,7 +614,8 @@ "pool_name": "Pool Name", "add_liquidity": "Add Liquidity", "remove_liquidity": "Remove Liquidity", - "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please." + "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please.", + "trading_fee_apr": "Trading Fee APR" }, "swap": "Swap", "select_token": "Select Token", @@ -637,7 +655,7 @@ "exchange": "Exchange", "please_check_terms": "Please check the individual terms and conditions of each exchange before you buy / trade {{ticker}}." }, - "wallet": { + "wallet_page": { "available_assets": "Available assets", "get_asset": "Get {{token}}", "no_assets_available": "No assets available", @@ -701,6 +719,8 @@ "disabled_loan_as_collateral": "Disabled {{currency}} as collateral", "enabling_loan_as_collateral": "Enabling {{currency}} as collateral", "enabled_loan_as_collateral": "Enabled {{currency}} as collateral", + "depositing_amount": "Depositing {{amount}} {{currency}}", + "deposited_amount": "Deposited {{amount}} {{currency}}", "creating_currency_vault": "Creating {{currency}} vault", "created_currency_vault": "Created {{currency}} vault", "depositing_amount_to_vault": "Depositing {{amount}} {{currency}} to vault", @@ -751,5 +771,14 @@ "signature_submission_successful": "Signature submission successful", "funding_account_failed": "Funding account failed", "funding_account_successful": "Funding account successful" + }, + "strategies": { + "btc_passive_income": "BTC Passive Income", + "passive_income": "Passive Income", + "generate_passive_income_by_offering_ticker": "Generate passive income by offering your {{ticker}} to lending markets and benefit from automatic compounding rewards.", + "low_risk_approach_generate_passive_income": "Discover a straightforward and low-risk approach to generate passive income. This strategy lends out deposited {{ticker}} to borrowers, allowing you to earn interest effortlessly", + "how_does_it_work": "How does it work?", + "what_are_the_risk": "What are the risks?", + "discover_fundamental_origins": "Discover the fundamental origins of the position, potential risks involved, the allocation of your capital, and other pertinent details in the docs section." } } diff --git a/src/common/actions/general.actions.ts b/src/common/actions/general.actions.ts index 880e1da1ce..31a786034d 100644 --- a/src/common/actions/general.actions.ts +++ b/src/common/actions/general.actions.ts @@ -1,18 +1,9 @@ -import { CollateralCurrencyExt } from '@interlay/interbtc-api'; -import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; - -import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains'; - import { ADD_NOTIFICATION, AddNotification, - INIT_GENERAL_DATA_ACTION, - InitGeneralDataAction, IS_BRIDGE_LOADED, - IS_FAUCET_LOADED, IS_VAULT_CLIENT_LOADED, IsBridgeLoaded, - IsFaucetLoaded, IsVaultClientLoaded, SHOW_ACCOUNT_MODAL, SHOW_BUY_MODAL, @@ -20,47 +11,21 @@ import { ShowAccountModal, ShowBuyModal, ShowSignTermsModal, - UPDATE_HEIGHTS, - UPDATE_TOTALS, UPDATE_TRANSACTION_MODAL_STATUS, - UpdateHeights, - UpdateTotals, UpdateTransactionModal } from '../types/actions.types'; -import { Notification, ParachainStatus, TransactionModalData } from '../types/util.types'; +import { Notification, TransactionModalData } from '../types/util.types'; export const isBridgeLoaded = (isLoaded = false): IsBridgeLoaded => ({ type: IS_BRIDGE_LOADED, isLoaded }); -export const isFaucetLoaded = (isLoaded = false): IsFaucetLoaded => ({ - type: IS_FAUCET_LOADED, - isLoaded -}); - export const isVaultClientLoaded = (isLoaded = false): IsVaultClientLoaded => ({ type: IS_VAULT_CLIENT_LOADED, isLoaded }); -export const initGeneralDataAction = ( - totalWrappedTokenAmount: BitcoinAmount, - totalLockedCollateralTokenAmount: MonetaryAmount, - totalGovernanceTokenAmount: GovernanceTokenMonetaryAmount, - btcRelayHeight: number, - bitcoinHeight: number, - parachainStatus: ParachainStatus -): InitGeneralDataAction => ({ - type: INIT_GENERAL_DATA_ACTION, - btcRelayHeight, - bitcoinHeight, - totalWrappedTokenAmount, - totalLockedCollateralTokenAmount, - totalGovernanceTokenAmount, - parachainStatus -}); - export const showAccountModalAction = (showAccountModal: boolean): ShowAccountModal => ({ type: SHOW_ACCOUNT_MODAL, showAccountModal @@ -76,21 +41,6 @@ export const showBuyModal = (isBuyModalOpen: boolean): ShowBuyModal => ({ isBuyModalOpen }); -export const updateHeightsAction = (btcRelayHeight: number, bitcoinHeight: number): UpdateHeights => ({ - type: UPDATE_HEIGHTS, - btcRelayHeight, - bitcoinHeight -}); - -export const updateTotalsAction = ( - totalLockedCollateralTokenAmount: MonetaryAmount, - totalWrappedTokenAmount: BitcoinAmount -): UpdateTotals => ({ - type: UPDATE_TOTALS, - totalLockedCollateralTokenAmount, - totalWrappedTokenAmount -}); - export const addNotification = (accountAddress: string, notification: Notification): AddNotification => ({ type: ADD_NOTIFICATION, accountAddress, diff --git a/src/common/live-data/block-height-watcher.ts b/src/common/live-data/block-height-watcher.ts deleted file mode 100644 index efbd5528d3..0000000000 --- a/src/common/live-data/block-height-watcher.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Dispatch } from 'redux'; - -import { updateHeightsAction } from '../actions/general.actions'; -import { StoreState } from '../types/util.types'; - -export default async function fetchBtcRelayAndBitcoinHeight(dispatch: Dispatch, store: StoreState): Promise { - const state = store.getState(); - const { btcRelayHeight, bitcoinHeight, bridgeLoaded } = state.general; - if (!bridgeLoaded) return; - - try { - const latestBtcRelayHeight = Number(await window.bridge.btcRelay.getLatestBlockHeight()); - const latestBitcoinHeight = await window.bridge.electrsAPI.getLatestBlockHeight(); - - // update store only if there is a difference between the latest heights and current heights - if (btcRelayHeight !== latestBtcRelayHeight || bitcoinHeight !== latestBitcoinHeight) { - dispatch(updateHeightsAction(latestBtcRelayHeight, latestBitcoinHeight)); - } - } catch (error) { - console.log(error); - } -} diff --git a/src/common/live-data/live-data.ts b/src/common/live-data/live-data.ts deleted file mode 100644 index 94f9e3e2ef..0000000000 --- a/src/common/live-data/live-data.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Dispatch } from 'redux'; - -import { StoreState } from '@/common/types/util.types'; - -import fetchBtcRelayAndBitcoinHeight from './block-height-watcher'; -import fetchTotals from './totals-watcher'; - -// TODO: should use web sockets instead of infinite times of fetch -function startFetchingLiveData(dispatch: Dispatch, store: StoreState): void { - if (window.isFetchingActive) return; - window.isFetchingActive = true; - - // Fetch btc-relay height and bitcoin height - fetchBtcRelayAndBitcoinHeight(dispatch, store); - window.setInterval(() => fetchBtcRelayAndBitcoinHeight(dispatch, store), 60000); - - // Fetch totals - fetchTotals(dispatch, store); - window.setInterval(() => fetchTotals(dispatch, store), 60000); -} - -export default startFetchingLiveData; diff --git a/src/common/live-data/totals-watcher.ts b/src/common/live-data/totals-watcher.ts deleted file mode 100644 index fb46e83950..0000000000 --- a/src/common/live-data/totals-watcher.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Dispatch } from 'redux'; - -import { RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; - -import { updateTotalsAction } from '../actions/general.actions'; -import { StoreState } from '../types/util.types'; - -export default async function fetchTotals(dispatch: Dispatch, store: StoreState): Promise { - const state = store.getState(); - const { totalLockedCollateralTokenAmount, totalWrappedTokenAmount, bridgeLoaded } = state.general; - if (!bridgeLoaded) return; - - try { - const [latestTotalWrappedTokenAmount, latestTotalLockedCollateralTokenAmount] = await Promise.all([ - window.bridge.tokens.total(WRAPPED_TOKEN), - window.bridge.tokens.total(RELAY_CHAIN_NATIVE_TOKEN) - ]); - - // update store only if there is a difference between the latest totals and current totals - if ( - !totalWrappedTokenAmount.eq(latestTotalWrappedTokenAmount) || - !totalLockedCollateralTokenAmount.eq(latestTotalLockedCollateralTokenAmount) - ) { - dispatch(updateTotalsAction(latestTotalLockedCollateralTokenAmount, latestTotalWrappedTokenAmount)); - } - } catch (error) { - console.log(error); - } -} diff --git a/src/common/reducers/general.reducer.ts b/src/common/reducers/general.reducer.ts index 23093c810a..0fc40771aa 100644 --- a/src/common/reducers/general.reducer.ts +++ b/src/common/reducers/general.reducer.ts @@ -1,23 +1,16 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; -import { BitcoinAmount } from '@interlay/monetary-js'; - -import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; +import { TransactionStatus } from '@/hooks/transaction/types'; import { ADD_NOTIFICATION, GeneralActions, - INIT_GENERAL_DATA_ACTION, IS_BRIDGE_LOADED, IS_VAULT_CLIENT_LOADED, SHOW_ACCOUNT_MODAL, SHOW_BUY_MODAL, SHOW_SIGN_TERMS_MODAL, - UPDATE_HEIGHTS, - UPDATE_TOTALS, UPDATE_TRANSACTION_MODAL_STATUS } from '../types/actions.types'; -import { GeneralState, ParachainStatus } from '../types/util.types'; +import { GeneralState } from '../types/util.types'; const initialState = { bridgeLoaded: false, @@ -26,11 +19,6 @@ const initialState = { showAccountModal: false, isBuyModalOpen: false, isSignTermsModalOpen: false, - totalWrappedTokenAmount: BitcoinAmount.zero(), - totalLockedCollateralTokenAmount: newMonetaryAmount(0, RELAY_CHAIN_NATIVE_TOKEN), - btcRelayHeight: 0, - bitcoinHeight: 0, - parachainStatus: ParachainStatus.Loading, prices: { bitcoin: { usd: 0 }, relayChainNativeToken: { usd: 0 }, @@ -46,25 +34,8 @@ const initialState = { export const generalReducer = (state: GeneralState = initialState, action: GeneralActions): GeneralState => { switch (action.type) { - case UPDATE_TOTALS: - return { - ...state, - totalWrappedTokenAmount: action.totalWrappedTokenAmount, - totalLockedCollateralTokenAmount: action.totalLockedCollateralTokenAmount - }; - case UPDATE_HEIGHTS: - return { ...state, btcRelayHeight: action.btcRelayHeight, bitcoinHeight: action.bitcoinHeight }; case IS_BRIDGE_LOADED: return { ...state, bridgeLoaded: action.isLoaded }; - case INIT_GENERAL_DATA_ACTION: - return { - ...state, - totalLockedCollateralTokenAmount: action.totalLockedCollateralTokenAmount, - totalWrappedTokenAmount: action.totalWrappedTokenAmount, - btcRelayHeight: action.btcRelayHeight, - bitcoinHeight: action.bitcoinHeight, - parachainStatus: action.parachainStatus - }; case IS_VAULT_CLIENT_LOADED: return { ...state, vaultClientLoaded: action.isLoaded }; case SHOW_ACCOUNT_MODAL: diff --git a/src/common/types/actions.types.ts b/src/common/types/actions.types.ts index f4744b03ac..14308bc0c8 100644 --- a/src/common/types/actions.types.ts +++ b/src/common/types/actions.types.ts @@ -1,51 +1,28 @@ import { CollateralCurrencyExt } from '@interlay/interbtc-api'; import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; -import { GovernanceTokenMonetaryAmount } from '@/config/relay-chains'; - -import { Notification, ParachainStatus, StoreType, TransactionModalData } from './util.types'; +import { Notification, StoreType, TransactionModalData } from './util.types'; // GENERAL ACTIONS export const IS_BRIDGE_LOADED = 'IS_BRIDGE_LOADED'; -export const IS_FAUCET_LOADED = 'IS_FAUCET_LOADED'; export const IS_VAULT_CLIENT_LOADED = 'IS_VAULT_CLIENT_LOADED'; export const INIT_STATE = 'INIT_STATE'; -export const INIT_GENERAL_DATA_ACTION = 'INIT_GENERAL_DATA_ACTION'; export const UPDATE_BALANCE_POLKA_BTC = 'UPDATE_BALANCE_POLKA_BTC'; export const UPDATE_WRAPPED_TOKEN_TRANSFERABLE_BALANCE = 'UPDATE_WRAPPED_TOKEN_TRANSFERABLE_BALANCE'; export const UPDATE_COLLATERAL_TOKEN_BALANCE = 'UPDATE_COLLATERAL_TOKEN_BALANCE'; export const UPDATE_COLLATERAL_TOKEN_TRANSFERABLE_BALANCE = 'UPDATE_COLLATERAL_TOKEN_TRANSFERABLE_BALANCE'; export const SHOW_ACCOUNT_MODAL = 'SHOW_ACCOUNT_MODAL'; export const SHOW_SIGN_TERMS_MODAL = 'SHOW_SIGN_TERMS_MODAL'; -export const UPDATE_HEIGHTS = 'UPDATE_HEIGHTS'; -export const UPDATE_TOTALS = 'UPDATE_TOTALS'; export const SHOW_BUY_MODAL = 'SHOW_BUY_MODAL'; export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'; export const SHOW_TRANSACTION_MODAL = 'SHOW_TRANSACTION_MODAL'; export const UPDATE_TRANSACTION_MODAL_STATUS = 'UPDATE_TRANSACTION_MODAL_STATUS'; -export interface UpdateTotals { - type: typeof UPDATE_TOTALS; - totalLockedCollateralTokenAmount: MonetaryAmount; - totalWrappedTokenAmount: BitcoinAmount; -} - -export interface UpdateHeights { - type: typeof UPDATE_HEIGHTS; - btcRelayHeight: number; - bitcoinHeight: number; -} - export interface IsBridgeLoaded { type: typeof IS_BRIDGE_LOADED; isLoaded: boolean; } -export interface IsFaucetLoaded { - type: typeof IS_FAUCET_LOADED; - isLoaded: boolean; -} - export interface IsVaultClientLoaded { type: typeof IS_VAULT_CLIENT_LOADED; isLoaded: boolean; @@ -56,16 +33,6 @@ export interface InitState { state: StoreType; } -export interface InitGeneralDataAction { - type: typeof INIT_GENERAL_DATA_ACTION; - totalWrappedTokenAmount: BitcoinAmount; - totalLockedCollateralTokenAmount: MonetaryAmount; - totalGovernanceTokenAmount: GovernanceTokenMonetaryAmount; - btcRelayHeight: number; - bitcoinHeight: number; - parachainStatus: ParachainStatus; -} - export interface UpdateBalancePolkaBTC { type: typeof UPDATE_BALANCE_POLKA_BTC; wrappedTokenBalance: BitcoinAmount; @@ -115,15 +82,12 @@ export interface UpdateTransactionModal { export type GeneralActions = | IsBridgeLoaded - | InitGeneralDataAction | IsVaultClientLoaded | UpdateBalancePolkaBTC | UpdateWrappedTokenTransferableBalance | UpdateCollateralTokenBalance | UpdateCollateralTokenTransferableBalance | ShowAccountModal - | UpdateHeights - | UpdateTotals | ShowBuyModal | ShowSignTermsModal | AddNotification diff --git a/src/common/types/util.types.ts b/src/common/types/util.types.ts index 922531dad0..3a75dc0511 100644 --- a/src/common/types/util.types.ts +++ b/src/common/types/util.types.ts @@ -1,9 +1,7 @@ -import { CollateralCurrencyExt } from '@interlay/interbtc-api'; -import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; import { u256 } from '@polkadot/types/primitive'; import { CombinedState, Store } from 'redux'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; +import { TransactionStatus } from '@/hooks/transaction/types'; import { rootReducer } from '../reducers/index'; import { GeneralActions, RedeemActions, VaultActions } from './actions.types'; @@ -40,13 +38,6 @@ export interface DashboardStatusUpdateInfo { forced: boolean; } -export enum ParachainStatus { - Loading, - Error, - Running, - Shutdown -} - export type Notification = { status: TransactionStatus; description: string; @@ -68,11 +59,6 @@ export type GeneralState = { showAccountModal: boolean; isSignTermsModalOpen: boolean; isBuyModalOpen: boolean; - totalWrappedTokenAmount: BitcoinAmount; - totalLockedCollateralTokenAmount: MonetaryAmount; - btcRelayHeight: number; - bitcoinHeight: number; - parachainStatus: ParachainStatus; notifications: Record; transactionModal: { isOpen: boolean; diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts index e753acbb28..37bd09e264 100644 --- a/src/common/utils/utils.ts +++ b/src/common/utils/utils.ts @@ -3,8 +3,8 @@ import { BitcoinAmount, MonetaryAmount } from '@interlay/monetary-js'; import Big, { BigSource } from 'big.js'; import { PARACHAIN_URL } from '@/constants'; +import { Prices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; function shortAddress(address: string): string { if (address.length < 12) return address; @@ -85,11 +85,11 @@ const formatUSD = (amount: number, options?: { compact?: boolean }): string => { }; function displayMonetaryAmountInUSDFormat( - amount: MonetaryAmount, + amount: MonetaryAmount | undefined, rate: number | undefined ): string { // If the rate is not available - if (rate === undefined) { + if (rate === undefined || amount === undefined) { return '—'; } diff --git a/src/component-library/Card/Card.tsx b/src/component-library/Card/Card.tsx index ff0f164c21..ebf345e063 100644 --- a/src/component-library/Card/Card.tsx +++ b/src/component-library/Card/Card.tsx @@ -17,7 +17,6 @@ type Props = { rounded?: BorderRadius; padding?: Spacing; shadowed?: boolean; - onPress?: (e: PressEvent) => void; }; diff --git a/src/component-library/Select/Select.tsx b/src/component-library/Select/Select.tsx index 222d6ef311..723fd491ef 100644 --- a/src/component-library/Select/Select.tsx +++ b/src/component-library/Select/Select.tsx @@ -14,7 +14,7 @@ import { SelectTrigger } from './SelectTrigger'; type SelectType = 'listbox' | 'modal'; -type SelectObject = Record; +type SelectObject = Record; // TODO: listbox to be implemented type Props = { diff --git a/src/component-library/Slider/Slider.stories.tsx b/src/component-library/Slider/Slider.stories.tsx new file mode 100644 index 0000000000..89beef50c0 --- /dev/null +++ b/src/component-library/Slider/Slider.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, Story } from '@storybook/react'; + +import { Slider, SliderProps } from '.'; + +const Template: Story = (args) => ; + +const Default = Template.bind({}); +Default.args = { label: 'Leverage', step: 1, minValue: 0, maxValue: 5, marks: false }; + +const CustomMark = Template.bind({}); +CustomMark.args = { + label: 'Leverage', + step: 1, + minValue: 0, + maxValue: 5, + marks: true, + renderMarkText: (value) => `${value}x` +}; + +const Marks = Template.bind({}); +Marks.args = { label: 'Leverage', step: 1, minValue: 0, maxValue: 5, marks: true }; + +const Decimal = Template.bind({}); +Decimal.args = { label: 'Leverage', step: 0.1, minValue: 0.1, maxValue: 0.5, marks: true }; + +const Disabled = Template.bind({}); +Disabled.args = { label: 'Leverage', step: 1, minValue: 0, maxValue: 5, isDisabled: true }; + +export { CustomMark, Decimal, Default, Disabled, Marks }; + +export default { + title: 'Forms/Slider', + component: Slider +} as Meta; diff --git a/src/component-library/Slider/Slider.style.tsx b/src/component-library/Slider/Slider.style.tsx new file mode 100644 index 0000000000..a3367a323d --- /dev/null +++ b/src/component-library/Slider/Slider.style.tsx @@ -0,0 +1,156 @@ +import styled, { css } from 'styled-components'; + +import { Flex } from '../Flex'; +import { Span } from '../Text'; +import { theme } from '../theme'; + +type StyledSliderThumbProps = { + $isHovered: boolean; + $isDragged: boolean; + $isFocused: boolean; + $isFocusVisible: boolean; +}; + +type StyledFilledTrackProps = { + $percentage: number; +}; + +type StyledMarkProps = { + $isFilled: boolean; + $position: number; +}; + +type StyledMarkTextProps = { + $position: number; +}; + +type StyledControlsProps = { + $hasMarks?: boolean; +}; + +type StyledSliderWrapperProps = { + $isDisabled?: boolean; +}; + +const StyledSliderWrapper = styled(Flex)` + width: 300px; + cursor: ${({ $isDisabled }) => $isDisabled && 'default'}; + opacity: ${({ $isDisabled }) => $isDisabled && 0.5}; +`; + +const StyledControls = styled.div` + position: relative; + display: inline-block; + vertical-align: top; + width: 100%; + min-height: 32px; + margin-bottom: ${({ $hasMarks }) => $hasMarks && '20px'}; +`; + +const StyledBaseTrack = styled.div` + display: block; + position: absolute; + top: 50%; + height: ${theme.slider.track.size}; + transform: translateY(-50%); + border-radius: ${theme.rounded.full}; +`; + +const StyledTrack = styled(StyledBaseTrack)` + background-color: ${theme.slider.track.bg}; + width: 100%; + z-index: 1; +`; + +const StyledFilledTrack = styled(StyledBaseTrack)` + width: ${({ $percentage }) => `calc((100% * ${$percentage}))`}; + background-color: ${theme.slider.track.fillBg}; + z-index: 2; +`; + +const StyledMark = styled.span` + position: absolute; + left: ${({ $position }) => `${$position}%`}; + top: 50%; + z-index: 2; + transform: translate(-50%, -50%); + + width: ${theme.slider.mark.width}; + height: ${theme.slider.mark.height}; + + background-color: ${({ $isFilled }) => ($isFilled ? theme.slider.track.fillBg : theme.slider.track.bg)}; + border-radius: ${theme.rounded.full}; +`; + +const StyledMarkText = styled(Span)` + position: absolute; + top: 35px; + left: ${({ $position }) => `${$position}%`}; + transform: translateX(-50%); + + cursor: default; +`; + +const StyledSliderThumb = styled.div` + height: ${theme.slider.thumb.size}; + width: ${theme.slider.thumb.size}; + + top: 50%; + z-index: 3; + + background-color: ${({ $isHovered }) => ($isHovered ? theme.slider.thumb.hover.bg : theme.slider.thumb.bg)}; + border-style: solid; + border-color: ${theme.colors.textSecondary}; + border-width: ${({ $isDragged }) => ($isDragged ? '8px' : '2px')}; + border-radius: ${theme.rounded.full}; + transition: border-width ${theme.transition.duration.duration100}ms ease-in-out; + + &::before { + content: ''; + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: ${theme.slider.thumb.size}; + width: ${theme.slider.thumb.size}; + border-radius: ${theme.rounded.full}; + transition: box-shadow ${theme.transition.duration.duration150}ms ease-in-out; + + ${({ $isFocusVisible }) => + $isFocusVisible && + css` + box-shadow: 0 0 0 2px var(--colors-input-focus-border); + height: 28px; + width: 28px; + `} + } +`; + +const StyledInput = styled.input` + cursor: default; + pointer-events: none; + overflow: hidden; + + height: ${theme.slider.thumb.size}; + width: ${theme.slider.thumb.size}; + + position: absolute; + top: 50%; + transform: translate(-20%, -20%); + + &:focus { + outline: none; + } +`; + +export { + StyledControls, + StyledFilledTrack, + StyledInput, + StyledMark, + StyledMarkText, + StyledSliderThumb, + StyledSliderWrapper, + StyledTrack +}; diff --git a/src/component-library/Slider/Slider.tsx b/src/component-library/Slider/Slider.tsx new file mode 100644 index 0000000000..12740e37aa --- /dev/null +++ b/src/component-library/Slider/Slider.tsx @@ -0,0 +1,100 @@ +import { useNumberFormatter } from '@react-aria/i18n'; +import { AriaSliderProps, useSlider } from '@react-aria/slider'; +import { useSliderState } from '@react-stately/slider'; +import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react'; + +import { Label } from '../Label'; +import { useDOMRef } from '../utils/dom'; +import { StyledControls, StyledFilledTrack, StyledSliderWrapper, StyledTrack } from './Slider.style'; +import { SliderMarks } from './SliderMarks'; +import { SliderThumb } from './SliderThumb'; + +type Props = { + marks?: boolean; + formatOptions?: Intl.NumberFormatOptions; + onChange?: (value: number) => void; + renderMarkText: (text: ReactNode) => ReactNode; +}; + +type NativeAttrs = Omit, keyof Props>; + +type InheritAttrs = Omit; + +type SliderProps = Props & NativeAttrs & InheritAttrs; + +const Slider = forwardRef( + ( + { + className, + style, + hidden, + step = 1, + minValue = 0, + maxValue = 100, + label, + marks, + onChange, + renderMarkText, + name, + formatOptions, + isDisabled, + ...props + }, + ref + ): JSX.Element => { + const domRef = useDOMRef(ref); + const trackRef = useRef(null); + + const ariaProps: AriaSliderProps = { + ...props, + step, + minValue, + maxValue, + label, + isDisabled, + onChange: ((value: number[]) => onChange?.(value[0])) as any + }; + + const numberFormatter = useNumberFormatter(formatOptions); + const state = useSliderState({ + ...ariaProps, + numberFormatter + }); + + const { groupProps, trackProps, labelProps } = useSlider(ariaProps, state, trackRef); + + return ( + + ); + } +); + +Slider.displayName = 'Slider'; + +export { Slider }; +export type { SliderProps }; diff --git a/src/component-library/Slider/SliderMarks.tsx b/src/component-library/Slider/SliderMarks.tsx new file mode 100644 index 0000000000..09ba65b5e1 --- /dev/null +++ b/src/component-library/Slider/SliderMarks.tsx @@ -0,0 +1,61 @@ +import { AriaSliderProps } from '@react-aria/slider'; +import { SliderState } from '@react-stately/slider'; +import { Fragment, ReactNode, useMemo } from 'react'; + +import { StyledMark, StyledMarkText } from './Slider.style'; + +type Props = { renderMarkText: (text: ReactNode) => ReactNode; state: SliderState; numberFormatter: Intl.NumberFormat }; + +type InheritAttrs = Omit, keyof Props>; + +type SliderMarksProps = Props & InheritAttrs; + +const SliderMarks = ({ + step = 1, + minValue = 0, + maxValue = 100, + state, + numberFormatter, + renderMarkText = (text) => text +}: SliderMarksProps): JSX.Element => { + const thumbPercent = state.getThumbPercent(0); + + const { marks } = useMemo(() => { + const range = maxValue - minValue; + + const numSteps = Math.ceil(range / step); + + return { + range, + marks: Array(numSteps + 1) + .fill(undefined) + .map((_, idx) => { + const value = minValue + idx * step; + const percentage = ((value - minValue) / range) * 100; + const formattedValue = numberFormatter.format(value); + + return { label: renderMarkText(formattedValue), percentage }; + }) + }; + }, [maxValue, minValue, renderMarkText, numberFormatter, step]); + + return ( + <> + {marks.map((mark, idx) => { + const isFilled = thumbPercent * 100 >= mark.percentage; + + return ( + + + + {mark.label} + + + ); + })} + + ); +}; + +export { SliderMarks }; +export type { SliderMarksProps }; diff --git a/src/component-library/Slider/SliderThumb.tsx b/src/component-library/Slider/SliderThumb.tsx new file mode 100644 index 0000000000..9ece12d4d7 --- /dev/null +++ b/src/component-library/Slider/SliderThumb.tsx @@ -0,0 +1,61 @@ +import { useFocusRing } from '@react-aria/focus'; +import { useHover } from '@react-aria/interactions'; +import { AriaSliderThumbProps, useSliderThumb } from '@react-aria/slider'; +import { mergeProps } from '@react-aria/utils'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; +import { SliderState } from '@react-stately/slider'; +import { InputHTMLAttributes, RefObject } from 'react'; + +import { useDOMRef } from '../utils/dom'; +import { StyledInput, StyledSliderThumb } from './Slider.style'; + +type Props = { + trackRef: RefObject; + state: SliderState; +}; + +type NativeAttrs = Omit, keyof Props>; + +type InheritAttrs = Omit; + +type SliderThumbProps = Props & NativeAttrs & InheritAttrs; + +const SliderThumb = ({ state, trackRef, name, ...props }: SliderThumbProps): JSX.Element => { + const inputRef = useDOMRef(null); + + const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb( + { + ...props, + inputRef, + trackRef + }, + state + ); + + const { hoverProps, isHovered } = useHover({}); + + const { isFocusVisible, focusProps } = useFocusRing(); + + return ( + + + + + + ); +}; + +export { SliderThumb }; +export type { SliderThumbProps }; diff --git a/src/component-library/Slider/index.tsx b/src/component-library/Slider/index.tsx new file mode 100644 index 0000000000..ffab7ca4ae --- /dev/null +++ b/src/component-library/Slider/index.tsx @@ -0,0 +1,2 @@ +export type { SliderProps } from './Slider'; +export { Slider } from './Slider'; diff --git a/src/component-library/Text/style.tsx b/src/component-library/Text/style.tsx index 2299c8592c..b445da409b 100644 --- a/src/component-library/Text/style.tsx +++ b/src/component-library/Text/style.tsx @@ -10,6 +10,7 @@ type StyledTextProps = { $align?: NormalAlignments; $weight?: FontWeight; $rows?: number; + $noWrap?: boolean; }; const Text = styled.p` @@ -18,6 +19,7 @@ const Text = styled.p` line-height: ${({ $size }) => resolveHeight($size)}; font-weight: ${({ $weight }) => $weight && theme.fontWeight[$weight]}; text-align: ${({ $align }) => $align}; + white-space: ${({ $noWrap }) => $noWrap && 'nowrap'}; ${({ $rows }) => { return ( diff --git a/src/component-library/Text/types.ts b/src/component-library/Text/types.ts index 56f047f723..3894a70152 100644 --- a/src/component-library/Text/types.ts +++ b/src/component-library/Text/types.ts @@ -8,6 +8,7 @@ type Props = { align?: NormalAlignments; weight?: FontWeight; rows?: number; + noWrap?: boolean; }; type NativeAttrs = Omit, keyof Props>; diff --git a/src/component-library/Text/utils.ts b/src/component-library/Text/utils.ts index fa16b5d428..acfc68cd36 100644 --- a/src/component-library/Text/utils.ts +++ b/src/component-library/Text/utils.ts @@ -7,14 +7,16 @@ const mapTextProps = ({ align, weight, rows, + noWrap, ...props -}: T): Omit & StyledTextProps => ({ +}: T): Omit & StyledTextProps => ({ ...props, $color: color, $size: size, $weight: weight, $align: align, - $rows: rows + $rows: rows, + $noWrap: noWrap }); export { mapTextProps }; diff --git a/src/component-library/index.tsx b/src/component-library/index.tsx index f71642c245..5fc8268b6c 100644 --- a/src/component-library/index.tsx +++ b/src/component-library/index.tsx @@ -45,6 +45,8 @@ export type { ProgressBarProps } from './ProgressBar'; export { ProgressBar } from './ProgressBar'; export type { SelectProps } from './Select'; export { Item, Select } from './Select'; +export type { SliderProps } from './Slider'; +export { Slider } from './Slider'; export type { StackProps } from './Stack'; export { Stack } from './Stack'; export type { SwitchProps } from './Switch'; diff --git a/src/component-library/theme/theme.interlay.css b/src/component-library/theme/theme.interlay.css index 649c6c2cf4..2077751856 100644 --- a/src/component-library/theme/theme.interlay.css +++ b/src/component-library/theme/theme.interlay.css @@ -82,7 +82,7 @@ --colors-table-row-hover-bg: #f0f1f2; --color-table-header-row-bg: #f4f3f5; --colors-table-border: #f4f3f5; - /* Table */ + /* Tooltip */ --colors-tooltip-bg: var(--colors-neutral-white); --colors-tooltip-tip-bg: var(--colors-neutral-white); /* List */ @@ -96,4 +96,9 @@ --color-icon-fallback-color: #f4f3f5; /* Select */ --color-select-text: var(--colors-neutral-black); + /* Slider */ + --colors-slider-thumb-bg: var(--colors-neutral-white); + --colors-slider-thumb-hover-bg: var(--color-light-grey); + --colors-slider-track-bg: #dee3f5; + --colors-slider-track-fill-bg: var(--colors-light-blue); } diff --git a/src/component-library/theme/theme.kintsugi.css b/src/component-library/theme/theme.kintsugi.css index 3ab36b5e61..03966e7c52 100644 --- a/src/component-library/theme/theme.kintsugi.css +++ b/src/component-library/theme/theme.kintsugi.css @@ -86,7 +86,7 @@ --colors-table-row-hover-bg: #1c2c46; --color-table-header-row-bg: #080e28; --colors-table-border: #080e28; - /* Table */ + /* Tooltip */ --colors-tooltip-bg: var(--colors-blue); --colors-tooltip-tip-bg: var(--colors-blue); /* List */ @@ -100,4 +100,9 @@ --color-icon-fallback-color: #040816; /* Select */ --color-select-text: var(--colors-neutral-white); + /* Slider */ + --colors-slider-thumb-bg: var(--colors-blue); + --colors-slider-thumb-hover-bg: var(--colors-dark-blue); + --colors-slider-track-bg: var(--colors-mid-blue); + --colors-slider-track-fill-bg: var(--colors-yellow); } diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts index 22f6d5f2cf..1d17b0c68b 100644 --- a/src/component-library/theme/theme.ts +++ b/src/component-library/theme/theme.ts @@ -593,6 +593,24 @@ const theme = { maxHeight: 'calc(var(--spacing-16) - 1px)' } } + }, + slider: { + thumb: { + size: '25px', + bg: 'var(--colors-slider-thumb-bg)', + hover: { + bg: 'var(--colors-slider-thumb-hover-bg)' + } + }, + track: { + size: '4px', + bg: 'var(--colors-slider-track-bg)', + fillBg: 'var(--colors-slider-track-fill-bg)' + }, + mark: { + width: '2px', + height: '8px' + } } }; diff --git a/src/components/AccountSelect/AccountItem.tsx b/src/components/AccountSelect/AccountItem.tsx new file mode 100644 index 0000000000..6032ca0dea --- /dev/null +++ b/src/components/AccountSelect/AccountItem.tsx @@ -0,0 +1,38 @@ +import Identicon from '@polkadot/react-identicon'; + +import { FlexProps } from '@/component-library/Flex'; +import { useSelectModalContext } from '@/component-library/Select/SelectModalContext'; + +import { StyledAccountItemAddress, StyledAccountItemName, StyledAccountItemWrapper } from './AccountSelect.style'; + +type Props = { + address: string; + name?: string; +}; + +type InheritAttrs = Omit; + +type AccountItemProps = Props & InheritAttrs; + +const AccountItem = ({ address, name, ...props }: AccountItemProps): JSX.Element => { + const isSelected = useSelectModalContext().selectedItem?.key === address; + + return ( + + + + {name && ( + + {name} + + )} + + {address} + + + + ); +}; + +export { AccountItem }; +export type { AccountItemProps }; diff --git a/src/components/AccountSelect/AccountLabel.tsx b/src/components/AccountSelect/AccountLabel.tsx deleted file mode 100644 index 965d1128c2..0000000000 --- a/src/components/AccountSelect/AccountLabel.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import Identicon from '@polkadot/react-identicon'; - -import { FlexProps } from '@/component-library/Flex'; - -import { StyledAccountLabelAddress, StyledAccountLabelName, StyledAccountLabelWrapper } from './AccountSelect.style'; - -type Props = { - isSelected?: boolean; - address: string; - name?: string; -}; - -type InheritAttrs = Omit; - -type AccountLabelProps = Props & InheritAttrs; - -const AccountLabel = ({ isSelected, address, name, ...props }: AccountLabelProps): JSX.Element => ( - - - - {name && ( - - {name} - - )} - - {address} - - - -); - -export { AccountLabel }; -export type { AccountLabelProps }; diff --git a/src/components/AccountSelect/AccountList.tsx b/src/components/AccountSelect/AccountList.tsx deleted file mode 100644 index ca12d8b20e..0000000000 --- a/src/components/AccountSelect/AccountList.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; - -import { ListItem, ListProps } from '@/component-library/List'; - -import { AccountLabel } from './AccountLabel'; -import { StyledList } from './AccountSelect.style'; - -type Props = { - items: InjectedAccountWithMeta[]; - selectedAccount?: string; - onSelectionChange?: (account: string) => void; -}; - -type InheritAttrs = Omit; - -type AccountListProps = Props & InheritAttrs; - -const AccountList = ({ items, selectedAccount, onSelectionChange, ...props }: AccountListProps): JSX.Element => { - const handleSelectionChange: ListProps['onSelectionChange'] = (key) => { - const [selectedKey] = [...key]; - - if (!selectedKey) return; - - onSelectionChange?.(selectedKey as string); - }; - - return ( - - {items.map((item) => { - const accountText = item.address; - - const isSelected = selectedAccount === accountText; - - return ( - - - - ); - })} - - ); -}; - -export { AccountList }; -export type { AccountListProps }; diff --git a/src/components/AccountSelect/AccountListModal.tsx b/src/components/AccountSelect/AccountListModal.tsx deleted file mode 100644 index 07b211e2a9..0000000000 --- a/src/components/AccountSelect/AccountListModal.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; - -import { Modal, ModalBody, ModalHeader, ModalProps } from '@/component-library/Modal'; - -import { AccountList } from './AccountList'; - -type Props = { - accounts: InjectedAccountWithMeta[]; - onSelectionChange?: (account: string) => void; - selectedAccount?: string; -}; - -type InheritAttrs = Omit; - -type AccountListModalProps = Props & InheritAttrs; - -const AccountListModal = ({ - selectedAccount, - accounts, - onSelectionChange, - ...props -}: AccountListModalProps): JSX.Element => ( - - - Select Account - - - - - -); - -export { AccountListModal }; -export type { AccountListModalProps }; diff --git a/src/components/AccountSelect/AccountSelect.style.tsx b/src/components/AccountSelect/AccountSelect.style.tsx index ea962fc8e0..c1a5272e78 100644 --- a/src/components/AccountSelect/AccountSelect.style.tsx +++ b/src/components/AccountSelect/AccountSelect.style.tsx @@ -1,69 +1,25 @@ import styled from 'styled-components'; -import { ChevronDown } from '@/assets/icons'; -import { Flex } from '@/component-library/Flex'; -import { List } from '@/component-library/List'; -import { Span } from '@/component-library/Text'; -import { theme } from '@/component-library/theme'; - -type StyledClickableProps = { - $isClickable: boolean; -}; +import { Flex, Span, theme } from '@/component-library'; type StyledListItemSelectedLabelProps = { $isSelected: boolean; }; -const StyledAccount = styled.span` - font-size: ${theme.text.s}; - color: ${theme.colors.textPrimary}; - overflow: hidden; - text-overflow: ellipsis; -`; - -const StyledAccountSelect = styled(Flex)` - background-color: ${theme.tokenInput.endAdornment.bg}; - border-radius: ${theme.rounded.md}; - font-size: ${theme.text.xl2}; - padding: ${theme.spacing.spacing3}; - cursor: ${({ $isClickable }) => $isClickable && 'pointer'}; - height: 3rem; - width: auto; - overflow: hidden; -`; - -const StyledChevronDown = styled(ChevronDown)` - margin-left: ${theme.spacing.spacing1}; -`; - -const StyledAccountLabelAddress = styled(Span)` +const StyledAccountItemAddress = styled(Span)` text-overflow: ellipsis; overflow: hidden; white-space: nowrap; `; -const StyledAccountLabelName = styled(StyledAccountLabelAddress)` +const StyledAccountItemName = styled(StyledAccountItemAddress)` color: ${({ $isSelected }) => $isSelected ? theme.tokenInput.list.item.selected.text : theme.tokenInput.list.item.default.text}; `; -const StyledList = styled(List)` - overflow: auto; - padding: 0 ${theme.dialog.medium.body.paddingX} ${theme.dialog.medium.body.paddingY} - ${theme.dialog.medium.body.paddingX}; -`; - -const StyledAccountLabelWrapper = styled(Flex)` +const StyledAccountItemWrapper = styled(Flex)` flex-grow: 1; overflow: hidden; `; -export { - StyledAccount, - StyledAccountLabelAddress, - StyledAccountLabelName, - StyledAccountLabelWrapper, - StyledAccountSelect, - StyledChevronDown, - StyledList -}; +export { StyledAccountItemAddress, StyledAccountItemName, StyledAccountItemWrapper }; diff --git a/src/components/AccountSelect/AccountSelect.tsx b/src/components/AccountSelect/AccountSelect.tsx index b9712491b5..d00b83f64d 100644 --- a/src/components/AccountSelect/AccountSelect.tsx +++ b/src/components/AccountSelect/AccountSelect.tsx @@ -1,98 +1,23 @@ import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; -import { useLabel } from '@react-aria/label'; -import { chain, mergeProps } from '@react-aria/utils'; -import { VisuallyHidden } from '@react-aria/visually-hidden'; -import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useState } from 'react'; -import { Flex, Label } from '@/component-library'; -import { SelectTrigger } from '@/component-library/Select'; -import { useDOMRef } from '@/component-library/utils/dom'; -import { triggerChangeEvent } from '@/component-library/utils/input'; +import { Item, Select, SelectProps } from '@/component-library'; -import { AccountLabel } from './AccountLabel'; -import { AccountListModal } from './AccountListModal'; +import { AccountItem } from './AccountItem'; -const getAccount = (accountValue?: string, accounts?: InjectedAccountWithMeta[]) => - accounts?.find((account) => account.address === accountValue); +type AccountSelectProps = Omit, 'children' | 'type'>; -type Props = { - value: string; - defaultValue?: string; - icons?: string[]; - isDisabled?: boolean; - label?: ReactNode; - accounts?: InjectedAccountWithMeta[]; +const AccountSelect = ({ ...props }: AccountSelectProps): JSX.Element => { + return ( + {...props} type='modal' modalTitle='Select Account' size='large'> + {(data: InjectedAccountWithMeta) => ( + + + + )} + + ); }; -type NativeAttrs = Omit & { ref?: any }, keyof Props>; - -type AccountSelectProps = Props & NativeAttrs; - -const AccountSelect = forwardRef( - ({ value: valueProp, defaultValue = '', accounts, disabled, label, className, ...props }, ref): JSX.Element => { - const inputRef = useDOMRef(ref); - - const [isOpen, setOpen] = useState(false); - const [value, setValue] = useState(defaultValue); - - const { fieldProps, labelProps } = useLabel({ ...props, label }); - - useEffect(() => { - if (valueProp === undefined) return; - - setValue(valueProp); - }, [valueProp]); - - const handleAccount = (account: string) => { - triggerChangeEvent(inputRef, account); - setValue(account); - }; - - const handleClose = () => setOpen(false); - - const isDisabled = !accounts?.length || disabled; - - const selectedAccount = getAccount(value, accounts); - - return ( - <> - - {label && } - setOpen(true)} - disabled={isDisabled} - {...mergeProps(fieldProps, { - // MEMO: when the button is blurred, a focus and blur is executed on the input - // so that validation gets triggered. - onBlur: () => { - if (!isOpen) { - inputRef.current?.focus(); - inputRef.current?.blur(); - } - } - })} - > - {selectedAccount && } - - - - - - {accounts && ( - - )} - - ); - } -); - AccountSelect.displayName = 'AccountSelect'; export { AccountSelect }; diff --git a/src/components/LoanApyTooltip/LoanApyTooltip.style.tsx b/src/components/ApyDetails/ApyDetails.style.tsx similarity index 100% rename from src/components/LoanApyTooltip/LoanApyTooltip.style.tsx rename to src/components/ApyDetails/ApyDetails.style.tsx diff --git a/src/components/ApyDetails/ApyDetails.tsx b/src/components/ApyDetails/ApyDetails.tsx new file mode 100644 index 0000000000..82a8ba35fa --- /dev/null +++ b/src/components/ApyDetails/ApyDetails.tsx @@ -0,0 +1,10 @@ +import { Dl, DlProps } from '@/component-library'; + +type ApyDetailsProps = DlProps; + +const ApyDetails = ({ direction = 'column', gap = 'spacing2', ...props }: ApyDetailsProps): JSX.Element => { + return
; +}; + +export { ApyDetails }; +export type { ApyDetailsProps }; diff --git a/src/components/ApyDetails/ApyDetailsGroup.tsx b/src/components/ApyDetails/ApyDetailsGroup.tsx new file mode 100644 index 0000000000..461a6c7c2f --- /dev/null +++ b/src/components/ApyDetails/ApyDetailsGroup.tsx @@ -0,0 +1,34 @@ +import { ReactNode } from 'react'; + +import { Dd, Dl, DlGroup, DlGroupProps, Dt } from '@/component-library'; + +type Props = { + title: ReactNode; +}; + +type InheritAttrs = Omit; + +type ApyDetailsGroupProps = Props & InheritAttrs; + +const ApyDetailsGroup = ({ + direction = 'column', + gap = 'spacing1', + alignItems = 'flex-start', + title, + children, + ...props +}: ApyDetailsGroupProps): JSX.Element => ( + +
+ {title} +
+
+
+ {children} +
+
+ +); + +export { ApyDetailsGroup }; +export type { ApyDetailsGroupProps }; diff --git a/src/components/ApyDetails/ApyDetailsGroupItem.tsx b/src/components/ApyDetails/ApyDetailsGroupItem.tsx new file mode 100644 index 0000000000..07b312274c --- /dev/null +++ b/src/components/ApyDetails/ApyDetailsGroupItem.tsx @@ -0,0 +1,32 @@ +import { ReactNode } from 'react'; + +import { Dd, DlGroup, DlGroupProps, Dt } from '@/component-library'; + +type Props = { + label: ReactNode; + value: ReactNode; +}; + +type InheritAttrs = Omit; + +type ApyDetailsGroupItemProps = Props & InheritAttrs; + +const ApyDetailsGroupItem = ({ + gap = 'spacing1', + wrap = 'wrap', + label, + value, + ...props +}: ApyDetailsGroupItemProps): JSX.Element => ( + +
+ {label}: +
+
+ {value} +
+ +); + +export { ApyDetailsGroupItem }; +export type { ApyDetailsGroupItemProps }; diff --git a/src/components/ApyDetails/index.tsx b/src/components/ApyDetails/index.tsx new file mode 100644 index 0000000000..acd7bd5f70 --- /dev/null +++ b/src/components/ApyDetails/index.tsx @@ -0,0 +1,6 @@ +export type { ApyDetailsProps } from './ApyDetails'; +export { ApyDetails } from './ApyDetails'; +export type { ApyDetailsGroupProps } from './ApyDetailsGroup'; +export { ApyDetailsGroup } from './ApyDetailsGroup'; +export type { ApyDetailsGroupItemProps } from './ApyDetailsGroupItem'; +export { ApyDetailsGroupItem } from './ApyDetailsGroupItem'; diff --git a/src/components/AuthCTA/AuthCTA.tsx b/src/components/AuthCTA/AuthCTA.tsx index d3adc8cb1e..f799fce007 100644 --- a/src/components/AuthCTA/AuthCTA.tsx +++ b/src/components/AuthCTA/AuthCTA.tsx @@ -1,30 +1,39 @@ -import { forwardRef } from 'react'; +import { forwardRef, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { showAccountModalAction } from '@/common/actions/general.actions'; import { CTA, CTAProps } from '@/component-library'; import { SIGNER_API_URL } from '@/constants'; +import { useSignMessage } from '@/hooks/use-sign-message'; import { useSubstrateSecureState } from '@/lib/substrate'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; +import { useGetParachainStatus } from '@/utils/hooks/api/system/use-get-parachain-status'; enum AuthStatus { UNAUTH, AUTH, - UNSIGNED + UNSIGNED, + BLOCKED } const useAuthCTAProps = (props: AuthCTAProps): AuthCTAProps => { const { t } = useTranslation(); const { hasSignature, buttonProps } = useSignMessage(); + const { data: parachainStatus } = useGetParachainStatus(); const { selectedAccount } = useSubstrateSecureState(); - const status = selectedAccount - ? !SIGNER_API_URL || hasSignature - ? AuthStatus.AUTH - : AuthStatus.UNSIGNED - : AuthStatus.UNAUTH; + const status = useMemo(() => { + if (!selectedAccount) { + return AuthStatus.UNAUTH; + } + + if (!parachainStatus?.isRunning) { + return AuthStatus.BLOCKED; + } + + return !SIGNER_API_URL || hasSignature ? AuthStatus.AUTH : AuthStatus.UNSIGNED; + }, [hasSignature, parachainStatus, selectedAccount]); const dispatch = useDispatch(); @@ -45,6 +54,13 @@ const useAuthCTAProps = (props: AuthCTAProps): AuthCTAProps => { disabled: false, children: t('sign_t&cs') }; + case AuthStatus.BLOCKED: + return { + ...buttonProps, + type: 'button', + disabled: true, + children + }; case AuthStatus.UNAUTH: default: return { diff --git a/src/components/AuthModal/AccountStep.tsx b/src/components/AuthModal/AccountStep.tsx index 943ea0bf5d..7a28cfabbe 100644 --- a/src/components/AuthModal/AccountStep.tsx +++ b/src/components/AuthModal/AccountStep.tsx @@ -6,10 +6,10 @@ import { useCopyToClipboard } from 'react-use'; import { DocumentDuplicate } from '@/assets/icons'; import { shortAddress } from '@/common/utils/utils'; import { CTA, Divider, Flex, P, Span, Tooltip, WalletIcon } from '@/component-library'; +import { useCopyTooltip } from '@/hooks/use-copy-tooltip'; import { KeyringPair } from '@/lib/substrate'; import { WalletData } from '@/utils/constants/wallets'; import { StepComponentProps, withStep } from '@/utils/hocs/step'; -import { useCopyTooltip } from '@/utils/hooks/use-copy-tooltip'; import { StyledAccountItem, StyledCopyItem, StyledP } from './AuthModal.style'; import { AuthModalSteps } from './types'; diff --git a/src/components/AuthModal/SignTermsModal.tsx b/src/components/AuthModal/SignTermsModal.tsx index 8cec72fc57..2c8dea8d83 100644 --- a/src/components/AuthModal/SignTermsModal.tsx +++ b/src/components/AuthModal/SignTermsModal.tsx @@ -1,5 +1,5 @@ import { CTA, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@/component-library'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; +import { useSignMessage } from '@/hooks/use-sign-message'; import { Disclaimer } from './Disclaimer'; diff --git a/src/components/FundWallet/use-entities.tsx b/src/components/FundWallet/use-entities.tsx index 5ab066ed40..a756f27b2a 100644 --- a/src/components/FundWallet/use-entities.tsx +++ b/src/components/FundWallet/use-entities.tsx @@ -10,9 +10,9 @@ import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchange import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg'; import { ReactComponent as ZenlinkLogoIcon } from '@/assets/img/exchanges/zenlink-logo.svg'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { useWallet } from '@/hooks/use-wallet'; import { EXTERNAL_PAGES, EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import { useWallet } from '@/utils/hooks/use-wallet'; const queryString = require('query-string'); diff --git a/src/components/Geoblock/Geoblock.tsx b/src/components/Geoblock/Geoblock.tsx index 0a308d5619..a6e918b6af 100644 --- a/src/components/Geoblock/Geoblock.tsx +++ b/src/components/Geoblock/Geoblock.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; -import { useGeoblocking } from '@/utils/hooks/use-geoblocking'; +import { useGeoblocking } from '@/hooks/use-geoblocking'; type Props = { children: ReactNode; diff --git a/src/parts/InterlayHelmet/index.tsx b/src/components/InterlayHelmet/index.tsx similarity index 100% rename from src/parts/InterlayHelmet/index.tsx rename to src/components/InterlayHelmet/index.tsx diff --git a/src/components/IsAuthenticated/IsAuthenticated.tsx b/src/components/IsAuthenticated/IsAuthenticated.tsx index 3c4b1f64ce..9f0eb397d9 100644 --- a/src/components/IsAuthenticated/IsAuthenticated.tsx +++ b/src/components/IsAuthenticated/IsAuthenticated.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; import { SIGNER_API_URL } from '@/constants'; +import { useSignMessage } from '@/hooks/use-sign-message'; import { useSubstrateSecureState } from '@/lib/substrate'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; type IsAuthenticatedProps = { children: ReactNode }; diff --git a/src/parts/Wrapper/Wrapper.style.tsx b/src/components/Layout/Layout.styles.tsx similarity index 77% rename from src/parts/Wrapper/Wrapper.style.tsx rename to src/components/Layout/Layout.styles.tsx index a53ca66a46..f8c2b21cdf 100644 --- a/src/parts/Wrapper/Wrapper.style.tsx +++ b/src/components/Layout/Layout.styles.tsx @@ -2,11 +2,13 @@ import styled from 'styled-components'; import dysonsphere from '@/assets/img/dysonsphere.svg'; -const StyledWrapper = styled('div')` +const StyledWrapper = styled.div` background: url(${dysonsphere}) no-repeat; background-size: 40%; background-position: right bottom; background-attachment: fixed; + position: relative; + min-height: 100vh; `; export { StyledWrapper }; diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx new file mode 100644 index 0000000000..dc82b1cdb6 --- /dev/null +++ b/src/components/Layout/Layout.tsx @@ -0,0 +1,19 @@ +import Sidebar from '../../legacy-components/Sidebar'; +import Topbar from '../../legacy-components/Topbar'; +import { StyledWrapper } from './Layout.styles'; + +interface Props { + className?: string; + children: React.ReactNode; +} + +const Layout = ({ className, children }: Props): JSX.Element => ( + + + +
{children}
+ + +); + +export { Layout }; diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx new file mode 100644 index 0000000000..9fc685e2aa --- /dev/null +++ b/src/components/Layout/index.tsx @@ -0,0 +1 @@ +export { Layout } from './Layout'; diff --git a/src/components/LoanApyTooltip/AssetGroup.tsx b/src/components/LoanApyTooltip/AssetGroup.tsx deleted file mode 100644 index 7c2a88ae38..0000000000 --- a/src/components/LoanApyTooltip/AssetGroup.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { Dd, Dt } from '@/component-library'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { StyledApyTooltipGroup } from './LoanApyTooltip.style'; - -type AssetGroupProps = { - amount: MonetaryAmount; - prices: Prices; -}; - -const AssetGroup = ({ amount, prices }: AssetGroupProps): JSX.Element => { - const amountUSD = displayMonetaryAmountInUSDFormat(amount, getTokenPrice(prices, amount.currency.ticker)?.usd); - - return ( - -
{amount.currency.ticker}:
-
- {amount.toHuman()} ({amountUSD}) -
- - ); -}; - -export { AssetGroup }; -export type { AssetGroupProps }; diff --git a/src/components/LoanApyTooltip/BreakdownGroup.tsx b/src/components/LoanApyTooltip/BreakdownGroup.tsx deleted file mode 100644 index be97f0249f..0000000000 --- a/src/components/LoanApyTooltip/BreakdownGroup.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import Big from 'big.js'; - -import { Dd, Dl, DlGroup, Dt } from '@/component-library'; -import { getApyLabel } from '@/utils/helpers/loans'; - -import { StyledApyTooltipGroup, StyledApyTooltipTitle } from './LoanApyTooltip.style'; - -type BreakdownGroupProps = { - apy: Big; - ticker: string; - rewardsApy?: Big; - rewardsTicker?: string; - isBorrow: boolean; -}; - -const BreakdownGroup = ({ apy, rewardsApy, ticker, rewardsTicker, isBorrow }: BreakdownGroupProps): JSX.Element => { - const apyLabel = isBorrow ? `-${getApyLabel(apy)}` : getApyLabel(apy); - - return ( - - APY Breakdown -
-
- -
- {isBorrow ? 'Borrow' : 'Lend'} APY {ticker}: -
-
{apyLabel}
- - {!!rewardsApy && ( - -
Rewards APR {rewardsTicker}:
-
{getApyLabel(rewardsApy)}
- - )} -
-
- - ); -}; - -export { BreakdownGroup }; -export type { BreakdownGroupProps }; diff --git a/src/components/LoanApyTooltip/LoanApyTooltip.tsx b/src/components/LoanApyTooltip/LoanApyTooltip.tsx deleted file mode 100644 index f6cb684837..0000000000 --- a/src/components/LoanApyTooltip/LoanApyTooltip.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { TooltipProps } from '@reach/tooltip'; -import Big from 'big.js'; - -import { Dd, Dl, DlGroup } from '@/component-library'; -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { AssetGroup } from './AssetGroup'; -import { BreakdownGroup } from './BreakdownGroup'; -import { StyledApyTooltipTitle, StyledTooltip } from './LoanApyTooltip.style'; - -type Props = { - apy: Big; - currency: CurrencyExt; - earnedInterest?: MonetaryAmount; - accumulatedDebt?: MonetaryAmount; - rewardsApy?: Big; - prices: Prices; - isBorrow: boolean; -}; - -type InheritAttrs = Omit; - -type LoanApyTooltipProps = Props & InheritAttrs; - -const LoanApyTooltip = ({ - apy, - currency, - earnedInterest, - accumulatedDebt, - rewardsApy, - prices, - isBorrow, - ...props -}: LoanApyTooltipProps): JSX.Element => { - const showEarnedRewards = !!earnedInterest; - - const label = ( -
- - {accumulatedDebt && ( - - Owed -
-
- -
-
- - )} - {showEarnedRewards && ( - - Earned -
-
- {earnedInterest && } -
-
- - )} -
- ); - - return ; -}; - -export { LoanApyTooltip }; -export type { LoanApyTooltipProps }; diff --git a/src/components/LoanApyTooltip/RewardsGroup.tsx b/src/components/LoanApyTooltip/RewardsGroup.tsx deleted file mode 100644 index dfeb949ccc..0000000000 --- a/src/components/LoanApyTooltip/RewardsGroup.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; -import { Dd, Dt } from '@/component-library'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { StyledApyTooltipGroup } from './LoanApyTooltip.style'; - -type RewardsGroupProps = { - rewards: MonetaryAmount; - prices: Prices; -}; - -const RewardsGroup = ({ rewards, prices }: RewardsGroupProps): JSX.Element => { - const rewardsUSD = displayMonetaryAmountInUSDFormat(rewards, getTokenPrice(prices, rewards.currency.ticker)?.usd); - - const rewardsLabel = `${formatNumber(rewards?.toBig().toNumber(), { - maximumFractionDigits: rewards?.currency.humanDecimals - })} (${rewardsUSD})`; - - return ( - -
{rewards.currency.ticker}:
-
{rewardsLabel}
- - ); -}; - -export { RewardsGroup }; -export type { RewardsGroupProps }; diff --git a/src/components/LoanApyTooltip/index.tsx b/src/components/LoanApyTooltip/index.tsx deleted file mode 100644 index 062155f827..0000000000 --- a/src/components/LoanApyTooltip/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { LoanApyTooltipProps } from './LoanApyTooltip'; -export { LoanApyTooltip } from './LoanApyTooltip'; diff --git a/src/components/LoanPositionsTable/ApyCell.tsx b/src/components/LoanPositionsTable/ApyCell.tsx deleted file mode 100644 index d36911f7be..0000000000 --- a/src/components/LoanPositionsTable/ApyCell.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import Big from 'big.js'; - -import { Flex } from '@/component-library'; -import { getApyLabel, getSubsidyRewardApy } from '@/utils/helpers/loans'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; - -import { Cell } from '../DataGrid'; -import { LoanApyTooltip } from '../LoanApyTooltip'; - -type ApyCellProps = { - apy: Big; - currency: CurrencyExt; - earnedInterest?: MonetaryAmount; - accumulatedDebt?: MonetaryAmount; - rewardsPerYear: MonetaryAmount | null; - prices?: Prices; - isBorrow?: boolean; - onClick?: () => void; -}; - -const ApyCell = ({ - apy, - currency, - rewardsPerYear, - accumulatedDebt, - earnedInterest, - prices, - isBorrow = false, - onClick -}: ApyCellProps): JSX.Element => { - const rewardsApy = getSubsidyRewardApy(currency, rewardsPerYear, prices); - - const totalApy = isBorrow ? (rewardsApy || Big(0)).sub(apy) : apy.add(rewardsApy || 0); - - const totalApyLabel = getApyLabel(totalApy); - - const earnedAsset = accumulatedDebt || earnedInterest; - - const earnedAssetLabel = earnedAsset ? `${earnedAsset.toHuman(8)} ${earnedAsset.currency.ticker}` : undefined; - - const children = ; - - if (!prices) { - return children; - } - - // MEMO: wrapping around a Flex so tooltip is placed correctly - return ( - - - {children} - - - ); -}; - -export { ApyCell }; -export type { ApyCellProps }; diff --git a/src/components/LoanPositionsTable/LoanApyCell.tsx b/src/components/LoanPositionsTable/LoanApyCell.tsx new file mode 100644 index 0000000000..aa1f77ec44 --- /dev/null +++ b/src/components/LoanPositionsTable/LoanApyCell.tsx @@ -0,0 +1,107 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { useTranslation } from 'react-i18next'; + +import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; +import { Flex } from '@/component-library'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { Prices } from '@/hooks/api/use-get-prices'; +import { getApyLabel, getSubsidyRewardApy } from '@/utils/helpers/loans'; +import { getTokenPrice } from '@/utils/helpers/prices'; + +import { ApyDetails, ApyDetailsGroup, ApyDetailsGroupItem } from '../ApyDetails'; +import { Cell } from '../DataGrid'; +import { StyledTooltip } from './LoanPositionsTable.style'; + +type AssetGroupProps = { + amount: MonetaryAmount; + prices: Prices; +}; + +const AssetGroup = ({ amount, prices }: AssetGroupProps): JSX.Element => { + const amountUSD = displayMonetaryAmountInUSDFormat(amount, getTokenPrice(prices, amount.currency.ticker)?.usd); + const value = `${amount.toHuman()} (${amountUSD})`; + + return ; +}; + +type LoanApyCellProps = { + apy: Big; + currency: CurrencyExt; + earnedInterest?: MonetaryAmount; + accumulatedDebt?: MonetaryAmount; + rewardsPerYear: MonetaryAmount | null; + prices?: Prices; + isBorrow?: boolean; + onClick?: () => void; +}; + +const LoanApyCell = ({ + apy, + currency, + rewardsPerYear, + accumulatedDebt, + earnedInterest, + prices, + isBorrow = false, + onClick +}: LoanApyCellProps): JSX.Element => { + const { t } = useTranslation(); + + const rewardsApy = getSubsidyRewardApy(currency, rewardsPerYear, prices); + + const totalApy = isBorrow ? (rewardsApy || Big(0)).sub(apy) : apy.add(rewardsApy || 0); + + const totalApyLabel = getApyLabel(totalApy); + + const earnedAsset = accumulatedDebt || earnedInterest; + + const earnedAssetLabel = earnedAsset ? `${earnedAsset.toHuman(8)} ${earnedAsset.currency.ticker}` : undefined; + + const children = ; + + if (!prices) { + return children; + } + + const apyLabel = isBorrow + ? t('loans.borrow_apy_ticker', { ticker: currency.ticker }) + : t('loans.lend_apy_ticker', { ticker: currency.ticker }); + + const apyValue = isBorrow ? `-${getApyLabel(apy)}` : getApyLabel(apy); + + const label = ( + + + + {!!rewardsApy && ( + + )} + + {accumulatedDebt && ( + + + + )} + {!!earnedInterest && ( + + + + )} + + ); + + // MEMO: wrapping around a Flex so tooltip is placed correctly + return ( + + {children} + + ); +}; + +export { LoanApyCell }; +export type { LoanApyCellProps }; diff --git a/src/components/LoanPositionsTable/LoanPositionsTable.style.tsx b/src/components/LoanPositionsTable/LoanPositionsTable.style.tsx new file mode 100644 index 0000000000..93998a9355 --- /dev/null +++ b/src/components/LoanPositionsTable/LoanPositionsTable.style.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import { theme, Tooltip } from '@/component-library'; + +const StyledTooltip = styled(Tooltip)` + font-size: ${theme.text.xs}; +`; + +export { StyledTooltip }; diff --git a/src/components/LoanPositionsTable/LoanPositionsTable.tsx b/src/components/LoanPositionsTable/LoanPositionsTable.tsx index ed56422a75..e8db329236 100644 --- a/src/components/LoanPositionsTable/LoanPositionsTable.tsx +++ b/src/components/LoanPositionsTable/LoanPositionsTable.tsx @@ -1,16 +1,16 @@ -import { BorrowPosition, CollateralPosition, LoanAsset, TickerToData } from '@interlay/interbtc-api'; +import { TickerToData } from '@interlay/interbtc-api'; import { useId } from '@react-aria/utils'; import { Key, ReactNode, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils'; import { Switch } from '@/component-library'; -import { LoanType } from '@/types/loans'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { BorrowPosition, CollateralPosition, LoanAsset, LoanType } from '@/types/loans'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { AssetCell, BalanceCell, Table, TableProps } from '../DataGrid'; -import { ApyCell } from './ApyCell'; +import { LoanApyCell } from './LoanApyCell'; import { LoanTablePlaceholder } from './LoanTablePlaceholder'; enum LoanPositionTableColumns { @@ -59,24 +59,24 @@ const LoanPositionsTable = ({ const columns = useMemo(() => { if (isLending) { const lendingColumns = [ - { name: 'Asset', uid: LoanPositionTableColumns.ASSET }, - { name: 'APY / Earned', uid: LoanPositionTableColumns.APY }, - { name: 'Supplied', uid: LoanPositionTableColumns.AMOUNT } + { name: t('asset'), uid: LoanPositionTableColumns.ASSET }, + { name: t('loans.apy_earned'), uid: LoanPositionTableColumns.APY }, + { name: t('loans.supplied'), uid: LoanPositionTableColumns.AMOUNT } ]; if (showCollateral) { - lendingColumns.push({ name: 'Collateral', uid: LoanPositionTableColumns.COLLATERAL }); + lendingColumns.push({ name: t('collateral'), uid: LoanPositionTableColumns.COLLATERAL }); } return lendingColumns; } return [ - { name: 'Asset', uid: LoanPositionTableColumns.ASSET }, - { name: 'APY / Accrued', uid: LoanPositionTableColumns.APY }, - { name: 'Borrowed', uid: LoanPositionTableColumns.AMOUNT } + { name: t('asset'), uid: LoanPositionTableColumns.ASSET }, + { name: t('loans.apy_accrued'), uid: LoanPositionTableColumns.APY }, + { name: t('loans.borrowed'), uid: LoanPositionTableColumns.AMOUNT } ]; - }, [isLending, showCollateral]); + }, [isLending, showCollateral, t]); const rows: LoanPositionTableRow[] = useMemo( () => @@ -99,7 +99,7 @@ const LoanPositionsTable = ({ }; const apy = ( - ( + +); + +export { MainContainer }; diff --git a/src/components/MainContainer/index.tsx b/src/components/MainContainer/index.tsx new file mode 100644 index 0000000000..4341748e05 --- /dev/null +++ b/src/components/MainContainer/index.tsx @@ -0,0 +1 @@ +export { MainContainer } from './MainContainer'; diff --git a/src/components/NotificationToast/NotificationToast.tsx b/src/components/NotificationToast/NotificationToast.tsx index f4a6b8bb64..c0971cee7f 100644 --- a/src/components/NotificationToast/NotificationToast.tsx +++ b/src/components/NotificationToast/NotificationToast.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'; import { CheckCircle, XCircle } from '@/assets/icons'; import { CTA, Divider, Flex, FlexProps, LoadingSpinner, P } from '@/component-library'; -import { useCountdown } from '@/utils/hooks/use-countdown'; +import { useCountdown } from '@/hooks/use-countdown'; import { StyledProgressBar, StyledWrapper } from './NotificationToast.styles'; diff --git a/src/components/NotificationToast/TransactionToast.tsx b/src/components/NotificationToast/TransactionToast.tsx index 9c0152a319..3bbf055a7a 100644 --- a/src/components/NotificationToast/TransactionToast.tsx +++ b/src/components/NotificationToast/TransactionToast.tsx @@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'; import { updateTransactionModal } from '@/common/actions/general.actions'; import { CTA, CTALink } from '@/component-library'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; +import { TransactionStatus } from '@/hooks/transaction/types'; import { NotificationToast, NotificationToastProps, NotificationToastVariant } from './NotificationToast'; diff --git a/src/components/NotificationsPopover/NotificationsListItem.tsx b/src/components/NotificationsPopover/NotificationsListItem.tsx index 7c29cdfce8..2b45fcea3d 100644 --- a/src/components/NotificationsPopover/NotificationsListItem.tsx +++ b/src/components/NotificationsPopover/NotificationsListItem.tsx @@ -5,7 +5,7 @@ import { useRef } from 'react'; import { CheckCircle, XCircle } from '@/assets/icons'; import { Notification } from '@/common/types/util.types'; import { Flex, P } from '@/component-library'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; +import { TransactionStatus } from '@/hooks/transaction/types'; import { StyledListItem } from './NotificationsPopover.styles'; diff --git a/src/components/PoolsTable/PoolApyCell.tsx b/src/components/PoolsTable/PoolApyCell.tsx new file mode 100644 index 0000000000..3fc69460bc --- /dev/null +++ b/src/components/PoolsTable/PoolApyCell.tsx @@ -0,0 +1,63 @@ +import { LiquidityPool } from '@interlay/interbtc-api'; +import { useTranslation } from 'react-i18next'; + +import { formatPercentage } from '@/common/utils/utils'; +import { Flex } from '@/component-library'; +import { ApyDetails, ApyDetailsGroup, ApyDetailsGroupItem, Cell } from '@/components'; +import { useGetPoolsTradingApr } from '@/hooks/api/use-get-pools-trading-apr'; +import { Prices } from '@/hooks/api/use-get-prices'; +import { getFarmingApr } from '@/utils/helpers/pools'; + +import { StyledTooltip } from './PoolsTable.style'; + +type PoolApyCellProps = { + prices?: Prices; + pool: LiquidityPool; + totalLiquidityUSD: number; + onClick?: () => void; +}; + +const PoolApyCell = ({ pool, prices, totalLiquidityUSD, onClick }: PoolApyCellProps): JSX.Element => { + const { t } = useTranslation(); + + const { getTradingAprOfPool } = useGetPoolsTradingApr(); + + const { rewardAmountsYearly, totalSupply, isEmpty } = pool; + + const tradingApr = getTradingAprOfPool(pool); + + const farmingApr = getFarmingApr(rewardAmountsYearly, totalSupply, totalLiquidityUSD, prices); + + const totalApr = farmingApr.add(tradingApr); + + const children = ( + + ); + + if (!prices) { + return children; + } + + const baseAprLabel = formatPercentage(tradingApr); + + const hasRewards = farmingApr.gt(0); + + const label = ( + + + + {hasRewards && } + + + ); + + // MEMO: wrapping around a Flex so tooltip is placed correctly + return ( + + {children} + + ); +}; + +export { PoolApyCell }; +export type { PoolApyCellProps }; diff --git a/src/components/PoolsTable/PoolsTable.style.tsx b/src/components/PoolsTable/PoolsTable.style.tsx new file mode 100644 index 0000000000..93998a9355 --- /dev/null +++ b/src/components/PoolsTable/PoolsTable.style.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import { theme, Tooltip } from '@/component-library'; + +const StyledTooltip = styled(Tooltip)` + font-size: ${theme.text.xs}; +`; + +export { StyledTooltip }; diff --git a/src/components/PoolsTable/PoolsTable.tsx b/src/components/PoolsTable/PoolsTable.tsx index 94fc78e75f..01bc23d149 100644 --- a/src/components/PoolsTable/PoolsTable.tsx +++ b/src/components/PoolsTable/PoolsTable.tsx @@ -1,18 +1,17 @@ import { LiquidityPool, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { useId } from '@react-aria/utils'; -import { ReactNode, useMemo } from 'react'; +import { Key, ReactNode, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { formatPercentage, formatUSD } from '@/common/utils/utils'; +import { formatUSD } from '@/common/utils/utils'; +import { DateRangeVolume, useGetDexVolumes } from '@/hooks/api/use-get-dex-volume'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { getFarmingApr } from '@/utils/helpers/pools'; -import { DateRangeVolume, useGetDexVolumes } from '@/utils/hooks/api/use-get-dex-volume'; -import { useGetPoolsTradingApr } from '@/utils/hooks/api/use-get-pools-trading-apr'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { AssetCell, BalanceCell, Cell, Table, TableProps } from '../DataGrid'; +import { PoolApyCell } from './PoolApyCell'; enum PoolsTableColumns { POOL_NAME = 'poolName', @@ -43,7 +42,6 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS const prices = useGetPrices(); const titleId = useId(); const { getDexTotalVolumeUSD } = useGetDexVolumes(DateRangeVolume.D7); - const { getTradingAprOfPool } = useGetPoolsTradingApr(); const isAccountPools = variant === 'account-pools'; @@ -61,7 +59,7 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS const rows: PoolsTableRow[] = useMemo( () => pools.map(({ data, amount: accountLPTokenAmount }) => { - const { pooledCurrencies, lpToken, rewardAmountsYearly, totalSupply, isEmpty } = data; + const { pooledCurrencies, lpToken, totalSupply, isEmpty } = data; const poolName = ( ; + const apr = ( + onRowAction?.(lpToken.ticker as Key)} + /> + ); // TODO: revert alignItems prop when `sevenDayVolume` is adressed const totalLiquidity = ; @@ -105,7 +107,7 @@ const PoolsTable = ({ variant, pools, onRowAction, title }: PoolsTableProps): JS accountLiquidity }; }), - [getDexTotalVolumeUSD, isAccountPools, pools, prices, variant, getTradingAprOfPool] + [getDexTotalVolumeUSD, isAccountPools, onRowAction, pools, prices, variant] ); return ( diff --git a/src/components/ReceivableAssets/index.tsx b/src/components/ReceivableAssets/index.tsx index 9c4fecef5f..5d2501e044 100644 --- a/src/components/ReceivableAssets/index.tsx +++ b/src/components/ReceivableAssets/index.tsx @@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatNumber, formatUSD } from '@/common/utils/utils'; import { CoinIcon, Dd, Dl, DlGroup, Dt, Flex, P } from '@/component-library'; +import { Prices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; type ReceivableAssetsProps = { assetAmounts: MonetaryAmount[]; diff --git a/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx index fb1407b9b2..e6bd8b1b1c 100644 --- a/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx +++ b/src/components/TransactionFeeDetails/TransactionFeeDetails.tsx @@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'; import { displayMonetaryAmountInUSDFormat, formatUSD } from '@/common/utils/utils'; import { Alert, Flex } from '@/component-library'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { UseFeeEstimateResult } from '@/hooks/transaction/types/hook'; +import { SelectCurrencyFilter, useSelectCurrency } from '@/hooks/use-select-currency'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { UseFeeEstimateResult } from '@/utils/hooks/transaction/types/hook'; -import { SelectCurrencyFilter, useSelectCurrency } from '@/utils/hooks/use-select-currency'; import { TransactionDetails, diff --git a/src/components/TransactionModal/TransactionModal.tsx b/src/components/TransactionModal/TransactionModal.tsx index 2ae9d82102..adc24eb8b2 100644 --- a/src/components/TransactionModal/TransactionModal.tsx +++ b/src/components/TransactionModal/TransactionModal.tsx @@ -17,8 +17,8 @@ import { P, TextLink } from '@/component-library'; +import { TransactionStatus } from '@/hooks/transaction/types'; import { NotificationToastType, useNotifications } from '@/utils/context/Notifications'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; import { StyledCard, StyledCheckCircle, StyledXCircle } from './TransactionModal.style'; diff --git a/src/components/TransactionToast/TransactionToast.styles.tsx b/src/components/TransactionToast/TransactionToast.styles.tsx deleted file mode 100644 index 11a85da6e7..0000000000 --- a/src/components/TransactionToast/TransactionToast.styles.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import styled from 'styled-components'; - -import { Flex, ProgressBar, theme } from '@/component-library'; - -const StyledWrapper = styled(Flex)` - padding: ${theme.spacing.spacing4}; -`; - -const StyledProgressBar = styled(ProgressBar)` - margin-top: ${theme.spacing.spacing4}; -`; - -export { StyledProgressBar, StyledWrapper }; diff --git a/src/components/TransactionToast/TransactionToast.tsx b/src/components/TransactionToast/TransactionToast.tsx deleted file mode 100644 index fc413baba1..0000000000 --- a/src/components/TransactionToast/TransactionToast.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import { useHover } from '@react-aria/interactions'; -import { mergeProps } from '@react-aria/utils'; -import { TFunction } from 'i18next'; -import { useTranslation } from 'react-i18next'; -import { useDispatch } from 'react-redux'; - -import { CheckCircle, XCircle } from '@/assets/icons'; -import { updateTransactionModal } from '@/common/actions/general.actions'; -import { CTA, CTALink, Divider, Flex, FlexProps, LoadingSpinner, P } from '@/component-library'; -import { TransactionStatus } from '@/utils/hooks/transaction/types'; -import { useCountdown } from '@/utils/hooks/use-countdown'; - -import { StyledProgressBar, StyledWrapper } from './TransactionToast.styles'; - -const loadingSpinner = ; - -const getData = (t: TFunction, variant: TransactionStatus) => - ({ - [TransactionStatus.CONFIRM]: { - title: t('transaction.confirm_transaction'), - icon: loadingSpinner - }, - [TransactionStatus.SUBMITTING]: { - title: t('transaction.transaction_processing'), - icon: loadingSpinner - }, - [TransactionStatus.SUCCESS]: { - title: t('transaction.transaction_successful'), - icon: - }, - [TransactionStatus.ERROR]: { - title: t('transaction.transaction_failed'), - icon: - } - }[variant]); - -type Props = { - variant?: TransactionStatus; - description?: string; - url?: string; - errorMessage?: string; - timeout?: number; - onDismiss?: () => void; -}; - -type InheritAttrs = Omit; - -type TransactionToastProps = Props & InheritAttrs; - -const TransactionToast = ({ - variant = TransactionStatus.SUCCESS, - timeout = 8000, - url, - description, - onDismiss, - errorMessage, - ...props -}: TransactionToastProps): JSX.Element => { - const { t } = useTranslation(); - const dispatch = useDispatch(); - - const showCountdown = variant === TransactionStatus.SUCCESS || variant === TransactionStatus.ERROR; - - const { value: countdown, start, stop } = useCountdown({ - timeout, - disabled: !showCountdown, - onEndCountdown: onDismiss - }); - - const { hoverProps } = useHover({ - onHoverStart: stop, - onHoverEnd: start, - isDisabled: !showCountdown - }); - - const handleViewDetails = () => { - dispatch(updateTransactionModal(true, { variant: TransactionStatus.ERROR, description, errorMessage })); - onDismiss?.(); - }; - - const { title, icon } = getData(t, variant); - - return ( - - - - {icon} - - -

- {title} -

- {description && ( -

- {description} -

- )} - - - {showCountdown && ( - - )} - - {(url || errorMessage) && ( - <> - {url && ( - - View Subscan - - )} - {errorMessage && !url && ( - - View Details - - )} - - - )} - - Dismiss - - - - ); -}; - -export { TransactionToast }; -export type { TransactionToastProps }; diff --git a/src/components/TransactionToast/index.tsx b/src/components/TransactionToast/index.tsx deleted file mode 100644 index 36ce2db462..0000000000 --- a/src/components/TransactionToast/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export type { TransactionToastProps } from './TransactionToast'; -export { TransactionToast } from './TransactionToast'; diff --git a/src/components/ViewRequestDetailsLink/index.tsx b/src/components/ViewRequestDetailsLink/index.tsx deleted file mode 100644 index 17f9a86edf..0000000000 --- a/src/components/ViewRequestDetailsLink/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { shortAddress } from '@/common/utils/utils'; -import InterlayRouterLink from '@/legacy-components/UI/InterlayRouterLink'; -import { TXType } from '@/types/general.d'; -import { PAGES } from '@/utils/constants/links'; - -interface Props { - id: string; - txType: `${TXType}`; -} - -const ViewRequestDetailsLink = ({ id, txType }: Props): JSX.Element => { - const path = `${PAGES.TX}/${txType}/${id}`; - - return ( - - {shortAddress(id)} - - ); -}; - -export default ViewRequestDetailsLink; diff --git a/src/components/index.tsx b/src/components/index.tsx index 656b8d6457..6069e639c8 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,7 @@ export type { AccountSelectProps } from './AccountSelect'; export { AccountSelect } from './AccountSelect'; +export type { ApyDetailsGroupItemProps, ApyDetailsGroupProps, ApyDetailsProps } from './ApyDetails'; +export { ApyDetails, ApyDetailsGroup, ApyDetailsGroupItem } from './ApyDetails'; export type { AuthCTAProps } from './AuthCTA'; export { AuthCTA } from './AuthCTA'; export type { AuthModalProps, SignTermsModalProps } from './AuthModal'; @@ -10,8 +12,12 @@ export type { FundWalletProps } from './FundWallet'; export { FundWallet } from './FundWallet'; export type { IsAuthenticatedProps } from './IsAuthenticated'; export { IsAuthenticated } from './IsAuthenticated'; +export { Layout } from './Layout'; export type { LoanPositionsTableProps } from './LoanPositionsTable'; +export type { LoanApyCellProps } from './LoanPositionsTable'; export { LoanPositionsTable } from './LoanPositionsTable'; +export { LoanApyCell } from './LoanPositionsTable'; +export { MainContainer } from './MainContainer'; export type { NotificationsPopoverProps } from './NotificationsPopover'; export { NotificationsPopover } from './NotificationsPopover'; export type { NotificationToastProps, TransactionToastProps } from './NotificationToast'; @@ -28,3 +34,4 @@ export { ToastContainer } from './ToastContainer'; export * from './TransactionDetails'; export type { TransactionFeeDetailsProps } from './TransactionFeeDetails'; export { TransactionFeeDetails } from './TransactionFeeDetails'; +export { TransactionModal } from './TransactionModal'; diff --git a/src/config/links.ts b/src/config/links.ts index 91f0850576..f4d6699528 100644 --- a/src/config/links.ts +++ b/src/config/links.ts @@ -26,8 +26,11 @@ const BANXA_LINK = 'http://checkout.banxa.com/'; const GEOBLOCK_API_ENDPOINT = '/check_access'; const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock'; +const FORMS_STRATEGIES_LINK = 'https://forms.gle/Ue7NQ81j2u5oNDey6'; + export { BANXA_LINK, + FORMS_STRATEGIES_LINK, GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK, INTERLAY_COMPANY_LINK, diff --git a/src/utils/hooks/api/amm/use-get-account-pools.tsx b/src/hooks/api/amm/use-get-account-pools.tsx similarity index 97% rename from src/utils/hooks/api/amm/use-get-account-pools.tsx rename to src/hooks/api/amm/use-get-account-pools.tsx index f708a90b43..41687136e6 100644 --- a/src/utils/hooks/api/amm/use-get-account-pools.tsx +++ b/src/hooks/api/amm/use-get-account-pools.tsx @@ -5,9 +5,9 @@ import Big from 'big.js'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; +import { Prices, useGetPrices } from '@/hooks/api/use-get-prices'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; import useAccountId from '../../use-account-id'; import { useGetLiquidityPools } from './use-get-liquidity-pools'; diff --git a/src/utils/hooks/api/amm/use-get-liquidity-pools.tsx b/src/hooks/api/amm/use-get-liquidity-pools.tsx similarity index 100% rename from src/utils/hooks/api/amm/use-get-liquidity-pools.tsx rename to src/hooks/api/amm/use-get-liquidity-pools.tsx diff --git a/src/utils/hooks/api/bridge/use-get-issue-data.tsx b/src/hooks/api/bridge/use-get-issue-data.tsx similarity index 100% rename from src/utils/hooks/api/bridge/use-get-issue-data.tsx rename to src/hooks/api/bridge/use-get-issue-data.tsx diff --git a/src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx b/src/hooks/api/bridge/use-get-issue-request-limits.tsx similarity index 100% rename from src/utils/hooks/api/bridge/use-get-issue-request-limits.tsx rename to src/hooks/api/bridge/use-get-issue-request-limits.tsx diff --git a/src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx b/src/hooks/api/bridge/use-get-max-burnable-tokens.tsx similarity index 100% rename from src/utils/hooks/api/bridge/use-get-max-burnable-tokens.tsx rename to src/hooks/api/bridge/use-get-max-burnable-tokens.tsx diff --git a/src/utils/hooks/api/bridge/use-get-redeem-data.tsx b/src/hooks/api/bridge/use-get-redeem-data.tsx similarity index 100% rename from src/utils/hooks/api/bridge/use-get-redeem-data.tsx rename to src/hooks/api/bridge/use-get-redeem-data.tsx diff --git a/src/utils/hooks/api/bridge/use-get-vaults.tsx b/src/hooks/api/bridge/use-get-vaults.tsx similarity index 100% rename from src/utils/hooks/api/bridge/use-get-vaults.tsx rename to src/hooks/api/bridge/use-get-vaults.tsx diff --git a/src/utils/hooks/api/escrow/use-get-account-staking-data.tsx b/src/hooks/api/escrow/use-get-account-staking-data.tsx similarity index 100% rename from src/utils/hooks/api/escrow/use-get-account-staking-data.tsx rename to src/hooks/api/escrow/use-get-account-staking-data.tsx diff --git a/src/utils/hooks/api/escrow/use-get-account-voting-balance.tsx b/src/hooks/api/escrow/use-get-account-voting-balance.tsx similarity index 100% rename from src/utils/hooks/api/escrow/use-get-account-voting-balance.tsx rename to src/hooks/api/escrow/use-get-account-voting-balance.tsx diff --git a/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx b/src/hooks/api/loans/use-get-account-lending-statistics.tsx similarity index 81% rename from src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx rename to src/hooks/api/loans/use-get-account-lending-statistics.tsx index 3facffc723..88d750d77f 100644 --- a/src/utils/hooks/api/loans/use-get-account-lending-statistics.tsx +++ b/src/hooks/api/loans/use-get-account-lending-statistics.tsx @@ -1,23 +1,15 @@ -import { - BorrowPosition, - CollateralPosition, - CurrencyExt, - LendingStats, - LoanAsset, - TickerToData -} from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; +import { TickerToData } from '@interlay/interbtc-api'; import Big from 'big.js'; import { useMemo } from 'react'; import { convertMonetaryAmountToValueInUSD, convertMonetaryBtcToUSD } from '@/common/utils/utils'; +import { useGetLoanAssets } from '@/hooks/api/loans/use-get-loan-assets'; +import { BorrowPosition, CollateralPosition, LendingStats, LoanAsset } from '@/types/loans'; import { getSubsidyRewardApy } from '@/utils/helpers/loans'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetLoanAssets } from '@/utils/hooks/api/loans/use-get-loan-assets'; import { Prices, useGetPrices } from '../use-get-prices'; import { useGetAccountPositions } from './use-get-account-positions'; -import { useGetAccountSubsidyRewards } from './use-get-account-subsidy-rewards'; interface AccountLendingStatistics extends LendingStats { supplyAmountUSD: Big; @@ -78,12 +70,12 @@ const getAccountPositionsStats = ( assets: TickerToData, lendPositions: CollateralPosition[], borrowPositions: BorrowPosition[], - subsidyRewards: MonetaryAmount, prices: Prices, lendingStats: LendingStats ): AccountLendingStatistics => { const { totalLentBtc, totalBorrowedBtc, totalCollateralBtc } = lendingStats; // Convert from BTC to USD values. + const supplyAmountUSD = convertMonetaryBtcToUSD(totalLentBtc, prices); const borrowAmountUSD = convertMonetaryBtcToUSD(totalBorrowedBtc, prices); const collateralizedAmountUSD = convertMonetaryBtcToUSD(totalCollateralBtc, prices); @@ -109,8 +101,6 @@ const useGetAccountLendingStatistics = (): UseGetAccountLendingStatistics => { const prices = useGetPrices(); - const { data: subsidyRewards, refetch: subsidyRewardsRefetch } = useGetAccountSubsidyRewards(); - const lendingStats = useMemo(() => { if (!lendPositions || !borrowPositions || !loanAssets) { return undefined; @@ -119,26 +109,18 @@ const useGetAccountLendingStatistics = (): UseGetAccountLendingStatistics => { }, [lendPositions, borrowPositions, loanAssets]); const statistics = useMemo(() => { - if (!loanAssets || !lendPositions || !borrowPositions || !subsidyRewards || !prices || !lendingStats) { + if (!loanAssets || !lendPositions || !borrowPositions || !prices || !lendingStats) { return undefined; } - return getAccountPositionsStats( - loanAssets, - lendPositions, - borrowPositions, - subsidyRewards.total, - prices, - lendingStats - ); - }, [lendPositions, borrowPositions, prices, subsidyRewards, loanAssets, lendingStats]); + return getAccountPositionsStats(loanAssets, lendPositions, borrowPositions, prices, lendingStats); + }, [lendPositions, borrowPositions, prices, loanAssets, lendingStats]); return { data: statistics, refetch: () => { positionsRefetch(); loanAssetsRefetch(); - subsidyRewardsRefetch(); } }; }; diff --git a/src/hooks/api/loans/use-get-account-positions-earnings.tsx b/src/hooks/api/loans/use-get-account-positions-earnings.tsx new file mode 100644 index 0000000000..fe59c2173d --- /dev/null +++ b/src/hooks/api/loans/use-get-account-positions-earnings.tsx @@ -0,0 +1,96 @@ +import { CurrencyExt, newMonetaryAmount, TickerToData } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; +import { gql, GraphQLClient } from 'graphql-request'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { SQUID_URL } from '@/constants'; +import { useWallet } from '@/hooks/use-wallet'; +import { CollateralPosition } from '@/types/loans'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +type GetAccountPositionsEarningsData = TickerToData>; + +const graphQLClient = new GraphQLClient(SQUID_URL, { + headers: { + 'Content-Type': 'application/json' + } +}); + +const getEarnedAmountQuery = (account: string, currencies: Array) => gql` +query loanDeposits { + ${currencies + .map( + (ticker) => `${ticker}: loanDepositsByAccountAndSymbol(symbol: "${ticker}", userParachainAddress: "${account}") { + sumDeposits + sumWithdrawals + } + ` + ) + .join(',')} +} + +`; + +const getEarnedAmountByTicker = async ( + account: string, + lendPositions: Array +): Promise => { + if (!lendPositions.length) { + return undefined; + } + + const query = getEarnedAmountQuery( + account, + lendPositions.map(({ amount }) => amount.currency.ticker) + ); + + const lendingDepositsAndWithdrawals = await graphQLClient.request(query); + + return lendPositions.reduce((acc, position) => { + const { currency } = position.amount; + const { sumDeposits, sumWithdrawals } = lendingDepositsAndWithdrawals[currency.ticker]; + + const suppliedAmount = Big(sumDeposits).sub(sumWithdrawals); + const suppliedMonetaryAmount = newMonetaryAmount(suppliedAmount, currency); + + return { ...acc, [currency.ticker]: position.amount.sub(suppliedMonetaryAmount) }; + }, {}); +}; + +type UseGetAccountPositionsEarningsResult = { + isLoading: boolean; + getPositionEarnings: (ticker: string) => MonetaryAmount | undefined; + data: GetAccountPositionsEarningsData | undefined; + refetch: () => void; +}; + +const useGetAccountPositionsEarnings = ( + lendPositions: CollateralPosition[] | undefined +): UseGetAccountPositionsEarningsResult => { + const { account } = useWallet(); + + const { refetch, isLoading, data, error } = useQuery({ + queryKey: ['loan-earnings', account], + queryFn: () => lendPositions && account && getEarnedAmountByTicker(account.toString(), lendPositions), + enabled: !!lendPositions && !!account, + refetchOnWindowFocus: false, + refetchInterval: REFETCH_INTERVAL.MINUTE + }); + + useErrorHandler(error); + + const getPositionEarnings = useCallback((ticker: string) => data?.[ticker], [data]); + + return { + isLoading, + data, + refetch, + getPositionEarnings + }; +}; + +export { useGetAccountPositionsEarnings }; +export type { GetAccountPositionsEarningsData, UseGetAccountPositionsEarningsResult }; diff --git a/src/hooks/api/loans/use-get-account-positions.tsx b/src/hooks/api/loans/use-get-account-positions.tsx new file mode 100644 index 0000000000..6b745db598 --- /dev/null +++ b/src/hooks/api/loans/use-get-account-positions.tsx @@ -0,0 +1,132 @@ +import { CurrencyExt, isCurrencyEqual } from '@interlay/interbtc-api'; +import { AccountId } from '@polkadot/types/interfaces'; +import { useCallback } from 'react'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { BorrowPosition, CollateralPosition } from '@/types/loans'; +import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; + +import useAccountId from '../../use-account-id'; +import { useGetAccountPositionsEarnings } from './use-get-account-positions-earnings'; + +const getLendPositionsOfAccount = async (accountId: AccountId): Promise> => + window.bridge.loans.getLendPositionsOfAccount(accountId); + +interface UseGetLendPositionsOfAccountResult { + isLoading: boolean; + data: Array | undefined; + refetch: () => void; +} + +const useGetLendPositionsOfAccount = (): UseGetLendPositionsOfAccountResult => { + const accountId = useAccountId(); + + const { data, error, refetch, isLoading } = useQuery({ + queryKey: ['getLendPositionsOfAccount', accountId], + queryFn: () => accountId && getLendPositionsOfAccount(accountId), + enabled: !!accountId, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL + }); + + useErrorHandler(error); + + return { data, isLoading, refetch }; +}; + +interface UseGetBorrowPositionsOfAccountResult { + isLoading: boolean; + data: Array | undefined; + refetch: () => void; +} + +const useGetBorrowPositionsOfAccount = (): UseGetBorrowPositionsOfAccountResult => { + const accountId = useAccountId(); + + const { data, error, refetch, isLoading } = useQuery({ + queryKey: ['getBorrowPositionsOfAccount', accountId], + queryFn: async () => { + if (!accountId) { + throw new Error('Something went wrong!'); + } + + return await window.bridge.loans.getBorrowPositionsOfAccount(accountId); + }, + enabled: !!accountId, + refetchInterval: BLOCKTIME_REFETCH_INTERVAL + }); + + useErrorHandler(error); + + return { data, isLoading, refetch }; +}; + +interface AccountPositionsData { + lendPositions: CollateralPosition[]; + borrowPositions: BorrowPosition[]; +} + +type UseGetAccountPositionsResult = { + isLoading: boolean; + getBorrowPosition: (currency: CurrencyExt) => BorrowPosition | undefined; + getLendPosition: (currency: CurrencyExt) => CollateralPosition | undefined; + data: Partial & { + hasCollateral: boolean; + }; + refetch: () => void; +}; + +const useGetAccountPositions = (): UseGetAccountPositionsResult => { + const { + data: lendPositionsWithoutEarnings, + isLoading: isLendPositionsLoading, + refetch: lendPositionsRefetch + } = useGetLendPositionsOfAccount(); + + const { + data: borrowPositions, + isLoading: isBorrowPositionsLoading, + refetch: borrowPositionsRefetch + } = useGetBorrowPositionsOfAccount(); + + const { getPositionEarnings, isLoading: isAccountEarningsLoading } = useGetAccountPositionsEarnings( + lendPositionsWithoutEarnings + ); + + const lendPositions: CollateralPosition[] | undefined = lendPositionsWithoutEarnings?.map((position) => ({ + ...position, + earnedAmount: getPositionEarnings(position.amount.currency.ticker) + })); + + const getBorrowPosition = useCallback( + (currency: CurrencyExt) => { + return borrowPositions?.find((position) => isCurrencyEqual(position.amount.currency, currency)); + }, + [borrowPositions] + ); + + const getLendPosition = useCallback( + (currency: CurrencyExt) => { + return lendPositions?.find((position) => isCurrencyEqual(position.amount.currency, currency)); + }, + [lendPositions] + ); + + return { + isLoading: isLendPositionsLoading || isBorrowPositionsLoading || isAccountEarningsLoading, + data: { + borrowPositions: borrowPositions, + lendPositions: lendPositions, + hasCollateral: !!lendPositions?.find((position) => position.isCollateral) + }, + refetch: () => { + lendPositionsRefetch(); + borrowPositionsRefetch(); + }, + getBorrowPosition, + getLendPosition + }; +}; + +export { useGetAccountPositions }; +export type { AccountPositionsData }; diff --git a/src/utils/hooks/api/loans/use-get-account-subsidy-rewards.tsx b/src/hooks/api/loans/use-get-account-subsidy-rewards.tsx similarity index 100% rename from src/utils/hooks/api/loans/use-get-account-subsidy-rewards.tsx rename to src/hooks/api/loans/use-get-account-subsidy-rewards.tsx diff --git a/src/utils/hooks/api/loans/use-get-loan-assets.tsx b/src/hooks/api/loans/use-get-loan-assets.tsx similarity index 84% rename from src/utils/hooks/api/loans/use-get-loan-assets.tsx rename to src/hooks/api/loans/use-get-loan-assets.tsx index d94d3d6559..1eb7247265 100644 --- a/src/utils/hooks/api/loans/use-get-loan-assets.tsx +++ b/src/hooks/api/loans/use-get-loan-assets.tsx @@ -5,12 +5,13 @@ import { useQuery } from 'react-query'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; interface UseGetLoansAssets { + isLoading: boolean; data: TickerToData | undefined; refetch: () => void; } const useGetLoanAssets = (): UseGetLoansAssets => { - const { data, error, refetch } = useQuery({ + const { data, error, refetch, isLoading } = useQuery({ queryKey: ['loan-assets'], queryFn: (): Promise> => window.bridge.loans.getLoanAssets(), refetchInterval: BLOCKTIME_REFETCH_INTERVAL @@ -18,7 +19,7 @@ const useGetLoanAssets = (): UseGetLoansAssets => { useErrorHandler(error); - return { data, refetch }; + return { isLoading, data, refetch }; }; export { useGetLoanAssets }; diff --git a/src/hooks/api/loans/use-get-loan-available-amounts.tsx b/src/hooks/api/loans/use-get-loan-available-amounts.tsx new file mode 100644 index 0000000000..a35a261b19 --- /dev/null +++ b/src/hooks/api/loans/use-get-loan-available-amounts.tsx @@ -0,0 +1,185 @@ +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { useCallback } from 'react'; + +import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { + BorrowAction, + BorrowPosition, + CollateralPosition, + LendAction, + LendingStats, + LoanAction, + LoanAsset +} from '@/types/loans'; +import { pickSmallerAmount } from '@/utils/helpers/currencies'; + +/** + * Get maximum amount of currency that user can borrow + * with currently provided collateral and liquidity. + * @param {LoanAsset} asset The asset to be withdrawn.s + * @param {LendingStats} lendingStats Object containing information about account's collateralization. + * @return {MonetaryAmount} maximum amount of currency that + * user can withdraw with currently provided collateral + */ +const getMaxBorrowableAmount = (asset: LoanAsset, lendingStats?: LendingStats): MonetaryAmount => { + if (lendingStats === undefined) { + return newMonetaryAmount(0, asset.currency); + } + const { exchangeRate } = asset; + + const { availableCapacity, currency, borrowCap, totalBorrows } = asset; + + const maxBorrowableCurrencyAmount = exchangeRate.toCounter(lendingStats.borrowLimitBtc); + const protocolLimitAmount = pickSmallerAmount(availableCapacity, borrowCap.sub(totalBorrows)); + const maxBorrowableAmount = pickSmallerAmount(protocolLimitAmount, maxBorrowableCurrencyAmount); + + if (maxBorrowableAmount.toBig().lte(0)) { + return newMonetaryAmount(0, currency); + } + + return maxBorrowableAmount; +}; + +const getMaxLendableAmount = (asset: LoanAsset): MonetaryAmount => { + const { totalLiquidity, supplyCap, currency, totalBorrows } = asset; + const amountInProtocol = totalLiquidity.sub(totalBorrows); + const maximumAmountToSupply = supplyCap.sub(amountInProtocol); + + if (maximumAmountToSupply.toBig().lte(0)) { + return newMonetaryAmount(0, currency); + } + return maximumAmountToSupply; +}; + +const getMaxWithdrawableAmountByBorrowLimit = ( + asset: LoanAsset, + position: CollateralPosition, + lendingStats: LendingStats +): MonetaryAmount => { + const { amount, isCollateral, vaultCollateralAmount } = position; + const { collateralThreshold, exchangeRate, currency } = asset; + const { borrowLimitBtc } = lendingStats; + + if (!isCollateral) { + // MEMO: If the position is not used as loan collateral it can be used + // as vault collateral. + return amount.sub(vaultCollateralAmount); + } + + const positionAmountBtc = exchangeRate.toBase(amount); + const positionCollateralValueBtc = positionAmountBtc.mul(collateralThreshold); + + if (positionCollateralValueBtc.lt(borrowLimitBtc)) { + return amount; + } + + const maxWithdrawable = exchangeRate.toCounter(borrowLimitBtc).div(collateralThreshold).toBig(); + + return newMonetaryAmount(maxWithdrawable, currency, true); +}; + +/** + * Get maximum amount of currency that user can withdraw + * with currently provided collateral and liquidity. + * @param {LoanAsset} asset The asset to be withdrawn. + * @param {CollateralPosition} position The position to be withdrew. + * @param {LendingStats} lendingStats Object containing information about account's collateralization. + * @return {MonetaryAmount | undefined} maximum amount of currency that + * user can withdraw with currently provided collateral + */ +const getMaxWithdrawableAmount = ( + asset: LoanAsset, + position?: CollateralPosition, + lendingStats?: LendingStats +): MonetaryAmount => { + const { currency, availableCapacity } = asset; + + if (position === undefined || lendingStats === undefined) { + return newMonetaryAmount(0, currency); + } + + const maxWithdrawableAmountByBorrowLimit = getMaxWithdrawableAmountByBorrowLimit(asset, position, lendingStats); + + return pickSmallerAmount(maxWithdrawableAmountByBorrowLimit, availableCapacity); +}; + +const getMaxCalculatedAmount = ( + action: LoanAction, + asset: LoanAsset, + position?: CollateralPosition | BorrowPosition, + lendingStats?: LendingStats +): MonetaryAmount => { + switch (action) { + case 'lend': + return getMaxLendableAmount(asset); + case 'withdraw': + return getMaxWithdrawableAmount(asset, position as CollateralPosition, lendingStats); + case 'borrow': + return getMaxBorrowableAmount(asset, lendingStats); + case 'repay': + return position + ? position.amount.add((position as BorrowPosition).accumulatedDebt) + : newMonetaryAmount(0, asset.currency); + } +}; + +type UseGetLoanAvailableAmountsData = { + minAmount: MonetaryAmount; + maxAmount: MonetaryAmount; +}; + +type UseGetLoanAvailableAmountsResult = { + isMaxAmount: (amount: MonetaryAmount) => boolean; + data: UseGetLoanAvailableAmountsData; +}; + +const useGetLoanAvailableAmounts = ( + action: BorrowAction | LendAction, + asset: LoanAsset, + position?: CollateralPosition | BorrowPosition +): UseGetLoanAvailableAmountsResult => { + const { getAvailableBalance } = useGetBalances(); + const { data: statistics } = useGetAccountLendingStatistics(); + + const maxCalculatedAmount = getMaxCalculatedAmount(action, asset, position, statistics); + + const availableBalance = getAvailableBalance(asset.currency.ticker) || newMonetaryAmount(0, asset.currency); + + const minAmount = newMonetaryAmount(1, asset.currency); + + const isMaxAmount = useCallback( + (amount: MonetaryAmount) => { + if (action === 'withdraw') { + return !!position?.amount.eq(amount); + } + + return amount.eq(maxCalculatedAmount); + }, + [action, maxCalculatedAmount, position?.amount] + ); + + if (action === 'borrow' || action === 'withdraw') { + return { + isMaxAmount, + data: { + minAmount, + maxAmount: maxCalculatedAmount + } + }; + } + + const availableMaxAmount = maxCalculatedAmount.gt(availableBalance) ? availableBalance : maxCalculatedAmount; + + return { + isMaxAmount, + data: { + minAmount, + maxAmount: availableMaxAmount + } + }; +}; + +export { useGetLoanAvailableAmounts }; +export type { UseGetLoanAvailableAmountsData, UseGetLoanAvailableAmountsResult }; diff --git a/src/utils/hooks/api/oracle/use-get-oracle-currencies.ts b/src/hooks/api/oracle/use-get-oracle-currencies.ts similarity index 100% rename from src/utils/hooks/api/oracle/use-get-oracle-currencies.ts rename to src/hooks/api/oracle/use-get-oracle-currencies.ts diff --git a/src/utils/hooks/api/oracle/use-get-oracle-status.ts b/src/hooks/api/oracle/use-get-oracle-status.ts similarity index 100% rename from src/utils/hooks/api/oracle/use-get-oracle-status.ts rename to src/hooks/api/oracle/use-get-oracle-status.ts diff --git a/src/utils/hooks/api/tokens/use-balances-subscription.tsx b/src/hooks/api/tokens/use-balances-subscription.tsx similarity index 97% rename from src/utils/hooks/api/tokens/use-balances-subscription.tsx rename to src/hooks/api/tokens/use-balances-subscription.tsx index ce61fa007b..2b7aebb469 100644 --- a/src/utils/hooks/api/tokens/use-balances-subscription.tsx +++ b/src/hooks/api/tokens/use-balances-subscription.tsx @@ -4,8 +4,8 @@ import { QueryClient, useQueryClient } from 'react-query'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; import { useSubstrateSecureState } from '@/lib/substrate'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; import { BalanceData, getBalancesQueryKey } from './use-get-balances'; diff --git a/src/utils/hooks/api/tokens/use-get-balances.tsx b/src/hooks/api/tokens/use-get-balances.tsx similarity index 94% rename from src/utils/hooks/api/tokens/use-get-balances.tsx rename to src/hooks/api/tokens/use-get-balances.tsx index d975710a09..3b95e2d15b 100644 --- a/src/utils/hooks/api/tokens/use-get-balances.tsx +++ b/src/hooks/api/tokens/use-get-balances.tsx @@ -6,10 +6,10 @@ import { useQuery, UseQueryResult } from 'react-query'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import useAccountId from '@/hooks/use-account-id'; import { useSubstrateSecureState } from '@/lib/substrate'; import { REFETCH_INTERVAL } from '@/utils/constants/api'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import useAccountId from '@/utils/hooks/use-account-id'; type BalanceData = { [ticker: string]: ChainBalance; diff --git a/src/utils/hooks/api/use-get-collateral-currencies-data.tsx b/src/hooks/api/use-get-collateral-currencies-data.tsx similarity index 100% rename from src/utils/hooks/api/use-get-collateral-currencies-data.tsx rename to src/hooks/api/use-get-collateral-currencies-data.tsx diff --git a/src/utils/hooks/api/use-get-collateral-currencies.tsx b/src/hooks/api/use-get-collateral-currencies.tsx similarity index 100% rename from src/utils/hooks/api/use-get-collateral-currencies.tsx rename to src/hooks/api/use-get-collateral-currencies.tsx diff --git a/src/utils/hooks/api/use-get-currencies.tsx b/src/hooks/api/use-get-currencies.tsx similarity index 100% rename from src/utils/hooks/api/use-get-currencies.tsx rename to src/hooks/api/use-get-currencies.tsx diff --git a/src/utils/hooks/api/use-get-dex-volume.tsx b/src/hooks/api/use-get-dex-volume.tsx similarity index 100% rename from src/utils/hooks/api/use-get-dex-volume.tsx rename to src/hooks/api/use-get-dex-volume.tsx diff --git a/src/utils/hooks/api/use-get-exchange-rate.tsx b/src/hooks/api/use-get-exchange-rate.tsx similarity index 100% rename from src/utils/hooks/api/use-get-exchange-rate.tsx rename to src/hooks/api/use-get-exchange-rate.tsx diff --git a/src/utils/hooks/api/use-get-identities.ts b/src/hooks/api/use-get-identities.ts similarity index 100% rename from src/utils/hooks/api/use-get-identities.ts rename to src/hooks/api/use-get-identities.ts diff --git a/src/utils/hooks/api/use-get-pools-trading-apr.tsx b/src/hooks/api/use-get-pools-trading-apr.tsx similarity index 100% rename from src/utils/hooks/api/use-get-pools-trading-apr.tsx rename to src/hooks/api/use-get-pools-trading-apr.tsx diff --git a/src/utils/hooks/api/use-get-prices.tsx b/src/hooks/api/use-get-prices.tsx similarity index 100% rename from src/utils/hooks/api/use-get-prices.tsx rename to src/hooks/api/use-get-prices.tsx diff --git a/src/utils/hooks/api/use-get-vesting-data.tsx b/src/hooks/api/use-get-vesting-data.tsx similarity index 100% rename from src/utils/hooks/api/use-get-vesting-data.tsx rename to src/hooks/api/use-get-vesting-data.tsx diff --git a/src/utils/hooks/api/vaults/get-vault-data.ts b/src/hooks/api/vaults/get-vault-data.ts similarity index 100% rename from src/utils/hooks/api/vaults/get-vault-data.ts rename to src/hooks/api/vaults/get-vault-data.ts diff --git a/src/utils/hooks/api/vaults/use-get-available-vaults.tsx b/src/hooks/api/vaults/use-get-available-vaults.tsx similarity index 100% rename from src/utils/hooks/api/vaults/use-get-available-vaults.tsx rename to src/hooks/api/vaults/use-get-available-vaults.tsx diff --git a/src/utils/hooks/api/vaults/use-get-vault-data.tsx b/src/hooks/api/vaults/use-get-vault-data.tsx similarity index 95% rename from src/utils/hooks/api/vaults/use-get-vault-data.tsx rename to src/hooks/api/vaults/use-get-vault-data.tsx index 4d72612f8c..74e14d086b 100644 --- a/src/utils/hooks/api/vaults/use-get-vault-data.tsx +++ b/src/hooks/api/vaults/use-get-vault-data.tsx @@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'; // import { useErrorHandler } from 'react-error-boundary'; import { useQueries, UseQueryResult } from 'react-query'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useGetVaults } from '@/utils/hooks/api/vaults/use-get-vaults'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { useGetVaults } from '@/hooks/api/vaults/use-get-vaults'; import { getVaultData, VaultData } from './get-vault-data'; diff --git a/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx b/src/hooks/api/vaults/use-get-vault-transactions.tsx similarity index 95% rename from src/utils/hooks/api/vaults/use-get-vault-transactions.tsx rename to src/hooks/api/vaults/use-get-vault-transactions.tsx index 37143436bf..806d90c282 100644 --- a/src/utils/hooks/api/vaults/use-get-vault-transactions.tsx +++ b/src/hooks/api/vaults/use-get-vault-transactions.tsx @@ -5,12 +5,12 @@ import { useQuery } from 'react-query'; import { formatDateTimePrecise } from '@/common/utils/utils'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import issuesFetcher, { getIssueWithStatus, ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; import { useGetCurrencies } from '../use-get-currencies'; diff --git a/src/utils/hooks/api/vaults/use-get-vaults.tsx b/src/hooks/api/vaults/use-get-vaults.tsx similarity index 100% rename from src/utils/hooks/api/vaults/use-get-vaults.tsx rename to src/hooks/api/vaults/use-get-vaults.tsx diff --git a/src/utils/hooks/api/xcm/use-xcm-bridge.ts b/src/hooks/api/xcm/use-xcm-bridge.ts similarity index 70% rename from src/utils/hooks/api/xcm/use-xcm-bridge.ts rename to src/hooks/api/xcm/use-xcm-bridge.ts index 61543c9f42..23a17405bf 100644 --- a/src/utils/hooks/api/xcm/use-xcm-bridge.ts +++ b/src/hooks/api/xcm/use-xcm-bridge.ts @@ -10,9 +10,9 @@ import { firstValueFrom } from 'rxjs'; import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; import { XCM_ADAPTERS } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { Chains } from '@/types/chains'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { XCMEndpoints } from './xcm-endpoints'; @@ -52,7 +52,11 @@ const initXCMBridge = async () => { await firstValueFrom(XCMProvider.connectFromChain(chains, XCMEndpoints)); // Set Apis - await Promise.all(chains.map((chain: ChainName) => XCMBridge.findAdapter(chain).setApi(XCMProvider.getApi(chain)))); + await Promise.all( + chains.map((chain: ChainName) => { + return XCMBridge.findAdapter(chain).setApi(XCMProvider.getApi(chain)); + }) + ); return { provider: XCMProvider, bridge: XCMBridge }; }; @@ -64,7 +68,10 @@ const useXCMBridge = (): UseXCMBridge => { queryKey, queryFn: initXCMBridge, refetchInterval: false, - refetchOnWindowFocus: false + refetchOnWindowFocus: false, + refetchOnMount: false, + refetchOnReconnect: false, + staleTime: Infinity }); const { data, error } = queryResult; @@ -94,37 +101,48 @@ const useXCMBridge = (): UseXCMBridge => { const tokens = XCMBridge.router.getAvailableTokens({ from, to }); + // Input configs can only be returned when there is both an origin + // and a destination address. This may not always be the case, e.g. + // no connected wallet. + const getInputConfig = originAddress && destinationAddress; + const inputConfigs = await Promise.all( tokens.map(async (token) => { - const inputConfig = await firstValueFrom( - data.bridge.findAdapter(from).subscribeInputConfigs({ - to, - token, - address: destinationAddress, - signer: originAddress - }) - ); + const inputConfig = + getInputConfig && + (await firstValueFrom( + data.bridge.findAdapter(from).subscribeInputConfigs({ + to, + token, + address: destinationAddress, + signer: originAddress + }) + )); // TODO: resolve type mismatch with BaseCrossChainAdapter and remove `any` const originAdapter = data.bridge.findAdapter(from) as any; - const maxInputToBig = Big(inputConfig.maxInput.toString()); - const minInputToBig = Big(inputConfig.minInput.toString()); + const nativeToken = originAdapter.getNativeToken(); + + // Return 0 for all values if no input config data has been returned + const maxInputToBig = inputConfig ? Big(inputConfig.maxInput.toString()) : Big(0); + const minInputToBig = inputConfig ? Big(inputConfig.minInput.toString()) : Big(0); // Never show less than zero - const transferableBalance = inputConfig.maxInput.isLessThan(inputConfig.minInput) ? 0 : maxInputToBig; + const transferableBalance = + !inputConfig || inputConfig.maxInput.isLessThan(inputConfig?.minInput) ? '0' : maxInputToBig.toString(); const currency = XCMBridge.findAdapter(from).getToken(token, from); - - const nativeToken = originAdapter.getNativeToken(); - const amount = newMonetaryAmount(transferableBalance, (currency as unknown) as CurrencyExt, true); const balanceUSD = convertMonetaryAmountToValueInUSD(amount, getTokenPrice(prices, token)?.usd); - const originFee = atomicToBaseAmount(inputConfig.estimateFee, nativeToken as CurrencyExt); + const originFee = inputConfig + ? atomicToBaseAmount(inputConfig.estimateFee, nativeToken as CurrencyExt) + : atomicToBaseAmount(0, nativeToken as CurrencyExt); + const destFee = inputConfig ? inputConfig?.destFee.balance : 0; return { - balance: transferableBalance.toString(), + balance: transferableBalance, balanceUSD: formatUSD(balanceUSD || 0, { compact: true }), - destFee: inputConfig.destFee.balance, + destFee, originFee: `${originFee.toString()} ${nativeToken.symbol}`, minTransferAmount: minInputToBig, value: token diff --git a/src/utils/hooks/api/xcm/xcm-endpoints.ts b/src/hooks/api/xcm/xcm-endpoints.ts similarity index 100% rename from src/utils/hooks/api/xcm/xcm-endpoints.ts rename to src/hooks/api/xcm/xcm-endpoints.ts diff --git a/src/services/hooks/issue-requests.ts b/src/hooks/issue-requests.ts similarity index 93% rename from src/services/hooks/issue-requests.ts rename to src/hooks/issue-requests.ts index 662b9ba88e..11ab474e5a 100644 --- a/src/services/hooks/issue-requests.ts +++ b/src/hooks/issue-requests.ts @@ -3,11 +3,11 @@ import * as React from 'react'; import { useQuery } from 'react-query'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import { useSubstrateSecureState } from '@/lib/substrate'; import issuesFetcher, { getIssueWithStatus, ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { IssueRequest, IssueRequestWithStatusDecoded } from '@/types/issues.d'; const getManualIssueRequests = ( diff --git a/src/utils/hooks/transaction/extrinsics/extrinsics.ts b/src/hooks/transaction/extrinsics/extrinsics.ts similarity index 100% rename from src/utils/hooks/transaction/extrinsics/extrinsics.ts rename to src/hooks/transaction/extrinsics/extrinsics.ts diff --git a/src/utils/hooks/transaction/extrinsics/index.ts b/src/hooks/transaction/extrinsics/index.ts similarity index 100% rename from src/utils/hooks/transaction/extrinsics/index.ts rename to src/hooks/transaction/extrinsics/index.ts diff --git a/src/utils/hooks/transaction/extrinsics/lib.ts b/src/hooks/transaction/extrinsics/lib.ts similarity index 91% rename from src/utils/hooks/transaction/extrinsics/lib.ts rename to src/hooks/transaction/extrinsics/lib.ts index aed8b5b968..04950ac7a6 100644 --- a/src/utils/hooks/transaction/extrinsics/lib.ts +++ b/src/hooks/transaction/extrinsics/lib.ts @@ -66,6 +66,17 @@ const getLibExtrinsic = async (params: LibActions): Promise => { return window.bridge.loans.enableAsCollateral(...params.args); /* END - LOANS */ + /* START - STRATEGIES */ + case Transaction.STRATEGIES_DEPOSIT: + return window.bridge.loans.lend(...params.args); + case Transaction.STRATEGIES_WITHDRAW: + return window.bridge.loans.withdraw(...params.args); + case Transaction.STRATEGIES_ALL_WITHDRAW: { + const [underlyingCurrency] = params.args; + return window.bridge.loans.withdrawAll(underlyingCurrency); + } + /* END - STRATEGIES */ + /* START - VAULTS */ case Transaction.VAULTS_DEPOSIT_COLLATERAL: return window.bridge.vaults.depositCollateral(...params.args); diff --git a/src/utils/hooks/transaction/extrinsics/xcm.ts b/src/hooks/transaction/extrinsics/xcm.ts similarity index 100% rename from src/utils/hooks/transaction/extrinsics/xcm.ts rename to src/hooks/transaction/extrinsics/xcm.ts diff --git a/src/utils/hooks/transaction/hooks/use-fee-estimate.ts b/src/hooks/transaction/hooks/use-fee-estimate.ts similarity index 100% rename from src/utils/hooks/transaction/hooks/use-fee-estimate.ts rename to src/hooks/transaction/hooks/use-fee-estimate.ts diff --git a/src/utils/hooks/transaction/hooks/use-transaction-notifications.tsx b/src/hooks/transaction/hooks/use-transaction-notifications.tsx similarity index 100% rename from src/utils/hooks/transaction/hooks/use-transaction-notifications.tsx rename to src/hooks/transaction/hooks/use-transaction-notifications.tsx diff --git a/src/utils/hooks/transaction/hooks/use-transaction.ts b/src/hooks/transaction/hooks/use-transaction.ts similarity index 98% rename from src/utils/hooks/transaction/hooks/use-transaction.ts rename to src/hooks/transaction/hooks/use-transaction.ts index f10faa62c5..14e39be1b6 100644 --- a/src/utils/hooks/transaction/hooks/use-transaction.ts +++ b/src/hooks/transaction/hooks/use-transaction.ts @@ -9,6 +9,7 @@ import { useSubstrate } from '@/lib/substrate'; import { useGetLiquidityPools } from '../../api/amm/use-get-liquidity-pools'; import { useGetBalances } from '../../api/tokens/use-get-balances'; import { getExtrinsic, getStatus } from '../extrinsics'; +import { submitTransaction } from '../submission/submit'; import { Transaction, TransactionActions } from '../types'; import { TransactionResult, @@ -21,7 +22,6 @@ import { } from '../types/hook'; import { wrapWithTxFeeSwap } from '../utils/fee'; import { getActionData, getAmountWithFeeDeducted } from '../utils/params'; -import { submitTransaction } from '../utils/submit'; import { FeeEstimateResult, useFeeEstimate } from './use-fee-estimate'; import { useTransactionNotifications } from './use-transaction-notifications'; diff --git a/src/utils/hooks/transaction/index.ts b/src/hooks/transaction/index.ts similarity index 100% rename from src/utils/hooks/transaction/index.ts rename to src/hooks/transaction/index.ts diff --git a/src/hooks/transaction/submission/dry-run.ts b/src/hooks/transaction/submission/dry-run.ts new file mode 100644 index 0000000000..7942ff7fa6 --- /dev/null +++ b/src/hooks/transaction/submission/dry-run.ts @@ -0,0 +1,36 @@ +import { SubmittableExtrinsic } from '@polkadot/api/types'; + +import { getErrorMessage } from './error'; + +/** + * Dry-run signed submittable extrinsic if dry-running is enabled on RPC node. + * + * @throws If extrinsic execution failed during dry running. + * @param signedExtrinsic Extrinsic to be dry run. + * @returns {SubmittableExtrinsic} Dry-ran extrinsic. + */ + +const dryRun = async (signedExtrinsic: SubmittableExtrinsic<'promise'>): Promise> => { + // Dry-run if enabled on RPC node. + // Source: Polkadot.js, https://github.com/polkadot-js/api/blob/319535a1e938e89522ff18ef2d1cef66a5af597c/packages/api/src/submittable/createClass.ts#L110 + if (signedExtrinsic.hasDryRun) { + const dryRunResult = await window.bridge.api.rpc.system.dryRun(signedExtrinsic.toHex()); + + // If dry-running fails, code execution throws and extrinsic is not submitted. + if (dryRunResult.isErr) { + const error = dryRunResult.asErr; + const errMessage = error.toString(); + throw new Error(errMessage); + } + + // Handle dry-run result nested error. + if (dryRunResult.isOk && dryRunResult.asOk.isErr) { + const error = dryRunResult.asOk.asErr; + const errMessage = getErrorMessage(window.bridge.api, error); + throw new Error(errMessage); + } + } + return signedExtrinsic; +}; + +export { dryRun }; diff --git a/src/hooks/transaction/submission/error.ts b/src/hooks/transaction/submission/error.ts new file mode 100644 index 0000000000..2ae5913304 --- /dev/null +++ b/src/hooks/transaction/submission/error.ts @@ -0,0 +1,23 @@ +import { ApiPromise } from '@polkadot/api'; +import { DispatchError } from '@polkadot/types/interfaces'; + +const getErrorMessage = (api: ApiPromise, dispatchError: DispatchError): string => { + const { isModule, asModule, isBadOrigin } = dispatchError; + + // Runtime error in one of the parachain modules + if (isModule) { + // for module errors, we have the section indexed, lookup + const decoded = api.registry.findMetaError(asModule); + const { docs, name, section } = decoded; + return `The error code is ${section}.${name}. ${docs.join(' ')}.`; + } + + // Bad origin + if (isBadOrigin) { + return `The error is caused by using an incorrect account. The error code is BadOrigin ${dispatchError}.`; + } + + return `The error is ${dispatchError}.`; +}; + +export { getErrorMessage }; diff --git a/src/utils/hooks/transaction/utils/submit.ts b/src/hooks/transaction/submission/submit.ts similarity index 78% rename from src/utils/hooks/transaction/utils/submit.ts rename to src/hooks/transaction/submission/submit.ts index da4984cf2b..2eaa71bc9a 100644 --- a/src/utils/hooks/transaction/utils/submit.ts +++ b/src/hooks/transaction/submission/submit.ts @@ -1,12 +1,13 @@ import { ExtrinsicData } from '@interlay/interbtc-api'; import { ApiPromise } from '@polkadot/api'; import { AddressOrPair, SubmittableExtrinsic } from '@polkadot/api/types'; -import { DispatchError } from '@polkadot/types/interfaces'; import { ExtrinsicStatus } from '@polkadot/types/interfaces/author'; import { ISubmittableResult } from '@polkadot/types/types'; import { TransactionResult } from '../hooks/use-transaction'; import { TransactionEvents } from '../types'; +import { dryRun } from './dry-run'; +import { getErrorMessage } from './error'; type HandleTransactionResult = { result: ISubmittableResult; unsubscribe: () => void }; @@ -23,9 +24,12 @@ const handleTransaction = async ( return new Promise((resolve, reject) => { let unsubscribe: () => void; - (extrinsicData.extrinsic as SubmittableExtrinsic<'promise'>) - .signAndSend(account, { nonce: -1 }, callback) + // Extrinsic is signed at first and then we use the same signed extrinsic + // for dry-running and submission. + .signAsync(account, { nonce: -1 }) + .then(dryRun) + .then((signedExtrinsic) => signedExtrinsic.send(callback)) .then((unsub) => (unsubscribe = unsub)) .catch((error) => reject(error)); @@ -48,25 +52,6 @@ const handleTransaction = async ( }); }; -const getErrorMessage = (api: ApiPromise, dispatchError: DispatchError) => { - const { isModule, asModule, isBadOrigin } = dispatchError; - - // Runtime error in one of the parachain modules - if (isModule) { - // for module errors, we have the section indexed, lookup - const decoded = api.registry.findMetaError(asModule); - const { docs, name, section } = decoded; - return `The error code is ${section}.${name}. ${docs.join(' ')}.`; - } - - // Bad origin - if (isBadOrigin) { - return `The error is caused by using an incorrect account. The error code is BadOrigin ${dispatchError}.`; - } - - return `The error is ${dispatchError}.`; -}; - /** * Handles transaction submittion and error * @param {ApiPromise} api polkadot api wrapper diff --git a/src/utils/hooks/transaction/types/amm.ts b/src/hooks/transaction/types/amm.ts similarity index 94% rename from src/utils/hooks/transaction/types/amm.ts rename to src/hooks/transaction/types/amm.ts index 96d5482ed8..23d16d6bdd 100644 --- a/src/utils/hooks/transaction/types/amm.ts +++ b/src/hooks/transaction/types/amm.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface SwapAction { type: Transaction.AMM_SWAP; diff --git a/src/utils/hooks/transaction/types/escrow.ts b/src/hooks/transaction/types/escrow.ts similarity index 97% rename from src/utils/hooks/transaction/types/escrow.ts rename to src/hooks/transaction/types/escrow.ts index f64e85578b..211cfc762d 100644 --- a/src/utils/hooks/transaction/types/escrow.ts +++ b/src/hooks/transaction/types/escrow.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface EscrowCreateLockAction { type: Transaction.ESCROW_CREATE_LOCK; diff --git a/src/utils/hooks/transaction/types/hook.ts b/src/hooks/transaction/types/hook.ts similarity index 100% rename from src/utils/hooks/transaction/types/hook.ts rename to src/hooks/transaction/types/hook.ts diff --git a/src/utils/hooks/transaction/types/index.ts b/src/hooks/transaction/types/index.ts similarity index 92% rename from src/utils/hooks/transaction/types/index.ts rename to src/hooks/transaction/types/index.ts index 8fdd1f9bf3..cbacc3a1a9 100644 --- a/src/utils/hooks/transaction/types/index.ts +++ b/src/hooks/transaction/types/index.ts @@ -7,6 +7,7 @@ import { LoansActions } from './loans'; import { RedeemActions } from './redeem'; import { ReplaceActions } from './replace'; import { RewardsActions } from './rewards'; +import { StrategiesActions } from './strategies'; import { TokensActions } from './tokens'; import { VaultsActions } from './vaults'; import { VestingActions } from './vesting'; @@ -49,6 +50,10 @@ enum Transaction { LOANS_BORROW = 'LOANS_BORROW', LOANS_REPAY = 'LOANS_REPAY', LOANS_REPAY_ALL = 'LOANS_REPAY_ALL', + // Stategies + STRATEGIES_DEPOSIT = 'STRATEGIES_DEPOSIT', + STRATEGIES_WITHDRAW = 'STRATEGIES_WITHDRAW', + STRATEGIES_ALL_WITHDRAW = 'STRATEGIES_ALL_WITHDRAW', // AMM AMM_SWAP = 'AMM_SWAP', AMM_ADD_LIQUIDITY = 'AMM_ADD_LIQUIDITY', @@ -77,6 +82,7 @@ type LibActions = | ReplaceActions | TokensActions | LoansActions + | StrategiesActions | AMMActions | VaultsActions | RewardsActions diff --git a/src/utils/hooks/transaction/types/issue.ts b/src/hooks/transaction/types/issue.ts similarity index 90% rename from src/utils/hooks/transaction/types/issue.ts rename to src/hooks/transaction/types/issue.ts index 5953875fcb..80408012bc 100644 --- a/src/utils/hooks/transaction/types/issue.ts +++ b/src/hooks/transaction/types/issue.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface IssueRequestAction { type: Transaction.ISSUE_REQUEST; diff --git a/src/utils/hooks/transaction/types/loans.ts b/src/hooks/transaction/types/loans.ts similarity index 97% rename from src/utils/hooks/transaction/types/loans.ts rename to src/hooks/transaction/types/loans.ts index e7d96b1ebb..2cd519c64e 100644 --- a/src/utils/hooks/transaction/types/loans.ts +++ b/src/hooks/transaction/types/loans.ts @@ -1,7 +1,7 @@ import { CurrencyExt, InterBtcApi } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface LoansClaimRewardsAction { type: Transaction.LOANS_CLAIM_REWARDS; diff --git a/src/utils/hooks/transaction/types/redeem.ts b/src/hooks/transaction/types/redeem.ts similarity index 93% rename from src/utils/hooks/transaction/types/redeem.ts rename to src/hooks/transaction/types/redeem.ts index 24a77a9e13..49faf0c6d8 100644 --- a/src/utils/hooks/transaction/types/redeem.ts +++ b/src/hooks/transaction/types/redeem.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface RedeemCancelAction { type: Transaction.REDEEM_CANCEL; diff --git a/src/utils/hooks/transaction/types/replace.ts b/src/hooks/transaction/types/replace.ts similarity index 86% rename from src/utils/hooks/transaction/types/replace.ts rename to src/hooks/transaction/types/replace.ts index 6dd5469cc0..345385bc55 100644 --- a/src/utils/hooks/transaction/types/replace.ts +++ b/src/hooks/transaction/types/replace.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface ReplaceRequestAction { type: Transaction.REPLACE_REQUEST; diff --git a/src/utils/hooks/transaction/types/rewards.ts b/src/hooks/transaction/types/rewards.ts similarity index 100% rename from src/utils/hooks/transaction/types/rewards.ts rename to src/hooks/transaction/types/rewards.ts diff --git a/src/hooks/transaction/types/strategies.ts b/src/hooks/transaction/types/strategies.ts new file mode 100644 index 0000000000..aaf0703b4b --- /dev/null +++ b/src/hooks/transaction/types/strategies.ts @@ -0,0 +1,22 @@ +import { InterBtcApi } from '@interlay/interbtc-api'; + +import { Transaction } from '.'; + +interface StrategiesDepositAction { + type: Transaction.STRATEGIES_DEPOSIT; + args: Parameters; +} + +interface StrategiesWithdrawAction { + type: Transaction.STRATEGIES_WITHDRAW; + args: Parameters; +} + +interface StrategiesWithdrawAllAction { + type: Transaction.STRATEGIES_ALL_WITHDRAW; + args: Parameters; +} + +type StrategiesActions = StrategiesDepositAction | StrategiesWithdrawAction | StrategiesWithdrawAllAction; + +export type { StrategiesActions }; diff --git a/src/utils/hooks/transaction/types/tokens.ts b/src/hooks/transaction/types/tokens.ts similarity index 86% rename from src/utils/hooks/transaction/types/tokens.ts rename to src/hooks/transaction/types/tokens.ts index c20e5a422c..79247c2ae3 100644 --- a/src/utils/hooks/transaction/types/tokens.ts +++ b/src/hooks/transaction/types/tokens.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface TokensTransferAction { type: Transaction.TOKENS_TRANSFER; diff --git a/src/utils/hooks/transaction/types/vaults.ts b/src/hooks/transaction/types/vaults.ts similarity index 94% rename from src/utils/hooks/transaction/types/vaults.ts rename to src/hooks/transaction/types/vaults.ts index 9f16752ce2..4fd7382fb6 100644 --- a/src/utils/hooks/transaction/types/vaults.ts +++ b/src/hooks/transaction/types/vaults.ts @@ -1,6 +1,6 @@ import { InterBtcApi } from '@interlay/interbtc-api'; -import { Transaction } from '../types'; +import { Transaction } from '.'; interface VaultsDepositCollateralAction { type: Transaction.VAULTS_DEPOSIT_COLLATERAL; diff --git a/src/utils/hooks/transaction/types/vesting.ts b/src/hooks/transaction/types/vesting.ts similarity index 100% rename from src/utils/hooks/transaction/types/vesting.ts rename to src/hooks/transaction/types/vesting.ts diff --git a/src/utils/hooks/transaction/types/xcm.ts b/src/hooks/transaction/types/xcm.ts similarity index 100% rename from src/utils/hooks/transaction/types/xcm.ts rename to src/hooks/transaction/types/xcm.ts diff --git a/src/utils/hooks/transaction/utils/description.ts b/src/hooks/transaction/utils/description.ts similarity index 91% rename from src/utils/hooks/transaction/utils/description.ts rename to src/hooks/transaction/utils/description.ts index 5f49809f6e..8aebc07828 100644 --- a/src/utils/hooks/transaction/utils/description.ts +++ b/src/hooks/transaction/utils/description.ts @@ -249,6 +249,41 @@ const getTranslationArgs = ( } /* END - LOANS */ + /* START - STRATEGIES */ + case Transaction.STRATEGIES_DEPOSIT: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.deposited_amount' : 'transaction.depositing_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.STRATEGIES_WITHDRAW: { + const [currency, amount] = params.args; + + return { + key: isPast ? 'transaction.withdrew_amount' : 'transaction.withdrawing_amount', + args: { + amount: amount.toHuman(), + currency: currency.ticker + } + }; + } + case Transaction.STRATEGIES_ALL_WITHDRAW: { + const [currency] = params.args; + + return { + key: isPast ? 'transaction.withdrew' : 'transaction.withdrawing', + args: { + currency: currency.ticker + } + }; + } + /* END - STRATEGIES */ + /* START - VAULTS */ case Transaction.VAULTS_DEPOSIT_COLLATERAL: { const [amount] = params.args; diff --git a/src/utils/hooks/transaction/utils/fee.ts b/src/hooks/transaction/utils/fee.ts similarity index 97% rename from src/utils/hooks/transaction/utils/fee.ts rename to src/hooks/transaction/utils/fee.ts index 71b2acd1a4..c68ea72701 100644 --- a/src/utils/hooks/transaction/utils/fee.ts +++ b/src/hooks/transaction/utils/fee.ts @@ -157,6 +157,10 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = return [calculatedLimit]; } /* END - LOANS */ + case Transaction.STRATEGIES_DEPOSIT: { + const [, amount] = params.args; + return [amount]; + } case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: { const [amount] = params.args; return [amount]; @@ -171,6 +175,8 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = case Transaction.LOANS_WITHDRAW_ALL: case Transaction.LOANS_ENABLE_COLLATERAL: case Transaction.LOANS_DISABLE_COLLATERAL: + case Transaction.STRATEGIES_ALL_WITHDRAW: + case Transaction.STRATEGIES_WITHDRAW: case Transaction.AMM_CLAIM_REWARDS: return undefined; } diff --git a/src/utils/hooks/transaction/utils/form.ts b/src/hooks/transaction/utils/form.ts similarity index 100% rename from src/utils/hooks/transaction/utils/form.ts rename to src/hooks/transaction/utils/form.ts diff --git a/src/utils/hooks/transaction/utils/params.ts b/src/hooks/transaction/utils/params.ts similarity index 100% rename from src/utils/hooks/transaction/utils/params.ts rename to src/hooks/transaction/utils/params.ts diff --git a/src/utils/hooks/use-account-id.ts b/src/hooks/use-account-id.ts similarity index 100% rename from src/utils/hooks/use-account-id.ts rename to src/hooks/use-account-id.ts diff --git a/src/utils/hooks/use-copy-to-clipboard.tsx b/src/hooks/use-copy-to-clipboard.tsx similarity index 100% rename from src/utils/hooks/use-copy-to-clipboard.tsx rename to src/hooks/use-copy-to-clipboard.tsx diff --git a/src/utils/hooks/use-copy-tooltip.tsx b/src/hooks/use-copy-tooltip.tsx similarity index 100% rename from src/utils/hooks/use-copy-tooltip.tsx rename to src/hooks/use-copy-tooltip.tsx diff --git a/src/utils/hooks/use-countdown.ts b/src/hooks/use-countdown.ts similarity index 96% rename from src/utils/hooks/use-countdown.ts rename to src/hooks/use-countdown.ts index 49e74aa05d..8ebb9494e7 100644 --- a/src/utils/hooks/use-countdown.ts +++ b/src/hooks/use-countdown.ts @@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'; import { useInterval } from 'react-use'; import { theme } from '@/component-library'; -import { useWindowFocus } from '@/utils/hooks/use-window-focus'; +import { useWindowFocus } from '@/hooks/use-window-focus'; type UseCountdownProps = { value?: number; diff --git a/src/services/hooks/use-cumulative-collateral-volumes.ts b/src/hooks/use-cumulative-collateral-volumes.ts similarity index 100% rename from src/services/hooks/use-cumulative-collateral-volumes.ts rename to src/hooks/use-cumulative-collateral-volumes.ts diff --git a/src/services/hooks/use-current-active-block-number.ts b/src/hooks/use-current-active-block-number.ts similarity index 100% rename from src/services/hooks/use-current-active-block-number.ts rename to src/hooks/use-current-active-block-number.ts diff --git a/src/utils/hooks/use-feature-flag.ts b/src/hooks/use-feature-flag.ts similarity index 96% rename from src/utils/hooks/use-feature-flag.ts rename to src/hooks/use-feature-flag.ts index 4184444a2c..c5d356ac2c 100644 --- a/src/utils/hooks/use-feature-flag.ts +++ b/src/hooks/use-feature-flag.ts @@ -5,7 +5,7 @@ enum FeatureFlags { } const featureFlags: Record = { - [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_EARN_STRATEGIES, + [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK, [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING }; diff --git a/src/utils/hooks/use-geoblocking.ts b/src/hooks/use-geoblocking.ts similarity index 90% rename from src/utils/hooks/use-geoblocking.ts rename to src/hooks/use-geoblocking.ts index 09805c8398..df5f2d38a1 100644 --- a/src/utils/hooks/use-geoblocking.ts +++ b/src/hooks/use-geoblocking.ts @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK } from '@/config/links'; -import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; +import { FeatureFlags, useFeatureFlag } from '@/hooks/use-feature-flag'; const useGeoblocking = (): void => { const isGeoblockEnabled = useFeatureFlag(FeatureFlags.GEOBLOCK); diff --git a/src/utils/hooks/use-interval.ts b/src/hooks/use-interval.ts similarity index 100% rename from src/utils/hooks/use-interval.ts rename to src/hooks/use-interval.ts diff --git a/src/utils/hooks/use-local-storage.ts b/src/hooks/use-local-storage.ts similarity index 100% rename from src/utils/hooks/use-local-storage.ts rename to src/hooks/use-local-storage.ts diff --git a/src/utils/hooks/use-mount-transition.ts b/src/hooks/use-mount-transition.ts similarity index 100% rename from src/utils/hooks/use-mount-transition.ts rename to src/hooks/use-mount-transition.ts diff --git a/src/utils/hooks/use-page-query-params.tsx b/src/hooks/use-page-query-params.tsx similarity index 100% rename from src/utils/hooks/use-page-query-params.tsx rename to src/hooks/use-page-query-params.tsx diff --git a/src/utils/hooks/use-query-params.ts b/src/hooks/use-query-params.ts similarity index 100% rename from src/utils/hooks/use-query-params.ts rename to src/hooks/use-query-params.ts diff --git a/src/utils/hooks/use-select-currency.tsx b/src/hooks/use-select-currency.tsx similarity index 96% rename from src/utils/hooks/use-select-currency.tsx rename to src/hooks/use-select-currency.tsx index d7381732bd..34be32bf96 100644 --- a/src/utils/hooks/use-select-currency.tsx +++ b/src/hooks/use-select-currency.tsx @@ -9,8 +9,8 @@ import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/uti import { TokenData } from '@/component-library'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; -import { getCoinIconProps } from '../helpers/coin-icon'; -import { getTokenPrice } from '../helpers/prices'; +import { getCoinIconProps } from '../utils/helpers/coin-icon'; +import { getTokenPrice } from '../utils/helpers/prices'; import { useGetLiquidityPools } from './api/amm/use-get-liquidity-pools'; import { useGetOracleCurrencies } from './api/oracle/use-get-oracle-currencies'; import { useGetBalances } from './api/tokens/use-get-balances'; diff --git a/src/utils/hooks/use-sign-message.ts b/src/hooks/use-sign-message.ts similarity index 97% rename from src/utils/hooks/use-sign-message.ts rename to src/hooks/use-sign-message.ts index 22bde0319b..cfaad90563 100644 --- a/src/utils/hooks/use-sign-message.ts +++ b/src/hooks/use-sign-message.ts @@ -9,8 +9,8 @@ import { TERMS_AND_CONDITIONS_LINK } from '@/config/relay-chains'; import { SIGNER_API_URL, TC_VERSION } from '@/constants'; import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; -import { NotificationToastType, useNotifications } from '../context/Notifications'; -import { signMessage } from '../helpers/wallet'; +import { NotificationToastType, useNotifications } from '../utils/context/Notifications'; +import { signMessage } from '../utils/helpers/wallet'; import { LocalStorageKey, useLocalStorage } from './use-local-storage'; interface GetSignatureData { diff --git a/src/services/hooks/use-stable-bitcoin-confirmations.ts b/src/hooks/use-stable-bitcoin-confirmations.ts similarity index 100% rename from src/services/hooks/use-stable-bitcoin-confirmations.ts rename to src/hooks/use-stable-bitcoin-confirmations.ts diff --git a/src/services/hooks/use-stable-parachain-confirmations.ts b/src/hooks/use-stable-parachain-confirmations.ts similarity index 100% rename from src/services/hooks/use-stable-parachain-confirmations.ts rename to src/hooks/use-stable-parachain-confirmations.ts diff --git a/src/utils/hooks/use-update-query-parameters.ts b/src/hooks/use-update-query-parameters.ts similarity index 100% rename from src/utils/hooks/use-update-query-parameters.ts rename to src/hooks/use-update-query-parameters.ts diff --git a/src/utils/hooks/use-wallet.ts b/src/hooks/use-wallet.ts similarity index 100% rename from src/utils/hooks/use-wallet.ts rename to src/hooks/use-wallet.ts diff --git a/src/utils/hooks/use-window-focus.ts b/src/hooks/use-window-focus.ts similarity index 100% rename from src/utils/hooks/use-window-focus.ts rename to src/hooks/use-window-focus.ts diff --git a/src/index.tsx b/src/index.tsx index 327b7658e6..c10a8de3b7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,9 +13,9 @@ import { ReactQueryDevtools } from 'react-query/devtools'; import { Provider } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; +import { Subscriptions } from '@/hooks/api/tokens/use-balances-subscription'; +import ThemeWrapper from '@/legacy-components/ThemeWrapper'; import { SubstrateLoadingAndErrorHandlingWrapper, SubstrateProvider } from '@/lib/substrate'; -import ThemeWrapper from '@/parts/ThemeWrapper'; -import { Subscriptions } from '@/utils/hooks/api/tokens/use-balances-subscription'; import App from './App'; import { GeoblockingWrapper } from './components/Geoblock/Geoblock'; diff --git a/src/legacy-components/Accounts/AccountSelector/index.tsx b/src/legacy-components/Accounts/AccountSelector/index.tsx deleted file mode 100644 index e4603d2bc7..0000000000 --- a/src/legacy-components/Accounts/AccountSelector/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; -import clsx from 'clsx'; - -import { shortAddress } from '@/common/utils/utils'; -import Select, { - SELECT_VARIANTS, - SelectBody, - SelectButton, - SelectCheck, - SelectLabel, - SelectOption, - SelectOptions, - SelectText -} from '@/legacy-components/Select'; -import { KeyringPair } from '@/lib/substrate'; - -interface Props { - accounts: Array; - selectedAccount: KeyringPair; - label: string; - onChange: (account: KeyringPair) => void; -} - -const AccountSelector = ({ accounts, selectedAccount, label, onChange }: Props): JSX.Element => ( - -); - -export default AccountSelector; diff --git a/src/legacy-components/Accounts/index.tsx b/src/legacy-components/Accounts/index.tsx deleted file mode 100644 index 0debdc1b9a..0000000000 --- a/src/legacy-components/Accounts/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; - -import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; - -import AccountSelector from './AccountSelector'; - -interface Props { - callbackFunction?: (account: KeyringPair) => void; - label: string; -} - -const Accounts = ({ callbackFunction, label }: Props): JSX.Element => { - const { selectedAccount: currentAccount, accounts } = useSubstrateSecureState(); - - const [selectedAccount, setSelectedAccount] = React.useState(undefined); - - React.useEffect(() => { - if (!currentAccount) return; - - if (!selectedAccount) { - setSelectedAccount(currentAccount); - } - - if (callbackFunction && selectedAccount) { - callbackFunction(selectedAccount); - } - }, [callbackFunction, currentAccount, selectedAccount]); - - return ( -
- {accounts && selectedAccount ? ( - - ) : null} -
- ); -}; - -export default Accounts; diff --git a/src/legacy-components/CopyToClipboardButton/index.tsx b/src/legacy-components/CopyToClipboardButton/index.tsx index 62d396f66f..92dcec0c1e 100644 --- a/src/legacy-components/CopyToClipboardButton/index.tsx +++ b/src/legacy-components/CopyToClipboardButton/index.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; +import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'; import InterlayButtonBase, { Props as InterlayButtonBaseProps } from '@/legacy-components/UI/InterlayButtonBase'; -import useCopyToClipboard from '@/utils/hooks/use-copy-to-clipboard'; interface Props extends InterlayButtonBaseProps { text: string; diff --git a/src/legacy-components/IssueUI/BTCPaymentPendingStatusUI/index.tsx b/src/legacy-components/IssueUI/BTCPaymentPendingStatusUI/index.tsx index 94ba0e29e1..bc0e56e2f6 100644 --- a/src/legacy-components/IssueUI/BTCPaymentPendingStatusUI/index.tsx +++ b/src/legacy-components/IssueUI/BTCPaymentPendingStatusUI/index.tsx @@ -8,13 +8,13 @@ import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { BLOCK_TIME } from '@/config/parachain'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Timer from '@/legacy-components/Timer'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; interface Props { // TODO: should type properly (`Relay`) diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx index a111faff63..f4b6facaa2 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ManualIssueExecutionUI/index.tsx @@ -11,6 +11,8 @@ import { useQuery, useQueryClient } from 'react-query'; import { displayMonetaryAmount } from '@/common/utils/utils'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import useQueryParams from '@/hooks/use-query-params'; import InterlayDenimOrKintsugiMidnightOutlinedButton from '@/legacy-components/buttons/InterlayDenimOrKintsugiMidnightOutlinedButton'; import { useSubstrateSecureState } from '@/lib/substrate'; import { ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; @@ -18,8 +20,6 @@ import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useQueryParams from '@/utils/hooks/use-query-params'; // TODO: issue requests should not be typed here but further above in the app interface Props { diff --git a/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx b/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx index e6fba19589..82b056e463 100644 --- a/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx +++ b/src/legacy-components/IssueUI/IssueRequestStatusUI/ReceivedIssueRequest/index.tsx @@ -4,14 +4,14 @@ import { useTranslation } from 'react-i18next'; import { formatNumber } from '@/common/utils/utils'; import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx b/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx index f1e35721b8..73e4ed2159 100644 --- a/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx +++ b/src/legacy-components/IssueUI/WhoopsStatusUI/index.tsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'; import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -14,7 +15,6 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; interface Props { // TODO: should type properly (`Relay`) diff --git a/src/legacy-components/IssueUI/index.tsx b/src/legacy-components/IssueUI/index.tsx index 640a417a15..9c97b0eb12 100644 --- a/src/legacy-components/IssueUI/index.tsx +++ b/src/legacy-components/IssueUI/index.tsx @@ -6,6 +6,7 @@ import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; import { Flex } from '@/component-library'; import { WRAPPED_TOKEN_SYMBOL, WrappedTokenAmount } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -13,7 +14,6 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import BTCPaymentPendingStatusUI from './BTCPaymentPendingStatusUI'; import IssueRequestStatusUI from './IssueRequestStatusUI'; diff --git a/src/parts/PageTitle/index.tsx b/src/legacy-components/PageTitle/index.tsx similarity index 100% rename from src/parts/PageTitle/index.tsx rename to src/legacy-components/PageTitle/index.tsx diff --git a/src/parts/Portal/index.tsx b/src/legacy-components/Portal/index.tsx similarity index 100% rename from src/parts/Portal/index.tsx rename to src/legacy-components/Portal/index.tsx diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx index 8b2ec9c856..79984a1541 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/DefaultRedeemRequest/index.tsx @@ -3,12 +3,12 @@ import { useErrorHandler } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import { formatNumber } from '@/common/utils/utils'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import RequestWrapper from '@/legacy-components/RequestWrapper'; import Ring48, { Ring48Title, Ring48Value } from '@/legacy-components/Ring48'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx index 7d821b1deb..4fb91cb294 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/ReimbursedRedeemRequest/index.tsx @@ -15,6 +15,7 @@ import { RelayChainNativeTokenLogoIcon, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import Hr2 from '@/legacy-components/hrs/Hr2'; @@ -26,7 +27,6 @@ import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; interface Props { // TODO: should type properly (`Relay`) diff --git a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx index 86f0f30879..c822034d61 100644 --- a/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx +++ b/src/legacy-components/RedeemUI/RedeemRequestStatusUI/RetriedRedeemRequest/index.tsx @@ -14,6 +14,7 @@ import { RELAY_CHAIN_NATIVE_TOKEN_SYMBOL, RelayChainNativeTokenLogoIcon } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import Hr2 from '@/legacy-components/hrs/Hr2'; @@ -24,7 +25,6 @@ import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; interface Props { // TODO: should type properly (`Relay`) diff --git a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx index 00d9d4bb24..e3089ded2b 100644 --- a/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx +++ b/src/legacy-components/RedeemUI/ReimburseStatusUI/index.tsx @@ -11,6 +11,8 @@ import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayConiferOutlinedButton from '@/legacy-components/buttons/InterlayConiferOutlinedButton'; import InterlayDenimOrKintsugiMidnightOutlinedButton from '@/legacy-components/buttons/InterlayDenimOrKintsugiMidnightOutlinedButton'; import ErrorFallback from '@/legacy-components/ErrorFallback'; @@ -22,8 +24,6 @@ import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; interface Props { redeem: any; // TODO: should type properly (`Relay`) diff --git a/src/legacy-components/RedeemUI/index.tsx b/src/legacy-components/RedeemUI/index.tsx index 6e7fda6f02..c8a5e2cc49 100644 --- a/src/legacy-components/RedeemUI/index.tsx +++ b/src/legacy-components/RedeemUI/index.tsx @@ -6,6 +6,7 @@ import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; import { Flex } from '@/component-library'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -13,7 +14,6 @@ import PrimaryColorSpan from '@/legacy-components/PrimaryColorSpan'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import RedeemRequestStatusUI from './RedeemRequestStatusUI'; import ReimburseStatusUI from './ReimburseStatusUI'; diff --git a/src/parts/SectionTitle/index.tsx b/src/legacy-components/SectionTitle/index.tsx similarity index 100% rename from src/parts/SectionTitle/index.tsx rename to src/legacy-components/SectionTitle/index.tsx diff --git a/src/parts/Sidebar/OpenButton/index.tsx b/src/legacy-components/Sidebar/OpenButton/index.tsx similarity index 100% rename from src/parts/Sidebar/OpenButton/index.tsx rename to src/legacy-components/Sidebar/OpenButton/index.tsx diff --git a/src/parts/Sidebar/SidebarContent/CloseButton/index.tsx b/src/legacy-components/Sidebar/SidebarContent/CloseButton/index.tsx similarity index 100% rename from src/parts/Sidebar/SidebarContent/CloseButton/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/CloseButton/index.tsx diff --git a/src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx b/src/legacy-components/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx similarity index 100% rename from src/parts/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/Navigation/SidebarNavLink/index.tsx diff --git a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx b/src/legacy-components/Sidebar/SidebarContent/Navigation/index.tsx similarity index 93% rename from src/parts/Sidebar/SidebarContent/Navigation/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/Navigation/index.tsx index ebfdc411e2..2b78702183 100644 --- a/src/parts/Sidebar/SidebarContent/Navigation/index.tsx +++ b/src/legacy-components/Sidebar/SidebarContent/Navigation/index.tsx @@ -28,11 +28,11 @@ import { USE_WRAPPED_CURRENCY_LINK, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { FeatureFlags, useFeatureFlag } from '@/hooks/use-feature-flag'; import Hr2 from '@/legacy-components/hrs/Hr2'; import { useSubstrateSecureState } from '@/lib/substrate'; import { PAGES, URL_PARAMETERS } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import SidebarNavLink from './SidebarNavLink'; @@ -69,55 +69,55 @@ const Navigation = ({ const PRIMARY_NAVIGATION_ITEMS = React.useMemo( () => [ { - name: 'nav_wallet', + name: 'navigation.wallet', link: PAGES.WALLET, icon: UserIcon }, { - name: 'nav_strategies', + name: 'navigation.strategies', link: PAGES.STRATEGIES, icon: BanknotesIcon, disabled: !isStrategiesEnabled }, { - name: `nav_btc`, + name: `navigation.btc`, link: PAGES.BTC, icon: ArrowPathIcon, hidden: false }, { - name: 'nav_send_and_receive', + name: 'navigation.send_and_receive', link: PAGES.SEND_AND_RECEIVE, icon: ArrowsRightLeftIcon }, { - name: 'nav_lending', + name: 'navigation.lending', link: PAGES.LOANS, icon: PresentationChartBarIcon }, { - name: 'nav_swap', + name: 'navigation.swap', link: PAGES.SWAP, icon: ArrowPathRoundedSquareIcon }, { - name: 'nav_pools', + name: 'navigation.pools', link: PAGES.POOLS, icon: Square3Stack3DIcon }, { - name: 'nav_staking', + name: 'navigation.staking', link: PAGES.STAKING, icon: CircleStackIcon }, { - name: 'nav_stats', + name: 'navigation.stats', link: PAGES.DASHBOARD, icon: ChartBarSquareIcon, hidden: false }, { - name: 'nav_vaults', + name: 'navigation.vaults', link: `${PAGES.VAULTS.replace(`:${URL_PARAMETERS.VAULT.ACCOUNT}`, selectedAccount?.address ?? '')}`, icon: CpuChipIcon, hidden: !vaultClientLoaded @@ -135,12 +135,12 @@ const Navigation = ({ const SECONDARY_NAVIGATION_ITEMS = React.useMemo( () => [ { - name: 'nav_onboarding', + name: 'navigation.onboarding', link: PAGES.ONBOARDING, hidden: !isOnboardingEnabled }, { - name: 'nav_use_wrapped', + name: 'navigation.use_wrapped', link: USE_WRAPPED_CURRENCY_LINK, hidden: !USE_WRAPPED_CURRENCY_LINK, external: true, @@ -150,7 +150,7 @@ const Navigation = ({ } }, { - name: 'nav_crowdloan', + name: 'navigation.crowdloan', link: CROWDLOAN_LINK, external: true, // This will suppress the link on testnet @@ -161,7 +161,7 @@ const Navigation = ({ } }, { - name: 'nav_docs', + name: 'navigation.docs', link: INTERLAY_DOCS_LINK, external: true, rest: { @@ -170,7 +170,7 @@ const Navigation = ({ } }, { - name: 'nav_governance', + name: 'navigation.governance', link: GOVERNANCE_LINK, external: true, hidden: !GOVERNANCE_LINK, @@ -180,7 +180,7 @@ const Navigation = ({ } }, { - name: 'nav_terms_and_conditions', + name: 'navigation.terms_and_conditions', link: TERMS_AND_CONDITIONS_LINK, external: true, hidden: !TERMS_AND_CONDITIONS_LINK, diff --git a/src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx b/src/legacy-components/Sidebar/SidebarContent/SocialMediaContainer/index.tsx similarity index 100% rename from src/parts/Sidebar/SidebarContent/SocialMediaContainer/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/SocialMediaContainer/index.tsx diff --git a/src/parts/Sidebar/SidebarContent/TestnetBadge/index.tsx b/src/legacy-components/Sidebar/SidebarContent/TestnetBadge/index.tsx similarity index 100% rename from src/parts/Sidebar/SidebarContent/TestnetBadge/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/TestnetBadge/index.tsx diff --git a/src/parts/Sidebar/SidebarContent/index.tsx b/src/legacy-components/Sidebar/SidebarContent/index.tsx similarity index 100% rename from src/parts/Sidebar/SidebarContent/index.tsx rename to src/legacy-components/Sidebar/SidebarContent/index.tsx diff --git a/src/parts/Sidebar/index.tsx b/src/legacy-components/Sidebar/index.tsx similarity index 95% rename from src/parts/Sidebar/index.tsx rename to src/legacy-components/Sidebar/index.tsx index 42ceec2ec6..2246b197ee 100644 --- a/src/parts/Sidebar/index.tsx +++ b/src/legacy-components/Sidebar/index.tsx @@ -66,7 +66,7 @@ const Sidebar = ({ className, children }: Props): JSX.Element => {
-
{children}
+
{children}
); diff --git a/src/parts/ThemeWrapper/index.tsx b/src/legacy-components/ThemeWrapper/index.tsx similarity index 100% rename from src/parts/ThemeWrapper/index.tsx rename to src/legacy-components/ThemeWrapper/index.tsx diff --git a/src/parts/TimerIncrement/index.tsx b/src/legacy-components/TimerIncrement/index.tsx similarity index 86% rename from src/parts/TimerIncrement/index.tsx rename to src/legacy-components/TimerIncrement/index.tsx index 27d2d1d276..63cddd1241 100644 --- a/src/parts/TimerIncrement/index.tsx +++ b/src/legacy-components/TimerIncrement/index.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import useInterval from '@/utils/hooks/use-interval'; +import useInterval from '@/hooks/use-interval'; function TimerIncrement(): JSX.Element { const { t } = useTranslation(); diff --git a/src/legacy-components/Tokens/index.tsx b/src/legacy-components/Tokens/index.tsx index 24460b15d7..61cff934ed 100644 --- a/src/legacy-components/Tokens/index.tsx +++ b/src/legacy-components/Tokens/index.tsx @@ -6,10 +6,10 @@ import { withErrorBoundary } from 'react-error-boundary'; import { TokenType } from '@/common/types/util.types'; import { CoinIcon } from '@/component-library'; import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import { SelectVariants } from '@/legacy-components/Select'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; import TokenSelector from './TokenSelector'; diff --git a/src/parts/Topbar/ManualIssueExecutionActionsBadge/index.tsx b/src/legacy-components/Topbar/ManualIssueExecutionActionsBadge/index.tsx similarity index 93% rename from src/parts/Topbar/ManualIssueExecutionActionsBadge/index.tsx rename to src/legacy-components/Topbar/ManualIssueExecutionActionsBadge/index.tsx index c4498ff404..06fa312863 100644 --- a/src/parts/Topbar/ManualIssueExecutionActionsBadge/index.tsx +++ b/src/legacy-components/Topbar/ManualIssueExecutionActionsBadge/index.tsx @@ -1,8 +1,8 @@ import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { CTALink } from '@/component-library'; +import { useManualIssueRequests } from '@/hooks/issue-requests'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import { useManualIssueRequests } from '@/services/hooks/issue-requests'; import { PAGES } from '@/utils/constants/links'; const ManualIssueExecutionActionsBadge = (): JSX.Element => { diff --git a/src/parts/Topbar/index.tsx b/src/legacy-components/Topbar/index.tsx similarity index 66% rename from src/parts/Topbar/index.tsx rename to src/legacy-components/Topbar/index.tsx index d4c4309f37..3c66aa8735 100644 --- a/src/parts/Topbar/index.tsx +++ b/src/legacy-components/Topbar/index.tsx @@ -2,7 +2,6 @@ import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'; import { Keyring } from '@polkadot/api'; import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; import clsx from 'clsx'; -import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; @@ -10,9 +9,8 @@ import { showAccountModalAction, showSignTermsModalAction } from '@/common/actio import { StoreType } from '@/common/types/util.types'; import { FundWallet, NotificationsPopover } from '@/components'; import { AuthModal, SignTermsModal } from '@/components/AuthModal'; -import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { SS58_FORMAT } from '@/constants'; +import { useSignMessage } from '@/hooks/use-sign-message'; import InterlayCaliforniaOutlinedButton from '@/legacy-components/buttons/InterlayCaliforniaOutlinedButton'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import InterlayDenimOrKintsugiMidnightOutlinedButton from '@/legacy-components/buttons/InterlayDenimOrKintsugiMidnightOutlinedButton'; @@ -21,59 +19,25 @@ import InterlayLink from '@/legacy-components/UI/InterlayLink'; import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; import { BitcoinNetwork } from '@/types/bitcoin'; import { POLKADOT } from '@/utils/constants/relay-chain-names'; -import { NotificationToastType, useNotifications } from '@/utils/context/Notifications'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; +import { useNotifications } from '@/utils/context/Notifications'; +import { useFaucet } from '@/utils/hooks/use-faucet'; import ManualIssueExecutionActionsBadge from './ManualIssueExecutionActionsBadge'; const SMALL_SIZE_BUTTON_CLASSES = clsx('leading-7', '!px-3'); const Topbar = (): JSX.Element => { - const { bridgeLoaded, showAccountModal, isSignTermsModalOpen } = useSelector((state: StoreType) => state.general); + const { showAccountModal, isSignTermsModalOpen } = useSelector((state: StoreType) => state.general); const dispatch = useDispatch(); const { t } = useTranslation(); - const { getAvailableBalance } = useGetBalances(); const { setSelectedAccount, removeSelectedAccount } = useSubstrate(); const { selectProps } = useSignMessage(); const notifications = useNotifications(); - const governanceTokenBalanceIsZero = getAvailableBalance(GOVERNANCE_TOKEN.ticker)?.isZero(); - - const handleRequestFromFaucet = async (): Promise => { - if (!selectedAccount) return; - - try { - const receiverId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, selectedAccount.address); - await window.faucet.fundAccount(receiverId, GOVERNANCE_TOKEN); - - notifications.show('faucet', { - type: NotificationToastType.STANDARD, - props: { variant: 'success', title: t('notifications.funding_account_successful') } - }); - } catch (error) { - notifications.show('faucet', { - type: NotificationToastType.STANDARD, - props: { variant: 'error', title: t('notifications.funding_account_failed') } - }); - } - }; - - const [isRequestPending, setIsRequestPending] = React.useState(false); + const { buttonProps, isAvailable } = useFaucet(); const { extensions, selectedAccount } = useSubstrateSecureState(); - const handleFundsRequest = async () => { - if (!bridgeLoaded) return; - setIsRequestPending(true); - try { - await handleRequestFromFaucet(); - } catch (error) { - console.log('[requestFunds] error.message => ', error.message); - } - setIsRequestPending(false); - }; - const handleAccountModalOpen = () => dispatch(showAccountModalAction(true)); const handleAccountModalClose = () => dispatch(showAccountModalAction(false)); @@ -104,22 +68,16 @@ const Topbar = (): JSX.Element => { return ( <> -
+
+ {isAvailable && ( + + {t('request_funds')} + + )} {selectedAccount !== undefined && ( <> - {process.env.REACT_APP_FAUCET_URL && governanceTokenBalanceIsZero && ( - <> - - {t('request_funds')} - - - )} {process.env.REACT_APP_BITCOIN_NETWORK !== BitcoinNetwork.Mainnet && ( <> { {accountLabel} -
+ => - yup.object().shape({ - [BRIDGE_ISSUE_AMOUNT_FIELD]: yup - .string() - .requiredAmount('issue') - .maxAmount( - params[BRIDGE_ISSUE_AMOUNT_FIELD], - 'issue', - i18n.t('forms.amount_must_be_at_most', { - action: 'issue', - amount: params[BRIDGE_ISSUE_AMOUNT_FIELD].maxAmount.toString() - }) - ) - .minAmount(params[BRIDGE_ISSUE_AMOUNT_FIELD], 'issue'), - [BRIDGE_ISSUE_CUSTOM_VAULT_FIELD]: yup.string().when([BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH], { - is: (isManualVault: string) => isManualVault, - then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'issue vault' })) - }), - [BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN]: yup.string().required(), - [BRIDGE_ISSUE_FEE_TOKEN]: yup.string().required() - }); - -const BRIDGE_REDEEM_AMOUNT_FIELD = 'redeem-amount'; -const BRIDGE_REDEEM_CUSTOM_VAULT_FIELD = 'redeem-custom-vault'; -const BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH = 'redeem-custom-vault-switch'; -const BRIDGE_REDEEM_PREMIUM_VAULT_FIELD = 'redeem-premium-vault'; -const BRIDGE_REDEEM_ADDRESS = 'redeem-address'; -const BRIDGE_REDEEM_FEE_TOKEN = 'redeem-fee-token'; - -type BridgeRedeemFormData = { - [BRIDGE_REDEEM_AMOUNT_FIELD]?: string; - [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]?: string; - [BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH]?: boolean; - [BRIDGE_REDEEM_PREMIUM_VAULT_FIELD]?: boolean; - [BRIDGE_REDEEM_ADDRESS]?: string; - [BRIDGE_REDEEM_FEE_TOKEN]?: string; -}; - -type BridgeRedeemValidationParams = { - [BRIDGE_REDEEM_AMOUNT_FIELD]: MaxAmountValidationParams & MinAmountValidationParams; -}; - -const bridgeRedeemSchema = (params: BridgeRedeemValidationParams): yup.ObjectSchema => - yup.object().shape({ - [BRIDGE_REDEEM_AMOUNT_FIELD]: yup - .string() - .requiredAmount('redeem') - .maxAmount( - params[BRIDGE_REDEEM_AMOUNT_FIELD], - 'redeem', - i18n.t('forms.amount_must_be_at_most', { - action: 'redeem', - amount: params[BRIDGE_REDEEM_AMOUNT_FIELD].maxAmount.toString() - }) - ) - .minAmount(params[BRIDGE_REDEEM_AMOUNT_FIELD], 'redeem'), - [BRIDGE_REDEEM_CUSTOM_VAULT_FIELD]: yup.string().when([BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH], { - is: (isManualVault: string) => isManualVault, - then: (schema) => schema.required(i18n.t('forms.please_select_your_field', { field: 'redeem vault' })) - }), - [BRIDGE_REDEEM_ADDRESS]: yup - .string() - .required(i18n.t('forms.please_enter_your_field', { field: 'BTC address' })) - .address(AddressType.BTC), - [BRIDGE_REDEEM_FEE_TOKEN]: yup.string().required() - }); - -export { - BRIDGE_ISSUE_AMOUNT_FIELD, - BRIDGE_ISSUE_CUSTOM_VAULT_FIELD, - BRIDGE_ISSUE_CUSTOM_VAULT_SWITCH, - BRIDGE_ISSUE_FEE_TOKEN, - BRIDGE_ISSUE_GRIEFING_COLLATERAL_TOKEN, - BRIDGE_REDEEM_ADDRESS, - BRIDGE_REDEEM_AMOUNT_FIELD, - BRIDGE_REDEEM_CUSTOM_VAULT_FIELD, - BRIDGE_REDEEM_CUSTOM_VAULT_SWITCH, - BRIDGE_REDEEM_FEE_TOKEN, - BRIDGE_REDEEM_PREMIUM_VAULT_FIELD, - bridgeIssueSchema, - bridgeRedeemSchema -}; -export type { BridgeIssueFormData, BridgeRedeemFormData }; diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index b3f6ed79fe..9c812b09d6 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -1,7 +1,7 @@ export * from './btc'; export * from './loans'; export * from './pools'; -export * from './strategy'; +export * from './strategies'; export * from './swap'; export * from './transfers'; export * from './vaults'; diff --git a/src/lib/form/schemas/strategies.ts b/src/lib/form/schemas/strategies.ts new file mode 100644 index 0000000000..324546a18e --- /dev/null +++ b/src/lib/form/schemas/strategies.ts @@ -0,0 +1,50 @@ +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const STRATEGY_DEPOSIT_AMOUNT_FIELD = 'strategy-deposit-amount'; +const STRATEGY_DEPOSIT_FEE_TOKEN_FIELD = 'strategy-deposit-fee-token'; + +type StrategyDepositFormData = { + [STRATEGY_DEPOSIT_AMOUNT_FIELD]?: string; + [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]?: string; +}; + +type StrategyDepositValidationParams = MaxAmountValidationParams & MinAmountValidationParams; + +const strategyDepositSchema = (action: string, params: StrategyDepositValidationParams): yup.ObjectSchema => { + return yup.object().shape({ + [STRATEGY_DEPOSIT_AMOUNT_FIELD]: yup.string().requiredAmount(action).maxAmount(params).minAmount(params, action), + [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]: yup.string().required() + }); +}; + +const STRATEGY_WITHDRAW_AMOUNT_FIELD = 'strategy-withdraw-amount'; +const STRATEGY_WITHDRAW_FEE_TOKEN_FIELD = 'strategy-withdraw-fee-token'; + +type StrategyWithdrawFormData = { + [STRATEGY_WITHDRAW_AMOUNT_FIELD]?: string; + [STRATEGY_WITHDRAW_FEE_TOKEN_FIELD]?: string; +}; + +type StrategyWithdrawValidationParams = MaxAmountValidationParams & MinAmountValidationParams; + +const strategyWithdrawSchema = (action: string, params: StrategyWithdrawValidationParams): yup.ObjectSchema => { + return yup.object().shape({ + [STRATEGY_WITHDRAW_AMOUNT_FIELD]: yup.string().requiredAmount(action).maxAmount(params).minAmount(params, action), + [STRATEGY_WITHDRAW_FEE_TOKEN_FIELD]: yup.string().required() + }); +}; + +export { + STRATEGY_DEPOSIT_AMOUNT_FIELD, + STRATEGY_DEPOSIT_FEE_TOKEN_FIELD, + STRATEGY_WITHDRAW_AMOUNT_FIELD, + STRATEGY_WITHDRAW_FEE_TOKEN_FIELD, + strategyDepositSchema, + strategyWithdrawSchema +}; +export type { + StrategyDepositFormData, + StrategyDepositValidationParams, + StrategyWithdrawFormData, + StrategyWithdrawValidationParams +}; diff --git a/src/lib/form/schemas/strategy.ts b/src/lib/form/schemas/strategy.ts deleted file mode 100644 index 66a38c8ce0..0000000000 --- a/src/lib/form/schemas/strategy.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { StrategyFormType } from '@/pages/Strategies/types/form'; - -import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; - -type StrategyValidationParams = MaxAmountValidationParams & MinAmountValidationParams; - -const StrategySchema = ( - StrategyFormType: StrategyFormType, - params: StrategyValidationParams -): yup.ObjectSchema => { - return yup.object().shape({ - [StrategyFormType]: yup - .string() - .requiredAmount(StrategyFormType) - .maxAmount(params) - .minAmount(params, StrategyFormType) - }); -}; - -export { StrategySchema }; -export type { StrategyValidationParams }; diff --git a/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx b/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx index 0e6a048b99..63e7f25b9e 100644 --- a/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx +++ b/src/lib/substrate/components/SubstrateLoadingAndErrorHandlingWrapper/index.tsx @@ -2,10 +2,10 @@ import { useDispatch } from 'react-redux'; import { toast } from 'react-toastify'; import { isBridgeLoaded } from '@/common/actions/general.actions'; +import InterlayHelmet from '@/components/InterlayHelmet'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { useSubstrateState } from '@/lib/substrate/context/hooks'; import { ActionType, ApiStatus, KeyringStatus } from '@/lib/substrate/context/types'; -import InterlayHelmet from '@/parts/InterlayHelmet'; interface SubstrateLoadingAndErrorHandlingWrapperProps { children: React.ReactNode; diff --git a/src/pages/Actions/Actions/Actions.tsx b/src/pages/Actions/Actions/Actions.tsx index fbb789dad9..ea7f29fc6f 100644 --- a/src/pages/Actions/Actions/Actions.tsx +++ b/src/pages/Actions/Actions/Actions.tsx @@ -1,4 +1,4 @@ -import MainContainer from '@/parts/MainContainer'; +import { MainContainer } from '@/components'; import { ManualIssueExecutionActionsTable } from './components/ManualIssueExecutionActionsTable'; diff --git a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx index e061df3c8a..f7c6c0c11e 100644 --- a/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx +++ b/src/pages/Actions/Actions/components/ManualIssueExecutionActionsTable/ManualIssueExecutionActionsTable.tsx @@ -5,11 +5,11 @@ import { useQuery } from 'react-query'; import { H3, Stack, Table, TableProps } from '@/component-library'; import { CTALink } from '@/component-library'; +import { useManualIssueRequests } from '@/hooks/issue-requests'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; import { useSubstrateSecureState } from '@/lib/substrate'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; -import { useManualIssueRequests } from '@/services/hooks/issue-requests'; import { issueIdsQuery } from '@/services/queries/issues'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; diff --git a/src/pages/BTC/BTCOverview/BTCOverview.tsx b/src/pages/BTC/BTCOverview/BTCOverview.tsx index 9c53e8ee9d..9480d4fcdf 100644 --- a/src/pages/BTC/BTCOverview/BTCOverview.tsx +++ b/src/pages/BTC/BTCOverview/BTCOverview.tsx @@ -1,12 +1,12 @@ import { Flex, Tabs, TabsItem } from '@/component-library'; +import { MainContainer } from '@/components'; +import { useGetIssueData } from '@/hooks/api/bridge/use-get-issue-data'; +import { useGetIssueRequestLimit } from '@/hooks/api/bridge/use-get-issue-request-limits'; +import { useGetMaxBurnableTokens } from '@/hooks/api/bridge/use-get-max-burnable-tokens'; +import { useGetRedeemData } from '@/hooks/api/bridge/use-get-redeem-data'; +import { usePageQueryParams } from '@/hooks/use-page-query-params'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; -import MainContainer from '@/parts/MainContainer'; import { QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; -import { useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; -import { useGetIssueRequestLimit } from '@/utils/hooks/api/bridge/use-get-issue-request-limits'; -import { useGetMaxBurnableTokens } from '@/utils/hooks/api/bridge/use-get-max-burnable-tokens'; -import { useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; -import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; import { StyledCard, StyledFormWrapper, StyledWrapper } from './BTCOverview.styles'; import { IssueForm, LegacyBurnForm, LegacyTransactions, RedeemForm } from './components'; diff --git a/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx b/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx index ac620188e0..2f3623ffb3 100644 --- a/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx +++ b/src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx @@ -16,6 +16,14 @@ import { convertMonetaryAmountToValueInUSD, getRandomArrayElement, safeBitcoinAm import { Flex, TokenInput } from '@/component-library'; import { AuthCTA } from '@/components'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { IssueData, useGetIssueData } from '@/hooks/api/bridge/use-get-issue-data'; +import { BridgeVaultData, GetVaultType, useGetVaults } from '@/hooks/api/bridge/use-get-vaults'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { TransactionArgs } from '@/hooks/transaction/types'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { BTC_ISSUE_AMOUNT_FIELD, BTC_ISSUE_CUSTOM_VAULT_FIELD, @@ -27,14 +35,6 @@ import { useForm } from '@/lib/form'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { IssueData, useGetIssueData } from '@/utils/hooks/api/bridge/use-get-issue-data'; -import { BridgeVaultData, GetVaultType, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { TransactionArgs } from '@/utils/hooks/transaction/types'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { LegacyIssueModal } from '../LegacyIssueModal'; import { RequestLimitsCard } from '../RequestLimitsCard'; diff --git a/src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx b/src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx index d64c39daf9..a847c76810 100644 --- a/src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx +++ b/src/pages/BTC/BTCOverview/components/LegacyBurnForm/LegacyBurnForm.tsx @@ -7,12 +7,16 @@ import { useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; +import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { CoinIcon } from '@/component-library'; import { AuthCTA } from '@/components'; import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL, WrappedTokenLogoIcon } from '@/config/relay-chains'; import { BALANCE_MAX_INTEGER_LENGTH } from '@/constants'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetCollateralCurrencies } from '@/hooks/api/use-get-collateral-currencies'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import FormTitle from '@/legacy-components/FormTitle'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -23,10 +27,6 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetCollateralCurrencies } from '@/utils/hooks/api/use-get-collateral-currencies'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const WRAPPED_TOKEN_AMOUNT = 'wrapped-token-amount'; @@ -47,7 +47,7 @@ const LegacyBurnForm = (): JSX.Element | null => { const [status, setStatus] = React.useState(STATUSES.IDLE); const handleError = useErrorHandler(); - const { bridgeLoaded, parachainStatus } = useSelector((state: StoreType) => state.general); + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { data: balances } = useGetBalances(); const { data: collateralCurrencies } = useGetCollateralCurrencies(bridgeLoaded); @@ -278,13 +278,7 @@ const LegacyBurnForm = (): JSX.Element | null => { )} /> - + {t('burn')} diff --git a/src/pages/BTC/BTCOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx b/src/pages/BTC/BTCOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx index 2742546756..0a79ad20ff 100644 --- a/src/pages/BTC/BTCOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx +++ b/src/pages/BTC/BTCOverview/components/LegacyRedeemModal/LegacyRedeemModal.tsx @@ -5,6 +5,7 @@ import { FaExclamationCircle } from 'react-icons/fa'; import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { Modal, ModalBody } from '@/component-library'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; @@ -12,7 +13,6 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; const USER_BTC_ADDRESS = 'user-btc-address'; diff --git a/src/pages/BTC/BTCOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx b/src/pages/BTC/BTCOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx index 03d7e84fe0..4ab638ebda 100644 --- a/src/pages/BTC/BTCOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx +++ b/src/pages/BTC/BTCOverview/components/LegacyTransactions/IssueRequestsTable/index.tsx @@ -11,9 +11,13 @@ import { formatDateTimePrecise, formatNumber, shortTxId } from '@/common/utils/u import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useIssueRequests } from '@/hooks/issue-requests'; +import useQueryParams from '@/hooks/use-query-params'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -24,15 +28,11 @@ import InterlayTable, { InterlayTr } from '@/legacy-components/UI/InterlayTable'; import { useSubstrateSecureState } from '@/lib/substrate'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; -import { useIssueRequests } from '@/services/hooks/issue-requests'; import { issuesCountQuery } from '@/services/queries/issues'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; import IssueRequestModal from './IssueRequestModal'; diff --git a/src/pages/BTC/BTCOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx b/src/pages/BTC/BTCOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx index d67f055f8b..ad2f01f13c 100644 --- a/src/pages/BTC/BTCOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx +++ b/src/pages/BTC/BTCOverview/components/LegacyTransactions/RedeemRequestsTable/index.tsx @@ -11,9 +11,15 @@ import { formatDateTimePrecise, formatNumber, shortTxId } from '@/common/utils/u import { BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useQueryParams from '@/hooks/use-query-params'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -24,18 +30,12 @@ import InterlayTable, { InterlayTr } from '@/legacy-components/UI/InterlayTable'; import { useSubstrateSecureState } from '@/lib/substrate'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import redeemCountQuery from '@/services/queries/redeem-count-query'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; import RedeemRequestModal from './RedeemRequestModal'; diff --git a/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx index f43702e52b..5218e0f917 100644 --- a/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx +++ b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx @@ -14,6 +14,13 @@ import { import { Flex, Input, TokenInput } from '@/component-library'; import { AuthCTA } from '@/components'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { RedeemData, useGetRedeemData } from '@/hooks/api/bridge/use-get-redeem-data'; +import { BridgeVaultData, GetVaultType, useGetVaults } from '@/hooks/api/bridge/use-get-vaults'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { TransactionArgs } from '@/hooks/transaction/types'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { BTC_REDEEM_ADDRESS, BTC_REDEEM_AMOUNT_FIELD, @@ -27,13 +34,6 @@ import { } from '@/lib/form'; import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { RedeemData, useGetRedeemData } from '@/utils/hooks/api/bridge/use-get-redeem-data'; -import { BridgeVaultData, GetVaultType, useGetVaults } from '@/utils/hooks/api/bridge/use-get-vaults'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { TransactionArgs } from '@/utils/hooks/transaction/types'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { LegacyRedeemModal } from '../LegacyRedeemModal'; import { RequestLimitsCard } from '../RequestLimitsCard'; diff --git a/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx index ec054e5320..814c9c66c4 100644 --- a/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx +++ b/src/pages/BTC/BTCOverview/components/SelectVaultCard/SelectVaultCard.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next'; import { Card, SwitchProps } from '@/component-library'; -import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { BridgeVaultData } from '@/hooks/api/bridge/use-get-vaults'; import { VaultSelect, VaultSelectProps } from './VaultSelect'; import { StyledSwitch } from './VaultSelect.style'; diff --git a/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx index 0fd4507971..2c327244db 100644 --- a/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx +++ b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultListItem.tsx @@ -2,7 +2,7 @@ import Identicon from '@polkadot/react-identicon'; import { CoinIcon, Flex } from '@/component-library'; import { useSelectModalContext } from '@/component-library/Select/SelectModalContext'; -import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { BridgeVaultData } from '@/hooks/api/bridge/use-get-vaults'; import { StyledListLabelWrapper, diff --git a/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx index 2a84063612..4377463ca2 100644 --- a/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx +++ b/src/pages/BTC/BTCOverview/components/SelectVaultCard/VaultSelect.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next'; import { Item, Select, SelectProps } from '@/component-library'; -import { BridgeVaultData } from '@/utils/hooks/api/bridge/use-get-vaults'; +import { BridgeVaultData } from '@/hooks/api/bridge/use-get-vaults'; import { VaultListItem } from './VaultListItem'; diff --git a/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx b/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx index 1003931a57..2b8bea6287 100644 --- a/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx +++ b/src/pages/BTC/BTCOverview/components/TransactionDetails/TransactionDetails.tsx @@ -14,9 +14,9 @@ import { TransactionSelectToken, TransactionSelectTokenProps } from '@/components'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { SelectCurrencyFilter, useSelectCurrency } from '@/hooks/use-select-currency'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { SelectCurrencyFilter, useSelectCurrency } from '@/utils/hooks/use-select-currency'; import { StyledPlusDivider } from './TransactionDetails.style'; diff --git a/src/pages/Dashboard/cards/BTCRelayCard/index.tsx b/src/pages/Dashboard/cards/BTCRelayCard/index.tsx index 0fe8b4ba7a..9278c2df1d 100644 --- a/src/pages/Dashboard/cards/BTCRelayCard/index.tsx +++ b/src/pages/Dashboard/cards/BTCRelayCard/index.tsx @@ -1,12 +1,11 @@ import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; -import { StoreType } from '@/common/types/util.types'; import { formatNumber } from '@/common/utils/utils'; import Ring64, { Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; import { PAGES } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; +import { useGetBtcBlockHeight } from '@/utils/hooks/api/use-get-btc-block-height'; import Stats, { StatsDd, StatsDt, StatsRouterLink } from '../../Stats'; import DashboardCard from '../DashboardCard'; @@ -24,15 +23,10 @@ interface Props { const BTCRelayCard = ({ hasLinks }: Props): JSX.Element => { const { t } = useTranslation(); // TODO: compute status using blockstream data - const { btcRelayHeight, bitcoinHeight } = useSelector((state: StoreType) => state.general); + const { data: blockHeight } = useGetBtcBlockHeight(); + + const state = blockHeight ? (blockHeight.isOutdated ? Status.Failure : Status.Ok) : Status.Loading; - const outdatedRelayThreshold = 12; - const state = - bitcoinHeight === 0 - ? Status.Loading - : bitcoinHeight - btcRelayHeight >= outdatedRelayThreshold - ? Status.Failure - : Status.Ok; const statusText = state === Status.Loading ? t('loading') @@ -81,7 +75,9 @@ const BTCRelayCard = ({ hasLinks }: Props): JSX.Element => { > {graphText} - {t('dashboard.relay.block_number', { number: formatNumber(btcRelayHeight) })} + + {t('dashboard.relay.block_number', { number: formatNumber(blockHeight?.relay || 0) })} + ); diff --git a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx index 7718452741..fcb27215e6 100644 --- a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx +++ b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx @@ -5,12 +5,12 @@ import { withErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { OracleStatus, useGetOracleStatus } from '@/hooks/api/oracle/use-get-oracle-status'; +import { useGetExchangeRate } from '@/hooks/api/use-get-exchange-rate'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import Ring64, { Ring64Subtitle, Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; import { PAGES } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; -import { OracleStatus, useGetOracleStatus } from '@/utils/hooks/api/oracle/use-get-oracle-status'; -import { useGetExchangeRate } from '@/utils/hooks/api/use-get-exchange-rate'; import Stats, { StatsDd, StatsDt, StatsRouterLink } from '../../Stats'; import DashboardCard from '../DashboardCard'; diff --git a/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx b/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx index c77c05b822..c04d5f250e 100644 --- a/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx +++ b/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx @@ -1,12 +1,11 @@ import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import Ring64, { Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; import { PAGES } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; +import { useGetParachainStatus } from '@/utils/hooks/api/system/use-get-parachain-status'; import Stats, { StatsRouterLink } from '../../Stats'; import DashboardCard from '../DashboardCard'; @@ -17,20 +16,23 @@ interface Props { const ParachainSecurityCard = ({ hasLinks }: Props): JSX.Element => { const { t } = useTranslation(); - const { parachainStatus } = useSelector((state: StoreType) => state.general); + + const { data: parachainStatus, isLoading } = useGetParachainStatus(); const getParachainStatusText = () => { - switch (parachainStatus) { - case ParachainStatus.Running: - return t('dashboard.parachain.secure'); - case ParachainStatus.Loading: - return t('loading'); - case ParachainStatus.Error: - case ParachainStatus.Shutdown: - return t('dashboard.parachain.halted'); - default: - return t('no_data'); + if (!parachainStatus && !isLoading) { + return t('no_data'); + } + + if (!parachainStatus || isLoading) { + return t('loading'); } + + if (parachainStatus.isError || parachainStatus.isShutdown) { + return t('dashboard.parachain.halted'); + } + + return t('dashboard.parachain.secure'); }; return ( @@ -41,21 +43,19 @@ const ParachainSecurityCard = ({ hasLinks }: Props): JSX.Element => { diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index ac95723601..668d2d44b2 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Route, Switch, useRouteMatch } from 'react-router-dom'; -import MainContainer from '@/parts/MainContainer'; +import { MainContainer } from '@/components'; import { PAGES } from '@/utils/constants/links'; const Home = React.lazy(() => import(/* webpackChunkName: 'home' */ './sub-pages/Home')); diff --git a/src/pages/Dashboard/sub-pages/BTCRelay/BlocksTable/index.tsx b/src/pages/Dashboard/sub-pages/BTCRelay/BlocksTable/index.tsx index 6c3cfb9918..4598c11a16 100644 --- a/src/pages/Dashboard/sub-pages/BTCRelay/BlocksTable/index.tsx +++ b/src/pages/Dashboard/sub-pages/BTCRelay/BlocksTable/index.tsx @@ -10,10 +10,13 @@ import { useTable } from 'react-table'; import { formatDateTimePrecise, formatNumber, shortAddress } from '@/common/utils/utils'; import { BTC_EXPLORER_BLOCK_API } from '@/config/blockstream-explorer-links'; +import useQueryParams from '@/hooks/use-query-params'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -23,14 +26,11 @@ import InterlayTable, { InterlayThead, InterlayTr } from '@/legacy-components/UI/InterlayTable'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import btcBlocksCountQuery from '@/services/queries/btc-blocks-count-query'; import btcBlocksQuery from '@/services/queries/btc-blocks-query'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; const BlocksTable = (): JSX.Element => { const { t } = useTranslation(); diff --git a/src/pages/Dashboard/sub-pages/BTCRelay/BlockstreamCard/index.tsx b/src/pages/Dashboard/sub-pages/BTCRelay/BlockstreamCard/index.tsx index e6b5b9df89..073b166e10 100644 --- a/src/pages/Dashboard/sub-pages/BTCRelay/BlockstreamCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/BTCRelay/BlockstreamCard/index.tsx @@ -12,13 +12,15 @@ import ExternalLink from '@/legacy-components/ExternalLink'; import Ring64, { Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; +import { useGetBtcBlockHeight } from '@/utils/hooks/api/use-get-btc-block-height'; import DashboardCard from '../../../cards/DashboardCard'; import Stats from '../../../Stats'; const BlockstreamCard = (): JSX.Element => { const { t } = useTranslation(); - const { bridgeLoaded, bitcoinHeight } = useSelector((state: StoreType) => state.general); + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); + const { data: blockHeight } = useGetBtcBlockHeight(); const { isIdle: blockstreamTipIdle, @@ -65,7 +67,9 @@ const BlockstreamCard = (): JSX.Element => { > {t('blockstream')} - {t('dashboard.relay.block_number', { number: formatNumber(bitcoinHeight) })} + + {t('dashboard.relay.block_number', { number: formatNumber(blockHeight?.bitcoin || 0) })} + ); diff --git a/src/pages/Dashboard/sub-pages/BTCRelay/index.tsx b/src/pages/Dashboard/sub-pages/BTCRelay/index.tsx index 58432bb60c..cca32098b0 100644 --- a/src/pages/Dashboard/sub-pages/BTCRelay/index.tsx +++ b/src/pages/Dashboard/sub-pages/BTCRelay/index.tsx @@ -2,8 +2,8 @@ import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import Hr1 from '@/legacy-components/hrs/Hr1'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import BTCRelayCard from '../../cards/BTCRelayCard'; import BlocksTable from './BlocksTable'; diff --git a/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx b/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx index a6ce675d94..c74c10068c 100644 --- a/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx @@ -10,13 +10,13 @@ import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import useCumulativeCollateralVolumes from '@/hooks/use-cumulative-collateral-volumes'; import ErrorFallback from '@/legacy-components/ErrorFallback'; -import useCumulativeCollateralVolumes from '@/services/hooks/use-cumulative-collateral-volumes'; import { INTERLAY_DENIM, KINTSUGI_SUPERNOVA } from '@/utils/constants/colors'; import { PAGES } from '@/utils/constants/links'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import DashboardCard from '../../../cards/DashboardCard'; import LineChart from '../../../LineChart'; diff --git a/src/pages/Dashboard/sub-pages/Home/WrappedTokenCard/index.tsx b/src/pages/Dashboard/sub-pages/Home/WrappedTokenCard/index.tsx index 5c78bf2cb7..3e02b5ae4c 100644 --- a/src/pages/Dashboard/sub-pages/Home/WrappedTokenCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/Home/WrappedTokenCard/index.tsx @@ -1,22 +1,22 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; import { useTranslation } from 'react-i18next'; -import { useSelector } from 'react-redux'; -import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import IssuedChart from '@/pages/Dashboard/IssuedChart'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { PAGES } from '@/utils/constants/links'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { useGetTotalLockedTokens } from '@/utils/hooks/api/tokens/use-get-total-locked-tokens'; import DashboardCard from '../../../cards/DashboardCard'; import Stats, { StatsDd, StatsDt, StatsRouterLink } from '../../../Stats'; const WrappedTokenCard = (): JSX.Element => { - const { totalWrappedTokenAmount } = useSelector((state: StoreType) => state.general); const { t } = useTranslation(); const prices = useGetPrices(); + const { data: totalLockedData } = useGetTotalLockedTokens(); const renderContent = () => { return ( @@ -27,13 +27,13 @@ const WrappedTokenCard = (): JSX.Element => { {t('dashboard.issue.issued')} {t('dashboard.issue.total_interbtc', { - amount: totalWrappedTokenAmount.toHuman(8), + amount: totalLockedData?.wrapped.toHuman(8) || 0, wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL })} {displayMonetaryAmountInUSDFormat( - totalWrappedTokenAmount, + totalLockedData?.wrapped || newMonetaryAmount(0, WRAPPED_TOKEN), getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd )} diff --git a/src/pages/Dashboard/sub-pages/Home/index.tsx b/src/pages/Dashboard/sub-pages/Home/index.tsx index 15b06a5fd7..18108967b4 100644 --- a/src/pages/Dashboard/sub-pages/Home/index.tsx +++ b/src/pages/Dashboard/sub-pages/Home/index.tsx @@ -1,8 +1,8 @@ import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import ActiveVaultsCard from '../../cards/ActiveVaultsCard'; import BTCRelayCard from '../../cards/BTCRelayCard'; diff --git a/src/pages/Dashboard/sub-pages/IssueRequests/IssueRequestsTable/index.tsx b/src/pages/Dashboard/sub-pages/IssueRequests/IssueRequestsTable/index.tsx index e9da18a1c4..e6f6646b83 100644 --- a/src/pages/Dashboard/sub-pages/IssueRequests/IssueRequestsTable/index.tsx +++ b/src/pages/Dashboard/sub-pages/IssueRequests/IssueRequestsTable/index.tsx @@ -9,10 +9,14 @@ import { useTable } from 'react-table'; import { formatDateTimePrecise, formatNumber, shortAddress, shortTxId } from '@/common/utils/utils'; import { BTC_EXPLORER_ADDRESS_API, BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; +import { useIssueRequests } from '@/hooks/issue-requests'; +import useQueryParams from '@/hooks/use-query-params'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -24,15 +28,11 @@ import InterlayTable, { } from '@/legacy-components/UI/InterlayTable'; import StatusCell from '@/legacy-components/UI/InterlayTable/StatusCell'; import ViewRequestDetailsLink from '@/legacy-components/ViewRequestDetailsLink'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; -import { useIssueRequests } from '@/services/hooks/issue-requests'; import { issuesCountQuery } from '@/services/queries/issues'; import { TXType } from '@/types/general.d'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; const IssueRequestsTable = (): JSX.Element => { const queryParams = useQueryParams(); diff --git a/src/pages/Dashboard/sub-pages/IssueRequests/UpperContent/index.tsx b/src/pages/Dashboard/sub-pages/IssueRequests/UpperContent/index.tsx index 58531e4921..da2afe7c75 100644 --- a/src/pages/Dashboard/sub-pages/IssueRequests/UpperContent/index.tsx +++ b/src/pages/Dashboard/sub-pages/IssueRequests/UpperContent/index.tsx @@ -1,12 +1,12 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; import clsx from 'clsx'; import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; import { useQuery } from 'react-query'; -import { useSelector } from 'react-redux'; -import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; -import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import Panel from '@/legacy-components/Panel'; import IssuedChart from '@/pages/Dashboard/IssuedChart'; @@ -16,12 +16,12 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; +import { useGetTotalLockedTokens } from '@/utils/hooks/api/tokens/use-get-total-locked-tokens'; import Stats, { StatsDd, StatsDt } from '../../../Stats'; const UpperContent = (): JSX.Element => { - const { totalWrappedTokenAmount } = useSelector((state: StoreType) => state.general); + const { data: totalLockedData } = useGetTotalLockedTokens(); const { t } = useTranslation(); const prices = useGetPrices(); @@ -61,13 +61,13 @@ const UpperContent = (): JSX.Element => { {t('dashboard.issue.total_interbtc', { - amount: totalWrappedTokenAmount.toHuman(8), + amount: totalLockedData?.wrapped.toHuman(8) || 0, wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL })} {displayMonetaryAmountInUSDFormat( - totalWrappedTokenAmount, + totalLockedData?.relay || newMonetaryAmount(0, WRAPPED_TOKEN), getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd )} diff --git a/src/pages/Dashboard/sub-pages/IssueRequests/index.tsx b/src/pages/Dashboard/sub-pages/IssueRequests/index.tsx index c1065c9d83..aa808fc3de 100644 --- a/src/pages/Dashboard/sub-pages/IssueRequests/index.tsx +++ b/src/pages/Dashboard/sub-pages/IssueRequests/index.tsx @@ -1,8 +1,8 @@ import { useTranslation } from 'react-i18next'; import Hr1 from '@/legacy-components/hrs/Hr1'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import IssueRequestsTable from './IssueRequestsTable'; import UpperContent from './UpperContent'; diff --git a/src/pages/Dashboard/sub-pages/Oracles/OraclesTable/index.tsx b/src/pages/Dashboard/sub-pages/Oracles/OraclesTable/index.tsx index fbbaa2b69b..0aa78b5f1c 100644 --- a/src/pages/Dashboard/sub-pages/Oracles/OraclesTable/index.tsx +++ b/src/pages/Dashboard/sub-pages/Oracles/OraclesTable/index.tsx @@ -14,6 +14,7 @@ import { formatDateTime, formatNumber } from '@/common/utils/utils'; import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL } from '@/config/relay-chains'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayTable, { InterlayTableContainer, InterlayTbody, @@ -22,7 +23,6 @@ import InterlayTable, { InterlayThead, InterlayTr } from '@/legacy-components/UI/InterlayTable'; -import SectionTitle from '@/parts/SectionTitle'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { allLatestSubmissionsFetcher, diff --git a/src/pages/Dashboard/sub-pages/Oracles/index.tsx b/src/pages/Dashboard/sub-pages/Oracles/index.tsx index 8c43332005..0392f38303 100644 --- a/src/pages/Dashboard/sub-pages/Oracles/index.tsx +++ b/src/pages/Dashboard/sub-pages/Oracles/index.tsx @@ -1,8 +1,8 @@ import { useTranslation } from 'react-i18next'; import Hr1 from '@/legacy-components/hrs/Hr1'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import OracleStatusCard from '../../cards/OracleStatusCard'; import OraclesTable from './OraclesTable'; diff --git a/src/pages/Dashboard/sub-pages/Parachain/index.tsx b/src/pages/Dashboard/sub-pages/Parachain/index.tsx index 46493244d2..4b5a4a47ec 100644 --- a/src/pages/Dashboard/sub-pages/Parachain/index.tsx +++ b/src/pages/Dashboard/sub-pages/Parachain/index.tsx @@ -1,8 +1,8 @@ import { useTranslation } from 'react-i18next'; import Hr1 from '@/legacy-components/hrs/Hr1'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import ParachainSecurityCard from '../../cards/ParachainSecurityCard'; diff --git a/src/pages/Dashboard/sub-pages/RedeemRequests/RedeemRequestsTable/index.tsx b/src/pages/Dashboard/sub-pages/RedeemRequests/RedeemRequestsTable/index.tsx index a9edfa287e..585335b9cd 100644 --- a/src/pages/Dashboard/sub-pages/RedeemRequests/RedeemRequestsTable/index.tsx +++ b/src/pages/Dashboard/sub-pages/RedeemRequests/RedeemRequestsTable/index.tsx @@ -8,10 +8,16 @@ import { useTable } from 'react-table'; import { formatDateTimePrecise, formatNumber, shortAddress, shortTxId } from '@/common/utils/utils'; import { BTC_EXPLORER_ADDRESS_API, BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useQueryParams from '@/hooks/use-query-params'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -23,18 +29,12 @@ import InterlayTable, { } from '@/legacy-components/UI/InterlayTable'; import StatusCell from '@/legacy-components/UI/InterlayTable/StatusCell'; import ViewRequestDetailsLink from '@/legacy-components/ViewRequestDetailsLink'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import redeemCountQuery from '@/services/queries/redeem-count-query'; import { TXType } from '@/types/general.d'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; const RedeemRequestsTable = (): JSX.Element => { const queryParams = useQueryParams(); diff --git a/src/pages/Dashboard/sub-pages/RedeemRequests/UpperContent/index.tsx b/src/pages/Dashboard/sub-pages/RedeemRequests/UpperContent/index.tsx index f8f23c8f19..cd2473202c 100644 --- a/src/pages/Dashboard/sub-pages/RedeemRequests/UpperContent/index.tsx +++ b/src/pages/Dashboard/sub-pages/RedeemRequests/UpperContent/index.tsx @@ -5,6 +5,7 @@ import { useQuery } from 'react-query'; import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/utils'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import Panel from '@/legacy-components/Panel'; import cumulativeVolumesFetcher, { @@ -18,7 +19,6 @@ import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { getColorShade } from '@/utils/helpers/colors'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import Stats, { StatsDd, StatsDt } from '../../../Stats'; import RedeemedChart from './RedeemedChart'; diff --git a/src/pages/Dashboard/sub-pages/RedeemRequests/index.tsx b/src/pages/Dashboard/sub-pages/RedeemRequests/index.tsx index 96bc281bff..d3ab032d22 100644 --- a/src/pages/Dashboard/sub-pages/RedeemRequests/index.tsx +++ b/src/pages/Dashboard/sub-pages/RedeemRequests/index.tsx @@ -1,9 +1,9 @@ import { useTranslation } from 'react-i18next'; import Hr1 from '@/legacy-components/hrs/Hr1'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import RedeemRequestsTable from '@/pages/Dashboard/sub-pages/RedeemRequests/RedeemRequestsTable'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; import UpperContent from './UpperContent'; diff --git a/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx b/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx index f02e3d314e..af5eea9735 100644 --- a/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx @@ -8,11 +8,11 @@ import { getLastMidnightTimestamps } from '@/common/utils/utils'; import { COUNT_OF_DATES_FOR_CHART } from '@/config/charts'; +import useCumulativeCollateralVolumes from '@/hooks/use-cumulative-collateral-volumes'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import DashboardCard from '@/pages/Dashboard/cards/DashboardCard'; import LineChart from '@/pages/Dashboard/LineChart'; import Stats, { StatsDd, StatsDt } from '@/pages/Dashboard/Stats'; -import useCumulativeCollateralVolumes from '@/services/hooks/use-cumulative-collateral-volumes'; import { INTERLAY_DENIM, KINTSUGI_SUPERNOVA } from '@/utils/constants/colors'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; diff --git a/src/pages/Dashboard/sub-pages/Vaults/VaultsTable/index.tsx b/src/pages/Dashboard/sub-pages/Vaults/VaultsTable/index.tsx index 2603201de4..f1a321c361 100644 --- a/src/pages/Dashboard/sub-pages/Vaults/VaultsTable/index.tsx +++ b/src/pages/Dashboard/sub-pages/Vaults/VaultsTable/index.tsx @@ -14,9 +14,14 @@ import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, formatPercentage } from '@/common/utils/utils'; import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import * as constants from '@/constants'; +import { useGetCollateralCurrenciesData } from '@/hooks/api/use-get-collateral-currencies-data'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { useGetIdentities } from '@/hooks/api/use-get-identities'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import InterlayTable, { InterlayTableContainer, @@ -26,15 +31,10 @@ import InterlayTable, { InterlayThead, InterlayTr } from '@/legacy-components/UI/InterlayTable'; -import SectionTitle from '@/parts/SectionTitle'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; import { PAGES, URL_PARAMETERS } from '@/utils/constants/links'; import { getColorShade } from '@/utils/helpers/colors'; import { getCollateralization, getVaultStatusLabel } from '@/utils/helpers/vaults'; -import { useGetCollateralCurrenciesData } from '@/utils/hooks/api/use-get-collateral-currencies-data'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { useGetIdentities } from '@/utils/hooks/api/use-get-identities'; interface CollateralizationCellProps { settledCollateralization: Big | undefined; diff --git a/src/pages/Dashboard/sub-pages/Vaults/index.tsx b/src/pages/Dashboard/sub-pages/Vaults/index.tsx index dcdb03afac..b405f27d4a 100644 --- a/src/pages/Dashboard/sub-pages/Vaults/index.tsx +++ b/src/pages/Dashboard/sub-pages/Vaults/index.tsx @@ -4,13 +4,13 @@ import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; +import { useGetCollateralCurrencies } from '@/hooks/api/use-get-collateral-currencies'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import Hr1 from '@/legacy-components/hrs/Hr1'; +import PageTitle from '@/legacy-components/PageTitle'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetCollateralCurrencies } from '@/utils/hooks/api/use-get-collateral-currencies'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import ActiveVaultsCard from '../../cards/ActiveVaultsCard'; import CollateralizationCard from '../../cards/CollateralizationCard'; diff --git a/src/pages/EarnStrategies/EarnStrategies.tsx b/src/pages/EarnStrategies/EarnStrategies.tsx deleted file mode 100644 index 84ab2c0d2b..0000000000 --- a/src/pages/EarnStrategies/EarnStrategies.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { withErrorBoundary } from 'react-error-boundary'; - -import ErrorFallback from '@/legacy-components/ErrorFallback'; - -const EarnStrategies = (): JSX.Element => { - return

Earn Strategies

; -}; - -export default withErrorBoundary(EarnStrategies, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/EarnStrategies/index.tsx b/src/pages/EarnStrategies/index.tsx deleted file mode 100644 index 7a73a2c641..0000000000 --- a/src/pages/EarnStrategies/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import EarnStrategies from './EarnStrategies'; - -export default EarnStrategies; diff --git a/src/pages/Loans/LoansOverview/LoansOverview.tsx b/src/pages/Loans/LoansOverview/LoansOverview.tsx index 143e82ee36..6f88310e48 100644 --- a/src/pages/Loans/LoansOverview/LoansOverview.tsx +++ b/src/pages/Loans/LoansOverview/LoansOverview.tsx @@ -1,10 +1,10 @@ import { Flex } from '@/component-library'; +import { MainContainer } from '@/components'; +import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; +import { useGetLoanAssets } from '@/hooks/api/loans/use-get-loan-assets'; +import useAccountId from '@/hooks/use-account-id'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; -import MainContainer from '@/parts/MainContainer'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; -import { useGetLoanAssets } from '@/utils/hooks/api/loans/use-get-loan-assets'; -import useAccountId from '@/utils/hooks/use-account-id'; import { LoansInsights, LoansTables, LTVSection } from './components'; diff --git a/src/pages/Loans/LoansOverview/components/BorrowAssetsTable/BorrowAssetsTable.tsx b/src/pages/Loans/LoansOverview/components/BorrowAssetsTable/BorrowAssetsTable.tsx index 93e5de076e..a74560461f 100644 --- a/src/pages/Loans/LoansOverview/components/BorrowAssetsTable/BorrowAssetsTable.tsx +++ b/src/pages/Loans/LoansOverview/components/BorrowAssetsTable/BorrowAssetsTable.tsx @@ -5,10 +5,9 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; import { Cell, Table, TableProps } from '@/components'; -import { ApyCell } from '@/components/LoanPositionsTable/ApyCell'; -import { LoanTablePlaceholder } from '@/components/LoanPositionsTable/LoanTablePlaceholder'; +import { LoanApyCell, LoanTablePlaceholder } from '@/components/LoanPositionsTable'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { StyledAssetCell } from './BorrowAssetsTable.style'; @@ -27,14 +26,6 @@ type BorrowAssetsTableRow = { [BorrowAssetsColumns.TOTAL_BORROWED]: ReactNode; }; -// TODO: translations -const borrowAssetsColumns = [ - { name: 'Asset', uid: BorrowAssetsColumns.ASSET }, - { name: 'APY', uid: BorrowAssetsColumns.APY }, - { name: 'Capacity', uid: BorrowAssetsColumns.CAPACITY }, - { name: 'Total Borrowed', uid: BorrowAssetsColumns.TOTAL_BORROWED } -]; - type Props = { assets: TickerToData; }; @@ -48,13 +39,24 @@ const BorrowAssetsTable = ({ assets, onRowAction, ...props }: BorrowAssetsTableP const { t } = useTranslation(); const prices = useGetPrices(); + // TODO: translations + const borrowAssetsColumns = useMemo( + () => [ + { name: t('asset'), uid: BorrowAssetsColumns.ASSET }, + { name: t('apy'), uid: BorrowAssetsColumns.APY }, + { name: t('available'), uid: BorrowAssetsColumns.CAPACITY }, + { name: t('loans.borrowed'), uid: BorrowAssetsColumns.TOTAL_BORROWED } + ], + [t] + ); + const rows: BorrowAssetsTableRow[] = useMemo( () => Object.values(assets).map(({ borrowApy, currency, availableCapacity, totalBorrows, borrowReward }) => { const asset = ; const apy = ( - ; + isOpen?: boolean; + onSigning: () => void; +}; + +const CollateralForm = ({ asset, variant, isOpen, onSigning }: CollateralFormProps): JSX.Element => { + const { t } = useTranslation(); + + const { refetch } = useGetAccountLendingStatistics(); + + const overlappingModalRef = useRef(null); + + const transaction = useTransaction({ + onSigning, + onSuccess: refetch + }); + + const handleSubmit = () => { + if (variant === 'enable') { + return transaction.execute(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); + } else { + return transaction.execute(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); + } + }; + + const form = useForm({ + initialValues: { + [LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]: '' + }, + validationSchema: toggleCollateralLoanSchema(), + onSubmit: handleSubmit, + onComplete: async () => { + if (variant === 'enable') { + return transaction.fee.estimate(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); + } else { + return transaction.fee.estimate(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); + } + } + }); + + // Doing this call on mount so that the form becomes dirty + // TODO: find better approach + useEffect(() => { + if (!isOpen) return; + + form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isOpen]); + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + + return ( +
+ + + + {variant === 'enable' + ? t('loans.use_ticker_as_collateral', { ticker: asset.currency.ticker }) + : t('loans.disable_ticker', { ticker: asset.currency.ticker })} + + +
+ ); +}; + +export { CollateralForm }; +export type { CollateralFormProps }; diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx index a67f41b51b..6236b6bccd 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx @@ -1,52 +1,39 @@ -import { CollateralPosition, CurrencyExt, LoanAsset } from '@interlay/interbtc-api'; +import { CurrencyExt } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; -import { useEffect, useRef } from 'react'; +import { useRef } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; import { CTA, Flex, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps, Status } from '@/component-library'; -import { AuthCTA, TransactionFeeDetails } from '@/components'; -import { - LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, - toggleCollateralLoanSchema, - ToggleCollateralLoansFormData, - useForm -} from '@/lib/form'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { CollateralPosition, LoanAsset } from '@/types/loans'; import { useGetLTV } from '../../hooks/use-get-ltv'; import { BorrowLimit } from '../BorrowLimit'; +import { CollateralForm } from './CollateralForm'; import { StyledDescription } from './CollateralModal.style'; type CollateralModalVariant = 'enable' | 'disable' | 'disable-error' | 'disable-vault-collateral'; -const getContentMap = (t: TFunction, variant: CollateralModalVariant, asset: LoanAsset) => +const getContentMap = (t: TFunction, variant: CollateralModalVariant) => ({ enable: { title: 'Enable as Collateral', description: - 'Each asset used as collateral increases your borrowing limit. Be aware that this can subject the asset to being seized in liquidation.', - buttonLabel: `Use ${asset.currency.ticker} as Collateral` + 'Each asset used as collateral increases your borrowing limit. Be aware that this can subject the asset to being seized in liquidation.' }, disable: { title: 'Disable Collateral', - description: - "This asset will no longer be used towards your borrowing limit, and can't be seized in liquidation.", - buttonLabel: `Disable ${asset.currency.ticker}` + description: "This asset will no longer be used towards your borrowing limit, and can't be seized in liquidation." }, 'disable-error': { title: 'Collateral Required', description: - 'This asset is required to support your borrowed assets. Either repay borrowed assets, or supply another asset as collateral.', - buttonLabel: `Dismiss` + 'This asset is required to support your borrowed assets. Either repay borrowed assets, or supply another asset as collateral.' }, 'disable-vault-collateral': { title: 'Already used as vault collateral', description: - 'This asset is already used as vault collateral and therefore can not be used as collateral for lending.', - buttonLabel: `Dismiss` + 'This asset is already used as vault collateral and therefore can not be used as collateral for lending.' } }[variant]); @@ -64,8 +51,8 @@ const getModalVariant = ( }; type Props = { - asset: LoanAsset; - position: CollateralPosition; + asset?: LoanAsset; + position?: CollateralPosition; }; type InheritAttrs = Omit; @@ -74,16 +61,15 @@ type CollateralModalProps = Props & InheritAttrs; const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: CollateralModalProps): JSX.Element | null => { const { t } = useTranslation(); - const { refetch } = useGetAccountLendingStatistics(); + const { getLTV } = useGetLTV(); const prices = useGetPrices(); const overlappingModalRef = useRef(null); - const transaction = useTransaction({ - onSigning: onClose, - onSuccess: refetch - }); + if (!asset || !position) { + return null; + } const { isCollateral: isCollateralActive, amount: lendPositionAmount, vaultCollateralAmount } = position; @@ -91,41 +77,7 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate const currentLTV = getLTV({ type: loanAction, amount: lendPositionAmount }); const variant = getModalVariant(isCollateralActive, currentLTV?.status, vaultCollateralAmount); - const handleSubmit = () => { - if (variant === 'enable') { - return transaction.execute(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); - } else { - return transaction.execute(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); - } - }; - - const form = useForm({ - initialValues: { - [LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD]: '' - }, - validationSchema: toggleCollateralLoanSchema(), - onSubmit: handleSubmit, - onComplete: async () => { - if (variant === 'enable') { - return transaction.fee.estimate(Transaction.LOANS_ENABLE_COLLATERAL, asset.currency); - } else { - return transaction.fee.estimate(Transaction.LOANS_DISABLE_COLLATERAL, asset.currency); - } - } - }); - - // Doing this call on mount so that the form becomes dirty - // TODO: find better approach - useEffect(() => { - if (variant === 'disable-error' || variant === 'disable-vault-collateral' || !isOpen) return; - - form.setFieldValue(LOAN_TOGGLE_COLLATERAL_FEE_TOKEN_FIELD, transaction.fee.defaultCurrency.ticker, true); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isOpen, variant]); - - const content = getContentMap(t, variant, asset); - - const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + const content = getContentMap(t, variant); return ( {variant === 'disable-error' || variant === 'disable-vault-collateral' ? ( - {content.buttonLabel} + {t('dismiss')} ) : ( -
- - - - {content.buttonLabel} - - -
+ )} @@ -170,4 +109,4 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate }; export { CollateralModal }; -export type { CollateralModalProps }; +export type { CollateralModalProps, CollateralModalVariant }; diff --git a/src/pages/Loans/LoansOverview/components/LTVSection/LTVSection.tsx b/src/pages/Loans/LoansOverview/components/LTVSection/LTVSection.tsx index 00763d357c..c20c29c520 100644 --- a/src/pages/Loans/LoansOverview/components/LTVSection/LTVSection.tsx +++ b/src/pages/Loans/LoansOverview/components/LTVSection/LTVSection.tsx @@ -1,7 +1,7 @@ import { formatUSD } from '@/common/utils/utils'; import { Card } from '@/component-library'; -import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; +import { AccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { Prices } from '@/hooks/api/use-get-prices'; import { useGetLTV } from '../../hooks/use-get-ltv'; import { diff --git a/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx b/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx index ea399226b5..b930123e93 100644 --- a/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx +++ b/src/pages/Loans/LoansOverview/components/LendAssetsTable/LendAssetsTable.tsx @@ -5,11 +5,10 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; import { AssetCell, BalanceCell, Cell, Table, TableProps } from '@/components'; -import { ApyCell } from '@/components/LoanPositionsTable/ApyCell'; -import { LoanTablePlaceholder } from '@/components/LoanPositionsTable/LoanTablePlaceholder'; +import { LoanApyCell, LoanTablePlaceholder } from '@/components/LoanPositionsTable'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; enum LendAssetsColumns { ASSET = 'asset', @@ -26,14 +25,6 @@ type LendAssetsTableRow = { [LendAssetsColumns.TOTAL_SUPPLY]: ReactNode; }; -// TODO: translations -const lendAssetsColumns = [ - { name: 'Asset', uid: LendAssetsColumns.ASSET }, - { name: 'APY', uid: LendAssetsColumns.APY }, - { name: 'Wallet', uid: LendAssetsColumns.WALLET }, - { name: 'Total Supplied', uid: LendAssetsColumns.TOTAL_SUPPLY } -]; - type Props = { assets: TickerToData; }; @@ -48,13 +39,23 @@ const LendAssetsTable = ({ assets, onRowAction, ...props }: LendAssetsTableProps const prices = useGetPrices(); const { data: balances } = useGetBalances(); + const lendAssetsColumns = useMemo( + () => [ + { name: t('asset'), uid: LendAssetsColumns.ASSET }, + { name: t('apy'), uid: LendAssetsColumns.APY }, + { name: t('wallet'), uid: LendAssetsColumns.WALLET }, + { name: t('loans.total_supplied'), uid: LendAssetsColumns.TOTAL_SUPPLY } + ], + [t] + ); + const rows: LendAssetsTableRow[] = useMemo( () => Object.values(assets).map(({ lendApy, currency, totalLiquidity, lendReward }) => { const asset = ; const apy = ( - ; - assetCurrency: CurrencyExt; - isBorrow: boolean; - prices?: Prices; -}; - -const RewardsGroup = ({ isBorrow, apy, assetCurrency, rewards, prices }: RewardsGroupProps): JSX.Element | null => { - const subsidyRewardApy = getSubsidyRewardApy(assetCurrency, rewards, prices); - - if (!subsidyRewardApy) { - return null; - } - - const totalApy = isBorrow ? apy.sub(subsidyRewardApy) : apy.add(subsidyRewardApy); - - return ( - <> - -
Rewards APR {rewards.currency.ticker}
-
{getApyLabel(subsidyRewardApy)}
- - -
Total APY
-
{getApyLabel(totalApy)}
- - - ); -}; -export { RewardsGroup }; -export type { RewardsGroupProps }; diff --git a/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx index dc7ae9a09f..894297d909 100644 --- a/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanDetails/LoanDetails.tsx @@ -1,8 +1,8 @@ import { LoanAsset } from '@interlay/interbtc-api'; import { TransactionDetails, TransactionDetailsDd, TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; +import { Prices } from '@/hooks/api/use-get-prices'; import { LoanAction } from '@/types/loans'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; import { getApyLabel } from '../../utils/apy'; import { RewardsDetails } from './RewardsDetails'; diff --git a/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx b/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx index fcd5cc2462..e7e754c436 100644 --- a/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanDetails/RewardsDetails.tsx @@ -3,8 +3,8 @@ import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; import { TransactionDetailsDd, TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; +import { Prices } from '@/hooks/api/use-get-prices'; import { getApyLabel, getSubsidyRewardApy } from '@/utils/helpers/loans'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; type RewardsDetailsProps = { apy: Big; diff --git a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx index ee2f28004b..ff1f5694ef 100644 --- a/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanForm/LoanForm.tsx @@ -1,13 +1,16 @@ -import { BorrowPosition, CollateralPosition, CurrencyExt, LoanAsset, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; +import { newMonetaryAmount } from '@interlay/interbtc-api'; import { mergeProps } from '@react-aria/utils'; -import { ChangeEventHandler, RefObject, useCallback, useState } from 'react'; +import { RefObject, useCallback } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; -import { useDebounce } from 'react-use'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Flex, TokenInput } from '@/component-library'; import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; +import { useGetLoanAvailableAmounts } from '@/hooks/api/loans/use-get-loan-available-amounts'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { LOAN_AMOUNT_FIELD, LOAN_FEE_TOKEN_FIELD, @@ -16,14 +19,10 @@ import { LoanValidationParams, useForm } from '@/lib/form'; -import { LoanAction } from '@/types/loans'; +import { BorrowPosition, CollateralPosition, LoanAction, LoanAsset } from '@/types/loans'; import { getTokenInputProps } from '@/utils/helpers/input'; -import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; +import { getTokenPrice } from '@/utils/helpers/prices'; -import { useLoanFormData } from '../../hooks/use-loan-form-data'; import { isLendAsset } from '../../utils/is-loan-asset'; import { BorrowLimit } from '../BorrowLimit'; import { LoanDetails } from '../LoanDetails'; @@ -86,44 +85,20 @@ type LoanFormProps = { }; const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan }: LoanFormProps): JSX.Element => { - const [inputAmount, setInputAmount] = useState(); - const [isMaxAmount, setMaxAmount] = useState(false); - const { t } = useTranslation(); const { refetch, data: { hasCollateral } } = useGetAccountPositions(); const prices = useGetPrices(); - const { assetAmount, assetPrice } = useLoanFormData(variant, asset, position); - - const { content } = getData(t, variant); - - // withdraw has `withdraw` and `withdrawAll` - // repay has `repay` and `repayAll` - // They both are considered a multi action variant - const hasMultiActionVariant = variant === 'withdraw' || variant === 'repay'; - - const handleMaxAmount = (amount: MonetaryAmount) => { - // Comparing if the provided amount is equal to the amount - // available for the action, which is only relevant for - // when the action is `withdraw` or `repay` - const isMaxAmount = variant === 'withdraw' ? !!position?.amount.eq(amount) : assetAmount.max.eq(amount); - - setMaxAmount(isMaxAmount); - }; - - useDebounce( - () => { - if (!inputAmount || !hasMultiActionVariant) return; + const { + data: { minAmount, maxAmount }, + isMaxAmount + } = useGetLoanAvailableAmounts(variant, asset, position); - const inputMonetary = newMonetaryAmount(inputAmount, asset.currency, true); + const assetPrice = getTokenPrice(prices, asset.currency.ticker)?.usd || 0; - handleMaxAmount(inputMonetary); - }, - 300, - [inputAmount] - ); + const { content } = getData(t, variant); const transaction = useTransaction({ onSigning: onChangeLoan, onSuccess: refetch }); @@ -151,26 +126,32 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan switch (variant) { case 'lend': return transaction.execute(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); - case 'withdraw': - if (isMaxAmount) { + case 'withdraw': { + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { return transaction.execute(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); } else { return transaction.execute(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); } + } case 'borrow': return transaction.execute(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); - case 'repay': - if (isMaxAmount) { - return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, assetAmount.available); + case 'repay': { + const isRepayAll = isMaxAmount(monetaryAmount); + + if (isRepayAll) { + return transaction.execute(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, maxAmount); } else { return transaction.execute(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); } + } } }; const schemaParams: LoanValidationParams = { - minAmount: assetAmount.min, - maxAmount: assetAmount.available + minAmount, + maxAmount }; const form = useForm({ @@ -188,7 +169,9 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan case 'lend': return transaction.fee.estimate(Transaction.LOANS_LEND, monetaryAmount.currency, monetaryAmount); case 'withdraw': { - if (isMaxAmount) { + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { return transaction.fee.estimate(Transaction.LOANS_WITHDRAW_ALL, monetaryAmount.currency); } else { return transaction.fee.estimate(Transaction.LOANS_WITHDRAW, monetaryAmount.currency, monetaryAmount); @@ -198,11 +181,13 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan return transaction.fee.estimate(Transaction.LOANS_BORROW, monetaryAmount.currency, monetaryAmount); case 'repay': { - if (isMaxAmount) { + const isRepayAll = isMaxAmount(monetaryAmount); + + if (isRepayAll) { return ( transaction.fee // passing the limit calculated, so it can be used in the validation in transaction hook - .estimate(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, assetAmount.available) + .estimate(Transaction.LOANS_REPAY_ALL, monetaryAmount.currency, maxAmount) ); } else { return transaction.fee.estimate(Transaction.LOANS_REPAY, monetaryAmount.currency, monetaryAmount); @@ -216,19 +201,6 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); - const handleClickBalance = () => { - if (!hasMultiActionVariant) return; - - handleMaxAmount(assetAmount.available); - }; - - const handleChange: ChangeEventHandler = (e) => { - if (!hasMultiActionVariant) return; - - setMaxAmount(false); - setInputAmount(e.target.value); - }; - const showBorrowLimit = shouldShowBorrowLimit(variant, hasCollateral, position); return ( @@ -241,12 +213,7 @@ const LoanForm = ({ asset, variant, position, overlappingModalRef, onChangeLoan aria-label={content.fieldAriaLabel} balanceLabel={content.label} valueUSD={convertMonetaryAmountToValueInUSD(monetaryAmount, assetPrice) ?? 0} - onClickBalance={handleClickBalance} - {...mergeProps( - form.getFieldProps(LOAN_AMOUNT_FIELD, false, true), - getTokenInputProps(assetAmount.available), - { onChange: handleChange } - )} + {...mergeProps(form.getFieldProps(LOAN_AMOUNT_FIELD, false, true), getTokenInputProps(maxAmount))} /> {showBorrowLimit && ( )} diff --git a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx index 4066483f1a..647baa7a10 100644 --- a/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx +++ b/src/pages/Loans/LoansOverview/components/LoanModal/LoanModal.tsx @@ -1,9 +1,8 @@ -import { BorrowPosition, CollateralPosition, LoanAsset } from '@interlay/interbtc-api'; import { useRef } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; import { Modal, ModalBody, ModalProps, TabsItem } from '@/component-library'; -import { LoanAction, LoanType } from '@/types/loans'; +import { BorrowPosition, CollateralPosition, LoanAction, LoanAsset, LoanType } from '@/types/loans'; import { LoanForm } from '../LoanForm'; import { StyledTabs, StyledWrapper } from './LoanModal.style'; diff --git a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx index a593a41eaf..9a7db29eef 100644 --- a/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansInsights/LoansInsights.tsx @@ -11,16 +11,16 @@ import { TransactionDetailsGroup, TransactionFeeDetails } from '@/components'; +import { AccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { useGetAccountSubsidyRewards } from '@/hooks/api/loans/use-get-account-subsidy-rewards'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { claimRewardsLoanSchema, ClaimRewardsLoansFormData, LOAN_CLAIM_REWARDS_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; -import { AccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { useGetAccountSubsidyRewards } from '@/utils/hooks/api/loans/use-get-account-subsidy-rewards'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { StyledDd, StyledDt } from './LoansInsights.style'; diff --git a/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx b/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx index bafb8df232..6302ae5e38 100644 --- a/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansTables/LendTables.tsx @@ -1,19 +1,20 @@ -import { CollateralPosition, LoanAsset, TickerToData } from '@interlay/interbtc-api'; +import { TickerToData } from '@interlay/interbtc-api'; import { Key, useState } from 'react'; +import { CollateralPosition, LoanAsset } from '@/types/loans'; + import { getPosition } from '../../utils/get-position'; import { CollateralModal } from '../CollateralModal'; import { LoanModal } from '../LoanModal'; import { StyledLendAssetsTable, StyledLendPositionsTable } from './LoansTables.style'; type UseAssetState = { + isOpen: boolean; type?: 'toggle-collateral' | 'change-loan'; data?: LoanAsset; position?: CollateralPosition; }; -const defaultAssetState: UseAssetState = { type: undefined, data: undefined, position: undefined }; - type LendTablesProps = { assets: TickerToData; positions: CollateralPosition[]; @@ -22,23 +23,23 @@ type LendTablesProps = { }; const LendTables = ({ assets, positions, disabledAssets, hasPositions }: LendTablesProps): JSX.Element => { - const [selectedAsset, setAsset] = useState(defaultAssetState); + const [selectedAsset, setAsset] = useState({ isOpen: false }); const handleRowAction = (ticker: Key) => { const asset = assets[ticker as string]; const position = getPosition(positions, ticker as string); - setAsset({ type: 'change-loan', data: asset, position }); + setAsset({ isOpen: true, type: 'change-loan', data: asset, position }); }; const handlePressCollateralSwitch = (ticker: string) => { const asset = assets[ticker]; const position = getPosition(positions, ticker); - setAsset({ type: 'toggle-collateral', data: asset, position }); + setAsset({ isOpen: true, type: 'toggle-collateral', data: asset, position }); }; - const handleClose = () => setAsset(defaultAssetState); + const handleClose = () => setAsset((s) => ({ ...s, isOpen: false })); return ( <> @@ -55,19 +56,17 @@ const LendTables = ({ assets, positions, disabledAssets, hasPositions }: LendTab + - {selectedAsset.data && selectedAsset.position && ( - - )} ); }; diff --git a/src/pages/Loans/LoansOverview/components/LoansTables/LoansTables.tsx b/src/pages/Loans/LoansOverview/components/LoansTables/LoansTables.tsx index 1f20356f09..8d729822c1 100644 --- a/src/pages/Loans/LoansOverview/components/LoansTables/LoansTables.tsx +++ b/src/pages/Loans/LoansOverview/components/LoansTables/LoansTables.tsx @@ -1,6 +1,8 @@ -import { BorrowPosition, CollateralPosition, LoanAsset, TickerToData } from '@interlay/interbtc-api'; +import { TickerToData } from '@interlay/interbtc-api'; import { useMemo } from 'react'; +import { BorrowPosition, CollateralPosition, LoanAsset } from '@/types/loans'; + import { BorrowTables } from './BorrowTables'; import { LendTables } from './LendTables'; import { StyledTablesWrapper } from './LoansTables.style'; diff --git a/src/pages/Loans/LoansOverview/hooks/use-get-account-borrow-limit.tsx b/src/pages/Loans/LoansOverview/hooks/use-get-account-borrow-limit.tsx index 1b1b672afd..b730ab5695 100644 --- a/src/pages/Loans/LoansOverview/hooks/use-get-account-borrow-limit.tsx +++ b/src/pages/Loans/LoansOverview/hooks/use-get-account-borrow-limit.tsx @@ -4,9 +4,9 @@ import Big from 'big.js'; import { useCallback } from 'react'; import { convertMonetaryBtcToUSD } from '@/common/utils/utils'; +import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { LoanAction } from '@/types/loans'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; type LoanActionData = { type: LoanAction; amount: MonetaryAmount; asset: LoanAsset }; diff --git a/src/pages/Loans/LoansOverview/hooks/use-get-ltv.tsx b/src/pages/Loans/LoansOverview/hooks/use-get-ltv.tsx index 585cf3da44..a78f6c5cfa 100644 --- a/src/pages/Loans/LoansOverview/hooks/use-get-ltv.tsx +++ b/src/pages/Loans/LoansOverview/hooks/use-get-ltv.tsx @@ -4,9 +4,13 @@ import Big from 'big.js'; import { useCallback } from 'react'; import { MeterRanges, Status } from '@/component-library'; +import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; import { LoanAction } from '@/types/loans'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { PositionsThresholdsData } from '@/utils/hooks/api/loans/use-get-account-positions'; + +interface PositionsThresholds { + collateral: Big; + liquidation: Big; +} type LTVData = { value: number; @@ -14,14 +18,14 @@ type LTVData = { status: Status; }; -const getRanges = (thresholds: PositionsThresholdsData): MeterRanges => { +const getRanges = (thresholds: PositionsThresholds): MeterRanges => { const collateral = thresholds.collateral.round(2).toNumber(); const liquidation = thresholds.liquidation.round(2).toNumber(); return [0, collateral, liquidation, 100]; }; -const getStatus = (value: Big, thresholds: PositionsThresholdsData): Status => { +const getStatus = (value: Big, thresholds: PositionsThresholds): Status => { if (value.gte(thresholds.liquidation)) { return 'error'; } diff --git a/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx b/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx deleted file mode 100644 index 5a0a850277..0000000000 --- a/src/pages/Loans/LoansOverview/hooks/use-loan-form-data.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { - BorrowPosition, - CollateralPosition, - CurrencyExt, - LendingStats, - LoanAsset, - newMonetaryAmount -} from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -import { BorrowAction, LendAction, LoanAction } from '@/types/loans'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; - -import { getMaxBorrowableAmount } from '../utils/get-max-borrowable-amount'; -import { getMaxLendableAmount } from '../utils/get-max-lendable-amount'; -import { getMaxWithdrawableAmount } from '../utils/get-max-withdrawable-amount'; - -type GetMaxAmountParams = { - loanAction: LoanAction; - asset: LoanAsset; - assetBalance?: MonetaryAmount; - position?: CollateralPosition | BorrowPosition; - lendingStats?: LendingStats; -}; - -const getMaxCalculatedAmount = ({ - loanAction, - asset, - position, - lendingStats -}: GetMaxAmountParams): MonetaryAmount => { - switch (loanAction) { - case 'lend': - return getMaxLendableAmount(asset); - case 'withdraw': - return getMaxWithdrawableAmount(asset, position as CollateralPosition, lendingStats); - case 'borrow': - return getMaxBorrowableAmount(asset, lendingStats); - case 'repay': - return position - ? position.amount.add((position as BorrowPosition).accumulatedDebt) - : newMonetaryAmount(0, asset.currency); - } -}; - -type UseLoanFormData = { - assetPrice: number; - assetAmount: { - available: MonetaryAmount; - min: MonetaryAmount; - max: MonetaryAmount; - }; -}; - -const useLoanFormData = ( - loanAction: BorrowAction | LendAction, - asset: LoanAsset, - position?: CollateralPosition | BorrowPosition -): UseLoanFormData => { - const { getAvailableBalance } = useGetBalances(); - const prices = useGetPrices(); - const { data: statistics } = useGetAccountLendingStatistics(); - - const zeroAssetAmount = newMonetaryAmount(0, asset.currency); - - const assetBalance = getAvailableBalance(asset.currency.ticker) || zeroAssetAmount; - const assetPrice = getTokenPrice(prices, asset.currency.ticker)?.usd || 0; - - const minAmount = newMonetaryAmount(1, assetBalance.currency); - - const maxAmountParams: GetMaxAmountParams = { - loanAction, - asset, - assetBalance, - position, - lendingStats: statistics - }; - const maxAmountData = getMaxCalculatedAmount(maxAmountParams); - - const available = - loanAction === 'lend' || loanAction === 'repay' - ? maxAmountData.gt(assetBalance) - ? assetBalance - : maxAmountData - : maxAmountData; - - return { - assetPrice, - assetAmount: { - available, - min: minAmount, - max: maxAmountData - } - }; -}; - -export { useLoanFormData }; diff --git a/src/pages/Loans/LoansOverview/utils/get-max-borrowable-amount.tsx b/src/pages/Loans/LoansOverview/utils/get-max-borrowable-amount.tsx deleted file mode 100644 index 5a8b3099c0..0000000000 --- a/src/pages/Loans/LoansOverview/utils/get-max-borrowable-amount.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { CurrencyExt, LendingStats, LoanAsset, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -import { pickSmallerAmount } from '@/utils/helpers/currencies'; - -/** - * Get maximum amount of currency that user can borrow - * with currently provided collateral and liquidity. - * @param {LoanAsset} asset The asset to be withdrawn.s - * @param {LendingStats} lendingStats Object containing information about account's collateralization. - * @return {MonetaryAmount} maximum amount of currency that - * user can withdraw with currently provided collateral - */ -const getMaxBorrowableAmount = (asset: LoanAsset, lendingStats?: LendingStats): MonetaryAmount => { - if (lendingStats === undefined) { - return newMonetaryAmount(0, asset.currency); - } - const { exchangeRate } = asset; - - const { availableCapacity, currency, borrowCap, totalBorrows } = asset; - - const maxBorrowableCurrencyAmount = exchangeRate.toCounter(lendingStats.borrowLimitBtc); - const protocolLimitAmount = pickSmallerAmount(availableCapacity, borrowCap.sub(totalBorrows)); - const maxBorrowableAmount = pickSmallerAmount(protocolLimitAmount, maxBorrowableCurrencyAmount); - - if (maxBorrowableAmount.toBig().lte(0)) { - return newMonetaryAmount(0, currency); - } - - return maxBorrowableAmount; -}; - -export { getMaxBorrowableAmount }; diff --git a/src/pages/Loans/LoansOverview/utils/get-max-lendable-amount.ts b/src/pages/Loans/LoansOverview/utils/get-max-lendable-amount.ts deleted file mode 100644 index b9ffb5b395..0000000000 --- a/src/pages/Loans/LoansOverview/utils/get-max-lendable-amount.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CurrencyExt, LoanAsset, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -const getMaxLendableAmount = (asset: LoanAsset): MonetaryAmount => { - const { totalLiquidity, supplyCap, currency, totalBorrows } = asset; - const amountInProtocol = totalLiquidity.sub(totalBorrows); - const maximumAmountToSupply = supplyCap.sub(amountInProtocol); - - if (maximumAmountToSupply.toBig().lte(0)) { - return newMonetaryAmount(0, currency); - } - return maximumAmountToSupply; -}; - -export { getMaxLendableAmount }; diff --git a/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx b/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx deleted file mode 100644 index 0b9bf84d05..0000000000 --- a/src/pages/Loans/LoansOverview/utils/get-max-withdrawable-amount.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { CollateralPosition, CurrencyExt, LendingStats, LoanAsset, newMonetaryAmount } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; - -import { pickSmallerAmount } from '@/utils/helpers/currencies'; - -const getMaxWithdrawableAmountByBorrowLimit = ( - asset: LoanAsset, - position: CollateralPosition, - lendingStats: LendingStats -): MonetaryAmount => { - const { amount, isCollateral, vaultCollateralAmount } = position; - const { collateralThreshold, exchangeRate, currency } = asset; - const { borrowLimitBtc } = lendingStats; - - if (!isCollateral) { - // MEMO: If the position is not used as loan collateral it can be used - // as vault collateral. - return amount.sub(vaultCollateralAmount); - } - - const positionAmountBtc = exchangeRate.toBase(amount); - const positionCollateralValueBtc = positionAmountBtc.mul(collateralThreshold); - - if (positionCollateralValueBtc.lt(borrowLimitBtc)) { - return amount; - } - - const maxWithdrawable = exchangeRate.toCounter(borrowLimitBtc).div(collateralThreshold).toBig(); - - return newMonetaryAmount(maxWithdrawable, currency, true); -}; - -/** - * Get maximum amount of currency that user can withdraw - * with currently provided collateral and liquidity. - * @param {LoanAsset} asset The asset to be withdrawn. - * @param {CollateralPosition} position The position to be withdrew. - * @param {LendingStats} lendingStats Object containing information about account's collateralization. - * @return {MonetaryAmount | undefined} maximum amount of currency that - * user can withdraw with currently provided collateral - */ -const getMaxWithdrawableAmount = ( - asset: LoanAsset, - position?: CollateralPosition, - lendingStats?: LendingStats -): MonetaryAmount => { - const { currency, availableCapacity } = asset; - - if (position === undefined || lendingStats === undefined) { - return newMonetaryAmount(0, currency); - } - - const maxWithdrawableAmountByBorrowLimit = getMaxWithdrawableAmountByBorrowLimit(asset, position, lendingStats); - - return pickSmallerAmount(maxWithdrawableAmountByBorrowLimit, availableCapacity); -}; - -export { getMaxWithdrawableAmount }; diff --git a/src/pages/Loans/LoansOverview/utils/get-position.ts b/src/pages/Loans/LoansOverview/utils/get-position.ts index 12bd03e521..31f4e60e06 100644 --- a/src/pages/Loans/LoansOverview/utils/get-position.ts +++ b/src/pages/Loans/LoansOverview/utils/get-position.ts @@ -1,4 +1,4 @@ -import { BorrowPosition, CollateralPosition } from '@interlay/interbtc-api'; +import { BorrowPosition, CollateralPosition } from '@/types/loans'; const getPosition = (positions: T[], ticker: string): T | undefined => positions.find((position) => position.amount.currency.ticker === ticker); diff --git a/src/pages/NoMatch/index.tsx b/src/pages/NoMatch/index.tsx index f8b329c8a8..92a8782300 100644 --- a/src/pages/NoMatch/index.tsx +++ b/src/pages/NoMatch/index.tsx @@ -1,4 +1,4 @@ -import MainContainer from '@/parts/MainContainer'; +import { MainContainer } from '@/components'; // TODO: should polish const NoMatch = (): JSX.Element => 404; diff --git a/src/pages/Onboarding/Onboarding.tsx b/src/pages/Onboarding/Onboarding.tsx index 92e12337ec..2df83f77e5 100644 --- a/src/pages/Onboarding/Onboarding.tsx +++ b/src/pages/Onboarding/Onboarding.tsx @@ -7,14 +7,13 @@ import { useDispatch, useSelector } from 'react-redux'; import { showAccountModalAction, showSignTermsModalAction } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; import { Card, CTA, CTALink, Flex, H1, H2, P, Strong } from '@/component-library'; -import { AuthModal, SignTermsModal } from '@/components'; +import { AuthModal, MainContainer, SignTermsModal } from '@/components'; import { INTERLAY_DISCORD_LINK } from '@/config/links'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; import { SS58_FORMAT } from '@/constants'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useSignMessage } from '@/hooks/use-sign-message'; import { KeyringPair, useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; -import MainContainer from '@/parts/MainContainer'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; import { Tutorial } from './components'; import { StyledWrapper } from './Onboarding.style'; diff --git a/src/pages/Pools/Pools.tsx b/src/pages/Pools/Pools.tsx index 55ddf9d1b3..0aa43a4157 100644 --- a/src/pages/Pools/Pools.tsx +++ b/src/pages/Pools/Pools.tsx @@ -1,8 +1,8 @@ +import { MainContainer } from '@/components'; +import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools'; +import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools'; +import useAccountId from '@/hooks/use-account-id'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; -import MainContainer from '@/parts/MainContainer'; -import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; -import { useGetLiquidityPools } from '@/utils/hooks/api/amm/use-get-liquidity-pools'; -import useAccountId from '@/utils/hooks/use-account-id'; import { PoolsInsights, PoolsTables } from './components'; diff --git a/src/pages/Pools/components/DepositForm/DepositForm.tsx b/src/pages/Pools/components/DepositForm/DepositForm.tsx index a7ea4cdb6f..0673db1da6 100644 --- a/src/pages/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/Pools/components/DepositForm/DepositForm.tsx @@ -8,6 +8,11 @@ import { useTranslation } from 'react-i18next'; import { newSafeMonetaryAmount } from '@/common/utils/utils'; import { Alert, Flex } from '@/component-library'; import { AuthCTA, SlippageManager, TransactionFeeDetails } from '@/components'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; +import useAccountId from '@/hooks/use-account-id'; import { DepositLiquidityPoolFormData, depositLiquidityPoolSchema, @@ -18,11 +23,6 @@ import { import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; -import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; import { StyledPlusDivider, StyledTokenInput } from './DepositForm.styles'; diff --git a/src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx b/src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx index f21e8f81af..d2efcaf021 100644 --- a/src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx +++ b/src/pages/Pools/components/DepositForm/DepositOutputAssets.tsx @@ -10,8 +10,8 @@ import { newSafeMonetaryAmount } from '@/common/utils/utils'; import { Dd, Dl, Dt, Flex, P } from '@/component-library'; +import { Prices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; import { PoolName } from '../PoolName'; import { StyledDlGroup } from './DepositForm.styles'; diff --git a/src/pages/Pools/components/PoolModal/PoolModal.tsx b/src/pages/Pools/components/PoolModal/PoolModal.tsx index 65c4eaa63d..ae0c62680c 100644 --- a/src/pages/Pools/components/PoolModal/PoolModal.tsx +++ b/src/pages/Pools/components/PoolModal/PoolModal.tsx @@ -3,7 +3,7 @@ import { useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { Modal, ModalBody, ModalProps, TabsItem } from '@/component-library'; -import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; +import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools'; import { DepositForm } from '../DepositForm'; import { WithdrawForm } from '../WithdrawForm'; diff --git a/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx index 8aa640d6e4..5d81563a66 100644 --- a/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx +++ b/src/pages/Pools/components/PoolsInsights/PoolsInsights.tsx @@ -13,6 +13,10 @@ import { TransactionDetailsGroup, TransactionFeeDetails } from '@/components'; +import { AccountPoolsData } from '@/hooks/api/amm/use-get-account-pools'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { ClaimRewardsPoolFormData, claimRewardsPoolSchema, @@ -20,10 +24,6 @@ import { useForm } from '@/lib/form'; import { calculateAccountLiquidityUSD, calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { AccountPoolsData } from '@/utils/hooks/api/amm/use-get-account-pools'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { StyledDd, StyledDt } from './PoolsInsights.style'; import { calculateClaimableFarmingRewardUSD } from './utils'; diff --git a/src/pages/Pools/components/PoolsInsights/utils.ts b/src/pages/Pools/components/PoolsInsights/utils.ts index cd523dd59d..68e0570d28 100644 --- a/src/pages/Pools/components/PoolsInsights/utils.ts +++ b/src/pages/Pools/components/PoolsInsights/utils.ts @@ -1,8 +1,8 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; +import { Prices } from '@/hooks/api/use-get-prices'; import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; const calculateClaimableFarmingRewardUSD = ( claimableRewards: Map[]> | undefined, diff --git a/src/pages/Pools/components/PoolsTables/PoolsTables.tsx b/src/pages/Pools/components/PoolsTables/PoolsTables.tsx index 7f4d6840ff..52dfebff5e 100644 --- a/src/pages/Pools/components/PoolsTables/PoolsTables.tsx +++ b/src/pages/Pools/components/PoolsTables/PoolsTables.tsx @@ -3,24 +3,29 @@ import { Key, useState } from 'react'; import { Flex } from '@/component-library'; import { PoolsTable } from '@/components'; -import { AccountLiquidityPool } from '@/utils/hooks/api/amm/use-get-account-pools'; +import { AccountLiquidityPool } from '@/hooks/api/amm/use-get-account-pools'; import { PoolModal } from '../PoolModal/PoolModal'; +type ModalState = { + isOpen: boolean; + data?: LiquidityPool; +}; + type PoolsTablesProps = { pools: LiquidityPool[]; accountPools?: AccountLiquidityPool[]; }; const PoolsTables = ({ pools, accountPools }: PoolsTablesProps): JSX.Element => { - const [liquidityPool, setLiquidityPool] = useState(); + const [state, setState] = useState({ isOpen: false }); const handleRowAction = (ticker: Key) => { const pool = pools.find((pool) => pool.lpToken.ticker === ticker); - setLiquidityPool(pool); + setState({ isOpen: true, data: pool }); }; - const handleClose = () => setLiquidityPool(undefined); + const handleClose = () => setState((s) => ({ ...s, isOpen: false })); const otherPools = accountPools ? pools.filter( @@ -42,7 +47,7 @@ const PoolsTables = ({ pools, accountPools }: PoolsTablesProps): JSX.Element => /> )} - + ); }; diff --git a/src/pages/Pools/components/PoolsTables/utils.ts b/src/pages/Pools/components/PoolsTables/utils.ts index 48f7280618..5672c4e439 100644 --- a/src/pages/Pools/components/PoolsTables/utils.ts +++ b/src/pages/Pools/components/PoolsTables/utils.ts @@ -2,8 +2,8 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; +import { Prices } from '@/hooks/api/use-get-prices'; import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; const getFarmingApr = ( rewardAmountsYearly: Array>, diff --git a/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx b/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx index 27c4598d94..bb76fa818e 100644 --- a/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx +++ b/src/pages/Pools/components/WithdrawForm/WithdrawForm.tsx @@ -8,16 +8,16 @@ import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/comm import { Flex, TokenInput } from '@/component-library'; import { AuthCTA, ReceivableAssets, SlippageManager, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; +import useAccountId from '@/hooks/use-account-id'; import { POOL_WITHDRAW_AMOUNT_FIELD, POOL_WITHDRAW_FEE_TOKEN_FIELD, useForm } from '@/lib/form'; import { WithdrawLiquidityPoolFormData, withdrawLiquidityPoolSchema } from '@/lib/form/schemas'; import { AMM_DEADLINE_INTERVAL } from '@/utils/constants/api'; import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; -import useAccountId from '@/utils/hooks/use-account-id'; import { PoolName } from '../PoolName'; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx index bda9fd25c6..09ba6e294c 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx @@ -1,7 +1,7 @@ import { Flex, Tabs, TabsItem } from '@/component-library'; -import MainContainer from '@/parts/MainContainer'; +import { MainContainer } from '@/components'; +import { usePageQueryParams } from '@/hooks/use-page-query-params'; import { QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; -import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; import { BridgeForm, TransferForm } from './components'; import { StyledCard, StyledFormWrapper, StyledWrapper } from './SendAndReceiveForms.styles'; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx index 1d03c7fe6a..ea338af315 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx @@ -15,6 +15,11 @@ import { TransactionDetailsDt, TransactionDetailsGroup } from '@/components'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { useXCMBridge, XCMTokenData } from '@/hooks/api/xcm/use-xcm-bridge'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import useAccountId from '@/hooks/use-account-id'; import { BRIDGE_AMOUNT_FIELD, BRIDGE_FROM_FIELD, @@ -30,16 +35,11 @@ import { import { useSubstrateSecureState } from '@/lib/substrate'; import { ChainData, Chains } from '@/types/chains'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useXCMBridge, XCMTokenData } from '@/utils/hooks/api/xcm/use-xcm-bridge'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useAccountId from '@/utils/hooks/use-account-id'; +import { findWallet } from '@/utils/helpers/wallet'; import { ChainSelect } from '../ChainSelect'; import { ChainSelectSection, StyledArrowRightCircle, StyledSourceChainSelect } from './BridgeForm.styles'; -// TODO: re-work code to allow ticker has query parameter const BridgeForm = (): JSX.Element => { const [destinationChains, setDestinationChains] = useState([]); const [transferableTokens, setTransferableTokens] = useState([]); @@ -50,7 +50,12 @@ const BridgeForm = (): JSX.Element => { const { getCurrencyFromTicker } = useGetCurrencies(true); const accountId = useAccountId(); - const { accounts } = useSubstrateSecureState(); + const { selectedAccount, accounts } = useSubstrateSecureState(); + + // TODO: Workaround until we update account handling. This is the same + // way we filter accounts in the top bar. + const wallet = selectedAccount && findWallet(selectedAccount.meta.source); + const walletAccounts = accounts.filter(({ meta: { source } }) => source === wallet?.extensionName); const { data, getDestinationChains, originatingChains, getAvailableTokens } = useXCMBridge(); @@ -111,8 +116,6 @@ const BridgeForm = (): JSX.Element => { }; const handleDestinationChainChange = async (chain: ChainName) => { - if (!accountId) return; - setTokenData(chain); }; @@ -127,12 +130,12 @@ const BridgeForm = (): JSX.Element => { const setTokenData = useCallback( async (destination: ChainName) => { - if (!accountId || !form) return; + if (!form) return; const tokens = await getAvailableTokens( form.values[BRIDGE_FROM_FIELD] as ChainName, destination, - accountId.toString(), + accountId ? accountId.toString() : '', form.values[BRIDGE_TO_ACCOUNT_FIELD] as string ); @@ -180,16 +183,12 @@ const BridgeForm = (): JSX.Element => { useEffect(() => { if (!destinationChains?.length) return; - if (!accountId) return; setTokenData(destinationChains[0].id); // eslint-disable-next-line react-hooks/exhaustive-deps }, [accountId, destinationChains]); - // TODO: When we refactor account select this should be handled there so - // that it's consitent across the application useEffect(() => { - if (!accountId) return; form.setFieldValue(BRIDGE_TO_ACCOUNT_FIELD, accountId?.toString()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [accountId]); @@ -238,7 +237,7 @@ const BridgeForm = (): JSX.Element => { { Destination chain transfer fee estimate - {`${currentToken?.destFee.toString()} ${ + {`${currentToken?.destFee?.toString()} ${ currentToken?.value }`} diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx index cb12ef11a5..6d8d7a7a64 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx @@ -8,6 +8,12 @@ import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/comm import { Flex, Input, TokenInput } from '@/component-library'; import { AuthCTA, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; +import { useSelectCurrency } from '@/hooks/use-select-currency'; import { useForm } from '@/lib/form'; import { TRANSFER_AMOUNT_FIELD, @@ -20,12 +26,6 @@ import { } from '@/lib/form/schemas'; import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; -import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; type TransferFormProps = { ticker?: string; diff --git a/src/pages/Staking/ClaimRewardsButton/index.tsx b/src/pages/Staking/ClaimRewardsButton/index.tsx index e7ab257735..80fb00983c 100644 --- a/src/pages/Staking/ClaimRewardsButton/index.tsx +++ b/src/pages/Staking/ClaimRewardsButton/index.tsx @@ -2,12 +2,12 @@ import clsx from 'clsx'; import { useQueryClient } from 'react-query'; import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayDenimOrKintsugiSupernovaContainedButton, { Props as InterlayDenimOrKintsugiMidnightContainedButtonProps } from '@/legacy-components/buttons/InterlayDenimOrKintsugiSupernovaContainedButton'; import { useSubstrateSecureState } from '@/lib/substrate'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; interface CustomProps { claimableRewardAmount: string; diff --git a/src/pages/Staking/WithdrawButton/index.tsx b/src/pages/Staking/WithdrawButton/index.tsx index 190d2a628c..1dfa40bfc5 100644 --- a/src/pages/Staking/WithdrawButton/index.tsx +++ b/src/pages/Staking/WithdrawButton/index.tsx @@ -4,6 +4,7 @@ import { useQueryClient } from 'react-query'; import { BLOCK_TIME } from '@/config/parachain'; import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayDenimOrKintsugiSupernovaContainedButton, { Props as InterlayDenimOrKintsugiMidnightContainedButtonProps } from '@/legacy-components/buttons/InterlayDenimOrKintsugiSupernovaContainedButton'; @@ -11,7 +12,6 @@ import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip' import { useSubstrateSecureState } from '@/lib/substrate'; import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const getFormattedUnlockDate = (remainingBlockNumbersToUnstake: number, formatPattern: string) => { const unlockDate = add(new Date(), { diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index df2f0b697f..9f5f84e09f 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -16,7 +16,7 @@ import { formatNumber, formatPercentage } from '@/common/utils/utils'; -import { AuthCTA } from '@/components'; +import { AuthCTA, MainContainer } from '@/components'; import { BLOCK_TIME } from '@/config/parachain'; import { GOVERNANCE_TOKEN, @@ -27,6 +27,10 @@ import { VOTE_GOVERNANCE_TOKEN_SYMBOL, VoteGovernanceTokenMonetaryAmount } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { useSignMessage } from '@/hooks/use-sign-message'; import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import Panel from '@/legacy-components/Panel'; @@ -34,7 +38,6 @@ import TitleWithUnderline from '@/legacy-components/TitleWithUnderline'; import TokenField from '@/legacy-components/TokenField'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import { useSubstrateSecureState } from '@/lib/substrate'; -import MainContainer from '@/parts/MainContainer'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import { STAKING_TRANSACTION_FEE_RESERVE_FETCHER, @@ -43,10 +46,6 @@ import { import { ZERO_GOVERNANCE_TOKEN_AMOUNT, ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { useSignMessage } from '@/utils/hooks/use-sign-message'; import BalancesUI from './BalancesUI'; import ClaimRewardsButton from './ClaimRewardsButton'; diff --git a/src/pages/Strategies/Strategies.style.tsx b/src/pages/Strategies/Strategies.style.tsx index a9bf6f17ea..ddccd11ced 100644 --- a/src/pages/Strategies/Strategies.style.tsx +++ b/src/pages/Strategies/Strategies.style.tsx @@ -1,13 +1,25 @@ import styled from 'styled-components'; import { theme } from '@/component-library'; -const StyledStrategiesLayout = styled.div` + +const StyledList = styled.div` display: grid; - gap: ${theme.spacing.spacing6}; - @media (min-width: 80em) { - grid-template-columns: 1fr 1fr; + grid-auto-flow: row dense; + grid-auto-rows: 1fr; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: ${theme.spacing.spacing4}; + + @media ${theme.breakpoints.up('sm')} { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + @media ${theme.breakpoints.up('lg')} { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + @media ${theme.breakpoints.up('xl')} { + grid-template-columns: repeat(4, minmax(0, 1fr)); } - padding: ${theme.spacing.spacing6}; `; -export { StyledStrategiesLayout }; +export { StyledList }; diff --git a/src/pages/Strategies/Strategies.tsx b/src/pages/Strategies/Strategies.tsx index 88c8b90357..7838a9ff78 100644 --- a/src/pages/Strategies/Strategies.tsx +++ b/src/pages/Strategies/Strategies.tsx @@ -1,15 +1,62 @@ import { withErrorBoundary } from 'react-error-boundary'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import { Card, P, TextLink } from '@/component-library'; +import { MainContainer } from '@/components'; +import { FORMS_STRATEGIES_LINK } from '@/config/links'; import ErrorFallback from '@/legacy-components/ErrorFallback'; +import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; +import { PAGES, URL_PARAMETERS } from '@/utils/constants/links'; -import { StrategyForm } from './components/StrategyForm'; -import { StyledStrategiesLayout } from './Strategies.style'; +import { StrategyCard } from './components'; +import { getContent } from './helpers/content'; +import { useGetStrategies } from './hooks/use-get-strategies'; +import { StyledList } from './Strategies.style'; const Strategies = (): JSX.Element => { + const { t } = useTranslation(); + const { data: strategies } = useGetStrategies(); + return ( - - - + + +

+ Discover straightforward strategies with attractive annual percentage yields (APY) of up to 33.22%. Customize + your collateral and define your preferred risk parameters. Benefit from one-click aping, saving you time and + transaction fees! +

+ + {strategies ? ( + + {strategies.map((strategy) => { + const { title, summary } = getContent(strategy, t); + + const to = PAGES.STRATEGY.replace(`:${URL_PARAMETERS.STRATEGY.TYPE}`, strategy.type); + + return ( + + + + ); + })} + +

More Strategies coming soon

+ + Request strategies + + + + ) : ( + + )} + ); }; diff --git a/src/pages/Strategies/Strategy/Strategy.styles.tsx b/src/pages/Strategies/Strategy/Strategy.styles.tsx new file mode 100644 index 0000000000..a9fde815ad --- /dev/null +++ b/src/pages/Strategies/Strategy/Strategy.styles.tsx @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +import { Flex, theme } from '@/component-library'; + +import { StrategyForm } from '../components/StrategyForm'; + +const StyledStrategyForm = styled(StrategyForm)` + height: min-content; +`; + +const StyledFlex = styled(Flex)` + flex-direction: column; + + @media ${theme.breakpoints.up('md')} { + flex-direction: row; + } +`; + +const StyledInfoCards = styled(Flex)` + height: min-content; +`; + +export { StyledFlex, StyledInfoCards, StyledStrategyForm }; diff --git a/src/pages/Strategies/Strategy/Strategy.tsx b/src/pages/Strategies/Strategy/Strategy.tsx new file mode 100644 index 0000000000..f3902782f4 --- /dev/null +++ b/src/pages/Strategies/Strategy/Strategy.tsx @@ -0,0 +1,84 @@ +import { useTranslation } from 'react-i18next'; +import { useHistory, useParams } from 'react-router'; + +import { Card, CoinIcon, Flex, H1, H2, P, TextLink } from '@/component-library'; +import { MainContainer } from '@/components'; +import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; +import { PAGES, URL_PARAMETERS } from '@/utils/constants/links'; + +import { StrategyInfographics, StrategyInsights, StrategyTag } from '../components'; +import { getContent } from '../helpers/content'; +import { useGetStrategies } from '../hooks/use-get-strategies'; +import { useGetStrategyPosition } from '../hooks/use-get-strategy-position'; +import { StrategyRisk, StrategyType } from '../types'; +import { StyledFlex, StyledInfoCards, StyledStrategyForm } from './Strategy.styles'; + +const Strategy = (): JSX.Element | null => { + const { t } = useTranslation(); + const { [URL_PARAMETERS.STRATEGY.TYPE]: strategyType } = useParams>(); + const { replace } = useHistory(); + const { data: strategies, getStrategy } = useGetStrategies(); + + const strategy = getStrategy(strategyType); + + const { data: position, isLoading: isPositionLoading } = useGetStrategyPosition(strategy); + + if (!strategies || isPositionLoading) { + return ; + } + + if (!strategy) { + // If strategy URL is invalid redirect to strategy landing page. + replace(PAGES.STRATEGIES); + + return null; + } + + const { title, description, infographics } = getContent(strategy, t); + + return ( + + +

+ + {title} + +

+ + + {strategy.risk === StrategyRisk.LOW && {t('strategies.passive_income')}} + + + + + + + +

+ {t('strategies.how_does_it_work')} +

+

+ {description} +

+ + + + + +

+ {t('strategies.what_are_the_risk')} +

+

+ {t('strategies.discover_fundamental_origins')} +

+ + {t('learn_more')} > + + + + + + ); +}; + +export { Strategy }; diff --git a/src/pages/Strategies/Strategy/index.ts b/src/pages/Strategies/Strategy/index.ts new file mode 100644 index 0000000000..ae236c984a --- /dev/null +++ b/src/pages/Strategies/Strategy/index.ts @@ -0,0 +1 @@ +export { Strategy as default } from './Strategy'; diff --git a/src/pages/Strategies/components/StrategyCard/StrategyCard.style.tsx b/src/pages/Strategies/components/StrategyCard/StrategyCard.style.tsx new file mode 100644 index 0000000000..610b948f88 --- /dev/null +++ b/src/pages/Strategies/components/StrategyCard/StrategyCard.style.tsx @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +import { Flex, P, theme } from '@/component-library'; + +const StyledEarningCard = styled(Flex)` + width: 100%; + background-color: var(--color-list-secondary-bg); + padding: ${theme.spacing.spacing3}; + border-radius: ${theme.rounded.md}; +`; + +const StyledEarnSection = styled(P)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +export { StyledEarningCard, StyledEarnSection }; diff --git a/src/pages/Strategies/components/StrategyCard/StrategyCard.tsx b/src/pages/Strategies/components/StrategyCard/StrategyCard.tsx new file mode 100644 index 0000000000..47adac3263 --- /dev/null +++ b/src/pages/Strategies/components/StrategyCard/StrategyCard.tsx @@ -0,0 +1,55 @@ +import Big from 'big.js'; +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { formatPercentage } from '@/common/utils/utils'; +import { Card, CardProps, CoinIcon, Flex, H1, P, Strong } from '@/component-library'; + +import { StrategyRisk } from '../../types'; +import { StrategyTag } from '../StrategyTag'; +import { StyledEarningCard, StyledEarnSection } from './StrategyCard.style'; + +type Props = { + title: ReactNode; + description: ReactNode; + ticker: string; + risk: StrategyRisk; + interestRate: Big; +}; + +type InheritAttrs = Omit; + +type StrategyCardProps = Props & InheritAttrs; + +const StrategyCard = ({ title, description, ticker, risk, interestRate, ...props }: StrategyCardProps): JSX.Element => { + const { t } = useTranslation(); + + const interestPercentageLable = formatPercentage(interestRate.toNumber()); + + return ( + + + + {risk === StrategyRisk.LOW && Passive Income} + + +

+ {title} +

+ + + Earn up to + + {interestPercentageLable} {t('apy')} + + + +

+ {description} +

+ + ); +}; + +export { StrategyCard }; +export type { StrategyCardProps }; diff --git a/src/pages/Strategies/components/StrategyCard/index.tsx b/src/pages/Strategies/components/StrategyCard/index.tsx new file mode 100644 index 0000000000..d9cedd9bde --- /dev/null +++ b/src/pages/Strategies/components/StrategyCard/index.tsx @@ -0,0 +1,2 @@ +export type { StrategyCardProps } from './StrategyCard'; +export { StrategyCard } from './StrategyCard'; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx new file mode 100644 index 0000000000..e08be71914 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx @@ -0,0 +1,115 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Flex, TokenInput } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { + isFormDisabled, + STRATEGY_DEPOSIT_AMOUNT_FIELD, + STRATEGY_DEPOSIT_FEE_TOKEN_FIELD, + StrategyDepositFormData, + strategyDepositSchema, + useForm +} from '@/lib/form'; + +import { StrategyData } from '../../hooks/use-get-strategies'; +import { useGetStrategyAvailableAmounts } from '../../hooks/use-get-strategy-available-amounts'; +import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; +import { StrategyFormType } from '../../types'; + +type StrategyDepositFormProps = { + strategy: StrategyData; + position?: StrategyPositionData; +}; + +const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): JSX.Element => { + const { t } = useTranslation(); + const prices = useGetPrices(); + const transaction = useTransaction(Transaction.STRATEGIES_DEPOSIT, { + onSuccess: () => { + form.resetForm(); + } + }); + const { + data: { maxAmount, minAmount } + } = useGetStrategyAvailableAmounts(StrategyFormType.DEPOSIT, strategy, position); + + const getTransactionArgs = useCallback( + (values: StrategyDepositFormData) => { + const amount = values[STRATEGY_DEPOSIT_AMOUNT_FIELD] || 0; + const monetaryAmount = newMonetaryAmount(amount, strategy.currency, true); + + return { monetaryAmount }; + }, + [strategy.currency] + ); + + const handleSubmit = (values: StrategyDepositFormData) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + transaction.execute(WRAPPED_TOKEN, monetaryAmount); + }; + + const form = useForm({ + initialValues: { + [STRATEGY_DEPOSIT_AMOUNT_FIELD]: '', + [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }, + validationSchema: strategyDepositSchema('deposit', { maxAmount, minAmount }), + onSubmit: handleSubmit, + onComplete: (values: StrategyDepositFormData) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + transaction.fee.estimate(WRAPPED_TOKEN, monetaryAmount); + } + }); + + const inputMonetaryAmount = newSafeMonetaryAmount( + form.values[STRATEGY_DEPOSIT_AMOUNT_FIELD] || 0, + WRAPPED_TOKEN, + true + ); + const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd) || 0; + const isSubmitButtonDisabled = isFormDisabled(form); + + return ( +
+ + + + + + {t('deposit')} + + + +
+ ); +}; + +export { StrategyDepositForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx deleted file mode 100644 index ab318185af..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/StrategyDepositForm.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; -import { mergeProps } from '@react-aria/utils'; -import { useTranslation } from 'react-i18next'; - -import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { TokenInput } from '@/component-library'; -import { AuthCTA } from '@/components'; -import { TRANSACTION_FEE_AMOUNT, WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useTransaction } from '@/utils/hooks/transaction'; - -import { StrategyDepositFormData } from '../../../types/form'; -import { StrategyFormBaseProps } from '../StrategyForm'; -import { StyledStrategyFormContent } from '../StrategyForm.style'; -import { StrategyFormFees } from '../StrategyFormFees'; - -const StrategyDepositForm = ({ riskVariant, hasActiveStrategy }: StrategyFormBaseProps): JSX.Element => { - const { getAvailableBalance } = useGetBalances(); - const prices = useGetPrices(); - const { t } = useTranslation(); - // TODO: add transaction - const transaction = useTransaction(); - - const handleSubmit = (data: StrategyDepositFormData) => { - // TODO: Execute transaction with params - // transaction.execute(); - console.log(`transaction should be executed with parameters: ${data}, ${riskVariant}`); - }; - - const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); - const maxDepositAmount = getAvailableBalance(WRAPPED_TOKEN_SYMBOL) || newMonetaryAmount(0, WRAPPED_TOKEN); - - const form = useForm({ - initialValues: { deposit: '' }, - validationSchema: StrategySchema('deposit', { maxAmount: maxDepositAmount, minAmount }), - onSubmit: handleSubmit - }); - - const inputMonetaryAmount = newSafeMonetaryAmount(form.values['deposit'] || 0, WRAPPED_TOKEN, true); - const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd); - const isSubmitButtonDisabled = isFormDisabled(form); - - return ( -
- - - - - {hasActiveStrategy ? t('strategy.update_position') : t('deposit')} - - -
- ); -}; - -export { StrategyDepositForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts deleted file mode 100644 index 3cf5b84bea..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { StrategyDepositForm } from './StrategyDepositForm'; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx deleted file mode 100644 index 59c4bd98a5..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyForm.style.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import styled from 'styled-components'; - -import { Dl, Flex, theme } from '@/component-library'; - -const StyledStrategyForm = styled(Flex)` - margin-top: ${theme.spacing.spacing8}; - background: ${theme.colors.bgPrimary}; - padding: ${theme.spacing.spacing6}; - border-radius: ${theme.rounded.md}; -`; - -const StyledDl = styled(Dl)` - background-color: ${theme.card.bg.secondary}; - padding: ${theme.spacing.spacing4}; - font-size: ${theme.text.xs}; - border-radius: ${theme.rounded.rg}; -`; - -const StyledStrategyFormContent = styled(Flex)` - margin-top: ${theme.spacing.spacing8}; - flex-direction: column; - gap: ${theme.spacing.spacing8}; -`; - -const StyledSwitchLabel = styled('label')` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 100%; - font-weight: ${theme.fontWeight.bold}; -`; - -export { StyledDl, StyledStrategyForm, StyledStrategyFormContent, StyledSwitchLabel }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx index 4dee2206fa..4fb21b36fb 100644 --- a/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyForm.tsx @@ -1,61 +1,30 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { Card, CardProps, Tabs, TabsItem } from '@/component-library'; -import { Tabs, TabsItem } from '@/component-library'; -import { WRAPPED_TOKEN } from '@/config/relay-chains'; - -import { StrategyFormType, StrategyRiskVariant } from '../../types/form'; +import { StrategyData } from '../../hooks/use-get-strategies'; +import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; import { StrategyDepositForm } from './StrategyDepositForm'; -import { StyledStrategyForm } from './StrategyForm.style'; import { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; -interface StrategyFormProps { - riskVariant: StrategyRiskVariant; -} - -interface StrategyFormBaseProps extends StrategyFormProps { - hasActiveStrategy: boolean | undefined; -} - -type TabData = { type: StrategyFormType; title: string }; +type Props = { + strategy: StrategyData; + position?: StrategyPositionData; +}; -const tabs: Array = [ - { - type: 'deposit', - title: 'Deposit' - }, - { - type: 'withdraw', - title: 'Withdraw' - } -]; +type InheritAttrs = Omit; -const StrategyForm = ({ riskVariant }: StrategyFormProps): JSX.Element => { - // TODO: replace with actually withdrawable amount once we know how to get that information, - // for now it's statically set for display purposes - const maxWithdrawableAmount = newMonetaryAmount(1.337, WRAPPED_TOKEN, true); - const hasActiveStrategy = maxWithdrawableAmount && !maxWithdrawableAmount.isZero(); +type StrategyFormProps = Props & InheritAttrs; - return ( - - - {tabs.map(({ type, title }) => ( - - {type === 'deposit' ? ( - - ) : ( - - )} - - ))} - - - ); -}; +const StrategyForm = ({ strategy, position, ...props }: StrategyFormProps): JSX.Element => ( + + + + + + + + + + +); export { StrategyForm }; -export type { StrategyFormBaseProps, StrategyFormProps }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx b/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx deleted file mode 100644 index 13fd333592..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyFormFees.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { GovernanceCurrency } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { useTranslation } from 'react-i18next'; - -import { displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { Dd, DlGroup, Dt } from '@/component-library'; -import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; - -import { StyledDl } from './StrategyForm.style'; - -interface StrategyFormFeesProps { - amount: MonetaryAmount; -} - -const StrategyFormFees = ({ amount }: StrategyFormFeesProps): JSX.Element => { - const prices = useGetPrices(); - const { t } = useTranslation(); - - return ( - - -
- {t('fees')} -
-
- {amount.toHuman()} {amount.currency.ticker} ( - {displayMonetaryAmountInUSDFormat(amount, getTokenPrice(prices, amount.currency.ticker)?.usd)}) -
- - - ); -}; - -export { StrategyFormFees }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx new file mode 100644 index 0000000000..75929e4f28 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx @@ -0,0 +1,131 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { mergeProps } from '@react-aria/utils'; +import { useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Flex, TokenInput } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isFormDisabled, useForm } from '@/lib/form'; +import { + STRATEGY_WITHDRAW_AMOUNT_FIELD, + STRATEGY_WITHDRAW_FEE_TOKEN_FIELD, + StrategyWithdrawFormData, + strategyWithdrawSchema +} from '@/lib/form/schemas/strategies'; + +import { StrategyData } from '../../hooks/use-get-strategies'; +import { useGetStrategyAvailableAmounts } from '../../hooks/use-get-strategy-available-amounts'; +import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; +import { StrategyFormType } from '../../types'; + +type StrategyWithdrawalFormProps = { + strategy: StrategyData; + position?: StrategyPositionData; +}; + +const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormProps): JSX.Element => { + const { t } = useTranslation(); + const prices = useGetPrices(); + const transaction = useTransaction({ + onSuccess: () => { + form.resetForm(); + } + }); + const { + data: { maxAmount, minAmount }, + isMaxAmount + } = useGetStrategyAvailableAmounts(StrategyFormType.WITHDRAW, strategy, position); + + const getTransactionArgs = useCallback( + (values: StrategyWithdrawFormData) => { + const amount = values[STRATEGY_WITHDRAW_AMOUNT_FIELD] || 0; + const monetaryAmount = newMonetaryAmount(amount, strategy.currency, true); + + return { monetaryAmount }; + }, + [strategy.currency] + ); + + const handleSubmit = (values: StrategyWithdrawFormData) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { + return transaction.execute(Transaction.STRATEGIES_ALL_WITHDRAW, monetaryAmount.currency); + } else { + return transaction.execute(Transaction.STRATEGIES_WITHDRAW, monetaryAmount.currency, monetaryAmount); + } + }; + + const form = useForm({ + initialValues: { + [STRATEGY_WITHDRAW_AMOUNT_FIELD]: '', + [STRATEGY_WITHDRAW_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }, + validationSchema: strategyWithdrawSchema('withdraw', { + maxAmount, + minAmount + }), + onSubmit: handleSubmit, + onComplete: (values: StrategyWithdrawFormData) => { + const transactionData = getTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { + return transaction.fee.estimate(Transaction.STRATEGIES_ALL_WITHDRAW, monetaryAmount.currency); + } else { + return transaction.fee.estimate(Transaction.STRATEGIES_WITHDRAW, monetaryAmount.currency, monetaryAmount); + } + } + }); + + const inputMonetaryAmount = newSafeMonetaryAmount( + form.values[STRATEGY_WITHDRAW_AMOUNT_FIELD] || 0, + WRAPPED_TOKEN, + true + ); + const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd) || 0; + const isSubmitButtonDisabled = isFormDisabled(form); + + return ( +
+ + + + + + {t('withdraw')} + + + +
+ ); +}; + +export { StrategyWithdrawalForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx deleted file mode 100644 index bcf30df624..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/StrategyWithdrawalForm.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { CurrencyExt, newMonetaryAmount, WrappedCurrency } from '@interlay/interbtc-api'; -import { MonetaryAmount } from '@interlay/monetary-js'; -import { mergeProps } from '@react-aria/utils'; -import { useTranslation } from 'react-i18next'; - -import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; -import { Switch, TokenInput } from '@/component-library'; -import { AuthCTA, ReceivableAssets } from '@/components'; -import { - RELAY_CHAIN_NATIVE_TOKEN, - TRANSACTION_FEE_AMOUNT, - WRAPPED_TOKEN, - WRAPPED_TOKEN_SYMBOL -} from '@/config/relay-chains'; -import { isFormDisabled, StrategySchema, useForm } from '@/lib/form'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useTransaction } from '@/utils/hooks/transaction'; - -import { StrategyWithdrawalFormData } from '../../../types/form'; -import { StrategyFormBaseProps } from '../StrategyForm'; -import { StyledStrategyFormContent, StyledSwitchLabel } from '../StrategyForm.style'; -import { StrategyFormFees } from '../StrategyFormFees'; - -interface StrategyWithdrawalFormProps extends StrategyFormBaseProps { - maxWithdrawableAmount: MonetaryAmount | undefined; -} - -const calculateReceivableAssets = ( - amountToWithdraw: MonetaryAmount, - withdrawInWrapped: boolean -): Array> => { - if (withdrawInWrapped) { - return [amountToWithdraw]; - } - // TODO: do some magic calculation to get the receivable assets based on input amount here, - // or better move this computation to strategy hook - const mockedReceivableAssets = [ - amountToWithdraw.div(1.2), - newMonetaryAmount(amountToWithdraw.toBig().mul(213.2), RELAY_CHAIN_NATIVE_TOKEN, true) - ]; - - return mockedReceivableAssets; -}; - -const StrategyWithdrawalForm = ({ - riskVariant, - hasActiveStrategy, - maxWithdrawableAmount -}: StrategyWithdrawalFormProps): JSX.Element => { - const { t } = useTranslation(); - const prices = useGetPrices(); - // TODO: add transaction - const transaction = useTransaction(); - - const handleSubmit = (data: StrategyWithdrawalFormData) => { - // TODO: Execute transaction with params - // transaction.execute() - console.log(data, riskVariant); - }; - - const minAmount = newMonetaryAmount(1, WRAPPED_TOKEN); - - const form = useForm({ - initialValues: { withdraw: '', withdrawAsWrapped: true }, - validationSchema: StrategySchema('withdraw', { - maxAmount: maxWithdrawableAmount || newMonetaryAmount(0, WRAPPED_TOKEN), - minAmount - }), - onSubmit: handleSubmit - }); - - const inputMonetaryAmount = newSafeMonetaryAmount(form.values['withdraw'] || 0, WRAPPED_TOKEN, true); - const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd); - const receivableAssets = calculateReceivableAssets(inputMonetaryAmount, !!form.values['withdrawAsWrapped']); - const isSubmitButtonDisabled = isFormDisabled(form); - - return ( -
- - - - {t('strategy.withdraw_rewards_in_wrapped', { wrappedCurrencySymbol: WRAPPED_TOKEN_SYMBOL })}{' '} - - - - - - {hasActiveStrategy ? t('strategy.update_position') : t('withdraw')} - - -
- ); -}; - -export { StrategyWithdrawalForm }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts deleted file mode 100644 index 26ff40f62c..0000000000 --- a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { StrategyWithdrawalForm } from './StrategyWithdrawalForm'; diff --git a/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicToken.tsx b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicToken.tsx new file mode 100644 index 0000000000..d2c30bad01 --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicToken.tsx @@ -0,0 +1,35 @@ +import { CoinIcon, Flex, FlexProps, IconSize } from '@/component-library'; + +import { StyledStack } from './StrategyInfographics.styles'; + +type Props = { + size: IconSize; + ticker: string | string[]; +}; + +type InheritAttrs = Omit; + +type StrategyInfographicsPropsToken = Props & InheritAttrs; + +const StrategyInfographicsToken = ({ ticker, size, ...props }: StrategyInfographicsPropsToken): JSX.Element => { + if (typeof ticker === 'string') { + return ( + + + + ); + } + + return ( + + {ticker.map((item) => ( + + + + ))} + + ); +}; + +export { StrategyInfographicsToken }; +export type { StrategyInfographicsPropsToken }; diff --git a/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.styles.tsx b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.styles.tsx new file mode 100644 index 0000000000..2563a470c2 --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.styles.tsx @@ -0,0 +1,149 @@ +import styled from 'styled-components'; + +import { Flex, IconSize, Span, theme } from '@/component-library'; + +import { StrategyInfographicsItem } from './StrategyInfographicsItem'; + +type StyledGridProps = { + $isCyclic?: boolean; +}; + +type StyledItemProps = { + $gridArea: 'start-icon' | 'middle-icon' | 'end-icon'; +}; + +type StyledRightArrowProps = { + $gridArea: 'first-right-arrow' | 'second-right-arrow'; +}; + +type StyledLabelProp = { + $gridArea: 'start-label' | 'middle-label' | 'end-label' | 'cycle-label'; +}; + +const StyledGrid = styled.div` + display: grid; + grid-template-columns: 1fr min-content 1fr 1fr min-content 1fr 1fr min-content 1fr; + grid-template-areas: ${({ $isCyclic }) => ` + '. start-icon first-right-arrow first-right-arrow middle-icon second-right-arrow second-right-arrow end-icon .' + 'start-label start-label start-label middle-label middle-label middle-label end-label end-label end-label' + ${ + $isCyclic + ? `'. end-arrow end-arrow end-arrow end-arrow end-arrow end-arrow end-arrow .' + '. cycle-label cycle-label cycle-label cycle-label cycle-label cycle-label cycle-label .'` + : '' + } + `}; + gap: ${theme.spacing.spacing1}; +`; + +const StyledInfographicsItem = styled(StrategyInfographicsItem)` + grid-area: ${({ $gridArea }) => $gridArea}; +`; + +const StyledItemContainer = styled(Flex)` + position: relative; +`; + +const StyledStack = styled(Flex)` + > :last-child { + margin-left: calc(${theme.icon.sizes.xl2} * -0.35); + } +`; + +const StyledRightArrow = styled.div` + grid-area: ${({ $gridArea }) => $gridArea}; + + position: relative; + height: 1px; + border-bottom: 1px dashed ${theme.colors.textPrimary}; + margin-top: auto; + margin-bottom: auto; + + &::after { + content: ''; + position: absolute; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 6px solid ${theme.colors.textPrimary}; + right: 0; + top: calc(50% + 0.5px); + transform: translate(25%, -50%); + } +`; + +const StyledEndArrow = styled.div` + grid-area: end-arrow; + + position: relative; + height: 20px; + border-left: 1px dashed ${theme.colors.textPrimary}; + border-bottom: 1px dashed ${theme.colors.textPrimary}; + border-right: 1px dashed ${theme.colors.textPrimary}; + margin-left: calc(${theme.icon.sizes.xl2} / 2); + margin-right: calc((${theme.icon.sizes.xl2} + (${theme.icon.sizes.xl2} / 2)) / 2); + + &::after { + content: ''; + position: absolute; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 6px solid ${theme.colors.textPrimary}; + top: 2px; + left: -0.5px; + transform: translate(-50%, -50%); + } +`; + +const StyledLabel = styled(Span)` + grid-area: ${({ $gridArea }) => $gridArea}; + justify-self: center; +`; + +type StyledIconProps = { + $size?: IconSize; +}; + +const StyledIcon = styled.span` + display: inline-flex; + justify-content: center; + align-items: center; + background-color: ${theme.colors.bgPrimary}; + border-radius: ${theme.rounded.full}; + border: 1px solid ${theme.colors.textPrimary}; + padding: ${({ $size }) => { + switch ($size) { + case 's': + return '0.15rem'; + default: + case 'md': + return `calc(${theme.spacing.spacing3} - 1px)`; + } + }}; + + @media ${theme.breakpoints.down('md')} { + padding: ${({ $size }) => ($size === 'md' ? `calc(${theme.spacing.spacing2} - 1px)` : undefined)}; + } +`; + +type StyledSubIconProps = { + $isCenterPosition: boolean; +}; + +const StyledSubIcon = styled.span` + position: absolute; + bottom: 0; + left: ${({ $isCenterPosition }) => ($isCenterPosition ? '50%' : '100%')}; + transform: ${({ $isCenterPosition }) => ($isCenterPosition ? 'translate(-50%, 10%)' : 'translate(-70%, 10%)')}; +`; + +export { + StyledEndArrow, + StyledGrid, + StyledIcon, + StyledInfographicsItem, + StyledItemContainer, + StyledLabel, + StyledRightArrow, + StyledStack, + StyledSubIcon +}; diff --git a/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.tsx b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.tsx new file mode 100644 index 0000000000..df33da962d --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographics.tsx @@ -0,0 +1,61 @@ +import { HTMLAttributes, ReactNode } from 'react'; + +import { + StyledEndArrow, + StyledGrid, + StyledInfographicsItem, + StyledLabel, + StyledRightArrow +} from './StrategyInfographics.styles'; +import { VariantIcons } from './StrategyInfographicsIcon'; + +type ItemData = { + icon?: VariantIcons; + ticker?: string | string[]; + subIcon?: VariantIcons; + label: ReactNode; +}; + +type Props = { + items: ItemData[]; + isCyclic?: boolean; + endCycleLabel?: ReactNode; +}; + +type InheritAttrs = Omit, keyof Props>; + +type StrategyInfographicsProps = Props & InheritAttrs; + +const StrategyInfographics = ({ items, isCyclic, endCycleLabel, ...props }: StrategyInfographicsProps): JSX.Element => { + const [itemA, itemB, itemC] = items; + + return ( + + + + + + + + {itemA.label} + + + {itemB.label} + + + {itemC.label} + + {isCyclic && ( + <> + + + {endCycleLabel} + + + )} + + ); +}; + +export { StrategyInfographics }; +export type { ItemData, StrategyInfographicsProps }; diff --git a/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsIcon.tsx b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsIcon.tsx new file mode 100644 index 0000000000..a7b8aa6580 --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsIcon.tsx @@ -0,0 +1,34 @@ +import { ArrowPathRoundedSquare, PresentationChartBar } from '@/assets/icons'; +import { IconProps } from '@/component-library/Icon'; + +import { StyledIcon } from './StrategyInfographics.styles'; + +const icons = ['presentation', 'swap'] as const; + +type VariantIcons = typeof icons[number]; + +const mapIcons: Record = { + presentation: PresentationChartBar, + swap: ArrowPathRoundedSquare +}; + +type Props = { + variant: VariantIcons; +}; + +type InheritAttrs = Omit; + +type StrategyInfographicsIconProps = Props & InheritAttrs; + +const StrategyInfographicsIcon = ({ variant, size, ...props }: StrategyInfographicsIconProps): JSX.Element => { + const Icon = mapIcons[variant]; + + return ( + + + + ); +}; + +export { StrategyInfographicsIcon }; +export type { VariantIcons }; diff --git a/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsItem.tsx b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsItem.tsx new file mode 100644 index 0000000000..746b12b5f5 --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/StrategyInfographicsItem.tsx @@ -0,0 +1,33 @@ +import { FlexProps, theme, useMediaQuery } from '@/component-library'; + +import { StyledItemContainer, StyledSubIcon } from './StrategyInfographics.styles'; +import { StrategyInfographicsIcon, VariantIcons } from './StrategyInfographicsIcon'; +import { StrategyInfographicsToken } from './StrategyInfographicToken'; + +type Props = { + icon?: VariantIcons; + ticker?: string | string[]; + subIcon?: VariantIcons; +}; + +type InheritAttrs = Omit; + +type StrategyInfographicsItemProps = Props & InheritAttrs; + +const StrategyInfographicsItem = ({ icon, ticker, subIcon, ...props }: StrategyInfographicsItemProps): JSX.Element => { + const isMobile = useMediaQuery(theme.breakpoints.down('md')); + + return ( + + {ticker && } + {icon && } + {subIcon && ( + + {} + + )} + + ); +}; + +export { StrategyInfographicsItem }; diff --git a/src/pages/Strategies/components/StrategyInfographics/index.tsx b/src/pages/Strategies/components/StrategyInfographics/index.tsx new file mode 100644 index 0000000000..d2e65c82ea --- /dev/null +++ b/src/pages/Strategies/components/StrategyInfographics/index.tsx @@ -0,0 +1,2 @@ +export type { StrategyInfographicsProps } from './StrategyInfographics'; +export { StrategyInfographics } from './StrategyInfographics'; diff --git a/src/pages/Strategies/components/StrategyInsights/StrategyInsights.styles.tsx b/src/pages/Strategies/components/StrategyInsights/StrategyInsights.styles.tsx new file mode 100644 index 0000000000..b2b392d084 --- /dev/null +++ b/src/pages/Strategies/components/StrategyInsights/StrategyInsights.styles.tsx @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +import { Dl, theme } from '@/component-library'; + +const StyledDl = styled(Dl)` + flex-direction: column; + + @media ${theme.breakpoints.up('sm')} { + flex-direction: row; + } +`; + +export { StyledDl }; diff --git a/src/pages/Strategies/components/StrategyInsights/StrategyInsights.tsx b/src/pages/Strategies/components/StrategyInsights/StrategyInsights.tsx new file mode 100644 index 0000000000..1bbaa718ab --- /dev/null +++ b/src/pages/Strategies/components/StrategyInsights/StrategyInsights.tsx @@ -0,0 +1,64 @@ +import { convertMonetaryAmountToValueInUSD, formatPercentage } from '@/common/utils/utils'; +import { Card, Dd, DlGroup, Dt } from '@/component-library'; +import { formatUSD } from '@/component-library/utils/format'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { getTokenPrice } from '@/utils/helpers/prices'; + +import { StrategyData } from '../../hooks/use-get-strategies'; +import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; +import { StyledDl } from './StrategyInsights.styles'; + +type Props = { + stratetgy: StrategyData; + position?: StrategyPositionData; +}; + +const StrategyInsights = ({ stratetgy, position }: Props): JSX.Element => { + const { amount, earnedAmount } = position || {}; + + const prices = useGetPrices(); + const price = getTokenPrice(prices, stratetgy.currency.ticker); + + const amountUSD = (amount && convertMonetaryAmountToValueInUSD(amount, price?.usd)) || 0; + const amountUSDLabel = formatUSD(amountUSD, { compact: true }); + + const earnedUSD = (earnedAmount && convertMonetaryAmountToValueInUSD(earnedAmount, price?.usd)) || 0; + const earnedUSDLabel = formatUSD(earnedUSD, { compact: true }); + + return ( + + + +
+ My deposit +
+
+ {amount?.toHuman() || 0} {stratetgy.currency.ticker} ({amountUSDLabel}) +
+ + + + +
+ APY +
+
+ {formatPercentage(stratetgy.interestRate.toNumber())} +
+ + + + +
+ My earnings +
+
+ {earnedAmount?.toHuman() || 0} {stratetgy.currency.ticker} ({earnedUSDLabel}) +
+ + + + ); +}; + +export { StrategyInsights }; diff --git a/src/pages/Strategies/components/StrategyInsights/index.tsx b/src/pages/Strategies/components/StrategyInsights/index.tsx new file mode 100644 index 0000000000..eb88a4934c --- /dev/null +++ b/src/pages/Strategies/components/StrategyInsights/index.tsx @@ -0,0 +1 @@ +export { StrategyInsights } from './StrategyInsights'; diff --git a/src/pages/Strategies/components/StrategyTag/StrategyTag.style.tsx b/src/pages/Strategies/components/StrategyTag/StrategyTag.style.tsx new file mode 100644 index 0000000000..f1361e6384 --- /dev/null +++ b/src/pages/Strategies/components/StrategyTag/StrategyTag.style.tsx @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +import { Span, theme } from '@/component-library'; + +const StyledTag = styled(Span)` + border: ${theme.border.default}; + border-radius: ${theme.rounded.full}; + padding: ${theme.spacing.spacing2}; + background-color: ${theme.colors.bgPrimary}; +`; + +export { StyledTag }; diff --git a/src/pages/Strategies/components/StrategyTag/StrategyTag.tsx b/src/pages/Strategies/components/StrategyTag/StrategyTag.tsx new file mode 100644 index 0000000000..d875fb04f3 --- /dev/null +++ b/src/pages/Strategies/components/StrategyTag/StrategyTag.tsx @@ -0,0 +1,45 @@ +import { ReactNode } from 'react'; + +import { SpanProps, TextProps } from '@/component-library/Text'; + +import { StrategyRisk } from '../../types'; +import { StyledTag } from './StrategyTag.style'; + +const content: Record = { + low: { + color: 'success', + label: 'Low Risk' + }, + medium: { + color: 'warning', + label: 'Medium Risk' + }, + high: { + color: 'error', + label: 'High Risk' + } +}; + +const getContent = (risk: StrategyRisk) => content[risk]; + +type Props = { + risk?: StrategyRisk; + children?: ReactNode; +}; + +type InheritAttrs = Omit; + +type StrategyTagProps = Props & InheritAttrs; + +const StrategyTag = ({ risk, children, ...props }: StrategyTagProps): JSX.Element => { + const { color, label } = risk ? getContent(risk) : { label: children, color: undefined }; + + return ( + + {label} + + ); +}; + +export { StrategyTag }; +export type { StrategyTagProps }; diff --git a/src/pages/Strategies/components/StrategyTag/index.tsx b/src/pages/Strategies/components/StrategyTag/index.tsx new file mode 100644 index 0000000000..049f6dd30f --- /dev/null +++ b/src/pages/Strategies/components/StrategyTag/index.tsx @@ -0,0 +1,2 @@ +export type { StrategyTagProps } from './StrategyTag'; +export { StrategyTag } from './StrategyTag'; diff --git a/src/pages/Strategies/components/index.ts b/src/pages/Strategies/components/index.ts index 2088c63879..9687d2cffd 100644 --- a/src/pages/Strategies/components/index.ts +++ b/src/pages/Strategies/components/index.ts @@ -1 +1,6 @@ +export type { StrategyCardProps } from './StrategyCard'; +export { StrategyCard } from './StrategyCard'; export { StrategyForm } from './StrategyForm'; +export { StrategyInfographics } from './StrategyInfographics'; +export { StrategyInsights } from './StrategyInsights'; +export { StrategyTag } from './StrategyTag'; diff --git a/src/pages/Strategies/helpers/content.ts b/src/pages/Strategies/helpers/content.ts new file mode 100644 index 0000000000..8c88992a27 --- /dev/null +++ b/src/pages/Strategies/helpers/content.ts @@ -0,0 +1,31 @@ +import { TFunction } from 'react-i18next'; + +import { StrategyInfographicsProps } from '../components/StrategyInfographics'; +import { StrategyData } from '../hooks/use-get-strategies'; +import { StrategyType } from '../types'; + +type ContentData = { + title: string; + summary: string; + description: string; + infographics: StrategyInfographicsProps['items']; +}; + +const getContent = (strategy: StrategyData, t: TFunction): ContentData => { + const content: Record = { + [StrategyType.BTC_LOW_RISK]: { + title: t('strategies.btc_passive_income'), + summary: t('strategies.generate_passive_income_by_offering_ticker', { ticker: strategy.currency.ticker }), + description: t('strategies.low_risk_approach_generate_passive_income', { ticker: strategy.currency.ticker }), + infographics: [ + { label: `Deposit ${strategy.currency.ticker}`, ticker: strategy.currency.ticker }, + { label: `Provide ${strategy.currency.ticker} to borrow market`, icon: 'presentation' }, + { label: 'Earn Interest', ticker: strategy.currency.ticker } + ] + } + }; + + return content[strategy.type]; +}; + +export { getContent }; diff --git a/src/pages/Strategies/hooks/use-get-strategies.ts b/src/pages/Strategies/hooks/use-get-strategies.ts new file mode 100644 index 0000000000..ff5c261ed4 --- /dev/null +++ b/src/pages/Strategies/hooks/use-get-strategies.ts @@ -0,0 +1,60 @@ +import { CurrencyExt, LoanAsset } from '@interlay/interbtc-api'; +import Big from 'big.js'; +import { useCallback, useMemo } from 'react'; + +import { WRAPPED_TOKEN } from '@/config/relay-chains'; +import { useGetLoanAssets } from '@/hooks/api/loans/use-get-loan-assets'; + +import { StrategyRisk, StrategyType } from '../types'; + +type StrategyData = { + type: StrategyType; + risk: StrategyRisk; + currency: CurrencyExt; + interestRate: Big; + loanAsset: LoanAsset; +}; + +type UseGetStrategiesResult = { + isLoading: boolean; + data: StrategyData[] | undefined; + getStrategy: (type: StrategyType) => StrategyData | undefined; +}; + +const useGetStrategies = (): UseGetStrategiesResult => { + const { data: loanAssets, isLoading } = useGetLoanAssets(); + + const data: StrategyData[] | undefined = useMemo( + () => + loanAssets && + // eslint-disable-next-line array-callback-return + Object.values(StrategyType).map((type) => { + switch (type) { + case StrategyType.BTC_LOW_RISK: { + const currency = WRAPPED_TOKEN; + const loanAsset = loanAssets[currency.ticker]; + + return { + type, + currency, + risk: StrategyRisk.LOW, + interestRate: loanAsset.lendApy, + loanAsset + }; + } + } + }), + [loanAssets] + ); + + const getStrategy = useCallback((type: StrategyType) => data?.find((item) => item.type === type), [data]); + + return { + isLoading, + data, + getStrategy + }; +}; + +export { useGetStrategies }; +export type { StrategyData, UseGetStrategiesResult }; diff --git a/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts b/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts new file mode 100644 index 0000000000..0df60edb21 --- /dev/null +++ b/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts @@ -0,0 +1,30 @@ +import { + useGetLoanAvailableAmounts, + UseGetLoanAvailableAmountsResult +} from '@/hooks/api/loans/use-get-loan-available-amounts'; + +import { StrategyFormType, StrategyType } from '../types'; +import { StrategyData } from './use-get-strategies'; +import { StrategyPositionData } from './use-get-strategy-position'; + +type useGetStrategyAvailableAmountsResult = UseGetLoanAvailableAmountsResult; + +const useGetStrategyAvailableAmounts = ( + type: StrategyFormType, + strategy: StrategyData, + position?: StrategyPositionData +): useGetStrategyAvailableAmountsResult => { + const loanAvailableAmounts = useGetLoanAvailableAmounts( + type === StrategyFormType.DEPOSIT ? 'lend' : 'withdraw', + strategy.loanAsset, + position?.loanPosition + ); + + switch (strategy.type) { + case StrategyType.BTC_LOW_RISK: { + return loanAvailableAmounts; + } + } +}; + +export { useGetStrategyAvailableAmounts }; diff --git a/src/pages/Strategies/hooks/use-get-strategy-position.ts b/src/pages/Strategies/hooks/use-get-strategy-position.ts new file mode 100644 index 0000000000..88dc11bbe2 --- /dev/null +++ b/src/pages/Strategies/hooks/use-get-strategy-position.ts @@ -0,0 +1,62 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; + +import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; +import { CollateralPosition } from '@/types/loans'; + +import { StrategyType } from '../types'; +import { StrategyData } from './use-get-strategies'; + +type StrategyPositionData = { + amount: MonetaryAmount; + earnedAmount?: MonetaryAmount; + loanPosition: CollateralPosition; +}; + +type UseGetStrategyPositionResult = { + isLoading: boolean; + data: StrategyPositionData | undefined; +}; + +const useGetStrategyPosition = (strategy: StrategyData | undefined): UseGetStrategyPositionResult => { + const { getLendPosition, isLoading: isAccountPositionsLoading } = useGetAccountPositions(); + + if (!strategy) { + return { + data: undefined, + isLoading: true + }; + } + + switch (strategy.type) { + case StrategyType.BTC_LOW_RISK: { + if (isAccountPositionsLoading) { + return { + data: undefined, + isLoading: true + }; + } + + const position = getLendPosition(strategy.currency); + + if (!position) { + return { + data: undefined, + isLoading: false + }; + } + + return { + data: { + amount: position.amount, + earnedAmount: position.earnedAmount, + loanPosition: position + }, + isLoading: false + }; + } + } +}; + +export { useGetStrategyPosition }; +export type { StrategyPositionData, UseGetStrategyPositionResult }; diff --git a/src/pages/Strategies/types.ts b/src/pages/Strategies/types.ts new file mode 100644 index 0000000000..dbcef3490b --- /dev/null +++ b/src/pages/Strategies/types.ts @@ -0,0 +1,16 @@ +enum StrategyRisk { + LOW = 'low', + MEDIUM = 'medium', + HIGH = 'high' +} + +enum StrategyType { + BTC_LOW_RISK = 'btc-low-risk' +} + +enum StrategyFormType { + DEPOSIT, + WITHDRAW +} + +export { StrategyFormType, StrategyRisk, StrategyType }; diff --git a/src/pages/Strategies/types/form.ts b/src/pages/Strategies/types/form.ts deleted file mode 100644 index c6b5d6bad5..0000000000 --- a/src/pages/Strategies/types/form.ts +++ /dev/null @@ -1,13 +0,0 @@ -type StrategyFormType = 'deposit' | 'withdraw'; -type StrategyRiskVariant = 'low' | 'high'; - -interface StrategyDepositFormData { - deposit?: string; -} - -interface StrategyWithdrawalFormData { - withdraw?: string; - withdrawAsWrapped?: boolean; -} - -export type { StrategyDepositFormData, StrategyFormType, StrategyRiskVariant, StrategyWithdrawalFormData }; diff --git a/src/pages/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx index c3986c5ff2..3805131dc2 100644 --- a/src/pages/Swap/Swap.tsx +++ b/src/pages/Swap/Swap.tsx @@ -3,15 +3,15 @@ import { useEffect, useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; +import { MainContainer } from '@/components'; import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; +import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { usePageQueryParams } from '@/hooks/use-page-query-params'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; -import MainContainer from '@/parts/MainContainer'; import { SwapPair } from '@/types/swap'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getPooledTickers } from '@/utils/helpers/pools'; -import { useGetLiquidityPools } from '@/utils/hooks/api/amm/use-get-liquidity-pools'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; import { SwapForm, SwapLiquidity } from './components'; import { StyledWrapper } from './Swap.style'; diff --git a/src/pages/Swap/components/SwapForm/SwapCTA.tsx b/src/pages/Swap/components/SwapForm/SwapCTA.tsx index 9db4bed0a6..bc6d5520f4 100644 --- a/src/pages/Swap/components/SwapForm/SwapCTA.tsx +++ b/src/pages/Swap/components/SwapForm/SwapCTA.tsx @@ -3,11 +3,11 @@ import { TFunction, useTranslation } from 'react-i18next'; import { CTAProps } from '@/component-library'; import { AuthCTA } from '@/components'; +import { Transaction } from '@/hooks/transaction'; +import { UseFeeEstimateResult } from '@/hooks/transaction/types/hook'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { SWAP_INPUT_AMOUNT_FIELD, SWAP_INPUT_TOKEN_FIELD, SWAP_OUTPUT_TOKEN_FIELD, useForm } from '@/lib/form'; import { SwapPair } from '@/types/swap'; -import { Transaction } from '@/utils/hooks/transaction'; -import { UseFeeEstimateResult } from '@/utils/hooks/transaction/types/hook'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; const getProps = ( pair: SwapPair, diff --git a/src/pages/Swap/components/SwapForm/SwapForm.tsx b/src/pages/Swap/components/SwapForm/SwapForm.tsx index 45f9c964d9..7fdb33f2c4 100644 --- a/src/pages/Swap/components/SwapForm/SwapForm.tsx +++ b/src/pages/Swap/components/SwapForm/SwapForm.tsx @@ -11,6 +11,12 @@ import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/comm import { Card, CardProps, Divider, Flex, H1, TokenInput } from '@/component-library'; import { SlippageManager, TransactionFeeDetails } from '@/components'; import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { Prices, useGetPrices } from '@/hooks/api/use-get-prices'; +import { FeeEstimateResult, Transaction, useTransaction } from '@/hooks/transaction'; +import useAccountId from '@/hooks/use-account-id'; +import { useSelectCurrency } from '@/hooks/use-select-currency'; import { SWAP_FEE_TOKEN_FIELD, SWAP_INPUT_AMOUNT_FIELD, @@ -25,12 +31,6 @@ import { REFETCH_INTERVAL } from '@/utils/constants/api'; import { SWAP_PRICE_IMPACT_LIMIT } from '@/utils/constants/swap'; import { getTokenInputProps } from '@/utils/helpers/input'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { Prices, useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { FeeEstimateResult, Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useAccountId from '@/utils/hooks/use-account-id'; -import { useSelectCurrency } from '@/utils/hooks/use-select-currency'; import { PriceImpactModal } from '../PriceImpactModal'; import { SwapInfo } from '../SwapInfo'; diff --git a/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx b/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx index ed88273a9a..c34b6fab91 100644 --- a/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx +++ b/src/pages/Swap/components/SwapLiquidity/SwapLiquidity.tsx @@ -2,9 +2,9 @@ import { CurrencyExt, LiquidityPool } from '@interlay/interbtc-api'; import { formatUSD } from '@/common/utils/utils'; import { Card, CardProps, CoinPair, Dd, Dl, DlGroup, Dt, Flex, H2 } from '@/component-library'; +import { DateRangeVolume, useGetDexVolumes } from '@/hooks/api/use-get-dex-volume'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { DateRangeVolume, useGetDexVolumes } from '@/utils/hooks/api/use-get-dex-volume'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; type Props = { input: CurrencyExt; diff --git a/src/pages/TX/IssueTX/index.tsx b/src/pages/TX/IssueTX/index.tsx index 143e055707..8c6d2d0433 100644 --- a/src/pages/TX/IssueTX/index.tsx +++ b/src/pages/TX/IssueTX/index.tsx @@ -2,18 +2,18 @@ import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useQuery } from 'react-query'; import { useParams } from 'react-router-dom'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import IssueUI from '@/legacy-components/IssueUI'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; import issuesFetcher, { getIssueWithStatus, ISSUES_FETCHER } from '@/services/fetchers/issues-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { URL_PARAMETERS } from '@/utils/constants/links'; // MEMO: /tx/issue/0xfd6d53d8df584d675fe2322ccb126754d6c6d249878f0a2c9526607458714f76 const IssueTX = (): JSX.Element => { - const { [URL_PARAMETERS.TRANSACTION_HASH]: txHash } = useParams>(); + const { [URL_PARAMETERS.TRANSACTION.HASH]: txHash } = useParams>(); const { isIdle: stableBitcoinConfirmationsIdle, diff --git a/src/pages/TX/RedeemTX/index.tsx b/src/pages/TX/RedeemTX/index.tsx index a05a4ec3a9..dee0e2edc0 100644 --- a/src/pages/TX/RedeemTX/index.tsx +++ b/src/pages/TX/RedeemTX/index.tsx @@ -2,18 +2,18 @@ import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useQuery } from 'react-query'; import { useParams } from 'react-router-dom'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; import RedeemUI from '@/legacy-components/RedeemUI'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import { URL_PARAMETERS } from '@/utils/constants/links'; // MEMO: /tx/redeem/0xb1887a4e14567610aa9ca880e29c14a00a0def0f89843bf2fe9feb3b0690635f const RedeemTX = (): JSX.Element => { - const { [URL_PARAMETERS.TRANSACTION_HASH]: txHash } = useParams>(); + const { [URL_PARAMETERS.TRANSACTION.HASH]: txHash } = useParams>(); const { isIdle: stableBitcoinConfirmationsIdle, diff --git a/src/pages/TX/index.tsx b/src/pages/TX/index.tsx index a80afaa310..d0ad6344ed 100644 --- a/src/pages/TX/index.tsx +++ b/src/pages/TX/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Route, Switch, useRouteMatch } from 'react-router-dom'; -import MainContainer from '@/parts/MainContainer'; +import { MainContainer } from '@/components'; import { TXType } from '@/types/general.d'; import { URL_PARAMETERS } from '@/utils/constants/links'; @@ -15,13 +15,13 @@ const TX = (): JSX.Element => { return ( - + - + - + diff --git a/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx b/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx deleted file mode 100644 index 765659e2d9..0000000000 --- a/src/pages/Transactions/IssueRequestsTable/IssueRequestModal/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import { Modal, ModalBody, ModalHeader } from '@/component-library'; -import IssueUI from '@/legacy-components/IssueUI'; -import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; - -interface CustomProps { - request: any; // TODO: should type properly (`Relay`) -} - -const IssueRequestModal = ({ open, onClose, request }: CustomProps & Omit): JSX.Element => { - const { t } = useTranslation(); - - return ( - - {t('issue_page.request', { id: request.id })} - - - - - ); -}; - -export default IssueRequestModal; diff --git a/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx b/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx deleted file mode 100644 index fee187b468..0000000000 --- a/src/pages/Transactions/RedeemRequestsTable/RedeemRequestModal/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import { Modal, ModalBody, ModalHeader } from '@/component-library'; -import RedeemUI from '@/legacy-components/RedeemUI'; -import { Props as ModalProps } from '@/legacy-components/UI/InterlayModal'; - -interface CustomProps { - // TODO: should type properly (`Relay`) - request: any; -} - -const RedeemRequestModal = ({ - open, - onClose, - request -}: CustomProps & Omit): JSX.Element | null => { - const { t } = useTranslation(); - - return ( - - {t('issue_page.request', { id: request.id })} - - - - - ); -}; - -export default RedeemRequestModal; diff --git a/src/pages/Vaults/Vault/ReplaceTable/index.tsx b/src/pages/Vaults/Vault/ReplaceTable/index.tsx index 6f23497844..586c13db16 100644 --- a/src/pages/Vaults/Vault/ReplaceTable/index.tsx +++ b/src/pages/Vaults/Vault/ReplaceTable/index.tsx @@ -22,6 +22,7 @@ import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayTable, { InterlayTableContainer, InterlayTbody, @@ -30,7 +31,6 @@ import InterlayTable, { InterlayThead, InterlayTr } from '@/legacy-components/UI/InterlayTable'; -import SectionTitle from '@/parts/SectionTitle'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; interface Props { diff --git a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx index 39a0e01099..6b7475556b 100644 --- a/src/pages/Vaults/Vault/RequestIssueModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestIssueModal/index.tsx @@ -14,11 +14,11 @@ import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { ReactComponent as BitcoinLogoIcon } from '@/assets/img/bitcoin-logo.svg'; -import { ParachainStatus, StoreType } from '@/common/types/util.types'; +import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { Modal, ModalBody, ModalHeader } from '@/component-library'; +import { AuthCTA } from '@/components'; import { - BLOCKS_BEHIND_LIMIT, DEFAULT_ISSUE_BRIDGE_FEE_RATE, DEFAULT_ISSUE_DUST_AMOUNT, DEFAULT_ISSUE_GRIEFING_COLLATERAL_RATE @@ -31,22 +31,21 @@ import { WRAPPED_TOKEN_SYMBOL, WrappedTokenLogoIcon } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import useAccountId from '@/hooks/use-account-id'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; -import SubmitButton from '@/legacy-components/SubmitButton'; import TokenField from '@/legacy-components/TokenField'; import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; import InterlayButtonBase from '@/legacy-components/UI/InterlayButtonBase'; -import { useSubstrateSecureState } from '@/lib/substrate'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import STATUSES from '@/utils/constants/statuses'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useAccountId from '@/utils/hooks/use-account-id'; +import { useGetBtcBlockHeight } from '@/utils/hooks/api/use-get-btc-block-height'; import SubmittedIssueRequestModal from '../SubmittedIssueRequestModal'; @@ -94,12 +93,11 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro const { t } = useTranslation(); const prices = useGetPrices(); + const { data: blockHeight } = useGetBtcBlockHeight(); + const handleError = useErrorHandler(); - const { selectedAccount } = useSubstrateSecureState(); - const { bridgeLoaded, bitcoinHeight, btcRelayHeight, parachainStatus } = useSelector( - (state: StoreType) => state.general - ); + const { bridgeLoaded } = useSelector((state: StoreType) => state.general); const { data: balances, isLoading: isBalancesLoading } = useGetBalances(); @@ -179,21 +177,25 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro const vaults = await window.bridge.vaults.getVaultsWithIssuableTokens(); - const result = await transaction.executeAsync( - wrappedTokenAmount, - vaultAccountId, - collateralToken, - false, // default - vaults - ); - - const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); - - // TODO: handle issue aggregation - const issueRequest = issueRequests[0]; - handleSubmittedRequestModalOpen(issueRequest); - setSubmitStatus(STATUSES.RESOLVED); - onClose(); + try { + const result = await transaction.executeAsync( + wrappedTokenAmount, + vaultAccountId, + collateralToken, + false, // default + vaults + ); + + const issueRequests = await getIssueRequestsFromExtrinsicResult(window.bridge, result.data); + + // TODO: handle issue aggregation + const issueRequest = issueRequests[0]; + handleSubmittedRequestModalOpen(issueRequest); + setSubmitStatus(STATUSES.RESOLVED); + onClose(); + } catch (e) { + setSubmitStatus(STATUSES.IDLE); + } }; const validateForm = (value: string): string | undefined => { @@ -219,7 +221,7 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro }); } - if (bitcoinHeight - btcRelayHeight > BLOCKS_BEHIND_LIMIT) { + if (blockHeight?.isOutdated) { return t('issue_page.error_more_than_6_blocks_behind', { wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL }); @@ -398,15 +400,9 @@ const RequestIssueModal = ({ onClose, open, collateralToken, vaultAddress }: Pro getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd )} /> - + {t('confirm')} - + diff --git a/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx b/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx index 8ade54775a..82add0e133 100644 --- a/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestRedeemModal/index.tsx @@ -10,12 +10,12 @@ import { displayMonetaryAmount } from '@/common/utils/utils'; import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; import { BTC_ADDRESS_REGEX } from '@/constants'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayCinnabarOutlinedButton from '@/legacy-components/buttons/InterlayCinnabarOutlinedButton'; import InterlayMulberryOutlinedButton from '@/legacy-components/buttons/InterlayMulberryOutlinedButton'; import ErrorMessage from '@/legacy-components/ErrorMessage'; import NumberInput from '@/legacy-components/NumberInput'; import TextField from '@/legacy-components/TextField'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const WRAPPED_TOKEN_AMOUNT = 'amount'; const BTC_ADDRESS = 'btc-address'; diff --git a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx index 3001474981..e96156e4a8 100644 --- a/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx +++ b/src/pages/Vaults/Vault/RequestReplacementModal/index.tsx @@ -16,6 +16,8 @@ import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; import { DEFAULT_REDEEM_DUST_AMOUNT } from '@/config/parachain'; import { GOVERNANCE_TOKEN, GOVERNANCE_TOKEN_SYMBOL, TRANSACTION_FEE_AMOUNT } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayCinnabarOutlinedButton from '@/legacy-components/buttons/InterlayCinnabarOutlinedButton'; import InterlayMulberryOutlinedButton from '@/legacy-components/buttons/InterlayMulberryOutlinedButton'; import ErrorMessage from '@/legacy-components/ErrorMessage'; @@ -24,8 +26,6 @@ import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsis import { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; import { getExchangeRate } from '@/utils/helpers/oracle'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; const AMOUNT = 'amount'; diff --git a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx index c01420c02c..6c6af0b57e 100644 --- a/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx +++ b/src/pages/Vaults/Vault/UpdateCollateralModal/index.tsx @@ -15,14 +15,14 @@ import { StoreType } from '@/common/types/util.types'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat, formatPercentage } from '@/common/utils/utils'; import { Modal, ModalBody, ModalHeader } from '@/component-library'; import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; import InterlayDefaultContainedButton from '@/legacy-components/buttons/InterlayDefaultContainedButton'; import TokenField from '@/legacy-components/TokenField'; import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; import STATUSES from '@/utils/constants/statuses'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; enum CollateralUpdateStatus { Close, diff --git a/src/pages/Vaults/Vault/VaultDashboard.tsx b/src/pages/Vaults/Vault/VaultDashboard.tsx index 09116e40d8..3637c02b6e 100644 --- a/src/pages/Vaults/Vault/VaultDashboard.tsx +++ b/src/pages/Vaults/Vault/VaultDashboard.tsx @@ -6,15 +6,15 @@ import { StoreType } from '@/common/types/util.types'; import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils'; import { Card, Stack } from '@/component-library'; import { ProgressCircle } from '@/component-library/ProgressCircle'; +import { MainContainer } from '@/components'; +import { useGetCurrencies } from '@/hooks/api/use-get-currencies'; +import { useGetIdentities } from '@/hooks/api/use-get-identities'; +import { useGetVaultData } from '@/hooks/api/vaults/use-get-vault-data'; +import { useGetVaultTransactions } from '@/hooks/api/vaults/use-get-vault-transactions'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; import { useSubstrateSecureState } from '@/lib/substrate'; -import MainContainer from '@/parts/MainContainer'; import { URL_PARAMETERS } from '@/utils/constants/links'; -import { useGetCurrencies } from '@/utils/hooks/api/use-get-currencies'; -import { useGetIdentities } from '@/utils/hooks/api/use-get-identities'; -import { useGetVaultData } from '@/utils/hooks/api/vaults/use-get-vault-data'; -import { useGetVaultTransactions } from '@/utils/hooks/api/vaults/use-get-vault-transactions'; import { InsightListItem, InsightsList, PageTitle, VaultInfo } from './components'; import ReplaceTable from './ReplaceTable'; diff --git a/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx b/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx index 2ab3052dfa..7515483189 100644 --- a/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx +++ b/src/pages/Vaults/Vault/VaultIssueRequestsTable/index.tsx @@ -9,10 +9,14 @@ import { useTable } from 'react-table'; import { formatDateTimePrecise, shortAddress } from '@/common/utils/utils'; import { BTC_EXPLORER_ADDRESS_API } from '@/config/blockstream-explorer-links'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; +import { useIssueRequests } from '@/hooks/issue-requests'; +import useQueryParams from '@/hooks/use-query-params'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -24,16 +28,12 @@ import InterlayTable, { } from '@/legacy-components/UI/InterlayTable'; import StatusCell from '@/legacy-components/UI/InterlayTable/StatusCell'; import ViewRequestDetailsLink from '@/legacy-components/ViewRequestDetailsLink'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; -import { useIssueRequests } from '@/services/hooks/issue-requests'; import { issuesCountQuery } from '@/services/queries/issues'; import { TXType } from '@/types/general.d'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; interface Props { vaultAddress: string; diff --git a/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx b/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx index 5eb15a2ae3..c9a39ca140 100644 --- a/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx +++ b/src/pages/Vaults/Vault/VaultRedeemRequestsTable/index.tsx @@ -9,10 +9,16 @@ import { useTable } from 'react-table'; import { formatDateTimePrecise, shortAddress, shortTxId } from '@/common/utils/utils'; import { BTC_EXPLORER_ADDRESS_API, BTC_EXPLORER_TRANSACTION_API } from '@/config/blockstream-explorer-links'; import { ISSUE_REDEEM_REQUEST_REFETCH_INTERVAL } from '@/config/parachain'; +import useCurrentActiveBlockNumber from '@/hooks/use-current-active-block-number'; +import useQueryParams from '@/hooks/use-query-params'; +import useStableBitcoinConfirmations from '@/hooks/use-stable-bitcoin-confirmations'; +import useStableParachainConfirmations from '@/hooks/use-stable-parachain-confirmations'; +import useUpdateQueryParameters from '@/hooks/use-update-query-parameters'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import ExternalLink from '@/legacy-components/ExternalLink'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; +import SectionTitle from '@/legacy-components/SectionTitle'; import InterlayPagination from '@/legacy-components/UI/InterlayPagination'; import InterlayTable, { InterlayTableContainer, @@ -24,19 +30,13 @@ import InterlayTable, { } from '@/legacy-components/UI/InterlayTable'; import StatusCell from '@/legacy-components/UI/InterlayTable/StatusCell'; import ViewRequestDetailsLink from '@/legacy-components/ViewRequestDetailsLink'; -import SectionTitle from '@/parts/SectionTitle'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import redeemsFetcher, { getRedeemWithStatus, REDEEMS_FETCHER } from '@/services/fetchers/redeems-fetcher'; -import useCurrentActiveBlockNumber from '@/services/hooks/use-current-active-block-number'; -import useStableBitcoinConfirmations from '@/services/hooks/use-stable-bitcoin-confirmations'; -import useStableParachainConfirmations from '@/services/hooks/use-stable-parachain-confirmations'; import redeemCountQuery from '@/services/queries/redeem-count-query'; import { TXType } from '@/types/general.d'; import { TABLE_PAGE_LIMIT } from '@/utils/constants/general'; import { QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; -import useQueryParams from '@/utils/hooks/use-query-params'; -import useUpdateQueryParameters from '@/utils/hooks/use-update-query-parameters'; interface Props { vaultAddress: string; diff --git a/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx b/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx index 3ff0628290..f78fce7bf3 100644 --- a/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx +++ b/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx @@ -23,13 +23,13 @@ import { TRANSACTION_FEE_AMOUNT, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import useAccountId from '@/hooks/use-account-id'; import { ForeignAssetIdLiteral } from '@/types/currency'; import { TreasuryAction } from '@/types/general.d'; import { URL_PARAMETERS } from '@/utils/constants/links'; import { getExchangeRate } from '@/utils/helpers/oracle'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import useAccountId from '@/utils/hooks/use-account-id'; import { HighlightDescriptionItem } from './HighlightDescriptionItem'; import { IssueDescriptionItem } from './IssueDescriptionItem'; diff --git a/src/pages/Vaults/Vault/components/PageTitle/PageTitle.tsx b/src/pages/Vaults/Vault/components/PageTitle/PageTitle.tsx index e12e208c4b..a6efb2a1c7 100644 --- a/src/pages/Vaults/Vault/components/PageTitle/PageTitle.tsx +++ b/src/pages/Vaults/Vault/components/PageTitle/PageTitle.tsx @@ -1,7 +1,7 @@ import { HTMLAttributes } from 'react'; import { P } from '@/component-library'; -import TimerIncrement from '@/parts/TimerIncrement'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; import { StyledTitle, StyledWrapper } from './PageTitle.styles'; diff --git a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx index d372470202..3197df253d 100644 --- a/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx +++ b/src/pages/Vaults/Vault/components/Rewards/Rewards.tsx @@ -6,10 +6,10 @@ import { formatNumber, formatUSD } from '@/common/utils/utils'; import { CardProps } from '@/component-library'; import { LoadingSpinner } from '@/component-library/LoadingSpinner'; import { GOVERNANCE_TOKEN_SYMBOL, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { VaultData } from '@/hooks/api/vaults/get-vault-data'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import useAccountId from '@/hooks/use-account-id'; import { ZERO_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; -import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import useAccountId from '@/utils/hooks/use-account-id'; import { InsightListItem, InsightsList } from '../InsightsList'; import { diff --git a/src/pages/Vaults/Vault/components/VaultCollateral/CollateralThresholds.tsx b/src/pages/Vaults/Vault/components/VaultCollateral/CollateralThresholds.tsx index c7ea0d1628..865cc2cb88 100644 --- a/src/pages/Vaults/Vault/components/VaultCollateral/CollateralThresholds.tsx +++ b/src/pages/Vaults/Vault/components/VaultCollateral/CollateralThresholds.tsx @@ -1,7 +1,7 @@ import { HTMLAttributes } from 'react'; import { formatPercentage } from '@/common/utils/utils'; -import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; +import { VaultData } from '@/hooks/api/vaults/get-vault-data'; import { ThresholdDd, ThresholdDl, ThresholdDt, ThresholdItem } from './VaultCollateral.styles'; diff --git a/src/pages/Vaults/Vault/components/VaultCollateral/VaultCollateral.tsx b/src/pages/Vaults/Vault/components/VaultCollateral/VaultCollateral.tsx index ec335ec6e5..2b52c738c3 100644 --- a/src/pages/Vaults/Vault/components/VaultCollateral/VaultCollateral.tsx +++ b/src/pages/Vaults/Vault/components/VaultCollateral/VaultCollateral.tsx @@ -4,10 +4,10 @@ import Big from 'big.js'; import { useMemo, useState } from 'react'; import { CardProps, CTA, MeterRanges } from '@/component-library'; +import { VaultData } from '@/hooks/api/vaults/get-vault-data'; import RequestIssueModal from '@/pages/Vaults/Vault/RequestIssueModal'; import RequestRedeemModal from '@/pages/Vaults/Vault/RequestRedeemModal'; import UpdateCollateralModal, { CollateralUpdateStatus } from '@/pages/Vaults/Vault/UpdateCollateralModal'; -import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; import { VaultActions } from '../../types'; import { CollateralThresholds } from './CollateralThresholds'; diff --git a/src/pages/Vaults/VaultsOverview/VaultsOverview.tsx b/src/pages/Vaults/VaultsOverview/VaultsOverview.tsx index 271a0f3279..f31601130d 100644 --- a/src/pages/Vaults/VaultsOverview/VaultsOverview.tsx +++ b/src/pages/Vaults/VaultsOverview/VaultsOverview.tsx @@ -6,12 +6,12 @@ import { useParams } from 'react-router-dom'; import { StoreType } from '@/common/types/util.types'; import { formatNumber, formatPercentage, formatUSD } from '@/common/utils/utils'; import { Grid, GridItem } from '@/component-library'; +import { MainContainer } from '@/components'; +import { useGetVaultData } from '@/hooks/api/vaults/use-get-vault-data'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import PrimaryColorEllipsisLoader from '@/legacy-components/PrimaryColorEllipsisLoader'; import { useSubstrateSecureState } from '@/lib/substrate'; -import MainContainer from '@/parts/MainContainer'; import { URL_PARAMETERS } from '@/utils/constants/links'; -import { useGetVaultData } from '@/utils/hooks/api/vaults/use-get-vault-data'; import { CreateVaults, InfoBox, VaultCard, VaultsHeader } from './components'; diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx index bb7526c646..e79cfbb6dc 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaultWizard/DespositCollateralStep.tsx @@ -14,6 +14,8 @@ import { TransactionDetailsGroup, TransactionFeeDetails } from '@/components'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; import { depositCollateralVaultsSchema, useForm, @@ -24,8 +26,6 @@ import { } from '@/lib/form'; import { getTokenInputProps } from '@/utils/helpers/input'; import { StepComponentProps, withStep } from '@/utils/hocs/step'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { isTransactionFormDisabled } from '@/utils/hooks/transaction/utils/form'; import { useDepositCollateral } from '../../utils/use-deposit-collateral'; diff --git a/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx b/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx index 093f7c4fc5..2d27fa4686 100644 --- a/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx +++ b/src/pages/Vaults/VaultsOverview/components/CreateVaults/CreateVaults.tsx @@ -3,8 +3,8 @@ import { useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { H3, Modal, Stack } from '@/component-library'; -import { VaultData } from '@/utils/hooks/api/vaults/get-vault-data'; -import { AvailableVaultData, useGetAvailableVaults } from '@/utils/hooks/api/vaults/use-get-available-vaults'; +import { VaultData } from '@/hooks/api/vaults/get-vault-data'; +import { AvailableVaultData, useGetAvailableVaults } from '@/hooks/api/vaults/use-get-available-vaults'; import { CreateVaultWizard } from '../CreateVaultWizard'; import { VaultsTable, VaultsTableProps, VaultsTableRow } from '../VaultsTable/VaultsTable'; diff --git a/src/pages/Vaults/VaultsOverview/components/VaultsHeader/index.tsx b/src/pages/Vaults/VaultsOverview/components/VaultsHeader/index.tsx index 0e3e198f74..9f83bb13d2 100644 --- a/src/pages/Vaults/VaultsOverview/components/VaultsHeader/index.tsx +++ b/src/pages/Vaults/VaultsOverview/components/VaultsHeader/index.tsx @@ -1,6 +1,6 @@ import BoldParagraph from '@/legacy-components/BoldParagraph'; -import PageTitle from '@/parts/PageTitle'; -import TimerIncrement from '@/parts/TimerIncrement'; +import PageTitle from '@/legacy-components/PageTitle'; +import TimerIncrement from '@/legacy-components/TimerIncrement'; interface VaultsHeaderProps { title: string; diff --git a/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx b/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx index f4ca6df865..d3ba5bce58 100644 --- a/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx +++ b/src/pages/Vaults/VaultsOverview/utils/use-deposit-collateral.tsx @@ -3,9 +3,9 @@ import { MonetaryAmount } from '@interlay/monetary-js'; import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; type UseDepositCollateral = { collateral: { diff --git a/src/pages/Wallet/WalletOverview/WalletOverview.tsx b/src/pages/Wallet/WalletOverview/WalletOverview.tsx index d19cc7750f..df181e2468 100644 --- a/src/pages/Wallet/WalletOverview/WalletOverview.tsx +++ b/src/pages/Wallet/WalletOverview/WalletOverview.tsx @@ -1,16 +1,15 @@ -import { LoanPositionsTable, PoolsTable } from '@/components'; +import { LoanPositionsTable, MainContainer, PoolsTable } from '@/components'; +import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools'; +import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools'; +import { useGetAccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { useGetAccountVotingBalance } from '@/hooks/api/escrow/use-get-account-voting-balance'; +import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; +import { useGetLoanAssets } from '@/hooks/api/loans/use-get-loan-assets'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import useAccountId from '@/hooks/use-account-id'; +import { LocalStorageKey, useLocalStorage } from '@/hooks/use-local-storage'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; -import MainContainer from '@/parts/MainContainer'; import { getPooledTickers } from '@/utils/helpers/pools'; -import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; -import { useGetLiquidityPools } from '@/utils/hooks/api/amm/use-get-liquidity-pools'; -import { useGetAccountStakingData } from '@/utils/hooks/api/escrow/use-get-account-staking-data'; -import { useGetAccountVotingBalance } from '@/utils/hooks/api/escrow/use-get-account-voting-balance'; -import { useGetAccountPositions } from '@/utils/hooks/api/loans/use-get-account-positions'; -import { useGetLoanAssets } from '@/utils/hooks/api/loans/use-get-loan-assets'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import useAccountId from '@/utils/hooks/use-account-id'; -import { LocalStorageKey, useLocalStorage } from '@/utils/hooks/use-local-storage'; import { AvailableAssetsTable, StakingTable, WalletInsights, WelcomeBanner } from './components'; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index 75abbb43d2..7aec2bbd23 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -7,9 +7,9 @@ import { showBuyModal } from '@/common/actions/general.actions'; import { CTA, CTALink, CTAProps, Divider, Flex, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { usePageQueryParams } from '@/hooks/use-page-query-params'; import { PAGES, QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; -import { Transaction, useTransaction } from '@/utils/hooks/transaction'; -import { usePageQueryParams } from '@/utils/hooks/use-page-query-params'; type ActionsCellProps = { currency: CurrencyExt; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx index 659ae498c4..96a9548a34 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx @@ -9,13 +9,13 @@ import { Cell } from '@/components'; import { AssetCell, DataGrid } from '@/components/DataGrid'; import { INTERLAY_GET_ASSETS_LINK } from '@/config/links'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { BalanceData } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { useGetVestingData } from '@/hooks/api/use-get-vesting-data'; import { FEE_TICKERS } from '@/utils/constants/currency'; import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; -import { useGetVestingData } from '@/utils/hooks/api/use-get-vesting-data'; import { ActionsCell } from './ActionsCell'; @@ -73,7 +73,7 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP }) }} > - {t('wallet.get_asset', { token: currency.ticker })} + {t('wallet_page.get_asset', { token: currency.ticker })} ); @@ -146,10 +146,10 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP return ( {t('wallet.no_assets_available')}

} + placeholder={

{t('wallet_page.no_assets_available')}

} /> ); }; diff --git a/src/pages/Wallet/WalletOverview/components/StakingTable/StakingTable.tsx b/src/pages/Wallet/WalletOverview/components/StakingTable/StakingTable.tsx index d5fc3e645c..3a322ed852 100644 --- a/src/pages/Wallet/WalletOverview/components/StakingTable/StakingTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/StakingTable/StakingTable.tsx @@ -9,11 +9,11 @@ import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/uti import { CoinIcon, Flex } from '@/component-library'; import { Cell, Table } from '@/components'; import { GOVERNANCE_TOKEN, VOTE_GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { GetAccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { GetAccountStakingData } from '@/utils/hooks/api/escrow/use-get-account-staking-data'; -import { useGetBalances } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; enum StakingTableColumns { ASSET = 'asset', @@ -42,11 +42,14 @@ const StakingTable = ({ data, votingBalance }: StakingTableProps): JSX.Element = const { getAvailableBalance } = useGetBalances(); const columns = [ - { name: t('wallet.total_governance_locked', { token: GOVERNANCE_TOKEN.ticker }), uid: StakingTableColumns.ASSET }, + { + name: t('wallet_page.total_governance_locked', { token: GOVERNANCE_TOKEN.ticker }), + uid: StakingTableColumns.ASSET + }, { name: t('unlocks'), uid: StakingTableColumns.UNLOCKS }, - { name: t('wallet.available_to_stake'), uid: StakingTableColumns.AVAILABLE }, + { name: t('wallet_page.available_to_stake'), uid: StakingTableColumns.AVAILABLE }, { - name: t('wallet.voting_power_governance', { token: VOTE_GOVERNANCE_TOKEN.ticker }), + name: t('wallet_page.voting_power_governance', { token: VOTE_GOVERNANCE_TOKEN.ticker }), uid: StakingTableColumns.VOTING_POWER } ]; diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx index 1cba2783bf..bb76e0d23e 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletInsights.tsx @@ -4,11 +4,11 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatUSD } from '@/common/utils/utils'; import { Card, Dd, Dl, DlGroup, Dt, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; +import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools'; +import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; +import { BalanceData } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { useGetAccountPools } from '@/utils/hooks/api/amm/use-get-account-pools'; -import { useGetAccountLendingStatistics } from '@/utils/hooks/api/loans/use-get-account-lending-statistics'; -import { BalanceData } from '@/utils/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/utils/hooks/api/use-get-prices'; import { WalletMeta } from './WalletMeta'; diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletMeta.tsx b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletMeta.tsx index 3b79462324..bb469e5f6d 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletMeta.tsx +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/WalletMeta.tsx @@ -8,8 +8,8 @@ import { shortAddress } from '@/common/utils/utils'; import { CTA, CTALink, Dd, DlGroup, Dt, Flex, FlexProps, P, Tooltip, WalletIcon } from '@/component-library'; import { AuthCTA } from '@/components'; import { SUBSCAN_LINK } from '@/config/relay-chains'; +import { useCopyTooltip } from '@/hooks/use-copy-tooltip'; import { useSubstrateState } from '@/lib/substrate'; -import { useCopyTooltip } from '@/utils/hooks/use-copy-tooltip'; type WalletMetaProps = FlexProps; diff --git a/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts b/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts index cd523dd59d..68e0570d28 100644 --- a/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts +++ b/src/pages/Wallet/WalletOverview/components/WalletInsights/utils.ts @@ -1,8 +1,8 @@ import { CurrencyExt, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; +import { Prices } from '@/hooks/api/use-get-prices'; import { calculateTotalLiquidityUSD } from '@/utils/helpers/pool'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; const calculateClaimableFarmingRewardUSD = ( claimableRewards: Map[]> | undefined, diff --git a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx index 95293cd174..12b862c709 100644 --- a/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx +++ b/src/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.tsx @@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'; import { Flex } from '@/component-library'; import { INTERLAY_GET_ASSETS_LINK, INTERLAY_WHITEPAPPER } from '@/config/links'; import { APP_NAME, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { FeatureFlags, useFeatureFlag } from '@/hooks/use-feature-flag'; import { PAGES } from '@/utils/constants/links'; -import { FeatureFlags, useFeatureFlag } from '@/utils/hooks/use-feature-flag'; import { StyledCard, @@ -32,10 +32,10 @@ const WelcomeBanner = ({ onClose }: WelcomeBannerProps): JSX.Element => { - {t('wallet.welcome_to_dapp', { name: APP_NAME })} + {t('wallet_page.welcome_to_dapp', { name: APP_NAME })} - {t('wallet.dapp_is_a_one_stop_shop_for_bitcoin_defi', { + {t('wallet_page.dapp_is_a_one_stop_shop_for_bitcoin_defi', { name: APP_NAME, wrappedToken: WRAPPED_TOKEN.ticker })} diff --git a/src/parts/Layout/index.tsx b/src/parts/Layout/index.tsx deleted file mode 100644 index c529be0bb4..0000000000 --- a/src/parts/Layout/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import clsx from 'clsx'; - -import MaintenanceBanner from '@/parts/MaintenanceBanner'; -import Sidebar from '@/parts/Sidebar'; -import Topbar from '@/parts/Topbar'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -const Layout = ({ className, children }: Props): JSX.Element => { - return ( - -
- - - {children} -
- - ); -}; - -export default Layout; diff --git a/src/parts/MainContainer/index.tsx b/src/parts/MainContainer/index.tsx deleted file mode 100644 index ba804c9242..0000000000 --- a/src/parts/MainContainer/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import clsx from 'clsx'; - -const MainContainer = ({ className, ...rest }: React.ComponentPropsWithRef<'div'>): JSX.Element => ( -
-); - -export default MainContainer; diff --git a/src/parts/MaintenanceBanner/index.tsx b/src/parts/MaintenanceBanner/index.tsx deleted file mode 100644 index b713ef3fdd..0000000000 --- a/src/parts/MaintenanceBanner/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import clsx from 'clsx'; -import { useTranslation } from 'react-i18next'; - -import { formatDateTime } from '@/common/utils/utils'; -import InterlayLink from '@/legacy-components/UI/InterlayLink'; - -interface Message { - id: number; - startTime: Date; - endTime: Date; - type: string; - reason: string; - link: string; -} - -// TODO: make this easily modifiable by having a list of maintenance elements somewhere else -const MaintenanceBanner = (): JSX.Element | null => { - const { t } = useTranslation(); - const now = Date.now(); - - const maintenanceWindows: Array = [ - { - id: 1, - startTime: new Date(1616684400000), // Thu Mar 25 2021 15:00:00 GMT+0000 - endTime: new Date(1616698800000), // Thu Mar 25 2021 19:00:00 GMT+0000 - type: t('maintenance.type.scheduled'), - reason: t('maintenance.reason.chain'), - link: 'https://medium.com/interlay/polkabtc-beta-scheduled-maintenance-25-march-3pm-gmt-509b36f73479' - } - ]; - - const validItems = maintenanceWindows.filter((maintenanceWindow) => now < maintenanceWindow.endTime.getTime()); - - if (validItems.length <= 0) { - return null; - } - - return ( -
    - {validItems.map((item) => ( -
  • - - {`${item.type} ${formatDateTime(item.startTime)}: ${item.reason}`} -   - - {t('maintenance.info')} - - -
    • - ))} -
- ); -}; - -export default MaintenanceBanner; diff --git a/src/parts/Topbar/GetGovernanceTokenUI/index.tsx b/src/parts/Topbar/GetGovernanceTokenUI/index.tsx deleted file mode 100644 index e37aad3b50..0000000000 --- a/src/parts/Topbar/GetGovernanceTokenUI/index.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import clsx from 'clsx'; -import * as React from 'react'; -import { useTranslation } from 'react-i18next'; -import { useDispatch, useSelector } from 'react-redux'; - -import { ReactComponent as AcalaLogoIcon } from '@/assets/img/exchanges/acala-logo.svg'; -import { ReactComponent as GateLogoIcon } from '@/assets/img/exchanges/gate-logo.svg'; -import { ReactComponent as KrakenLogoIcon } from '@/assets/img/exchanges/kraken-logo.svg'; -import { ReactComponent as MexcLogoForInterlayIcon } from '@/assets/img/exchanges/mexc-logo-for-interlay.svg'; -import { ReactComponent as MexcLogoForKintsugiIcon } from '@/assets/img/exchanges/mexc-logo-for-kintsugi.svg'; -import { ReactComponent as StellaSwapLogoIcon } from '@/assets/img/exchanges/stellaswap-logo.svg'; -import { ReactComponent as ZenlinkLogoIcon } from '@/assets/img/exchanges/zenlink-logo.svg'; -import { showBuyModal } from '@/common/actions/general.actions'; -import { StoreType } from '@/common/types/util.types'; -import { CTA } from '@/component-library'; -import { GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; -import { Props as InterlayDefaultOutlinedButtonProps } from '@/legacy-components/buttons/InterlayDefaultContainedButton'; -import TitleWithUnderline from '@/legacy-components/TitleWithUnderline'; -import InterlayLink from '@/legacy-components/UI/InterlayLink'; -import InterlayModal, { InterlayModalInnerWrapper } from '@/legacy-components/UI/InterlayModal'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; -import { BORDER_CLASSES } from '@/utils/constants/styles'; - -let exchanges: Array<{ - link: string; - icon: React.ReactNode; -}>; - -if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) { - exchanges = [ - { - link: 'https://acala.network/', - icon: - }, - { - link: 'https://stellaswap.com/', - icon: - }, - { - link: 'https://trade.kraken.com/charts/KRAKEN:INTR-USD', - icon: - }, - { - link: 'https://www.gate.io/trade/INTR_USDT', - icon: - }, - { - link: 'https://www.mexc.com/exchange/INTR_USDT', - icon: - } - ]; -} else if (process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA) { - exchanges = [ - { - link: 'https://www.kraken.com/en-gb/prices/kint-kintsugi-price-chart/usd-us-dollar?interval=1m', - icon: - }, - { - link: 'https://www.gate.io/de/trade/kint_usdt', - icon: - }, - { - link: 'https://dex.zenlink.pro/#/swap', - icon: - }, - { - link: 'https://www.mexc.com/de-DE/exchange/KINT_USDT', - icon: - } - ]; -} else { - throw new Error('Something went wrong!'); -} - -interface ExchangeLinkProps { - href: string; - icon: React.ReactNode; -} - -const ExchangeLink = ({ href, icon }: ExchangeLinkProps) => { - return ( - - {icon} - - ); -}; - -// TODO: remove when banxa gets into interlay dapp -const GetGovernanceTokenUI = (props: InterlayDefaultOutlinedButtonProps): JSX.Element => { - const { isBuyModalOpen } = useSelector((state: StoreType) => state.general); - const focusRef = React.useRef(null); - const { t } = useTranslation(); - const dispatch = useDispatch(); - - const handleModalOpen = () => { - dispatch(showBuyModal(true)); - }; - const handleModalClose = () => { - dispatch(showBuyModal(false)); - }; - - const getGovernanceTokenLabel = t('get_governance_token', { - governanceTokenSymbol: GOVERNANCE_TOKEN_SYMBOL - }); - - const getGovernanceTokenDescriptionLabel = t('get_governance_token_description', { - governanceTokenSymbol: GOVERNANCE_TOKEN_SYMBOL - }); - - return ( - <> - - {getGovernanceTokenLabel} - - - - -
-

{getGovernanceTokenDescriptionLabel}

-
- {exchanges.map((item) => ( - - ))} -
-
- - - - ); -}; - -export default GetGovernanceTokenUI; diff --git a/src/parts/Wrapper/index.tsx b/src/parts/Wrapper/index.tsx deleted file mode 100644 index 8ff410f2d3..0000000000 --- a/src/parts/Wrapper/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { StyledWrapper } from './Wrapper.style'; - -interface Props { - className?: string; - children: React.ReactNode; -} - -const Wrapper = ({ className, children }: Props): JSX.Element => { - return {children}; -}; - -export default Wrapper; diff --git a/src/store.ts b/src/store.ts index 68a0f763a2..dfba5a1617 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,4 +1,4 @@ -import { FaucetClient, InterBtcApi } from '@interlay/interbtc-api'; +import { InterBtcApi } from '@interlay/interbtc-api'; import { createStore } from 'redux'; import { rootReducer } from './common/reducers/index'; @@ -6,7 +6,6 @@ import { rootReducer } from './common/reducers/index'; declare global { interface Window { bridge: InterBtcApi; - faucet: FaucetClient; isFetchingActive: boolean; } } diff --git a/src/test/mocks/@interlay/interbtc-api/extrinsic.ts b/src/test/mocks/@interlay/interbtc-api/extrinsic.ts new file mode 100644 index 0000000000..77cdc10588 --- /dev/null +++ b/src/test/mocks/@interlay/interbtc-api/extrinsic.ts @@ -0,0 +1,24 @@ +import { ExtrinsicData } from '@interlay/interbtc-api'; +import { SubmittableExtrinsic } from '@polkadot/api/types'; +import { ISubmittableResult } from '@polkadot/types/types'; + +const EXTRINSIC: SubmittableExtrinsic<'promise', ISubmittableResult> = ({ + signAsync: jest.fn().mockResolvedValue({ + send: jest.fn().mockImplementation(async (callback) => { + return new Promise((resolve) => { + resolve(jest.fn()); + + setTimeout(() => { + callback({ status: { isReady: true, isInBlock: true, isFinalized: true, type: 'Finalized' } }); + }, 1); + }); + }), + hadDryRun: false + }) +} as unknown) as SubmittableExtrinsic<'promise', ISubmittableResult>; + +const EXTRINSIC_DATA: ExtrinsicData = { + extrinsic: EXTRINSIC +}; + +export { EXTRINSIC, EXTRINSIC_DATA }; diff --git a/src/test/mocks/@interlay/interbtc-api/index.ts b/src/test/mocks/@interlay/interbtc-api/index.ts index 9560c2bccc..1a13b8bf07 100644 --- a/src/test/mocks/@interlay/interbtc-api/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/index.ts @@ -7,11 +7,12 @@ import { Signer } from '@polkadot/types/types'; import { MOCK_AMM, + MOCK_API, + MOCK_LOANS, MOCK_SYSTEM, + MOCK_TOKENS, MOCK_TRANSACTION, - mockApiCreateType, mockBtcRelayGetLatestBlockHeight, - mockChainType, mockElectrsAPIGetLatestBlockHeight, mockFeeGetIssueFee, mockFeeGetIssueGriefingCollateralRate, @@ -29,10 +30,6 @@ import { mockRedeemGetMaxBurnableTokens, mockRedeemGetPremiumRedeemFeeRate, mockRedeemRequest, - mockSystemChain, - mockTokensBalance, - mockTokensSubscribeToBalance, - mockTokensTotal, mockVaultsGet, mockVaultsGetPremiumRedeemVaults, mockVaultsGetVaultsWithIssuableTokens, @@ -40,25 +37,6 @@ import { } from './parachain'; import { mockGetForeignAssets } from './parachain/assetRegistry'; import { mockGetStakedBalance, mockVotingBalance } from './parachain/escrow'; -import { - mockBorrow, - mockClaimAllSubsidyRewards, - mockDisableAsCollateral, - mockEnableAsCollateral, - mockGetAccountSubsidyRewards, - mockGetBorrowPositionsOfAccount, - mockGetLendingStats, - mockGetLendPositionsOfAccount, - mockGetLendTokenExchangeRates, - mockGetLendTokens, - mockGetLoanAssets, - mockLend, - mockRepay, - mockRepayAll, - mockWithdraw, - mockWithdrawAll -} from './parachain/loans'; -import { mockClaimVesting, mockVestingSchedules } from './parachain/vesting'; const mockSetAccount = jest.fn((_account: AddressOrPair, _signer?: Signer) => undefined); @@ -68,31 +46,7 @@ const mockCollateralCurrencies = [Polkadot, Interlay]; const mockInterBtcApi: Partial> = { removeAccount: jest.fn(), setAccount: mockSetAccount, - api: { - createType: mockApiCreateType, - rpc: { - system: { - chain: mockSystemChain, - chainType: mockChainType - } - }, - on: jest.fn(), - query: { - vesting: { - vestingSchedules: mockVestingSchedules as any - }, - oracle: { - aggregate: { - keys: jest.fn().mockReturnValue([]) - } - } - }, - tx: { - vesting: { - claim: mockClaimVesting - } - } - }, + api: MOCK_API.PROMISE, assetRegistry: { getForeignAssets: mockGetForeignAssets }, @@ -111,24 +65,7 @@ const mockInterBtcApi: Partial> = { getRequestLimits: mockIssueGetRequestLimits, request: mockIssueRequest }, - loans: { - getLendTokens: mockGetLendTokens, - getLendPositionsOfAccount: mockGetLendPositionsOfAccount, - getBorrowPositionsOfAccount: mockGetBorrowPositionsOfAccount, - getLoanAssets: mockGetLoanAssets, - getAccruedRewardsOfAccount: mockGetAccountSubsidyRewards, - lend: mockLend, - withdraw: mockWithdraw, - withdrawAll: mockWithdrawAll, - borrow: mockBorrow, - repay: mockRepay, - repayAll: mockRepayAll, - enableAsCollateral: mockEnableAsCollateral, - disableAsCollateral: mockDisableAsCollateral, - claimAllSubsidyRewards: mockClaimAllSubsidyRewards, - getLendingStats: mockGetLendingStats, - getLendTokenExchangeRates: mockGetLendTokenExchangeRates - }, + loans: MOCK_LOANS.MODULE, oracle: { getExchangeRate: mockOracleGetExchangeRate }, @@ -143,11 +80,7 @@ const mockInterBtcApi: Partial> = { request: mockRedeemRequest }, system: MOCK_SYSTEM.MODULE, - tokens: { - balance: mockTokensBalance, - total: mockTokensTotal, - subscribeToBalance: mockTokensSubscribeToBalance - }, + tokens: MOCK_TOKENS.MODULE, vaults: { get: mockVaultsGet, getVaultsWithIssuableTokens: mockVaultsGetVaultsWithIssuableTokens, diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts b/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts index 68d70904c6..2c8421d882 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/amm.ts @@ -11,7 +11,7 @@ import Big from 'big.js'; import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; -import { DEFAULT_EXTRINSIC } from './extrinsic'; +import { EXTRINSIC_DATA } from '../extrinsic'; const LP_TOKEN_A_NAME = `LP ${GOVERNANCE_TOKEN.ticker}-${RELAY_CHAIN_NATIVE_TOKEN.ticker}`; @@ -154,10 +154,10 @@ const MODULE: Record> = { getLpTokens: jest.fn().mockResolvedValue(LP_TOKENS), getOptimalTrade: jest.fn().mockReturnValue(TRADE), // MUTATIONS - addLiquidity: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), - removeLiquidity: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), - claimFarmingRewards: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC), - swap: jest.fn().mockResolvedValue(DEFAULT_EXTRINSIC) + addLiquidity: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + removeLiquidity: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + claimFarmingRewards: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + swap: jest.fn().mockResolvedValue(EXTRINSIC_DATA) }; const MOCK_AMM = { diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/api.ts b/src/test/mocks/@interlay/interbtc-api/parachain/api.ts index c0475ac089..3381938359 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/api.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/api.ts @@ -1,14 +1,63 @@ +import { ApiPromise } from '@polkadot/api'; import { Text, TypeRegistry } from '@polkadot/types'; import { Registry } from '@polkadot/types/types'; +import Big from 'big.js'; -const mockApiCreateType = jest.fn((type: string, data: T) => data); +import { EXTRINSIC } from '../extrinsic'; -const mockRegistry = ({ chainDecimals: [], chainSS58: 0, chainTokens: [] } as unknown) as Registry; - -const mockSystemChain = jest.fn().mockReturnValue(new Text(mockRegistry, 'interBTC')) as any; +const REGISTRY = ({ chainDecimals: [], chainSS58: 0, chainTokens: [] } as unknown) as Registry; +const SYSTEM_CHAIN = new Text(REGISTRY, 'interBTC'); const registry = new TypeRegistry(); +const CHAIN_TYPE = registry.createType('ChainType', 'Live'); + +const VESTING_SCHEDULES = { + EMPTY: [], + FULL: [{ start: new Big(0), period: new Big(0), periodCount: new Big(1), perPeriod: new Big(1) }] +}; + +// add here data that is being used in tests +const DATA = { VESTING_SCHEDULES }; + +// add here mocks that are being manipulated in tests +const MODULE = { + vestingSchedules: jest.fn().mockReturnValue(VESTING_SCHEDULES.EMPTY), + claimVesting: jest.fn().mockReturnValue(EXTRINSIC) +}; -const mockChainType = jest.fn().mockReturnValue(registry.createType('ChainType', 'Live')) as any; +// maps module to ApiPromise +const PROMISE: Partial> = { + on: jest.fn(), + createType: jest.fn().mockImplementation((_, data) => data), + rpc: { + system: { + chain: jest.fn().mockReturnValue(SYSTEM_CHAIN), + chainType: jest.fn().mockReturnValue(CHAIN_TYPE) + } + }, + query: { + vesting: { + vestingSchedules: MODULE.vestingSchedules + }, + oracle: { + aggregate: { + keys: jest.fn().mockReturnValue([]) + } + } + }, + tx: { + vesting: { + claim: MODULE.claimVesting + }, + multiTransactionPayment: { + withFeeSwapPath: jest.fn().mockReturnValue(EXTRINSIC) + } + } +}; -export { mockApiCreateType, mockChainType, mockSystemChain }; +const MOCK_API = { + DATA, + MODULE, + PROMISE +}; +export { MOCK_API }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts b/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts deleted file mode 100644 index 158d18c6c5..0000000000 --- a/src/test/mocks/@interlay/interbtc-api/parachain/extrinsic.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { ExtrinsicData } from '@interlay/interbtc-api'; - -const DEFAULT_EXTRINSIC: ExtrinsicData = { - extrinsic: ({ - signAndSend: jest.fn().mockImplementation(async (_a, _b, cb) => { - return new Promise((resolve) => { - resolve(jest.fn()); - - setTimeout(() => { - cb({ status: { isReady: true, isInBlock: true, isFinalized: true, type: 'Finalized' } }); - }, 1); - }); - }) - } as unknown) as ExtrinsicData['extrinsic'] -}; - -export { DEFAULT_EXTRINSIC }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts index e34900a823..946802c646 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts @@ -4,6 +4,7 @@ export * from './btcRelay'; export * from './electrsAPI'; export * from './fee'; export * from './issue'; +export * from './loans'; export * from './oracle'; export * from './redeem'; export * from './system'; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts b/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts index 92b5968d2d..366f157868 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/loans.ts @@ -1,218 +1,358 @@ -import { - BorrowPosition, - CollateralPosition, - CurrencyExt, - LendingStats, - LoanAsset, - newMonetaryAmount, - TickerToData -} from '@interlay/interbtc-api'; +import { LoansAPI, newMonetaryAmount, TickerToData } from '@interlay/interbtc-api'; import { Bitcoin, ExchangeRate } from '@interlay/monetary-js'; import Big from 'big.js'; import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { AccruedRewards, BorrowPosition, CollateralPosition, LendingStats, LoanAsset } from '@/types/loans'; -const DEFAULT_LEND_TOKENS: CurrencyExt[] = []; - -const DEFAULT_IBTC = { - AMOUNT: { VERY_SMALL: '0.01', SMALL: '0.1', MEDIUM: '1', LARGE: '10', VERY_LARGE: '100' }, - MONETARY: { - EMPTY: newMonetaryAmount(0, WRAPPED_TOKEN, true), - VERY_SMALL: newMonetaryAmount(0.01, WRAPPED_TOKEN, true), - SMALL: newMonetaryAmount(0.1, WRAPPED_TOKEN, true), - MEDIUM: newMonetaryAmount(1, WRAPPED_TOKEN, true), - LARGE: newMonetaryAmount(10, WRAPPED_TOKEN, true), - VERY_LARGE: newMonetaryAmount(100, WRAPPED_TOKEN, true) +import { EXTRINSIC_DATA } from '../extrinsic'; + +const WRAPPED_LOAN_AMOUNT = { + EMPTY: { + VALUE: '0', + MONETARY: newMonetaryAmount(0, WRAPPED_TOKEN, true) + }, + VERY_SMALL: { + VALUE: '0.0001', + MONETARY: newMonetaryAmount(0.0001, WRAPPED_TOKEN, true) + }, + SMALL: { + VALUE: '0.001', + MONETARY: newMonetaryAmount(0.001, WRAPPED_TOKEN, true) + }, + MEDIUM: { + VALUE: '0.1', + MONETARY: newMonetaryAmount(0.1, WRAPPED_TOKEN, true) + }, + LARGE: { + VALUE: '1', + MONETARY: newMonetaryAmount(1, WRAPPED_TOKEN, true) + }, + VERY_LARGE: { + VALUE: '10', + MONETARY: newMonetaryAmount(10, WRAPPED_TOKEN, true) } }; -const DEFAULT_INTR = { - AMOUNT: { VERY_SMALL: '10', SMALL: '100', MEDIUM: '1000', LARGE: '10000', VERY_LARGE: '100000' }, - MONETARY: { - EMPTY: newMonetaryAmount(0, GOVERNANCE_TOKEN, true), - VERY_SMALL: newMonetaryAmount(10, GOVERNANCE_TOKEN, true), - SMALL: newMonetaryAmount(100, GOVERNANCE_TOKEN, true), - MEDIUM: newMonetaryAmount(1000, GOVERNANCE_TOKEN, true), - LARGE: newMonetaryAmount(10000, GOVERNANCE_TOKEN, true), - VERY_LARGE: newMonetaryAmount(100000, GOVERNANCE_TOKEN, true) +const WRAPPED_LOAN_LEND: Record<'NON_COLLATERAL' | 'COLLATERAL' | 'VAULT_COLLATERAL', CollateralPosition> = { + NON_COLLATERAL: { + amount: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + isCollateral: false, + vaultCollateralAmount: WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY + }, + COLLATERAL: { + amount: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + isCollateral: true, + vaultCollateralAmount: WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY + }, + VAULT_COLLATERAL: { + amount: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + isCollateral: false, + vaultCollateralAmount: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY } }; -const DEFAULT_APY = { - IBTC: { - BASE: '10.20', - LEND: '10.48', - BORROW: '9.92' +const WRAPPED_LOAN_BORROW: BorrowPosition = { + amount: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + accumulatedDebt: WRAPPED_LOAN_AMOUNT.VERY_SMALL.MONETARY +}; + +const WRAPPED_APY = { + BASE: '10.20', + LEND: '10.48', + BORROW: '9.92' +}; + +const GOVERNANCE_LOAN_AMOUNT = { + EMPTY: { + VALUE: '0', + MONETARY: newMonetaryAmount(0, GOVERNANCE_TOKEN, true) + }, + VERY_SMALL: { + VALUE: '1', + MONETARY: newMonetaryAmount(1, GOVERNANCE_TOKEN, true) + }, + SMALL: { + VALUE: '10', + MONETARY: newMonetaryAmount(10, GOVERNANCE_TOKEN, true) + }, + MEDIUM: { + VALUE: '1000', + MONETARY: newMonetaryAmount(1000, GOVERNANCE_TOKEN, true) }, - INTR: { - BASE: '10.20', - LEND: '10.20', - BORROW: '10.20' + LARGE: { + VALUE: '10000', + MONETARY: newMonetaryAmount(10000, GOVERNANCE_TOKEN, true) + }, + VERY_LARGE: { + VALUE: '1000000', + MONETARY: newMonetaryAmount(1000000, GOVERNANCE_TOKEN, true) } }; -const DEFAULT_POSITIONS = { - LEND: { - IBTC: { - currency: WRAPPED_TOKEN, - amount: DEFAULT_IBTC.MONETARY.MEDIUM, - isCollateral: true, - earnedInterest: DEFAULT_IBTC.MONETARY.VERY_SMALL, - vaultCollateralAmount: DEFAULT_IBTC.MONETARY.EMPTY - } as CollateralPosition, - INTR: { - currency: GOVERNANCE_TOKEN, - amount: DEFAULT_INTR.MONETARY.MEDIUM, - isCollateral: true, - earnedInterest: DEFAULT_INTR.MONETARY.SMALL, - vaultCollateralAmount: DEFAULT_INTR.MONETARY.EMPTY - } as CollateralPosition +const GOVERNANCE_LOAN_LEND: Record<'NON_COLLATERAL' | 'COLLATERAL', CollateralPosition> = { + NON_COLLATERAL: { + amount: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + isCollateral: false, + vaultCollateralAmount: newMonetaryAmount(0, GOVERNANCE_TOKEN) }, - BORROW: { - IBTC: { - currency: WRAPPED_TOKEN, - amount: DEFAULT_IBTC.MONETARY.SMALL, - accumulatedDebt: DEFAULT_IBTC.MONETARY.VERY_SMALL - }, - INTR: { - currency: GOVERNANCE_TOKEN, - amount: DEFAULT_INTR.MONETARY.MEDIUM, - accumulatedDebt: DEFAULT_INTR.MONETARY.SMALL - } + COLLATERAL: { + amount: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + isCollateral: true, + vaultCollateralAmount: newMonetaryAmount(0, GOVERNANCE_TOKEN) } }; -const DEFAULT_LEND_POSITIONS: CollateralPosition[] = [DEFAULT_POSITIONS.LEND.IBTC]; +const GOVERNANCE_LOAN_BORROW: BorrowPosition = { + amount: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + accumulatedDebt: GOVERNANCE_LOAN_AMOUNT.VERY_SMALL.MONETARY +}; + +const GOVERNANCE_APY = { + BASE: '10.20', + LEND: '10.20', + BORROW: '10.20' +}; -const DEFAULT_BORROW_POSITIONS: BorrowPosition[] = [DEFAULT_POSITIONS.BORROW.IBTC]; +const THRESHOLD = { + MIN: new Big(0), + LOW: new Big(0.25), + MEDIUM: new Big(0.5), + HIGH: new Big(0.75), + MAX: new Big(1) +}; -const DEFAULT_IBTC_LOAN_ASSET: LoanAsset = { +const WRAPPED_ASSET: LoanAsset = { currency: WRAPPED_TOKEN, - lendApy: new Big(DEFAULT_APY.IBTC.BASE), - borrowApy: new Big(DEFAULT_APY.IBTC.BASE), - totalLiquidity: DEFAULT_IBTC.MONETARY.VERY_LARGE, - lendReward: DEFAULT_INTR.MONETARY.VERY_LARGE, - borrowReward: DEFAULT_INTR.MONETARY.VERY_LARGE, - availableCapacity: DEFAULT_IBTC.MONETARY.VERY_LARGE, - collateralThreshold: new Big(0.6), - liquidationThreshold: new Big(0.8), + lendApy: new Big(WRAPPED_APY.BASE), + borrowApy: new Big(WRAPPED_APY.BASE), + totalLiquidity: WRAPPED_LOAN_AMOUNT.VERY_LARGE.MONETARY, + lendReward: GOVERNANCE_LOAN_AMOUNT.VERY_LARGE.MONETARY, + borrowReward: GOVERNANCE_LOAN_AMOUNT.VERY_LARGE.MONETARY, + availableCapacity: WRAPPED_LOAN_AMOUNT.VERY_LARGE.MONETARY, + collateralThreshold: THRESHOLD.MEDIUM, + liquidationThreshold: THRESHOLD.HIGH, isActive: true, - totalBorrows: DEFAULT_IBTC.MONETARY.MEDIUM, - borrowCap: DEFAULT_IBTC.MONETARY.VERY_LARGE, - supplyCap: DEFAULT_IBTC.MONETARY.VERY_LARGE, - exchangeRate: new ExchangeRate(Bitcoin, WRAPPED_TOKEN, DEFAULT_IBTC.MONETARY.MEDIUM.toBig()) + totalBorrows: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + borrowCap: WRAPPED_LOAN_AMOUNT.VERY_LARGE.MONETARY, + supplyCap: WRAPPED_LOAN_AMOUNT.VERY_LARGE.MONETARY, + exchangeRate: new ExchangeRate(Bitcoin, WRAPPED_TOKEN, WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY.toBig()) }; -const DEFAULT_INTR_LOAN_ASSET: LoanAsset = { +const WRAPPED_LOAN = { + AMOUNT: WRAPPED_LOAN_AMOUNT, + POSITIONS: { + LEND: WRAPPED_LOAN_LEND, + BORROW: WRAPPED_LOAN_BORROW + }, + APY: WRAPPED_APY, + ASSET: WRAPPED_ASSET +}; + +const GOVERNANCE_ASSET: LoanAsset = { currency: GOVERNANCE_TOKEN, - lendApy: new Big(DEFAULT_APY.INTR.BASE), - borrowApy: new Big(DEFAULT_APY.INTR.BASE), - totalLiquidity: DEFAULT_INTR.MONETARY.VERY_SMALL, + lendApy: new Big(GOVERNANCE_APY.BASE), + borrowApy: new Big(GOVERNANCE_APY.BASE), + totalLiquidity: GOVERNANCE_LOAN_AMOUNT.VERY_SMALL.MONETARY, lendReward: null, borrowReward: null, - availableCapacity: DEFAULT_INTR.MONETARY.VERY_SMALL, - collateralThreshold: new Big(0.6), - liquidationThreshold: new Big(0.8), + availableCapacity: GOVERNANCE_LOAN_AMOUNT.VERY_SMALL.MONETARY, + collateralThreshold: THRESHOLD.MEDIUM, + liquidationThreshold: THRESHOLD.HIGH, isActive: true, - totalBorrows: DEFAULT_INTR.MONETARY.MEDIUM, - borrowCap: DEFAULT_INTR.MONETARY.VERY_LARGE, - supplyCap: DEFAULT_INTR.MONETARY.VERY_LARGE, - exchangeRate: new ExchangeRate(Bitcoin, GOVERNANCE_TOKEN, DEFAULT_IBTC.MONETARY.MEDIUM.toBig()) -}; - -const DEFAULT_ASSETS: TickerToData = { - IBTC: DEFAULT_IBTC_LOAN_ASSET, - INTR: DEFAULT_INTR_LOAN_ASSET -}; - -const mockGetLendPositionsOfAccount = jest.fn().mockReturnValue(DEFAULT_LEND_POSITIONS); -const mockGetBorrowPositionsOfAccount = jest.fn().mockReturnValue(DEFAULT_BORROW_POSITIONS); -const mockGetLoanAssets = jest.fn().mockReturnValue(DEFAULT_ASSETS); -const mockGetAccountSubsidyRewards = jest.fn().mockReturnValue({ - total: DEFAULT_INTR.MONETARY.MEDIUM, - perMarket: { - INTR: null, - IBTC: null, - DOT: null + totalBorrows: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + borrowCap: GOVERNANCE_LOAN_AMOUNT.VERY_LARGE.MONETARY, + supplyCap: GOVERNANCE_LOAN_AMOUNT.VERY_LARGE.MONETARY, + exchangeRate: new ExchangeRate(Bitcoin, GOVERNANCE_TOKEN, WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY.toBig()) +}; + +const GOVERNANCE_LOAN = { + AMOUNT: GOVERNANCE_LOAN_AMOUNT, + POSITIONS: { + LEND: GOVERNANCE_LOAN_LEND, + BORROW: GOVERNANCE_LOAN_BORROW + }, + APY: GOVERNANCE_APY, + ASSET: GOVERNANCE_ASSET +}; + +const LOAN_POSITIONS = { + LEND: { + EMPTY: [], + AVERAGE: [WRAPPED_LOAN.POSITIONS.LEND.NON_COLLATERAL], + AVERAGE_COLLATERAL: [WRAPPED_LOAN.POSITIONS.LEND.COLLATERAL], + FULL: [WRAPPED_LOAN.POSITIONS.LEND.NON_COLLATERAL, GOVERNANCE_LOAN.POSITIONS.LEND.NON_COLLATERAL], + FULL_COLLATERAL: [WRAPPED_LOAN.POSITIONS.LEND.COLLATERAL, GOVERNANCE_LOAN.POSITIONS.LEND.COLLATERAL], + FULL_VAULT_COLLATERAL: [WRAPPED_LOAN.POSITIONS.LEND.VAULT_COLLATERAL] + }, + BORROW: { + EMPTY: [], + AVERAGE: [WRAPPED_LOAN.POSITIONS.BORROW], + FULL: [WRAPPED_LOAN.POSITIONS.BORROW, GOVERNANCE_LOAN.POSITIONS.BORROW] } -}); +}; -const mockGetLendTokenExchangeRates = jest.fn(); +const ASSETS: Record<'NORMAL' | 'EMPTY_CAPACITY' | 'OVER_BORROWED' | 'INACTIVE', TickerToData> = { + NORMAL: { + [WRAPPED_ASSET.currency.ticker]: WRAPPED_ASSET, + [GOVERNANCE_ASSET.currency.ticker]: GOVERNANCE_ASSET + }, + EMPTY_CAPACITY: { + [WRAPPED_ASSET.currency.ticker]: { + ...WRAPPED_ASSET, + supplyCap: WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY, + availableCapacity: WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY + }, + [GOVERNANCE_ASSET.currency.ticker]: { + ...GOVERNANCE_ASSET, + supplyCap: GOVERNANCE_LOAN_AMOUNT.EMPTY.MONETARY, + availableCapacity: GOVERNANCE_LOAN_AMOUNT.EMPTY.MONETARY + } + }, + OVER_BORROWED: { + [WRAPPED_ASSET.currency.ticker]: { + ...WRAPPED_ASSET, + borrowCap: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY, + totalBorrows: WRAPPED_LOAN_AMOUNT.MEDIUM.MONETARY + }, + [GOVERNANCE_ASSET.currency.ticker]: { + ...GOVERNANCE_ASSET, + borrowCap: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + totalBorrows: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY + } + }, + INACTIVE: { + [WRAPPED_ASSET.currency.ticker]: { ...WRAPPED_ASSET, isActive: false }, + [GOVERNANCE_ASSET.currency.ticker]: { ...GOVERNANCE_ASSET, isActive: false } + } +}; -const mockLend = jest.fn(); -const mockWithdraw = jest.fn(); -const mockWithdrawAll = jest.fn(); -const mockBorrow = jest.fn(); -const mockRepay = jest.fn(); -const mockRepayAll = jest.fn(); +const COMMON_THRESHOLDS = { + collateralThresholdWeightedAverage: THRESHOLD.MEDIUM, + liquidationThresholdWeightedAverage: THRESHOLD.HIGH +}; -const mockEnableAsCollateral = jest.fn(); -const mockDisableAsCollateral = jest.fn(); +const LTV_THRESHOLD: Record<'MIN' | 'MEDIUM' | 'HIGH', ReturnType> = { + MIN: { + ...COMMON_THRESHOLDS, + ltv: THRESHOLD.LOW + }, + MEDIUM: { + ...COMMON_THRESHOLDS, + ltv: THRESHOLD.MEDIUM + }, + HIGH: { + ...COMMON_THRESHOLDS, + ltv: THRESHOLD.HIGH + } +}; -const mockClaimAllSubsidyRewards = jest.fn(); +const COMMON_STATS: Omit = { + collateralThresholdWeightedAverage: THRESHOLD.MEDIUM, + liquidationThresholdWeightedAverage: THRESHOLD.HIGH, + totalLentBtc: WRAPPED_LOAN_AMOUNT.LARGE.MONETARY, + borrowLimitBtc: WRAPPED_LOAN_AMOUNT.LARGE.MONETARY, + totalBorrowedBtc: WRAPPED_LOAN_AMOUNT.VERY_SMALL.MONETARY, + totalCollateralBtc: WRAPPED_LOAN_AMOUNT.LARGE.MONETARY, + calculateLtvAndThresholdsChange: jest.fn().mockReturnValue(LTV_THRESHOLD.MIN), + calculateBorrowLimitBtcChange: jest.fn().mockReturnValue(WRAPPED_LOAN_AMOUNT.LARGE.MONETARY) +}; -const mockGetLendTokens = jest.fn(() => DEFAULT_LEND_TOKENS); +const LENDING_STATS: Record< + 'LOW_LTV' | 'MEDIUM_LTV' | 'HIGH_LTV' | 'LOW_BORROW_LIMIT' | 'MIN_BORROW_LIMIT' | 'LIQUIDATION', + LendingStats +> = { + LOW_LTV: { + ...COMMON_STATS, + ltv: THRESHOLD.MIN + }, + MEDIUM_LTV: { + ...COMMON_STATS, + ltv: THRESHOLD.MEDIUM + }, + HIGH_LTV: { + ...COMMON_STATS, + ltv: THRESHOLD.HIGH + }, + LOW_BORROW_LIMIT: { + ...COMMON_STATS, + ltv: THRESHOLD.MEDIUM, + borrowLimitBtc: WRAPPED_LOAN_AMOUNT.VERY_SMALL.MONETARY, + calculateBorrowLimitBtcChange: jest.fn().mockReturnValue(WRAPPED_LOAN_AMOUNT.VERY_SMALL.MONETARY) + }, + MIN_BORROW_LIMIT: { + ...COMMON_STATS, + ltv: THRESHOLD.MEDIUM, + borrowLimitBtc: WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY, + calculateBorrowLimitBtcChange: jest.fn().mockReturnValue(WRAPPED_LOAN_AMOUNT.EMPTY.MONETARY) + }, + LIQUIDATION: { + ...COMMON_STATS, + ltv: THRESHOLD.LOW, + calculateLtvAndThresholdsChange: jest.fn().mockReturnValue(LTV_THRESHOLD.HIGH) + } +}; -const DEFAULT_THRESOLD = { - MIN: new Big(0), - LOW: new Big(0.25), - MEDIUM: new Big(0.5), - HIGH: new Big(0.75), - MAX: new Big(1) +const ACCOUNT_REWARDS: Record<'EMPTY' | 'FULL', AccruedRewards> = { + EMPTY: { + perMarket: { + [WRAPPED_ASSET.currency.ticker]: { lend: null, borrow: null }, + [GOVERNANCE_ASSET.currency.ticker]: { lend: null, borrow: null } + }, + total: GOVERNANCE_LOAN_AMOUNT.EMPTY.MONETARY + }, + FULL: { + perMarket: { + [WRAPPED_ASSET.currency.ticker]: { + lend: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + borrow: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY + }, + [GOVERNANCE_ASSET.currency.ticker]: { + lend: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY, + borrow: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY + } + }, + total: GOVERNANCE_LOAN_AMOUNT.MEDIUM.MONETARY + } +}; + +const DATA = { + ASSETS, + LOAN_POSITIONS, + WRAPPED_LOAN, + GOVERNANCE_LOAN, + LENDING_STATS, + ACCOUNT_REWARDS +}; + +const MODULE: Record> = { + getAccruedRewardsOfAccount: jest.fn().mockResolvedValue(ACCOUNT_REWARDS.EMPTY), + getBorrowerAccountIds: jest.fn(), + getBorrowPositionsOfAccount: jest.fn().mockResolvedValue(LOAN_POSITIONS.BORROW.EMPTY), + getLendingStats: jest.fn().mockReturnValue(LENDING_STATS.LOW_LTV), + getLendPositionsOfAccount: jest.fn().mockResolvedValue(LOAN_POSITIONS.LEND.EMPTY), + getLendTokenExchangeRates: jest.fn(), + getLendTokens: jest.fn().mockResolvedValue([]), + getLiquidationThresholdLiquidity: jest.fn(), + getLoanAssets: jest.fn().mockResolvedValue(ASSETS.NORMAL), + getLoansMarkets: jest.fn(), + getUndercollateralizedBorrowers: jest.fn(), + // MUTATIONS + lend: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + borrow: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + withdraw: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + withdrawAll: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + repayAll: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + repay: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + claimAllSubsidyRewards: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + disableAsCollateral: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + enableAsCollateral: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + liquidateBorrowPosition: jest.fn().mockResolvedValue(EXTRINSIC_DATA) +}; + +const MOCK_LOANS = { + DATA, + MODULE }; -const DEFAULT_CALCULATE_BORROW_LIMIT = { - ltv: DEFAULT_THRESOLD.LOW, - collateralThresholdWeightedAverage: DEFAULT_THRESOLD.MEDIUM, - liquidationThresholdWeightedAverage: DEFAULT_THRESOLD.HIGH -}; - -const mockCalculateLtvAndThresholdsChange = jest.fn().mockReturnValue(DEFAULT_CALCULATE_BORROW_LIMIT); - -const mockCalculateBorrowLimitBtcChange = jest.fn().mockReturnValue(DEFAULT_IBTC.MONETARY.LARGE); - -const DEFAULT_LENDING_STATS: LendingStats = { - borrowLimitBtc: DEFAULT_IBTC.MONETARY.LARGE, - calculateBorrowLimitBtcChange: mockCalculateBorrowLimitBtcChange, - calculateLtvAndThresholdsChange: mockCalculateLtvAndThresholdsChange, - collateralThresholdWeightedAverage: new Big(0.5), - liquidationThresholdWeightedAverage: new Big(0.75), - ltv: new Big(0.2), - totalBorrowedBtc: DEFAULT_IBTC.MONETARY.VERY_SMALL, - totalCollateralBtc: DEFAULT_IBTC.MONETARY.LARGE, - totalLentBtc: DEFAULT_IBTC.MONETARY.LARGE -}; - -const mockGetLendingStats = jest.fn().mockReturnValue(DEFAULT_LENDING_STATS); - -export { - DEFAULT_APY, - DEFAULT_ASSETS, - DEFAULT_BORROW_POSITIONS, - DEFAULT_CALCULATE_BORROW_LIMIT, - DEFAULT_IBTC, - DEFAULT_IBTC_LOAN_ASSET, - DEFAULT_INTR_LOAN_ASSET, - DEFAULT_LEND_POSITIONS, - DEFAULT_LENDING_STATS, - DEFAULT_POSITIONS, - DEFAULT_THRESOLD, - mockBorrow, - mockCalculateBorrowLimitBtcChange, - mockCalculateLtvAndThresholdsChange, - mockClaimAllSubsidyRewards, - mockDisableAsCollateral, - mockEnableAsCollateral, - mockGetAccountSubsidyRewards, - mockGetBorrowPositionsOfAccount, - mockGetLendingStats, - mockGetLendPositionsOfAccount, - mockGetLendTokenExchangeRates, - mockGetLoanAssets, - mockLend, - mockRepay, - mockRepayAll, - mockWithdraw, - mockWithdrawAll -}; -export { mockGetLendTokens }; +export { MOCK_LOANS }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/tokens.ts b/src/test/mocks/@interlay/interbtc-api/parachain/tokens.ts index 48b990a67a..34d7574226 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/tokens.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/tokens.ts @@ -1,33 +1,49 @@ -import { ChainBalance, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { AccountId } from '@polkadot/types/interfaces'; -import Big from 'big.js'; - -const MOCK_TOKEN_BALANCE = '1000000000000'; -const MOCK_TOKEN_TOTAL_AMOUNT = '10000000000000000000000'; - -const DEFAULT_TOKENS_BALANCE_FN = (currency: CurrencyExt, _id: AccountId): ChainBalance => - new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE); - -const EMPTY_TOKENS_BALANCE_FN = (currency: CurrencyExt, _id: AccountId): ChainBalance => - new ChainBalance(currency, new Big(0), new Big(0)); - -const mockTokensBalance = jest.fn().mockImplementation(DEFAULT_TOKENS_BALANCE_FN); +import { ChainBalance, CurrencyExt, newMonetaryAmount, TokensAPI } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; + +import { EXTRINSIC_DATA } from '../extrinsic'; + +const BALANCE_VALUE = 1000000000000; + +const BALANCE_FN = { + EMPTY: (currency: CurrencyExt): ChainBalance => new ChainBalance(currency, 0, 0, 0), + CUSTOM: (amount: MonetaryAmount) => (currency: CurrencyExt): ChainBalance => + new ChainBalance( + currency, + amount._rawAmount.toString(), + amount._rawAmount.toString(), + amount._rawAmount.toString() + ), + FULL: (currency: CurrencyExt): ChainBalance => new ChainBalance(currency, BALANCE_VALUE, BALANCE_VALUE, BALANCE_VALUE) +}; -const mockTokensTotal = jest.fn(async (currency: CurrencyExt) => newMonetaryAmount(MOCK_TOKEN_TOTAL_AMOUNT, currency)); +const TOTAL_VALUE = 10000000000000000000000; -const mockTokensSubscribeToBalance = jest.fn((currency: CurrencyExt, account, callback) => { - const balance = new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE); - callback(account, balance); +const TOTAL_FN = { + EMPTY: (currency: CurrencyExt): MonetaryAmount => newMonetaryAmount(0, currency), + FULL: (currency: CurrencyExt): MonetaryAmount => newMonetaryAmount(TOTAL_VALUE, currency) +}; - return () => undefined; -}); +const DATA = { BALANCE_FN, TOTAL_FN }; + +const MODULE: Record> = { + balance: jest.fn().mockImplementation(BALANCE_FN.FULL), + total: jest.fn().mockImplementation(TOTAL_FN.FULL), + // MUTATIONS + buildTransferExtrinsic: jest.fn(), + transfer: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + setBalance: jest.fn().mockResolvedValue(EXTRINSIC_DATA), + subscribeToBalance: jest.fn().mockImplementation((currency: CurrencyExt, account, callback) => { + const balance = new ChainBalance(currency, BALANCE_VALUE, BALANCE_VALUE); + callback(account, balance); + + return () => undefined; + }) +}; -export { - DEFAULT_TOKENS_BALANCE_FN, - EMPTY_TOKENS_BALANCE_FN, - MOCK_TOKEN_BALANCE, - MOCK_TOKEN_TOTAL_AMOUNT, - mockTokensBalance, - mockTokensSubscribeToBalance, - mockTokensTotal +const MOCK_TOKENS = { + DATA, + MODULE }; + +export { MOCK_TOKENS }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/vesting.ts b/src/test/mocks/@interlay/interbtc-api/parachain/vesting.ts deleted file mode 100644 index 8725706d9d..0000000000 --- a/src/test/mocks/@interlay/interbtc-api/parachain/vesting.ts +++ /dev/null @@ -1,9 +0,0 @@ -const SOME_VESTING_SCHEDULES = [{ start: 0, period: 0, periodCount: 1, perPeriod: 1 }]; - -const EMPTY_VESTING_SCHEDULES: any[] = []; - -const mockVestingSchedules = jest.fn().mockReturnValue(EMPTY_VESTING_SCHEDULES); - -const mockClaimVesting = jest.fn(); - -export { EMPTY_VESTING_SCHEDULES, mockClaimVesting, mockVestingSchedules, SOME_VESTING_SCHEDULES }; diff --git a/src/test/mocks/fetch/index.ts b/src/test/mocks/fetch/index.ts index 986d5f2583..d64cf944c7 100644 --- a/src/test/mocks/fetch/index.ts +++ b/src/test/mocks/fetch/index.ts @@ -4,7 +4,6 @@ import { RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; import { SIGNER_API_URL } from '@/constants'; import { issuesQuery } from '@/services/queries/issues'; import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query'; -import { PRICES_API } from '@/utils/constants/api'; import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; import { DEFAULT_ACCOUNT_1 } from '../substrate/mocks'; @@ -18,23 +17,11 @@ if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) { throw new Error('Something went wrong!'); } -const MOCK_TOKEN_PRICES = { - bitcoin: { usd: 20306 }, - polkadot: { usd: 7.19 }, - 'kintsugi-btc': { usd: 20128 }, - kusama: { usd: 48.74 }, - interlay: { usd: mockGovernanceTokenPriceInUsd }, - kintsugi: { usd: mockGovernanceTokenPriceInUsd } -}; - // Can mock all fetch calls here based on URL and input. // This function can be also changed inside the test. const mockFetch = jest.fn((input, _init?) => { let result: unknown; switch (true) { - case input.includes(PRICES_API.URL): - result = MOCK_TOKEN_PRICES; - break; case input.includes(SIGNER_API_URL): result = { exists: true @@ -116,4 +103,4 @@ const mockFetch = jest.fn((input, _init?) => { // TODO: need to mock with `msw` global.fetch = mockFetch as any; -export { MOCK_TOKEN_PRICES, mockFetch, mockGovernanceTokenPriceInUsd }; +export { mockFetch, mockGovernanceTokenPriceInUsd }; diff --git a/src/test/mocks/hooks/index.ts b/src/test/mocks/hooks/index.ts index 0fc4362450..5c90a56655 100644 --- a/src/test/mocks/hooks/index.ts +++ b/src/test/mocks/hooks/index.ts @@ -1,13 +1,14 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { WRAPPED_TOKEN } from '@/config/relay-chains'; +import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; const mockGetDexVolumeByTicker = jest.fn().mockReturnValue({ amount: newMonetaryAmount(0, WRAPPED_TOKEN), usd: 0 }); const mockgetDexTotalVolumeUSD = jest.fn().mockReturnValue(0); -jest.mock('@/utils/hooks/api/use-get-dex-volume', () => ({ - ...jest.requireActual('@/utils/hooks/api/use-get-dex-volume'), +jest.mock('@/hooks/api/use-get-dex-volume', () => ({ + ...jest.requireActual('@/hooks/api/use-get-dex-volume'), useGetDexVolumes: jest.fn().mockReturnValue({ data: {}, getDexVolumeByTicker: mockGetDexVolumeByTicker, @@ -15,12 +16,42 @@ jest.mock('@/utils/hooks/api/use-get-dex-volume', () => ({ }) })); -jest.mock('@/utils/hooks/api/use-get-pools-trading-apr', () => ({ - ...jest.requireActual('@/utils/hooks/api/use-get-pools-trading-apr'), +jest.mock('@/hooks/api/use-get-pools-trading-apr', () => ({ + ...jest.requireActual('@/hooks/api/use-get-pools-trading-apr'), useGetPoolsTradingApr: jest.fn().mockReturnValue({ isLoading: false, getTradingAprOfPool: jest.fn().mockReturnValue(2) }) })); +const mockPrices = { + BTC: { usd: 20306 }, + [RELAY_CHAIN_NATIVE_TOKEN.ticker]: { usd: 7.19 }, + [WRAPPED_TOKEN.ticker]: { usd: 20306 }, + [GOVERNANCE_TOKEN.ticker]: { usd: 0.057282 } +}; +jest.mock('@/hooks/api/use-get-prices', () => ({ + ...jest.requireActual('@/hooks/api/use-get-pools-trading-apr'), + useGetPrices: jest.fn().mockReturnValue(mockPrices) +})); + +const mockGetPositionEarnings = jest + .fn() + .mockImplementation((ticker: string) => + newMonetaryAmount(0, NATIVE_CURRENCIES.find((t) => t.ticker === ticker) as CurrencyExt) + ); +const mockPositionsEarnings = { + [RELAY_CHAIN_NATIVE_TOKEN.ticker]: newMonetaryAmount(0, RELAY_CHAIN_NATIVE_TOKEN), + [WRAPPED_TOKEN.ticker]: newMonetaryAmount(0, RELAY_CHAIN_NATIVE_TOKEN), + [GOVERNANCE_TOKEN.ticker]: newMonetaryAmount(0, RELAY_CHAIN_NATIVE_TOKEN) +}; +jest.mock('@/hooks/api/loans/use-get-account-positions-earnings', () => ({ + ...jest.requireActual('@/hooks/api/loans/use-get-account-positions-earnings'), + useGetAccountPositionsEarnings: jest.fn().mockReturnValue({ + isLoading: false, + data: mockPositionsEarnings, + getPositionEarnings: mockGetPositionEarnings + }) +})); + export { mockgetDexTotalVolumeUSD, mockGetDexVolumeByTicker }; diff --git a/src/test/mocks/setup.tsx b/src/test/mocks/setup.tsx index 23f6259059..95ffb346c0 100644 --- a/src/test/mocks/setup.tsx +++ b/src/test/mocks/setup.tsx @@ -17,8 +17,16 @@ afterAll(() => { }); // Removing transaction modal from showing on every single test -jest.mock('@/utils/hooks/transaction/hooks/use-transaction-notifications', () => ({ - useTransactionNotifications: () => ({ onReject: jest.fn(), mutationProps: {} }) +jest.mock('@/hooks/transaction/hooks/use-transaction-notifications', () => ({ + useTransactionNotifications: () => ({ + onReject: jest.fn(), + mutationProps: { + onMutate: jest.fn(), + onSuccess: jest.fn(), + onError: jest.fn(), + onSigning: jest.fn() + } + }) })); // MEMO: mocking @react/aria overlay component because diff --git a/src/test/pages/Burn.test.tsx b/src/test/pages/Burn.test.tsx deleted file mode 100644 index e4c0068365..0000000000 --- a/src/test/pages/Burn.test.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import '@testing-library/jest-dom'; - -import { newMonetaryAmount } from '@interlay/interbtc-api'; - -import App from '@/App'; -import { WRAPPED_TOKEN } from '@/config/relay-chains'; - -import { mockRedeemBurn, mockRedeemGetMaxBurnableTokens } from '../mocks/@interlay/interbtc-api'; -import { act, render, screen, userEvent, waitFor } from '../test-utils'; - -describe.skip('Burn page', () => { - it('the burn tab is displayed when there is a liquidated vault', async () => { - await render(, { path: '/bridge?tab=burn' }); - - const burnTab = screen.getByRole('tab', { name: /burn/i }); - expect(burnTab).toBeVisible(); - }); - - it('the burn method is called', async () => { - await render(, { path: '/bridge?tab=burn' }); - - const burnTab = screen.getByRole('tab', { name: /burn/i }); - userEvent.click(burnTab); - - const amountToBurnInput = await screen.findByRole('textbox'); - // Input 0.0001 IBTC. - await act(async () => { - userEvent.type(amountToBurnInput, '0.0001'); - }); - - const submitButton = screen.getByRole('button', { name: /Burn/i }); - expect(submitButton).toBeEnabled(); - - // Burn IBTC. - await act(async () => { - userEvent.click(submitButton); - }); - - // Check that burn method was called. - await waitFor(() => expect(mockRedeemBurn).toHaveBeenCalledTimes(1)); - }); - - it('the burn tab is not displayed when there is no liquidated vault', async () => { - mockRedeemGetMaxBurnableTokens.mockImplementation(() => newMonetaryAmount('0', WRAPPED_TOKEN)); - - await render(, { path: '/bridge?tab=burn' }); - - await waitFor(() => { - expect(screen.queryByText(/Burn/i)).not.toBeInTheDocument(); - }); - }); -}); diff --git a/src/test/pages/Issue.test.tsx b/src/test/pages/Issue.test.tsx deleted file mode 100644 index 4df7532d20..0000000000 --- a/src/test/pages/Issue.test.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import '@testing-library/jest-dom'; - -import { ChainBalance, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { Bitcoin, BitcoinAmount, ExchangeRate } from '@interlay/monetary-js'; -import { AccountId } from '@polkadot/types/interfaces'; -import Big from 'big.js'; - -import App from '@/App'; -import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { BLOCKS_BEHIND_LIMIT } from '@/config/parachain'; -import { GOVERNANCE_TOKEN, TRANSACTION_FEE_AMOUNT, WRAPPED_TOKEN } from '@/config/relay-chains'; - -import { - MOCK_BITCOIN_HEIGHT, - MOCK_BTC_RELAY_HEIGHT, - MOCK_EXCHANGE_RATE, - MOCK_TOKEN_BALANCE, - mockBtcRelayGetLatestBlockHeight, - mockElectrsAPIGetLatestBlockHeight, - mockFeeGetIssueFee, - mockFeeGetIssueGriefingCollateralRate, - mockIssueGetDustValue, - mockIssueGetRequestLimits, - mockIssueRequest, - mockOracleGetExchangeRate, - mockTokensBalance -} from '../mocks/@interlay/interbtc-api'; -import { MOCK_TOKEN_PRICES, mockGovernanceTokenPriceInUsd } from '../mocks/fetch'; -import { act, render, screen, userEvent, waitFor, within } from '../test-utils'; - -const getBridgeFee = (inputAmount: number) => { - return new BitcoinAmount(inputAmount).mul(mockFeeGetIssueFee()); -}; - -const ISSUE_TAB_PATH = '/bridge?tab=issue'; - -// TODO: type `props` properly -const renderIssueForm = async (props?: any) => { - await render(, { path: ISSUE_TAB_PATH }); - - const issueTab = screen.getByRole('tab', { name: /issue/i }); - - const issueTabPanel = screen.getByRole('tabpanel', { - name: /issue/i - }); - - userEvent.click(issueTab); - - const amountToIssueInput = screen.getByRole('textbox'); - - const submitButton = screen.getByRole('button', { name: /confirm/i }); - - const errorElement = within(issueTabPanel).getByRole('alert'); - - return { - tab: issueTab, - errorElement, - amountToIssueInput, - submitButton, - changeAmountToIssue: async (value: string) => await act(async () => userEvent.type(amountToIssueInput, value)), - submitForm: async () => await act(async () => userEvent.click(submitButton)) - }; -}; - -describe.skip('issue form', () => { - it('if the issue method is called', async () => { - const { changeAmountToIssue, submitForm } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).toHaveBeenCalledTimes(1)); - }); - - it('if the bridge fee is correctly displayed', async () => { - const { changeAmountToIssue } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - const bridgeFee = getBridgeFee(inputAmount); - - const bridgeFeeElement = screen.getByTestId(/issue-bridge-fee/i); - - const bridgeFeeInBTC = bridgeFee.toHuman(8); - - expect(bridgeFeeElement).toHaveTextContent(bridgeFeeInBTC); - - const bridgeFeeInUSD = displayMonetaryAmountInUSDFormat(bridgeFee, MOCK_TOKEN_PRICES.bitcoin.usd); - - expect(bridgeFeeElement).toHaveTextContent(bridgeFeeInUSD.toString()); - }); - - it('if the security deposit is correctly displayed', async () => { - const { changeAmountToIssue } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - const btcToGovernanceTokenRate = mockOracleGetExchangeRate(GOVERNANCE_TOKEN); - - const monetaryBtcAmount = new BitcoinAmount(inputAmount); - - const securityDeposit = btcToGovernanceTokenRate - .toCounter(monetaryBtcAmount) - .mul(mockFeeGetIssueGriefingCollateralRate()); - - const securityDepositElement = screen.getByTestId(/security-deposit/i); - - const securityDepositInGovernanceToken = displayMonetaryAmount(securityDeposit); - - expect(securityDepositElement).toHaveTextContent(securityDepositInGovernanceToken); - - const securityDepositInUSD = displayMonetaryAmountInUSDFormat(securityDeposit, mockGovernanceTokenPriceInUsd); - - expect(securityDepositElement).toHaveTextContent(securityDepositInUSD); - }); - - it('if the transaction fee is correctly displayed', async () => { - const { changeAmountToIssue } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - const transactionFeeElement = screen.getByTestId(/transaction-fee/i); - - const txFeeInGovernanceToken = displayMonetaryAmount(TRANSACTION_FEE_AMOUNT); - - expect(transactionFeeElement).toHaveTextContent(txFeeInGovernanceToken); - - const txFeeInUSD = displayMonetaryAmountInUSDFormat(TRANSACTION_FEE_AMOUNT, mockGovernanceTokenPriceInUsd); - - expect(transactionFeeElement).toHaveTextContent(txFeeInUSD); - }); - - it('if the total receiving amount is correctly displayed', async () => { - const { changeAmountToIssue } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - const totalElement = screen.getByTestId(/total-receiving-amount/i); - - const bridgeFee = getBridgeFee(inputAmount); - - const monetaryBtcAmount = new BitcoinAmount(inputAmount); - - const total = monetaryBtcAmount.sub(bridgeFee); - - const totalInBTC = total.toHuman(8); - - expect(totalElement).toHaveTextContent(totalInBTC); - - const totalInUSD = displayMonetaryAmountInUSDFormat(total, MOCK_TOKEN_PRICES.bitcoin.usd); - - expect(totalElement).toHaveTextContent(totalInUSD.toString()); - }); - - it('if the max issuable amounts are correctly displayed', async () => { - await renderIssueForm(); - - const singleMaxIssuableAmountElement = screen.getByTestId(/single-max-issuable/i); - - const singleMaxIssuableAmount = displayMonetaryAmount(mockIssueGetRequestLimits().singleVaultMaxIssuable); - - expect(singleMaxIssuableAmountElement).toHaveTextContent(singleMaxIssuableAmount); - - const totalMaxIssuableAmountElement = screen.getByTestId(/total-max-issuable/i); - - const totalMaxIssuableAmount = displayMonetaryAmount(mockIssueGetRequestLimits().totalMaxIssuable); - - expect(totalMaxIssuableAmountElement).toHaveTextContent(totalMaxIssuableAmount); - }); - - it('when the governance token balance is less than required', async () => { - mockTokensBalance.mockImplementation((currency: CurrencyExt, _id: AccountId) => { - if (currency.ticker === GOVERNANCE_TOKEN.ticker) { - return new ChainBalance(currency, 0, 0); - } else { - return new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE); - } - }); - - const { changeAmountToIssue, submitForm, errorElement } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot(`"Insufficient free INTR for security deposit and fees"`); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).not.toHaveBeenCalled()); - - mockTokensBalance.mockImplementation( - (currency: CurrencyExt, _id: AccountId) => new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE) - ); - }); - - it('when the input amount is greater than the single vault max issuable amount', async () => { - const { changeAmountToIssue, submitForm, errorElement } = await renderIssueForm(); - - const inputAmount = mockIssueGetRequestLimits().singleVaultMaxIssuable.add(newMonetaryAmount('1', WRAPPED_TOKEN)); - - await changeAmountToIssue(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot(`"Please enter less than 0.565 IBTC."`); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).not.toHaveBeenCalled()); - }); - - it('when the input amount is less than the Bitcoin dust amount', async () => { - const { changeAmountToIssue, submitForm, errorElement } = await renderIssueForm(); - - const inputAmount = mockIssueGetDustValue().sub(newMonetaryAmount(1, Bitcoin)); - - await changeAmountToIssue(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"Please enter an amount greater than Bitcoin dust limit (0 BTC)."` - ); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).not.toHaveBeenCalled()); - }); - - it('when the parachain is more than 6 blocks behind', async () => { - mockBtcRelayGetLatestBlockHeight.mockImplementation(() => MOCK_BTC_RELAY_HEIGHT); - mockElectrsAPIGetLatestBlockHeight.mockImplementation(() => BLOCKS_BEHIND_LIMIT + MOCK_BTC_RELAY_HEIGHT + 1); - - const { changeAmountToIssue, submitForm, errorElement } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"You can't issue IBTC at the moment because IBTC parachain is more than 6 blocks behind."` - ); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).not.toHaveBeenCalled()); - - mockBtcRelayGetLatestBlockHeight.mockImplementation(() => MOCK_BTC_RELAY_HEIGHT); - mockElectrsAPIGetLatestBlockHeight.mockImplementation(() => MOCK_BITCOIN_HEIGHT); - }); - - it('when the oracle is offline', async () => { - mockOracleGetExchangeRate.mockImplementation( - (currency: CurrencyExt) => new ExchangeRate(Bitcoin, currency, new Big(0)) - ); - - const { changeAmountToIssue, submitForm, errorElement } = await renderIssueForm(); - - const inputAmount = 0.0001; - - await changeAmountToIssue(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"You can't issue IBTC at the moment because oracle is offline."` - ); - - await submitForm(); - - await waitFor(() => expect(mockIssueRequest).not.toHaveBeenCalled()); - - mockOracleGetExchangeRate.mockImplementation( - (currency: CurrencyExt) => new ExchangeRate(Bitcoin, currency, MOCK_EXCHANGE_RATE) - ); - }); -}); diff --git a/src/test/pages/Loans/borrow.test.tsx b/src/test/pages/Loans/borrow.test.tsx index e21455c427..7d51c769d9 100644 --- a/src/test/pages/Loans/borrow.test.tsx +++ b/src/test/pages/Loans/borrow.test.tsx @@ -1,69 +1,71 @@ import '@testing-library/jest-dom'; -import Big from 'big.js'; - import App from '@/App'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_ASSETS, - DEFAULT_BORROW_POSITIONS, - DEFAULT_IBTC, - DEFAULT_IBTC_LOAN_ASSET, - DEFAULT_LEND_POSITIONS, - DEFAULT_LENDING_STATS, - mockBorrow, - mockCalculateBorrowLimitBtcChange, - mockCalculateLtvAndThresholdsChange, - mockGetBorrowPositionsOfAccount, - mockGetLendingStats, - mockGetLendPositionsOfAccount, - mockGetLoanAssets -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; +import { MOCK_LOANS } from '@/test/mocks/@interlay/interbtc-api'; import { render, userEvent, waitFor } from '../../test-utils'; import { submitForm, withinModalTabPanel } from '../utils/table'; +import { waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + borrow +} = MOCK_LOANS.MODULE; +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, WRAPPED_LOAN } = MOCK_LOANS.DATA; + const path = '/lending'; const tab = 'borrow'; -jest.mock('../../../parts/Layout', () => { +jest.mock('@/components/Layout', () => { const MockedLayout: React.FC = ({ children }: any) => children; MockedLayout.displayName = 'MockedLayout'; - return MockedLayout; + return { + Layout: MockedLayout + }; }); -describe.skip('Borrow Flow', () => { +describe('Borrow Flow', () => { beforeEach(() => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockGetLendingStats.mockReturnValue(DEFAULT_LENDING_STATS); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.EMPTY); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); }); it('should be able to borrow', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.MARKET, WRAPPED_LOAN.ASSET.currency.ticker, tab); + + userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); - userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.SMALL); + await waitForFeeEstimate(borrow); await submitForm(tabPanel, 'borrow'); - expect(mockBorrow).toHaveBeenCalledWith(WRAPPED_TOKEN, DEFAULT_IBTC.MONETARY.SMALL); + await waitForTransactionExecute(borrow); + + expect(borrow).toHaveBeenCalledWith(WRAPPED_TOKEN, WRAPPED_LOAN.AMOUNT.VERY_SMALL.MONETARY); }); it('should not be able to borrow due to borrow limit', async () => { - mockCalculateBorrowLimitBtcChange.mockReturnValue(DEFAULT_IBTC.MONETARY.VERY_SMALL); - mockGetLendingStats.mockReturnValue({ ...DEFAULT_LENDING_STATS, borrowLimitBtc: DEFAULT_IBTC.MONETARY.VERY_SMALL }); + getLendingStats.mockReturnValue(LENDING_STATS.MIN_BORROW_LIMIT); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.MARKET, WRAPPED_LOAN.ASSET.currency.ticker, tab); // If there is collateral, modal LTV meter should be rendered expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); - userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); + + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'borrow amount' })).toHaveErrorMessage(''); @@ -72,21 +74,20 @@ describe.skip('Borrow Flow', () => { userEvent.click(tabPanel.getByRole('button', { name: /borrow/i })); await waitFor(() => { - expect(mockBorrow).not.toHaveBeenCalled(); + expect(borrow).not.toHaveBeenCalled(); }); }); it('should not be able to borrow due lack of available capacity', async () => { - mockGetLoanAssets.mockReturnValue({ - ...DEFAULT_ASSETS, - IBTC: { ...DEFAULT_IBTC_LOAN_ASSET, availableCapacity: DEFAULT_IBTC.MONETARY.VERY_SMALL } - }); + getLoanAssets.mockReturnValue(ASSETS.EMPTY_CAPACITY); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.MARKET, WRAPPED_LOAN.ASSET.currency.ticker, tab); + + userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); - userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'borrow amount' })).toHaveErrorMessage(''); @@ -95,25 +96,20 @@ describe.skip('Borrow Flow', () => { userEvent.click(tabPanel.getByRole('button', { name: /borrow/i })); await waitFor(() => { - expect(mockBorrow).not.toHaveBeenCalled(); + expect(borrow).not.toHaveBeenCalled(); }); }); it('should not be able to borrow due too many borrows', async () => { - mockGetLoanAssets.mockReturnValue({ - ...DEFAULT_ASSETS, - IBTC: { - ...DEFAULT_IBTC_LOAN_ASSET, - borrowCap: DEFAULT_IBTC.MONETARY.MEDIUM, - totalBorrows: DEFAULT_IBTC.MONETARY.MEDIUM - } - }); + getLoanAssets.mockReturnValue(ASSETS.OVER_BORROWED); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.MARKET, WRAPPED_LOAN.ASSET.currency.ticker, tab); - userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); + + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'borrow amount' })).toHaveErrorMessage(''); @@ -122,22 +118,18 @@ describe.skip('Borrow Flow', () => { userEvent.click(tabPanel.getByRole('button', { name: /borrow/i })); await waitFor(() => { - expect(mockBorrow).not.toHaveBeenCalled(); + expect(borrow).not.toHaveBeenCalled(); }); }); it('should display liquidation alert', async () => { - mockCalculateLtvAndThresholdsChange.mockReturnValue({ - collateralThresholdWeightedAverage: new Big(0.5), - liquidationThresholdWeightedAverage: new Big(0.75), - ltv: new Big(0.75) - }); + getLendingStats.mockReturnValue(LENDING_STATS.LIQUIDATION); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.MARKET, WRAPPED_LOAN.ASSET.currency.ticker, tab); - userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'borrow amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); await waitFor(() => { expect(tabPanel.getByRole('alert')).toBeInTheDocument(); diff --git a/src/test/pages/Loans/collateral.test.tsx b/src/test/pages/Loans/collateral.test.tsx index 1ef83a519e..e1cfd531a6 100644 --- a/src/test/pages/Loans/collateral.test.tsx +++ b/src/test/pages/Loans/collateral.test.tsx @@ -1,122 +1,126 @@ import '@testing-library/jest-dom'; import App from '@/App'; -import { GOVERNANCE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_BORROW_POSITIONS, - DEFAULT_CALCULATE_BORROW_LIMIT, - DEFAULT_LEND_POSITIONS, - DEFAULT_POSITIONS, - DEFAULT_THRESOLD, - mockCalculateLtvAndThresholdsChange, - mockDisableAsCollateral, - mockEnableAsCollateral, - mockGetBorrowPositionsOfAccount, - mockGetLendPositionsOfAccount -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; +import { MOCK_LOANS } from '@/test/mocks/@interlay/interbtc-api'; import { render, screen, userEvent, waitForElementToBeRemoved, within } from '../../test-utils'; import { withinTableRow } from '../utils/table'; +import { waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + enableAsCollateral, + disableAsCollateral +} = MOCK_LOANS.MODULE; +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, WRAPPED_LOAN, GOVERNANCE_LOAN } = MOCK_LOANS.DATA; + const path = '/lending'; -const withinCollateralModal = (asset = 'IBTC') => { +const withinCollateralModal = (asset: string, modalTitle?: RegExp) => { const row = withinTableRow(TABLES.LEND.POSITION, asset); userEvent.click(row.getByRole('switch', { name: `toggle ${asset} collateral` })); - return within(screen.getByRole('dialog')); + return within(screen.getByRole('dialog', { name: modalTitle })); }; -describe.skip('Collateral Flow', () => { +describe('Collateral Flow', () => { beforeEach(() => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.EMPTY); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); }); it('should be able to enable collateral when there is no collateral', async () => { - mockGetLendPositionsOfAccount.mockReturnValue([{ ...DEFAULT_POSITIONS.LEND.IBTC, isCollateral: false }]); - await render(, { path }); - const modal = withinCollateralModal(); + const modal = withinCollateralModal(WRAPPED_LOAN.ASSET.currency.ticker, /enable as collateral/i); + + await waitForFeeEstimate(enableAsCollateral); - userEvent.click(modal.getByRole('button', { name: /use IBTC as collateral/i })); + userEvent.click( + modal.getByRole('button', { name: new RegExp(`use ${WRAPPED_LOAN.ASSET.currency.ticker} as collateral`, 'i') }) + ); await waitForElementToBeRemoved(screen.getByRole('dialog')); - expect(mockEnableAsCollateral).toHaveBeenCalledTimes(1); - expect(mockEnableAsCollateral).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(enableAsCollateral); + + expect(enableAsCollateral).toHaveBeenCalledWith(WRAPPED_LOAN.ASSET.currency); }); - it('should be able to enable collateral when there is already collateral', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue([ - DEFAULT_POSITIONS.LEND.IBTC, - { ...DEFAULT_POSITIONS.LEND.INTR, isCollateral: false } - ]); + it('should be able to disable collateral when there are no borrow positions', async () => { + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); await render(, { path }); - const modal2 = withinCollateralModal('INTR'); + const modal = withinCollateralModal(WRAPPED_LOAN.ASSET.currency.ticker, /disable collateral/i); - userEvent.click(modal2.getByRole('button', { name: /use INTR as collateral/i })); + await waitForFeeEstimate(disableAsCollateral); + + userEvent.click( + modal.getByRole('button', { name: new RegExp(`disable ${WRAPPED_LOAN.ASSET.currency.ticker}`, 'i') }) + ); await waitForElementToBeRemoved(screen.getByRole('dialog')); - expect(mockEnableAsCollateral).toHaveBeenCalledTimes(1); - expect(mockEnableAsCollateral).toHaveBeenCalledWith(GOVERNANCE_TOKEN); + await waitForTransactionExecute(disableAsCollateral); + + expect(disableAsCollateral).toHaveBeenCalledWith(WRAPPED_LOAN.ASSET.currency); }); - it('should be able to disable collateral when there are no borrow positions', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); + it('should be able to disable collateral when there are open borrow positions', async () => { + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_COLLATERAL); await render(, { path }); - const modal = withinCollateralModal(); + const modal = withinCollateralModal(GOVERNANCE_LOAN.ASSET.currency.ticker, /disable collateral/i); - userEvent.click(modal.getByRole('button', { name: /disable IBTC/i })); + await waitForFeeEstimate(disableAsCollateral); + + userEvent.click( + modal.getByRole('button', { name: new RegExp(`disable ${GOVERNANCE_LOAN.ASSET.currency.ticker}`, 'i') }) + ); await waitForElementToBeRemoved(screen.getByRole('dialog')); - expect(mockDisableAsCollateral).toHaveBeenCalledTimes(1); - expect(mockDisableAsCollateral).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(disableAsCollateral); + + expect(disableAsCollateral).toHaveBeenCalledWith(GOVERNANCE_LOAN.ASSET.currency); }); - it('should be able to disable collateral when there are open borrow positions', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([DEFAULT_POSITIONS.BORROW.INTR]); - mockGetLendPositionsOfAccount.mockReturnValue([DEFAULT_POSITIONS.LEND.IBTC, DEFAULT_POSITIONS.LEND.INTR]); + it('should not be able to disable collateral due to low collateral while having only one asset as collateral', async () => { + getLendingStats.mockReturnValue(LENDING_STATS.LIQUIDATION); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); await render(, { path }); - const modal2 = withinCollateralModal('INTR'); + const modal = withinCollateralModal(WRAPPED_LOAN.ASSET.currency.ticker, /collateral required/i); - userEvent.click(modal2.getByRole('button', { name: /disable INTR/i })); + userEvent.click(modal.getAllByRole('button', { name: /dismiss/i })[1]); - await waitForElementToBeRemoved(screen.getByRole('dialog')); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - expect(mockDisableAsCollateral).toHaveBeenCalledTimes(1); - expect(mockDisableAsCollateral).toHaveBeenCalledWith(GOVERNANCE_TOKEN); + expect(disableAsCollateral).not.toHaveBeenCalled(); }); - it('should not be able to disable collateral due to low collateral while having only one asset as collateral', async () => { - mockCalculateLtvAndThresholdsChange.mockReturnValue({ - ltv: DEFAULT_THRESOLD.HIGH, - collateralThresholdWeightedAverage: DEFAULT_THRESOLD.MEDIUM, - liquidationThresholdWeightedAverage: DEFAULT_THRESOLD.HIGH - }); + it('should not be able to disable collateral due to qTokens being used as vault collateral', async () => { + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_VAULT_COLLATERAL); await render(, { path }); - const modal = withinCollateralModal(); + const modal = withinCollateralModal(WRAPPED_LOAN.ASSET.currency.ticker, /already used as vault collateral/i); userEvent.click(modal.getAllByRole('button', { name: /dismiss/i })[1]); expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); - expect(mockEnableAsCollateral).not.toHaveBeenCalled(); - expect(mockDisableAsCollateral).not.toHaveBeenCalled(); - mockCalculateLtvAndThresholdsChange.mockReturnValue(DEFAULT_CALCULATE_BORROW_LIMIT); + expect(disableAsCollateral).not.toHaveBeenCalled(); }); }); diff --git a/src/test/pages/Loans/index.test.tsx b/src/test/pages/Loans/index.test.tsx index 78e896e181..3c62178d73 100644 --- a/src/test/pages/Loans/index.test.tsx +++ b/src/test/pages/Loans/index.test.tsx @@ -1,43 +1,38 @@ import '@testing-library/jest-dom'; -import { newMonetaryAmount } from '@interlay/interbtc-api'; -import Big from 'big.js'; - import App from '@/App'; -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_ASSETS, - DEFAULT_BORROW_POSITIONS, - DEFAULT_LEND_POSITIONS, - DEFAULT_LENDING_STATS, - DEFAULT_POSITIONS, - mockClaimAllSubsidyRewards, - mockGetAccountSubsidyRewards, - mockGetBorrowPositionsOfAccount, - mockGetLendingStats, - mockGetLendPositionsOfAccount, - mockGetLoanAssets -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; - -import { render, screen, userEvent, waitFor } from '../../test-utils'; +import { MOCK_LOANS } from '@/test/mocks/@interlay/interbtc-api'; + +import { render, screen, userEvent, waitFor, waitForElementToBeRemoved, within } from '../../test-utils'; import { getTableRow, withinTable } from '../utils/table'; +import { getFeeTokenSelect, waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + claimAllSubsidyRewards, + getAccruedRewardsOfAccount +} = MOCK_LOANS.MODULE; +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, ACCOUNT_REWARDS } = MOCK_LOANS.DATA; + const path = '/lending'; -describe.skip('Loans page', () => { +describe('Loans page', () => { beforeEach(() => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockGetLoanAssets.mockReturnValue(DEFAULT_ASSETS); - mockGetLendingStats.mockReturnValue(DEFAULT_LENDING_STATS); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.EMPTY); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.EMPTY); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); }); describe('Tables Section', () => { it.each([TABLES.LEND.MARKET, TABLES.BORROW.MARKET])( 'should not be able to open inactive market on %s table', async (tableName) => { - mockGetLoanAssets.mockReturnValue({ IBTC: { ...DEFAULT_ASSETS.IBTC, isActive: false } }); + getLoanAssets.mockReturnValue(ASSETS.INACTIVE); await render(, { path }); @@ -50,16 +45,13 @@ describe.skip('Loans page', () => { ); it.each([TABLES.LEND.POSITION, TABLES.BORROW.POSITION])('should not display %s table', async (tableName) => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); - mockGetLendPositionsOfAccount.mockReturnValue([]); - await render(, { path }); expect(screen.queryByRole('grid', { name: new RegExp(tableName, 'i') })).not.toBeInTheDocument(); }); it('should not display my borrow positions table but instead a placeholder', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); + getLendPositionsOfAccount.mockResolvedValue(LOAN_POSITIONS.LEND.AVERAGE); await render(, { path }); @@ -72,17 +64,13 @@ describe.skip('Loans page', () => { describe('LTV Section', () => { it('should not render when there no positions open', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); - mockGetLendPositionsOfAccount.mockReturnValue([]); - await render(, { path }); expect(screen.queryByRole('meter', { name: /ltv meter/i })).not.toBeInTheDocument(); }); it('should not render when there is a non-collateral lend position', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); - mockGetLendPositionsOfAccount.mockReturnValue([{ ...DEFAULT_POSITIONS.LEND.IBTC, isCollateral: false }]); + getLendPositionsOfAccount.mockResolvedValue(LOAN_POSITIONS.LEND.AVERAGE); await render(, { path }); @@ -90,8 +78,7 @@ describe.skip('Loans page', () => { }); it('should render when there is a lend position as collateral', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); - mockGetLendPositionsOfAccount.mockReturnValue([DEFAULT_POSITIONS.LEND.IBTC]); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); await render(, { path }); @@ -102,18 +89,18 @@ describe.skip('Loans page', () => { }); it('should display low risk', async () => { + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_COLLATERAL); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + await render(, { path }); expect(screen.getByText(/low risk/i)).toBeInTheDocument(); }); it('should display medium risk', async () => { - mockGetLendingStats.mockReturnValue({ - ...DEFAULT_LENDING_STATS, - collateralThresholdWeightedAverage: new Big(0.5), - liquidationThresholdWeightedAverage: new Big(0.75), - ltv: new Big(0.5) - }); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_COLLATERAL); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + getLendingStats.mockReturnValue(LENDING_STATS.MEDIUM_LTV); await render(, { path }); @@ -121,12 +108,9 @@ describe.skip('Loans page', () => { }); it('should display liquidation risk', async () => { - mockGetLendingStats.mockReturnValue({ - ...DEFAULT_LENDING_STATS, - collateralThresholdWeightedAverage: new Big(0.5), - liquidationThresholdWeightedAverage: new Big(0.75), - ltv: new Big(0.75) - }); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_COLLATERAL); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + getLendingStats.mockReturnValue(LENDING_STATS.HIGH_LTV); await render(, { path }); @@ -136,15 +120,31 @@ describe.skip('Loans page', () => { describe('Rewards', () => { it('should be able to claim', async () => { + getAccruedRewardsOfAccount.mockResolvedValue(ACCOUNT_REWARDS.FULL); + await render(, { path }); userEvent.click(screen.getByRole('button', { name: /claim/i })); - await waitFor(() => expect(mockClaimAllSubsidyRewards).toHaveBeenCalledTimes(1)); + await waitFor(() => { + expect(screen.getByRole('dialog', { name: /claim rewards/i })).toBeInTheDocument(); + }); + + await waitForFeeEstimate(claimAllSubsidyRewards); + + const modal = within(screen.getByRole('dialog', { name: /claim rewards/i })); + + expect(getFeeTokenSelect(modal)).toBeInTheDocument(); + + userEvent.click(modal.getByRole('button', { name: /claim rewards/i })); + + await waitForElementToBeRemoved(screen.getByRole('dialog', { name: /claim rewards/i })); + + await waitForTransactionExecute(claimAllSubsidyRewards); }); it('should not be able to claim', async () => { - mockGetAccountSubsidyRewards.mockReturnValue(newMonetaryAmount(0, GOVERNANCE_TOKEN)); + getAccruedRewardsOfAccount.mockResolvedValue(ACCOUNT_REWARDS.EMPTY); await render(, { path }); diff --git a/src/test/pages/Loans/lend.test.tsx b/src/test/pages/Loans/lend.test.tsx index e9179b14ef..ebdf9c1b1c 100644 --- a/src/test/pages/Loans/lend.test.tsx +++ b/src/test/pages/Loans/lend.test.tsx @@ -2,61 +2,67 @@ import '@testing-library/jest-dom'; import App from '@/App'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_TOKENS_BALANCE_FN, - EMPTY_TOKENS_BALANCE_FN, - mockTokensBalance -} from '@/test/mocks/@interlay/interbtc-api'; -import { - DEFAULT_ASSETS, - DEFAULT_BORROW_POSITIONS, - DEFAULT_IBTC, - DEFAULT_IBTC_LOAN_ASSET, - DEFAULT_LEND_POSITIONS, - mockGetBorrowPositionsOfAccount, - mockGetLendPositionsOfAccount, - mockGetLoanAssets, - mockLend -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; +import { MOCK_LOANS, MOCK_TOKENS } from '@/test/mocks/@interlay/interbtc-api'; import { render, screen, userEvent, waitFor } from '../../test-utils'; import { submitForm, withinModalTabPanel } from '../utils/table'; +import { getFeeTokenSelect, waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + lend +} = MOCK_LOANS.MODULE; +const { balance } = MOCK_TOKENS.MODULE; + +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, WRAPPED_LOAN } = MOCK_LOANS.DATA; +const { BALANCE_FN } = MOCK_TOKENS.DATA; + const path = '/lending'; const tab = 'lend'; -describe.skip('Lending Flow', () => { +describe('Lending Flow', () => { beforeEach(() => { - mockGetLoanAssets.mockReturnValue(DEFAULT_ASSETS); - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockLend.mockRestore(); - mockTokensBalance.mockImplementation(DEFAULT_TOKENS_BALANCE_FN); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.EMPTY); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); + balance.mockImplementation(BALANCE_FN.FULL); }); it('should be able to lend', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab); expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); + expect(getFeeTokenSelect(tabPanel)).toBeInTheDocument(); + + userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), WRAPPED_LOAN.AMOUNT.MEDIUM.VALUE); - userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + await waitForFeeEstimate(lend); await submitForm(tabPanel, 'lend'); - expect(mockLend).toHaveBeenCalledWith(WRAPPED_TOKEN, DEFAULT_IBTC.MONETARY.MEDIUM); + await waitForTransactionExecute(lend); + + expect(lend).toHaveBeenCalledWith(WRAPPED_TOKEN, WRAPPED_LOAN.AMOUNT.MEDIUM.MONETARY); }); it('should not be able to lend over available balance', async () => { - mockTokensBalance.mockImplementation(EMPTY_TOKENS_BALANCE_FN); + balance.mockImplementation(BALANCE_FN.EMPTY); await render(, { path }); const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); - userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), WRAPPED_LOAN.AMOUNT.MEDIUM.VALUE); + + // TODO: should remove this when form ticker is revised + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'lend amount' })).toHaveErrorMessage(''); @@ -66,24 +72,21 @@ describe.skip('Lending Flow', () => { await waitFor(() => { expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(mockLend).not.toHaveBeenCalled(); + expect(lend).not.toHaveBeenCalled(); }); }); - it('should not be able to lend due to lack of borrows and supply cap', async () => { - mockGetLoanAssets.mockReturnValue({ - IBTC: { - ...DEFAULT_IBTC_LOAN_ASSET, - totalBorrows: DEFAULT_IBTC.MONETARY.VERY_LARGE, - supplyCap: DEFAULT_IBTC.MONETARY.EMPTY - } - }); + it('should not be able to lend due to lack of supply cap', async () => { + getLoanAssets.mockReturnValue(ASSETS.EMPTY_CAPACITY); await render(, { path }); const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab); - userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'lend amount' }), WRAPPED_LOAN.AMOUNT.MEDIUM.VALUE); + + // TODO: should remove this when form ticker is revised + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'lend amount' })).toHaveErrorMessage(''); @@ -93,7 +96,7 @@ describe.skip('Lending Flow', () => { await waitFor(() => { expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(mockLend).not.toHaveBeenCalled(); + expect(lend).not.toHaveBeenCalled(); }); }); }); diff --git a/src/test/pages/Loans/repay.test.tsx b/src/test/pages/Loans/repay.test.tsx index 841b93c60b..f67e7054f7 100644 --- a/src/test/pages/Loans/repay.test.tsx +++ b/src/test/pages/Loans/repay.test.tsx @@ -1,61 +1,63 @@ import '@testing-library/jest-dom'; -import { ChainBalance, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { AccountId } from '@polkadot/types/interfaces'; - import App from '@/App'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_TOKENS_BALANCE_FN, - EMPTY_TOKENS_BALANCE_FN, - MOCK_TOKEN_BALANCE, - mockTokensBalance -} from '@/test/mocks/@interlay/interbtc-api'; -import { - DEFAULT_BORROW_POSITIONS, - DEFAULT_IBTC, - DEFAULT_LEND_POSITIONS, - DEFAULT_POSITIONS, - mockGetBorrowPositionsOfAccount, - mockGetLendPositionsOfAccount, - mockRepay, - mockRepayAll -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; - -import { act, render, screen, userEvent, waitFor } from '../../test-utils'; +import { MOCK_TOKENS } from '@/test/mocks/@interlay/interbtc-api'; +import { MOCK_LOANS } from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; + +import { render, screen, userEvent, waitFor } from '../../test-utils'; import { submitForm, withinModalTabPanel } from '../utils/table'; +import { waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + repay, + repayAll +} = MOCK_LOANS.MODULE; +const { balance } = MOCK_TOKENS.MODULE; + +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, WRAPPED_LOAN } = MOCK_LOANS.DATA; +const { BALANCE_FN } = MOCK_TOKENS.DATA; + const path = '/lending'; const tab = 'repay'; -describe.skip('Repay Flow', () => { +describe('Repay Flow', () => { beforeEach(() => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockTokensBalance.mockImplementation(DEFAULT_TOKENS_BALANCE_FN); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); + balance.mockImplementation(BALANCE_FN.FULL); }); - it('should be able to repay', async () => { - // SCENARIO: user is partially repaying loan + it('should be able to partial repay', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); // should render modal with ltv meter expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); - userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), DEFAULT_IBTC.AMOUNT.SMALL); + userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); + + await waitForFeeEstimate(repay); await submitForm(tabPanel, 'repay'); - expect(mockRepay).toHaveBeenCalledWith(WRAPPED_TOKEN, DEFAULT_IBTC.MONETARY.SMALL); + await waitForTransactionExecute(repay); + + expect(repay).toHaveBeenCalledWith(WRAPPED_TOKEN, WRAPPED_LOAN.AMOUNT.VERY_SMALL.MONETARY); }); it('should be able repay all by using max button', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -63,38 +65,43 @@ describe.skip('Repay Flow', () => { }) ); + await waitForFeeEstimate(repayAll); + await submitForm(tabPanel, 'repay'); - expect(mockRepayAll).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(repayAll); + + expect(repayAll).toHaveBeenCalledWith(WRAPPED_TOKEN); }); it('should be able repay all by typing max amount', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); - const replayAllAmount = DEFAULT_POSITIONS.BORROW.IBTC.amount.add(DEFAULT_POSITIONS.BORROW.IBTC.accumulatedDebt); + const replayAllAmount = WRAPPED_LOAN.POSITIONS.BORROW.amount.add(WRAPPED_LOAN.POSITIONS.BORROW.accumulatedDebt); userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), replayAllAmount.toString()); - // Wait for debounce - await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 500)); - }); + await waitForFeeEstimate(repayAll); await submitForm(tabPanel, 'repay'); - expect(mockRepayAll).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(repayAll); + + expect(repayAll).toHaveBeenCalledWith(WRAPPED_TOKEN); }); it('should not be able to repay over available balance', async () => { - mockTokensBalance.mockImplementation(EMPTY_TOKENS_BALANCE_FN); + balance.mockImplementation(BALANCE_FN.EMPTY); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); - userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), DEFAULT_IBTC.AMOUNT.VERY_LARGE); + userEvent.type(tabPanel.getByRole('textbox', { name: 'repay amount' }), WRAPPED_LOAN.AMOUNT.VERY_SMALL.VALUE); + + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'repay amount' })).toHaveErrorMessage(''); @@ -104,25 +111,17 @@ describe.skip('Repay Flow', () => { await waitFor(() => { expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(mockRepay).not.toHaveBeenCalled(); - expect(mockRepayAll).not.toHaveBeenCalled(); + expect(repay).not.toHaveBeenCalled(); + expect(repayAll).not.toHaveBeenCalled(); }); }); it('should partially repay loan while applying max balance when there are not enough funds to pay the entire loan', async () => { - const mockWrappedTokenBalance = 10000000; - - mockTokensBalance.mockImplementation((currency: CurrencyExt, _id: AccountId) => { - if (currency.ticker === WRAPPED_TOKEN.ticker) { - return new ChainBalance(currency, mockWrappedTokenBalance, mockWrappedTokenBalance, mockWrappedTokenBalance); - } - - return new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE); - }); + balance.mockImplementation(BALANCE_FN.CUSTOM(WRAPPED_LOAN.POSITIONS.BORROW.amount)); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.BORROW.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -130,9 +129,12 @@ describe.skip('Repay Flow', () => { }) ); + await waitForFeeEstimate(repay); + await submitForm(tabPanel, 'repay'); - expect(mockRepay).toHaveBeenCalledWith(WRAPPED_TOKEN, newMonetaryAmount(mockWrappedTokenBalance, WRAPPED_TOKEN)); - expect(mockRepayAll).not.toHaveBeenCalled(); + await waitForTransactionExecute(repay); + + expect(repay).toHaveBeenCalledWith(WRAPPED_TOKEN, WRAPPED_LOAN.POSITIONS.BORROW.amount); }); }); diff --git a/src/test/pages/Loans/withdraw.test.tsx b/src/test/pages/Loans/withdraw.test.tsx index 8cad9203c2..bed06376e6 100644 --- a/src/test/pages/Loans/withdraw.test.tsx +++ b/src/test/pages/Loans/withdraw.test.tsx @@ -1,58 +1,58 @@ import '@testing-library/jest-dom'; -import Big from 'big.js'; - import App from '@/App'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; -import { - DEFAULT_BORROW_POSITIONS, - DEFAULT_IBTC, - DEFAULT_LEND_POSITIONS, - DEFAULT_LENDING_STATS, - DEFAULT_POSITIONS, - mockCalculateLtvAndThresholdsChange, - mockGetBorrowPositionsOfAccount, - mockGetLendingStats, - mockGetLendPositionsOfAccount, - mockWithdraw, - mockWithdrawAll -} from '@/test/mocks/@interlay/interbtc-api/parachain/loans'; - -import { act, render, screen, userEvent, waitFor } from '../../test-utils'; +import { MOCK_LOANS } from '@/test/mocks/@interlay/interbtc-api'; + +import { render, screen, userEvent, waitFor } from '../../test-utils'; import { submitForm, withinModalTabPanel } from '../utils/table'; +import { waitForFeeEstimate, waitForTransactionExecute } from '../utils/transaction'; import { TABLES } from './constants'; +const { + getBorrowPositionsOfAccount, + getLendPositionsOfAccount, + getLoanAssets, + getLendingStats, + withdraw, + withdrawAll +} = MOCK_LOANS.MODULE; +const { LOAN_POSITIONS, ASSETS, LENDING_STATS, WRAPPED_LOAN } = MOCK_LOANS.DATA; + const path = '/lending'; const tab = 'withdraw'; -describe.skip('Withdraw Flow', () => { +describe('Withdraw Flow', () => { beforeEach(() => { - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockGetLendingStats.mockReturnValue(DEFAULT_LENDING_STATS); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.EMPTY); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); + getLoanAssets.mockReturnValue(ASSETS.NORMAL); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_LTV); }); it('should be able to partially withdraw when there are no borrow positions', async () => { await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); // should render modal with ltv meter expect(tabPanel.getByRole('meter', { name: /ltv meter/i })).toBeInTheDocument(); - userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), DEFAULT_IBTC.AMOUNT.SMALL); + userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), WRAPPED_LOAN.AMOUNT.SMALL.VALUE); + + await waitForFeeEstimate(withdraw); await submitForm(tabPanel, 'withdraw'); - expect(mockWithdraw).toHaveBeenCalledWith(WRAPPED_TOKEN, DEFAULT_IBTC.MONETARY.SMALL); + await waitForTransactionExecute(withdraw); + + expect(withdraw).toHaveBeenCalledWith(WRAPPED_TOKEN, WRAPPED_LOAN.AMOUNT.SMALL.MONETARY); }); it('should be able to withdraw all when there are no borrow positions by using max button', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); - await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -60,39 +60,42 @@ describe.skip('Withdraw Flow', () => { }) ); + await waitForFeeEstimate(withdrawAll); + await submitForm(tabPanel, 'withdraw'); - expect(mockWithdrawAll).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(withdrawAll); + + expect(withdrawAll).toHaveBeenCalledWith(WRAPPED_TOKEN); }); it('should be able to withdraw all when there are no borrow positions by typing max amount', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE_COLLATERAL); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); userEvent.type( tabPanel.getByRole('textbox', { name: 'withdraw amount' }), - DEFAULT_POSITIONS.LEND.IBTC.amount.toString() + WRAPPED_LOAN.POSITIONS.LEND.COLLATERAL.amount.toString() ); - // Wait for debounce - await act(async () => { - await new Promise((resolve) => setTimeout(resolve, 500)); - }); + await waitForFeeEstimate(withdrawAll); await submitForm(tabPanel, 'withdraw'); - expect(mockWithdrawAll).toHaveBeenCalledWith(WRAPPED_TOKEN); + await waitForTransactionExecute(withdrawAll); + + expect(withdrawAll).toHaveBeenCalledWith(WRAPPED_TOKEN); }); it('should partially withdraw while applying max withdraw when there is low borrow limit', async () => { - mockGetLendingStats.mockReturnValue({ ...DEFAULT_LENDING_STATS, borrowLimitBtc: DEFAULT_IBTC.MONETARY.VERY_SMALL }); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_BORROW_LIMIT); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); userEvent.click( tabPanel.getByRole('button', { @@ -102,18 +105,21 @@ describe.skip('Withdraw Flow', () => { await submitForm(tabPanel, 'withdraw'); - expect(mockWithdraw).toHaveBeenCalled(); - expect(mockWithdrawAll).not.toHaveBeenCalled(); + expect(withdraw).toHaveBeenCalled(); + expect(withdrawAll).not.toHaveBeenCalled(); }); it('should not be able to withdraw due low borrow limit', async () => { - mockGetLendingStats.mockReturnValue({ ...DEFAULT_LENDING_STATS, borrowLimitBtc: DEFAULT_IBTC.MONETARY.VERY_SMALL }); + getLendingStats.mockReturnValue(LENDING_STATS.LOW_BORROW_LIMIT); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); - userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), WRAPPED_LOAN.AMOUNT.MEDIUM.VALUE); + + // TODO: should remove this when form ticker is revised + userEvent.tab(); await waitFor(() => { expect(tabPanel.getByRole('textbox', { name: 'withdraw amount' })).toHaveErrorMessage(''); @@ -123,26 +129,33 @@ describe.skip('Withdraw Flow', () => { await waitFor(() => { expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(mockWithdraw).not.toHaveBeenCalled(); - expect(mockWithdrawAll).not.toHaveBeenCalled(); + expect(withdraw).not.toHaveBeenCalled(); + expect(withdrawAll).not.toHaveBeenCalled(); }); }); - it('should display liquidation alert', async () => { - mockCalculateLtvAndThresholdsChange.mockReturnValue({ - collateralThresholdWeightedAverage: new Big(0.5), - liquidationThresholdWeightedAverage: new Big(0.75), - ltv: new Big(0.75) - }); + it('should not be able to withdraw due to balance being used as vault collateral', async () => { + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.FULL_VAULT_COLLATERAL); await render(, { path }); - const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, 'IBTC', tab, true); + const tabPanel = await withinModalTabPanel(TABLES.LEND.POSITION, WRAPPED_LOAN.ASSET.currency.ticker, tab, true); + + userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), WRAPPED_LOAN.AMOUNT.MEDIUM.VALUE); + + // TODO: should remove this when form ticker is revised + userEvent.tab(); + + await waitFor(() => { + expect(tabPanel.getByRole('textbox', { name: 'withdraw amount' })).toHaveErrorMessage(''); + }); - userEvent.type(tabPanel.getByRole('textbox', { name: 'withdraw amount' }), DEFAULT_IBTC.AMOUNT.MEDIUM); + userEvent.click(tabPanel.getByRole('button', { name: /withdraw/i })); await waitFor(() => { - expect(tabPanel.getByRole('alert')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + expect(withdraw).not.toHaveBeenCalled(); + expect(withdrawAll).not.toHaveBeenCalled(); }); }); }); diff --git a/src/test/pages/Pools.test.tsx b/src/test/pages/Pools.test.tsx index 0569372a9b..9280f99d9e 100644 --- a/src/test/pages/Pools.test.tsx +++ b/src/test/pages/Pools.test.tsx @@ -21,10 +21,12 @@ const { const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; const { getFutureBlockNumber } = MOCK_SYSTEM.MODULE; -jest.mock('../../parts/Layout', () => { +jest.mock('@/components/Layout', () => { const MockedLayout: React.FC = ({ children }: any) => children; MockedLayout.displayName = 'MockedLayout'; - return MockedLayout; + return { + Layout: MockedLayout + }; }); const path = '/pools'; diff --git a/src/test/pages/Redeem.test.tsx b/src/test/pages/Redeem.test.tsx deleted file mode 100644 index e2f5d86d23..0000000000 --- a/src/test/pages/Redeem.test.tsx +++ /dev/null @@ -1,274 +0,0 @@ -import '@testing-library/jest-dom'; - -import { ChainBalance, CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; -import { Bitcoin, BitcoinAmount, ExchangeRate } from '@interlay/monetary-js'; -import { AccountId } from '@polkadot/types/interfaces'; -import Big from 'big.js'; - -import App from '@/App'; -import { displayMonetaryAmount, displayMonetaryAmountInUSDFormat } from '@/common/utils/utils'; -import { BLOCKS_BEHIND_LIMIT } from '@/config/parachain'; -import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; - -import { - MOCK_BITCOIN_HEIGHT, - MOCK_BTC_RELAY_HEIGHT, - MOCK_EXCHANGE_RATE, - MOCK_TOKEN_BALANCE, - mockBtcRelayGetLatestBlockHeight, - mockElectrsAPIGetLatestBlockHeight, - mockOracleGetExchangeRate, - mockRedeemGetCurrentInclusionFee, - mockRedeemGetDustValue, - mockRedeemGetFeeRate, - mockRedeemRequest, - mockTokensBalance, - mockVaultsGetVaultsWithRedeemableTokens -} from '../mocks/@interlay/interbtc-api'; -import { MOCK_TOKEN_PRICES } from '../mocks/fetch'; -import { act, render, screen, userEvent, waitFor, within } from '../test-utils'; - -const getBridgeFee = (inputAmount: number) => { - return new BitcoinAmount(inputAmount).mul(mockRedeemGetFeeRate()); -}; - -const REDEEM_TAB_PATH = '/bridge?tab=redeem'; - -// TODO: type `props` properly -const renderRedeemForm = async (props?: any) => { - await render(, { path: REDEEM_TAB_PATH }); - - const redeemTab = screen.getByRole('tab', { name: /redeem/i }); - - const redeemTabPanel = screen.getByRole('tabpanel', { - name: /redeem/i - }); - - userEvent.click(redeemTab); - - const amountToRedeemInput = screen.getByRole('textbox', { name: WRAPPED_TOKEN_SYMBOL }); - - const btcAddressToSendInput = screen.getByRole('textbox', { name: 'BTC_ADDRESS_LABEL' }); - - const submitButton = screen.getByRole('button', { name: /confirm/i }); - - const errorElement = within(redeemTabPanel).getByRole('alert', { name: WRAPPED_TOKEN_SYMBOL }); - - return { - tab: redeemTab, - errorElement, - amountToRedeemInput, - btcAddressToSendInput, - submitButton, - changeAmountToRedeem: async (value: string) => await act(async () => userEvent.type(amountToRedeemInput, value)), - changeBtcAddressToSend: async (value: string) => - await act(async () => userEvent.type(btcAddressToSendInput, value)), - submitForm: async () => await act(async () => userEvent.click(submitButton)) - }; -}; - -describe.skip('redeem form', () => { - it('if the redeem method is called', async () => { - const { changeAmountToRedeem, changeBtcAddressToSend, submitForm } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - await changeBtcAddressToSend('tb1q3f6lu0g92q0d5jdng6m367uwpw7lnt7x3n0nqf'); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).toHaveBeenCalledTimes(1)); - }); - - it('if the bridge fee is correctly displayed', async () => { - const { changeAmountToRedeem } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - const bridgeFee = getBridgeFee(inputAmount); - - const bridgeFeeElement = screen.getByTestId(/redeem-bridge-fee/i); - - const bridgeFeeInBTC = bridgeFee.toHuman(8); - - expect(bridgeFeeElement).toHaveTextContent(bridgeFeeInBTC); - - const bridgeFeeInUSD = displayMonetaryAmountInUSDFormat(bridgeFee, MOCK_TOKEN_PRICES.bitcoin.usd); - - expect(bridgeFeeElement).toHaveTextContent(bridgeFeeInUSD.toString()); - }); - - it('if the Bitcoin network fee is correctly displayed', async () => { - const { changeAmountToRedeem } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - const bitcoinNetworkFeeElement = screen.getByTestId(/redeem-bitcoin-network-fee/i); - - const bitcoinNetworkFeeInBTC = mockRedeemGetCurrentInclusionFee().toHuman(8); - - expect(bitcoinNetworkFeeElement).toHaveTextContent(bitcoinNetworkFeeInBTC); - - const bitcoinNetworkFeeInUSD = displayMonetaryAmountInUSDFormat( - mockRedeemGetCurrentInclusionFee(), - MOCK_TOKEN_PRICES.bitcoin.usd - ); - - expect(bitcoinNetworkFeeElement).toHaveTextContent(bitcoinNetworkFeeInUSD.toString()); - }); - - it('if the total receiving amount is correctly displayed', async () => { - const { changeAmountToRedeem } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - const totalElement = screen.getByTestId(/total-receiving-amount/i); - - const bridgeFee = getBridgeFee(inputAmount); - - const monetaryWrappedTokenAmount = new BitcoinAmount(inputAmount); - - const total = monetaryWrappedTokenAmount.gt(bridgeFee.add(mockRedeemGetCurrentInclusionFee())) - ? monetaryWrappedTokenAmount.sub(bridgeFee).sub(mockRedeemGetCurrentInclusionFee()) - : BitcoinAmount.zero(); - - const totalInBTC = total.toHuman(8); - - expect(totalElement).toHaveTextContent(totalInBTC); - - const totalInUSD = displayMonetaryAmountInUSDFormat(total, MOCK_TOKEN_PRICES.bitcoin.usd); - - expect(totalElement).toHaveTextContent(totalInUSD.toString()); - }); - - it('if the max redeemable amount is correctly displayed', async () => { - await renderRedeemForm(); - - const singleMaxIssuableAmountElement = screen.getByTestId(/single-max-redeemable/i); - - const singleMaxRedeemableAmount = displayMonetaryAmount( - mockVaultsGetVaultsWithRedeemableTokens().values().next().value - ); - - expect(singleMaxIssuableAmountElement).toHaveTextContent(singleMaxRedeemableAmount); - }); - - it('when the wrapped token balance is less than required', async () => { - mockTokensBalance.mockImplementation((currency: CurrencyExt, _id: AccountId) => { - if (currency.ticker === WRAPPED_TOKEN.ticker) { - return new ChainBalance(currency, 0, 0); - } else { - return new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE); - } - }); - - const { changeAmountToRedeem, submitForm, errorElement } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"Please enter an amount smaller than your current balance: 0"` - ); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).not.toHaveBeenCalled()); - - mockTokensBalance.mockImplementation( - (currency: CurrencyExt, _id: AccountId) => new ChainBalance(currency, MOCK_TOKEN_BALANCE, MOCK_TOKEN_BALANCE) - ); - }); - - it('when the input amount is greater than the single vault max redeemable amount', async () => { - const { changeAmountToRedeem, submitForm, errorElement } = await renderRedeemForm(); - - const inputAmount = mockVaultsGetVaultsWithRedeemableTokens() - .values() - .next() - .value.add(newMonetaryAmount('1', Bitcoin)); - - await changeAmountToRedeem(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `" The Vault with the highest amount of locked BTC has 100 BTC which is the maximum you can redeem in a single request. You can request to redeem from multiple Vaults to get your whole amount of BTC."` - ); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).not.toHaveBeenCalled()); - }); - - it('when the input amount is less than the combined', async () => { - const { changeAmountToRedeem, submitForm, errorElement } = await renderRedeemForm(); - - const inputAmount = mockRedeemGetDustValue() - .add(mockRedeemGetCurrentInclusionFee()) - .sub(newMonetaryAmount(1, Bitcoin)); - - await changeAmountToRedeem(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"Please enter an amount above the combined Bridge Fee, Bitcoin Network Fee, and Bitcoin Dust limit (0 BTC)."` - ); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).not.toHaveBeenCalled()); - }); - - it('when the parachain is more than 6 blocks behind', async () => { - mockBtcRelayGetLatestBlockHeight.mockImplementation(() => MOCK_BTC_RELAY_HEIGHT); - mockElectrsAPIGetLatestBlockHeight.mockImplementation(() => BLOCKS_BEHIND_LIMIT + MOCK_BTC_RELAY_HEIGHT + 1); - - const { changeAmountToRedeem, submitForm, errorElement } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"You can't redeem IBTC at the moment because IBTC parachain is more than 6 blocks behind."` - ); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).not.toHaveBeenCalled()); - - mockBtcRelayGetLatestBlockHeight.mockImplementation(() => MOCK_BTC_RELAY_HEIGHT); - mockElectrsAPIGetLatestBlockHeight.mockImplementation(() => MOCK_BITCOIN_HEIGHT); - }); - - it('when the oracle is offline', async () => { - mockOracleGetExchangeRate.mockImplementation( - (currency: CurrencyExt) => new ExchangeRate(Bitcoin, currency, new Big(0)) - ); - - const { changeAmountToRedeem, submitForm, errorElement } = await renderRedeemForm(); - - const inputAmount = 0.0001; - - await changeAmountToRedeem(inputAmount.toString()); - - expect(errorElement.textContent).toMatchInlineSnapshot( - `"You can't redeem IBTC at the moment because oracle is offline."` - ); - - await submitForm(); - - await waitFor(() => expect(mockRedeemRequest).not.toHaveBeenCalled()); - - mockOracleGetExchangeRate.mockImplementation( - (currency: CurrencyExt) => new ExchangeRate(Bitcoin, currency, MOCK_EXCHANGE_RATE) - ); - }); -}); diff --git a/src/test/pages/Swap.test.tsx b/src/test/pages/Swap.test.tsx index f6de8b2438..cd0b82c3c0 100644 --- a/src/test/pages/Swap.test.tsx +++ b/src/test/pages/Swap.test.tsx @@ -12,12 +12,16 @@ const { getLiquidityProvidedByAccount, swap } = MOCK_AMM.MODULE; const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; const { getFutureBlockNumber } = MOCK_SYSTEM.MODULE; +jest.useFakeTimers(); + const path = '/swap'; -jest.mock('../../parts/Layout', () => { +jest.mock('@/components/Layout', () => { const MockedLayout: React.FC = ({ children }: any) => children; MockedLayout.displayName = 'MockedLayout'; - return MockedLayout; + return { + Layout: MockedLayout + }; }); describe('Swap Page', () => { @@ -101,6 +105,8 @@ describe('Swap Page', () => { userEvent.type(screen.getByRole('textbox', { name: 'From' }), TRADE.inputAmount.toString()); + await waitForFeeEstimate(swap); + await waitFor(() => { expect( screen.getByRole('textbox', { @@ -109,8 +115,6 @@ describe('Swap Page', () => { ).toHaveValue(TRADE.outputAmount.toString()); }); - await waitForFeeEstimate(swap); - expect(getFutureBlockNumber).toHaveBeenCalledTimes(1); /* END - Create a trade setup */ @@ -199,6 +203,8 @@ describe('Swap Page', () => { userEvent.type(screen.getByRole('textbox', { name: 'From' }), TRADE.inputAmount.toString()); + await waitForFeeEstimate(swap); + await waitFor(() => { expect( screen.getByRole('textbox', { @@ -207,8 +213,6 @@ describe('Swap Page', () => { ).toHaveValue(TRADE.outputAmount.toString()); }); - await waitForFeeEstimate(swap); - userEvent.click(screen.getByRole('button', { name: /swap/i })); await waitForTransactionExecute(swap); diff --git a/src/test/pages/Wallet.test.tsx b/src/test/pages/Wallet.test.tsx index 1e68ae6dd5..855554869b 100644 --- a/src/test/pages/Wallet.test.tsx +++ b/src/test/pages/Wallet.test.tsx @@ -6,30 +6,12 @@ import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/con import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; -import { - DEFAULT_TOKENS_BALANCE_FN, - EMPTY_TOKENS_BALANCE_FN, - MOCK_AMM, - MOCK_SYSTEM, - mockTokensBalance -} from '../mocks/@interlay/interbtc-api'; +import { MOCK_AMM, MOCK_API, MOCK_LOANS, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api'; import { DEFAULT_STAKED_BALANCE, EMPTY_STAKED_BALANCE, mockGetStakedBalance } from '../mocks/@interlay/interbtc-api/parachain/escrow'; -import { - DEFAULT_BORROW_POSITIONS, - DEFAULT_LEND_POSITIONS, - mockGetBorrowPositionsOfAccount, - mockGetLendPositionsOfAccount -} from '../mocks/@interlay/interbtc-api/parachain/loans'; -import { - EMPTY_VESTING_SCHEDULES, - mockClaimVesting, - mockVestingSchedules, - SOME_VESTING_SCHEDULES -} from '../mocks/@interlay/interbtc-api/parachain/vesting'; import { render, screen, userEvent, waitFor } from '../test-utils'; import { withinList } from './utils/list'; import { queryTable, withinTable, withinTableRow } from './utils/table'; @@ -38,9 +20,13 @@ jest.mock('@/pages/Swap', () => ({ __esModule: true, default: () =>
Swap pa const { getLpTokens, getLiquidityProvidedByAccount } = MOCK_AMM.MODULE; const { getCurrentBlockNumber } = MOCK_SYSTEM.MODULE; +const { getLendPositionsOfAccount, getBorrowPositionsOfAccount } = MOCK_LOANS.MODULE; +const { claimVesting, vestingSchedules } = MOCK_API.MODULE; const { ACCOUNT_LIQUIDITY } = MOCK_AMM.DATA; const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; +const { LOAN_POSITIONS } = MOCK_LOANS.DATA; +const { VESTING_SCHEDULES } = MOCK_API.DATA; const path = '/wallet'; @@ -60,13 +46,12 @@ describe('Wallet Page', () => { // ignoring lp-tokens getLpTokens.mockResolvedValue([]); - mockTokensBalance.mockImplementation(DEFAULT_TOKENS_BALANCE_FN); - mockGetLendPositionsOfAccount.mockReturnValue(DEFAULT_LEND_POSITIONS); - mockGetBorrowPositionsOfAccount.mockReturnValue(DEFAULT_BORROW_POSITIONS); + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE); + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); getLiquidityProvidedByAccount.mockReturnValue(ACCOUNT_LIQUIDITY.EMPTY); mockGetStakedBalance.mockReturnValue(DEFAULT_STAKED_BALANCE); getCurrentBlockNumber.mockReturnValue(BLOCK_NUMBER.CURRENT); - mockVestingSchedules.mockReturnValue(EMPTY_VESTING_SCHEDULES); + vestingSchedules.mockReturnValue(VESTING_SCHEDULES.EMPTY); }); afterEach(() => { @@ -74,7 +59,7 @@ describe('Wallet Page', () => { }); // TODO: add tests for Transfer CTALinks - describe.skip('Available Assets', () => { + describe('Available Assets', () => { it('should render table (desktop)', async () => { await render(, { path }); @@ -118,7 +103,7 @@ describe('Wallet Page', () => { it('should be able to claim vesting', async () => { getCurrentBlockNumber.mockReturnValue(10); - mockVestingSchedules.mockReturnValue(SOME_VESTING_SCHEDULES); + vestingSchedules.mockReturnValue(VESTING_SCHEDULES.FULL); await render(, { path }); @@ -127,7 +112,7 @@ describe('Wallet Page', () => { userEvent.click(row.getByRole('button', { name: /claim vesting/i })); await waitFor(() => { - expect(mockClaimVesting).toHaveBeenCalledTimes(1); + expect(claimVesting).toHaveBeenCalledTimes(1); }); }); @@ -155,17 +140,14 @@ describe('Wallet Page', () => { ); }); - it('should display zero balance assets', async () => { - mockTokensBalance.mockImplementation(EMPTY_TOKENS_BALANCE_FN); - + it('should display all balance assets', async () => { await render(, { path }); const table = withinTable(TABLES.AVAILABLE_ASSETS); - expect(table.queryAllByRole('row')).toHaveLength(0); - expect(screen.getByText(/no assets available/i)).toBeInTheDocument(); + expect(table.getAllByRole('row')).toHaveLength(NATIVE_CURRENCIES.length); - userEvent.click(screen.getByRole('switch', { name: /show zero balance/i })); + userEvent.click(screen.getByRole('switch', { name: /show all/i })); await waitFor(() => { expect(table.queryAllByRole('row')).toHaveLength(NATIVE_CURRENCIES.length); @@ -175,15 +157,17 @@ describe('Wallet Page', () => { describe('Lending Positions', () => { it('should display table', async () => { + getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE); + await render(, { path }); const table = withinTable(TABLES.LEND_POSITIONS); - expect(table.getAllByRole('row')).toHaveLength(DEFAULT_LEND_POSITIONS.length); + expect(table.getAllByRole('row')).toHaveLength(LOAN_POSITIONS.LEND.AVERAGE.length); }); it('should not display table', async () => { - mockGetLendPositionsOfAccount.mockReturnValue([]); + getLendPositionsOfAccount.mockResolvedValue([]); await render(, { path }); @@ -193,15 +177,17 @@ describe('Wallet Page', () => { describe('Borrow Positions', () => { it('should display table', async () => { + getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); + await render(, { path }); const table = withinTable(TABLES.BORROW_POSITIONS); - expect(table.getAllByRole('row')).toHaveLength(DEFAULT_BORROW_POSITIONS.length); + expect(table.getAllByRole('row')).toHaveLength(LOAN_POSITIONS.BORROW.AVERAGE.length); }); it('should not display table', async () => { - mockGetBorrowPositionsOfAccount.mockReturnValue([]); + getBorrowPositionsOfAccount.mockReturnValue([]); await render(, { path }); diff --git a/src/types/bridge.ts b/src/types/bridge.ts deleted file mode 100644 index 30d919ba5c..0000000000 --- a/src/types/bridge.ts +++ /dev/null @@ -1,7 +0,0 @@ -enum BridgeActions { - ISSUE = 'issue', - REDEEM = 'redeem', - BURN = 'burn' -} - -export { BridgeActions }; diff --git a/src/types/loans.ts b/src/types/loans.ts index 2577706910..4faab9f713 100644 --- a/src/types/loans.ts +++ b/src/types/loans.ts @@ -1,3 +1,13 @@ +import { + AccruedRewards, + BorrowPosition, + CollateralPosition as LibCollateralPosition, + CurrencyExt, + LendingStats, + LoanAsset +} from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; + type Lend = 'lend'; type Borrow = 'borrow'; @@ -10,4 +20,18 @@ type BorrowAction = Borrow | 'repay'; type LoanAction = LendAction | BorrowAction; -export type { BorrowAction, LendAction, LoanAction, LoanType }; +interface CollateralPosition extends LibCollateralPosition { + earnedAmount?: MonetaryAmount; +} + +export type { + AccruedRewards, + BorrowAction, + BorrowPosition, + CollateralPosition, + LendAction, + LendingStats, + LoanAction, + LoanAsset, + LoanType +}; diff --git a/src/utils/constants/links.ts b/src/utils/constants/links.ts index 1f5ef54e9d..89a66a3eec 100644 --- a/src/utils/constants/links.ts +++ b/src/utils/constants/links.ts @@ -7,13 +7,19 @@ const URL_PARAMETERS = Object.freeze({ COLLATERAL: 'vaultCollateral', WRAPPED: 'vaultWrapped' }, - TRANSACTION_HASH: 'transactionHash' + TRANSACTION: { + HASH: 'transactionHash' + }, + STRATEGY: { + TYPE: 'strategyType' + } }); const PAGES = Object.freeze({ HOME: '/', BTC: '/btc', STRATEGIES: '/strategies', + STRATEGY: `/strategies/:${URL_PARAMETERS.STRATEGY.TYPE}`, SEND_AND_RECEIVE: '/send-and-receive', TX: '/tx', STAKING: '/staking', diff --git a/src/utils/context/Notifications.tsx b/src/utils/context/Notifications.tsx index e12fec9967..7957a79cd5 100644 --- a/src/utils/context/Notifications.tsx +++ b/src/utils/context/Notifications.tsx @@ -14,7 +14,7 @@ import { TransactionToastProps } from '@/components'; -import { useWallet } from '../hooks/use-wallet'; +import { useWallet } from '../../hooks/use-wallet'; // Allows the introduction of diferent // notifications toast beyond transactions diff --git a/src/utils/helpers/loans.ts b/src/utils/helpers/loans.ts index 35ceb31d07..064c9b7e80 100644 --- a/src/utils/helpers/loans.ts +++ b/src/utils/helpers/loans.ts @@ -4,7 +4,7 @@ import Big from 'big.js'; import { formatPercentage } from '@/common/utils/utils'; -import { Prices } from '../hooks/api/use-get-prices'; +import { Prices } from '../../hooks/api/use-get-prices'; import { getTokenPrice } from './prices'; const MIN_DECIMAL_NUMBER = 0.01; diff --git a/src/utils/helpers/pool.ts b/src/utils/helpers/pool.ts index d49ca19fbd..d4e32186ed 100644 --- a/src/utils/helpers/pool.ts +++ b/src/utils/helpers/pool.ts @@ -2,8 +2,8 @@ import { CurrencyExt, PooledCurrencies } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { convertMonetaryAmountToValueInUSD } from '@/common/utils/utils'; +import { Prices } from '@/hooks/api/use-get-prices'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { Prices } from '@/utils/hooks/api/use-get-prices'; const calculateTotalLiquidityUSD = (pooledCurrencies: PooledCurrencies, prices?: Prices): number => pooledCurrencies.reduce((total, currentAmount) => { diff --git a/src/utils/helpers/pools.ts b/src/utils/helpers/pools.ts index c11997999f..a239ac2677 100644 --- a/src/utils/helpers/pools.ts +++ b/src/utils/helpers/pools.ts @@ -2,7 +2,7 @@ import { CurrencyExt, LiquidityPool, LpCurrency } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import Big from 'big.js'; -import { Prices } from '../hooks/api/use-get-prices'; +import { Prices } from '../../hooks/api/use-get-prices'; import { calculateTotalLiquidityUSD } from './pool'; const getPooledTickers = (liquidityPools: LiquidityPool[]): Set => diff --git a/src/utils/helpers/prices.ts b/src/utils/helpers/prices.ts index ace5905956..3f52765a98 100644 --- a/src/utils/helpers/prices.ts +++ b/src/utils/helpers/prices.ts @@ -1,4 +1,4 @@ -import { Price, Prices } from '../hooks/api/use-get-prices'; +import { Price, Prices } from '../../hooks/api/use-get-prices'; const getTokenPrice = (prices: Prices | undefined, ticker: string): Price | undefined => prices?.[ticker]; diff --git a/src/utils/hooks/api/loans/use-get-account-positions.tsx b/src/utils/hooks/api/loans/use-get-account-positions.tsx deleted file mode 100644 index d1d17f735a..0000000000 --- a/src/utils/hooks/api/loans/use-get-account-positions.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { BorrowPosition, CollateralPosition } from '@interlay/interbtc-api'; -import Big from 'big.js'; -import { useErrorHandler } from 'react-error-boundary'; -import { useQuery } from 'react-query'; - -import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; - -import useAccountId from '../../use-account-id'; - -interface AccountPositionsData { - lendPositions: CollateralPosition[]; - borrowPositions: BorrowPosition[]; -} - -interface PositionsThresholdsData { - collateral: Big; - liquidation: Big; -} - -type UseGetAccountPositions = { - data: Partial & { - hasCollateral: boolean; - }; - refetch: () => void; -}; - -interface UseGetLendPositionsOfAccount { - data: Array | undefined; - refetch: () => void; -} - -interface UseGetBorrowPositionsOfAccount { - data: Array | undefined; - refetch: () => void; -} - -const useGetLendPositionsOfAccount = (): UseGetLendPositionsOfAccount => { - const accountId = useAccountId(); - - const { data, error, refetch } = useQuery({ - queryKey: ['getLendPositionsOfAccount', accountId], - queryFn: async () => { - if (!accountId) { - throw new Error('Something went wrong!'); - } - - return await window.bridge.loans.getLendPositionsOfAccount(accountId); - }, - enabled: !!accountId, - refetchInterval: BLOCKTIME_REFETCH_INTERVAL - }); - - useErrorHandler(error); - - return { data, refetch }; -}; - -const useGetBorrowPositionsOfAccount = (): UseGetBorrowPositionsOfAccount => { - const accountId = useAccountId(); - - const { data, error, refetch } = useQuery({ - queryKey: ['getBorrowPositionsOfAccount', accountId], - queryFn: async () => { - if (!accountId) { - throw new Error('Something went wrong!'); - } - - return await window.bridge.loans.getBorrowPositionsOfAccount(accountId); - }, - enabled: !!accountId, - refetchInterval: BLOCKTIME_REFETCH_INTERVAL - }); - - useErrorHandler(error); - - return { data, refetch }; -}; - -const useGetAccountPositions = (): UseGetAccountPositions => { - const { data: lendPositions, refetch: lendPositionsRefetch } = useGetLendPositionsOfAccount(); - - const { data: borrowPositions, refetch: borrowPositionsRefetch } = useGetBorrowPositionsOfAccount(); - - return { - data: { - borrowPositions: borrowPositions, - lendPositions: lendPositions, - hasCollateral: !!lendPositions?.find((position) => position.isCollateral) - }, - refetch: () => { - lendPositionsRefetch(); - borrowPositionsRefetch(); - } - }; -}; - -export { useGetAccountPositions }; -export type { AccountPositionsData, PositionsThresholdsData }; diff --git a/src/utils/hooks/api/system/use-get-parachain-status.tsx b/src/utils/hooks/api/system/use-get-parachain-status.tsx new file mode 100644 index 0000000000..9a3f54fe6c --- /dev/null +++ b/src/utils/hooks/api/system/use-get-parachain-status.tsx @@ -0,0 +1,37 @@ +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryResult } from 'react-query'; + +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +type ParachainStatusData = { + isRunning: boolean; + isShutdown: boolean; + isError: boolean; +}; + +type UseGetParachainStatusResult = UseQueryResult; + +const getStatus = async (): Promise => { + const statusCode = await window.bridge.system.getStatusCode(); + + return { + isRunning: Boolean(statusCode.isRunning), + isError: Boolean(statusCode.isError), + isShutdown: Boolean(statusCode.isShutdown) + }; +}; + +const useGetParachainStatus = (): UseGetParachainStatusResult => { + const queryResult = useQuery({ + queryKey: 'parachain-status', + queryFn: getStatus, + refetchInterval: REFETCH_INTERVAL.MINUTE + }); + + useErrorHandler(queryResult.error); + + return queryResult; +}; + +export { useGetParachainStatus }; +export type { ParachainStatusData, UseGetParachainStatusResult }; diff --git a/src/utils/hooks/api/tokens/use-get-total-locked-tokens.tsx b/src/utils/hooks/api/tokens/use-get-total-locked-tokens.tsx new file mode 100644 index 0000000000..45d77c0159 --- /dev/null +++ b/src/utils/hooks/api/tokens/use-get-total-locked-tokens.tsx @@ -0,0 +1,40 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryResult } from 'react-query'; + +import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/config/relay-chains'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +type TotalLockedTokensData = { + wrapped: MonetaryAmount; + relay: MonetaryAmount; + governance: MonetaryAmount; +}; + +type UseGetTotalTokensResult = UseQueryResult; + +const getTotalLocked = async (): Promise => { + const [wrapped, relay, governance] = await Promise.all([ + window.bridge.tokens.total(WRAPPED_TOKEN), + window.bridge.tokens.total(RELAY_CHAIN_NATIVE_TOKEN), + window.bridge.tokens.total(GOVERNANCE_TOKEN) + ]); + + return { wrapped, relay, governance }; +}; + +const useGetTotalLockedTokens = (): UseGetTotalTokensResult => { + const queryResult = useQuery({ + queryKey: 'total-locked', + queryFn: getTotalLocked, + refetchInterval: REFETCH_INTERVAL.BLOCK + }); + + useErrorHandler(queryResult.error); + + return queryResult; +}; + +export { useGetTotalLockedTokens }; +export type { TotalLockedTokensData, UseGetTotalTokensResult }; diff --git a/src/utils/hooks/api/use-get-btc-block-height.tsx b/src/utils/hooks/api/use-get-btc-block-height.tsx new file mode 100644 index 0000000000..32d242a715 --- /dev/null +++ b/src/utils/hooks/api/use-get-btc-block-height.tsx @@ -0,0 +1,39 @@ +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery, UseQueryResult } from 'react-query'; + +import { BLOCKS_BEHIND_LIMIT } from '@/config/parachain'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +type BtcBlockHeightData = { + relay: number; + bitcoin: number; + isOutdated: boolean; +}; + +type UseGetBTCBlockHeightResult = UseQueryResult; + +const getBtcBlockHeight = async (): Promise => { + const [relay, bitcoin] = await Promise.all([ + window.bridge.btcRelay.getLatestBlockHeight(), + window.bridge.electrsAPI.getLatestBlockHeight() + ]); + + const isOutdated = bitcoin - relay > BLOCKS_BEHIND_LIMIT; + + return { relay, bitcoin, isOutdated }; +}; + +const useGetBtcBlockHeight = (): UseGetBTCBlockHeightResult => { + const queryResult = useQuery({ + queryKey: 'btc-block-height', + queryFn: getBtcBlockHeight, + refetchInterval: REFETCH_INTERVAL.MINUTE + }); + + useErrorHandler(queryResult.error); + + return queryResult; +}; + +export { useGetBtcBlockHeight }; +export type { BtcBlockHeightData, UseGetBTCBlockHeightResult }; diff --git a/src/utils/hooks/use-faucet.ts b/src/utils/hooks/use-faucet.ts new file mode 100644 index 0000000000..ea44326dcf --- /dev/null +++ b/src/utils/hooks/use-faucet.ts @@ -0,0 +1,79 @@ +import { FaucetClient } from '@interlay/interbtc-api'; +import { useMemo, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useMutation } from 'react-query'; + +import { ACCOUNT_ID_TYPE_NAME } from '@/config/general'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { BITCOIN_NETWORK, FAUCET_URL } from '@/constants'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useWallet } from '@/hooks/use-wallet'; +import { BitcoinNetwork } from '@/types/bitcoin'; + +import { NotificationToastType, useNotifications } from '../context/Notifications'; + +type UseFaucetResult = { + isAvailable: boolean; + buttonProps: { + pending: boolean; + onClick: () => void; + }; +}; + +const useFaucet = (): UseFaucetResult => { + const { t } = useTranslation(); + + const wallet = useWallet(); + const notifications = useNotifications(); + const { getAvailableBalance } = useGetBalances(); + + const faucetRef = useRef(); + + const { mutate, isLoading } = useMutation({ + mutationFn: async (account: string) => { + const faucet = faucetRef.current || new FaucetClient(window.bridge.api, FAUCET_URL); + + faucetRef.current = faucet; + + const receiverId = window.bridge.api.createType(ACCOUNT_ID_TYPE_NAME, account); + await faucet.fundAccount(receiverId, GOVERNANCE_TOKEN); + }, + onSuccess: () => + notifications.show('faucet', { + type: NotificationToastType.STANDARD, + props: { variant: 'success', title: t('notifications.funding_account_successful') } + }), + onError: () => + notifications.show('faucet', { + type: NotificationToastType.STANDARD, + props: { variant: 'error', title: t('notifications.funding_account_failed') } + }) + }); + + const isAvailable = useMemo(() => { + if (isLoading) return true; + + const isTestnet = BITCOIN_NETWORK === BitcoinNetwork.Testnet; + + const hasGovernanceBalance = getAvailableBalance(GOVERNANCE_TOKEN.ticker)?.isZero(); + + return !!wallet.account && isTestnet && !!FAUCET_URL && !!hasGovernanceBalance; + }, [getAvailableBalance, isLoading, wallet.account]); + + const handleFundAccount = () => { + if (!wallet.account || !isAvailable) return; + + mutate(wallet.account.toString()); + }; + + return { + isAvailable, + buttonProps: { + pending: isLoading, + onClick: handleFundAccount + } + }; +}; + +export { useFaucet }; +export type { UseFaucetResult }; diff --git a/src/utils/hooks/use-tab-page-location.tsx b/src/utils/hooks/use-tab-page-location.tsx deleted file mode 100644 index 4ac2e537e4..0000000000 --- a/src/utils/hooks/use-tab-page-location.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Key } from 'react'; -import { useHistory, useLocation } from 'react-router'; - -import { TabsProps } from '@/component-library'; - -const queryString = require('query-string'); - -type UseTabPageLocationResult = { - tabsProps: Pick; -}; - -const useTabPageLocation = (): UseTabPageLocationResult => { - const history = useHistory(); - const location = useLocation(); - const currentQueryParameters = queryString.parse(location.search); - - const handleSelectionChange = (key: Key) => { - const queryParameters = queryString.parse(location.search); - queryParameters.tab = key; - const updatedQueryString = queryString.stringify(queryParameters); - - history.replace({ - pathname: location.pathname, - search: updatedQueryString - }); - }; - - return { - tabsProps: { - defaultSelectedKey: currentQueryParameters.tab, - onSelectionChange: handleSelectionChange - } - }; -}; - -export { useTabPageLocation }; -export type { UseTabPageLocationResult }; diff --git a/yarn.lock b/yarn.lock index fae3fcd531..148843ae1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2189,6 +2189,13 @@ dependencies: "@swc/helpers" "^0.4.14" +"@internationalized/date@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.3.0.tgz#90386d4b4e707f28507d1a1b3cc0e162ad5ee038" + integrity sha512-qfRd7jCIgUjabI8RxeAsxhLDRS1u8eUPX96GB5uBp1Tpm6YY6dVveE7YwsTEV6L4QOp5LKFirFHHGsL/XQwJIA== + dependencies: + "@swc/helpers" "^0.5.0" + "@internationalized/message@^3.0.10": version "3.0.10" resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.10.tgz#340dcfd14ace37234e09419427c991a0c466b96e" @@ -2213,6 +2220,14 @@ "@swc/helpers" "^0.4.14" intl-messageformat "^10.1.0" +"@internationalized/message@^3.1.1": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.1.1.tgz#0f29c5a239b5dcd457b55f21dcd38d1a44a1236a" + integrity sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw== + dependencies: + "@swc/helpers" "^0.5.0" + intl-messageformat "^10.1.0" + "@internationalized/number@^3.1.1", "@internationalized/number@^3.2.0": version "3.2.0" resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.2.0.tgz#dffb661cacd61a87b814c47b7d5240a286249066" @@ -2227,6 +2242,13 @@ dependencies: "@swc/helpers" "^0.4.14" +"@internationalized/number@^3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.2.1.tgz#570e4010544a84a8225e65b34a689a36187caaa8" + integrity sha512-hK30sfBlmB1aIe3/OwAPg9Ey0DjjXvHEiGVhNaOiBJl31G0B6wMaX8BN3ibzdlpyRNE9p7X+3EBONmxtJO9Yfg== + dependencies: + "@swc/helpers" "^0.5.0" + "@internationalized/string@^3.0.0", "@internationalized/string@^3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.1.0.tgz#0b365906a8c3f44800b0db52c2e990cff345abce" @@ -2241,6 +2263,13 @@ dependencies: "@swc/helpers" "^0.4.14" +"@internationalized/string@^3.1.1": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.1.1.tgz#2ab7372d58bbb7ffd3de62fc2a311e4690186981" + integrity sha512-fvSr6YRoVPgONiVIUhgCmIAlifMVCeej/snPZVzbzRPxGpHl3o1GRe+d/qh92D8KhgOciruDUH8I5mjdfdjzfA== + dependencies: + "@swc/helpers" "^0.5.0" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -3504,6 +3533,17 @@ "@swc/helpers" "^0.4.14" clsx "^1.1.1" +"@react-aria/focus@^3.13.0": + version "3.13.0" + resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.13.0.tgz#0134112d52a83a53f15b5f7e7435833c6a69d913" + integrity sha512-9DW7RqgbFWiImZmkmTIJGe9LrQBqEeLYwlKY+F1FTVXerIPiCCQ3JO3ESEa4lFMmkaHoueFLUrq2jkYjRNqoTw== + dependencies: + "@react-aria/interactions" "^3.16.0" + "@react-aria/utils" "^3.18.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + clsx "^1.1.1" + "@react-aria/focus@^3.6.1": version "3.6.1" resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.6.1.tgz#46478d0919bdc4fedfa1ea115b36f93c055ce8d8" @@ -3686,6 +3726,20 @@ "@react-types/shared" "^3.18.1" "@swc/helpers" "^0.4.14" +"@react-aria/i18n@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.8.0.tgz#fe0c6b9ad9fe1e8a139c4d514d4240164c699bf8" + integrity sha512-zeohg7d66zPLnGQl1rJuVJJ/gP7GmUMxEKIFRwE+rg2u02ldKxJMSb8QKGo605QpFWqo7CuuWYvKJP5Mj+Em/w== + dependencies: + "@internationalized/date" "^3.3.0" + "@internationalized/message" "^3.1.1" + "@internationalized/number" "^3.2.1" + "@internationalized/string" "^3.1.1" + "@react-aria/ssr" "^3.7.0" + "@react-aria/utils" "^3.18.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-aria/interactions@^3.10.0": version "3.10.0" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.10.0.tgz#d60cc42c3904c1578f9c356fba4bab7003102dee" @@ -3760,6 +3814,16 @@ "@react-types/shared" "^3.18.1" "@swc/helpers" "^0.4.14" +"@react-aria/interactions@^3.16.0": + version "3.16.0" + resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.16.0.tgz#d3ed51df60d68090114322b853bcc3e9f5f51619" + integrity sha512-vXANFKVd6ONqNw8U+ZWbSA8lrduCOXw7cWsYosTa5dZ24ZJfRfbhlvRe8CaAKMhB/rOOmvTLaAwdIPia6JtLDg== + dependencies: + "@react-aria/ssr" "^3.7.0" + "@react-aria/utils" "^3.18.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-aria/interactions@^3.9.1": version "3.9.1" resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.9.1.tgz#1860b905d9a0b17ed74dd7fe769370e017cb3015" @@ -3819,6 +3883,16 @@ "@react-types/shared" "^3.18.1" "@swc/helpers" "^0.4.14" +"@react-aria/label@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.6.0.tgz#9bf353cd0f3577f14285e8032dddcfe1fc37a8e0" + integrity sha512-o6Z9YAbvywj/b995HOl7fS9vf8FVmhWiJkKwFyCi/M1A7FXBqgtPcdPDNHaaKOhvQcwnLs4iMVMJwZdn/dLVDA== + dependencies: + "@react-aria/utils" "^3.18.0" + "@react-types/label" "^3.7.4" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-aria/link@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.4.0.tgz#f3f7c5277ab9fc0b8c55c76503e1fbe764e02ca6" @@ -4078,6 +4152,23 @@ "@react-aria/utils" "^3.14.1" "@react-types/shared" "^3.16.0" +"@react-aria/slider@^3.5.0": + version "3.5.0" + resolved "https://registry.yarnpkg.com/@react-aria/slider/-/slider-3.5.0.tgz#9b6973af0b6074bb86624eed8a27e2a013ad4f92" + integrity sha512-7qvzWZzwSww/+kLiSC8UJo4csHo8ndFzpzE2jUOom+hKMFomg5gIF4vqJI3ieWwF6rm6bbLmhxN4GvmNebVMwA== + dependencies: + "@react-aria/focus" "^3.13.0" + "@react-aria/i18n" "^3.8.0" + "@react-aria/interactions" "^3.16.0" + "@react-aria/label" "^3.6.0" + "@react-aria/utils" "^3.18.0" + "@react-stately/radio" "^3.8.2" + "@react-stately/slider" "^3.4.0" + "@react-types/radio" "^3.4.2" + "@react-types/shared" "^3.18.1" + "@react-types/slider" "^3.5.1" + "@swc/helpers" "^0.5.0" + "@react-aria/ssr@^3.3.0", "@react-aria/ssr@^3.6.0": version "3.6.0" resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.6.0.tgz#e5d52bd1686ff229f68f806cf94ee29dd9f54fb7" @@ -4092,6 +4183,13 @@ dependencies: "@swc/helpers" "^0.4.14" +"@react-aria/ssr@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.7.0.tgz#7eda2964ab792dc1c3a1fdacbf5bfb185590e9a5" + integrity sha512-bfufjg4ESE5giN+Fxj1XIzS5f/YIhqcGc+Ve+vUUKU8xZ8t/Xtjlv8F3kjqDBQdk//n3mluFY7xG1wQVB9rMLQ== + dependencies: + "@swc/helpers" "^0.5.0" + "@react-aria/switch@^3.2.4": version "3.2.4" resolved "https://registry.yarnpkg.com/@react-aria/switch/-/switch-3.2.4.tgz#6a4f95d89347b77d215b5b6d3640baba0360880b" @@ -4210,6 +4308,17 @@ "@swc/helpers" "^0.4.14" clsx "^1.1.1" +"@react-aria/utils@^3.18.0": + version "3.18.0" + resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.18.0.tgz#50e555ac049f47bff25bc2cef1078352e853d229" + integrity sha512-eLs0ExzXx/D3P9qe6ophJ87ZFcI1oRTyRa51M59pCad7grrpk0gWcYrBjMwcR457YWOQQWCeLuq8QJl2QxCW6Q== + dependencies: + "@react-aria/ssr" "^3.7.0" + "@react-stately/utils" "^3.7.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + clsx "^1.1.1" + "@react-aria/visually-hidden@^3.6.0": version "3.6.0" resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.6.0.tgz#cc4dd9e648a5c8b6d8dfbd1f70d8672b36d3f1bc" @@ -4385,6 +4494,16 @@ "@react-types/overlays" "^3.7.2" "@swc/helpers" "^0.4.14" +"@react-stately/radio@^3.8.2": + version "3.8.2" + resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.8.2.tgz#e7f541211f67fb821b4e47c16b8401f93034139d" + integrity sha512-tjlXask1IEGzzXwdc495K+wsHhyVhtaMhAeTbrdTD1a1fdg2g/jA0vWhN/KGO/CpnZT4vXGjJcY686Rmlrt9EQ== + dependencies: + "@react-stately/utils" "^3.7.0" + "@react-types/radio" "^3.4.2" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-stately/select@^3.4.0": version "3.4.0" resolved "https://registry.yarnpkg.com/@react-stately/select/-/select-3.4.0.tgz#e6df572279b5baed264552032f8060dbf49c9ebb" @@ -4439,6 +4558,18 @@ "@react-types/shared" "^3.18.0" "@swc/helpers" "^0.4.14" +"@react-stately/slider@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@react-stately/slider/-/slider-3.4.0.tgz#1d0a6498a69332703046a8ba85d2b630ddf6e21e" + integrity sha512-VvGJ1XkFIIEXP0eg9xqK/NztimBCSRmEqLgqlwzeDJAtuFXZzPRgJGrodGnqGmhoLsTFaY8YleLh/1hgf6rO0g== + dependencies: + "@react-aria/i18n" "^3.8.0" + "@react-aria/utils" "^3.18.0" + "@react-stately/utils" "^3.7.0" + "@react-types/shared" "^3.18.1" + "@react-types/slider" "^3.5.1" + "@swc/helpers" "^0.5.0" + "@react-stately/table@^3.3.0": version "3.3.0" resolved "https://registry.yarnpkg.com/@react-stately/table/-/table-3.3.0.tgz#87f2b69e323e5f805705d6a722b6ef3d6389319c" @@ -4526,6 +4657,13 @@ dependencies: "@swc/helpers" "^0.4.14" +"@react-stately/utils@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.7.0.tgz#ea99c2c4b5fba7e5079434a1de1ef53fbb21f6a8" + integrity sha512-VbApRiUV2rhozOfk0Qj9xt0qjVbQfLTgAzXLdrfeZSBnyIgo1bFRnjDpnDZKZUUCeGQcJJI03I9niaUtY+kwJQ== + dependencies: + "@swc/helpers" "^0.5.0" + "@react-stately/virtualizer@^3.2.2", "@react-stately/virtualizer@^3.4.1": version "3.4.1" resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.4.1.tgz#00c7b36b989244cf985b9ad5fb13dc1ecbb81a0f" @@ -4693,6 +4831,13 @@ dependencies: "@react-types/shared" "^3.18.1" +"@react-types/radio@^3.4.2": + version "3.4.2" + resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.4.2.tgz#4a6a1f7ff11b71b6b69d13d28fd74de9c903df8c" + integrity sha512-SE6sjZjZbyuJMJNNdlhoutVr+QFRt1Vz7DZj4UaOswW5SD/Xb+xFdW8i6ETKdRN17am/5SC89ltWe0R3q0pVkA== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/select@^3.7.0": version "3.7.0" resolved "https://registry.yarnpkg.com/@react-types/select/-/select-3.7.0.tgz#7d1840525d345625ac6ad69005b192930ca5abec" @@ -4740,6 +4885,13 @@ resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.18.1.tgz#45bac7a1a433916d16535ea583d86a2b4c72ff8c" integrity sha512-OpTYRFS607Ctfd6Tmhyk6t6cbFyDhO5K+etU35X50pMzpypo1b7vF0mkngEeTc0Xwl0e749ONZNPZskMyu5k8w== +"@react-types/slider@^3.5.1": + version "3.5.1" + resolved "https://registry.yarnpkg.com/@react-types/slider/-/slider-3.5.1.tgz#bae46025de7d02a84918b3aca0e3ffd647e4fdf2" + integrity sha512-8+AMNexx7q7DqfAtQKC5tgnZdG/tIwG2tcEbFCfAQA09Djrt/xiMNz+mc7SsV1PWoWwVuSDFH9QqKPodOrJHDg== + dependencies: + "@react-types/shared" "^3.18.1" + "@react-types/switch@^3.2.4": version "3.2.4" resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.2.4.tgz#6853793032da50415be1abbac1374fca08ea5e44" @@ -5832,6 +5984,13 @@ dependencies: tslib "^2.4.0" +"@swc/helpers@^0.5.0": + version "0.5.1" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.1.tgz#e9031491aa3f26bfcc974a67f48bd456c8a5357a" + integrity sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg== + dependencies: + tslib "^2.4.0" + "@szmarczak/http-timer@^5.0.1": version "5.0.1" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a" From 8676878117c7c5c31044ff5dd309d22362ccb70a Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 24 Aug 2023 10:43:58 +0100 Subject: [PATCH 23/58] [release] Kintsugi 2.38.0 (#1532) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- .github/ISSUE_TEMPLATE/roadmap.md | 49 ++++++++++++ .github/workflows/projects.yml | 10 ++- package.json | 5 +- src/assets/icons/ChevronRight.tsx | 21 ++++++ src/assets/icons/index.ts | 1 + .../Breadcrumbs/BreadcrumbItem.tsx | 56 ++++++++++++++ .../Breadcrumbs/Breadcrumbs.stories.tsx | 20 +++++ .../Breadcrumbs/Breadcrumbs.style.tsx | 40 ++++++++++ .../Breadcrumbs/Breadcrumbs.tsx | 55 ++++++++++++++ src/component-library/Breadcrumbs/index.tsx | 10 +++ src/component-library/index.tsx | 2 + src/component-library/theme/theme.ts | 1 + src/components/AuthCTA/AuthCTA.tsx | 18 +---- .../SlippageManager/SlippageManager.tsx | 3 + src/hooks/api/oracle/use-get-oracle-status.ts | 3 +- .../cards/ParachainSecurityCard/index.tsx | 74 ------------------- src/pages/Dashboard/index.tsx | 4 - src/pages/Dashboard/sub-pages/Home/index.tsx | 2 - .../Dashboard/sub-pages/Parachain/index.tsx | 23 ------ .../Vaults/LockedCollateralCard/index.tsx | 2 +- src/pages/Strategies/Strategy/Strategy.tsx | 6 +- .../interbtc-api/parachain/system.ts | 1 - .../api/system/use-get-parachain-status.tsx | 37 ---------- yarn.lock | 59 ++++++++++++--- 24 files changed, 330 insertions(+), 172 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/roadmap.md create mode 100644 src/assets/icons/ChevronRight.tsx create mode 100644 src/component-library/Breadcrumbs/BreadcrumbItem.tsx create mode 100644 src/component-library/Breadcrumbs/Breadcrumbs.stories.tsx create mode 100644 src/component-library/Breadcrumbs/Breadcrumbs.style.tsx create mode 100644 src/component-library/Breadcrumbs/Breadcrumbs.tsx create mode 100644 src/component-library/Breadcrumbs/index.tsx delete mode 100644 src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx delete mode 100644 src/pages/Dashboard/sub-pages/Parachain/index.tsx delete mode 100644 src/utils/hooks/api/system/use-get-parachain-status.tsx diff --git a/.github/ISSUE_TEMPLATE/roadmap.md b/.github/ISSUE_TEMPLATE/roadmap.md new file mode 100644 index 0000000000..b55df6d288 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/roadmap.md @@ -0,0 +1,49 @@ +--- +name: Roadmap +about: Add a new item to the roadmap +title: '' +labels: 'roadmap' +assignees: '' + +--- + +# Abstract + +[ADD HERE] + +A 2-3 sentence description of the proposal. + +# Motivation + +[ADD HERE] + +Provide a motivation for including this proposal. + +# Specification + +[ADD HERE] + +Provide a high-level, functional specification. The specification should be focussed on what the proposal is trying to achieve. + +## [OPTIONAL]Extensions + +[OPTIONAL][ADD HERE] + +### [OPTIONAL][TITLE] + +[OPTIONAL][ADD HERE] + +# Reference Implementation + +[OPTIONAL][ADD HERE] + +Provide a reference implementation, proof of concept, or basic pseudo-code for a better grounds to discuss the suggested implementation. The reference implementation focusses on the how. + +# Security Considerations + +[ADD HERE] + +Provide reasoning around security implications: + +- The proposal itself +- The propsals implications to the existing system diff --git a/.github/workflows/projects.yml b/.github/workflows/projects.yml index 163059d1ba..c9b7209f64 100644 --- a/.github/workflows/projects.yml +++ b/.github/workflows/projects.yml @@ -7,10 +7,18 @@ on: jobs: add-to-project: - name: Add issue and pull request to project + name: Add issue and pull request to backlog runs-on: ubuntu-latest steps: - uses: actions/add-to-project@v0.4.0 with: project-url: https://github.com/orgs/interlay/projects/3 github-token: ${{ secrets.PROJECTS }} + label: roadmap + label-operator: NOT + - uses: actions/add-to-project@v0.4.0 + with: + project-url: https://github.com/orgs/interlay/projects/4 + github-token: ${{ secrets.PROJECTS }} + label: roadmap + label-operator: OR diff --git a/package.json b/package.json index 543bb257f7..37a070c783 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "interbtc-ui", - "version": "2.37.0", + "version": "2.38.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", "@interlay/bridge": "^0.3.13", - "@interlay/interbtc-api": "2.3.7", + "@interlay/interbtc-api": "2.4.3", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "9.14.2", "@polkadot/extension-dapp": "0.44.1", @@ -15,6 +15,7 @@ "@polkadot/ui-keyring": "^2.9.7", "@reach/tooltip": "^0.16.0", "@react-aria/accordion": "^3.0.0-alpha.14", + "@react-aria/breadcrumbs": "^3.5.3", "@react-aria/button": "^3.6.4", "@react-aria/dialog": "^3.3.1", "@react-aria/focus": "^3.6.1", diff --git a/src/assets/icons/ChevronRight.tsx b/src/assets/icons/ChevronRight.tsx new file mode 100644 index 0000000000..d98eac583a --- /dev/null +++ b/src/assets/icons/ChevronRight.tsx @@ -0,0 +1,21 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const ChevronRight = forwardRef((props, ref) => ( + + + +)); + +ChevronRight.displayName = 'ChevronRight'; + +export { ChevronRight }; diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 5ad0ea092d..94ef00075d 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -5,6 +5,7 @@ export { ArrowsUpDown } from './ArrowsUpDown'; export { ArrowTopRightOnSquare } from './ArrowTopRightOnSquare'; export { CheckCircle } from './CheckCircle'; export { ChevronDown } from './ChevronDown'; +export { ChevronRight } from './ChevronRight'; export { Cog } from './Cog'; export { DocumentDuplicate } from './DocumentDuplicate'; export { InformationCircle } from './InformationCircle'; diff --git a/src/component-library/Breadcrumbs/BreadcrumbItem.tsx b/src/component-library/Breadcrumbs/BreadcrumbItem.tsx new file mode 100644 index 0000000000..e8884970bb --- /dev/null +++ b/src/component-library/Breadcrumbs/BreadcrumbItem.tsx @@ -0,0 +1,56 @@ +import { AriaBreadcrumbsProps, useBreadcrumbItem } from '@react-aria/breadcrumbs'; +import { mergeProps } from '@react-aria/utils'; +import { AnchorHTMLAttributes, Fragment, useRef } from 'react'; + +import { ChevronRight } from '@/assets/icons'; + +import { TextLinkProps } from '../TextLink'; +import { StyledLinkBreadcrumb, StyledSpanBreadcrumb } from './Breadcrumbs.style'; + +type Props = { + isDisabled?: boolean; + isCurrent: boolean; + to: TextLinkProps['to']; +}; + +type InheritAttrs = Omit; + +type NativeAttrs = Omit, keyof (Props & InheritAttrs)>; + +type BreadcrumbItemProps = Props & NativeAttrs & InheritAttrs; + +const BreadcrumbItem = ({ children, isDisabled, isCurrent, to, ...props }: BreadcrumbItemProps): JSX.Element => { + const ref = useRef(null); + const { itemProps } = useBreadcrumbItem( + { + ...props, + children, + isDisabled: isCurrent, + elementType: isCurrent ? 'span' : 'a' + }, + ref + ); + + const commonProps: Pick = { + size: 's', + color: isCurrent ? 'secondary' : 'tertiary' + }; + + return ( + + {isCurrent ? ( + + {children} + + ) : ( + + {children} + + )} + {isCurrent === false && } + + ); +}; + +export { BreadcrumbItem }; +export type { BreadcrumbItemProps }; diff --git a/src/component-library/Breadcrumbs/Breadcrumbs.stories.tsx b/src/component-library/Breadcrumbs/Breadcrumbs.stories.tsx new file mode 100644 index 0000000000..8cdd9ca6cc --- /dev/null +++ b/src/component-library/Breadcrumbs/Breadcrumbs.stories.tsx @@ -0,0 +1,20 @@ +import { Meta, Story } from '@storybook/react'; + +import { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from '.'; + +const Template: Story = (args) => ( + + Strategies + BTC Passive Income + +); + +const Default = Template.bind({}); +Default.args = {}; + +export { Default }; + +export default { + title: 'Forms/Breadcrumbs', + component: Breadcrumbs +} as Meta; diff --git a/src/component-library/Breadcrumbs/Breadcrumbs.style.tsx b/src/component-library/Breadcrumbs/Breadcrumbs.style.tsx new file mode 100644 index 0000000000..2a5ee1e0fa --- /dev/null +++ b/src/component-library/Breadcrumbs/Breadcrumbs.style.tsx @@ -0,0 +1,40 @@ +import styled from 'styled-components'; + +import { Span } from '../Text'; +import { TextLink } from '../TextLink'; +import { theme } from '../theme'; + +type StyledBreadcrumbProps = { + $isDisabled?: boolean; +}; + +const StyledNav = styled.nav``; + +const StyledList = styled.ul` + flex-wrap: nowrap; + flex: 1 0; + justify-content: flex-start; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; +`; + +const StyledListItem = styled.li` + justify-content: flex-start; + align-items: center; + display: inline-flex; + position: relative; +`; + +const StyledSpanBreadcrumb = styled(Span)` + padding: 0 ${theme.spacing.spacing2}; + cursor: default; +`; + +const StyledLinkBreadcrumb = styled(TextLink)` + padding: 0 ${theme.spacing.spacing2}; + text-decoration: none; +`; + +export { StyledLinkBreadcrumb, StyledList, StyledListItem, StyledNav, StyledSpanBreadcrumb }; diff --git a/src/component-library/Breadcrumbs/Breadcrumbs.tsx b/src/component-library/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000000..16e79c8ced --- /dev/null +++ b/src/component-library/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,55 @@ +import { AriaBreadcrumbsProps, useBreadcrumbs } from '@react-aria/breadcrumbs'; +import { Children, forwardRef, HTMLAttributes, isValidElement, ReactElement } from 'react'; + +import { useDOMRef } from '../utils/dom'; +import { BreadcrumbItem } from './BreadcrumbItem'; +import { StyledList, StyledListItem, StyledNav } from './Breadcrumbs.style'; + +type Props = { + onAction?: (key: React.Key) => void; + isDisabled?: boolean; +}; + +type NativeAttrs = Omit, keyof Props>; + +type InheritAttrs = Omit; + +type BreadcrumbsProps = Props & NativeAttrs & InheritAttrs; + +const Breadcrumbs = forwardRef( + ({ children, isDisabled, ...props }, ref): JSX.Element => { + const domRef = useDOMRef(ref); + + const { navProps } = useBreadcrumbs(props); + + const childArray: ReactElement[] = []; + Children.forEach(children, (child) => { + if (isValidElement(child)) { + childArray.push(child); + } + }); + + const lastIndex = childArray.length - 1; + + const breadcrumbItems = childArray.map((child, index) => { + const isCurrent = index === lastIndex; + + return ( + + + + ); + }); + + return ( + + {breadcrumbItems} + + ); + } +); + +Breadcrumbs.displayName = 'Breadcrumbs'; + +export { Breadcrumbs }; +export type { BreadcrumbsProps }; diff --git a/src/component-library/Breadcrumbs/index.tsx b/src/component-library/Breadcrumbs/index.tsx new file mode 100644 index 0000000000..f22a966e3c --- /dev/null +++ b/src/component-library/Breadcrumbs/index.tsx @@ -0,0 +1,10 @@ +import { BreadcrumbItem as LibBreadcrumbItem, BreadcrumbItemProps as LibBreadcrumbItemProps } from './BreadcrumbItem'; + +type BreadcrumbItemProps = Omit; + +const BreadcrumbItem = (props: BreadcrumbItemProps): JSX.Element => ; + +export type { BreadcrumbsProps } from './Breadcrumbs'; +export { Breadcrumbs } from './Breadcrumbs'; +export { BreadcrumbItem }; +export type { BreadcrumbItemProps }; diff --git a/src/component-library/index.tsx b/src/component-library/index.tsx index 5fc8268b6c..791aab74ce 100644 --- a/src/component-library/index.tsx +++ b/src/component-library/index.tsx @@ -2,6 +2,8 @@ export type { AccordionItemProps, AccordionProps } from './Accordion'; export { Accordion, AccordionItem } from './Accordion'; export type { AlertProps } from './Alert'; export { Alert } from './Alert'; +export type { BreadcrumbItemProps, BreadcrumbsProps } from './Breadcrumbs'; +export { BreadcrumbItem, Breadcrumbs } from './Breadcrumbs'; export type { CardProps } from './Card'; export { Card } from './Card'; export type { CoinIconProps } from './CoinIcon'; diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts index 1d17b0c68b..c52e6df778 100644 --- a/src/component-library/theme/theme.ts +++ b/src/component-library/theme/theme.ts @@ -517,6 +517,7 @@ const theme = { }, icon: { sizes: { + xs: 'var(--spacing-3)', s: 'var(--spacing-4)', md: 'var(--spacing-6)', lg: 'var(--spacing-8)', diff --git a/src/components/AuthCTA/AuthCTA.tsx b/src/components/AuthCTA/AuthCTA.tsx index f799fce007..0fd9408a08 100644 --- a/src/components/AuthCTA/AuthCTA.tsx +++ b/src/components/AuthCTA/AuthCTA.tsx @@ -7,19 +7,16 @@ import { CTA, CTAProps } from '@/component-library'; import { SIGNER_API_URL } from '@/constants'; import { useSignMessage } from '@/hooks/use-sign-message'; import { useSubstrateSecureState } from '@/lib/substrate'; -import { useGetParachainStatus } from '@/utils/hooks/api/system/use-get-parachain-status'; enum AuthStatus { UNAUTH, AUTH, - UNSIGNED, - BLOCKED + UNSIGNED } const useAuthCTAProps = (props: AuthCTAProps): AuthCTAProps => { const { t } = useTranslation(); const { hasSignature, buttonProps } = useSignMessage(); - const { data: parachainStatus } = useGetParachainStatus(); const { selectedAccount } = useSubstrateSecureState(); @@ -28,12 +25,8 @@ const useAuthCTAProps = (props: AuthCTAProps): AuthCTAProps => { return AuthStatus.UNAUTH; } - if (!parachainStatus?.isRunning) { - return AuthStatus.BLOCKED; - } - return !SIGNER_API_URL || hasSignature ? AuthStatus.AUTH : AuthStatus.UNSIGNED; - }, [hasSignature, parachainStatus, selectedAccount]); + }, [hasSignature, selectedAccount]); const dispatch = useDispatch(); @@ -54,13 +47,6 @@ const useAuthCTAProps = (props: AuthCTAProps): AuthCTAProps => { disabled: false, children: t('sign_t&cs') }; - case AuthStatus.BLOCKED: - return { - ...buttonProps, - type: 'button', - disabled: true, - children - }; case AuthStatus.UNAUTH: default: return { diff --git a/src/components/SlippageManager/SlippageManager.tsx b/src/components/SlippageManager/SlippageManager.tsx index 126db75d19..aa13b8add5 100644 --- a/src/components/SlippageManager/SlippageManager.tsx +++ b/src/components/SlippageManager/SlippageManager.tsx @@ -42,6 +42,9 @@ const SlippageManager = forwardRef( onSelectionChange={handleSelectionChange} defaultSelectedKeys={[value.toString()]} > + + 0% + 0.1% diff --git a/src/hooks/api/oracle/use-get-oracle-status.ts b/src/hooks/api/oracle/use-get-oracle-status.ts index a3b4fd632a..f570eec613 100644 --- a/src/hooks/api/oracle/use-get-oracle-status.ts +++ b/src/hooks/api/oracle/use-get-oracle-status.ts @@ -1,5 +1,6 @@ import { useQuery } from 'react-query'; +import { RELAY_CHAIN_NATIVE_TOKEN } from '@/config/relay-chains'; import { REFETCH_INTERVAL } from '@/utils/constants/api'; interface UseGetOracleStatusResult { @@ -13,7 +14,7 @@ enum OracleStatus { } const getOracleStatus = async (): Promise => { - const isOracleOnline = await window.bridge.oracle.isOnline(); + const isOracleOnline = await window.bridge.oracle.isOnline(RELAY_CHAIN_NATIVE_TOKEN); return isOracleOnline ? OracleStatus.ONLINE : OracleStatus.OFFLINE; }; diff --git a/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx b/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx deleted file mode 100644 index c04d5f250e..0000000000 --- a/src/pages/Dashboard/cards/ParachainSecurityCard/index.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import clsx from 'clsx'; -import { useTranslation } from 'react-i18next'; - -import { WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; -import Ring64, { Ring64Title, Ring64Value } from '@/legacy-components/Ring64'; -import { PAGES } from '@/utils/constants/links'; -import { getColorShade } from '@/utils/helpers/colors'; -import { useGetParachainStatus } from '@/utils/hooks/api/system/use-get-parachain-status'; - -import Stats, { StatsRouterLink } from '../../Stats'; -import DashboardCard from '../DashboardCard'; - -interface Props { - hasLinks?: boolean; -} - -const ParachainSecurityCard = ({ hasLinks }: Props): JSX.Element => { - const { t } = useTranslation(); - - const { data: parachainStatus, isLoading } = useGetParachainStatus(); - - const getParachainStatusText = () => { - if (!parachainStatus && !isLoading) { - return t('no_data'); - } - - if (!parachainStatus || isLoading) { - return t('loading'); - } - - if (parachainStatus.isError || parachainStatus.isShutdown) { - return t('dashboard.parachain.halted'); - } - - return t('dashboard.parachain.secure'); - }; - - return ( - - {hasLinks && Status updates}} - /> - - - {getParachainStatusText()} - - - {t('dashboard.parachain.parachain_is', { - wrappedTokenSymbol: WRAPPED_TOKEN_SYMBOL - })} - - - - ); -}; - -export default ParachainSecurityCard; diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index 668d2d44b2..bf150e0f36 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -6,7 +6,6 @@ import { PAGES } from '@/utils/constants/links'; const Home = React.lazy(() => import(/* webpackChunkName: 'home' */ './sub-pages/Home')); const Vaults = React.lazy(() => import(/* webpackChunkName: 'vaults' */ './sub-pages/Vaults')); -const Parachain = React.lazy(() => import(/* webpackChunkName: 'parachain' */ './sub-pages/Parachain')); const Oracles = React.lazy(() => import(/* webpackChunkName: 'oracles' */ './sub-pages/Oracles')); const IssueRequests = React.lazy(() => import(/* webpackChunkName: 'issue-requests' */ './sub-pages/IssueRequests')); const RedeemRequests = React.lazy(() => import(/* webpackChunkName: 'redeem-requests' */ './sub-pages/RedeemRequests')); @@ -21,9 +20,6 @@ const Dashboard = (): JSX.Element => { - - - diff --git a/src/pages/Dashboard/sub-pages/Home/index.tsx b/src/pages/Dashboard/sub-pages/Home/index.tsx index 18108967b4..d44f14f398 100644 --- a/src/pages/Dashboard/sub-pages/Home/index.tsx +++ b/src/pages/Dashboard/sub-pages/Home/index.tsx @@ -8,7 +8,6 @@ import ActiveVaultsCard from '../../cards/ActiveVaultsCard'; import BTCRelayCard from '../../cards/BTCRelayCard'; import CollateralizationCard from '../../cards/CollateralizationCard'; import OracleStatusCard from '../../cards/OracleStatusCard'; -import ParachainSecurityCard from '../../cards/ParachainSecurityCard'; import ActiveCollatorsCard from './ActiveCollatorsCard'; import LockedCollateralsCard from './LockedCollateralsCard'; import WrappedTokenCard from './WrappedTokenCard'; @@ -23,7 +22,6 @@ const Home = (): JSX.Element => { - diff --git a/src/pages/Dashboard/sub-pages/Parachain/index.tsx b/src/pages/Dashboard/sub-pages/Parachain/index.tsx deleted file mode 100644 index 4b5a4a47ec..0000000000 --- a/src/pages/Dashboard/sub-pages/Parachain/index.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { useTranslation } from 'react-i18next'; - -import Hr1 from '@/legacy-components/hrs/Hr1'; -import PageTitle from '@/legacy-components/PageTitle'; -import TimerIncrement from '@/legacy-components/TimerIncrement'; - -import ParachainSecurityCard from '../../cards/ParachainSecurityCard'; - -const Parachain = (): JSX.Element => { - const { t } = useTranslation(); - - return ( - <> -
- } /> - -
- - - ); -}; - -export default Parachain; diff --git a/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx b/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx index af5eea9735..982c6341ff 100644 --- a/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/Vaults/LockedCollateralCard/index.tsx @@ -47,7 +47,7 @@ const LockedCollateralCard = ({ if (cumulativeVolumes === undefined) { throw new Error('Something went wrong!'); } - const totalLockedCollateralTokenAmount = cumulativeVolumes.slice(-1)[0].amount; + const totalLockedCollateralTokenAmount = cumulativeVolumes.slice(-1)[0]?.amount; let chartLineColor; if (process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT) { diff --git a/src/pages/Strategies/Strategy/Strategy.tsx b/src/pages/Strategies/Strategy/Strategy.tsx index f3902782f4..d9e2fbad88 100644 --- a/src/pages/Strategies/Strategy/Strategy.tsx +++ b/src/pages/Strategies/Strategy/Strategy.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next'; import { useHistory, useParams } from 'react-router'; -import { Card, CoinIcon, Flex, H1, H2, P, TextLink } from '@/component-library'; +import { BreadcrumbItem, Breadcrumbs, Card, CoinIcon, Flex, H1, H2, P, TextLink } from '@/component-library'; import { MainContainer } from '@/components'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { PAGES, URL_PARAMETERS } from '@/utils/constants/links'; @@ -39,6 +39,10 @@ const Strategy = (): JSX.Element | null => { return ( + + {t('navigation.strategies')} + {title} +

{title} diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/system.ts b/src/test/mocks/@interlay/interbtc-api/parachain/system.ts index 457501ec8f..66a3c8c7db 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/system.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/system.ts @@ -22,7 +22,6 @@ const MODULE: Record> = { getCurrentActiveBlockNumber: jest.fn().mockResolvedValue(CURRENT_ACTIVE_BLOCK_NUMBER), getCurrentBlockNumber: jest.fn().mockResolvedValue(CURRENT_BLOCK_NUMBER), getFutureBlockNumber: jest.fn().mockResolvedValue(FUTURE_BLOCK_NUMBER), - getStatusCode: jest.fn().mockResolvedValue(STATUS_CODE), getBlockHash: jest.fn(), setCode: jest.fn(), subscribeToCurrentBlockHeads: jest.fn(), diff --git a/src/utils/hooks/api/system/use-get-parachain-status.tsx b/src/utils/hooks/api/system/use-get-parachain-status.tsx deleted file mode 100644 index 9a3f54fe6c..0000000000 --- a/src/utils/hooks/api/system/use-get-parachain-status.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { useErrorHandler } from 'react-error-boundary'; -import { useQuery, UseQueryResult } from 'react-query'; - -import { REFETCH_INTERVAL } from '@/utils/constants/api'; - -type ParachainStatusData = { - isRunning: boolean; - isShutdown: boolean; - isError: boolean; -}; - -type UseGetParachainStatusResult = UseQueryResult; - -const getStatus = async (): Promise => { - const statusCode = await window.bridge.system.getStatusCode(); - - return { - isRunning: Boolean(statusCode.isRunning), - isError: Boolean(statusCode.isError), - isShutdown: Boolean(statusCode.isShutdown) - }; -}; - -const useGetParachainStatus = (): UseGetParachainStatusResult => { - const queryResult = useQuery({ - queryKey: 'parachain-status', - queryFn: getStatus, - refetchInterval: REFETCH_INTERVAL.MINUTE - }); - - useErrorHandler(queryResult.error); - - return queryResult; -}; - -export { useGetParachainStatus }; -export type { ParachainStatusData, UseGetParachainStatusResult }; diff --git a/yarn.lock b/yarn.lock index 148843ae1e..3d55a76db9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2125,13 +2125,13 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.3.7": - version "2.3.7" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.3.7.tgz#26d4fa574531fe9eea3f0d49364f7476da9713cf" - integrity sha512-w9xPaUa3wTTXOb83pHbSqlE3E8V2iA4WE4IlOu23Zqth4hnG0h819WynlfzUsAPGug6RkZkHWIKnu+85V95g5A== +"@interlay/interbtc-api@2.4.3": + version "2.4.3" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.4.3.tgz#1b1b953d792a168f7a3d20014c8255b78cf08119" + integrity sha512-0j8sPekmyhf6m8Qa4gnYndUx5Uu8XB+4E0nxhrUsVN62zSNrxSu8Ubn6sjlwOXUmgqB1BJRZe/PV3hj2OiWgUw== dependencies: "@interlay/esplora-btc-api" "0.4.0" - "@interlay/interbtc-types" "1.12.0" + "@interlay/interbtc-types" "1.13.0" "@interlay/monetary-js" "0.7.3" "@polkadot/api" "9.14.2" big.js "6.1.1" @@ -2147,10 +2147,10 @@ resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.11.0.tgz#5b94066ddee1fd677de928531db36e6ae439e08f" integrity sha512-bn3XjyRlXyhe1QKUHx5IEQJDNC6LoSCJJIkTnSp5xm52GRBEWgHOvLAnfJi3gyj7A3lV/yA2Xjqf294bZgMmfw== -"@interlay/interbtc-types@1.12.0": - version "1.12.0" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.12.0.tgz#07dc8e15690292387124dbc2bbb7bf5bc8b68001" - integrity sha512-ELJa2ftIbe8Ds2ejS7kO5HumN9EB5l2OBi3Qsy5iHJsHKq2HtXfFoKnW38HarM6hADrWG+e/yNGHSKJIJzEZuA== +"@interlay/interbtc-types@1.13.0": + version "1.13.0" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.13.0.tgz#0e09badf10861b4c8a5087b4358da317e464a14a" + integrity sha512-oUjavcfnX7lxlMd10qGc48/MoATX37TQcuSAZBIUmpCRiJ15hZbQoTAKGgWMPsla3+3YqUAzkWUEVMwUvM1U+w== "@interlay/monetary-js@0.7.3": version "0.7.3" @@ -3474,6 +3474,19 @@ "@react-types/shared" "^3.16.0" "@swc/helpers" "^0.4.14" +"@react-aria/breadcrumbs@^3.5.3": + version "3.5.3" + resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.3.tgz#05d4d811d7a665ccf6b0b411a2c0ab0f4fb4638e" + integrity sha512-rmkApAflZm7Finn3vxLGv7MbsMaPo5Bn7/lf8GBztNfzmLWP/dAA5bgvi1sj1T6sWJOuFJT8u04ImUwBCLh8cQ== + dependencies: + "@react-aria/i18n" "^3.8.0" + "@react-aria/interactions" "^3.16.0" + "@react-aria/link" "^3.5.2" + "@react-aria/utils" "^3.18.0" + "@react-types/breadcrumbs" "^3.6.0" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-aria/button@^3.6.4": version "3.6.4" resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.6.4.tgz#51927c9d968d0c1f741ee2081ca7f2e244abbc12" @@ -3905,6 +3918,18 @@ "@react-types/shared" "^3.17.0" "@swc/helpers" "^0.4.14" +"@react-aria/link@^3.5.2": + version "3.5.2" + resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.5.2.tgz#68b99721eeddffb87c42541419f08333eada37d9" + integrity sha512-CCFP11Uietro6TUZpWBoq3Ql/6qss/ODC5XM6oNxckj72IHruFIj8V7Y0tL5x0aE6h38hlKcDf8NCxkQqz2edg== + dependencies: + "@react-aria/focus" "^3.13.0" + "@react-aria/interactions" "^3.16.0" + "@react-aria/utils" "^3.18.0" + "@react-types/link" "^3.4.3" + "@react-types/shared" "^3.18.1" + "@swc/helpers" "^0.5.0" + "@react-aria/listbox@^3.8.0": version "3.9.0" resolved "https://registry.yarnpkg.com/@react-aria/listbox/-/listbox-3.9.0.tgz#243d9a863d2592f003aa2c7604962e4db1d57dee" @@ -4680,6 +4705,14 @@ dependencies: "@react-types/shared" "^3.16.0" +"@react-types/breadcrumbs@^3.6.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/@react-types/breadcrumbs/-/breadcrumbs-3.6.0.tgz#6a5b5e459597172d7f23f2ecbc9e11c94d2a3f2a" + integrity sha512-EnZk/f59yMQUmH2DW21uo3ajQ7nLEZ/sIMSfEZYP69CFe1by0RKi9aFRjJSrYjxRC0PSHTVPTjIG72KeBSsUGA== + dependencies: + "@react-types/link" "^3.4.3" + "@react-types/shared" "^3.18.1" + "@react-types/button@^3.7.0": version "3.7.0" resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.7.0.tgz#774c043d8090a505e60fdf26f026d5f0cc968f0f" @@ -4766,6 +4799,14 @@ "@react-aria/interactions" "^3.14.0" "@react-types/shared" "^3.17.0" +"@react-types/link@^3.4.3": + version "3.4.3" + resolved "https://registry.yarnpkg.com/@react-types/link/-/link-3.4.3.tgz#51534673ea35cf6583b950319bafd16ff76296dc" + integrity sha512-opKfkcaeV0cir64jPcy7DS0BrmdfuWMjua+MSeNv7FfT/b65rFgPfAOKZcvLWDsaxT5HYb7pivYPBfjKqHsQKw== + dependencies: + "@react-aria/interactions" "^3.16.0" + "@react-types/shared" "^3.18.1" + "@react-types/listbox@^3.4.0", "@react-types/listbox@^3.4.1": version "3.4.1" resolved "https://registry.yarnpkg.com/@react-types/listbox/-/listbox-3.4.1.tgz#3d9f5859ad4eb550a6c1c532042316b32e43b606" From df44eaf01ae3ce9edfd8ece607b5c30175a6977e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= Date: Fri, 25 Aug 2023 16:59:17 +0100 Subject: [PATCH 24/58] fix: hotfix Kintsugi 2.38.0 (#1543) --- .../transaction/hooks/use-transaction.ts | 11 ++++- src/hooks/transaction/submission/submit.ts | 17 +++++-- .../components/DepositForm/DepositForm.tsx | 17 ++----- src/test/pages/Pools.test.tsx | 46 ------------------- 4 files changed, 26 insertions(+), 65 deletions(-) diff --git a/src/hooks/transaction/hooks/use-transaction.ts b/src/hooks/transaction/hooks/use-transaction.ts index 14e39be1b6..0294d7ad59 100644 --- a/src/hooks/transaction/hooks/use-transaction.ts +++ b/src/hooks/transaction/hooks/use-transaction.ts @@ -70,7 +70,16 @@ function useTransaction( onReady: () => onSigning(params) }; - return submitTransaction(window.bridge.api, params.accountAddress, feeWrappedExtrinsic, expectedStatus, events); + const shouldDryRun = params.type !== Transaction.XCM_TRANSFER; + + return submitTransaction( + window.bridge.api, + params.accountAddress, + feeWrappedExtrinsic, + expectedStatus, + events, + shouldDryRun + ); }, [feeData?.amount, onSigning, pools] ); diff --git a/src/hooks/transaction/submission/submit.ts b/src/hooks/transaction/submission/submit.ts index 2eaa71bc9a..ddf21fca36 100644 --- a/src/hooks/transaction/submission/submit.ts +++ b/src/hooks/transaction/submission/submit.ts @@ -15,7 +15,8 @@ const handleTransaction = async ( account: AddressOrPair, extrinsicData: ExtrinsicData, expectedStatus?: ExtrinsicStatus['type'], - callbacks?: TransactionEvents + callbacks?: TransactionEvents, + shouldDryRun?: boolean ) => { let isComplete = false; @@ -28,7 +29,7 @@ const handleTransaction = async ( // Extrinsic is signed at first and then we use the same signed extrinsic // for dry-running and submission. .signAsync(account, { nonce: -1 }) - .then(dryRun) + .then((signedExtrinsic) => (shouldDryRun ? dryRun(signedExtrinsic) : signedExtrinsic)) .then((signedExtrinsic) => signedExtrinsic.send(callback)) .then((unsub) => (unsubscribe = unsub)) .catch((error) => reject(error)); @@ -59,6 +60,7 @@ const handleTransaction = async ( * @param {ExtrinsicData} extrinsicData transaction extrinsic data * @param {ExtrinsicStatus.type} expectedStatus status where the transaction is counted as fulfilled * @param {TransactionEvents} callbacks a set of events emitted accross the lifecycle of the transaction (i.e Bro) + * @param {boolean} shouldDryRun wether dry run should be executed * @return {Promise} transaction data that also can contain meta data in case of error */ const submitTransaction = async ( @@ -66,9 +68,16 @@ const submitTransaction = async ( account: AddressOrPair, extrinsicData: ExtrinsicData, expectedStatus?: ExtrinsicStatus['type'], - callbacks?: TransactionEvents + callbacks?: TransactionEvents, + shouldDryRun?: boolean ): Promise => { - const { result, unsubscribe } = await handleTransaction(account, extrinsicData, expectedStatus, callbacks); + const { result, unsubscribe } = await handleTransaction( + account, + extrinsicData, + expectedStatus, + callbacks, + shouldDryRun + ); unsubscribe(); diff --git a/src/pages/Pools/components/DepositForm/DepositForm.tsx b/src/pages/Pools/components/DepositForm/DepositForm.tsx index 0673db1da6..26d0064bbe 100644 --- a/src/pages/Pools/components/DepositForm/DepositForm.tsx +++ b/src/pages/Pools/components/DepositForm/DepositForm.tsx @@ -28,11 +28,6 @@ import { PoolName } from '../PoolName'; import { StyledPlusDivider, StyledTokenInput } from './DepositForm.styles'; import { DepositOutputAssets } from './DepositOutputAssets'; -const isCustomAmountsMode = (form: ReturnType, pool: LiquidityPool) => - // If pool has no liquidity, the assets ratio is set by the user, - // therefore the value inputted is directly used. - (form.dirty && Object.values(form.touched).filter(Boolean).length > 0) || pool.isEmpty; - type DepositFormProps = { pool: LiquidityPool; overlappingModalRef: RefObject; @@ -45,8 +40,6 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi const [slippage, setSlippage] = useState(0.1); - const [isCustomMode, setCustomMode] = useState(false); - const accountId = useAccountId(); const { t } = useTranslation(); const { getAvailableBalance } = useGetBalances(); @@ -64,7 +57,7 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi if (feeCurrencyAmount && transaction.fee.data) { const newFeeCurrencyAmount = transaction.calculateAmountWithFeeDeducted(feeCurrencyAmount); - if (isCustomMode) { + if (pool.isEmpty) { return amounts.map((amount) => transaction.fee.isEqualFeeCurrency(amount.currency) ? newFeeCurrencyAmount : amount ); @@ -75,7 +68,7 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi return amounts; }, - [isCustomMode, pool, transaction] + [pool, transaction] ); const getTransactionArgs = useCallback( @@ -148,11 +141,7 @@ const DepositForm = ({ pool, overlappingModalRef, onSuccess, onSigning }: Deposi }); const handleChange: ChangeEventHandler = async (e) => { - const isCustom = isCustomAmountsMode(form, pool); - - if (isCustom) { - return setCustomMode(true); - } + if (pool.isEmpty) return; if (!e.target.value || isNaN(Number(e.target.value))) { return form.setValues({ ...form.values, ...defaultValues }); diff --git a/src/test/pages/Pools.test.tsx b/src/test/pages/Pools.test.tsx index 9280f99d9e..a7b4808b6f 100644 --- a/src/test/pages/Pools.test.tsx +++ b/src/test/pages/Pools.test.tsx @@ -206,52 +206,6 @@ describe('Pools Page', () => { getClaimableFarmingRewards.mockReturnValue(CLAIMABLE_REWARDS); }); - it('should be able to enter customisable input amounts mode', async () => { - jest - .spyOn(LIQUIDITY_POOLS.ONE, 'getLiquidityDepositInputAmounts') - .mockReturnValue(LIQUIDITY_POOLS.ONE.pooledCurrencies); - - const [DEFAULT_CURRENCY_1, DEFAULT_CURRENCY_2] = LIQUIDITY_POOLS.ONE.pooledCurrencies; - - await render(, { path }); - - const tabPanel = await withinModalTabPanel(TABLES.AVAILABLE_POOLS, LP_TOKEN_A.ticker, TABS.DEPOSIT); - - await userEvent.type( - tabPanel.getByRole('textbox', { - name: new RegExp(`${DEFAULT_CURRENCY_1.currency.ticker} deposit amount`, 'i') - }), - DEFAULT_CURRENCY_1.toString(), - { delay: 1 } - ); - - expect(LIQUIDITY_POOLS.ONE.getLiquidityDepositInputAmounts).toHaveBeenCalledWith(DEFAULT_CURRENCY_1); - - await waitFor(() => { - expect( - tabPanel.getByRole('textbox', { - name: new RegExp(`${DEFAULT_CURRENCY_2.currency.ticker} deposit amount`, 'i') - }) - ).toHaveValue(DEFAULT_CURRENCY_2.toString()); - }); - - await userEvent.type( - tabPanel.getByRole('textbox', { - name: new RegExp(`${DEFAULT_CURRENCY_2.currency.ticker} deposit amount`, 'i') - }), - '10', - { delay: 1 } - ); - - await waitFor(() => { - expect( - tabPanel.getByRole('textbox', { - name: new RegExp(`${DEFAULT_CURRENCY_1.currency.ticker} deposit amount`, 'i') - }) - ).toHaveValue(DEFAULT_CURRENCY_1.toString()); - }); - }); - it('should render illiquid pool and deposit with custom ratio', async () => { jest .spyOn(LIQUIDITY_POOLS.EMPTY, 'getLiquidityDepositInputAmounts') From d65cd73c8ea09112cac40dde24ace9c2f307822d Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Fri, 1 Sep 2023 12:05:22 +0100 Subject: [PATCH 25/58] Tom/hotfix/warning banner (#1550) * feature: add warning banner to legacy components * Revert "feature: add warning banner to legacy components" This reverts commit 64460727e5e13655ef66dfb91058d972d623708c. * hotfix: add warning banner and feature flag * fix: text link component * add feature flag to env file --- .env.dev | 1 + src/App.tsx | 11 +++++++++++ src/hooks/use-feature-flag.ts | 6 ++++-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/.env.dev b/.env.dev index 883d93374a..c6f126c259 100644 --- a/.env.dev +++ b/.env.dev @@ -2,6 +2,7 @@ /* FEATURE FLAGS */ REACT_APP_FEATURE_FLAG_STRATEGIES=enabled REACT_APP_FEATURE_FLAG_ONBOARDING=enabled +REACT_APP_FEATURE_FLAG_GLOBAL_WARNING=enabled /* DEVELOPMENT */ diff --git a/src/App.tsx b/src/App.tsx index 461c4d81f1..46094ae3bd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { Route, Switch } from 'react-router-dom'; import { isVaultClientLoaded } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; +import { Alert, TextLink } from '@/component-library'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; @@ -48,6 +49,7 @@ const App = (): JSX.Element => { const dispatch = useDispatch(); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); + const isGlobalWarningEnabled = useFeatureFlag(FeatureFlags.GLOBAL_WARNING); // Detects if the connected account is a vault operator const { error: vaultsError } = useQuery, Error>( @@ -80,6 +82,15 @@ const App = (): JSX.Element => { return ( + {isGlobalWarningEnabled && ( + + Kusama parachains, including Kintsugi, have stopped producing blocks due to{' '} + + an ongoing issue on Kusama + + . The relay chain is continuing to produce blocks as per normal. + + )} {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && } ( diff --git a/src/hooks/use-feature-flag.ts b/src/hooks/use-feature-flag.ts index c5d356ac2c..bb3ca981b5 100644 --- a/src/hooks/use-feature-flag.ts +++ b/src/hooks/use-feature-flag.ts @@ -1,13 +1,15 @@ enum FeatureFlags { STRATEGIES = 'strategies', GEOBLOCK = 'geoblock', - ONBOARDING = 'onboarding' + ONBOARDING = 'onboarding', + GLOBAL_WARNING = 'global_warning' } const featureFlags: Record = { [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK, - [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING + [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING, + [FeatureFlags.GLOBAL_WARNING]: process.env.REACT_APP_FEATURE_FLAG_GLOBAL_WARNING }; const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled'; From d2b6053d0d00358a1c7dfda8a3e59e3943888701 Mon Sep 17 00:00:00 2001 From: Dominik Harz Date: Sat, 2 Sep 2023 10:16:39 +0900 Subject: [PATCH 26/58] chore: trigger deployment From 6a6ee6df0fd091a32c1d579a502f65eb16bc3074 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 26 Sep 2023 10:39:58 +0100 Subject: [PATCH 27/58] [release] Kintsugi 2.38.1 (#1568) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- .env.dev | 4 +- .github/workflows/projects.yml | 2 +- api/market_data.py | 7 +- package.json | 6 +- src/App.tsx | 23 +--- src/assets/locales/en/translation.json | 8 +- src/common/utils/utils.ts | 3 +- src/component-library/Alert/Alert.style.tsx | 4 +- src/component-library/Alert/Alert.tsx | 2 +- src/component-library/utils/format.ts | 3 +- .../MainContainer/MainContainer.tsx | 14 ++- .../SiteInformation/SiteInformation.tsx | 21 ++++ src/components/SiteInformation/index.tsx | 1 + src/components/index.tsx | 1 + .../use-get-account-lending-statistics.tsx | 5 +- .../use-get-account-positions-earnings.tsx | 10 +- .../api/loans/use-get-account-positions.tsx | 41 ++++--- .../loans/use-get-loan-available-amounts.tsx | 6 +- src/hooks/api/use-get-dex-volume.tsx | 10 +- src/hooks/api/xcm/xcm-endpoints.ts | 3 +- src/hooks/transaction/extrinsics/lib.ts | 111 +++++++++++++++++- src/hooks/transaction/types/index.ts | 1 + src/hooks/transaction/types/strategies.ts | 20 +++- src/hooks/transaction/utils/description.ts | 6 +- src/hooks/transaction/utils/fee.ts | 10 +- ...all-cumulative-vault-collateral-volumes.ts | 25 ++++ src/hooks/use-feature-flag.ts | 6 +- src/legacy-components/TestnetBanner/index.tsx | 14 --- src/lib/form/schemas/strategies.ts | 34 +++++- .../cards/OracleStatusCard/index.tsx | 17 ++- .../Home/LockedCollateralsCard/index.tsx | 65 +++------- src/pages/Strategies/Strategy/Strategy.tsx | 5 +- .../StrategyForm/StrategyDepositForm.tsx | 100 ++++++++++++---- .../StrategyFormTransactionFees.tsx | 108 +++++++++++++++++ .../StrategyForm/StrategyWithdrawalForm.tsx | 94 +++++++++++---- .../use-get-strategy-available-amounts.ts | 6 +- .../hooks/use-get-strategy-position.ts | 8 +- .../hooks/use-get-strategy-proxy-account.ts | 92 +++++++++++++++ .../IssueRedeemForm/IssueRedeemForm.tsx | 5 +- ...lative-vault-collateral-volumes-fetcher.ts | 80 +++++++++++++ .../fetchers/cumulative-volumes-fetcher.ts | 39 ++---- src/utils/constants/account.ts | 10 +- src/utils/helpers/extrinsic.ts | 9 ++ 43 files changed, 792 insertions(+), 247 deletions(-) create mode 100644 src/components/SiteInformation/SiteInformation.tsx create mode 100644 src/components/SiteInformation/index.tsx create mode 100644 src/hooks/use-all-cumulative-vault-collateral-volumes.ts delete mode 100644 src/legacy-components/TestnetBanner/index.tsx create mode 100644 src/pages/Strategies/components/StrategyForm/StrategyFormTransactionFees.tsx create mode 100644 src/pages/Strategies/hooks/use-get-strategy-proxy-account.ts create mode 100644 src/services/fetchers/cumulative-vault-collateral-volumes-fetcher.ts create mode 100644 src/utils/helpers/extrinsic.ts diff --git a/.env.dev b/.env.dev index c6f126c259..4508afb933 100644 --- a/.env.dev +++ b/.env.dev @@ -2,7 +2,6 @@ /* FEATURE FLAGS */ REACT_APP_FEATURE_FLAG_STRATEGIES=enabled REACT_APP_FEATURE_FLAG_ONBOARDING=enabled -REACT_APP_FEATURE_FLAG_GLOBAL_WARNING=enabled /* DEVELOPMENT */ @@ -15,6 +14,9 @@ REACT_APP_FAUCET_URL="http://localhost:3035" REACT_APP_RELAY_CHAIN_NAME="kusama" DOCKER_RELAY_CHAIN_CURRENCY="KSM" REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd" +REACT_APP_SITE_INFORMATION_MESSAGE="This is an informational message that will be shown on every page of the application." +REACT_APP_SITE_INFORMATION_LINK="https://gobob.xyz" + // Kintsugi testnet diff --git a/.github/workflows/projects.yml b/.github/workflows/projects.yml index c9b7209f64..7883a3c60f 100644 --- a/.github/workflows/projects.yml +++ b/.github/workflows/projects.yml @@ -21,4 +21,4 @@ jobs: project-url: https://github.com/orgs/interlay/projects/4 github-token: ${{ secrets.PROJECTS }} label: roadmap - label-operator: OR + label-operator: AND diff --git a/api/market_data.py b/api/market_data.py index 42e5b9698f..6c2c7eeae3 100644 --- a/api/market_data.py +++ b/api/market_data.py @@ -23,7 +23,12 @@ "kintsugi": "/Kintsugi/Token:KINT", "acala-dollar": "/Acala/Token:AUSD", "karura": "/Bifrost/518", - "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7" + "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7", + "voucher-dot": "/Bifrost-polkadot/2304", + "binancecoin": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", + "bnb": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", + "tbtc": "/Ethereum/0x18084fbA666a33d37592fA2633fD49a74DD93a88", + "dai": "/Ethereum/0x6B175474E89094C44Da98b954EedeAC495271d0F", } @app.after_request diff --git a/package.json b/package.json index 37a070c783..4bb28ed380 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.38.0", + "version": "2.38.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", @@ -158,7 +158,7 @@ "@polkadot/util-crypto": "^10.2.4" }, "scripts": { - "start": "craco start", + "start": "NODE_OPTIONS=--openssl-legacy-provider craco start", "start-regtest": "cross-env REACT_APP_BITCOIN_NETWORK=regtest yarn start", "start-testnet": "cross-env REACT_APP_BITCOIN_NETWORK=testnet yarn start", "generate:defs": "ts-node --skip-project node_modules/.bin/polkadot-types-from-defs --package sample-polkadotjs-typegen/interfaces --input ./src/interfaces", @@ -168,7 +168,7 @@ "type-check": "tsc", "format": "yarn prettier --write src", "setup": "yarn generate:defs && yarn generate:meta", - "build": "REACT_APP_VERSION=$npm_package_version craco build", + "build": "NODE_OPTIONS=--openssl-legacy-provider REACT_APP_VERSION=$npm_package_version craco build", "build-with-webpack-bundle-analysis": "yarn build --stats && webpack-bundle-analyzer build/bundle-stats.json -m static -r build/bundle-stats.html -O", "lint-and-type-check": "yarn lint && yarn type-check", "eject": "react-scripts eject", diff --git a/src/App.tsx b/src/App.tsx index 46094ae3bd..84a8e033ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,23 +5,20 @@ import * as React from 'react'; import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; import { useQuery } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; -import { Route, Switch } from 'react-router-dom'; +import { Redirect, Route, Switch } from 'react-router-dom'; import { isVaultClientLoaded } from '@/common/actions/general.actions'; import { StoreType } from '@/common/types/util.types'; -import { Alert, TextLink } from '@/component-library'; +import { Layout, TransactionModal } from '@/components'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate'; import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher'; import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query'; -import { BitcoinNetwork } from '@/types/bitcoin'; import { PAGES } from '@/utils/constants/links'; -import { Layout, TransactionModal } from './components'; import * as constants from './constants'; import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag'; -import TestnetBanner from './legacy-components/TestnetBanner'; const BTC = React.lazy(() => import(/* webpackChunkName: 'btc' */ '@/pages/BTC')); const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies')); @@ -49,7 +46,6 @@ const App = (): JSX.Element => { const dispatch = useDispatch(); const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES); const isOnboardingEnabled = useFeatureFlag(FeatureFlags.ONBOARDING); - const isGlobalWarningEnabled = useFeatureFlag(FeatureFlags.GLOBAL_WARNING); // Detects if the connected account is a vault operator const { error: vaultsError } = useQuery, Error>( @@ -82,16 +78,6 @@ const App = (): JSX.Element => { return ( - {isGlobalWarningEnabled && ( - - Kusama parachains, including Kintsugi, have stopped producing blocks due to{' '} - - an ongoing issue on Kusama - - . The relay chain is continuing to produce blocks as per normal. - - )} - {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && } ( }> @@ -130,7 +116,7 @@ const App = (): JSX.Element => { - + {isStrategiesEnabled && ( @@ -151,6 +137,9 @@ const App = (): JSX.Element => { + + + diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 9d245c5770..d20252b086 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -667,7 +667,8 @@ }, "strategy": { "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:", - "update_position": "Update position" + "update_position": "Update position", + "initialize": "Initialize strategy" }, "transaction": { "recent_transactions": "Recent transactions", @@ -779,6 +780,9 @@ "low_risk_approach_generate_passive_income": "Discover a straightforward and low-risk approach to generate passive income. This strategy lends out deposited {{ticker}} to borrowers, allowing you to earn interest effortlessly", "how_does_it_work": "How does it work?", "what_are_the_risk": "What are the risks?", - "discover_fundamental_origins": "Discover the fundamental origins of the position, potential risks involved, the allocation of your capital, and other pertinent details in the docs section." + "discover_fundamental_origins": "Discover the fundamental origins of the position, potential risks involved, the allocation of your capital, and other pertinent details in the docs section.", + "proxy_deposit": "{{currency}} Proxy Deposit", + "proxy_deposit_tooltip": "This amount will be locked while the strategy is active. When you fully exit strategy deposit will be returned.", + "proxy_deposit_insufficient_funds": "Insufficient funds: 26 {{currency}} is required for proxy deposit locking." } } diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts index 37bd09e264..693636ce3f 100644 --- a/src/common/utils/utils.ts +++ b/src/common/utils/utils.ts @@ -78,7 +78,8 @@ const formatUSD = (amount: number, options?: { compact?: boolean }): string => { const { format } = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', - notation: options?.compact ? getFormatUSDNotation(amount) : undefined + notation: options?.compact ? getFormatUSDNotation(amount) : undefined, + minimumFractionDigits: amount > 0 && amount < 0.01 ? 3 : undefined }); return format(amount); diff --git a/src/component-library/Alert/Alert.style.tsx b/src/component-library/Alert/Alert.style.tsx index 01f03865af..2940f4b8b6 100644 --- a/src/component-library/Alert/Alert.style.tsx +++ b/src/component-library/Alert/Alert.style.tsx @@ -12,14 +12,14 @@ interface StyledAlertProps { const StyledAlert = styled(Flex)` padding: ${theme.spacing.spacing2}; - color: ${({ $status }) => theme.alert.status[$status]}; border: 1px solid ${({ $status }) => theme.alert.status[$status]}; background-color: ${({ $status }) => theme.alert.bg[$status]}; border-radius: ${theme.rounded.md}; font-size: ${theme.text.xs}; `; -const StyledWarningIcon = styled(WarningIcon)` +const StyledWarningIcon = styled(WarningIcon)` + color: ${({ $status }) => theme.alert.status[$status]}; width: ${theme.spacing.spacing5}; height: ${theme.spacing.spacing5}; flex-shrink: 0; diff --git a/src/component-library/Alert/Alert.tsx b/src/component-library/Alert/Alert.tsx index 2b58cfecf6..aac2b7c679 100644 --- a/src/component-library/Alert/Alert.tsx +++ b/src/component-library/Alert/Alert.tsx @@ -12,7 +12,7 @@ type AlertProps = Props & InheritAttrs; const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => ( - +
{children}
 ); diff --git a/src/component-library/utils/format.ts b/src/component-library/utils/format.ts index 8f520ada3f..505d55414b 100644 --- a/src/component-library/utils/format.ts +++ b/src/component-library/utils/format.ts @@ -8,7 +8,8 @@ const formatUSD = (amount: number, options?: { compact?: boolean }): string => { const { format } = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD', - notation: options?.compact ? getFormatUSDNotation(amount) : undefined + notation: options?.compact ? getFormatUSDNotation(amount) : undefined, + minimumFractionDigits: amount > 0 && amount < 0.01 ? 3 : undefined }); return format(amount); diff --git a/src/components/MainContainer/MainContainer.tsx b/src/components/MainContainer/MainContainer.tsx index d32ae26b10..773a413f72 100644 --- a/src/components/MainContainer/MainContainer.tsx +++ b/src/components/MainContainer/MainContainer.tsx @@ -1,11 +1,19 @@ import { FlexProps } from '@/component-library'; +import { SiteInformation } from '@/components'; import { StyledContainer } from './MainContainer.styles'; type MainContainerProps = FlexProps; -const MainContainer = ({ direction = 'column', gap = 'spacing8', ...props }: MainContainerProps): JSX.Element => ( - -); +const MainContainer = ({ direction = 'column', gap = 'spacing8', ...props }: MainContainerProps): JSX.Element => { + const showSiteInformationMessage = !!process.env.REACT_APP_SITE_INFORMATION_MESSAGE; + + return ( + + {showSiteInformationMessage && } + {props.children} + + ); +}; export { MainContainer }; diff --git a/src/components/SiteInformation/SiteInformation.tsx b/src/components/SiteInformation/SiteInformation.tsx new file mode 100644 index 0000000000..6610025083 --- /dev/null +++ b/src/components/SiteInformation/SiteInformation.tsx @@ -0,0 +1,21 @@ +import { Alert, TextLink } from '@/component-library'; + +const SiteInformation = (): JSX.Element => { + const hasLink = !!process.env.REACT_APP_SITE_INFORMATION_LINK; + + return ( + + {process.env.REACT_APP_SITE_INFORMATION_MESSAGE} + {hasLink && ( + <> + {' '} + + More information + + + )} + + ); +}; + +export { SiteInformation }; diff --git a/src/components/SiteInformation/index.tsx b/src/components/SiteInformation/index.tsx new file mode 100644 index 0000000000..a614215aa9 --- /dev/null +++ b/src/components/SiteInformation/index.tsx @@ -0,0 +1 @@ +export { SiteInformation } from './SiteInformation'; diff --git a/src/components/index.tsx b/src/components/index.tsx index 6069e639c8..800c588f63 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -27,6 +27,7 @@ export { PlusDivider } from './PlusDivider'; export type { PoolsTableProps } from './PoolsTable'; export { PoolsTable } from './PoolsTable'; export { ReceivableAssets } from './ReceivableAssets'; +export { SiteInformation } from './SiteInformation'; export type { SlippageManagerProps } from './SlippageManager'; export { SlippageManager } from './SlippageManager'; export type { ToastContainerProps } from './ToastContainer'; diff --git a/src/hooks/api/loans/use-get-account-lending-statistics.tsx b/src/hooks/api/loans/use-get-account-lending-statistics.tsx index 88d750d77f..b56c5cce1a 100644 --- a/src/hooks/api/loans/use-get-account-lending-statistics.tsx +++ b/src/hooks/api/loans/use-get-account-lending-statistics.tsx @@ -1,4 +1,5 @@ import { TickerToData } from '@interlay/interbtc-api'; +import { AccountId } from '@polkadot/types/interfaces'; import Big from 'big.js'; import { useMemo } from 'react'; @@ -92,11 +93,11 @@ const getAccountPositionsStats = ( }; }; -const useGetAccountLendingStatistics = (): UseGetAccountLendingStatistics => { +const useGetAccountLendingStatistics = (proxyAccount?: AccountId): UseGetAccountLendingStatistics => { const { data: { lendPositions, borrowPositions }, refetch: positionsRefetch - } = useGetAccountPositions(); + } = useGetAccountPositions(proxyAccount); const { data: loanAssets, refetch: loanAssetsRefetch } = useGetLoanAssets(); const prices = useGetPrices(); diff --git a/src/hooks/api/loans/use-get-account-positions-earnings.tsx b/src/hooks/api/loans/use-get-account-positions-earnings.tsx index fe59c2173d..66fffb92a1 100644 --- a/src/hooks/api/loans/use-get-account-positions-earnings.tsx +++ b/src/hooks/api/loans/use-get-account-positions-earnings.tsx @@ -1,5 +1,6 @@ import { CurrencyExt, newMonetaryAmount, TickerToData } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; +import { AccountId } from '@polkadot/types/interfaces'; import Big from 'big.js'; import { gql, GraphQLClient } from 'graphql-request'; import { useCallback } from 'react'; @@ -68,12 +69,15 @@ type UseGetAccountPositionsEarningsResult = { }; const useGetAccountPositionsEarnings = ( - lendPositions: CollateralPosition[] | undefined + lendPositions: CollateralPosition[] | undefined, + proxyAccount?: AccountId ): UseGetAccountPositionsEarningsResult => { - const { account } = useWallet(); + const { account: primaryAccount } = useWallet(); + + const account = proxyAccount || primaryAccount; const { refetch, isLoading, data, error } = useQuery({ - queryKey: ['loan-earnings', account], + queryKey: ['loan-earnings', account, proxyAccount], queryFn: () => lendPositions && account && getEarnedAmountByTicker(account.toString(), lendPositions), enabled: !!lendPositions && !!account, refetchOnWindowFocus: false, diff --git a/src/hooks/api/loans/use-get-account-positions.tsx b/src/hooks/api/loans/use-get-account-positions.tsx index 6b745db598..895d1425fd 100644 --- a/src/hooks/api/loans/use-get-account-positions.tsx +++ b/src/hooks/api/loans/use-get-account-positions.tsx @@ -4,10 +4,10 @@ import { useCallback } from 'react'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; +import { useWallet } from '@/hooks/use-wallet'; import { BorrowPosition, CollateralPosition } from '@/types/loans'; import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; -import useAccountId from '../../use-account-id'; import { useGetAccountPositionsEarnings } from './use-get-account-positions-earnings'; const getLendPositionsOfAccount = async (accountId: AccountId): Promise> => @@ -19,13 +19,15 @@ interface UseGetLendPositionsOfAccountResult { refetch: () => void; } -const useGetLendPositionsOfAccount = (): UseGetLendPositionsOfAccountResult => { - const accountId = useAccountId(); +const useGetLendPositionsOfAccount = (proxyAccount?: AccountId): UseGetLendPositionsOfAccountResult => { + const { account: primaryAccount } = useWallet(); + + const account = proxyAccount || primaryAccount; const { data, error, refetch, isLoading } = useQuery({ - queryKey: ['getLendPositionsOfAccount', accountId], - queryFn: () => accountId && getLendPositionsOfAccount(accountId), - enabled: !!accountId, + queryKey: ['getLendPositionsOfAccount', account?.toString(), proxyAccount], + queryFn: () => account && getLendPositionsOfAccount(account), + enabled: !!account, refetchInterval: BLOCKTIME_REFETCH_INTERVAL }); @@ -40,19 +42,15 @@ interface UseGetBorrowPositionsOfAccountResult { refetch: () => void; } -const useGetBorrowPositionsOfAccount = (): UseGetBorrowPositionsOfAccountResult => { - const accountId = useAccountId(); +const useGetBorrowPositionsOfAccount = (proxyAccount?: AccountId): UseGetBorrowPositionsOfAccountResult => { + const { account: primaryAccount } = useWallet(); - const { data, error, refetch, isLoading } = useQuery({ - queryKey: ['getBorrowPositionsOfAccount', accountId], - queryFn: async () => { - if (!accountId) { - throw new Error('Something went wrong!'); - } + const account = proxyAccount || primaryAccount; - return await window.bridge.loans.getBorrowPositionsOfAccount(accountId); - }, - enabled: !!accountId, + const { data, error, refetch, isLoading } = useQuery({ + queryKey: ['getBorrowPositionsOfAccount', account?.toString()], + queryFn: () => account && window.bridge.loans.getBorrowPositionsOfAccount(account), + enabled: !!account, refetchInterval: BLOCKTIME_REFETCH_INTERVAL }); @@ -76,21 +74,22 @@ type UseGetAccountPositionsResult = { refetch: () => void; }; -const useGetAccountPositions = (): UseGetAccountPositionsResult => { +const useGetAccountPositions = (proxyAccount?: AccountId): UseGetAccountPositionsResult => { const { data: lendPositionsWithoutEarnings, isLoading: isLendPositionsLoading, refetch: lendPositionsRefetch - } = useGetLendPositionsOfAccount(); + } = useGetLendPositionsOfAccount(proxyAccount); const { data: borrowPositions, isLoading: isBorrowPositionsLoading, refetch: borrowPositionsRefetch - } = useGetBorrowPositionsOfAccount(); + } = useGetBorrowPositionsOfAccount(proxyAccount); const { getPositionEarnings, isLoading: isAccountEarningsLoading } = useGetAccountPositionsEarnings( - lendPositionsWithoutEarnings + lendPositionsWithoutEarnings, + proxyAccount ); const lendPositions: CollateralPosition[] | undefined = lendPositionsWithoutEarnings?.map((position) => ({ diff --git a/src/hooks/api/loans/use-get-loan-available-amounts.tsx b/src/hooks/api/loans/use-get-loan-available-amounts.tsx index a35a261b19..5457668bb6 100644 --- a/src/hooks/api/loans/use-get-loan-available-amounts.tsx +++ b/src/hooks/api/loans/use-get-loan-available-amounts.tsx @@ -1,5 +1,6 @@ import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; +import { AccountId } from '@polkadot/types/interfaces'; import { useCallback } from 'react'; import { useGetAccountLendingStatistics } from '@/hooks/api/loans/use-get-account-lending-statistics'; @@ -138,10 +139,11 @@ type UseGetLoanAvailableAmountsResult = { const useGetLoanAvailableAmounts = ( action: BorrowAction | LendAction, asset: LoanAsset, - position?: CollateralPosition | BorrowPosition + position?: CollateralPosition | BorrowPosition, + proxyAccount?: AccountId | undefined ): UseGetLoanAvailableAmountsResult => { const { getAvailableBalance } = useGetBalances(); - const { data: statistics } = useGetAccountLendingStatistics(); + const { data: statistics } = useGetAccountLendingStatistics(proxyAccount); const maxCalculatedAmount = getMaxCalculatedAmount(action, asset, position, statistics); diff --git a/src/hooks/api/use-get-dex-volume.tsx b/src/hooks/api/use-get-dex-volume.tsx index 82ce60870b..4d494d20f3 100644 --- a/src/hooks/api/use-get-dex-volume.tsx +++ b/src/hooks/api/use-get-dex-volume.tsx @@ -57,7 +57,11 @@ const GET_DEX_VOLUMES = gql` ...AmountFields } } - endVolumes: cumulativeDexTradingVolumes(limit: 1, orderBy: tillTimestamp_DESC, where: { tillTimestamp_lte: $end }) { + endVolumes: cumulativeDexTradingVolumes( + limit: 1 + orderBy: tillTimestamp_DESC + where: { tillTimestamp_lte: $end, tillTimestamp_gte: $start } + ) { tillTimestamp amounts { ...AmountFields @@ -95,6 +99,10 @@ const useGetDexVolumes = (range: DateRangeVolume): UseGetCurrenciesResult => { const data = await graphQLClient.request(GET_DEX_VOLUMES, { start, end }); + if (!data.startVolumes.length || !data.endVolumes.length) { + return {}; + } + const [startVolumes] = data.startVolumes; const [endVolumes] = data.endVolumes; diff --git a/src/hooks/api/xcm/xcm-endpoints.ts b/src/hooks/api/xcm/xcm-endpoints.ts index 73fbbe80c7..7f40bd7a80 100644 --- a/src/hooks/api/xcm/xcm-endpoints.ts +++ b/src/hooks/api/xcm/xcm-endpoints.ts @@ -13,8 +13,7 @@ const XCMEndpoints: XCMEndpointsRecord = { 'wss://karura-rpc-0.aca-api.network', 'wss://karura-rpc-1.aca-api.network', 'wss://karura-rpc-2.aca-api.network/ws', - 'wss://karura-rpc-3.aca-api.network/ws', - 'wss://karura-rpc.dwellir.com' + 'wss://karura-rpc-3.aca-api.network/ws' ], kintsugi: ['wss://api-kusama.interlay.io/parachain'], kusama: ['wss://kusama-rpc.polkadot.io', 'wss://kusama-rpc.dwellir.com'], diff --git a/src/hooks/transaction/extrinsics/lib.ts b/src/hooks/transaction/extrinsics/lib.ts index 04950ac7a6..4e8d09ad4f 100644 --- a/src/hooks/transaction/extrinsics/lib.ts +++ b/src/hooks/transaction/extrinsics/lib.ts @@ -1,5 +1,8 @@ import { ExtrinsicData } from '@interlay/interbtc-api'; +import { DEFAULT_PROXY_ACCOUNT_AMOUNT, PROXY_ACCOUNT_RESERVE_AMOUNT } from '@/utils/constants/account'; +import { proxifyExtrinsic } from '@/utils/helpers/extrinsic'; + import { LibActions, Transaction } from '../types'; const getLibExtrinsic = async (params: LibActions): Promise => { @@ -67,13 +70,109 @@ const getLibExtrinsic = async (params: LibActions): Promise => { /* END - LOANS */ /* START - STRATEGIES */ - case Transaction.STRATEGIES_DEPOSIT: - return window.bridge.loans.lend(...params.args); - case Transaction.STRATEGIES_WITHDRAW: - return window.bridge.loans.withdraw(...params.args); + case Transaction.STRATEGIES_INITIALIZE_PROXY: { + // Initialize 10 proxy accounts and then if we deposit for the first time, the proxy + // account will be assigned and stored in identity pallet. + const createProxiesExtrinsics = [...Array(DEFAULT_PROXY_ACCOUNT_AMOUNT).keys()].map((index) => + window.bridge.api.tx.proxy.createPure('Any', 0, index) + ); + const batchedExtrinsics = window.bridge.transaction.buildBatchExtrinsic(createProxiesExtrinsics); + + return { extrinsic: batchedExtrinsics }; + } + // Since we use proxy accounts for strategies, first argument is always proxy account for which + // the action should be performed - this account must be passed. + // Second argument is always boolean denoting if the proxy account identity was set or not. + case Transaction.STRATEGIES_DEPOSIT: { + const [strategyType, proxyAccount, isIdentitySet, ...args] = params.args; + const [, depositAmount] = args; + + const transferExtrinsic = window.bridge.tokens.transfer(proxyAccount.toString(), depositAmount); + + const strategyDepositExtrinsic = (await window.bridge.loans.lend(...args)).extrinsic; + const proxiedStrategyDepositExtrinsic = proxifyExtrinsic(proxyAccount, strategyDepositExtrinsic); + + if (isIdentitySet) { + const batchedExtrinsics = window.bridge.transaction.buildBatchExtrinsic([ + transferExtrinsic.extrinsic, + proxiedStrategyDepositExtrinsic + ]); + + return { extrinsic: batchedExtrinsics }; + } else { + const identityLockAmountTransferExtrinsic = window.bridge.tokens.transfer( + proxyAccount.toString(), + PROXY_ACCOUNT_RESERVE_AMOUNT + ); + const strategyAccountIdentity = { + additional: [[{ Raw: 'strategyType' }, { Raw: strategyType }]] + }; + const setIdentityExtrinsic = window.bridge.api.tx.identity.setIdentity(strategyAccountIdentity); + const proxiedSetIdentityExtrinsic = proxifyExtrinsic(proxyAccount, setIdentityExtrinsic); + + const batchedExtrinsicsWithIdentity = window.bridge.transaction.buildBatchExtrinsic([ + identityLockAmountTransferExtrinsic.extrinsic, + proxiedSetIdentityExtrinsic, + transferExtrinsic.extrinsic, + proxiedStrategyDepositExtrinsic + ]); + + return { extrinsic: batchedExtrinsicsWithIdentity }; + } + } + + case Transaction.STRATEGIES_WITHDRAW: { + const primaryAccount = window.bridge.account; + if (!primaryAccount) { + throw new Error('Strategy primary account not found.'); + } + + const [, proxyAccount, ...args] = params.args; + const [, withdrawalAmount] = args; + + const strategyWithdrawalExtrinsic = (await window.bridge.loans.withdraw(...args)).extrinsic; + const proxiedStrategyWithdrawExtrinsic = proxifyExtrinsic(proxyAccount, strategyWithdrawalExtrinsic); + + const transferExtrinsic = window.bridge.tokens.transfer(primaryAccount.toString(), withdrawalAmount).extrinsic; + const proxiedTransferExtrinsic = proxifyExtrinsic(proxyAccount, transferExtrinsic); + + const batchExtrinsic = window.bridge.transaction.buildBatchExtrinsic([ + proxiedStrategyWithdrawExtrinsic, + proxiedTransferExtrinsic + ]); + + return { extrinsic: batchExtrinsic }; + } + case Transaction.STRATEGIES_ALL_WITHDRAW: { - const [underlyingCurrency] = params.args; - return window.bridge.loans.withdrawAll(underlyingCurrency); + const primaryAccount = window.bridge.account; + if (!primaryAccount) { + throw new Error('Primary account not found.'); + } + + const [, proxyAccount, underlyingCurrency, withdrawalAmount] = params.args; + + const clearIdentityExtrinsic = window.bridge.api.tx.identity.clearIdentity(); + + const transferIdentityReserveAmount = window.bridge.tokens.transfer( + primaryAccount.toString(), + PROXY_ACCOUNT_RESERVE_AMOUNT + ).extrinsic; + + const strategyWithdrawalExtrinsic = (await window.bridge.loans.withdrawAll(underlyingCurrency)).extrinsic; + + const transferExtrinsic = window.bridge.tokens.transfer(primaryAccount.toString(), withdrawalAmount).extrinsic; + + const batchExtrinsic = window.bridge.transaction.buildBatchExtrinsic([ + clearIdentityExtrinsic, + transferIdentityReserveAmount, + strategyWithdrawalExtrinsic, + transferExtrinsic + ]); + + const proxiedBatchExtrinsic = proxifyExtrinsic(proxyAccount, batchExtrinsic); + + return { extrinsic: proxiedBatchExtrinsic }; } /* END - STRATEGIES */ diff --git a/src/hooks/transaction/types/index.ts b/src/hooks/transaction/types/index.ts index cbacc3a1a9..0e755769c3 100644 --- a/src/hooks/transaction/types/index.ts +++ b/src/hooks/transaction/types/index.ts @@ -51,6 +51,7 @@ enum Transaction { LOANS_REPAY = 'LOANS_REPAY', LOANS_REPAY_ALL = 'LOANS_REPAY_ALL', // Stategies + STRATEGIES_INITIALIZE_PROXY = 'STRATEGIES_INITIALIZE_PROXY', STRATEGIES_DEPOSIT = 'STRATEGIES_DEPOSIT', STRATEGIES_WITHDRAW = 'STRATEGIES_WITHDRAW', STRATEGIES_ALL_WITHDRAW = 'STRATEGIES_ALL_WITHDRAW', diff --git a/src/hooks/transaction/types/strategies.ts b/src/hooks/transaction/types/strategies.ts index aaf0703b4b..be8319c512 100644 --- a/src/hooks/transaction/types/strategies.ts +++ b/src/hooks/transaction/types/strategies.ts @@ -1,22 +1,34 @@ import { InterBtcApi } from '@interlay/interbtc-api'; +import { AccountId } from '@polkadot/types/interfaces'; + +import { StrategyType } from '@/pages/Strategies/types'; import { Transaction } from '.'; +interface StrategiesInitializeProxyAction { + type: Transaction.STRATEGIES_INITIALIZE_PROXY; + args: [StrategyType]; +} + interface StrategiesDepositAction { type: Transaction.STRATEGIES_DEPOSIT; - args: Parameters; + args: [StrategyType, AccountId, boolean, ...Parameters]; } interface StrategiesWithdrawAction { type: Transaction.STRATEGIES_WITHDRAW; - args: Parameters; + args: [StrategyType, AccountId, ...Parameters]; } interface StrategiesWithdrawAllAction { type: Transaction.STRATEGIES_ALL_WITHDRAW; - args: Parameters; + args: [StrategyType, AccountId, ...Parameters]; } -type StrategiesActions = StrategiesDepositAction | StrategiesWithdrawAction | StrategiesWithdrawAllAction; +type StrategiesActions = + | StrategiesInitializeProxyAction + | StrategiesDepositAction + | StrategiesWithdrawAction + | StrategiesWithdrawAllAction; export type { StrategiesActions }; diff --git a/src/hooks/transaction/utils/description.ts b/src/hooks/transaction/utils/description.ts index 8aebc07828..d2f5ffb5ed 100644 --- a/src/hooks/transaction/utils/description.ts +++ b/src/hooks/transaction/utils/description.ts @@ -251,7 +251,7 @@ const getTranslationArgs = ( /* START - STRATEGIES */ case Transaction.STRATEGIES_DEPOSIT: { - const [currency, amount] = params.args; + const [, , , currency, amount] = params.args; return { key: isPast ? 'transaction.deposited_amount' : 'transaction.depositing_amount', @@ -262,7 +262,7 @@ const getTranslationArgs = ( }; } case Transaction.STRATEGIES_WITHDRAW: { - const [currency, amount] = params.args; + const [, , currency, amount] = params.args; return { key: isPast ? 'transaction.withdrew_amount' : 'transaction.withdrawing_amount', @@ -273,7 +273,7 @@ const getTranslationArgs = ( }; } case Transaction.STRATEGIES_ALL_WITHDRAW: { - const [currency] = params.args; + const [, , currency] = params.args; return { key: isPast ? 'transaction.withdrew' : 'transaction.withdrawing', diff --git a/src/hooks/transaction/utils/fee.ts b/src/hooks/transaction/utils/fee.ts index c68ea72701..fdb3e311e8 100644 --- a/src/hooks/transaction/utils/fee.ts +++ b/src/hooks/transaction/utils/fee.ts @@ -12,6 +12,7 @@ import { MonetaryAmount } from '@interlay/monetary-js'; import { SubmittableExtrinsic } from '@polkadot/api/types'; import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { PROXY_ACCOUNT_RESERVE_AMOUNT } from '@/utils/constants/account'; import { getExtrinsic } from '../extrinsics'; import { Actions, Transaction } from '../types'; @@ -62,6 +63,7 @@ const getTxFeeSwapData = async ( reverseDirectionTrade.outputAmount.toString(true), baseExtrinsic ); + const withSwapTxFee = await window.bridge.transaction.getFeeEstimate(reverseDirectionExtrinsic); const { inputAmount, path } = getOptimalTradeForTxFeeSwap( withSwapTxFee.mul(OUTPUT_AMOUNT_SAFE_OFFSET_MULTIPLIER), @@ -158,8 +160,11 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = } /* END - LOANS */ case Transaction.STRATEGIES_DEPOSIT: { - const [, amount] = params.args; - return [amount]; + const [, , isIdentitySet, , amount] = params.args; + if (isIdentitySet) { + return [amount]; + } + return [amount, PROXY_ACCOUNT_RESERVE_AMOUNT]; } case Transaction.VAULTS_REGISTER_NEW_COLLATERAL: { const [amount] = params.args; @@ -177,6 +182,7 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = case Transaction.LOANS_DISABLE_COLLATERAL: case Transaction.STRATEGIES_ALL_WITHDRAW: case Transaction.STRATEGIES_WITHDRAW: + case Transaction.STRATEGIES_INITIALIZE_PROXY: case Transaction.AMM_CLAIM_REWARDS: return undefined; } diff --git a/src/hooks/use-all-cumulative-vault-collateral-volumes.ts b/src/hooks/use-all-cumulative-vault-collateral-volumes.ts new file mode 100644 index 0000000000..993a3725fe --- /dev/null +++ b/src/hooks/use-all-cumulative-vault-collateral-volumes.ts @@ -0,0 +1,25 @@ +import { TickerToData } from '@interlay/interbtc-api'; +import { useQuery, UseQueryResult } from 'react-query'; + +import cumulativeVaultCollateralVolumesFetcher, { + CUMULATIVE_VAULT_COLLATERALVOLUMES_FETCHER +} from '@/services/fetchers/cumulative-vault-collateral-volumes-fetcher'; +import { VolumeDataPoint } from '@/services/fetchers/cumulative-volumes-fetcher'; + +import { useGetCollateralCurrencies } from './api/use-get-collateral-currencies'; + +const useAllCumulativeVaultCollateralVolumes = ( + cutoffTimestamps: Array +): UseQueryResult>, Error> => { + const { data: collateralCurrencies } = useGetCollateralCurrencies(true); + + return useQuery>, Error>( + [CUMULATIVE_VAULT_COLLATERALVOLUMES_FETCHER, cutoffTimestamps, collateralCurrencies], + cumulativeVaultCollateralVolumesFetcher, + { + enabled: !!collateralCurrencies + } + ); +}; + +export default useAllCumulativeVaultCollateralVolumes; diff --git a/src/hooks/use-feature-flag.ts b/src/hooks/use-feature-flag.ts index bb3ca981b5..c5d356ac2c 100644 --- a/src/hooks/use-feature-flag.ts +++ b/src/hooks/use-feature-flag.ts @@ -1,15 +1,13 @@ enum FeatureFlags { STRATEGIES = 'strategies', GEOBLOCK = 'geoblock', - ONBOARDING = 'onboarding', - GLOBAL_WARNING = 'global_warning' + ONBOARDING = 'onboarding' } const featureFlags: Record = { [FeatureFlags.STRATEGIES]: process.env.REACT_APP_FEATURE_FLAG_STRATEGIES, [FeatureFlags.GEOBLOCK]: process.env.REACT_APP_FEATURE_FLAG_GEOBLOCK, - [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING, - [FeatureFlags.GLOBAL_WARNING]: process.env.REACT_APP_FEATURE_FLAG_GLOBAL_WARNING + [FeatureFlags.ONBOARDING]: process.env.REACT_APP_FEATURE_FLAG_ONBOARDING }; const useFeatureFlag = (feature: FeatureFlags): boolean => featureFlags[feature] === 'enabled'; diff --git a/src/legacy-components/TestnetBanner/index.tsx b/src/legacy-components/TestnetBanner/index.tsx deleted file mode 100644 index abd3c37836..0000000000 --- a/src/legacy-components/TestnetBanner/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import clsx from 'clsx'; - -import WarningBanner from '../WarningBanner'; - -const TestnetBanner = (): JSX.Element => ( - -

- Thanks for trying out the testnet! The testnet might be reset at any point to make sure we can get the latest - version of our software to you. -

- -); - -export default TestnetBanner; diff --git a/src/lib/form/schemas/strategies.ts b/src/lib/form/schemas/strategies.ts index 324546a18e..8bfe5e2faf 100644 --- a/src/lib/form/schemas/strategies.ts +++ b/src/lib/form/schemas/strategies.ts @@ -1,3 +1,10 @@ +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { TFunction } from 'i18next'; + +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { PROXY_ACCOUNT_RESERVE_AMOUNT } from '@/utils/constants/account'; + import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; const STRATEGY_DEPOSIT_AMOUNT_FIELD = 'strategy-deposit-amount'; @@ -8,11 +15,32 @@ type StrategyDepositFormData = { [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]?: string; }; -type StrategyDepositValidationParams = MaxAmountValidationParams & MinAmountValidationParams; +type StrategyDepositValidationParams = MaxAmountValidationParams & + MinAmountValidationParams & { + governanceBalance: MonetaryAmount; + requireProxyDeposit: boolean; + }; -const strategyDepositSchema = (action: string, params: StrategyDepositValidationParams): yup.ObjectSchema => { +const strategyDepositSchema = ( + action: string, + params: StrategyDepositValidationParams, + t: TFunction +): yup.ObjectSchema => { return yup.object().shape({ - [STRATEGY_DEPOSIT_AMOUNT_FIELD]: yup.string().requiredAmount(action).maxAmount(params).minAmount(params, action), + [STRATEGY_DEPOSIT_AMOUNT_FIELD]: yup + .string() + .requiredAmount(action) + .maxAmount(params) + .minAmount(params, action) + .fees( + { + transactionFee: params.requireProxyDeposit + ? PROXY_ACCOUNT_RESERVE_AMOUNT + : newMonetaryAmount(0, GOVERNANCE_TOKEN), + governanceBalance: params.governanceBalance + }, + t('strategies.proxy_deposit_insufficient_funds', { currency: GOVERNANCE_TOKEN.ticker }) + ), [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]: yup.string().required() }); }; diff --git a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx index fcb27215e6..3d241d7c6c 100644 --- a/src/pages/Dashboard/cards/OracleStatusCard/index.tsx +++ b/src/pages/Dashboard/cards/OracleStatusCard/index.tsx @@ -1,9 +1,8 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; -import { Bitcoin, ExchangeRate } from '@interlay/monetary-js'; import clsx from 'clsx'; import { withErrorBoundary } from 'react-error-boundary'; import { useTranslation } from 'react-i18next'; +import { formatNumber } from '@/common/utils/utils'; import { RELAY_CHAIN_NATIVE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL } from '@/config/relay-chains'; import { OracleStatus, useGetOracleStatus } from '@/hooks/api/oracle/use-get-oracle-status'; import { useGetExchangeRate } from '@/hooks/api/use-get-exchange-rate'; @@ -33,15 +32,11 @@ const OracleStatusCard = ({ hasLinks }: Props): JSX.Element => { return <>Loading...; } - const exchangeRate = relayChainExchangeRate - ? new ExchangeRate(Bitcoin, RELAY_CHAIN_NATIVE_TOKEN, relayChainExchangeRate.toBig(), 0, 0) - : 0; - const oracleOnline = oracleStatus && oracleStatus === OracleStatus.ONLINE; let statusText; let statusCircleText; - if (exchangeRate === undefined) { + if (relayChainExchangeRate === undefined) { statusText = t('dashboard.oracles.not_available'); statusCircleText = t('unavailable'); } else if (oracleOnline === true) { @@ -88,9 +83,13 @@ const OracleStatusCard = ({ hasLinks }: Props): JSX.Element => { > {statusCircleText} - {exchangeRate && ( + {relayChainExchangeRate && ( - {exchangeRate.toHuman(5)} {RELAY_CHAIN_NATIVE_TOKEN_SYMBOL} + {formatNumber(Number(relayChainExchangeRate.toHuman(5)), { + minimumFractionDigits: 5, + maximumFractionDigits: 5 + })}{' '} + {RELAY_CHAIN_NATIVE_TOKEN_SYMBOL} )} diff --git a/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx b/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx index c74c10068c..617d95f1f7 100644 --- a/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx +++ b/src/pages/Dashboard/sub-pages/Home/LockedCollateralsCard/index.tsx @@ -4,14 +4,8 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, formatUSD, getLastMidnightTimestamps } from '@/common/utils/utils'; import { COUNT_OF_DATES_FOR_CHART } from '@/config/charts'; -import { - GOVERNANCE_TOKEN, - GOVERNANCE_TOKEN_SYMBOL, - RELAY_CHAIN_NATIVE_TOKEN, - RELAY_CHAIN_NATIVE_TOKEN_SYMBOL -} from '@/config/relay-chains'; import { useGetPrices } from '@/hooks/api/use-get-prices'; -import useCumulativeCollateralVolumes from '@/hooks/use-cumulative-collateral-volumes'; +import useAllCumulativeVaultCollateralVolumes from '@/hooks/use-all-cumulative-vault-collateral-volumes'; import ErrorFallback from '@/legacy-components/ErrorFallback'; import { INTERLAY_DENIM, KINTSUGI_SUPERNOVA } from '@/utils/constants/colors'; import { PAGES } from '@/utils/constants/links'; @@ -29,44 +23,23 @@ const LockedCollateralsCard = (): JSX.Element => { const prices = useGetPrices(); const { - isIdle: cumulativeRelayChainNativeTokenVolumesIdle, - isLoading: cumulativeRelayChainNativeTokenVolumesLoading, - data: cumulativeRelayChainNativeTokenVolumes, - error: cumulativeRelayChainNativeTokenVolumesError - } = useCumulativeCollateralVolumes(RELAY_CHAIN_NATIVE_TOKEN, cutoffTimestamps); - useErrorHandler(cumulativeRelayChainNativeTokenVolumesError); - - const { - isIdle: cumulativeGovernanceTokenVolumesIdle, - isLoading: cumulativeGovernanceTokenVolumesLoading, - data: cumulativeGovernanceTokenVolumes, - error: cumulativeGovernanceTokenVolumesError - } = useCumulativeCollateralVolumes(GOVERNANCE_TOKEN, cutoffTimestamps); - useErrorHandler(cumulativeGovernanceTokenVolumesError); - - const relayChainNativeTokenPriceInUSD = getTokenPrice(prices, RELAY_CHAIN_NATIVE_TOKEN_SYMBOL)?.usd; - const governanceTokenPriceInUSD = getTokenPrice(prices, GOVERNANCE_TOKEN_SYMBOL)?.usd; + data: allCumulativeVaultCollateralVolumes, + error: allCumulativeVaultCollateralVolumesError + } = useAllCumulativeVaultCollateralVolumes(cutoffTimestamps); + useErrorHandler(allCumulativeVaultCollateralVolumesError); const cumulativeUSDVolumes = React.useMemo(() => { - if (cumulativeRelayChainNativeTokenVolumes === undefined || cumulativeGovernanceTokenVolumes === undefined) return; + if (allCumulativeVaultCollateralVolumes === undefined) return; return Array(COUNT_OF_DATES_FOR_CHART) .fill(0) .map((_, index) => { - const collaterals = [ - { - cumulativeVolumes: cumulativeRelayChainNativeTokenVolumes, - tokenPriceInUSD: relayChainNativeTokenPriceInUSD - } - ]; - - // Includes governance token data only if the price is available. - if (governanceTokenPriceInUSD !== undefined) { - collaterals.push({ - cumulativeVolumes: cumulativeGovernanceTokenVolumes, - tokenPriceInUSD: governanceTokenPriceInUSD - }); - } + const collateralTickers = Object.keys(allCumulativeVaultCollateralVolumes); + + const collaterals = collateralTickers.map((ticker: string) => ({ + cumulativeVolumes: allCumulativeVaultCollateralVolumes[ticker], + tokenPriceInUSD: getTokenPrice(prices, ticker)?.usd + })); let sumValueInUSD = 0; for (const collateral of collaterals) { @@ -80,21 +53,11 @@ const LockedCollateralsCard = (): JSX.Element => { tillTimestamp: cutoffTimestamps[index] }; }); - }, [ - cumulativeRelayChainNativeTokenVolumes, - cumulativeGovernanceTokenVolumes, - relayChainNativeTokenPriceInUSD, - governanceTokenPriceInUSD - ]); + }, [allCumulativeVaultCollateralVolumes, prices]); const renderContent = () => { // TODO: should use skeleton loaders - if ( - cumulativeRelayChainNativeTokenVolumesIdle || - cumulativeRelayChainNativeTokenVolumesLoading || - cumulativeGovernanceTokenVolumesIdle || - cumulativeGovernanceTokenVolumesLoading - ) { + if (allCumulativeVaultCollateralVolumes === undefined) { return <>Loading...; } diff --git a/src/pages/Strategies/Strategy/Strategy.tsx b/src/pages/Strategies/Strategy/Strategy.tsx index d9e2fbad88..85d527d353 100644 --- a/src/pages/Strategies/Strategy/Strategy.tsx +++ b/src/pages/Strategies/Strategy/Strategy.tsx @@ -10,6 +10,7 @@ import { StrategyInfographics, StrategyInsights, StrategyTag } from '../componen import { getContent } from '../helpers/content'; import { useGetStrategies } from '../hooks/use-get-strategies'; import { useGetStrategyPosition } from '../hooks/use-get-strategy-position'; +import { useGetStrategyProxyAccount } from '../hooks/use-get-strategy-proxy-account'; import { StrategyRisk, StrategyType } from '../types'; import { StyledFlex, StyledInfoCards, StyledStrategyForm } from './Strategy.styles'; @@ -21,7 +22,9 @@ const Strategy = (): JSX.Element | null => { const strategy = getStrategy(strategyType); - const { data: position, isLoading: isPositionLoading } = useGetStrategyPosition(strategy); + const { account: proxyAccount } = useGetStrategyProxyAccount(strategyType); + + const { data: position, isLoading: isPositionLoading } = useGetStrategyPosition(strategy, proxyAccount); if (!strategies || isPositionLoading) { return ; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx index e08be71914..4783bebcec 100644 --- a/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyDepositForm.tsx @@ -5,8 +5,9 @@ import { useTranslation } from 'react-i18next'; import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; import { Flex, TokenInput } from '@/component-library'; -import { AuthCTA, TransactionFeeDetails } from '@/components'; -import { WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { AuthCTA } from '@/components'; +import { GOVERNANCE_TOKEN, WRAPPED_TOKEN, WRAPPED_TOKEN_SYMBOL } from '@/config/relay-chains'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; import { useGetPrices } from '@/hooks/api/use-get-prices'; import { Transaction, useTransaction } from '@/hooks/transaction'; import { @@ -21,7 +22,9 @@ import { import { StrategyData } from '../../hooks/use-get-strategies'; import { useGetStrategyAvailableAmounts } from '../../hooks/use-get-strategy-available-amounts'; import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; +import { useGetStrategyProxyAccount } from '../../hooks/use-get-strategy-proxy-account'; import { StrategyFormType } from '../../types'; +import { StrategyFormTransactionFees } from './StrategyFormTransactionFees'; type StrategyDepositFormProps = { strategy: StrategyData; @@ -31,16 +34,29 @@ type StrategyDepositFormProps = { const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); - const transaction = useTransaction(Transaction.STRATEGIES_DEPOSIT, { + const transaction = useTransaction({ onSuccess: () => { - form.resetForm(); + if (proxyAccount) { + form.resetForm(); + } else { + refetchProxyAccount(); + } } }); + const { getAvailableBalance } = useGetBalances(); + + const { + isLoading: isLoadingProxyAccount, + account: proxyAccount, + isIdentitySet, + refetch: refetchProxyAccount + } = useGetStrategyProxyAccount(strategy.type); + const { data: { maxAmount, minAmount } - } = useGetStrategyAvailableAmounts(StrategyFormType.DEPOSIT, strategy, position); + } = useGetStrategyAvailableAmounts(StrategyFormType.DEPOSIT, strategy, proxyAccount, position); - const getTransactionArgs = useCallback( + const getDepositTransactionArgs = useCallback( (values: StrategyDepositFormData) => { const amount = values[STRATEGY_DEPOSIT_AMOUNT_FIELD] || 0; const monetaryAmount = newMonetaryAmount(amount, strategy.currency, true); @@ -51,13 +67,28 @@ const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): ); const handleSubmit = (values: StrategyDepositFormData) => { - const transactionData = getTransactionArgs(values); - - if (!transactionData) return; - - const { monetaryAmount } = transactionData; - - transaction.execute(WRAPPED_TOKEN, monetaryAmount); + if (proxyAccount) { + const depositTransactionData = getDepositTransactionArgs(values); + + if (!depositTransactionData) return; + + let { monetaryAmount } = depositTransactionData; + + if (transaction.fee.isEqualFeeCurrency(monetaryAmount.currency)) { + monetaryAmount = transaction.calculateAmountWithFeeDeducted(monetaryAmount); + } + + transaction.execute( + Transaction.STRATEGIES_DEPOSIT, + strategy.type, + proxyAccount, + !!isIdentitySet, + WRAPPED_TOKEN, + monetaryAmount + ); + } else { + transaction.execute(Transaction.STRATEGIES_INITIALIZE_PROXY, strategy.type); + } }; const form = useForm({ @@ -65,16 +96,36 @@ const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): [STRATEGY_DEPOSIT_AMOUNT_FIELD]: '', [STRATEGY_DEPOSIT_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker }, - validationSchema: strategyDepositSchema('deposit', { maxAmount, minAmount }), + validationSchema: strategyDepositSchema( + 'deposit', + { + maxAmount, + minAmount, + requireProxyDeposit: !isIdentitySet, + governanceBalance: getAvailableBalance(GOVERNANCE_TOKEN.ticker) || newMonetaryAmount(0, GOVERNANCE_TOKEN) + }, + t + ), onSubmit: handleSubmit, onComplete: (values: StrategyDepositFormData) => { - const transactionData = getTransactionArgs(values); - - if (!transactionData) return; - - const { monetaryAmount } = transactionData; - - transaction.fee.estimate(WRAPPED_TOKEN, monetaryAmount); + if (proxyAccount) { + const depositTransactionData = getDepositTransactionArgs(values); + + if (!depositTransactionData) return; + + const { monetaryAmount } = depositTransactionData; + + transaction.fee.estimate( + Transaction.STRATEGIES_DEPOSIT, + strategy.type, + proxyAccount, + !!isIdentitySet, + WRAPPED_TOKEN, + monetaryAmount + ); + } else { + transaction.fee.estimate(Transaction.STRATEGIES_INITIALIZE_PROXY, strategy.type); + } } }); @@ -84,7 +135,7 @@ const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): true ); const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd) || 0; - const isSubmitButtonDisabled = isFormDisabled(form); + const isSubmitButtonDisabled = isFormDisabled(form) || isLoadingProxyAccount; return (
@@ -99,12 +150,13 @@ const StrategyDepositForm = ({ strategy, position }: StrategyDepositFormProps): {...mergeProps(form.getFieldProps(STRATEGY_DEPOSIT_AMOUNT_FIELD))} /> - - {t('deposit')} + {proxyAccount ? t('deposit') : t('strategy.initialize')} diff --git a/src/pages/Strategies/components/StrategyForm/StrategyFormTransactionFees.tsx b/src/pages/Strategies/components/StrategyForm/StrategyFormTransactionFees.tsx new file mode 100644 index 0000000000..44f08a82b7 --- /dev/null +++ b/src/pages/Strategies/components/StrategyForm/StrategyFormTransactionFees.tsx @@ -0,0 +1,108 @@ +import { mergeProps, useId } from '@react-aria/utils'; +import { ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { displayMonetaryAmountInUSDFormat, formatUSD } from '@/common/utils/utils'; +import { Alert, Flex } from '@/component-library'; +import { + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionDetailsProps, + TransactionSelectToken, + TransactionSelectTokenProps +} from '@/components'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { UseFeeEstimateResult } from '@/hooks/transaction/types/hook'; +import { SelectCurrencyFilter, useSelectCurrency } from '@/hooks/use-select-currency'; +import { PROXY_ACCOUNT_RESERVE_AMOUNT } from '@/utils/constants/account'; +import { getTokenPrice } from '@/utils/helpers/prices'; + +type Props = { + label?: ReactNode; + tooltipLabel?: ReactNode; + selectProps?: TransactionSelectTokenProps; + fee?: UseFeeEstimateResult; + includeProxyAccountFee?: boolean; +}; + +type InheritAttrs = Omit; + +type StrategyFormTransactionFeesProps = Props & InheritAttrs; + +const StrategyFormTransactionFees = ({ + selectProps, + label, + tooltipLabel, + className, + fee, + includeProxyAccountFee, + ...props +}: StrategyFormTransactionFeesProps): JSX.Element => { + const { t } = useTranslation(); + const id = useId(); + const prices = useGetPrices(); + const selectCurrency = useSelectCurrency(SelectCurrencyFilter.TRADEABLE_FOR_NATIVE_CURRENCY); + + const { selectProps: feeSelectProps, data } = fee || {}; + const { amount, isValid } = data || {}; + + const amountLabel = amount + ? `${amount.toHuman()} ${amount.currency.ticker} (${displayMonetaryAmountInUSDFormat( + amount, + getTokenPrice(prices, amount.currency.ticker)?.usd + )})` + : `${0.0} ${selectProps?.value} (${formatUSD(0)})`; + + const proxyDepositAmonut = includeProxyAccountFee + ? `${PROXY_ACCOUNT_RESERVE_AMOUNT.toHuman()} ${ + PROXY_ACCOUNT_RESERVE_AMOUNT.currency.ticker + } (${displayMonetaryAmountInUSDFormat( + PROXY_ACCOUNT_RESERVE_AMOUNT, + getTokenPrice(prices, PROXY_ACCOUNT_RESERVE_AMOUNT.currency.ticker)?.usd + )})` + : `${0.0} ${selectProps?.value} (${formatUSD(0)})`; + + const errorMessage = + isValid === false && t('forms.ensure_adequate_amount_left_to_cover_action', { action: t('fees').toLowerCase() }); + + return ( + + + {selectProps && ( + + )} + + {label || t('tx_fees')} + {amountLabel} + + {includeProxyAccountFee && ( + + + {label || t('strategies.proxy_deposit', { currency: GOVERNANCE_TOKEN.ticker })} + + {proxyDepositAmonut} + + )} + + {errorMessage && ( + + {errorMessage} + + )} + + ); +}; + +export { StrategyFormTransactionFees }; +export type { StrategyFormTransactionFeesProps }; diff --git a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx index 75929e4f28..e617ac726e 100644 --- a/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx +++ b/src/pages/Strategies/components/StrategyForm/StrategyWithdrawalForm.tsx @@ -20,6 +20,7 @@ import { import { StrategyData } from '../../hooks/use-get-strategies'; import { useGetStrategyAvailableAmounts } from '../../hooks/use-get-strategy-available-amounts'; import { StrategyPositionData } from '../../hooks/use-get-strategy-position'; +import { useGetStrategyProxyAccount } from '../../hooks/use-get-strategy-proxy-account'; import { StrategyFormType } from '../../types'; type StrategyWithdrawalFormProps = { @@ -32,15 +33,26 @@ const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormPr const prices = useGetPrices(); const transaction = useTransaction({ onSuccess: () => { - form.resetForm(); + if (proxyAccount) { + form.resetForm(); + } else { + refetchProxyAccount(); + } } }); + + const { + isLoading: isLoadingProxyAccount, + account: proxyAccount, + refetch: refetchProxyAccount + } = useGetStrategyProxyAccount(strategy.type); + const { data: { maxAmount, minAmount }, isMaxAmount - } = useGetStrategyAvailableAmounts(StrategyFormType.WITHDRAW, strategy, position); + } = useGetStrategyAvailableAmounts(StrategyFormType.WITHDRAW, strategy, proxyAccount, position); - const getTransactionArgs = useCallback( + const getWithdrawalTransactionArgs = useCallback( (values: StrategyWithdrawFormData) => { const amount = values[STRATEGY_WITHDRAW_AMOUNT_FIELD] || 0; const monetaryAmount = newMonetaryAmount(amount, strategy.currency, true); @@ -51,18 +63,38 @@ const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormPr ); const handleSubmit = (values: StrategyWithdrawFormData) => { - const transactionData = getTransactionArgs(values); + if (proxyAccount) { + const transactionData = getWithdrawalTransactionArgs(values); - if (!transactionData) return; + if (!transactionData) return; - const { monetaryAmount } = transactionData; + let { monetaryAmount } = transactionData; - const isWithdrawAll = isMaxAmount(monetaryAmount); + if (transaction.fee.isEqualFeeCurrency(monetaryAmount.currency)) { + monetaryAmount = transaction.calculateAmountWithFeeDeducted(monetaryAmount); + } - if (isWithdrawAll) { - return transaction.execute(Transaction.STRATEGIES_ALL_WITHDRAW, monetaryAmount.currency); + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { + return transaction.execute( + Transaction.STRATEGIES_ALL_WITHDRAW, + strategy.type, + proxyAccount, + monetaryAmount.currency, + monetaryAmount + ); + } else { + return transaction.execute( + Transaction.STRATEGIES_WITHDRAW, + strategy.type, + proxyAccount, + monetaryAmount.currency, + monetaryAmount + ); + } } else { - return transaction.execute(Transaction.STRATEGIES_WITHDRAW, monetaryAmount.currency, monetaryAmount); + transaction.execute(Transaction.STRATEGIES_INITIALIZE_PROXY, strategy.type); } }; @@ -77,18 +109,34 @@ const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormPr }), onSubmit: handleSubmit, onComplete: (values: StrategyWithdrawFormData) => { - const transactionData = getTransactionArgs(values); - - if (!transactionData) return; - - const { monetaryAmount } = transactionData; - - const isWithdrawAll = isMaxAmount(monetaryAmount); - - if (isWithdrawAll) { - return transaction.fee.estimate(Transaction.STRATEGIES_ALL_WITHDRAW, monetaryAmount.currency); + if (proxyAccount) { + const transactionData = getWithdrawalTransactionArgs(values); + + if (!transactionData) return; + + const { monetaryAmount } = transactionData; + + const isWithdrawAll = isMaxAmount(monetaryAmount); + + if (isWithdrawAll) { + return transaction.fee.estimate( + Transaction.STRATEGIES_ALL_WITHDRAW, + strategy.type, + proxyAccount, + monetaryAmount.currency, + monetaryAmount + ); + } else { + return transaction.fee.estimate( + Transaction.STRATEGIES_WITHDRAW, + strategy.type, + proxyAccount, + monetaryAmount.currency, + monetaryAmount + ); + } } else { - return transaction.fee.estimate(Transaction.STRATEGIES_WITHDRAW, monetaryAmount.currency, monetaryAmount); + transaction.fee.estimate(Transaction.STRATEGIES_INITIALIZE_PROXY, strategy.type); } } }); @@ -99,7 +147,7 @@ const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormPr true ); const inputUSDValue = convertMonetaryAmountToValueInUSD(inputMonetaryAmount, prices?.[WRAPPED_TOKEN_SYMBOL].usd) || 0; - const isSubmitButtonDisabled = isFormDisabled(form); + const isSubmitButtonDisabled = isFormDisabled(form) || isLoadingProxyAccount; return ( @@ -120,7 +168,7 @@ const StrategyWithdrawalForm = ({ strategy, position }: StrategyWithdrawalFormPr selectProps={{ ...form.getSelectFieldProps(STRATEGY_WITHDRAW_FEE_TOKEN_FIELD) }} /> - {t('withdraw')} + {proxyAccount ? t('withdraw') : t('strategy.initialize')} diff --git a/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts b/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts index 0df60edb21..792881ca42 100644 --- a/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts +++ b/src/pages/Strategies/hooks/use-get-strategy-available-amounts.ts @@ -1,3 +1,5 @@ +import { AccountId } from '@polkadot/types/interfaces'; + import { useGetLoanAvailableAmounts, UseGetLoanAvailableAmountsResult @@ -12,12 +14,14 @@ type useGetStrategyAvailableAmountsResult = UseGetLoanAvailableAmountsResult; const useGetStrategyAvailableAmounts = ( type: StrategyFormType, strategy: StrategyData, + proxyAccount: AccountId | undefined, position?: StrategyPositionData ): useGetStrategyAvailableAmountsResult => { const loanAvailableAmounts = useGetLoanAvailableAmounts( type === StrategyFormType.DEPOSIT ? 'lend' : 'withdraw', strategy.loanAsset, - position?.loanPosition + position?.loanPosition, + proxyAccount ); switch (strategy.type) { diff --git a/src/pages/Strategies/hooks/use-get-strategy-position.ts b/src/pages/Strategies/hooks/use-get-strategy-position.ts index 88dc11bbe2..734b4f0180 100644 --- a/src/pages/Strategies/hooks/use-get-strategy-position.ts +++ b/src/pages/Strategies/hooks/use-get-strategy-position.ts @@ -1,5 +1,6 @@ import { CurrencyExt } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; +import { AccountId } from '@polkadot/types/interfaces'; import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; import { CollateralPosition } from '@/types/loans'; @@ -18,8 +19,11 @@ type UseGetStrategyPositionResult = { data: StrategyPositionData | undefined; }; -const useGetStrategyPosition = (strategy: StrategyData | undefined): UseGetStrategyPositionResult => { - const { getLendPosition, isLoading: isAccountPositionsLoading } = useGetAccountPositions(); +const useGetStrategyPosition = ( + strategy: StrategyData | undefined, + proxyAccount: AccountId | undefined +): UseGetStrategyPositionResult => { + const { getLendPosition, isLoading: isAccountPositionsLoading } = useGetAccountPositions(proxyAccount); if (!strategy) { return { diff --git a/src/pages/Strategies/hooks/use-get-strategy-proxy-account.ts b/src/pages/Strategies/hooks/use-get-strategy-proxy-account.ts new file mode 100644 index 0000000000..3ffae84c6b --- /dev/null +++ b/src/pages/Strategies/hooks/use-get-strategy-proxy-account.ts @@ -0,0 +1,92 @@ +import { storageKeyToNthInner } from '@interlay/interbtc-api'; +import { AccountId } from '@polkadot/types/interfaces'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import useAccountId from '@/hooks/use-account-id'; + +import { StrategyType } from '../types'; + +interface UseGetStrategyProxyAccountResult { + account: AccountId | undefined; + isIdentitySet: boolean | undefined; + isLoading: boolean; + refetch: () => void; +} + +const getProxyIdentities = (proxyAccounts: Array) => + new Promise>((resolve) => + window.bridge.api.query.identity.identityOf.multi(proxyAccounts, (identities) => { + const accountIdentities = identities.map((identity) => { + if (identity.isNone) { + return undefined; + } + return identity.unwrap().info.additional[0][1].asRaw.toHuman() as StrategyType; + }); + + const accountsWithStrategies = proxyAccounts.map( + (account, index) => [account, accountIdentities[index]] as [AccountId, StrategyType | undefined] + ); + + resolve(accountsWithStrategies); + }) + ); + +const getStrategyProxyAccount = async ( + strategyType: StrategyType, + primaryAccount: AccountId | undefined +): Promise<{ account: AccountId; isIdentitySet: boolean } | undefined> => { + if (!primaryAccount) { + return undefined; + } + + // MEMO: Not possible to query proxy accounts by delegate, + // therefore all are fetched and then filtered. + + const allProxies = await window.bridge.api.query.proxy.proxies.entries(); + const proxiesOfUserAccount = allProxies + .filter((proxy) => proxy[1][0][0].delegate.toString() === primaryAccount.toString()) + .map((proxy) => storageKeyToNthInner(proxy[0])); + + if (proxiesOfUserAccount.length === 0) { + return undefined; + } + + const accountToStrategy = await getProxyIdentities(proxiesOfUserAccount); + + const strategyAccount = accountToStrategy.find( + ([, accountStrategyType]) => accountStrategyType === strategyType + )?.[0]; + + if (strategyAccount) { + return { account: strategyAccount, isIdentitySet: true }; + } + // If strategy is not connected with any proxy account return first unused proxy account + // that will be assigned with first strategy deposit. + + const firstUnusedProxyAccount = accountToStrategy.find( + ([, accountStrategyType]) => accountStrategyType === undefined + )?.[0]; + + if (!firstUnusedProxyAccount) { + throw new Error('Proxy account limit was exceeded.'); + } + + return { account: firstUnusedProxyAccount, isIdentitySet: false }; +}; + +const useGetStrategyProxyAccount = (strategyType: StrategyType): UseGetStrategyProxyAccountResult => { + const primaryAccount = useAccountId(); + + const { data, error, refetch, isLoading } = useQuery({ + queryKey: ['strategy-proxy-account', strategyType, primaryAccount?.toString()], + queryFn: () => getStrategyProxyAccount(strategyType, primaryAccount), + enabled: !!primaryAccount + }); + + useErrorHandler(error); + + return { account: data?.account, isIdentitySet: data?.isIdentitySet, isLoading, refetch }; +}; + +export { useGetStrategyProxyAccount }; diff --git a/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx b/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx index f78fce7bf3..e2af9bab22 100644 --- a/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx +++ b/src/pages/Vaults/Vault/components/IssueRedeemForm/IssueRedeemForm.tsx @@ -165,10 +165,7 @@ const IssueRedeemForm = ({ const label = isIssueModal ? 'Issue amount' : 'Reddem amount'; const highlightTerm = isIssueModal ? 'Maximum vault capacity:' : 'Locked:'; - const handleSubmit = (data: IssueRedeemFormData) => { - onSubmit?.(); - console.log(data); - }; + const handleSubmit = () => onSubmit?.(); const parsedBTCAmount = new BitcoinAmount(inputBTCAmount); const bridgeFee = parsedBTCAmount.mul(issueFeeRate); diff --git a/src/services/fetchers/cumulative-vault-collateral-volumes-fetcher.ts b/src/services/fetchers/cumulative-vault-collateral-volumes-fetcher.ts new file mode 100644 index 0000000000..23f2b31010 --- /dev/null +++ b/src/services/fetchers/cumulative-vault-collateral-volumes-fetcher.ts @@ -0,0 +1,80 @@ +import { CollateralCurrencyExt, CurrencyExt, newMonetaryAmount, TickerToData } from '@interlay/interbtc-api'; + +import { WRAPPED_TOKEN } from '@/config/relay-chains'; +import graphqlFetcher, { GRAPHQL_FETCHER } from '@/services/fetchers/graphql-fetcher'; +import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; + +import { VolumeDataPoint } from './cumulative-volumes-fetcher'; + +const CUMULATIVE_VAULT_COLLATERALVOLUMES_FETCHER = 'cumulative-vault-collateral-volumes-fetcher'; + +const cumulativeVaultCollateralVolumesFetcher = async ( + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types + { queryKey }: any +): Promise>> => { + const [key, cutoffTimestamps, collateralCurrencies] = queryKey as CumulativeVaultCollateralVolumesFetcherParams; + + if (key !== CUMULATIVE_VAULT_COLLATERALVOLUMES_FETCHER) throw new Error('Invalid key!'); + + const queryFragment = (date: Date, collateralCurrency: CurrencyExt) => { + const where = `{ + tillTimestamp_lte: "${date.toISOString()}", + type_eq: Collateral, + ${`collateralCurrency: { + ${getCurrencyEqualityCondition(collateralCurrency)}}`}, + ${`wrappedCurrency: { + ${getCurrencyEqualityCondition(WRAPPED_TOKEN)}}`}, + }`; + + return ` + ts${date.getTime()}_${ + collateralCurrency?.ticker + }: cumulativeVolumePerCurrencyPairs (where: ${where}, orderBy: tillTimestamp_DESC, limit: 1) { + amount + tillTimestamp + } + `; + }; + + const query = ` + { + ${cutoffTimestamps.map((date) => collateralCurrencies.map((currency) => queryFragment(date, currency)))} + } + `; + + // TODO: should type properly (`Relay`) + const volumesData = await graphqlFetcher>()({ + queryKey: [GRAPHQL_FETCHER, query] + }); + + const volumes = volumesData?.data || {}; + + return Object.entries(volumes).reduce((result, [key, [volumeData]]) => { + const [rawTimestamp, ticker] = key.split('_'); + const timestamp = rawTimestamp.slice(2); + const currency = collateralCurrencies.find((collateralCurrency) => collateralCurrency.ticker === ticker); + if (currency === undefined) { + throw new Error('Ivalid query.'); + } + return { + ...result, + [ticker]: [ + ...(result[ticker] || []), + { + amount: newMonetaryAmount(volumeData.amount || 0, currency), + tillTimestamp: cutoffTimestamps.find((cutoffTimestamp) => cutoffTimestamp.getTime().toString() === timestamp) + } + ] + }; + }, {} as any); +}; + +type CumulativeVaultCollateralVolumesFetcherParams = [ + queryKey: string, + cutoffTimestamp: Array, + collateralCurrency: Array +]; + +export { CUMULATIVE_VAULT_COLLATERALVOLUMES_FETCHER }; + +export default cumulativeVaultCollateralVolumesFetcher; diff --git a/src/services/fetchers/cumulative-volumes-fetcher.ts b/src/services/fetchers/cumulative-volumes-fetcher.ts index 10609caa9b..5589771170 100644 --- a/src/services/fetchers/cumulative-volumes-fetcher.ts +++ b/src/services/fetchers/cumulative-volumes-fetcher.ts @@ -2,6 +2,7 @@ import { CollateralCurrencyExt, CurrencyExt, newMonetaryAmount, WrappedCurrency import { MonetaryAmount } from '@interlay/monetary-js'; import graphqlFetcher, { GRAPHQL_FETCHER } from '@/services/fetchers/graphql-fetcher'; +import { getCurrencyEqualityCondition } from '@/utils/helpers/currencies'; const CUMULATIVE_VOLUMES_FETCHER = 'cumulative-volumes-fetcher'; @@ -35,41 +36,26 @@ const cumulativeVolumesFetcher = async ( const queryFragment = ( type: VolumeType, date: Date, - collateralCurrencyIdLiteral?: string | number, - wrappedCurrencyIdLiteral?: string | number + collateralCurrency?: CurrencyExt, + wrappedCurrency?: CurrencyExt ) => { - let colCurrCond = ''; - if (collateralCurrencyIdLiteral !== undefined) { - colCurrCond = - (typeof collateralCurrencyIdLiteral === 'number' ? 'asset_eq: ' : 'token_eq: ') + - collateralCurrencyIdLiteral.toString(); - } - let wrapCurrCond = ''; - if (wrappedCurrencyIdLiteral !== undefined) { - wrapCurrCond = - (typeof wrappedCurrencyIdLiteral === 'number' ? 'asset_eq: ' : 'token_eq: ') + - wrappedCurrencyIdLiteral.toString(); - } const where = `{ tillTimestamp_lte: "${date.toISOString()}", type_eq: ${type}, ${ - collateralCurrencyIdLiteral + collateralCurrency ? `collateralCurrency: { - ${colCurrCond}}` + ${getCurrencyEqualityCondition(collateralCurrency)}}` : `` }, ${ - wrappedCurrencyIdLiteral + wrappedCurrency ? `wrappedCurrency: { - ${wrapCurrCond}}` + ${getCurrencyEqualityCondition(wrappedCurrency)}}` : `` }, }`; - const entityName = - collateralCurrencyIdLiteral || wrappedCurrencyIdLiteral - ? `cumulativeVolumePerCurrencyPairs` - : `cumulativeVolumes`; + const entityName = collateralCurrency || wrappedCurrency ? `cumulativeVolumePerCurrencyPairs` : `cumulativeVolumes`; return ` ts${date.getTime()}: ${entityName} (where: ${where}, orderBy: tillTimestamp_DESC, limit: 1) { amount @@ -80,14 +66,7 @@ const cumulativeVolumesFetcher = async ( const query = ` { - ${cutoffTimestamps.map((date) => { - let col; - // TODO: Need to refactor when we want to support lend tokens as collateral for vaults. - if (collateralCurrency) { - col = 'foreignAsset' in collateralCurrency ? collateralCurrency.foreignAsset.id : collateralCurrency.ticker; - } - return queryFragment(type, date, col, wrappedCurrency?.ticker); - })} + ${cutoffTimestamps.map((date) => queryFragment(type, date, collateralCurrency, wrappedCurrency))} } `; diff --git a/src/utils/constants/account.ts b/src/utils/constants/account.ts index 467df8b303..a9c88d129d 100644 --- a/src/utils/constants/account.ts +++ b/src/utils/constants/account.ts @@ -1,5 +1,11 @@ -import { APP_NAME } from '@/config/relay-chains'; +import { MonetaryAmount } from '@interlay/monetary-js'; + +import { APP_NAME, GOVERNANCE_TOKEN } from '@/config/relay-chains'; const SELECTED_ACCOUNT_LOCAL_STORAGE_KEY = `${APP_NAME}-selected-account`; -export { SELECTED_ACCOUNT_LOCAL_STORAGE_KEY }; +const DEFAULT_PROXY_ACCOUNT_AMOUNT = 10; + +const PROXY_ACCOUNT_RESERVE_AMOUNT = new MonetaryAmount(GOVERNANCE_TOKEN, 26); + +export { DEFAULT_PROXY_ACCOUNT_AMOUNT, PROXY_ACCOUNT_RESERVE_AMOUNT, SELECTED_ACCOUNT_LOCAL_STORAGE_KEY }; diff --git a/src/utils/helpers/extrinsic.ts b/src/utils/helpers/extrinsic.ts new file mode 100644 index 0000000000..acc58dfe86 --- /dev/null +++ b/src/utils/helpers/extrinsic.ts @@ -0,0 +1,9 @@ +import { SubmittableExtrinsic } from '@polkadot/api/types'; +import { AccountId } from '@polkadot/types/interfaces'; + +const proxifyExtrinsic = ( + proxyAccount: AccountId, + extrinsic: SubmittableExtrinsic<'promise'> +): SubmittableExtrinsic<'promise'> => window.bridge.api.tx.proxy.proxy(proxyAccount, 'Any', extrinsic); + +export { proxifyExtrinsic }; From 88e5af6fe2ec6fea874ac7d573a93ecabb97b0cf Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 28 Sep 2023 13:21:35 +0100 Subject: [PATCH 28/58] [release] Kintsugi 2.38.2 (#1573) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 * api: refactor the market data api (#1569) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * Tom/fix prices (#1571) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * wip: add log * wip: hardcode value to run against market data api * wip: try setting asset name * fix: casing * chore: add vKSM ids * fix: handle VDOT and VKSM * typo: quotation marks * chore: fix switch statement and remove console log * fix: revert change --------- Co-authored-by: ns212 * chore: add vDOT icon and sort imports (#1563) * chore: add token icons (#1572) * chore: add token icons * fix: correct ids for vDOT * chore: TBTC icon * chore: release v2.38.2 * fix: remove market data python script --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- api/market_data.js | 106 ++++++++++++++++++ api/market_data.py | 106 ------------------ package.json | 2 +- src/component-library/CoinIcon/icons/DAI.tsx | 28 +++++ src/component-library/CoinIcon/icons/GLMR.tsx | 36 ++++++ src/component-library/CoinIcon/icons/TBTC.tsx | 25 +++++ src/component-library/CoinIcon/icons/USDC.tsx | 29 +++++ src/component-library/CoinIcon/icons/VDOT.tsx | 54 +++++++++ src/component-library/CoinIcon/icons/WBNB.tsx | 39 +++++++ src/component-library/CoinIcon/icons/WBTC.tsx | 28 +++++ src/component-library/CoinIcon/icons/WETH.tsx | 50 +++++++++ src/component-library/CoinIcon/icons/index.ts | 8 ++ src/component-library/CoinIcon/utils.ts | 40 +++++-- src/hooks/api/use-get-prices.tsx | 13 ++- vercel.json | 6 +- 15 files changed, 449 insertions(+), 121 deletions(-) create mode 100644 api/market_data.js delete mode 100644 api/market_data.py create mode 100644 src/component-library/CoinIcon/icons/DAI.tsx create mode 100644 src/component-library/CoinIcon/icons/GLMR.tsx create mode 100644 src/component-library/CoinIcon/icons/TBTC.tsx create mode 100644 src/component-library/CoinIcon/icons/USDC.tsx create mode 100644 src/component-library/CoinIcon/icons/VDOT.tsx create mode 100644 src/component-library/CoinIcon/icons/WBNB.tsx create mode 100644 src/component-library/CoinIcon/icons/WBTC.tsx create mode 100644 src/component-library/CoinIcon/icons/WETH.tsx diff --git a/api/market_data.js b/api/market_data.js new file mode 100644 index 0000000000..59f3664ce7 --- /dev/null +++ b/api/market_data.js @@ -0,0 +1,106 @@ +// Dia to Coingecko names +const tickers = { + "Tether USD": "tether", + "Acala USD": "acala-dollar", + "BNB": "binancecoin", + "Wrapped BTC": "wrapped-bitcoin", + "Dai Stablecoin": "dai", + "Ether": "ethereum", + "USD Coin": "usd-coin", + "tBTC v2": "tbtc", + "Voucher Dot": "voucher-dot", + "Voucher KSM": "voucher-ksm" +} + +// Coingecko to Dia asset ids +const dia_assets = { + "bitcoin": "/Bitcoin/0x0000000000000000000000000000000000000000", + "ethereum": "/Ethereum/0x0000000000000000000000000000000000000000", + "interlay": "/Interlay/0x0000000000000000000000000000000000000000", + "polkadot": "/Polkadot/0x0000000000000000000000000000000000000000", + "kusama": "/Kusama/0x0000000000000000000000000000000000000000", + "kintsugi": "/Kintsugi/Token:KINT", + "acala-dollar": "/Acala/Token:AUSD", + "karura": "/Bifrost/518", + "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7", + "voucher-dot": "/Bifrost-polkadot/2304", + "voucher-ksm": "/Bifrost/260", + "binancecoin": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", + "bnb": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", + "tbtc": "/Ethereum/0x18084fbA666a33d37592fA2633fD49a74DD93a88", + "dai": "/Ethereum/0x6B175474E89094C44Da98b954EedeAC495271d0F", + "moonbeam": "/Moonbeam/0x0000000000000000000000000000000000000000", + "usd-coin": "/Ethereum/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", + "wrapped-bitcoin": "/Ethereum/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599" +} + +const fetchDiaAsset = async (asset) => { + try { + if (!dia_assets[asset]) { + console.log('Missing DIA asset: ', asset) + return coingecko({ ids: [asset], vs_currencies: ["usd"] }) + } + const url = 'https://api.diadata.org/v1/assetQuotation' + dia_assets[asset] + const response = await fetch(url, { headers: { "accept": "application/json" } }) + if (!response.ok) { + throw new Error(response.status) + } + const json = await response.json() + + // optionally rename the ticker + const name = (tickers[json.Name] ?? json.Name).toLowerCase() + return { + [name]: { + 'usd': json.Price + } + } + } catch (error) { + console.log(error) + } +} + +const dia = async (args) => { + const assets = args.ids.split(',') + + return Promise + .all(assets.map(x => fetchDiaAsset(x))) + .then(x => x.reduce((map, obj) => { + // we need to convert the list to an object + const k = Object.keys(obj)[0] + map[k] = obj[k] + return map + }, {})) +} + +const coingecko = async (args) => { + const url = 'https://api.coingecko.com/api/v3/simple/price?' + new URLSearchParams(args) + const response = await fetch(url, { headers: { "accept": "application/json" } }) + return await response.json() +} + +const fetchPrices = (priceSource, args) => { + if (priceSource === 'coingecko') { + return coingecko(args) + } else if (priceSource === 'dia') { + return dia(args) + } else { + try { + return dia(args) + } catch (error) { + console.log(error) + return coingecko(args) + } + } +} + +export default async function (request, response) { + const args = request.query + const priceSource = args['price-source'] + + const resp = await fetchPrices(priceSource, args) + return response + .status(200) + .setHeader("content-type", "application/json") + .setHeader("cache-control", "public, maxage=0, s-maxage=300") + .json(resp) +} diff --git a/api/market_data.py b/api/market_data.py deleted file mode 100644 index 6c2c7eeae3..0000000000 --- a/api/market_data.py +++ /dev/null @@ -1,106 +0,0 @@ -from flask import Flask, request, jsonify -from flask_cors import CORS -import requests -import os - -app = Flask(__name__) -CORS(app) - -api_key = os.environ.get("CG_API_KEY") - -tickers = { - "Tether USD": "tether", - "Acala USD": "acala-dollar" -} - -# map coingecko ids to dia ids -dia_assets = { - "bitcoin": "/Bitcoin/0x0000000000000000000000000000000000000000", - "ethereum": "/Ethereum/0x0000000000000000000000000000000000000000", - "interlay": "/Interlay/0x0000000000000000000000000000000000000000", - "polkadot": "/Polkadot/0x0000000000000000000000000000000000000000", - "kusama": "/Kusama/0x0000000000000000000000000000000000000000", - "kintsugi": "/Kintsugi/Token:KINT", - "acala-dollar": "/Acala/Token:AUSD", - "karura": "/Bifrost/518", - "tether": "/Ethereum/0xdAC17F958D2ee523a2206206994597C13D831ec7", - "voucher-dot": "/Bifrost-polkadot/2304", - "binancecoin": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", - "bnb": "/Ethereum/0xB8c77482e45F1F44dE1745F52C74426C631bDD52", - "tbtc": "/Ethereum/0x18084fbA666a33d37592fA2633fD49a74DD93a88", - "dai": "/Ethereum/0x6B175474E89094C44Da98b954EedeAC495271d0F", -} - -@app.after_request -def add_header(response): - response.cache_control.max_age = 0 - response.cache_control.s_maxage = 300 - return response - -def coingecko(args): - headers_dict = { - "content-type": "application/json", - "accept": "application/json" - } - url = "https://api.coingecko.com/api/v3/simple/price" - resp = requests.get(url, params=args, headers=headers_dict) - data = resp.json() - return data - -def dia(asset): - headers_dict = { - "content-type": "application/json", - "accept": "application/json" - } - - url = "https://api.diadata.org/v1/assetQuotation" - try: - url += dia_assets[asset] - resp = requests.get(url, headers=headers_dict) - data = resp.json() - - # optionally rename the ticker - ticker = tickers.get(data["Name"], data["Name"]).lower() - - return { - ticker: { - "usd": data["Price"], - } - } - except KeyError: - try: - return coingecko({"ids": [asset], "vs_currencies": ["usd"]}) - except Exception as e: - print("Coingecko error", e) - return { asset: None } - - -@app.route("/marketdata/price", methods=["GET"]) -def get_price(): - args = request.args - - price_source = args.get('price-source') - - data = {} - - def _dia(): - ticker_ids = args["ids"].split(",") - for ticker_id in ticker_ids: - data.update(dia(ticker_id)) - - if price_source == "dia": - _dia() - elif price_source == "coingecko": - data = coingecko(args) - else: - try: - _dia() - except Exception as e: - print("Error", e) - data = coingecko(args) - - return jsonify(data) - - -if __name__ == "__main__": - app.run() diff --git a/package.json b/package.json index 4bb28ed380..1ce77c9117 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.38.1", + "version": "2.38.2", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/component-library/CoinIcon/icons/DAI.tsx b/src/component-library/CoinIcon/icons/DAI.tsx new file mode 100644 index 0000000000..86b544c80b --- /dev/null +++ b/src/component-library/CoinIcon/icons/DAI.tsx @@ -0,0 +1,28 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const DAI = forwardRef((props, ref) => ( + + DAI + + + + + + + + + + +)); + +DAI.displayName = 'DAI'; + +export { DAI }; diff --git a/src/component-library/CoinIcon/icons/GLMR.tsx b/src/component-library/CoinIcon/icons/GLMR.tsx new file mode 100644 index 0000000000..2d52dd42f3 --- /dev/null +++ b/src/component-library/CoinIcon/icons/GLMR.tsx @@ -0,0 +1,36 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const GLMR = forwardRef((props, ref) => ( + + GLMR + + + + + + + + + + + + + + + + + + +)); + +GLMR.displayName = 'GLMR'; + +export { GLMR }; diff --git a/src/component-library/CoinIcon/icons/TBTC.tsx b/src/component-library/CoinIcon/icons/TBTC.tsx new file mode 100644 index 0000000000..748a79cc00 --- /dev/null +++ b/src/component-library/CoinIcon/icons/TBTC.tsx @@ -0,0 +1,25 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const TBTC = forwardRef((props, ref) => ( + + TBTC + + + + + + +)); + +TBTC.displayName = 'TBTC'; + +export { TBTC }; diff --git a/src/component-library/CoinIcon/icons/USDC.tsx b/src/component-library/CoinIcon/icons/USDC.tsx new file mode 100644 index 0000000000..5d61c399eb --- /dev/null +++ b/src/component-library/CoinIcon/icons/USDC.tsx @@ -0,0 +1,29 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const USDC = forwardRef((props, ref) => ( + + USDC + + + + + + + + + + + +)); + +USDC.displayName = 'USDC'; + +export { USDC }; diff --git a/src/component-library/CoinIcon/icons/VDOT.tsx b/src/component-library/CoinIcon/icons/VDOT.tsx new file mode 100644 index 0000000000..4171f21ee1 --- /dev/null +++ b/src/component-library/CoinIcon/icons/VDOT.tsx @@ -0,0 +1,54 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const VDOT = forwardRef((props, ref) => ( + + VDOT + + + + + + + + + + + + + + + + + + + + + + + + + + + + +)); + +VDOT.displayName = 'VDOT'; + +export { VDOT }; diff --git a/src/component-library/CoinIcon/icons/WBNB.tsx b/src/component-library/CoinIcon/icons/WBNB.tsx new file mode 100644 index 0000000000..28844d6ccc --- /dev/null +++ b/src/component-library/CoinIcon/icons/WBNB.tsx @@ -0,0 +1,39 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const WBNB = forwardRef((props, ref) => ( + + WBNB + + + + + + + + + + + + + +)); + +WBNB.displayName = 'WBNB'; + +export { WBNB }; diff --git a/src/component-library/CoinIcon/icons/WBTC.tsx b/src/component-library/CoinIcon/icons/WBTC.tsx new file mode 100644 index 0000000000..7093d45123 --- /dev/null +++ b/src/component-library/CoinIcon/icons/WBTC.tsx @@ -0,0 +1,28 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const WBTC = forwardRef((props, ref) => ( + + WBTC + + + + + +)); + +WBTC.displayName = 'WBTC'; + +export { WBTC }; diff --git a/src/component-library/CoinIcon/icons/WETH.tsx b/src/component-library/CoinIcon/icons/WETH.tsx new file mode 100644 index 0000000000..87cac93d50 --- /dev/null +++ b/src/component-library/CoinIcon/icons/WETH.tsx @@ -0,0 +1,50 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const WETH = forwardRef((props, ref) => ( + + WETH + + + + + + + + + + + + + + + +)); + +WETH.displayName = 'WETH'; + +export { WETH }; diff --git a/src/component-library/CoinIcon/icons/index.ts b/src/component-library/CoinIcon/icons/index.ts index fc94af8105..a91c938782 100644 --- a/src/component-library/CoinIcon/icons/index.ts +++ b/src/component-library/CoinIcon/icons/index.ts @@ -1,7 +1,9 @@ export { AUSD } from './AUSD'; export { BTC } from './BTC'; +export { DAI } from './DAI'; export { DOT } from './DOT'; export { ETH } from './ETH'; +export { GLMR } from './GLMR'; export { IBTC } from './IBTC'; export { INTR } from './INTR'; export { KAR } from './KAR'; @@ -21,5 +23,11 @@ export { qKSM } from './qKSM'; export { qMOVR } from './qMOVR'; export { qUSDT } from './qUSDT'; export { SKSM } from './SKSM'; +export { TBTC } from './TBTC'; +export { USDC } from './USDC'; export { USDT } from './USDT'; +export { VDOT } from './VDOT'; export { VKSM } from './VKSM'; +export { WBNB } from './WBNB'; +export { WBTC } from './WBTC'; +export { WETH } from './WETH'; diff --git a/src/component-library/CoinIcon/utils.ts b/src/component-library/CoinIcon/utils.ts index 04f540e234..9146090662 100644 --- a/src/component-library/CoinIcon/utils.ts +++ b/src/component-library/CoinIcon/utils.ts @@ -1,8 +1,10 @@ import { AUSD, BTC, + DAI, DOT, ETH, + GLMR, IBTC, INTR, KAR, @@ -22,35 +24,49 @@ import { qMOVR, qUSDT, SKSM, + TBTC, + USDC, USDT, - VKSM + VDOT, + VKSM, + WBNB, + WBTC, + WETH } from './icons'; import { CoinComponent } from './types'; export const coins: Record = { + AUSD, BTC, + DAI, DOT, + ETH, + GLMR, IBTC, INTR, + KAR, KBTC, KINT, KSM, LDOT, LKSM, - USDT, - VKSM, LSKSM, MOVR, - SKSM, - qUSDT, - qKINT, - qKBTC, - qKSM, - qMOVR, - AUSD, - KAR, qDOT, qIBTC, qINTR, - ETH + qKBTC, + qKINT, + qKSM, + qMOVR, + qUSDT, + SKSM, + TBTC, + USDC, + USDT, + VDOT, + VKSM, + WBNB, + WBTC, + WETH }; diff --git a/src/hooks/api/use-get-prices.tsx b/src/hooks/api/use-get-prices.tsx index 8cacd07989..a9ba628c69 100644 --- a/src/hooks/api/use-get-prices.tsx +++ b/src/hooks/api/use-get-prices.tsx @@ -14,7 +14,17 @@ import { useGetCurrencies } from './use-get-currencies'; // MEMO: Returns `undefined` for currencies without coingecko ID. const getCoingeckoId = (currency: CurrencyExt) => { if (isForeignAsset(currency)) { - return currency.foreignAsset.coingeckoId; + // TODO: This is a temporary fix to force V[DOT/KSM] prices. We need to refactor the lib to return an id + // even when a CoinGecko id doesn't exist. We also need to remove references to CoinGecko ids; this + // doesn't make sense/is very confusing now that we use DIA as our primary price source. + switch (currency.ticker) { + case 'VDOT': + return 'voucher-dot'; + case 'VKSM': + return 'voucher-ksm'; + default: + return currency.foreignAsset.coingeckoId; + } } return COINGECKO_ID_BY_CURRENCY_TICKER[currency.ticker]; }; @@ -22,6 +32,7 @@ const getCoingeckoId = (currency: CurrencyExt) => { const composeIds = (currencies: CurrencyExt[]): string => currencies.reduce((acc, currency) => { const coingeckoId = getCoingeckoId(currency); + console.log('coingeckoId', coingeckoId); if (!coingeckoId) { return acc; } diff --git a/vercel.json b/vercel.json index 99b54b6e47..ca05a8c330 100644 --- a/vercel.json +++ b/vercel.json @@ -7,6 +7,10 @@ "api/terms.js": { "memory": 256, "maxDuration": 10 + }, + "api/market_data.js": { + "memory": 128, + "maxDuration": 5 } }, "rewrites": [ @@ -20,7 +24,7 @@ }, { "source": "/marketdata/(.*)", - "destination": "/api/market_data.py" + "destination": "/api/market_data.js" }, { "source": "/terms/(.*)", From 9fd163bafe9a9ea2b52342990dcba420b0542e69 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 2 Oct 2023 10:59:29 +0100 Subject: [PATCH 29/58] [release] Kintsugi 2.39.0 (#1582) --- package.json | 37 +- .../AccountSelect/AccountSelect.tsx | 9 +- src/components/AuthModal/AccountStep.tsx | 7 +- src/components/AuthModal/AuthModal.tsx | 7 +- src/config/relay-chains.tsx | 5 +- src/hooks/api/use-get-prices.tsx | 2 +- src/hooks/api/xcm/xcm-endpoints.ts | 1 + src/hooks/use-wallet.ts | 5 +- src/legacy-components/Topbar/index.tsx | 3 +- src/lib/substrate/context/provider.tsx | 2 +- src/lib/substrate/context/types.ts | 6 +- src/pages/Onboarding/Onboarding.tsx | 3 +- .../components/BridgeForm/BridgeForm.tsx | 2 +- yarn.lock | 3000 ++++++++++++++--- 14 files changed, 2528 insertions(+), 561 deletions(-) diff --git a/package.json b/package.json index 1ce77c9117..1d53282a76 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,18 @@ { "name": "interbtc-ui", - "version": "2.38.2", + "version": "2.39.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", - "@interlay/bridge": "^0.3.13", - "@interlay/interbtc-api": "2.4.3", + "@interlay/bridge": "^0.4.0", + "@interlay/interbtc-api": "2.5.1", "@interlay/monetary-js": "0.7.3", - "@polkadot/api": "9.14.2", - "@polkadot/extension-dapp": "0.44.1", - "@polkadot/react-identicon": "^2.11.1", - "@polkadot/ui-keyring": "^2.9.7", + "@polkadot/api": "10.9.1", + "@polkadot/extension-dapp": "^0.46.5", + "@polkadot/react-identicon": "^3.6.2", + "@polkadot/ui-keyring": "^3.6.2", "@reach/tooltip": "^0.16.0", "@react-aria/accordion": "^3.0.0-alpha.14", "@react-aria/breadcrumbs": "^3.5.3", @@ -91,7 +91,7 @@ "@commitlint/cli": "^16.2.4", "@commitlint/config-conventional": "^16.2.4", "@open-wc/webpack-import-meta-loader": "^0.4.7", - "@polkadot/types": "9.14.2", + "@polkadot/types": "10.9.1", "@react-types/grid": "^3.1.2", "@react-types/shared": "^3.14.0", "@storybook/addon-actions": "^6.5.9", @@ -135,27 +135,12 @@ "webpack-bundle-analyzer": "^4.4.0" }, "resolutions": { + "@acala-network/api": "5.1.2-7", + "@acala-network/eth-providers": "2.6.10", "babel-loader": "8.1.0", "bn.js": "4.12.0", "react-error-overlay": "6.0.9", - "styled-components": "^5", - "@types/history": "^4.7.1", - "@polkadot/api": "^9.14.2", - "@polkadot/api-augment": "^9.14.2", - "@polkadot/api-base": "^9.14.2", - "@polkadot/api-contract": "^9.14.2", - "@polkadot/api-derive": "^9.14.2", - "@polkadot/rpc-augment": "^9.14.2", - "@polkadot/rpc-core": "^9.14.2", - "@polkadot/rpc-provider": "^9.14.2", - "@polkadot/types": "^9.14.2", - "@polkadot/types-augment": "^9.14.2", - "@polkadot/types-codec": "^9.14.2", - "@polkadot/types-create": "^9.14.2", - "@polkadot/types-known": "^9.14.2", - "@polkadot/types-support": "^9.14.2", - "@polkadot/util": "^10.2.4", - "@polkadot/util-crypto": "^10.2.4" + "@types/history": "^4.7.1" }, "scripts": { "start": "NODE_OPTIONS=--openssl-legacy-provider craco start", diff --git a/src/components/AccountSelect/AccountSelect.tsx b/src/components/AccountSelect/AccountSelect.tsx index d00b83f64d..38a9ac8f57 100644 --- a/src/components/AccountSelect/AccountSelect.tsx +++ b/src/components/AccountSelect/AccountSelect.tsx @@ -1,15 +1,14 @@ -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; - import { Item, Select, SelectProps } from '@/component-library'; +import { KeyringPair } from '@/lib/substrate'; import { AccountItem } from './AccountItem'; -type AccountSelectProps = Omit, 'children' | 'type'>; +type AccountSelectProps = Omit, 'children' | 'type'>; const AccountSelect = ({ ...props }: AccountSelectProps): JSX.Element => { return ( - {...props} type='modal' modalTitle='Select Account' size='large'> - {(data: InjectedAccountWithMeta) => ( + {...props} type='modal' modalTitle='Select Account' size='large'> + {(data: KeyringPair) => ( diff --git a/src/components/AuthModal/AccountStep.tsx b/src/components/AuthModal/AccountStep.tsx index 7a28cfabbe..1d5d175f8f 100644 --- a/src/components/AuthModal/AccountStep.tsx +++ b/src/components/AuthModal/AccountStep.tsx @@ -1,4 +1,3 @@ -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; import { mergeProps } from '@react-aria/utils'; import { useTranslation } from 'react-i18next'; import { useCopyToClipboard } from 'react-use'; @@ -14,7 +13,7 @@ import { StepComponentProps, withStep } from '@/utils/hocs/step'; import { StyledAccountItem, StyledCopyItem, StyledP } from './AuthModal.style'; import { AuthModalSteps } from './types'; -type CopyAddressProps = { account: InjectedAccountWithMeta }; +type CopyAddressProps = { account: KeyringPair }; const CopyAddress = ({ account }: CopyAddressProps) => { const [, copy] = useCopyToClipboard(); @@ -36,11 +35,11 @@ const CopyAddress = ({ account }: CopyAddressProps) => { }; type AccountStepProps = { - accounts: InjectedAccountWithMeta[]; + accounts: KeyringPair[]; wallet: WalletData; selectedAccount?: KeyringPair; onChangeWallet?: () => void; - onSelectionChange: (account: InjectedAccountWithMeta) => void; + onSelectionChange: (account: KeyringPair) => void; } & StepComponentProps; const AccountComponent = ({ diff --git a/src/components/AuthModal/AuthModal.tsx b/src/components/AuthModal/AuthModal.tsx index 89d8eb0904..41c621d3c1 100644 --- a/src/components/AuthModal/AuthModal.tsx +++ b/src/components/AuthModal/AuthModal.tsx @@ -1,9 +1,10 @@ -import { InjectedAccountWithMeta, InjectedExtension } from '@polkadot/extension-inject/types'; +import { InjectedExtension } from '@polkadot/extension-inject/types'; import { useEffect, useMemo, useState } from 'react'; import { TFunction, useTranslation } from 'react-i18next'; import { CTA, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@/component-library'; import { useSubstrateSecureState } from '@/lib/substrate'; +import { KeyringPair } from '@/lib/substrate'; import { WalletData } from '@/utils/constants/wallets'; import { findWallet } from '@/utils/helpers/wallet'; @@ -25,7 +26,7 @@ const getTitle = (t: TFunction, step: AuthModalSteps, extensions: InjectedExtens }; type Props = { - onAccountSelect?: (account: InjectedAccountWithMeta) => void; + onAccountSelect?: (account: KeyringPair) => void; onDisconnect?: () => void; }; @@ -58,7 +59,7 @@ const AuthModal = ({ onAccountSelect, onDisconnect, isOpen, ...props }: AuthModa setWallet(undefined); }; - const handleAccountSelection = (account: InjectedAccountWithMeta) => onAccountSelect?.(account); + const handleAccountSelection = (account: KeyringPair) => onAccountSelect?.(account); const handleDisconnect = () => onDisconnect?.(); diff --git a/src/config/relay-chains.tsx b/src/config/relay-chains.tsx index fc0d3a9737..44b7fea11a 100644 --- a/src/config/relay-chains.tsx +++ b/src/config/relay-chains.tsx @@ -1,6 +1,6 @@ import { AcalaAdapter, KaruraAdapter } from '@interlay/bridge/build/adapters/acala'; import { AstarAdapter } from '@interlay/bridge/build/adapters/astar'; -import { BifrostAdapter } from '@interlay/bridge/build/adapters/bifrost'; +import { BifrostKusamaAdapter, BifrostPolkadotAdapter } from '@interlay/bridge/build/adapters/bifrost'; import { HydraAdapter } from '@interlay/bridge/build/adapters/hydradx'; import { InterlayAdapter, KintsugiAdapter } from '@interlay/bridge/build/adapters/interlay'; import { HeikoAdapter, ParallelAdapter } from '@interlay/bridge/build/adapters/parallel'; @@ -165,6 +165,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { XCM_ADAPTERS = { interlay: new InterlayAdapter(), acala: new AcalaAdapter(), + bifrost_polkadot: new BifrostPolkadotAdapter(), astar: new AstarAdapter(), hydra: new HydraAdapter(), parallel: new ParallelAdapter(), @@ -214,7 +215,7 @@ switch (process.env.REACT_APP_RELAY_CHAIN_NAME) { kusama: new KusamaAdapter(), karura: new KaruraAdapter(), statemine: new StatemineAdapter(), - bifrost: new BifrostAdapter(), + bifrost: new BifrostKusamaAdapter(), heiko: new HeikoAdapter() }; SS58_PREFIX = 2; diff --git a/src/hooks/api/use-get-prices.tsx b/src/hooks/api/use-get-prices.tsx index a9ba628c69..2c0bd250fc 100644 --- a/src/hooks/api/use-get-prices.tsx +++ b/src/hooks/api/use-get-prices.tsx @@ -32,7 +32,7 @@ const getCoingeckoId = (currency: CurrencyExt) => { const composeIds = (currencies: CurrencyExt[]): string => currencies.reduce((acc, currency) => { const coingeckoId = getCoingeckoId(currency); - console.log('coingeckoId', coingeckoId); + if (!coingeckoId) { return acc; } diff --git a/src/hooks/api/xcm/xcm-endpoints.ts b/src/hooks/api/xcm/xcm-endpoints.ts index 7f40bd7a80..f071e7bef5 100644 --- a/src/hooks/api/xcm/xcm-endpoints.ts +++ b/src/hooks/api/xcm/xcm-endpoints.ts @@ -6,6 +6,7 @@ const XCMEndpoints: XCMEndpointsRecord = { acala: ['wss://acala-rpc-1.aca-api.network', 'wss://acala-rpc-3.aca-api.network/ws', 'wss://acala-rpc.dwellir.com'], astar: ['wss://rpc.astar.network', 'wss://astar-rpc.dwellir.com'], bifrost: ['wss://bifrost-rpc.dwellir.com'], + bifrost_polkadot: ['wss://hk.p.bifrost-rpc.liebi.com/ws'], heiko: ['wss://heiko-rpc.parallel.fi'], hydra: ['wss://rpc.hydradx.cloud', 'wss://hydradx-rpc.dwellir.com'], interlay: ['wss://api.interlay.io/parachain'], diff --git a/src/hooks/use-wallet.ts b/src/hooks/use-wallet.ts index 60609b60b9..633620a08f 100644 --- a/src/hooks/use-wallet.ts +++ b/src/hooks/use-wallet.ts @@ -1,17 +1,16 @@ import { newAccountId } from '@interlay/interbtc-api'; -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; import { AccountId } from '@polkadot/types/interfaces'; import { useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { StoreType } from '@/common/types/util.types'; import { SS58_PREFIX } from '@/config/relay-chains'; -import { useSubstrateSecureState } from '@/lib/substrate'; +import { KeyringPair, useSubstrateSecureState } from '@/lib/substrate'; type UseWalletResult = { isAuth: boolean; account?: AccountId; - accounts: InjectedAccountWithMeta[]; + accounts: KeyringPair[]; getRelayChainAddress: (address?: string) => string | undefined; }; diff --git a/src/legacy-components/Topbar/index.tsx b/src/legacy-components/Topbar/index.tsx index 3c66aa8735..d14eadbeb6 100644 --- a/src/legacy-components/Topbar/index.tsx +++ b/src/legacy-components/Topbar/index.tsx @@ -1,6 +1,5 @@ import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'; import { Keyring } from '@polkadot/api'; -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; import clsx from 'clsx'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; @@ -42,7 +41,7 @@ const Topbar = (): JSX.Element => { const handleAccountModalClose = () => dispatch(showAccountModalAction(false)); - const handleAccountSelect = (account: InjectedAccountWithMeta) => { + const handleAccountSelect = (account: KeyringPair) => { const keyring = new Keyring({ type: 'sr25519', ss58Format: SS58_FORMAT }); const keyringAccount = keyring.addFromAddress(account.address, account.meta); setSelectedAccount(keyringAccount); diff --git a/src/lib/substrate/context/provider.tsx b/src/lib/substrate/context/provider.tsx index dc08b624b4..19858a1356 100644 --- a/src/lib/substrate/context/provider.tsx +++ b/src/lib/substrate/context/provider.tsx @@ -131,7 +131,7 @@ const loadAccounts = async (api: ApiPromise, dispatch: Dispatch): Promise payload: theExtensions }); - const theAccounts = await web3Accounts({ ss58Format: constants.SS58_FORMAT }); + const theAccounts = (await web3Accounts({ ss58Format: constants.SS58_FORMAT })) as KeyringPair[]; dispatch({ type: ActionType.SetAccounts, payload: theAccounts diff --git a/src/lib/substrate/context/types.ts b/src/lib/substrate/context/types.ts index 4ebcf91fe2..d121205773 100644 --- a/src/lib/substrate/context/types.ts +++ b/src/lib/substrate/context/types.ts @@ -1,5 +1,5 @@ import { ApiPromise } from '@polkadot/api'; -import { InjectedAccountWithMeta, InjectedExtension } from '@polkadot/extension-inject/types'; +import { InjectedExtension } from '@polkadot/extension-inject/types'; import { KeyringPair as PolkadotKeyringPair, KeyringPair$Meta } from '@polkadot/keyring/types'; import type { DefinitionRpcExt } from '@polkadot/types/types'; import { Keyring } from '@polkadot/ui-keyring/Keyring'; @@ -59,7 +59,7 @@ type Action = | { type: ActionType.SetKeyringReady; payload: Keyring } | { type: ActionType.SetKeyringError } | { type: ActionType.SetSelectedAccount; payload: KeyringPair | undefined } - | { type: ActionType.SetAccounts; payload: Array } + | { type: ActionType.SetAccounts; payload: Array } | { type: ActionType.SetExtensions; payload: Array }; type Dispatch = (action: Action) => void; @@ -73,7 +73,7 @@ type State = { apiError: APIError | undefined; apiStatus: ApiStatus; selectedAccount: KeyringPair | undefined; - accounts: Array; + accounts: Array; extensions: Array; }; diff --git a/src/pages/Onboarding/Onboarding.tsx b/src/pages/Onboarding/Onboarding.tsx index 2df83f77e5..d81908dc8f 100644 --- a/src/pages/Onboarding/Onboarding.tsx +++ b/src/pages/Onboarding/Onboarding.tsx @@ -1,5 +1,4 @@ import { Keyring } from '@polkadot/api'; -import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types'; import { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; @@ -45,7 +44,7 @@ const Onboarding = (): JSX.Element => { const handleAccountModalClose = () => dispatch(showAccountModalAction(false)); - const handleAccountSelect = (account: InjectedAccountWithMeta) => { + const handleAccountSelect = (account: KeyringPair) => { const keyring = new Keyring({ type: 'sr25519', ss58Format: SS58_FORMAT }); const keyringAccount = keyring.addFromAddress(account.address, account.meta); setSelectedAccount(keyringAccount); diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx index ea338af315..0176f48ee0 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx @@ -87,7 +87,7 @@ const BridgeForm = (): JSX.Element => { const apiPromise = data.provider.getApiPromise(formData[BRIDGE_FROM_FIELD] as string); apiPromise.setSigner(signer); - adapter.setApi(apiPromise); + await adapter.setApi(apiPromise); const transferCurrency = getCurrencyFromTicker(currentToken.value); const transferAmount = newMonetaryAmount(form.values[BRIDGE_AMOUNT_FIELD] || 0, transferCurrency, true); diff --git a/yarn.lock b/yarn.lock index 3d55a76db9..e089fa3ff4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,64 +2,33 @@ # yarn lockfile v1 -"@acala-network/api-derive@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/api-derive/-/api-derive-4.1.8-13.tgz#0ac02da5494c9f6ea8d52235836ecb369dea443d" - integrity sha512-Bm7005fPvFMcohvlpbGJMpm0Vm/63PTkRcg0shZvcjuMak3YSR0NhceZRnMoHz+I0Ond5XGRjZVZA/eyRMbSsg== +"@acala-network/api-derive@5.1.2-7": + version "5.1.2-7" + resolved "https://registry.yarnpkg.com/@acala-network/api-derive/-/api-derive-5.1.2-7.tgz#88f7cbdffc7db9444b98d803cbc42c2f8cb9e461" + integrity sha512-EjcW/hgzvLa5p0CNJ7A1kGQ32VuifwF8g9ryGj+xrvJbrySpDzBKer6ssmS+MF2oxnU1gtOiJm8WQr8orlNJBQ== dependencies: - "@acala-network/types" "4.1.8-13" - "@babel/runtime" "^7.10.2" - "@open-web3/orml-types" "^1.1.4" - "@polkadot/api-derive" "^8.5.1" + "@acala-network/types" "5.1.2-7" -"@acala-network/api-derive@4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/api-derive/-/api-derive-4.1.8-9.tgz#f4d3969665fe2e92d2fca73d2c403e4f26b519bd" - integrity sha512-GN/9rXRGy5zJ0eEeBSoO2lC3MgT2D2A4O94DMtONNQsD30RMBhtSj5PTd8Mo+RnaFVzwLrbsCNs1UxkmAg4Rlg== +"@acala-network/api@5.1.2-7", "@acala-network/api@^5", "@acala-network/api@^5.1.1": + version "5.1.2-7" + resolved "https://registry.yarnpkg.com/@acala-network/api/-/api-5.1.2-7.tgz#ee4f58035da666a875ceb58b14393d6c280e82ed" + integrity sha512-knXQJuC7bEv+C7aq1CrwzN3B/tlj5hkH7rkdPM+n/tEIpNPdyf7Mk+l5wiRCygOXDR9Ejh4S3Xij91kGQbmJKQ== dependencies: - "@acala-network/types" "4.1.8-9" - "@babel/runtime" "^7.10.2" - "@open-web3/orml-types" "^1.1.4" - "@polkadot/api-derive" "^8.5.1" - -"@acala-network/api@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/api/-/api-4.1.8-13.tgz#8127edaba9802eaa6a20678e823f43f2affb6067" - integrity sha512-+m032NiYPAvbOHeaJrCKQuACe9hykNTpQpDKeKkg0RME9JnFKeR7TYLkWtInhbmql6b8LxAAdpy2gdQctrsCRA== - dependencies: - "@acala-network/api-derive" "4.1.8-13" - "@acala-network/types" "4.1.8-13" - "@babel/runtime" "^7.10.2" - "@open-web3/orml-api-derive" "^1.1.4" - "@polkadot/api" "^9.9.1" - "@polkadot/rpc-core" "^9.9.1" + "@acala-network/api-derive" "5.1.2-7" + "@acala-network/types" "5.1.2-7" -"@acala-network/api@~4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/api/-/api-4.1.8-9.tgz#9213e09b7c43b3df95eaf47fe78c989ddfe4207e" - integrity sha512-9kpYQYe5vBCKWlyABh+Q2sjONDdtNfdv0PL0Tek3bpt00a3VjNIZvQro5ZSwzdpGJs5YcsiWPRMBq3iMgJNtGQ== - dependencies: - "@acala-network/api-derive" "4.1.8-9" - "@acala-network/types" "4.1.8-9" - "@babel/runtime" "^7.10.2" - "@open-web3/orml-api-derive" "^1.1.4" - "@polkadot/api" "^9.9.1" - "@polkadot/rpc-core" "^9.9.1" - -"@acala-network/contracts@~4.3.4": +"@acala-network/contracts@4.3.4": version "4.3.4" resolved "https://registry.yarnpkg.com/@acala-network/contracts/-/contracts-4.3.4.tgz#f37cf54894c72b762df539042a61f90b10b68600" integrity sha512-oBgXGUjRW+lRo9TWGtCB1+OpEOFfhxW//wReb7V/YdbEElVvYuKw3lmfly/eZ/mdBgqxA3eXxNW0AgXiyOn2NQ== -"@acala-network/eth-providers@^2.5.9": - version "2.6.5" - resolved "https://registry.yarnpkg.com/@acala-network/eth-providers/-/eth-providers-2.6.5.tgz#9087abe44a0686de5188ea962961519ecff20e66" - integrity sha512-Y0hi0LRN8pJ144dv9WcSi9nPn5Wez0h745EGa1/6NFtU7jsua0jg25WYJ53s17rXIMz8GUKdln9SAIeShQiEtw== +"@acala-network/eth-providers@2.6.10", "@acala-network/eth-providers@~2.7.3": + version "2.6.10" + resolved "https://registry.yarnpkg.com/@acala-network/eth-providers/-/eth-providers-2.6.10.tgz#3e4a26080b55c7b042ab6bd76a7dabe75ecd76bc" + integrity sha512-/kjL2H6bHIIk3HXh6qh9cT19/9gkilHZtinTUEhqsZCibxM4Gfu4FpLHdOZiTCMMmOpRnHrY9VtM9y6hxNOZlA== dependencies: - "@acala-network/api" "~4.1.8-9" - "@acala-network/contracts" "~4.3.4" - "@acala-network/eth-transactions" "2.6.5" - "@acala-network/types" "~4.1.8-9" + "@acala-network/contracts" "4.3.4" + "@acala-network/eth-transactions" "2.6.10" "@ethersproject/abstract-provider" "~5.7.0" "@ethersproject/address" "~5.7.0" "@ethersproject/bignumber" "~5.7.0" @@ -72,23 +41,16 @@ "@ethersproject/providers" "~5.7.0" "@ethersproject/transactions" "~5.7.0" "@ethersproject/wallet" "~5.7.0" - "@polkadot/api" "9.10.3" - "@polkadot/api-augment" "9.10.3" - "@polkadot/api-derive" "9.10.3" - "@polkadot/keyring" "^10.2.1" - "@polkadot/types" "9.10.3" - "@polkadot/util" "^10.2.1" - "@polkadot/util-crypto" "^10.2.1" bn.js "~5.2.0" ethers "~5.7.0" graphql "~16.0.1" graphql-request "~3.6.1" lru-cache "~7.8.2" -"@acala-network/eth-transactions@2.6.5": - version "2.6.5" - resolved "https://registry.yarnpkg.com/@acala-network/eth-transactions/-/eth-transactions-2.6.5.tgz#ddc93a3cd766c89aa81acdcd4aa9d00854b2116d" - integrity sha512-r+1i3AWHpg+vWZbiTldDSztZAPh+lJl4d9NKh7DCRgEd5/yOXgK5D05j1tTISut3ckENHBE2m0MKDp/4xX+3Eg== +"@acala-network/eth-transactions@2.6.10": + version "2.6.10" + resolved "https://registry.yarnpkg.com/@acala-network/eth-transactions/-/eth-transactions-2.6.10.tgz#4de69a1600ade0848de6d96fcd7cc54edb24bb5f" + integrity sha512-+XLe2q3Ikqn5qOXK5ZP8E/26e1eRdumKEiJ/7kNEJjI2JhGrJE8RuPVKtETYZU34uu5ZFzRsquHGFPsXSYVFnw== dependencies: "@ethersproject/address" "~5.7.0" "@ethersproject/bignumber" "~5.7.0" @@ -99,83 +61,55 @@ "@ethersproject/rlp" "~5.7.0" "@ethersproject/transactions" "~5.7.0" "@ethersproject/wallet" "~5.7.0" - "@polkadot/util-crypto" "^10.2.1" -"@acala-network/sdk-core@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/sdk-core/-/sdk-core-4.1.8-13.tgz#ff69ef993f5a36caa31744384c389765ede7cc96" - integrity sha512-4q9lksLJ/8lXA/f/t9GHQqv8ePIT2vId7rkaoqE/jASq6ngRFg2heV/6eScCKudr2aJN68YX3Jf0hwH6eazVLQ== +"@acala-network/sdk-core@4.1.9-8", "@acala-network/sdk-core@^4.1.9-7": + version "4.1.9-8" + resolved "https://registry.yarnpkg.com/@acala-network/sdk-core/-/sdk-core-4.1.9-8.tgz#66e9574c30f01a8d3ec8810d664e2ed595236fa8" + integrity sha512-+aDxhScEfOuyvbBbsbAMMAXz3BRDXGRAzBAeQr6c2epJt3BGVFpouChlGRI5VJ+LpgR1dvfxZFqUAKBCy71ofg== dependencies: - "@polkadot/api" "^9.9.1" - "@polkadot/types" "^9.9.1" - "@types/events" "^3.0.0" + "@acala-network/types" "^6.0.0-34" + "@polkadot/api" "^10.9.1" bignumber.js "^9.0.0" - events "^3.2.0" lodash "^4.17.20" -"@acala-network/sdk@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/sdk/-/sdk-4.1.8-13.tgz#f603a6c84c4654971495676345f4a24041ff1c02" - integrity sha512-3apYrmQ+WZWzEYd0sdLCpTYe8SagMMK2+0vj35ANVvD92FHUUkHTtJAEiCu81y0ujFuFbtx/VxA0uGVb/fBZ6A== +"@acala-network/sdk@^4.1.9-7": + version "4.1.9-8" + resolved "https://registry.yarnpkg.com/@acala-network/sdk/-/sdk-4.1.9-8.tgz#4383eb3fc94cfa127259d852b4d4ce549b15280d" + integrity sha512-kxCGs5n+Voh2V6pEcEXCupERqQNVnNTOPHrbTcDWt6oKwgN1ODSnRsdm7BjY72q8sWBKchZj5D4aY8k/m+Cvew== dependencies: - "@acala-network/api" "4.1.8-13" - "@acala-network/eth-providers" "^2.5.9" - "@acala-network/type-definitions" "4.1.8-13" - "@ethersproject/bignumber" "^5.7.0" - "@polkadot/api" "^9.9.1" - "@polkadot/types" "^9.9.1" - "@types/events" "^3.0.0" + "@acala-network/api" "^5.1.1" + "@acala-network/eth-providers" "~2.7.3" + "@acala-network/sdk-core" "4.1.9-8" + "@polkadot/api" "^10.9.1" axios "^0.24.0" - bignumber.js "^9.0.0" - cross-fetch "^3.1.4" - ethers "^5.6.2" - events "^3.2.0" + ethers "~5.7.0" graphql "^16.3.0" graphql-request "^4.1.0" lodash "^4.17.20" lru-cache "^7.14.1" - rxjs "^7.5.7" + rxjs "^7.8.1" -"@acala-network/type-definitions@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-13.tgz#a295d3f3feb1d36cadbda634c180f53eb90cca61" - integrity sha512-AMXbqsJehhDcwEngSB173eQvuCAsXEm/7rNZMQ8KLG56a8FrNAgrEz+83foogLuTcehCPUPfC0R1Ef/+874rRw== - dependencies: - "@open-web3/orml-type-definitions" "^1.1.4" - -"@acala-network/type-definitions@4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-9.tgz#be238e2e269cd701b79b0af5f9ed4d9c168d94c0" - integrity sha512-z0pDbVwxXutpnt2CRkfamaZel/OHF65hzwyolk+Vn+4wFFGY5QMh+nDiw8oEYdZENHEPUEAVa4XOQWRsE329jQ== - dependencies: - "@open-web3/orml-type-definitions" "^1.1.4" +"@acala-network/type-definitions@5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-5.1.1.tgz#16c723f0561d9d54b4877bc51399c01a43490852" + integrity sha512-QNhPwWePz/gFluSACKIhq0Z7rTntS21uIZUNpp9tsvc0zlJ20QjHJnv+ZfkdaKauFrL5upFfTgWqrLhN0jV0JQ== -"@acala-network/type-definitions@^4.1.8-1": - version "4.1.8-14" - resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-4.1.8-14.tgz#f0d1dd5f0e50c5b16e19fc222d351b4ec4524928" - integrity sha512-3PDYFaT8s9PYgZZNNtOEco5Oyn/oQlnuYrBe6WQX1bQBhAbUQjMDhuaqoqRF61CFtxYTgw/6kiFRf/aUNhigGQ== - dependencies: - "@open-web3/orml-type-definitions" "^1.1.4" +"@acala-network/type-definitions@5.1.2-7": + version "5.1.2-7" + resolved "https://registry.yarnpkg.com/@acala-network/type-definitions/-/type-definitions-5.1.2-7.tgz#0c063ca55eaf7f6f50a3d271a7f1e857c1bd6c30" + integrity sha512-AWUWzBYlUdr/XqnPBSQLUePcxj1WP+2heeM8YSuppM1uWbkRTY2UEJGBHTmoPNczZFgc24X6hHOAgdzcYQrfsg== -"@acala-network/types@4.1.8-13": - version "4.1.8-13" - resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-4.1.8-13.tgz#919fc5ad818f535caba0fc2ea0477085e570d93b" - integrity sha512-XBIupGrNyY1xSptC59GNE89C4wJ2pb/QwRiRkQUNzDSTfLbjUSCOpDqjSfZIxj21+/zhZtw+6+uS+HnoTpsQeg== +"@acala-network/types@5.1.2-7": + version "5.1.2-7" + resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-5.1.2-7.tgz#08cbd1cba367b7ce27231b32d0f3f30d30708fbd" + integrity sha512-coNq3vuCMhgmAN9XF5EDnIX66vSRiBuCqMJK7QsUgWqpb3XAcbKSeN/DSEFuXxOcbQ5cYibJvm2HYzA8AVxMBw== dependencies: - "@acala-network/type-definitions" "4.1.8-13" - "@babel/runtime" "^7.10.2" - "@open-web3/api-mobx" "^1.1.4" - "@open-web3/orml-types" "^1.1.4" + "@acala-network/type-definitions" "5.1.2-7" -"@acala-network/types@4.1.8-9", "@acala-network/types@~4.1.8-9": - version "4.1.8-9" - resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-4.1.8-9.tgz#afc11f555dc900149eff132857f456500dcfb892" - integrity sha512-sILIcHyndYYde7xHbjwbLHfuWo3GmC3ZYTe515GrgC6hoBAzADqyA92FyZscSEQKpd7olnoPiMqq7ClmbGkdpA== - dependencies: - "@acala-network/type-definitions" "4.1.8-9" - "@babel/runtime" "^7.10.2" - "@open-web3/api-mobx" "^1.1.4" - "@open-web3/orml-types" "^1.1.4" +"@acala-network/types@^6.0.0-34": + version "6.0.0" + resolved "https://registry.yarnpkg.com/@acala-network/types/-/types-6.0.0.tgz#e247ecdbff2dac836046c35d9cf0bdad0c4aa8f5" + integrity sha512-SDd2JzLIynToT1yjlDvnPdPClZX4XMoJUKu7RU7DRzNWBzqkrOQsoPEfivE6U0H/vvV6NXSBrm17Y6aVa8gFNw== "@adobe/css-tools@^4.0.1": version "4.0.1" @@ -189,6 +123,30 @@ dependencies: "@jridgewell/trace-mapping" "^0.3.0" +"@ampproject/remapping@^2.2.0": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630" + integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg== + dependencies: + "@jridgewell/gen-mapping" "^0.3.0" + "@jridgewell/trace-mapping" "^0.3.9" + +"@babel/cli@^7.21.0": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.22.15.tgz#22ed82d76745a43caa60a89917bedb7c9b5bd145" + integrity sha512-prtg5f6zCERIaECeTZzd2fMtVjlfjhUcO+fBLQ6DXXdq5FljN+excVitJ2nogsusdf31LeqkjAfXZ7Xq+HmN8g== + dependencies: + "@jridgewell/trace-mapping" "^0.3.17" + commander "^4.0.1" + convert-source-map "^1.1.0" + fs-readdir-recursive "^1.1.0" + glob "^7.2.0" + make-dir "^2.1.0" + slash "^2.0.0" + optionalDependencies: + "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3" + chokidar "^3.4.0" + "@babel/code-frame@7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" @@ -210,11 +168,24 @@ dependencies: "@babel/highlight" "^7.18.6" +"@babel/code-frame@^7.22.13": + version "7.22.13" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" + integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== + dependencies: + "@babel/highlight" "^7.22.13" + chalk "^2.4.2" + "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2" integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ== +"@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": + version "7.22.9" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" + integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== + "@babel/core@7.12.3": version "7.12.3" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8" @@ -280,6 +251,27 @@ json5 "^2.1.2" semver "^6.3.0" +"@babel/core@^7.21.0": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.17.tgz#2f9b0b395985967203514b24ee50f9fd0639c866" + integrity sha512-2EENLmhpwplDux5PSsZnSbnSkB3tZ6QTksgO25xwEL7pIDcNOMhF5v/s6RzwjMZzZzw9Ofc30gHv5ChCC8pifQ== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.22.15" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-module-transforms" "^7.22.17" + "@babel/helpers" "^7.22.15" + "@babel/parser" "^7.22.16" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.22.17" + "@babel/types" "^7.22.17" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + "@babel/generator@^7.12.1", "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.17.7", "@babel/generator@^7.18.10": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.10.tgz#794f328bfabdcbaf0ebf9bf91b5b57b61fa77a2a" @@ -289,6 +281,16 @@ "@jridgewell/gen-mapping" "^0.3.2" jsesc "^2.5.1" +"@babel/generator@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.15.tgz#1564189c7ec94cb8f77b5e8a90c4d200d21b2339" + integrity sha512-Zu9oWARBqeVOW0dZOjXc3JObrzuqothQ3y/n1kUtrjCoCPLkXUwMvOo/F/TCfoHMbWIFlWwpZtkZVb9ga4U2pA== + dependencies: + "@babel/types" "^7.22.15" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7", "@babel/helper-annotate-as-pure@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb" @@ -296,6 +298,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-annotate-as-pure@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" + integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b" @@ -304,6 +313,13 @@ "@babel/helper-explode-assignable-expression" "^7.16.7" "@babel/types" "^7.16.7" +"@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956" + integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw== + dependencies: + "@babel/types" "^7.22.15" + "@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46" @@ -314,6 +330,17 @@ browserslist "^4.17.5" semver "^6.3.0" +"@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52" + integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw== + dependencies: + "@babel/compat-data" "^7.22.9" + "@babel/helper-validator-option" "^7.22.15" + browserslist "^4.21.9" + lru-cache "^5.1.1" + semver "^6.3.1" + "@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.1", "@babel/helper-create-class-features-plugin@^7.17.12", "@babel/helper-create-class-features-plugin@^7.17.6", "@babel/helper-create-class-features-plugin@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz#d802ee16a64a9e824fcbf0a2ffc92f19d58550ce" @@ -327,6 +354,21 @@ "@babel/helper-replace-supers" "^7.18.9" "@babel/helper-split-export-declaration" "^7.18.6" +"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4" + integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-function-name" "^7.22.5" + "@babel/helper-member-expression-to-functions" "^7.22.15" + "@babel/helper-optimise-call-expression" "^7.22.5" + "@babel/helper-replace-supers" "^7.22.9" + "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + semver "^6.3.1" + "@babel/helper-create-regexp-features-plugin@^7.16.7": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1" @@ -335,6 +377,15 @@ "@babel/helper-annotate-as-pure" "^7.16.7" regexpu-core "^5.0.1" +"@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1" + integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + regexpu-core "^5.3.1" + semver "^6.3.1" + "@babel/helper-define-polyfill-provider@^0.1.5": version "0.1.5" resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.1.5.tgz#3c2f91b7971b9fc11fe779c945c014065dea340e" @@ -363,11 +414,27 @@ resolve "^1.14.2" semver "^6.1.2" +"@babel/helper-define-polyfill-provider@^0.4.2": + version "0.4.2" + resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7" + integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw== + dependencies: + "@babel/helper-compilation-targets" "^7.22.6" + "@babel/helper-plugin-utils" "^7.22.5" + debug "^4.1.1" + lodash.debounce "^4.0.8" + resolve "^1.14.2" + "@babel/helper-environment-visitor@^7.16.7", "@babel/helper-environment-visitor@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be" integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg== +"@babel/helper-environment-visitor@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98" + integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q== + "@babel/helper-explode-assignable-expression@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a" @@ -383,6 +450,14 @@ "@babel/template" "^7.18.6" "@babel/types" "^7.18.9" +"@babel/helper-function-name@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be" + integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ== + dependencies: + "@babel/template" "^7.22.5" + "@babel/types" "^7.22.5" + "@babel/helper-hoist-variables@^7.16.7", "@babel/helper-hoist-variables@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678" @@ -390,6 +465,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-hoist-variables@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb" + integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-member-expression-to-functions@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815" @@ -397,6 +479,13 @@ dependencies: "@babel/types" "^7.18.9" +"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.15.tgz#b95a144896f6d491ca7863576f820f3628818621" + integrity sha512-qLNsZbgrNh0fDQBCPocSL8guki1hcPvltGDv/NxvUoABwFq7GkKSu1nRXeJkVZc+wJvne2E0RKQz+2SQrz6eAA== + dependencies: + "@babel/types" "^7.22.15" + "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e" @@ -404,6 +493,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" + integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== + dependencies: + "@babel/types" "^7.22.15" + "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd" @@ -418,6 +514,17 @@ "@babel/traverse" "^7.17.3" "@babel/types" "^7.17.0" +"@babel/helper-module-transforms@^7.22.15", "@babel/helper-module-transforms@^7.22.17", "@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.22.9": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.17.tgz#7edf129097a51ccc12443adbc6320e90eab76693" + integrity sha512-XouDDhQESrLHTpnBtCKExJdyY4gJCdrvH2Pyv8r8kovX2U8G0dRUOT45T9XlbLtuu9CLXP15eusnkprhoPV5iQ== + dependencies: + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-module-imports" "^7.22.15" + "@babel/helper-simple-access" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.15" + "@babel/helper-optimise-call-expression@^7.16.7", "@babel/helper-optimise-call-expression@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe" @@ -425,6 +532,13 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-optimise-call-expression@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e" + integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-plugin-utils@7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375" @@ -435,6 +549,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f" integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w== +"@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" + integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== + "@babel/helper-remap-async-to-generator@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3" @@ -444,6 +563,15 @@ "@babel/helper-wrap-function" "^7.16.8" "@babel/types" "^7.16.8" +"@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.17.tgz#dabaa50622b3b4670bd6546fc8db23eb12d89da0" + integrity sha512-bxH77R5gjH3Nkde6/LuncQoLaP16THYPscurp1S8z7S9ZgezCyV3G8Hc+TZiCmY8pz4fp8CvKSgtJMW0FkLAxA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-wrap-function" "^7.22.17" + "@babel/helper-replace-supers@^7.16.7", "@babel/helper-replace-supers@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz#1092e002feca980fbbb0bd4d51b74a65c6a500e6" @@ -455,6 +583,15 @@ "@babel/traverse" "^7.18.9" "@babel/types" "^7.18.9" +"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9": + version "7.22.9" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.9.tgz#cbdc27d6d8d18cd22c81ae4293765a5d9afd0779" + integrity sha512-LJIKvvpgPOPUThdYqcX6IXRuIcTkcAub0IaDRGCZH0p5GPUp7PhRU9QVgFcDDd51BaPkk77ZjqFwh6DZTAEmGg== + dependencies: + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-member-expression-to-functions" "^7.22.5" + "@babel/helper-optimise-call-expression" "^7.22.5" + "@babel/helper-simple-access@^7.17.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367" @@ -462,6 +599,13 @@ dependencies: "@babel/types" "^7.17.0" +"@babel/helper-simple-access@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de" + integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-skip-transparent-expression-wrappers@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09" @@ -469,6 +613,13 @@ dependencies: "@babel/types" "^7.16.0" +"@babel/helper-skip-transparent-expression-wrappers@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847" + integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-split-export-declaration@^7.16.7", "@babel/helper-split-export-declaration@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075" @@ -476,21 +627,43 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-split-export-declaration@^7.22.6": + version "7.22.6" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" + integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g== + dependencies: + "@babel/types" "^7.22.5" + "@babel/helper-string-parser@^7.18.10": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56" integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw== +"@babel/helper-string-parser@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" + integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== + "@babel/helper-validator-identifier@^7.16.7", "@babel/helper-validator-identifier@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076" integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g== +"@babel/helper-validator-identifier@^7.22.15", "@babel/helper-validator-identifier@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz#601fa28e4cc06786c18912dca138cec73b882044" + integrity sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ== + "@babel/helper-validator-option@^7.16.7", "@babel/helper-validator-option@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8" integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw== +"@babel/helper-validator-option@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" + integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== + "@babel/helper-wrap-function@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200" @@ -501,6 +674,15 @@ "@babel/traverse" "^7.16.8" "@babel/types" "^7.16.8" +"@babel/helper-wrap-function@^7.22.17": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.17.tgz#222ac3ff9cc8f9b617cc1e5db75c0b538e722801" + integrity sha512-nAhoheCMlrqU41tAojw9GpVEKDlTS8r3lzFmF0lP52LwblCPbuFSO7nGIZoIcoU5NIm1ABrna0cJExE4Ay6l2Q== + dependencies: + "@babel/helper-function-name" "^7.22.5" + "@babel/template" "^7.22.15" + "@babel/types" "^7.22.17" + "@babel/helpers@^7.12.1", "@babel/helpers@^7.12.5", "@babel/helpers@^7.17.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.7.tgz#6fc0a24280fd00026e85424bbfed4650e76d7127" @@ -510,6 +692,15 @@ "@babel/traverse" "^7.17.3" "@babel/types" "^7.17.0" +"@babel/helpers@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.15.tgz#f09c3df31e86e3ea0b7ff7556d85cdebd47ea6f1" + integrity sha512-7pAjK0aSdxOwR+CcYAqgWOGy5dcfvzsTIfFTb2odQqW47MDfv14UaJDY6eng8ylM2EaeKXdxaSWESbkmaQHTmw== + dependencies: + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.22.15" + "@babel/types" "^7.22.15" + "@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" @@ -519,11 +710,25 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/highlight@^7.22.13": + version "7.22.13" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.13.tgz#9cda839e5d3be9ca9e8c26b6dd69e7548f0cbf16" + integrity sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ== + dependencies: + "@babel/helper-validator-identifier" "^7.22.5" + chalk "^2.4.2" + js-tokens "^4.0.0" + "@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.3", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.17.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.11", "@babel/parser@^7.7.0": version "7.18.11" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9" integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ== +"@babel/parser@^7.22.15", "@babel/parser@^7.22.16": + version "7.22.16" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95" + integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050" @@ -531,6 +736,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.15.tgz#02dc8a03f613ed5fdc29fb2f728397c78146c962" + integrity sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9" @@ -540,6 +752,22 @@ "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0" "@babel/plugin-proposal-optional-chaining" "^7.16.7" +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.15.tgz#2aeb91d337d4e1a1e7ce85b76a37f5301781200f" + integrity sha512-Hyph9LseGvAeeXzikV88bczhsrLrIZqDPxO+sSmAunMPaGrBGhfMWzCPYTtiW9t+HzSE2wtV8e5cc5P6r1xMDQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" + "@babel/plugin-transform-optional-chaining" "^7.22.15" + +"@babel/plugin-external-helpers@^7.18.6": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz#92b0705b74756123f289388320e0e12c407fdf9a" + integrity sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-proposal-async-generator-functions@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8" @@ -557,6 +785,14 @@ "@babel/helper-create-class-features-plugin" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-proposal-class-properties@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3" + integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-proposal-class-static-block@^7.16.7": version "7.17.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c" @@ -653,6 +889,17 @@ "@babel/plugin-syntax-object-rest-spread" "^7.8.3" "@babel/plugin-transform-parameters" "^7.16.7" +"@babel/plugin-proposal-object-rest-spread@^7.20.7": + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz#aa662940ef425779c75534a5c41e9d936edc390a" + integrity sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg== + dependencies: + "@babel/compat-data" "^7.20.5" + "@babel/helper-compilation-targets" "^7.20.7" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/plugin-syntax-object-rest-spread" "^7.8.3" + "@babel/plugin-transform-parameters" "^7.20.7" + "@babel/plugin-proposal-optional-catch-binding@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf" @@ -678,6 +925,11 @@ "@babel/helper-create-class-features-plugin" "^7.16.10" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": + version "7.21.0-placeholder-for-preset-env.2" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" + integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w== + "@babel/plugin-proposal-private-property-in-object@^7.12.1", "@babel/plugin-proposal-private-property-in-object@^7.16.7": version "7.17.12" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz#b02efb7f106d544667d91ae97405a9fd8c93952d" @@ -759,7 +1011,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" -"@babel/plugin-syntax-import-meta@^7.8.3": +"@babel/plugin-syntax-import-assertions@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz#07d252e2aa0bc6125567f742cd58619cb14dce98" + integrity sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-syntax-import-attributes@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz#ab840248d834410b829f569f5262b9e517555ecb" + integrity sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51" integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g== @@ -787,6 +1053,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" +"@babel/plugin-syntax-jsx@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz#a6b68e84fb76e759fc3b93e901876ffabbe1d918" + integrity sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -850,6 +1123,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" +"@babel/plugin-syntax-typescript@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz#aac8d383b062c5072c647a31ef990c1d0af90272" + integrity sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-syntax-unicode-sets-regex@^7.18.6": + version "7.18.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357" + integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.18.6" + "@babel/helper-plugin-utils" "^7.18.6" + "@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154" @@ -857,6 +1145,23 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-arrow-functions@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz#e5ba566d0c58a5b2ba2a8b795450641950b71958" + integrity sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-async-generator-functions@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.15.tgz#3b153af4a6b779f340d5b80d3f634f55820aefa3" + integrity sha512-jBm1Es25Y+tVoTi5rfd5t1KLmL8ogLKpXszboWOTTtGFGz2RKnQe2yn7HbZ+kb/B8N0FVSGQo874NSlOU1T4+w== + dependencies: + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-remap-async-to-generator" "^7.22.9" + "@babel/plugin-syntax-async-generators" "^7.8.4" + "@babel/plugin-transform-async-to-generator@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808" @@ -866,6 +1171,15 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/helper-remap-async-to-generator" "^7.16.8" +"@babel/plugin-transform-async-to-generator@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz#c7a85f44e46f8952f6d27fe57c2ed3cc084c3775" + integrity sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ== + dependencies: + "@babel/helper-module-imports" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-remap-async-to-generator" "^7.22.5" + "@babel/plugin-transform-block-scoped-functions@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620" @@ -873,6 +1187,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-block-scoped-functions@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz#27978075bfaeb9fa586d3cb63a3d30c1de580024" + integrity sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-block-scoping@^7.12.12", "@babel/plugin-transform-block-scoping@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87" @@ -880,6 +1201,30 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-block-scoping@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.15.tgz#494eb82b87b5f8b1d8f6f28ea74078ec0a10a841" + integrity sha512-G1czpdJBZCtngoK1sJgloLiOHUnkb/bLZwqVZD8kXmq0ZnVfTTWUcs9OWtp0mBtYJ+4LQY1fllqBkOIPhXmFmw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-class-properties@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz#97a56e31ad8c9dc06a0b3710ce7803d5a48cca77" + integrity sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-class-static-block@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974" + integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.22.11" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-class-static-block" "^7.14.5" + "@babel/plugin-transform-classes@^7.12.1", "@babel/plugin-transform-classes@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00" @@ -894,6 +1239,21 @@ "@babel/helper-split-export-declaration" "^7.16.7" globals "^11.1.0" +"@babel/plugin-transform-classes@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.15.tgz#aaf4753aee262a232bbc95451b4bdf9599c65a0b" + integrity sha512-VbbC3PGjBdE0wAWDdHM9G8Gm977pnYI0XpqMd6LrKISj8/DJXEsWqgRuTYaNE9Bv0JGhTZUzHDlMk18IpOuoqw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-function-name" "^7.22.5" + "@babel/helper-optimise-call-expression" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-replace-supers" "^7.22.9" + "@babel/helper-split-export-declaration" "^7.22.6" + globals "^11.1.0" + "@babel/plugin-transform-computed-properties@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470" @@ -901,6 +1261,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-computed-properties@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz#cd1e994bf9f316bd1c2dafcd02063ec261bb3869" + integrity sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/template" "^7.22.5" + "@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@^7.16.7": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1" @@ -908,6 +1276,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-destructuring@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.15.tgz#e7404ea5bb3387073b9754be654eecb578324694" + integrity sha512-HzG8sFl1ZVGTme74Nw+X01XsUTqERVQ6/RLHo3XjGRzm7XD6QTtfS3NJotVgCGy8BzkDqRjRBD8dAyJn5TuvSQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241" @@ -916,6 +1291,14 @@ "@babel/helper-create-regexp-features-plugin" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-dotall-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz#dbb4f0e45766eb544e193fb00e65a1dd3b2a4165" + integrity sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-duplicate-keys@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9" @@ -923,6 +1306,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-duplicate-keys@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz#b6e6428d9416f5f0bba19c70d1e6e7e0b88ab285" + integrity sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-dynamic-import@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa" + integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-transform-exponentiation-operator@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b" @@ -931,6 +1329,22 @@ "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-exponentiation-operator@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz#402432ad544a1f9a480da865fda26be653e48f6a" + integrity sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g== + dependencies: + "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-export-namespace-from@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c" + integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-export-namespace-from" "^7.8.3" + "@babel/plugin-transform-flow-strip-types@^7.16.0", "@babel/plugin-transform-flow-strip-types@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.16.7.tgz#291fb140c78dabbf87f2427e7c7c332b126964b8" @@ -946,6 +1360,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-for-of@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.15.tgz#f64b4ccc3a4f131a996388fae7680b472b306b29" + integrity sha512-me6VGeHsx30+xh9fbDLLPi0J1HzmeIIyenoOQHuw2D4m2SAU3NrspX5XxJLBpqn5yrLzrlw2Iy3RA//Bx27iOA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-function-name@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf" @@ -955,6 +1376,23 @@ "@babel/helper-function-name" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-function-name@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz#935189af68b01898e0d6d99658db6b164205c143" + integrity sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg== + dependencies: + "@babel/helper-compilation-targets" "^7.22.5" + "@babel/helper-function-name" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-json-strings@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835" + integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-json-strings" "^7.8.3" + "@babel/plugin-transform-literals@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1" @@ -962,6 +1400,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-literals@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz#e9341f4b5a167952576e23db8d435849b1dd7920" + integrity sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-logical-assignment-operators@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c" + integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" + "@babel/plugin-transform-member-expression-literals@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384" @@ -969,6 +1422,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-member-expression-literals@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz#4fcc9050eded981a468347dd374539ed3e058def" + integrity sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-modules-amd@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186" @@ -978,6 +1438,14 @@ "@babel/helper-plugin-utils" "^7.16.7" babel-plugin-dynamic-import-node "^2.3.3" +"@babel/plugin-transform-modules-amd@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526" + integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ== + dependencies: + "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-modules-commonjs@^7.16.8": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz#d86b217c8e45bb5f2dbc11eefc8eab62cf980d19" @@ -988,6 +1456,15 @@ "@babel/helper-simple-access" "^7.17.7" babel-plugin-dynamic-import-node "^2.3.3" +"@babel/plugin-transform-modules-commonjs@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.15.tgz#b11810117ed4ee7691b29bd29fd9f3f98276034f" + integrity sha512-jWL4eh90w0HQOTKP2MoXXUpVxilxsB2Vl4ji69rSjS3EcZ/v4sBmn+A3NpepuJzBhOaEBbR7udonlHHn5DWidg== + dependencies: + "@babel/helper-module-transforms" "^7.22.15" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-simple-access" "^7.22.5" + "@babel/plugin-transform-modules-systemjs@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.16.7.tgz#887cefaef88e684d29558c2b13ee0563e287c2d7" @@ -999,6 +1476,16 @@ "@babel/helper-validator-identifier" "^7.16.7" babel-plugin-dynamic-import-node "^2.3.3" +"@babel/plugin-transform-modules-systemjs@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.11.tgz#3386be5875d316493b517207e8f1931d93154bb1" + integrity sha512-rIqHmHoMEOhI3VkVf5jQ15l539KrwhzqcBO6wdCNWPWc/JWt9ILNYNUssbRpeq0qWns8svuw8LnMNCvWBIJ8wA== + dependencies: + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-module-transforms" "^7.22.9" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.5" + "@babel/plugin-transform-modules-umd@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618" @@ -1007,6 +1494,14 @@ "@babel/helper-module-transforms" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-modules-umd@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz#4694ae40a87b1745e3775b6a7fe96400315d4f98" + integrity sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ== + dependencies: + "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-named-capturing-groups-regex@^7.16.8": version "7.16.8" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252" @@ -1014,6 +1509,14 @@ dependencies: "@babel/helper-create-regexp-features-plugin" "^7.16.7" +"@babel/plugin-transform-named-capturing-groups-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f" + integrity sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-new-target@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244" @@ -1021,6 +1524,40 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-new-target@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz#1b248acea54ce44ea06dfd37247ba089fcf9758d" + integrity sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc" + integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" + +"@babel/plugin-transform-numeric-separator@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd" + integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-numeric-separator" "^7.10.4" + +"@babel/plugin-transform-object-rest-spread@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.15.tgz#21a95db166be59b91cde48775310c0df6e1da56f" + integrity sha512-fEB+I1+gAmfAyxZcX1+ZUwLeAuuf8VIg67CTznZE0MqVFumWkh8xWtn58I4dxdVf080wn7gzWoF8vndOViJe9Q== + dependencies: + "@babel/compat-data" "^7.22.9" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-object-rest-spread" "^7.8.3" + "@babel/plugin-transform-parameters" "^7.22.15" + "@babel/plugin-transform-object-super@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94" @@ -1029,6 +1566,31 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/helper-replace-supers" "^7.16.7" +"@babel/plugin-transform-object-super@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz#794a8d2fcb5d0835af722173c1a9d704f44e218c" + integrity sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-replace-supers" "^7.22.5" + +"@babel/plugin-transform-optional-catch-binding@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0" + integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" + +"@babel/plugin-transform-optional-chaining@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.15.tgz#d7a5996c2f7ca4ad2ad16dbb74444e5c4385b1ba" + integrity sha512-ngQ2tBhq5vvSJw2Q2Z9i7ealNkpDMU0rGWnHPKqRZO0tzZ5tlaoz4hDvhXioOoaE0X2vfNss1djwg0DXlfu30A== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" + "@babel/plugin-syntax-optional-chaining" "^7.8.3" + "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f" @@ -1036,6 +1598,31 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.15.tgz#719ca82a01d177af358df64a514d64c2e3edb114" + integrity sha512-hjk7qKIqhyzhhUvRT683TYQOFa/4cQKwQy7ALvTpODswN40MljzNDa0YldevS6tGbxwaEKVn502JmY0dP7qEtQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-private-methods@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz#21c8af791f76674420a147ae62e9935d790f8722" + integrity sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA== + dependencies: + "@babel/helper-create-class-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-private-property-in-object@^7.22.11": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1" + integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-create-class-features-plugin" "^7.22.11" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/plugin-transform-property-literals@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55" @@ -1043,6 +1630,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-property-literals@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz#b5ddabd73a4f7f26cd0e20f5db48290b88732766" + integrity sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-react-constant-elements@^7.12.1": version "7.17.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.17.6.tgz#6cc273c2f612a6a50cb657e63ee1303e5e68d10a" @@ -1090,6 +1684,14 @@ dependencies: regenerator-transform "^0.14.2" +"@babel/plugin-transform-regenerator@^7.22.10": + version "7.22.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz#8ceef3bd7375c4db7652878b0241b2be5d0c3cca" + integrity sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + regenerator-transform "^0.15.2" + "@babel/plugin-transform-reserved-words@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586" @@ -1097,6 +1699,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-reserved-words@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz#832cd35b81c287c4bcd09ce03e22199641f964fb" + integrity sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-runtime@^7.16.4": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz#0a2e08b5e2b2d95c4b1d3b3371a2180617455b70" @@ -1116,6 +1725,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-shorthand-properties@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz#6e277654be82b5559fc4b9f58088507c24f0c624" + integrity sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44" @@ -1124,6 +1740,14 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0" +"@babel/plugin-transform-spread@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz#6487fd29f229c95e284ba6c98d65eafb893fea6b" + integrity sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" + "@babel/plugin-transform-sticky-regex@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660" @@ -1131,6 +1755,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-sticky-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz#295aba1595bfc8197abd02eae5fc288c0deb26aa" + integrity sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-template-literals@^7.12.1", "@babel/plugin-transform-template-literals@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab" @@ -1138,6 +1769,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-template-literals@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz#8f38cf291e5f7a8e60e9f733193f0bcc10909bff" + integrity sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-typeof-symbol@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e" @@ -1145,6 +1783,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-typeof-symbol@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz#5e2ba478da4b603af8673ff7c54f75a97b716b34" + integrity sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-typescript@^7.18.6": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.10.tgz#b23401b32f1f079396bcaed01667a54ebe4f9f85" @@ -1154,6 +1799,16 @@ "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-typescript" "^7.18.6" +"@babel/plugin-transform-typescript@^7.22.15": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.15.tgz#15adef906451d86349eb4b8764865c960eb54127" + integrity sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA== + dependencies: + "@babel/helper-annotate-as-pure" "^7.22.5" + "@babel/helper-create-class-features-plugin" "^7.22.15" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-syntax-typescript" "^7.22.5" + "@babel/plugin-transform-unicode-escapes@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3" @@ -1161,6 +1816,21 @@ dependencies: "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-unicode-escapes@^7.22.10": + version "7.22.10" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz#c723f380f40a2b2f57a62df24c9005834c8616d9" + integrity sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-unicode-property-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz#098898f74d5c1e86660dc112057b2d11227f1c81" + integrity sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/plugin-transform-unicode-regex@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2" @@ -1169,6 +1839,22 @@ "@babel/helper-create-regexp-features-plugin" "^7.16.7" "@babel/helper-plugin-utils" "^7.16.7" +"@babel/plugin-transform-unicode-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz#ce7e7bb3ef208c4ff67e02a22816656256d7a183" + integrity sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-unicode-sets-regex@^7.22.5": + version "7.22.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz#77788060e511b708ffc7d42fdfbc5b37c3004e91" + integrity sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg== + dependencies: + "@babel/helper-create-regexp-features-plugin" "^7.22.5" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.12.11", "@babel/preset-env@^7.16.4", "@babel/preset-env@^7.8.4": version "7.16.11" resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982" @@ -1249,6 +1935,92 @@ core-js-compat "^3.20.2" semver "^6.3.0" +"@babel/preset-env@^7.20.2": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.22.15.tgz#142716f8e00bc030dae5b2ac6a46fbd8b3e18ff8" + integrity sha512-tZFHr54GBkHk6hQuVA8w4Fmq+MSPsfvMG0vPnOYyTnJpyfMqybL8/MbNCPRT9zc2KBO2pe4tq15g6Uno4Jpoag== + dependencies: + "@babel/compat-data" "^7.22.9" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-validator-option" "^7.22.15" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.15" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.15" + "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2" + "@babel/plugin-syntax-async-generators" "^7.8.4" + "@babel/plugin-syntax-class-properties" "^7.12.13" + "@babel/plugin-syntax-class-static-block" "^7.14.5" + "@babel/plugin-syntax-dynamic-import" "^7.8.3" + "@babel/plugin-syntax-export-namespace-from" "^7.8.3" + "@babel/plugin-syntax-import-assertions" "^7.22.5" + "@babel/plugin-syntax-import-attributes" "^7.22.5" + "@babel/plugin-syntax-import-meta" "^7.10.4" + "@babel/plugin-syntax-json-strings" "^7.8.3" + "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" + "@babel/plugin-syntax-numeric-separator" "^7.10.4" + "@babel/plugin-syntax-object-rest-spread" "^7.8.3" + "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" + "@babel/plugin-syntax-optional-chaining" "^7.8.3" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/plugin-syntax-top-level-await" "^7.14.5" + "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6" + "@babel/plugin-transform-arrow-functions" "^7.22.5" + "@babel/plugin-transform-async-generator-functions" "^7.22.15" + "@babel/plugin-transform-async-to-generator" "^7.22.5" + "@babel/plugin-transform-block-scoped-functions" "^7.22.5" + "@babel/plugin-transform-block-scoping" "^7.22.15" + "@babel/plugin-transform-class-properties" "^7.22.5" + "@babel/plugin-transform-class-static-block" "^7.22.11" + "@babel/plugin-transform-classes" "^7.22.15" + "@babel/plugin-transform-computed-properties" "^7.22.5" + "@babel/plugin-transform-destructuring" "^7.22.15" + "@babel/plugin-transform-dotall-regex" "^7.22.5" + "@babel/plugin-transform-duplicate-keys" "^7.22.5" + "@babel/plugin-transform-dynamic-import" "^7.22.11" + "@babel/plugin-transform-exponentiation-operator" "^7.22.5" + "@babel/plugin-transform-export-namespace-from" "^7.22.11" + "@babel/plugin-transform-for-of" "^7.22.15" + "@babel/plugin-transform-function-name" "^7.22.5" + "@babel/plugin-transform-json-strings" "^7.22.11" + "@babel/plugin-transform-literals" "^7.22.5" + "@babel/plugin-transform-logical-assignment-operators" "^7.22.11" + "@babel/plugin-transform-member-expression-literals" "^7.22.5" + "@babel/plugin-transform-modules-amd" "^7.22.5" + "@babel/plugin-transform-modules-commonjs" "^7.22.15" + "@babel/plugin-transform-modules-systemjs" "^7.22.11" + "@babel/plugin-transform-modules-umd" "^7.22.5" + "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5" + "@babel/plugin-transform-new-target" "^7.22.5" + "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11" + "@babel/plugin-transform-numeric-separator" "^7.22.11" + "@babel/plugin-transform-object-rest-spread" "^7.22.15" + "@babel/plugin-transform-object-super" "^7.22.5" + "@babel/plugin-transform-optional-catch-binding" "^7.22.11" + "@babel/plugin-transform-optional-chaining" "^7.22.15" + "@babel/plugin-transform-parameters" "^7.22.15" + "@babel/plugin-transform-private-methods" "^7.22.5" + "@babel/plugin-transform-private-property-in-object" "^7.22.11" + "@babel/plugin-transform-property-literals" "^7.22.5" + "@babel/plugin-transform-regenerator" "^7.22.10" + "@babel/plugin-transform-reserved-words" "^7.22.5" + "@babel/plugin-transform-shorthand-properties" "^7.22.5" + "@babel/plugin-transform-spread" "^7.22.5" + "@babel/plugin-transform-sticky-regex" "^7.22.5" + "@babel/plugin-transform-template-literals" "^7.22.5" + "@babel/plugin-transform-typeof-symbol" "^7.22.5" + "@babel/plugin-transform-unicode-escapes" "^7.22.10" + "@babel/plugin-transform-unicode-property-regex" "^7.22.5" + "@babel/plugin-transform-unicode-regex" "^7.22.5" + "@babel/plugin-transform-unicode-sets-regex" "^7.22.5" + "@babel/preset-modules" "0.1.6-no-external-plugins" + "@babel/types" "^7.22.15" + babel-plugin-polyfill-corejs2 "^0.4.5" + babel-plugin-polyfill-corejs3 "^0.8.3" + babel-plugin-polyfill-regenerator "^0.5.2" + core-js-compat "^3.31.0" + semver "^6.3.1" + "@babel/preset-flow@^7.12.1": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.16.7.tgz#7fd831323ab25eeba6e4b77a589f680e30581cbd" @@ -1258,6 +2030,15 @@ "@babel/helper-validator-option" "^7.16.7" "@babel/plugin-transform-flow-strip-types" "^7.16.7" +"@babel/preset-modules@0.1.6-no-external-plugins": + version "0.1.6-no-external-plugins" + resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a" + integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA== + dependencies: + "@babel/helper-plugin-utils" "^7.0.0" + "@babel/types" "^7.4.4" + esutils "^2.0.2" + "@babel/preset-modules@^0.1.5": version "0.1.5" resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9" @@ -1290,6 +2071,17 @@ "@babel/helper-validator-option" "^7.18.6" "@babel/plugin-transform-typescript" "^7.18.6" +"@babel/preset-typescript@^7.21.0": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.22.15.tgz#43db30516fae1d417d748105a0bc95f637239d48" + integrity sha512-HblhNmh6yM+cU4VwbBRpxFhxsTdfS1zsvH9W+gEjD0ARV9+8B4sNfpI6GuhePti84nuvhiwKS539jKPFHskA9A== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + "@babel/helper-validator-option" "^7.22.15" + "@babel/plugin-syntax-jsx" "^7.22.5" + "@babel/plugin-transform-modules-commonjs" "^7.22.15" + "@babel/plugin-transform-typescript" "^7.22.15" + "@babel/register@^7.12.1": version "7.17.7" resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.17.7.tgz#5eef3e0f4afc07e25e847720e7b987ae33f08d0b" @@ -1301,6 +2093,11 @@ pirates "^4.0.5" source-map-support "^0.5.16" +"@babel/regjsgen@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" + integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== + "@babel/runtime-corejs3@^7.10.2": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.9.tgz#7bacecd1cb2dd694eacd32a91fcf7021c20770ae" @@ -1309,13 +2106,20 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.21.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673" integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw== dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.17.2": + version "7.22.11" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.11.tgz#7a9ba3bbe406ad6f9e8dd4da2ece453eb23a77a4" + integrity sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.18.6", "@babel/template@^7.3.3": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" @@ -1325,6 +2129,15 @@ "@babel/parser" "^7.18.10" "@babel/types" "^7.18.10" +"@babel/template@^7.22.15", "@babel/template@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" + integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/parser" "^7.22.15" + "@babel/types" "^7.22.15" + "@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.18.9", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0": version "7.18.11" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f" @@ -1341,6 +2154,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.21.2", "@babel/traverse@^7.22.15", "@babel/traverse@^7.22.17": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.17.tgz#b23c203ab3707e3be816043081b4a994fcacec44" + integrity sha512-xK4Uwm0JnAMvxYZxOVecss85WxTEIbTa7bnGyf/+EgCL5Zt3U7htUpEOWv9detPlamGKuRzCqw74xVglDWpPdg== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.22.15" + "@babel/helper-environment-visitor" "^7.22.5" + "@babel/helper-function-name" "^7.22.5" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.22.16" + "@babel/types" "^7.22.17" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.12.1", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6" @@ -1350,6 +2179,15 @@ "@babel/helper-validator-identifier" "^7.18.6" to-fast-properties "^2.0.0" +"@babel/types@^7.22.15", "@babel/types@^7.22.17", "@babel/types@^7.22.5": + version "7.22.17" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.17.tgz#f753352c4610ffddf9c8bc6823f9ff03e2303eee" + integrity sha512-YSQPHLFtQNE5xN9tHuZnzu8vPr61wVTBZdfv1meex1NBosa4iT05k/Jw06ddJugi4bk7The/oSwQGFcksmEJQg== + dependencies: + "@babel/helper-string-parser" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.15" + to-fast-properties "^2.0.0" + "@base2/pretty-print-object@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4" @@ -1360,12 +2198,10 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@bifrost-finance/type-definitions@1.7.2": - version "1.7.2" - resolved "https://registry.yarnpkg.com/@bifrost-finance/type-definitions/-/type-definitions-1.7.2.tgz#13139a69e3e98d175a4751d7fd78dcfebac29943" - integrity sha512-JL19CHFL4DxO29LRrv9o7r7Au9TtY+8pwG4fMP8M6jq2/MkvWd7OQFn1lmEy58akntNrVReIkZPuP81MFKv9jg== - dependencies: - "@open-web3/orml-type-definitions" "^0.9.4-38" +"@bifrost-finance/type-definitions@1.8.4": + version "1.8.4" + resolved "https://registry.yarnpkg.com/@bifrost-finance/type-definitions/-/type-definitions-1.8.4.tgz#f6f16a3cb31b6b2a28ae46e93ac598a1202faa8a" + integrity sha512-Vj1/aK3ikvlYIKSHmFQDpgiWRn8pCFRxIqPS1zRIlbqy/aj7T2iOsImdrIX9piPdJquLsJFap3VvX8Lw3YVnmw== "@cnakazawa/watch@^1.0.3": version "1.0.4" @@ -1591,10 +2427,10 @@ resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70" integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw== -"@docknetwork/node-types@0.15.0": - version "0.15.0" - resolved "https://registry.yarnpkg.com/@docknetwork/node-types/-/node-types-0.15.0.tgz#eed5c719380865bf989ccd2550844dadb7abdd19" - integrity sha512-ACIHUIiAt82nhYxtwHSyS4JaJ28UbWS+fAwbTblKcsQBe7YRM2tjbLmkaqQjGPjxJS+wmh/xf7/PnA8PfboNZg== +"@docknetwork/node-types@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@docknetwork/node-types/-/node-types-0.16.0.tgz#23570042c823a6320654ee2c5b8c0da5d7c43d21" + integrity sha512-VUZB8guX9161hDIEVn/UKJEUlXjIDE6vH5flx6uDHVc0QOhBy1bq6AGLayG4ZH19dCN39ta2sKGIFq9wLO4H2A== "@edgeware/node-types@3.6.2-wako": version "3.6.2-wako" @@ -1608,11 +2444,23 @@ dependencies: "@emotion/memoize" "^0.7.4" +"@emotion/is-prop-valid@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" + integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/memoize@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" @@ -1623,6 +2471,11 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/unitless@^0.8.0": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + "@equilab/definitions@1.4.18": version "1.4.18" resolved "https://registry.yarnpkg.com/@equilab/definitions/-/definitions-1.4.18.tgz#e544951b50278705af3d9fa4ba91e04df53a3d06" @@ -2024,14 +2877,23 @@ dependencies: tslib "2.4.0" -"@frequency-chain/api-augment@^1.0.0": - version "1.6.0" - resolved "https://registry.yarnpkg.com/@frequency-chain/api-augment/-/api-augment-1.6.0.tgz#a611d191328e11ccf24aff82fe2d165b9b6a0eb8" - integrity sha512-OkyLC4ttgkB+6PpTN94NIWPgi6rEclzK7pBSULtfl6ZhgjW9IalykbJmispG3Ntgwdb69TMUU0wSdDPBS15r9A== +"@fragnova/api-augment@0.1.0-spec-1.0.4-mainnet": + version "0.1.0-spec-1.0.4-mainnet" + resolved "https://registry.yarnpkg.com/@fragnova/api-augment/-/api-augment-0.1.0-spec-1.0.4-mainnet.tgz#4244b59a5e3b5809aa95e74d8c77a2ca86056292" + integrity sha512-511tzGJt8BWUVMNqX6NNq4KrGWYBKrLVQ2GKERUi08TtpteEQnFH3Nzh8W6x3dpBG3naZ+V5ue+bEmEB9foRIQ== + dependencies: + "@polkadot/api" "^9.13.2" + "@polkadot/rpc-provider" "^9.13.2" + "@polkadot/types" "^9.13.2" + +"@frequency-chain/api-augment@1.7.0-rc1": + version "1.7.0-rc1" + resolved "https://registry.yarnpkg.com/@frequency-chain/api-augment/-/api-augment-1.7.0-rc1.tgz#b170dbe899e8dbf420a45a685c061886c2022bdc" + integrity sha512-J/8r66Y1oqvFREeVv2TsDovpM8jBGQEemozOcgOTGpgSF3sHH6mNnp0bKR4r7T2zQN3m6G++eROKqIKRagBhrA== dependencies: - "@polkadot/api" "^10.3.2" - "@polkadot/rpc-provider" "^10.3.2" - "@polkadot/types" "^10.3.2" + "@polkadot/api" "^10.7.3" + "@polkadot/rpc-provider" "^10.7.3" + "@polkadot/types" "^10.7.3" "@gar/promisify@^1.0.1": version "1.1.3" @@ -2104,17 +2966,17 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.3.13": - version "0.3.13" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.3.13.tgz#8add2a9d8a811ea3bbe73498bf3ebc19cd279ec6" - integrity sha512-LXXomxfI2n1h2MHeN8woRaQgh+gLKKlHfH1oTBAMyKPpSI7tTvtrE2XwIKt+Qg1TvmukRngtmwWtEXh760Dtkw== - dependencies: - "@acala-network/api" "4.1.8-13" - "@acala-network/sdk" "4.1.8-13" - "@acala-network/sdk-core" "4.1.8-13" - "@polkadot/api" "^9.14.2" - "@polkadot/apps-config" "^0.124.1" - "@polkadot/types" "^9.14.2" +"@interlay/bridge@^0.4.0": + version "0.4.0" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.4.0.tgz#a8ee25a0bcec1579d1a0ad668345080c567ac254" + integrity sha512-884QMnnOcnzxUU9IgW3xLhzusQ36z2f7vdRTfB8CXkKEZwdMpq6pXlZM9GSWFyw5zvSeG8dn2IgFd4642eOp9w== + dependencies: + "@acala-network/api" "^5" + "@acala-network/sdk" "^4.1.9-7" + "@acala-network/sdk-core" "^4.1.9-7" + "@polkadot/api" "^10.9.1" + "@polkadot/apps-config" "^0.132.1" + "@polkadot/types" "^10.9.1" axios "^0.27.2" lodash "^4.17.20" @@ -2125,32 +2987,26 @@ dependencies: axios "^0.21.1" -"@interlay/interbtc-api@2.4.3": - version "2.4.3" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.4.3.tgz#1b1b953d792a168f7a3d20014c8255b78cf08119" - integrity sha512-0j8sPekmyhf6m8Qa4gnYndUx5Uu8XB+4E0nxhrUsVN62zSNrxSu8Ubn6sjlwOXUmgqB1BJRZe/PV3hj2OiWgUw== +"@interlay/interbtc-api@2.5.1": + version "2.5.1" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-api/-/interbtc-api-2.5.1.tgz#1b07703e2a151f83fb9578043b237c309d4f8d07" + integrity sha512-qobTnKT14f0rHq90fWWRiWB6n11+oMpYb4+WJeJDXE0ulrxx2bbUgxKJQsFzLA4gbObc5p8qe4u/KYhxgBkWvg== dependencies: "@interlay/esplora-btc-api" "0.4.0" - "@interlay/interbtc-types" "1.13.0" "@interlay/monetary-js" "0.7.3" - "@polkadot/api" "9.14.2" + "@polkadot/api" "10.9.1" big.js "6.1.1" bitcoin-core "^3.0.0" bitcoinjs-lib "^5.2.0" bn.js "4.12.0" - cross-fetch "^3.0.6" + cross-fetch "^4.0.0" isomorphic-fetch "^3.0.0" regtest-client "^0.2.0" -"@interlay/interbtc-types@1.11.0": - version "1.11.0" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.11.0.tgz#5b94066ddee1fd677de928531db36e6ae439e08f" - integrity sha512-bn3XjyRlXyhe1QKUHx5IEQJDNC6LoSCJJIkTnSp5xm52GRBEWgHOvLAnfJi3gyj7A3lV/yA2Xjqf294bZgMmfw== - -"@interlay/interbtc-types@1.13.0": - version "1.13.0" - resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.13.0.tgz#0e09badf10861b4c8a5087b4358da317e464a14a" - integrity sha512-oUjavcfnX7lxlMd10qGc48/MoATX37TQcuSAZBIUmpCRiJ15hZbQoTAKGgWMPsla3+3YqUAzkWUEVMwUvM1U+w== +"@interlay/interbtc-types@1.12.0": + version "1.12.0" + resolved "https://registry.yarnpkg.com/@interlay/interbtc-types/-/interbtc-types-1.12.0.tgz#07dc8e15690292387124dbc2bbb7bf5bc8b68001" + integrity sha512-ELJa2ftIbe8Ds2ejS7kO5HumN9EB5l2OBi3Qsy5iHJsHKq2HtXfFoKnW38HarM6hADrWG+e/yNGHSKJIJzEZuA== "@interlay/monetary-js@0.7.3": version "0.7.3" @@ -2483,6 +3339,15 @@ "@types/yargs" "^17.0.8" chalk "^4.0.0" +"@jridgewell/gen-mapping@^0.3.0": + version "0.3.3" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098" + integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + "@jridgewell/gen-mapping@^0.3.2": version "0.3.2" resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9" @@ -2497,6 +3362,11 @@ resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c" integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew== +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.1" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" + integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== + "@jridgewell/set-array@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" @@ -2507,6 +3377,11 @@ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec" integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg== +"@jridgewell/sourcemap-codec@^1.4.14": + version "1.4.15" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" + integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== + "@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.9": version "0.3.13" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.13.tgz#dcfe3e95f224c8fe97a87a5235defec999aa92ea" @@ -2515,10 +3390,18 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" -"@kiltprotocol/type-definitions@^0.30.0": - version "0.30.0" - resolved "https://registry.yarnpkg.com/@kiltprotocol/type-definitions/-/type-definitions-0.30.0.tgz#00e99636a1c4405071021242cd509090c8f14287" - integrity sha512-1UpPDjX8PFqTFm3lRRfYUPEY9M8KrbpRinf4q4K843lY5GdTxQaevrVdK9/WCHKywLyDa4tSrlUv9KQjrTP4bg== +"@jridgewell/trace-mapping@^0.3.17": + version "0.3.19" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811" + integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + +"@kiltprotocol/type-definitions@0.33.1": + version "0.33.1" + resolved "https://registry.yarnpkg.com/@kiltprotocol/type-definitions/-/type-definitions-0.33.1.tgz#d9b908cc613e6dfabdc0eeb6a1cd3f9313158c01" + integrity sha512-pQfpzrizMmIbVeDEeCjLzYtusP2laUSoXkfvAQNs3qJPqqn99mlRdGd6sAD/rSEOpGjAl7BlV4dpxqFKkrd7Fg== "@laminar/type-definitions@0.3.1": version "0.3.1" @@ -2527,22 +3410,17 @@ dependencies: "@open-web3/orml-type-definitions" "^0.8.2-9" -"@logion/node-api@^0.9.0-3": - version "0.9.0-3" - resolved "https://registry.yarnpkg.com/@logion/node-api/-/node-api-0.9.0-3.tgz#b02741acbf30517d537d48b75ffc83b366f09b87" - integrity sha512-6m2My8yI9jmhqP6FHPJdrsqdg/1vyJtY1/4cnuqCByJaVgNDGrcdtcmzW4BXCww+hJMrdm3PeLthKHCrwpo0gA== +"@logion/node-api@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@logion/node-api/-/node-api-0.16.0.tgz#479bbbcb6f065da44da51c44734fafc584988b87" + integrity sha512-lc825osQK/psRqptw8LrmlvZWGBYLq4YADhhvUl9d3rQCpDDjUEKHqRVJ7CoG/B6sxj4qdqUCCYH678vGJRPcg== dependencies: - "@polkadot/api" "^9.10.1" - "@polkadot/util" "^10.2.1" - "@polkadot/util-crypto" "^10.2.1" - "@types/uuid" "^8.3.4" + "@polkadot/api" "^10.4.1" + "@polkadot/util" "^12.0.1" + "@polkadot/util-crypto" "^12.0.1" + "@types/uuid" "^9.0.2" fast-sha256 "^1.3.0" - uuid "^8.3.2" - -"@mangata-finance/types@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@mangata-finance/types/-/types-0.17.0.tgz#299b0bd21e30e17ee65c25f18d4a89871f521930" - integrity sha512-v0o7rePG4P2fDH1yVvSfuHpHQCA7Xki9IwPMTu51Y4FoQdvD1zHUOI4mIOc3ssjOAJsCePNdsTm+/xj3DeiSxQ== + uuid "^9.0.0" "@mdx-js/mdx@^1.6.22": version "1.6.22" @@ -2579,10 +3457,10 @@ resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b" integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA== -"@metaverse-network-sdk/type-definitions@^0.0.1-13": - version "0.0.1-13" - resolved "https://registry.yarnpkg.com/@metaverse-network-sdk/type-definitions/-/type-definitions-0.0.1-13.tgz#1d02ba0f380c336d32065b89e9f421c0493b6bfd" - integrity sha512-qxV8M/wHK5R5bJP+t1SOQP2l8zRT8e1+wCbrqpVeh4VOw/DU9+EBBTYXnui9AbuJvrej/wLDiI0g3MqK0TsYrA== +"@metaverse-network-sdk/type-definitions@0.0.1-16": + version "0.0.1-16" + resolved "https://registry.yarnpkg.com/@metaverse-network-sdk/type-definitions/-/type-definitions-0.0.1-16.tgz#43f85125064cbd199f0b33e47990debd15e7fdbb" + integrity sha512-lo1NbA0gi+Tu23v4cTkN/oxEhQxaf3QxQ2qvUUfTxDU7a1leYp2Bw3IcoUvqHAGb/PPp8bNmYQfAKXsjqp+LZw== dependencies: lodash.merge "^4.6.2" @@ -2594,11 +3472,38 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3": + version "2.1.8-no-fsevents.3" + resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b" + integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ== + +"@noble/curves@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d" + integrity sha512-091oBExgENk/kGj3AZmtBDMpxQPDtxQABR2B9lb1JbVTs6ytdzZNwvhxQ4MWasRNEzlbEH8jCWFCwhF/Obj5AA== + dependencies: + "@noble/hashes" "1.3.1" + +"@noble/hashes@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.0.0.tgz#d5e38bfbdaba174805a4e649f13be9a9ed3351ae" + integrity sha512-DZVbtY62kc3kkBtMHqwCOfXrT/hnoORy5BJ4+HU1IR59X0KWAOqsfzQPcUl/lQLlG7qXbe/fZ3r/emxtAl+sqg== + "@noble/hashes@1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.2.0.tgz#a3150eeb09cc7ab207ebf6d7b9ad311a9bdbed12" integrity sha512-FZfhjEDbT5GRswV3C6uvLPHMiVD6lQBmpoX5+eSiPaMTXte/IKqI5dykDxzZB/WBeK/CDuQRBWarPdi3FNY2zQ== +"@noble/hashes@1.3.1": + version "1.3.1" + resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.1.tgz#8831ef002114670c603c458ab8b11328406953a9" + integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA== + +"@noble/secp256k1@1.5.5": + version "1.5.5" + resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.5.5.tgz#315ab5745509d1a8c8e90d0bdf59823ccf9bcfc3" + integrity sha512-sZ1W6gQzYnu45wPrWx8D3kwI2/U29VYTx9OjbDAd7jwRItJ0cSTMPRL/C8AWZFn9kWFLQGqEXVEE86w4Z8LpIQ== + "@noble/secp256k1@1.7.1": version "1.7.1" resolved "https://registry.yarnpkg.com/@noble/secp256k1/-/secp256k1-1.7.1.tgz#b251c70f824ce3ca7f8dc3df08d58f005cc0507c" @@ -2764,30 +3669,7 @@ resolved "https://registry.yarnpkg.com/@open-wc/webpack-import-meta-loader/-/webpack-import-meta-loader-0.4.7.tgz#d8212640a386a66bf06a2a4c101936467839b5a1" integrity sha512-F3d1EHRckk2+ZpgEEAgVITp8BU9DYLBhKOhNMREeQ1BwILRIhrt+V1bebpnd0Mz595jzd7Yh1wSibLsXibkCpg== -"@open-web3/api-mobx@^1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@open-web3/api-mobx/-/api-mobx-1.1.4.tgz#18a1327d373410797bfbbd94e9d61792d61f71e7" - integrity sha512-MheCFMiGp08i5ukMB8Dai6sNYEpX6UkuCobGIOZzON4K/Yj4mp9jUjzxZ24SCTtGLRwhI3qtUv3AyL06neObnw== - dependencies: - mobx "^5.15.7" - mobx-utils "^5.6.2" - -"@open-web3/orml-api-derive@^1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@open-web3/orml-api-derive/-/orml-api-derive-1.1.4.tgz#cb961c2d44f47fbd1ac9333798c8683d5ad77805" - integrity sha512-h8FgrNtA0+PvM1bPu3cJpaMTCGj0pyRbMid2M8XOq1PtQH216Z2CAtrilpQhQIgthJFcfmfirZ+80uG/faWirA== - dependencies: - memoizee "^0.4.15" - rxjs "^7.2.0" - -"@open-web3/orml-type-definitions@0.9.4-26": - version "0.9.4-26" - resolved "https://registry.yarnpkg.com/@open-web3/orml-type-definitions/-/orml-type-definitions-0.9.4-26.tgz#890c86b992db1241e3c99a0aed8720af46725274" - integrity sha512-i784NbOBIoTbc/Qj8738wqckYqbtM7W53YTHZZYMd1iBSldNkW5LXn0lOlsnaoiTs14BKlepDCRETRYoeI7KOQ== - dependencies: - lodash.merge "^4.6.2" - -"@open-web3/orml-type-definitions@1.1.4", "@open-web3/orml-type-definitions@^1.1.4": +"@open-web3/orml-type-definitions@1.1.4": version "1.1.4" resolved "https://registry.yarnpkg.com/@open-web3/orml-type-definitions/-/orml-type-definitions-1.1.4.tgz#a036b6cf0410783aaedf7e95d27917a5d66c5bed" integrity sha512-diuQx0Pf7cfoBtCpZTrBQOeIur0POp6Y9qfDS3p11RBF2XKwQ7jw/YKEFYqga1AyrzTcoSEE2OYUfeW3AKU94w== @@ -2806,19 +3688,26 @@ dependencies: lodash.merge "^4.6.2" -"@open-web3/orml-types@^1.1.4": - version "1.1.4" - resolved "https://registry.yarnpkg.com/@open-web3/orml-types/-/orml-types-1.1.4.tgz#cfd419907df5fa27d2feb3dc38391874e2608c5f" - integrity sha512-/JZocbeppn2hl9h2IAzjyqLW9c8hoWfAym45KpVUyp/Ho/Ykjw2n9Rn+s6yLVoga/oYfnP5gKwt5x4PMq24BUg== +"@open-web3/orml-type-definitions@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@open-web3/orml-type-definitions/-/orml-type-definitions-2.0.1.tgz#b3db4fb5777dc05c55fa5184c34f4ec91030f012" + integrity sha512-wqeSBOKk8UU9CBqYhK2yQh9YqwaS7vai71WuOGFNJnzRT+6WnzY0leaLTionuzfE3M4Y/jTrc8BTL6+PVFCr6Q== dependencies: - "@open-web3/orml-type-definitions" "1.1.4" + lodash.merge "^4.6.2" + +"@parallel-finance/type-definitions@1.7.17": + version "1.7.17" + resolved "https://registry.yarnpkg.com/@parallel-finance/type-definitions/-/type-definitions-1.7.17.tgz#dfb30d2f3eb75a447f1fbd919762e201b33ea637" + integrity sha512-OFz9sXwlp90xDdKK1gUvpdUsnlUPhhRhzvC0SqOnnT1SCpJgPv4RD5DGBN6wSHuRwNsYnCWH+8RkK7jWVgUvrQ== + dependencies: + "@open-web3/orml-type-definitions" "^2.0.1" -"@parallel-finance/type-definitions@1.7.14": - version "1.7.14" - resolved "https://registry.yarnpkg.com/@parallel-finance/type-definitions/-/type-definitions-1.7.14.tgz#02ca0d8a8d2894fa1d22c8625bd4edfcfbeffc4c" - integrity sha512-64cIrOcS5z2SSzTAITg3qDdQReoBLCZhAGHzR1VnYQzF0u59Ow6XnWmg0/R4EuyhnsqW4aMhnrmlVE7RhG9kPg== +"@peaqnetwork/type-definitions@0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@peaqnetwork/type-definitions/-/type-definitions-0.0.4.tgz#a893ff95bf824d13c902d3b5912b2954fc12e1e6" + integrity sha512-bMja9T9PHQrEy4Uhh0ZTWvKGpgiDd51tZg4ZOpgC1KtVBF6Wx+bNtt+Zyg0DKwRh2Eg+xI5OEBPycsFOpdIWIA== dependencies: - "@open-web3/orml-type-definitions" "^1.1.4" + "@open-web3/orml-type-definitions" "^0.9.4-38" "@phala/typedefs@0.2.33": version "0.2.33" @@ -2872,7 +3761,33 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1" integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g== -"@polkadot/api-augment@9.10.3", "@polkadot/api-augment@9.14.2", "@polkadot/api-augment@^9.14.2": +"@polkadot/api-augment@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-augment/-/api-augment-10.9.1.tgz#9fc81b81903229bb23b0b16783e97ec52a5d4f1b" + integrity sha512-kRZZvCFVcN4hAH4dJ+Qzfdy27/4EEq3oLDf3ihj0LTVrAezSWcKPGE3EVFy+Mn6Lo4SUc7RVyoKvIUhSk2l4Dg== + dependencies: + "@polkadot/api-base" "10.9.1" + "@polkadot/rpc-augment" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-augment" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/api-augment@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-augment/-/api-augment-7.15.1.tgz#120b766feeaa96996f1c6717a5261c2e0845c1e0" + integrity sha512-7csQLS6zuYuGq7W1EkTBz1ZmxyRvx/Qpz7E7zPSwxmY8Whb7Yn2effU9XF0eCcRpyfSW8LodF8wMmLxGYs1OaQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/api-base" "7.15.1" + "@polkadot/rpc-augment" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-augment" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/util" "^8.7.1" + +"@polkadot/api-augment@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api-augment/-/api-augment-9.14.2.tgz#2c49cdcfdf7057523db1dc8d7b0801391a8a2e69" integrity sha512-19MmW8AHEcLkdcUIo3LLk0eCQgREWqNSxkUyOeWn7UiNMY1AhDOOwMStUBNCvrIDK6VL6GGc1sY7rkPCLMuKSw== @@ -2885,7 +3800,29 @@ "@polkadot/types-codec" "9.14.2" "@polkadot/util" "^10.4.2" -"@polkadot/api-base@9.14.2", "@polkadot/api-base@^9.14.2": +"@polkadot/api-base@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-base/-/api-base-10.9.1.tgz#27f63c4950814c2f10535f794121fa1384dc2207" + integrity sha512-Q3m2KzlceMK2kX8bhnUZWk3RT6emmijeeFZZQgCePpEcrSeNjnqG4qjuTPgkveaOkUT8MAoDc5Avuzcc2jlW9g== + dependencies: + "@polkadot/rpc-core" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/util" "^12.3.1" + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/api-base@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-base/-/api-base-7.15.1.tgz#7567595be68431cc4085c48b18ba66933ff7b4d9" + integrity sha512-UlhLdljJPDwGpm5FxOjvJNFTxXMRFaMuVNx6EklbuetbBEJ/Amihhtj0EJRodxQwtZ4ZtPKYKt+g+Dn7OJJh4g== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/rpc-core" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/util" "^8.7.1" + rxjs "^7.5.5" + +"@polkadot/api-base@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api-base/-/api-base-9.14.2.tgz#605b44e3692a125bd8d97eed9cea8af9d0c454e2" integrity sha512-ky9fmzG1Tnrjr/SBZ0aBB21l0TFr+CIyQenQczoUyVgiuxVaI/2Bp6R2SFrHhG28P+PW2/RcYhn2oIAR2Z2fZQ== @@ -2896,21 +3833,39 @@ "@polkadot/util" "^10.4.2" rxjs "^7.8.0" -"@polkadot/api-contract@^9.14.2": - version "9.14.2" - resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-9.14.2.tgz#42ca46eecd6cef64b6c453b452bdb5d22a29b6a3" - integrity sha512-gAAHEh+tOIKuAJWxbAuB8Imo+Z8s0FHdICN6/q4JOxBhONJNA9beHB4wmqWSKvYqYmWrJvtv3HensLaITzAcrQ== +"@polkadot/api-derive@10.9.1", "@polkadot/api-derive@^10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-10.9.1.tgz#04a4ca3285fd215c4cd50cfb3f4791d38dd90050" + integrity sha512-mRud1UZCFIc4Z63qAoGSIHh/foyUYADfy1RQYCmPpeFKfIdCIrHpd7xFdJXTOMYOS0BwlM6u4qli/ZT4XigezQ== + dependencies: + "@polkadot/api" "10.9.1" + "@polkadot/api-augment" "10.9.1" + "@polkadot/api-base" "10.9.1" + "@polkadot/rpc-core" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/util" "^12.3.1" + "@polkadot/util-crypto" "^12.3.1" + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/api-derive@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-7.15.1.tgz#450542bb7d848013225d6c8480648340e5ee6a61" + integrity sha512-CsOQppksQBaa34L1fWRzmfQQpoEBwfH0yTTQxgj3h7rFYGVPxEKGeFjo1+IgI2vXXvOO73Z8E4H/MnbxvKrs1Q== dependencies: - "@babel/runtime" "^7.20.13" - "@polkadot/api" "9.14.2" - "@polkadot/types" "9.14.2" - "@polkadot/types-codec" "9.14.2" - "@polkadot/types-create" "9.14.2" - "@polkadot/util" "^10.4.2" - "@polkadot/util-crypto" "^10.4.2" - rxjs "^7.8.0" - -"@polkadot/api-derive@9.10.3", "@polkadot/api-derive@9.14.2", "@polkadot/api-derive@^8.5.1", "@polkadot/api-derive@^9.13.2", "@polkadot/api-derive@^9.14.2": + "@babel/runtime" "^7.17.8" + "@polkadot/api" "7.15.1" + "@polkadot/api-augment" "7.15.1" + "@polkadot/api-base" "7.15.1" + "@polkadot/rpc-core" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/util" "^8.7.1" + "@polkadot/util-crypto" "^8.7.1" + rxjs "^7.5.5" + +"@polkadot/api-derive@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-9.14.2.tgz#e8fcd4ee3f2b80b9fe34d4dec96169c3bdb4214d" integrity sha512-yw9OXucmeggmFqBTMgza0uZwhNjPxS7MaT7lSCUIRKckl1GejdV+qMhL3XFxPFeYzXwzFpdPG11zWf+qJlalqw== @@ -2926,7 +3881,53 @@ "@polkadot/util-crypto" "^10.4.2" rxjs "^7.8.0" -"@polkadot/api@9.10.3", "@polkadot/api@9.14.2", "@polkadot/api@^10.3.2", "@polkadot/api@^7.2.1", "@polkadot/api@^9.10.1", "@polkadot/api@^9.13.2", "@polkadot/api@^9.14.2", "@polkadot/api@^9.4.2", "@polkadot/api@^9.9.1", "@polkadot/api@latest": +"@polkadot/api@10.9.1", "@polkadot/api@^10.4.1", "@polkadot/api@^10.7.3", "@polkadot/api@^10.9.1", "@polkadot/api@latest": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-10.9.1.tgz#156b3436f45ef18218960804988c1f552d2c4e46" + integrity sha512-ND/2UqZBWvtt4PfV03OStTKg0mxmPk4UpMAgJKutdgsz/wP9CYJ1KbjwFgPNekL9JnzbKQsWyQNPVrcw7kQk8A== + dependencies: + "@polkadot/api-augment" "10.9.1" + "@polkadot/api-base" "10.9.1" + "@polkadot/api-derive" "10.9.1" + "@polkadot/keyring" "^12.3.1" + "@polkadot/rpc-augment" "10.9.1" + "@polkadot/rpc-core" "10.9.1" + "@polkadot/rpc-provider" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-augment" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/types-create" "10.9.1" + "@polkadot/types-known" "10.9.1" + "@polkadot/util" "^12.3.1" + "@polkadot/util-crypto" "^12.3.1" + eventemitter3 "^5.0.1" + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/api@7.15.1", "@polkadot/api@^7.2.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-7.15.1.tgz#24eaeaa8ffbc6f30ff3d9846a816a18a688ceb8b" + integrity sha512-z0z6+k8+R9ixRMWzfsYrNDnqSV5zHKmyhTCL0I7+1I081V18MJTCFUKubrh0t1gD0/FCt3U9Ibvr4IbtukYLrQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/api-augment" "7.15.1" + "@polkadot/api-base" "7.15.1" + "@polkadot/api-derive" "7.15.1" + "@polkadot/keyring" "^8.7.1" + "@polkadot/rpc-augment" "7.15.1" + "@polkadot/rpc-core" "7.15.1" + "@polkadot/rpc-provider" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-augment" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/types-create" "7.15.1" + "@polkadot/types-known" "7.15.1" + "@polkadot/util" "^8.7.1" + "@polkadot/util-crypto" "^8.7.1" + eventemitter3 "^4.0.7" + rxjs "^7.5.5" + +"@polkadot/api@9.14.2", "@polkadot/api@^9.13.2", "@polkadot/api@^9.14.1": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-9.14.2.tgz#d5cee02236654c6063d7c4b70c78c290db5aba8d" integrity sha512-R3eYFj2JgY1zRb+OCYQxNlJXCs2FA+AU4uIEiVcXnVLmR3M55tkRNEwYAZmiFxx0pQmegGgPMc33q7TWGdw24A== @@ -2949,73 +3950,79 @@ eventemitter3 "^5.0.0" rxjs "^7.8.0" -"@polkadot/apps-config@^0.124.1": - version "0.124.1" - resolved "https://registry.yarnpkg.com/@polkadot/apps-config/-/apps-config-0.124.1.tgz#4d993fcc198118dfe4aa9200ce6055b48cab96b3" - integrity sha512-SqDLf0ksU5WkU96L3nIiICwaBDLj4APYjKkwpSUAWk1NcvXDWZQQG56obgaLPHZ2If6GZrQge/fUmItuRBIZrg== +"@polkadot/apps-config@^0.132.1": + version "0.132.1" + resolved "https://registry.yarnpkg.com/@polkadot/apps-config/-/apps-config-0.132.1.tgz#946f80fa4f3eb2f3ca62673e52ed3b57e7310c43" + integrity sha512-AS5BAYnDPSuYU7EXmYpizHS/uFswwlGU+17yr0ng26kETy+mPft2koaBnRq5jUsqVIXN2sfI7619OgTK5XhuEg== dependencies: - "@acala-network/type-definitions" "^4.1.8-1" - "@babel/runtime" "^7.20.13" - "@bifrost-finance/type-definitions" "1.7.2" + "@acala-network/type-definitions" "5.1.1" + "@bifrost-finance/type-definitions" "1.8.4" "@crustio/type-definitions" "1.3.0" "@darwinia/types" "2.8.10" "@darwinia/types-known" "2.8.10" "@digitalnative/type-definitions" "1.1.27" - "@docknetwork/node-types" "0.15.0" + "@docknetwork/node-types" "0.16.0" "@edgeware/node-types" "3.6.2-wako" "@equilab/definitions" "1.4.18" - "@frequency-chain/api-augment" "^1.0.0" - "@interlay/interbtc-types" "1.11.0" - "@kiltprotocol/type-definitions" "^0.30.0" + "@fragnova/api-augment" "0.1.0-spec-1.0.4-mainnet" + "@frequency-chain/api-augment" "1.7.0-rc1" + "@interlay/interbtc-types" "1.12.0" + "@kiltprotocol/type-definitions" "0.33.1" "@laminar/type-definitions" "0.3.1" - "@logion/node-api" "^0.9.0-3" - "@mangata-finance/types" "^0.17.0" - "@metaverse-network-sdk/type-definitions" "^0.0.1-13" - "@parallel-finance/type-definitions" "1.7.14" + "@logion/node-api" "0.16.0" + "@metaverse-network-sdk/type-definitions" "0.0.1-16" + "@parallel-finance/type-definitions" "1.7.17" + "@peaqnetwork/type-definitions" "0.0.4" "@phala/typedefs" "0.2.33" - "@polkadot/api" "^9.13.2" - "@polkadot/api-derive" "^9.13.2" - "@polkadot/networks" "^10.3.1" - "@polkadot/types" "^9.13.2" - "@polkadot/util" "^10.3.1" - "@polkadot/x-fetch" "^10.3.1" - "@polymathnetwork/polymesh-types" "0.0.2" + "@polkadot/api" "^10.9.1" + "@polkadot/api-derive" "^10.9.1" + "@polkadot/networks" "^12.3.2" + "@polkadot/react-identicon" "^3.5.1" + "@polkadot/types" "^10.9.1" + "@polkadot/types-codec" "^10.9.1" + "@polkadot/util" "^12.3.2" + "@polkadot/wasm-util" "^7.2.1" + "@polkadot/x-fetch" "^12.3.2" + "@polkadot/x-ws" "^12.3.2" + "@polymeshassociation/polymesh-types" "5.4.1" "@snowfork/snowbridge-types" "0.2.7" - "@sora-substrate/type-definitions" "1.12.4" - "@subsocial/definitions" "^0.7.9" - "@unique-nft/opal-testnet-types" "930.34.0" - "@unique-nft/quartz-mainnet-types" "930.34.0" - "@unique-nft/unique-mainnet-types" "930.33.0" - "@zeitgeistpm/type-defs" "0.10.0" + "@sora-substrate/type-definitions" "1.17.16" + "@subsocial/definitions" "0.8.13" + "@unique-nft/opal-testnet-types" "942.57.0" + "@unique-nft/quartz-mainnet-types" "942.57.0" + "@unique-nft/sapphire-mainnet-types" "942.57.0" + "@unique-nft/unique-mainnet-types" "941.56.0" + "@zeitgeistpm/type-defs" "1.0.0" "@zeroio/type-definitions" "0.0.14" - lodash "^4.17.21" - moonbeam-types-bundle "2.0.9" + moonbeam-types-bundle "2.0.10" pontem-types-bundle "1.0.15" - rxjs "^7.8.0" - -"@polkadot/extension-dapp@0.44.1": - version "0.44.1" - resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.44.1.tgz#bbde17799efba9bb889f97575e69814263a7ed59" - integrity sha512-NPMiww/JxUra8OPYfYlw45r5bjl/mh1kvuDqdmDdYCLUCM00g/oynEEL8GraKUCRkZ/0K6CepldDAmIzgv45hw== - dependencies: - "@babel/runtime" "^7.18.3" - "@polkadot/extension-inject" "^0.44.1" - "@polkadot/util" "^9.4.1" - "@polkadot/util-crypto" "^9.4.1" - -"@polkadot/extension-inject@^0.44.1": - version "0.44.1" - resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.44.1.tgz#1bd5239507f308390b1e28d6c971264cee4b9ca2" - integrity sha512-CA12DdJXtNSaYMvwZLN3iz4qCRBQrIe+KtUFO/Mh5pbbRCn0xOl4qP3JlgT2xysM1u4PLv+RC5KMktx1gnGIUQ== - dependencies: - "@babel/runtime" "^7.18.3" - "@polkadot/rpc-provider" "^8.7.1" - "@polkadot/types" "^8.7.1" - "@polkadot/util" "^9.4.1" - "@polkadot/util-crypto" "^9.4.1" - "@polkadot/x-global" "^9.4.1" - -"@polkadot/keyring@^10.1.6", "@polkadot/keyring@^10.2.1", "@polkadot/keyring@^10.4.2": + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/extension-dapp@^0.46.5": + version "0.46.5" + resolved "https://registry.yarnpkg.com/@polkadot/extension-dapp/-/extension-dapp-0.46.5.tgz#ace9dfda199ddc1e588f3506ac678641392ee41e" + integrity sha512-9Efm3oorx6orq1eue+tTk5rxuGFFCUdRxiZbdQMKiVl3lZnwBn0M61ceE3xXcf/oIwAm8RhUpQdwcbZfupJRgw== + dependencies: + "@polkadot/extension-inject" "0.46.5" + "@polkadot/util" "^12.3.2" + "@polkadot/util-crypto" "^12.3.2" + tslib "^2.5.3" + +"@polkadot/extension-inject@0.46.5": + version "0.46.5" + resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.46.5.tgz#6abee0eb28a73fd1a9461f257cac5875c2e9fc63" + integrity sha512-QcpkCMuv7iFbWjufkw14JRozpEYFyjP0H8KOJ8IsHGfPd2DPiismQ0NXr+AS7f6U+0I+Rhv9E4dnXxtJPROVMQ== + dependencies: + "@polkadot/api" "^10.9.1" + "@polkadot/rpc-provider" "^10.9.1" + "@polkadot/types" "^10.9.1" + "@polkadot/util" "^12.3.2" + "@polkadot/util-crypto" "^12.3.2" + "@polkadot/x-global" "^12.3.2" + tslib "^2.5.3" + +"@polkadot/keyring@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-10.4.2.tgz#793377fdb9076df0af771df11388faa6be03c70d" integrity sha512-7iHhJuXaHrRTG6cJDbZE9G+c1ts1dujp0qbO4RfAPmT7YUvphHvAtCKueN9UKPz5+TYDL+rP/jDEaSKU8jl/qQ== @@ -3024,14 +4031,14 @@ "@polkadot/util" "10.4.2" "@polkadot/util-crypto" "10.4.2" -"@polkadot/keyring@^10.3.1": - version "10.3.1" - resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-10.3.1.tgz#f13fed33686ff81b1e486721e52299eba9e6c4a6" - integrity sha512-xBkUtyQ766NVS1ccSYbQssWpxAhSf0uwkw9Amj8TFhu++pnZcVm+EmM2VczWqgOkmWepO7MGRjEXeOIw1YUGiw== +"@polkadot/keyring@^12.3.1", "@polkadot/keyring@^12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-12.4.2.tgz#ff66c531ff29c1c9cb7c0f8411930bc18c76e2d3" + integrity sha512-VH91feSL6GiVVLcJ6V8h6jIAuq62bfvhM75AMcjTFol6MDqFl25jdjkHfZ2bQhig330LIhLw89nKdYr2/OfwjA== dependencies: - "@babel/runtime" "^7.20.13" - "@polkadot/util" "10.3.1" - "@polkadot/util-crypto" "10.3.1" + "@polkadot/util" "12.4.2" + "@polkadot/util-crypto" "12.4.2" + tslib "^2.6.2" "@polkadot/keyring@^6.9.1": version "6.11.1" @@ -3051,7 +4058,7 @@ "@polkadot/util" "7.9.2" "@polkadot/util-crypto" "7.9.2" -"@polkadot/keyring@^8.2.2": +"@polkadot/keyring@^8.2.2", "@polkadot/keyring@^8.7.1": version "8.7.1" resolved "https://registry.yarnpkg.com/@polkadot/keyring/-/keyring-8.7.1.tgz#07cf6d6ee351dcf70fbf965b1d6d96c5025ae1b8" integrity sha512-t6ZgQVC+nQT7XwbWtEhkDpiAzxKVJw8Xd/gWdww6xIrawHu7jo3SGB4QNdPgkf8TvDHYAAJiupzVQYAlOIq3GA== @@ -3060,7 +4067,18 @@ "@polkadot/util" "8.7.1" "@polkadot/util-crypto" "8.7.1" -"@polkadot/networks@10.4.2", "@polkadot/networks@^10.1.6", "@polkadot/networks@^10.4.2": +"@polkadot/metadata@4.17.1": + version "4.17.1" + resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-4.17.1.tgz#4da9ee5b2b816493910abfd302a50b58141ceca2" + integrity sha512-219isiCWVfbu5JxZnOPj+cV4T+S0XHS4+Jal3t3xz9y4nbgr+25Pa4KInEsJPx0u8EZAxMeiUCX3vd5U7oe72g== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/types" "4.17.1" + "@polkadot/types-known" "4.17.1" + "@polkadot/util" "^6.11.1" + "@polkadot/util-crypto" "^6.11.1" + +"@polkadot/networks@10.4.2", "@polkadot/networks@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-10.4.2.tgz#d7878c6aad8173c800a21140bfe5459261724456" integrity sha512-FAh/znrEvWBiA/LbcT5GXHsCFUl//y9KqxLghSr/CreAmAergiJNT0MVUezC7Y36nkATgmsr4ylFwIxhVtuuCw== @@ -3069,33 +4087,77 @@ "@polkadot/util" "10.4.2" "@substrate/ss58-registry" "^1.38.0" -"@polkadot/networks@^10.3.1": - version "10.3.1" - resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-10.3.1.tgz#097a2c4cd25eff59fe6c11299f58feedd4335042" - integrity sha512-W9E1g6zRbIVyF7sGqbpxH0P6caxtBHNEwvDa5/8ZQi9UsLj6mUs0HdwZtAdIo3KcSO4uAyV9VYJjY/oAWWcnXg== +"@polkadot/networks@12.4.2", "@polkadot/networks@^12.3.1", "@polkadot/networks@^12.3.2", "@polkadot/networks@^12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-12.4.2.tgz#6b3dcbdd016beb0ea585009fd61b048b99b17d1c" + integrity sha512-dd7vss+86kpOyy/C+DuCWChGfhwHBHtrzJ9ArbbpY75qc8SqdP90lj/c13ZCHr5I1l+coy31gyyMj5i6ja1Dpg== dependencies: - "@babel/runtime" "^7.20.13" - "@polkadot/util" "10.3.1" - "@substrate/ss58-registry" "^1.38.0" + "@polkadot/util" "12.4.2" + "@substrate/ss58-registry" "^1.43.0" + tslib "^2.6.2" -"@polkadot/react-identicon@^2.11.1": - version "2.11.1" - resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-2.11.1.tgz#8f81f142f7c7763fe2d499580b85b3879f4eb081" - integrity sha512-pqEsiXuKOXDrXNnsFB1JyBbFqedbiDwtP0yewIQ9vtwJwm01o7oE0yGfYS88hnPN1mLDc++MMcqvrHBsxYr2Lw== +"@polkadot/networks@6.11.1", "@polkadot/networks@^6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-6.11.1.tgz#8fd189593f6ee4f8bf64378d0aaae09e39a37d35" + integrity sha512-0C6Ha2kvr42se3Gevx6UhHzv3KnPHML0N73Amjwvdr4y0HLZ1Nfw+vcm5yqpz5gpiehqz97XqFrsPRauYdcksQ== dependencies: - "@babel/runtime" "^7.20.13" - "@polkadot/keyring" "^10.3.1" - "@polkadot/ui-settings" "2.11.1" - "@polkadot/ui-shared" "2.11.1" - "@polkadot/util" "^10.3.1" - "@polkadot/util-crypto" "^10.3.1" - color "^3.2.1" + "@babel/runtime" "^7.14.6" + +"@polkadot/networks@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-7.9.2.tgz#03e3f3ac6bdea177517436537826055df60bcb9a" + integrity sha512-4obI1RdW5/7TFwbwKA9oqw8aggVZ65JAUvIFMd2YmMC2T4+NiZLnok0WhRkhZkUnqjLIHXYNwq7Ho1i39dte0g== + dependencies: + "@babel/runtime" "^7.16.3" + +"@polkadot/networks@8.7.1", "@polkadot/networks@^8.1.2", "@polkadot/networks@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/networks/-/networks-8.7.1.tgz#26c2ec6158c985bb77c510d98a3ab1c7e049f89c" + integrity sha512-8xAmhDW0ry5EKcEjp6VTuwoTm0DdDo/zHsmx88P6sVL87gupuFsL+B6TrsYLl8GcaqxujwrOlKB+CKTUg7qFKg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/util" "8.7.1" + "@substrate/ss58-registry" "^1.17.0" + +"@polkadot/react-identicon@^3.5.1", "@polkadot/react-identicon@^3.6.2": + version "3.6.2" + resolved "https://registry.yarnpkg.com/@polkadot/react-identicon/-/react-identicon-3.6.2.tgz#c359591250b2b5cfb5413d3f5fd2473cb23da6e5" + integrity sha512-iHbPhtajLiubJrONPLFGDAaidtDpUiQ/OB+1azmOoOb7WR7CIT3iJl7Vb2ih9OAwpvvsFOJUR3aZpzT0tYvNYA== + dependencies: + "@polkadot/keyring" "^12.4.2" + "@polkadot/ui-settings" "3.6.2" + "@polkadot/ui-shared" "3.6.2" + "@polkadot/util" "^12.4.2" + "@polkadot/util-crypto" "^12.4.2" ethereum-blockies-base64 "^1.0.2" jdenticon "3.2.0" react-copy-to-clipboard "^5.1.0" - styled-components "^5.3.6" + styled-components "^6.0.7" + tslib "^2.6.2" + +"@polkadot/rpc-augment@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-augment/-/rpc-augment-10.9.1.tgz#214ec3ee145d20caa61ea204041a3aadb89c6b0f" + integrity sha512-MaLHkNlyqN20ZRYr6uNd1BZr1OsrnX9qLAmsl0mcrri1vPGRH6VHjfFH1RBLkikpWD82v17g0l2hLwdV1ZHMcw== + dependencies: + "@polkadot/rpc-core" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/rpc-augment@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-augment/-/rpc-augment-7.15.1.tgz#391a42a9c3e553335a2a544598a717b47654ad6e" + integrity sha512-sK0+mphN7nGz/eNPsshVi0qd0+N0Pqxuebwc1YkUGP0f9EkDxzSGp6UjGcSwWVaAtk9WZZ1MpK1Jwb/2GrKV7Q== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/rpc-core" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/util" "^8.7.1" -"@polkadot/rpc-augment@9.14.2", "@polkadot/rpc-augment@^9.14.2": +"@polkadot/rpc-augment@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/rpc-augment/-/rpc-augment-9.14.2.tgz#eb70d5511463dab8d995faeb77d4edfe4952fe26" integrity sha512-mOubRm3qbKZTbP9H01XRrfTk7k5it9WyzaWAg72DJBQBYdgPUUkGSgpPD/Srkk5/5GAQTWVWL1I2UIBKJ4TJjQ== @@ -3106,7 +4168,31 @@ "@polkadot/types-codec" "9.14.2" "@polkadot/util" "^10.4.2" -"@polkadot/rpc-core@9.14.2", "@polkadot/rpc-core@^9.14.2", "@polkadot/rpc-core@^9.9.1": +"@polkadot/rpc-core@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-10.9.1.tgz#798c514dbed6f6c2e43098a494c9f51fb144dc31" + integrity sha512-ZtA8B8SfXSAwVkBlCcKRHw0eSM7ec/sbiNOM5GasXPeRujUgT7lOwSH2GbUZSqe9RfRDMp6DvO9c2JoGc3LLWw== + dependencies: + "@polkadot/rpc-augment" "10.9.1" + "@polkadot/rpc-provider" "10.9.1" + "@polkadot/types" "10.9.1" + "@polkadot/util" "^12.3.1" + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/rpc-core@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-7.15.1.tgz#47855cf05bd2f8dbf87d9f1f77343114e61c664a" + integrity sha512-4Sb0e0PWmarCOizzxQAE1NQSr5z0n+hdkrq3+aPohGu9Rh4PodG+OWeIBy7Ov/3GgdhNQyBLG+RiVtliXecM3g== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/rpc-augment" "7.15.1" + "@polkadot/rpc-provider" "7.15.1" + "@polkadot/types" "7.15.1" + "@polkadot/util" "^8.7.1" + rxjs "^7.5.5" + +"@polkadot/rpc-core@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-9.14.2.tgz#26d4f00ac7abbf880f8280e9b96235880d35794b" integrity sha512-krA/mtQ5t9nUQEsEVC1sjkttLuzN6z6gyJxK2IlpMS3S5ncy/R6w4FOpy+Q0H18Dn83JBo0p7ZtY7Y6XkK48Kw== @@ -3118,7 +4204,46 @@ "@polkadot/util" "^10.4.2" rxjs "^7.8.0" -"@polkadot/rpc-provider@9.14.2", "@polkadot/rpc-provider@^10.3.2", "@polkadot/rpc-provider@^8.7.1", "@polkadot/rpc-provider@^9.14.2": +"@polkadot/rpc-provider@10.9.1", "@polkadot/rpc-provider@^10.7.3", "@polkadot/rpc-provider@^10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-10.9.1.tgz#de3a474bbcd26d28d9cd3134acdb3b5ce92b680b" + integrity sha512-4QzT2QzD+320+eT6b79sGAA85Tt3Bb8fQvse4r5Mom2iiBd2SO81vOhxSAOaIe4GUsw25VzFJmsbe7+OObItdg== + dependencies: + "@polkadot/keyring" "^12.3.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-support" "10.9.1" + "@polkadot/util" "^12.3.1" + "@polkadot/util-crypto" "^12.3.1" + "@polkadot/x-fetch" "^12.3.1" + "@polkadot/x-global" "^12.3.1" + "@polkadot/x-ws" "^12.3.1" + eventemitter3 "^5.0.1" + mock-socket "^9.2.1" + nock "^13.3.1" + tslib "^2.5.3" + optionalDependencies: + "@substrate/connect" "0.7.26" + +"@polkadot/rpc-provider@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-7.15.1.tgz#a213de907a6f4f480c3c819aa95e4e60d4247f84" + integrity sha512-n0RWfSaD/r90JXeJkKry1aGZwJeBUUiMpXUQ9Uvp6DYBbYEDs0fKtWLpdT3PdFrMbe5y3kwQmNLxwe6iF4+mzg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/keyring" "^8.7.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-support" "7.15.1" + "@polkadot/util" "^8.7.1" + "@polkadot/util-crypto" "^8.7.1" + "@polkadot/x-fetch" "^8.7.1" + "@polkadot/x-global" "^8.7.1" + "@polkadot/x-ws" "^8.7.1" + "@substrate/connect" "0.7.0-alpha.0" + eventemitter3 "^4.0.7" + mock-socket "^9.1.2" + nock "^13.2.4" + +"@polkadot/rpc-provider@9.14.2", "@polkadot/rpc-provider@^9.13.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-9.14.2.tgz#0dea667f3a03bf530f202cba5cd360df19b32e30" integrity sha512-YTSywjD5PF01V47Ru5tln2LlpUwJiSOdz6rlJXPpMaY53hUp7+xMU01FVAQ1bllSBNisSD1Msv/mYHq84Oai2g== @@ -3138,7 +4263,27 @@ optionalDependencies: "@substrate/connect" "0.7.19" -"@polkadot/types-augment@9.14.2", "@polkadot/types-augment@^9.14.2": +"@polkadot/types-augment@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-augment/-/types-augment-10.9.1.tgz#5f1c1225c04ffbfe243629a46087c9c9de25a6b3" + integrity sha512-OY9/jTMFRFqYdkUnfcGwqMLC64A0Q25bjvCuVQCVjsPFKE3wl0Kt5rNT01eV2UmLXrR6fY0xWbR2w80bLA7CIQ== + dependencies: + "@polkadot/types" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/types-augment@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-augment/-/types-augment-7.15.1.tgz#437047f961b8d29e5ffd4fd59cd35f0e6374750b" + integrity sha512-aqm7xT/66TCna0I2utpIekoquKo0K5pnkA/7WDzZ6gyD8he2h0IXfe8xWjVmuyhjxrT/C/7X1aUF2Z0xlOCwzQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/types" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/util" "^8.7.1" + +"@polkadot/types-augment@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-augment/-/types-augment-9.14.2.tgz#1a478e18e713b04038f3e171287ee5abe908f0aa" integrity sha512-WO9d7RJufUeY3iFgt2Wz762kOu1tjEiGBR5TT4AHtpEchVHUeosVTrN9eycC+BhleqYu52CocKz6u3qCT/jKLg== @@ -3148,7 +4293,24 @@ "@polkadot/types-codec" "9.14.2" "@polkadot/util" "^10.4.2" -"@polkadot/types-codec@9.14.2", "@polkadot/types-codec@^9.14.2": +"@polkadot/types-codec@10.9.1", "@polkadot/types-codec@^10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-codec/-/types-codec-10.9.1.tgz#f30026d3dfeaa69c07c45fa66d1c39318fd232cc" + integrity sha512-mJ5OegKGraY1FLvEa8FopRCr3pQrhDkcn5RNOjmgJQozENVeRaxhk0NwxYz7IojFvSDnKnc6lNQfKaaSe5pLHg== + dependencies: + "@polkadot/util" "^12.3.1" + "@polkadot/x-bigint" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/types-codec@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-codec/-/types-codec-7.15.1.tgz#c0155867efd3ae35e15fea6a8aab49c2c63988fa" + integrity sha512-nI11dT7FGaeDd/fKPD8iJRFGhosOJoyjhZ0gLFFDlKCaD3AcGBRTTY8HFJpP/5QXXhZzfZsD93fVKrosnegU0Q== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/util" "^8.7.1" + +"@polkadot/types-codec@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-codec/-/types-codec-9.14.2.tgz#d625c80495d7a68237b3d5c0a60ff10d206131fa" integrity sha512-AJ4XF7W1no4PENLBRU955V6gDxJw0h++EN3YoDgThozZ0sj3OxyFupKgNBZcZb2V23H8JxQozzIad8k+nJbO1w== @@ -3157,7 +4319,25 @@ "@polkadot/util" "^10.4.2" "@polkadot/x-bigint" "^10.4.2" -"@polkadot/types-create@9.14.2", "@polkadot/types-create@^9.14.2": +"@polkadot/types-create@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-create/-/types-create-10.9.1.tgz#087d7e2af51cce558b67e3859613b932a3bdc0a3" + integrity sha512-OVz50MGTTuiuVnRP/zAx4CTuLioc0hsiwNwqN2lNhmIJGtnQ4Vy/7mQRsIWehiYz6g0Vzzm5B3qWkTXO1NSN5w== + dependencies: + "@polkadot/types-codec" "10.9.1" + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/types-create@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-create/-/types-create-7.15.1.tgz#ec4cafa314a82a25a109f0f52207e9169fc9b003" + integrity sha512-+HiaHn7XOwP0kv/rVdORlVkNuMoxuvt+jd67A/CeEreJiXqRLu+S61Mdk7wi6719PTaOal1hTDFfyGrtUd8FSQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/types-codec" "7.15.1" + "@polkadot/util" "^8.7.1" + +"@polkadot/types-create@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-create/-/types-create-9.14.2.tgz#aec515a2d3bc7e7b7802095cdd35ece48dc442bc" integrity sha512-nSnKpBierlmGBQT8r6/SHf6uamBIzk4WmdMsAsR4uJKJF1PtbIqx2W5PY91xWSiMSNMzjkbCppHkwaDAMwLGaw== @@ -3166,7 +4346,51 @@ "@polkadot/types-codec" "9.14.2" "@polkadot/util" "^10.4.2" -"@polkadot/types-known@9.14.2", "@polkadot/types-known@^9.14.2": +"@polkadot/types-known@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-known/-/types-known-10.9.1.tgz#fe0c7e55191aa843119edcaf9abb5d2471463a7d" + integrity sha512-zCMVWc4pJtkbMFPu72bD4IhvV/gkHXPX3C5uu92WdmCfnn0vEIEsMKWlVXVVvQQZKAqvs/awpqIfrUtEViOGEA== + dependencies: + "@polkadot/networks" "^12.3.1" + "@polkadot/types" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/types-create" "10.9.1" + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/types-known@4.17.1": + version "4.17.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-known/-/types-known-4.17.1.tgz#71c18dda4967a13ec34fbbf0c4ef264e882c2688" + integrity sha512-YkOwGrO+k9aVrBR8FgYHnfJKhOfpdgC5ZRYNL/xJ9oa7lBYqPts9ENAxeBmJS/5IGeDF9f32MNyrCP2umeCXWg== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/networks" "^6.11.1" + "@polkadot/types" "4.17.1" + "@polkadot/util" "^6.11.1" + +"@polkadot/types-known@6.12.1": + version "6.12.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-known/-/types-known-6.12.1.tgz#2dd3ca4e4aa20b86ef182eb75672690f8c14a84e" + integrity sha512-Z8bHpPQy+mqUm0uR1tai6ra0bQIoPmgRcGFYUM+rJtW1kx/6kZLh10HAICjLpPeA1cwLRzaxHRDqH5MCU6OgXw== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/networks" "^8.1.2" + "@polkadot/types" "6.12.1" + "@polkadot/util" "^8.1.2" + +"@polkadot/types-known@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-known/-/types-known-7.15.1.tgz#71dbf0835a48cdc97d0f50b0000298687e29818d" + integrity sha512-LMcNP0CxT84DqAKV62/qDeeIVIJCR5yzE9b+9AsYhyfhE4apwxjrThqZA7K0CF56bOdQJSexAerYB/jwk2IijA== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/networks" "^8.7.1" + "@polkadot/types" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/types-create" "7.15.1" + "@polkadot/util" "^8.7.1" + +"@polkadot/types-known@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-known/-/types-known-9.14.2.tgz#17fe5034a5b907bd006093a687f112b07edadf10" integrity sha512-iM8WOCgguzJ3TLMqlm4K1gKQEwWm2zxEKT1HZZ1irs/lAbBk9MquDWDvebryiw3XsLB8xgrp3RTIBn2Q4FjB2A== @@ -3178,7 +4402,23 @@ "@polkadot/types-create" "9.14.2" "@polkadot/util" "^10.4.2" -"@polkadot/types-support@9.14.2", "@polkadot/types-support@^9.14.2": +"@polkadot/types-support@10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-support/-/types-support-10.9.1.tgz#17a861aab8e5a225a4e20cefa2d16076ddd51baf" + integrity sha512-XsieuLDsszvMZQlleacQBfx07i/JkwQV/UxH9q8Hz7Okmaz9pEVEW1h3ka2/cPuC7a4l32JhaORBUYshBZNdJg== + dependencies: + "@polkadot/util" "^12.3.1" + tslib "^2.5.3" + +"@polkadot/types-support@7.15.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types-support/-/types-support-7.15.1.tgz#9c274759647dd89d46ea9cf74d593bcedcd85527" + integrity sha512-FIK251ffVo+NaUXLlaJeB5OvT7idDd3uxaoBM6IwsS87rzt2CcWMyCbu0uX89AHZUhSviVx7xaBxfkGEqMePWA== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/util" "^8.7.1" + +"@polkadot/types-support@9.14.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types-support/-/types-support-9.14.2.tgz#d25e8d4e5ec3deef914cb55fc8bc5448431ddd18" integrity sha512-VWCOPgXDK3XtXT7wMLyIWeNDZxUbNcw/8Pn6n6vMogs7o/n4h6WGbGMeTIQhPWyn831/RmkVs5+2DUC+2LlOhw== @@ -3186,7 +4426,57 @@ "@babel/runtime" "^7.20.13" "@polkadot/util" "^10.4.2" -"@polkadot/types@9.10.3", "@polkadot/types@9.14.2", "@polkadot/types@^10.3.2", "@polkadot/types@^4.13.1", "@polkadot/types@^6.0.5", "@polkadot/types@^7.2.1", "@polkadot/types@^8.7.1", "@polkadot/types@^9.13.2", "@polkadot/types@^9.14.2", "@polkadot/types@^9.9.1": +"@polkadot/types@10.9.1", "@polkadot/types@^10.7.3", "@polkadot/types@^10.9.1": + version "10.9.1" + resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-10.9.1.tgz#f111d00f7278ad3be95deba3d701fafefe080cb2" + integrity sha512-AG33i2ZGGfq7u+5rkAdGrXAQHHl844/Yv+junH5ZzX69xiCoWO1bH/yzDUNBdpki2GlACWvF9nLYh3F2tVF93w== + dependencies: + "@polkadot/keyring" "^12.3.1" + "@polkadot/types-augment" "10.9.1" + "@polkadot/types-codec" "10.9.1" + "@polkadot/types-create" "10.9.1" + "@polkadot/util" "^12.3.1" + "@polkadot/util-crypto" "^12.3.1" + rxjs "^7.8.1" + tslib "^2.5.3" + +"@polkadot/types@4.17.1", "@polkadot/types@^4.13.1": + version "4.17.1" + resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-4.17.1.tgz#41d43621d53820ee930ba4036bfa8b16cf98ca6f" + integrity sha512-rjW4OFdwvFekzN3ATLibC2JPSd8AWt5YepJhmuCPdwH26r3zB8bEC6dM7YQExLVUmygVPvgXk5ffHI6RAdXBMg== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/metadata" "4.17.1" + "@polkadot/util" "^6.11.1" + "@polkadot/util-crypto" "^6.11.1" + "@polkadot/x-rxjs" "^6.11.1" + +"@polkadot/types@6.12.1", "@polkadot/types@^6.0.5": + version "6.12.1" + resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-6.12.1.tgz#e5d6dff997740c3da947fa67abe2e1ec144c4757" + integrity sha512-O37cAGUL0xiXTuO3ySweVh0OuFUD6asrd0TfuzGsEp3jAISWdElEHV5QDiftWq8J9Vf8BMgTcP2QLFbmSusxqA== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/types-known" "6.12.1" + "@polkadot/util" "^8.1.2" + "@polkadot/util-crypto" "^8.1.2" + rxjs "^7.4.0" + +"@polkadot/types@7.15.1", "@polkadot/types@^7.2.1": + version "7.15.1" + resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-7.15.1.tgz#fb78886f4437fbc472e01019846fb1f229d2a177" + integrity sha512-KawZVS+eLR1D6O7c/P5cSUwr6biM9Qd2KwKtJIO8l1Mrxp7r+y2tQnXSSXVAd6XPdb3wVMhnIID+NW3W99TAnQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/keyring" "^8.7.1" + "@polkadot/types-augment" "7.15.1" + "@polkadot/types-codec" "7.15.1" + "@polkadot/types-create" "7.15.1" + "@polkadot/util" "^8.7.1" + "@polkadot/util-crypto" "^8.7.1" + rxjs "^7.5.5" + +"@polkadot/types@9.14.2", "@polkadot/types@^9.13.2": version "9.14.2" resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-9.14.2.tgz#5105f41eb9e8ea29938188d21497cbf1753268b8" integrity sha512-hGLddTiJbvowhhUZJ3k+olmmBc1KAjWIQxujIUIYASih8FQ3/YJDKxaofGOzh0VygOKW3jxQBN2VZPofyDP9KQ== @@ -3200,51 +4490,40 @@ "@polkadot/util-crypto" "^10.4.2" rxjs "^7.8.0" -"@polkadot/ui-keyring@^2.9.7": - version "2.9.7" - resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-2.9.7.tgz#b79b056b4c26866b3e87569407bcc16b95894545" - integrity sha512-0Y5Nh7YBEGfJQVRyEQAE3C05JBKRfLN+qVTBlCGe315xus8DyO3YS+w1HYHmHiXV34EfavnhftTla0/KWsND5g== - dependencies: - "@babel/runtime" "^7.18.9" - "@polkadot/keyring" "^10.1.6" - "@polkadot/ui-settings" "2.9.7" - "@polkadot/util" "^10.1.6" - "@polkadot/util-crypto" "^10.1.6" - mkdirp "^1.0.4" - rxjs "^7.5.6" - store "^2.0.12" - -"@polkadot/ui-settings@2.11.1": - version "2.11.1" - resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-2.11.1.tgz#e3474097a6f4246423731e9b5cce3a5bb9482349" - integrity sha512-7yZwb3VxGh7VPHkyygktL7Oep0c4XUyKkYGwSmgP2Gt2IcvnGXFUQVSEARKs9FCanl19f2CEU1m19+FFrjlUNQ== - dependencies: - "@babel/runtime" "^7.20.13" - "@polkadot/networks" "^10.3.1" - "@polkadot/util" "^10.3.1" - eventemitter3 "^4.0.7" +"@polkadot/ui-keyring@^3.6.2": + version "3.6.2" + resolved "https://registry.yarnpkg.com/@polkadot/ui-keyring/-/ui-keyring-3.6.2.tgz#e2a2d2222fb10bfad4becdd97fe7c904c9fc1835" + integrity sha512-aHp0j5I5vlIQin05YSHBTWl6OT0Vu4jHSVZRD9HBeV4cNVL3S9tji1/JZS1MjVwxrvRE2d5goZ21wWCzysfnpg== + dependencies: + "@polkadot/keyring" "^12.4.2" + "@polkadot/ui-settings" "3.6.2" + "@polkadot/util" "^12.4.2" + "@polkadot/util-crypto" "^12.4.2" + mkdirp "^3.0.1" + rxjs "^7.8.1" store "^2.0.12" + tslib "^2.6.2" -"@polkadot/ui-settings@2.9.7": - version "2.9.7" - resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-2.9.7.tgz#c9fcd7dc8d1de36826e06c347f27d9a9df56810c" - integrity sha512-MZJbexCei4LsUew9cY4XxxLjNM0M+VMPqByNXSiksneYyz3AoojR3EiLr1WlP1D/pqkvb8gIR61MYpcTRuc87Q== +"@polkadot/ui-settings@3.6.2": + version "3.6.2" + resolved "https://registry.yarnpkg.com/@polkadot/ui-settings/-/ui-settings-3.6.2.tgz#b3d3abeb42058d5e81d6b4149d4faaffba4bd3e6" + integrity sha512-iLD5g0qZHUhI6YQBW5BcaPrXk1+TSMFPSKwLNUVzQz32OLGpVxbeuzrGbc9l2wYrcFCa/Vlsv/biBPiLsSUubg== dependencies: - "@babel/runtime" "^7.18.9" - "@polkadot/networks" "^10.1.6" - "@polkadot/util" "^10.1.6" - eventemitter3 "^4.0.7" + "@polkadot/networks" "^12.4.2" + "@polkadot/util" "^12.4.2" + eventemitter3 "^5.0.1" store "^2.0.12" + tslib "^2.6.2" -"@polkadot/ui-shared@2.11.1": - version "2.11.1" - resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-2.11.1.tgz#b4dfe2310003ce4621fcbb5e94daa8c76b45a028" - integrity sha512-+qCLPT3SEnHOG3WvO0iYSJ6zArPQGCz9nHx8X8rw9GhffdiEC20ae63jB6dQTjR5GppPQx0aLE/cOppWn/HpRg== +"@polkadot/ui-shared@3.6.2": + version "3.6.2" + resolved "https://registry.yarnpkg.com/@polkadot/ui-shared/-/ui-shared-3.6.2.tgz#8af8ebb81d953da365e7672062c4de57c991c796" + integrity sha512-XGLmxi2GSRm5FAIxLN3HXe87wF21ZMZuC5QJnAl2tBCd0/jxqGw6ssthmXhIMtd9gL+jdm7VGVjBgKso0+CTUQ== dependencies: - "@babel/runtime" "^7.20.13" - color "^3.2.1" + colord "^2.9.3" + tslib "^2.6.2" -"@polkadot/util-crypto@10.3.1", "@polkadot/util-crypto@10.4.2", "@polkadot/util-crypto@6.11.1", "@polkadot/util-crypto@7.9.2", "@polkadot/util-crypto@8.7.1", "@polkadot/util-crypto@^10.1.6", "@polkadot/util-crypto@^10.2.1", "@polkadot/util-crypto@^10.2.4", "@polkadot/util-crypto@^10.3.1", "@polkadot/util-crypto@^10.4.2", "@polkadot/util-crypto@^9.4.1": +"@polkadot/util-crypto@10.4.2", "@polkadot/util-crypto@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-10.4.2.tgz#871fb69c65768bd48c57bb5c1f76a85d979fb8b5" integrity sha512-RxZvF7C4+EF3fzQv8hZOLrYCBq5+wA+2LWv98nECkroChY3C2ZZvyWDqn8+aonNULt4dCVTWDZM0QIY6y4LUAQ== @@ -3261,7 +4540,84 @@ ed2curve "^0.3.0" tweetnacl "^1.0.3" -"@polkadot/util@10.3.1", "@polkadot/util@10.4.2", "@polkadot/util@6.11.1", "@polkadot/util@7.9.2", "@polkadot/util@8.7.1", "@polkadot/util@^10.1.6", "@polkadot/util@^10.2.1", "@polkadot/util@^10.2.4", "@polkadot/util@^10.3.1", "@polkadot/util@^10.4.2", "@polkadot/util@^9.4.1": +"@polkadot/util-crypto@12.4.2", "@polkadot/util-crypto@^12.0.1", "@polkadot/util-crypto@^12.3.1", "@polkadot/util-crypto@^12.3.2", "@polkadot/util-crypto@^12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-12.4.2.tgz#e19258dab5f2d4fe49f2d074d36d33a445e50b74" + integrity sha512-JP7OrEKYx35P3wWc2Iu9F6BfYMIkywXik908zQqPxwoQhr8uDLP1Qoyu9Sws+hE97Yz1O4jBVvryS2le0yusog== + dependencies: + "@noble/curves" "1.1.0" + "@noble/hashes" "1.3.1" + "@polkadot/networks" "12.4.2" + "@polkadot/util" "12.4.2" + "@polkadot/wasm-crypto" "^7.2.2" + "@polkadot/wasm-util" "^7.2.2" + "@polkadot/x-bigint" "12.4.2" + "@polkadot/x-randomvalues" "12.4.2" + "@scure/base" "1.1.1" + tslib "^2.6.2" + +"@polkadot/util-crypto@6.11.1", "@polkadot/util-crypto@^6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-6.11.1.tgz#7a36acf5c8bf52541609ec0b0b2a69af295d652e" + integrity sha512-fWA1Nz17FxWJslweZS4l0Uo30WXb5mYV1KEACVzM+BSZAvG5eoiOAYX6VYZjyw6/7u53XKrWQlD83iPsg3KvZw== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/networks" "6.11.1" + "@polkadot/util" "6.11.1" + "@polkadot/wasm-crypto" "^4.0.2" + "@polkadot/x-randomvalues" "6.11.1" + base-x "^3.0.8" + base64-js "^1.5.1" + blakejs "^1.1.1" + bn.js "^4.11.9" + create-hash "^1.2.0" + elliptic "^6.5.4" + hash.js "^1.1.7" + js-sha3 "^0.8.0" + scryptsy "^2.1.0" + tweetnacl "^1.0.3" + xxhashjs "^0.2.2" + +"@polkadot/util-crypto@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-7.9.2.tgz#cdc336f92a6bc3d40c5a23734e1974fb777817f0" + integrity sha512-nNwqUwP44eCH9jKKcPie+IHLKkg9LMe6H7hXo91hy3AtoslnNrT51tP3uAm5yllhLvswJfnAgnlHq7ybCgqeFw== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/networks" "7.9.2" + "@polkadot/util" "7.9.2" + "@polkadot/wasm-crypto" "^4.4.1" + "@polkadot/x-randomvalues" "7.9.2" + blakejs "^1.1.1" + bn.js "^4.12.0" + create-hash "^1.2.0" + ed2curve "^0.3.0" + elliptic "^6.5.4" + hash.js "^1.1.7" + js-sha3 "^0.8.0" + micro-base "^0.9.0" + scryptsy "^2.1.0" + tweetnacl "^1.0.3" + xxhashjs "^0.2.2" + +"@polkadot/util-crypto@8.7.1", "@polkadot/util-crypto@^8.1.2", "@polkadot/util-crypto@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/util-crypto/-/util-crypto-8.7.1.tgz#f9fcca2895b5f160ce1c2faa0aa3054cc7aa4655" + integrity sha512-TaSuJ2aNrB5sYK7YXszkEv24nYJKRFqjF2OrggoMg6uYxUAECvTkldFnhtgeizMweRMxJIBu6bMHlSIutbWgjw== + dependencies: + "@babel/runtime" "^7.17.8" + "@noble/hashes" "1.0.0" + "@noble/secp256k1" "1.5.5" + "@polkadot/networks" "8.7.1" + "@polkadot/util" "8.7.1" + "@polkadot/wasm-crypto" "^5.1.1" + "@polkadot/x-bigint" "8.7.1" + "@polkadot/x-randomvalues" "8.7.1" + "@scure/base" "1.0.0" + ed2curve "^0.3.0" + tweetnacl "^1.0.3" + +"@polkadot/util@10.4.2", "@polkadot/util@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-10.4.2.tgz#df41805cb27f46b2b4dad24c371fa2a68761baa1" integrity sha512-0r5MGICYiaCdWnx+7Axlpvzisy/bi1wZGXgCSw5+ZTyPTOqvsYRqM2X879yxvMsGfibxzWqNzaiVjToz1jvUaA== @@ -3274,6 +4630,59 @@ "@types/bn.js" "^5.1.1" bn.js "^5.2.1" +"@polkadot/util@12.4.2", "@polkadot/util@^12.0.1", "@polkadot/util@^12.3.1", "@polkadot/util@^12.3.2", "@polkadot/util@^12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-12.4.2.tgz#65759f4b366c2a787fd21abacab8cf8ab1aebbf9" + integrity sha512-NcTCbnIzMb/3TvJNEbaiu/9EvYIBuzDwZfqQ4hzL0GAptkF8aDkKMDCfQ/j3FI38rR+VTPQHNky9fvWglGKGRw== + dependencies: + "@polkadot/x-bigint" "12.4.2" + "@polkadot/x-global" "12.4.2" + "@polkadot/x-textdecoder" "12.4.2" + "@polkadot/x-textencoder" "12.4.2" + "@types/bn.js" "^5.1.1" + bn.js "^5.2.1" + tslib "^2.6.2" + +"@polkadot/util@6.11.1", "@polkadot/util@^6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-6.11.1.tgz#8950b038ba3e6ebfc0a7ff47feeb972e81b2626c" + integrity sha512-TEdCetr9rsdUfJZqQgX/vxLuV4XU8KMoKBMJdx+JuQ5EWemIdQkEtMBdL8k8udNGbgSNiYFA6rPppATeIxAScg== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/x-textdecoder" "6.11.1" + "@polkadot/x-textencoder" "6.11.1" + "@types/bn.js" "^4.11.6" + bn.js "^4.11.9" + camelcase "^5.3.1" + ip-regex "^4.3.0" + +"@polkadot/util@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-7.9.2.tgz#567ac659516d6b685ed7e796919901d92e5cbe6b" + integrity sha512-6ABY6ErgkCsM4C6+X+AJSY4pBGwbKlHZmUtHftaiTvbaj4XuA4nTo3GU28jw8wY0Jh2cJZJvt6/BJ5GVkm5tBA== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/x-textdecoder" "7.9.2" + "@polkadot/x-textencoder" "7.9.2" + "@types/bn.js" "^4.11.6" + bn.js "^4.12.0" + camelcase "^6.2.1" + ip-regex "^4.3.0" + +"@polkadot/util@8.7.1", "@polkadot/util@^8.1.2", "@polkadot/util@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/util/-/util-8.7.1.tgz#27fe93bf7b8345276f10cfe9c0380510cd4584f6" + integrity sha512-XjY1bTo7V6OvOCe4yn8H2vifeuBciCy0gq0k5P1tlGUQLI/Yt0hvDmxcA0FEPtqg8CL+rYRG7WXGPVNjkrNvyQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-bigint" "8.7.1" + "@polkadot/x-global" "8.7.1" + "@polkadot/x-textdecoder" "8.7.1" + "@polkadot/x-textencoder" "8.7.1" + "@types/bn.js" "^5.1.0" + bn.js "^5.2.0" + ip-regex "^4.3.0" + "@polkadot/wasm-bridge@6.4.1": version "6.4.1" resolved "https://registry.yarnpkg.com/@polkadot/wasm-bridge/-/wasm-bridge-6.4.1.tgz#e97915dd67ba543ec3381299c2a5b9330686e27e" @@ -3281,6 +4690,14 @@ dependencies: "@babel/runtime" "^7.20.6" +"@polkadot/wasm-bridge@7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-bridge/-/wasm-bridge-7.2.2.tgz#957b82b17927fe080729e8930b5b5c554f77b8df" + integrity sha512-CgNENd65DVYtackOVXXRA0D1RPoCv5+77IdBCf7kNqu6LeAnR4nfTI6qjaApUdN1xRweUsQjSH7tu7VjkMOA0A== + dependencies: + "@polkadot/wasm-util" "7.2.2" + tslib "^2.6.1" + "@polkadot/wasm-crypto-asmjs@6.4.1": version "6.4.1" resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-6.4.1.tgz#3cc76bbda5ea4a7a860982c64f9565907b312253" @@ -3288,6 +4705,27 @@ dependencies: "@babel/runtime" "^7.20.6" +"@polkadot/wasm-crypto-asmjs@7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-7.2.2.tgz#25243a4d5d8d997761141b616623cacff4329f13" + integrity sha512-wKg+cpsWQCTSVhjlHuNeB/184rxKqY3vaklacbLOMbUXieIfuDBav5PJdzS3yeiVE60TpYaHW4iX/5OYHS82gg== + dependencies: + tslib "^2.6.1" + +"@polkadot/wasm-crypto-asmjs@^4.6.1": + version "4.6.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-4.6.1.tgz#4f4a5adcf8dce65666eaa0fb16b6ff7b0243aead" + integrity sha512-1oHQjz2oEO1kCIcQniOP+dZ9N2YXf2yCLHLsKaKSvfXiWaetVCaBNB8oIHIVYvuLnVc8qlMi66O6xc1UublHsw== + dependencies: + "@babel/runtime" "^7.17.2" + +"@polkadot/wasm-crypto-asmjs@^5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-asmjs/-/wasm-crypto-asmjs-5.1.1.tgz#6648e9c6f627501f61aef570e110022f2be1eff2" + integrity sha512-1WBwc2G3pZMKW1T01uXzKE30Sg22MXmF3RbbZiWWk3H2d/Er4jZQRpjumxO5YGWan+xOb7HQQdwnrUnrPgbDhg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/wasm-crypto-init@6.4.1": version "6.4.1" resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-init/-/wasm-crypto-init-6.4.1.tgz#4d9ab0030db52cf177bf707ef8e77aa4ca721668" @@ -3298,13 +4736,64 @@ "@polkadot/wasm-crypto-asmjs" "6.4.1" "@polkadot/wasm-crypto-wasm" "6.4.1" +"@polkadot/wasm-crypto-init@7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-init/-/wasm-crypto-init-7.2.2.tgz#ffd105b87fc1b679c06c85c0848183c27bc539e3" + integrity sha512-vD4iPIp9x+SssUIWUenxWLPw4BVIwhXHNMpsV81egK990tvpyIxL205/EF5QRb1mKn8WfWcNFm5tYwwh9NdnnA== + dependencies: + "@polkadot/wasm-bridge" "7.2.2" + "@polkadot/wasm-crypto-asmjs" "7.2.2" + "@polkadot/wasm-crypto-wasm" "7.2.2" + "@polkadot/wasm-util" "7.2.2" + tslib "^2.6.1" + "@polkadot/wasm-crypto-wasm@6.4.1": version "6.4.1" resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-6.4.1.tgz#97180f80583b18f6a13c1054fa5f7e8da40b1028" integrity sha512-3VV9ZGzh0ZY3SmkkSw+0TRXxIpiO0nB8lFwlRgcwaCihwrvLfRnH9GI8WE12mKsHVjWTEVR3ogzILJxccAUjDA== dependencies: - "@babel/runtime" "^7.20.6" - "@polkadot/wasm-util" "6.4.1" + "@babel/runtime" "^7.20.6" + "@polkadot/wasm-util" "6.4.1" + +"@polkadot/wasm-crypto-wasm@7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-7.2.2.tgz#9e49a1565bda2bc830708693b491b37ad8a2144d" + integrity sha512-3efoIB6jA3Hhv6k0YIBwCtlC8gCSWCk+R296yIXRLLr3cGN415KM/PO/d1JIXYI64lbrRzWRmZRhllw3jf6Atg== + dependencies: + "@polkadot/wasm-util" "7.2.2" + tslib "^2.6.1" + +"@polkadot/wasm-crypto-wasm@^4.6.1": + version "4.6.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-4.6.1.tgz#882d8199e216966c612f56a18e31f6aaae77e7eb" + integrity sha512-NI3JVwmLjrSYpSVuhu0yeQYSlsZrdpK41UC48sY3kyxXC71pi6OVePbtHS1K3xh3FFmDd9srSchExi3IwzKzMw== + dependencies: + "@babel/runtime" "^7.17.2" + +"@polkadot/wasm-crypto-wasm@^5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto-wasm/-/wasm-crypto-wasm-5.1.1.tgz#dc371755a05fe93f87a2754a2bcf1ff42e4bb541" + integrity sha512-F9PZ30J2S8vUNl2oY7Myow5Xsx5z5uNVpnNlJwlmY8IXBvyucvyQ4HSdhJsrbs4W1BfFc0mHghxgp0FbBCnf/Q== + dependencies: + "@babel/runtime" "^7.17.8" + +"@polkadot/wasm-crypto@^4.0.2", "@polkadot/wasm-crypto@^4.4.1": + version "4.6.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto/-/wasm-crypto-4.6.1.tgz#12f8481e6f9021928435168beb0697d57ff573e9" + integrity sha512-2wEftBDxDG+TN8Ah6ogtvzjdZdcF0mAjU4UNNOfpmkBCxQYZOrAHB8HXhzo3noSsKkLX7PDX57NxvJ9OhoTAjw== + dependencies: + "@babel/runtime" "^7.17.2" + "@polkadot/wasm-crypto-asmjs" "^4.6.1" + "@polkadot/wasm-crypto-wasm" "^4.6.1" + +"@polkadot/wasm-crypto@^5.1.1": + version "5.1.1" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto/-/wasm-crypto-5.1.1.tgz#d1f8a0da631028ba904c374c1e8496ab3ba4636b" + integrity sha512-JCcAVfH8DhYuEyd4oX1ouByxhou0TvpErKn8kHjtzt7+tRoFi0nzWlmK4z49vszsV3JJgXxV81i10C0BYlwTcQ== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/wasm-crypto-asmjs" "^5.1.1" + "@polkadot/wasm-crypto-wasm" "^5.1.1" "@polkadot/wasm-crypto@^6.4.1": version "6.4.1" @@ -3318,6 +4807,18 @@ "@polkadot/wasm-crypto-wasm" "6.4.1" "@polkadot/wasm-util" "6.4.1" +"@polkadot/wasm-crypto@^7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-crypto/-/wasm-crypto-7.2.2.tgz#3c4b300c0997f4f7e2ddcdf8101d97fa1f5d1a7f" + integrity sha512-1ZY1rxUTawYm0m1zylvBMFovNIHYgG2v/XoASNp/EMG5c8FQIxCbhJRaTBA983GVq4lN/IAKREKEp9ZbLLqssA== + dependencies: + "@polkadot/wasm-bridge" "7.2.2" + "@polkadot/wasm-crypto-asmjs" "7.2.2" + "@polkadot/wasm-crypto-init" "7.2.2" + "@polkadot/wasm-crypto-wasm" "7.2.2" + "@polkadot/wasm-util" "7.2.2" + tslib "^2.6.1" + "@polkadot/wasm-util@6.4.1": version "6.4.1" resolved "https://registry.yarnpkg.com/@polkadot/wasm-util/-/wasm-util-6.4.1.tgz#74aecc85bec427a9225d9874685944ea3dc3ab76" @@ -3325,6 +4826,13 @@ dependencies: "@babel/runtime" "^7.20.6" +"@polkadot/wasm-util@7.2.2", "@polkadot/wasm-util@^7.2.1", "@polkadot/wasm-util@^7.2.2": + version "7.2.2" + resolved "https://registry.yarnpkg.com/@polkadot/wasm-util/-/wasm-util-7.2.2.tgz#f8aa62eba9a35466aa23f3c5634f3e8dbd398bbf" + integrity sha512-N/25960ifCc56sBlJZ2h5UBpEPvxBmMLgwYsl7CUuT+ea2LuJW9Xh8VHDN/guYXwmm92/KvuendYkEUykpm/JQ== + dependencies: + tslib "^2.6.1" + "@polkadot/x-bigint@10.4.2", "@polkadot/x-bigint@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-10.4.2.tgz#7eb2ec732259df48b5a00f07879a1331e05606ec" @@ -3333,7 +4841,23 @@ "@babel/runtime" "^7.20.13" "@polkadot/x-global" "10.4.2" -"@polkadot/x-fetch@^10.3.1", "@polkadot/x-fetch@^10.4.2": +"@polkadot/x-bigint@12.4.2", "@polkadot/x-bigint@^12.3.1": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-12.4.2.tgz#a63c9c926443231206726103d06c117ac2248de8" + integrity sha512-VRbkhdIf7CyWiUSyHemYi2fFWjBetUGyqpzsIHEclmzvqhKPfs7Kd2ZRdoXKU5QM56eD0sV2pyJxL34dv36/rw== + dependencies: + "@polkadot/x-global" "12.4.2" + tslib "^2.6.2" + +"@polkadot/x-bigint@8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-bigint/-/x-bigint-8.7.1.tgz#a496225def32e98c430c76b91c1579f48acf501a" + integrity sha512-ClkhgdB/KqcAKk3zA6Qw8wBL6Wz67pYTPkrAtImpvoPJmR+l4RARauv+MH34JXMUNlNb3aUwqN6lq2Z1zN+mJg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + +"@polkadot/x-fetch@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-fetch/-/x-fetch-10.4.2.tgz#bc6ba70de71a252472fbe36180511ed920e05f05" integrity sha512-Ubb64yaM4qwhogNP+4mZ3ibRghEg5UuCYRMNaCFoPgNAY8tQXuDKrHzeks3+frlmeH9YRd89o8wXLtWouwZIcw== @@ -3343,6 +4867,25 @@ "@types/node-fetch" "^2.6.2" node-fetch "^3.3.0" +"@polkadot/x-fetch@^12.3.1", "@polkadot/x-fetch@^12.3.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-fetch/-/x-fetch-12.4.2.tgz#c5b70aacf7491ec9e51b0b14a7dbda44e9f3a11c" + integrity sha512-QEtYIUO6q6LupYkOl+vRwAkbBSSNHbALG8Y3+L/tFDubeXQl79vCkJFmsjhLewpsDIwTFTPNOwzA0ZEyb+0HZw== + dependencies: + "@polkadot/x-global" "12.4.2" + node-fetch "^3.3.2" + tslib "^2.6.2" + +"@polkadot/x-fetch@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-fetch/-/x-fetch-8.7.1.tgz#dc866e7aa87c39b2e64c87f734b8fbaf1b9190e1" + integrity sha512-ygNparcalYFGbspXtdtZOHvNXZBkNgmNO+um9C0JYq74K5OY9/be93uyfJKJ8JcRJtOqBfVDsJpbiRkuJ1PRfg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + "@types/node-fetch" "^2.6.1" + node-fetch "^2.6.7" + "@polkadot/x-global@10.4.2", "@polkadot/x-global@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-10.4.2.tgz#5662366e3deda0b4c8f024b2d902fa838f9e60a4" @@ -3350,12 +4893,33 @@ dependencies: "@babel/runtime" "^7.20.13" -"@polkadot/x-global@^9.4.1": - version "9.7.2" - resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-9.7.2.tgz#9847fd1da13989f321ca621e85477ba70fd8d55a" - integrity sha512-3NN5JhjosaelaFWBJSlv9mb/gDAlt7RuZ8NKlOjB+LQHd9g6ZbnYi5wwjW+i/x/3E4IVbBx66uvWgNaw7IBrkg== +"@polkadot/x-global@12.4.2", "@polkadot/x-global@^12.3.1", "@polkadot/x-global@^12.3.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-12.4.2.tgz#cc6ed596698678f98a53547b9adb712eadfd5175" + integrity sha512-CwbjSt1Grmn56xAj+hGC8ZB0uZxMl92K+VkBH0KxjgcbAX/D24ZD/0ds8pAnUYrO4aYHYq2j2MAGVSMdHcMBAQ== + dependencies: + tslib "^2.6.2" + +"@polkadot/x-global@6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-6.11.1.tgz#c292b3825fea60e9b33fff1790323fc57de1ca5d" + integrity sha512-lsBK/e4KbjfieyRmnPs7bTiGbP/6EoCZz7rqD/voNS5qsJAaXgB9LR+ilubun9gK/TDpebyxgO+J19OBiQPIRw== + dependencies: + "@babel/runtime" "^7.14.6" + +"@polkadot/x-global@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-7.9.2.tgz#b272b0a3bedaad3bcbf075ec4682abe68cf2a850" + integrity sha512-JX5CrGWckHf1P9xKXq4vQCAuMUbL81l2hOWX7xeP8nv4caHEpmf5T1wD1iMdQBL5PFifo6Pg0V6/oZBB+bts7A== + dependencies: + "@babel/runtime" "^7.16.3" + +"@polkadot/x-global@8.7.1", "@polkadot/x-global@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-global/-/x-global-8.7.1.tgz#b972044125a4fe059f4aef7c15a4e22d18179095" + integrity sha512-WOgUor16IihgNVdiTVGAWksYLUAlqjmODmIK1cuWrLOZtV1VBomWcb3obkO9sh5P6iWziAvCB/i+L0vnTN9ZCA== dependencies: - "@babel/runtime" "^7.18.6" + "@babel/runtime" "^7.17.8" "@polkadot/x-randomvalues@10.4.2": version "10.4.2" @@ -3365,6 +4929,46 @@ "@babel/runtime" "^7.20.13" "@polkadot/x-global" "10.4.2" +"@polkadot/x-randomvalues@12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-randomvalues/-/x-randomvalues-12.4.2.tgz#399a7f831e465e6cd5aea64f8220693b07be86fa" + integrity sha512-HVlXRWY9RfN54RgfDroDy2itWmtTUtr119DfPl3wjnBf9i4wl/M+848OYlmCZCTpViTJrvWVSEJH9zVgchlNnw== + dependencies: + "@polkadot/x-global" "12.4.2" + tslib "^2.6.2" + +"@polkadot/x-randomvalues@6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-randomvalues/-/x-randomvalues-6.11.1.tgz#f006fa250c8e82c92ccb769976a45a8e7f3df28b" + integrity sha512-2MfUfGZSOkuPt7GF5OJkPDbl4yORI64SUuKM25EGrJ22o1UyoBnPOClm9eYujLMD6BfDZRM/7bQqqoLW+NuHVw== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/x-global" "6.11.1" + +"@polkadot/x-randomvalues@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-randomvalues/-/x-randomvalues-7.9.2.tgz#0c9bb7b48a0791c2a32e9605a31a5ce56fee621d" + integrity sha512-svQfG31yCXf6yVyIgP0NgCzEy7oc3Lw054ZspkaqjOivxYdrXaf5w3JSSUyM/MRjI2+nk+B/EyJoMYcfSwTfsQ== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/x-global" "7.9.2" + +"@polkadot/x-randomvalues@8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-randomvalues/-/x-randomvalues-8.7.1.tgz#b7cc358c2a6d20f7e7798d45d1d5c7ac8c9ab4f2" + integrity sha512-njt17MlfN6yNyNEti7fL12lr5qM6A1aSGkWKVuqzc7XwSBesifJuW4km5u6r2gwhXjH2eHDv9SoQ7WXu8vrrkg== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + +"@polkadot/x-rxjs@^6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-rxjs/-/x-rxjs-6.11.1.tgz#5454708b61da70eea05708611d9148fce9372498" + integrity sha512-zIciEmij7SUuXXg9g/683Irx6GogxivrQS2pgBir2DI/YZq+um52+Dqg1mqsEZt74N4KMTMnzAZAP6LJOBOMww== + dependencies: + "@babel/runtime" "^7.14.6" + rxjs "^6.6.7" + "@polkadot/x-textdecoder@10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-10.4.2.tgz#93202f3e5ad0e7f75a3fa02d2b8a3343091b341b" @@ -3373,6 +4977,38 @@ "@babel/runtime" "^7.20.13" "@polkadot/x-global" "10.4.2" +"@polkadot/x-textdecoder@12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-12.4.2.tgz#fea941decbe32d24aa3f951a511bf576dc104826" + integrity sha512-cyUoKwdSIiBXAaWnGdMYqnaNHc5NV9skQh/fITis3ufKKi3pMwxJ5IwhhfDZpuKDl/3fDXF40Z3fqtTeUnoRXA== + dependencies: + "@polkadot/x-global" "12.4.2" + tslib "^2.6.2" + +"@polkadot/x-textdecoder@6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-6.11.1.tgz#6cc314645681cc4639085c03b65328671c7f182c" + integrity sha512-DI1Ym2lyDSS/UhnTT2e9WutukevFZ0WGpzj4eotuG2BTHN3e21uYtYTt24SlyRNMrWJf5+TkZItmZeqs1nwAfQ== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/x-global" "6.11.1" + +"@polkadot/x-textdecoder@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-7.9.2.tgz#a78548e33efeb3a25f761fec9787b2bcae7f0608" + integrity sha512-wfwbSHXPhrOAl12QvlIOGNkMH/N/h8PId2ytIjvM/8zPPFB5Il6DWSFLtVapOGEpIFjEWbd5t8Td4pHBVXIEbg== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/x-global" "7.9.2" + +"@polkadot/x-textdecoder@8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-textdecoder/-/x-textdecoder-8.7.1.tgz#b706ef98d5a033d02c633009fb8dab4a4f9d7d55" + integrity sha512-ia0Ie2zi4VdQdNVD2GE2FZzBMfX//hEL4w546RMJfZM2LqDS674LofHmcyrsv5zscLnnRyCxZC1+J2dt+6MDIA== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + "@polkadot/x-textencoder@10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-10.4.2.tgz#cd2e6c8a66b0b400a73f0164e99c510fb5c83501" @@ -3381,6 +5017,38 @@ "@babel/runtime" "^7.20.13" "@polkadot/x-global" "10.4.2" +"@polkadot/x-textencoder@12.4.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-12.4.2.tgz#a717fe2701ade5648600ff3a34d4d1224d916ee3" + integrity sha512-xrcwx55B2K7j9CnVucGLFl0qd5sb7W5Ei6dOsWgDnZNjZPBqsx9jTBQSBv9HmyHE4GEnF4z0rpO0msy3S7Sj9Q== + dependencies: + "@polkadot/x-global" "12.4.2" + tslib "^2.6.2" + +"@polkadot/x-textencoder@6.11.1": + version "6.11.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-6.11.1.tgz#73e89da5b91954ae380042c19314c90472f59d9e" + integrity sha512-8ipjWdEuqFo+R4Nxsc3/WW9CSEiprX4XU91a37ZyRVC4e9R1bmvClrpXmRQLVcAQyhRvG8DKOOtWbz8xM+oXKg== + dependencies: + "@babel/runtime" "^7.14.6" + "@polkadot/x-global" "6.11.1" + +"@polkadot/x-textencoder@7.9.2": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-7.9.2.tgz#b32bfd6fbff8587c56452f58252a52d62bbcd5b9" + integrity sha512-A19wwYINuZwU2dUyQ/mMzB0ISjyfc4cISfL4zCMUAVgj7xVoXMYV2GfjNdMpA8Wsjch3su6pxLbtJ2wU03sRTQ== + dependencies: + "@babel/runtime" "^7.16.3" + "@polkadot/x-global" "7.9.2" + +"@polkadot/x-textencoder@8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-textencoder/-/x-textencoder-8.7.1.tgz#7820e30081e8e0a607c1c27b9e3486d82d1a723e" + integrity sha512-XDO0A27Xy+eJCKSxENroB8Dcnl+UclGG4ZBei+P/BqZ9rsjskUyd2Vsl6peMXAcsxwOE7g0uTvujoGM8jpKOXw== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + "@polkadot/x-ws@^10.4.2": version "10.4.2" resolved "https://registry.yarnpkg.com/@polkadot/x-ws/-/x-ws-10.4.2.tgz#4e9d88f37717570ccf942c6f4f63b06260f45025" @@ -3391,10 +5059,29 @@ "@types/websocket" "^1.0.5" websocket "^1.0.34" -"@polymathnetwork/polymesh-types@0.0.2": - version "0.0.2" - resolved "https://registry.yarnpkg.com/@polymathnetwork/polymesh-types/-/polymesh-types-0.0.2.tgz#a9f07bc9e1e659e59afa7a5409b2d91301b5fef9" - integrity sha512-wGexzpZ4IdrwReQGSH7ViCN+kyoKMQcQC5exATgeG+1cZxOtcbxp+1LWP9xTrnw7R5+PYWPzIl+f71gMkSDD5A== +"@polkadot/x-ws@^12.3.1", "@polkadot/x-ws@^12.3.2": + version "12.4.2" + resolved "https://registry.yarnpkg.com/@polkadot/x-ws/-/x-ws-12.4.2.tgz#675e2d7effd6cafebc43783484a6ae55afb58f20" + integrity sha512-dYUtpbPa/JNd94tPAM9iHMzhR8MZ4wtOPh8gvueQRRYC8ZYQ9NPwjbBImY2FRfx7wCG1tFLAR6OEw4ToLLJNsA== + dependencies: + "@polkadot/x-global" "12.4.2" + tslib "^2.6.2" + ws "^8.13.0" + +"@polkadot/x-ws@^8.7.1": + version "8.7.1" + resolved "https://registry.yarnpkg.com/@polkadot/x-ws/-/x-ws-8.7.1.tgz#501c63c575e04bba68bdc32448e2c9b692f0411e" + integrity sha512-Mt0tcNzGXyKnN3DQ06alkv+JLtTfXWu6zSypFrrKHSQe3u79xMQ1nSicmpT3gWLhIa8YF+8CYJXMrqaXgCnDhw== + dependencies: + "@babel/runtime" "^7.17.8" + "@polkadot/x-global" "8.7.1" + "@types/websocket" "^1.0.5" + websocket "^1.0.34" + +"@polymeshassociation/polymesh-types@5.4.1": + version "5.4.1" + resolved "https://registry.yarnpkg.com/@polymeshassociation/polymesh-types/-/polymesh-types-5.4.1.tgz#a65f80feb36bf2f5f7a6a0ea2c020d666fe4574a" + integrity sha512-M+bVH7TXPTj1gh9jZX5HV/lB306ABg7J0uEL6lXZoO0+u2GHprv/AfQRDpaKoy2PEcy3QrsXAg3NXwD2jhZP3w== "@reach/auto-id@0.16.0": version "0.16.0" @@ -4999,6 +6686,11 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@scure/base@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.0.0.tgz#109fb595021de285f05a7db6806f2f48296fcee7" + integrity sha512-gIVaYhUsy+9s58m/ETjSJVKHhKTBMmcRb9cEV5/5dwvfDlfORjKrFsDeDHWRrm6RjcPvCLZFwGJjAjLj1gg4HA== + "@scure/base@1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@scure/base/-/base-1.1.1.tgz#ebb651ee52ff84f420097055f4bf46cfba403938" @@ -5037,12 +6729,12 @@ "@polkadot/keyring" "^8.2.2" "@polkadot/types" "^7.2.1" -"@sora-substrate/type-definitions@1.12.4": - version "1.12.4" - resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-1.12.4.tgz#e4bfc1d5d58c20dd589cfcd73ab86f798684221f" - integrity sha512-G+s1DTKGfkncUXUPXQNNrbj/9ZnNxksEXBmqP/RQrmnfYE3C59P5Zkp+D98WsXobkWOnMxqBDlK+VbUQbvMoRA== +"@sora-substrate/type-definitions@1.17.16": + version "1.17.16" + resolved "https://registry.yarnpkg.com/@sora-substrate/type-definitions/-/type-definitions-1.17.16.tgz#1756734cc4ec6c3fedec7a4055fc86f0398cba1b" + integrity sha512-JRXpvBPSjV7MkI4GXBAqz/LL1Ji6AU7F/2MAadTWDDfc/GOFFdZ4cCHZxRFClh5azYjTP01VpWFuaeXn4eqgsA== dependencies: - "@open-web3/orml-type-definitions" "0.9.4-26" + "@open-web3/orml-type-definitions" "1.1.4" "@storybook/addon-actions@6.5.9", "@storybook/addon-actions@^6.5.9": version "6.5.9" @@ -5872,19 +7564,28 @@ regenerator-runtime "^0.13.7" resolve-from "^5.0.0" -"@subsocial/definitions@^0.7.9": - version "0.7.14" - resolved "https://registry.yarnpkg.com/@subsocial/definitions/-/definitions-0.7.14.tgz#1397f1ec806d60d9deb112b9f36d530400b711fe" - integrity sha512-dor5S6/tbY09n40e/dh7qFcqF9slMihOMDTXWBM5hTe8nS/Pf5Zp4/r9WiZxxYLoY2v5MlSqyJxjiSCjTxxjUw== +"@subsocial/definitions@0.8.13": + version "0.8.13" + resolved "https://registry.yarnpkg.com/@subsocial/definitions/-/definitions-0.8.13.tgz#5470fc503d574f8c85655202ba5fe1dbfbb0b43d" + integrity sha512-P6uCfkdsvlg3kqk+31UfvGFshZGBGtZqfemLVzpZIR6YNwXutKuII6oAwgWTDg36owjP6pHLCKxI5nDk89uKew== dependencies: "@polkadot/api" latest lodash.camelcase "^4.3.0" -"@substrate/connect-extension-protocol@^1.0.1": +"@substrate/connect-extension-protocol@^1.0.0", "@substrate/connect-extension-protocol@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@substrate/connect-extension-protocol/-/connect-extension-protocol-1.0.1.tgz#fa5738039586c648013caa6a0c95c43265dbe77d" integrity sha512-161JhCC1csjH3GE5mPLEd7HbWtwNSPJBg3p1Ksz9SFlTzj/bgEwudiRN2y5i0MoLGCIJRYKyKGMxVnd29PzNjg== +"@substrate/connect@0.7.0-alpha.0": + version "0.7.0-alpha.0" + resolved "https://registry.yarnpkg.com/@substrate/connect/-/connect-0.7.0-alpha.0.tgz#df605f4e808b58d146ad0272a79b2c4b870459a5" + integrity sha512-fvO7w++M8R95R/pGJFW9+cWOt8OYnnTfgswxtlPqSgzqX4tta8xcNQ51crC72FcL5agwSGkA1gc2/+eyTj7O8A== + dependencies: + "@substrate/connect-extension-protocol" "^1.0.0" + "@substrate/smoldot-light" "0.6.8" + eventemitter3 "^4.0.7" + "@substrate/connect@0.7.19": version "0.7.19" resolved "https://registry.yarnpkg.com/@substrate/connect/-/connect-0.7.19.tgz#7c879cb275bc7ac2fe9edbf797572d4ff8d8b86a" @@ -5894,6 +7595,24 @@ "@substrate/smoldot-light" "0.7.9" eventemitter3 "^4.0.7" +"@substrate/connect@0.7.26": + version "0.7.26" + resolved "https://registry.yarnpkg.com/@substrate/connect/-/connect-0.7.26.tgz#a0ee5180c9cb2f29250d1219a32f7b7e7dea1196" + integrity sha512-uuGSiroGuKWj1+38n1kY5HReer5iL9bRwPCzuoLtqAOmI1fGI0hsSI2LlNQMAbfRgr7VRHXOk5MTuQf5ulsFRw== + dependencies: + "@substrate/connect-extension-protocol" "^1.0.1" + eventemitter3 "^4.0.7" + smoldot "1.0.4" + +"@substrate/smoldot-light@0.6.8": + version "0.6.8" + resolved "https://registry.yarnpkg.com/@substrate/smoldot-light/-/smoldot-light-0.6.8.tgz#e626e25cd2386824f1164e7d7dda7258580c36e4" + integrity sha512-9lVwbG6wrtss0sd6013BJGe4WN4taujsGG49pwyt1Lj36USeL2Sb164TTUxmZF/g2NQEqDPwPROBdekQ2gFmgg== + dependencies: + buffer "^6.0.1" + pako "^2.0.4" + websocket "^1.0.32" + "@substrate/smoldot-light@0.7.9": version "0.7.9" resolved "https://registry.yarnpkg.com/@substrate/smoldot-light/-/smoldot-light-0.7.9.tgz#68449873a25558e547e9468289686ee228a9930f" @@ -5902,6 +7621,11 @@ pako "^2.0.4" ws "^8.8.1" +"@substrate/ss58-registry@^1.17.0", "@substrate/ss58-registry@^1.43.0": + version "1.43.0" + resolved "https://registry.yarnpkg.com/@substrate/ss58-registry/-/ss58-registry-1.43.0.tgz#93108e45cb7ef6d82560c153e3692c2aa1c711b3" + integrity sha512-USEkXA46P9sqClL7PZv0QFsit4S8Im97wchKG0/H/9q3AT/S76r40UHfCr4Un7eBJPE23f7fU9BZ0ITpP9MCsA== + "@substrate/ss58-registry@^1.38.0": version "1.38.0" resolved "https://registry.yarnpkg.com/@substrate/ss58-registry/-/ss58-registry-1.38.0.tgz#b50cb28c77a0375fbf33dd29b7b28ee32871af9f" @@ -6200,7 +7924,14 @@ resolved "https://registry.yarnpkg.com/@types/big.js/-/big.js-6.1.2.tgz#68a952b629a6aaa2b5855a2f63363d1e77f6dd91" integrity sha512-h24JIZ52rvSvi2jkpYDk2yLH99VzZoCJiSfDWwjst7TwJVuXN61XVCUlPCzRl7mxKEMsGf8z42Q+J4TZwU3z2w== -"@types/bn.js@^5.1.1": +"@types/bn.js@^4.11.6": + version "4.11.6" + resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-4.11.6.tgz#c306c70d9358aaea33cd4eda092a742b9505967c" + integrity sha512-pqr857jrp2kPuO9uRjZ3PwnJTjoQy+fcdxvBTvHm6dkmEL9q+hDD/2j/0ELOBPtPnS8LjCX0gI9nbl8lVkadpg== + dependencies: + "@types/node" "*" + +"@types/bn.js@^5.1.0", "@types/bn.js@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/bn.js/-/bn.js-5.1.1.tgz#b51e1b55920a4ca26e9285ff79936bbdec910682" integrity sha512-qNrYbZqMx0uJAfKnKclPh+dTwK33KfLHYqtyODwd5HnXOjnkhc4qgn3BrK6RWyGZm5+sIFE7Q7Vz6QQtJB7w7g== @@ -6241,11 +7972,6 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw== -"@types/events@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" - integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== - "@types/glob@*", "@types/glob@^7.1.1": version "7.2.0" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb" @@ -6376,6 +8102,14 @@ "@types/node" "*" form-data "^3.0.0" +"@types/node-fetch@^2.6.1": + version "2.6.4" + resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.4.tgz#1bc3a26de814f6bf466b25aeb1473fa1afe6a660" + integrity sha512-1ZX9fcN4Rvkvgv4E6PAY5WXUFWFcRWxZa3EW83UjycOB9ljJCedb2CupIP4RZMEwF/M3eTcCihbBRgwtGbg5Rg== + dependencies: + "@types/node" "*" + form-data "^3.0.0" + "@types/node@*", "@types/node@>=12": version "18.7.5" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.5.tgz#f1c1d4b7d8231c0278962347163656f9c36f3e83" @@ -6568,6 +8302,11 @@ "@types/react" "*" csstype "^3.0.2" +"@types/stylis@^4.0.2": + version "4.2.0" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b" + integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw== + "@types/tapable@^1", "@types/tapable@^1.0.5": version "1.0.8" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310" @@ -6592,10 +8331,10 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d" integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ== -"@types/uuid@^8.3.4": - version "8.3.4" - resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc" - integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw== +"@types/uuid@^9.0.2": + version "9.0.3" + resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.3.tgz#6cdd939b4316b4f81625de9f06028d848c4a1533" + integrity sha512-taHQQH/3ZyI3zP8M/puluDEIEvtQHVYcC6y3N8ijFtAd28+Ey/G4sg1u2gB01S8MwybLOKAp9/yCMu/uR5l3Ug== "@types/webpack-env@^1.16.0", "@types/webpack-env@^1.17.0": version "1.17.0" @@ -6756,20 +8495,25 @@ "@typescript-eslint/types" "4.33.0" eslint-visitor-keys "^2.0.0" -"@unique-nft/opal-testnet-types@930.34.0": - version "930.34.0" - resolved "https://registry.yarnpkg.com/@unique-nft/opal-testnet-types/-/opal-testnet-types-930.34.0.tgz#e4274976ebc9614dbec6c1a074674a3620eacb6f" - integrity sha512-6N5MQC5o4V5J0PZ/JmhRfYOtJTSpCjxxM1pdGysh6aIu/rSey8ELa/9BnGwLIZsOPxW77PKwnt7NIRc01Sze3g== +"@unique-nft/opal-testnet-types@942.57.0": + version "942.57.0" + resolved "https://registry.yarnpkg.com/@unique-nft/opal-testnet-types/-/opal-testnet-types-942.57.0.tgz#fdd64ca04d44b263e48816ee7d14fc44d6b78502" + integrity sha512-VmVDQQmIQn3xQgdkmNov3Ja6yMQlZRIIBkPcIm+eKuX5LeldaBTW5YZJfXjGF9Q18PkoFTSc38QmrfBC+x8D8g== + +"@unique-nft/quartz-mainnet-types@942.57.0": + version "942.57.0" + resolved "https://registry.yarnpkg.com/@unique-nft/quartz-mainnet-types/-/quartz-mainnet-types-942.57.0.tgz#a33018bd54325b78d2edd34fdec3fb283b67ed9d" + integrity sha512-Tg6VuIIJt9uEhauEOjw5vpXX37B56f6IImtihOLnoyHmHt83LDTWI78YyD8Wph3A///ixexNfQj4VbchFmQRlA== -"@unique-nft/quartz-mainnet-types@930.34.0": - version "930.34.0" - resolved "https://registry.yarnpkg.com/@unique-nft/quartz-mainnet-types/-/quartz-mainnet-types-930.34.0.tgz#d99a744b10575533441a0ca13f855eeca45a9047" - integrity sha512-YwJ3h7Q0crnvGsYfBXjxtPIpQnB9T5JY1LLAapLGvOO3A0iA1PWbSiqAgOdjZTt4zivYm3IbdhxQhyyY6d5jLA== +"@unique-nft/sapphire-mainnet-types@942.57.0": + version "942.57.0" + resolved "https://registry.yarnpkg.com/@unique-nft/sapphire-mainnet-types/-/sapphire-mainnet-types-942.57.0.tgz#371e8c8c74cd92d33e7b2bc1cb61e132f529cc18" + integrity sha512-JopqrlUILDvbfRZdg3oF1y40rHUUZt42hNXHTGejAGLSRQIRyfZOJ8fIVFb+WmJLNbbgefnW/OdlFk2Hvqwm8w== -"@unique-nft/unique-mainnet-types@930.33.0": - version "930.33.0" - resolved "https://registry.yarnpkg.com/@unique-nft/unique-mainnet-types/-/unique-mainnet-types-930.33.0.tgz#196bbe704882ad826b709c5ec9cbbb8067e456ee" - integrity sha512-KlliDzrwcyl1igi/rjltue/T6DZQP5yAijcFzWtCsKfLzkCPxcplzYgd5S+VKRoAFrndOMVXleXTUgpPSYiL9Q== +"@unique-nft/unique-mainnet-types@941.56.0": + version "941.56.0" + resolved "https://registry.yarnpkg.com/@unique-nft/unique-mainnet-types/-/unique-mainnet-types-941.56.0.tgz#77859f77f10a58c57ec11d0d7a01c0a04a98a4c1" + integrity sha512-bkYPdaRQ2mN8QgrWLi7fREjEbUquCATR8vYnBP8ISXc1lp+N6zHYb0XkIloSn6qoDOyfOlXk61JzDjUSoEKTeQ== "@uphold/request-logger@^2.0.0": version "2.0.0" @@ -7059,10 +8803,10 @@ resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d" integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ== -"@zeitgeistpm/type-defs@0.10.0": - version "0.10.0" - resolved "https://registry.yarnpkg.com/@zeitgeistpm/type-defs/-/type-defs-0.10.0.tgz#7f551f949b45b082541a254a9845ab15b2ff9148" - integrity sha512-nQBdyRbkIopPOVjRHk9c/RBWiQI6iYE8fs5rmtSNCXm6IxoXssk/1PtWE+UxXXq9mco7rPao9nJMeYXJ1Ro2kg== +"@zeitgeistpm/type-defs@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@zeitgeistpm/type-defs/-/type-defs-1.0.0.tgz#cea874444a9d2714078dbc20f5474a08ce299328" + integrity sha512-dtjNlJSb8ELz87aTD6jqKKfO7kY4HFYzSmDk9JrzHLv+w/JKtG+aLz+WImL6MSaF1MjDE1tm28dj980Zn+nfGA== "@zeroio/type-definitions@0.0.14": version "0.0.14" @@ -7779,6 +9523,15 @@ babel-plugin-polyfill-corejs2@^0.3.0: "@babel/helper-define-polyfill-provider" "^0.3.1" semver "^6.1.1" +babel-plugin-polyfill-corejs2@^0.4.5: + version "0.4.5" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c" + integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg== + dependencies: + "@babel/compat-data" "^7.22.6" + "@babel/helper-define-polyfill-provider" "^0.4.2" + semver "^6.3.1" + babel-plugin-polyfill-corejs3@^0.1.0: version "0.1.7" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz#80449d9d6f2274912e05d9e182b54816904befd0" @@ -7795,6 +9548,14 @@ babel-plugin-polyfill-corejs3@^0.5.0: "@babel/helper-define-polyfill-provider" "^0.3.1" core-js-compat "^3.21.0" +babel-plugin-polyfill-corejs3@^0.8.3: + version "0.8.3" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.3.tgz#b4f719d0ad9bb8e0c23e3e630c0c8ec6dd7a1c52" + integrity sha512-z41XaniZL26WLrvjy7soabMXrfPWARN25PZoriDEiLMxAp50AUW3t35BGQUMg5xK3UrpVTtagIDklxYa+MhiNA== + dependencies: + "@babel/helper-define-polyfill-provider" "^0.4.2" + core-js-compat "^3.31.0" + babel-plugin-polyfill-regenerator@^0.3.0: version "0.3.1" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990" @@ -7802,6 +9563,13 @@ babel-plugin-polyfill-regenerator@^0.3.0: dependencies: "@babel/helper-define-polyfill-provider" "^0.3.1" +babel-plugin-polyfill-regenerator@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326" + integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA== + dependencies: + "@babel/helper-define-polyfill-provider" "^0.4.2" + babel-plugin-react-docgen@^4.1.0, babel-plugin-react-docgen@^4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz#7cc8e2f94e8dc057a06e953162f0810e4e72257b" @@ -7916,14 +9684,14 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== -base-x@^3.0.2: +base-x@^3.0.2, base-x@^3.0.8: version "3.0.9" resolved "https://registry.yarnpkg.com/base-x/-/base-x-3.0.9.tgz#6349aaabb58526332de9f60995e548a53fe21320" integrity sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ== dependencies: safe-buffer "^5.0.1" -base64-js@^1.0.2, base64-js@^1.3.1: +base64-js@^1.0.2, base64-js@^1.3.1, base64-js@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== @@ -8095,12 +9863,17 @@ bl@^5.0.0: inherits "^2.0.4" readable-stream "^3.4.0" +blakejs@^1.1.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.2.1.tgz#5057e4206eadb4a97f7c0b6e197a505042fc3814" + integrity sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ== + bluebird@^3.3.5, bluebird@^3.5.5: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== -bn.js@4.12.0, bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.8, bn.js@^4.11.9, bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.1, bn.js@~5.2.0: +bn.js@4.12.0, bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.8, bn.js@^4.11.9, bn.js@^4.12.0, bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1, bn.js@~5.2.0: version "4.12.0" resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88" integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA== @@ -8310,6 +10083,16 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4 node-releases "^2.0.3" picocolors "^1.0.0" +browserslist@^4.21.10, browserslist@^4.21.9: + version "4.21.10" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" + integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ== + dependencies: + caniuse-lite "^1.0.30001517" + electron-to-chromium "^1.4.477" + node-releases "^2.0.13" + update-browserslist-db "^1.0.11" + bs58@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a" @@ -8357,7 +10140,7 @@ buffer@^4.3.0: ieee754 "^1.1.4" isarray "^1.0.0" -buffer@^6.0.3: +buffer@^6.0.1, buffer@^6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6" integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA== @@ -8575,7 +10358,7 @@ camelcase@^2.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f" integrity sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw== -camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0: +camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0, camelcase@^6.2.1: version "6.3.0" resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== @@ -8600,10 +10383,10 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001332: - version "1.0.30001342" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz#87152b1e3b950d1fbf0093e23f00b6c8e8f1da96" - integrity sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001517: + version "1.0.30001534" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz" + integrity sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q== canvas-renderer@~2.2.0: version "2.2.1" @@ -8751,7 +10534,7 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2: +chokidar@^3.4.0, chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.2: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -8999,7 +10782,7 @@ color-support@^1.1.2: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color@^3.0.0, color@^3.2.1: +color@^3.0.0: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA== @@ -9015,6 +10798,11 @@ color@^4.0.1: color-convert "^2.0.1" color-string "^1.9.0" +colord@^2.9.3: + version "2.9.3" + resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" + integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== + colorette@^2.0.16: version "2.0.16" resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da" @@ -9042,7 +10830,7 @@ commander@^2.19.0, commander@^2.20.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -commander@^4.1.1: +commander@^4.0.1, commander@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== @@ -9229,6 +11017,11 @@ convert-source-map@^0.3.3: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190" integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA= +convert-source-map@^1.1.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.8.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" @@ -9278,6 +11071,13 @@ core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.8.1: browserslist "^4.19.1" semver "7.0.0" +core-js-compat@^3.31.0: + version "3.32.2" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.2.tgz#8047d1a8b3ac4e639f0d4f66d4431aa3b16e004c" + integrity sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ== + dependencies: + browserslist "^4.21.10" + core-js-pure@^3.20.2, core-js-pure@^3.8.1: version "3.24.1" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3" @@ -9411,13 +11211,20 @@ cross-env@^7.0.3: dependencies: cross-spawn "^7.0.1" -cross-fetch@^3.0.6, cross-fetch@^3.1.4, cross-fetch@^3.1.5: +cross-fetch@^3.0.6, cross-fetch@^3.1.5: version "3.1.5" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f" integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw== dependencies: node-fetch "2.6.7" +cross-fetch@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983" + integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g== + dependencies: + node-fetch "^2.6.12" + cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3: version "7.0.3" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" @@ -9587,6 +11394,15 @@ css-to-react-native@^3.0.0: css-color-keywords "^1.0.0" postcss-value-parser "^4.0.2" +css-to-react-native@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" + integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -9745,6 +11561,16 @@ csstype@^3.0.2, csstype@^3.0.6: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== +csstype@^3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" + integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + +cuint@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b" + integrity sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -10356,7 +12182,12 @@ electron-to-chromium@^1.3.564, electron-to-chromium@^1.4.118: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.138.tgz#3ec41ca589aaf505dfe2034fde913329af801730" integrity sha512-IOyp2Seq3w4QLln+yZWcMF3VXhhduz4bwg9gfI+CnP5TkzwNXQ8FCZuwwPsnes73AfWdf5J2n2OXdUwDUspDPQ== -elliptic@6.5.4, elliptic@^6.4.0, elliptic@^6.5.3: +electron-to-chromium@^1.4.477: + version "1.4.515" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.515.tgz#f5fec9662106ac5752894af221606cf4db443e70" + integrity sha512-VTq6vjk3kCfG2qdzQRd/i9dIyVVm0dbtZIgFzrLgfB73mXDQT2HPKVRc1EoZcAVUv9XhXAu08DWqJuababdGGg== + +elliptic@6.5.4, elliptic@^6.4.0, elliptic@^6.5.3, elliptic@^6.5.4: version "6.5.4" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb" integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ== @@ -10529,7 +12360,7 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" -es5-ext@^0.10.35, es5-ext@^0.10.46, es5-ext@^0.10.50, es5-ext@^0.10.53, es5-ext@~0.10.14, es5-ext@~0.10.2, es5-ext@~0.10.46: +es5-ext@^0.10.35, es5-ext@^0.10.50: version "0.10.62" resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5" integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA== @@ -10565,16 +12396,6 @@ es6-symbol@^3.1.1, es6-symbol@^3.1.3: d "^1.0.1" ext "^1.1.2" -es6-weak-map@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.3.tgz#b6da1f16cc2cc0d9be43e6bdbfc5e7dfcdf31d53" - integrity sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA== - dependencies: - d "1" - es5-ext "^0.10.46" - es6-iterator "^2.0.3" - es6-symbol "^3.1.1" - escalade@^3.0.2, escalade@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" @@ -10928,7 +12749,7 @@ ethereum-blockies-base64@^1.0.2: dependencies: pnglib "0.0.1" -ethers@^5.6.2, ethers@~5.7.0: +ethers@~5.7.0: version "5.7.2" resolved "https://registry.yarnpkg.com/ethers/-/ethers-5.7.2.tgz#3a7deeabbb8c030d4126b24f84e525466145872e" integrity sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg== @@ -10964,14 +12785,6 @@ ethers@^5.6.2, ethers@~5.7.0: "@ethersproject/web" "5.7.1" "@ethersproject/wordlists" "5.7.0" -event-emitter@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39" - integrity sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA== - dependencies: - d "1" - es5-ext "~0.10.14" - eventemitter3@^4.0.0, eventemitter3@^4.0.7: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" @@ -10982,6 +12795,11 @@ eventemitter3@^5.0.0: resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.0.tgz#084eb7f5b5388df1451e63f4c2aafd71b217ccb3" integrity sha512-riuVbElZZNXLeLEoprfNYoDSwTBRR44X3mnhdI1YcnENpWTCsTTVZ2zFuqQcpoyqPQIUXdiPEU0ECAq0KQRaHg== +eventemitter3@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" + integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== + events@^3.0.0, events@^3.2.0: version "3.3.0" resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400" @@ -11680,6 +13498,11 @@ fs-monkey@1.0.3: resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3" integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q== +fs-readdir-recursive@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" + integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA== + fs-write-stream-atomic@^1.0.8: version "1.0.10" resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9" @@ -11927,7 +13750,7 @@ glob@^6.0.1: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7: +glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7, glob@^7.2.0: version "7.2.3" resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -12274,7 +14097,7 @@ hash-base@^3.0.0: readable-stream "^3.6.0" safe-buffer "^5.2.0" -hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3: +hash.js@1.1.7, hash.js@^1.0.0, hash.js@^1.0.3, hash.js@^1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42" integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA== @@ -12899,6 +14722,11 @@ ip-regex@^2.1.0: resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9" integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk= +ip-regex@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5" + integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q== + ip@^1.1.0, ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" @@ -13297,11 +15125,6 @@ is-potential-custom-element-name@^1.0.1: resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ== -is-promise@^2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1" - integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ== - is-regex@^1.0.4, is-regex@^1.1.2, is-regex@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" @@ -14078,7 +15901,7 @@ js-cookie@^2.2.1: resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8" integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ== -js-sha3@0.8.0: +js-sha3@0.8.0, js-sha3@^0.8.0: version "0.8.0" resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840" integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q== @@ -14210,6 +16033,11 @@ json5@^2.1.2, json5@^2.1.3: dependencies: minimist "^1.2.5" +json5@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== + jsonfile@^2.1.0: version "2.4.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" @@ -14665,13 +16493,6 @@ lru-cache@~7.8.2: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.8.2.tgz#db4d3bbcc05b2e7a2ae063f57fdb42d8d45f1773" integrity sha512-tVtvt+EqoUgjtIPD3rXSJCSf5izSRJShgnzUeK59T+wxZ9LrFEP3GxhX/Mhf8Rl7kk4ngd4vZaV+5sEibhvQ+A== -lru-queue@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3" - integrity sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ== - dependencies: - es5-ext "~0.10.2" - lz-string@^1.4.4: version "1.5.0" resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941" @@ -14825,20 +16646,6 @@ memfs@^3.1.2: dependencies: fs-monkey "1.0.3" -memoizee@^0.4.15: - version "0.4.15" - resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72" - integrity sha512-UBWmJpLZd5STPm7PMUlOw/TSy972M+z8gcyQ5veOnSDRREz/0bmpyTfKt3/51DhEBqCZQn1udM/5flcSPYhkdQ== - dependencies: - d "^1.0.1" - es5-ext "^0.10.53" - es6-weak-map "^2.0.3" - event-emitter "^0.3.5" - is-promise "^2.2.2" - lru-queue "^0.1.0" - next-tick "^1.1.0" - timers-ext "^0.1.7" - memoizerific@^1.11.3: version "1.11.3" resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a" @@ -14920,6 +16727,11 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= +micro-base@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/micro-base/-/micro-base-0.9.0.tgz#09cfe20285bec0ea97f41dc3d10e3fba3d0266ee" + integrity sha512-4+tOMKidYT5nQ6/UNmYrGVO5PMcnJdfuR4NC8HK8s2H61B4itOhA9yrsjBdqGV7ecdtej36x3YSIfPLRmPrspg== + microevent.ts@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0" @@ -15152,15 +16964,15 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mobx-utils@^5.6.2: - version "5.6.2" - resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-5.6.2.tgz#4858acbdb03f0470e260854f87e8c2ba916ebaec" - integrity sha512-a/WlXyGkp6F12b01sTarENpxbmlRgPHFyR1Xv2bsSjQBm5dcOtd16ONb40/vOqck8L99NHpI+C9MXQ+SZ8f+yw== +mkdirp@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50" + integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg== -mobx@^5.15.7: - version "5.15.7" - resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.15.7.tgz#b9a5f2b6251f5d96980d13c78e9b5d8d4ce22665" - integrity sha512-wyM3FghTkhmC+hQjyPGGFdpehrcX1KOXsDuERhfK2YbJemkUhEB+6wzEN639T21onxlfYBmriA1PFnvxTUhcKw== +mock-socket@^9.1.2: + version "9.3.1" + resolved "https://registry.yarnpkg.com/mock-socket/-/mock-socket-9.3.1.tgz#24fb00c2f573c84812aa4a24181bb025de80cc8e" + integrity sha512-qxBgB7Qa2sEQgHFjj0dSigq7fX4k6Saisd5Nelwp2q8mlbAFh5dHV9JTTlF8viYJLSSWgMCZFUom8PJcMNBoJw== mock-socket@^9.2.1: version "9.2.1" @@ -15177,12 +16989,12 @@ moment@^2.10.2, moment@^2.19.3: resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== -moonbeam-types-bundle@2.0.9: - version "2.0.9" - resolved "https://registry.yarnpkg.com/moonbeam-types-bundle/-/moonbeam-types-bundle-2.0.9.tgz#32d130bc7f2aa3d2e6bad34643764ba2ff751e92" - integrity sha512-0HjdhYFfdfgFqpjDgdO04fijoTtJvjFVgZJST4LZhepQ8ciMfW5XWzuedVyIW/bRDB3NelyI9f3qZFsjq9s0sA== +moonbeam-types-bundle@2.0.10: + version "2.0.10" + resolved "https://registry.yarnpkg.com/moonbeam-types-bundle/-/moonbeam-types-bundle-2.0.10.tgz#fddd2f174f4e60616fa5b3f9871d0bae7e24ecc0" + integrity sha512-QDk/ktioLqDQCOLUu/+FyyF3UYWdKOqqa6q1vwI75pdKBg5elNpRXugEC1irzkLolTanvMRc2rO+qarT9ijjyg== dependencies: - "@polkadot/api" "^9.4.2" + "@polkadot/api" "^9.14.1" typescript "^4.7.4" move-concurrently@^1.0.1: @@ -15285,6 +17097,11 @@ nanoid@^3.3.1: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== +nanoid@^3.3.6: + version "3.3.6" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" + integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -15346,7 +17163,7 @@ new-github-release-url@2.0.0: dependencies: type-fest "^2.5.1" -next-tick@1, next-tick@^1.1.0: +next-tick@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ== @@ -15364,6 +17181,16 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +nock@^13.2.4, nock@^13.3.1: + version "13.3.3" + resolved "https://registry.yarnpkg.com/nock/-/nock-13.3.3.tgz#179759c07d3f88ad3e794ace885629c1adfd3fe7" + integrity sha512-z+KUlILy9SK/RjpeXDiDUEAq4T94ADPHE3qaRkf66mpEhzc/ytOMm3Bwdrbq6k1tMWkbdujiKim3G2tfQARuJw== + dependencies: + debug "^4.1.0" + json-stringify-safe "^5.0.1" + lodash "^4.17.21" + propagate "^2.0.0" + nock@^13.3.0: version "13.3.0" resolved "https://registry.yarnpkg.com/nock/-/nock-13.3.0.tgz#b13069c1a03f1ad63120f994b04bfd2556925768" @@ -15409,6 +17236,13 @@ node-fetch@3.2.10: fetch-blob "^3.1.4" formdata-polyfill "^4.0.10" +node-fetch@^2.6.12: + version "2.7.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d" + integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A== + dependencies: + whatwg-url "^5.0.0" + node-fetch@^3.3.0: version "3.3.1" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.1.tgz#b3eea7b54b3a48020e46f4f88b9c5a7430d20b2e" @@ -15418,6 +17252,15 @@ node-fetch@^3.3.0: fetch-blob "^3.1.4" formdata-polyfill "^4.0.10" +node-fetch@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b" + integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA== + dependencies: + data-uri-to-buffer "^4.0.0" + fetch-blob "^3.1.4" + formdata-polyfill "^4.0.10" + node-forge@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3" @@ -15479,6 +17322,11 @@ node-releases@^1.1.61: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.77.tgz#50b0cfede855dd374e7585bf228ff34e57c1c32e" integrity sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ== +node-releases@^2.0.13: + version "2.0.13" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" + integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== + node-releases@^2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666" @@ -17103,6 +18951,15 @@ postcss@^8.1.0, postcss@^8.3.5: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.23: + version "8.4.29" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd" + integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw== + dependencies: + nanoid "^3.3.6" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -18118,6 +19975,13 @@ regenerate-unicode-properties@^10.0.1: dependencies: regenerate "^1.4.2" +regenerate-unicode-properties@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c" + integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ== + dependencies: + regenerate "^1.4.2" + regenerate@^1.4.2: version "1.4.2" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" @@ -18133,6 +19997,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4, regenerator-runtime@^ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.14.2: version "0.14.5" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4" @@ -18140,6 +20009,13 @@ regenerator-transform@^0.14.2: dependencies: "@babel/runtime" "^7.8.4" +regenerator-transform@^0.15.2: + version "0.15.2" + resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4" + integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg== + dependencies: + "@babel/runtime" "^7.8.4" + regex-not@^1.0.0, regex-not@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c" @@ -18178,6 +20054,18 @@ regexpu-core@^5.0.1: unicode-match-property-ecmascript "^2.0.0" unicode-match-property-value-ecmascript "^2.0.0" +regexpu-core@^5.3.1: + version "5.3.2" + resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b" + integrity sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ== + dependencies: + "@babel/regjsgen" "^0.8.0" + regenerate "^1.4.2" + regenerate-unicode-properties "^10.1.0" + regjsparser "^0.9.1" + unicode-match-property-ecmascript "^2.0.0" + unicode-match-property-value-ecmascript "^2.1.0" + registry-auth-token@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-5.0.1.tgz#5e6cd106e6c251135a046650c58476fc03e92833" @@ -18204,6 +20092,13 @@ regjsparser@^0.8.2: dependencies: jsesc "~0.5.0" +regjsparser@^0.9.1: + version "0.9.1" + resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.9.1.tgz#272d05aa10c7c1f67095b1ff0addae8442fc5709" + integrity sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ== + dependencies: + jsesc "~0.5.0" + regtest-client@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/regtest-client/-/regtest-client-0.2.0.tgz#815b1eaab4b12b66d25ee35137a970ff48c0ee0c" @@ -18666,7 +20561,21 @@ run-queue@^1.0.0, run-queue@^1.0.3: dependencies: aproba "^1.1.1" -rxjs@^7.2.0, rxjs@^7.5.1, rxjs@^7.5.6, rxjs@^7.5.7, rxjs@^7.8.0: +rxjs@^6.6.7: + version "6.6.7" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" + integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ== + dependencies: + tslib "^1.9.0" + +rxjs@^7.4.0, rxjs@^7.5.5, rxjs@^7.8.0, rxjs@^7.8.1: + version "7.8.1" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== + dependencies: + tslib "^2.1.0" + +rxjs@^7.5.1, rxjs@^7.5.6: version "7.8.0" resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.0.tgz#90a938862a82888ff4c7359811a595e14e1e09a4" integrity sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg== @@ -18812,6 +20721,11 @@ scrypt-js@3.0.1: resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312" integrity sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA== +scryptsy@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/scryptsy/-/scryptsy-2.1.0.tgz#8d1e8d0c025b58fdd25b6fa9a0dc905ee8faa790" + integrity sha512-1CdSqHQowJBnMAFyPEBRfqag/YP9OF394FV+4YREIJX4ljD7OxvQRDayyoyyCk+senRjSkP6VnUNQmVQqB6g7w== + select-hose@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca" @@ -18863,6 +20777,11 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: version "7.3.8" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" @@ -19115,6 +21034,14 @@ smart-buffer@^4.2.0: resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae" integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg== +smoldot@1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/smoldot/-/smoldot-1.0.4.tgz#e4c38cedad68d699a11b5b9ce72bb75c891bfd98" + integrity sha512-N3TazI1C4GGrseFH/piWyZCCCRJTRx2QhDfrUKRT4SzILlW5m8ayZ3QTKICcz1C/536T9cbHHJyP7afxI6Mi1A== + dependencies: + pako "^2.0.4" + ws "^8.8.1" + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -19722,7 +21649,7 @@ style-to-object@0.3.0, style-to-object@^0.3.0: dependencies: inline-style-parser "0.1.1" -styled-components@^5, styled-components@^5.3.5, styled-components@^5.3.6: +styled-components@^5.3.5: version "5.3.5" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4" integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg== @@ -19738,6 +21665,31 @@ styled-components@^5, styled-components@^5.3.5, styled-components@^5.3.6: shallowequal "^1.1.0" supports-color "^5.5.0" +styled-components@^6.0.7: + version "6.0.7" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.7.tgz#1cf4a5e6b6181b29f941934df54af19b7ef05ab0" + integrity sha512-xIwWuiRMYR43mskVsW9MGTRjSo7ol4bcVjT595fGUp3OLBJOlOgaiKaxsHdC4a2HqWKqKnh0CmcRbk5ogyDjTg== + dependencies: + "@babel/cli" "^7.21.0" + "@babel/core" "^7.21.0" + "@babel/helper-module-imports" "^7.18.6" + "@babel/plugin-external-helpers" "^7.18.6" + "@babel/plugin-proposal-class-properties" "^7.18.6" + "@babel/plugin-proposal-object-rest-spread" "^7.20.7" + "@babel/preset-env" "^7.20.2" + "@babel/preset-react" "^7.18.6" + "@babel/preset-typescript" "^7.21.0" + "@babel/traverse" "^7.21.2" + "@emotion/is-prop-valid" "^1.2.1" + "@emotion/unitless" "^0.8.0" + "@types/stylis" "^4.0.2" + css-to-react-native "^3.2.0" + csstype "^3.1.2" + postcss "^8.4.23" + shallowequal "^1.1.0" + stylis "^4.3.0" + tslib "^2.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" @@ -19752,6 +21704,11 @@ stylis@^4.0.6: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== +stylis@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c" + integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== + supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -20032,14 +21989,6 @@ timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" -timers-ext@^0.1.7: - version "0.1.7" - resolved "https://registry.yarnpkg.com/timers-ext/-/timers-ext-0.1.7.tgz#6f57ad8578e07a3fb9f91d9387d65647555e25c6" - integrity sha512-b85NUNzTSdodShTIbky6ZF02e8STtVVfD+fu4aXXShEELpozH+bCpJLYMPZbsABN2wDH7fJpqIoXxJpzbf0NqQ== - dependencies: - es5-ext "~0.10.46" - next-tick "1" - timsort@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" @@ -20281,7 +22230,7 @@ tslib@2.4.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ== -tslib@^1.10.0, tslib@^1.8.1: +tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== @@ -20291,6 +22240,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4 resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e" integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA== +tslib@^2.5.0, tslib@^2.5.3, tslib@^2.6.1, tslib@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== + tsutils@^3.17.1, tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" @@ -20470,6 +22424,11 @@ unicode-match-property-value-ecmascript@^2.0.0: resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.0.0.tgz#1a01aa57247c14c568b89775a54938788189a714" integrity sha512-7Yhkc0Ye+t4PNYzOGKedDhXbYIBe1XEQYQxOPyhcXNMJ0WCABqqj6ckydd6pWRZTHV4GuCPKdBAUiMc60tsKVw== +unicode-match-property-value-ecmascript@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz#cb5fffdcd16a05124f5a4b0bf7c3770208acbbe0" + integrity sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA== + unicode-property-aliases-ecmascript@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8" @@ -20646,6 +22605,14 @@ upath@^1.1.1, upath@^1.1.2, upath@^1.2.0: resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg== +update-browserslist-db@^1.0.11: + version "1.0.11" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" + integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== + dependencies: + escalade "^3.1.1" + picocolors "^1.0.0" + update-notifier@6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-6.0.2.tgz#a6990253dfe6d5a02bd04fbb6a61543f55026b60" @@ -20782,6 +22749,11 @@ uuid@^8.3.0, uuid@^8.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +uuid@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" + integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + v8-compile-cache-lib@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz#0582bcb1c74f3a2ee46487ceecf372e46bce53e8" @@ -21221,7 +23193,7 @@ websocket-extensions@>=0.1.1: resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42" integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg== -websocket@^1.0.34: +websocket@^1.0.32, websocket@^1.0.34: version "1.0.34" resolved "https://registry.yarnpkg.com/websocket/-/websocket-1.0.34.tgz#2bdc2602c08bf2c82253b730655c0ef7dcab3111" integrity sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ== @@ -21591,6 +23563,11 @@ ws@^7.3.1, ws@^7.4.6: resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67" integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A== +ws@^8.13.0: + version "8.13.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" + integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== + ws@^8.2.3, ws@^8.8.1: version "8.9.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.9.0.tgz#2a994bb67144be1b53fe2d23c53c028adeb7f45e" @@ -21628,6 +23605,13 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1: resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== +xxhashjs@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/xxhashjs/-/xxhashjs-0.2.2.tgz#8a6251567621a1c46a5ae204da0249c7f8caa9d8" + integrity sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw== + dependencies: + cuint "^0.2.2" + y18n@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf" From 9555d33cd60eae71daca004ba3278c6a1a99b7f1 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 2 Oct 2023 12:36:23 +0100 Subject: [PATCH 30/58] [release] Kintsugi 2.39.1 (#1585) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 * api: refactor the market data api (#1569) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * Tom/fix prices (#1571) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * wip: add log * wip: hardcode value to run against market data api * wip: try setting asset name * fix: casing * chore: add vKSM ids * fix: handle VDOT and VKSM * typo: quotation marks * chore: fix switch statement and remove console log * fix: revert change --------- Co-authored-by: ns212 * chore: add vDOT icon and sort imports (#1563) * chore: add token icons (#1572) * chore: add token icons * fix: correct ids for vDOT * chore: TBTC icon * chore: release v2.38.2 * [chore] Update dependencies (#1548) * update dependencies * chore: bump dependencies * chore: update dependencies and fix type errors * chore: update dependencies * remove redundant resolutions * wip: try setting node options in package * Trigger build * update caniuse db * fix: revert type casting * chore: bump bridge version * fix: xcm breaking changes * fix: correct XCM adapter * chore: remove console log (#1575) * fix: await the unawaited (#1581) * chore: release v2.39.0 * Tom/fix icons (#1584) * fix: add Bifrost polkadot icon * fix: handle `.wh` suffix in tickers when fetching icons * fix: display name * chore: release v2.39.1 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- package.json | 2 +- src/component-library/CoinIcon/CoinIcon.tsx | 13 +++++-- .../components/ChainIcon/ChainIcon.tsx | 2 + .../ChainIcon/icons/BifrostPolkadot.tsx | 38 +++++++++++++++++++ .../components/ChainIcon/icons/index.ts | 1 + 5 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/BifrostPolkadot.tsx diff --git a/package.json b/package.json index 1d53282a76..573947a1a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.39.0", + "version": "2.39.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/component-library/CoinIcon/CoinIcon.tsx b/src/component-library/CoinIcon/CoinIcon.tsx index 11276bd4f4..112bfebeac 100644 --- a/src/component-library/CoinIcon/CoinIcon.tsx +++ b/src/component-library/CoinIcon/CoinIcon.tsx @@ -17,15 +17,22 @@ type CoinIconProps = Props & NativeAttrs; const CoinIcon = forwardRef( ({ ticker, tickers, ...props }, ref): JSX.Element => { + // TODO: The change to support wormhole assets means that some tickers include a `.wh` suffix. + // Our code assumes tickers only include letters. The proper fix is to support tickers with a suffix, + // so this is a temporary fix until we find time to do that work. For now the only ticker formats we + // have are XXXX and XXXX.wh so splitting and using the first substring will work. + const tickerSubstring = ticker.split('.')[0]; + // Only want to render multi-token if has more than 1 ticker if (tickers && tickers?.length > 1) { - return ; + const tickersSubstrings = tickers.map((ticker) => ticker.split('.')[0]); + return ; } - const CoinIcon = coins[ticker]; + const CoinIcon = coins[tickerSubstring]; if (!CoinIcon) { - return ; + return ; } return ; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx index dd99e9e509..7164dfca4f 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/ChainIcon.tsx @@ -7,6 +7,7 @@ import { ACALA, ASTAR, BIFROST, + BIFROST_POLKADOT, HEIKO, HYDRA, INTERLAY, @@ -25,6 +26,7 @@ const chainsIcon: Record = { ACALA, ASTAR, BIFROST, + BIFROST_POLKADOT, HEIKO, HYDRA, INTERLAY, diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/BifrostPolkadot.tsx b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/BifrostPolkadot.tsx new file mode 100644 index 0000000000..91ce62fb31 --- /dev/null +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/BifrostPolkadot.tsx @@ -0,0 +1,38 @@ +import { forwardRef } from 'react'; + +import { Icon, IconProps } from '@/component-library/Icon'; + +const BIFROST_POLKADOT = forwardRef((props, ref) => ( + + BIFROST_POLKADOT + + + + + + + + + + + + + + + + + + + + + + +)); + +BIFROST_POLKADOT.displayName = 'BIFROST_POLKADOT'; + +export { BIFROST_POLKADOT }; diff --git a/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts index d3c471eb7a..55d97dc446 100644 --- a/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts +++ b/src/pages/SendAndReceive/SendAndReceiveForms/components/ChainIcon/icons/index.ts @@ -1,6 +1,7 @@ export { ACALA } from './Acala'; export { ASTAR } from './Astar'; export { BIFROST } from './Bifrost'; +export { BIFROST_POLKADOT } from './BifrostPolkadot'; export { HEIKO } from './Heiko'; export { HYDRA } from './Hydra'; export { INTERLAY } from './Interlay'; From 07f8dd82aa69247d180d367a612e02fec18eb1ae Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:28:53 +0100 Subject: [PATCH 31/58] issue hotfix patch (#1590) --- src/legacy-components/IssueUI/index.tsx | 55 ++++++++++++++----------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/src/legacy-components/IssueUI/index.tsx b/src/legacy-components/IssueUI/index.tsx index 9c97b0eb12..5721453831 100644 --- a/src/legacy-components/IssueUI/index.tsx +++ b/src/legacy-components/IssueUI/index.tsx @@ -7,6 +7,7 @@ import { displayMonetaryAmountInUSDFormat, formatNumber } from '@/common/utils/u import { Flex } from '@/component-library'; import { WRAPPED_TOKEN_SYMBOL, WrappedTokenAmount } from '@/config/relay-chains'; import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { useWallet } from '@/hooks/use-wallet'; import AddressWithCopyUI from '@/legacy-components/AddressWithCopyUI'; import Hr2 from '@/legacy-components/hrs/Hr2'; import PriceInfo from '@/legacy-components/PriceInfo'; @@ -20,10 +21,10 @@ import IssueRequestStatusUI from './IssueRequestStatusUI'; import WhoopsStatusUI from './WhoopsStatusUI'; // TODO: should type properly (`Relay`) -const renderModalStatusPanel = (request: any) => { +const renderModalStatusPanel = (request: any, showPendingStatus: boolean) => { switch (request.status) { case IssueStatus.PendingWithBtcTxNotFound: { - return ; + return showPendingStatus && ; } case IssueStatus.RequestedRefund: { return ; @@ -41,8 +42,10 @@ interface Props { const IssueUI = ({ issue }: Props): JSX.Element => { const { t } = useTranslation(); const prices = useGetPrices(); + const { account } = useWallet(); const destinationAddress = issue.userParachainAddress; + const showPendingStatus = account?.toString() === issue.userParachainAddress; const receivedWrappedTokenAmount: WrappedTokenAmount = issue.execution ? issue.execution.amountWrapped @@ -55,33 +58,35 @@ const IssueUI = ({ issue }: Props): JSX.Element => { return (
-
- {/* TODO: could componentize */} -

- {t('receive')} + {showPendingStatus && ( +
+ {/* TODO: could componentize */} +

+ {t('receive')} + + {receivedWrappedTokenAmount.toHuman(8)} + + {WRAPPED_TOKEN_SYMBOL} +

- {receivedWrappedTokenAmount.toHuman(8)} + {`≈ ${displayMonetaryAmountInUSDFormat( + receivedWrappedTokenAmount, + getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd + )}`} - {WRAPPED_TOKEN_SYMBOL} -

- - {`≈ ${displayMonetaryAmountInUSDFormat( - receivedWrappedTokenAmount, - getTokenPrice(prices, ForeignAssetIdLiteral.BTC)?.usd - )}`} - -
+
+ )}
{

- <>{renderModalStatusPanel(issue)} + <>{renderModalStatusPanel(issue, showPendingStatus)} ); }; From 5f41a9c3a28d30c1608425f13b1eadf91d0178f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= Date: Tue, 24 Oct 2023 13:37:49 +0100 Subject: [PATCH 32/58] fix(Redeem): show premium redeem compensation (#1592) --- src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx index 5218e0f917..8c5cbd6051 100644 --- a/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx +++ b/src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx @@ -249,8 +249,7 @@ const RedeemForm = ({ ? convertMonetaryAmountToValueInUSD(totalAmount, getTokenPrice(prices, totalAmount.currency.ticker)?.usd) || 0 : 0; - const compensationAmount = - monetaryAmount.isZero() && isPremiumRedeem ? getCompensationAmount(monetaryAmount) : undefined; + const compensationAmount = isPremiumRedeem ? getCompensationAmount(monetaryAmount) : undefined; const compensationAmountUSD = compensationAmount ? convertMonetaryAmountToValueInUSD( compensationAmount, From 5b8cc95f87ac5108678864e0953f93a01b04e8ca Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Tue, 7 Nov 2023 10:00:15 +0000 Subject: [PATCH 33/58] [release] Kintsugi 2.40.0 (#1598) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 * api: refactor the market data api (#1569) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * Tom/fix prices (#1571) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * wip: add log * wip: hardcode value to run against market data api * wip: try setting asset name * fix: casing * chore: add vKSM ids * fix: handle VDOT and VKSM * typo: quotation marks * chore: fix switch statement and remove console log * fix: revert change --------- Co-authored-by: ns212 * chore: add vDOT icon and sort imports (#1563) * chore: add token icons (#1572) * chore: add token icons * fix: correct ids for vDOT * chore: TBTC icon * chore: release v2.38.2 * [chore] Update dependencies (#1548) * update dependencies * chore: bump dependencies * chore: update dependencies and fix type errors * chore: update dependencies * remove redundant resolutions * wip: try setting node options in package * Trigger build * update caniuse db * fix: revert type casting * chore: bump bridge version * fix: xcm breaking changes * fix: correct XCM adapter * chore: remove console log (#1575) * fix: await the unawaited (#1581) * chore: release v2.39.0 * Tom/fix icons (#1584) * fix: add Bifrost polkadot icon * fix: handle `.wh` suffix in tickers when fetching icons * fix: display name * chore: release v2.39.1 * apply hotfix patch (#1589) * feat: update subwallet logo (#1587) * fix(Redeem): show premium redeem compensation (#1591) * feat(Wallet): add bitforst token swap link (#1594) * fix(Loans): collateral overlapping modal ref issue (#1595) * feat(Staking): refactor (#1538) * feat(Staking): refactor * feat: continue * wip * feat: continue * feat: continue * feat: final * feat: final * feat: add tests * feat: continue tests * feat: continue * feat: add translations * fix: code review * feat: add staking limit * fix: limit * fix(Staking): limit parsing --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * chore: release v2.40.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- .github/workflows/test.yml | 1 + package.json | 2 +- src/assets/locales/en/translation.json | 31 +- src/component-library/Field/Field.style.tsx | 12 +- src/component-library/Field/Field.tsx | 58 +- src/component-library/Input/BaseInput.tsx | 11 +- src/component-library/Input/Input.stories.tsx | 8 +- src/component-library/Label/Label.style.tsx | 12 +- src/component-library/Label/Label.tsx | 13 +- src/component-library/List/List.stories.tsx | 58 +- src/component-library/List/List.style.tsx | 1 + .../NumberInput/NumberInput.tsx | 32 +- .../TokenInput/TokenInput.tsx | 4 + .../WalletIcon/icons/SubWallet.tsx | 110 +-- src/component-library/utils/prop-types.ts | 2 + src/components/ClaimModal/ClaimModal.tsx | 85 ++ src/components/ClaimModal/index.tsx | 2 + .../SlippageManager/SlippageManager.tsx | 3 +- src/components/index.tsx | 2 + src/config/links.ts | 3 + .../use-get-account-claimable-rewards.tsx | 36 + .../escrow/use-get-account-staking-data.tsx | 66 +- .../escrow/use-get-staking-details-data.tsx | 101 +++ .../escrow/uset-get-network-staking-data.tsx | 46 + src/hooks/transaction/extrinsics/lib.ts | 5 +- src/hooks/transaction/types/escrow.ts | 4 +- src/hooks/transaction/utils/fee.ts | 17 + src/lib/form/schemas/index.ts | 1 + src/lib/form/schemas/staking.ts | 56 ++ .../CollateralModal/CollateralForm.tsx | 13 +- .../CollateralModal/CollateralModal.tsx | 8 +- src/pages/Staking/BalancesUI/index.tsx | 107 --- src/pages/Staking/InformationUI/index.tsx | 45 - src/pages/Staking/LockTimeField/index.tsx | 106 --- src/pages/Staking/Staking.style.tsx | 31 + src/pages/Staking/Staking.tsx | 49 + src/pages/Staking/TotalsUI/index.tsx | 99 -- .../StakingAccountDetails.tsx | 100 +++ .../StakingAccountDetails/index.tsx | 2 + .../StakingForm/StakingForm.style.tsx | 9 + .../components/StakingForm/StakingForm.tsx | 281 ++++++ .../StakingForm/StakingLockTimeInput.tsx | 109 +++ .../StakingForm/StakingNetworkDetails.tsx | 47 + .../StakingForm/StakingTransactionDetails.tsx | 73 ++ .../Staking/components/StakingForm/index.tsx | 2 + .../StakingWithdrawCard.tsx | 65 ++ .../components/StakingWithdrawCard/index.tsx | 2 + src/pages/Staking/components/index.tsx | 2 + src/pages/Staking/index.tsx | 848 +----------------- .../Wallet/WalletOverview/WalletOverview.tsx | 9 +- .../AvailableAssetsTable/ActionsCell.tsx | 20 +- .../AvailableAssetsTable.tsx | 12 +- .../components/StakingTable/StakingTable.tsx | 13 +- .../mocks/@interlay/interbtc-api/index.ts | 7 +- .../@interlay/interbtc-api/parachain/api.ts | 13 +- .../interbtc-api/parachain/escrow.ts | 73 +- .../@interlay/interbtc-api/parachain/index.ts | 1 + src/test/pages/Staking.test.tsx | 266 ++++++ src/test/pages/Wallet.test.tsx | 13 +- src/utils/constants/currency.ts | 10 +- src/utils/helpers/staking.ts | 13 + 61 files changed, 1800 insertions(+), 1430 deletions(-) create mode 100644 src/components/ClaimModal/ClaimModal.tsx create mode 100644 src/components/ClaimModal/index.tsx create mode 100644 src/hooks/api/escrow/use-get-account-claimable-rewards.tsx create mode 100644 src/hooks/api/escrow/use-get-staking-details-data.tsx create mode 100644 src/hooks/api/escrow/uset-get-network-staking-data.tsx create mode 100644 src/lib/form/schemas/staking.ts delete mode 100644 src/pages/Staking/BalancesUI/index.tsx delete mode 100644 src/pages/Staking/InformationUI/index.tsx delete mode 100644 src/pages/Staking/LockTimeField/index.tsx create mode 100644 src/pages/Staking/Staking.style.tsx create mode 100644 src/pages/Staking/Staking.tsx delete mode 100644 src/pages/Staking/TotalsUI/index.tsx create mode 100644 src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx create mode 100644 src/pages/Staking/components/StakingAccountDetails/index.tsx create mode 100644 src/pages/Staking/components/StakingForm/StakingForm.style.tsx create mode 100644 src/pages/Staking/components/StakingForm/StakingForm.tsx create mode 100644 src/pages/Staking/components/StakingForm/StakingLockTimeInput.tsx create mode 100644 src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx create mode 100644 src/pages/Staking/components/StakingForm/StakingTransactionDetails.tsx create mode 100644 src/pages/Staking/components/StakingForm/index.tsx create mode 100644 src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx create mode 100644 src/pages/Staking/components/StakingWithdrawCard/index.tsx create mode 100644 src/pages/Staking/components/index.tsx create mode 100644 src/test/pages/Staking.test.tsx create mode 100644 src/utils/helpers/staking.ts diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 03d6e5f643..beb8c3734c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -15,6 +15,7 @@ env: REACT_APP_FEATURE_FLAG_LENDING: enabled REACT_APP_FEATURE_FLAG_AMM: enabled REACT_APP_FEATURE_FLAG_WALLET: enabled + REACT_APP_BITCOIN_NETWORK: regtest jobs: lint: diff --git a/package.json b/package.json index 573947a1a2..e753953be0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "interbtc-ui", - "version": "2.39.1", + "version": "2.40.0", "private": true, "dependencies": { "@craco/craco": "^6.1.1", diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index d20252b086..96f09cb03f 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -144,6 +144,7 @@ "amount": "Amount", "select_token": "Select Token", "fee_token": "Fee token", + "claim": "Claim", "claim_rewards": "Claim Rewards", "tx_fees": "Tx fees", "view_subscan": "View Subscan", @@ -154,6 +155,10 @@ "rewards_apr_ticker": "Rewards APR {{ticker}}", "wallet": "Wallet", "learn_more": "Learn more", + "stake": "Stake", + "max": "Max", + "ticker_balance": "{{ticker}} Balance", + "claimable_rewards": "Claimable Rewards", "navigation": { "btc": "BTC", "strategies": "Strategies", @@ -535,11 +540,27 @@ } }, "staking_page": { - "the_estimated_amount_of_governance_token_you_will_receive_as_rewards": "The estimated amount of {{governanceTokenSymbol}} you will receive as rewards. Depends on your proportion of the total {{voteGovernanceTokenSymbol}}.", - "new_vote_governance_token_gained": "New {{voteGovernanceTokenSymbol}} Gained", - "the_increase_in_your_vote_governance_token_balance": "The increase in your {{voteGovernanceTokenSymbol}} balance", - "total_vote_governance_token_in_the_network": "Total {{voteGovernanceTokenSymbol}} in the network", - "total_staked_governance_token_in_the_network": "Total Staked {{governanceTokenSymbol}} in the network" + "stake_ticker": "Stake {{ticker}}", + "total_staked_ticker_in_the_network": "Total Staked {{ticker}} in the network", + "total_ticker_in_the_network": "Total {{ticker}} in the network", + "time": { + "one_week": "1 Week", + "one_month": "1 Month", + "three_month": "3 Month", + "six_month": "6 Month" + }, + "lock_time_in_weeks": "Lock time in weeks (Max {{value}})", + "extended_lock_time_in_weeks": "Extended lock time in weeks (Max {{value}})", + "your_already_staked_ticker_needs_to_be_withdrawn": "Your already staked {GOVERNANCE_TOKEN.ticker} needs to be withdrawn before adding a new stake", + "unlock_date": "Unlock date", + "new_unlock_date": "New unlock date", + "new_ticker_gained": "New {{ticker}} Gained", + "new_total_stake": "New Total Stake", + "estimated_apr": "Estimated APR", + "projected_ticker_rewards": "Projected {{ticker}} Rewards", + "staked_ticker": "Staked {{ticker}}", + "withdraw_staked_ticker_on_date": "Withdraw Staked {{ticker}} on", + "withdraw_staked_ticker": "Withdraw Staked {{ticker}}" }, "about": { "research_paper": "Research Paper", diff --git a/src/component-library/Field/Field.style.tsx b/src/component-library/Field/Field.style.tsx index 3533b0c3b4..f0570238bb 100644 --- a/src/component-library/Field/Field.style.tsx +++ b/src/component-library/Field/Field.style.tsx @@ -1,12 +1,18 @@ import styled from 'styled-components'; -import { Flex } from '../Flex'; import { theme } from '../theme'; +import { Spacing } from '../utils/prop-types'; -const Wrapper = styled(Flex)` +type StyledFieldProps = { + $maxWidth?: Spacing; +}; + +const StyledField = styled.div` position: relative; color: ${theme.colors.textPrimary}; box-sizing: border-box; + display: inline-flex; + max-width: ${({ $maxWidth }) => $maxWidth && theme.spacing[$maxWidth]}; `; -export { Wrapper }; +export { StyledField }; diff --git a/src/component-library/Field/Field.tsx b/src/component-library/Field/Field.tsx index ac9b7143c6..f9e9ee92e7 100644 --- a/src/component-library/Field/Field.tsx +++ b/src/component-library/Field/Field.tsx @@ -1,34 +1,47 @@ import { forwardRef, HTMLAttributes, ReactNode } from 'react'; -import { Flex } from '../Flex'; +import { Flex, FlexProps } from '../Flex'; import { HelperText, HelperTextProps } from '../HelperText'; import { Label, LabelProps } from '../Label'; import { hasError } from '../utils/input'; -import { Wrapper } from './Field.style'; +import { LabelPosition, Spacing } from '../utils/prop-types'; +import { StyledField } from './Field.style'; type Props = { label?: ReactNode; + labelPosition?: LabelPosition; labelProps?: LabelProps; + maxWidth?: Spacing; }; type NativeAttrs = Omit, keyof Props>; -type InheritAttrs = Omit; +type InheritAttrs = Omit; type FieldProps = Props & NativeAttrs & InheritAttrs; const Field = forwardRef( ( - { label, labelProps, errorMessage, errorMessageProps, description, descriptionProps, children, ...props }, + { + label, + labelPosition = 'top', + labelProps, + errorMessage, + errorMessageProps, + description, + descriptionProps, + children, + maxWidth, + ...props + }, ref ): JSX.Element => { const error = hasError({ errorMessage }); const hasHelpText = !!description || error; - return ( - - {label && } - {children} + const element = ( + <> + {children} {hasHelpText && ( ( errorMessageProps={errorMessageProps} /> )} + + ); + + return ( + + {label && ( + + )} + {labelPosition === 'top' ? ( + element + ) : ( + + {element} + + )} ); } @@ -46,6 +76,7 @@ Field.displayName = 'Field'; const useFieldProps = ({ label, + labelPosition, labelProps, errorMessage, errorMessageProps, @@ -54,11 +85,16 @@ const useFieldProps = ({ className, hidden, style, + maxWidth, + alignItems, + justifyContent, + gap, ...props }: FieldProps): { fieldProps: FieldProps; elementProps: any } => { return { fieldProps: { label, + labelPosition, labelProps, errorMessage, errorMessageProps, @@ -66,7 +102,11 @@ const useFieldProps = ({ descriptionProps, className, hidden, - style + style, + maxWidth, + alignItems, + justifyContent, + gap }, elementProps: props }; diff --git a/src/component-library/Input/BaseInput.tsx b/src/component-library/Input/BaseInput.tsx index 3f02528dd6..5e4adedc8b 100644 --- a/src/component-library/Input/BaseInput.tsx +++ b/src/component-library/Input/BaseInput.tsx @@ -1,16 +1,13 @@ import { ValidationState } from '@react-types/shared'; import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'; -import { Field, useFieldProps } from '../Field'; +import { Field, FieldProps, useFieldProps } from '../Field'; import { HelperTextProps } from '../HelperText'; -import { LabelProps } from '../Label'; import { hasError } from '../utils/input'; import { Sizes, Spacing } from '../utils/prop-types'; import { Adornment, StyledBaseInput } from './Input.style'; type Props = { - label?: ReactNode; - labelProps?: LabelProps; startAdornment?: ReactNode; endAdornment?: ReactNode; bottomAdornment?: ReactNode; @@ -25,7 +22,11 @@ type Props = { type NativeAttrs = Omit, keyof Props>; -type InheritAttrs = Omit; +type InheritAttrs = Omit< + HelperTextProps & + Pick, + keyof Props & NativeAttrs +>; type BaseInputProps = Props & NativeAttrs & InheritAttrs; diff --git a/src/component-library/Input/Input.stories.tsx b/src/component-library/Input/Input.stories.tsx index fa0c7f0bf0..8446122c8b 100644 --- a/src/component-library/Input/Input.stories.tsx +++ b/src/component-library/Input/Input.stories.tsx @@ -6,9 +6,15 @@ const Template: Story = (args) => ; const Default = Template.bind({}); Default.args = { + placeholder: 'placeholder', + label: 'Coin' +}; + +const Side = Template.bind({}); +Side.args = { placeholder: 'placeholder', label: 'Coin', - description: "What's your favorite coin?" + labelPosition: 'side' }; const Label = Template.bind({}); diff --git a/src/component-library/Label/Label.style.tsx b/src/component-library/Label/Label.style.tsx index 242de77506..c28c4c4f9d 100644 --- a/src/component-library/Label/Label.style.tsx +++ b/src/component-library/Label/Label.style.tsx @@ -1,13 +1,21 @@ import styled from 'styled-components'; import { theme } from '../theme'; +import { LabelPosition } from '../utils/prop-types'; -const StyledLabel = styled.label` +type StyledLabelProps = { + $position: LabelPosition; +}; + +const StyledLabel = styled.label` font-weight: ${theme.fontWeight.medium}; line-height: ${theme.lineHeight.lg}; font-size: ${theme.text.xs}; color: ${theme.label.text}; - padding: ${theme.spacing.spacing1} 0; + padding: ${({ $position }) => + $position === 'top' + ? `${theme.spacing.spacing1} 0` + : `${theme.spacing.spacing2} ${theme.spacing.spacing1} 0.438rem 0`}; align-self: flex-start; `; diff --git a/src/component-library/Label/Label.tsx b/src/component-library/Label/Label.tsx index 927b2b149b..86416439f7 100644 --- a/src/component-library/Label/Label.tsx +++ b/src/component-library/Label/Label.tsx @@ -1,14 +1,19 @@ import { forwardRef, LabelHTMLAttributes } from 'react'; +import { LabelPosition } from '../utils/prop-types'; import { StyledLabel } from './Label.style'; -type NativeAttrs = LabelHTMLAttributes; +type Props = { + position?: LabelPosition; +}; -type LabelProps = NativeAttrs; +type NativeAttrs = Omit, keyof Props>; + +type LabelProps = Props & NativeAttrs; const Label = forwardRef( - ({ children, ...props }, ref): JSX.Element => ( - + ({ children, position = 'top', ...props }, ref): JSX.Element => ( + {children} ) diff --git a/src/component-library/List/List.stories.tsx b/src/component-library/List/List.stories.tsx index 8ad79ac4a3..ce03075e1f 100644 --- a/src/component-library/List/List.stories.tsx +++ b/src/component-library/List/List.stories.tsx @@ -1,28 +1,44 @@ import { Meta, Story } from '@storybook/react'; +import { useState } from 'react'; import { List, ListItem, ListProps } from '.'; -const Template: Story = (args) => ( -
- - - IBTC - - - KINT - - - INTR - - - KSM - - - DOT - - -
-); +const Template: Story = (args) => { + const [value, setValue] = useState(); + + const handleSelectionChange: ListProps['onSelectionChange'] = (key) => { + const [selectedKey] = [...key]; + + setValue(selectedKey?.toString()); + }; + + return ( +
+ + + IBTC + + + KINT + + + INTR + + + KSM + + + DOT + + +
+ ); +}; const Default = Template.bind({}); Default.args = { diff --git a/src/component-library/List/List.style.tsx b/src/component-library/List/List.style.tsx index d252659b61..6040950c52 100644 --- a/src/component-library/List/List.style.tsx +++ b/src/component-library/List/List.style.tsx @@ -35,6 +35,7 @@ const StyledListItem = styled.li` cursor: ${({ $isInteractable }) => $isInteractable && 'pointer'}; outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'}; opacity: ${({ $isDisabled }) => $isDisabled && 0.5}; + white-space: nowrap; ${({ $variant }) => { if ($variant === 'card') { diff --git a/src/component-library/NumberInput/NumberInput.tsx b/src/component-library/NumberInput/NumberInput.tsx index a449c558cb..73ffe0a6b5 100644 --- a/src/component-library/NumberInput/NumberInput.tsx +++ b/src/component-library/NumberInput/NumberInput.tsx @@ -11,8 +11,10 @@ const escapeRegExp = (string: string): string => { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }; +const numericRegex = /^[0-9\b]+$/; + // match escaped "." characters via in a non-capturing group -const inputRegex = RegExp(`^\\d*(?:\\\\[.])?\\d*$`); +const decimalRegex = RegExp(`^\\d*(?:\\\\[.])?\\d*$`); type Props = { value?: string | number; @@ -29,14 +31,31 @@ type AriaAttrs = Omit, (keyof Props & InheritAttrs type NumberInputProps = Props & InheritAttrs & AriaAttrs; const NumberInput = forwardRef( - ({ onChange, validationState, value: valueProp, defaultValue = '', ...props }, ref): JSX.Element => { + ( + { onChange, validationState, value: valueProp, defaultValue = '', inputMode = 'numeric', ...props }, + ref + ): JSX.Element => { const [value, setValue] = useState(defaultValue?.toString()); const inputRef = useDOMRef(ref); const handleChange: ChangeEventHandler = (e) => { const value = e.target.value; - if (inputRegex.test(escapeRegExp(value))) { + let isValid = true; + + switch (inputMode) { + case 'decimal': { + isValid = decimalRegex.test(escapeRegExp(value)); + + break; + } + case 'numeric': { + isValid = e.target.value === '' || numericRegex.test(e.target.value); + break; + } + } + + if (isValid) { onChange?.(e); setValue(value); } @@ -45,13 +64,10 @@ const NumberInput = forwardRef( const { inputProps, descriptionProps, errorMessageProps, labelProps } = useTextField( { ...props, + inputMode, validationState: props.errorMessage ? 'invalid' : validationState, value: value, - pattern: '^[0-9]*[.,]?[0-9]*$', - inputMode: 'decimal', - autoComplete: 'off', - minLength: 1, - maxLength: 79 + autoComplete: 'off' }, inputRef ); diff --git a/src/component-library/TokenInput/TokenInput.tsx b/src/component-library/TokenInput/TokenInput.tsx index 109f6148ad..8f3525a483 100644 --- a/src/component-library/TokenInput/TokenInput.tsx +++ b/src/component-library/TokenInput/TokenInput.tsx @@ -121,6 +121,10 @@ const TokenInput = forwardRef( )} ((props, ref) => ( - + SubWallet - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + )); diff --git a/src/component-library/utils/prop-types.ts b/src/component-library/utils/prop-types.ts index cdeb314c12..3744b9fec4 100644 --- a/src/component-library/utils/prop-types.ts +++ b/src/component-library/utils/prop-types.ts @@ -112,3 +112,5 @@ export type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export type ProgressBarColors = 'default' | 'red'; export type BorderRadius = keyof typeof theme.rounded; + +export type LabelPosition = 'top' | 'side'; diff --git a/src/components/ClaimModal/ClaimModal.tsx b/src/components/ClaimModal/ClaimModal.tsx new file mode 100644 index 0000000000..ea74a73777 --- /dev/null +++ b/src/components/ClaimModal/ClaimModal.tsx @@ -0,0 +1,85 @@ +import { ReactNode, useEffect, useRef } from 'react'; + +import { Flex, Modal, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@/component-library'; +import { UseTransactionResult } from '@/hooks/transaction/types/hook'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; +import { useForm } from '@/lib/form'; +import yup from '@/lib/form/yup.custom'; + +import { AuthCTA } from '../AuthCTA'; +import { TransactionFeeDetails } from '../TransactionFeeDetails'; + +const NAME = 'fees-token-field'; + +type Props = { + title: ReactNode; + onSubmit: () => void; + onOpen: () => void; + transaction: UseTransactionResult; + children?: ReactNode; + submitLabel: ReactNode; +}; + +type InheritAttrs = Omit; + +type ClaimModalProps = Props & InheritAttrs; + +const ClaimModal = ({ + isOpen, + title, + submitLabel, + children, + transaction, + onSubmit, + onOpen, + ...props +}: ClaimModalProps): JSX.Element => { + const overlappingModalRef = useRef(null); + + const form = useForm<{ [NAME]?: string }>({ + initialValues: { + [NAME]: '' + }, + validationSchema: yup.object().shape({ + [NAME]: yup.string().required() + }), + onSubmit, + onComplete: onOpen + }); + + // Doing this call on mount so that the form becomes dirty + useEffect(() => { + if (!isOpen) return; + + form.setFieldValue(NAME, transaction.fee.defaultCurrency.ticker, true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isOpen]); + + const isBtnDisabled = isTransactionFormDisabled(form, transaction.fee); + + return ( + !overlappingModalRef.current?.contains(el)}> + {title} + {children && {children}} + + + + + + {submitLabel} + + + + + + ); +}; + +export { ClaimModal }; +export type { ClaimModalProps }; diff --git a/src/components/ClaimModal/index.tsx b/src/components/ClaimModal/index.tsx new file mode 100644 index 0000000000..f0ee787d35 --- /dev/null +++ b/src/components/ClaimModal/index.tsx @@ -0,0 +1,2 @@ +export type { ClaimModalProps } from './ClaimModal'; +export { ClaimModal } from './ClaimModal'; diff --git a/src/components/SlippageManager/SlippageManager.tsx b/src/components/SlippageManager/SlippageManager.tsx index aa13b8add5..6aa630b8ed 100644 --- a/src/components/SlippageManager/SlippageManager.tsx +++ b/src/components/SlippageManager/SlippageManager.tsx @@ -38,7 +38,8 @@ const SlippageManager = forwardRef( diff --git a/src/components/index.tsx b/src/components/index.tsx index 800c588f63..64d6da9ad3 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -6,6 +6,8 @@ export type { AuthCTAProps } from './AuthCTA'; export { AuthCTA } from './AuthCTA'; export type { AuthModalProps, SignTermsModalProps } from './AuthModal'; export { AuthModal, SignTermsModal } from './AuthModal'; +export type { ClaimModalProps } from './ClaimModal'; +export { ClaimModal } from './ClaimModal'; export type { AssetCellProps, BalanceCellProps, CellProps, TableProps } from './DataGrid'; export { AssetCell, BalanceCell, Cell, Table } from './DataGrid'; export type { FundWalletProps } from './FundWallet'; diff --git a/src/config/links.ts b/src/config/links.ts index f4d6699528..d5b7affca1 100644 --- a/src/config/links.ts +++ b/src/config/links.ts @@ -28,8 +28,11 @@ const GEOBLOCK_REDIRECTION_LINK = 'https://www.interlay.io/geoblock'; const FORMS_STRATEGIES_LINK = 'https://forms.gle/Ue7NQ81j2u5oNDey6'; +const BIFROST_SWAP_LINK = 'https://bifrost.app/swap'; + export { BANXA_LINK, + BIFROST_SWAP_LINK, FORMS_STRATEGIES_LINK, GEOBLOCK_API_ENDPOINT, GEOBLOCK_REDIRECTION_LINK, diff --git a/src/hooks/api/escrow/use-get-account-claimable-rewards.tsx b/src/hooks/api/escrow/use-get-account-claimable-rewards.tsx new file mode 100644 index 0000000000..1617c3174f --- /dev/null +++ b/src/hooks/api/escrow/use-get-account-claimable-rewards.tsx @@ -0,0 +1,36 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { AccountId } from '@polkadot/types/interfaces'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { useWallet } from '@/hooks/use-wallet'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +const getAccountStakingData = async (accountId: AccountId) => window.bridge.escrow.getRewards(accountId); + +interface UseGetAccountStakingClaimableRewardsResult { + data: MonetaryAmount | undefined; + isLoading: boolean; + refetch: () => void; +} + +const useGetAccountStakingClaimableRewards = (): UseGetAccountStakingClaimableRewardsResult => { + const { account } = useWallet(); + + const queryKey = ['staking-claimable-rewards', account]; + + const { data, error, isLoading, refetch } = useQuery({ + queryKey, + queryFn: () => account && getAccountStakingData(account), + refetchInterval: REFETCH_INTERVAL.BLOCK, + enabled: !!account + }); + + useErrorHandler(error); + + return { data, isLoading, refetch }; +}; + +export { useGetAccountStakingClaimableRewards }; +export type { UseGetAccountStakingClaimableRewardsResult }; diff --git a/src/hooks/api/escrow/use-get-account-staking-data.tsx b/src/hooks/api/escrow/use-get-account-staking-data.tsx index 31aebac5d7..289dd4b7f7 100644 --- a/src/hooks/api/escrow/use-get-account-staking-data.tsx +++ b/src/hooks/api/escrow/use-get-account-staking-data.tsx @@ -1,71 +1,103 @@ -import { CurrencyExt } from '@interlay/interbtc-api'; +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; import { MonetaryAmount } from '@interlay/monetary-js'; import { AccountId } from '@polkadot/types/interfaces'; +import Big from 'big.js'; import { add } from 'date-fns'; import { useErrorHandler } from 'react-error-boundary'; import { useQuery } from 'react-query'; import { BLOCK_TIME } from '@/config/parachain'; -import { BLOCKTIME_REFETCH_INTERVAL } from '@/utils/constants/api'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { REFETCH_INTERVAL } from '@/utils/constants/api'; import useAccountId from '../../use-account-id'; type AccountUnlockStakingData = { date: Date; block: number; + remainingBlocks: number; + isAvailable: boolean; }; -type GetAccountStakingData = { +type AccountStakingData = { unlock: AccountUnlockStakingData; balance: MonetaryAmount; + votingBalance: MonetaryAmount; + projected: { + amount: MonetaryAmount; + apy: Big; + }; + limit: MonetaryAmount; }; const getUnlockData = (stakeEndBlock: number, currentBlockNumber: number): AccountUnlockStakingData => { - const blocksUntilUnlockDate = stakeEndBlock - currentBlockNumber; + const remainingBlocks = stakeEndBlock - currentBlockNumber; - const unlockDate = add(new Date(), { seconds: blocksUntilUnlockDate * BLOCK_TIME }); + const unlockDate = add(new Date(), { seconds: remainingBlocks * BLOCK_TIME }); return { date: unlockDate, - block: stakeEndBlock + block: stakeEndBlock, + remainingBlocks, + isAvailable: remainingBlocks <= 0 }; }; -const getAccountStakingData = async (accountId: AccountId): Promise => { - const stakedBalancePromise = window.bridge.escrow.getStakedBalance(accountId); +const getAccountStakingData = async (accountId: AccountId): Promise => { + const stakedBalance = await window.bridge.escrow.getStakedBalance(accountId); + + if (stakedBalance.amount.isZero()) { + return null; + } + + const limitPromise = window.bridge.api.rpc.escrow.freeStakable(accountId); const currentBlockNumberPromise = window.bridge.system.getCurrentBlockNumber(); + const projectedPromise = window.bridge.escrow.getRewardEstimate(accountId); + const votingBalancePromise = window.bridge.escrow.votingBalance(accountId); + + const [limit, currentBlockNumber, projected, votingBalance] = await Promise.all([ + limitPromise, + currentBlockNumberPromise, + projectedPromise, + votingBalancePromise + ]); - const [stakedBalance, currentBlockNumber] = await Promise.all([stakedBalancePromise, currentBlockNumberPromise]); + const unparsedLimit = limit?.values().next().value?.toString() as string; + const parsedLimit = newMonetaryAmount(unparsedLimit || 0, GOVERNANCE_TOKEN); const unlock = getUnlockData(stakedBalance.endBlock, currentBlockNumber); return { unlock, - balance: stakedBalance.amount + balance: stakedBalance.amount, + votingBalance, + projected, + limit: parsedLimit }; }; -interface GetAccountStakingDataResult { - data: GetAccountStakingData | undefined; +interface UseGetAccountStakingDataResult { + data: AccountStakingData | null | undefined; + isLoading: boolean; refetch: () => void; } -const useGetAccountStakingData = (): GetAccountStakingDataResult => { +const useGetAccountStakingData = (): UseGetAccountStakingDataResult => { const accountId = useAccountId(); const queryKey = ['staking', accountId]; - const { data, error, refetch } = useQuery({ + const { data, error, isLoading, refetch } = useQuery({ queryKey, queryFn: () => accountId && getAccountStakingData(accountId), - refetchInterval: BLOCKTIME_REFETCH_INTERVAL, + refetchInterval: REFETCH_INTERVAL.BLOCK, enabled: !!accountId }); useErrorHandler(error); - return { data, refetch }; + return { data, isLoading, refetch }; }; export { useGetAccountStakingData }; -export type { AccountUnlockStakingData, GetAccountStakingData, GetAccountStakingDataResult }; +export type { AccountStakingData, AccountUnlockStakingData, UseGetAccountStakingDataResult }; diff --git a/src/hooks/api/escrow/use-get-staking-details-data.tsx b/src/hooks/api/escrow/use-get-staking-details-data.tsx new file mode 100644 index 0000000000..75b076b309 --- /dev/null +++ b/src/hooks/api/escrow/use-get-staking-details-data.tsx @@ -0,0 +1,101 @@ +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { AccountId } from '@polkadot/types/interfaces'; +import Big from 'big.js'; +import { add } from 'date-fns'; +import { useRef } from 'react'; +import { MutationFunction, useMutation, UseMutationOptions, UseMutationResult } from 'react-query'; + +import { GOVERNANCE_TOKEN, STAKE_LOCK_TIME } from '@/config/relay-chains'; +import { convertBlockNumbersToWeeks, convertWeeksToBlockNumbers } from '@/utils/helpers/staking'; + +import useAccountId from '../../use-account-id'; +import { AccountStakingData, useGetAccountStakingData } from './use-get-account-staking-data'; + +type AccountStakingDetailsData = { + apy?: Big; + totalStaked: MonetaryAmount; + votingBalanceGained: MonetaryAmount; + governanceBalanceReward?: MonetaryAmount; + date: Date; +}; + +const getDetailsData = async ( + accountId?: AccountId, + accountData?: AccountStakingData | null, + amount: MonetaryAmount = newMonetaryAmount(0, GOVERNANCE_TOKEN), + weeksLocked = 0 +): Promise => { + const baseBlockNumber = accountData?.unlock.block || (await window.bridge.system.getCurrentBlockNumber()); + + const newBlockNumber = baseBlockNumber + convertWeeksToBlockNumbers(weeksLocked); + + const existingWeeksLocked = accountData ? convertBlockNumbersToWeeks(accountData.unlock.remainingBlocks) : 0; + + const totalWeeksLocked = existingWeeksLocked + weeksLocked; + + const totalStakedAmount = accountData ? accountData.balance.add(amount) : amount; + + const totalStaked = totalStakedAmount.mul(totalWeeksLocked).div(STAKE_LOCK_TIME.MAX); + + const votingBalanceGained = accountData ? totalStaked.sub(accountData?.votingBalance) : totalStaked; + + const { amount: governanceBalanceReward, apy } = accountId + ? await window.bridge.escrow.getRewardEstimate(accountId, amount, newBlockNumber) + : { amount: undefined, apy: undefined }; + + const date = add(accountData?.unlock.date || new Date(), { + weeks: weeksLocked + }); + + return { + apy, + totalStaked, + votingBalanceGained, + governanceBalanceReward, + date + }; +}; + +type StakingEstimationVariables = { + amount?: MonetaryAmount; + weeksLocked?: number; +}; + +type UseGetStakingEstimationOptions = UseMutationOptions< + AccountStakingDetailsData, + Error, + StakingEstimationVariables, + unknown +>; + +type UseGetAccountStakingDetailsDataResult = UseMutationResult< + AccountStakingDetailsData, + Error, + StakingEstimationVariables, + unknown +>; + +const useGetStakingDetailsData = (options?: UseGetStakingEstimationOptions): UseGetAccountStakingDetailsDataResult => { + const accountId = useAccountId(); + const resultRef = useRef(); + + const accountData = useGetAccountStakingData(); + + const fn: MutationFunction = ({ + amount, + weeksLocked + }) => getDetailsData(accountId, accountData.data, amount, weeksLocked); + + const mutation = useMutation(fn, { + ...options, + onSuccess: (data) => { + resultRef.current = data; + } + }); + + return { ...mutation, data: resultRef.current } as UseGetAccountStakingDetailsDataResult; +}; + +export { useGetStakingDetailsData }; +export type { AccountStakingDetailsData, UseGetAccountStakingDetailsDataResult }; diff --git a/src/hooks/api/escrow/uset-get-network-staking-data.tsx b/src/hooks/api/escrow/uset-get-network-staking-data.tsx new file mode 100644 index 0000000000..520a73062f --- /dev/null +++ b/src/hooks/api/escrow/uset-get-network-staking-data.tsx @@ -0,0 +1,46 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { useErrorHandler } from 'react-error-boundary'; +import { useQuery } from 'react-query'; + +import { REFETCH_INTERVAL } from '@/utils/constants/api'; + +type NetworkStakingData = { + totalVotingSupply: MonetaryAmount; + totalStakedBalance: MonetaryAmount; +}; + +const getNetworkStakingData = async (): Promise => { + const totalVotingSupplyPromise = window.bridge.escrow.totalVotingSupply(); + const totalStakedBalancePromise = window.bridge.escrow.getTotalStakedBalance(); + + const [totalVotingSupply, totalStakedBalance] = await Promise.all([ + totalVotingSupplyPromise, + totalStakedBalancePromise + ]); + + return { + totalVotingSupply, + totalStakedBalance + }; +}; + +interface GetNetworkStakingDataResult { + data: NetworkStakingData | undefined; + refetch: () => void; +} + +const useGetNetworkStakingData = (): GetNetworkStakingDataResult => { + const { data, error, refetch } = useQuery({ + queryKey: 'network-staking-data', + queryFn: getNetworkStakingData, + refetchInterval: REFETCH_INTERVAL.BLOCK + }); + + useErrorHandler(error); + + return { data, refetch }; +}; + +export { useGetNetworkStakingData }; +export type { GetNetworkStakingDataResult, NetworkStakingData }; diff --git a/src/hooks/transaction/extrinsics/lib.ts b/src/hooks/transaction/extrinsics/lib.ts index 4e8d09ad4f..375f4cbf74 100644 --- a/src/hooks/transaction/extrinsics/lib.ts +++ b/src/hooks/transaction/extrinsics/lib.ts @@ -203,9 +203,10 @@ const getLibExtrinsic = async (params: LibActions): Promise => { return window.bridge.escrow.withdrawRewards(...params.args); case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: { const [amount, unlockHeight] = params.args; + const txs = [ - window.bridge.api.tx.escrow.increaseAmount(amount), - window.bridge.api.tx.escrow.increaseUnlockHeight(unlockHeight) + window.bridge.escrow.increaseAmount(amount).extrinsic, + window.bridge.escrow.increaseUnlockHeight(unlockHeight).extrinsic ]; const batch = window.bridge.api.tx.utility.batchAll(txs); diff --git a/src/hooks/transaction/types/escrow.ts b/src/hooks/transaction/types/escrow.ts index 211cfc762d..bd8c2213c0 100644 --- a/src/hooks/transaction/types/escrow.ts +++ b/src/hooks/transaction/types/escrow.ts @@ -10,8 +10,8 @@ interface EscrowCreateLockAction { interface EscrowInscreaseLookedTimeAndAmountAction { type: Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT; args: [ - ...Parameters, - ...Parameters + ...Parameters, + ...Parameters ]; } interface EscrowIncreaseLockAmountAction { diff --git a/src/hooks/transaction/utils/fee.ts b/src/hooks/transaction/utils/fee.ts index fdb3e311e8..74b07ebe1f 100644 --- a/src/hooks/transaction/utils/fee.ts +++ b/src/hooks/transaction/utils/fee.ts @@ -159,6 +159,20 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = return [calculatedLimit]; } /* END - LOANS */ + /* START - ESCROW */ + case Transaction.ESCROW_CREATE_LOCK: { + const [amount] = params.args; + return [amount]; + } + case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: { + const [amount] = params.args; + return [amount]; + } + case Transaction.ESCROW_INCREASE_LOCKED_AMOUNT: { + const [amount] = params.args; + return [amount]; + } + /* END - ESCROW */ case Transaction.STRATEGIES_DEPOSIT: { const [, , isIdentitySet, , amount] = params.args; if (isIdentitySet) { @@ -184,6 +198,9 @@ const getAmount = (params: Actions): MonetaryAmount[] | undefined = case Transaction.STRATEGIES_WITHDRAW: case Transaction.STRATEGIES_INITIALIZE_PROXY: case Transaction.AMM_CLAIM_REWARDS: + case Transaction.ESCROW_INCREASE_LOCKED_TIME: + case Transaction.ESCROW_WITHDRAW: + case Transaction.ESCROW_WITHDRAW_REWARDS: return undefined; } diff --git a/src/lib/form/schemas/index.ts b/src/lib/form/schemas/index.ts index 9c812b09d6..06d05adcb3 100644 --- a/src/lib/form/schemas/index.ts +++ b/src/lib/form/schemas/index.ts @@ -1,6 +1,7 @@ export * from './btc'; export * from './loans'; export * from './pools'; +export * from './staking'; export * from './strategies'; export * from './swap'; export * from './transfers'; diff --git a/src/lib/form/schemas/staking.ts b/src/lib/form/schemas/staking.ts new file mode 100644 index 0000000000..649a4810ae --- /dev/null +++ b/src/lib/form/schemas/staking.ts @@ -0,0 +1,56 @@ +import i18n from 'i18next'; + +import yup, { MaxAmountValidationParams, MinAmountValidationParams } from '../yup.custom'; + +const STAKING_AMOUNT_FIELD = 'staking-amount'; +const STAKING_LOCKED_WEEKS_AMOUNT_FIELD = 'staking-locked-weeks-amount'; +const STAKING_FEE_TOKEN_FIELD = 'staking-fee-token'; + +type StakingFormData = { + [STAKING_AMOUNT_FIELD]?: string; + [STAKING_LOCKED_WEEKS_AMOUNT_FIELD]?: string; + [STAKING_FEE_TOKEN_FIELD]?: string; +}; + +type StakingValidationParams = { + [STAKING_AMOUNT_FIELD]: Partial & Partial; + [STAKING_LOCKED_WEEKS_AMOUNT_FIELD]: { + min: number; + max: number; + }; +}; + +const stakingSchema = (params: StakingValidationParams, hasStaked: boolean): yup.ObjectSchema => { + const amountParams = params[STAKING_AMOUNT_FIELD]; + const { min, max } = params[STAKING_LOCKED_WEEKS_AMOUNT_FIELD]; + + let baseAmountSchema = yup + .string() + .maxAmount(amountParams as MaxAmountValidationParams) + .minAmount(amountParams as MinAmountValidationParams, 'transfer'); + + let baseLockTimeSchema = yup + .string() + .test('max', `Lock time must be less than or equal to ${max}`, (value) => + value === undefined ? true : Number(value) <= max + ); + + if (!hasStaked) { + baseAmountSchema = baseAmountSchema.requiredAmount('stake'); + + baseLockTimeSchema = baseLockTimeSchema + .required(i18n.t('forms.please_enter_your_field', { field: 'lock time' })) + .test('min', `Lock time must be greater than or equal to ${min}`, (value) => + value === undefined ? true : Number(value) >= min + ); + } + + return yup.object().shape({ + [STAKING_AMOUNT_FIELD]: baseAmountSchema, + [STAKING_LOCKED_WEEKS_AMOUNT_FIELD]: baseLockTimeSchema, + [STAKING_FEE_TOKEN_FIELD]: yup.string().required() + }); +}; + +export { STAKING_AMOUNT_FIELD, STAKING_FEE_TOKEN_FIELD, STAKING_LOCKED_WEEKS_AMOUNT_FIELD, stakingSchema }; +export type { StakingFormData, StakingValidationParams }; diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralForm.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralForm.tsx index 68340b1f52..378f6dfd17 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralForm.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralForm.tsx @@ -1,5 +1,5 @@ import { LoanAsset } from '@interlay/interbtc-api'; -import { useEffect, useRef } from 'react'; +import { RefObject, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import { Flex } from '@/component-library'; @@ -20,16 +20,21 @@ type CollateralFormProps = { asset: LoanAsset; variant: Extract; isOpen?: boolean; + overlappingModalRef: RefObject; onSigning: () => void; }; -const CollateralForm = ({ asset, variant, isOpen, onSigning }: CollateralFormProps): JSX.Element => { +const CollateralForm = ({ + asset, + variant, + isOpen, + overlappingModalRef, + onSigning +}: CollateralFormProps): JSX.Element => { const { t } = useTranslation(); const { refetch } = useGetAccountLendingStatistics(); - const overlappingModalRef = useRef(null); - const transaction = useTransaction({ onSigning, onSuccess: refetch diff --git a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx index 6236b6bccd..a32b593a65 100644 --- a/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx +++ b/src/pages/Loans/LoansOverview/components/CollateralModal/CollateralModal.tsx @@ -101,7 +101,13 @@ const CollateralModal = ({ asset, position, onClose, isOpen, ...props }: Collate {t('dismiss')} ) : ( - + )} diff --git a/src/pages/Staking/BalancesUI/index.tsx b/src/pages/Staking/BalancesUI/index.tsx deleted file mode 100644 index 977e951896..0000000000 --- a/src/pages/Staking/BalancesUI/index.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import clsx from 'clsx'; -import { useTranslation } from 'react-i18next'; - -import { GOVERNANCE_TOKEN_SYMBOL, VOTE_GOVERNANCE_TOKEN_SYMBOL } from '@/config/relay-chains'; -import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; - -const Label = ({ className, ...rest }: React.ComponentPropsWithRef<'span'>) => ( - -); - -interface AmountCustomProps { - value: string; - tokenSymbol: string; -} - -const Amount = ({ className, value, tokenSymbol, ...rest }: AmountCustomProps & React.ComponentPropsWithRef<'div'>) => ( -
- {value} - {tokenSymbol} -
-); - -interface BalanceItemCustomProps { - label: string; - value: string; - tokenSymbol: string; - tooltip?: string; -} - -const BalanceItem = ({ - label, - value, - tokenSymbol, - tooltip, - ...rest -}: BalanceItemCustomProps & React.ComponentPropsWithRef<'div'>) => ( -
-
- - {tooltip && } -
- -
-); - -interface Props { - stakedAmount: string; - voteStakedAmount: string; - projectedRewardAmount: string; -} - -const BalancesUI = ({ stakedAmount, voteStakedAmount, projectedRewardAmount }: Props): JSX.Element => { - const { t } = useTranslation(); - - return ( -
- - - -
- ); -}; - -export default BalancesUI; diff --git a/src/pages/Staking/InformationUI/index.tsx b/src/pages/Staking/InformationUI/index.tsx deleted file mode 100644 index f9e081eaa8..0000000000 --- a/src/pages/Staking/InformationUI/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import clsx from 'clsx'; - -import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; - -interface CustomProps { - label: string; - value: string | number; - tooltip?: string; -} - -const InformationUI = ({ - label, - value, - tooltip, - className, - ...rest -}: CustomProps & React.ComponentPropsWithRef<'div'>): JSX.Element => { - return ( -
-
- {label} - {tooltip && } -
- - {value} - -
- ); -}; - -export default InformationUI; diff --git a/src/pages/Staking/LockTimeField/index.tsx b/src/pages/Staking/LockTimeField/index.tsx deleted file mode 100644 index 1e55b5f43c..0000000000 --- a/src/pages/Staking/LockTimeField/index.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import clsx from 'clsx'; -import * as React from 'react'; - -import { STAKE_LOCK_TIME } from '@/config/relay-chains'; -import NumberInput, { Props as NumberInputProps } from '@/legacy-components/NumberInput'; -import { TextFieldHelperText, TextFieldLabel } from '@/legacy-components/TextField'; -import { KUSAMA, POLKADOT } from '@/utils/constants/relay-chain-names'; - -// MEMO: inspired by https://medium.com/codex/making-html-5-numeric-inputs-only-accept-integers-d3d117973d56 -const integerRegexPattern = /\d/; -const handleLockTimeChange = (event: KeyboardEvent) => { - if (event.key.length > 1 || integerRegexPattern.test(event.key)) return; - - event.preventDefault(); -}; - -const LABEL_TEXT_COLOR_CLASSES = clsx( - { 'text-interlayTextSecondaryInLightMode': process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT }, - { 'dark:text-kintsugiTextSecondaryInDarkMode': process.env.REACT_APP_RELAY_CHAIN_NAME === KUSAMA } -); - -interface CustomProps { - optional?: boolean; - error?: boolean; - helperText?: JSX.Element | string; -} - -type Ref = HTMLInputElement; -const LockTimeField = React.forwardRef( - ({ optional, id, name, error, helperText, ...rest }, ref): JSX.Element => { - const wrappingRef = React.useRef(null); - - React.useEffect(() => { - if (!wrappingRef) return; - if (!wrappingRef.current) return; - - const wrappingRefCurrent = wrappingRef.current; - - wrappingRefCurrent.addEventListener('keydown', handleLockTimeChange); - - return () => { - wrappingRefCurrent.removeEventListener('keydown', handleLockTimeChange); - }; - }, []); - - return ( -
- - Total {STAKE_LOCK_TIME.MAX} Weeks - -
- {optional === true && ( -
- Extend lock time in weeks - (Optional): -
- )} - {optional === false && Choose lock time in weeks:} - {optional === undefined && Checking...} -
- - Weeks -
-
- - {helperText} - -
- ); - } -); -LockTimeField.displayName = 'LockTimeField'; - -export default LockTimeField; diff --git a/src/pages/Staking/Staking.style.tsx b/src/pages/Staking/Staking.style.tsx new file mode 100644 index 0000000000..894f9c0c54 --- /dev/null +++ b/src/pages/Staking/Staking.style.tsx @@ -0,0 +1,31 @@ +import styled from 'styled-components'; + +import { Flex, theme } from '@/component-library'; + +import { StakingForm } from './components'; + +const StyledWrapper = styled(Flex)` + width: 100%; + max-width: 840px; + margin: 0 auto; + flex-direction: column-reverse; + + @media ${theme.breakpoints.up('lg')} { + flex-direction: row; + } +`; + +const StyledStakingForm = styled(StakingForm)` + width: 100%; + flex: 1 1 540px; + + @media ${theme.breakpoints.up('lg')} { + min-width: 540px; + } +`; + +const StyledStakingDetails = styled(Flex)` + min-width: 290px; +`; + +export { StyledStakingDetails, StyledStakingForm, StyledWrapper }; diff --git a/src/pages/Staking/Staking.tsx b/src/pages/Staking/Staking.tsx new file mode 100644 index 0000000000..b6bdadf281 --- /dev/null +++ b/src/pages/Staking/Staking.tsx @@ -0,0 +1,49 @@ +import { MainContainer } from '@/components'; +import { useGetAccountStakingClaimableRewards } from '@/hooks/api/escrow/use-get-account-claimable-rewards'; +import { useGetAccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { useGetNetworkStakingData } from '@/hooks/api/escrow/uset-get-network-staking-data'; +import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner'; + +import { StakingAccountDetails } from './components'; +import { StakingWithdrawCard } from './components/StakingWithdrawCard'; +import { StyledStakingDetails, StyledStakingForm, StyledWrapper } from './Staking.style'; + +const Staking = (): JSX.Element => { + const { + data: accountData, + refetch: refetchAccountData, + isLoading: isAccountStakingDataLoading + } = useGetAccountStakingData(); + const { + data: claimableRewards, + refetch: refetchClaimableRewards, + isLoading: isClaimableRewardsLoading + } = useGetAccountStakingClaimableRewards(); + const { data: networkData } = useGetNetworkStakingData(); + + if ( + (isAccountStakingDataLoading && accountData === undefined) || + (isClaimableRewardsLoading && claimableRewards === undefined) || + networkData === undefined + ) { + return ; + } + + return ( + + + + + + {accountData && } + + + + ); +}; + +export default Staking; diff --git a/src/pages/Staking/TotalsUI/index.tsx b/src/pages/Staking/TotalsUI/index.tsx deleted file mode 100644 index 1a2ac6ed8b..0000000000 --- a/src/pages/Staking/TotalsUI/index.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; -import { useTranslation } from 'react-i18next'; -import { useQuery } from 'react-query'; -import { useSelector } from 'react-redux'; - -import { StoreType } from '@/common/types/util.types'; -import { displayMonetaryAmount } from '@/common/utils/utils'; -import { - GOVERNANCE_TOKEN_SYMBOL, - GovernanceTokenMonetaryAmount, - VOTE_GOVERNANCE_TOKEN_SYMBOL, - VoteGovernanceTokenMonetaryAmount -} from '@/config/relay-chains'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; - -import InformationUI from '../InformationUI'; - -const TotalsUI = (): JSX.Element => { - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); - - const { t } = useTranslation(); - - const { - isIdle: totalVoteGovernanceTokenAmountIdle, - isLoading: totalVoteGovernanceTokenAmountLoading, - data: totalVoteGovernanceTokenAmount, - error: totalVoteGovernanceTokenAmountError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'totalVotingSupply'], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(totalVoteGovernanceTokenAmountError); - - const { - isIdle: totalStakedGovernanceTokenAmountIdle, - isLoading: totalStakedGovernanceTokenAmountLoading, - data: totalStakedGovernanceTokenAmount, - error: totalStakedGovernanceTokenAmountError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'getTotalStakedBalance'], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(totalStakedGovernanceTokenAmountError); - - let totalVoteGovernanceTokenAmountLabel; - if (totalVoteGovernanceTokenAmountIdle || totalVoteGovernanceTokenAmountLoading) { - totalVoteGovernanceTokenAmountLabel = '-'; - } else { - if (totalVoteGovernanceTokenAmount === undefined) { - throw new Error('Something went wrong!'); - } - totalVoteGovernanceTokenAmountLabel = `${displayMonetaryAmount( - totalVoteGovernanceTokenAmount - )} ${VOTE_GOVERNANCE_TOKEN_SYMBOL}`; - } - - let totalStakedGovernanceTokenAmountLabel; - if (totalStakedGovernanceTokenAmountIdle || totalStakedGovernanceTokenAmountLoading) { - totalStakedGovernanceTokenAmountLabel = '-'; - } else { - if (totalStakedGovernanceTokenAmount === undefined) { - throw new Error('Something went wrong!'); - } - totalStakedGovernanceTokenAmountLabel = `${displayMonetaryAmount( - totalStakedGovernanceTokenAmount - )} ${GOVERNANCE_TOKEN_SYMBOL}`; - } - - return ( -
- - -
- ); -}; - -export default withErrorBoundary(TotalsUI, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); diff --git a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx new file mode 100644 index 0000000000..170a209e17 --- /dev/null +++ b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx @@ -0,0 +1,100 @@ +import { CurrencyExt } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Card, CardProps, Dd, Divider, Dl, DlGroup, Dt } from '@/component-library'; +import { AuthCTA, ClaimModal, IsAuthenticated } from '@/components'; +import { GOVERNANCE_TOKEN, VOTE_GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { AccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { Transaction, useTransaction } from '@/hooks/transaction'; + +type Props = { + accountData?: AccountStakingData | null; + claimableRewards?: MonetaryAmount; + onClaimRewards: () => void; +}; + +type InheritAttrs = CardProps & Props; + +type StakingAccountDetailsProps = Props & InheritAttrs; + +const StakingAccountDetails = ({ + accountData, + claimableRewards, + onClaimRewards, + ...props +}: StakingAccountDetailsProps): JSX.Element => { + const { t } = useTranslation(); + const [isOpen, setOpen] = useState(false); + + const transaction = useTransaction(Transaction.ESCROW_WITHDRAW_REWARDS, { + onSuccess: () => { + onClaimRewards(); + setOpen(false); + } + }); + + const handleSubmit = () => transaction.execute(); + + const handleOpen = () => transaction.fee.estimate(); + + const handlePress = () => setOpen(true); + + const { votingBalance, balance, projected } = accountData || {}; + + const hasClaimableRewards = !claimableRewards?.isZero(); + + return ( + <> + +
+ +
{t('staking_page.staked_ticker', { ticker: GOVERNANCE_TOKEN.ticker })}
+
+ {balance?.toHuman() || 0} +
+ + +
{t('ticker_balance', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })}
+
+ {votingBalance?.toHuman() || 0} +
+ + +
{t('staking_page.projected_ticker_rewards', { ticker: GOVERNANCE_TOKEN.ticker })}
+
+ {projected?.amount.toHuman() || 0} +
+ + + +
{t('claimable_rewards')}
+
+ {claimableRewards?.toHuman() || 0} {GOVERNANCE_TOKEN.ticker} +
+ +
+ {hasClaimableRewards && ( + + + {t('claim')} + + + )} + + setOpen(false)} + title={t('claim_rewards')} + submitLabel={t('claim')} + transaction={transaction} + onSubmit={handleSubmit} + onOpen={handleOpen} + /> + + ); +}; + +export { StakingAccountDetails }; +export type { StakingAccountDetailsProps }; diff --git a/src/pages/Staking/components/StakingAccountDetails/index.tsx b/src/pages/Staking/components/StakingAccountDetails/index.tsx new file mode 100644 index 0000000000..0491dc8648 --- /dev/null +++ b/src/pages/Staking/components/StakingAccountDetails/index.tsx @@ -0,0 +1,2 @@ +export type { StakingAccountDetailsProps } from './StakingAccountDetails'; +export { StakingAccountDetails } from './StakingAccountDetails'; diff --git a/src/pages/Staking/components/StakingForm/StakingForm.style.tsx b/src/pages/Staking/components/StakingForm/StakingForm.style.tsx new file mode 100644 index 0000000000..b6d14ced7f --- /dev/null +++ b/src/pages/Staking/components/StakingForm/StakingForm.style.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +import { List, theme } from '@/component-library'; + +const StyledList = styled(List)` + font-size: ${theme.text.xs}; +`; + +export { StyledList }; diff --git a/src/pages/Staking/components/StakingForm/StakingForm.tsx b/src/pages/Staking/components/StakingForm/StakingForm.tsx new file mode 100644 index 0000000000..5d702154f2 --- /dev/null +++ b/src/pages/Staking/components/StakingForm/StakingForm.tsx @@ -0,0 +1,281 @@ +import { CurrencyExt, newMonetaryAmount } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import { mergeProps } from '@react-aria/utils'; +import { ChangeEvent, useCallback, useEffect, useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { convertMonetaryAmountToValueInUSD, newSafeMonetaryAmount } from '@/common/utils/utils'; +import { Alert, Card, CardProps, Divider, Flex, H1, TokenInput } from '@/component-library'; +import { AuthCTA, TransactionFeeDetails } from '@/components'; +import { GOVERNANCE_TOKEN, STAKE_LOCK_TIME } from '@/config/relay-chains'; +import { AccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { useGetStakingDetailsData } from '@/hooks/api/escrow/use-get-staking-details-data'; +import { NetworkStakingData } from '@/hooks/api/escrow/uset-get-network-staking-data'; +import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; +import { useGetPrices } from '@/hooks/api/use-get-prices'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { isTransactionFormDisabled } from '@/hooks/transaction/utils/form'; +import { useWallet } from '@/hooks/use-wallet'; +import { + STAKING_AMOUNT_FIELD, + STAKING_FEE_TOKEN_FIELD, + STAKING_LOCKED_WEEKS_AMOUNT_FIELD, + StakingFormData, + stakingSchema, + useForm +} from '@/lib/form'; +import { pickSmallerAmount } from '@/utils/helpers/currencies'; +import { getTokenInputProps } from '@/utils/helpers/input'; +import { getTokenPrice } from '@/utils/helpers/prices'; +import { convertBlockNumbersToWeeks, convertWeeksToBlockNumbers } from '@/utils/helpers/staking'; + +import { StakingLockTimeInput } from './StakingLockTimeInput'; +import { StakingNetworkDetails } from './StakingNetworkDetails'; +import { StakingTransactionDetails } from './StakingTransactionDetails'; + +const MIN_AMOUNT = newMonetaryAmount(1, GOVERNANCE_TOKEN); + +type Props = { + accountData?: AccountStakingData | null; + networkData: NetworkStakingData; + onStaking: () => void; +}; + +type InheritAttrs = Omit; + +type StakingFormProps = Props & InheritAttrs; + +const StakingForm = ({ accountData, networkData, onStaking, ...props }: StakingFormProps): JSX.Element => { + const prices = useGetPrices(); + const { t } = useTranslation(); + const { data: balances, getAvailableBalance } = useGetBalances(); + const { account } = useWallet(); + + const { data: detailsData, mutate: mutateDetails } = useGetStakingDetailsData(); + + const transaction = useTransaction({ + onSuccess: () => { + form.resetForm(); + onStaking(); + } + }); + + const hasStake = !!accountData; + + const governanceBalance = getAvailableBalance(GOVERNANCE_TOKEN.ticker) || newMonetaryAmount(0, GOVERNANCE_TOKEN); + const inputBalance = accountData?.limit + ? governanceBalance && pickSmallerAmount(governanceBalance, accountData.limit) + : governanceBalance; + + const getTransactionArgs = useCallback( + async (values: StakingFormData) => { + const amount = newMonetaryAmount(values[STAKING_AMOUNT_FIELD] || 0, GOVERNANCE_TOKEN, true); + const weeksLocked = Number(values[STAKING_LOCKED_WEEKS_AMOUNT_FIELD]); + + const hasAmount = !amount.isZero(); + const hasWeeksLocked = weeksLocked > 0; + + if (accountData) { + const blockNumber = hasWeeksLocked ? convertWeeksToBlockNumbers(weeksLocked) : 0; + + const unlockHeight = accountData.unlock.block + blockNumber; + + if (hasAmount && hasWeeksLocked) { + return { transactionType: Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT as const, amount, unlockHeight }; + } else if (hasAmount && !hasWeeksLocked) { + return { transactionType: Transaction.ESCROW_INCREASE_LOCKED_AMOUNT as const, amount }; + } else { + return { transactionType: Transaction.ESCROW_INCREASE_LOCKED_TIME as const, unlockHeight }; + } + } else { + const currentBlockNumber = await window.bridge.system.getCurrentBlockNumber(); + const unlockHeight = currentBlockNumber + convertWeeksToBlockNumbers(weeksLocked); + + return { transactionType: Transaction.ESCROW_CREATE_LOCK as const, amount, unlockHeight }; + } + }, + [accountData] + ); + + const handleSubmit = async (values: StakingFormData) => { + const data = await getTransactionArgs(values); + + if (!data) return; + + let monetaryAmount = data.amount; + + if (monetaryAmount && transaction.fee.isEqualFeeCurrency(monetaryAmount.currency)) { + monetaryAmount = transaction.calculateAmountWithFeeDeducted(monetaryAmount); + } + + switch (data.transactionType) { + case Transaction.ESCROW_CREATE_LOCK: + return transaction.execute( + data.transactionType, + monetaryAmount as MonetaryAmount, + data.unlockHeight + ); + case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: + return transaction.execute( + data.transactionType, + monetaryAmount as MonetaryAmount, + data.unlockHeight + ); + case Transaction.ESCROW_INCREASE_LOCKED_AMOUNT: + return transaction.execute(data.transactionType, monetaryAmount as MonetaryAmount); + case Transaction.ESCROW_INCREASE_LOCKED_TIME: + return transaction.execute(data.transactionType, data.unlockHeight); + } + }; + + const lockedWeeksLimit = useMemo(() => { + if (!accountData) { + return { min: STAKE_LOCK_TIME.MIN, max: STAKE_LOCK_TIME.MAX }; + } + + const remainingWeeks = convertBlockNumbersToWeeks(accountData.unlock.remainingBlocks); + + return { min: 0, max: Math.floor(STAKE_LOCK_TIME.MAX - remainingWeeks) }; + }, [accountData]); + + const form = useForm({ + initialValues: { + [STAKING_AMOUNT_FIELD]: '', + [STAKING_LOCKED_WEEKS_AMOUNT_FIELD]: '', + [STAKING_FEE_TOKEN_FIELD]: transaction.fee.defaultCurrency.ticker + }, + validationSchema: stakingSchema( + { + [STAKING_AMOUNT_FIELD]: { + maxAmount: inputBalance, + minAmount: MIN_AMOUNT + }, + [STAKING_LOCKED_WEEKS_AMOUNT_FIELD]: lockedWeeksLimit + }, + hasStake + ), + onSubmit: handleSubmit, + onComplete: async (values) => { + if (accountData?.unlock.isAvailable) return; + + const data = await getTransactionArgs(values); + + if (!data) return; + + switch (data.transactionType) { + case Transaction.ESCROW_CREATE_LOCK: + return transaction.fee.estimate(data.transactionType, data.amount, data.unlockHeight); + case Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT: + return transaction.fee.estimate(data.transactionType, data.amount, data.unlockHeight); + case Transaction.ESCROW_INCREASE_LOCKED_AMOUNT: + return transaction.fee.estimate(data.transactionType, data.amount); + case Transaction.ESCROW_INCREASE_LOCKED_TIME: + return transaction.fee.estimate(data.transactionType, data.unlockHeight); + } + } + }); + + useEffect(() => { + form.validateForm(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [balances, accountData]); + + useEffect(() => { + handleDetails(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [accountData]); + + const handleDetails = (amountProp?: string, weeksLockedProp?: number) => { + if (!account || accountData?.unlock.isAvailable) return; + + const amount = amountProp || form.values[STAKING_AMOUNT_FIELD] || 0; + + const monetaryAmount = newSafeMonetaryAmount(amount, GOVERNANCE_TOKEN, true); + + const weeksLocked = + weeksLockedProp === undefined ? Number(form.values[STAKING_LOCKED_WEEKS_AMOUNT_FIELD]) : weeksLockedProp; + + mutateDetails({ amount: monetaryAmount, weeksLocked }); + }; + + const handleListSelectionChange = (value: number) => { + form.setFieldValue(STAKING_LOCKED_WEEKS_AMOUNT_FIELD, value, true); + + handleDetails(undefined, value); + }; + + const handleChangeAmount = (e: ChangeEvent) => { + const amount = e.target.value; + + handleDetails(amount); + }; + + const handleChangeLockTime = (e: ChangeEvent) => { + const weeksLocked = e.target.value; + + handleDetails(undefined, weeksLocked ? Number(weeksLocked) : 0); + }; + + const monetaryAmount = newSafeMonetaryAmount(form.values[STAKING_AMOUNT_FIELD] || 0, GOVERNANCE_TOKEN, true); + const amountUSD = monetaryAmount + ? convertMonetaryAmountToValueInUSD(monetaryAmount, getTokenPrice(prices, monetaryAmount.currency.ticker)?.usd) || 0 + : 0; + + const isBtnDisabled = accountData?.unlock.isAvailable || isTransactionFormDisabled(form, transaction.fee); + + const shouldDisplayWithdrawAlert = accountData?.unlock.isAvailable && form.dirty; + + return ( + +

+ {t('staking_page.stake_ticker', { ticker: GOVERNANCE_TOKEN.ticker })} +

+ + +
+ + + + + {shouldDisplayWithdrawAlert && ( + + {t('staking_pages.your_already_staked_ticker_needs_to_be_withdrawn', { + ticker: GOVERNANCE_TOKEN.ticker + })} + + )} + + + + + + {t('stake')} + + +
+ + + ); +}; + +export { StakingForm }; +export type { StakingFormProps }; diff --git a/src/pages/Staking/components/StakingForm/StakingLockTimeInput.tsx b/src/pages/Staking/components/StakingForm/StakingLockTimeInput.tsx new file mode 100644 index 0000000000..39153c3daa --- /dev/null +++ b/src/pages/Staking/components/StakingForm/StakingLockTimeInput.tsx @@ -0,0 +1,109 @@ +import { mergeProps } from '@react-aria/utils'; +import { Key, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { + Flex, + FlexProps, + InputProps, + ListItem, + ListProps, + NumberInput, + theme, + useMediaQuery +} from '@/component-library'; + +import { StyledList } from './StakingForm.style'; + +type Props = { + isExtending: boolean; + min: number; + max: number; + inputProps: InputProps; + onListSelectionChange?: (value: number) => void; +}; + +type InheritAttrs = Omit; + +type StakingLockTimeInputProps = Props & InheritAttrs; + +const StakingLockTimeInput = ({ + isExtending, + min, + max, + onListSelectionChange, + inputProps, + ...props +}: StakingLockTimeInputProps): JSX.Element => { + const { t } = useTranslation(); + + const [listLockTime, setListLockTime] = useState(inputProps.value?.toString() as Key); + + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + + const handleSelectionChange: ListProps['onSelectionChange'] = (key) => { + const [selectedKey] = [...key]; + + const value = Number(selectedKey); + + onListSelectionChange?.(value); + setListLockTime(selectedKey); + }; + + const items = useMemo( + () => [ + { label: t('staking_page.time.one_week'), value: '1' }, + { label: t('staking_page.time.one_month'), value: '4' }, + { label: t('staking_page.time.three_month'), value: '13' }, + { label: t('staking_page.time.six_month'), value: '26' }, + { label: t('max'), value: max.toString() } + ], + [max, t] + ); + + const isDisabled = max <= 0; + + const listKeys = useMemo(() => items.map((item) => item.value), [items]); + + const disabledKeys = isDisabled ? listKeys : listKeys.filter((key) => (key === 'max' ? max : Number(key)) > max); + + const label = isExtending + ? t('staking_page.extended_lock_time_in_weeks', { value: max }) + : t('staking_page.lock_time_in_weeks', { value: max }); + + return ( + + setListLockTime(undefined), + ...(!isMobile && { labelPosition: 'side', justifyContent: 'space-between', maxWidth: 'spacing12' }) + })} + /> + + {items.map((item) => ( + + {item.label} + + ))} + + + ); +}; + +export { StakingLockTimeInput }; +export type { StakingLockTimeInputProps }; diff --git a/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx b/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx new file mode 100644 index 0000000000..41e01c0b93 --- /dev/null +++ b/src/pages/Staking/components/StakingForm/StakingNetworkDetails.tsx @@ -0,0 +1,47 @@ +import { useTranslation } from 'react-i18next'; + +import { + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionDetailsProps +} from '@/components'; +import { GOVERNANCE_TOKEN, VOTE_GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { NetworkStakingData } from '@/hooks/api/escrow/uset-get-network-staking-data'; + +type Props = { + data: NetworkStakingData; +}; + +type InheritAttrs = Omit; + +type StakingNetworkDetailsProps = Props & InheritAttrs; + +const StakingNetworkDetails = ({ data, ...props }: StakingNetworkDetailsProps): JSX.Element => { + const { t } = useTranslation(); + + return ( + + + + {t('staking_page.total_staked_ticker_in_the_network', { ticker: GOVERNANCE_TOKEN.ticker })} + + + {data.totalStakedBalance.toHuman()} {GOVERNANCE_TOKEN.ticker} + + + + + {t('staking_page.total_ticker_in_the_network', { ticker: GOVERNANCE_TOKEN.ticker })} + + + {data.totalVotingSupply.toHuman()} {VOTE_GOVERNANCE_TOKEN.ticker} + + + + ); +}; + +export { StakingNetworkDetails }; +export type { StakingNetworkDetailsProps }; diff --git a/src/pages/Staking/components/StakingForm/StakingTransactionDetails.tsx b/src/pages/Staking/components/StakingForm/StakingTransactionDetails.tsx new file mode 100644 index 0000000000..0be0a834fa --- /dev/null +++ b/src/pages/Staking/components/StakingForm/StakingTransactionDetails.tsx @@ -0,0 +1,73 @@ +import { format } from 'date-fns'; +import { useTranslation } from 'react-i18next'; + +import { formatPercentage } from '@/common/utils/utils'; +import { + TransactionDetails, + TransactionDetailsDd, + TransactionDetailsDt, + TransactionDetailsGroup, + TransactionDetailsProps +} from '@/components'; +import { GOVERNANCE_TOKEN, VOTE_GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { AccountStakingDetailsData } from '@/hooks/api/escrow/use-get-staking-details-data'; +import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; + +type Props = { + hasStake: boolean; + data?: AccountStakingDetailsData; +}; + +type InheritAttrs = Omit; + +type StakingTransactionDetailsProps = Props & InheritAttrs; + +const StakingTransactionDetails = ({ hasStake, data, ...props }: StakingTransactionDetailsProps): JSX.Element => { + const { t } = useTranslation(); + + const { totalStaked, votingBalanceGained, apy, governanceBalanceReward, date } = data || {}; + + const unlockDateTerm = hasStake ? t('staking_page.new_unlock_date') : t('staking_page.unlock_date'); + + const unlockDateLabel = date ? format(date, YEAR_MONTH_DAY_PATTERN) : '-'; + + return ( + + + {unlockDateTerm} + {unlockDateLabel} + + + + {t('staking_page.new_ticker_gained', { ticker: VOTE_GOVERNANCE_TOKEN.ticker })} + + + {votingBalanceGained?.toHuman() || 0} {VOTE_GOVERNANCE_TOKEN.ticker} + + + {hasStake && ( + + {t('staking_page.new_total_stake')} + + {totalStaked?.toHuman() || 0} {VOTE_GOVERNANCE_TOKEN.ticker} + + + )} + + {t('staking_page.estimated_apr')} + {formatPercentage(apy?.toNumber() || 0)} + + + + {t('staking_page.projected_ticker_rewards', { ticker: GOVERNANCE_TOKEN.ticker })} + + + {governanceBalanceReward?.toHuman() || 0} {GOVERNANCE_TOKEN.ticker} + + + + ); +}; + +export { StakingTransactionDetails }; +export type { StakingTransactionDetailsProps }; diff --git a/src/pages/Staking/components/StakingForm/index.tsx b/src/pages/Staking/components/StakingForm/index.tsx new file mode 100644 index 0000000000..9559cf9a0a --- /dev/null +++ b/src/pages/Staking/components/StakingForm/index.tsx @@ -0,0 +1,2 @@ +export type { StakingFormProps } from './StakingForm'; +export { StakingForm } from './StakingForm'; diff --git a/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx b/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx new file mode 100644 index 0000000000..c6b8766717 --- /dev/null +++ b/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx @@ -0,0 +1,65 @@ +import { format } from 'date-fns'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Card, CardProps, P } from '@/component-library'; +import { AuthCTA, ClaimModal } from '@/components'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { AccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; +import { Transaction, useTransaction } from '@/hooks/transaction'; +import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; + +type Props = { + data: AccountStakingData; + onWithdraw: () => void; +}; + +type InheritAttrs = CardProps & Props; + +type StakingWithdrawCardProps = Props & InheritAttrs; + +const StakingWithdrawCard = ({ data, onWithdraw, ...props }: StakingWithdrawCardProps): JSX.Element => { + const { t } = useTranslation(); + const [isOpen, setOpen] = useState(false); + + const transaction = useTransaction(Transaction.ESCROW_WITHDRAW, { + onSuccess: () => { + onWithdraw(); + setOpen(false); + } + }); + + const handleSubmit = () => transaction.execute(); + + const handleOpen = () => transaction.fee.estimate(); + + const handlePress = () => setOpen(true); + + return ( + <> + +

+ {t('staking_page.withdraw_staked_ticker_on_date', { + ticker: GOVERNANCE_TOKEN.ticker + })}{' '} + {format(data.unlock.date, YEAR_MONTH_DAY_PATTERN)} +

+ + {t('withdraw')} + + + setOpen(false)} + title={t('staking_page.withdraw_staked_ticker', { ticker: GOVERNANCE_TOKEN.ticker })} + submitLabel={t('withdraw')} + transaction={transaction} + onSubmit={handleSubmit} + onOpen={handleOpen} + /> + + ); +}; + +export { StakingWithdrawCard }; +export type { StakingWithdrawCardProps }; diff --git a/src/pages/Staking/components/StakingWithdrawCard/index.tsx b/src/pages/Staking/components/StakingWithdrawCard/index.tsx new file mode 100644 index 0000000000..69ea4c54f1 --- /dev/null +++ b/src/pages/Staking/components/StakingWithdrawCard/index.tsx @@ -0,0 +1,2 @@ +export type { StakingWithdrawCardProps } from './StakingWithdrawCard'; +export { StakingWithdrawCard } from './StakingWithdrawCard'; diff --git a/src/pages/Staking/components/index.tsx b/src/pages/Staking/components/index.tsx new file mode 100644 index 0000000000..38c01ceaaa --- /dev/null +++ b/src/pages/Staking/components/index.tsx @@ -0,0 +1,2 @@ +export { StakingAccountDetails } from './StakingAccountDetails'; +export { StakingForm } from './StakingForm'; diff --git a/src/pages/Staking/index.tsx b/src/pages/Staking/index.tsx index 9f5f84e09f..bdb5bd5cbe 100644 --- a/src/pages/Staking/index.tsx +++ b/src/pages/Staking/index.tsx @@ -1,847 +1,3 @@ -import { newMonetaryAmount } from '@interlay/interbtc-api'; -import Big from 'big.js'; -import clsx from 'clsx'; -import { add, format } from 'date-fns'; -import * as React from 'react'; -import { useErrorHandler, withErrorBoundary } from 'react-error-boundary'; -import { useForm } from 'react-hook-form'; -import { useTranslation } from 'react-i18next'; -import { useQuery, useQueryClient } from 'react-query'; -import { useSelector } from 'react-redux'; +import Swap from './Staking'; -import { StoreType } from '@/common/types/util.types'; -import { - displayMonetaryAmount, - displayMonetaryAmountInUSDFormat, - formatNumber, - formatPercentage -} from '@/common/utils/utils'; -import { AuthCTA, MainContainer } from '@/components'; -import { BLOCK_TIME } from '@/config/parachain'; -import { - GOVERNANCE_TOKEN, - GOVERNANCE_TOKEN_SYMBOL, - GovernanceTokenMonetaryAmount, - STAKE_LOCK_TIME, - VOTE_GOVERNANCE_TOKEN, - VOTE_GOVERNANCE_TOKEN_SYMBOL, - VoteGovernanceTokenMonetaryAmount -} from '@/config/relay-chains'; -import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; -import { useGetPrices } from '@/hooks/api/use-get-prices'; -import { Transaction, useTransaction } from '@/hooks/transaction'; -import { useSignMessage } from '@/hooks/use-sign-message'; -import AvailableBalanceUI from '@/legacy-components/AvailableBalanceUI'; -import ErrorFallback from '@/legacy-components/ErrorFallback'; -import Panel from '@/legacy-components/Panel'; -import TitleWithUnderline from '@/legacy-components/TitleWithUnderline'; -import TokenField from '@/legacy-components/TokenField'; -import InformationTooltip from '@/legacy-components/tooltips/InformationTooltip'; -import { useSubstrateSecureState } from '@/lib/substrate'; -import genericFetcher, { GENERIC_FETCHER } from '@/services/fetchers/generic-fetcher'; -import { - STAKING_TRANSACTION_FEE_RESERVE_FETCHER, - stakingTransactionFeeReserveFetcher -} from '@/services/fetchers/staking-transaction-fee-reserve-fetcher'; -import { ZERO_GOVERNANCE_TOKEN_AMOUNT, ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT } from '@/utils/constants/currency'; -import { YEAR_MONTH_DAY_PATTERN } from '@/utils/constants/date-time'; -import { getTokenPrice } from '@/utils/helpers/prices'; - -import BalancesUI from './BalancesUI'; -import ClaimRewardsButton from './ClaimRewardsButton'; -import InformationUI from './InformationUI'; -import LockTimeField from './LockTimeField'; -import TotalsUI from './TotalsUI'; -import WithdrawButton from './WithdrawButton'; - -const SHARED_CLASSES = clsx('mx-auto', 'md:max-w-2xl'); - -const ONE_WEEK_SECONDS = 7 * 24 * 3600; - -const convertWeeksToBlockNumbers = (weeks: number) => { - return (weeks * ONE_WEEK_SECONDS) / BLOCK_TIME; -}; - -const convertBlockNumbersToWeeks = (blockNumbers: number) => { - return (blockNumbers * BLOCK_TIME) / ONE_WEEK_SECONDS; -}; - -// When to increase lock amount and extend lock time -const checkIncreaseLockAmountAndExtendLockTime = (lockTime: number, lockAmount: GovernanceTokenMonetaryAmount) => { - return lockTime > 0 && lockAmount.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT); -}; -// When to only increase lock amount -const checkOnlyIncreaseLockAmount = (lockTime: number, lockAmount: GovernanceTokenMonetaryAmount) => { - return lockTime === 0 && lockAmount.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT); -}; -// When to only extend lock time -const checkOnlyExtendLockTime = (lockTime: number, lockAmount: GovernanceTokenMonetaryAmount) => { - return lockTime > 0 && lockAmount.eq(ZERO_GOVERNANCE_TOKEN_AMOUNT); -}; - -const LOCKING_AMOUNT = 'locking-amount'; -const LOCK_TIME = 'lock-time'; - -type StakingFormData = { - [LOCKING_AMOUNT]: string; - [LOCK_TIME]: string; -}; - -interface EstimatedRewardAmountAndAPY { - amount: GovernanceTokenMonetaryAmount; - apy: Big; -} - -interface StakedAmountAndEndBlock { - amount: GovernanceTokenMonetaryAmount; - endBlock: number; -} - -const Staking = (): JSX.Element => { - const [blockLockTimeExtension, setBlockLockTimeExtension] = React.useState(0); - - const { t } = useTranslation(); - const prices = useGetPrices(); - - const { selectedAccount } = useSubstrateSecureState(); - - const selectedAccountAddress = selectedAccount?.address ?? ''; - - const { bridgeLoaded } = useSelector((state: StoreType) => state.general); - - const { data: balances, isLoading: isBalancesLoading } = useGetBalances(); - const governanceTokenBalance = balances?.[GOVERNANCE_TOKEN.ticker]; - - const queryClient = useQueryClient(); - - const { hasSignature } = useSignMessage(); - - const { - register, - handleSubmit, - watch, - reset, - formState: { errors, isValid, isValidating }, - trigger, - setValue - } = useForm({ - mode: 'onChange', // 'onBlur' - defaultValues: { - [LOCKING_AMOUNT]: '0', - [LOCK_TIME]: '0' - } - }); - const lockingAmount = watch(LOCKING_AMOUNT) || '0'; - const lockTime = watch(LOCK_TIME) || '0'; - - const { - isIdle: currentBlockNumberIdle, - isLoading: currentBlockNumberLoading, - data: currentBlockNumber, - error: currentBlockNumberError - } = useQuery([GENERIC_FETCHER, 'system', 'getCurrentBlockNumber'], genericFetcher(), { - enabled: !!bridgeLoaded - }); - useErrorHandler(currentBlockNumberError); - - const { - isIdle: voteGovernanceTokenBalanceIdle, - isLoading: voteGovernanceTokenBalanceLoading, - data: voteGovernanceTokenBalance, - error: voteGovernanceTokenBalanceError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'votingBalance', selectedAccountAddress], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(voteGovernanceTokenBalanceError); - - // My currently claimable rewards - const { - isIdle: claimableRewardAmountIdle, - isLoading: claimableRewardAmountLoading, - data: claimableRewardAmount, - error: claimableRewardAmountError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'getRewards', selectedAccountAddress], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(claimableRewardAmountError); - - // Projected governance token rewards - const { - isIdle: projectedRewardAmountAndAPYIdle, - isLoading: projectedRewardAmountAndAPYLoading, - data: projectedRewardAmountAndAPY, - error: rewardAmountAndAPYError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'getRewardEstimate', selectedAccountAddress], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(rewardAmountAndAPYError); - - // Estimated governance token Rewards & APY - const monetaryLockingAmount = newMonetaryAmount(lockingAmount, GOVERNANCE_TOKEN, true); - const { - isLoading: estimatedRewardAmountAndAPYLoading, - data: estimatedRewardAmountAndAPY, - error: estimatedRewardAmountAndAPYError, - refetch: estimatedRewardAmountAndAPYRefetch - } = useQuery( - [ - GENERIC_FETCHER, - 'escrow', - 'getRewardEstimate', - selectedAccountAddress, - monetaryLockingAmount, - blockLockTimeExtension - ], - genericFetcher(), - { - enabled: false, - retry: false - } - ); - useErrorHandler(estimatedRewardAmountAndAPYError); - - const { - isIdle: stakedAmountAndEndBlockIdle, - isLoading: stakedAmountAndEndBlockLoading, - data: stakedAmountAndEndBlock, - error: stakedAmountAndEndBlockError - } = useQuery( - [GENERIC_FETCHER, 'escrow', 'getStakedBalance', selectedAccountAddress], - genericFetcher(), - { - enabled: !!bridgeLoaded - } - ); - useErrorHandler(stakedAmountAndEndBlockError); - - const { - isIdle: transactionFeeReserveIdle, - isLoading: transactionFeeReserveLoading, - data: transactionFeeReserve, - error: transactionFeeReserveError - } = useQuery( - [STAKING_TRANSACTION_FEE_RESERVE_FETCHER, selectedAccountAddress], - stakingTransactionFeeReserveFetcher(selectedAccountAddress), - { - enabled: bridgeLoaded && !!selectedAccount - } - ); - useErrorHandler(transactionFeeReserveError); - - const initialStakeTransaction = useTransaction(Transaction.ESCROW_CREATE_LOCK, { - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); - reset({ - [LOCKING_AMOUNT]: '0.0', - [LOCK_TIME]: '0' - }); - } - }); - - const existingStakeTransaction = useTransaction({ - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); - reset({ - [LOCKING_AMOUNT]: '0.0', - [LOCK_TIME]: '0' - }); - } - }); - - React.useEffect(() => { - if (isValidating || !isValid || !estimatedRewardAmountAndAPYRefetch) return; - - estimatedRewardAmountAndAPYRefetch(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isValid, isValidating, lockTime, lockingAmount, estimatedRewardAmountAndAPYRefetch]); - - React.useEffect(() => { - if (!lockTime) return; - if (!currentBlockNumber) return; - - const lockTimeValue = Number(lockTime); - const extensionTime = - (stakedAmountAndEndBlock?.endBlock || currentBlockNumber) + convertWeeksToBlockNumbers(lockTimeValue); - - setBlockLockTimeExtension(extensionTime); - }, [currentBlockNumber, lockTime, stakedAmountAndEndBlock]); - - React.useEffect(() => { - queryClient.invalidateQueries({ queryKey: [GENERIC_FETCHER, 'escrow'] }); - reset({ - [LOCKING_AMOUNT]: '', - [LOCK_TIME]: '' - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedAccount, reset]); - - const votingBalanceGreaterThanZero = voteGovernanceTokenBalance?.gt(ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT); - - const extendLockTimeSet = votingBalanceGreaterThanZero && parseInt(lockTime) > 0; - const increaseLockingAmountSet = - votingBalanceGreaterThanZero && monetaryLockingAmount.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT); - - React.useEffect(() => { - if (extendLockTimeSet) { - trigger(LOCKING_AMOUNT); - } - }, [lockTime, extendLockTimeSet, trigger]); - - React.useEffect(() => { - if (increaseLockingAmountSet) { - trigger(LOCK_TIME); - } - }, [lockingAmount, increaseLockingAmountSet, trigger]); - - const getStakedAmount = () => { - if (stakedAmountAndEndBlockIdle || stakedAmountAndEndBlockLoading) { - return undefined; - } - if (stakedAmountAndEndBlock === undefined) { - throw new Error('Something went wrong!'); - } - - return stakedAmountAndEndBlock.amount; - }; - const stakedAmount = getStakedAmount(); - - const availableBalance = React.useMemo(() => { - if ( - isBalancesLoading || - stakedAmountAndEndBlockIdle || - stakedAmountAndEndBlockLoading || - transactionFeeReserveIdle || - transactionFeeReserveLoading - ) - return; - if (stakedAmount === undefined) { - throw new Error('Staked amount value returned undefined!'); - } - if (transactionFeeReserve === undefined) { - throw new Error('Transaction fee reserve value returned undefined!'); - } - if (governanceTokenBalance === undefined) { - throw new Error('Governance token balance value returned undefined!'); - } - - const calculatedBalance = governanceTokenBalance.free.sub(stakedAmount).sub(transactionFeeReserve); - - return calculatedBalance.toBig().gte(0) ? calculatedBalance : newMonetaryAmount(0, GOVERNANCE_TOKEN); - }, [ - isBalancesLoading, - governanceTokenBalance, - stakedAmountAndEndBlockIdle, - stakedAmountAndEndBlockLoading, - stakedAmount, - transactionFeeReserveIdle, - transactionFeeReserveLoading, - transactionFeeReserve - ]); - - const onSubmit = (data: StakingFormData) => { - if (!bridgeLoaded) return; - if (currentBlockNumber === undefined) { - throw new Error('Something went wrong!'); - } - - const lockingAmountWithFallback = data[LOCKING_AMOUNT] || '0'; - const lockTimeWithFallback = data[LOCK_TIME] || '0'; // Weeks - - const monetaryAmount = newMonetaryAmount(lockingAmountWithFallback, GOVERNANCE_TOKEN, true); - const numberTime = parseInt(lockTimeWithFallback); - - if (votingBalanceGreaterThanZero) { - if (stakedAmountAndEndBlock === undefined) { - throw new Error('Something went wrong!'); - } - - if (checkIncreaseLockAmountAndExtendLockTime(numberTime, monetaryAmount)) { - const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(numberTime); - - existingStakeTransaction.execute( - Transaction.ESCROW_INCREASE_LOOKED_TIME_AND_AMOUNT, - monetaryAmount.toString(true), - unlockHeight - ); - } else if (checkOnlyIncreaseLockAmount(numberTime, monetaryAmount)) { - existingStakeTransaction.execute(Transaction.ESCROW_INCREASE_LOCKED_AMOUNT, monetaryAmount); - } else if (checkOnlyExtendLockTime(numberTime, monetaryAmount)) { - const unlockHeight = stakedAmountAndEndBlock.endBlock + convertWeeksToBlockNumbers(numberTime); - - existingStakeTransaction.execute(Transaction.ESCROW_INCREASE_LOCKED_TIME, unlockHeight); - } else { - throw new Error('Something went wrong!'); - } - } else { - const unlockHeight = currentBlockNumber + convertWeeksToBlockNumbers(numberTime); - initialStakeTransaction.execute(monetaryAmount, unlockHeight); - } - }; - - const validateLockingAmount = (value: string): string | undefined => { - const valueWithFallback = value || '0'; - const monetaryLockingAmount = newMonetaryAmount(valueWithFallback, GOVERNANCE_TOKEN, true); - - if (!extendLockTimeSet && monetaryLockingAmount.lte(ZERO_GOVERNANCE_TOKEN_AMOUNT)) { - return 'Locking amount must be greater than zero!'; - } - - if (availableBalance === undefined) { - throw new Error('Something went wrong!'); - } - if (monetaryLockingAmount.gt(availableBalance)) { - return 'Locking amount must not be greater than available balance!'; - } - - const planckLockingAmount = monetaryLockingAmount.toBig(0); - const lockBlocks = convertWeeksToBlockNumbers(parseInt(lockTime)); - // This is related to the on-chain implementation where currency values are integers. - // So less tokens than the period would likely round to 0. - // So on the UI, as long as you require more planck to be locked than the number of blocks the user locks for, - // it should be good. - if (!extendLockTimeSet && planckLockingAmount.lte(Big(lockBlocks))) { - return 'Planck to be locked must be greater than the number of blocks you lock for!'; - } - - return undefined; - }; - - const validateLockTime = (value: string): string | undefined => { - const valueWithFallback = value || '0'; - const numericValue = parseInt(valueWithFallback); - - if (votingBalanceGreaterThanZero && numericValue === 0 && monetaryLockingAmount.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT)) { - return undefined; - } - - if (availableLockTime === undefined) { - throw new Error('Something went wrong!'); - } - if (numericValue < STAKE_LOCK_TIME.MIN || numericValue > availableLockTime) { - return `Please enter a number between ${STAKE_LOCK_TIME.MIN}-${availableLockTime}.`; - } - - return undefined; - }; - - const renderVoteStakedAmountLabel = () => { - if (voteGovernanceTokenBalanceIdle || voteGovernanceTokenBalanceLoading) { - return '-'; - } - if (voteGovernanceTokenBalance === undefined) { - throw new Error('Something went wrong!'); - } - - return displayMonetaryAmount(voteGovernanceTokenBalance); - }; - - const renderProjectedRewardAmountLabel = () => { - if (projectedRewardAmountAndAPYIdle || projectedRewardAmountAndAPYLoading) { - return '-'; - } - if (projectedRewardAmountAndAPY === undefined) { - throw new Error('Something went wrong!'); - } - - return displayMonetaryAmount(projectedRewardAmountAndAPY.amount); - }; - - const renderStakedAmountLabel = () => { - return stakedAmount === undefined ? '-' : displayMonetaryAmount(stakedAmount); - }; - - const hasStakedAmount = stakedAmount?.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT); - - const getRemainingBlockNumbersToUnstake = () => { - if ( - stakedAmountAndEndBlockIdle || - stakedAmountAndEndBlockLoading || - currentBlockNumberIdle || - currentBlockNumberLoading - ) { - return undefined; - } - if (stakedAmountAndEndBlock === undefined) { - throw new Error('Something went wrong!'); - } - if (currentBlockNumber === undefined) { - throw new Error('Something went wrong!'); - } - - return hasStakedAmount - ? stakedAmountAndEndBlock.endBlock - currentBlockNumber // If the user has staked - : null; // If the user has not staked - }; - const remainingBlockNumbersToUnstake = getRemainingBlockNumbersToUnstake(); - - const getAvailableLockTime = () => { - if (remainingBlockNumbersToUnstake === undefined) { - return undefined; - } - - // If the user has staked - if (hasStakedAmount) { - if (remainingBlockNumbersToUnstake === null) { - throw new Error('Something went wrong!'); - } - const remainingWeeksToUnstake = convertBlockNumbersToWeeks(remainingBlockNumbersToUnstake); - - return Math.floor(STAKE_LOCK_TIME.MAX - remainingWeeksToUnstake); - // If the user has not staked - } else { - return STAKE_LOCK_TIME.MAX; - } - }; - const availableLockTime = getAvailableLockTime(); - - const availableMonetaryBalance = availableBalance?.toHuman(5); - - const renderUnlockDateLabel = () => { - if (errors[LOCK_TIME]) { - return '-'; - } - - const unlockDate = add(new Date(), { - weeks: parseInt(lockTime) - }); - - return format(unlockDate, YEAR_MONTH_DAY_PATTERN); - }; - - const renderNewUnlockDateLabel = () => { - if (remainingBlockNumbersToUnstake === undefined) { - return '-'; - } - if (errors[LOCK_TIME]) { - return '-'; - } - - let remainingLockSeconds; - if (hasStakedAmount) { - if (remainingBlockNumbersToUnstake === null) { - throw new Error('Something went wrong!'); - } - - remainingLockSeconds = remainingBlockNumbersToUnstake * BLOCK_TIME; - } else { - remainingLockSeconds = 0; - } - const unlockDate = add(new Date(), { - weeks: parseInt(lockTime), - seconds: remainingLockSeconds - }); - - return format(unlockDate, YEAR_MONTH_DAY_PATTERN); - }; - - const renderNewVoteGovernanceTokenGainedLabel = () => { - const newTotalStakeAmount = getNewTotalStake(); - if (voteGovernanceTokenBalance === undefined || newTotalStakeAmount === undefined || !isValid) { - return '-'; - } - - const newVoteGovernanceTokenAmountGained = newTotalStakeAmount.sub(voteGovernanceTokenBalance); - const rounded = newVoteGovernanceTokenAmountGained.toBig().round(5); - const typed = newMonetaryAmount(rounded, VOTE_GOVERNANCE_TOKEN, true); - - return `${displayMonetaryAmount(typed)} ${VOTE_GOVERNANCE_TOKEN_SYMBOL}`; - }; - - const getNewTotalStake = () => { - if (remainingBlockNumbersToUnstake === undefined || stakedAmount === undefined || !isValid) { - return undefined; - } - - const extendingLockTime = parseInt(lockTime); // Weeks - - let newLockTime: number; - let newLockingAmount: GovernanceTokenMonetaryAmount; - if (remainingBlockNumbersToUnstake === null) { - // If the user has not staked - newLockTime = extendingLockTime; - newLockingAmount = monetaryLockingAmount; - } else { - // If the user has staked - const currentLockTime = convertBlockNumbersToWeeks(remainingBlockNumbersToUnstake); // Weeks - - // New lock-time that is applied to the entire staked governance token - newLockTime = currentLockTime + extendingLockTime; // Weeks - - // New total staked governance token - newLockingAmount = monetaryLockingAmount.add(stakedAmount); - } - - // Multiplying the new total staked governance token with the staking time divided by the maximum lock time - return newLockingAmount.mul(newLockTime).div(STAKE_LOCK_TIME.MAX); - }; - - const renderNewTotalStakeLabel = () => { - const newTotalStakeAmount = getNewTotalStake(); - if (newTotalStakeAmount === undefined) { - return '-'; - } - - return `${displayMonetaryAmount(newTotalStakeAmount)} ${VOTE_GOVERNANCE_TOKEN_SYMBOL}`; - }; - - const renderEstimatedAPYLabel = () => { - if ( - estimatedRewardAmountAndAPYLoading || - !projectedRewardAmountAndAPY || - errors[LOCK_TIME] || - errors[LOCKING_AMOUNT] - ) { - return '-'; - } - if (estimatedRewardAmountAndAPY === undefined) { - return formatPercentage(projectedRewardAmountAndAPY.apy.toNumber()); - } - - return formatPercentage(estimatedRewardAmountAndAPY.apy.toNumber()); - }; - - const renderEstimatedRewardAmountLabel = () => { - if ( - estimatedRewardAmountAndAPYLoading || - !projectedRewardAmountAndAPY || - errors[LOCK_TIME] || - errors[LOCKING_AMOUNT] - ) { - return '-'; - } - if (estimatedRewardAmountAndAPY === undefined) { - return `${displayMonetaryAmount(projectedRewardAmountAndAPY.amount)} ${GOVERNANCE_TOKEN_SYMBOL}`; - } - - return `${displayMonetaryAmount(estimatedRewardAmountAndAPY.amount)} ${GOVERNANCE_TOKEN_SYMBOL}`; - }; - - const renderClaimableRewardAmountLabel = () => { - if (claimableRewardAmountIdle || claimableRewardAmountLoading) { - return '-'; - } - if (claimableRewardAmount === undefined) { - throw new Error('Something went wrong!'); - } - - return displayMonetaryAmount(claimableRewardAmount); - }; - - const valueInUSDOfLockingAmount = displayMonetaryAmountInUSDFormat( - monetaryLockingAmount, - getTokenPrice(prices, GOVERNANCE_TOKEN_SYMBOL)?.usd - ); - - const handleClickBalance = () => { - setValue(LOCKING_AMOUNT, availableMonetaryBalance || '0'); - trigger(LOCKING_AMOUNT); - }; - - const claimRewardsButtonEnabled = claimableRewardAmount?.gt(ZERO_GOVERNANCE_TOKEN_AMOUNT); - - const unlockFirst = - hasStakedAmount && - // eslint-disable-next-line max-len - // `remainingBlockNumbersToUnstake !== null` is redundant because if `hasStakedAmount` is truthy `remainingBlockNumbersToUnstake` cannot be null - remainingBlockNumbersToUnstake !== null && - remainingBlockNumbersToUnstake !== undefined && - remainingBlockNumbersToUnstake <= 0; - - const accountSet = !!selectedAccount; - - const lockTimeFieldDisabled = - votingBalanceGreaterThanZero === undefined || - remainingBlockNumbersToUnstake === undefined || - availableLockTime === undefined || - availableLockTime <= 0 || - unlockFirst; - - const lockingAmountFieldDisabled = availableBalance === undefined; - - const initializing = - currentBlockNumberIdle || - currentBlockNumberLoading || - voteGovernanceTokenBalanceIdle || - voteGovernanceTokenBalanceLoading || - claimableRewardAmountIdle || - claimableRewardAmountLoading || - projectedRewardAmountAndAPYIdle || - projectedRewardAmountAndAPYLoading || - estimatedRewardAmountAndAPYLoading || - stakedAmountAndEndBlockIdle || - stakedAmountAndEndBlockLoading; - - let submitButtonLabel: string; - if (initializing) { - submitButtonLabel = 'Loading...'; - } else { - if (accountSet) { - // TODO: should improve readability by handling nested conditions - if (votingBalanceGreaterThanZero) { - const numericLockTime = parseInt(lockTime); - if (checkIncreaseLockAmountAndExtendLockTime(numericLockTime, monetaryLockingAmount)) { - submitButtonLabel = 'Add more stake and extend lock time'; - } else if (checkOnlyIncreaseLockAmount(numericLockTime, monetaryLockingAmount)) { - submitButtonLabel = 'Add more stake'; - } else if (checkOnlyExtendLockTime(numericLockTime, monetaryLockingAmount)) { - submitButtonLabel = 'Extend lock time'; - } else { - submitButtonLabel = 'Stake'; - } - } else { - submitButtonLabel = 'Stake'; - } - } else { - submitButtonLabel = t('connect_wallet'); - } - } - - return ( - <> - - -
- - - - {/* eslint-disable-next-line max-len */} - {/* `remainingBlockNumbersToUnstake !== null` is redundant because if `hasStakedAmount` is truthy `remainingBlockNumbersToUnstake` cannot be null */} - {hasStakedAmount && remainingBlockNumbersToUnstake !== null && hasSignature && ( - - )} - -
- - validateLockingAmount(value) - })} - approxUSD={`≈ ${valueInUSDOfLockingAmount}`} - error={!!errors[LOCKING_AMOUNT]} - helperText={errors[LOCKING_AMOUNT]?.message} - disabled={lockingAmountFieldDisabled} - /> -
- validateLockTime(value) - })} - error={!!errors[LOCK_TIME]} - helperText={errors[LOCK_TIME]?.message} - optional={votingBalanceGreaterThanZero} - disabled={lockTimeFieldDisabled} - /> - {votingBalanceGreaterThanZero ? ( - - ) : ( - - )} - - {votingBalanceGreaterThanZero && ( - - )} - - - - {submitButtonLabel}{' '} - {unlockFirst ? ( - - ) : null} - - -
- - - ); -}; - -export default withErrorBoundary(Staking, { - FallbackComponent: ErrorFallback, - onReset: () => { - window.location.reload(); - } -}); +export default Swap; diff --git a/src/pages/Wallet/WalletOverview/WalletOverview.tsx b/src/pages/Wallet/WalletOverview/WalletOverview.tsx index df181e2468..aa771f9f53 100644 --- a/src/pages/Wallet/WalletOverview/WalletOverview.tsx +++ b/src/pages/Wallet/WalletOverview/WalletOverview.tsx @@ -2,7 +2,6 @@ import { LoanPositionsTable, MainContainer, PoolsTable } from '@/components'; import { useGetAccountPools } from '@/hooks/api/amm/use-get-account-pools'; import { useGetLiquidityPools } from '@/hooks/api/amm/use-get-liquidity-pools'; import { useGetAccountStakingData } from '@/hooks/api/escrow/use-get-account-staking-data'; -import { useGetAccountVotingBalance } from '@/hooks/api/escrow/use-get-account-voting-balance'; import { useGetAccountPositions } from '@/hooks/api/loans/use-get-account-positions'; import { useGetLoanAssets } from '@/hooks/api/loans/use-get-loan-assets'; import { useGetBalances } from '@/hooks/api/tokens/use-get-balances'; @@ -21,7 +20,6 @@ const WalletOverview = (): JSX.Element => { const { data: accountPoolsData } = useGetAccountPools(); const { data: liquidityPools } = useGetLiquidityPools(); const { data: accountStakingData } = useGetAccountStakingData(); - const { data: accountVotingBalance } = useGetAccountVotingBalance(); const { data: { borrowPositions, lendPositions } } = useGetAccountPositions(); @@ -33,11 +31,6 @@ const WalletOverview = (): JSX.Element => { const handleCloseBanner = () => setBannerOpen(false); - const hasStakingTable = - accountStakingData && - accountVotingBalance && - (!accountStakingData?.balance.isZero() || !accountVotingBalance?.isZero()); - const pooledTickers = liquidityPools && getPooledTickers(liquidityPools); return ( @@ -54,7 +47,7 @@ const WalletOverview = (): JSX.Element => { {!!accountPoolsData?.positions.length && ( )} - {hasStakingTable && } + {accountStakingData && } ); }; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx index 7aec2bbd23..aa52542d17 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx @@ -6,24 +6,30 @@ import { useDispatch } from 'react-redux'; import { showBuyModal } from '@/common/actions/general.actions'; import { CTA, CTALink, CTAProps, Divider, Flex, theme } from '@/component-library'; import { useMediaQuery } from '@/component-library/utils/use-media-query'; +import { BIFROST_SWAP_LINK } from '@/config/links'; import { WRAPPED_TOKEN } from '@/config/relay-chains'; import { Transaction, useTransaction } from '@/hooks/transaction'; import { usePageQueryParams } from '@/hooks/use-page-query-params'; +import { BIFROST_RELAY_CHAIN_NATIVE_TOKEN } from '@/utils/constants/currency'; import { PAGES, QUERY_PARAMETERS, QUERY_PARAMETERS_VALUES } from '@/utils/constants/links'; +const EXTERNAL_SWAP_LINKS = { + [BIFROST_RELAY_CHAIN_NATIVE_TOKEN]: BIFROST_SWAP_LINK +}; + type ActionsCellProps = { currency: CurrencyExt; isWrappedToken: boolean; isRedeemable: boolean; - isPooledAsset: boolean; isGovernanceToken: boolean; isVestingClaimable: boolean; + swappableToken?: 'internal' | 'external'; }; const ActionsCell = ({ currency, + swappableToken, isGovernanceToken, - isPooledAsset, isRedeemable, isVestingClaimable, isWrappedToken @@ -76,7 +82,7 @@ const ActionsCell = ({ {t('redeem')} )} - {isPooledAsset && ( + {swappableToken === 'internal' ? ( {t('amm.swap')} - )} + ) : swappableToken === 'external' ? ( + + {t('amm.swap')} + + ) : undefined} {isGovernanceToken && ( <> @@ -118,5 +128,5 @@ const ActionsCell = ({ ); }; -export { ActionsCell }; +export { ActionsCell, EXTERNAL_SWAP_LINKS }; export type { ActionsCellProps }; diff --git a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx index 96a9548a34..1fbfcbe7e9 100644 --- a/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx +++ b/src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/AvailableAssetsTable.tsx @@ -17,7 +17,7 @@ import { EXTERNAL_QUERY_PARAMETERS } from '@/utils/constants/links'; import { getCoinIconProps } from '@/utils/helpers/coin-icon'; import { getTokenPrice } from '@/utils/helpers/prices'; -import { ActionsCell } from './ActionsCell'; +import { ActionsCell, EXTERNAL_SWAP_LINKS } from './ActionsCell'; const queryString = require('query-string'); @@ -102,15 +102,19 @@ const AvailableAssetsTable = ({ balances, pooledTickers }: AvailableAssetsTableP const isWrappedToken = isCurrencyEqual(currency, WRAPPED_TOKEN); const isRedeemable = isWrappedToken && !transferable.isZero(); - const isPooledAsset = !!pooledTickers?.has(currency.ticker); + const swappableToken = pooledTickers?.has(currency.ticker) + ? 'internal' + : Object.keys(EXTERNAL_SWAP_LINKS).includes(currency.ticker) + ? 'external' + : undefined; const isGovernanceToken = isCurrencyEqual(currency, GOVERNANCE_TOKEN); const isVestingClaimable = isGovernanceToken && !!vestingData?.isClaimable; - const hasActions = isRedeemable || isPooledAsset || isVestingClaimable; + const hasActions = isRedeemable || !!swappableToken || isVestingClaimable; const actions = hasActions ? ( ; + data: AccountStakingData; }; -const StakingTable = ({ data, votingBalance }: StakingTableProps): JSX.Element => { +const StakingTable = ({ data }: StakingTableProps): JSX.Element => { const { t } = useTranslation(); const titleId = useId(); const prices = useGetPrices(); @@ -55,7 +52,7 @@ const StakingTable = ({ data, votingBalance }: StakingTableProps): JSX.Element = ]; const rows = useMemo((): StakingTableRows[] => { - const { balance, unlock } = data; + const { balance, unlock, votingBalance } = data; const stakingBalancePrice = convertMonetaryAmountToValueInUSD(balance, getTokenPrice(prices, balance.currency.ticker)?.usd) || 0; @@ -88,7 +85,7 @@ const StakingTable = ({ data, votingBalance }: StakingTableProps): JSX.Element = } ]; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [prices, data, votingBalance]); + }, [prices, data]); return ; }; diff --git a/src/test/mocks/@interlay/interbtc-api/index.ts b/src/test/mocks/@interlay/interbtc-api/index.ts index 1a13b8bf07..e32b7513ec 100644 --- a/src/test/mocks/@interlay/interbtc-api/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/index.ts @@ -8,6 +8,7 @@ import { Signer } from '@polkadot/types/types'; import { MOCK_AMM, MOCK_API, + MOCK_ESCROW, MOCK_LOANS, MOCK_SYSTEM, MOCK_TOKENS, @@ -36,7 +37,6 @@ import { mockVaultsGetVaultsWithRedeemableTokens } from './parachain'; import { mockGetForeignAssets } from './parachain/assetRegistry'; -import { mockGetStakedBalance, mockVotingBalance } from './parachain/escrow'; const mockSetAccount = jest.fn((_account: AddressOrPair, _signer?: Signer) => undefined); @@ -88,10 +88,7 @@ const mockInterBtcApi: Partial> = { getVaultsWithRedeemableTokens: mockVaultsGetVaultsWithRedeemableTokens }, amm: MOCK_AMM.MODULE, - escrow: { - getStakedBalance: mockGetStakedBalance, - votingBalance: mockVotingBalance - }, + escrow: MOCK_ESCROW.MODULE, transaction: MOCK_TRANSACTION.MODULE }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/api.ts b/src/test/mocks/@interlay/interbtc-api/parachain/api.ts index 3381938359..4f707e4595 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/api.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/api.ts @@ -1,8 +1,11 @@ +import { newMonetaryAmount } from '@interlay/interbtc-api'; import { ApiPromise } from '@polkadot/api'; import { Text, TypeRegistry } from '@polkadot/types'; import { Registry } from '@polkadot/types/types'; import Big from 'big.js'; +import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; + import { EXTRINSIC } from '../extrinsic'; const REGISTRY = ({ chainDecimals: [], chainSS58: 0, chainTokens: [] } as unknown) as Registry; @@ -22,7 +25,9 @@ const DATA = { VESTING_SCHEDULES }; // add here mocks that are being manipulated in tests const MODULE = { vestingSchedules: jest.fn().mockReturnValue(VESTING_SCHEDULES.EMPTY), - claimVesting: jest.fn().mockReturnValue(EXTRINSIC) + claimVesting: jest.fn().mockReturnValue(EXTRINSIC), + batchAll: jest.fn().mockReturnValue(EXTRINSIC), + freeStakable: jest.fn().mockResolvedValue(newMonetaryAmount(10000000000000, GOVERNANCE_TOKEN, true)) }; // maps module to ApiPromise @@ -33,6 +38,9 @@ const PROMISE: Partial> = { system: { chain: jest.fn().mockReturnValue(SYSTEM_CHAIN), chainType: jest.fn().mockReturnValue(CHAIN_TYPE) + }, + escrow: { + freeStakable: MODULE.freeStakable } }, query: { @@ -51,6 +59,9 @@ const PROMISE: Partial> = { }, multiTransactionPayment: { withFeeSwapPath: jest.fn().mockReturnValue(EXTRINSIC) + }, + utility: { + batchAll: MODULE.batchAll } } }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/escrow.ts b/src/test/mocks/@interlay/interbtc-api/parachain/escrow.ts index 8d27cc7621..2cd3a265cf 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/escrow.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/escrow.ts @@ -1,25 +1,70 @@ import '@testing-library/jest-dom'; -import { newMonetaryAmount } from '@interlay/interbtc-api'; +import { CurrencyExt, EscrowAPI, newMonetaryAmount, StakedBalance } from '@interlay/interbtc-api'; +import { MonetaryAmount } from '@interlay/monetary-js'; +import Big from 'big.js'; -import { GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { GOVERNANCE_TOKEN, STAKE_LOCK_TIME, VOTE_GOVERNANCE_TOKEN } from '@/config/relay-chains'; +import { convertWeeksToBlockNumbers } from '@/utils/helpers/staking'; -const DEFAULT_STAKED_AMOUNT = newMonetaryAmount(10, GOVERNANCE_TOKEN, true); +import { EXTRINSIC_DATA } from '../extrinsic'; +import { MOCK_SYSTEM } from './system'; -const DEFAULT_STAKED_BALANCE = { amount: DEFAULT_STAKED_AMOUNT, endBlock: 0 }; +const GOVERNANCE_AMOUNT = { + EMPTY: { + VALUE: '0', + MONETARY: newMonetaryAmount(0, GOVERNANCE_TOKEN, true) + }, + FULL: { + VALUE: '100', + MONETARY: newMonetaryAmount(100, GOVERNANCE_TOKEN, true) + } +}; -const EMPTY_STAKED_BALANCE = { amount: newMonetaryAmount(0, GOVERNANCE_TOKEN), endBlock: 0 }; +const VOTE_AMOUNT = { + EMPTY: { + VALUE: '0', + MONETARY: newMonetaryAmount(0, VOTE_GOVERNANCE_TOKEN, true) + }, + FULL: { + VALUE: '100', + MONETARY: newMonetaryAmount(100, VOTE_GOVERNANCE_TOKEN, true) + } +}; -const mockGetStakedBalance = jest.fn().mockResolvedValue(DEFAULT_STAKED_BALANCE); +const STAKED_BALANCE: Record<'EMPTY' | 'FULL' | 'FULL_LOCK_TIME', StakedBalance> = { + EMPTY: { amount: GOVERNANCE_AMOUNT.EMPTY.MONETARY, endBlock: MOCK_SYSTEM.DATA.BLOCK_NUMBER.CURRENT }, + FULL: { amount: GOVERNANCE_AMOUNT.FULL.MONETARY, endBlock: MOCK_SYSTEM.DATA.BLOCK_NUMBER.CURRENT + 1 }, + FULL_LOCK_TIME: { amount: GOVERNANCE_AMOUNT.FULL.MONETARY, endBlock: convertWeeksToBlockNumbers(STAKE_LOCK_TIME.MAX) } +}; -const DEFAULT_VOTING_BALANCE = newMonetaryAmount(10, GOVERNANCE_TOKEN, true); +const REWARD_ESTIMATE: Record<'EMPTY' | 'FULL', { amount: MonetaryAmount; apy: Big }> = { + EMPTY: { apy: new Big(0), amount: GOVERNANCE_AMOUNT.EMPTY.MONETARY }, + FULL: { apy: new Big(10), amount: GOVERNANCE_AMOUNT.FULL.MONETARY } +}; -const mockVotingBalance = jest.fn().mockResolvedValue(DEFAULT_VOTING_BALANCE); +const DATA = { GOVERNANCE_AMOUNT, STAKED_BALANCE }; -export { - DEFAULT_STAKED_BALANCE, - DEFAULT_VOTING_BALANCE, - EMPTY_STAKED_BALANCE, - mockGetStakedBalance, - mockVotingBalance +const MODULE: Record> = { + getStakedBalance: jest.fn().mockResolvedValue(STAKED_BALANCE.FULL), + votingBalance: jest.fn().mockResolvedValue(VOTE_AMOUNT.EMPTY.MONETARY), + getRewardEstimate: jest.fn().mockResolvedValue(REWARD_ESTIMATE.FULL), + totalVotingSupply: jest.fn().mockResolvedValue(GOVERNANCE_AMOUNT.FULL.MONETARY), + getTotalStakedBalance: jest.fn().mockResolvedValue(GOVERNANCE_AMOUNT.FULL.MONETARY), + getMaxPeriod: jest.fn(), + getRewards: jest.fn().mockResolvedValue(GOVERNANCE_AMOUNT.FULL.MONETARY), + getSpan: jest.fn(), + // MUTATIONS + createLock: jest.fn().mockReturnValue(EXTRINSIC_DATA), + increaseAmount: jest.fn().mockReturnValue(EXTRINSIC_DATA), + increaseUnlockHeight: jest.fn().mockReturnValue(EXTRINSIC_DATA), + withdraw: jest.fn().mockReturnValue(EXTRINSIC_DATA), + withdrawRewards: jest.fn().mockReturnValue(EXTRINSIC_DATA) }; + +const MOCK_ESCROW = { + DATA, + MODULE +}; + +export { MOCK_ESCROW }; diff --git a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts index 946802c646..ea1a6fbb20 100644 --- a/src/test/mocks/@interlay/interbtc-api/parachain/index.ts +++ b/src/test/mocks/@interlay/interbtc-api/parachain/index.ts @@ -2,6 +2,7 @@ export * from './amm'; export * from './api'; export * from './btcRelay'; export * from './electrsAPI'; +export * from './escrow'; export * from './fee'; export * from './issue'; export * from './loans'; diff --git a/src/test/pages/Staking.test.tsx b/src/test/pages/Staking.test.tsx new file mode 100644 index 0000000000..b80bbb813e --- /dev/null +++ b/src/test/pages/Staking.test.tsx @@ -0,0 +1,266 @@ +import MatchMediaMock from 'jest-matchmedia-mock'; + +import App from '@/App'; +import { STAKE_LOCK_TIME } from '@/config/relay-chains'; +import { convertWeeksToBlockNumbers } from '@/utils/helpers/staking'; + +import { MOCK_API, MOCK_ESCROW, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api'; +import { EXTRINSIC_DATA } from '../mocks/@interlay/interbtc-api/extrinsic'; +import { DEFAULT_ACCOUNT_1 } from '../mocks/substrate/mocks'; +import { render, screen, userEvent, waitFor, within } from '../test-utils'; +import { waitForFeeEstimate, waitForTransactionExecute } from './utils/transaction'; + +const { STAKED_BALANCE, GOVERNANCE_AMOUNT } = MOCK_ESCROW.DATA; +const { + getStakedBalance, + createLock, + increaseAmount, + increaseUnlockHeight, + getRewardEstimate, + withdraw, + withdrawRewards +} = MOCK_ESCROW.MODULE; +const { batchAll } = MOCK_API.MODULE; +const { getCurrentBlockNumber } = MOCK_SYSTEM.MODULE; + +jest.mock('@/components/Layout', () => { + const MockedLayout: React.FC = ({ children }: any) => children; + MockedLayout.displayName = 'MockedLayout'; + return { + Layout: MockedLayout + }; +}); + +const path = '/staking'; + +const ONE_WEEK = 1; + +const ONE_WEEK_UNLOCK_HEIGHT = convertWeeksToBlockNumbers(ONE_WEEK) + STAKED_BALANCE.FULL.endBlock; + +describe('Staking Page', () => { + let matchMedia: MatchMediaMock; + + beforeAll(() => { + jest.useFakeTimers('modern'); + jest.setSystemTime(new Date('2023-01-01T00:00:00.000Z')); + }); + + afterAll(() => { + jest.useRealTimers(); + }); + + beforeEach(() => { + matchMedia = new MatchMediaMock(); + + getStakedBalance.mockResolvedValue(STAKED_BALANCE.FULL); + }); + + afterEach(() => { + matchMedia.clear(); + }); + + it('should be able to do initial stake', async () => { + getStakedBalance.mockResolvedValue(STAKED_BALANCE.EMPTY); + + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + userEvent.type(screen.getByRole('textbox', { name: /lock time/i, exact: false }), ONE_WEEK.toString()); + + await waitForFeeEstimate(createLock); + + const unlockHeight = convertWeeksToBlockNumbers(ONE_WEEK); + + expect(getRewardEstimate).toHaveBeenLastCalledWith( + DEFAULT_ACCOUNT_1.address, + GOVERNANCE_AMOUNT.FULL.MONETARY, + unlockHeight + ); + + expect(screen.getByText('08/01/23')).toBeInTheDocument(); + + userEvent.click(screen.getByRole('button', { name: /stake/i })); + + await waitForTransactionExecute(createLock); + + expect(createLock).toHaveBeenCalledWith(GOVERNANCE_AMOUNT.FULL.MONETARY, unlockHeight); + }); + + it('should be able to increase stake and lock time amount', async () => { + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + userEvent.type(screen.getByRole('textbox', { name: /extended lock time/i, exact: false }), ONE_WEEK.toString()); + + await waitForFeeEstimate(batchAll); + + userEvent.click(screen.getByRole('button', { name: /stake/i })); + + await waitForTransactionExecute(batchAll); + + expect(increaseAmount).toHaveBeenCalledWith(GOVERNANCE_AMOUNT.FULL.MONETARY); + expect(increaseUnlockHeight).toHaveBeenCalledWith(ONE_WEEK_UNLOCK_HEIGHT); + expect(batchAll).toHaveBeenCalledWith([EXTRINSIC_DATA.extrinsic, EXTRINSIC_DATA.extrinsic]); + }); + + it('should be able to increase stake amount when lock time is empty', async () => { + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + await waitForFeeEstimate(increaseAmount); + + userEvent.click(screen.getByRole('button', { name: /stake/i })); + + await waitForTransactionExecute(increaseAmount); + + expect(increaseAmount).toHaveBeenCalledWith(GOVERNANCE_AMOUNT.FULL.MONETARY); + }); + + it('should be able to increase stake amount when lock time is 0', async () => { + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + userEvent.type(screen.getByRole('textbox', { name: /extended lock time/i, exact: false }), '0'); + + await waitForFeeEstimate(increaseAmount); + + userEvent.click(screen.getByRole('button', { name: /stake/i })); + + await waitForTransactionExecute(increaseAmount); + + expect(increaseAmount).toHaveBeenCalledWith(GOVERNANCE_AMOUNT.FULL.MONETARY); + }); + + it('should be able to increase stake lock time', async () => { + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /extended lock time/i, exact: false }), ONE_WEEK.toString()); + + await waitForFeeEstimate(increaseUnlockHeight); + + userEvent.click(screen.getByRole('button', { name: /stake/i })); + + await waitForTransactionExecute(increaseUnlockHeight); + + expect(increaseUnlockHeight).toHaveBeenCalledWith(ONE_WEEK_UNLOCK_HEIGHT); + }); + + it('should be able to set lock time using list', async () => { + getStakedBalance.mockResolvedValue(STAKED_BALANCE.EMPTY); + + await render(, { path }); + + const grid = within(screen.getByRole('grid', { name: /lock time/i, exact: false })); + + userEvent.click(grid.getByRole('gridcell', { name: /1 week/i })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: /lock time/i, exact: false })).toHaveValue(ONE_WEEK.toString()); + }); + + userEvent.click(grid.getByRole('gridcell', { name: /1 month/i })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: /lock time/i, exact: false })).toHaveValue('4'); + }); + + userEvent.click(grid.getByRole('gridcell', { name: /3 month/i })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: /lock time/i, exact: false })).toHaveValue('13'); + }); + + userEvent.click(grid.getByRole('gridcell', { name: /6 month/i })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: /lock time/i, exact: false })).toHaveValue('26'); + }); + + userEvent.click(grid.getByRole('gridcell', { name: /max/i })); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: /lock time/i, exact: false })).toHaveValue( + STAKE_LOCK_TIME.MAX.toString() + ); + }); + }); + + it('should be able to withdraw stake', async () => { + getCurrentBlockNumber.mockResolvedValue(STAKED_BALANCE.FULL.endBlock); + + await render(, { path }); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + await waitFor(() => { + expect(screen.getByRole('alert')).toBeInTheDocument(); + }); + + userEvent.click(screen.getByRole('button', { name: /withdraw/i })); + + await waitForFeeEstimate(withdraw); + + const dialog = within(screen.getByRole('dialog', { name: /withdraw/i, exact: false })); + + userEvent.click(dialog.getByRole('button', { name: /withdraw/i })); + + await waitForTransactionExecute(withdraw); + }); + + it('should be able to claim rewards', async () => { + await render(, { path }); + + userEvent.click(screen.getByRole('button', { name: /claim/i })); + + await waitForFeeEstimate(withdrawRewards); + + const dialog = within(screen.getByRole('dialog', { name: /claim rewards/i })); + + userEvent.click(dialog.getByRole('button', { name: /claim/i })); + + await waitForTransactionExecute(withdrawRewards); + }); + + it('should not be able to extend lock time due to input being disable (account already maxed lock time)', async () => { + getStakedBalance.mockResolvedValue(STAKED_BALANCE.FULL_LOCK_TIME); + + await render(, { path }); + + expect(screen.getByRole('textbox', { name: /extended lock time/i, exact: false })).toBeDisabled(); + + expect(screen.getAllByLabelText(/max 0/i)).toHaveLength(2); + + const grid = within(screen.getByRole('grid', { name: /lock time/i, exact: false })); + + const rows = grid.getAllByRole('row'); + + rows.forEach((row) => { + expect(row).toHaveAttribute('aria-disabled', 'true'); + }); + }); + + it('should not be able to extend lock time due to exceeding max', async () => { + getStakedBalance.mockResolvedValue(STAKED_BALANCE.EMPTY); + + await render(, { path }); + + userEvent.type( + screen.getByRole('textbox', { name: new RegExp(`max ${STAKE_LOCK_TIME.MAX}`, 'i'), exact: false }), + (STAKE_LOCK_TIME.MAX + ONE_WEEK).toString() + ); + + userEvent.type(screen.getByRole('textbox', { name: /amount/i }), GOVERNANCE_AMOUNT.FULL.VALUE); + + await waitFor(() => { + expect(screen.getByRole('textbox', { name: new RegExp(`max ${STAKE_LOCK_TIME.MAX}`, 'i') })).toHaveErrorMessage( + '' + ); + }); + + expect(createLock).not.toHaveBeenCalled(); + }); +}); diff --git a/src/test/pages/Wallet.test.tsx b/src/test/pages/Wallet.test.tsx index 855554869b..8b5f180d66 100644 --- a/src/test/pages/Wallet.test.tsx +++ b/src/test/pages/Wallet.test.tsx @@ -6,12 +6,7 @@ import { GOVERNANCE_TOKEN, RELAY_CHAIN_NATIVE_TOKEN, WRAPPED_TOKEN } from '@/con import { NATIVE_CURRENCIES } from '@/utils/constants/currency'; import { PAGES, QUERY_PARAMETERS } from '@/utils/constants/links'; -import { MOCK_AMM, MOCK_API, MOCK_LOANS, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api'; -import { - DEFAULT_STAKED_BALANCE, - EMPTY_STAKED_BALANCE, - mockGetStakedBalance -} from '../mocks/@interlay/interbtc-api/parachain/escrow'; +import { MOCK_AMM, MOCK_API, MOCK_ESCROW, MOCK_LOANS, MOCK_SYSTEM } from '../mocks/@interlay/interbtc-api'; import { render, screen, userEvent, waitFor } from '../test-utils'; import { withinList } from './utils/list'; import { queryTable, withinTable, withinTableRow } from './utils/table'; @@ -22,11 +17,13 @@ const { getLpTokens, getLiquidityProvidedByAccount } = MOCK_AMM.MODULE; const { getCurrentBlockNumber } = MOCK_SYSTEM.MODULE; const { getLendPositionsOfAccount, getBorrowPositionsOfAccount } = MOCK_LOANS.MODULE; const { claimVesting, vestingSchedules } = MOCK_API.MODULE; +const { getStakedBalance } = MOCK_ESCROW.MODULE; const { ACCOUNT_LIQUIDITY } = MOCK_AMM.DATA; const { BLOCK_NUMBER } = MOCK_SYSTEM.DATA; const { LOAN_POSITIONS } = MOCK_LOANS.DATA; const { VESTING_SCHEDULES } = MOCK_API.DATA; +const { STAKED_BALANCE } = MOCK_ESCROW.DATA; const path = '/wallet'; @@ -49,7 +46,7 @@ describe('Wallet Page', () => { getLendPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.LEND.AVERAGE); getBorrowPositionsOfAccount.mockReturnValue(LOAN_POSITIONS.BORROW.AVERAGE); getLiquidityProvidedByAccount.mockReturnValue(ACCOUNT_LIQUIDITY.EMPTY); - mockGetStakedBalance.mockReturnValue(DEFAULT_STAKED_BALANCE); + getStakedBalance.mockReturnValue(STAKED_BALANCE.FULL); getCurrentBlockNumber.mockReturnValue(BLOCK_NUMBER.CURRENT); vestingSchedules.mockReturnValue(VESTING_SCHEDULES.EMPTY); }); @@ -225,7 +222,7 @@ describe('Wallet Page', () => { }); it('should not display table', async () => { - mockGetStakedBalance.mockReturnValue(EMPTY_STAKED_BALANCE); + getStakedBalance.mockResolvedValue(STAKED_BALANCE.EMPTY); await render(, { path }); diff --git a/src/utils/constants/currency.ts b/src/utils/constants/currency.ts index 56ce40c701..5bc824cd43 100644 --- a/src/utils/constants/currency.ts +++ b/src/utils/constants/currency.ts @@ -17,9 +17,14 @@ import { POLKADOT } from './relay-chain-names'; const ZERO_VOTE_GOVERNANCE_TOKEN_AMOUNT = newMonetaryAmount(0, VOTE_GOVERNANCE_TOKEN, true); const ZERO_GOVERNANCE_TOKEN_AMOUNT = newMonetaryAmount(0, GOVERNANCE_TOKEN, true); +const isPolkadotChain = process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT; + // TODO: Pull values in from lib, as we do with vault collaterals -const NATIVE_CURRENCIES: Array = - process.env.REACT_APP_RELAY_CHAIN_NAME === POLKADOT ? [Polkadot, InterBtc, Interlay] : [KBtc, Kintsugi, Kusama]; +const NATIVE_CURRENCIES: Array = isPolkadotChain + ? [Polkadot, InterBtc, Interlay] + : [KBtc, Kintsugi, Kusama]; + +const BIFROST_RELAY_CHAIN_NATIVE_TOKEN = isPolkadotChain ? 'VDOT' : 'VKSM'; const FEE_TICKERS = [...NATIVE_CURRENCIES.map(({ ticker }) => ticker), 'USDT']; @@ -34,6 +39,7 @@ const COINGECKO_ID_BY_CURRENCY_TICKER: Record { + return (weeks * ONE_WEEK_SECONDS) / BLOCK_TIME; +}; + +const convertBlockNumbersToWeeks = (blockNumbers: number): number => { + return (blockNumbers * BLOCK_TIME) / ONE_WEEK_SECONDS; +}; + +export { convertBlockNumbersToWeeks, convertWeeksToBlockNumbers }; From 6deacef6f111a20a1895262ab6670a7ae9fcc209 Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Thu, 16 Nov 2023 10:37:03 +0000 Subject: [PATCH 34/58] [release] Kintsugi 2.40.1 (#1602) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 * api: refactor the market data api (#1569) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * Tom/fix prices (#1571) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * wip: add log * wip: hardcode value to run against market data api * wip: try setting asset name * fix: casing * chore: add vKSM ids * fix: handle VDOT and VKSM * typo: quotation marks * chore: fix switch statement and remove console log * fix: revert change --------- Co-authored-by: ns212 * chore: add vDOT icon and sort imports (#1563) * chore: add token icons (#1572) * chore: add token icons * fix: correct ids for vDOT * chore: TBTC icon * chore: release v2.38.2 * [chore] Update dependencies (#1548) * update dependencies * chore: bump dependencies * chore: update dependencies and fix type errors * chore: update dependencies * remove redundant resolutions * wip: try setting node options in package * Trigger build * update caniuse db * fix: revert type casting * chore: bump bridge version * fix: xcm breaking changes * fix: correct XCM adapter * chore: remove console log (#1575) * fix: await the unawaited (#1581) * chore: release v2.39.0 * Tom/fix icons (#1584) * fix: add Bifrost polkadot icon * fix: handle `.wh` suffix in tickers when fetching icons * fix: display name * chore: release v2.39.1 * apply hotfix patch (#1589) * feat: update subwallet logo (#1587) * fix(Redeem): show premium redeem compensation (#1591) * feat(Wallet): add bitforst token swap link (#1594) * fix(Loans): collateral overlapping modal ref issue (#1595) * feat(Staking): refactor (#1538) * feat(Staking): refactor * feat: continue * wip * feat: continue * feat: continue * feat: final * feat: final * feat: add tests * feat: continue tests * feat: continue * feat: add translations * fix: code review * feat: add staking limit * fix: limit * fix(Staking): limit parsing --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * chore: release v2.40.0 * chore: bump bridge (#1600) * fix(Staking): close modal on submit (#1599) * chore: release v2.40.1 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> Co-authored-by: Chanakya Kilaru Co-authored-by: Peter Co-authored-by: Dominik Harz Co-authored-by: sander2 Co-authored-by: Brendon Votteler Co-authored-by: ns212 --- package.json | 4 ++-- .../StakingAccountDetails/StakingAccountDetails.tsx | 6 ++++-- .../StakingWithdrawCard/StakingWithdrawCard.tsx | 6 ++++-- src/utils/constants/currency.ts | 4 ++-- yarn.lock | 8 ++++---- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index e753953be0..d9834e5f43 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "interbtc-ui", - "version": "2.40.0", + "version": "2.40.1", "private": true, "dependencies": { "@craco/craco": "^6.1.1", "@headlessui/react": "^1.1.1", "@heroicons/react": "^2.0.18", - "@interlay/bridge": "^0.4.0", + "@interlay/bridge": "^0.4.1", "@interlay/interbtc-api": "2.5.1", "@interlay/monetary-js": "0.7.3", "@polkadot/api": "10.9.1", diff --git a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx index 170a209e17..f89f9047ea 100644 --- a/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx +++ b/src/pages/Staking/components/StakingAccountDetails/StakingAccountDetails.tsx @@ -31,11 +31,13 @@ const StakingAccountDetails = ({ const transaction = useTransaction(Transaction.ESCROW_WITHDRAW_REWARDS, { onSuccess: () => { onClaimRewards(); - setOpen(false); } }); - const handleSubmit = () => transaction.execute(); + const handleSubmit = () => { + transaction.execute(); + setOpen(false); + }; const handleOpen = () => transaction.fee.estimate(); diff --git a/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx b/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx index c6b8766717..49f8ec1087 100644 --- a/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx +++ b/src/pages/Staking/components/StakingWithdrawCard/StakingWithdrawCard.tsx @@ -25,11 +25,13 @@ const StakingWithdrawCard = ({ data, onWithdraw, ...props }: StakingWithdrawCard const transaction = useTransaction(Transaction.ESCROW_WITHDRAW, { onSuccess: () => { onWithdraw(); - setOpen(false); } }); - const handleSubmit = () => transaction.execute(); + const handleSubmit = () => { + transaction.execute(); + setOpen(false); + }; const handleOpen = () => transaction.fee.estimate(); diff --git a/src/utils/constants/currency.ts b/src/utils/constants/currency.ts index 5bc824cd43..99be40b07c 100644 --- a/src/utils/constants/currency.ts +++ b/src/utils/constants/currency.ts @@ -24,10 +24,10 @@ const NATIVE_CURRENCIES: Array = isPolkadotChain ? [Polkadot, InterBtc, Interlay] : [KBtc, Kintsugi, Kusama]; -const BIFROST_RELAY_CHAIN_NATIVE_TOKEN = isPolkadotChain ? 'VDOT' : 'VKSM'; - const FEE_TICKERS = [...NATIVE_CURRENCIES.map(({ ticker }) => ticker), 'USDT']; +const BIFROST_RELAY_CHAIN_NATIVE_TOKEN = isPolkadotChain ? 'VDOT' : 'VKSM'; + const COINGECKO_ID_BY_CURRENCY_TICKER: Record = Object.freeze({ [Bitcoin.ticker]: 'bitcoin', [Kintsugi.ticker]: 'kintsugi', diff --git a/yarn.lock b/yarn.lock index e089fa3ff4..d838d49619 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2966,10 +2966,10 @@ resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c" integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg== -"@interlay/bridge@^0.4.0": - version "0.4.0" - resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.4.0.tgz#a8ee25a0bcec1579d1a0ad668345080c567ac254" - integrity sha512-884QMnnOcnzxUU9IgW3xLhzusQ36z2f7vdRTfB8CXkKEZwdMpq6pXlZM9GSWFyw5zvSeG8dn2IgFd4642eOp9w== +"@interlay/bridge@^0.4.1": + version "0.4.1" + resolved "https://registry.yarnpkg.com/@interlay/bridge/-/bridge-0.4.1.tgz#8df57a2c9f8d51cb7ee1028144f485828df9b625" + integrity sha512-7fW/j0TUEmpBA5zAUfbxxSQReM7LwwHQD10VzUA95+oasjR/hTMALXtSnMAT4tyWZzFk5KZvp5G5RG6Xypm1RA== dependencies: "@acala-network/api" "^5" "@acala-network/sdk" "^4.1.9-7" From e3bbf80743150765b87d65e666b906fb04f8a5ad Mon Sep 17 00:00:00 2001 From: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Date: Mon, 4 Dec 2023 16:00:20 +0000 Subject: [PATCH 35/58] [release] Kintsugi 2.40.2 (#1610) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 * Fix: back button behaviour from bridge page (#1246) * fix: use history replace instead of push to fix looping of bridge page * chore: clean up and bump version --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * feat: add transaction notifications (#1177) * chore: remove console.log (#1262) * fix(TokenInput): adorment ticker (#1257) * fix: get vesting data (#1264) * Peter/chore update lib 2.3.0 (#1267) * chore: update monetary to latest 0.7.3 * chore: update lib version * fix: sort notifications (#1270) * fix: transaction none (#1271) * fix(Loans): apy label (#1275) * Peter/loans fix subsidy rewards (#1276) * chore: update monetary to latest 0.7.3 * fix(loans): display correct subsidy rewards accrued amount and APY * chore: console log cleanup * chore: replace GOVERNANCE_TOKEN_SYMBOL with GOVERNANCE_TOKEN.ticker * Peter/fix loans incentive apr computation (#1256) * chore: update monetary to latest 0.7.3 * fix: convert incentives apr computation to percentage * fix: change loans incentives annualized return to have label APR * chore: release v2.33.0 * Peter/chore update lib 2.3.3 (#1282) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.3. * fix: enable faucet on Interlay testnet (#1289) * fix: enable faucet on Interlay testnet * fix: prefer governance token ticker to symbol * chore: bump bridge (#1285) * fix(Swap): update trade object on each block (#1297) * api: use diadata as main datasource (#1277) * api: use diadata as main datasource * api: add header to select price source --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * Peter/fix interlay issues (#1300) * chore: update monetary to latest 0.7.3 * fix: add missing translation and fix lend APY display * refactor: bring back formatting with 0 amount case covered * refactor: code review * refactor: code review * api: select price source via query param and ticker renaming (#1307) * api: fix tether label for dia (#1309) * chore: release v2.34.0 * chore: update XCM RPCs (#1324) * chore: release v2.34.1 * fix: correct wallet balance (#1334) * api: switch to coingecko pro url (#1321) * Peter/feat tx fee with swapped currency (#1340) * chore: update monetary to latest 0.7.3 * feat: refactor Transfer and theme (#1244) * wip: initial changes to move table * chore: remove unused component * Revert "chore: remove unused component" This reverts commit 0db71a15538b776c73b752a98d2e825d890d2ea1. * chore: remove unused component * chore: use translation file * fix: add missing p tags * wip * feat: refactor Transfer and theme (#1244) * feat(Bridge): revamp Issue and Redeem (#1279) * wip * feat(TransactionDetails): extend component to support fee selector (#1292) * feat: add tx fee estimation and swap for tx fee payment integration * fix: remove impossible condition * feat: integrate use-transaction with TransactionFeeDetails (#1294) * feat: integrate use-transaction with TransactionFeeDetails * fix: code review * refactor: code review * feat: add fee estimate loading state * Rui/fee estimate transfer form (#1296) * feat: add fee estimate to transfer form * Update src/pages/Transfer/TransferForms/components/TransferForm/TransferForm.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Feature/UI updates/navigation styling (#1293) * wip: initial navigation styling * refactor: remove icons from secondary navigation items * refactor: split navigation into primary/secondary * fix: add bg colour to nav to prevent problems on small screens * refactor: update accordion styles * refactor: remove redundant code and console log * refactor: change Kintsugi background colour * fix: show navigation item names * fix: remove redundant conditional * fix: code * fix: changes to list style and disable 0 balance fee tokens * feat(bringyourownfee): add check for existing trade path * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * Update src/utils/hooks/transaction/use-transaction.ts Co-authored-by: Dominik Harz * refactor: move multiplier to constant * feat: add fee validation and other improvements to form validation (#1303) * Peter/feat griefing collateral multicurrency (#1310) * feat: add selectable griefing collateral currency to issue request form * feat: add oracle currency hook and wrap up griefing collateral work * feat(Swap): add custom fee (#1315) * Peter/feat byof bridge page (#1328) * wip * refactor: issue page with griefing collateral select * feat(bringyourownfees): redeem form * refactor: renaming * feat: add redeem request to getActionAmount * feat(Pools): add fee estimate (#1322) * feat(Loans): add fee estimate (#1332) * feat(Vaults): add fee estimate to vault creation (#1333) * fix(Redeem): add missing BTC address validation (#1336) * fix: redeem getActionAmount type mismatch * Tom/UI updates/minor changes (#1308) * refactor: add vault table background colour * fix: typo * refactor: styled card for vault selector * refactor: wrap vault transaction tables in card component * fix: typo * refactor: add shadowed prop to card component * refactor: use card component for transactions table * refactor: move request id in legacy issue/request modal * refactor: use request id dictionary item * chore: update Interlay logo * refactor: update icon and logo colours * feature: add bg image * wip: add background image to Layout component * refactor: add Wrapper component * wip: initial values for background image position * refactor: minor styling changes * refactor: revert unneeded change * refactor: move and rename Transaction component * feat: sort currencies by balance (#1338) --------- Co-authored-by: Peter Co-authored-by: Thomas Jeatt Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> Co-authored-by: Dominik Harz * chore: release v2.35.0 * Tom/feature/wallet buttons (#1346) * refactor: add tab props * feature: add bridge button to assets table * refactor: don't show buy button for wrapped token * [wallet] add default currencies to wallet (#1335) * refactor: add default currencies to wallet * refactor: use NATIVE_CURRENCIES * chore: update navigation (#1344) * refatctor: remove LBANK configuration and assets (#1355) * feature: add LDOT icon (#1356) * Peter/refactor fetch oracle status from chain (#1359) * chore: update monetary to latest 0.7.3 * refactor: fetch oracle status from chain * chore: remove commented-out code * Peter/fix add wrapped currency as security deposit option (#1360) * chore: update monetary to latest 0.7.3 * fix: add wrapped token to useGetOracleCurrencies result * chore: update price impact warning copy (#1358) * [transfer/bridge] open correct tab (#1366) * fix: bridge query parameter * fix: revert to previous tab name * refactor: close redeem modal (#1367) * refactor: close redeem modal * fix: correct user messaging copy * fix: remove unnecessary translation * fix: correct copy * feat: change LoadingSpinner styles and CTA loading spinner (#1372) * feat: replace legacy toast with new notification toast (#1370) * fix: UI styling bugs (#1371) * fix: change broken gradient id ref * refactor: add opacity value to navigation separator * fix: update padding * fix: border opacity * fix: use transaction details component * refactor: change how padding is set * Peter/fix bridge dust value validation (#1374) * chore: update monetary to latest 0.7.3 * fix: dust value calculation * feat(Wallet): add USDT and change switch label (#1363) * fix(Modal): prevent user from clicking when closed (#1364) * fix(Swap): handle when schema params are undefined (#1375) * feat(Wallet): add welcome banner (#1337) * fix: correct subscan link (#1378) * fix: select token modal list style (#1382) * fix: improve issue form insufficient funds notice (#1380) * feature: add tooltip to asset cell (#1345) * feature: add tooltip to asset cell * fix: typo * wip: ReactNode tooltip so that we can pass in link * feature: add fee asset tooltip * update text link component * fix: revert changes to text links * revert changes to text links * fix: maintain compatibility with existing text links * use correct location variable * fix: remove log * fix: tooltip const * Onboarding page (#1373) * feat: add draft of onboarding page * chore: update t&c links * feat: add guided tour through app * fix: typos and eslint warnings * restrict width of onboarding cards * feat: replace UI faucet with discord link * feat: improve CTA * feat: add link to onboarding page --------- Co-authored-by: Thomas Jeatt * fix: disable fetch on focus (#1386) * fix(Onboarding): improve styles, semantics and file structure (#1387) Co-authored-by: Dominik Harz * fix: typo (#1392) * Peter/feat pools trading fee apr (#1389) * chore: update monetary to latest 0.7.3 * feat(pools): add trading fee APR * refactor: clean-up naming * Peter/ choreupdate lib 2.3.5 (#1393) * chore: update monetary to latest 0.7.3 * chore: update lib to 2.3.5 * chore: release v2.35.1 * fix: onboarding and empty fee selector (#1396) * Onboarding feature flag (#1398) * refactor: add feature flag * fix: update dependencies * add onboarding to env file * chore: release v2.35.2 * api: add dia asset ids to market data endpoint (#1400) * chore: release v2.35.3 * api: add dia asset ids to market data endpoint (#1403) * chore: release v2.35.4 * fix(Wallet): add missing guide link (#1406) * fix(Wallet): add missing guide link * Update WelcomeBanner.tsx * feat(Wallet): update welcome banner svg (#1407) * wip: add T&Cs version (#1409) * chore: release v2.35.5 * api: add support for multiple version of terms and conditions (#1411) * api: add support for multiple version of terms and conditions * api: add support for multiple version of terms and conditions * chore: release v2.35.6 * feat: add parity signer companion for polkadot vault support (#1417) * Tom/xcm copy changes (#1391) * fix: typos * refactor: pass chain data to transaction instead of chain id * refactor: remove unused feature foags (#1402) * Peter/fix pools daily volumes (#1421) * chore: update monetary to latest 0.7.3 * fix: change pools fetching query to work when first record is younger than requested period * fix(Pools): deposit validation (#1419) * fix: various issues picked up from testing (#1414) * fix: prefetching fee scenarios (#1384) * fix: hide onboarding button when onboarding disabled (#1418) * chore: release v2.35.7 * apply hotfix (#1428) * Peter/fix byof not working (#1430) * chore: update monetary to latest 0.7.3 * fix(byof): use correct field props getter for fee token select * chore: release v2.35.8 * api: add support ethereum and karura (#1435) * Tom/updated directory names (#1434) * refactor: rename Bridge -> BTC * refactor: transfer -> send and receive * fix: rename Transfer component * revert change to tab name * refactor: update translation references * update schemas * update directory and file casing * casing * casing * casing * casing * casing * chore: split AMM pages into seperate folders (#1436) * feat: check signature version (#1429) * Fix Storybook (#1443) * fix display name syntax * disable snapshots * Trigger build * Update routes (#1442) * update routes * redirect crossChainTransfer query parameter * fix redirect syntax * fix redirect syntax * redirect cross chain transfer * tab redirects * correct redirect syntax * Peter/fix q token vaults support (#1445) * chore: update monetary to latest 0.7.3 * wip * wip: update lib version * chore: install deps * chore: fix test pipelines (#1379) * fix(Redeem): redeem limit when there is not capcity (#1451) * fix(Redeem): premium redeem (#1454) * Peter/feat loans q token handle edge cases (#1449) * chore: update monetary to latest 0.7.3 * feat(loans): handle lend position when qToken is used as vault collateral * chore: update lib * add nova wallet (#1453) * add nova wallet * delete unused config and update polkadot name * move constant and delete redundant file * feat: add query params handling (#1347) * feat: add estimate fee hook and action amount deduction (#1433) * Update number of wallets in test (#1462) * Update number of wallets in test * fix: remove parentheses from wallet name * Support Banxa on Interlay (#1458) * refactor: remove redundant env variable and UI component * refactor: remove redundant URL parameter * update translation file * revert change to wallet parameter * update translation parameter * fix: missed file save * chore: release v2.36.0 * fix(Swap): add missing scenario for re-computing trade obj (#1464) * fix: use correct value for vault capacity indicator (#1465) * fix: use correct value for vault capacity indicator * fix: capacity ratio when there are no backed tokens * revert version bump * chore: release v2.36.0 * api: add fallback to coingecko for missing assets on dia (#1467) * revert version bump * chore: release v2.36.0 * fix: fee affecting action amount calculation (#1472) * chore: release v2.36.1 * feat(Strategies): add landing page (#1466) * feat(Strategies): add landing page * fix: code review * chore: improve translactions (#1447) * feat: add tooltip to pools and refactor loans tooltip (#1424) * feat: add tooltip to pools and refactor loans tooltip * fix: code review * fix: code reivew --------- Co-authored-by: Thomas Jeatt * fix(Loans): simplify form and hook (#1476) * Rui/loans modals lose close animation due to conditional render (#1460) * wip * feat: continue * fix: code review * fix:merge --------- Co-authored-by: Thomas Jeatt * fix: loan tests (#1425) * Tom/update bg image (#1481) * update bg svg * swap file * minify * Tom/xcm updates (#1480) * wip: refactor account select * refactor: update component names * Revert "refactor: update component names" This reverts commit c80ca13d04cec92a5405479ccafc65f069cb93ca. * fix: rename components without breaking feature * disable all data refetching * wip: render xcm form when no wallet connected * remove redundant legacy component * workaround for account selection issue * Tidying up * handle TODO relating to SelectObject * remove comment * casing * selected styling * improvements * Add comment * fix: organize files (#1483) * refactor: Layout and MainContainer (#1489) * refactor: add block height, parachain status and locked tokens hooks (#1486) * refactor: replace old faucet approach with use-faucet (#1484) * Peter/feat dry running (#1499) * chore: update monetary to latest 0.7.3 * feat(transaction): dry-run transaction before submission and revert execution if dry-running fails * test: mock submittable extrinsic * refactor: rename to dryRun and document functionality * refactor: move submission code to separate folder * Peter/feat simple passive income strategy page (#1473) * chore: update monetary to latest 0.7.3 * wip: feat(strategies): add simple BTC strategy * refactor(strategies): merge landing page with strategy page * wip: strategy page infographics * feat(loans): add earned amount to lend positions * feat: changes to loans and strategies (#1498) --------- Co-authored-by: Daniel Simão * fix(Strategies): improve responsiveness and add form link (#1503) * fix: correct feature flag name (#1504) * chore: release v2.36.2 * feat(Slider): add component (#1502) * fix: use route instead of redirect (#1507) * chore: release v2.37.0 * feat: add breadcrumbs component and add it to strategies (#1505) * Peter/chore lib update 2.4.0 (#1512) * chore: update monetary to latest 0.7.3 * chore: handle 2.4.0 upgrade * fix: conditional check for amount (#1516) * fix: conditional check for amount * fix: revert slice change * docs: roadmap item (#1519) * feat: add roadmap items to roadmap but not backlog (#1521) * feat: zero slippage option (#1497) * chore: bump lib (#1523) * Bump bridge and revert hotfix (#1104) * chore: bump bridge and revert hotfix * chore: bump bridge * chore: bump bridge version * Release/kintsugi/2.29.1 (#1107) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.29.2 (#1116) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Tom/release/kintsugi/2.9.3 (#1121) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * [release] Kintsugi 2.9.5 (#1127) * chore: add resolutions for various polkadot packages (#1089) * Fix input field width issue (#1090) * fix: input field width * fix: rename max weeks to total weeks * chore: bump ui version * chore: bump XCM bridge (#1093) * feat(Wallet): add page (#1001) * feat(Wallet): add page * feat: add WalletIcon * feat: copy address * wip * feat: staking table * feat: refactor and add lending * refactor: clean up code * wip * feat: add List card * continue * fix: continue * feat: continue * feat(CTALink): improve * feat: add responsiveness and swap handling * feat: final * feat: add responsive prop * fix: clean up List and Divider * feat: add tests * feat: add final tests * fix: code review * feat: add vesting and tests * fix: code review * Tom/bug/burn form collateral tokens (#1042) * refactor: loop collateral to get burnable tokens * refactor: revert previous change and simplify * refactor: add function to filter tokens * refactor: fetch collateral currencies and render token values * wip: form layout and translation * wip: set data and selected collateral * chore: remove console log * refactor: remove single collateral code * chore: comment * fix: incorrect USD value * chore: remove testing code * refactor: remove native token import * refactor: add BurnableCollateral type * refactor: add fullWidth prop and label to token selector * refactor: collateral icon * chore: add dictionary item * chore: remove unnecessary conditional operators * refactor: handle callback * refactor: fix failing test * chore: remove unused code * refactor: add success notification to burn form * Add CORS to market data (#1096) * chore: add env variables to config * chore: add cors to market data api --------- Co-authored-by: ns212 * fix: revert to using 0.2.x version of the bridge (#1095) * chore: improve price impact warning copy * chore: release v2.29.0 * fix(amm): use correct hooks dependencies (#1105) * fix: update useGetCurrencies callbacks dependency arrays (#1108) * chore: release v2.29.1 * [wallet] improve wallet balance (#1109) * wip: correct wallet balance * refactor: account for borrow and lend positions when calculating total balance * refactor: add total liquidity balance * fix: typo * chore: add TODO * refactor: remove unnecessary toString call * refactor: redirect home route to wallet if enabled, defaulting to bridge if not * refactor: remove duplicated calculations * refactor: return liquidity pools calculation from hook * chore: release v2.29.2 * refactor: use current block when calculating lock time extension (#1118) * Tom/hotfix/use correct xcm names (#1119) * refactor: use display value for chain names * refactor: use correct display value for XCM channels * chore: release v2.29.3 * fix: correct apy calculation (#1123) * fix: correct apy calculation * refactor: set extension time as variable * chore: release v2.29.4 * fix: prevent rewards estimate from being called when user has insufficient balance (#1126) * chore: release v2.29.5 --------- Co-authored-by: Brendon Votteler Co-authored-by: Chanakya888 Co-authored-by: Daniel Simão Co-authored-by: ns212 Co-authored-by: Dominik Harz Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * fix: revert change which blocks rewards calculation * chore: update coingecko api endpoint * [release] Kintsugi 2.32.0 (#1215) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão * [release] Kintsugi 2.32.2 (#1223) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.3 (#1228) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.4 (#1232) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.5 (#1234) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * [release] Kintsugi 2.32.6 (#1249) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: handle default chain values * refactor: better organised function order * wip: handle change events * wip: handle setting tokens * wip: handle fetching tokens and balances * wip: convert input configs * wip: handle token change * wip: get token USD price * Trigger Build * chore: remove unused import * chore: correct eslintignore syntax * wip: handle breaking changes * wip: disable token input when select items value is 1 * chore: set first token item as variable * wip: handle setting and changing values * chire: add loading spinner * refactor: add loading state * refactor: filter destination chains * chore: remove console log * chore: bump XCM bridge version * chore: update config * refactor: configure validation * chore: revert change to useForm hook * wip: form validation * wip: working form validation * wip: undefined validation parameters * refactor: return dest fee estimate from bridge hook * feature: show fees and fee estimates * chore: conditional operators * refactor: handle ticker change correctly * wip: sendTransaction method * Revert "wip: sendTransaction method" This reverts commit 3ade26dda26c7cc14f9db9e7c005b66863fa9139. * fix: USD amounts * wip: send transactions * refactor: bump bridge and use getNativeToken method * chore: bump bridge * refactor: move submit logic to useMutation hook * fix: type mismatches * refactor: white space/comments * refactor: add transaction fee validation * chore: typo * chore: remove console log * refactor: remove duplicated monetary conversion * refactor: remove duplicate code * Revert "refactor: remove duplicate code" This reverts commit bd29f8c5661e327c5285d1020c534dab2deae806. * Revert "refactor: remove duplicated monetary conversion" This reverts commit 5fd3d645eb7d8edc00cfe8ced186d4e2432af9fc. * refactor: use monetaryAmount when constructing transaction * refactor: remove duplicated code for fetching tokens * refactor: default XCM origin * Revert "refactor: remove duplicated code for fetching tokens" This reverts commit 8f31ee8667adcd49f5aaebb7db2f205afb5e9725. * chore: remove comment * chore: fix errors * fix: set default value to empty string to prevent React error * refactor: removed unwanted force validation parameters * refactor: remove redundant method * refactor: add method return type * refactor: add method return type * refactor: correct type error * refactor: fix destFee type error * refactor: remove fees validation and revert destFee return value * chore: remove console log * refactor: remove redundant method * refactor: disable validation on change * chore: remove commented out code * wip: use select component for chain selector * fix: handle chain select functions * refactor: type chain id as ChainName * Revert "refactor: type chain id as ChainName" This reverts commit d05e0128cb4b5ac1d00ac07808ebdf9858739165. * chore: remove unused component files * refactor: remove duplicated transaction logic * fix: make to/from field types more specific * fix: revert yup.custom changes and cast validation * fix: set correct destination chain * refator: handle token data * refactor: add use callback * fix: correct rendering logic * fix: update dependencies * chore: delete unused styles * chore: fix merge issue with transfer form * fix: change validation handling * Revert "fix: change validation handling" This reverts commit c0cb3062aad3540b2afad7d375024d872924a62c. * refactor: only display transfer amount if amount has been entered * chore: config changes * chore: add missing icons * chore: Hydra chain icon * fix: add error text to CTA * Tom/xcm fixes (#1213) * refactor: specify endpoints and remove unnecessary logic * fix: save file before committing * fix: disable refetch * chore: update endpoints * chore: remove log * chore: rename file * chore: add additional acala/karura endpoints --------- Co-authored-by: Rui Simão * chore: release v2.32.0 * Update API healthchecks (#778) * Chore - add vault healthcheck * Chore - add vault healthcheck * Chore - add vault healthcheck * [earn strategies] placeholder page, nav and feature flag (#1216) * chore: bump icons dependency * feature: earn strategies placeholder page and feature flag * feat: add useTransaction (#1189) * chore: update monetary to latest 0.7.3 (#1214) * chore: update monetary to latest 0.7.3 * chore: update lib * chore: bump lib and bridge (#1219) * chore: release v2.32.1 * fix: add missing icons and remove erroring RPC (#1222) * fix: add missing icons and remove erroring RPC * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> * chore: release v2.32.2 * fix: compare input configs with method not operator (#1225) * refactor: reset selected account on account change (#1226) * chore: release v2.32.3 * feature: add geoblock feature flag (#1230) * chore: release v2.32.4 * chore: bump bridge (#1233) * chore: release v2.32.5 * Peter/earn strategies feat deposit withdraw form (#1229) * chore: update monetary to latest 0.7.3 * wip * feat(earn-strategies): add deposit and withdrawal form components * refactor: add padding under tabs in earn strategy forms * chore(earn-strategies): change file structure * feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236) * fix: Dialog, Modal and Popover (#1245) * chore: rename strategies feature (#1247) * chore: release v2.32.6 --------- Co-authored-by: Peter Slaný <47864599+peterslany@users.noreply.github.com> Co-authored-by: Rui Simão Co-authored-by: ns212 <73105077+ns212@users.noreply.github.com> * hotffix kintusgi: add percentage conversion (#1255) * fix: add percentage conversion * fix: change loans incentives annualized return to have label APR * [release] Kintsugi 2.33.0 (#1280) * feat: redirect when access from forbidden country is detected (#1209) * Feature/updated transfer UI (#876) * refactor: use updated tab component * refactor: duplicated form titles * refactor: remove redundant hook calls * refactor: prefer title case * wip: XCM transfer form UI * wip: updated form UI * wip: account selector placeholder component * wip: account selector modal * wip: modal open and close actions * wip: update modal type * wip: get accounts * wip: add identicon and rename component for consistency * wip: account input component * fix: remove redundant icons prop * feat: implement with SelectTrigger * wip: styling and account selection value * wip: handle setting account data * refactor: better naming * wip: address list styling * refactor: rename defaultAccount * wip: chain selector placeholder component * wip: duplicate account component and rename * chore: delete redundant legacy component * wip: logic for fetching and rendering chain ids * wip: chain item styling * wip: selected chain styling * chore: add comment * refactor: pass through native token to icon component * feature: add chain icon component * chore: add comment * chore: correct file name casing * refactor: improve folder structure * wip: form layout styling * chore: add arrow icon * chore: add logos and correct svg titles * chore: remove redundant svg prop * chore: rename arrow icon * chore: consistent use of styled components * refactor: remove padding from modal body * wip: formik integration work * wip: extend useXCMBridge to return available chains and utility methods * chore: move Chain and Chains types to types directory * feat: layout and form implementation * feat: add schema * feat: final * wip: refactor useXCMBridge hook * refactor: add endpoints type * refactor: wrap methods in useCallback * refactor: fix bug in hook method * chore: bump bridge version * wip: set originating and destination chain values * refactor: set from chain value on field change * wip: set originating chain value * refactor: mergeProps to set field value * refactor: handle setting origin/destination chain values * wip: get tokens method * wip: first iteration of balances function * wip: handle tokens array * wip: set token value * wip: get token balances * wip: return token and balances in single method * wip: mapped tokens * refactor: han… * Peter/fix staking limit bug (#1515) * chore: update monetary to latest 0.7.3 * fix: use maximum stakable amount fetched from rpc * delete stray comment --------- Co-authored-by: Thomas Jeatt * Revert "Peter/fix staking limit bug (#1515)" This reverts commit a89625963c7fd542a213e04d81bbce6b9e4ae9c1. * chore: release v2.38.0 * fix: use redirect in route (#1533) * Peter/fix q token vaults volumes fetching (#1535) * chore: update monetary to latest 0.7.3 * fix: update vaults dashboard volumes query to include qToken vaults correctly * fix: only add projects with roadmap label (#1536) * fix: use-get-dex-volumes hook (#1534) * fix(SendAndReceive): remove dry-run from xcm (#1540) * fix(Pools): remove ratio customization (#1541) * wip: update resolutions * update resolutions * Revert "update resolutions" This reverts commit 8af4d732aa7a344bdbd7958bd2fa7b7388127acc. * Revert "wip: update resolutions" This reverts commit 3295e63471169206ca1d67b0b0fe9e7a6d053ed3. * Tom/site information component (#1552) * refactor: remove legacy testnet banner component * feature: add site information component * fix: whitespace * chore: update default env variable * refactor: extend main container * refactor: add information component to main container * rename const * refactor: update alert styling * fix: bold link styling * Peter/refactor usd price formatting (#1553) * chore: update monetary to latest 0.7.3 * refactor: show 3 decimal places in usd price if amount is below 1 cent * fix: correct exchange rate (#1555) * fix: correct exchange rate * remove redundant optional chaining * refactor: simplify exchange rate display --------- Co-authored-by: Peter * fix: formatting (#1556) * Peter/fix vault dashboard volumes hook (#1557) * chore: update monetary to latest 0.7.3 * fix: show all collateral currencies on locked collateral card * Peter/strategy feat proxy account (#1539) * chore: update monetary to latest 0.7.3 * feat(strategies): use proxy accounts * wip: write into identity pallet to keep track of strategy-proxy mapping * feat(strategies): use proxy accounts saved into identity pallet * chore: cleanup * refactor: code review * feat: add proxy account deposit field to transaction details, repay on withdraw-all * refactor: code review * chore: remove Karura dwellir node (#1558) * wip: try setting node options in package (#1559) * wip: try setting node options in package * Trigger build * api: add voucher-dot and other tokents (#1566) * chore: release v2.38.1 * api: refactor the market data api (#1569) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * Tom/fix prices (#1571) * api: refactor the market data api * api: refactor the market data api * api: refactor the market data api * wip: add log * wip: hardcode value to run against market data api * wip: try setting asset name * fix: casing * chore: add vKSM ids * fix: handle VDOT and VKSM * typo: quotation marks * chore: fix switch statement and remove console log * fix: revert change --------- Co-authored-by: ns212 * chore: add vDOT icon and sort imports (#1563) * chore: add token icons (#1572) * chore: add token icons * fix: correct ids for vDOT * chore: TBTC icon * chore: release v2.38.2 * [chore] Update dependencies (#1548) * update dependencies * chore: bump dependencies * chore: update dependencies and fix type errors * chore: update dependencies * remove redundant resolutions * wip: try setting node options in package * Trigger build * update caniuse db * fix: revert type casting * chore: bump bridge version * fix: xcm breaking changes * fix: correct XCM adapter * chore: remove console log (#1575) * fix: await the unawaited (#1581) * chore: release v2.39.0 * Tom/fix icons (#1584) * fix: add Bifrost polkadot icon * fix: handle `.wh` suffix in tickers when fetching icons * fix: display name * chore: release v2.39.1 * apply hotfix patch (#1589) * feat: update subwallet logo (#1587) * fix(Redeem): show premium redeem compensation (#1591) * feat(Wallet): add bitforst token swap link (#1594) * fix(Loans): collateral overlapping modal ref issue (#1595) * feat(Staking): refactor (#1538) * feat(Staking): refactor * feat: continue * wip * feat: continue * feat: continue * feat: final * feat: final * feat: add tests * feat: continue tests * feat: continue * feat: add translations * fix: code review * feat: add staking limit * fix: limit * fix(Staking): limit parsing --------- Co-authored-by: tomjeatt <40243778+tomjeatt@users.noreply.github.com> * chore: release v2.40.0 * chore: bump bridge (#1600) * fix(Staking): close modal on submit (#1599) * chore: release v2.40.1 * [release] Interlay 2.40.1 (#1603) * chore: change discord link * fix: hotfix price fetcher * Release/interlay/2.29.0 (#1094) * fix: remove external dependencies from component library (#942) * fix: remove redundant layout mock stuff * fix: hide the connected socket console log * chore: mark the points * fix(NumberInput): remove react-aria (#934) * feat: add formik (#863) * feat(CoinIcon): update INTR and IBTC icon (#941) * feat: take supply and borrow caps into account * chore: update lib * refactor: code review * hotfix: testnet banner * feat: added trollbox Discord chat embed via widgetbot