From a77cf3a668fb6942021a58917252db735055cc8b Mon Sep 17 00:00:00 2001
From: EmberSpirit <EmberSpirit007@proton.me>
Date: Sun, 13 Aug 2023 20:57:02 +0200
Subject: [PATCH] update profile profile page

---
 package-lock.json                | 236 +++++++++++++++++++-
 package.json                     |   3 +-
 public/assets/img/Icon.png       | Bin 0 -> 699 bytes
 public/assets/img/winner.png     | Bin 0 -> 963 bytes
 src/App.vue                      |  34 +--
 src/components/ConnectWallet.vue |  33 +--
 src/main.js                      |   9 +-
 src/router/index.js              |  42 ++++
 src/stores/rounds.js             |  92 +++++---
 src/stores/walletV2.js           |   9 +
 src/views/HomeView.vue           |  53 +++--
 src/views/ProfileView.vue        | 364 +++++++++++++++++++++++++++++++
 yarn.lock                        |  83 ++++++-
 13 files changed, 859 insertions(+), 99 deletions(-)
 create mode 100644 public/assets/img/Icon.png
 create mode 100644 public/assets/img/winner.png
 create mode 100644 src/views/ProfileView.vue

diff --git a/package-lock.json b/package-lock.json
index f4fc011..4b8b8cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,9 +19,10 @@
 				"pinia-plugin-persistedstate": "^3.1.0",
 				"sass": "^1.62.1",
 				"swiper": "^9.4.1",
-				"viem": "^1.4.1",
+				"viem": "^1.5.4",
 				"vue": "^3.3.2",
 				"vue-router": "^4.2.0",
+				"wagmi": "^1.3.9",
 				"web3": "^v1.9.0"
 			},
 			"devDependencies": {
@@ -1274,6 +1275,80 @@
 				"node": ">=14.16"
 			}
 		},
+		"node_modules/@tanstack/query-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz",
+			"integrity": "sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/query-persist-client-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.32.6.tgz",
+			"integrity": "sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==",
+			"dependencies": {
+				"@tanstack/query-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/query-sync-storage-persister": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.32.6.tgz",
+			"integrity": "sha512-hTwNo5O5EvydbfdVvwnwY0nIrNg1BxKEV4WAA8A+0NP9yc/9xoWy8RxbIkcz1p4JN2JhagaTKek8Fa5h5KitsA==",
+			"dependencies": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
+		"node_modules/@tanstack/react-query": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.32.6.tgz",
+			"integrity": "sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==",
+			"dependencies": {
+				"@tanstack/query-core": "4.32.6",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-native": "*"
+			},
+			"peerDependenciesMeta": {
+				"react-dom": {
+					"optional": true
+				},
+				"react-native": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@tanstack/react-query-persist-client": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.32.6.tgz",
+			"integrity": "sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==",
+			"dependencies": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			},
+			"peerDependencies": {
+				"@tanstack/react-query": "^4.32.6"
+			}
+		},
 		"node_modules/@types/bn.js": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.1.tgz",
@@ -5991,6 +6066,20 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/react-dom": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.0"
+			},
+			"peerDependencies": {
+				"react": "^18.2.0"
+			}
+		},
 		"node_modules/readable-stream": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -6369,6 +6458,16 @@
 				"node": ">=14.0.0"
 			}
 		},
+		"node_modules/scheduler": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+			"optional": true,
+			"peer": true,
+			"dependencies": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"node_modules/scrypt-js": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -7193,15 +7292,16 @@
 			}
 		},
 		"node_modules/viem": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz",
-			"integrity": "sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==",
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/viem/-/viem-1.5.4.tgz",
+			"integrity": "sha512-/B2KbAiTqiPd6fzJgz4pgS879IXbHfO44RP/0nsRvBEuFJvHQlekNIAHTa4d3LPlsHWAM8GcH4m2P5ZvtEHVxA==",
 			"dependencies": {
 				"@adraffy/ens-normalize": "1.9.0",
 				"@noble/curves": "1.0.0",
 				"@noble/hashes": "1.3.0",
 				"@scure/bip32": "1.3.0",
 				"@scure/bip39": "1.2.0",
+				"@types/ws": "^8.5.4",
 				"@wagmi/chains": "1.6.0",
 				"abitype": "0.9.3",
 				"isomorphic-ws": "5.0.0",
@@ -7246,6 +7346,14 @@
 				}
 			]
 		},
+		"node_modules/viem/node_modules/@types/ws": {
+			"version": "8.5.5",
+			"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+			"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/viem/node_modules/abitype": {
 			"version": "0.9.3",
 			"resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.3.tgz",
@@ -7395,6 +7503,39 @@
 				"vue": "^3.2.0"
 			}
 		},
+		"node_modules/wagmi": {
+			"version": "1.3.9",
+			"resolved": "https://registry.npmjs.org/wagmi/-/wagmi-1.3.9.tgz",
+			"integrity": "sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==",
+			"funding": [
+				{
+					"type": "gitcoin",
+					"url": "https://wagmi.sh/gitcoin"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/wagmi-dev"
+				}
+			],
+			"dependencies": {
+				"@tanstack/query-sync-storage-persister": "^4.27.1",
+				"@tanstack/react-query": "^4.28.0",
+				"@tanstack/react-query-persist-client": "^4.28.0",
+				"@wagmi/core": "1.3.8",
+				"abitype": "0.8.7",
+				"use-sync-external-store": "^1.2.0"
+			},
+			"peerDependencies": {
+				"react": ">=17.0.0",
+				"typescript": ">=5.0.4",
+				"viem": ">=0.3.35"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/web3": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/web3/-/web3-1.10.0.tgz",
@@ -8929,6 +9070,44 @@
 				"defer-to-connect": "^2.0.1"
 			}
 		},
+		"@tanstack/query-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz",
+			"integrity": "sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA=="
+		},
+		"@tanstack/query-persist-client-core": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.32.6.tgz",
+			"integrity": "sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==",
+			"requires": {
+				"@tanstack/query-core": "4.32.6"
+			}
+		},
+		"@tanstack/query-sync-storage-persister": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.32.6.tgz",
+			"integrity": "sha512-hTwNo5O5EvydbfdVvwnwY0nIrNg1BxKEV4WAA8A+0NP9yc/9xoWy8RxbIkcz1p4JN2JhagaTKek8Fa5h5KitsA==",
+			"requires": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			}
+		},
+		"@tanstack/react-query": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.32.6.tgz",
+			"integrity": "sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==",
+			"requires": {
+				"@tanstack/query-core": "4.32.6",
+				"use-sync-external-store": "^1.2.0"
+			}
+		},
+		"@tanstack/react-query-persist-client": {
+			"version": "4.32.6",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.32.6.tgz",
+			"integrity": "sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==",
+			"requires": {
+				"@tanstack/query-persist-client-core": "4.32.6"
+			}
+		},
 		"@types/bn.js": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.1.tgz",
@@ -12659,6 +12838,17 @@
 				"loose-envify": "^1.1.0"
 			}
 		},
+		"react-dom": {
+			"version": "18.2.0",
+			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+			"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+			"optional": true,
+			"peer": true,
+			"requires": {
+				"loose-envify": "^1.1.0",
+				"scheduler": "^0.23.0"
+			}
+		},
 		"readable-stream": {
 			"version": "3.6.2",
 			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -12937,6 +13127,16 @@
 				"source-map-js": ">=0.6.2 <2.0.0"
 			}
 		},
+		"scheduler": {
+			"version": "0.23.0",
+			"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+			"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+			"optional": true,
+			"peer": true,
+			"requires": {
+				"loose-envify": "^1.1.0"
+			}
+		},
 		"scrypt-js": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -13570,15 +13770,16 @@
 			}
 		},
 		"viem": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz",
-			"integrity": "sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==",
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/viem/-/viem-1.5.4.tgz",
+			"integrity": "sha512-/B2KbAiTqiPd6fzJgz4pgS879IXbHfO44RP/0nsRvBEuFJvHQlekNIAHTa4d3LPlsHWAM8GcH4m2P5ZvtEHVxA==",
 			"requires": {
 				"@adraffy/ens-normalize": "1.9.0",
 				"@noble/curves": "1.0.0",
 				"@noble/hashes": "1.3.0",
 				"@scure/bip32": "1.3.0",
 				"@scure/bip39": "1.2.0",
+				"@types/ws": "^8.5.4",
 				"@wagmi/chains": "1.6.0",
 				"abitype": "0.9.3",
 				"isomorphic-ws": "5.0.0",
@@ -13603,6 +13804,14 @@
 					"resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.0.tgz",
 					"integrity": "sha512-ilHEACi9DwqJB0pw7kv+Apvh50jiiSyR/cQ3y4W7lOR5mhvn/50FLUfsnfJz0BDZtl/RR16kXvptiv6q1msYZg=="
 				},
+				"@types/ws": {
+					"version": "8.5.5",
+					"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
+					"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
+					"requires": {
+						"@types/node": "*"
+					}
+				},
 				"abitype": {
 					"version": "0.9.3",
 					"resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.3.tgz",
@@ -13670,6 +13879,19 @@
 				"@vue/devtools-api": "^6.5.0"
 			}
 		},
+		"wagmi": {
+			"version": "1.3.9",
+			"resolved": "https://registry.npmjs.org/wagmi/-/wagmi-1.3.9.tgz",
+			"integrity": "sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==",
+			"requires": {
+				"@tanstack/query-sync-storage-persister": "^4.27.1",
+				"@tanstack/react-query": "^4.28.0",
+				"@tanstack/react-query-persist-client": "^4.28.0",
+				"@wagmi/core": "1.3.8",
+				"abitype": "0.8.7",
+				"use-sync-external-store": "^1.2.0"
+			}
+		},
 		"web3": {
 			"version": "1.10.0",
 			"resolved": "https://registry.npmjs.org/web3/-/web3-1.10.0.tgz",
diff --git a/package.json b/package.json
index a456fae..49379c7 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,10 @@
 		"pinia-plugin-persistedstate": "^3.1.0",
 		"sass": "^1.62.1",
 		"swiper": "^9.4.1",
-		"viem": "^1.4.1",
+		"viem": "^1.5.4",
 		"vue": "^3.3.2",
 		"vue-router": "^4.2.0",
+		"wagmi": "^1.3.9",
 		"web3": "^v1.9.0"
 	},
 	"devDependencies": {
diff --git a/public/assets/img/Icon.png b/public/assets/img/Icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..17506471a9f0ba2ade9706ad8679cea5e6b34792
GIT binary patch
literal 699
zcmV;s0!00ZP)<h;3K|Lk000e1NJLTq000#L000&U1^@s6FN4=O00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0#HdrK~#7FwN%e*
z6G0UIc6OT_Y@;4po2>+rgDrxkhvekJCgQ;#Y5stEP*SYXQ$UZk5w9K!qEaPL58k{)
z6mMyAj$lv_<G~*hHZ`pfyZ&I)&5k>hZfKn?8rpoYJCE<pH@x@e%>#M>$uS<@sZGj?
zJP(Qqn>~Q;P%y1#`qI_I<<6nm#npMqq8aQG6f~1e9l9w!xLco42wu5vGIUrU^8!zT
zF-YD4*MnPTE2=1jMJTy$KvT!Y@(qFZjzsLA`=P9a1XMbKy@Y)y(#bDx>EHb1?L`b$
zKJfJEw~C-6YM8I9M?xrEpB4N{RW$_ixBd>6_8L3E(q8iQm*0S!Uh!%5w&m@I<Z0LG
zyMG8i`(yCc>Vjx})5k7rzb<o|+VzL=qs`wN_w)4S(JA!BZgKK)d<|7Q3ZM2B$+H)Q
zL$lA9u&xdvpm{L;Y>;ys`8l*IPq|Id11OGRtyN%_?sNN?{}cjtBwn3B311dOk@v$e
zYWsL5X6Z>s@1T?ZR(PheAR}S?3zk+wGdCmfy-DAD{)IrYqSIv!(trw2A}jctxg@Br
z@qTsFD@^DHCfW(i=X`E@#cAYiBKsx%7wq12(<?@9rXhiLJ3l$tjk8j03kYZsLTMR$
zi=uq)%(c&bV~Gpw$vMM=^(K2^Y;KZ+K|v+;tB?c7c|B?U4d>W?Wqca6nm<iaOPK;W
z8c#cuhk>XO$YTk}!KiB}awyjJhoW0FVUW>yI#piz#QQWkJG@{P=U7OOD5M6uz~=s<
h`Ew<jyfVDNxIewL*N}DLwjlrj002ovPDHLkV1g6dK+OOE

literal 0
HcmV?d00001

diff --git a/public/assets/img/winner.png b/public/assets/img/winner.png
new file mode 100644
index 0000000000000000000000000000000000000000..b00a1f5f0a0ccfcc4eb53316a79faaf7ae4240cc
GIT binary patch
literal 963
zcmV;!13dhRP)<h;3K|Lk000e1NJLTq0018V001Be1^@s6>Vl&|00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH16WB!K~#7Fy;na>
z6Hyrd-J__H!A|1l$>Kz)o0GJW7$Zc>;=mv{=%_Fn#a<!CkrH=lG-2gx8gVe8b&`oj
zCKfq1VeuRw8p}Pu@2=Hrxx2oD#$VFA>wDk3@B4o5`}0mi45VQsdjY)%A|)X8=C}jR
zqO0`*Mg=jTsR-SKk?w((Bk>gdO-9K|z$8OT?_m^i66LH^KrE4vj+l^;7G3jEMg%Hn
zdiwzKR7~T9ASQ|jaAqnn?2gLGTU|g~(L9Q~0%pO1%uq~Np~^kQV(mCIs~B(qdBx9w
z@C$ezcV97snAH2|{jFmS+(JG_0!G;43F8`6uxxyaoOf_Ivx<D-uX3iFa(6pwQCZGH
z1!LNLClPxe&LyTl;aPCh<G$o+j7$yD{Y=aFa=se)#);gpcW*GXYuWg0Zeid4)h?Pm
z3yrhL(6W?Pb@E!a6^~~tcX2g)8LFNIF|%2*@Fep#NZj>a)G4iHK-Fq0W>3Ss4T4{O
zFs+A)k@q4i4nfXGy^I2=QxF|To`P*yP_7LHP44Y@={T6ah`1O?^}F|7>qmr?ObO1v
zpsA0=FYf)p!VR3)&p{O&sMAZg-DlqOaA>-aAzi9eSjQe&K9IVAmuvT+ir3qZ+%@d=
zaz2v&qzIeYw|`QkzHtrc*Z<iUv<*#~8JwD%)t$y#8&S~4F!x<{=+Uf@bN>3|5Wd#F
zxi4<!FVoD-u(zDorNwokdj|@zwNd0ZpwPkCqgNXb-Tik9NNLL*ADQ$D5!0;VZ4=~h
zRim0-prCuKvViGlFWUo<X<nFmr>wYvBGGPSCB#acRlE(&AY^Y9X>Nf7XIxNmuTa9r
zGTE=}IEo4ODhyMY)LrP5v55Z*lP_*pI|W&&)4oSVeONzlAMaFJndJnWeB;@}DCW4$
zErc!VRzKJ1L|aDA@Sc63v|FR0bkL%1oMcFuS;q76=Kq9$vKMmvH#ExoqvyCdoh=yB
zN<iNCkF=Cm4!&ME84|3atB^HvEMvBv-9x`v#;Ev6#o`mGmNJO~+Avi<8d?pQrvfB7
z2zA6(iYgt&jWT8{VKPb|iev;GwVWv`!*`<6k<*BbEol(ND5XC6c*x>Kst!jdCHza0
lL8K7&DfHA#JdG7Ae*hxqNvb~JG%f%D002ovPDHLkV1i~q!`J`-

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 109be82..a0254ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,28 +70,18 @@ onMounted(async () => {
 	handleWindowSizeChange();
 
 	// initContracts
-	await walletStore.init();
-	await tokenStore.initV2();
-	await memeBurnerStore.init();
-	await rewardLockerStore.init();
-	await memeBurnerStore.init();
+	// await walletStore.init();
+	// await tokenStore.initV2();
+	// await memeBurnerStore.init();
+	// await rewardLockerStore.init();
+	// await memeBurnerStore.init();
 	// await multiCallStore.init();
 	//Memeburner Contract
 
-	const account = getAccount();
-
-	console.log("account", account);
-	if (account.address) {
-		walletStore.address = account.address;
-		walletStore.connected = true;
-	}
-
 	//init
-	roundsStore.currentRound = parseInt(
-		await memeBurnerStore.getCurrentRound()
-	);
-	console.log("roundsStore.currentRound", roundsStore.currentRound);
-	roundsStore.activeRound = roundsStore.currentRound;
+	// roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
+	// console.log("roundsStore.currentRound", roundsStore.currentRound);
+	// roundsStore.activeRound = roundsStore.currentRound;
 	await roundsStore.fillRound(roundsStore.activeRound);
 
 	//events
@@ -145,10 +135,10 @@ onMounted(async () => {
 </script>
 
 <template>
-	<navbar @show-panel="((value) => showPanel = value)"/>
-    <slideout-panel v-model="showPanel">
-    <connect-wallet></connect-wallet>
-    </slideout-panel>
+	<navbar @show-panel="(value) => (showPanel = value)" />
+	<slideout-panel v-model="showPanel">
+		<connect-wallet></connect-wallet>
+	</slideout-panel>
 	<div class="main">
 		<RouterView />
 	</div>
diff --git a/src/components/ConnectWallet.vue b/src/components/ConnectWallet.vue
index 6a442f8..1457449 100644
--- a/src/components/ConnectWallet.vue
+++ b/src/components/ConnectWallet.vue
@@ -1,15 +1,19 @@
 <template>
-    <h3>Connect Wallet</h3>
-    <div class="connectors-wrapper" v-if="!walletStore.connected">
-        <div class="connectors-element" v-for="connector in walletStore.config?.connectors" @click="connectWallet(connector)">
-            <div class="connector-icon">
-                <img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`">
-            </div>
-            <div class="connector-name">{{ connector.name }}</div>
-        </div>
-    </div>
-    <div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
-    <div>Connected: {{ walletStore.connected }}</div>
+	<h3>Connect Wallet</h3>
+	<div class="connectors-wrapper" v-if="!walletStore.connected">
+		<div
+			class="connectors-element"
+			v-for="connector in walletStore.config?.connectors"
+			@click="connectWallet(connector)"
+		>
+			<div class="connector-icon">
+				<img :src="`/assets/img/connectors/${connector.id}.svg`" :alt="`${connector.name} Logo`" />
+			</div>
+			<div class="connector-name">{{ connector.name }}</div>
+		</div>
+	</div>
+	<div class="btn btn-immortal" v-else @click="disconnectWallet">disconnect</div>
+	<div>Connected: {{ walletStore.connected }}</div>
 </template>
 
 <script setup>
@@ -39,6 +43,10 @@ const accountSub = ref(null);
 
 const instance = getCurrentInstance();
 
+onMounted(() => {
+	console.log("walletStore.config?.connectors", walletStore.config?.connectors);
+});
+
 // config.value = createConfig({
 // 	autoConnect: true,
 // 	connectors: [
@@ -88,7 +96,6 @@ async function connectWallet(connector) {
 }
 </script>
 
-
 <style lang="sass">
 .connectors-wrapper
     display: flex
@@ -109,4 +116,4 @@ async function connectWallet(connector) {
         .connector-name
             padding: 0 8px
             align-self: center
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.js b/src/main.js
index c8ed0ac..a670d83 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,13 +14,14 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
-import { faArrowDown, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowRight, faSpinner ,faPlus, faCaretLeft, faCaretRight, faBars, faAnglesRight, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord, faTwitter, faTelegram } from "@fortawesome/free-brands-svg-icons";
 
 
 /* add icons to the library */
 library.add(
-	faArrowDown,
+    faArrowDown,
+    faArrowRight,
 	faDiscord,
 	faTwitter,
 	faTelegram,
@@ -29,7 +30,9 @@ library.add(
 	faCaretLeft,
 	faCaretRight,
 	faBars,
-	faAnglesRight
+	faAnglesRight,
+	faChevronDown,
+	faChevronUp
 );
 
 const app = createApp(App)
diff --git a/src/router/index.js b/src/router/index.js
index eb398c6..1d19e13 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import { useWalletStoreV2 } from "@/stores/walletV2";
+import { useTokenStore } from "@/stores/tokens";
+import { useContractStore } from "@/stores/contracts";
+import { useMemeburnerStore } from "@/stores/memeburner";
+import { useRewardLockerStore } from "@/stores/rewardlocker";
+import { useMultiCallStore } from "@/stores/multicall";
+import { useRoundsStore } from "@/stores/rounds";
+
+import {
+	getAccount,
+} from "@wagmi/core";
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -27,7 +38,38 @@ const router = createRouter({
 			name: "Wagmi",
 			component: () => import("../views/WagmiView.vue"),
 		},
+		{
+			path: "/profile",
+			name: "Profile",
+			component: () => import("../views/ProfileView.vue"),
+		},
 	],
 });
 
+router.beforeEach(async (to, from) => {
+	//init
+    const tokenStore = useTokenStore();
+	const memeBurnerStore = useMemeburnerStore();
+	const rewardLockerStore = useRewardLockerStore();
+	const roundsStore = useRoundsStore();
+    const walletStore = useWalletStoreV2();
+    
+    if (!walletStore.publicClient) {
+        await walletStore.init();
+        await tokenStore.initV2();
+        await memeBurnerStore.init();
+        await rewardLockerStore.init();
+        await memeBurnerStore.init();
+        
+        
+        if (!roundsStore.currentRound) {
+            roundsStore.currentRound = parseInt(await memeBurnerStore.getCurrentRound());
+            console.log("roundsStore.currentRound", roundsStore.currentRound);
+            roundsStore.activeRound = roundsStore.currentRound;
+        }
+    }
+		// initContracts
+	return true;
+});
+
 export default router
diff --git a/src/stores/rounds.js b/src/stores/rounds.js
index b4430f4..7c274ad 100644
--- a/src/stores/rounds.js
+++ b/src/stores/rounds.js
@@ -4,6 +4,7 @@ import { useTokenStore } from "./tokens";
 import { useRewardLockerStore } from "./rewardlocker";
 import { useWalletStore } from "./wallet";
 import { useWalletStoreV2 } from "./walletV2";
+import { multicall } from "@wagmi/core";
 
 
 export const useRoundsStore = defineStore("rounds", {
@@ -22,6 +23,37 @@ export const useRoundsStore = defineStore("rounds", {
         async init() {
             //fill initial round
         },
+        async loadRewardsRounds() {
+            const walletStore = useWalletStoreV2();
+            const rewardLockerStore = useRewardLockerStore();
+
+            console.log("this.currentRound", this.currentRound);
+            const contracts = []
+            for (let index = 0; index < this.currentRound; index++) {
+                console.log("load round: " + index);
+                // await this.fillRound(index)
+
+                contracts.push({
+					...rewardLockerStore.contract,
+					functionName: "getTotalRewardsOf",
+					args: [walletStore.address, [index +1]],
+				});
+            }
+
+            const data = await multicall({
+				contracts,
+            });
+            console.log("data123abc", data);
+            // var test = await rewardLockerStore.getTotalRewardsOf(walletStore.address, rounds)
+            for (let index = 0; index < data.length; index++) {
+                const element = data[index];
+                if (!this.rounds[index]) {
+                    this.rounds[index] = {};
+                }
+                this.rounds[index].round = index + 1
+                this.rounds[index].rewards_total = element.result
+            }
+        },
         async updateCurrentRound(sacrificedToken) {
             const tokenStore = useTokenStore();
             const memeBurnerStore = useMemeburnerStore();
@@ -31,7 +63,7 @@ export const useRoundsStore = defineStore("rounds", {
             this.rounds[this.currentRound].token[tokenIndex].amount = data[tokenIndex].result[1];
 
         },
-        async fillRound() {
+        async fillRound(roundNumber) {
             console.log("fillRound");
             const memeBurnerStore = useMemeburnerStore();
             const tokenStore = useTokenStore();
@@ -41,25 +73,25 @@ export const useRoundsStore = defineStore("rounds", {
             // if (this.activeRound === this.currentRound) {
             //     console.log("activeRound is not completed");
             // } else
-                if (!this.rounds[this.activeRound]) {
-                    console.log("round not filled --> fill round");
-                    console.log("vor error");
-                    var data = await memeBurnerStore.getSacrificedRound(this.activeRound)
-                    let rewardData = null;
-                    if (walletStore.connected) {
-						rewardData = await rewardLockerStore.getRewardsForAllToken(this.activeRound);
-                    } 
-                    console.log("rewardData123", rewardData);
-                    
-                    var goal = await memeBurnerStore.getGoal(this.activeRound);
-                    console.log("goal", goal);
+            if (!this.rounds[roundNumber]?.goal) {
+                console.log("round not filled --> fill round");
+                console.log("vor error");
+                var data = await memeBurnerStore.getSacrificedRound(roundNumber)
+                let rewardData = null;
+                if (walletStore.connected) {
+                    rewardData = await rewardLockerStore.getRewardsForAllToken(roundNumber);
+                } 
+                console.log("rewardData123", rewardData);
+                
+                var goal = await memeBurnerStore.getGoal(roundNumber);
+                console.log("goal", goal);
                 var tokenArray = []
                 var rewards_clan = 0
                 var rewards_sacrifice = 0
                 for (let index = 0; index < data.length; index++) {
                     var tokenData = {};
                     const token = tokenStore.token[index];
-                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(this.activeRound, token.contractAddress);
+                    var testcoef = await rewardLockerStore.getSacrificedTokenCoefficient(roundNumber, token.contractAddress);
                     
                     
 
@@ -69,31 +101,31 @@ export const useRoundsStore = defineStore("rounds", {
                     tokenData.vampname = token.vamp.name;
                     tokenData.amount = data[index].result[1];
                     tokenData.getAmountToReachGoal= await memeBurnerStore.getAmountToReachGoal(token.contractAddress);
-                    if (this.currentRound !== this.activeRound && walletStore.connected) {
+                    if (this.currentRound !== roundNumber && walletStore.connected) {
                         const clanwin = (Number(testcoef) / 10000 - 1) * Number(rewardData[index].result);
-						const sacrificeRewards = Number(rewardData[index].result) - clanwin;
+                        const sacrificeRewards = Number(rewardData[index].result) - clanwin;
 
                         tokenData.rewards_ges = BigInt(rewardData[index].result);
                         tokenData.rewards_clan = BigInt(clanwin);
                         tokenData.rewards_sacrifice = BigInt(sacrificeRewards);
 
                         rewards_clan = rewards_clan + (clanwin / Math.pow(10, token.decimals));
-						rewards_sacrifice =
+                        rewards_sacrifice =
                             rewards_sacrifice + sacrificeRewards / Math.pow(10, token.decimals);
-					}
-                    tokenArray.push(tokenData);
                     }
-                const goalInBLD = await memeBurnerStore.getGoalInBLD(this.activeRound);
-                this.rounds[this.activeRound] = {
-					goal: goal[0],
-					goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
-					expirationTimestamp: goal[1],
-					rewards_clan: BigInt(rewards_clan),
-					rewards_sacrifice: BigInt(rewards_sacrifice),
-					rewards_total: BigInt(rewards_clan + rewards_sacrifice),
-					token: tokenArray,
-				};
-                    console.log("this.rounds[this.activeRound]", this.rounds[this.activeRound]);
+                    tokenArray.push(tokenData);
+                }
+                const goalInBLD = await memeBurnerStore.getGoalInBLD(roundNumber);
+                this.rounds[roundNumber] = {
+                    goal: goal[0],
+                    goalInBLD: goalInBLD / BigInt(Math.pow(10, tokenStore.memeToken.decimals)),
+                    expirationTimestamp: goal[1],
+                    rewards_clan: BigInt(rewards_clan),
+                    rewards_sacrifice: BigInt(rewards_sacrifice),
+                    rewards_total: BigInt(rewards_clan + rewards_sacrifice),
+                    token: tokenArray,
+                };
+                console.log("this.rounds[roundNumber]", this.rounds[roundNumber]);
             } else {
                 console.log("round already filled");
             }
diff --git a/src/stores/walletV2.js b/src/stores/walletV2.js
index 9e63626..1b7df62 100644
--- a/src/stores/walletV2.js
+++ b/src/stores/walletV2.js
@@ -79,6 +79,15 @@ export const useWalletStoreV2 = defineStore("walletV2", {
 				webSocketPublicClient,
             });
             this.publicClient = publicClient;
+
+            console.log("hier123");
+             const account = getAccount();
+
+				console.log("account123abc", account);
+				if (account.address) {
+					this.address = account.address;
+					this.connected = true;
+				}
 			// await this.isConnected();
 			// const goerliKey = import.meta.env.VITE_GOERLI_KEY;
 			// if (this.connected) {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 649d2af..4937f79 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -19,6 +19,7 @@ const days = ref(null);
 const hours = ref(null);
 const minutes = ref(null);
 const seconds = ref(null);
+const openTutorial = ref(false);
 const timer = ref(null);
 const modules = [Navigation];
 const isMobile = inject("isMobile");
@@ -26,14 +27,14 @@ const isMobile = inject("isMobile");
 async function prevSlide() {
 	if (activeRound.value > 1) {
 		activeRound.value--;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
 async function nextSlide() {
 	if (activeRound.value < currentRound.value) {
 		activeRound.value++;
-		await roundsStore.fillRound();
+		await roundsStore.fillRound(activeRound.value);
 	}
 }
 
@@ -49,9 +50,7 @@ onBeforeUnmount(() => {
 });
 
 function timeBetweenDates() {
-	const dateEntered = new Date(
-		Number(getCurrentRoundData.value?.expirationTimestamp) * 1000
-	);
+	const dateEntered = new Date(Number(getCurrentRoundData.value?.expirationTimestamp) * 1000);
 
 	if (dateEntered) {
 		var now = new Date();
@@ -172,18 +171,31 @@ function timeBetweenDates() {
 				</div>
 			</section>
 			<div class="container section-header-container">
-				<h2>Tutorial</h2>
-				When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
-				<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
-			</div>
-			<section id="tokenomics" class="container">
-				<div class="card">
-					<h2>Tokenomics</h2>
-					<p>100% clan owned. No team %, no pre-mine</p>
-					<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
-					<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
+				<div class="tutorial-header">
+					<div class="tutorial-headline">Tutorial</div>
+					<div class="tutorial-more" @click="openTutorial = !openTutorial">
+						<font-awesome-icon v-if="openTutorial" icon="chevron-up" />
+						<font-awesome-icon v-else icon="chevron-down" />
+					</div>
 				</div>
-			</section>
+				<div v-if="openTutorial" class="tutorial-text">
+					When you sacrifice your meme, the $ETH is put into an immutable $BLOOD/ETH liquidity position.
+					<br /><br />When your clan wins, you get extra $BLOOD rewards that you can trade.
+					<section id="tokenomics" class="container">
+						<div class="card">
+							<h2>Tokenomics</h2>
+							<p>100% clan owned. No team %, no pre-mine</p>
+							<img v-if="isMobile" src="/assets/img/tokenomics_footer.png" alt="tokenomics" />
+							<img v-else src="/assets/img/tokenomics.png" alt="tokenomics" />
+						</div>
+					</section>
+					<div>
+						$BLOOD is 100%<br />
+						community owned.<br />
+						No team %, no pre-mine.
+					</div>
+				</div>
+			</div>
 		</div>
 	</main>
 </template>
@@ -286,6 +298,15 @@ function timeBetweenDates() {
     margin-bottom: 64px
     @media (min-width: 992px)
         width: 655px
+    .tutorial-header
+        display: flex
+        justify-content: center
+        gap: 16px
+        font-size: 24px
+        margin-bottom: 40px
+    .tutorial-text
+        font-size: 18px
+
 
 .bloodline-wrapper
     .bloodline-inner
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
new file mode 100644
index 0000000..48b7bf8
--- /dev/null
+++ b/src/views/ProfileView.vue
@@ -0,0 +1,364 @@
+<template>
+	<div>
+		<div class="profile-header">Profile</div>
+		<div class="profile-subheader">
+			<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div>
+			<div class="profile-subheader-address">0x12345...812d</div>
+		</div>
+		<div class="total-rewards-wrapper">
+			<div class="total-rewards-headline">Total Rewards</div>
+			<div class="total-rewards-inner">
+				<div class="claim-wrapper">
+					<div class="claim-inner">
+						<div class="claim-header">Claimed</div>
+						<div class="claim-body">TODO</div>
+					</div>
+				</div>
+				<div class="claim-hr"></div>
+				<div class="claim-wrapper">
+					<div class="claim-inner">
+						<div class="claim-header">Unclaimed</div>
+						<div class="claim-body">TODO</div>
+					</div>
+				</div>
+				<div class="total-rewards-buttons">
+					<div class="btn btn-immortal">Stake</div>
+					<div class="btn btn-immortal">Unstake</div>
+				</div>
+			</div>
+		</div>
+		<div class="most-sacrificed-wrapper">
+			<div class="most-sacrificed-inner">
+				<div class="most-sacrificed-left">
+					<div class="most-sacrificed-header">Bloodline Clan</div>
+					<div class="most-sacrificed-subheader">Most sacrificed</div>
+				</div>
+				<div class="most-sacrificed-right">
+					<div class="most-sacrificed-coin-logo">
+						<img src="/assets/img/token/pepevamp.png" alt="" />
+					</div>
+					<div class="most-sacrificed-coin-name">$PEPE</div>
+				</div>
+			</div>
+		</div>
+		<div class="total-sacrificed-wrapper">
+			<div class="total-sacrificed-inner">
+				<div class="total-sacrificed-header">Total Sacrifice</div>
+				<div class="total-sacrificed-coins">
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">1,2b</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/pepevamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$PEPE</div>
+					</div>
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">139m</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/shibvamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$SHIB</div>
+					</div>
+					<div class="total-sacrificed-coin">
+						<div class="total-sacrificed-coin-amount">0</div>
+						<div class="total-sacrificed-coin-logo">
+							<img src="/assets/img/token/elonvamp.png" alt="" />
+						</div>
+						<div class="total-sacrificed-coin-name">$ELON</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="cycle-wrapper">
+			<div class="cycle-inner">
+				<div class="cycle-headline">Cycles</div>
+				<div class="cycle-header">
+					<div class="cycle-header-left">Cycle</div>
+					<div class="cycle-header-right">Reward</div>
+				</div>
+				<div class="cycle-rounds">
+					<div class="cycle-round" v-for="(round, index) in rounds" :key="index">
+						<template v-if="round">
+							<div class="cycle-round-inner">
+								<div class="cycle-round-number">{{ round.round }}</div>
+								<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
+									active
+								</div>
+								<div class="cycle-round-reward">
+									{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
+								</div>
+								<div class="cycle-round-more" @click="openRound(index)">
+									<font-awesome-icon
+										v-if="openCycleElement && index === activeRound"
+										icon="chevron-up"
+									/>
+									<font-awesome-icon v-else icon="chevron-down" />
+								</div>
+							</div>
+							<div class="cycle-round-detail" v-if="openCycleElement && index === activeRound">
+								<div class="cycle-round-detail-inner">
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Sacrifice Reward</div>
+												<div class="sacrifice-reward-header-amount">+2,000 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<tr class="sacrifice-coin">
+													<td>2b PEPE</td>
+													<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
+													<td>1,500 $BDL</td>
+												</tr>
+												<tr class="sacrifice-coin">
+													<td>10m SHIB</td>
+													<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
+													<td class="bloodline">500 $BDL</td>
+												</tr>
+											</table>
+										</div>
+									</div>
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Staking Bonus</div>
+												<div class="sacrifice-reward-header-amount">+1,000 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<tr class="sacrifice-coin">
+													<td>Staked</td>
+													<td class="arrow"></td>
+													<td class="bloodline">1,000 $BDL</td>
+												</tr>
+											</table>
+										</div>
+									</div>
+									<div class="sacrifice-reward-wrapper">
+										<div class="sacrifice-reward-inner">
+											<div class="sacrifice-reward-header">
+												<div class="sacrifice-reward-header-name">Competition Bonus</div>
+												<div class="sacrifice-reward-header-amount">+200 $BDL</div>
+											</div>
+											<table class="sacrifice-coins">
+												<div class="sacrifice-coin">
+													<div><img src="/assets/img/winner.png" alt="" /></div>
+													<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
+													<div>$PEPE</div>
+													<div class="arrow"></div>
+													<div class="bloodline">1,000 $BDL</div>
+												</div>
+											</table>
+										</div>
+									</div>
+								</div>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { useRoundsStore } from "@/stores/rounds";
+
+const roundsStore = useRoundsStore();
+
+const activeRound = ref(null);
+const openCycleElement = ref(false);
+function openRound(index) {
+	if (activeRound.value === index && openCycleElement.value) {
+		openCycleElement.value = false;
+	} else {
+		openCycleElement.value = true;
+	}
+	activeRound.value = index;
+}
+
+onMounted(async () => {
+	console.log("loadRounds");
+	await roundsStore.loadRewardsRounds();
+	console.log("roundsStore.rounds", roundsStore.rounds);
+});
+
+const rounds = computed(() => roundsStore.rounds.reverse());
+</script>
+
+<style lang="sass">
+.profile-header
+    color: #FFF
+    text-align: center
+    font-size: 32px
+    margin-bottom: 12px
+.profile-subheader
+    display: flex
+    justify-content: center
+    gap: 12px
+    align-items: center
+    // .profile-subheader-logo
+    margin-bottom: 24px
+    .profile-subheader-address
+        font-size: 12px
+.total-rewards-wrapper
+    border-radius: 16px
+    background: #202020
+    padding: 8px
+    .total-rewards-headline
+        color: #FFF
+        text-align: center
+        font-size: 24px
+        margin-bottom: 24px
+    .total-rewards-inner
+        border-radius: 16px
+        border: 2px solid var(--grey, #858585)
+        background: var(--dark-grey, #202020)
+        padding: 8px 12px
+        .claim-wrapper
+            .claim-inner
+                flex-direction: column
+                margin-bottom: 16px
+                .claim-header
+                    color: var(--white, #F9F9FA)
+                    font-size: 18px
+                    text-align: center
+                    margin-bottom: 16px
+        .claim-hr
+            background-color: #858585
+            margin: 16px 0
+            height: 1px
+    .total-rewards-buttons
+        display: flex
+        text-align: center
+        gap: 16px
+        justify-content: space-between
+        div
+            flex: 1 1 auto
+            font-size: 18px
+
+
+
+.most-sacrificed-wrapper
+    .most-sacrificed-inner
+        padding: 8px
+        border-radius: 16px
+        border: 1px solid var(--grey, #858585)
+        background: var(--dark-grey, #202020)
+        gap: 34px
+        display: flex
+        justify-content: center
+        .most-sacrificed-left
+            display: flex
+            flex-direction: column
+            justify-content: center
+            .most-sacrificed-header
+                font-size: 24px
+            .most-sacrificed-subheader
+                font-size: 12px
+        .most-sacrificed-right
+            display: flex
+            flex-direction: column
+            .most-sacrificed-coin-logo
+                img
+                    width: 49px
+                    height: 49px
+                    border-radius: 50%
+
+
+
+.total-sacrificed-wrapper
+    background-color: var(--dark-grey, #202020)
+    border-radius: 16px
+    border: 1px solid var(--grey, #858585)
+    padding: 8px
+    .total-sacrificed-inner
+        display: flex
+        flex-direction: column
+        align-items: center
+        gap: 16px
+        .total-sacrificed-header
+            font-size: 18px
+        .total-sacrificed-coins
+            display: flex
+            gap: 27px
+            .total-sacrificed-coin
+                display: flex
+                flex-direction: column
+                gap: 8px
+                text-align: center
+                .total-sacrificed-coin-logo
+                    img
+                        height: 49px
+                        width: 49px
+                        border-radius: 50%
+
+
+
+.cycle-wrapper
+    margin-top: 24px
+    .cycle-inner
+        .cycle-headline
+            font-size: 24px
+            margin-bottom: 8px
+            text-align: center
+        .cycle-header
+            display: flex
+            justify-content: space-between
+            padding: 8px 16px
+            font-size: 18px
+        .cycle-rounds
+            gap: 8px
+            display: flex
+            flex-direction: column
+            .cycle-round
+                border-radius: 16px
+                border: 3px solid var(--grey, #858585)
+                background: var(--dark-grey, #202020)
+                padding: 12px
+                min-height: 55px
+                .cycle-round-inner
+                    display: flex
+                    font-size: 18px
+                    gap: 8px
+                    align-items: center
+                    // .cycle-round-number
+                    .cycle-round-badget
+                        border-radius: 14px
+                        border: 1px solid var(--grey, #858585)
+                        padding: 8px 16px
+                        height: 25px
+                        color: var(--grey, #858585)
+                        text-align: center
+                        font-size: 14px
+                        display: flex
+                        align-items: center
+                        margin-left: auto
+                    .cycle-round-reward
+                        margin-left: auto
+                    .cycle-round-more
+                        font-size: 16px
+            .cycle-round-detail
+                .cycle-round-detail-inner
+                    .sacrifice-reward-wrapper
+                        border-radius: 16px
+                        border: 0.5px solid var(--grey, #858585)
+                        margin-top: 12px
+                        .sacrifice-reward-inner
+                            padding: 8px 16px
+                            .sacrifice-reward-header
+                                display: flex
+                                font-size: 18px
+                                justify-content: space-between
+                                margin-bottom: 16px
+                            .sacrifice-coins
+                                margin-left: auto
+                                border-collapse: separate
+                                border-spacing: 0 12px
+                                .sacrifice-coin
+                                    td
+                                        text-align: right
+                                    .arrow
+                                        width: 14px
+                                        padding: 0 16px
+</style>
diff --git a/yarn.lock b/yarn.lock
index 38f4fb4..058b10b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -734,6 +734,40 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tanstack/query-core@4.32.6":
+  version "4.32.6"
+  resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.32.6.tgz"
+  integrity sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA==
+
+"@tanstack/query-persist-client-core@4.32.6":
+  version "4.32.6"
+  resolved "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-4.32.6.tgz"
+  integrity sha512-MJJ7CldvT5HOel50h/3wOZZwVlIcroFD5Vxn8vPsfo2C0qQ208ilmN/81JWutm/lWy4n2BjnCrrWv6HvVI7S0w==
+  dependencies:
+    "@tanstack/query-core" "4.32.6"
+
+"@tanstack/query-sync-storage-persister@^4.27.1":
+  version "4.32.6"
+  resolved "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-4.32.6.tgz"
+  integrity sha512-hTwNo5O5EvydbfdVvwnwY0nIrNg1BxKEV4WAA8A+0NP9yc/9xoWy8RxbIkcz1p4JN2JhagaTKek8Fa5h5KitsA==
+  dependencies:
+    "@tanstack/query-persist-client-core" "4.32.6"
+
+"@tanstack/react-query-persist-client@^4.28.0":
+  version "4.32.6"
+  resolved "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-4.32.6.tgz"
+  integrity sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==
+  dependencies:
+    "@tanstack/query-persist-client-core" "4.32.6"
+
+"@tanstack/react-query@^4.28.0", "@tanstack/react-query@^4.32.6":
+  version "4.32.6"
+  resolved "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.32.6.tgz"
+  integrity sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==
+  dependencies:
+    "@tanstack/query-core" "4.32.6"
+    use-sync-external-store "^1.2.0"
+
 "@types/bn.js@^5.1.0", "@types/bn.js@^5.1.1":
   version "5.1.1"
   resolved "https://registry.npmjs.org/@types/bn.js/-/bn.js-5.1.1.tgz"
@@ -835,6 +869,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/ws@^8.5.4":
+  version "8.5.5"
+  resolved "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz"
+  integrity sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==
+  dependencies:
+    "@types/node" "*"
+
 "@vitejs/plugin-vue@^4.2.3":
   version "4.2.3"
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz"
@@ -956,7 +997,7 @@
     abitype "0.8.7"
     eventemitter3 "^4.0.7"
 
-"@wagmi/core@^1.3.8":
+"@wagmi/core@^1.3.8", "@wagmi/core@1.3.8":
   version "1.3.8"
   resolved "https://registry.npmjs.org/@wagmi/core/-/core-1.3.8.tgz"
   integrity sha512-OYSxikoMizqVnpSkFTwGE7PwFaz2k0PXteSiI0W2Mtk4j4sZzRFdP+9AWeDB6AYm0yU3WvgN1IATx0EEBKUe3w==
@@ -4033,7 +4074,15 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@>=16.8:
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, react@>=16.8, react@>=17.0.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -4237,6 +4286,13 @@ sass@*, sass@^1.62.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
 scrypt-js@^3.0.0, scrypt-js@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/scrypt-js/-/scrypt-js-3.0.1.tgz"
@@ -4680,7 +4736,7 @@ url-set-query@^1.0.0:
   resolved "https://registry.npmjs.org/url-set-query/-/url-set-query-1.0.0.tgz"
   integrity sha512-3AChu4NiXquPfeckE5R5cGdiHCMWJx1dwCWOmWIL4KHAziJNOFIYJlpGFeKDvwLPHovZRCxK3cYlwzqI9Vp+Gg==
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@^1.2.0, use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -4768,16 +4824,17 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-viem@^1.0.0, viem@^1.4.1, viem@>=0.3.35:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/viem/-/viem-1.4.1.tgz"
-  integrity sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==
+viem@^1.0.0, viem@^1.5.4, viem@>=0.3.35:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/viem/-/viem-1.5.4.tgz"
+  integrity sha512-/B2KbAiTqiPd6fzJgz4pgS879IXbHfO44RP/0nsRvBEuFJvHQlekNIAHTa4d3LPlsHWAM8GcH4m2P5ZvtEHVxA==
   dependencies:
     "@adraffy/ens-normalize" "1.9.0"
     "@noble/curves" "1.0.0"
     "@noble/hashes" "1.3.0"
     "@scure/bip32" "1.3.0"
     "@scure/bip39" "1.2.0"
+    "@types/ws" "^8.5.4"
     "@wagmi/chains" "1.6.0"
     abitype "0.9.3"
     isomorphic-ws "5.0.0"
@@ -4830,6 +4887,18 @@ vue-router@^4.2.0:
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
+wagmi@^1.3.9:
+  version "1.3.9"
+  resolved "https://registry.npmjs.org/wagmi/-/wagmi-1.3.9.tgz"
+  integrity sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==
+  dependencies:
+    "@tanstack/query-sync-storage-persister" "^4.27.1"
+    "@tanstack/react-query" "^4.28.0"
+    "@tanstack/react-query-persist-client" "^4.28.0"
+    "@wagmi/core" "1.3.8"
+    abitype "0.8.7"
+    use-sync-external-store "^1.2.0"
+
 web3-bzz@1.10.0:
   version "1.10.0"
   resolved "https://registry.npmjs.org/web3-bzz/-/web3-bzz-1.10.0.tgz"