updates chains+ example contract store

Author: clbrge

examples/svelte-app-template-web3/package.json

@@ -8,17 +8,19 @@
     "start": "sirv public"
   },
   "devDependencies": {
-    "svelte-web3": "file:../../",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.1",
     "rollup": "^2.61.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.44.3"
+    "svelte": "^3.44.3",
+    "svelte-web3": "file:../../"
   },
   "dependencies": {
+    "@openzeppelin/contracts": "^4.4.1",
+    "@rollup/plugin-json": "^4.1.0",
     "sirv-cli": "^1.0.14"
   }
 }

examples/svelte-app-template-web3/rollup.config.js

@@ -1,5 +1,6 @@
 import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
@@ -50,7 +51,7 @@ export default {
 		// we'll extract any component CSS out into
 		// a separate file - better for performance
 		css({ output: 'bundle.css' }),
-
+      json(),
 		// If you have external dependencies installed from
 		// npm, you'll most likely need these plugins. In
 		// some cases you'll need additional configuration -

examples/svelte-app-template-web3/src/MonoChain.svelte

@@ -9,6 +9,8 @@
     chainId,
     chainData } from 'svelte-web3'
 
+  import DAI from './contract-stores.js'
+
   import { Balance } from 'svelte-web3/components'
 
   let tipAddress = '0x834356a88C66897FA0A05a61964a91A607956ee3'
@@ -54,10 +56,16 @@
   }
 
   const disconnect = async () => {
+
+    console.log( await $DAI.methods.totalSupply().call() )
+
     await defaultEvmStores.disconnect()
     pending = false
   }
 
+
+  $: DAISupply = $DAI ? $DAI.methods.totalSupply().call() : ''
+
 </script>
 
 <p class="subtitle">
@@ -100,4 +108,11 @@
 <p><button class="button is-primary is-light" on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>
 {/if}
 
+{#await DAISupply}
+   pending contract definition
+{:then value}
+  {value}
+{/await}
+
+
 {/if}

examples/svelte-app-template-web3/src/contract-stores.js

@@ -0,0 +1,18 @@
+
+import ERC20 from '@openzeppelin/contracts/build/contracts/IERC20.json'
+
+import { derived } from 'svelte/store'
+import { web3, chainId } from 'svelte-web3'
+
+const DAI = '0x6b175474e89094c44da98b954eedeac495271d0f'
+
+const myContractStore = derived([web3, chainId], ([$web3, $chainId]) => {
+  if ($chainId && $web3.eth) {
+    // DO whaever nececessay to get address from chainId
+    console.log('chainId is', $chainId)
+    return new $web3.eth.Contract(ERC20.abi, DAI, {})
+  }
+  return null
+})
+
+export default myContractStore