web3 v4 token tx working

Web3Auth · Nov 2, 2023 · bad3780 · bad3780
1 parent 18f5e98
commit bad3780
Show file tree

Hide file tree

Showing 11 changed files with 581 additions and 622 deletions.
diff --git a/demo/react-app/package-lock.json b/demo/react-app/package-lock.json
diff --git a/demo/react-app/package.json b/demo/react-app/package.json
@@ -3,7 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
- "@solana/web3.js": "^1.78.4",
+ "@solana/web3.js": "^1.87.3",
  "@taquito/signer": "^13.0.1",
  "@taquito/taquito": "^13.0.1",
  "@taquito/utils": "^13.0.1",
@@ -15,7 +15,7 @@
  "@web3auth/torus-wallet-connector-plugin": "file:../../packages/plugins/torus-wallet-connector-plugin",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "web3": "^4.1.1"
+ "web3": "^4.2.1"
  },
  "scripts": {
  "start": "react-app-rewired start",
@@ -49,9 +49,9 @@
  }
  },
  "devDependencies": {
- "@types/node": "^20.5.9",
- "@types/react": "^18.2.21",
- "@types/react-dom": "^18.2.7",
+ "@types/node": "^20.8.10",
+ "@types/react": "^18.2.34",
+ "@types/react-dom": "^18.2.14",
  "buffer": "^6.0.3",
  "process": "^0.11.10",
  "react-app-rewired": "^2.2.1",

diff --git a/demo/react-app/src/App.tsx b/demo/react-app/src/App.tsx
@@ -8,8 +8,8 @@ import Setting from "./components/Setting";
 import Main from "./components/Main";
 
 function App() {
- const [web3AuthNetwork, setWeb3AuthNetwork] = useState<WEB3AUTH_NETWORK_TYPE>("mainnet");
- const [chain, setChain] = useState<CHAIN_CONFIG_TYPE>("mainnet");
+ const [web3AuthNetwork, setWeb3AuthNetwork] = useState<WEB3AUTH_NETWORK_TYPE>("sapphire_mainnet");
+ const [chain, setChain] = useState<CHAIN_CONFIG_TYPE>("goerli");
 
  return (
  <div className={styles.container}>
@@ -20,7 +20,7 @@ function App() {
  </a>{" "}
  & ReactJS Example
  </h1>
- <Setting setNetwork={setWeb3AuthNetwork} setChain={setChain} />
+ <Setting setNetwork={setWeb3AuthNetwork} setChain={setChain} chain={chain} network={web3AuthNetwork} />
  <Main />
  </Web3AuthProvider>
  <footer className={styles.footer}>

diff --git a/demo/react-app/src/components/Main.tsx b/demo/react-app/src/components/Main.tsx
@@ -3,7 +3,23 @@ import { useWeb3Auth } from "../services/web3auth";
 import styles from "../styles/Home.module.css";
 
 const Main = () => {
- const { provider, login, logout, getUserInfo, getAccounts, getBalance, signMessage, signTransaction, signAndSendTransaction, web3Auth, chain, addChain, switchChain } = useWeb3Auth();
+ const {
+ provider,
+ login,
+ logout,
+ getUserInfo,
+ getAccounts,
+ getBalance,
+ signMessage,
+ signTransaction,
+ signAndSendTransaction,
+ web3Auth,
+ chain,
+ addChain,
+ switchChain,
+ getTokenBalance,
+ signAndSendTokenTransaction,
+ } = useWeb3Auth();
 
  const loggedInView = (
  <>
@@ -16,6 +32,9 @@ const Main = () => {
  <button onClick={getBalance} className={styles.card}>
  Get Balance
  </button>
+ <button onClick={getTokenBalance} className={styles.card}>
+ Get Token Balance
+ </button>
  <button onClick={signMessage} className={styles.card}>
  Sign Message
  </button>
@@ -25,15 +44,17 @@ const Main = () => {
  <button onClick={switchChain} className={styles.card}>
  Switch Chain
  </button>
- {
- (web3Auth?.connectedAdapterName === WALLET_ADAPTERS.OPENLOGIN || chain === "solana") &&
- (<button onClick={signTransaction} className={styles.card}>
+ {(web3Auth?.connectedAdapterName === WALLET_ADAPTERS.OPENLOGIN || chain === "solana") && (
+ <button onClick={signTransaction} className={styles.card}>
  Sign Transaction
- </button>)
- }
+  </button>
+ )}
  <button onClick={signAndSendTransaction} className={styles.card}>
  Sign and Send Transaction
  </button>
+ <button onClick={signAndSendTokenTransaction} className={styles.card}>
+ Sign and Send Token Transaction
+ </button>
  <button onClick={logout} className={styles.card}>
  Log Out
  </button>

diff --git a/demo/react-app/src/components/Setting.tsx b/demo/react-app/src/components/Setting.tsx
@@ -7,9 +7,11 @@ import { Web3AuthContext } from "../services/web3auth";
 interface IProps {
  setNetwork: (network: WEB3AUTH_NETWORK_TYPE) => void;
  setChain: (chain: CHAIN_CONFIG_TYPE) => void;
+ chain: CHAIN_CONFIG_TYPE;
+ network: WEB3AUTH_NETWORK_TYPE;
 }
 
-const Setting = ({ setNetwork, setChain }: IProps) => {
+const Setting = ({ setNetwork, setChain, chain, network }: IProps) => {
  const networkChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
  console.log("Settings", e.target.value);
  setNetwork(e.target.value as WEB3AUTH_NETWORK_TYPE);
@@ -28,7 +30,7 @@ const Setting = ({ setNetwork, setChain }: IProps) => {
  <label htmlFor="network" className={styles.label}>
  Web3Auth Network
  </label>
- <select id="network" onChange={networkChangeHandler} className={styles.select} disabled={isLoggedIn}>
+ <select id="network" value={network} onChange={networkChangeHandler} className={styles.select} disabled={isLoggedIn}>
  {Object.keys(WEB3AUTH_NETWORK).map((x: string) => {
  return (
  <option key={x} value={x}>
@@ -42,7 +44,7 @@ const Setting = ({ setNetwork, setChain }: IProps) => {
  <label htmlFor="network" className={styles.label}>
  Blockchain
  </label>
- <select onChange={chainChangeHandler} className={styles.select} disabled={isLoggedIn}>
+ <select value={chain} onChange={chainChangeHandler} className={styles.select} disabled={isLoggedIn}>
  {Object.keys(CHAIN_CONFIG).map((x: string) => {
  return (
  <option key={x} value={x}>

diff --git a/demo/react-app/src/config/abi.ts b/demo/react-app/src/config/abi.ts
@@ -0,0 +1,222 @@
+export const erc20Abi = [
+ {
+ constant: true,
+ inputs: [],
+ name: "name",
+ outputs: [
+ {
+ name: "",
+ type: "string",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ constant: false,
+ inputs: [
+ {
+ name: "_spender",
+ type: "address",
+ },
+ {
+ name: "_value",
+ type: "uint256",
+ },
+ ],
+ name: "approve",
+ outputs: [
+ {
+ name: "",
+ type: "bool",
+ },
+ ],
+ payable: false,
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+ {
+ constant: true,
+ inputs: [],
+ name: "totalSupply",
+ outputs: [
+ {
+ name: "",
+ type: "uint256",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ constant: false,
+ inputs: [
+ {
+ name: "_from",
+ type: "address",
+ },
+ {
+ name: "_to",
+ type: "address",
+ },
+ {
+ name: "_value",
+ type: "uint256",
+ },
+ ],
+ name: "transferFrom",
+ outputs: [
+ {
+ name: "",
+ type: "bool",
+ },
+ ],
+ payable: false,
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+ {
+ constant: true,
+ inputs: [],
+ name: "decimals",
+ outputs: [
+ {
+ name: "",
+ type: "uint8",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ constant: true,
+ inputs: [
+ {
+ name: "_owner",
+ type: "address",
+ },
+ ],
+ name: "balanceOf",
+ outputs: [
+ {
+ name: "balance",
+ type: "uint256",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ constant: true,
+ inputs: [],
+ name: "symbol",
+ outputs: [
+ {
+ name: "",
+ type: "string",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ constant: false,
+ inputs: [
+ {
+ name: "_to",
+ type: "address",
+ },
+ {
+ name: "_value",
+ type: "uint256",
+ },
+ ],
+ name: "transfer",
+ outputs: [
+ {
+ name: "",
+ type: "bool",
+ },
+ ],
+ payable: false,
+ stateMutability: "nonpayable",
+ type: "function",
+ },
+ {
+ constant: true,
+ inputs: [
+ {
+ name: "_owner",
+ type: "address",
+ },
+ {
+ name: "_spender",
+ type: "address",
+ },
+ ],
+ name: "allowance",
+ outputs: [
+ {
+ name: "",
+ type: "uint256",
+ },
+ ],
+ payable: false,
+ stateMutability: "view",
+ type: "function",
+ },
+ {
+ payable: true,
+ stateMutability: "payable",
+ type: "fallback",
+ },
+ {
+ anonymous: false,
+ inputs: [
+ {
+ indexed: true,
+ name: "owner",
+ type: "address",
+ },
+ {
+ indexed: true,
+ name: "spender",
+ type: "address",
+ },
+ {
+ indexed: false,
+ name: "value",
+ type: "uint256",
+ },
+ ],
+ name: "Approval",
+ type: "event",
+ },
+ {
+ anonymous: false,
+ inputs: [
+ {
+ indexed: true,
+ name: "from",
+ type: "address",
+ },
+ {
+ indexed: true,
+ name: "to",
+ type: "address",
+ },
+ {
+ indexed: false,
+ name: "value",
+ type: "uint256",
+ },
+ ],
+ name: "Transfer",
+ type: "event",
+ },
+] as const;
diff --git a/demo/react-app/src/config/chainConfig.ts b/demo/react-app/src/config/chainConfig.ts
@@ -21,13 +21,31 @@ export const CHAIN_CONFIG = {
  } as CustomChainConfig,
  polygon: {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
- rpcTarget: "https://polygon-rpc.com",
+ rpcTarget: "https://rpc.ankr.com/polygon",
  blockExplorer: "https://polygonscan.com/",
  chainId: "0x89",
  displayName: "Polygon Mainnet",
  ticker: "matic",
  tickerName: "Matic",
  } as CustomChainConfig,
+ "polygon-mumbai": {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
+ blockExplorer: "https://mumbai.polygonscan.com/",
+ chainId: "0x13881",
+ displayName: "Polygon Mumbai",
+ ticker: "matic",
+ tickerName: "Matic",
+ } as CustomChainConfig,
+ goerli: {
+ chainNamespace: CHAIN_NAMESPACES.EIP155,
+ rpcTarget: "https://rpc.ankr.com/eth_goerli",
+ blockExplorer: "https://goerli.etherscan.io/",
+ chainId: "0x5",
+ displayName: "Goerli",
+ ticker: "eth",
+ tickerName: "Eth",
+ } as CustomChainConfig,
  tezos: {
  chainNamespace: CHAIN_NAMESPACES.OTHER,
  displayName: "Tezos Ithacanet",