Compare commits

..
3 Commits
Author SHA1 Message Date
b2eafe59b3 Add hooks to add accounts and export private key from iframe (#26)
Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: AdityaSalunkhe21 <adityasalunkhe2204@gmail.com>
Reviewed-on: #26
Co-authored-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
Co-committed-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
2025-04-25 14:45:46 +00:00
713f8bc0bb Add iframe component for signing messages (#25)
Part of https://www.notion.so/Gentx-like-attestation-mechanism-to-add-validators-at-genesis-time-19da6b22d47280ecbf1fe657c241ff59

Co-authored-by: IshaVenikar <ishavenikar7@gmail.com>
Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: AdityaSalunkhe21 <adityasalunkhe2204@gmail.com>
Reviewed-on: #25
Co-authored-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
Co-committed-by: ishavenikar <ishavenikar@noreply.git.vdb.to>
2025-04-25 08:16:44 +00:00
6d5fcf798d Handle android webview messages for sign request (#24)
Part of https://www.notion.so/Integrate-eSIM-buy-flow-into-app-18aa6b22d47280d4a77cf1b27e2ba193

Co-authored-by: pranavjadhav007 <jadhavpranav89@gmail.com>
Co-authored-by: AdityaSalunkhe21 <adityasalunkhe2204@gmail.com>
Reviewed-on: #24
2025-04-15 14:25:11 +00:00
17 changed files with 513 additions and 23 deletions
+2 -1
View File
@@ -5,4 +5,5 @@ REACT_APP_DEFAULT_GAS_PRICE=0.025
REACT_APP_GAS_ADJUSTMENT=2
REACT_APP_LACONICD_RPC_URL=https://laconicd-sapo.laconic.com
REACT_APP_DEPLOY_APP_URL=
# Example: https://example-url-1.com,https://example-url-2.com
REACT_APP_ALLOWED_URLS=
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "web-wallet",
"version": "0.1.3",
"version": "0.1.4",
"private": true,
"dependencies": {
"@cerc-io/registry-sdk": "^0.2.5",
+15
View File
@@ -40,6 +40,10 @@ import { WalletEmbed } from "./screens/WalletEmbed";
import { AutoSignIn } from "./screens/AutoSignIn";
import { checkSufficientFunds, getPathKey, sendMessage } from "./utils/misc";
import useAccountsData from "./hooks/useAccountsData";
import { useWebViewHandler } from "./hooks/useWebViewHandler";
import SignRequestEmbed from "./screens/SignRequestEmbed";
import useAddAccountEmbed from "./hooks/useAddAccountEmbed";
import useExportPKEmbed from "./hooks/useExportPrivateKeyEmbed";
const Stack = createStackNavigator<StackParamsList>();
@@ -279,6 +283,10 @@ const App = (): React.JSX.Element => {
const showWalletConnect = useMemo(() => accounts.length > 0, [accounts]);
useWebViewHandler();
useAddAccountEmbed();
useExportPKEmbed();
return (
<Surface style={styles.appSurface}>
<Stack.Navigator
@@ -387,6 +395,13 @@ const App = (): React.JSX.Element => {
header: () => <></>,
}}
/>
<Stack.Screen
name="sign-request-embed"
component={SignRequestEmbed}
options={{
header: () => <Header title="Wallet" />,
}}
/>
</Stack.Navigator>
<PairingModal
visible={modalVisible}
+1 -1
View File
@@ -4,7 +4,7 @@ import { Account } from '../types';
const AccountsContext = createContext<{
accounts: Account[];
setAccounts: (account: Account[]) => void;
setAccounts: React.Dispatch<React.SetStateAction<Account[]>>;
currentIndex: number;
setCurrentIndex: (index: number) => void;
}>({
+24
View File
@@ -0,0 +1,24 @@
// Extends the Window interface for Android WebView communication
declare global {
interface Window {
// Android bridge callbacks for signature and accounts related events
Android?: {
// Called when signature is successfully generated
onSignatureComplete?: (signature: string) => void;
// Called when signature generation fails
onSignatureError?: (error: string) => void;
// Called when signature process is cancelled
onSignatureCancelled?: () => void;
// Called when accounts are ready for use
onAccountsReady?: () => void;
};
// Handles incoming signature requests from Android
receiveSignRequestFromAndroid?: (message: string) => void;
}
}
export {};
+58
View File
@@ -0,0 +1,58 @@
import { useEffect, useCallback } from 'react';
import { useNetworks } from '../context/NetworksContext';
import { sendMessage } from '../utils/misc';
import useAccountsData from '../hooks/useAccountsData';
import { addAccount } from '../utils/accounts';
import { useAccounts } from '../context/AccountsContext';
import { Account, NetworksDataState } from '../types';
const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
const useAddAccountEmbed = () => {
const { networksData } = useNetworks();
const { setAccounts, setCurrentIndex } = useAccounts();
const { getAccountsData } = useAccountsData();
const addAccountHandler = useCallback(async (network: NetworksDataState) => {
const newAccount = await addAccount(network);
if (newAccount) {
setAccounts(prev => [...prev, newAccount]);
setCurrentIndex(newAccount.index);
}
}, [setAccounts, setCurrentIndex]);
useEffect(() => {
const handleAddAccount = async (event: MessageEvent) => {
if (event.data.type !== 'ADD_ACCOUNT') return;
if (!REACT_APP_ALLOWED_URLS) {
console.log('Unauthorized app origin:', event.origin);
return;
}
const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
if (!allowedUrls.includes(event.origin)) {
console.log('Unauthorized app.');
return;
}
const network = networksData.find(network => network.chainId === event.data.chainId);
await addAccountHandler(network!);
const updatedAccounts = await getAccountsData(event.data.chainId);
const addresses = updatedAccounts.map((account: Account) => account.address);
sendMessage(event.source as Window, 'ADD_ACCOUNT_RESPONSE', addresses, event.origin);
};
window.addEventListener('message', handleAddAccount);
return () => {
window.removeEventListener('message', handleAddAccount);
};
}, [networksData, getAccountsData, addAccountHandler]);
};
export default useAddAccountEmbed;
+42
View File
@@ -0,0 +1,42 @@
import { useEffect } from 'react';
import { useAccounts } from '../context/AccountsContext';
import { getPathKey, sendMessage } from '../utils/misc';
const useExportPKEmbed = () => {
const { accounts } = useAccounts();
useEffect(() => {
const handleMessage = async (event: MessageEvent) => {
const { type, chainId, address } = event.data;
if (type !== 'REQUEST_ACCOUNT_PK') return;
try {
const selectedAccount = accounts.find(account => account.address === address);
if (!selectedAccount) {
throw new Error("Account not found")
}
const pathKey = await getPathKey(chainId, selectedAccount.index);
const privateKey = pathKey.privKey;
sendMessage(
event.source as Window,
'ACCOUNT_PK_DATA',
{ privateKey },
event.origin,
);
} catch (error) {
console.error('Error fetching private key:', error);
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}, [accounts]);
};
export default useExportPKEmbed;
+57 -10
View File
@@ -1,28 +1,52 @@
import { useEffect } from "react";
import { useEffect, useCallback } from "react";
import { createWallet } from "../utils/accounts";
import { sendMessage } from "../utils/misc";
import useAccountsData from "./useAccountsData";
import { useNetworks } from "../context/NetworksContext";
import { useAccounts } from "../context/AccountsContext";
const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
const useGetOrCreateAccounts = () => {
const { networksData } = useNetworks();
const { getAccountsData } = useAccountsData();
const { setAccounts } = useAccounts();
// Wrap the function in useCallback to prevent recreation on each render
const getOrCreateAccountsForChain = useCallback(async (chainId: string) => {
let accountsData = await getAccountsData(chainId);
if (accountsData.length === 0) {
console.log("Accounts not found, creating wallet...");
await createWallet(networksData);
accountsData = await getAccountsData(chainId);
}
// Update the AccountsContext with the new accounts
setAccounts(accountsData);
return accountsData;
}, [networksData, getAccountsData, setAccounts]);
useEffect(() => {
const handleCreateAccounts = async (event: MessageEvent) => {
if (event.data.type !== 'REQUEST_CREATE_OR_GET_ACCOUNTS') return;
let accountsData = await getAccountsData(event.data.chainId);
if (accountsData.length === 0) {
console.log("Accounts not found, creating wallet...");
await createWallet(networksData);
// Re-fetch newly created accounts
accountsData = await getAccountsData(event.data.chainId);
if (!REACT_APP_ALLOWED_URLS) {
console.log('Allowed URLs are not set');
return;
}
const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
if (!allowedUrls.includes(event.origin)) {
console.log('Unauthorized app.');
return;
}
const accountsData = await getOrCreateAccountsForChain(event.data.chainId);
sendMessage(
event.source as Window, 'WALLET_ACCOUNTS_DATA',
accountsData.map(account => account.address),
@@ -30,12 +54,35 @@ const useGetOrCreateAccounts = () => {
);
};
const autoCreateAccounts = async () => {
const defaultChainId = networksData[0]?.chainId;
if (!defaultChainId) {
console.log('useGetOrCreateAccounts: No default chainId found');
return;
}
const accounts = await getOrCreateAccountsForChain(defaultChainId);
// Only notify Android when we actually have accounts
if (accounts.length > 0 && window.Android?.onAccountsReady) {
window.Android.onAccountsReady();
} else {
console.log('No accounts created or Android bridge not available');
}
};
window.addEventListener('message', handleCreateAccounts);
const isAndroidWebView = !!(window.Android);
if (isAndroidWebView) {
autoCreateAccounts();
}
return () => {
window.removeEventListener('message', handleCreateAccounts);
};
}, [networksData, getAccountsData]);
}, [networksData, getAccountsData, getOrCreateAccountsForChain]);
};
export default useGetOrCreateAccounts;
+81
View File
@@ -0,0 +1,81 @@
import { useEffect, useCallback } from 'react';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useAccounts } from '../context/AccountsContext';
import { useNetworks } from '../context/NetworksContext';
import { StackParamsList } from '../types';
import useGetOrCreateAccounts from './useGetOrCreateAccounts';
export const useWebViewHandler = () => {
// Navigation and context hooks
const navigation = useNavigation<NativeStackNavigationProp<StackParamsList>>();
const { selectedNetwork } = useNetworks();
const { accounts, currentIndex } = useAccounts();
// Initialize accounts
useGetOrCreateAccounts();
// Core navigation handler
const navigateToSignRequest = useCallback((message: string) => {
try {
// Validation checks
if (!selectedNetwork?.namespace || !selectedNetwork?.chainId) {
window.Android?.onSignatureError?.('Invalid network configuration');
return;
}
if (!accounts?.length) {
window.Android?.onSignatureError?.('No accounts available');
return;
}
const currentAccount = accounts[currentIndex];
if (!currentAccount) {
window.Android?.onSignatureError?.('Current account not found');
return;
}
// Create the path and validate with regex
const path = `/sign/${selectedNetwork.namespace}/${selectedNetwork.chainId}/${currentAccount.address}/${encodeURIComponent(message)}`;
const pathRegex = /^\/sign\/(eip155|cosmos)\/(.+)\/(.+)\/(.+)$/;
const match = path.match(pathRegex);
if (!match) {
window.Android?.onSignatureError?.('Invalid signing path');
return;
}
const [, pathNamespace, pathChainId, pathAddress, pathMessage] = match;
// Reset navigation stack and navigate to sign request
navigation.reset({
index: 0,
routes: [
{
name: 'SignRequest',
path,
params: {
namespace: pathNamespace,
chainId: pathChainId,
address: pathAddress,
message: decodeURIComponent(pathMessage),
accountInfo: currentAccount,
},
},
],
});
} catch (error) {
window.Android?.onSignatureError?.(`Navigation error: ${error}`);
}
}, [selectedNetwork, accounts, currentIndex, navigation]);
useEffect(() => {
// Assign the function to the window object
window.receiveSignRequestFromAndroid = navigateToSignRequest;
return () => {
window.receiveSignRequestFromAndroid = undefined;
};
}, [navigateToSignRequest]); // Only the function reference as dependency
};
+10 -1
View File
@@ -7,6 +7,8 @@ import { sendMessage } from '../utils/misc';
import useAccountsData from '../hooks/useAccountsData';
import useGetOrCreateAccounts from '../hooks/useGetOrCreateAccounts';
const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
export const AutoSignIn = () => {
const { networksData } = useNetworks();
@@ -16,7 +18,14 @@ export const AutoSignIn = () => {
const handleSignIn = async (event: MessageEvent) => {
if (event.data.type !== 'AUTO_SIGN_IN') return;
if (event.origin !== process.env.REACT_APP_DEPLOY_APP_URL) {
if (!REACT_APP_ALLOWED_URLS) {
console.log('Allowed URLs are not set');
return;
}
const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
if (!allowedUrls.includes(event.origin)) {
console.log('Unauthorized app.');
return;
}
+12 -2
View File
@@ -202,7 +202,13 @@ const SignRequest = ({ route }: SignRequestProps) => {
chainId,
accountId: account.index,
});
alert(`Signature ${signedMessage}`);
// Send the result back to Android and close dialog
if (window.Android?.onSignatureComplete) {
window.Android.onSignatureComplete(signedMessage || "");
} else {
alert(`Signature: ${signedMessage}`);
}
}
};
@@ -230,7 +236,11 @@ const SignRequest = ({ route }: SignRequestProps) => {
}
setIsRejecting(false);
navigation.navigate('Home');
if (window.Android?.onSignatureCancelled) {
window.Android.onSignatureCancelled();
} else {
navigation.navigate('Home');
}
};
useEffect(() => {
+189
View File
@@ -0,0 +1,189 @@
import React, { useCallback, 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';
const REACT_APP_ALLOWED_URLS = process.env.REACT_APP_ALLOWED_URLS;
type SignRequestProps = NativeStackScreenProps<StackParamsList, 'sign-request-embed'>;
const SignRequestEmbed = ({ 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 = useCallback(async () => {
if (sourceWindow && origin) {
sendMessage(
sourceWindow,
'ZENITH_SIGNED_MESSAGE',
{ error: 'User rejected the request' },
origin,
);
}
}, [sourceWindow, origin]);
useEffect(() => {
const handleCosmosSignMessage = async (event: MessageEvent) => {
if (event.data.type !== 'SIGN_ZENITH_MESSAGE') return;
if (!REACT_APP_ALLOWED_URLS) {
console.log('Allowed URLs are not set');
return;
}
const allowedUrls = REACT_APP_ALLOWED_URLS.split(',').map(url => url.trim());
if (!allowedUrls.includes(event.origin)) {
console.log('Unauthorized app.');
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>
);
},
});
}, [navigation, rejectRequestHandler]);
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 SignRequestEmbed;
+3
View File
@@ -13,8 +13,10 @@ export type StackParamsList = {
};
SignRequest: {
namespace: string;
chainId?: string;
address: string;
message: string;
accountInfo?: Account;
requestEvent?: Web3WalletTypes.SessionRequest;
requestSessionData?: SessionTypes.Struct;
};
@@ -38,6 +40,7 @@ export type StackParamsList = {
};
"wallet-embed": undefined;
"auto-sign-in": undefined;
"sign-request-embed": undefined;
};
export type Account = {
+12
View File
@@ -18,6 +18,18 @@ export const DEFAULT_NETWORKS: NetworksFormData[] = [
gasPrice: '0.001',
isDefault: true,
},
{
chainId: 'zenith-testnet',
networkName: 'zenithd testnet',
namespace: COSMOS,
rpcUrl: 'https://zenith-node-rpc.com',
blockExplorerUrl: '',
nativeDenom: 'znt',
addressPrefix: 'zenith',
coinType: '118',
gasPrice: '0.01',
isDefault: true,
},
{
chainId: 'laconic_9000-1',
networkName: 'laconicd',
@@ -10,7 +10,7 @@ services:
CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE:-0.025}
CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT:-2}
CERC_LACONICD_RPC_URL: ${CERC_LACONICD_RPC_URL:-https://laconicd.laconic.com}
CERC_DEPLOY_APP_URL: ${CERC_DEPLOY_APP_URL}
CERC_ALLOWED_URLS: ${CERC_ALLOWED_URLS}
command: ["bash", "/scripts/run.sh"]
volumes:
- ../config/app/run.sh:/scripts/run.sh
+2 -2
View File
@@ -10,14 +10,14 @@ echo "WALLET_CONNECT_ID: ${WALLET_CONNECT_ID}"
echo "CERC_DEFAULT_GAS_PRICE: ${CERC_DEFAULT_GAS_PRICE}"
echo "CERC_GAS_ADJUSTMENT: ${CERC_GAS_ADJUSTMENT}"
echo "CERC_LACONICD_RPC_URL: ${CERC_LACONICD_RPC_URL}"
echo "CERC_DEPLOY_APP_URL: ${CERC_DEPLOY_APP_URL}"
echo "CERC_ALLOWED_URLS: ${CERC_ALLOWED_URLS}"
# Build with required env
REACT_APP_WALLET_CONNECT_PROJECT_ID=$WALLET_CONNECT_ID \
REACT_APP_DEFAULT_GAS_PRICE=$CERC_DEFAULT_GAS_PRICE \
REACT_APP_GAS_ADJUSTMENT=$CERC_GAS_ADJUSTMENT \
REACT_APP_LACONICD_RPC_URL=$CERC_LACONICD_RPC_URL \
REACT_APP_DEPLOY_APP_URL=$CERC_DEPLOY_APP_URL \
REACT_APP_ALLOWED_URLS=$CERC_ALLOWED_URLS \
yarn build
# Define the directory and file path
@@ -49,6 +49,9 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
# WalletConnect project ID, same should be used in the laconic-wallet
WALLET_CONNECT_ID=
# Allowed urls is a comma separated list of allowed urls
CERC_ALLOWED_URLS=
# Optional
# WalletConnect code for hostname verification
@@ -63,10 +66,6 @@ Instructions for running the `laconic-wallet-web` using [laconic-so](https://git
# RPC endpoint of laconicd node (default: https://laconicd.laconic.com)
CERC_LACONICD_RPC_URL=
# Deploy app URL used for checking origin of the messages for auto-sign-in route
# Deploy app repo: https://git.vdb.to/cerc-io/snowballtools-base
CERC_DEPLOY_APP_URL=
```
## Start the deployment