recovery code ui

packages/react-native/package.json

@@ -30,6 +30,7 @@
     "@magic-sdk/provider": "17.2.0",
     "@magic-sdk/react-native-bare": "^18.5.0",
     "@paperxyz/embedded-wallet-service-sdk": "^1.2.4",
+    "@react-native-community/checkbox": "^0.5.16",
     "@shopify/restyle": "^2.4.2",
     "@tanstack/react-query": "^4.33.0",
     "@thirdweb-dev/chains": "workspace:*",
@@ -82,15 +83,15 @@
     "typescript": "^5.1.6"
   },
   "optionalDependencies": {
+    "amazon-cognito-identity-js": "^6.3.3",
+    "react-native-aes-gcm-crypto": "^0.2.2",
     "react-native-camera": "^4.2.1",
     "react-native-device-info": "10.6.0",
-    "react-native-safe-area-context": "4.5.3",
-    "react-native-webview": "12.1.0",
-    "amazon-cognito-identity-js": "^6.3.3",
+    "react-native-inappbrowser-reborn": "^3.7.0",
     "react-native-quick-base64": "^2.0.7",
     "react-native-quick-crypto": "^0.6.1",
-    "react-native-aes-gcm-crypto": "^0.2.2",
-    "react-native-inappbrowser-reborn": "^3.7.0"
+    "react-native-safe-area-context": "4.5.3",
+    "react-native-webview": "12.1.0"
   },
   "peerDependencies": {
     "ethers": ">=5.5.1 <6",

packages/react-native/src/evm/wallets/connectors/embedded-wallet/embedded-connector.ts

@@ -45,7 +45,7 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
     }
 
     switch (options?.loginType) {
-      case "headless_google_oauth":
+      case "google_oauth":
         {
           await socialLogin(
             {
@@ -56,7 +56,7 @@ export class EmbeddedWalletConnector extends Connector<EmbeddedWalletConnectionA
           );
         }
         break;
-      case "headless_email_otp_verification": {
+      case "email_otp_verification": {
         await this.validateEmailOtp(options.otp);
         break;
       }

packages/react-native/src/evm/wallets/connectors/embedded-wallet/types.ts

@@ -56,11 +56,11 @@ export type EmbeddedWalletConnectionArgs = {
   chainId?: number;
 } & (
   | {
-      loginType: "headless_google_oauth";
+      loginType: "google_oauth";
       redirectUrl: string;
     }
   | {
-      loginType: "headless_email_otp_verification";
+      loginType: "email_otp_verification";
       email: string;
       otp: string;
     }

packages/react-native/src/evm/wallets/wallets/embedded/AccountRecovery.tsx

@@ -1,31 +1,26 @@
-import { useAddress } from "@thirdweb-dev/react-core";
 import React, { useState } from "react";
 import { ActivityIndicator } from "react-native";
 import { ConnectWalletHeader } from "../../../components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";
 import { Box, BaseButton, Text, TextInput } from "../../../components/base";
-import { shortenWalletAddress } from "../../../utils/addresses";
 import { useGlobalTheme } from "../../../providers/ui-context-provider";
-import { PasswordInput } from "../../../components/PasswordInput";
 
 export type EnterPasswordProps = {
   goBack: () => void;
   close: () => void;
-  email: string;
 };
 
-export const AccountRecovery = ({
-  close,
-  goBack,
-  email,
-}: EnterPasswordProps) => {
+export const AccountRecovery = ({ close, goBack }: EnterPasswordProps) => {
   const theme = useGlobalTheme();
   const [errorMessage, setErrorMessage] = useState<string>();
-  const [checkingPass, setCheckingPass] = useState<boolean>(false);
-  const [password, setPassword] = useState<string>("");
+  const [checkingRecoveryCode, setCheckingRecoveryCode] =
+    useState<boolean>(false);
+  const [recoveryCode, setRecoveryCode] = useState<string>("");
 
-  const onNextPress = async () => {};
-
-  const onForgotPress = () => {};
+  const onNextPress = async () => {
+    setCheckingRecoveryCode(true);
+    // Call enter recovery code
+    setErrorMessage("test");
+  };
 
   return (
     <Box marginHorizontal="xl">
@@ -41,18 +36,17 @@ export const AccountRecovery = ({
       />
       <TextInput
         textInputProps={{
-          placeholder: "Enter your email address",
+          placeholder: "Enter your recovery code",
           placeholderTextColor: theme.colors.textSecondary,
-          onChangeText: setEmailInput,
+          onChangeText: setRecoveryCode,
           style: {
             fontSize: 14,
             color: theme.colors.textPrimary,
             lineHeight: 16,
             padding: 0,
             flex: 1,
           },
-          value: emailInput,
-          keyboardType: "email-address",
+          value: recoveryCode,
           returnKeyType: "done",
           autoCapitalize: "none",
           autoCorrect: false,
@@ -78,7 +72,7 @@ export const AccountRecovery = ({
         height={theme.textVariants.bodySmallSecondary.fontSize}
         onPress={onNextPress}
       >
-        {checkingPass ? (
+        {checkingRecoveryCode ? (
           <ActivityIndicator size={"small"} color={theme.colors.linkPrimary} />
         ) : (
           <Text variant="bodySmallSecondary" color="linkPrimary">

packages/react-native/src/evm/wallets/wallets/embedded/BackupAccount.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import { ConnectWalletHeader } from "../../../components/ConnectWalletFlow/ConnectingWallet/ConnectingWalletHeader";
+import { Box, BaseButton, Text, Toast } from "../../../components/base";
+import { useGlobalTheme } from "../../../providers/ui-context-provider";
+import CopyIcon from "../../../assets/copy";
+import CheckBox from "@react-native-community/checkbox";
+import * as Clipboard from "expo-clipboard";
+
+export type EnterPasswordProps = {
+  goBack: () => void;
+  close: () => void;
+};
+
+export const AccountRecovery = ({ close, goBack }: EnterPasswordProps) => {
+  const theme = useGlobalTheme();
+  const [toggleCheckBox, setToggleCheckBox] = useState(false);
+  const [errorMessage] = useState<string>();
+  const [codeCopied, setCodeCopied] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      if (codeCopied) {
+        setCodeCopied(false);
+      }
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [codeCopied]);
+
+  const onNextPress = async () => {};
+
+  const onCodeCopyPress = async (code: string) => {
+    console.log("code", code);
+
+    await Clipboard.setStringAsync(code);
+    setCodeCopied(true);
+  };
+
+  const codes = ["testing", "testing2", "testing3", "testing4", "testing5"];
+
+  return (
+    <Box marginHorizontal="xl">
+      <ConnectWalletHeader
+        middleContent={<Text variant="header">Backup your account</Text>}
+        subHeaderText={
+          "Copy or download these codes and keep them safe. You will need these to recover access to your account if you forget your password. These have also been sent to the email address associated with your account"
+        }
+        onBackPress={goBack}
+        onClose={close}
+      />
+      <Box mt="sm" flexDirection="column" marginTop="xl" mb="md">
+        {codes.map((code) => (
+          <BaseButton
+            key={code}
+            mt="xs"
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="space-between"
+            borderColor="border"
+            borderWidth={1}
+            borderRadius="md"
+            onPress={() => {
+              onCodeCopyPress(code);
+            }}
+            p="md"
+          >
+            <Text variant="bodySmall">{code}</Text>
+            <CopyIcon width={14} height={14} color={theme.colors.iconPrimary} />
+          </BaseButton>
+        ))}
+      </Box>
+
+      {errorMessage ? (
+        <Text variant="error" numberOfLines={1}>
+          {errorMessage}
+        </Text>
+      ) : (
+        <Box height={20} />
+      )}
+      <Box flex={1} flexDirection="row" justifyContent="flex-end">
+        <BaseButton>
+          <CheckBox
+            disabled={false}
+            value={toggleCheckBox}
+            onValueChange={(newValue) => setToggleCheckBox(newValue)}
+          />
+          <Text variant="bodySmallSecondary" color="linkPrimary">
+            Learn More
+          </Text>
+        </BaseButton>
+        <BaseButton
+          mt="sm"
+          flexDirection="row"
+          alignItems="center"
+          height={theme.textVariants.bodySmallSecondary.fontSize}
+          onPress={onNextPress}
+        >
+          <Text variant="bodySmallSecondary" color="linkPrimary">
+            Next
+          </Text>
+        </BaseButton>
+      </Box>
+      {codeCopied === true ? (
+        <Toast text={"Address copied to clipboard"} />
+      ) : null}
+    </Box>
+  );
+};

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedConnectionUI.tsx

@@ -65,7 +65,7 @@ export const EmbeddedConnectionUI: React.FC<ConnectUIProps<EmbeddedWallet>> = ({
       setTimeout(() => {
         (selectionData.emailWallet as EmbeddedWallet)
           .connect({
-            loginType: "headless_email_otp_verification",
+            loginType: "email_otp_verification",
             otp,
             email: selectionData.email,
           })

packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSocialConnection.tsx

@@ -24,7 +24,7 @@ export const EmbeddedSocialConnection: React.FC<
     setTimeout(() => {
       (selectionData.emailWallet as EmbeddedWallet)
         .connect({
-          loginType: "headless_google_oauth",
+          loginType: "google_oauth",
           redirectUrl: selectionData.oauthOptions?.redirectUrl,
         })
         .then(async (response) => {