From 4573d00053924c3d0e49d3420ef88b672dc935e4 Mon Sep 17 00:00:00 2001 From: gregs Date: Mon, 25 Nov 2024 14:51:13 -0300 Subject: [PATCH] opss --- src/components/coin-icon/ChainImage.tsx | 18 +- src/languages/en_US.json | 1 + .../discover/components/NetworkSwitcher.tsx | 520 +++++++++++++----- .../discover/components/TrendingTokens.tsx | 45 +- 4 files changed, 434 insertions(+), 150 deletions(-) diff --git a/src/components/coin-icon/ChainImage.tsx b/src/components/coin-icon/ChainImage.tsx index 4db59d9c61f..6c63ddc5890 100644 --- a/src/components/coin-icon/ChainImage.tsx +++ b/src/components/coin-icon/ChainImage.tsx @@ -12,9 +12,17 @@ import AvalancheBadge from '@/assets/badges/avalanche.png'; import BlastBadge from '@/assets/badges/blast.png'; import DegenBadge from '@/assets/badges/degen.png'; import ApechainBadge from '@/assets/badges/apechain.png'; -import FastImage, { Source } from 'react-native-fast-image'; +import FastImage, { FastImageProps, Source } from 'react-native-fast-image'; -export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | undefined; size?: number }) { +export function ChainImage({ + chainId, + size = 20, + style, +}: { + chainId: ChainId | null | undefined; + size?: number; + style?: FastImageProps['style']; +}) { const source = useMemo(() => { switch (chainId) { case ChainId.apechain: @@ -47,6 +55,10 @@ export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | u if (!chainId) return null; return ( - + ); } diff --git a/src/languages/en_US.json b/src/languages/en_US.json index 0d2e0fcb380..ad8b7f0aaab 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -2986,6 +2986,7 @@ "farcaster": "Farcaster" }, "sort": { + "sort": "Sort", "volume": "Volume", "market_cap": "Market Cap", "top_gainers": "Top Gainers", diff --git a/src/screens/discover/components/NetworkSwitcher.tsx b/src/screens/discover/components/NetworkSwitcher.tsx index f4f1b6f78eb..10bb5df4eca 100644 --- a/src/screens/discover/components/NetworkSwitcher.tsx +++ b/src/screens/discover/components/NetworkSwitcher.tsx @@ -2,22 +2,28 @@ import { getChainColorWorklet } from '@/__swaps__/utils/swaps'; import { chainsLabel, SUPPORTED_CHAIN_IDS_ALPHABETICAL } from '@/chains'; import { ChainId } from '@/chains/types'; import { AbsolutePortal } from '@/components/AbsolutePortal'; +import { AnimatedBlurView } from '@/components/AnimatedComponents/AnimatedBlurView'; import { ChainImage } from '@/components/coin-icon/ChainImage'; -import { globalColors, Text, useBackgroundColor, useColorMode } from '@/design-system'; +import { DesignSystemProvider, globalColors, Separator, Text, useBackgroundColor, useColorMode } from '@/design-system'; import { useForegroundColor } from '@/design-system/color/useForegroundColor'; -import hiddenTokens from '@/redux/hiddenTokens'; import { createRainbowStore } from '@/state/internal/createRainbowStore'; import { nonceStore } from '@/state/nonces'; - +import { useTheme } from '@/theme'; +import MaskedView from '@react-native-masked-view/masked-view'; import chroma from 'chroma-js'; -import { useReducer, useState } from 'react'; -import React, { StyleSheet, View } from 'react-native'; +import { Component, forwardRef, useReducer, useState } from 'react'; +import React, { Pressable, View, ViewStyle } from 'react-native'; import { Gesture, GestureDetector, GestureStateChangeEvent, TapGestureHandlerEventPayload } from 'react-native-gesture-handler'; +import LinearGradient from 'react-native-linear-gradient'; import Animated, { + BounceIn, FadeIn, FadeOut, + FadeOutUp, LinearTransition, + makeMutable, runOnJS, + SharedValue, SlideInDown, SlideOutDown, useAnimatedReaction, @@ -27,6 +33,7 @@ import Animated, { withSpring, withTiming, } from 'react-native-reanimated'; +import Svg, { Path } from 'react-native-svg'; function getMostUsedChains() { const noncesByAddress = nonceStore.getState().nonces; @@ -45,17 +52,16 @@ function getMostUsedChains() { } const initialPinnedNetworks = getMostUsedChains().slice(0, 5); -const useNetworkSwitcherStore = createRainbowStore<{ pinnedNetworks: ChainId[]; unpinnedNetworks: ChainId[] }>( +const useNetworkSwitcherStore = createRainbowStore<{ pinnedNetworks: ChainId[] }>( (set, get) => ({ pinnedNetworks: initialPinnedNetworks, - unpinnedNetworks: SUPPORTED_CHAIN_IDS_ALPHABETICAL.filter(chainId => !initialPinnedNetworks.includes(chainId)), }) // { // storageKey: 'network-switcher', - // version: 1, + // // version: 0, // } ); -const setNetworkSwitcherState = (s: { pinnedNetworks: ChainId[]; unpinnedNetworks: ChainId[] }) => { +const setNetworkSwitcherState = (s: { pinnedNetworks: ChainId[] }) => { useNetworkSwitcherStore.setState(s); }; @@ -102,24 +108,93 @@ function EditButton({ text, onPress }: { text: string; onPress: VoidFunction }) ); } -function NetworkOption({ - chainId, +function ExpandNetworks({ + hiddenNetworksLength, + isExpanded, + toggleExpanded, +}: { + hiddenNetworksLength: number; + toggleExpanded: (expanded: boolean) => void; + isExpanded: boolean; +}) { + const pressed = useSharedValue(false); + + const tap = Gesture.Tap() + .onBegin(() => { + pressed.value = true; + }) + .onFinalize(() => { + pressed.value = false; + runOnJS(toggleExpanded)(!isExpanded); + }); + + const animatedStyles = useAnimatedStyle(() => ({ + transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }], + })); + + return ( + + + {!isExpanded && ( + + + {hiddenNetworksLength} + + + )} + + {isExpanded ? 'Show Less' : 'More Networks'} + + + + {isExpanded ? '􀆇' : '􀆈'} + + + + + ); +} + +function AllNetworksOption({ selected, onPress, }: { - chainId: ChainId; selected: boolean; onPress?: (e: GestureStateChangeEvent) => void; }) { - const name = chainsLabel[chainId]; - if (!name) throw new Error(`No chain name for chainId ${chainId}`); - const { isDarkMode } = useColorMode(); - const surfaceSecondary = useBackgroundColor('fillSecondary'); - const chainColor = chroma(getChainColorWorklet(chainId, true)).alpha(0.16).hex(); - const backgroundColor = selected ? chainColor : isDarkMode ? globalColors.white10 : globalColors.grey20; + const surfacePrimary = useBackgroundColor('surfacePrimary'); + const networkSwitcherBackgroundColor = isDarkMode ? '#191A1C' : surfacePrimary; + + const blue = useForegroundColor('blue'); - const borderColor = selected ? chainColor : '#F5F8FF05'; + const backgroundColor = selected + ? chroma.scale([networkSwitcherBackgroundColor, blue])(0.16).hex() + : isDarkMode + ? globalColors.white10 + : '#F2F3F4'; + const borderColor = selected ? chroma(blue).alpha(0.16).hex() : '#F5F8FF05'; const pressed = useSharedValue(false); @@ -137,14 +212,22 @@ function NetworkOption({ transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }], })); + const overlappingBadge = { + borderColor: backgroundColor, + borderWidth: 1.67, + borderRadius: 16, + marginLeft: -9, + width: 16 + 1.67 * 2, + height: 16 + 1.67 * 2, + }; + return ( - + + + + + + - {name} + All Networks ); } -function ExpandNetworks({ - hiddenNetworksLength, - isExpanded, - toggleExpanded, +function NetworkOption({ + chainId, + selected, + onPress, + style, }: { - hiddenNetworksLength: number; - toggleExpanded: (expanded: boolean) => void; - isExpanded: boolean; + chainId: ChainId; + selected: boolean; + onPress?: (e: GestureStateChangeEvent) => void; + style?: ViewStyle; }) { + const name = chainsLabel[chainId]; + if (!name) throw new Error(`: No chain name for chainId ${chainId}`); + + const { isDarkMode } = useColorMode(); + + const surfacePrimary = useBackgroundColor('surfacePrimary'); + const networkSwitcherBackgroundColor = isDarkMode ? '#191A1C' : surfacePrimary; + + const chainColor = getChainColorWorklet(chainId, true); + const backgroundColor = selected + ? chroma.scale([networkSwitcherBackgroundColor, chainColor])(0.16).hex() + : isDarkMode + ? globalColors.white10 + : globalColors.grey20; + + const borderColor = selected ? chroma(chainColor).alpha(0.16).hex() : '#F5F8FF05'; + const pressed = useSharedValue(false); const tap = Gesture.Tap() - .onBegin(() => { + .onBegin(e => { pressed.value = true; + if (onPress) runOnJS(onPress)(e); }) .onFinalize(() => { pressed.value = false; - runOnJS(toggleExpanded)(!isExpanded); - }); + }) + .enabled(!!onPress); const animatedStyles = useAnimatedStyle(() => ({ transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }], @@ -192,42 +300,27 @@ function ExpandNetworks({ return ( - {!isExpanded && ( - - - {hiddenNetworksLength} - - - )} - - {isExpanded ? 'Show Less' : 'More Networks'} + + + {name} - - - {isExpanded ? '􀆇' : '􀆈'} - - ); @@ -240,8 +333,6 @@ const ITEM_WIDTH = 164.5; const GAP = 12; const HALF_GAP = 6; -const styles = StyleSheet.create({ draggingItem: { zIndex: 2, position: 'absolute', height: ITEM_HEIGHT, width: ITEM_WIDTH } }); - /* - what to do if user pins all networks (where to drag to unpin) @@ -249,6 +340,32 @@ const styles = StyleSheet.create({ draggingItem: { zIndex: 2, position: 'absolut */ +function DraggingItem({ + chainId, + selected, + transform, +}: { + chainId: ChainId | null; + transform: SharedValue; + selected: boolean; +}) { + const draggingStyles = useAnimatedStyle(() => { + if (!transform.value) return { opacity: 0 }; + return { + opacity: 1, + transform: [{ scale: transform.value.scale }], + left: transform.value.x, + top: transform.value.y, + }; + }); + + return ( + + {chainId && } + + ); +} + function NetworksGrid({ editing, selected, @@ -260,9 +377,10 @@ function NetworksGrid({ unselect: (chainId: ChainId) => void; select: (chainId: ChainId) => void; }) { - const networks = useSharedValue(useNetworkSwitcherStore()); - const pinnedNetworks = useDerivedValue(() => networks.value.pinnedNetworks); - const unpinnedNetworks = useDerivedValue(() => networks.value.unpinnedNetworks); + const pinnedNetworks = useSharedValue(useNetworkSwitcherStore(s => s.pinnedNetworks)); + const unpinnedNetworks = useDerivedValue(() => + SUPPORTED_CHAIN_IDS_ALPHABETICAL.filter(chainId => !pinnedNetworks.value.includes(chainId)) + ); const dragging = useSharedValue(null); const draggingTransform = useSharedValue(null); @@ -273,15 +391,21 @@ function NetworksGrid({ // Sync back to store useAnimatedReaction( - () => networks.value, - current => runOnJS(setNetworkSwitcherState)(current) + () => pinnedNetworks.value, + (pinnedNetworks, prev) => { + if (!prev) return; // no need to react on initial value + runOnJS(setNetworkSwitcherState)({ pinnedNetworks }); + } ); // Force rerender when dragging or dropping changes const [, rerender] = useReducer(x => x + 1, 0); useAnimatedReaction( () => [dropping.value, dragging.value], - () => runOnJS(rerender)() + () => { + console.log('force rerendering'); + runOnJS(rerender)(); + } ); const positionIndex = (x: number, y: number) => { @@ -308,17 +432,22 @@ function NetworksGrid({ 'worklet'; const isTargetUnpinned = e.y > unpinnedGridY.value; - if (isTargetUnpinned && pinnedNetworks.value.length === 1) return; + if (!isTargetUnpinned && pinnedNetworks.value.length === 1) return; const index = positionIndex(e.x, e.y); const position = indexPosition(index, isTargetUnpinned); draggingTransform.value = { x: position.x, y: position.y, scale: 1 }; // initial position is the grid slot - draggingTransform.value = withSpring({ x: e.x - ITEM_WIDTH * 0.5, y: e.y - ITEM_HEIGHT * 0.5, scale: 1.05 }); // animate into the center of the pointer const targetArray = isTargetUnpinned ? unpinnedNetworks.value : pinnedNetworks.value; const chainId = targetArray[index]; dragging.value = chainId; + + draggingTransform.value = withSpring({ + x: e.x - ITEM_WIDTH * 0.5, + y: e.y - ITEM_HEIGHT * 0.5, + scale: 1.05, + }); // animate into the center of the pointer }) .onChange(e => { 'worklet'; @@ -334,37 +463,51 @@ function NetworksGrid({ const isDraggingOverUnpinned = e.y > unpinnedGridY.value; - const targetArrayKey = isDraggingOverUnpinned ? 'unpinnedNetworks' : 'pinnedNetworks'; - const otherArrayKey = isDraggingOverUnpinned ? 'pinnedNetworks' : 'unpinnedNetworks'; + const currentIndexAtPinned = pinnedNetworks.value.indexOf(chainId); + const isPinned = currentIndexAtPinned !== -1; - const targetArray = networks.value[targetArrayKey]; - const targetIndex = Math.min(positionIndex(e.x, e.y), targetArray.length - 1); - const indexInTarget = targetArray.indexOf(chainId); + // We don't reorder unpinned networks + if (isDraggingOverUnpinned && !isPinned) return; - if (indexInTarget === -1) { - networks.modify(v => { - // Pin/Unpin - v[otherArrayKey] = v[otherArrayKey].filter(id => id !== chainId); - v[targetArrayKey].splice(targetIndex, 0, chainId); - return v; + // Unpin + if (isDraggingOverUnpinned && isPinned) { + pinnedNetworks.modify(networks => { + networks.splice(currentIndexAtPinned, 1); + return networks; }); - } else if (indexInTarget !== targetIndex) { - // Reorder - networks.modify(v => { - const [movedChainId] = v[targetArrayKey].splice(indexInTarget, 1); - v[targetArrayKey].splice(targetIndex, 0, movedChainId); - return v; + return; + } + + // Pin + if (!isDraggingOverUnpinned && !isPinned) { + pinnedNetworks.modify(networks => { + networks.push(chainId); + return networks; + }); + return; + } + + // Reorder + const newIndex = Math.min(positionIndex(e.x, e.y), pinnedNetworks.value.length - 1); + if (newIndex !== currentIndexAtPinned) { + pinnedNetworks.modify(networks => { + networks.splice(currentIndexAtPinned, 1); + networks.splice(newIndex, 0, chainId); + return networks; }); } }) .onFinalize(e => { 'worklet'; - if (!dragging.value) return; + const chainId = dragging.value; + if (!chainId) return; const isDroppingInUnpinned = e.y > unpinnedGridY.value; - const targetArray = isDroppingInUnpinned ? pinnedNetworks.value : unpinnedNetworks.value; - const index = Math.min(positionIndex(e.x, e.y), targetArray.length - 1); + const index = isDroppingInUnpinned + ? unpinnedNetworks.value.indexOf(chainId) + : Math.min(positionIndex(e.x, e.y), pinnedNetworks.value.length - 1); + const { x, y } = indexPosition(index, isDroppingInUnpinned); droppingTransform.value = draggingTransform.value; @@ -380,32 +523,14 @@ function NetworksGrid({ () => unpinnedGridY.value, (newY, prevY) => { // the layout can recalculate after the drop started - if (!prevY || !droppingTransform.value || droppingTransform.value.y < prevY) return; - const { x, y, scale } = droppingTransform.value; - droppingTransform.value = withSpring({ x, y: y + (prevY - newY), scale }, { mass: 0.6 }, completed => { + if (!prevY || !droppingTransform.value) return; + const { x, y } = droppingTransform.value; // TODO: does not work + droppingTransform.value = withSpring({ x, y: y + (prevY - newY), scale: 1 }, { mass: 0.6 }, completed => { if (completed) dropping.value = null; }); } ); - const draggingStyles = useAnimatedStyle(() => { - if (!draggingTransform.value) return {}; - return { - transform: [{ scale: draggingTransform.value.scale }], - left: draggingTransform.value.x, - top: draggingTransform.value.y, - }; - }); - - const droppingStyles = useAnimatedStyle(() => { - if (!droppingTransform.value) return {}; - return { - transform: [{ scale: droppingTransform.value.scale }], - left: droppingTransform.value.x, - top: droppingTransform.value.y, - }; - }); - const [isExpanded, setExpanded] = useState(false); const toggleSelected = (chainId: ChainId) => { @@ -413,30 +538,31 @@ function NetworksGrid({ else select(chainId); }; - // const mainGridNetworks = editing - // ? pinnedNetworks.value - // : [...pinnedNetworks.value, ...unpinnedNetworks.value.filter(chainId => selected.includes(chainId))]; + const pinnedGrid = editing + ? pinnedNetworks.value + : [...pinnedNetworks.value, ...unpinnedNetworks.value.filter(chainId => selected.includes(chainId))]; + + const unpinnedGrid = editing ? unpinnedNetworks.value : unpinnedNetworks.value.filter(chainId => !selected.includes(chainId)); return ( - {!!dropping.value && ( - - - - )} - - {!!dragging.value && ( - - - - )} + + - {pinnedNetworks.value.map(chainId => + {pinnedGrid.map(chainId => chainId === dragging.value || chainId === dropping.value ? ( ) : ( @@ -465,17 +591,16 @@ function NetworksGrid({ onLayout={e => (unpinnedGridY.value = e.nativeEvent.layout.y)} layout={LinearTransition} entering={FadeIn.duration(250).delay(125)} - exiting={FadeOut.duration(50)} style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', paddingVertical: 12 }} > - {unpinnedNetworks.value.length === 0 && ( + {unpinnedGrid.length === 0 && ( Drag here to unpin networks )} - {unpinnedNetworks.value.map(chainId => + {unpinnedGrid.map(chainId => chainId === dragging.value || chainId === dropping.value ? ( ) : ( @@ -494,12 +619,115 @@ function NetworksGrid({ ); } +const useCustomizeNetworksBanner = createRainbowStore<{ + dismissedAt: number; // timestamp +}>(() => ({ dismissedAt: 0 }), { + storageKey: 'CustomizeNetworksBanner', + version: 0, +}); +const twoWeeks = 1000 * 60 * 60 * 24 * 7 * 2; +const dismissCustomizeNetworksBanner = () => { + const { dismissedAt } = useCustomizeNetworksBanner.getState(); + if (Date.now() - dismissedAt < twoWeeks) return; + useCustomizeNetworksBanner.setState({ dismissedAt: Date.now() }); +}; + +function CustomizeNetworksBanner() { + const blue = '#268FFF'; + + const dismissedAt = useCustomizeNetworksBanner(s => s.dismissedAt); + const isOpen = Date.now() - dismissedAt > twoWeeks; + + if (!isOpen) return null; + + return ( + + + + + + } + > + + + + + 􀍱 + + + + + Customize Your Networks + + + Tap the{' '} + + Edit + {' '} + button below to set up + + + + + 􀆄 + + + + + + + + ); +} + export function NetworkSelector({ onClose, onSelect, multiple }: { onClose: VoidFunction; onSelect: VoidFunction; multiple?: boolean }) { - const backgroundColor = '#191A1C'; + const { isDarkMode } = useTheme(); + const surfacePrimary = useBackgroundColor('surfacePrimary'); + const backgroundColor = isDarkMode ? '#191A1C' : surfacePrimary; const separatorSecondary = useForegroundColor('separatorSecondary'); const separatorTertiary = useForegroundColor('separatorTertiary'); const fill = useForegroundColor('fill'); + console.log('rerender NetworkSelector'); + const translationY = useSharedValue(0); const swipeToClose = Gesture.Pan() @@ -518,9 +746,17 @@ export function NetworkSelector({ onClose, onSelect, multiple }: { onClose: Void transform: [{ translateY: translationY.value }], })); - const [selected, setSelected] = useState([]); - const unselect = (chainId: ChainId) => setSelected(s => s.filter(id => id !== chainId)); - const select = (chainId: ChainId) => setSelected(s => (multiple ? [...s, chainId] : [chainId])); + const [selected, setSelected] = useState([]); + const unselect = (chainId: ChainId) => + setSelected(s => { + if (s === 'all') return []; + return s.filter(id => id !== chainId); + }); + const select = (chainId: ChainId) => + setSelected(s => { + if (s === 'all') return [chainId]; + return multiple ? [...s, chainId] : [chainId]; + }); return ( @@ -553,6 +789,7 @@ export function NetworkSelector({ onClose, onSelect, multiple }: { onClose: Void animatedStyles, ]} > + @@ -564,12 +801,25 @@ export function NetworkSelector({ onClose, onSelect, multiple }: { onClose: Void {isEditing ? 'Edit' : 'Network'} - setEditing(s => !s)} /> + { + dismissCustomizeNetworksBanner(); + setEditing(s => !s); + }} + /> - + {multiple && !isEditing && ( + <> + setSelected('all')} /> + + + )} + + diff --git a/src/screens/discover/components/TrendingTokens.tsx b/src/screens/discover/components/TrendingTokens.tsx index a92fdbd012c..d9f5d38bb52 100644 --- a/src/screens/discover/components/TrendingTokens.tsx +++ b/src/screens/discover/components/TrendingTokens.tsx @@ -13,8 +13,7 @@ import LinearGradient from 'react-native-linear-gradient'; import Animated, { LinearTransition, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'; import { NetworkSelector } from './NetworkSwitcher'; import * as i18n from '@/languages'; - -const TRANSLATIONS = i18n.l.cards.ens_search; +import { useTheme } from '@/theme'; const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient); @@ -84,8 +83,11 @@ function CategoryFilterButton({ iconWidth?: number; label: string; }) { - const backgroundColor = useBackgroundColor('fillTertiary'); - const borderColor = useBackgroundColor('fillSecondary'); + const { isDarkMode } = useTheme(); + const fillTertiary = useBackgroundColor('fillTertiary'); + const fillSecondary = useBackgroundColor('fillSecondary'); + + const borderColor = selected && isDarkMode ? globalColors.white80 : fillSecondary; const pressed = useSharedValue(false); @@ -103,7 +105,7 @@ function CategoryFilterButton({ return ( - + @@ -258,7 +277,9 @@ function TrendingTokenRow() { const t = i18n.l.trending_tokens; function NoResults() { - const backgroundColor = '#191A1C'; // useBackgroundColor('fillQuaternary'); + const { isDarkMode } = useTheme(); + const fillQuaternary = useBackgroundColor('fillQuaternary'); + const backgroundColor = isDarkMode ? '#191A1C' : fillQuaternary; return ( @@ -349,7 +370,7 @@ export function TrendingTokens() { side="bottom" onPressMenuItem={timeframe => setFilter(filter => ({ ...filter, timeframe }))} > - + - +