Comment on page
✍
Signing a transaction
Want to implement your own style, but with all the functionality Portal offers? Use these functions to implement your own custom web3 UI for your users.
This example screen displays how the Portal Provider interacts with the MPC wallet and the blockchain.
The Provider has an input box to set a
toAddress for the transaction of sending 1 wei from our MPC wallet. The Provider then receives a signed transaction from our mobile MPC library and submits that to chain using the configured RPC url.NativeSendTx.tsx
1
import React, { FC, useState } from 'react'
2
import { Button, Text, TextInput, View } from 'react-native'
3
import { usePortal } from '@portal-hq/core'
4
5
/**
6
* In this example, we're using the `ethers` package.
7
* This is not included with any of the Portal packages.
8
*
9
* If you'd like to run this example yourself, you should
10
* manually install the `ethers` package.
11
*/
12
import { BigNumber } from 'ethers'
13
14
const NativeSendTx: FC = () => {
15
const portal = usePortal()
16
const [toAddress, setToAddress] = useState<string>('')
17
const [txHash, setTxHash] = useState<string>('')
18
19
const handleSend = async () => {
20
// Build a transaction to be sent
21
const transaction = {
22
data: '',
23
to: toAddress,
24
value: BigNumber.from('1').toHexString(),
25
gasPrice: '0x6000',
26
from: await portal.keychain.getAddress(),
27
}
28
29
// Use the Portal Web3 Provider to make requests
30
const newTxHash = await portal.provider.request({
31
method: 'eth_sendTransaction',
32
params: transaction,
33
})
34
35
setTxHash(newTxHash)
36
setToAddress('')
37
}
38
39
return (
40
<View>
41
<Text>Send 1 WEI</Text>
42
<TextInput
43
onChangeText={setToAddress}
44
placeholder="Enter an address"
45
value={toAddress}
46
/>
47
48
<View style={{ marginTop: 10 }}>
49
<Button
50
disabled={!portal || !toAddress || !toAddress.length}
51
onPress={handleSend}
52
title="Send 1 Wei"
53
/>
54
</View>
55
56
{txHash && txHash.length > 0 && (
57
<View>
58
<Text>Successfully sent transaction!</Text>
59
<Text>TXHash: {txHash}</Text>
60
</View>
61
)}
62
</View>
63
)
64
}
65
66
export default NativeSendTx
And now you are signing transactions with Portal! 🙌 🚀 Next, we'll explore how to simulate a transaction so that you can create smoother experiences for your users.
Last modified 27d ago