Create iframe component for signing messages

.env.example

@@ -4,5 +4,4 @@ REACT_APP_DEFAULT_GAS_PRICE=0.025
 # Reference: https://github.com/cosmos/cosmos-sdk/issues/16020
 REACT_APP_GAS_ADJUSTMENT=2
 REACT_APP_LACONICD_RPC_URL=https://laconicd-sapo.laconic.com
-
 REACT_APP_DEPLOY_APP_URL=

src/App.tsx

@@ -41,6 +41,7 @@ import { AutoSignIn } from "./screens/AutoSignIn";
 import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
 import useAccountsData from "./hooks/useAccountsData";
 import { useWebViewHandler } from "./hooks/useWebViewHandler";
+import SignMessageEmbed from "./screens/SignMessageEmbed";
 
 const Stack = createStackNavigator<StackParamsList>();
 
@@ -390,6 +391,14 @@ const App = (): React.JSX.Element => {
             header: () => <></>,
           }}
         />
+        <Stack.Screen
+          name="sign-message-embed"
+          component={SignMessageEmbed}
+          options={{
+            // eslint-disable-next-line react/no-unstable-nested-components
+            header: () => <Header title="Wallet" />,
+          }}
+        />
       </Stack.Navigator>
       <PairingModal
         visible={modalVisible}

src/screens/SignMessageEmbed.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { ActivityIndicator, Button, Text, Appbar } from 'react-native-paper';
+
+import { useNavigation } from '@react-navigation/native';
+import {
+  NativeStackNavigationProp,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import { getHeaderTitle } from '@react-navigation/elements';
+
+import { Account, StackParamsList } from '../types';
+import AccountDetails from '../components/AccountDetails';
+import styles from '../styles/stylesheet';
+import { getCosmosAccounts, retrieveSingleAccount } from '../utils/accounts';
+import { getMnemonic, getPathKey, sendMessage } from '../utils/misc';
+import { COSMOS } from '../utils/constants';
+
+type SignRequestProps = NativeStackScreenProps<StackParamsList, 'sign-message-embed'>;
+
+const SignMessageEmbed = ({ route }: SignRequestProps) => {
+  const [displayAccount, setDisplayAccount] = useState<Account>();
+  const [message, setMessage] = useState<string>('');
+  const [chainId, setChainId] = useState<string>('');
+  const [signDoc, setSignDoc] = useState<any>(null);
+  const [signerAddress, setSignerAddress] = useState<string>('');
+  const [origin, setOrigin] = useState<string>('');
+  const [sourceWindow, setSourceWindow] = useState<Window | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isApproving, setIsApproving] = useState(false);
+
+  const navigation =
+    useNavigation<NativeStackNavigationProp<StackParamsList>>();
+
+  const signMessageHandler = async () => {
+    if (!signDoc || !signerAddress || !sourceWindow) return;
+
+    setIsApproving(true);
+    try {
+      const requestAccount = await retrieveSingleAccount(COSMOS, chainId, signerAddress);
+      const path = (await getPathKey(`${COSMOS}:${chainId}`, requestAccount!.index)).path;
+      const mnemonic = await getMnemonic();
+      const cosmosAccount = await getCosmosAccounts(mnemonic, path, 'zenith');
+
+      const cosmosAminoSignature = await cosmosAccount.cosmosWallet.signAmino(
+        signerAddress,
+        signDoc,
+      );
+
+      const signature = cosmosAminoSignature.signature.signature;
+
+      sendMessage(
+        sourceWindow,
+        'ZENITH_SIGNED_MESSAGE',
+        { signature },
+        origin,
+      );
+
+      navigation.navigate('Home');
+    } catch (err) {
+      console.error('Signing failed:', err);
+      sendMessage(
+        sourceWindow!,
+        'ZENITH_SIGNED_MESSAGE',
+        { error: err },
+        origin,
+      );
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+
+  const rejectRequestHandler = async () => {
+    if (sourceWindow && origin) {
+      sendMessage(
+        sourceWindow,
+        'ZENITH_SIGNED_MESSAGE',
+        { error: 'User rejected the request' },
+        origin,
+      );
+    }
+    navigation.navigate('Home');
+  };
+
+  useEffect(() => {
+    const handleCosmosSignMessage = async (event: MessageEvent) => {
+      if (event.data.type !== 'SIGN_ZENITH_MESSAGE') return;
+
+      try {
+        const { signerAddress, signDoc } = event.data.params;
+
+        setSignerAddress(signerAddress);
+        setSignDoc(signDoc);
+        setMessage(signDoc.memo || '');
+        setOrigin(event.origin);
+        setSourceWindow(event.source as Window);
+        setChainId(event.data.chainId);
+
+        const requestAccount = await retrieveSingleAccount(
+          COSMOS,
+          event.data.chainId,
+          signerAddress,
+        );
+        
+        setDisplayAccount(requestAccount);
+        setIsLoading(false);
+      } catch (err) {
+        console.error('Error preparing sign request:', err);
+        setIsLoading(false);
+      }
+    };
+
+    window.addEventListener('message', handleCosmosSignMessage);
+    return () => window.removeEventListener('message', handleCosmosSignMessage);
+  }, []);
+
+  useEffect(() => {
+    navigation.setOptions({
+      // eslint-disable-next-line react/no-unstable-nested-components
+      header: ({ options, back }) => {
+        const title = getHeaderTitle(options, 'Sign Message');
+
+        return (
+          <Appbar.Header>
+            {back && (
+              <Appbar.BackAction
+                onPress={async () => {
+                  await rejectRequestHandler();
+                  navigation.navigate('Home');
+                }}
+              />
+            )}
+            <Appbar.Content title={title} />
+          </Appbar.Header>
+        );
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation, route.name]);
+
+  return (
+    <>
+      {isLoading ? (
+        <View style={styles.spinnerContainer}>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
+      ) : (
+        <>
+          <ScrollView contentContainerStyle={styles.appContainer}>
+            <AccountDetails account={displayAccount} />
+            <View style={styles.requestMessage}>
+              <Text variant="bodyLarge">{message}</Text>
+            </View>
+          </ScrollView>
+          <View style={styles.buttonContainer}>
+            <Button
+              mode="contained"
+              onPress={signMessageHandler}
+              loading={isApproving}
+              disabled={isApproving}>
+              Yes
+            </Button>
+            <Button
+              mode="contained"
+              onPress={rejectRequestHandler}
+              buttonColor="#B82B0D">
+              No
+            </Button>
+          </View>
+        </>
+      )}
+    </>
+  );
+};
+
+export default SignMessageEmbed;

src/types.ts

@@ -40,6 +40,7 @@ export type StackParamsList = {
   };
   "wallet-embed": undefined;
   "auto-sign-in": undefined;
+  "sign-message-embed": undefined;
 };
 
 export type Account = {

src/utils/constants.ts

@@ -18,6 +18,18 @@ export const DEFAULT_NETWORKS: NetworksFormData[] = [
     gasPrice: '0.001',
     isDefault: true,
   },
+  {
+    chainId: 'zenith-testnet',
+    networkName: 'zenithd testnet',
+    namespace: COSMOS,
+    rpcUrl: 'http://127.0.0.1:26657',
+    blockExplorerUrl: '',
+    nativeDenom: 'znt',
+    addressPrefix: 'zenith',
+    coinType: '118',
+    gasPrice: '0.01',
+    isDefault: true,
+  },
   {
     chainId: 'laconic_9000-1',
     networkName: 'laconicd',