diff --git a/packages/mobile/app/settings/index.tsx b/packages/mobile/app/settings/index.tsx index aa0f6e5550..94847fd198 100644 --- a/packages/mobile/app/settings/index.tsx +++ b/packages/mobile/app/settings/index.tsx @@ -1,13 +1,16 @@ import { Stack } from "expo-router"; import { router } from "expo-router"; import React from "react"; -import { ScrollView, View } from "react-native"; +import { ScrollView, Switch, View } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; +import { useShallow } from "zustand/react/shallow"; import { RouteHeader } from "~/components/route-header"; import { SettingsGroup } from "~/components/settings/settings-group"; import { SettingsItem } from "~/components/settings/settings-item"; import { Text } from "~/components/ui/text"; +import { Colors } from "~/constants/theme-colors"; +import { useSettingsStore } from "~/stores/settings"; export default function SettingsScreen() { return ( @@ -82,6 +85,7 @@ export default function SettingsScreen() { title="Face ID" onPress={() => router.push("/settings/face-id")} /> + {/* {}} /> {}} /> */} @@ -89,3 +93,25 @@ export default function SettingsScreen() { ); } + +const PreviewAssetsToggle: React.FC = () => { + const { showUnverifiedAssets, setShowUnverifiedAssets } = useSettingsStore( + useShallow((state) => ({ + showUnverifiedAssets: state.showUnverifiedAssets, + setShowUnverifiedAssets: state.setShowUnverifiedAssets, + })) + ); + + return ( + + } + /> + ); +}; diff --git a/packages/mobile/components/modals/unverified-asset-modal.tsx b/packages/mobile/components/modals/unverified-asset-modal.tsx new file mode 100644 index 0000000000..d53ebe2096 --- /dev/null +++ b/packages/mobile/components/modals/unverified-asset-modal.tsx @@ -0,0 +1,108 @@ +import { + BottomSheetBackdrop, + BottomSheetBackdropProps, + BottomSheetModal, + BottomSheetView, +} from "@gorhom/bottom-sheet"; +import { forwardRef, useCallback } from "react"; +import { StyleSheet } from "react-native"; + +import { AssetImage } from "~/components/ui/asset-image"; +import { Button } from "~/components/ui/button"; +import { Text } from "~/components/ui/text"; +import { Colors } from "~/constants/theme-colors"; + +interface UnverifiedAssetModalProps { + onActivate: () => void; + assetSymbol: string; + assetImageUrl?: string; +} + +export const UnverifiedAssetModal = forwardRef< + BottomSheetModal, + UnverifiedAssetModalProps +>(({ onActivate, assetSymbol, assetImageUrl }, ref) => { + return ( + ( + + ), + [] + )} + backgroundStyle={styles.bottomSheetBackground} + handleIndicatorStyle={styles.indicator} + > + + {assetImageUrl && ( + + )} + + Activate unverified assets + + + {assetSymbol} is an unverified token. Do you wish to activate it? Be + sure to research thoroughly before trading. + + + You can always deactivate this setting in the settings modal. + +