0 Results
+We couldn't find any strategies
@@ -17,6 +13,6 @@ export const SuggestionEmpty: FC = () => { Please make sure your search input is correct or try searching by a different token pair - +
- ('button') ?? [];
};
export const selectCurrentOption = (root: HTMLElement | null) => {
@@ -11,13 +8,13 @@ export const selectCurrentOption = (root: HTMLElement | null) => {
};
export const getSelectedOption = (root: HTMLElement | null) => {
- const selector = '[role="option"][aria-selected="true"]';
+ const selector = 'button[aria-selected="true"]';
return root?.querySelector(selector);
};
export const getFirstOption = (root: HTMLElement | null) => {
getSelectedOption(root)?.setAttribute('aria-selected', 'false');
- const selector = '[role="option"]:first-of-type';
+ const selector = 'button:first-of-type';
return root?.querySelector(selector);
};
@@ -34,25 +31,30 @@ export const selectFirstOption = (root: HTMLElement | null) => {
export const selectLastOption = (root: HTMLElement | null) => {
getSelectedOption(root)?.setAttribute('aria-selected', 'false');
- const selector = '[role="option"]:last-of-type';
- const lastOption = root?.querySelector(selector);
- selectOption(lastOption);
+ const options = getOptions(root);
+ selectOption(options[options.length - 1]);
};
export const selectNextSibling = (root: HTMLElement | null) => {
+ const options = getOptions(root);
const selected = getSelectedOption(root);
- if (!selected) return selectFirstOption(root);
- const next = selected.nextElementSibling;
- if (!isOption(next)) return selectFirstOption(root);
+ if (!selected) return selectOption(options[0]);
selected.setAttribute('aria-selected', 'false');
- selectOption(next);
+ for (let i = 0; i < options.length; i++) {
+ if (options[i] === selected) {
+ return selectOption(options[i + 1] || options[0]);
+ }
+ }
};
export const selectPreviousSibling = (root: HTMLElement | null) => {
+ const options = getOptions(root);
const selected = getSelectedOption(root);
- if (!selected) return selectLastOption(root);
- const previous = selected.previousElementSibling;
- if (!isOption(previous)) return selectLastOption(root);
+ if (!selected) return selectOption(options[options.length - 1]);
selected.setAttribute('aria-selected', 'false');
- selectOption(previous);
+ for (let i = 0; i < options.length; i++) {
+ if (options[i] === selected) {
+ return selectOption(options[i - 1] || options[options.length - 1]);
+ }
+ }
};
diff --git a/src/components/explorer/useExplorer.tsx b/src/components/explorer/useExplorer.tsx
index 3ca1126c1..3291d5197 100644
--- a/src/components/explorer/useExplorer.tsx
+++ b/src/components/explorer/useExplorer.tsx
@@ -1,4 +1,8 @@
-import { useGetPairStrategies, useGetUserStrategies } from 'libs/queries';
+import {
+ useGetPairStrategies,
+ useGetUserStrategies,
+ useTokenStrategies,
+} from 'libs/queries';
import { useExplorerParams } from './useExplorerParams';
import { usePairs } from 'hooks/usePairs';
import { useMemo } from 'react';
@@ -7,6 +11,14 @@ export const useExplorer = () => {
const { slug, type } = useExplorerParams('/explore/$type');
const pairs = usePairs();
+ // SINGLE TOKEN
+ const singleToken = (() => {
+ if (type === 'wallet') return;
+ if (slug?.split('_').length !== 1) return;
+ return slug;
+ })();
+ const tokenQuery = useTokenStrategies(singleToken);
+
// PAIR
const exactMatch = useMemo(() => pairs.map.get(slug!), [pairs.map, slug]);
const pairQuery = useGetPairStrategies({
@@ -19,5 +31,6 @@ export const useExplorer = () => {
user: type === 'wallet' ? slug : undefined,
});
- return type === 'wallet' ? walletQuery : pairQuery;
+ if (type === 'wallet') return walletQuery;
+ return singleToken ? tokenQuery : pairQuery;
};
diff --git a/src/components/strategies/StrategyPageTabs.tsx b/src/components/strategies/StrategyPageTabs.tsx
index 5289c1650..d60b9c283 100644
--- a/src/components/strategies/StrategyPageTabs.tsx
+++ b/src/components/strategies/StrategyPageTabs.tsx
@@ -45,7 +45,7 @@ export const StrategyPageTabs = ({ currentPathname, tabs }: Props) => {
>
{icon}
{label}
- {!!badge && (
+ {typeof badge === 'number' && (
{badge}
diff --git a/src/components/strategies/overview/StrategyContent.module.css b/src/components/strategies/overview/StrategyContent.module.css
index 5242341f2..22e45fd5a 100644
--- a/src/components/strategies/overview/StrategyContent.module.css
+++ b/src/components/strategies/overview/StrategyContent.module.css
@@ -1,8 +1,26 @@
.strategy-list {
contain: content;
- grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ grid-template-columns: repeat(auto-fill, 375px);
+ justify-content: center;
}
-.strategy-list > li {
- /* content-visibility: auto; */ /* to prevent no tooltips when scrolling down */
- contain-intrinsic-size: auto 410px;
+.strategy-item {
+ height: 400px;
+ max-width: 375px;
+ content-visibility: auto; /* to prevent no tooltips when scrolling down */
+ contain-intrinsic-size: 375px 400px;
}
+@media (prefers-reduced-motion: no-preference) {
+ .animate-item {
+ animation: open 200ms var(--delay, 0ms) backwards;
+ }
+}
+@keyframes open {
+ from {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
\ No newline at end of file
diff --git a/src/components/strategies/overview/StrategyContent.tsx b/src/components/strategies/overview/StrategyContent.tsx
index c986974f7..5b0e9ad10 100644
--- a/src/components/strategies/overview/StrategyContent.tsx
+++ b/src/components/strategies/overview/StrategyContent.tsx
@@ -1,6 +1,5 @@
import { FC, memo, ReactElement } from 'react';
import { StrategyWithFiat } from 'libs/queries';
-import { m } from 'libs/motion';
import { StrategyBlock } from 'components/strategies/overview/strategyBlock';
import { StrategyBlockCreate } from 'components/strategies/overview/strategyBlock';
import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
@@ -22,17 +21,11 @@ export const _StrategyContent: FC = ({
}) => {
if (isPending) {
return (
-
+
= ({
return (
= ({
strategy,
className,
+ style,
isExplorer,
}) => {
+ const id = useId();
+ const [visible, setVisible] = useState(false);
+ useEffect(() => {
+ const el = document.getElementById(id);
+ if (!el) return;
+ const observer = new IntersectionObserver((entries) => {
+ for (const entry of entries) {
+ setVisible(entry.intersectionRatio > 0);
+ }
+ });
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [id]);
+
return (
-
-
+ {visible && (
+ <>
+ = ({ current }) => {
>
{icon}
{label}
- {!!badge && (
+ {typeof badge === 'number' && (
{badge}
diff --git a/src/fonts.css b/src/fonts.css
index bf96528e5..e7288918f 100644
--- a/src/fonts.css
+++ b/src/fonts.css
@@ -24,7 +24,7 @@
@font-face {
font-family: 'Carbon-Title';
font-weight: 500;
- font-display: swap;
+ font-display: block; /* Prevent layout shifting for 100ms. This font is the first to be seen (header) */
src: url('assets/font/title/medium.woff2') format('woff');
}
@@ -74,7 +74,7 @@
@font-face {
font-family: 'Carbon-Text';
font-weight: 400, normal;
- font-display: swap;
+ font-display: block;
src: url('assets/font/text/regular.ttf')
format('truetype');
}
diff --git a/src/hooks/useContract.ts b/src/hooks/useContract.ts
index b904b3cf0..dbf5a6fbd 100644
--- a/src/hooks/useContract.ts
+++ b/src/hooks/useContract.ts
@@ -1,8 +1,22 @@
import { useWagmi } from 'libs/wagmi';
import { Token__factory, Voucher__factory } from 'abis/types';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
import config from 'config';
+export const useVoucher = () => {
+ const { provider, signer } = useWagmi();
+ return useQuery({
+ queryKey: ['contract', 'voucher'],
+ queryFn: () => ({
+ read: Voucher__factory.connect(
+ config.addresses.carbon.voucher,
+ provider!
+ ),
+ write: Voucher__factory.connect(config.addresses.carbon.voucher, signer!),
+ }),
+ });
+};
export const useContract = () => {
const { provider, signer } = useWagmi();
@@ -14,16 +28,5 @@ export const useContract = () => {
[provider, signer]
);
- const Voucher = useMemo(
- () => ({
- read: Voucher__factory.connect(
- config.addresses.carbon.voucher,
- provider!
- ),
- write: Voucher__factory.connect(config.addresses.carbon.voucher, signer!),
- }),
- [provider, signer]
- );
-
- return { Token, Voucher };
+ return { Token };
};
diff --git a/src/hooks/useKeyPress/index.ts b/src/hooks/useKeyPress/index.ts
deleted file mode 100644
index 767d4e833..000000000
--- a/src/hooks/useKeyPress/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-export const useKeyPress = () => {
- const [keyPressed, setKeyPressed] = useState('');
-
- const handleKeyDown = useCallback((event: KeyboardEvent) => {
- setKeyPressed(event.key);
- }, []);
-
- useEffect(() => {
- document.addEventListener('keydown', handleKeyDown);
-
- return () => {
- document.removeEventListener('keydown', handleKeyDown);
- };
- }, [handleKeyDown]);
-
- return {
- keyPressed,
- };
-};
diff --git a/src/hooks/useKeyPress/useKeyPress.test.ts b/src/hooks/useKeyPress/useKeyPress.test.ts
deleted file mode 100644
index 0c51dc112..000000000
--- a/src/hooks/useKeyPress/useKeyPress.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useKeyPress } from '.';
-import { test, expect, vi, describe } from 'vitest';
-import { renderHook, act } from 'libs/testing-library';
-
-describe('useKeyPress', () => {
- test('Should update the keyPressed state when esc key is pressed', () => {
- const { result } = renderHook(() => useKeyPress());
- expect(result.current.keyPressed).toBe('');
-
- act(() => {
- const keyboardEvent = new KeyboardEvent('keydown', { key: 'esc' });
- document.dispatchEvent(keyboardEvent);
- });
- expect(result.current.keyPressed).toBe('esc');
- });
-
- test('Should remove the event listener when the component unmounts', () => {
- const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
- const { unmount } = renderHook(() => useKeyPress());
- expect(removeEventListenerSpy).not.toHaveBeenCalled();
- unmount();
- expect(removeEventListenerSpy).toHaveBeenCalled();
- });
-});
diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts
index 3f579e5a0..0b4756678 100644
--- a/src/hooks/useModal.ts
+++ b/src/hooks/useModal.ts
@@ -1,9 +1,8 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
import { ModalKey } from 'libs/modals/modals.types';
import { uuid } from 'utils/helpers';
import { useStore } from 'store';
import { ModalSchema } from 'libs/modals/modals';
-import { useKeyPress } from './useKeyPress';
export const useModal = () => {
const {
@@ -12,8 +11,6 @@ export const useModal = () => {
} = useStore();
const { open: modalsOpen, minimized: modalsMinimized } = modals;
- const { keyPressed } = useKeyPress();
-
const openModal = useCallback(
(key: T, data: ModalSchema[T]) => {
if (key === 'wallet') {
@@ -42,11 +39,6 @@ export const useModal = () => {
[modalsOpen, setModalsOpen]
);
- useEffect(() => {
- keyPressed === 'Escape' && closeModal(activeModalId);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [keyPressed]);
-
const minimizeModal = (id: string) => {
const index = modalsOpen.findIndex((modal) => modal.id === id);
if (index > -1) {
diff --git a/src/hooks/useStrategies.tsx b/src/hooks/useStrategies.tsx
index a3ee61a9c..108924874 100644
--- a/src/hooks/useStrategies.tsx
+++ b/src/hooks/useStrategies.tsx
@@ -116,7 +116,7 @@ export const useStrategiesWithFiat = (
for (const item of tradeCountQuery.data ?? []) {
tradeCount[item.strategyId] = item.tradeCount;
}
- return strategies.map((strategy) => {
+ const result = strategies.map((strategy) => {
const basePrice = new SafeDecimal(prices[strategy.base.address] ?? 0);
const quotePrice = new SafeDecimal(prices[strategy.quote.address] ?? 0);
const base = basePrice.times(strategy.order1.balance);
@@ -128,6 +128,13 @@ export const useStrategiesWithFiat = (
tradeCount: tradeCount[strategy.id] ?? 0,
};
});
+ return {
+ strategies: result,
+ isPending:
+ query.isPending ||
+ priceQueries.some((q) => q.isPending) ||
+ tradeCountQuery.isPending,
+ };
};
type StrategyCtx = ReturnType;
@@ -148,8 +155,8 @@ interface StrategyProviderProps {
children: ReactNode;
}
export const StrategyProvider: FC = (props) => {
- const strategies = useStrategiesWithFiat(props.query);
- const ctx = useStrategyFilter(strategies, props.query.isPending);
+ const { strategies, isPending } = useStrategiesWithFiat(props.query);
+ const ctx = useStrategyFilter(strategies, isPending);
return (
{props.children}
diff --git a/src/hooks/useTokens.ts b/src/hooks/useTokens.ts
index c716a2ffd..63e9510ca 100644
--- a/src/hooks/useTokens.ts
+++ b/src/hooks/useTokens.ts
@@ -8,7 +8,7 @@ import { useWagmi } from 'libs/wagmi';
export const useTokens = () => {
const { user } = useWagmi();
const {
- tokens: { tokensMap, importedTokens, setImportedTokens, ...props },
+ tokens: { tokensMap, setImportedTokens, ...props },
} = useStore();
const getTokenById = useCallback(
@@ -16,23 +16,21 @@ export const useTokens = () => {
[tokensMap]
);
- const importToken = useCallback(
- (token: Token) => {
- const normalizedAddress = utils.getAddress(token.address);
- const exists =
- tokensMap.has(normalizedAddress) ||
- !!importedTokens.find((tkn) => tkn.address === normalizedAddress);
- if (exists) return;
+ const importTokens = useCallback(
+ (tokens: Token[]) => {
+ const missing: Token[] = [];
+ for (const token of tokens) {
+ if (getTokenById(token.address)) continue;
+ const normalizedAddress = utils.getAddress(token.address);
+ missing.push({ ...token, address: normalizedAddress });
+ }
const lsImportedTokens = lsService.getItem('importedTokens') ?? [];
- const newTokens = [
- ...lsImportedTokens,
- { ...token, address: normalizedAddress },
- ];
+ const newTokens = [...lsImportedTokens, ...missing];
setImportedTokens(newTokens);
lsService.setItem('importedTokens', newTokens);
},
- [tokensMap, importedTokens, setImportedTokens]
+ [getTokenById, setImportedTokens]
);
const [favoriteTokens, _setFavoriteTokens] = useState(
@@ -66,7 +64,7 @@ export const useTokens = () => {
return {
...props,
getTokenById,
- importToken,
+ importTokens,
addFavoriteToken,
removeFavoriteToken,
favoriteTokens,
diff --git a/src/index.css b/src/index.css
index c3f26d773..08a4a9446 100644
--- a/src/index.css
+++ b/src/index.css
@@ -23,7 +23,11 @@
html,
body,
#root {
- @apply text-white bg-black font-text w-full min-h-screen;
+ @apply text-white bg-black font-text min-h-screen;
+ }
+
+ html {
+ scrollbar-gutter: stable both-edges; /* Prevent layout shifting */
}
h1, h2, th {
diff --git a/src/init-sentry.ts b/src/init-sentry.ts
index dd8d2770a..63877c6eb 100644
--- a/src/init-sentry.ts
+++ b/src/init-sentry.ts
@@ -7,14 +7,10 @@ if (config.sentryDSN) {
dsn: config.sentryDSN,
integrations: [
Sentry.tanstackRouterBrowserTracingIntegration(router),
- Sentry.replayIntegration(),
Sentry.captureConsoleIntegration({ levels: ['error'] }),
],
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
- // Session Replay
- replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
- replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});
}
diff --git a/src/libs/modals/Modal.tsx b/src/libs/modals/Modal.tsx
index ff25d86cd..6bba9c639 100644
--- a/src/libs/modals/Modal.tsx
+++ b/src/libs/modals/Modal.tsx
@@ -37,7 +37,7 @@ export const Modal: FC = ({
return (
onCloseHandler(id)}
+ close={() => onCloseHandler(id)}
className="px-content items-center justify-center"
>
= ({
};
return (
- onCloseHandler(id)} className="items-end">
+ onCloseHandler(id)} className="items-end">
e.stopPropagation()}
diff --git a/src/libs/modals/ModalSlideOver.tsx b/src/libs/modals/ModalSlideOver.tsx
index 104319452..e66ecca8b 100644
--- a/src/libs/modals/ModalSlideOver.tsx
+++ b/src/libs/modals/ModalSlideOver.tsx
@@ -4,6 +4,8 @@ import { useModal } from 'hooks/useModal';
import { ReactComponent as IconX } from 'assets/icons/X.svg';
import { Overlay } from 'libs/modals/Overlay';
import { ModalProps } from 'libs/modals/modals.types';
+import { cn } from 'utils/helpers';
+import styles from './modal.module.css';
const getSize = (size: 'sm' | 'md' | 'lg') => {
switch (size) {
@@ -27,7 +29,10 @@ export const ModalSlideOver: FC = ({
const sizeClass = getSize(size);
return (
- closeModal(id)} className="justify-end">
+ closeModal(id)}
+ className={cn('justify-end', styles.modalSlider)}
+ >
e.stopPropagation()}
className={`relative w-full ${sizeClass}`}
diff --git a/src/libs/modals/Overlay.tsx b/src/libs/modals/Overlay.tsx
index 1d72e8085..966db3766 100644
--- a/src/libs/modals/Overlay.tsx
+++ b/src/libs/modals/Overlay.tsx
@@ -1,17 +1,20 @@
import { m, Variants } from 'libs/motion';
-import { FC, MouseEventHandler, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
import { cn } from 'utils/helpers';
type Props = {
className?: string;
- onClick?: MouseEventHandler | undefined;
+ close?: () => void | undefined;
children: ReactNode;
};
-export const Overlay: FC = ({ children, onClick, className }) => {
+export const Overlay: FC = ({ children, close, className }) => {
return (
{
+ if (e.key === 'Escape' && close) close();
+ }}
+ onClick={close}
variants={fadeIn}
initial="hidden"
animate="visible"
diff --git a/src/libs/modals/modal.module.css b/src/libs/modals/modal.module.css
new file mode 100644
index 000000000..ba74240c3
--- /dev/null
+++ b/src/libs/modals/modal.module.css
@@ -0,0 +1,3 @@
+.modal-slider {
+ scrollbar-gutter: stable;
+}
\ No newline at end of file
diff --git a/src/libs/modals/modals/ModalImportToken.tsx b/src/libs/modals/modals/ModalImportToken.tsx
index 428ba76a1..fc47baf6b 100644
--- a/src/libs/modals/modals/ModalImportToken.tsx
+++ b/src/libs/modals/modals/ModalImportToken.tsx
@@ -21,13 +21,13 @@ export const ModalImportToken: ModalFC = ({
}) => {
const { closeModal } = useModal();
const { data, isPending, isError } = useGetTokenData(address);
- const { importToken } = useTokens();
+ const { importTokens } = useTokens();
const onClick = () => {
if (!data) {
return;
}
- importToken(data);
+ importTokens([data]);
closeModal(id);
};
diff --git a/src/libs/queries/chain/voucher.ts b/src/libs/queries/chain/voucher.ts
index 158e7aabe..6818c9ef7 100644
--- a/src/libs/queries/chain/voucher.ts
+++ b/src/libs/queries/chain/voucher.ts
@@ -1,15 +1,15 @@
import { useQuery } from '@tanstack/react-query';
-import { useContract } from 'hooks/useContract';
+import { useVoucher } from 'hooks/useContract';
import { QueryKey } from 'libs/queries/queryKey';
import { ONE_DAY_IN_MS } from 'utils/time';
export const useGetVoucherOwner = (id?: string) => {
- const { Voucher } = useContract();
+ const { data: contract, isPending } = useVoucher();
return useQuery({
queryKey: QueryKey.voucherOwner(id),
- queryFn: () => Voucher.read.ownerOf(id ?? ''),
- enabled: !!id,
+ queryFn: () => contract?.read.ownerOf(id ?? ''),
+ enabled: !!id && !isPending,
retry: 1,
staleTime: ONE_DAY_IN_MS,
});
diff --git a/src/libs/queries/extApi/tokenPrice.ts b/src/libs/queries/extApi/tokenPrice.ts
index af89d9830..1a5d976d6 100644
--- a/src/libs/queries/extApi/tokenPrice.ts
+++ b/src/libs/queries/extApi/tokenPrice.ts
@@ -42,6 +42,7 @@ export const useGetMultipleTokenPrices = (addresses: string[] = []) => {
refetchInterval: FIVE_MIN_IN_MS,
staleTime: FIVE_MIN_IN_MS,
refetchOnWindowFocus: false,
+ retry: 0, // Critical for initial load
};
}),
});
diff --git a/src/libs/queries/extApi/tokens.ts b/src/libs/queries/extApi/tokens.ts
index dcb1b3da2..447a2cffc 100644
--- a/src/libs/queries/extApi/tokens.ts
+++ b/src/libs/queries/extApi/tokens.ts
@@ -8,13 +8,16 @@ export const useTokensQuery = () => {
return useQuery({
queryKey: QueryKey.tokens(),
queryFn: async () => {
+ const local = lsService.getItem('tokenListCache');
+ if (local && local.timestamp > Date.now() - ONE_HOUR_IN_MS) {
+ return local.tokens;
+ }
const tokens = buildTokenList(await fetchTokenLists());
lsService.setItem('tokenListCache', { tokens, timestamp: Date.now() });
return tokens;
},
staleTime: ONE_HOUR_IN_MS,
- initialData: lsService.getItem('tokenListCache')?.tokens,
- initialDataUpdatedAt: lsService.getItem('tokenListCache')?.timestamp,
+ placeholderData: (previous) => previous,
meta: {
errorMessage: 'useTokensQuery failed with error:',
},
diff --git a/src/libs/queries/queryKey.ts b/src/libs/queries/queryKey.ts
index f6502e975..20fdcc647 100644
--- a/src/libs/queries/queryKey.ts
+++ b/src/libs/queries/queryKey.ts
@@ -55,6 +55,12 @@ export namespace QueryKey {
token0,
token1,
];
+ export const strategiesByToken = (token?: string) => [
+ ...sdk,
+ 'strategies',
+ 'token',
+ token,
+ ];
export const approval = (user: string, token: string, spender: string) => [
...chain,
diff --git a/src/libs/queries/sdk/pairs.ts b/src/libs/queries/sdk/pairs.ts
index 343628911..cdf83a66c 100644
--- a/src/libs/queries/sdk/pairs.ts
+++ b/src/libs/queries/sdk/pairs.ts
@@ -3,39 +3,48 @@ import { QueryKey } from 'libs/queries/queryKey';
import { fetchTokenData } from 'libs/tokens/tokenHelperFn';
import { useContract } from 'hooks/useContract';
import { useTokens } from 'hooks/useTokens';
-import { ONE_DAY_IN_MS } from 'utils/time';
-import { useCarbonInit } from 'hooks/useCarbonInit';
+import { ONE_HOUR_IN_MS } from 'utils/time';
import { carbonSDK } from 'libs/sdk';
import { lsService } from 'services/localeStorage';
-
-const getCachedData = () => {
- const cachedPairs = lsService.getItem('tokenPairsCache');
- if (cachedPairs && cachedPairs.timestamp > Date.now() - 1000 * 60 * 60) {
- return cachedPairs.pairs;
- }
- return undefined;
-};
+import { useState } from 'react';
+import { Token } from 'libs/tokens';
export const useGetTradePairsData = () => {
- const { isInitialized } = useCarbonInit();
const { Token } = useContract();
- const { tokens, getTokenById, importToken } = useTokens();
-
- const _getTknData = async (address: string) => {
- const data = await fetchTokenData(Token, address);
- importToken(data);
- return data;
- };
+ const { tokens, getTokenById, importTokens } = useTokens();
+ const [cache] = useState(lsService.getItem('tokenPairsCache'));
return useQuery({
queryKey: QueryKey.pairs(),
queryFn: async () => {
const pairs = await carbonSDK.getAllPairs();
- const promises = pairs.map(async (pair) => ({
- baseToken: getTokenById(pair[0]) ?? (await _getTknData(pair[0])),
- quoteToken: getTokenById(pair[1]) ?? (await _getTknData(pair[1])),
+ const tokens = new Map();
+ const missing = new Set();
+
+ const markForMissing = (address: string) => {
+ if (tokens.has(address)) return;
+ const existing = getTokenById(address);
+ if (existing) tokens.set(address, existing);
+ else missing.add(address);
+ };
+
+ for (const pair of pairs) {
+ markForMissing(pair[0]);
+ markForMissing(pair[1]);
+ }
+
+ const getMissing = Array.from(missing).map(async (address) => {
+ const token = await fetchTokenData(Token, address);
+ tokens.set(address, token);
+ return token;
+ });
+ const missingTokens = await Promise.all(getMissing);
+ importTokens(missingTokens);
+
+ const result = pairs.map((pair) => ({
+ baseToken: tokens.get(pair[0])!,
+ quoteToken: tokens.get(pair[1])!,
}));
- const result = await Promise.all(promises);
const pairsWithInverse = [
...result,
@@ -52,9 +61,10 @@ export const useGetTradePairsData = () => {
return pairsWithInverse;
},
- placeholderData: getCachedData(),
- enabled: !!tokens.length && isInitialized,
+ initialData: cache?.pairs,
+ initialDataUpdatedAt: cache?.timestamp,
+ enabled: !!tokens.length,
retry: 1,
- staleTime: ONE_DAY_IN_MS,
+ staleTime: ONE_HOUR_IN_MS,
});
};
diff --git a/src/libs/queries/sdk/strategy.ts b/src/libs/queries/sdk/strategy.ts
index 4d9b46191..4fbab5726 100644
--- a/src/libs/queries/sdk/strategy.ts
+++ b/src/libs/queries/sdk/strategy.ts
@@ -10,7 +10,6 @@ import { useContract } from 'hooks/useContract';
import config from 'config';
import { ONE_DAY_IN_MS } from 'utils/time';
import { useTokens } from 'hooks/useTokens';
-import { useCarbonInit } from 'hooks/useCarbonInit';
import {
EncodedStrategyBNStr,
StrategyUpdate,
@@ -20,6 +19,8 @@ import { MarginalPriceOptions } from '@bancor/carbon-sdk/strategy-management';
import { carbonSDK } from 'libs/sdk';
import { getLowestBits } from 'utils/helpers';
import { useGetAddressFromEns } from 'libs/queries/chain/ens';
+import { getAddress } from 'ethers/lib/utils';
+import { usePairs } from 'hooks/usePairs';
export type StrategyStatus = 'active' | 'noBudget' | 'paused' | 'inactive';
@@ -53,27 +54,42 @@ export interface StrategyWithFiat extends Strategy {
interface StrategiesHelperProps {
strategies: SDKStrategy[];
getTokenById: (id: string) => Token | undefined;
- importToken: (token: Token) => void;
+ importTokens: (tokens: Token[]) => void;
Token: (address: string) => { read: TokenContract };
}
const buildStrategiesHelper = async ({
strategies,
getTokenById,
- importToken,
+ importTokens,
Token,
}: StrategiesHelperProps) => {
- const _getTknData = async (address: string) => {
- const data = await fetchTokenData(Token, address);
- importToken(data);
- return data;
+ const tokens = new Map();
+ const missing = new Set();
+
+ const markForMissing = (address: string) => {
+ if (tokens.has(address)) return;
+ const existing = getTokenById(address);
+ if (existing) tokens.set(address, existing);
+ else missing.add(address);
};
- const promises = strategies.map(async (s) => {
- const base = getTokenById(s.baseToken) || (await _getTknData(s.baseToken));
- const quote =
- getTokenById(s.quoteToken) || (await _getTknData(s.quoteToken));
+ for (const strategy of strategies) {
+ markForMissing(strategy.baseToken);
+ markForMissing(strategy.quoteToken);
+ }
+ const getMissing = Array.from(missing).map(async (address) => {
+ const token = await fetchTokenData(Token, address);
+ tokens.set(address, token);
+ return token;
+ });
+ const missingTokens = await Promise.all(getMissing);
+ importTokens(missingTokens);
+
+ return strategies.map((s) => {
+ const base = tokens.get(s.baseToken)!;
+ const quote = tokens.get(s.quoteToken)!;
const sellLow = new SafeDecimal(s.sellPriceLow);
const sellHigh = new SafeDecimal(s.sellPriceHigh);
const sellBudget = new SafeDecimal(s.sellBudget);
@@ -119,7 +135,7 @@ const buildStrategiesHelper = async ({
marginalRate: s.sellPriceMarginal,
};
- const strategy: Strategy = {
+ return {
id: s.id,
idDisplay: getLowestBits(s.id),
base,
@@ -128,12 +144,8 @@ const buildStrategiesHelper = async ({
order1,
status,
encoded: s.encoded,
- };
-
- return strategy;
+ } as Strategy;
});
-
- return await Promise.all(promises);
};
interface Props {
@@ -141,8 +153,7 @@ interface Props {
}
export const useGetUserStrategies = ({ user }: Props) => {
- const { isInitialized } = useCarbonInit();
- const { tokens, getTokenById, importToken } = useTokens();
+ const { tokens, getTokenById, importTokens } = useTokens();
const { Token } = useContract();
const ensAddress = useGetAddressFromEns(user || '');
@@ -155,24 +166,22 @@ export const useGetUserStrategies = ({ user }: Props) => {
queryKey: QueryKey.strategies(address),
queryFn: async () => {
if (!address || !isValidAddress || isZeroAddress) return [];
-
const strategies = await carbonSDK.getUserStrategies(address);
return buildStrategiesHelper({
strategies,
getTokenById,
- importToken,
+ importTokens,
Token,
});
},
- enabled: tokens.length > 0 && isInitialized && ensAddress.isFetched,
+ enabled: tokens.length > 0 && ensAddress.isFetched,
staleTime: ONE_DAY_IN_MS,
retry: false,
});
};
export const useGetStrategy = (id: string) => {
- const { isInitialized } = useCarbonInit();
- const { tokens, getTokenById, importToken } = useTokens();
+ const { tokens, getTokenById, importTokens } = useTokens();
const { Token } = useContract();
return useQuery({
@@ -182,12 +191,12 @@ export const useGetStrategy = (id: string) => {
const strategies = await buildStrategiesHelper({
strategies: [strategy],
getTokenById,
- importToken,
+ importTokens,
Token,
});
return strategies[0];
},
- enabled: tokens.length > 0 && isInitialized,
+ enabled: tokens.length > 0,
staleTime: ONE_DAY_IN_MS,
retry: false,
});
@@ -199,8 +208,7 @@ interface PropsPair {
}
export const useGetPairStrategies = ({ token0, token1 }: PropsPair) => {
- const { isInitialized } = useCarbonInit();
- const { tokens, getTokenById, importToken } = useTokens();
+ const { tokens, getTokenById, importTokens } = useTokens();
const { Token } = useContract();
return useQuery({
@@ -211,11 +219,55 @@ export const useGetPairStrategies = ({ token0, token1 }: PropsPair) => {
return buildStrategiesHelper({
strategies,
getTokenById,
- importToken,
+ importTokens,
+ Token,
+ });
+ },
+ enabled: !token0 || !token1 || tokens.length > 0,
+ staleTime: ONE_DAY_IN_MS,
+ retry: false,
+ });
+};
+
+interface PropsPair {
+ token0?: string;
+ token1?: string;
+}
+
+export const useTokenStrategies = (token?: string) => {
+ const { getTokenById, importTokens } = useTokens();
+ const { Token } = useContract();
+ const { map: pairMap } = usePairs();
+ return useQuery({
+ queryKey: QueryKey.strategiesByToken(token),
+ queryFn: async () => {
+ const allQuotes = new Set();
+ const base = getAddress(token!);
+ for (const { baseToken, quoteToken } of pairMap.values()) {
+ if (baseToken.address === base) allQuotes.add(quoteToken.address);
+ if (quoteToken.address === base) allQuotes.add(baseToken.address);
+ }
+ const getStrategies: Promise[] = [];
+ for (const quote of allQuotes) {
+ getStrategies.push(carbonSDK.getStrategiesByPair(base, quote));
+ }
+
+ const allResponses = await Promise.allSettled(getStrategies);
+ for (const res of allResponses) {
+ if (res.status === 'rejected') console.error(res.reason);
+ }
+ const allStrategies = allResponses
+ .filter((v) => v.status === 'fulfilled')
+ .map((v) => (v as PromiseFulfilledResult).value);
+ const result = await buildStrategiesHelper({
+ strategies: allStrategies.flat(),
+ getTokenById,
+ importTokens,
Token,
});
+ return result;
},
- enabled: tokens.length > 0 && isInitialized,
+ enabled: !!token && !!pairMap.size,
staleTime: ONE_DAY_IN_MS,
retry: false,
});
diff --git a/src/libs/tokens/tokenHelperFn.ts b/src/libs/tokens/tokenHelperFn.ts
index d57c500eb..4d3e3fae1 100644
--- a/src/libs/tokens/tokenHelperFn.ts
+++ b/src/libs/tokens/tokenHelperFn.ts
@@ -1,10 +1,9 @@
-import { uniqBy } from 'lodash';
import { utils } from 'ethers';
import { Token, TokenList } from 'libs/tokens/token.types';
import { Token as TokenContract } from 'abis/types';
import { lsService } from 'services/localeStorage';
-import config from 'config';
import { tokenParserMap } from 'config/utils';
+import config from 'config';
const getLogoByURI = (uri: string | undefined) =>
uri && uri.startsWith('ipfs') ? buildIpfsUri(uri.split('//')[1]) : uri;
@@ -67,9 +66,10 @@ export const buildTokenList = (tokenList: TokenList[]): Token[] => {
tokens.push(...merged);
const lsImportedTokens = lsService.getItem('importedTokens') ?? [];
- tokens.push(...lsImportedTokens);
-
- return uniqBy(tokens, (token: Token) => token.address);
+ const result = new Map();
+ for (const token of tokens) result.set(token.address, token);
+ for (const token of lsImportedTokens) result.set(token.address, token);
+ return Array.from(result.values());
};
export const fetchTokenData = async (
diff --git a/src/libs/twmerge/index.ts b/src/libs/twmerge/index.ts
index 5566eb839..154613f0e 100644
--- a/src/libs/twmerge/index.ts
+++ b/src/libs/twmerge/index.ts
@@ -92,6 +92,7 @@ export const customTwMerge = extendTailwindMerge({
'ping',
'pulse',
'bounce',
+ 'fade',
'slideUp',
'scaleUp',
],
diff --git a/src/pages/explorer/index.tsx b/src/pages/explorer/index.tsx
index 69230173a..80cd9c631 100644
--- a/src/pages/explorer/index.tsx
+++ b/src/pages/explorer/index.tsx
@@ -20,8 +20,7 @@ export const ExplorerPage = () => {
if (slug && type === 'token-pair') {
// Set last visited pair
const [base, quote] = slug.split('_');
- lsService.setItem('tradePair', [base, quote]);
- return;
+ if (base && quote) lsService.setItem('tradePair', [base, quote]);
}
}, [slug, navigate, type]);
@@ -34,7 +33,7 @@ export const ExplorerPage = () => {
- {props.filteredPairs.length} Results -
- {props.filteredPairs.map((pair) => { - const slug = toPairSlug(pair.baseToken, pair.quoteToken); - const params = { type: 'token-pair' as const, slug }; - return ( - e.preventDefault()} // prevent blur on click - onClick={() => props.setOpen(false)} - role="option" - className="px-30 flex cursor-pointer items-center space-x-10 py-10 hover:bg-white/20 aria-selected:bg-white/10" - to="/explore/$type/$slug" - params={params} - > -
+ {!!filteredTokens.length && (
+
);
};
diff --git a/src/components/explorer/suggestion/index.module.css b/src/components/explorer/suggestion/index.module.css
new file mode 100644
index 000000000..ddb40c655
--- /dev/null
+++ b/src/components/explorer/suggestion/index.module.css
@@ -0,0 +1,40 @@
+@starting-style {
+ .root-search:has(.input-search[aria-expanded="true"]) .dialog {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ .listbox:empty + .empty {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .dialog, .listbox:empty + .empty {
+ transition-behavior: allow-discrete;
+ transition-property: opacity, transform, display;
+ transition-duration: 0.3s;
+ }
+}
+.root-search:has(.input-search[aria-expanded="false"]) .dialog {
+ display: none;
+ opacity: 0;
+ transform: scale(0.95);
+}
+.listbox {
+ display: grid;
+}
+.listbox:empty {
+ display: none;
+}
+.listbox:not(:empty) + .empty {
+ display: none;
+}
+.input-search:placeholder-shown + button {
+ display: none;
+}
+.root-search [role="option"] {
+ content-visibility: auto;
+ contain-intrinsic-size: 50px;
+ height: 50px;
+}
diff --git a/src/components/explorer/suggestion/utils.ts b/src/components/explorer/suggestion/utils.ts
index d7772db57..b8f8ef49d 100644
--- a/src/components/explorer/suggestion/utils.ts
+++ b/src/components/explorer/suggestion/utils.ts
@@ -1,8 +1,5 @@
-export const suggestionClasses =
- 'absolute left-0 top-[100%] z-30 mt-10 max-h-[300px] w-full overflow-hidden overflow-y-auto rounded-10 bg-background-800 py-10 md:mt-20';
-
-const isOption = (el?: Element | null): el is HTMLElement => {
- return el instanceof HTMLElement && el.getAttribute('role') === 'option';
+const getOptions = (root: HTMLElement | null) => {
+ return root?.querySelectorAll
+
+ )}
+ {!!filteredPairs.length && (
+ + Tokens +
+ {filteredTokens.slice(0, maxTokens).map((token, index) => ( + + ))} + {maxTokens <= filteredTokens.length && ( + + )} +
+
+ )}
Pairs
+ {filteredPairs.slice(0, maxPairs).map((pair, index) => { + const slug = toPairSlug(pair.baseToken, pair.quoteToken); + return ( + + ); + })} + {maxPairs <= filteredPairs.length && ( + + )} +-
- {strategies.map((s) => (
-
-
-
-
-
+
+
+ )}
+
);
};
diff --git a/src/components/trade/TradeExplorerTabs.tsx b/src/components/trade/TradeExplorerTabs.tsx
index 3b11f407b..5e337dc01 100644
--- a/src/components/trade/TradeExplorerTabs.tsx
+++ b/src/components/trade/TradeExplorerTabs.tsx
@@ -55,7 +55,7 @@ export const TradeExplorerTab: FC
+
+
+
) => {
navigate({
@@ -64,7 +65,7 @@ export const StrategyPage = () => {
end: priceEnd?.toString() ?? toUnixUTC(defaultEndDate()),
});
- if (query.isPending) {
+ if (isPending) {
return (
-
+
([]);
+ const [importedTokens, setImportedTokens] = useState(
+ lsService.getItem('importedTokens') ?? []
+ );
const tokens = useMemo(() => {
- if (tokensQuery.data && tokensQuery.data.length) {
- return uniqBy(
- [...tokensQuery.data, ...importedTokens],
- (token) => token.address
- );
- }
- return [];
+ if (!tokensQuery.data?.length) return [];
+ const result = new Map();
+ for (const token of tokensQuery.data) result.set(token.address, token);
+ for (const token of importedTokens) result.set(token.address, token);
+ return Array.from(result.values());
}, [tokensQuery.data, importedTokens]);
const tokensMap = useMemo(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 26ddfaf17..4fa7f4fdf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -79,10 +79,11 @@ export default {
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
bounce: 'bounce 1s infinite',
+ fade: 'fade var(--duration, 0) var(--delay, 0s)',
slideUp:
- 'fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, translateY 0.4s cubic-bezier(0.16, 1, 0.3, 1) both',
+ 'fade var(--duration, 400ms) var(--delay, 0s) var(--easing, cubic-bezier(0.16, 1, 0.3, 1)) both, translateY var(--duration, 400ms) var(--delay, 0s) var(--easing, cubic-bezier(0.16, 1, 0.3, 1)) both',
scaleUp:
- 'fade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both, scale 0.4s cubic-bezier(0.16, 1, 0.3, 1) both',
+ 'fade var(--duration, 400ms) var(--delay, 0s) var(--easing, cubic-bezier(0.16, 1, 0.3, 1)) both, scale var(--duration, 400ms) var(--delay, 0s) var(--easing, cubic-bezier(0.16, 1, 0.3, 1)) both',
},
borderColor: ({ theme }) => ({
...theme('colors'),
@@ -94,8 +95,8 @@ export default {
full: '9999px',
},
fontFamily: {
- text: ['Carbon-Text', 'sans-serif'],
- title: ['Carbon-Title', 'sans-serif'],
+ text: ['Carbon-Text', 'system-ui', 'sans-serif'],
+ title: ['Carbon-Title', 'system-ui', 'sans-serif'],
},
fontSize: {
10: ['0.625rem', { lineHeight: '0.875rem' }],
@@ -158,7 +159,7 @@ export default {
},
scale: {
from: {
- transform: 'scale(0.8)',
+ transform: 'scale(var(--from-scale, 0.8))',
},
},
},
diff --git a/yarn.lock b/yarn.lock
index e2893500b..6c32bd931 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1550,10 +1550,10 @@
"@babel/helper-validator-identifier" "^7.24.7"
to-fast-properties "^2.0.0"
-"@bancor/carbon-sdk@0.0.99-DEV":
- version "0.0.99-DEV"
- resolved "https://registry.yarnpkg.com/@bancor/carbon-sdk/-/carbon-sdk-0.0.99-DEV.tgz#ebbc1f5969a0eca9363b0217f25d140290299156"
- integrity sha512-DrevN/ahoDqyLc8IwUC6CiGOZn7BQXz42uBc7rU0aWc3mVhp8TR9WMJi3oVDS8DaYvRIcMv5U0sa6gK5IbbgGQ==
+"@bancor/carbon-sdk@0.0.103-DEV":
+ version "0.0.103-DEV"
+ resolved "https://registry.yarnpkg.com/@bancor/carbon-sdk/-/carbon-sdk-0.0.103-DEV.tgz#47e79ead02c6d3e50b47b552c5c7126e12935b74"
+ integrity sha512-uICGOxCcOE/J3qoq0EUUMseKlXNfcghw/eOymP6kP3bRjftwVKEY2yE6VmSNywL6LUShKVexnRwK43cESodNHg==
dependencies:
"@ethersproject/abi" "^5.7.0"
"@ethersproject/bignumber" "^5.7.0"