use tamagui toast messages

denniswon · Apr 5, 2024 · 975961e · 975961e
1 parent ac66848
commit 975961e
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 167 deletions.
diff --git a/app/App.tsx b/app/App.tsx
@@ -3,7 +3,6 @@ import {
   NativeModules,
   DeviceEventEmitter,
 } from 'react-native';
-import Toast from 'react-native-toast-message';
 import {
   DEFAULT_PNUMBER,
   DEFAULT_DOB,
@@ -18,10 +17,10 @@ import { Steps } from './src/utils/utils';
 import { startCameraScan } from './src/utils/cameraScanner';
 import { scan } from './src/utils/nfcScanner';
 import { mint } from './src/utils/minter';
-import { toastConfig } from './src/utils/toastConfig';
 import { Buffer } from 'buffer';
 import { YStack } from 'tamagui';
 import { prove } from './src/utils/prover';
+import { useToastController } from '@tamagui/toast';
 global.Buffer = Buffer;
 
 console.log('DEFAULT_PNUMBER', DEFAULT_PNUMBER);
@@ -49,6 +48,7 @@ function App(): JSX.Element {
     expiry_date: false,
     older_than: false,
   });
+  const toast = useToastController();
 
   const handleDisclosureChange = (field: string) => {
     setDisclosure(
@@ -86,6 +86,7 @@ function App(): JSX.Element {
       setDateOfBirth,
       setDateOfExpiry,
       setStep,
+      toast
     });
   };
 
@@ -97,6 +98,7 @@ function App(): JSX.Element {
       dateOfExpiry,
       setPassportData,
       setStep,
+      toast
     });
   };
 
@@ -109,6 +111,7 @@ function App(): JSX.Element {
       setGeneratingProof,
       setProofTime,
       setProof,
+      toast
     }, path);
   };
 
@@ -117,6 +120,7 @@ function App(): JSX.Element {
       proof,
       setStep,
       setMintText,
+      toast
     });
   };
 
@@ -149,7 +153,6 @@ function App(): JSX.Element {
           setMajority={setMajority}
         />
       </YStack>
-      <Toast config={toastConfig} />
     </YStack>
   );
 }

diff --git a/app/index.js b/app/index.js
@@ -7,7 +7,7 @@ import App from './App';
 import { name as appName } from './app.json';
 import { TamaguiProvider, createTamagui } from 'tamagui';
 import { config } from '@tamagui/config/v2-native'
-
+import { ToastProvider } from '@tamagui/toast';
 const tamaguiConfig = createTamagui(config)
 
 LogBox.ignoreLogs([
@@ -16,7 +16,9 @@ LogBox.ignoreLogs([
 
 const Root = () => (
   <TamaguiProvider config={tamaguiConfig}>
-    <App />
+    <ToastProvider swipeDirection="up">
+      <App />
+    </ToastProvider>
   </TamaguiProvider>
 
 );

diff --git a/app/package.json b/app/package.json
@@ -13,18 +13,20 @@
     "@babel/plugin-transform-private-methods": "^7.23.3",
     "@ethersproject/shims": "^5.7.0",
     "@react-native-community/clipboard": "^1.5.1",
-    "@tamagui/colors": "^1.92.1",
-    "@tamagui/config": "^1.92.1",
-    "@tamagui/core": "^1.92.1",
-    "@tamagui/lucide-icons": "^1.92.1",
-    "@tamagui/types": "^1.92.1",
+    "@tamagui/colors": "^1.94.3",
+    "@tamagui/config": "^1.94.3",
+    "@tamagui/core": "^1.94.3",
+    "@tamagui/lucide-icons": "^1.94.3",
+    "@tamagui/toast": "^1.94.3",
+    "@tamagui/types": "^1.94.3",
     "@zk-kit/imt": "https://gitpkg.now.sh/0xturboblitz/zk-kit/packages/imt?6d417675",
     "axios": "^1.6.3",
     "body-parser": "^1.20.2",
     "buffer": "^6.0.3",
     "burnt": "^0.12.2",
     "crypto-js": "^4.1.1",
     "ethers": "^6.11.0",
+    "expo-modules-core": "^1.11.12",
     "express": "^4.18.2",
     "import": "^0.0.6",
     "js-sha256": "^0.9.0",
@@ -36,8 +38,7 @@
     "react-native-canvas": "^0.1.39",
     "react-native-passport-reader": "^1.0.3",
     "react-native-svg": "13.4.0",
-    "react-native-toast-message": "^2.2.0",
-    "tamagui": "^1.92.1"
+    "tamagui": "^1.94.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -65,4 +66,4 @@
   "engines": {
     "node": ">=16"
   }
-}
+}
diff --git a/app/src/components/AppCard.tsx b/app/src/components/AppCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, YStack, XStack, H4, Button } from 'tamagui';
 import { ChevronRight } from '@tamagui/lucide-icons';
-import Toast from 'react-native-toast-message';
+import { useToastController } from '@tamagui/toast';
 import { borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
 
 
@@ -26,13 +26,15 @@ const AppCard: React.FC<AppCardProps> = ({
     icon,
     tags
 }) => {
+    const toast = useToastController();
+
     const showtoast = () => {
-        Toast.show({
-            type: 'info',
-            text1: '🚧 Coming soon ',
-            position: 'top',
-            topOffset: 80,
-        })
+        toast.show('🚧 Coming soon', {
+            message: 'This feature is under development.',
+            customData: {
+                type: 'info',
+            },
+        });
     }
 
     return (

diff --git a/app/src/components/ToastMessage.tsx b/app/src/components/ToastMessage.tsx
@@ -0,0 +1,26 @@
+import { Toast, useToastState } from '@tamagui/toast'
+import { YStack } from '@tamagui/stacks'
+import { greenColorDark, greenColorLight, redColorDark, redColorLight, blueColorDark, blueColorLight, textColor1 } from '../utils/colors'
+
+export const ToastMessage = () => {
+    const toast = useToastState();
+    if (!toast || toast.isHandledNatively) return null;
+    return (
+        <Toast
+            bg={toast.customData?.type === "success" ? greenColorDark : toast.customData?.type === "error" ? redColorDark : blueColorDark}
+            animation="100ms"
+            enterStyle={{ y: -20, opacity: 0 }}
+            exitStyle={{ y: -20, opacity: 0 }}
+            opacity={1}
+            x={0}
+            key={toast?.id}
+            duration={toast?.duration}
+
+        >
+            <YStack ai="center" jc="center">
+                <Toast.Title fow="bold" color={toast.customData?.type === "success" ? greenColorLight : toast.customData?.type === "error" ? redColorLight : blueColorLight}>{toast?.title}</Toast.Title>
+                <Toast.Description color={textColor1}>{toast.message}</Toast.Description>
+            </YStack>
+        </Toast>
+    );
+};
diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx
@@ -14,6 +14,8 @@ import { Keyboard } from 'react-native';
 import NFC_IMAGE from '../images/nfc.png'
 import { bgColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
 import MintScreen from './MintScreen';
+import { ToastViewport } from '@tamagui/toast';
+import { ToastMessage } from '../components/ToastMessage';
 
 interface MainScreenProps {
   onStartCameraScan: () => void;
@@ -345,6 +347,8 @@ const MainScreen: React.FC<MainScreenProps> = ({
         <XStack bc="#343434" h={1.2} />
       </YStack>
       <Tabs f={1} orientation="horizontal" flexDirection="column" defaultValue="scan" value={selectedTab} onValueChange={setSelectedTab}>
+        <ToastViewport flexDirection="column-reverse" top={15} right={0} left={0} />
+        <ToastMessage />
         <Tabs.Content value="scan" f={1}>
           <ScanScreen
             onStartCameraScan={onStartCameraScan}

diff --git a/app/src/screens/MintScreen.tsx b/app/src/screens/MintScreen.tsx
@@ -7,8 +7,8 @@ import ProofGrid from '../components/ProofGrid';
 import { App } from '../utils/AppClass';
 import { Platform } from 'react-native';
 import Clipboard from '@react-native-community/clipboard';
-import Toast from 'react-native-toast-message';
 import { blueColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
+import { useToastController } from '@tamagui/toast';
 
 const { ethers } = require('ethers');
 const fileName = "passport.arkzkey"
@@ -32,6 +32,7 @@ const MintScreen: React.FC<MintScreenProps> = ({
     proofTime,
     handleMint,
 }) => {
+    const toast = useToastController();
 
     const getTx = (input: string | null): string => {
         if (!input) return '';
@@ -49,12 +50,13 @@ const MintScreen: React.FC<MintScreenProps> = ({
 
     const copyToClipboard = (input: string) => {
         Clipboard.setString(input);
-        Toast.show({
-            type: 'success',
-            text1: '🖨️ Tx copied to clipboard',
-            position: 'top',
-            bottomOffset: 80,
+        toast.show('🖨️ Tx copied to clipboard', {
+            message: "",
+            customData: {
+                type: "success",
+            },
         })
+
     };
 
 
@@ -82,17 +84,19 @@ const MintScreen: React.FC<MintScreenProps> = ({
 
                 </YStack>
             ) : (
-                <YStack flex={1} justifyContent='center' alignItems='center' gap="$5">
-                    <XStack flex={1} />
+                <YStack flex={1} justifyContent='center' alignItems='center' gap="$5" pt="$8">
                     <ProofGrid proof={proof} />
 
-                    <YStack >
-                        <Text color={textColor1} fontWeight="bold" fontSize="$5" mt="$3">You just generated this Zero Knowledge proof  🎉</Text>
-                        <Text color={textColor2} fontSize="$5" mt="$2" textAlign='left'>You can now share this proof with the selected app.</Text>
-                        <Text color={textColor2} mt="$3">Proof generation duration: {formatDuration(proofTime)}</Text>
+                    <YStack mt="$6" >
+                        <Text color={textColor1} fontWeight="bold" fontSize="$5" mt="$3">ZK proof generated  🎉</Text>
+                        <Text color={textColor2} mt="$1">Proof generation duration: {formatDuration(proofTime)}</Text>
+
+                        <Text color={textColor2} fontSize="$5" mt="$4" textAlign='left'>You can now use this proof to mint a Soulbond token.</Text>
+                        <Text color={textColor2} fontSize="$4" mt="$2" textAlign='left'>Disclosed information will be displayed on SBT.</Text>
                     </YStack>
                     <XStack flex={1} />
-                    <Button borderColor={borderColor} borderWidth={1.3} disabled={step === Steps.TX_MINTING} borderRadius={100} onPress={handleMint} marginTop="$4" mb="$8" backgroundColor="#0090ff">
+
+                    <Button borderColor={borderColor} borderWidth={1.3} disabled={step === Steps.TX_MINTING} borderRadius={100} onPress={handleMint} marginTop="$4" mb="$4" backgroundColor="#0090ff">
                         {step === Steps.TX_MINTING ?
                             <XStack gap="$2">
                                 <Spinner />

diff --git a/app/src/screens/ProveScreen.tsx b/app/src/screens/ProveScreen.tsx
@@ -8,9 +8,9 @@ import USER from '../images/user.png'
 import { App } from '../utils/AppClass';
 import { Keyboard, Platform } from 'react-native';
 import { DEFAULT_ADDRESS } from '@env';
-import Toast from 'react-native-toast-message';
 import { blueColor, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors';
 import ENS from "../images/ens_mark_dao.png"
+import { useToastController } from '@tamagui/toast'
 
 const { ethers } = require('ethers');
 const fileName = "passport.arkzkey"
@@ -49,7 +49,7 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
 }) => {
   const [zkeyLoading, setZkeyLoading] = useState(false);
   const [zkeyLoaded, setZkeyLoaded] = useState(true);
-
+  const toast = useToastController()
 
 
   const downloadZkey = async () => {
@@ -69,11 +69,11 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
       setZkeyLoading(false);
     } catch (e: any) {
       console.log("Download not successful");
-      Toast.show({
-        type: 'error',
-        text1: `Error: ${e.message}`,
-        position: 'top',
-        bottomOffset: 80,
+      toast.show('Error', {
+        message: `${e.message}`,
+        customData: {
+          type: "error",
+        },
       })
       setZkeyLoading(false);
     }
@@ -108,22 +108,23 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
       if (inputValue != ens) {
         if (inputValue.endsWith('.eth')) {
           try {
-            Toast.show({
-              type: 'info',
-              text1: '🔭 Looking for ' + inputValue,
-              position: 'top',
-              bottomOffset: 80,
+            toast.show('🔭 Looking onchain', {
+              message: 'Looking for ' + inputValue,
+              customData: {
+                type: "info",
+              },
             })
+
             const resolvedAddress = await provider.resolveName(inputValue);
             if (resolvedAddress) {
               console.log("new address settled:" + resolvedAddress);
               setAddress(resolvedAddress);
               setEns(inputValue);
-              Toast.show({
-                type: 'success',
-                text1: '🎊 welcome ' + inputValue,
-                position: 'top',
-                bottomOffset: 90,
+              toast.show('welcome', {
+                message: 'Hi ' + inputValue,
+                customData: {
+                  type: "success",
+                },
               })
               if (hideData) {
                 console.log(maskString(address));
@@ -133,20 +134,19 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
                 // setInputValue(address);
               }
             } else {
-              Toast.show({
-                type: 'error',
-                text1: '❌  ' + inputValue + ' not found ',
-                position: 'top',
-                bottomOffset: 90,
+              toast.show('Error', {
+                message: inputValue + ' not found ',
+                customData: {
+                  type: "error",
+                },
               })
             }
           } catch (error) {
-            Toast.show({
-              type: 'error',
-              text1: 'Error resolving ENS name',
-              text2: 'Check input format or RPC provider',
-              position: 'top',
-              bottomOffset: 80,
+            toast.show('Error', {
+              message: 'Check input format or RPC provider or internet connection',
+              customData: {
+                type: "error",
+              },
             })
           }
         }