updates

packages/app-mobile/src/Images.ts

@@ -1,6 +1,12 @@
 const Images = {
   solanaLogo: require("../assets/blockchains/solana.png"),
   ethereumLogo: require("../assets/blockchains/ethereum.png"),
+  logoAvalanche: require("./images/logo-avalanche.png"),
+  logoBsc: require("./images/logo-bsc.png"),
+  logoCosmos: require("./images/logo-cosmos.png"),
+  logoEthereum: require("./images/logo-ethereum.png"),
+  logoPolygon: require("./images/logo-polygon.png"),
+  logoSolana: require("./images/logo-solana.png"),
 };
 
 export default Images;

packages/app-mobile/src/components/MnemonicInput.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { Alert, Pressable, View, Text } from "react-native";
+import { Alert, Pressable } from "react-native";
 
 import {
   UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_CREATE,
@@ -59,8 +59,13 @@ export function MnemonicInput({ readOnly, onComplete }: MnemonicInputProps) {
 
   const onChange = async (words: string[]) => {
     setMnemonicWords(words);
-    if (words.length > 11) {
+    if (readOnly) {
       const mnemonic = mnemonicWords.map((f) => f.trim()).join(" ");
+      onComplete({ isValid: true, mnemonic });
+      return;
+    }
+
+    if (words.length > 11) {
       const isValid = words.length > 11 ? await isValidAsync(mnemonic) : false;
       onComplete({ isValid, mnemonic });
     }

packages/app-mobile/src/navigation/AccountSettingsNavigator.tsx

@@ -61,6 +61,7 @@ import {
   AddWalletSelectBlockchain,
   AddWalletCreateOrImportScreen,
   AddWalletAdvancedImportScreen,
+  ImportFromMnemonicScreen,
 } from "~screens/Unlocked/Settings/AddConnectWalletScreen";
 import { ChangePasswordScreen } from "~screens/Unlocked/Settings/ChangePasswordScreen";
 import { PreferencesScreen } from "~screens/Unlocked/Settings/PreferencesScreen";
@@ -351,6 +352,11 @@ export function AccountSettingsNavigator(): JSX.Element {
           name="AddWalletAdvancedImport"
           component={AddWalletAdvancedImportScreen}
         />
+        <Stack.Screen
+          options={{ title: "Recovery Phrase" }}
+          name="ImportFromMnemonic"
+          component={ImportFromMnemonicScreen}
+        />
       </Stack.Group>
       <Stack.Group
         screenOptions={{ presentation: "modal", headerShown: false }}

packages/app-mobile/src/navigation/OnboardingNavigator.tsx

@@ -12,8 +12,6 @@ import {
   View,
   Platform,
   KeyboardAvoidingView,
-  Pressable,
-  Text,
   DevSettings,
   StyleProp,
   ViewStyle,
@@ -33,8 +31,6 @@ import {
   DISCORD_INVITE_LINK,
   toTitleCase,
   TWITTER_LINK,
-  UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_CREATE,
-  UI_RPC_METHOD_KEYRING_VALIDATE_MNEMONIC,
   XNFT_GG_LINK,
   PrivateKeyWalletDescriptor,
 } from "@coral-xyz/common";
@@ -78,16 +74,13 @@ import {
   FullScreenLoading,
   Header,
   Margin,
-  MnemonicInputFields,
   PrimaryButton,
   SecondaryButton,
   LinkButton,
   Screen,
   StyledText,
   SubtextParagraph,
   WelcomeLogoHeader,
-  CopyButton,
-  PasteButton,
   EmptyState,
   CallToAction,
 } from "~components/index";
@@ -661,8 +654,6 @@ function OnboardingMnemonicInputScreen({
   const { action } = onboardingData;
   const readOnly = action === "create";
 
-  const isButtonEnabled = readOnly ? checked : isValid;
-
   const subtitle = readOnly
     ? "This is the only way to recover your account if you lose your device. Write it down and store it in a safe place."
     : "Enter your 12 or 24-word secret recovery mnemonic to add an existing wallet.";
@@ -680,6 +671,9 @@ function OnboardingMnemonicInputScreen({
     }
   };
 
+  const isButtonDisabled =
+    (readOnly && !checked) || (!readOnly && !isValid && !checked);
+
   return (
     <OnboardingScreen title="Secret recovery phrase" subtitle={subtitle}>
       <YStack f={1}>
@@ -694,6 +688,7 @@ function OnboardingMnemonicInputScreen({
                 value={checked}
                 onPress={() => {
                   setChecked(!checked);
+                  setIsValid(readOnly && !checked);
                 }}
               />
             </Margin>
@@ -702,8 +697,11 @@ function OnboardingMnemonicInputScreen({
         {maybeRender(Boolean(error), () => (
           <ErrorMessage for={{ message: error }} />
         ))}
+        <StyledText>
+          {JSON.stringify({ isValid, checked, error, readOnly })}
+        </StyledText>
         <PrimaryButton
-          disabled={!isButtonEnabled}
+          disabled={isButtonDisabled}
           label={action === "create" ? "Next" : "Import"}
           onPress={() => {
             if (isValid) {

packages/app-mobile/src/screens/Unlocked/Settings/AddConnectWalletScreen.tsx

@@ -54,6 +54,7 @@ import { WalletListItem } from "~screens/Unlocked/EditWalletsScreen";
 import { SettingsList } from "./components/SettingsMenuList";
 import { IconPushDetail } from "./components/SettingsRow";
 
+import { MnemonicInput } from "~src/components/MnemonicInput";
 import { useSession } from "~src/lib/SessionProvider";
 
 export function AddWalletPrivacyDisclaimer({ navigation }): JSX.Element {
@@ -280,3 +281,51 @@ export function AddWalletAdvancedImportScreen({ navigation, route }) {
     </Screen>
   );
 }
+
+export function ImportFromMnemonicScreen({ navigation, route }): JSX.Element {
+  const insets = useSafeAreaInsets();
+  const { blockchain, keyringExists, inputMnemonic } = route.params;
+  const [isValid, setIsValid] = useState(false);
+
+  const onComplete = ({
+    isValid,
+    mnemonic,
+  }: {
+    isValid: boolean;
+    mnemonic: string;
+  }) => {
+    setIsValid(isValid);
+    if (isValid) {
+      console.log(mnemonic);
+    }
+  };
+
+  return (
+    <Screen jc="space-between" style={{ marginBottom: insets.bottom }}>
+      <YStack f={1}>
+        <YStack mb={24}>
+          <Header text="Secret Recovery Phrase" />
+          <SubtextParagraph>
+            Enter your 12 or 24-word secret recovery mnemonic to add an existing
+            wallet.
+          </SubtextParagraph>
+        </YStack>
+        <MnemonicInput readOnly={!inputMnemonic} onComplete={onComplete} />
+      </YStack>
+
+      <PrimaryButton
+        disabled={!isValid}
+        label="Next"
+        onPress={() => {
+          // if (isValid) {
+          //   const route =
+          //     action === "recover" ? "MnemonicSearch" : "SelectBlockchain";
+          //   navigation.push(route);
+          // } else {
+          //   setError("Invalid secret recovery phrase");
+          // }
+        }}
+      />
+    </Screen>
+  );
+}

packages/tamagui-core/src/components/Images.tsx

@@ -1,5 +1,7 @@
 import { Image } from "tamagui";
 
+import Images from "~src/Images";
+
 export function S3Image({
   resource,
   style,
@@ -13,13 +15,17 @@ export function S3Image({
 }): JSX.Element {
   // TODO update this to CNAME properly for your bucket
   const baseUrl = "https://dphpu5y2e06qu.cloudfront.net";
-  const url = `${baseUrl}/${resource}`;
+  const url = `${baseUrl}/images/${resource}`;
   return (
     // @ts-ignore
     <Image src={url} width={style.width} height={style.height} {...props} />
   );
 }
 
+function LocalImage({ resource, style }): JSX.Element {
+  return <Image source={resource} width={style.width} height={style.height} />;
+}
+
 type BlockchainLogoProps = {
   width: number;
   height: number;
@@ -29,8 +35,9 @@ export const EthereumIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-ethereum.png"
+  <LocalImage
+    resource={Images.logoEthereum}
+    // resource="logo-ethereum.png"
     style={{
       width,
       height,
@@ -42,8 +49,9 @@ export const SolanaIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-solana.png"
+  <LocalImage
+    resource={Images.logoSolana}
+    // resource="logo-solana.png"
     style={{
       width,
       height,
@@ -55,8 +63,9 @@ export const AvalancheIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-avalanche.png"
+  <LocalImage
+    resource={Images.logoAvalanche}
+    // resource="logo-avalanche.png"
     style={{
       width,
       height,
@@ -68,8 +77,9 @@ export const PolygonIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-polygon.png"
+  <LocalImage
+    resource={Images.logoPolygon}
+    // resource="logo-polygon.png"
     style={{
       width,
       height,
@@ -81,8 +91,9 @@ export const BscIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-bsc.png"
+  <LocalImage
+    resource={Images.logoBsc}
+    // resource="logo-bsc.png"
     style={{
       width,
       height,
@@ -94,8 +105,9 @@ export const CosmosIcon = ({
   width,
   height,
 }: BlockchainLogoProps): JSX.Element => (
-  <S3Image
-    resource="images/logo-cosmos.png"
+  <LocalImage
+    resource={Images.logoCosmos}
+    // resource="logo-cosmos.png"
     style={{
       width,
       height,