✨ app: redesign send receiver screen

Author: dieguezguille

.changeset/red-pandas-delete.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+🚧 delete recent send contacts

src/components/send-funds/Contact.tsx

@@ -1,19 +1,22 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Linking, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { CameraView, useCameraPermissions } from "expo-camera";
-import { useFocusEffect, useRouter } from "expo-router";
+import { useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
 
 import { ArrowLeft, BoxSelect, SwitchCamera } from "@tamagui/lucide-icons";
 import { useWindowDimensions, XStack, YStack } from "tamagui";
 
-import { parse, safeParse } from "valibot";
-import { zeroAddress } from "viem";
+import { ChainType } from "@lifi/sdk";
+import { useQuery } from "@tanstack/react-query";
+import { safeParse } from "valibot";
 
-import { Address } from "@exactly/common/validation";
+import chain from "@exactly/common/generated/chain";
 
+import { lifiChainsOptions } from "../../utils/lifi";
+import receiverSchema from "../../utils/receiverSchema";
 import reportError from "../../utils/reportError";
 import IconButton from "../shared/IconButton";
 import Button from "../shared/StyledButton";
@@ -25,20 +28,33 @@ export default function QR() {
   const { height, width } = useWindowDimensions();
 
   const router = useRouter();
+  const { asset, fromChain, toChain, toToken, amount, fromAmount } = useLocalSearchParams();
+  const destination = typeof toChain === "string" ? Number(toChain) : chain.id;
+  const { data: chains } = useQuery(lifiChainsOptions);
+  const destinationChain = chains?.find((item) => item.id === destination);
+  const chainType = destinationChain?.chainType ?? (destination === chain.id ? ChainType.EVM : undefined);
 
   const [active, setActive] = useState(true);
+  const [invalid, setInvalid] = useState(false);
+  const handledRef = useRef(false);
   const [cameraFacing, setCameraFacing] = useState<"back" | "front">("back");
   const [permission, requestPermission] = useCameraPermissions();
   const { t } = useTranslation();
 
   useFocusEffect(
     useCallback(() => {
+      handledRef.current = false;
       setActive(true);
       return () => {
         setActive(false);
       };
     }, []),
   );
+  useEffect(() => {
+    if (!invalid) return;
+    const timer = setTimeout(() => setInvalid(false), 2000);
+    return () => clearTimeout(timer);
+  }, [invalid]);
 
   if (!permission) return <View fullScreen backgroundColor="$backgroundSoft" />;
   if (!permission.granted) {
@@ -62,7 +78,7 @@ export default function QR() {
             }}
             gap="$s2"
           >
-            <ArrowLeft size={24} color="white" />
+            <ArrowLeft size={24} color="$uiNeutralPrimary" />
             <Text headline>{t("Back")}</Text>
           </XStack>
           <View padded>
@@ -106,7 +122,7 @@ export default function QR() {
           }}
           gap="$s2"
         >
-          <ArrowLeft size={24} color="white" />
+          <ArrowLeft size={24} color="$uiNeutralPrimary" />
           <Text headline>{t("Back")}</Text>
         </XStack>
         <View padded>
@@ -141,11 +157,18 @@ export default function QR() {
       {active && (
         <CameraView
           barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
-          onBarcodeScanned={({ data: receiver }) => {
-            const result = safeParse(Address, receiver);
-            if (!result.success) return;
-            if (result.output === parse(Address, zeroAddress)) return;
-            router.dismissTo({ pathname: "/send-funds/asset", params: { receiver: result.output } });
+          onBarcodeScanned={({ data }) => {
+            if (chainType === undefined || handledRef.current) return;
+            const result = safeParse(receiverSchema(chainType), scanned(data));
+            if (!result.success) {
+              setInvalid(true);
+              return;
+            }
+            handledRef.current = true;
+            router.dismissTo({
+              pathname: "/send-funds/receiver",
+              params: { receiver: result.output, asset, fromChain, toChain, toToken, amount, fromAmount },
+            });
           }}
           facing={cameraFacing}
           style={styles.cameraView}
@@ -154,6 +177,21 @@ export default function QR() {
       <View position="absolute" fullScreen justifyContent="center" alignItems="center">
         <BoxSelect size={Math.min(width, height) * 0.5} color="white" />
       </View>
+      {invalid && (
+        <View
+          position="absolute"
+          bottom={bottom + 72}
+          alignSelf="center"
+          backgroundColor="$interactiveBaseErrorDefault"
+          borderRadius="$r3"
+          paddingHorizontal="$s4"
+          paddingVertical="$s3"
+        >
+          <Text emphasized footnote color="$interactiveOnBaseErrorDefault">
+            {t("Invalid {{chain}} address", { chain: (destinationChain ?? chain).name })}
+          </Text>
+        </View>
+      )}
       <Button
         primary
         minHeight="auto"
@@ -189,4 +227,11 @@ export default function QR() {
   );
 }
 
+function scanned(data: string) {
+  const [locator = "", query] = data.split("?");
+  const [target = "", action] = locator.slice(locator.lastIndexOf(":") + 1).split("/");
+  if (action === undefined) return target.replace(/^pay-/, "").split("@")[0] ?? "";
+  return action === "transfer" ? (new URLSearchParams(query).get("address") ?? "") : "";
+}
+
 const styles = StyleSheet.create({ cameraView: { flex: 1 } });