Import pem

.gitignore

@@ -73,6 +73,10 @@ rust/.cargo/config.toml
 android/*.hprof
 android/app/src/main/jniLibs
 
+# Sentry
+android/sentry.properties
+ios/sentry.properties
+
 # react-native-config codegen
 ios/envfile
 

ios/Podfile.lock

@@ -312,6 +312,8 @@ PODS:
     - react-native-config/App (= 1.4.6)
   - react-native-config/App (1.4.6):
     - React-Core
+  - react-native-document-picker (8.1.1):
+    - React-Core
   - react-native-file-access (2.5.0):
     - React-Core
     - ZIPFoundation (= 0.9.11)
@@ -526,6 +528,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-config (from `../node_modules/react-native-config`)
+  - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-file-access (from `../node_modules/react-native-file-access`)
   - react-native-minimizer (from `../node_modules/react-native-minimizer`)
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
@@ -638,6 +641,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/blur"
   react-native-config:
     :path: "../node_modules/react-native-config"
+  react-native-document-picker:
+    :path: "../node_modules/react-native-document-picker"
   react-native-file-access:
     :path: "../node_modules/react-native-file-access"
   react-native-minimizer:
@@ -761,6 +766,7 @@ SPEC CHECKSUMS:
   React-logger: ebb4d31bbbe4f1a8a1a9b658d7429210b8f68160
   react-native-blur: 3e9c8e8e9f7d17fa1b94e1a0ae9fd816675f5382
   react-native-config: 7cd105e71d903104e8919261480858940a6b9c0e
+  react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
   react-native-file-access: 204693d308701ba232dcf91facef05498fcde9a2
   react-native-minimizer: b94809a769ac3825b46fd081d4f0ae2560791536
   react-native-pager-view: 7f00d63688f7df9fad86dfb0154814419cc5eb8d

package.json

@@ -34,7 +34,7 @@
     "@dfinity/principal": "^0.9.3",
     "@hookform/error-message": "^2.0.0",
     "@psychedelic/dab-js": "1.4.12",
-    "@psychedelic/plug-controller": "0.23.2",
+    "@psychedelic/plug-controller": "0.23.4",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-community/blur": "^4.2.0",
     "@react-native-community/clipboard": "^1.5.1",
@@ -77,6 +77,7 @@
     "react-native-crypto": "^2.2.0",
     "react-native-crypto-js": "^1.0.0",
     "react-native-device-info": "^10.2.0",
+    "react-native-document-picker": "^8.1.1",
     "react-native-fast-image": "^8.6.1",
     "react-native-fetch-api": "^2.0.0",
     "react-native-file-access": "^2.5.0",

src/components/common/GradientText/index.js → src/components/common/GradientText/index.tsx

@@ -2,19 +2,30 @@ import MaskedView from '@react-native-masked-view/masked-view';
 import React from 'react';
 import LinearGradient from 'react-native-linear-gradient';
 
-import Text from '../Text';
+import Text, { TextProps } from '../Text';
 
-const GradientText = ({ colors, style, ...props }) => {
+interface Coordinate {
+  x: number;
+  y: number;
+}
+
+interface Props extends TextProps {
+  colors: string[];
+  start?: Coordinate;
+  end?: Coordinate;
+}
+
+function GradientText({ colors, style, start, end, ...props }: Props) {
   return (
     <MaskedView maskElement={<Text style={style} {...props} />}>
       <LinearGradient
         colors={colors}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 1 }}>
+        start={start || { x: 0, y: 0 }}
+        end={end || { x: 1, y: 1 }}>
         <Text {...props} style={[style, { opacity: 0 }]} />
       </LinearGradient>
     </MaskedView>
   );
-};
+}
 
 export default GradientText;

src/components/common/Text/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Text as RNText, TextProps } from 'react-native';
+import { Text as RNText, TextProps as RNTextProps } from 'react-native';
 
 export type TextTypes =
   | 'headline1'
@@ -14,13 +14,13 @@ export type TextTypes =
   | 'overline'
   | 'normal';
 
-interface Props extends TextProps {
+export interface TextProps extends RNTextProps {
   type?: TextTypes;
 }
 
 import styles from './styles';
 
-function Text({ style, type, ...props }: Props) {
+function Text({ style, type, ...props }: TextProps) {
   const baseStyle = useMemo(
     () => (type ? [styles.base, styles[type], style] : [styles.base, style]),
     [type, style]

src/components/common/Text/styles.ts

@@ -15,4 +15,5 @@ export default StyleSheet.create({
   caption: FontStyles.Caption,
   overline: FontStyles.Overline,
   normal: FontStyles.Normal,
+  error: FontStyles.Error,
 });

src/redux/slices/keyring.ts

@@ -1,5 +1,5 @@
 import { CreatePrincipalOptions } from '@psychedelic/plug-controller/dist/PlugKeyRing/interfaces';
-import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, isAnyOf } from '@reduxjs/toolkit';
 
 import { KeyringState, State, Wallet } from '@/interfaces/redux';
 import KeyRing from '@/modules/keyring';
@@ -200,6 +200,58 @@ export const login = createAsyncThunk(
   }
 );
 
+export const importAccountFromPem = createAsyncThunk(
+  'keyring/importAccountFromPem',
+  async (
+    { pem, icon, name }: { name: string; icon: string; pem: string },
+    { rejectWithValue }
+  ) => {
+    try {
+      const instance = KeyRing.getInstance();
+      const response = await instance?.importAccountFromPem({
+        pem,
+        icon,
+        name,
+      });
+      return response;
+    } catch (e: any) {
+      // TODO: Add toast to handle error.
+      return rejectWithValue(e.message);
+    }
+  }
+);
+
+export const validatePem = createAsyncThunk(
+  'keyring/validatePem',
+  async (
+    {
+      pem,
+      onSuccess,
+      onFailure,
+      onFinish,
+    }: {
+      pem: string;
+      onSuccess: () => void;
+      onFailure: () => void;
+      onFinish: () => void;
+    },
+    { rejectWithValue }
+  ) => {
+    try {
+      const instance = KeyRing.getInstance();
+      const response = await instance?.validatePem({ pem });
+      if (response) {
+        onSuccess();
+      } else {
+        onFailure();
+      }
+      onFinish();
+    } catch (e: any) {
+      return rejectWithValue({ error: e.message });
+    }
+  }
+);
+
 export const createSubaccount = createAsyncThunk(
   'keyring/createSubaccount',
   async (params: CreatePrincipalOptions, { rejectWithValue }) => {
@@ -356,11 +408,6 @@ export const keyringSlice = createSlice({
         state.isInitialized = action.payload.isInitialized;
         state.isUnlocked = action.payload.isUnlocked;
       })
-      .addCase(createSubaccount.fulfilled, (state, action) => {
-        if (action.payload) {
-          state.wallets = [...state.wallets, action.payload];
-        }
-      })
       .addCase(editSubaccount.fulfilled, (state, action) => {
         const { isCurrentWallet, wallet } = action.payload;
         if (isCurrentWallet) {
@@ -397,7 +444,15 @@ export const keyringSlice = createSlice({
           state.isInitialized = true;
           state.isUnlocked = unlocked;
         }
-      });
+      })
+      .addMatcher(
+        isAnyOf(createSubaccount.fulfilled, importAccountFromPem.fulfilled),
+        (state, action) => {
+          if (action.payload) {
+            state.wallets = [...state.wallets, action.payload];
+          }
+        }
+      );
   },
 });
 

src/screens/auth/ImportSeedPhrase/index.js

@@ -88,7 +88,7 @@ const ImportSeedPhrase = ({ navigation, route }) => {
       />
       <KeyboardScrollView keyboardShouldPersistTaps="always">
         <View style={styles.container}>
-          <Text style={styles.title}>{t('importSeedPhrase.title')}</Text>
+          <Text style={styles.title}>{t('common.importWallet')}</Text>
           <Text style={styles.subtitle}>
             {t('importSeedPhrase.enterPhrase')}
           </Text>

src/screens/auth/Welcome/index.js

@@ -31,7 +31,7 @@ function Welcome() {
   const title = isInitialized ? t('welcome.initTitle') : t('welcome.title');
   const importTitle = isInitialized
     ? t('welcome.importNew')
-    : t('welcome.import');
+    : t('common.importWallet');
   const createTitle = isInitialized
     ? t('welcome.createNew')
     : t('welcome.create');

src/screens/flows/WalletConnect/screens/Flows/components/BatchTransactions/index.tsx

@@ -47,7 +47,6 @@ function BatchTransactions({ request, metadata }: WallectConnectFlowsData) {
     <ScrollView
       bounces={false}
       style={styles.list}
-      overScrollMode="never"
       contentContainerStyle={styles.listContentContainer}>
       {transactions.map(renderTransaction)}
     </ScrollView>

src/screens/flows/WalletConnect/screens/Flows/components/BatchTransactions/styles.ts

@@ -5,10 +5,10 @@ import { Colors } from '@/constants/theme';
 export default StyleSheet.create({
   listContentContainer: {
     paddingVertical: 10,
-    flexGrow: 1,
   },
   list: {
     width: '100%',
+    flex: 1,
   },
   appIcon: {
     height: 28,

src/screens/tabs/Profile/screens/Accounts/index.js

@@ -22,6 +22,7 @@ import { setCurrentPrincipal } from '@/redux/slices/keyring';
 import shortAddress from '@/utils/shortAddress';
 
 import CreateEditAccount from '../CreateEditAccount';
+import CreateImportAccount from '../CreateImportAccount';
 import AddICNS from './AddICNS';
 import styles from './styles';
 
@@ -39,15 +40,16 @@ const Accounts = ({ modalRef, onClose, ...props }) => {
   const [selectedAccount, setSelectedAccount] = useState(null);
 
   const createEditAccountRef = useRef(null);
+  const createImportAccountRef = useRef(null);
   const addICNSRef = useRef(null);
 
   useEffect(() => {
     dispatch(getICPPrice());
   }, []);
 
-  const onCreateAccount = () => {
+  const onCreateImportAccount = () => {
     setSelectedAccount(null);
-    createEditAccountRef.current?.open();
+    createImportAccountRef.current?.open();
   };
 
   const onEditAccount = account => {
@@ -155,11 +157,11 @@ const Accounts = ({ modalRef, onClose, ...props }) => {
             </View>
           )}
           {wallets?.map(renderAccountItem)}
-          <Touchable onPress={onCreateAccount}>
+          <Touchable onPress={onCreateImportAccount}>
             <Row align="center" style={styles.row}>
               <Icon name="plus" style={styles.plusIcon} />
               <Text style={FontStyles.Normal}>
-                {t('accounts.createAccount')}
+                {t('accounts.createImportAccount')}
               </Text>
             </Row>
           </Touchable>
@@ -168,6 +170,10 @@ const Accounts = ({ modalRef, onClose, ...props }) => {
             accountsModalRef={modalRef}
             account={selectedAccount}
           />
+          <CreateImportAccount
+            modalRef={createImportAccountRef}
+            accountsModalRef={modalRef}
+          />
         </View>
       </Modal>
       <ActionSheet