From 364661955a3391311a535b1b63c74fee07b3d223 Mon Sep 17 00:00:00 2001
From: Ilja <idaderko@gmail.com>
Date: Tue, 8 Feb 2022 16:07:19 +0200
Subject: [PATCH] Nav menu

---
 wallets/react-wallet-v2/package.json          |  4 +-
 .../react-wallet-v2/public/accounts-icon.svg  | 24 ++++++++++
 .../react-wallet-v2/public/settings-icon.svg  |  9 ++++
 .../public/wallet-connect-logo.svg            |  3 ++
 .../src/components/AccountCard.tsx            | 15 ++++---
 .../react-wallet-v2/src/components/Layout.tsx | 44 ++++++++++++++-----
 .../src/components/Navigation.tsx             | 39 ++++++++++++++++
 wallets/react-wallet-v2/yarn.lock             |  8 ++--
 8 files changed, 123 insertions(+), 23 deletions(-)
 create mode 100644 wallets/react-wallet-v2/public/accounts-icon.svg
 create mode 100644 wallets/react-wallet-v2/public/settings-icon.svg
 create mode 100644 wallets/react-wallet-v2/public/wallet-connect-logo.svg
 create mode 100644 wallets/react-wallet-v2/src/components/Navigation.tsx

diff --git a/wallets/react-wallet-v2/package.json b/wallets/react-wallet-v2/package.json
index 885debd..c5bbab4 100644
--- a/wallets/react-wallet-v2/package.json
+++ b/wallets/react-wallet-v2/package.json
@@ -2,7 +2,7 @@
   "name": "react-wallet-v2",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3100",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@walletconnect/types": "2.0.0-beta.22",
-    "@types/node": "17.0.15",
+    "@types/node": "17.0.16",
     "@types/react": "17.0.39",
     "eslint": "8.8.0",
     "eslint-config-next": "12.0.10",
diff --git a/wallets/react-wallet-v2/public/accounts-icon.svg b/wallets/react-wallet-v2/public/accounts-icon.svg
new file mode 100644
index 0000000..c159f8f
--- /dev/null
+++ b/wallets/react-wallet-v2/public/accounts-icon.svg
@@ -0,0 +1,24 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M160 368H448M160 144H448H160ZM160 256H448H160Z" stroke="url(#paint0_linear_46_13)" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80 160C88.8366 160 96 152.837 96 144C96 135.163 88.8366 128 80 128C71.1634 128 64 135.163 64 144C64 152.837 71.1634 160 80 160Z" stroke="url(#paint1_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80 272C88.8366 272 96 264.837 96 256C96 247.163 88.8366 240 80 240C71.1634 240 64 247.163 64 256C64 264.837 71.1634 272 80 272Z" stroke="url(#paint2_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M80 384C88.8366 384 96 376.837 96 368C96 359.163 88.8366 352 80 352C71.1634 352 64 359.163 64 368C64 376.837 71.1634 384 80 384Z" stroke="url(#paint3_linear_46_13)" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_46_13" x1="160" y1="144.018" x2="380.191" y2="421.745" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_46_13" x1="64" y1="128.003" x2="96.3014" y2="159.69" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_46_13" x1="64" y1="240.003" x2="96.3014" y2="271.69" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_46_13" x1="64" y1="352.003" x2="96.3014" y2="383.69" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/wallets/react-wallet-v2/public/settings-icon.svg b/wallets/react-wallet-v2/public/settings-icon.svg
new file mode 100644
index 0000000..11874aa
--- /dev/null
+++ b/wallets/react-wallet-v2/public/settings-icon.svg
@@ -0,0 +1,9 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M464 249.93C463.865 247.435 462.851 245.067 461.138 243.248C459.425 241.429 457.123 240.275 454.64 239.99L429 235.84C427.847 235.651 426.785 235.094 425.975 234.252C425.164 233.411 424.646 232.33 424.5 231.17C424.01 228.02 423.5 224.75 422.8 221.65C422.574 220.522 422.707 219.353 423.178 218.304C423.65 217.255 424.437 216.38 425.43 215.8L448.21 203.15C450.472 201.997 452.231 200.053 453.153 197.687C454.075 195.322 454.095 192.7 453.21 190.32L449.26 179.42C448.394 177.032 446.677 175.048 444.439 173.847C442.201 172.646 439.599 172.312 437.13 172.91L411.58 177.91C410.438 178.114 409.26 177.952 408.215 177.448C407.17 176.943 406.311 176.122 405.76 175.1C404.27 172.31 402.65 169.47 400.96 166.68C400.346 165.686 400.059 164.525 400.138 163.359C400.216 162.194 400.658 161.082 401.4 160.18L418.4 140.54C420.127 138.686 421.119 136.266 421.191 133.734C421.263 131.201 420.409 128.729 418.79 126.78L411.37 117.87C409.756 115.914 407.473 114.627 404.965 114.258C402.456 113.888 399.9 114.463 397.79 115.87L375.42 129.3C374.428 129.894 373.272 130.154 372.121 130.04C370.97 129.927 369.887 129.446 369.03 128.67C366.56 126.5 364.03 124.41 361.66 122.48C360.75 121.762 360.093 120.773 359.784 119.656C359.475 118.54 359.529 117.354 359.94 116.27L369.2 91.87C370.209 89.5419 370.327 86.9244 369.532 84.5149C368.738 82.1053 367.086 80.0716 364.89 78.8L354.8 72.91C352.603 71.6431 350.016 71.2313 347.534 71.7535C345.052 72.2757 342.85 73.6951 341.35 75.74L325 96.28C324.412 97.1728 323.531 97.8328 322.509 98.1467C321.487 98.4606 320.388 98.4087 319.4 98C318.79 97.75 313.63 95.64 309.62 94.3C308.52 93.9415 307.564 93.2405 306.891 92.2995C306.218 91.3584 305.864 90.2268 305.88 89.07L306.27 63C306.409 60.4544 305.616 57.9453 304.038 55.9426C302.461 53.9398 300.207 52.5808 297.7 52.12L286.25 50.12C283.755 49.689 281.189 50.1784 279.028 51.4971C276.867 52.8159 275.258 54.8743 274.5 57.29L266 82.1C265.614 83.2014 264.885 84.15 263.921 84.8069C262.956 85.4638 261.806 85.7943 260.64 85.75H250.89C249.733 85.7738 248.598 85.4318 247.646 84.7729C246.694 84.114 245.975 83.1716 245.59 82.08L237.13 57.41C236.386 54.9767 234.78 52.8981 232.613 51.5636C230.447 50.229 227.868 49.73 225.36 50.16L213.89 52.16C211.399 52.6172 209.158 53.9629 207.584 55.9473C206.009 57.9317 205.209 60.4199 205.33 62.95L205.73 89.11C205.738 90.2841 205.367 91.4294 204.671 92.3754C203.976 93.3214 202.993 94.0175 201.87 94.36C199.58 95.25 194.61 97.15 192.35 97.99C190.35 98.71 188.17 97.92 186.41 95.89L170.15 75.89C168.658 73.8327 166.458 72.3994 163.974 71.866C161.489 71.3325 158.895 71.7364 156.69 73L146.63 78.83C144.41 80.104 142.741 82.1544 141.943 84.5862C141.146 87.0179 141.276 89.6589 142.31 92L151.56 116.34C151.964 117.426 152.017 118.611 151.712 119.728C151.407 120.846 150.759 121.84 149.86 122.57C147.43 124.57 144.94 126.57 142.46 128.79C141.608 129.56 140.533 130.038 139.39 130.153C138.248 130.268 137.098 130.015 136.11 129.43L114 115.74C111.877 114.359 109.323 113.8 106.817 114.168C104.311 114.537 102.026 115.807 100.39 117.74L93 126.63C91.3585 128.566 90.4886 131.039 90.5569 133.576C90.6252 136.113 91.6268 138.535 93.3701 140.38L110.45 160C111.208 160.884 111.661 161.989 111.742 163.151C111.823 164.312 111.528 165.469 110.9 166.45C109.19 169.17 107.56 172.03 106.08 174.89C105.526 175.919 104.661 176.746 103.608 177.252C102.556 177.759 101.369 177.919 100.22 177.71L74.71 172.78C72.2401 172.184 69.6373 172.518 67.3981 173.719C65.159 174.92 63.4403 176.903 62.57 179.29L58.57 190.17C57.6859 192.553 57.7066 195.177 58.6281 197.545C59.5497 199.914 61.3081 201.862 63.57 203.02L86.35 215.67C87.3745 216.235 88.1871 217.119 88.6652 218.187C89.1432 219.255 89.2608 220.449 89 221.59L88.7601 222.86C88.2401 225.65 87.7601 228.29 87.3001 231.1C87.141 232.245 86.624 233.31 85.823 234.144C85.0219 234.977 83.9778 235.536 82.84 235.74L57.1501 239.89C54.6377 240.198 52.3235 241.411 50.6397 243.301C48.9559 245.191 48.0176 247.629 48 250.16V261.74C47.9854 264.281 48.9141 266.737 50.6063 268.632C52.2985 270.528 54.6338 271.728 57.16 272L82.84 276.14C83.994 276.328 85.0561 276.884 85.8674 277.726C86.6786 278.568 87.1953 279.65 87.34 280.81C87.83 283.97 88.3401 287.23 89.0401 290.33C89.2656 291.458 89.1334 292.627 88.6619 293.676C88.1904 294.725 87.4031 295.6 86.4101 296.18L63.64 308.85C61.3781 310.003 59.6188 311.947 58.6969 314.313C57.775 316.678 57.7548 319.3 58.64 321.68L62.64 332.58C63.5083 334.966 65.2251 336.949 67.4626 338.15C69.7001 339.351 72.3015 339.686 74.77 339.09L100.32 334.14C101.463 333.933 102.642 334.093 103.687 334.598C104.733 335.103 105.592 335.926 106.14 336.95C107.64 339.75 109.25 342.58 110.94 345.37C111.557 346.363 111.846 347.525 111.767 348.691C111.688 349.857 111.245 350.969 110.5 351.87L93.5 371.5C91.7529 373.34 90.7378 375.755 90.6458 378.29C90.5537 380.826 91.3909 383.308 93 385.27L100.41 394.18C102.023 396.138 104.305 397.426 106.815 397.796C109.324 398.165 111.881 397.589 113.99 396.18L136.36 382.75C137.352 382.156 138.508 381.896 139.659 382.01C140.81 382.123 141.893 382.604 142.75 383.38C145.23 385.55 147.75 387.64 150.12 389.57C151.029 390.289 151.686 391.277 151.997 392.393C152.308 393.509 152.256 394.695 151.85 395.78L142.58 420.18C141.572 422.508 141.453 425.126 142.248 427.535C143.043 429.945 144.695 431.978 146.89 433.25L157 439.09C159.196 440.358 161.782 440.771 164.264 440.251C166.746 439.731 168.948 438.313 170.45 436.27L187 415.92C188.4 414.19 190.6 413.42 192.23 414.08C195.71 415.52 198.04 416.33 202.17 417.71C203.27 418.069 204.227 418.77 204.901 419.711C205.576 420.652 205.933 421.783 205.92 422.94L205.52 448.99C205.385 451.535 206.18 454.042 207.757 456.043C209.334 458.045 211.585 459.405 214.09 459.87L225.54 461.87C228.035 462.305 230.604 461.818 232.766 460.499C234.928 459.179 236.536 457.118 237.29 454.7L245.79 429.93C246.175 428.828 246.903 427.878 247.868 427.221C248.833 426.564 249.984 426.234 251.15 426.28H260.9C262.058 426.255 263.194 426.596 264.145 427.255C265.097 427.914 265.816 428.858 266.2 429.95L274.67 454.62C275.326 456.762 276.651 458.637 278.451 459.97C280.251 461.304 282.43 462.026 284.67 462.03C285.267 462.031 285.863 461.978 286.45 461.87L297.92 459.87C300.411 459.413 302.652 458.067 304.227 456.083C305.801 454.098 306.602 451.61 306.48 449.08L306.08 422.92C306.072 421.767 306.432 420.642 307.106 419.707C307.78 418.773 308.734 418.077 309.83 417.72C313.67 416.43 316.37 415.39 318.74 414.47L319.34 414.24C322.44 413.17 323.94 414.47 324.81 415.55L341.56 436.18C343.061 438.221 345.262 439.636 347.742 440.157C350.221 440.677 352.805 440.265 355 439L365.07 433.17C367.273 431.898 368.93 429.859 369.725 427.442C370.52 425.026 370.397 422.402 369.38 420.07L360.14 395.73C359.732 394.646 359.676 393.46 359.979 392.342C360.283 391.224 360.93 390.23 361.83 389.5C364.26 387.5 366.75 385.5 369.23 383.28C370.087 382.507 371.169 382.03 372.318 381.919C373.466 381.807 374.62 382.067 375.61 382.66L398 396.06C400.122 397.443 402.677 398.003 405.183 397.635C407.69 397.267 409.975 395.995 411.61 394.06L419.01 385.16C420.652 383.224 421.521 380.751 421.453 378.214C421.385 375.677 420.383 373.255 418.64 371.41L401.58 351.74C400.822 350.856 400.369 349.751 400.288 348.589C400.207 347.428 400.502 346.271 401.13 345.29C402.84 342.58 404.47 339.72 405.95 336.85C406.506 335.823 407.372 334.998 408.424 334.492C409.476 333.985 410.661 333.824 411.81 334.03L437.29 339C439.76 339.596 442.363 339.262 444.602 338.061C446.841 336.86 448.56 334.877 449.43 332.49L453.38 321.61C454.264 319.229 454.243 316.606 453.321 314.239C452.399 311.873 450.641 309.927 448.38 308.77L425.58 296.1C424.57 295.529 423.771 294.648 423.301 293.587C422.83 292.526 422.715 291.342 422.97 290.21L423.21 288.94C423.73 286.15 424.21 283.51 424.67 280.7C424.829 279.555 425.346 278.49 426.147 277.656C426.948 276.823 427.992 276.264 429.13 276.06L454.82 271.92C457.339 271.616 459.66 270.405 461.35 268.512C463.04 266.62 463.982 264.177 464 261.64V249.93V249.93ZM181.55 343.93C180.304 346.097 178.561 347.937 176.466 349.3C174.37 350.662 171.981 351.508 169.495 351.768C167.009 352.027 164.496 351.693 162.164 350.793C159.832 349.893 157.747 348.453 156.08 346.59C133.551 321.68 121.112 289.27 121.19 255.684C121.268 222.098 133.857 189.745 156.5 164.94C158.176 163.078 160.27 161.641 162.61 160.747C164.95 159.853 167.469 159.528 169.959 159.799C172.449 160.069 174.84 160.928 176.933 162.303C179.027 163.678 180.763 165.532 182 167.71L227.65 248.06C229.021 250.456 229.742 253.169 229.742 255.93C229.742 258.691 229.021 261.404 227.65 263.8L181.55 343.93ZM256 391.11C246.484 391.112 236.994 390.107 227.69 388.11C225.266 387.568 223.004 386.464 221.087 384.885C219.17 383.306 217.651 381.298 216.655 379.023C215.659 376.747 215.212 374.27 215.352 371.79C215.492 369.31 216.214 366.899 217.46 364.75L263.46 284.75C264.844 282.339 266.839 280.337 269.245 278.944C271.65 277.552 274.381 276.819 277.16 276.82H369.3C371.782 276.816 374.23 277.397 376.446 278.516C378.661 279.634 380.582 281.259 382.053 283.258C383.523 285.258 384.502 287.576 384.91 290.024C385.318 292.472 385.143 294.982 384.4 297.35C366.91 351.67 316 391.11 256 391.11ZM263.51 227.21L218 147.07C216.767 144.918 216.057 142.506 215.928 140.029C215.8 137.552 216.255 135.079 217.259 132.811C218.263 130.543 219.786 128.543 221.706 126.972C223.626 125.401 225.888 124.304 228.31 123.77C237.415 121.851 246.695 120.886 256 120.89C316 120.89 366.91 160.33 384.37 214.68C385.113 217.048 385.288 219.558 384.88 222.006C384.472 224.454 383.493 226.772 382.023 228.772C380.552 230.771 378.631 232.396 376.416 233.514C374.2 234.633 371.752 235.214 369.27 235.21H277.27C274.473 235.216 271.725 234.478 269.308 233.072C266.89 231.666 264.889 229.643 263.51 227.21Z" fill="url(#paint0_linear_46_10)"/>
+<defs>
+<linearGradient id="paint0_linear_46_10" x1="48" y1="50" x2="464" y2="462" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A562D5"/>
+<stop offset="1" stop-color="#306FEB"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/wallets/react-wallet-v2/public/wallet-connect-logo.svg b/wallets/react-wallet-v2/public/wallet-connect-logo.svg
new file mode 100644
index 0000000..897281f
--- /dev/null
+++ b/wallets/react-wallet-v2/public/wallet-connect-logo.svg
@@ -0,0 +1,3 @@
+<svg width="388" height="238" viewBox="0 0 388 238" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M79.4993 46.539C142.716 -15.355 245.209 -15.355 308.426 46.539L316.034 53.988C319.195 57.0827 319.195 62.1002 316.034 65.1949L290.008 90.6766C288.427 92.2239 285.865 92.2239 284.285 90.6766L273.815 80.4258C229.714 37.247 158.211 37.247 114.11 80.4258L102.898 91.4035C101.317 92.9509 98.7551 92.9509 97.1747 91.4035L71.1486 65.9219C67.9878 62.8272 67.9878 57.8096 71.1486 54.715L79.4993 46.539ZM362.25 99.2378L385.413 121.917C388.574 125.011 388.574 130.029 385.413 133.123L280.969 235.385C277.808 238.48 272.683 238.48 269.522 235.385C269.522 235.385 269.522 235.385 269.522 235.385L195.394 162.807C194.604 162.033 193.322 162.033 192.532 162.807C192.532 162.807 192.532 162.807 192.532 162.807L118.405 235.385C115.244 238.48 110.12 238.48 106.959 235.385C106.959 235.385 106.959 235.385 106.959 235.385L2.51129 133.122C-0.649517 130.027 -0.649517 125.01 2.51129 121.915L25.6746 99.2365C28.8354 96.1418 33.9601 96.1418 37.1209 99.2365L111.25 171.816C112.041 172.589 113.322 172.589 114.112 171.816C114.112 171.816 114.112 171.815 114.112 171.815L188.238 99.2365C191.399 96.1417 196.523 96.1416 199.684 99.2362C199.684 99.2362 199.684 99.2363 199.684 99.2363L273.814 171.815C274.604 172.589 275.885 172.589 276.675 171.815L350.804 99.2378C353.964 96.1431 359.089 96.1431 362.25 99.2378Z" fill="white"/>
+</svg>
diff --git a/wallets/react-wallet-v2/src/components/AccountCard.tsx b/wallets/react-wallet-v2/src/components/AccountCard.tsx
index fca0044..0350aff 100644
--- a/wallets/react-wallet-v2/src/components/AccountCard.tsx
+++ b/wallets/react-wallet-v2/src/components/AccountCard.tsx
@@ -1,6 +1,5 @@
 import { truncate } from '@/utils/HelperUtil'
-import { Avatar, Button, Card, Text } from '@nextui-org/react'
-import { Paper } from 'react-iconly'
+import { Avatar, Card, Text } from '@nextui-org/react'
 
 interface Props {
   name: string
@@ -16,14 +15,19 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
       borderWeight="light"
       css={{
         borderColor: `rgba(${rgb}, 0.4)`,
-        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.2)`,
+        boxShadow: `0 0 10px 0 rgba(${rgb}, 0.15)`,
+        backgroundColor: `rgba(${rgb}, 0.25)`,
         marginBottom: '$6',
-        overflowY: 'hidden',
         minHeight: '70px'
       }}
     >
       <Card.Body
-        css={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}
+        css={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          overflow: 'hidden'
+        }}
       >
         <Avatar src={logo} />
         <div style={{ flex: 1 }}>
@@ -34,7 +38,6 @@ export default function AccountCard({ name, logo, rgb, address }: Props) {
             {truncate(address, 19)}
           </Text>
         </div>
-        <Button auto flat color="primary" icon={<Paper filled />} />
       </Card.Body>
     </Card>
   )
diff --git a/wallets/react-wallet-v2/src/components/Layout.tsx b/wallets/react-wallet-v2/src/components/Layout.tsx
index 934d489..d879daf 100644
--- a/wallets/react-wallet-v2/src/components/Layout.tsx
+++ b/wallets/react-wallet-v2/src/components/Layout.tsx
@@ -1,4 +1,5 @@
-import { Card, Container, Divider, Loading } from '@nextui-org/react'
+import Navigation from '@/components/Navigation'
+import { Card, Container, Loading } from '@nextui-org/react'
 import { Fragment, ReactNode } from 'react'
 
 /**
@@ -12,30 +13,51 @@ interface Props {
 /**
  * Container
  */
-export default function GlobalLayout({ children, initialized }: Props) {
+export default function Layout({ children, initialized }: Props) {
   return (
     <Container
       display="flex"
       justify="center"
       alignItems="center"
-      css={{ width: '100vw', height: '100vh' }}
+      css={{
+        width: '100vw',
+        height: '100vh',
+        paddingLeft: 0,
+        paddingRight: 0
+      }}
     >
       <Card
-        bordered
-        borderWeight="light"
+        bordered={{ '@initial': false, '@xs': true }}
+        borderWeight={{ '@initial': 'light', '@xs': 'light' }}
         css={{
-          height: '92vh',
-          maxWidth: '500px',
+          height: '100vh',
           width: '100%',
           justifyContent: initialized ? 'normal' : 'center',
-          alignItems: initialized ? 'normal' : 'center'
+          alignItems: initialized ? 'normal' : 'center',
+          borderRadius: 0,
+          '@xs': {
+            borderRadius: '$lg',
+            height: '93vh',
+            maxWidth: '450px'
+          }
         }}
       >
         {initialized ? (
           <Fragment>
-            <Card.Body css={{ overflow: 'scroll' }}>{children}</Card.Body>
-            <Divider />
-            <Card.Footer>Footer</Card.Footer>
+            <Card.Body
+              css={{
+                padding: 0,
+                '@xs': {
+                  padding: '20px'
+                }
+              }}
+            >
+              {children}
+            </Card.Body>
+
+            <Card.Footer>
+              <Navigation />
+            </Card.Footer>
           </Fragment>
         ) : (
           <Loading />
diff --git a/wallets/react-wallet-v2/src/components/Navigation.tsx b/wallets/react-wallet-v2/src/components/Navigation.tsx
new file mode 100644
index 0000000..1802690
--- /dev/null
+++ b/wallets/react-wallet-v2/src/components/Navigation.tsx
@@ -0,0 +1,39 @@
+import { Avatar, Row } from '@nextui-org/react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function Navigation() {
+  return (
+    <Row justify="space-between" align="center" css={{ width: '80%', margin: '0 auto' }}>
+      <Link href="/" passHref>
+        <a>
+          <Image alt="accounts icon" src="/accounts-icon.svg" width={30} height={30} />
+        </a>
+      </Link>
+
+      <Link href="/walletconnect" passHref>
+        <a>
+          <Avatar
+            size="lg"
+            css={{ cursor: 'pointer' }}
+            color="gradient"
+            icon={
+              <Image
+                alt="wallet connect icon"
+                src="/wallet-connect-logo.svg"
+                width={30}
+                height={30}
+              />
+            }
+          />
+        </a>
+      </Link>
+
+      <Link href="/settings" passHref>
+        <a>
+          <Image alt="settings icon" src="/settings-icon.svg" width={35} height={35} />
+        </a>
+      </Link>
+    </Row>
+  )
+}
diff --git a/wallets/react-wallet-v2/yarn.lock b/wallets/react-wallet-v2/yarn.lock
index a1c5f51..54f3bc9 100644
--- a/wallets/react-wallet-v2/yarn.lock
+++ b/wallets/react-wallet-v2/yarn.lock
@@ -555,10 +555,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/node@17.0.15":
-  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.15.tgz#97779282c09c09577120a2162e71d8380003590a"
-  integrity sha512-zWt4SDDv1S9WRBNxLFxFRHxdD9tvH8f5/kg5/IaLFdnSNXsDY4eL3Q3XXN+VxUnWIhyVFDwcsmAprvwXoM/ClA==
+"@types/node@17.0.16":
+  version "17.0.16"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.16.tgz#e3733f46797b9df9e853ca9f719c8a6f7b84cd26"
+  integrity sha512-ydLaGVfQOQ6hI1xK2A5nVh8bl0OGoIfYMxPWHqqYe9bTkWCfqiVvZoh2I/QF2sNSkZzZyROBoTefIEI+PB6iIA==
 
 "@types/prop-types@*":
   version "15.7.4"