✨ app: enable kyc onboarding from add-funds

.changeset/stale-teams-say.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+✨ enable kyc onboarding from add-funds

cspell.json

@@ -211,7 +211,8 @@
         "montos",
         "refinancia",
         "refinanciamiento",
-        "refinanciar"
+        "refinanciar",
+        "verifícate"
       ]
     },
     {
@@ -229,6 +230,7 @@
         "asegurate",
         "biometría",
         "cambiá",
+        "completá",
         "conectate",
         "conectá",
         "conectás",
@@ -278,6 +280,7 @@
         "tocá",
         "usalo",
         "usás",
+        "verificate",
         "verificá"
       ]
     },

src/components/add-funds/AddFunds.tsx

@@ -5,10 +5,12 @@ import { Pressable } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 
 import { ArrowLeft, Banknote, Blocks, CircleHelp, Info, Wallet } from "@tamagui/lucide-icons";
+import { useToastController } from "@tamagui/toast";
 import { ScrollView, XStack, YStack } from "tamagui";
 
 import { useQuery } from "@tanstack/react-query";
 import { isAddress } from "viem";
+import { base } from "viem/chains";
 
 import domain from "@exactly/common/domain";
 import chain from "@exactly/common/generated/chain";
@@ -20,22 +22,30 @@ import { presentArticle } from "../../utils/intercom";
 import queryClient, { type AuthMethod } from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import { getKYCStatus, getRampProviders } from "../../utils/server";
+import useBeginKYC from "../../utils/useBeginKYC";
 import ChainLogo from "../shared/ChainLogo";
+import InfoAlert from "../shared/InfoAlert";
 import SafeView from "../shared/SafeView";
 import Skeleton from "../shared/Skeleton";
 import Text from "../shared/Text";
 import View from "../shared/View";
 
+import type { KYCStatus } from "../../utils/server";
 import type { Credential } from "@exactly/common/validation";
 
 export default function AddFunds() {
   const { type } = useLocalSearchParams();
   const router = useRouter();
+  const toast = useToastController();
   const { t } = useTranslation();
   const { data: credential } = useQuery<Credential>({ queryKey: ["credential"] });
   const ownerAccount = credential && isAddress(credential.credentialId) ? credential.credentialId : undefined;
 
   const { data: method } = useQuery<AuthMethod>({ queryKey: ["method"] });
+  const { data: kycStatus } = useQuery<KYCStatus>({ queryKey: ["kyc", "status"] });
+  const beginKYC = useBeginKYC();
+  const isKYCApproved =
+    !!kycStatus && "code" in kycStatus && (kycStatus.code === "ok" || kycStatus.code === "legacy kyc");
 
   const { data: countryCode } = useQuery({
     queryKey: ["user", "country"],
@@ -135,21 +145,65 @@ export default function AddFunds() {
                     router.push({ pathname: "/add-funds", params: { type: "crypto" } });
                   }}
                 />
-                {hasFiat !== false && (
+                {hasFiat !== false && chain.id !== base.id && (
                   <AddFundsOption
                     icon={<Banknote size={24} color="$iconBrandDefault" />}
                     title={t("Bank transfers")}
                     subtitle={t("From a bank account")}
-                    disabled={!hasFiat}
+                    disabled={(isKYCApproved && !hasFiat) || beginKYC.isPending}
+                    loading={beginKYC.isPending}
                     onPress={() => {
-                      router.push({ pathname: "/add-funds", params: { type: "fiat" } });
+                      if (isKYCApproved) {
+                        router.push({ pathname: "/add-funds", params: { type: "fiat" } });
+                        return;
+                      }
+                      beginKYC.mutate(undefined, {
+                        onSuccess(result) {
+                          if (result.status === "cancel") return;
+                          const approved =
+                            "code" in result.kyc && (result.kyc.code === "ok" || result.kyc.code === "legacy kyc");
+                          if (approved) {
+                            queryClient.invalidateQueries({ queryKey: ["ramp", "providers"] }).catch(reportError);
+                            router.push({ pathname: "/add-funds", params: { type: "fiat" } });
+                          } else {
+                            router.replace("/(main)/(home)");
+                          }
+                        },
+                        onError(error) {
+                          toast.show(t("Error verifying identity"), {
+                            native: true,
+                            duration: 1000,
+                            burntOptions: { haptic: "error", preset: "error" },
+                          });
+                          reportError(error);
+                        },
+                      });
                     }}
                   />
                 )}
               </>
             )}
             {type === "crypto" && (
               <>
+                {!isKYCApproved && chain.id !== base.id && (
+                  <InfoAlert
+                    title={t("Complete a quick identity check to access more networks.")}
+                    actionText={t("Get verified")}
+                    onPress={() => {
+                      beginKYC.mutate(undefined, {
+                        onError(error) {
+                          toast.show(t("Error verifying identity"), {
+                            native: true,
+                            duration: 1000,
+                            burntOptions: { haptic: "error", preset: "error" },
+                          });
+                          reportError(error);
+                        },
+                      });
+                    }}
+                    loading={beginKYC.isPending}
+                  />
+                )}
                 {method === "siwe" && (
                   <AddFundsOption
                     icon={<Wallet width={40} height={40} color="$iconBrandDefault" />}
@@ -175,6 +229,11 @@ export default function AddFunds() {
                 {renderProviders("crypto")}
               </>
             )}
+            {type === "fiat" && countryCode && isPending && (
+              <View justifyContent="center" alignItems="center">
+                <Skeleton width="100%" height={82} />
+              </View>
+            )}
             {type === "fiat" && providers && (
               <YStack gap="$s5">
                 {(["manteca", "bridge"] as const).map((key) => {

src/components/add-funds/AddFundsOption.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { ChevronRight } from "@tamagui/lucide-icons";
-import { XStack, YStack } from "tamagui";
+import { Spinner, XStack, YStack } from "tamagui";
 
 import Text from "../shared/Text";
 import View from "../shared/View";
@@ -11,10 +11,12 @@ export default function AddFundsOption({
   title,
   subtitle,
   disabled,
+  loading,
   onPress,
 }: {
   disabled?: boolean;
   icon: React.ReactElement;
+  loading?: boolean;
   onPress: () => void;
   subtitle: string;
   title: string;
@@ -54,7 +56,11 @@ export default function AddFundsOption({
           </YStack>
         </XStack>
         <View>
-          <ChevronRight size={24} color="$uiBrandSecondary" />
+          {loading ? (
+            <Spinner size="small" color="$uiBrandSecondary" />
+          ) : (
+            <ChevronRight size={24} color="$uiBrandSecondary" />
+          )}
         </View>
       </XStack>
     </YStack>

src/components/card/Card.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Pressable, RefreshControl } from "react-native";
 
@@ -22,7 +22,6 @@ import SpendingLimits from "./SpendingLimits";
 import VerificationFailure from "./VerificationFailure";
 import { presentArticle } from "../../utils/intercom";
 import openBrowser from "../../utils/openBrowser";
-import { cancelKYC, startKYC } from "../../utils/persona";
 import queryClient from "../../utils/queryClient";
 import reportError from "../../utils/reportError";
 import {
@@ -35,6 +34,7 @@ import {
 } from "../../utils/server";
 import useAccount from "../../utils/useAccount";
 import useAsset from "../../utils/useAsset";
+import useBeginKYC from "../../utils/useBeginKYC";
 import useMarkets from "../../utils/useMarkets";
 import useTabPress from "../../utils/useTabPress";
 import InfoAlert from "../shared/InfoAlert";
@@ -58,7 +58,6 @@ export default function Card() {
   const [disclaimerShown, setDisclaimerShown] = useState(false);
   const [verificationFailureShown, setVerificationFailureShown] = useState(false);
 
-  useEffect(() => cancelKYC, []);
   const { data: cardDetailsOpen } = useQuery<boolean>({ queryKey: ["card-details-open"] });
   const [spendingLimitsOpen, setSpendingLimitsOpen] = useState(false);
   const { data: hidden } = useQuery<boolean>({ queryKey: ["settings", "sensitive"] });
@@ -130,6 +129,8 @@ export default function Card() {
     refresh();
   });
 
+  const beginKYC = useBeginKYC();
+
   const {
     mutateAsync: revealCard,
     isPending: isRevealing,
@@ -141,7 +142,7 @@ export default function Card() {
         router.push("/(main)/getting-started");
         return;
       }
-      if (isRevealing) return;
+      if (isRevealing || beginKYC.isPending) return;
       try {
         const { data, error } = await refetchCard();
         if (error && error instanceof APIError && error.code === 500) throw error;
@@ -174,16 +175,25 @@ export default function Card() {
           return;
         }
       }
-      try {
-        await startKYC();
-      } catch (error) {
-        toast.show(t("An error occurred. Please try again later."), {
-          native: true,
-          duration: 1000,
-          burntOptions: { haptic: "error", preset: "error" },
-        });
-        reportError(error);
-      }
+      beginKYC.mutate(undefined, {
+        onSuccess(result) {
+          if (result.status === "cancel") return;
+          const approved = "code" in result.kyc && (result.kyc.code === "ok" || result.kyc.code === "legacy kyc");
+          if (approved) setDisclaimerShown(true);
+        },
+        onError(error) {
+          if (error instanceof APIError && error.text === "bad kyc") {
+            setVerificationFailureShown(true);
+            return;
+          }
+          toast.show(t("An error occurred. Please try again later."), {
+            native: true,
+            duration: 1000,
+            burntOptions: { haptic: "error", preset: "error" },
+          });
+          reportError(error);
+        },
+      });
     },
   });
 
@@ -294,10 +304,10 @@ export default function Card() {
                 )}
                 <PluginUpgrade />
                 <ExaCard
-                  revealing={isRevealing || isGeneratingCard}
+                  revealing={isRevealing || isGeneratingCard || beginKYC.isPending}
                   frozen={cardDetails?.status === "FROZEN"}
                   onPress={() => {
-                    if (isRevealing || isGeneratingCard) return;
+                    if (isRevealing || isGeneratingCard || beginKYC.isPending) return;
                     revealCard().catch(reportError);
                   }}
                 />

src/components/getting-started/GettingStarted.tsx

@@ -5,6 +5,7 @@ import { Pressable } from "react-native";
 import { useRouter } from "expo-router";
 
 import { ArrowDownToLine, ArrowLeft, Check, IdCard } from "@tamagui/lucide-icons";
+import { useToastController } from "@tamagui/toast";
 import { ScrollView, XStack, YStack } from "tamagui";
 
 import { useQuery } from "@tanstack/react-query";
@@ -141,15 +142,28 @@ export default function GettingStarted() {
 function CurrentStep({ hasKYC, isDeployed }: { hasKYC: boolean; isDeployed: boolean }) {
   const { t } = useTranslation();
   const router = useRouter();
+  const toast = useToastController();
   const { currentStep, completedSteps } = useOnboardingSteps({ hasKYC, isDeployed });
-  const { mutate: beginKYC } = useBeginKYC();
+  const beginKYC = useBeginKYC();
   function handleAction() {
     switch (currentStep?.id) {
       case "add-funds":
-        router.push("/add-funds/add-crypto");
+        router.push("/add-funds");
         break;
       case "verify-identity":
-        beginKYC();
+        beginKYC.mutate(undefined, {
+          onSuccess(result) {
+            if (result.status !== "cancel") router.replace("/(main)/(home)");
+          },
+          onError(error) {
+            toast.show(t("Error verifying identity"), {
+              native: true,
+              duration: 1000,
+              burntOptions: { haptic: "error", preset: "error" },
+            });
+            reportError(error);
+          },
+        });
         break;
     }
   }

src/components/home/GettingStarted.tsx

@@ -5,8 +5,10 @@ import { PixelRatio, Pressable } from "react-native";
 import { useRouter } from "expo-router";
 
 import { ArrowRight, ChevronRight, IdCard } from "@tamagui/lucide-icons";
+import { useToastController } from "@tamagui/toast";
 import { Spinner, XStack, YStack } from "tamagui";
 
+import reportError from "../../utils/reportError";
 import useBeginKYC from "../../utils/useBeginKYC";
 import useOnboardingSteps from "../../utils/useOnboardingSteps";
 import Text from "../shared/Text";
@@ -15,16 +17,26 @@ import View from "../shared/View";
 export default function GettingStarted({ isDeployed, hasKYC }: { hasKYC: boolean; isDeployed: boolean }) {
   const router = useRouter();
   const { t } = useTranslation();
+  const toast = useToastController();
   const { currentStep, completedSteps } = useOnboardingSteps({ hasKYC, isDeployed });
   const { mutate: beginKYC, isPending } = useBeginKYC();
   function handleStepPress() {
     if (isPending) return;
     switch (currentStep?.id) {
       case "add-funds":
-        router.push("/add-funds/add-crypto");
+        router.push("/add-funds");
         break;
       case "verify-identity":
-        beginKYC();
+        beginKYC(undefined, {
+          onError(error) {
+            toast.show(t("Error verifying identity"), {
+              native: true,
+              duration: 1000,
+              burntOptions: { haptic: "error", preset: "error" },
+            });
+            reportError(error);
+          },
+        });
         break;
     }
   }