From 4779e575bb42f584ca5436154db005eeea40ee5b Mon Sep 17 00:00:00 2001 From: nattadex Date: Tue, 20 Jun 2023 16:50:18 +0800 Subject: [PATCH 01/29] moved toggle_balance below --- .../screens/Portfolio/PortfolioScreen.tsx | 20 ------------- .../Portfolio/components/TotalPortfolio.tsx | 28 ++++++++++++++++++- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 9ba4b9227c..5da385f03d 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -10,7 +10,6 @@ import { ThemedTouchableOpacityV2, ThemedViewV2, } from "@components/themed"; -import { useDisplayBalancesContext } from "@contexts/DisplayBalancesContext"; import { useWalletContext } from "@shared-contexts/WalletContext"; import { useWalletPersistenceContext, @@ -116,10 +115,6 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { string, LockedBalance >; - const { - isBalancesDisplayed, - toggleDisplayBalances: onToggleDisplayBalances, - } = useDisplayBalancesContext(); const blockCount = useSelector((state: RootState) => state.block.count); const vaults = useSelector((state: RootState) => activeVaultsSelector(state.loans) @@ -596,21 +591,6 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { addressLength={addressLength} onPress={() => expandModal(false)} /> - - - { setActiveButtonGroup( props.portfolioButtonGroup.find( @@ -84,6 +95,21 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { > {hasFetchedToken && hasFetchedVaultsData ? ( + + + Date: Tue, 20 Jun 2023 17:20:05 +0800 Subject: [PATCH 02/29] added mb for android --- .../screens/Portfolio/components/TotalPortfolio.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx index 60c8af6d1a..95350e22bc 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx @@ -97,7 +97,9 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { Date: Wed, 21 Jun 2023 16:07:48 +0800 Subject: [PATCH 03/29] added DFI and EVM button --- .../screens/Portfolio/PortfolioScreen.tsx | 22 ++++++++++ mobile-app/app/styles.json | 44 +++++++++++++++++++ mobile-app/app/tailwind.config.js | 2 + 3 files changed, 68 insertions(+) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 5da385f03d..7973b9d865 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -320,6 +320,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { }, ]; + const [isEvmPortfolio, setIsEvmPortfolio] = useState(false); // Asset sort bottom sheet list const [assetSortType, setAssetSortType] = useState( PortfolioSortType.HighestDenominationValue @@ -591,6 +592,27 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { addressLength={addressLength} onPress={() => expandModal(false)} /> + setIsEvmPortfolio(!isEvmPortfolio)} + testID="switch_domain_button" + > + + {isEvmPortfolio ? "EVM" : "DFI"} + + Date: Thu, 22 Jun 2023 16:49:04 +0800 Subject: [PATCH 04/29] design changed; moved toggle balance back --- .../screens/Portfolio/PortfolioScreen.tsx | 22 +++++++++++++- .../Portfolio/components/TotalPortfolio.tsx | 30 +------------------ 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 7973b9d865..34126cd934 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -10,6 +10,7 @@ import { ThemedTouchableOpacityV2, ThemedViewV2, } from "@components/themed"; +import { useDisplayBalancesContext } from "@contexts/DisplayBalancesContext"; import { useWalletContext } from "@shared-contexts/WalletContext"; import { useWalletPersistenceContext, @@ -115,6 +116,10 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { string, LockedBalance >; + const { + isBalancesDisplayed, + toggleDisplayBalances: onToggleDisplayBalances, + } = useDisplayBalancesContext(); const blockCount = useSelector((state: RootState) => state.block.count); const vaults = useSelector((state: RootState) => activeVaultsSelector(state.loans) @@ -592,6 +597,21 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { addressLength={addressLength} onPress={() => expandModal(false)} /> + + + - + { setActiveButtonGroup( props.portfolioButtonGroup.find( @@ -95,23 +84,6 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { > {hasFetchedToken && hasFetchedVaultsData ? ( - - - Date: Fri, 23 Jun 2023 15:43:07 +0800 Subject: [PATCH 05/29] added domain toggle skeleton --- mobile-app/app/components/DomainSwitch.tsx | 117 ++++++++++++++++++ .../screens/Portfolio/PortfolioNavigator.tsx | 19 ++- 2 files changed, 134 insertions(+), 2 deletions(-) create mode 100644 mobile-app/app/components/DomainSwitch.tsx diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx new file mode 100644 index 0000000000..d56e59b4b5 --- /dev/null +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -0,0 +1,117 @@ +import { View, Text } from "react-native"; +import { ThemedTouchableOpacityV2 } from "@components/themed"; +import { getNativeIcon } from "@components/icons/assets"; +import { useThemeContext } from "@waveshq/walletkit-ui"; +import React, { useState } from "react"; + +export function DomainSwitch({ + // navigation, + selectionColor, + // onValueChange, +}): JSX.Element { + const [isEvmNetwork, setIsEvmNetwork] = useState(false); + const { isLight } = useThemeContext(); + + const DFIIcon = getNativeIcon("DFIlogo"); + + return ( + + setIsEvmNetwork(!isEvmNetwork)} + style={{ + flex: 1, + flexDirection: "row", + justifyContent: "center", + borderRadius: 55, + alignItems: "center", + padding: 0, + }} + > + + + + + + + DFI + + + + setIsEvmNetwork(!isEvmNetwork)} + style={{ + flex: 1, + borderRadius: 55, + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }} + > + + + + + + EVM + + + + + ); +} diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx index 5ba79d1342..1280d4ec41 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx @@ -3,7 +3,8 @@ import { createStackNavigator } from "@react-navigation/stack"; import { AddressType, WalletToken } from "@waveshq/walletkit-ui/dist/store"; import BigNumber from "bignumber.js"; import { Image } from "expo-image"; -import { Platform } from "react-native"; +import { Platform, View } from "react-native"; +import { DomainSwitch } from "@components/DomainSwitch"; import { BarCodeScanner } from "@components/BarCodeScanner"; import { HeaderTitle } from "@components/HeaderTitle"; import { tailwind } from "@tailwind"; @@ -218,7 +219,21 @@ export function PortfolioNavigator(): JSX.Element { contentFit="cover" /> ), - headerLeft: () => , + headerLeft: () => ( + + {}} + // testID="domain_switch" + // selectionMode={false} + selectionColor="#42F9C2" + /> + + + ), headerLeftContainerStyle: tailwind("pl-5", { "pb-2": Platform.OS === "ios", "pb-1.5": Platform.OS !== "ios", From ec574ac0860222caa4c399f5428b9ba06c3b2544 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 14:11:10 +0800 Subject: [PATCH 06/29] added domainProvider --- mobile-app/App.tsx | 30 +++--- mobile-app/app/api/index.ts | 1 + .../app/api/persistence/domain_storage.ts | 16 ++++ shared/contexts/DomainProvider.tsx | 96 +++++++++++++++++++ 4 files changed, 130 insertions(+), 13 deletions(-) create mode 100644 mobile-app/app/api/persistence/domain_storage.ts create mode 100644 shared/contexts/DomainProvider.tsx diff --git a/mobile-app/App.tsx b/mobile-app/App.tsx index 78650c3473..808464ea3a 100644 --- a/mobile-app/App.tsx +++ b/mobile-app/App.tsx @@ -4,6 +4,7 @@ import { SecuredStoreAPI, LanguagePersistence, ThemePersistence, + DomainPersistence, Logging, } from "@api"; import { AppStateContextProvider } from "@contexts/AppStateContext"; @@ -28,6 +29,7 @@ import { LanguageProvider, useLanguage, } from "@shared-contexts/LanguageProvider"; +import { DomainProvider } from "@shared-contexts/DomainProvider"; import * as Localization from "expo-localization"; import { useColorScheme } from "react-native"; import { WalletPersistence } from "@api/wallet"; @@ -110,19 +112,21 @@ export default function App(): JSX.Element | null { api={LanguagePersistence} locale={Localization.locale} > - - - - - -
- - - - - + + + + + + +
+ + + + + + diff --git a/mobile-app/app/api/index.ts b/mobile-app/app/api/index.ts index fb4624ce8c..cdd78d2d69 100644 --- a/mobile-app/app/api/index.ts +++ b/mobile-app/app/api/index.ts @@ -7,3 +7,4 @@ export { FeatureFlagPersistence } from "./persistence/feature_flag_storage"; export { SlippageTolerancePersistence } from "./persistence/slippage-tolerance_storage"; export { PortfolioCurrencyPersistence } from "./persistence/portfolio_currency_storage"; export { FavouritePoolpairsPersistence } from "./persistence/favourite_poolpairs_storage"; +export { DomainPersistence } from "./persistence/domain_storage"; diff --git a/mobile-app/app/api/persistence/domain_storage.ts b/mobile-app/app/api/persistence/domain_storage.ts new file mode 100644 index 0000000000..8d86b1f31e --- /dev/null +++ b/mobile-app/app/api/persistence/domain_storage.ts @@ -0,0 +1,16 @@ +import AsyncStorage from "@react-native-async-storage/async-storage"; + +const KEY = "WALLET.EVMDOMAIN"; + +async function set(domain: NonNullable): Promise { + await AsyncStorage.setItem(KEY, domain); +} + +async function get(): Promise { + return await AsyncStorage.getItem(KEY); +} + +export const DomainPersistence = { + set, + get, +}; diff --git a/shared/contexts/DomainProvider.tsx b/shared/contexts/DomainProvider.tsx new file mode 100644 index 0000000000..a3a3909efe --- /dev/null +++ b/shared/contexts/DomainProvider.tsx @@ -0,0 +1,96 @@ +import React, { + createContext, + useContext, + useEffect, + useState, + PropsWithChildren, +} from "react"; +import { useLogger } from "@shared-contexts/NativeLoggingProvider"; + +interface DomainLoader { + isDomainLoaded: boolean; + domain: NonNullable; +} + +interface DomainContextI { + api: { + get: () => Promise; + set: (domain: NonNullable) => Promise; + }; +} + +export function useDomain({ api }: DomainContextI): DomainLoader { + const defaultDomain = "DFI"; + const logger = useLogger(); + const [isDomainLoaded, setIsDomainLoaded] = useState(false); + const [domain, setDomain] = useState>(defaultDomain); + + useEffect(() => { + api + .get() + .then((l) => { + let currentDomain: NonNullable = defaultDomain; + if (l !== null && l !== undefined) { + currentDomain = l; + } + setDomain(currentDomain); + }) + .catch((err) => logger.error(err)) + .finally(() => setIsDomainLoaded(true)); + }, []); + + return { + isDomainLoaded, + domain, + }; +} + +interface Domain { + domain: NonNullable; + setDomain: (domain: NonNullable) => Promise; +} + +const DomainContext = createContext(undefined as any); + +export function useDomainContext(): Domain { + return useContext(DomainContext); +} + +export function DomainProvider( + props: DomainContextI & PropsWithChildren +): JSX.Element | null { + const { api } = props; + const { domain } = useDomain({ api }); + const [currentDomain, setCurrentDomain] = + useState>(domain); + + useEffect(() => { + setCurrentDomain(domain); + }, [domain]); + + useEffect(() => { + switch (currentDomain) { + case "EVM": + setDomain("EVM"); + break; + default: + setDomain("DFI"); + } + }, [currentDomain]); + + const setDomain = async (domain: string): Promise => { + setCurrentDomain(domain); + await api.set(domain); + }; + + const context: Domain = { + domain: currentDomain, + setDomain, + }; + + return ( + + {props.children} + + ); +} From c50f561ef542f723cb96aafa0e0207c315a95038 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 14:51:58 +0800 Subject: [PATCH 07/29] added domain context to switch --- mobile-app/app/components/DomainSwitch.tsx | 37 ++++++++++++++-------- 1 file changed, 24 insertions(+), 13 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index d56e59b4b5..f2eab631b2 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -2,16 +2,20 @@ import { View, Text } from "react-native"; import { ThemedTouchableOpacityV2 } from "@components/themed"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; -import React, { useState } from "react"; +import React from "react"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { DomainPersistence } from "@api"; export function DomainSwitch({ - // navigation, + testID, selectionColor, - // onValueChange, +}: { + testID: string; + selectionColor: string; }): JSX.Element { - const [isEvmNetwork, setIsEvmNetwork] = useState(false); const { isLight } = useThemeContext(); - + const { domain, setDomain } = useDomainContext(); + const isEvmDomain = domain !== "DFI"; const DFIIcon = getNativeIcon("DFIlogo"); return ( @@ -24,10 +28,14 @@ export function DomainSwitch({ flexDirection: "row", justifyContent: "center", }} + testID={testID} > setIsEvmNetwork(!isEvmNetwork)} + onPress={async () => { + setDomain(domain === "DFI" ? "EVM" : "DFI"); + await DomainPersistence.set(domain); + }} style={{ flex: 1, flexDirection: "row", @@ -40,12 +48,12 @@ export function DomainSwitch({ @@ -74,7 +82,10 @@ export function DomainSwitch({ setIsEvmNetwork(!isEvmNetwork)} + onPress={async () => { + setDomain(domain === "DFI" ? "EVM" : "DFI"); + await DomainPersistence.set(domain); + }} style={{ flex: 1, borderRadius: 55, @@ -86,8 +97,8 @@ export function DomainSwitch({ From 4f8afdb73c5e9d33e4493c751e7b4b55f530b345 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 15:06:29 +0800 Subject: [PATCH 08/29] added switch to portfolio navigator --- mobile-app/app/components/DomainSwitch.tsx | 5 +++++ .../AppNavigator/screens/Portfolio/PortfolioNavigator.tsx | 7 +------ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index f2eab631b2..b14b2402b4 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -27,6 +27,7 @@ export function DomainSwitch({ backgroundColor: `${isLight ? "#CCCCCC" : "#333333"}`, flexDirection: "row", justifyContent: "center", + marginRight: 16, }} testID={testID} > @@ -43,6 +44,8 @@ export function DomainSwitch({ borderRadius: 55, alignItems: "center", padding: 0, + position: "absolute", + left: 0, }} > - {}} - // testID="domain_switch" - // selectionMode={false} - selectionColor="#42F9C2" - /> + ), From 472fc7db048a4280efb81167cef625618c7890a7 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 16:19:37 +0800 Subject: [PATCH 09/29] added gradient border --- mobile-app/app/components/DomainSwitch.tsx | 147 ++++++++---------- .../screens/Portfolio/PortfolioNavigator.tsx | 2 +- mobile-app/app/styles.json | 3 + mobile-app/app/tailwind.config.js | 1 + 4 files changed, 69 insertions(+), 84 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index b14b2402b4..818a387526 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -5,14 +5,10 @@ import { useThemeContext } from "@waveshq/walletkit-ui"; import React from "react"; import { useDomainContext } from "@shared-contexts/DomainProvider"; import { DomainPersistence } from "@api"; +import { tailwind } from "@tailwind"; +import { LinearGradient } from "expo-linear-gradient"; -export function DomainSwitch({ - testID, - selectionColor, -}: { - testID: string; - selectionColor: string; -}): JSX.Element { +export function DomainSwitch({ testID }: { testID: string }): JSX.Element { const { isLight } = useThemeContext(); const { domain, setDomain } = useDomainContext(); const isEvmDomain = domain !== "DFI"; @@ -20,15 +16,10 @@ export function DomainSwitch({ return ( - + DFI @@ -89,44 +66,48 @@ export function DomainSwitch({ setDomain(domain === "DFI" ? "EVM" : "DFI"); await DomainPersistence.set(domain); }} - style={{ - flex: 1, - borderRadius: 55, - flexDirection: "row", - justifyContent: "center", - alignItems: "center", - position: "absolute", - right: 0, - }} + style={tailwind( + "flex-1 rounded-full flex-row justify-center items-center absolute right-0" + )} > - - + + + + + + + EVM - - EVM - - + ); diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx index 1e31b0e8dc..ae53fddbee 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx @@ -225,7 +225,7 @@ export function PortfolioNavigator(): JSX.Element { "flex flex-row bg-transparent items-center w-full" )} > - + ), diff --git a/mobile-app/app/styles.json b/mobile-app/app/styles.json index f7bd142b0c..c5183381be 100644 --- a/mobile-app/app/styles.json +++ b/mobile-app/app/styles.json @@ -4389,6 +4389,9 @@ "w-16": { "width": 64 }, + "w-18": { + "width": 76 + }, "w-20": { "width": 80 }, diff --git a/mobile-app/app/tailwind.config.js b/mobile-app/app/tailwind.config.js index 807e4e67a0..5a210103ef 100644 --- a/mobile-app/app/tailwind.config.js +++ b/mobile-app/app/tailwind.config.js @@ -195,6 +195,7 @@ module.exports = { }, width: { 15: 60, + 18: 76 }, height: { 15: 60, From d108d0c70ce76433f44e4871f53736547eeac17c Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 16:58:10 +0800 Subject: [PATCH 10/29] conditionally display elements --- .../components/icons/assets/ConvertIcon.tsx | 14 +++ .../screens/Portfolio/PortfolioScreen.tsx | 84 ++++++-------- .../Portfolio/components/ActionButtons.tsx | 105 +++++++++++------- .../Portfolio/components/AssetsFilterRow.tsx | 51 +++++---- .../Portfolio/components/TotalPortfolio.tsx | 33 +++--- 5 files changed, 164 insertions(+), 123 deletions(-) create mode 100644 mobile-app/app/components/icons/assets/ConvertIcon.tsx diff --git a/mobile-app/app/components/icons/assets/ConvertIcon.tsx b/mobile-app/app/components/icons/assets/ConvertIcon.tsx new file mode 100644 index 0000000000..554e204806 --- /dev/null +++ b/mobile-app/app/components/icons/assets/ConvertIcon.tsx @@ -0,0 +1,14 @@ +import Svg, { Path, SvgProps } from "react-native-svg"; + +export function ConvertIcon(props: SvgProps): JSX.Element { + return ( + + + + ); +} diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 34126cd934..d7da701cae 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -72,6 +72,7 @@ import { BottomSheetHeader } from "@components/BottomSheetHeader"; import * as SplashScreen from "expo-splash-screen"; import { useLogger } from "@shared-contexts/NativeLoggingProvider"; import { bottomTabDefaultRoutes } from "@screens/AppNavigator/constants/DefaultRoutes"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; import { AddressSelectionButtonV2 } from "./components/AddressSelectionButtonV2"; import { ActionButtons } from "./components/ActionButtons"; import { @@ -99,6 +100,7 @@ export interface PortfolioRowToken extends WalletToken { export function PortfolioScreen({ navigation }: Props): JSX.Element { const { isLight } = useThemeContext(); + const { domain } = useDomainContext(); const isFocused = useIsFocused(); const height = useBottomTabBarHeight(); const client = useWhaleApiClient(); @@ -325,7 +327,6 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { }, ]; - const [isEvmPortfolio, setIsEvmPortfolio] = useState(false); // Asset sort bottom sheet list const [assetSortType, setAssetSortType] = useState( PortfolioSortType.HighestDenominationValue @@ -612,27 +613,6 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { size={18} /> - setIsEvmPortfolio(!isEvmPortfolio)} - testID="switch_domain_button" - > - - {isEvmPortfolio ? "EVM" : "DFI"} - - - - + + {domain === "DFI" && } + {/* to show bottom sheet for asset sort */} {activeButtonGroup === ButtonGroupTabKey.AllTokens && ( @@ -724,6 +707,7 @@ function AssetSortRow(props: { assetSortType: PortfolioSortType; denominationCurrency: string; onPress: () => void; + isEvmDomain: boolean; }): JSX.Element { const highestCurrencyValue = translate( "screens/PortfolioScreen", @@ -756,32 +740,34 @@ function AssetSortRow(props: { > {translate("screens/PortfolioScreen", "ASSETS")} - - - {translate( - "screens/PortfolioScreen", - props.isSorted - ? getDisplayedSortText(props.assetSortType) - : "Sort by" - )} - - - + + {translate( + "screens/PortfolioScreen", + props.isSorted + ? getDisplayedSortText(props.assetSortType) + : "Sort by" + )} + + + + )} ); } diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index fa1eb8e089..fc0fb17522 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -17,9 +17,11 @@ import { getColor, tailwind } from "@tailwind"; import { translate } from "@translations"; import { ScrollView, Text, View } from "react-native"; import { useSelector } from "react-redux"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; import BigNumber from "bignumber.js"; +import { ConvertIcon } from "@components/icons/assets/ConvertIcon"; import { PortfolioParamList } from "../PortfolioNavigator"; export interface ActionButtonsProps { @@ -30,10 +32,13 @@ export interface ActionButtonsProps { onPress: () => void; testID: string; badge?: string | number; + isEvmDomain?: boolean; } export function ActionButtons(): JSX.Element { const { isFeatureAvailable } = useFeatureFlagContext(); + const { domain } = useDomainContext(); + const isEvmDomain = domain !== "DFI"; const navigation = useNavigation>(); const futureSwaps = useSelector((state: RootState) => futureSwapSelector(state) @@ -58,7 +63,7 @@ export function ActionButtons(): JSX.Element { showsHorizontalScrollIndicator={false} horizontal > - {hasDFIBalance && ( + {hasDFIBalance && !isEvmDomain && ( navigation.navigate("Receive")} /> - {isFeatureAvailable("future_swap") && futureSwaps.length > 0 && ( + {!isEvmDomain && ( 9 ? "9+" : futureSwaps.length} - testID="future_swap_button" - onPress={() => navigation.navigate("FutureSwapScreen")} + testID="swap_tokens_button" + onPress={() => + navigation.navigate({ + name: "CompositeSwap", + params: {}, + merge: true, + }) + } /> )} - navigation.navigate({ - name: "CompositeSwap", - params: {}, - merge: true, - }) - } + name={translate("components/ActionButtons", "Convert")} + iconSize={28} + testID="convert_button" + // TODO: Update to Convert screen + onPress={() => navigation.navigate("Receive")} + isEvmDomain /> - {isFeatureAvailable("ocg_cfp_dfip") && ( - navigation.navigate("OCGProposalsScreen")} - /> + + {!isEvmDomain && ( + <> + {isFeatureAvailable("future_swap") && futureSwaps.length > 0 && ( + 9 ? "9+" : futureSwaps.length} + testID="future_swap_button" + onPress={() => navigation.navigate("FutureSwapScreen")} + /> + )} + + {isFeatureAvailable("ocg_cfp_dfip") && ( + navigation.navigate("OCGProposalsScreen")} + /> + )} + navigation.navigate("TransactionsScreen")} + /> + )} - navigation.navigate("TransactionsScreen")} - /> ); @@ -147,11 +168,19 @@ function ActionButton(props: ActionButtonsProps): JSX.Element { testID={props.testID} > {props.iconType === undefined ? ( - + <> + {props.isEvmDomain ? ( + + ) : ( + + )} + ) : ( void; activeButtonGroup: string; setActiveButtonGroup: (key: ButtonGroupTabKey) => void; + isEvmDomain: boolean; } export function AssetsFilterRow(props: AssetsFilterRowProps): JSX.Element { @@ -49,28 +50,34 @@ export function AssetsFilterRow(props: AssetsFilterRowProps): JSX.Element { }, ]; return ( - - - {filterButtonGroup.map((button, index) => ( - - ))} - - + <> + {!props.isEvmDomain ? ( + + + {filterButtonGroup.map((button, index) => ( + + ))} + + + ) : ( + <> + )} + ); } diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx index a54d54e673..26a6521cae 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx @@ -10,6 +10,7 @@ import { useSelector } from "react-redux"; import { Platform, TouchableOpacity } from "react-native"; import { useEffect, useState } from "react"; import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; import { getPrecisedCurrencyValue, getPrecisedTokenValue, @@ -43,6 +44,8 @@ interface PortfolioButtonGroup { export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { const { hasFetchedToken } = useSelector((state: RootState) => state.wallet); + const { domain } = useDomainContext(); + const isEvmDomain = domain !== "DFI"; const { hasFetchedVaultsData } = useSelector( (state: RootState) => state.loans ); @@ -121,20 +124,22 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { } /> - setIsExpanded(!isExpanded)} - style={tailwind("")} - testID="toggle_portfolio" - > - - + {!isEvmDomain && ( + setIsExpanded(!isExpanded)} + style={tailwind("")} + testID="toggle_portfolio" + > + + + )} ) : ( From 4b8c5396d5c4f007c275b83a499521363e260534 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 17:17:26 +0800 Subject: [PATCH 11/29] some styling for EVM page --- .../AppNavigator/screens/Portfolio/PortfolioScreen.tsx | 4 +++- .../screens/Portfolio/components/ActionButtons.tsx | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index d7da701cae..d62a591cd2 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -730,7 +730,9 @@ function AssetSortRow(props: { return ( Date: Mon, 26 Jun 2023 17:47:48 +0800 Subject: [PATCH 12/29] empty portfolio --- .../assets/EmptyEvmPortfolioIcon.tsx | 89 +++++++++++++++++++ .../Portfolio/components/PortfolioCard.tsx | 33 +++++-- 2 files changed, 113 insertions(+), 9 deletions(-) create mode 100644 mobile-app/app/screens/AppNavigator/screens/Portfolio/assets/EmptyEvmPortfolioIcon.tsx diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/assets/EmptyEvmPortfolioIcon.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/assets/EmptyEvmPortfolioIcon.tsx new file mode 100644 index 0000000000..047e9b5428 --- /dev/null +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/assets/EmptyEvmPortfolioIcon.tsx @@ -0,0 +1,89 @@ +import Svg, { + Ellipse, + Path, + LinearGradient, + G, + Stop, + Defs, + Rect, + ClipPath, +} from "react-native-svg"; + +export function EmptyEvmPortfolioIcon(): JSX.Element { + const GElement = G as any; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx index b3dfd59892..3b79142e3e 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx @@ -6,6 +6,7 @@ import { RootState } from "@store"; import { useSelector } from "react-redux"; import { Platform } from "react-native"; import { translate } from "@translations"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; import { PortfolioParamList } from "../PortfolioNavigator"; import { PortfolioRowToken } from "../PortfolioScreen"; import { EmptyTokensScreen } from "./EmptyTokensScreen"; @@ -17,6 +18,7 @@ import { EmptyCryptoIcon } from "../assets/EmptyCryptoIcon"; import { EmptyLPTokenIcon } from "../assets/EmptyLPTokenIcon"; import { EmptyDTokenIcon } from "../assets/EmptyDTokenIcon"; import { EmptyPortfolioIcon } from "../assets/EmptyPortfolioIcon"; +import { EmptyEvmPortfolioIcon } from "../assets/EmptyEvmPortfolioIcon"; interface PortfolioCardProps { isZeroBalance: boolean; @@ -38,10 +40,13 @@ export function PortfolioCard({ denominationCurrency, }: PortfolioCardProps): JSX.Element { const { hasFetchedToken } = useSelector((state: RootState) => state.wallet); - + const { domain } = useDomainContext(); // return empty portfolio if no DFI and other tokens if (isZeroBalance) { - const screenDetails = getEmptyScreenDetails(ButtonGroupTabKey.AllTokens); + const screenDetails = getEmptyScreenDetails( + ButtonGroupTabKey.AllTokens, + domain + ); return ; } @@ -52,7 +57,8 @@ export function PortfolioCard({ buttonGroupOptions?.activeButtonGroup !== "ALL_TOKENS" ) { const screenDetails = getEmptyScreenDetails( - buttonGroupOptions?.activeButtonGroup + buttonGroupOptions?.activeButtonGroup, + domain ); return ; } @@ -122,7 +128,10 @@ function PortfolioItemRow({ ); } -function getEmptyScreenDetails(type?: ButtonGroupTabKey): { +function getEmptyScreenDetails( + type?: ButtonGroupTabKey, + domain?: string +): { icon: () => JSX.Element; title: string; subtitle: string; @@ -158,12 +167,18 @@ function getEmptyScreenDetails(type?: ButtonGroupTabKey): { case ButtonGroupTabKey.AllTokens: default: return { - icon: EmptyPortfolioIcon, + icon: domain === "DFI" ? EmptyPortfolioIcon : EmptyEvmPortfolioIcon, title: translate("components/EmptyPortfolio", "Empty portfolio"), - subtitle: translate( - "components/EmptyPortfolio", - "Add DFI and other tokens to get started" - ), + subtitle: + domain === "DFI" + ? translate( + "components/EmptyPortfolio", + "Add DFI and other tokens to get started" + ) + : translate( + "components/EmptyPortfolio", + "Add to your balance by converting DFI to the EVM layer" + ), }; } } From c93a161b570976507bd42076ce25cdc1878fc6be Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 26 Jun 2023 18:17:57 +0800 Subject: [PATCH 13/29] empty evm portfolio --- .../app/components/icons/assets/EvmDFI.tsx | 52 +++++++++++++++++++ .../app/components/icons/assets/index.ts | 3 ++ .../Portfolio/components/DFIBalanceCard.tsx | 21 ++++++-- 3 files changed, 71 insertions(+), 5 deletions(-) create mode 100644 mobile-app/app/components/icons/assets/EvmDFI.tsx diff --git a/mobile-app/app/components/icons/assets/EvmDFI.tsx b/mobile-app/app/components/icons/assets/EvmDFI.tsx new file mode 100644 index 0000000000..ccf700c712 --- /dev/null +++ b/mobile-app/app/components/icons/assets/EvmDFI.tsx @@ -0,0 +1,52 @@ +import Svg, { + ClipPath, + Defs, + G, + LinearGradient, + Path, + Rect, + Stop, + SvgProps, +} from "react-native-svg"; + +export function EvmDFI(props: SvgProps): JSX.Element { + return ( + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/mobile-app/app/components/icons/assets/index.ts b/mobile-app/app/components/icons/assets/index.ts index 8d00060aa1..2ec4f6a008 100644 --- a/mobile-app/app/components/icons/assets/index.ts +++ b/mobile-app/app/components/icons/assets/index.ts @@ -13,6 +13,8 @@ import { dUSD } from "./dUSD"; import { DFIlogo } from "./plainDFI"; import { dEUROC } from "./dEUROC"; +import { EvmDFI } from "./EvmDFI"; + const mapping: Record JSX.Element> = { _UTXO: DFI, DFI: DFI, @@ -31,6 +33,7 @@ const mapping: Record JSX.Element> = { DUSD: dUSD, dEUROC: dEUROC, DFIlogo: DFIlogo, + EvmDFI: EvmDFI, }; /** diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx index 237a6cc514..bc7f1be9d8 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx @@ -16,6 +16,7 @@ import { useTokenPrice } from "@screens/AppNavigator/screens/Portfolio/hooks/Tok import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; import BigNumber from "bignumber.js"; import { translate } from "@translations"; +import { useDomainContext } from "@shared-contexts/DomainProvider"; import { TokenNameText } from "./TokenNameText"; import { TokenAmountText } from "./TokenAmountText"; @@ -26,6 +27,7 @@ interface DFIBalaceCardProps { export function DFIBalanceCard({ denominationCurrency, }: DFIBalaceCardProps): JSX.Element { + const { domain } = useDomainContext(); const navigation = useNavigation>(); const DFIToken = useSelector((state: RootState) => DFITokenSelector(state.wallet) @@ -44,6 +46,9 @@ export function DFIBalanceCard({ DFIUnified.isLPS ); const DFIIcon = getNativeIcon("_UTXO"); + const EvmDFIIcon = getNativeIcon("EvmDFI"); + + const isEvmDomain = domain !== "DFI"; return ( @@ -65,10 +70,14 @@ export function DFIBalanceCard({ } > - + {!isEvmDomain ? ( + + ) : ( + + )} @@ -115,13 +124,13 @@ export function DFIBalanceCard({ {hasFetchedToken && !new BigNumber(DFIUtxo.amount ?? 0) .plus(DFIToken.amount ?? 0) - .gt(0) && } + .gt(0) && } ); } -function GetDFIBtn(): JSX.Element { +function GetDFIBtn({ isEvmDomain }: { isEvmDomain: boolean }): JSX.Element { const navigation = useNavigation>(); return ( - {translate("screens/GetDFIScreen", "Get DFI now!")} + {!isEvmDomain + ? translate("screens/GetDFIScreen", "Get DFI now!") + : translate("screens/GetDFIScreen", "Get DFI for EVM now!")} From c73be1bba26ca9fbabd3660f8c7e73b3decb5612 Mon Sep 17 00:00:00 2001 From: nattadex Date: Tue, 27 Jun 2023 15:16:45 +0800 Subject: [PATCH 14/29] used common icon --- mobile-app/app/components/DomainSwitch.tsx | 18 +++++------------- .../components/AssetsFilterRow.test.tsx | 2 ++ 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index 818a387526..17b9cc3449 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -13,6 +13,7 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { const { domain, setDomain } = useDomainContext(); const isEvmDomain = domain !== "DFI"; const DFIIcon = getNativeIcon("DFIlogo"); + const EvmDFIIcon = getNativeIcon("EvmDFI"); return ( - - - - - + + EVM diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx index 1859afcc3b..a699fb0eb8 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx @@ -6,12 +6,14 @@ describe("Portfolio Filter Buttons", () => { const setActiveButtonGroup = jest.fn(); const onButtonPress = jest.fn(); const activeButtonGroup = "ALL TOKENS"; + const isEvmDomain = false; const rendered = render( ); expect(rendered.toJSON()).toMatchSnapshot(); From c990561e3147beec9c9c66b95cc9458c465eb0ec Mon Sep 17 00:00:00 2001 From: nattadex Date: Wed, 28 Jun 2023 11:00:19 +0800 Subject: [PATCH 15/29] updated the stylings --- mobile-app/app/components/DomainSwitch.tsx | 8 +++++--- mobile-app/app/components/icons/assets/ConvertIcon.tsx | 4 ++-- .../screens/Portfolio/components/ActionButtons.tsx | 6 +++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index 17b9cc3449..6a960fda3a 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -52,7 +52,7 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { - + - EVM + + EVM + diff --git a/mobile-app/app/components/icons/assets/ConvertIcon.tsx b/mobile-app/app/components/icons/assets/ConvertIcon.tsx index 554e204806..fe6f057dd7 100644 --- a/mobile-app/app/components/icons/assets/ConvertIcon.tsx +++ b/mobile-app/app/components/icons/assets/ConvertIcon.tsx @@ -5,8 +5,8 @@ export function ConvertIcon(props: SvgProps): JSX.Element { diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index 1175788f38..775502a7a5 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -171,7 +171,11 @@ function ActionButton(props: ActionButtonsProps): JSX.Element { {props.iconType === undefined ? ( <> {props.isEvmDomain ? ( - + ) : ( Date: Wed, 5 Jul 2023 18:08:54 +0800 Subject: [PATCH 16/29] removed get DFI tag for EVM --- .../screens/Portfolio/components/DFIBalanceCard.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx index bc7f1be9d8..e536df1b05 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx @@ -124,13 +124,14 @@ export function DFIBalanceCard({ {hasFetchedToken && !new BigNumber(DFIUtxo.amount ?? 0) .plus(DFIToken.amount ?? 0) - .gt(0) && } + .gt(0) && + !isEvmDomain && } ); } -function GetDFIBtn({ isEvmDomain }: { isEvmDomain: boolean }): JSX.Element { +function GetDFIBtn(): JSX.Element { const navigation = useNavigation>(); return ( - {!isEvmDomain - ? translate("screens/GetDFIScreen", "Get DFI now!") - : translate("screens/GetDFIScreen", "Get DFI for EVM now!")} + {translate("screens/GetDFIScreen", "Get DFI now!")} From 0caf93450586828ec511637573d41f255738fd78 Mon Sep 17 00:00:00 2001 From: nattadex Date: Thu, 6 Jul 2023 15:21:43 +0800 Subject: [PATCH 17/29] changed to enum --- shared/contexts/DomainProvider.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/shared/contexts/DomainProvider.tsx b/shared/contexts/DomainProvider.tsx index a3a3909efe..e25484a691 100644 --- a/shared/contexts/DomainProvider.tsx +++ b/shared/contexts/DomainProvider.tsx @@ -19,8 +19,13 @@ interface DomainContextI { }; } +export enum DomainType { + DFI = "DFI", + EVM = "EVM", +} + export function useDomain({ api }: DomainContextI): DomainLoader { - const defaultDomain = "DFI"; + const defaultDomain = DomainType.DFI; const logger = useLogger(); const [isDomainLoaded, setIsDomainLoaded] = useState(false); const [domain, setDomain] = useState>(defaultDomain); @@ -71,10 +76,10 @@ export function DomainProvider( useEffect(() => { switch (currentDomain) { case "EVM": - setDomain("EVM"); + setDomain(DomainType.EVM); break; default: - setDomain("DFI"); + setDomain(DomainType.DFI); } }, [currentDomain]); From cc1323cc3b4fd20972c3cfabf69abdaa55af12ea Mon Sep 17 00:00:00 2001 From: nattadex Date: Thu, 6 Jul 2023 15:50:25 +0800 Subject: [PATCH 18/29] updated to use ENUM instead --- mobile-app/app/components/DomainSwitch.tsx | 12 ++++++++---- .../screens/Portfolio/PortfolioScreen.tsx | 8 ++++---- .../screens/Portfolio/components/ActionButtons.tsx | 4 ++-- .../screens/Portfolio/components/DFIBalanceCard.tsx | 4 ++-- .../screens/Portfolio/components/PortfolioCard.tsx | 9 ++++++--- .../screens/Portfolio/components/TotalPortfolio.tsx | 4 ++-- 6 files changed, 24 insertions(+), 17 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index 6a960fda3a..4bf6fa5b67 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -3,7 +3,7 @@ import { ThemedTouchableOpacityV2 } from "@components/themed"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; import React from "react"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { DomainPersistence } from "@api"; import { tailwind } from "@tailwind"; import { LinearGradient } from "expo-linear-gradient"; @@ -11,7 +11,7 @@ import { LinearGradient } from "expo-linear-gradient"; export function DomainSwitch({ testID }: { testID: string }): JSX.Element { const { isLight } = useThemeContext(); const { domain, setDomain } = useDomainContext(); - const isEvmDomain = domain !== "DFI"; + const isEvmDomain = domain !== DomainType.DFI; const DFIIcon = getNativeIcon("DFIlogo"); const EvmDFIIcon = getNativeIcon("EvmDFI"); @@ -26,7 +26,9 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { { - setDomain(domain === "DFI" ? "EVM" : "DFI"); + setDomain( + domain === DomainType.DFI ? DomainType.EVM : DomainType.DFI + ); await DomainPersistence.set(domain); }} style={tailwind( @@ -64,7 +66,9 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { { - setDomain(domain === "DFI" ? "EVM" : "DFI"); + setDomain( + domain === DomainType.DFI ? DomainType.EVM : DomainType.DFI + ); await DomainPersistence.set(domain); }} style={tailwind( diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index d62a591cd2..1620c6f570 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -72,7 +72,7 @@ import { BottomSheetHeader } from "@components/BottomSheetHeader"; import * as SplashScreen from "expo-splash-screen"; import { useLogger } from "@shared-contexts/NativeLoggingProvider"; import { bottomTabDefaultRoutes } from "@screens/AppNavigator/constants/DefaultRoutes"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { AddressSelectionButtonV2 } from "./components/AddressSelectionButtonV2"; import { ActionButtons } from "./components/ActionButtons"; import { @@ -624,13 +624,13 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { setDenominationCurrency={setDenominationCurrency} /> - {domain === "DFI" && } + {domain === DomainType.DFI && } {/* to show bottom sheet for asset sort */} {activeButtonGroup === ButtonGroupTabKey.AllTokens && ( diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index 775502a7a5..0a2c89d06e 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -17,7 +17,7 @@ import { getColor, tailwind } from "@tailwind"; import { translate } from "@translations"; import { ScrollView, Text, View } from "react-native"; import { useSelector } from "react-redux"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; import BigNumber from "bignumber.js"; @@ -38,7 +38,7 @@ export interface ActionButtonsProps { export function ActionButtons(): JSX.Element { const { isFeatureAvailable } = useFeatureFlagContext(); const { domain } = useDomainContext(); - const isEvmDomain = domain !== "DFI"; + const isEvmDomain = domain !== DomainType.DFI; const navigation = useNavigation>(); const futureSwaps = useSelector((state: RootState) => futureSwapSelector(state) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx index e536df1b05..0758d23fce 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx @@ -16,7 +16,7 @@ import { useTokenPrice } from "@screens/AppNavigator/screens/Portfolio/hooks/Tok import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; import BigNumber from "bignumber.js"; import { translate } from "@translations"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { TokenNameText } from "./TokenNameText"; import { TokenAmountText } from "./TokenAmountText"; @@ -48,7 +48,7 @@ export function DFIBalanceCard({ const DFIIcon = getNativeIcon("_UTXO"); const EvmDFIIcon = getNativeIcon("EvmDFI"); - const isEvmDomain = domain !== "DFI"; + const isEvmDomain = domain !== DomainType.DFI; return ( diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx index 3b79142e3e..de7ee3158f 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx @@ -6,7 +6,7 @@ import { RootState } from "@store"; import { useSelector } from "react-redux"; import { Platform } from "react-native"; import { translate } from "@translations"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { PortfolioParamList } from "../PortfolioNavigator"; import { PortfolioRowToken } from "../PortfolioScreen"; import { EmptyTokensScreen } from "./EmptyTokensScreen"; @@ -167,10 +167,13 @@ function getEmptyScreenDetails( case ButtonGroupTabKey.AllTokens: default: return { - icon: domain === "DFI" ? EmptyPortfolioIcon : EmptyEvmPortfolioIcon, + icon: + domain === DomainType.DFI + ? EmptyPortfolioIcon + : EmptyEvmPortfolioIcon, title: translate("components/EmptyPortfolio", "Empty portfolio"), subtitle: - domain === "DFI" + domain === DomainType.DFI ? translate( "components/EmptyPortfolio", "Add DFI and other tokens to get started" diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx index 26a6521cae..8af0fb2a47 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx @@ -10,7 +10,7 @@ import { useSelector } from "react-redux"; import { Platform, TouchableOpacity } from "react-native"; import { useEffect, useState } from "react"; import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; -import { useDomainContext } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; import { getPrecisedCurrencyValue, getPrecisedTokenValue, @@ -45,7 +45,7 @@ interface PortfolioButtonGroup { export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { const { hasFetchedToken } = useSelector((state: RootState) => state.wallet); const { domain } = useDomainContext(); - const isEvmDomain = domain !== "DFI"; + const isEvmDomain = domain !== DomainType.DFI; const { hasFetchedVaultsData } = useSelector( (state: RootState) => state.loans ); From 1760d3cfd16ac28c2215c27786646651e878c02a Mon Sep 17 00:00:00 2001 From: elocin Date: Mon, 10 Jul 2023 15:23:23 +0800 Subject: [PATCH 19/29] Update mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx Co-authored-by: Lyka Labrada --- .../screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 1620c6f570..377774509f 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -630,7 +630,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { activeButtonGroup={activeButtonGroup} onButtonGroupPress={handleButtonFilter} setActiveButtonGroup={setActiveButtonGroup} - isEvmDomain={domain !== DomainType.DFI} + isEvmDomain={domain === DomainType.EVM} /> {/* to show bottom sheet for asset sort */} Date: Mon, 10 Jul 2023 15:23:36 +0800 Subject: [PATCH 20/29] Update mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx Co-authored-by: Lyka Labrada --- .../screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 377774509f..1d33dfac55 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -641,7 +641,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { }} isSorted={isSorted} denominationCurrency={denominationCurrency} - isEvmDomain={domain !== DomainType.DFI} + isEvmDomain={domain === DomainType.EVM} /> {activeButtonGroup === ButtonGroupTabKey.AllTokens && ( From 9ceb251a8e0c6a9dfba0e5b07aa6c8328588c791 Mon Sep 17 00:00:00 2001 From: elocin Date: Mon, 10 Jul 2023 15:23:45 +0800 Subject: [PATCH 21/29] Update mobile-app/app/components/DomainSwitch.tsx Co-authored-by: Lyka Labrada --- mobile-app/app/components/DomainSwitch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index 4bf6fa5b67..b9f353ba0a 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -11,7 +11,7 @@ import { LinearGradient } from "expo-linear-gradient"; export function DomainSwitch({ testID }: { testID: string }): JSX.Element { const { isLight } = useThemeContext(); const { domain, setDomain } = useDomainContext(); - const isEvmDomain = domain !== DomainType.DFI; + const isEvmDomain = domain === DomainType.EVM; const DFIIcon = getNativeIcon("DFIlogo"); const EvmDFIIcon = getNativeIcon("EvmDFI"); From 5352bbd43a0bbe9779050a54bc8d43fc233a6222 Mon Sep 17 00:00:00 2001 From: elocin Date: Mon, 10 Jul 2023 15:23:50 +0800 Subject: [PATCH 22/29] Update mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx Co-authored-by: Lyka Labrada --- .../AppNavigator/screens/Portfolio/components/ActionButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index 0a2c89d06e..fa5785c540 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -38,7 +38,7 @@ export interface ActionButtonsProps { export function ActionButtons(): JSX.Element { const { isFeatureAvailable } = useFeatureFlagContext(); const { domain } = useDomainContext(); - const isEvmDomain = domain !== DomainType.DFI; + const isEvmDomain = domain === DomainType.EVM; const navigation = useNavigation>(); const futureSwaps = useSelector((state: RootState) => futureSwapSelector(state) From 93ae7cd33d2ef447ae60fa22e4b22163b0f9d678 Mon Sep 17 00:00:00 2001 From: elocin Date: Mon, 10 Jul 2023 15:24:07 +0800 Subject: [PATCH 23/29] Update mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx Co-authored-by: Lyka Labrada --- .../screens/Portfolio/components/DFIBalanceCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx index 0758d23fce..51d0e59165 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx @@ -48,7 +48,7 @@ export function DFIBalanceCard({ const DFIIcon = getNativeIcon("_UTXO"); const EvmDFIIcon = getNativeIcon("EvmDFI"); - const isEvmDomain = domain !== DomainType.DFI; + const isEvmDomain = domain === DomainType.EVM; return ( From 13b47fe182a7312b82154236ee32fc1358322969 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 10 Jul 2023 16:16:31 +0800 Subject: [PATCH 24/29] reduced isEvmDomain conditions and css show/hide --- mobile-app/app/components/DomainSwitch.tsx | 132 +++++++++------------ 1 file changed, 59 insertions(+), 73 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index b9f353ba0a..a59512be49 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -23,90 +23,76 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { })} testID={testID} > - { - setDomain( - domain === DomainType.DFI ? DomainType.EVM : DomainType.DFI - ); - await DomainPersistence.set(domain); - }} - style={tailwind( - "flex-1 flex-row justify-center rounded-full items-center p-0 absolute left-0" - )} - > - { + setDomain(DomainType.EVM); + await DomainPersistence.set(domain); + }} style={tailwind( - "rounded-full p-1 flex-row items-center", - { + "flex-1 flex-row justify-center rounded-full items-center p-0 absolute left-0" + )} + > + - - - - - - DFI - - - - { - setDomain( - domain === DomainType.DFI ? DomainType.EVM : DomainType.DFI - ); - await DomainPersistence.set(domain); - }} - style={tailwind( - "flex-1 rounded-full flex-row justify-center items-center absolute right-0" - )} - > - + + + + + DFI + + + + )} + {domain === DomainType.EVM && ( + { + setDomain(DomainType.DFI); + await DomainPersistence.set(domain); + }} + style={tailwind( + "flex-1 rounded-full flex-row justify-center items-center absolute right-0" + )} > - - - + + + - - EVM - - - - + + EVM + + + + + )} ); } From ad6f18701b48bc74b94143e4a818e87e61624664 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 10 Jul 2023 16:41:48 +0800 Subject: [PATCH 25/29] moved condition outside of component --- .../screens/Portfolio/PortfolioScreen.tsx | 13 ++--- .../Portfolio/components/AssetsFilterRow.tsx | 51 ++++++++----------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 1d33dfac55..250db6a019 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -626,12 +626,13 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element { {domain === DomainType.DFI && } - + {domain === DomainType.DFI && ( + + )} {/* to show bottom sheet for asset sort */} void; activeButtonGroup: string; setActiveButtonGroup: (key: ButtonGroupTabKey) => void; - isEvmDomain: boolean; } export function AssetsFilterRow(props: AssetsFilterRowProps): JSX.Element { @@ -50,34 +49,28 @@ export function AssetsFilterRow(props: AssetsFilterRowProps): JSX.Element { }, ]; return ( - <> - {!props.isEvmDomain ? ( - - - {filterButtonGroup.map((button, index) => ( - - ))} - - - ) : ( - <> - )} - + + + {filterButtonGroup.map((button, index) => ( + + ))} + + ); } From e6b7c9a0923ac0e7da4f03227745db3b90f4d487 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 10 Jul 2023 16:47:08 +0800 Subject: [PATCH 26/29] removed isEvmDomain for test.tsx --- .../screens/Portfolio/components/AssetsFilterRow.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx index a699fb0eb8..1859afcc3b 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AssetsFilterRow.test.tsx @@ -6,14 +6,12 @@ describe("Portfolio Filter Buttons", () => { const setActiveButtonGroup = jest.fn(); const onButtonPress = jest.fn(); const activeButtonGroup = "ALL TOKENS"; - const isEvmDomain = false; const rendered = render( ); expect(rendered.toJSON()).toMatchSnapshot(); From 714db834732e4e917775be67c152b3de194b2df1 Mon Sep 17 00:00:00 2001 From: nattadex Date: Mon, 10 Jul 2023 16:54:29 +0800 Subject: [PATCH 27/29] removed unnecessary isEvmDomain --- mobile-app/app/components/DomainSwitch.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index a59512be49..c22bd951c4 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -11,7 +11,6 @@ import { LinearGradient } from "expo-linear-gradient"; export function DomainSwitch({ testID }: { testID: string }): JSX.Element { const { isLight } = useThemeContext(); const { domain, setDomain } = useDomainContext(); - const isEvmDomain = domain === DomainType.EVM; const DFIIcon = getNativeIcon("DFIlogo"); const EvmDFIIcon = getNativeIcon("EvmDFI"); @@ -36,9 +35,8 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { > @@ -73,11 +71,7 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element { end={[1, 1]} style={tailwind("rounded-full")} > - + Date: Tue, 18 Jul 2023 14:19:51 +0800 Subject: [PATCH 28/29] Update mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx Co-authored-by: Lyka Labrada --- .../screens/Portfolio/components/TotalPortfolio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx index 8af0fb2a47..d65bbfc2c7 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx @@ -124,7 +124,7 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element { } /> - {!isEvmDomain && ( + {domain === DomainType.DFI && ( setIsExpanded(!isExpanded)} From f882804522cfc3ec2d6525b1a7244a68f2ccbe3c Mon Sep 17 00:00:00 2001 From: Pierre Gee Date: Fri, 21 Jul 2023 10:51:38 +0800 Subject: [PATCH 29/29] fix(core): portfolio (evm-dvm) tests fix (#4006) * fix(core): portfolio tests fix * fix action button tests * rename to domain context * rename on mock * rename mock file --- mobile-app/App.tsx | 2 +- mobile-app/app/components/DomainSwitch.tsx | 2 +- .../app/contexts/DomainContext.tsx | 0 .../app/contexts/__mocks__/DomainContext.tsx | 10 ++ .../screens/Portfolio/PortfolioScreen.tsx | 2 +- .../components/ActionButtons.test.tsx | 16 +- .../Portfolio/components/ActionButtons.tsx | 2 +- .../components/DFIBalanceCard.test.tsx | 2 + .../Portfolio/components/DFIBalanceCard.tsx | 2 +- .../Portfolio/components/PortfolioCard.tsx | 2 +- .../components/TotalPortfolio.test.tsx | 1 + .../Portfolio/components/TotalPortfolio.tsx | 2 +- .../__snapshots__/ActionButtons.test.tsx.snap | 148 ++++++++++++++++++ 13 files changed, 181 insertions(+), 10 deletions(-) rename shared/contexts/DomainProvider.tsx => mobile-app/app/contexts/DomainContext.tsx (100%) create mode 100644 mobile-app/app/contexts/__mocks__/DomainContext.tsx diff --git a/mobile-app/App.tsx b/mobile-app/App.tsx index 808464ea3a..94fa5fc1da 100644 --- a/mobile-app/App.tsx +++ b/mobile-app/App.tsx @@ -29,7 +29,7 @@ import { LanguageProvider, useLanguage, } from "@shared-contexts/LanguageProvider"; -import { DomainProvider } from "@shared-contexts/DomainProvider"; +import { DomainProvider } from "@contexts/DomainContext"; import * as Localization from "expo-localization"; import { useColorScheme } from "react-native"; import { WalletPersistence } from "@api/wallet"; diff --git a/mobile-app/app/components/DomainSwitch.tsx b/mobile-app/app/components/DomainSwitch.tsx index c22bd951c4..219f92b56a 100644 --- a/mobile-app/app/components/DomainSwitch.tsx +++ b/mobile-app/app/components/DomainSwitch.tsx @@ -3,7 +3,7 @@ import { ThemedTouchableOpacityV2 } from "@components/themed"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; import React from "react"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { DomainPersistence } from "@api"; import { tailwind } from "@tailwind"; import { LinearGradient } from "expo-linear-gradient"; diff --git a/shared/contexts/DomainProvider.tsx b/mobile-app/app/contexts/DomainContext.tsx similarity index 100% rename from shared/contexts/DomainProvider.tsx rename to mobile-app/app/contexts/DomainContext.tsx diff --git a/mobile-app/app/contexts/__mocks__/DomainContext.tsx b/mobile-app/app/contexts/__mocks__/DomainContext.tsx new file mode 100644 index 0000000000..dbf9684ecd --- /dev/null +++ b/mobile-app/app/contexts/__mocks__/DomainContext.tsx @@ -0,0 +1,10 @@ +export enum DomainType { + DFI = "DFI", + EVM = "EVM", +} + +export const useDomainContext = () => { + return { + domain: "DFI", + }; +}; diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx index 250db6a019..ee6692bed2 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx @@ -72,7 +72,7 @@ import { BottomSheetHeader } from "@components/BottomSheetHeader"; import * as SplashScreen from "expo-splash-screen"; import { useLogger } from "@shared-contexts/NativeLoggingProvider"; import { bottomTabDefaultRoutes } from "@screens/AppNavigator/constants/DefaultRoutes"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { AddressSelectionButtonV2 } from "./components/AddressSelectionButtonV2"; import { ActionButtons } from "./components/ActionButtons"; import { diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.test.tsx index 8d1699a45d..0e08873df5 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.test.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.test.tsx @@ -4,13 +4,21 @@ import { configureStore } from "@reduxjs/toolkit"; import { RootState } from "@store"; import { setTokenSymbol, wallet } from "@waveshq/walletkit-ui/dist/store"; import { futureSwaps } from "@store/futureSwap"; +import { StoreProvider } from "@contexts/StoreProvider"; import { ActionButtons } from "./ActionButtons"; jest.mock("@contexts/FeatureFlagContext"); +jest.mock("@contexts/DomainContext"); + jest.mock("@react-navigation/native", () => ({ useNavigation: jest.fn(), })); +jest.mock("react-native/Libraries/Utilities/Platform", () => ({ + OS: "web", + select: () => jest.fn, +})); + describe("DFI Action Buttons", () => { it("should match snapshot for Action Buttons component", async () => { const initialState: Partial = { @@ -51,9 +59,11 @@ describe("DFI Action Buttons", () => { }); const rendered = render( - - - + + + + + ); expect(rendered.toJSON()).toMatchSnapshot(); }); diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index fa5785c540..6b384f16e3 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -17,7 +17,7 @@ import { getColor, tailwind } from "@tailwind"; import { translate } from "@translations"; import { ScrollView, Text, View } from "react-native"; import { useSelector } from "react-redux"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { getNativeIcon } from "@components/icons/assets"; import { useThemeContext } from "@waveshq/walletkit-ui"; import BigNumber from "bignumber.js"; diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.test.tsx index 16a9fa3908..c1f43d8a76 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.test.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.test.tsx @@ -9,6 +9,8 @@ import { LoanVaultState } from "@defichain/whale-api-client/dist/api/loan"; import { DFIBalanceCard } from "./DFIBalanceCard"; jest.mock("../../../../../contexts/DisplayBalancesContext"); +jest.mock("@contexts/DomainContext"); + jest.mock("@react-navigation/native", () => ({ useNavigation: jest.fn(), useIsFocused: jest.fn(), diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx index 51d0e59165..d022f50991 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/DFIBalanceCard.tsx @@ -16,7 +16,7 @@ import { useTokenPrice } from "@screens/AppNavigator/screens/Portfolio/hooks/Tok import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; import BigNumber from "bignumber.js"; import { translate } from "@translations"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { TokenNameText } from "./TokenNameText"; import { TokenAmountText } from "./TokenAmountText"; diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx index de7ee3158f..d591e7d803 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx @@ -6,7 +6,7 @@ import { RootState } from "@store"; import { useSelector } from "react-redux"; import { Platform } from "react-native"; import { translate } from "@translations"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { PortfolioParamList } from "../PortfolioNavigator"; import { PortfolioRowToken } from "../PortfolioScreen"; import { EmptyTokensScreen } from "./EmptyTokensScreen"; diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.test.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.test.tsx index 65759c0cbd..b3c2b5b11d 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.test.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.test.tsx @@ -9,6 +9,7 @@ import { loans } from "@store/loans"; import { PortfolioButtonGroupTabKey, TotalPortfolio } from "./TotalPortfolio"; jest.mock("@contexts/DisplayBalancesContext"); +jest.mock("@contexts/DomainContext"); describe("DFI Total Portfolio Card", () => { it("should match snapshot", async () => { diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx index d65bbfc2c7..b38c1c3724 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx @@ -10,7 +10,7 @@ import { useSelector } from "react-redux"; import { Platform, TouchableOpacity } from "react-native"; import { useEffect, useState } from "react"; import { TextSkeletonLoaderV2 } from "@components/TextSkeletonLoaderV2"; -import { useDomainContext, DomainType } from "@shared-contexts/DomainProvider"; +import { useDomainContext, DomainType } from "@contexts/DomainContext"; import { getPrecisedCurrencyValue, getPrecisedTokenValue, diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/ActionButtons.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/ActionButtons.test.tsx.snap index 54940e2a75..a248993716 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/ActionButtons.test.tsx.snap +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/__snapshots__/ActionButtons.test.tsx.snap @@ -48,6 +48,8 @@ exports[`DFI Action Buttons should match snapshot for Action Buttons component 1 collapsable={false} focusable={true} onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} @@ -178,6 +180,8 @@ exports[`DFI Action Buttons should match snapshot for Action Buttons component 1 collapsable={false} focusable={true} onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} @@ -261,6 +265,8 @@ exports[`DFI Action Buttons should match snapshot for Action Buttons component 1 collapsable={false} focusable={true} onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} @@ -344,6 +350,8 @@ exports[`DFI Action Buttons should match snapshot for Action Buttons component 1 collapsable={false} focusable={true} onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} onResponderGrant={[Function]} onResponderMove={[Function]} onResponderRelease={[Function]} @@ -427,6 +435,146 @@ exports[`DFI Action Buttons should match snapshot for Action Buttons component 1 collapsable={false} focusable={true} onClick={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "rgba(255, 255, 255, 1)", + "borderBottomLeftRadius": 9999, + "borderBottomRightRadius": 9999, + "borderTopLeftRadius": 9999, + "borderTopRightRadius": 9999, + "height": 60, + "justifyContent": "center", + "marginLeft": 10, + "marginRight": 10, + "opacity": 1, + "width": 60, + } + } + testID="convert_button" + > + + + + + + + + Convert + + + +