0.0.3, see README, getBalance(address)

README.md

@@ -1,6 +1,9 @@
 # Sveth
+Eth Hook for Svelte
 
 ## Doc
+
+### Types
 - `useEth` hook returns relevant `store`s and `derived store`s
   - `connect: async (chainId?: number) => void` connect to metamask, with desired side effects (connected = true, provider = injected....)
   - `connected: Writable<Bool>` whether Metamask is connected 
@@ -9,22 +12,60 @@
     - `signer: Readable<ethers.Signer>`
     - ...
 
-## Usage
+### Example Usage
+
+#### `useEth` Hook
 ```ts
-import { useEth } from 'sveth'
-export const { connect, connected, provider, signer, chainId, account } = useEth()
+import { useEth, IStore } from 'sveth'
+export default const stores: IStore = useEth()
+export const {provider, signer, address, chainId, getBalanceStore...} = stores
+const balanceStore = getBalanceStore("0xabc123")
+```
+```svelte
+<button on:click={() => connect()}> Connect Wallet </button>
+<p>connected: {$connected}</p>
+{#if $connected}
+  <p>chainId: {$chainId}</p>
+  <p>Account: {$account}</p>
+  <p>Balance: {balance}</p>
+  <p>Balance Hook: {$balanceStore}</p>
+{/if}
 ```
+- `$store` to get value from `store`s
 
-Note: \
+
+#### `<ContractCard/>` Component
+```ts
+import ContractCard from "sveth/src/components/ContractCard.svelte"
+import { Contract } from "ethers"
+import { Interface } from "@ethersproject/abi"
+import ERC20ABI from "../abis/ERC20.json"
+import store from "../stores/eth"
+let contract = new Contract("0xabc123...", new Interface(ERC20ABI))
+```
+```svelte
+ <ContractCard {contract} {store} />
+```
+- see `example/` for more 
+- passing `ERC20ABI` can lead to error (see https://github.com/ethers-io/ethers.js/issues/2688)
+
+Note: 
 You can only use this package with typescript for now
 
-## Todo
-- support `balance: Readable<ethers.BigNumber> = getBalance(address?: string)`
-  - this need internal ERC20 abi
-  - todo 
-- improve `ethers.providers.JrpcProvider` connection
-  -  by `connectProvider(provider)` to `connect(provider)` (but this will make `connect(chainId)` weird)
-- create canonical components for contracts (`<Contract {address, abi}>`)
-  - how to parse kwargs
-  - https://github.com/scaffold-eth/scaffold-eth/blob/master/packages/react-app/src/components/Contract/FunctionForm.jsx#L187
-- refactor `IStore` by not using `ReturnType<typeof useEth>` 
+## Patch Notes (0.0.3)
+
+### New Feature
+- support `balanceStore: Readable<ethers.BigNumber> = getBalance(address?: string)`
+- (0.0.2) canonical components for contracts (`<Contract {contract} {store}>`)
+- refactor `IStore` by not using `ReturnType<typeof useEth>` 
+
+### Todo
+- improve `balance` hooks by listening to blocks/events/txs
+- improve `<Contract {contract} {store}>`
+  - parse input/output (BigNumber...)
+  - CSS styling support 
+  - prompt users to change `chainId` if not matched!
+- `const {reactive_contract} = useContract(address, abi, $signer)`
+
+### Note
+- the package is a side project of mine, which I will put less effor from now on, feel free to contribute

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveth",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "eth hook for svelte in typescript",
   "main": "src/index.ts",
   "scripts": {

src/useEth.ts

@@ -3,7 +3,7 @@ import {
   type Provider,
   type JsonRpcProvider,
 } from "@ethersproject/providers"
-import { BigNumber, Signer } from "ethers"
+import { BigNumber, Signer, Contract } from "ethers"
 import {
   derived,
   writable,
@@ -12,6 +12,8 @@ import {
   type Readable,
 } from "svelte/store"
 
+import IERC20 from "./abis/erc20.json"
+
 // providers supported
 export type sProvider = JsonRpcProvider //Web3Provider is extended JsonRpcProvider
 export type IStore = {
@@ -22,7 +24,7 @@ export type IStore = {
   signer: Readable<Signer>
   chainId: Readable<number>
   account: Readable<string>
-  getBalance: (address?: string) => Readable<BigNumber>
+  getBalanceStore: (address?: string) => Readable<BigNumber>
 }
 
 export const useEth: () => IStore = () => {
@@ -109,7 +111,7 @@ export const useEth: () => IStore = () => {
       })()
   })
 
-  const getBalance = (address?: string) => {
+  const getBalanceStore = (address?: string) => {
     if (!address) {
       return derived<Readable<Signer>, BigNumber>(signer, ($signer, set) => {
         if ($signer)
@@ -118,7 +120,16 @@ export const useEth: () => IStore = () => {
           })()
       })
     } else {
-      throw Error("Not Impletmented, Need ERC20 built in ")
+      const ERC20 = new Contract(address, IERC20)
+      return derived<Readable<Signer>, BigNumber>(signer, ($signer, set) => {
+        if ($signer)
+          (async () => {
+            let balance = await ERC20.connect($signer).balanceOf(
+              await $signer.getAddress()
+            )
+            set(balance)
+          })()
+      })
     }
   }
 
@@ -130,7 +141,7 @@ export const useEth: () => IStore = () => {
     signer,
     chainId,
     account,
-    getBalance,
+    getBalanceStore,
   }
 }