Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Id 2758 balances routes #2474

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f2f918d
Fetch routes from Balances
alejoloaiza Dec 15, 2024
0aa4914
Control price display + some wip on pre-fetching
luads Dec 17, 2024
53eed89
Add displayInsufficientGasWarning
mimi-imtbl Dec 17, 2024
28896c3
Hide insufficient gas warning
mimi-imtbl Dec 17, 2024
3856c7b
Add logic to show all routes, show insufficient balance tag
mimi-imtbl Dec 18, 2024
e81e91e
Add insufficient balance tag
mimi-imtbl Dec 18, 2024
96f10cb
Sort routes by estimatedDuration, then insufficient gas, then insuffi…
mimi-imtbl Dec 18, 2024
5a52594
Merge
mimi-imtbl Dec 18, 2024
e05945d
Hide isInsufficientGas and isInsufficientBalance tag when showing rou…
mimi-imtbl Dec 18, 2024
17a9258
Hide gas drawer
mimi-imtbl Dec 18, 2024
b13c724
Max button added
alejoloaiza Dec 18, 2024
7ffbebb
Merge remote-tracking branch 'refs/remotes/origin/ID-2758-balances-ro…
alejoloaiza Dec 18, 2024
d71efda
Revert strict mode
mimi-imtbl Dec 18, 2024
a4435af
Disable review button if insufficient balance
mimi-imtbl Dec 18, 2024
e8b7327
Merge branch 'main' into ID-2758-balances-routes
mimi-imtbl Dec 18, 2024
a2c5c76
Adding adjustment to Max
alejoloaiza Dec 18, 2024
e69ac62
Merge remote-tracking branch 'refs/remotes/origin/ID-2758-balances-ro…
alejoloaiza Dec 18, 2024
b2535a8
Fix for Max when routes are not preloaded
alejoloaiza Dec 18, 2024
d66a63a
Add i18n for no balance text
mimi-imtbl Dec 18, 2024
2fab6e6
Fix for getting the slippage tier
alejoloaiza Dec 18, 2024
d5cc2cd
Merge remote-tracking branch 'refs/remotes/origin/ID-2758-balances-ro…
alejoloaiza Dec 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add logic to show all routes, show insufficient balance tag
mimi-imtbl committed Dec 18, 2024
commit 3856c7bc79c833941a5e87d4381e919eb4d6b25e
Original file line number Diff line number Diff line change
@@ -29,7 +29,6 @@ export interface RouteOptionProps<
rc?: RC;
selected?: boolean;
displayPriceDetails?: boolean;
displayInsufficientGasWarning?: boolean;
}

export function RouteOption<RC extends ReactElement | undefined = undefined>({
@@ -42,7 +41,6 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
rc = <span />,
selected = false,
displayPriceDetails = true,
displayInsufficientGasWarning = true,
}: RouteOptionProps<RC>) {
const { t } = useTranslation();

@@ -101,7 +99,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({

<MenuItem.Caption>
{`${t('views.ADD_TOKENS.fees.balance')} ${t('views.ADD_TOKENS.fees.fiatPricePrefix')} $${routeBalanceUsd}`}
{displayInsufficientGasWarning && routeData.isInsufficientGas && (
{ routeData.isInsufficientGas && (
<>
<br />
<span style={{ color: '#FF637F' }}>
@@ -112,6 +110,19 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
</span>
</>
)}

{ routeData.isInsufficientBalance && (
<>
<br />
<span style={{ color: '#FF637F' }}>
{/* {t('views.ADD_TOKENS.noBalanceRouteMessage', {
token: fromToken.symbol,
})} */}
{' '}
Insufficient balance
</span>
</>
)}
</MenuItem.Caption>

<MenuItem.PriceDisplay price={fromAmount} sx={{ visibility: displayPriceDetails ? 'visible' : 'hidden' }}>
47 changes: 27 additions & 20 deletions packages/checkout/widgets-lib/src/lib/squid/hooks/useRoutes.ts
Original file line number Diff line number Diff line change
@@ -111,10 +111,12 @@ export const useRoutes = () => {
toAmount,
balance,
additionalBuffer,
isInsufficientBalance: false,
isInsufficientGas: false,
};
};

const getSufficientFromAmounts = (
const getFromAmounts = (
tokens: Token[],
balances: TokenBalance[],
toChainId: string,
@@ -124,24 +126,25 @@ export const useRoutes = () => {
const filteredBalances = balances.filter(
(balance) => !(
balance.address.toLowerCase() === toTokenAddress.toLowerCase()
&& balance.chainId === toChainId
&& balance.chainId === toChainId
),
);

const amountDataArray: AmountData[] = filteredBalances
.map((balance) => getAmountData(tokens, balance, toAmount, toChainId, toTokenAddress))
.filter((value) => value !== undefined);
return filteredBalances
.map((balance) => {
const amountData = getAmountData(tokens, balance, toAmount, toChainId, toTokenAddress);
if (!amountData) return null;

return amountDataArray.filter((data: AmountData) => {
const formattedBalance = utils.formatUnits(
data.balance.balance,
data.balance.decimals,
);
const formattedBalance = parseFloat(
utils.formatUnits(balance.balance, balance.decimals),
);

return (
parseFloat(formattedBalance.toString()) > parseFloat(data.fromAmount)
);
});
return {
...amountData,
isInsufficientBalance: formattedBalance < parseFloat(amountData.fromAmount),
};
})
.filter((data) => data !== null);
};

const convertToFormattedAmount = (amount: string, decimals: number) => {
@@ -375,16 +378,20 @@ export const useRoutes = () => {
const feeCost = getTotalFees(routeResponse, data.balance.chainId);
const userGasBalance = findUserGasBalance(data.balance.chainId);

return {
amountData: data,
route: routeResponse.route,
isInsufficientGas: !hasSufficientNativeTokenBalance(
const isInsufficientGas = !data.isInsufficientBalance
&& !hasSufficientNativeTokenBalance(
userGasBalance,
data.fromAmount,
data.fromToken,
gasCost,
feeCost,
),
);

return {
amountData: data,
route: routeResponse.route,
isInsufficientGas,
isInsufficientBalance: data.isInsufficientBalance,
} as RouteData;
} catch (error) {
return null;
@@ -411,7 +418,7 @@ export const useRoutes = () => {
): Promise<RouteData[]> => {
const currentRequestId = ++latestRequestIdRef.current;

let fromAmountDataArray = getSufficientFromAmounts(
let fromAmountDataArray = getFromAmounts(
tokens,
balances,
toChanId,
3 changes: 3 additions & 0 deletions packages/checkout/widgets-lib/src/lib/squid/types.ts
Original file line number Diff line number Diff line change
@@ -33,12 +33,15 @@ export type AmountData = {
toAmount: string;
balance: TokenBalance;
additionalBuffer: number;
isInsufficientGas: boolean;
isInsufficientBalance: boolean;
};

export type RouteData = {
amountData: AmountData;
route: RouteResponse;
isInsufficientGas: boolean;
isInsufficientBalance: boolean;
};

export type RouteResponseData = {