Skip to content

Commit

Permalink
feat: add query params handling (#1347)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielsimao
danielsimao authored Jul 17, 2023
1 parent ae67a9c commit 8ba7cb2
Show file tree
Hide file tree
Showing 13 changed files with 132 additions and 87 deletions.
16 changes: 8 additions & 8 deletions src/pages/BTC/BTCOverview/BTCOverview.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 './BTCOverview.styles';
import { IssueForm, LegacyBurnForm, LegacyTransactions, RedeemForm } from './components';

const BTCOverview = (): JSX.Element => {
const { tabsProps } = useTabPageLocation();
const { tabsProps } = usePageQueryParams();

const { defaultSelectedKey } = tabsProps;

Expand All @@ -22,8 +22,8 @@ const BTCOverview = (): 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 <FullLoadingSpinner />;
Expand All @@ -35,16 +35,16 @@ const BTCOverview = (): JSX.Element => {
<StyledCard gap='spacing2'>
<Flex direction='column' gap='spacing8'>
<Tabs {...tabsProps} size='large' fullWidth>
<TabsItem title='Issue' key={BridgeActions.ISSUE}>
<TabsItem title='Issue' key={QUERY_PARAMETERS_VALUES.BRIDGE.TAB.ISSUE}>
<StyledFormWrapper>
{issueData && <IssueForm requestLimits={issueRequestLimit} {...issueData} />}
</StyledFormWrapper>
</TabsItem>
<TabsItem title='Redeem' key={BridgeActions.REDEEM}>
<TabsItem title='Redeem' key={QUERY_PARAMETERS_VALUES.BRIDGE.TAB.REDEEM}>
<StyledFormWrapper>{redeemData && <RedeemForm {...redeemData} />}</StyledFormWrapper>
</TabsItem>
{maxBurnableTokensData?.hasBurnableTokens && (
<TabsItem title='Burn' key={BridgeActions.BURN}>
<TabsItem title='Burn' key={QUERY_PARAMETERS_VALUES.BRIDGE.TAB.BURN}>
<StyledFormWrapper>
<LegacyBurnForm />
</StyledFormWrapper>
Expand Down
5 changes: 2 additions & 3 deletions src/pages/BTC/BTCOverview/components/IssueForm/IssueForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@ import {
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';
Expand Down Expand Up @@ -64,7 +63,7 @@ const IssueForm = ({ requestLimits, dustValue, issueFee }: IssueFormProps): JSX.

const [selectedVault, setSelectedVault] = useState<BridgeVaultData>();

const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.ISSUE);
const { data: vaultsData, getAvailableVaults } = useGetVaults(GetVaultType.ISSUE);

const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0);
const availableVaults = getAvailableVaults(debouncedMonetaryAmount);
Expand Down
5 changes: 2 additions & 3 deletions src/pages/BTC/BTCOverview/components/RedeemForm/RedeemForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,9 @@ import {
btcRedeemSchema,
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 { 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';
Expand Down Expand Up @@ -83,7 +82,7 @@ const RedeemForm = ({

const [selectedVault, setSelectedVault] = useState<BridgeVaultData>();

const { data: vaultsData, getAvailableVaults } = useGetVaults(BridgeActions.REDEEM);
const { data: vaultsData, getAvailableVaults } = useGetVaults(GetVaultType.REDEEM);

const debouncedMonetaryAmount = safeBitcoinAmount(debouncedAmount || 0);
const availableVaults = getAvailableVaults(debouncedMonetaryAmount);
Expand Down
13 changes: 8 additions & 5 deletions src/pages/SendAndReceive/SendAndReceiveForms/SendAndReceiveForms.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
import { Flex, Tabs, TabsItem } from '@/component-library';
import MainContainer from '@/parts/MainContainer';
import { useTabPageLocation } from '@/utils/hooks/use-tab-page-location';
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 { tabsProps } = useTabPageLocation();
const { data, tabsProps } = usePageQueryParams();

const ticker: string | undefined = data[QUERY_PARAMETERS.TRANSFER.TICKER];

return (
<MainContainer>
<StyledWrapper>
<StyledCard gap='spacing2'>
<Flex direction='column' gap='spacing8'>
<Tabs {...tabsProps} size='large' fullWidth>
<TabsItem title='Transfer' key='transfer'>
<TabsItem title='Transfer' key={QUERY_PARAMETERS_VALUES.TRANSFER.TAB.TRANSFER}>
<StyledFormWrapper>
<TransferForm />
<TransferForm ticker={ticker} />
</StyledFormWrapper>
</TabsItem>
<TabsItem title='Bridge' key='bridge'>
<TabsItem title='Bridge' key={QUERY_PARAMETERS_VALUES.TRANSFER.TAB.BRIDGE}>
<StyledFormWrapper>
<BridgeForm />
</StyledFormWrapper>
Expand Down
1 change: 1 addition & 0 deletions src/pages/SendAndReceive/SendAndReceiveForms/components/BridgeForm/BridgeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import useAccountId from '@/utils/hooks/use-account-id';
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<Chains>([]);
const [transferableTokens, setTransferableTokens] = useState<XCMTokenData[]>([]);
Expand Down
20 changes: 17 additions & 3 deletions src/pages/SendAndReceive/SendAndReceiveForms/components/TransferForm/TransferForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -26,11 +26,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 => {
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 { data: currencies, getCurrencyFromTicker } = useGetCurrencies(bridgeLoaded);
const { getBalance } = useGetBalances();
const { items: selectItems } = useSelectCurrency();

Expand Down Expand Up @@ -104,6 +108,16 @@ const TransferForm = (): JSX.Element => {
}
});

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);
Expand Down
10 changes: 5 additions & 5 deletions src/pages/Swap/Swap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ 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';

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();
Expand All @@ -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 <FullLoadingSpinner />;
Expand Down
50 changes: 24 additions & 26 deletions src/pages/Wallet/WalletOverview/components/AvailableAssetsTable/ActionsCell.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { CurrencyExt } from '@interlay/interbtc-api';
import { mergeProps } from '@react-aria/utils';
import { useTranslation } from 'react-i18next';
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 { 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;
Expand All @@ -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'));

Expand All @@ -52,40 +54,37 @@ const ActionsCell = ({
<Flex justifyContent={isMobile ? undefined : 'flex-end'} gap='spacing1'>
{isWrappedToken && (
<CTALink
{...commonCTAProps}
to={{
pathname: PAGES.BTC,
search: queryString.stringify({
[QUERY_PARAMETERS.TAB]: 'issue'
{...mergeProps(
commonCTAProps,
getLinkProps(PAGES.BTC, {
[QUERY_PARAMETERS.TAB]: QUERY_PARAMETERS_VALUES.BRIDGE.TAB.ISSUE
})
}}
)}
>
{t('issue')}
</CTALink>
)}
{isRedeemable && (
<CTALink
{...commonCTAProps}
to={{
pathname: PAGES.BTC,
search: queryString.stringify({
[QUERY_PARAMETERS.TAB]: 'redeem'
{...mergeProps(
commonCTAProps,
getLinkProps(PAGES.BTC, {
[QUERY_PARAMETERS.TAB]: QUERY_PARAMETERS_VALUES.BRIDGE.TAB.REDEEM
})
}}
)}
>
{t('redeem')}
</CTALink>
)}
{isPooledAsset && (
<CTALink
{...commonCTAProps}
to={{
pathname: PAGES.SWAP,
search: queryString.stringify({
{...mergeProps(
commonCTAProps,
getLinkProps(PAGES.SWAP, {
[QUERY_PARAMETERS.SWAP.FROM]: currency.ticker,
[QUERY_PARAMETERS.SWAP.TO]: isWrappedToken ? undefined : WRAPPED_TOKEN.ticker
})
}}
)}
>
{t('amm.swap')}
</CTALink>
Expand All @@ -104,13 +103,12 @@ const ActionsCell = ({
)}
{!isWrappedToken && (
<CTALink
{...commonCTAProps}
to={{
pathname: PAGES.SEND_AND_RECEIVE,
search: queryString.stringify({
[QUERY_PARAMETERS.TAB]: 'bridge'
{...mergeProps(
commonCTAProps,
getLinkProps(PAGES.SEND_AND_RECEIVE, {
[QUERY_PARAMETERS.TAB]: QUERY_PARAMETERS_VALUES.TRANSFER.TAB.BRIDGE
})
}}
)}
>
Bridge
</CTALink>
Expand Down
7 changes: 0 additions & 7 deletions src/types/bridge.ts
View file

This file was deleted.

30 changes: 29 additions & 1 deletion src/utils/constants/links.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@ const QUERY_PARAMETERS = Object.freeze({
SWAP: {
FROM: 'from',
TO: 'to'
},
TRANSFER: {
TICKER: 'ticker',
XCM_TICKER: 'xcmTicker'
}
});

Expand All @@ -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
};
7 changes: 0 additions & 7 deletions src/utils/constants/tab-ids.ts
View file

This file was deleted.

Loading

2 comments on commit 8ba7cb2

@vercel
Copy link

@vercel vercel bot commented on 8ba7cb2 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

interbtc-ui-interlay-testnet – ./

interbtc-ui-interlay-testnet.vercel.app
interbtc-ui-interlay-testnet-interlay.vercel.app
interbtc-ui-interlay-testnet-git-master-interlay.vercel.app
testnet.interlay.io

@vercel
Copy link

@vercel vercel bot commented on 8ba7cb2 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

interbtc-ui-kintsugi-testnet – ./

interbtc-ui-kintsugi-testnet-git-master-interlay.vercel.app
interbtc-ui.vercel.app
interbtc-ui-kintsugi-testnet-interlay.vercel.app
kintnet.interlay.io

Please sign in to comment.