-
|
Consider a website with o) a front-end that uses MetaMask to digitally sign transactions; Below is a self-contained sample app to explain some basic dynamics (you'll need MetaMask or another "wallet"). How "natural" would it be to do the same using ReactPy? I expect not very. But, what would be a good way to have this app talk to ReactPy? I hope the gist of the question is clear... == <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallet connection test</title>
<style>
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-out;
}
.fade-in.show {
opacity: 1;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin="anonymous"></script>
<script type="text/babel">
const DEFAULT_NETWORK = '0x89';
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
account: '',
network: '',
isConnected: undefined,
};
}
componentDidMount = async () => {
const network = await this.getCurrentNetwork();
const account = await this.getCurrentAccount();
this.setState({
network,
account,
isConnected: !!account,
});
ethereum.on('accountsChanged', this.handleAccountsChanged);
ethereum.on('chainChanged', this.handleChainChanged);
}
componentWillUnmount() {
ethereum.off('accountsChanged', this.handleAccountsChanged);
ethereum.off('chainChanged', this.handleChainChanged);
}
handleAccountsChanged = async (accounts) => {
if (accounts) {
this.setState({
account: accounts[0],
isConnected: true,
});
} else {
this.setState({
account: '',
isConnected: false,
});
}
}
handleChainChanged = async (chainId) => {
this.setState({
network: chainId,
});
}
getCurrentNetwork = async () => {
return await ethereum.request({method: 'eth_chainId'});
}
getCurrentAccount = async () => {
const accounts = await ethereum.request({method: 'eth_accounts'});
return accounts[0];
}
connect = async () => {
const accounts = await ethereum.request({method: 'eth_requestAccounts'});
await this.handleAccountsChanged(accounts);
}
switchToDefaultNetwork = async () => {
await ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{chainId: DEFAULT_NETWORK}],
});
}
render() {
const {isConnected, account, network} = this.state;
return (
<div className={`fade-in ${(isConnected !== undefined) ? 'show' : ''}`}>
<button onClick={this.connect} disabled={isConnected}>
{isConnected ? 'Connected to wallet' : 'Connect to wallet...'}
</button>
<div>Account: {account || 'Not connected'}</div>
<div>Network: {network || 'Unknown'}</div>
{
network && (network !== DEFAULT_NETWORK) && (
<div>
<p>Not on the default network.</p>
<button onClick={this.switchToDefaultNetwork}>Switch to default</button>
</div>
)
}
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyApp/>);
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
If a majority of the work must be done client-side, then ReactPy may not be the best option. If, on the other hand, a majority of the work can be done server-side, and you just need complex client-side logic in a few places, using a custom JS component or two could be a reasonable solution. I'm happy to explain how to do this in more detail if the docs are not sufficient. For your particular case, doing a quick look around, it does seem like there are Python libraries for working with Etherum. So on it's face, it seems like you could move some of this logic server-side. I just don't know enough about what you're trying to do specifically to say whether or not what you're trying to do can/should be done mostly server-side. Eventually I can see a world in which ReactPy can supply client-side components written in pure Python via something like Pyodide, but that's a long way off at the moment. |
Beta Was this translation helpful? Give feedback.
-
|
Custom JS component might be enough but I don't see from the docs how to communicate both ways. Coming back to "MyApp" above, a viable minimum would be to send to it a message-to-sign from a ReactPy component elsewhere on the page and receive the result. That component would do the blockchain-related business logic server-side. Or, in terms of the super simple chart, how to handle events? Let's say a user clicks on the chart to make a new datapoint. |
Beta Was this translation helpful? Give feedback.
-
|
So the In short, all you have to do is specify a callable attribute and ReactPy will do the necessary work to link it up with its client-side equivalent. Then any positional |
Beta Was this translation helpful? Give feedback.
-
|
I do think it's worth considering what parts of your app have to be client-side though. At a glance, I don't really see anything about your use case that couldn't be done using Python libraries server-side. Perhaps there are security implications I'm missing though. |
Beta Was this translation helpful? Give feedback.
-
|
Also, I'm working on renaming the custom JS template repo right now. Should be done shortly. |
Beta Was this translation helpful? Give feedback.
-
The cryptographic signature using the wallet browser plugin (in the above case Thanks for the answers. |
Beta Was this translation helpful? Give feedback.
If a majority of the work must be done client-side, then ReactPy may not be the best option. If, on the other hand, a majority of the work can be done server-side, and you just need complex client-side logic in a few places, using a custom JS component or two could be a reasonable solution. I'm happy to explain how to do this in more detail if the docs are not sufficient.
For your particular case, doing a quick look around, it does seem like there are Python libraries for working with Etherum. So on it's face, it seems like you could move some of this logic server-side. I just don't know enough about what you're trying to do specifically to say whether or not what you're trying to do can/…