From 42eaaea50630002bbd5324c9c2b60d5c746465f5 Mon Sep 17 00:00:00 2001
From: Christophe Le Bars <clb@rouge.network>
Date: Sat, 3 Jun 2023 18:17:27 +0200
Subject: [PATCH] sync components

---
 .../src/Contracts.svelte                      |  3 +-
 .../src/Providers.svelte                      |  3 +-
 src/components/Balance.svelte                 |  4 +--
 src/components/Identicon.svelte               | 28 +++++++++++++++++++
 src/components/Jazzicon.svelte                | 23 +++++++++++++++
 src/components/index.js                       |  6 ++--
 6 files changed, 59 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Identicon.svelte
 create mode 100644 src/components/Jazzicon.svelte

diff --git a/examples/svelte-vite-template-web3/src/Contracts.svelte b/examples/svelte-vite-template-web3/src/Contracts.svelte
index 2368c4b..225459e 100644
--- a/examples/svelte-vite-template-web3/src/Contracts.svelte
+++ b/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>
 
diff --git a/examples/svelte-vite-template-web3/src/Providers.svelte b/examples/svelte-vite-template-web3/src/Providers.svelte
index 3bdd173..841a174 100644
--- a/examples/svelte-vite-template-web3/src/Providers.svelte
+++ b/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
 
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index ef0d924..c83c5be 100644
--- a/src/components/Balance.svelte
+++ b/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
 
diff --git a/src/components/Identicon.svelte b/src/components/Identicon.svelte
new file mode 100644
index 0000000..4386485
--- /dev/null
+++ b/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>
diff --git a/src/components/Jazzicon.svelte b/src/components/Jazzicon.svelte
new file mode 100644
index 0000000..726ce64
--- /dev/null
+++ b/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} />
diff --git a/src/components/index.js b/src/components/index.js
index a5e0f63..b56369e 100644
--- a/src/components/index.js
+++ b/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 };