fix: infinite rerender ImportWalletScreen (#37)

Author: eqsdxr

.github/workflows/node.js.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm i
+    - run: npm run check
+    - run: npm test

.husky/commit-msg

@@ -1,10 +1,9 @@
 #!/usr/bin/env sh
 
 message="$(cat $1)"
-requiredPattern="^(feat|fix|docs|style|refactor|test|chore)(\([^)]+\))?: .*$"
+requiredPattern="^(feat|fix|docs|style|refactor|test|chore|revert|build|perf|ops)(\([^)]+\))?: .*$"
 
-if ! [[ $message =~ $requiredPattern ]];
-then
+if ! [[ $message =~ $requiredPattern ]]; then
   echo "-"
   echo "-"
   echo "-"

ARCHITECTURE.md

@@ -1,8 +1,12 @@
+
 # Folders
+
+```txt
 shared/ - code shared by both the mobile app and the browser extension.
 src/
    shared/ - code used by more than one feature.
    navigation/
    features/
       NewWallet/ - create/import new wallet functionality
       WalletHome/ - primary screen with balance and buttons for accessing other features
+```

CONTRIBUTING.md

@@ -1,22 +1,28 @@
-### Pull requests
+# Contributing
+
+## Pull requests
+
 - All changes go through pull requests, direct pushes to `main` are blocked.
 - Open a PR from a feature branch (create it off `main`).
 - We squash merge after review and passing checks.
 - No force pushes or rebases onto main.
 - Keep each pull request focused on a single logical change (one feature, fix, or refactor).
 
-### Commits
+## Commits
+
 - All commits must be signed (see [this](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits)).
 - All commits must follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/).
 
-### General Conventions
+## General Conventions
+
 - Don't create your own names (like "secret phrase" for describing mnemonic) to avoid confusion.
 - Keep terminology consistent (if the UI says "mnemonic", code must say "mnemonic" as well). One concept = one name everywhere.
 - Stick to English for all identifiers and comments. Follow proper English grammar rules as well.
 - Avoid magic numbers and strings - define them as constants with clear names instead.
 - Prefer clarity over brevity (`transactionId` is better than `txId`, unless the abbreviation is universally standard).
 
-### Naming Conventions
+## Naming Conventions
+
 - camelCase - functions, variables, hooks, utils
 - PascalCase - components, classes, types
 - UPPER_SNAKE_CASE - constants

README.md

@@ -1,6 +1,6 @@
 ### Setup Instructions
 
-Before starting, make sure you’ve completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment).
+Before starting, make sure you have completed the [React Native environment setup](https://reactnative.dev/docs/set-up-your-environment).
 
 1. Install dependencies:
 

babel.config.js

@@ -1,16 +1,3 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        root: ['./'],
-        // TODO Add the second alias for the package which is now in
-        // 'shared' top level folder but first choose a name for the package
-        alias: {
-          "@": "./src",
-        },
-      },
-    ],
-  ],
 };

src/features/NewWallet/components/MnemonicDisplayInput.tsx

@@ -1,81 +1,60 @@
+import { ReactNode } from 'react';
 import { View } from 'react-native';
 import { MnemonicInput } from './MnemonicInput';
-import { useEffect, useState } from 'react';
-import { useWalletScreenStyles } from '../../../shared/hooks/useWalletScreenStyle';
 
 type MnemonicDisplayType = {
-  mnemonicLength: number | null;
-  onChange: (words: string[]) => void;
-  initialWords?: string[];
+  mnemonic: string[];
+  setMnemonic: (words: string[]) => void;
 };
 
 export function MnemonicDisplayInput({
-  mnemonicLength,
-  onChange,
-  initialWords,
+  mnemonic,
+  setMnemonic,
 }: MnemonicDisplayType) {
-  const styles = useWalletScreenStyles().mnemonic;
-
-  // Init state
-  const [words, setWords] = useState<string[]>(() => {
-    console.log('Initializing words with:', initialWords);
-    return initialWords && mnemonicLength && initialWords.length === mnemonicLength
-      ? [...initialWords]
-      : Array.from({ length: mnemonicLength || 0 }, () => '');
-  });
-
-  // Sync with initialWords for pasted words
-  useEffect(() => {
-    if (
-      mnemonicLength &&
-      initialWords &&
-      initialWords.length === mnemonicLength &&
-      JSON.stringify(initialWords) !== JSON.stringify(words)
-    ) {
-      console.log('Syncing words with initialWords:', initialWords);
-      setWords([...initialWords]);
-    }
-  }, [initialWords, mnemonicLength, words]);
-
-  // If words was changed
-  useEffect(() => {
-    console.log('Words updated in effect:', words);
-    if (onChange && mnemonicLength) onChange(words);
-  }, [words, onChange, mnemonicLength]);
-
-  if (!mnemonicLength) return null;
 
   // Two columns
-  const half = mnemonicLength / 2;
+  const half = mnemonic.length / 2;
+
+  if (half != mnemonic.length - half) {
+    throw new Error("Critical error: half != mnemonicLength - half")
+  }
 
   const handleChange = (text: string, idx: number) => {
-    const updated = [...words];
+    const updated = [...mnemonic];
     updated[idx] = text;
-    setWords(updated);
+    setMnemonic(updated);
   };
 
   return (
-    <View className={`flex-row h-auto bg-custom_complement ${styles.container}`}>
-      <View className={`flex-1 flex-col justify-between ${styles.columnMargin}`}>
+    <View className='flex-row h-auto bg-custom_complement border-2 rounded-lg my-3 md:rounded-xl md:my-5'>
+      <Column>
         {Array.from({ length: half }, (_, i) => (
           <MnemonicInput
             key={`left-${i}`}
             idx={i + 1}
             onChange={text => handleChange(text, i)}
-            value={words[i] || ''}
+            value={mnemonic[i] || ''}
           />
         ))}
-      </View>
-      <View className={`flex-1 flex-col justify-between ${styles.columnMargin}`}>
+      </Column>
+      <Column>
         {Array.from({ length: half }, (_, i) => (
           <MnemonicInput
             key={`right-${i}`}
             idx={i + 1 + half}
             onChange={text => handleChange(text, i + half)}
-            value={words[i + half] || ''}
+            value={mnemonic[i + half] || ''}
           />
         ))}
-      </View>
+      </Column>
     </View>
   );
 }
+
+const Column = ({ children }: { children: ReactNode }) => {
+  return (
+    <View className='flex-1 flex-col justify-between m-1 md:m-2'>
+      {children}
+    </View>
+  )
+}

src/features/NewWallet/screens/CreateWalletScreen.tsx

@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { generateMnemonic } from '../../../../shared/crypto/mnemonic';
 import { useEffect, useState } from 'react';
 import { MnemonicDisplay } from '../components/MnemonicDisplay';
-import { CopyToClipboard as copyToClipboard } from '../../../shared/utils/copyToClipboard';
+import { copyToClipboard } from '../../../shared/utils/clipboard';
 import Toggle from '../components/Toggle';
 import Wrapper from '../../../shared/components/Wrapper';
 import { StepIndicator } from '../components/StepIndicator';

src/features/NewWallet/screens/ImportCreateScreen.tsx

@@ -13,7 +13,6 @@ type ImportCreateScreenNavigationProp = NativeStackNavigationProp<
 
 export default function ImportCreateScreen() {
   const navigation = useNavigation<ImportCreateScreenNavigationProp>();
-
   return (
     <Wrapper>
       <View className="flex-1 justify-center align-middle items-center">

src/features/NewWallet/screens/ImportWalletScreen.tsx

@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react';
 import ScrollableWrapper from '../../../shared/components/ScrollableWrapper';
 import { StepIndicator } from '../components/StepIndicator';
 import { MnemonicDisplayInput } from '../components/MnemonicDisplayInput';
-import PasteMnemonic from '../../../shared/utils/pasteFromClipboard';
+import { pasteMnemonicFromClipboard } from '../../../shared/utils/clipboard';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootNavigatorTypeParamListType } from '../../../navigation/types';
 import TextWithFont from '../../../shared/components/TextWithFont';
@@ -16,27 +16,27 @@ type ImportWalletScreenNavigationProp = NativeStackNavigationProp<
 >;
 
 type RouteParams = {
-  mnemonicLength: number | null;
+  mnemonicLength: number;
 };
 
 export default function ImportWalletScreen() {
   const navigation = useNavigation<ImportWalletScreenNavigationProp>();
+
   const route = useRoute();
   const { mnemonicLength } = route.params as RouteParams;
-  const [mnemonic, setMnemonic] = useState<string[]>([]);
+
+  const [mnemonic, setMnemonic] = useState<string[]>(
+    Array.from({ length: mnemonicLength }, () => '')
+  );
 
   // Check if all fields are filled in
   const isAllFilled =
     mnemonic.length === mnemonicLength && mnemonic.every(word => word.trim().length > 0);
 
-  useEffect(() => {
-    console.log('Mnemonic updated:', mnemonic, 'All filled:', isAllFilled);
-  }, [mnemonic, mnemonicLength, isAllFilled]);
-
   const handleNext = async () => {
-    console.log('User mnemonic words', mnemonic);
     if (isAllFilled) {
       try {
+        // TODO remove this
         const fullMnemonic = mnemonic.join(' ');
         navigation.navigate('NameWalletScreen', { mnemonic: fullMnemonic });
       } catch (error) {
@@ -48,33 +48,30 @@ export default function ImportWalletScreen() {
   };
 
   const handlePaste = async () => {
-    await PasteMnemonic({ mnemonicLength, setMnemonic });
+    await pasteMnemonicFromClipboard({ mnemonicLength, setMnemonic });
   };
 
   return (
     <ScrollableWrapper>
       <View className="flex-col flex-1 mt-5 items-center">
         <View>
-          <TextWithFont customStyle='text-xl md:text-2xl  text-white text-center font-bold'>
+          <TextWithFont customStyle='text-xl text-2xl text-white text-center font-bold'>
             Write your seed phrase
           </TextWithFont>
-          <TextWithFont customStyle={`text-white text-center mt-2 text-sm md:text-lg`}>
+          <TextWithFont customStyle='text-white text-center mt-2 text-sm md:text-lg'>
             Make sure no one can see your screen
           </TextWithFont>
         </View>
 
         <MnemonicDisplayInput
-          mnemonicLength={mnemonicLength}
-          onChange={setMnemonic}
-          initialWords={mnemonic}
+          mnemonic={mnemonic}
+          setMnemonic={setMnemonic}
         />
 
-        <View className="">
-          <Pressable onPress={handlePaste} className="flex-row gap-1 items-center">
-            <Image source={require('../../../../assets/icons/copy.png')} />
-            <TextWithFont customStyle="font-bold text-white">Paste</TextWithFont>
-          </Pressable>
-        </View>
+        <Pressable onPress={handlePaste} className="flex-row gap-1 items-center">
+          <Image source={require('../../../../assets/icons/copy.png')} />
+          <TextWithFont customStyle="font-bold text-white">Paste</TextWithFont>
+        </Pressable>
 
         <View className="flex-row my-5 bg-custom_border p-1 rounded-xl w-full">
           <Button onPress={() => navigation.goBack()} text={'Back'} customStyle={'w-1/2'} />
@@ -85,8 +82,8 @@ export default function ImportWalletScreen() {
             customStyle={`bg-${isAllFilled ? 'custom_accent' : 'white'} w-1/2`}
           />
         </View>
-      </View>
+      </View >
       <StepIndicator totalSteps={5} currentStep={3} />
-    </ScrollableWrapper>
+    </ScrollableWrapper >
   );
 }