implement import mnemonic screen

src/Main.tsx

@@ -15,11 +15,13 @@ import Dialpad from './components/Dialpad';
 import { sha256 } from '@noble/hashes/sha256';
 import { bytesToHex } from '@noble/hashes/utils';
 import Styles from './Styles';
+import SuccessScreen from './components/steps/SuccessScreen';
 
 enum Step {
   Discovery,
   Initialization,
   Loading,
+  LoadSuccess,
   Authentication,
   Home,
   FactoryReset,
@@ -119,7 +121,10 @@ const Main = () => {
           break;
         case Step.Loading:
           await Keycard.saveMnemonic(mnemonicRef.current, pinRef.current);
-          //fallthrough
+          walletKey.current = await Keycard.exportKeyWithPath(pinRef.current, WALLET_DERIVATION_PATH);
+          await AsyncStorage.setItem("wallet-key", walletKey.current);
+          setStep(Step.LoadSuccess)
+          break;
         case Step.Authentication:
           walletKey.current = await Keycard.exportKeyWithPath(pinRef.current, WALLET_DERIVATION_PATH);
           await AsyncStorage.setItem("wallet-key", walletKey.current);
@@ -277,11 +282,16 @@ const Main = () => {
     setIsModalVisible(false);
   }
 
+  const toHome = async () => {
+    setStep(Step.Home);
+  }
+
   return (
     <ImageBackground source={require("./images/gradient.png")} resizeMode='stretch' style={Styles.mainContainer}>
       {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
       {step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
       {step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
+      {step == Step.LoadSuccess && <SuccessScreen title="Congratulations!" message="You've successfully protected your wallet. Remember to keep your seed phrase safe, it's your responsibility!" onPressFunc={toHome}></SuccessScreen>}
       {step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Enter PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
       {step == Step.Home && <HomeScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} walletKey={walletKey.current} onPressFunc={login} onCancelFunc={cancel} onFactoryResetFunc={startFactoryReset}></HomeScreen>}
       {step == Step.FactoryReset && <FactoryResetScreen pinRetryCounter={pinDisplayCounter()} onPressFunc={connectCard} onCancelFunc={cancel}></FactoryResetScreen>}

src/MnemonicList.tsx

@@ -1,205 +0,0 @@
-export const MNEMONIC = ["abandon","ability","able","about","above","absent","absorb","abstract","absurd","abuse",
-  "access","accident","account","accuse","achieve","acid","acoustic","acquire","across","act",
-  "action","actor","actress","actual","adapt","add","addict","address","adjust","admit",
-  "adult","advance","advice","aerobic","affair","afford","afraid","again","age","agent",
-  "agree","ahead","aim","air","airport","aisle","alarm","album","alcohol","alert",
-  "alien","all","alley","allow","almost","alone","alpha","already","also","alter",
-  "always","amateur","amazing","among","amount","amused","analyst","anchor","ancient","anger",
-  "angle","angry","animal","ankle","announce","annual","another","answer","antenna","antique",
-  "anxiety","any","apart","apology","appear","apple","approve","april","arch","arctic",
-  "area","arena","argue","arm","armed","armor","army","around","arrange","arrest",
-  "arrive","arrow","art","artefact","artist","artwork","ask","aspect","assault","asset",
-  "assist","assume","asthma","athlete","atom","attack","attend","attitude","attract","auction",
-  "audit","august","aunt","author","auto","autumn","average","avocado","avoid","awake",
-  "aware","away","awesome","awful","awkward","axis","baby","bachelor","bacon","badge",
-  "bag","balance","balcony","ball","bamboo","banana","banner","bar","barely","bargain",
-  "barrel","base","basic","basket","battle","beach","bean","beauty","because","become",
-  "beef","before","begin","behave","behind","believe","below","belt","bench","benefit",
-  "best","betray","better","between","beyond","bicycle","bid","bike","bind","biology",
-  "bird","birth","bitter","black","blade","blame","blanket","blast","bleak","bless",
-  "blind","blood","blossom","blouse","blue","blur","blush","board","boat","body",
-  "boil","bomb","bone","bonus","book","boost","border","boring","borrow","boss",
-  "bottom","bounce","box","boy","bracket","brain","brand","brass","brave","bread",
-  "breeze","brick","bridge","brief","bright","bring","brisk","broccoli","broken","bronze",
-  "broom","brother","brown","brush","bubble","buddy","budget","buffalo","build","bulb",
-  "bulk","bullet","bundle","bunker","burden","burger","burst","bus","business","busy",
-  "butter","buyer","buzz","cabbage","cabin","cable","cactus","cage","cake","call",
-  "calm","camera","camp","can","canal","cancel","candy","cannon","canoe","canvas",
-  "canyon","capable","capital","captain","car","carbon","card","cargo","carpet","carry",
-  "cart","case","cash","casino","castle","casual","cat","catalog","catch","category",
-  "cattle","caught","cause","caution","cave","ceiling","celery","cement","census","century",
-  "cereal","certain","chair","chalk","champion","change","chaos","chapter","charge","chase",
-  "chat","cheap","check","cheese","chef","cherry","chest","chicken","chief","child",
-  "chimney","choice","choose","chronic","chuckle","chunk","churn","cigar","cinnamon","circle",
-  "citizen","city","civil","claim","clap","clarify","claw","clay","clean","clerk",
-  "clever","click","client","cliff","climb","clinic","clip","clock","clog","close",
-  "cloth","cloud","clown","club","clump","cluster","clutch","coach","coast","coconut",
-  "code","coffee","coil","coin","collect","color","column","combine","come","comfort",
-  "comic","common","company","concert","conduct","confirm","congress","connect","consider","control",
-  "convince","cook","cool","copper","copy","coral","core","corn","correct","cost",
-  "cotton","couch","country","couple","course","cousin","cover","coyote","crack","cradle",
-  "craft","cram","crane","crash","crater","crawl","crazy","cream","credit","creek",
-  "crew","cricket","crime","crisp","critic","crop","cross","crouch","crowd","crucial",
-  "cruel","cruise","crumble","crunch","crush","cry","crystal","cube","culture","cup",
-  "cupboard","curious","current","curtain","curve","cushion","custom","cute","cycle","dad",
-  "damage","damp","dance","danger","daring","dash","daughter","dawn","day","deal",
-  "debate","debris","decade","december","decide","decline","decorate","decrease","deer","defense",
-  "define","defy","degree","delay","deliver","demand","demise","denial","dentist","deny",
-  "depart","depend","deposit","depth","deputy","derive","describe","desert","design","desk",
-  "despair","destroy","detail","detect","develop","device","devote","diagram","dial","diamond",
-  "diary","dice","diesel","diet","differ","digital","dignity","dilemma","dinner","dinosaur",
-  "direct","dirt","disagree","discover","disease","dish","dismiss","disorder","display","distance",
-  "divert","divide","divorce","dizzy","doctor","document","dog","doll","dolphin","domain",
-  "donate","donkey","donor","door","dose","double","dove","draft","dragon","drama",
-  "drastic","draw","dream","dress","drift","drill","drink","drip","drive","drop",
-  "drum","dry","duck","dumb","dune","during","dust","dutch","duty","dwarf",
-  "dynamic","eager","eagle","early","earn","earth","easily","east","easy","echo",
-  "ecology","economy","edge","edit","educate","effort","egg","eight","either","elbow",
-  "elder","electric","elegant","element","elephant","elevator","elite","else","embark","embody",
-  "embrace","emerge","emotion","employ","empower","empty","enable","enact","end","endless",
-  "endorse","enemy","energy","enforce","engage","engine","enhance","enjoy","enlist","enough",
-  "enrich","enroll","ensure","enter","entire","entry","envelope","episode","equal","equip",
-  "era","erase","erode","erosion","error","erupt","escape","essay","essence","estate",
-  "eternal","ethics","evidence","evil","evoke","evolve","exact","example","excess","exchange",
-  "excite","exclude","excuse","execute","exercise","exhaust","exhibit","exile","exist","exit",
-  "exotic","expand","expect","expire","explain","expose","express","extend","extra","eye",
-  "eyebrow","fabric","face","faculty","fade","faint","faith","fall","false","fame",
-  "family","famous","fan","fancy","fantasy","farm","fashion","fat","fatal","father",
-  "fatigue","fault","favorite","feature","february","federal","fee","feed","feel","female",
-  "fence","festival","fetch","fever","few","fiber","fiction","field","figure","file",
-  "film","filter","final","find","fine","finger","finish","fire","firm","first",
-  "fiscal","fish","fit","fitness","fix","flag","flame","flash","flat","flavor",
-  "flee","flight","flip","float","flock","floor","flower","fluid","flush","fly",
-  "foam","focus","fog","foil","fold","follow","food","foot","force","forest",
-  "forget","fork","fortune","forum","forward","fossil","foster","found","fox","fragile",
-  "frame","frequent","fresh","friend","fringe","frog","front","frost","frown","frozen",
-  "fruit","fuel","fun","funny","furnace","fury","future","gadget","gain","galaxy",
-  "gallery","game","gap","garage","garbage","garden","garlic","garment","gas","gasp",
-  "gate","gather","gauge","gaze","general","genius","genre","gentle","genuine","gesture",
-  "ghost","giant","gift","giggle","ginger","giraffe","girl","give","glad","glance",
-  "glare","glass","glide","glimpse","globe","gloom","glory","glove","glow","glue",
-  "goat","goddess","gold","good","goose","gorilla","gospel","gossip","govern","gown",
-  "grab","grace","grain","grant","grape","grass","gravity","great","green","grid",
-  "grief","grit","grocery","group","grow","grunt","guard","guess","guide","guilt",
-  "guitar","gun","gym","habit","hair","half","hammer","hamster","hand","happy",
-  "harbor","hard","harsh","harvest","hat","have","hawk","hazard","head","health",
-  "heart","heavy","hedgehog","height","hello","helmet","help","hen","hero","hidden",
-  "high","hill","hint","hip","hire","history","hobby","hockey","hold","hole",
-  "holiday","hollow","home","honey","hood","hope","horn","horror","horse","hospital",
-  "host","hotel","hour","hover","hub","huge","human","humble","humor","hundred",
-  "hungry","hunt","hurdle","hurry","hurt","husband","hybrid","ice","icon","idea",
-  "identify","idle","ignore","ill","illegal","illness","image","imitate","immense","immune",
-  "impact","impose","improve","impulse","inch","include","income","increase","index","indicate",
-  "indoor","industry","infant","inflict","inform","inhale","inherit","initial","inject","injury",
-  "inmate","inner","innocent","input","inquiry","insane","insect","inside","inspire","install",
-  "intact","interest","into","invest","invite","involve","iron","island","isolate","issue",
-  "item","ivory","jacket","jaguar","jar","jazz","jealous","jeans","jelly","jewel",
-  "job","join","joke","journey","joy","judge","juice","jump","jungle","junior",
-  "junk","just","kangaroo","keen","keep","ketchup","key","kick","kid","kidney",
-  "kind","kingdom","kiss","kit","kitchen","kite","kitten","kiwi","knee","knife",
-  "knock","know","lab","label","labor","ladder","lady","lake","lamp","language",
-  "laptop","large","later","latin","laugh","laundry","lava","law","lawn","lawsuit",
-  "layer","lazy","leader","leaf","learn","leave","lecture","left","leg","legal",
-  "legend","leisure","lemon","lend","length","lens","leopard","lesson","letter","level",
-  "liar","liberty","library","license","life","lift","light","like","limb","limit",
-  "link","lion","liquid","list","little","live","lizard","load","loan","lobster",
-  "local","lock","logic","lonely","long","loop","lottery","loud","lounge","love",
-  "loyal","lucky","luggage","lumber","lunar","lunch","luxury","lyrics","machine","mad",
-  "magic","magnet","maid","mail","main","major","make","mammal","man","manage",
-  "mandate","mango","mansion","manual","maple","marble","march","margin","marine","market",
-  "marriage","mask","mass","master","match","material","math","matrix","matter","maximum",
-  "maze","meadow","mean","measure","meat","mechanic","medal","media","melody","melt",
-  "member","memory","mention","menu","mercy","merge","merit","merry","mesh","message",
-  "metal","method","middle","midnight","milk","million","mimic","mind","minimum","minor",
-  "minute","miracle","mirror","misery","miss","mistake","mix","mixed","mixture","mobile",
-  "model","modify","mom","moment","monitor","monkey","monster","month","moon","moral",
-  "more","morning","mosquito","mother","motion","motor","mountain","mouse","move","movie",
-  "much","muffin","mule","multiply","muscle","museum","mushroom","music","must","mutual",
-  "myself","mystery","myth","naive","name","napkin","narrow","nasty","nation","nature",
-  "near","neck","need","negative","neglect","neither","nephew","nerve","nest","net",
-  "network","neutral","never","news","next","nice","night","noble","noise","nominee",
-  "noodle","normal","north","nose","notable","note","nothing","notice","novel","now",
-  "nuclear","number","nurse","nut","oak","obey","object","oblige","obscure","observe",
-  "obtain","obvious","occur","ocean","october","odor","off","offer","office","often",
-  "oil","okay","old","olive","olympic","omit","once","one","onion","online",
-  "only","open","opera","opinion","oppose","option","orange","orbit","orchard","order",
-  "ordinary","organ","orient","original","orphan","ostrich","other","outdoor","outer","output",
-  "outside","oval","oven","over","own","owner","oxygen","oyster","ozone","pact",
-  "paddle","page","pair","palace","palm","panda","panel","panic","panther","paper",
-  "parade","parent","park","parrot","party","pass","patch","path","patient","patrol",
-  "pattern","pause","pave","payment","peace","peanut","pear","peasant","pelican","pen",
-  "penalty","pencil","people","pepper","perfect","permit","person","pet","phone","photo",
-  "phrase","physical","piano","picnic","picture","piece","pig","pigeon","pill","pilot",
-  "pink","pioneer","pipe","pistol","pitch","pizza","place","planet","plastic","plate",
-  "play","please","pledge","pluck","plug","plunge","poem","poet","point","polar",
-  "pole","police","pond","pony","pool","popular","portion","position","possible","post",
-  "potato","pottery","poverty","powder","power","practice","praise","predict","prefer","prepare",
-  "present","pretty","prevent","price","pride","primary","print","priority","prison","private",
-  "prize","problem","process","produce","profit","program","project","promote","proof","property",
-  "prosper","protect","proud","provide","public","pudding","pull","pulp","pulse","pumpkin",
-  "punch","pupil","puppy","purchase","purity","purpose","purse","push","put","puzzle",
-  "pyramid","quality","quantum","quarter","question","quick","quit","quiz","quote","rabbit",
-  "raccoon","race","rack","radar","radio","rail","rain","raise","rally","ramp",
-  "ranch","random","range","rapid","rare","rate","rather","raven","raw","razor",
-  "ready","real","reason","rebel","rebuild","recall","receive","recipe","record","recycle",
-  "reduce","reflect","reform","refuse","region","regret","regular","reject","relax","release",
-  "relief","rely","remain","remember","remind","remove","render","renew","rent","reopen",
-  "repair","repeat","replace","report","require","rescue","resemble","resist","resource","response",
-  "result","retire","retreat","return","reunion","reveal","review","reward","rhythm","rib",
-  "ribbon","rice","rich","ride","ridge","rifle","right","rigid","ring","riot",
-  "ripple","risk","ritual","rival","river","road","roast","robot","robust","rocket",
-  "romance","roof","rookie","room","rose","rotate","rough","round","route","royal",
-  "rubber","rude","rug","rule","run","runway","rural","sad","saddle","sadness",
-  "safe","sail","salad","salmon","salon","salt","salute","same","sample","sand",
-  "satisfy","satoshi","sauce","sausage","save","say","scale","scan","scare","scatter",
-  "scene","scheme","school","science","scissors","scorpion","scout","scrap","screen","script",
-  "scrub","sea","search","season","seat","second","secret","section","security","seed",
-  "seek","segment","select","sell","seminar","senior","sense","sentence","series","service",
-  "session","settle","setup","seven","shadow","shaft","shallow","share","shed","shell",
-  "sheriff","shield","shift","shine","ship","shiver","shock","shoe","shoot","shop",
-  "short","shoulder","shove","shrimp","shrug","shuffle","shy","sibling","sick","side",
-  "siege","sight","sign","silent","silk","silly","silver","similar","simple","since",
-  "sing","siren","sister","situate","six","size","skate","sketch","ski","skill",
-  "skin","skirt","skull","slab","slam","sleep","slender","slice","slide","slight",
-  "slim","slogan","slot","slow","slush","small","smart","smile","smoke","smooth",
-  "snack","snake","snap","sniff","snow","soap","soccer","social","sock","soda",
-  "soft","solar","soldier","solid","solution","solve","someone","song","soon","sorry",
-  "sort","soul","sound","soup","source","south","space","spare","spatial","spawn",
-  "speak","special","speed","spell","spend","sphere","spice","spider","spike","spin",
-  "spirit","split","spoil","sponsor","spoon","sport","spot","spray","spread","spring",
-  "spy","square","squeeze","squirrel","stable","stadium","staff","stage","stairs","stamp",
-  "stand","start","state","stay","steak","steel","stem","step","stereo","stick",
-  "still","sting","stock","stomach","stone","stool","story","stove","strategy","street",
-  "strike","strong","struggle","student","stuff","stumble","style","subject","submit","subway",
-  "success","such","sudden","suffer","sugar","suggest","suit","summer","sun","sunny",
-  "sunset","super","supply","supreme","sure","surface","surge","surprise","surround","survey",
-  "suspect","sustain","swallow","swamp","swap","swarm","swear","sweet","swift","swim",
-  "swing","switch","sword","symbol","symptom","syrup","system","table","tackle","tag",
-  "tail","talent","talk","tank","tape","target","task","taste","tattoo","taxi",
-  "teach","team","tell","ten","tenant","tennis","tent","term","test","text",
-  "thank","that","theme","then","theory","there","they","thing","this","thought",
-  "three","thrive","throw","thumb","thunder","ticket","tide","tiger","tilt","timber",
-  "time","tiny","tip","tired","tissue","title","toast","tobacco","today","toddler",
-  "toe","together","toilet","token","tomato","tomorrow","tone","tongue","tonight","tool",
-  "tooth","top","topic","topple","torch","tornado","tortoise","toss","total","tourist",
-  "toward","tower","town","toy","track","trade","traffic","tragic","train","transfer",
-  "trap","trash","travel","tray","treat","tree","trend","trial","tribe","trick",
-  "trigger","trim","trip","trophy","trouble","truck","true","truly","trumpet","trust",
-  "truth","try","tube","tuition","tumble","tuna","tunnel","turkey","turn","turtle",
-  "twelve","twenty","twice","twin","twist","two","type","typical","ugly","umbrella",
-  "unable","unaware","uncle","uncover","under","undo","unfair","unfold","unhappy","uniform",
-  "unique","unit","universe","unknown","unlock","until","unusual","unveil","update","upgrade",
-  "uphold","upon","upper","upset","urban","urge","usage","use","used","useful",
-  "useless","usual","utility","vacant","vacuum","vague","valid","valley","valve","van",
-  "vanish","vapor","various","vast","vault","vehicle","velvet","vendor","venture","venue",
-  "verb","verify","version","very","vessel","veteran","viable","vibrant","vicious","victory",
-  "video","view","village","vintage","violin","virtual","virus","visa","visit","visual",
-  "vital","vivid","vocal","voice","void","volcano","volume","vote","voyage","wage",
-  "wagon","wait","walk","wall","walnut","want","warfare","warm","warrior","wash",
-  "wasp","waste","water","wave","way","wealth","weapon","wear","weasel","weather",
-  "web","wedding","weekend","weird","welcome","west","wet","whale","what","wheat",
-  "wheel","when","where","whip","whisper","wide","width","wife","wild","will",
-  "win","window","wine","wing","wink","winner","winter","wire","wisdom","wise",
-  "wish","witness","wolf","woman","wonder","wood","wool","word","work","world",
-  "worry","worth","wrap","wreck","wrestle","wrist","write","wrong","yard","year",
-  "yellow","you","young","youth","zebra","zero","zone","zoo"];

src/Styles.tsx

@@ -14,6 +14,13 @@ const Styles = StyleSheet.create({
         width: '100%',
         paddingTop: 80,
       },
+      headingLarge: {
+        fontSize: 40,
+        lineHeight: 48,
+        color: 'white',
+        textAlign: 'center',
+        fontFamily: 'Inter',
+      },
       heading: {
         color: 'white',
         textAlign: 'center',
@@ -102,9 +109,8 @@ const Styles = StyleSheet.create({
       },
       navContainer: {
         flexDirection: 'row',
-        width: '90%',
+        width: '95%',
         marginLeft: '5%',
-        marginRight: '5%'
       },
 });
 

src/components/Button.tsx

@@ -15,13 +15,15 @@ const  Button: FC<ButtonProps> = props => {
   const textContainer = () => {
     if(type == 'cancel') {
       return style.cancelBtnContainer;
+    } else if (type == 'secondary') {
+      return style.secondaryBtnContainer;
     } else {
       return style.primarytBtnContainer;
     }
   }
 
   return (
-    <View style={textContainer()}>
+    <View style={[textContainer(), disabled ? style.disabledBtn : null]}>
       <TouchableOpacity key={label} disabled={disabled} style={style.button} onPress={onChangeFunc}>
         {type == "cancel" && <Icon name="chevron-left" size={16} style={style.cancelIcon}/>}
         {type == "primary" && <Text style={style.primaryText}>{label}</Text>}
@@ -56,9 +58,26 @@ const style = StyleSheet.create({
       flexShrink: 1,
       flexBasis: 62
     },
+    secondaryBtnContainer: {
+      flexDirection: 'row',
+      textAlign: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent',
+      marginLeft: '5%',
+      marginRight: '5%',
+      height: 62,
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      borderWidth: 1,
+      borderColor: 'white',
+    },
     button: {
       justifyContent: 'center'
     },
+    disabledBtn: {
+      opacity: 0.5,
+    },
     primaryText: {
       color: 'black',
       fontFamily: 'Inter',

src/components/steps/MnemonicScreen.tsx

@@ -1,10 +1,11 @@
 import {FC, useState } from "react";
-import { StyleSheet, Text, TextInput, View } from "react-native";
+import { Linking, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
 import * as bip39 from '@scure/bip39';
 import { wordlist } from '@scure/bip39/wordlists/english';
 import Button from "../Button";
-import { MNEMONIC } from "../../MnemonicList";
 import Dialpad from "../Dialpad";
+import Styles from "../../Styles";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 enum LoadMnemonicSteps {
   Home,
@@ -23,72 +24,98 @@ type MnemonicScreenProps = {
 const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   const {pinRequired, pinRetryCounter, onPressFunc, onCancelFunc} = props;
   const [mnemonic, setMnemonic] = useState('');
-  const [errMessage, setErrMessage] = useState('');
+  const [showMnemonic, setShowMnemonic] = useState(false);
+  const [isValid, setIsValid] = useState(false);
   const [step, setStep] = useState(LoadMnemonicSteps.Home);
 
+  const cleanMnemonic = (str: string) => {
+    return str.split(' ').filter((el: string) => el != "").map((word: string) => word.trim().toLowerCase()).join(' ');
+  }
+
   const updateMnemonic = (str: string) => {
-    const mn = str.split(' ').filter((el: string) => el != "").map((word: string) => word.trim().toLowerCase());
+    setMnemonic(str);
+    const mn = cleanMnemonic(str);
 
-    if (!mn.every((val: string | any) => MNEMONIC.includes(val))) {
+    if (bip39.validateMnemonic(mn, wordlist)) {
-      setErrMessage("Wrong mnemonic. Please try again.");
+      setIsValid(true);
-      return;
+    } else {
+      setIsValid(false);
+    }
   }
 
-    if(mn.length != 12 && mn.length != 18 && mn.length != 24) {
+  const submitMnemonic = () => {
-      setErrMessage("Wrong mnemonic length. Please try again.");
-      return;
-    }
-
-    setErrMessage("");
-    submitMnemonic(mn.join(' '));
-  }
-
-  const submitMnemonic = (mn: string) => {
     if(pinRequired) {
       setStep(LoadMnemonicSteps.InsertPin);
     } else {
-      onPressFunc(mn);
+      onPressFunc(cleanMnemonic(mnemonic));
     }    
   }
 
   const submitPin = (p: string) => {
-    onPressFunc(mnemonic, p);
+    onPressFunc(cleanMnemonic(mnemonic), p);
     return true;
   }
 
   const generateMnemonic = () => {
+    setIsValid(true);
     setMnemonic(bip39.generateMnemonic(wordlist));
     setStep(LoadMnemonicSteps.CreateMnemonic);
   }
 
+  const goBack = () => {
+    setIsValid(false);
+    setMnemonic("");
+    setStep(LoadMnemonicSteps.Home);  
+  }
+
+  const toggleVisibility = () => {
+    setShowMnemonic(!showMnemonic);
+  }
+
   return (
-    <View>
+    <View style={Styles.container}>
       { step == LoadMnemonicSteps.Home &&
-      <View style={styles.container}>
+      <View style={Styles.container}>
-        <Text style={styles.heading}> Load card</Text>
+        <View style={styles.mnemonicTextContainer}>
-        <Button label="Import using seed phrase" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)}></Button>
+          <Text style={Styles.headingLarge}>Logos Wallet</Text>
+          <Text style={Styles.subtitle}>Use your wallet to store your Logos Operator</Text>
+        </View>
+        <View style={Styles.footer}>
+          <Button label="Import using seed phrase" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} type="secondary"></Button>
+          <View style={{height: 18}}></View>
           <Button label="Create a new wallet" disabled={false} onChangeFunc={generateMnemonic}></Button>
-        <Button label="Cancel" disabled={false}  onChangeFunc={onCancelFunc}></Button>
+        </View>
       </View>
       }
       { step == LoadMnemonicSteps.InsertMnemonic &&
-      <View style={styles.container}>
+      <View style={Styles.container}>
-        <Text style={styles.heading}> Load mnemonic</Text>
+        <View style={{paddingTop: 30}}>
-        <View style={styles.mnemonicContainer}>
+          <Text style={Styles.heading}> Import from Seed</Text>
-          <TextInput editable multiline onChangeText={(val) => setMnemonic(val)} value={mnemonic} style={styles.mnemonic} placeholder="Type your passphrase"/>
+          <View style={styles.mnemonicInputContainer}>
+            <Text style={styles.mnemonicInputPlaceholder}>Seed phrase</Text>
+            <TouchableOpacity style={styles.mnemonicVisibilityIcon} onPress={toggleVisibility}><Icon name={showMnemonic ? "eye-off-outline" : "eye-outline"} size={16} color="white" /></TouchableOpacity>
+            <TextInput autoCapitalize="none" autoComplete="off" autoCorrect={false} secureTextEntry={!showMnemonic} multiline={showMnemonic} editable onChangeText={updateMnemonic} value={mnemonic} style={styles.mnemonic}/>
+          </View>
+        </View>
+        <View style={Styles.footer}>
+          <View style={[Styles.sublinkContainer, {paddingBottom: 25}]}>
+            <Text style={Styles.sublinkText}>By proceeding, you agree to these </Text>
+            <TouchableOpacity onPress={() => Linking.openURL('https://logos.co')}>
+              <Text style={Styles.sublinkAction}>Terms and Conditions</Text>
+            </TouchableOpacity>
+          </View>
+          <View style={Styles.navContainer}>
+            <Button type="cancel" disabled={false} onChangeFunc={goBack}></Button>
+            <Button label="Import" disabled={!isValid} onChangeFunc={submitMnemonic}></Button>
           </View>
-        <View style={styles.btnContainer}>
-          <Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
-          <Button label="Next" disabled={false} onChangeFunc={() => updateMnemonic(mnemonic)}></Button>
         </View>
-        <Text style={styles.errorMessage}>{errMessage}</Text>
       </View>
       }
       { step == LoadMnemonicSteps.CreateMnemonic &&
-      <View style={styles.container}>
+      <View style={Styles.container}>
         <Text> {mnemonic}</Text>
-        <Button label="Cancel" disabled={false} onChangeFunc={() => setStep(LoadMnemonicSteps.Home)}></Button>
+        <Button type="cancel" disabled={false} onChangeFunc={goBack}></Button>
-        <Button label="Next" disabled={false} onChangeFunc={() => submitMnemonic(mnemonic)}></Button>
+        <Button label="Next" disabled={false} onChangeFunc={submitMnemonic}></Button>
       </View>
       }
       { step == LoadMnemonicSteps.InsertPin && <Dialpad pinRetryCounter={pinRetryCounter} prompt={"Enter PIN"} onCancelFunc={() => setStep(LoadMnemonicSteps.InsertMnemonic)} onNextFunc={submitPin}></Dialpad>}
@@ -96,32 +123,35 @@ const  MnemonicScreen: FC<MnemonicScreenProps> = props => {
   )};
 
 const styles = StyleSheet.create({
-  container: {
+  mnemonicTextContainer: {
-    width: '89%',
+    justifyContent: 'center',
-    marginLeft: '5.5%',
+    height: '70%',
-    marginRight: '5.5%'
+    width: '100%',
-  },
+  },
-  heading: {
+  mnemonicInputContainer: {
-    textAlign: 'center',
+    width: '90%',
-    marginTop: 30,
+    marginHorizontal: '5%',
-    fontSize: 28,
+    marginVertical: 20
-    fontFamily: 'Inter',
+  },
-    color: "white",
+  mnemonicInputPlaceholder: {
-    paddingBottom: 20
+    color: 'grey',
-  },
+    fontFamily: 'Inter',
-  mnemonicContainer: {
+    fontSize: 14,
+    lineHeight: 20,
     width: '100%',
-    height: 300,
-    borderColor: '#199515',
-    borderBottomWidth: 1,
-    borderTopWidth: 1,
-    borderStyle: 'dashed'
   },
   mnemonic: {
     color: "white",
-    textAlignVertical: 'bottom',
     fontFamily: 'Inter',
-    fontSize: 16
+    fontSize: 14,
+    lineHeight: 20,
+    borderWidth: 1,
+    borderColor: 'white',
+    width: '100%',
+    marginVertical: 15,
+    paddingVertical: 12,
+    paddingLeft: 10,
+    paddingRight: 38
   },
   btnContainer: {
     flexDirection: 'row',
@@ -130,11 +160,12 @@ const styles = StyleSheet.create({
     marginRight: '5%',
     alignItems: 'center'
   },
-  errorMessage: {
+  mnemonicVisibilityIcon: {
-    color: "white",
+    position: 'absolute',
-    fontFamily: 'Inter',
+    right: 0,
-    textAlign: 'center',
+    top: '42%',
-    paddingTop: '10%'
+    zIndex: 1,
+    padding: 10
   }
 });
 

src/components/steps/SuccessScreen.tsx

@@ -0,0 +1,41 @@
+import {FC } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../Button";
+
+type SuccessScreenProps = {
+  title: string;
+  message: string;
+  onPressFunc: () => void;
+};
+
+const SuccessScreen: FC<SuccessScreenProps> = props => {
+  const {title, message, onPressFunc} = props;
+
+  return (
+    <View>
+      <View>
+        <Text style={styles.heading}>{title}</Text>
+        <Text style={styles.prompt}>{message}</Text>
+        <Button label="Next" disabled={false} onChangeFunc={onPressFunc}></Button>
+        </View>
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+  heading: {
+    textAlign: 'center',
+    fontSize: 30,
+    fontFamily: 'Inter',
+    color: '#199515',
+    marginTop: '50%'
+  },
+  prompt: {
+    textAlign: 'center',
+    fontSize: 18,
+    fontFamily: 'Inter',
+    color: 'white',
+    marginTop: '5%'
+  }
+});
+
+export default SuccessScreen;