docs: add erc-20 example

examples/starknet-react-next/src/abi/erc20.json

@@ -0,0 +1,258 @@
+[
+  {
+    "members": [
+      {
+        "name": "low",
+        "offset": 0,
+        "type": "felt"
+      },
+      {
+        "name": "high",
+        "offset": 1,
+        "type": "felt"
+      }
+    ],
+    "name": "Uint256",
+    "size": 2,
+    "type": "struct"
+  },
+  {
+    "inputs": [
+      {
+        "name": "name",
+        "type": "felt"
+      },
+      {
+        "name": "symbol",
+        "type": "felt"
+      },
+      {
+        "name": "recipient",
+        "type": "felt"
+      }
+    ],
+    "name": "constructor",
+    "outputs": [],
+    "type": "constructor"
+  },
+  {
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "name",
+        "type": "felt"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [
+      {
+        "name": "symbol",
+        "type": "felt"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "name": "totalSupply",
+        "type": "Uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [
+      {
+        "name": "decimals",
+        "type": "felt"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "account",
+        "type": "felt"
+      }
+    ],
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "name": "balance",
+        "type": "Uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "owner",
+        "type": "felt"
+      },
+      {
+        "name": "spender",
+        "type": "felt"
+      }
+    ],
+    "name": "allowance",
+    "outputs": [
+      {
+        "name": "remaining",
+        "type": "Uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "recipient",
+        "type": "felt"
+      },
+      {
+        "name": "amount",
+        "type": "Uint256"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "felt"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "sender",
+        "type": "felt"
+      },
+      {
+        "name": "recipient",
+        "type": "felt"
+      },
+      {
+        "name": "amount",
+        "type": "Uint256"
+      }
+    ],
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "felt"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "spender",
+        "type": "felt"
+      },
+      {
+        "name": "amount",
+        "type": "Uint256"
+      }
+    ],
+    "name": "approve",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "felt"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "spender",
+        "type": "felt"
+      },
+      {
+        "name": "added_value",
+        "type": "Uint256"
+      }
+    ],
+    "name": "increaseAllowance",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "felt"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "spender",
+        "type": "felt"
+      },
+      {
+        "name": "subtracted_value",
+        "type": "Uint256"
+      }
+    ],
+    "name": "decreaseAllowance",
+    "outputs": [
+      {
+        "name": "success",
+        "type": "felt"
+      }
+    ],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "recipient",
+        "type": "felt"
+      },
+      {
+        "name": "amount",
+        "type": "Uint256"
+      }
+    ],
+    "name": "mint",
+    "outputs": [],
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "user",
+        "type": "felt"
+      },
+      {
+        "name": "amount",
+        "type": "Uint256"
+      }
+    ],
+    "name": "burn",
+    "outputs": [],
+    "type": "function"
+  }
+]

examples/starknet-react-next/src/hooks/token.ts

@@ -0,0 +1,11 @@
+import { useContract } from '@starknet-react/core'
+import { Abi } from 'starknet'
+
+import Erc20Abi from '~/abi/erc20.json'
+
+export function useTokenContract() {
+  return useContract({
+    abi: Erc20Abi as Abi,
+    address: '0x07394cbe418daa16e42b87ba67372d4ab4a5df0b05c6e554d158458ce245bc10',
+  })
+}

examples/starknet-react-next/src/pages/token.tsx

@@ -0,0 +1,114 @@
+import { useStarknet, useStarknetCall, useStarknetInvoke } from '@starknet-react/core'
+import type { NextPage } from 'next'
+import { useCallback, useMemo, useState } from 'react'
+import { toBN } from 'starknet/dist/utils/number'
+import { bnToUint256, uint256ToBN } from 'starknet/dist/utils/uint256'
+import { ConnectWallet } from '~/components/ConnectWallet'
+import { TransactionList } from '~/components/TransactionList'
+import { useTokenContract } from '~/hooks/token'
+
+function UserBalance() {
+  const { account } = useStarknet()
+  const { contract } = useTokenContract()
+
+  const { data, loading, error } = useStarknetCall({
+    contract,
+    method: 'balanceOf',
+    args: account ? [account] : undefined,
+  })
+
+  const content = useMemo(() => {
+    if (loading || !data?.length) {
+      return <div>Loading balance</div>
+    }
+
+    if (error) {
+      return <div>Error: {error}</div>
+    }
+
+    const balance = uint256ToBN(data[0])
+    return <div>{balance.toString(10)}</div>
+  }, [data, loading, error])
+
+  return (
+    <div>
+      <h2>User balance</h2>
+      {content}
+    </div>
+  )
+}
+
+function MintToken() {
+  const { account } = useStarknet()
+  const [amount, setAmount] = useState('')
+  const [amountError, setAmountError] = useState<string | undefined>()
+
+  const { contract } = useTokenContract()
+
+  const { loading, error, reset, invoke } = useStarknetInvoke({ contract, method: 'mint' })
+
+  const updateAmount = useCallback(
+    (newAmount: string) => {
+      // soft-validate amount
+      setAmount(newAmount)
+      try {
+        toBN(newAmount)
+        setAmountError(undefined)
+      } catch (err) {
+        console.error(err)
+        setAmountError('Please input a valid number')
+      }
+    },
+    [setAmount]
+  )
+
+  const onMint = useCallback(() => {
+    reset()
+    if (account && !amountError) {
+      const amountBn = bnToUint256(amount)
+      invoke({ args: [account, amountBn] })
+    }
+  }, [account, amount])
+
+  const mintButtonDisabled = useMemo(() => {
+    if (loading) return true
+    return !account || !!amountError
+  }, [loading, account, amountError])
+
+  return (
+    <div>
+      <h2>Mint token</h2>
+      <p>
+        <span>Amount: </span>
+        <input type="number" onChange={(evt) => updateAmount(evt.target.value)} />
+      </p>
+      <button disabled={mintButtonDisabled} onClick={onMint}>
+        {loading ? 'Waiting for wallet' : 'Mint'}
+      </button>
+      {error && <p>Error: {error}</p>}
+    </div>
+  )
+}
+
+const TokenPage: NextPage = () => {
+  const { account } = useStarknet()
+
+  if (!account) {
+    return (
+      <div>
+        <p>Connect Wallet</p>
+        <ConnectWallet />
+      </div>
+    )
+  }
+  return (
+    <div>
+      <p>Connected: {account}</p>
+      <UserBalance />
+      <MintToken />
+      <TransactionList />
+    </div>
+  )
+}
+
+export default TokenPage