diff --git a/apps/web/src/components/Icons/Sign.tsx b/apps/web/src/components/Icons/Sign.tsx index b77741ab56e..2c961e4f3ba 100644 --- a/apps/web/src/components/Icons/Sign.tsx +++ b/apps/web/src/components/Icons/Sign.tsx @@ -1,7 +1,7 @@ export const Sign = () => ( - - + + { poolData: validPoolDataResponse.data, isReversed: false, chainId: 1, - tokenAColor: '#FF37C7', + tokenAColor: '#00DDDD', tokenBColor: '#222222', } diff --git a/apps/web/src/components/SwapBottomCard.tsx b/apps/web/src/components/SwapBottomCard.tsx index fc224f83581..d738f2a5037 100644 --- a/apps/web/src/components/SwapBottomCard.tsx +++ b/apps/web/src/components/SwapBottomCard.tsx @@ -125,8 +125,8 @@ const CHAIN_THEME_LIGHT: Record = { [UniverseChainId.Sepolia]: { bgColor: '#6B8AFF33', textColor: '#6B8AFF' }, [UniverseChainId.Solana]: { bgColor: '#9945FF33', textColor: '#000000' }, [UniverseChainId.Soneium]: { bgColor: '#FFFFFF', textColor: '#000000' }, - [UniverseChainId.Unichain]: { bgColor: '#F50DB433', textColor: '#F50DB4' }, - [UniverseChainId.UnichainSepolia]: { bgColor: '#F50DB433', textColor: '#F50DB4' }, + [UniverseChainId.Unichain]: { bgColor: '#00CCCC33', textColor: '#00CCCC' }, + [UniverseChainId.UnichainSepolia]: { bgColor: '#00CCCC33', textColor: '#00CCCC' }, [UniverseChainId.WorldChain]: { bgColor: 'rgba(0, 0, 0, 0.12)', textColor: '#000000' }, [UniverseChainId.Zksync]: { bgColor: 'rgba(54, 103, 246, 0.12)', textColor: '#3667F6' }, [UniverseChainId.Zora]: { bgColor: 'rgba(0, 0, 0, 0.12)', textColor: '#000000' }, diff --git a/apps/web/src/hooks/useLightLinkTokenQuery.ts b/apps/web/src/hooks/useLightLinkTokenQuery.ts new file mode 100644 index 00000000000..9b7bd5c36c8 --- /dev/null +++ b/apps/web/src/hooks/useLightLinkTokenQuery.ts @@ -0,0 +1,167 @@ +import { useEffect, useMemo, useState } from 'react' +import { Token } from '@uniswap/sdk-core' +import { GraphQLApi } from '@universe/api' +import { UniverseChainId } from 'uniswap/src/features/chains/types' + +const LIGHTLINK_SUBGRAPH_URL = + 'https://graph.phoenix.lightlink.io/query/subgraphs/name/uniswap-v3-lightlink' + +// Known LightLink token logos +const LIGHTLINK_TOKEN_LOGOS: Record = { + '0x7ebef2a4b1b09381ec5b9df8c5c6f2dbeca59c73': + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png', + '0xbcf8c1b03bbdda88d579330bdf236b58f8bb2cfd': + 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png', +} + +export function getLightLinkTokenLogoUrl(address: string): string | undefined { + return LIGHTLINK_TOKEN_LOGOS[address.toLowerCase()] +} + +interface SubgraphToken { + id: string + symbol: string + name: string + decimals: string + volumeUSD: string + totalValueLockedUSD: string + derivedETH: string + tokenDayData: Array<{ + date: number + priceUSD: string + volumeUSD: string + }> +} + +interface LightLinkTokenQueryResult { + data: { token: GraphQLApi.TokenWebQuery['token'] } | undefined + loading: boolean + error: Error | undefined + currency: Token | undefined +} + +export function useLightLinkTokenQuery(address: string | undefined): LightLinkTokenQueryResult { + const [subgraphToken, setSubgraphToken] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState() + + useEffect(() => { + if (!address) { + setLoading(false) + return + } + + let cancelled = false + setLoading(true) + + const query = `{ + token(id: "${address.toLowerCase()}") { + id + symbol + name + decimals + volumeUSD + totalValueLockedUSD + derivedETH + tokenDayData(first: 365, orderBy: date, orderDirection: desc) { + date + priceUSD + volumeUSD + } + } + }` + + fetch(LIGHTLINK_SUBGRAPH_URL, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query }), + }) + .then((res) => res.json()) + .then((json) => { + if (!cancelled) { + setSubgraphToken(json.data?.token ?? null) + setLoading(false) + } + }) + .catch((err) => { + if (!cancelled) { + setError(err) + setLoading(false) + } + }) + + return () => { + cancelled = true + } + }, [address]) + + const currency = useMemo(() => { + if (!subgraphToken || !address) return undefined + return new Token( + UniverseChainId.LightLink, + address, + parseInt(subgraphToken.decimals, 10), + subgraphToken.symbol, + subgraphToken.name, + ) + }, [subgraphToken, address]) + + // Shape the data to match TokenWebQuery['token'] as closely as possible + const data = useMemo(() => { + if (!subgraphToken) return undefined + + const logoUrl = getLightLinkTokenLogoUrl(subgraphToken.id) + const volume24H = parseFloat(subgraphToken.volumeUSD) + const tvl = parseFloat(subgraphToken.totalValueLockedUSD) + + const token: GraphQLApi.TokenWebQuery['token'] = { + __typename: 'Token' as const, + id: `lightlink-${subgraphToken.id}`, + name: subgraphToken.name, + symbol: subgraphToken.symbol, + decimals: parseInt(subgraphToken.decimals, 10), + address: subgraphToken.id, + chain: GraphQLApi.Chain.UnknownChain, + standard: GraphQLApi.TokenStandard.Erc20, + feeData: null, + market: { + __typename: 'TokenMarket' as const, + id: `lightlink-market-${subgraphToken.id}`, + volume24H: { __typename: 'Amount' as const, id: `vol-${subgraphToken.id}`, value: volume24H, currency: GraphQLApi.Currency.Usd }, + totalValueLocked: { __typename: 'Amount' as const, id: `tvl-${subgraphToken.id}`, value: tvl, currency: GraphQLApi.Currency.Usd }, + price: subgraphToken.tokenDayData.length > 0 + ? { + __typename: 'Amount' as const, + id: `price-${subgraphToken.id}`, + value: parseFloat(subgraphToken.tokenDayData[0].priceUSD), + currency: GraphQLApi.Currency.Usd, + } + : null, + pricePercentChange24h: null, + priceHigh52W: null, + priceLow52W: null, + }, + project: { + __typename: 'TokenProject' as const, + id: `lightlink-project-${subgraphToken.id}`, + name: subgraphToken.name, + description: null, + homepageUrl: null, + twitterName: null, + logoUrl: logoUrl ?? null, + tokens: [ + { + __typename: 'Token' as const, + id: `lightlink-${subgraphToken.id}`, + chain: GraphQLApi.Chain.UnknownChain, + address: subgraphToken.id, + }, + ], + }, + } + + return { token } + }, [subgraphToken]) + + return { data, loading, error, currency } +} diff --git a/apps/web/src/pages/Landing/components/cards/UnichainCard.tsx b/apps/web/src/pages/Landing/components/cards/UnichainCard.tsx index 0d04c136e0b..21fadcba0ac 100644 --- a/apps/web/src/pages/Landing/components/cards/UnichainCard.tsx +++ b/apps/web/src/pages/Landing/components/cards/UnichainCard.tsx @@ -7,7 +7,7 @@ import { Unichain } from 'ui/src/components/icons/Unichain' import { opacify } from 'ui/src/theme' import { uniswapUrls } from 'uniswap/src/constants/urls' -const primary = '#F50DB4' +const primary = '#00CCCC' export function UnichainCard() { const { t } = useTranslation() diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemA.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemA.tsx index b82a3bb3a1f..b9b6c1636d7 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemA.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemA.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemA({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemA({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemB.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemB.tsx index 97a95e05515..b026e0dff02 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemB.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemB.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemB({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemB({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemC.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemC.tsx index 43409765e33..78117941b51 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemC.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemC.tsx @@ -2,7 +2,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emb import { useId } from 'react' import { useSporeColors } from 'ui/src' -export function EmblemC({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemC({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() const clipPathId = useId() diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemD.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemD.tsx index 6d2dce5ec4b..4fd54956c67 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemD.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemD.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemD({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemD({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemE.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemE.tsx index d07e8cff91b..d9618f34107 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemE.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemE.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemE({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemE({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemF.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemF.tsx index f39c3cf8cb7..1fa0f2c6bbb 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemF.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemF.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemF({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemF({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemG.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemG.tsx index d0e5263fc54..fca4282f49b 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemG.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemG.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemG({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemG({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemH.tsx b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemH.tsx index 2568174c990..08a489b85f9 100644 --- a/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemH.tsx +++ b/apps/web/src/pages/Portfolio/components/AnimatedStyledBanner/Emblems/EmblemH.tsx @@ -1,7 +1,7 @@ import { EmblemProps } from 'pages/Portfolio/components/AnimatedStyledBanner/Emblems/types' import { useSporeColors } from 'ui/src' -export function EmblemH({ fill = '#FF37C7', opacity = 1, ...props }: EmblemProps): JSX.Element { +export function EmblemH({ fill = '#00DDDD', opacity = 1, ...props }: EmblemProps): JSX.Element { const colors = useSporeColors() return ( diff --git a/apps/web/src/pages/TokenDetails/index.tsx b/apps/web/src/pages/TokenDetails/index.tsx index fe76bd63a5e..90129fa8f07 100644 --- a/apps/web/src/pages/TokenDetails/index.tsx +++ b/apps/web/src/pages/TokenDetails/index.tsx @@ -6,6 +6,7 @@ import { TokenDetailsPageSkeleton } from 'components/Tokens/TokenDetails/Skeleto import { NATIVE_CHAIN_ID } from 'constants/tokens' import { useActiveAddresses } from 'features/accounts/store/hooks' import { useSrcColor } from 'hooks/useColor' +import { useLightLinkTokenQuery } from 'hooks/useLightLinkTokenQuery' import { ExploreTab } from 'pages/Explore/constants' import { useDynamicMetatags } from 'pages/metatags' import { LoadedTDPContext, MultiChainMap, PendingTDPContext, TDPProvider } from 'pages/TokenDetails/TDPContext' @@ -79,24 +80,46 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext { } const currencyChainInfo = getChainInfo(useChainIdFromUrlParam() ?? UniverseChainId.Mainnet) + const isLightLink = currencyChainInfo.id === UniverseChainId.LightLink const isNative = tokenAddress === NATIVE_CHAIN_ID const tokenDBAddress = isNative ? getNativeTokenDBAddress(currencyChainInfo.backendChain.chain) : tokenAddress + // Standard GraphQL query (skipped for LightLink) const tokenQuery = GraphQLApi.useTokenWebQuery({ variables: { address: tokenDBAddress, chain: currencyChainInfo.backendChain.chain }, errorPolicy: 'all', + skip: isLightLink, }) + + // LightLink subgraph fallback + const lightLinkResult = useLightLinkTokenQuery(isLightLink ? tokenAddress : undefined) + + // Merge: for LightLink, overlay subgraph data onto tokenQuery shape + const effectiveTokenQuery = useMemo(() => { + if (!isLightLink) return tokenQuery + // Create a compatible object that looks like an Apollo QueryResult + return { + ...tokenQuery, + data: lightLinkResult.data as GraphQLApi.TokenWebQuery | undefined, + loading: lightLinkResult.loading, + error: lightLinkResult.error as any, + } + }, [isLightLink, tokenQuery, lightLinkResult.data, lightLinkResult.loading, lightLinkResult.error]) + const currency = useMemo(() => { if (isNative) { return nativeOnChain(currencyChainInfo.id) } + if (isLightLink) { + return lightLinkResult.currency + } if (tokenQuery.data?.token) { return gqlToCurrency(tokenQuery.data.token) } return undefined - }, [tokenQuery.data?.token, isNative, currencyChainInfo.id]) + }, [tokenQuery.data?.token, isNative, currencyChainInfo.id, isLightLink, lightLinkResult.currency]) const chartState = useCreateTDPChartState(tokenDBAddress, currencyChainInfo.backendChain.chain) @@ -106,7 +129,7 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext { const colors = useSporeColors() // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition const { preloadedLogoSrc } = (useLocation().state as { preloadedLogoSrc?: string }) ?? {} - const extractedColorSrc = tokenQuery.data?.token?.project?.logoUrl ?? preloadedLogoSrc + const extractedColorSrc = effectiveTokenQuery.data?.token?.project?.logoUrl ?? preloadedLogoSrc const tokenColor = useSrcColor({ src: extractedColorSrc, @@ -121,7 +144,7 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext { currencyChainId: currencyChainInfo.id, // `currency.address` is checksummed, whereas the `tokenAddress` url param may not be address: (currency?.isNative ? NATIVE_CHAIN_ID : currency?.address) ?? tokenAddress, - tokenQuery, + tokenQuery: effectiveTokenQuery as any, chartState, multiChainMap, tokenColor, @@ -131,7 +154,7 @@ function useCreateTDPContext(): PendingTDPContext | LoadedTDPContext { currencyChainInfo.backendChain.chain, currencyChainInfo.id, tokenAddress, - tokenQuery, + effectiveTokenQuery, chartState, multiChainMap, tokenColor, diff --git a/apps/web/src/pages/Wrapped/DisconnectedState.tsx b/apps/web/src/pages/Wrapped/DisconnectedState.tsx index 1c3be75f7c1..336a6164512 100644 --- a/apps/web/src/pages/Wrapped/DisconnectedState.tsx +++ b/apps/web/src/pages/Wrapped/DisconnectedState.tsx @@ -33,7 +33,7 @@ const GlowEffect = styled(Flex, { bottom: 0, width: '100%', height: 30, - background: '#fc74fe', + background: '#00FFFF', filter: 'blur(90px)', opacity: 0.4, }) diff --git a/apps/web/src/pages/Wrapped/index.tsx b/apps/web/src/pages/Wrapped/index.tsx index 623cb7135c9..7882af36517 100644 --- a/apps/web/src/pages/Wrapped/index.tsx +++ b/apps/web/src/pages/Wrapped/index.tsx @@ -67,7 +67,7 @@ export default function Wrapped() { maxHeight={`calc(100% - ${INTERFACE_NAV_HEIGHT}px)`} maxWidth={1200} aspectRatio={hasWallet ? (isLandscape ? '3/2' : '9/16') : undefined} - backgroundColor="#361A37" + backgroundColor="#0A2E2E" borderRadius={48} alignItems="center" justifyContent="center" diff --git a/apps/web/src/theme/colors.ts b/apps/web/src/theme/colors.ts index 03d5197c940..d1f9da3247a 100644 --- a/apps/web/src/theme/colors.ts +++ b/apps/web/src/theme/colors.ts @@ -24,18 +24,18 @@ export const colors = { gray850: '#0E1524', gray900: '#0D111C', gray950: '#080B11', - pink50: '#F9ECF1', - pink100: '#FFD9E4', - pink200: '#FBA4C0', - pink300: '#FF6FA3', - pink400: '#FB118E', - pink500: '#C41969', - pink600: '#8C0F49', - pink700: '#55072A', - pink800: '#350318', - pink900: '#2B000B', - pinkBase: '#FC74FE', - pinkVibrant: '#F50DB4', + pink50: '#E0FFFE', + pink100: '#B3FFFD', + pink200: '#80FFFF', + pink300: '#4DFFFF', + pink400: '#1AFFFF', + pink500: '#00CCCC', + pink600: '#009999', + pink700: '#006666', + pink800: '#003333', + pink900: '#001A1A', + pinkBase: '#00FFFF', + pinkVibrant: '#00CCCC', red50: '#FAECEA', red100: '#FED5CF', red200: '#FEA79B', @@ -85,8 +85,8 @@ export const colors = { blue900: '#040E34', blueVibrant: '#587BFF', // TODO: add magenta 50-900 - magenta300: '#FD82FF', - magentaVibrant: '#FC72FF', + magenta300: '#33FFFF', + magentaVibrant: '#00FFFF', purple300: '#8440F2', purple900: '#1C0337', purpleVibrant: '#6100FF', @@ -188,7 +188,7 @@ const commonTheme = { chain_7777777: colors.neutral1_light, promotional: colors.magenta300, - brandedGradient: 'linear-gradient(139.57deg, #FF79C9 4.35%, #FFB8E2 96.44%);', + brandedGradient: 'linear-gradient(139.57deg, #00CCCC 4.35%, #80FFFF 96.44%);', promotionalGradient: colors.accent1_light, } diff --git a/packages/ui/src/components/Unicon/Colors.ts b/packages/ui/src/components/Unicon/Colors.ts index dd73b5d5d93..a51729b9555 100644 --- a/packages/ui/src/components/Unicon/Colors.ts +++ b/packages/ui/src/components/Unicon/Colors.ts @@ -1,7 +1,7 @@ export type ColorStrings = string[] export const UNICON_COLORS: ColorStrings[] = [ - ['#F50DB4', '#FC74FE'], + ['#00CCCC', '#00FFFF'], ['#FFBF17', '#FFF612'], ['#FF8934', '#FF4D00'], ['#85754A', '#996F01'], diff --git a/packages/ui/src/components/Unicon/utils.ts b/packages/ui/src/components/Unicon/utils.ts index bdec56980fb..f5eef0b723f 100644 --- a/packages/ui/src/components/Unicon/utils.ts +++ b/packages/ui/src/components/Unicon/utils.ts @@ -30,6 +30,6 @@ export const getUniconColors = ( } return { - color: (colorToUse || '#F50DB4').toString(), + color: (colorToUse || '#00CCCC').toString(), } } diff --git a/packages/ui/src/components/icons/ArrowDownCircleFilledWithBorder.tsx b/packages/ui/src/components/icons/ArrowDownCircleFilledWithBorder.tsx index a0e65279068..81774e8b7d2 100644 --- a/packages/ui/src/components/icons/ArrowDownCircleFilledWithBorder.tsx +++ b/packages/ui/src/components/icons/ArrowDownCircleFilledWithBorder.tsx @@ -14,5 +14,5 @@ export const [ArrowDownCircleFilledWithBorder, AnimatedArrowDownCircleFilledWith /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/CoinStack.tsx b/packages/ui/src/components/icons/CoinStack.tsx index cbd10937b31..36bee270a34 100644 --- a/packages/ui/src/components/icons/CoinStack.tsx +++ b/packages/ui/src/components/icons/CoinStack.tsx @@ -49,5 +49,5 @@ export const [CoinStack, AnimatedCoinStack] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/Compass.tsx b/packages/ui/src/components/icons/Compass.tsx index 663c35a793c..ebdab694131 100644 --- a/packages/ui/src/components/icons/Compass.tsx +++ b/packages/ui/src/components/icons/Compass.tsx @@ -13,5 +13,5 @@ export const [Compass, AnimatedCompass] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/CrosschainIcon.tsx b/packages/ui/src/components/icons/CrosschainIcon.tsx index 9e866968c50..5fc0beea846 100644 --- a/packages/ui/src/components/icons/CrosschainIcon.tsx +++ b/packages/ui/src/components/icons/CrosschainIcon.tsx @@ -14,5 +14,5 @@ export const [CrosschainIcon, AnimatedCrosschainIcon] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/FileListCheck.tsx b/packages/ui/src/components/icons/FileListCheck.tsx index 71df721d717..47674360f7a 100644 --- a/packages/ui/src/components/icons/FileListCheck.tsx +++ b/packages/ui/src/components/icons/FileListCheck.tsx @@ -16,5 +16,5 @@ export const [FileListCheck, AnimatedFileListCheck] = createIcon({ ), - defaultFill: '#FC74FE', + defaultFill: '#00FFFF', }) diff --git a/packages/ui/src/components/icons/Magic.tsx b/packages/ui/src/components/icons/Magic.tsx index 1589dfd320d..f1a111b87e8 100644 --- a/packages/ui/src/components/icons/Magic.tsx +++ b/packages/ui/src/components/icons/Magic.tsx @@ -9,7 +9,7 @@ export const [Magic, AnimatedMagic] = createIcon({ ), diff --git a/packages/ui/src/components/icons/OneToOne.tsx b/packages/ui/src/components/icons/OneToOne.tsx index 48b45c91aa2..db097776a32 100644 --- a/packages/ui/src/components/icons/OneToOne.tsx +++ b/packages/ui/src/components/icons/OneToOne.tsx @@ -25,5 +25,5 @@ export const [OneToOne, AnimatedOneToOne] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/PencilDetailed.tsx b/packages/ui/src/components/icons/PencilDetailed.tsx index 904a3b9b9c1..6c04544e7c7 100644 --- a/packages/ui/src/components/icons/PencilDetailed.tsx +++ b/packages/ui/src/components/icons/PencilDetailed.tsx @@ -13,5 +13,5 @@ export const [PencilDetailed, AnimatedPencilDetailed] = createIcon({ /> ), - defaultFill: '#FC72FF', + defaultFill: '#00FFFF', }) diff --git a/packages/ui/src/components/icons/Pin.tsx b/packages/ui/src/components/icons/Pin.tsx index 687c6958494..46227b702c9 100644 --- a/packages/ui/src/components/icons/Pin.tsx +++ b/packages/ui/src/components/icons/Pin.tsx @@ -27,5 +27,5 @@ export const [Pin, AnimatedPin] = createIcon({ ), - defaultFill: '#FC72FF', + defaultFill: '#00FFFF', }) diff --git a/packages/ui/src/components/icons/Rocket.tsx b/packages/ui/src/components/icons/Rocket.tsx index c7059b4ea6d..5d4488085ec 100644 --- a/packages/ui/src/components/icons/Rocket.tsx +++ b/packages/ui/src/components/icons/Rocket.tsx @@ -13,5 +13,5 @@ export const [Rocket, AnimatedRocket] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/SearchFilled.tsx b/packages/ui/src/components/icons/SearchFilled.tsx index b2a99421e89..45d031b329f 100644 --- a/packages/ui/src/components/icons/SearchFilled.tsx +++ b/packages/ui/src/components/icons/SearchFilled.tsx @@ -19,5 +19,5 @@ export const [SearchFilled, AnimatedSearchFilled] = createIcon({ /> ), - defaultFill: '#F50DB4', + defaultFill: '#00CCCC', }) diff --git a/packages/ui/src/components/icons/SmartWallet.tsx b/packages/ui/src/components/icons/SmartWallet.tsx index 5de30d19b30..a0f0736cc40 100644 --- a/packages/ui/src/components/icons/SmartWallet.tsx +++ b/packages/ui/src/components/icons/SmartWallet.tsx @@ -24,5 +24,5 @@ export const [SmartWallet, AnimatedSmartWallet] = createIcon({ ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/StickyNoteSquare.tsx b/packages/ui/src/components/icons/StickyNoteSquare.tsx index 6415b92bd45..b29134350b7 100644 --- a/packages/ui/src/components/icons/StickyNoteSquare.tsx +++ b/packages/ui/src/components/icons/StickyNoteSquare.tsx @@ -13,5 +13,5 @@ export const [StickyNoteSquare, AnimatedStickyNoteSquare] = createIcon({ /> ), - defaultFill: '#FC74FE', + defaultFill: '#00FFFF', }) diff --git a/packages/ui/src/components/icons/Stopwatch.tsx b/packages/ui/src/components/icons/Stopwatch.tsx index 6ee36479406..44325380902 100644 --- a/packages/ui/src/components/icons/Stopwatch.tsx +++ b/packages/ui/src/components/icons/Stopwatch.tsx @@ -15,5 +15,5 @@ export const [Stopwatch, AnimatedStopwatch] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/components/icons/SwapDotted.tsx b/packages/ui/src/components/icons/SwapDotted.tsx index 26d802d1bb5..d529f74ed0a 100644 --- a/packages/ui/src/components/icons/SwapDotted.tsx +++ b/packages/ui/src/components/icons/SwapDotted.tsx @@ -15,5 +15,5 @@ export const [SwapDotted, AnimatedSwapDotted] = createIcon({ /> ), - defaultFill: '#FEF4FF', + defaultFill: '#F0FFFF', }) diff --git a/packages/ui/src/components/icons/Unichain.tsx b/packages/ui/src/components/icons/Unichain.tsx index 6f47d346839..d7583c7fc4b 100644 --- a/packages/ui/src/components/icons/Unichain.tsx +++ b/packages/ui/src/components/icons/Unichain.tsx @@ -13,5 +13,5 @@ export const [Unichain, AnimatedUnichain] = createIcon({ /> ), - defaultFill: '#F50DB4', + defaultFill: '#00CCCC', }) diff --git a/packages/ui/src/components/icons/UniswapXGeneric.tsx b/packages/ui/src/components/icons/UniswapXGeneric.tsx index feeb2615d6e..cef53d82a82 100644 --- a/packages/ui/src/components/icons/UniswapXGeneric.tsx +++ b/packages/ui/src/components/icons/UniswapXGeneric.tsx @@ -13,5 +13,5 @@ export const [UniswapXGeneric, AnimatedUniswapXGeneric] = createIcon({ /> ), - defaultFill: '#FF37C7', + defaultFill: '#00DDDD', }) diff --git a/packages/ui/src/hooks/useColorHexFromThemeKey.test.ts b/packages/ui/src/hooks/useColorHexFromThemeKey.test.ts index 9c8061cc4e8..5985b4bab1d 100644 --- a/packages/ui/src/hooks/useColorHexFromThemeKey.test.ts +++ b/packages/ui/src/hooks/useColorHexFromThemeKey.test.ts @@ -20,7 +20,7 @@ describe(useColorHexFromThemeKey, () => { // Mock the colors returned by useSporeColors const mockColors = { neutral1: { val: '#000000', get: (): string => '#000000', variable: 'neutral1' }, - accent1: { val: '#FC72FF', get: (): string => '#FC72FF', variable: 'accent1' }, + accent1: { val: '#00FFFF', get: (): string => '#00FFFF', variable: 'accent1' }, surface1: { val: '#FFFFFF', get: (): string => '#FFFFFF', variable: 'surface1' }, } as unknown as ReturnType mockUseSporeColors.mockReturnValue(mockColors) @@ -31,7 +31,7 @@ describe(useColorHexFromThemeKey, () => { const { result: surface1Result } = renderHook(() => useColorHexFromThemeKey('surface1')) expect(neutral1Result.current).toEqual({ val: '#000000', get: expect.any(Function), variable: 'neutral1' }) - expect(accent1Result.current).toEqual({ val: '#FC72FF', get: expect.any(Function), variable: 'accent1' }) + expect(accent1Result.current).toEqual({ val: '#00FFFF', get: expect.any(Function), variable: 'accent1' }) expect(surface1Result.current).toEqual({ val: '#FFFFFF', get: expect.any(Function), variable: 'surface1' }) }) diff --git a/packages/ui/src/theme/color/colors.ts b/packages/ui/src/theme/color/colors.ts index 126eb7dd50e..10eb1ec03a5 100644 --- a/packages/ui/src/theme/color/colors.ts +++ b/packages/ui/src/theme/color/colors.ts @@ -1,11 +1,11 @@ import { opacifyRaw } from 'ui/src/theme/color/utils' const accentColors = { - pinkLight: '#FEF4FF', - pinkPastel: '#FDAFF0', - pinkBase: '#FC74FE', - pinkVibrant: '#F50DB4', - pinkDark: '#361A37', + pinkLight: '#F0FFFF', + pinkPastel: '#80FFFF', + pinkBase: '#00FFFF', + pinkVibrant: '#00CCCC', + pinkDark: '#0A2E2E', redLight: '#FFF2F1', redPastel: '#FDCFC4', @@ -78,7 +78,7 @@ export const colors = { uniswapXViolet: '#4673FA', uniswapXPurple: '#7D55FB', - fiatOnRampBanner: '#FB36D0', + fiatOnRampBanner: '#00CCCC', } export const DEP_accentColors = { @@ -91,7 +91,7 @@ export const DEP_accentColors = { green400: '#209853', magenta100: '#FAD8F8', magenta50: '#FFF1FE', - magentaVibrant: '#FC72FF', + magentaVibrant: '#00FFFF', red200: '#FEA79B', red300: '#FD766B', red400: '#FA2B39', @@ -190,15 +190,15 @@ const sporeLight = { surface4: 'rgba(255, 255, 255, 0.64)', surface5: 'rgba(0,0,0,0.04)', surface5Hovered: 'rgba(0,0,0,0.06)', - accent1: '#FF37C7', - accent1Hovered: '#E500A5', - accent2: 'rgba(255, 55, 199, 0.08)', - accent2Hovered: 'rgba(255, 55, 199, 0.12)', - accent2Solid: '#FFF3FC', + accent1: '#00DDDD', + accent1Hovered: '#00BBBB', + accent2: 'rgba(0, 255, 255, 0.08)', + accent2Hovered: 'rgba(0, 255, 255, 0.12)', + accent2Solid: '#F0FFFF', accent3: '#222222', accent3Hovered: colors.black, - DEP_accentSoft: '#FC72FF33', //33 = 20% + DEP_accentSoft: '#00FFFF33', //33 = 20% DEP_blue400: '#4C82FB', statusSuccess: '#0C8911', @@ -239,16 +239,16 @@ const sporeDark = { surface4: 'rgba(255,255,255,0.20)', surface5: 'rgba(0,0,0,0.04)', surface5Hovered: 'rgba(0,0,0,0.06)', - accent1: '#FF37C7', - accent1Hovered: '#E500A5', + accent1: '#00DDDD', + accent1Hovered: '#00BBBB', - accent2: 'rgba(255, 55, 199, 0.08)', - accent2Hovered: 'rgba(255, 55, 199, 0.12)', - accent2Solid: '#261621', + accent2: 'rgba(0, 255, 255, 0.08)', + accent2Hovered: 'rgba(0, 255, 255, 0.12)', + accent2Solid: '#0D2626', accent3: colors.white, accent3Hovered: '#F5F5F5', - DEP_accentSoft: '#FC72FF33', //33 = 20% + DEP_accentSoft: '#00FFFF33', //33 = 20% DEP_blue400: '#4C82FB', statusSuccess: '#21C95E', diff --git a/packages/ui/src/utils/colors/index.ts b/packages/ui/src/utils/colors/index.ts index fa384297800..a32651cf198 100644 --- a/packages/ui/src/utils/colors/index.ts +++ b/packages/ui/src/utils/colors/index.ts @@ -172,8 +172,8 @@ type LogolessColorSchemes = { const logolessColorSchemes: LogolessColorSchemes = { // TODO (MOB-2417): update the colors in the global colors file to these and pull from there [LOGOLESS_COLORS.PINK]: { - light: { foreground: '#FC74FE', background: '#FEF4FF' }, - dark: { foreground: '#FC74FE', background: '#361A37' }, + light: { foreground: '#00FFFF', background: '#F0FFFF' }, + dark: { foreground: '#00FFFF', background: '#0A2E2E' }, }, [LOGOLESS_COLORS.ORANGE]: { light: { foreground: '#FF7715', background: '#FFF2F1' }, diff --git a/packages/uniswap/src/components/TokenSelector/hooks/useCommonTokensOptionsWithFallback.ts b/packages/uniswap/src/components/TokenSelector/hooks/useCommonTokensOptionsWithFallback.ts index 1f818a8d5ed..393397d1823 100644 --- a/packages/uniswap/src/components/TokenSelector/hooks/useCommonTokensOptionsWithFallback.ts +++ b/packages/uniswap/src/components/TokenSelector/hooks/useCommonTokensOptionsWithFallback.ts @@ -34,13 +34,16 @@ export function useCommonTokensOptionsWithFallback({ const shouldFallback = (!data || data.length === 0) && commonBases?.length + // Use GQL-enriched options if available, otherwise fall back to static COMMON_BASES directly + const fallbackData = commonBasesTokenOptions ?? commonBases + return useMemo( () => ({ - data: shouldFallback ? commonBasesTokenOptions : data, + data: shouldFallback ? fallbackData : data, error: shouldFallback ? undefined : error, refetch, - loading, + loading: shouldFallback ? false : loading, }), - [commonBasesTokenOptions, data, error, loading, refetch, shouldFallback], + [fallbackData, data, error, loading, refetch, shouldFallback], ) } diff --git a/packages/uniswap/src/constants/tokens.ts b/packages/uniswap/src/constants/tokens.ts index eb99511e774..4ff2dce21fa 100644 --- a/packages/uniswap/src/constants/tokens.ts +++ b/packages/uniswap/src/constants/tokens.ts @@ -81,7 +81,7 @@ export const BUSD_BSC = new Token(UniverseChainId.Bnb, '0xe9e7CEA3DedcA5984780Ba // LightLink tokens export const USDC_LIGHTLINK = new Token( UniverseChainId.LightLink, - '0x18fB38404DADee1727Be4b805c5b242B5413Fa40', + '0x18fB38404DADeE1727Be4b805c5b242B5413Fa40', 6, 'USDC', 'USD Coin', @@ -102,7 +102,7 @@ export const USDT_LIGHTLINK = new Token( ) export const LL_TOKEN = new Token( UniverseChainId.LightLink, - '0x519d3443cacc61bd844546edaea48e5502021802', + '0x519d3443cACc61bD844546eDAea48E5502021802', 18, 'LL', 'LightLink', @@ -310,7 +310,7 @@ export const WRAPPED_NATIVE_CURRENCY: { [chainId: number]: Token | undefined } = ), [UniverseChainId.LightLink]: new Token( UniverseChainId.LightLink, - '0x7ebef2a4b1b09381ec5b9df8c5c6f2dbeca59c73', + '0x7EbeF2A4b1B09381Ec5B9dF8C5c6f2dBECA59c73', 18, 'WETH', 'Wrapped Ether',