sync components

examples/svelte-vite-template-web3/src/Contracts.svelte

@@ -17,7 +17,6 @@
 
   <h2>using the '$contracts' store</h2>
 
-
   <p>
     The following code initialize the $contracts store with the ERC20 LINK Token.
     Here we use the #await svelte block to load the token totalSupply of the contract
@@ -53,7 +52,7 @@
   {:else}
 
     <p>
-      Please first <a href="/setprovider">connect</a>
+      Please first <a href="/web3/set">connect</a>
       connect to the görli network to be able to use this page.
     </p>
 

examples/svelte-vite-template-web3/src/Providers.svelte

@@ -21,8 +21,7 @@
         Gnosis: () => evm.setProvider('https://rpc.gnosischain.com'),
         Arbitrum: () => evm.setProvider('https://arb1.arbitrum.io/rpc'),
       }
-
-      console.log(type, handler[type])
+      console.log('[example]', type, handler[type])
       await handler[type]()
       pending = false
 

src/components/Balance.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { web3, connected } from 'svelte-web3'
+  import { web3, connected, selectedAccount } from '../stores'
 
-  export let address
+  export let address = $selectedAccount
   export let pending = 'pending'
   // todo format + symbol
 

src/components/Identicon.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { selectedAccount } from '../stores'
+
+  import makeBlockie from 'ethereum-blockies-base64'
+
+  export let address = $selectedAccount
+  let importedClasses = ''
+  export { importedClasses as class }
+
+  let img
+
+  $: if (address && img) {
+    img.src = makeBlockie(address)
+  }
+
+</script>
+
+<img bind:this={img} class={importedClasses}>
+
+<style>
+
+img {
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+</style>

src/components/Jazzicon.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { selectedAccount } from '../stores'
+
+  import jazzicon from '@metamask/jazzicon'
+
+  export let address = $selectedAccount
+  export let size = 32
+  let importedClasses = ''
+  export { importedClasses as class }
+
+  let target
+
+  $: if (address && size && target) {
+    const seed = parseInt(address.toLowerCase().slice(2, 10), 16)
+    const el = jazzicon(size, seed)
+    if (importedClasses) el.setAttribute('class', importedClasses)
+    target.parentNode.replaceChild(el, target)
+    target = el
+  }
+
+</script>
+
+<div bind:this={target} />

src/components/index.js

@@ -1,3 +1,5 @@
-import Balance from './Balance.svelte'
+import Balance from "./Balance.svelte";
+import Identicon from "./Identicon.svelte";
+import Jazzicon from "./Jazzicon.svelte";
 
-export { Balance }
+export { Balance, Identicon, Jazzicon };