[WIP] Implement token transfer for android webview #1

Closed
nabarun wants to merge 2 commits from as-android-transfer into pj-sign-msg-android
5 changed files with 411 additions and 146 deletions

12
src/global.d.ts vendored
View File

@ -14,10 +14,22 @@ declare global {
// Called when accounts are ready for use // Called when accounts are ready for use
onAccountsReady?: () => void; onAccountsReady?: () => void;
// Called when transfer is successfully completed
onTransferComplete?: (result: string) => void;
// Called when transfer fails
onTransferError?: (error: string) => void;
// Called when transfer is cancelled
onTransferCancelled?: () => void;
}; };
// Handles incoming signature requests from Android // Handles incoming signature requests from Android
receiveSignRequestFromAndroid?: (message: string) => void; receiveSignRequestFromAndroid?: (message: string) => void;
// Handles incoming transfer requests from Android
receiveTransferRequestFromAndroid?: (to: string, amount: string) => void;
} }
} }

View File

@ -6,6 +6,7 @@ import { useAccounts } from '../context/AccountsContext';
import { useNetworks } from '../context/NetworksContext'; import { useNetworks } from '../context/NetworksContext';
import { StackParamsList } from '../types'; import { StackParamsList } from '../types';
import useGetOrCreateAccounts from './useGetOrCreateAccounts'; import useGetOrCreateAccounts from './useGetOrCreateAccounts';
import { retrieveAccountsForNetwork } from '../utils/accounts';
export const useWebViewHandler = () => { export const useWebViewHandler = () => {
// Navigation and context hooks // Navigation and context hooks
@ -70,12 +71,106 @@ export const useWebViewHandler = () => {
} }
}, [selectedNetwork, accounts, currentIndex, navigation]); }, [selectedNetwork, accounts, currentIndex, navigation]);
// Handle incoming transfer requests
const navigateToTransfer = useCallback(async (to: string, amount: string) => {
if (!accounts || accounts.length === 0) {
console.error('No accounts available');
if (window.Android?.onTransferError) {
window.Android.onTransferError('No accounts available');
}
return;
}
const currentAccount = accounts[currentIndex];
if (!currentAccount) {
console.error('Current account not found');
if (window.Android?.onTransferError) {
window.Android.onTransferError('Current account not found');
}
return;
}
// Use Cosmos Hub Testnet network
const cosmosHubTestnet = {
namespace: 'cosmos',
chainId: 'provider',
addressPrefix: 'cosmos'
};
try {
// Get all accounts for Cosmos Hub Testnet
const cosmosAccounts = await retrieveAccountsForNetwork(
`${cosmosHubTestnet.namespace}:${cosmosHubTestnet.chainId}`,
'0' // Use the first account
);
if (!cosmosAccounts || cosmosAccounts.length === 0) {
console.error('No Cosmos Hub Testnet accounts found');
if (window.Android?.onTransferError) {
window.Android.onTransferError('No Cosmos Hub Testnet accounts found');
}
return;
}
const cosmosAccount = cosmosAccounts[0]; // Use the first account
const path = `/transfer/${cosmosHubTestnet.namespace}/${cosmosHubTestnet.chainId}/${cosmosAccount.address}/${to}/${amount}`;
const pathRegex = /^\/transfer\/(eip155|cosmos)\/(.+)\/(.+)\/(.+)\/(.+)$/;
if (!pathRegex.test(path)) {
console.error('Path does not match expected pattern:', path);
if (window.Android?.onTransferError) {
window.Android.onTransferError('Invalid path format');
}
return;
}
const match = path.match(pathRegex);
if (!match) {
console.error('Failed to parse path:', path);
if (window.Android?.onTransferError) {
window.Android.onTransferError('Failed to parse path');
}
return;
}
navigation.reset({
index: 0,
routes: [
{
name: 'ApproveTransfer',
path: `/transfer/${cosmosHubTestnet.namespace}/${cosmosHubTestnet.chainId}/${cosmosAccount.address}/${to}/${amount}`,
params: {
namespace: cosmosHubTestnet.namespace,
chainId: `${cosmosHubTestnet.namespace}:${cosmosHubTestnet.chainId}`,
transaction: {
from: cosmosAccount.address,
to: to,
value: amount,
data: ''
},
accountInfo: cosmosAccount,
},
},
],
});
} catch (error) {
console.error('Navigation error:', error);
if (window.Android?.onTransferError) {
window.Android.onTransferError(`Navigation error: ${error}`);
}
}
}, [accounts, currentIndex, navigation]);
useEffect(() => { useEffect(() => {
// Assign the function to the window object // Assign the function to the window object
window.receiveSignRequestFromAndroid = navigateToSignRequest; window.receiveSignRequestFromAndroid = navigateToSignRequest;
window.receiveTransferRequestFromAndroid = navigateToTransfer;
return () => { return () => {
window.receiveSignRequestFromAndroid = undefined; window.receiveSignRequestFromAndroid = undefined;
window.receiveTransferRequestFromAndroid = undefined;
}; };
}, [navigateToSignRequest]); // Only the function reference as dependency }, [navigateToSignRequest, navigateToTransfer]); // Only the function reference as dependency
}; };

View File

@ -46,24 +46,29 @@ export const MEMO = 'Sending signed tx from Laconic Wallet';
// Reference: https://ethereum.org/en/developers/docs/gas/#what-is-gas-limit // Reference: https://ethereum.org/en/developers/docs/gas/#what-is-gas-limit
const ETH_MINIMUM_GAS = 21000; const ETH_MINIMUM_GAS = 21000;
type SignRequestProps = NativeStackScreenProps< type ApproveTransferProps = NativeStackScreenProps<StackParamsList, 'ApproveTransfer'> & {
StackParamsList, route: {
'ApproveTransfer' params: {
>; transaction: any;
requestEvent?: {
params: {
chainId: string;
request: {
method: string;
};
};
};
requestSessionData?: any;
chainId?: string;
};
path?: string;
};
};
const ApproveTransfer = ({ route }: SignRequestProps) => { const ApproveTransfer = ({ route }: ApproveTransferProps) => {
const { networksData } = useNetworks(); const { networksData } = useNetworks();
const { web3wallet } = useWalletConnect(); const { web3wallet } = useWalletConnect();
const requestSession = route.params.requestSessionData;
const requestName = requestSession.peer.metadata.name;
const requestIcon = requestSession.peer.metadata.icons[0];
const requestURL = requestSession.peer.metadata.url;
const transaction = route.params.transaction;
const requestEvent = route.params.requestEvent;
const chainId = requestEvent.params.chainId;
const requestMethod = requestEvent.params.request.method;
const [account, setAccount] = useState<Account>(); const [account, setAccount] = useState<Account>();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [balance, setBalance] = useState<string>(''); const [balance, setBalance] = useState<string>('');
@ -80,6 +85,80 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
const [ethMaxPriorityFee, setEthMaxPriorityFee] = const [ethMaxPriorityFee, setEthMaxPriorityFee] =
useState<BigNumber | null>(); useState<BigNumber | null>();
const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>();
// Extract data from route params or path
const requestSession = route.params?.requestSessionData;
const requestName = requestSession?.peer?.metadata?.name;
const requestIcon = requestSession?.peer?.metadata?.icons?.[0];
const requestURL = requestSession?.peer?.metadata?.url;
const transaction = route.params?.transaction;
const requestEvent = route.params?.requestEvent;
const chainId = requestEvent?.params?.chainId || route.params?.chainId;
const requestMethod = requestEvent?.params?.request?.method;
const sanitizePath = useCallback((path: string) => {
const regex = /^\/transfer\/(eip155|cosmos)\/(.+)\/(.+)\/(.+)\/(.+)$/;
const match = path.match(regex);
if (match) {
const [, pathNamespace, pathChainId, pathAddress, pathTo, pathAmount] = match;
return {
namespace: pathNamespace,
chainId: pathChainId,
address: pathAddress,
to: pathTo,
amount: pathAmount,
};
} else {
navigation.navigate('InvalidPath');
}
return null;
}, [navigation]);
const retrieveData = useCallback(async (requestNamespace: string, requestChainId: string, requestAddress: string) => {
const requestAccount = await retrieveSingleAccount(
requestNamespace,
requestChainId,
requestAddress,
);
if (!requestAccount) {
navigation.navigate('InvalidPath');
return;
}
setAccount(requestAccount);
}, [navigation]);
useEffect(() => {
if (route.path) {
const sanitizedRoute = sanitizePath(route.path);
if (sanitizedRoute) {
retrieveData(
sanitizedRoute.namespace,
sanitizedRoute.chainId,
sanitizedRoute.address,
);
return;
}
}
if (requestEvent) {
const requestedNetwork = networksData.find(
networkData => {
return `${networkData.namespace}:${networkData.chainId}` === chainId;
}
);
if (requestedNetwork && transaction?.from) {
retrieveData(
requestedNetwork.namespace,
requestedNetwork.chainId,
transaction.from,
);
}
}
}, [retrieveData, sanitizePath, route, networksData, requestEvent, chainId, transaction]);
const isSufficientFunds = useMemo(() => { const isSufficientFunds = useMemo(() => {
if (!transaction.value) { if (!transaction.value) {
return; return;
@ -139,7 +218,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
).privKey; ).privKey;
const sender = await DirectSecp256k1Wallet.fromKey( const sender = await DirectSecp256k1Wallet.fromKey(
Buffer.from(cosmosPrivKey.split('0x')[1], 'hex'), Uint8Array.from(Buffer.from(cosmosPrivKey.split('0x')[1], 'hex')),
requestedNetwork?.addressPrefix, requestedNetwork?.addressPrefix,
); );
@ -185,26 +264,6 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
} }
}, [requestedNetwork, namespace]); }, [requestedNetwork, namespace]);
const navigation =
useNavigation<NativeStackNavigationProp<StackParamsList>>();
const retrieveData = useCallback(
async (requestAddress: string) => {
const requestAccount = await retrieveSingleAccount(
requestedNetwork!.namespace,
requestedNetwork!.chainId,
requestAddress,
);
if (!requestAccount) {
navigation.navigate('InvalidPath');
return;
}
setAccount(requestAccount);
},
[navigation, requestedNetwork],
);
useEffect(() => { useEffect(() => {
// Set loading to false when gas values for requested chain are fetched // Set loading to false when gas values for requested chain are fetched
// If requested chain is EVM compatible, the cosmos gas values will be undefined and vice-versa, hence the condition checks only one of them at the same time // If requested chain is EVM compatible, the cosmos gas values will be undefined and vice-versa, hence the condition checks only one of them at the same time
@ -246,9 +305,6 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
requestedNetwork, requestedNetwork,
ethMaxFee, ethMaxFee,
]); ]);
useEffect(() => {
retrieveData(transaction.from!);
}, [retrieveData, transaction]);
const isEIP1559 = useMemo(() => { const isEIP1559 = useMemo(() => {
if (cosmosGasLimit) { if (cosmosGasLimit) {
@ -260,6 +316,101 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
return false; return false;
}, [cosmosGasLimit, ethMaxFee, ethMaxPriorityFee]); }, [cosmosGasLimit, ethMaxFee, ethMaxPriorityFee]);
const handleIntent = async () => {
if (!account) {
throw new Error('Account is not valid');
}
if (route.path) {
const sanitizedRoute = sanitizePath(route.path);
if (!sanitizedRoute) {
throw new Error('Invalid path');
}
const requestedNetwork = networksData.find(
networkData => networkData.chainId === sanitizedRoute.chainId,
);
if (!requestedNetwork) {
throw new Error('Network not found');
}
const cosmosPrivKey = (
await getPathKey(
`${requestedNetwork.namespace}:${requestedNetwork.chainId}`,
account.index,
)
).privKey;
const sender = await DirectSecp256k1Wallet.fromKey(
Uint8Array.from(Buffer.from(cosmosPrivKey.split('0x')[1], 'hex')),
requestedNetwork.addressPrefix,
);
const client = await SigningStargateClient.connectWithSigner(
requestedNetwork.rpcUrl!,
sender,
);
const sendMsg: MsgSendEncodeObject = {
typeUrl: '/cosmos.bank.v1beta1.MsgSend',
value: {
fromAddress: account.address,
toAddress: sanitizedRoute.to,
amount: [
{
amount: String(sanitizedRoute.amount),
denom: requestedNetwork.nativeDenom!,
},
],
},
};
const gasEstimation = await client.simulate(
account.address,
[sendMsg],
MEMO,
);
const gasLimit = String(
Math.round(gasEstimation * Number(process.env.REACT_APP_GAS_ADJUSTMENT)),
);
const gasPrice = GasPrice.fromString(
requestedNetwork.gasPrice! + requestedNetwork.nativeDenom,
);
const cosmosFees = calculateFee(Number(gasLimit), gasPrice);
const result = await client.signAndBroadcast(
account.address,
[sendMsg],
{
amount: [
{
amount: cosmosFees.amount[0].amount,
denom: requestedNetwork.nativeDenom!,
},
],
gas: gasLimit,
},
MEMO,
);
// Convert BigInt values to strings before sending to Android
const serializedResult = JSON.stringify(result, (key, value) =>
typeof value === 'bigint' ? value.toString() : value
);
// Send the result back to Android and close dialog
if (window.Android?.onTransferComplete) {
window.Android.onTransferComplete(serializedResult);
} else {
alert(`Transaction: ${serializedResult}`);
}
}
};
const acceptRequestHandler = async () => { const acceptRequestHandler = async () => {
setIsTxLoading(true); setIsTxLoading(true);
try { try {
@ -267,77 +418,80 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
throw new Error('account not found'); throw new Error('account not found');
} }
if (ethGasLimit && ethGasLimit.lt(ETH_MINIMUM_GAS)) { if (requestEvent) {
throw new Error(`Atleast ${ETH_MINIMUM_GAS} gas limit is required`); // Handle WalletConnect request
} if (ethGasLimit && ethGasLimit.lt(ETH_MINIMUM_GAS)) {
throw new Error(`Atleast ${ETH_MINIMUM_GAS} gas limit is required`);
}
if (ethMaxFee && ethMaxPriorityFee && ethMaxFee.lte(ethMaxPriorityFee)) { if (ethMaxFee && ethMaxPriorityFee && ethMaxFee.lte(ethMaxPriorityFee)) {
throw new Error( throw new Error(
`Max fee per gas (${ethMaxFee.toNumber()}) cannot be lower than or equal to max priority fee per gas (${ethMaxPriorityFee.toNumber()})`, `Max fee per gas (${ethMaxFee.toNumber()}) cannot be lower than or equal to max priority fee per gas (${ethMaxPriorityFee.toNumber()})`,
);
}
let options: WalletConnectRequests;
switch (requestMethod) {
case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
if (
ethMaxFee === undefined ||
ethMaxPriorityFee === undefined ||
ethGasPrice === undefined
) {
throw new Error('Gas values not found');
}
options = {
type: 'eth_sendTransaction',
provider: provider!,
ethGasLimit: BigNumber.from(ethGasLimit),
ethGasPrice: ethGasPrice ? ethGasPrice.toHexString() : null,
maxFeePerGas: ethMaxFee,
maxPriorityFeePerGas: ethMaxPriorityFee,
};
break;
case COSMOS_METHODS.COSMOS_SEND_TOKENS:
if (!cosmosStargateClient) {
throw new Error('Cosmos stargate client not found');
}
options = {
type: 'cosmos_sendTokens',
signingStargateClient: cosmosStargateClient,
cosmosFee: {
amount: [
{
amount: fees,
denom: requestedNetwork!.nativeDenom!,
},
],
gas: cosmosGasLimit,
},
sendMsg,
memo: MEMO,
};
break;
default:
throw new Error('Invalid method');
}
const response = await approveWalletConnectRequest(
requestEvent,
account!,
namespace,
requestedNetwork!.chainId,
options,
); );
const { topic } = requestEvent;
await web3wallet!.respondSessionRequest({ topic, response });
navigation.navigate('Home');
} else {
// Handle direct intent
await handleIntent();
navigation.navigate('Home');
} }
let options: WalletConnectRequests;
switch (requestMethod) {
case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
if (
ethMaxFee === undefined ||
ethMaxPriorityFee === undefined ||
ethGasPrice === undefined
) {
throw new Error('Gas values not found');
}
options = {
type: 'eth_sendTransaction',
provider: provider!,
ethGasLimit: BigNumber.from(ethGasLimit),
ethGasPrice: ethGasPrice ? ethGasPrice.toHexString() : null,
maxFeePerGas: ethMaxFee,
maxPriorityFeePerGas: ethMaxPriorityFee,
};
break;
case COSMOS_METHODS.COSMOS_SEND_TOKENS:
if (!cosmosStargateClient) {
throw new Error('Cosmos stargate client not found');
}
options = {
type: 'cosmos_sendTokens',
signingStargateClient: cosmosStargateClient,
// StdFee object
cosmosFee: {
// This amount is total fees required for transaction
amount: [
{
amount: fees,
denom: requestedNetwork!.nativeDenom!,
},
],
gas: cosmosGasLimit,
},
sendMsg,
memo: MEMO,
};
break;
default:
throw new Error('Invalid method');
}
const response = await approveWalletConnectRequest(
requestEvent,
account,
namespace,
requestedNetwork!.chainId,
options,
);
const { topic } = requestEvent;
await web3wallet!.respondSessionRequest({ topic, response });
navigation.navigate('Home');
} catch (error) { } catch (error) {
if (!(error instanceof Error)) { if (!(error instanceof Error)) {
throw error; throw error;
@ -350,20 +504,26 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
}; };
const rejectRequestHandler = async () => { const rejectRequestHandler = async () => {
const response = rejectWalletConnectRequest(requestEvent); if (requestEvent) {
const { topic } = requestEvent; const response = rejectWalletConnectRequest(requestEvent);
await web3wallet!.respondSessionRequest({ const { topic } = requestEvent;
topic, await web3wallet!.respondSessionRequest({
response, topic,
}); response,
});
}
navigation.navigate('Home'); if (window.Android?.onTransferCancelled) {
window.Android.onTransferCancelled();
} else {
navigation.navigate('Home');
}
}; };
useEffect(() => { useEffect(() => {
const getAccountBalance = async () => { const getAccountBalance = async () => {
try { try {
if (!account) { if (!account || !requestedNetwork) {
return; return;
} }
if (namespace === EIP155) { if (namespace === EIP155) {
@ -373,20 +533,20 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
const fetchedBalance = await provider.getBalance(account.address); const fetchedBalance = await provider.getBalance(account.address);
setBalance(fetchedBalance ? fetchedBalance.toString() : '0'); setBalance(fetchedBalance ? fetchedBalance.toString() : '0');
} else { } else {
const cosmosBalance = await cosmosStargateClient?.getBalance( if (!cosmosStargateClient) {
return;
}
const cosmosBalance = await cosmosStargateClient.getBalance(
account.address, account.address,
requestedNetwork!.nativeDenom!.toLowerCase(), requestedNetwork.nativeDenom!.toLowerCase(),
); );
setBalance(cosmosBalance?.amount || '0');
setBalance(cosmosBalance?.amount!);
} }
} catch (error) { } catch (error) {
if (!(error instanceof Error)) { console.error('Error fetching balance:', error);
throw error; setBalance('0');
} // Don't show error dialog for balance fetch failures
// Just set balance to 0 and let the transaction proceed
setTxError(error.message);
setIsTxErrorDialogOpen(true);
} }
}; };
@ -508,16 +668,18 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
) : ( ) : (
<> <>
<ScrollView contentContainerStyle={styles.appContainer}> <ScrollView contentContainerStyle={styles.appContainer}>
<View style={styles.dappDetails}> {requestSession && (
{requestIcon && ( <View style={styles.dappDetails}>
<Image {requestIcon && (
style={styles.dappLogo} <Image
source={requestIcon ? { uri: requestIcon } : undefined} style={styles.dappLogo}
/> source={requestIcon ? { uri: requestIcon } : undefined}
)} />
<Text>{requestName}</Text> )}
<Text variant="bodyMedium">{requestURL}</Text> <Text>{requestName}</Text>
</View> <Text variant="bodyMedium">{requestURL}</Text>
</View>
)}
<View style={styles.dataBoxContainer}> <View style={styles.dataBoxContainer}>
<Text style={styles.dataBoxLabel}>From</Text> <Text style={styles.dataBoxLabel}>From</Text>
<View style={styles.dataBox}> <View style={styles.dataBox}>
@ -528,11 +690,7 @@ const ApproveTransfer = ({ route }: SignRequestProps) => {
label={`Balance (${ label={`Balance (${
namespace === EIP155 ? 'wei' : requestedNetwork!.nativeDenom namespace === EIP155 ? 'wei' : requestedNetwork!.nativeDenom
})`} })`}
data={ data={balance || '0'}
balance === '' || balance === undefined
? 'Loading balance...'
: `${balance}`
}
/> />
{transaction && ( {transaction && (
<View style={styles.approveTransfer}> <View style={styles.approveTransfer}>

View File

@ -41,10 +41,10 @@ export const DEFAULT_NETWORKS: NetworksFormData[] = [
isDefault: true, isDefault: true,
}, },
{ {
chainId: 'theta-testnet-001', chainId: 'provider',
networkName: COSMOS_TESTNET_CHAINS['cosmos:theta-testnet-001'].name, networkName: COSMOS_TESTNET_CHAINS['cosmos:provider'].name,
namespace: COSMOS, namespace: COSMOS,
rpcUrl: COSMOS_TESTNET_CHAINS['cosmos:theta-testnet-001'].rpc, rpcUrl: COSMOS_TESTNET_CHAINS['cosmos:provider'].rpc,
blockExplorerUrl: '', blockExplorerUrl: '',
nativeDenom: 'uatom', nativeDenom: 'uatom',
addressPrefix: 'cosmos', addressPrefix: 'cosmos',

View File

@ -19,10 +19,10 @@ export const COSMOS_TESTNET_CHAINS: Record<
namespace: string; namespace: string;
} }
> = { > = {
'cosmos:theta-testnet-001': { 'cosmos:provider': {
chainId: 'theta-testnet-001', chainId: 'provider',
name: 'Cosmos Hub Testnet', name: 'Cosmos Hub Testnet',
rpc: 'https://rpc-t.cosmos.nodestake.top', rpc: 'https://rpc-rs.cosmos.nodestake.top',
namespace: 'cosmos', namespace: 'cosmos',
}, },
}; };