diff --git a/README.md b/README.md
index f12bc2f..7394e4e 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,9 @@ pip install web3-wallet-connect
```python
import streamlit as st
-from python_web3_wallet import my_component
+from python_web3_wallet import wallet_component
-c = my_component(recipient="0x...", amount_in_ether="0.01") # Displays RainbowKit wallet
+c = wallet_component(recipient="0x...", amount_in_ether="0.01") # Displays RainbowKit wallet
# Optionally data (as a Hex-formatted string) can be passed to populate the data field when sending a transaction.
-# c = my_component(recipient="0x...", amount_in_ether="0.01", data="0x78da2b492d2e0100045d01c1")
+# c = wallet_component(recipient="0x...", amount_in_ether="0.01", data="0x78da2b492d2e0100045d01c1")
```
\ No newline at end of file
diff --git a/python_web3_wallet/README b/python_web3_wallet/README
index d067271..5fa268a 100644
--- a/python_web3_wallet/README
+++ b/python_web3_wallet/README
@@ -13,5 +13,5 @@ python setup.py sdist bdist_wheel
# publish on testpy
python -m twine upload --repository testpypi dist/* --verbose
# upload to pypi
-python -m twine upload dist/* --verbose
+python -m twine upload dist/* --verbose
```
\ No newline at end of file
diff --git a/python_web3_wallet/__init__.py b/python_web3_wallet/__init__.py
index 5edd309..db74d8e 100644
--- a/python_web3_wallet/__init__.py
+++ b/python_web3_wallet/__init__.py
@@ -39,7 +39,7 @@
# `declare_component` and call it done. The wrapper allows us to customize
# our component's API: we can pre-process its input args, post-process its
# output value, and add a docstring for users.
-def my_component(recipient: str, amount_in_ether: str, data: str, key=None):
+def wallet_component(recipient: str, amount_in_ether: str, data: str | None = None, key=None):
"""Create a new instance of "my_component".
Parameters
diff --git a/python_web3_wallet/app.py b/python_web3_wallet/app.py
index d7220a5..be91bd4 100644
--- a/python_web3_wallet/app.py
+++ b/python_web3_wallet/app.py
@@ -11,4 +11,4 @@
import streamlit as st
st.title('My title')
-c = component(recipient="0x07354C0aD12741E8F222eB439cFf4c01716cA627", amountInEther="0.01", data=None)
\ No newline at end of file
+c = component(recipient="0x07354C0aD12741E8F222eB439cFf4c01716cA627", amountInEther="0.00001", data='0x48656c6c6f20776f726c64')
\ No newline at end of file
diff --git a/python_web3_wallet/frontend/src/PythonWeb3Wallet.tsx b/python_web3_wallet/frontend/src/PythonWeb3Wallet.tsx
index 1ee9571..455456e 100644
--- a/python_web3_wallet/frontend/src/PythonWeb3Wallet.tsx
+++ b/python_web3_wallet/frontend/src/PythonWeb3Wallet.tsx
@@ -4,11 +4,12 @@ import {
ComponentProps,
} from "streamlit-component-lib";
import { type Hex, getAddress, parseEther } from 'viem';
-import React, { useCallback, useEffect, useMemo, useState, ReactElement } from "react"
+import React, { useEffect, useMemo, useState, ReactElement } from "react"
import { ConnectButton } from "@rainbow-me/rainbowkit"
import '@rainbow-me/rainbowkit/styles.css';
-import { useAccount, useSendTransaction } from "wagmi";
-
+import { useAccount, useSendTransaction, useWriteContract, useChainId, useWaitForTransactionReceipt, BaseError } from "wagmi";
+import { abi } from './abi';
+import { AGENT_COMMUNICATION_CONTRACT } from "./constants";
/**
* This is a React-based component template. The passed props are coming from the
* Streamlit library. Your custom args can be accessed via the `args` props.
@@ -16,8 +17,12 @@ import { useAccount, useSendTransaction } from "wagmi";
function PythonWeb3Wallet({ args, disabled, theme }: ComponentProps): ReactElement {
const { recipient, amountInEther, data } = args;
+ const {
+ data: hash,
+ error,
+ writeContractAsync
+ } = useWriteContract();
- const { sendTransaction } = useSendTransaction();
const account = useAccount();
const [isFocused, setIsFocused] = useState(false)
@@ -38,6 +43,32 @@ function PythonWeb3Wallet({ args, disabled, theme }: ComponentProps): ReactEleme
}, [style, theme]);
+ const sendMessage = async () => {
+ console.log(`sending message with content ${data as Hex} to ${recipient}`);
+
+ try {
+ const txHash = await writeContractAsync({
+ abi,
+ address: AGENT_COMMUNICATION_CONTRACT,
+ functionName: 'sendMessage',
+ args: [
+ getAddress(recipient),
+ data as Hex,
+ ],
+ value: parseEther(amountInEther),
+ }, {
+ onError: (err) => console.log(err),
+ });
+ console.log(`txHash ${txHash}`);
+ } catch {
+ // We simply pass here since errors already logged.
+ }
+
+
+ };
+
+
+
return (
<>
+
+ {error && (
+ Error: {(error as BaseError).shortMessage || error.message}
+ )}
+
+