From 0da91497dbc780d3da749f16f983b52942365e5f Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Wed, 1 Sep 2021 15:25:48 +0200
Subject: [PATCH] UI improvements (#37)

---
 .../react-components/src/WakuPolling/Poll.tsx |  1 +
 .../src/WakuPolling/index.tsx                 | 36 ++++++++++++++-----
 .../react-components/src/assets/svg/dapp.svg  | 13 +++++++
 .../src/assets/svg/metamask.svg               | 10 ++++++
 .../src/assets/svg/status.svg                 |  5 +++
 .../src/components/Networks.tsx               | 32 +++++++++++++++++
 6 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-components/src/assets/svg/dapp.svg
 create mode 100644 packages/react-components/src/assets/svg/metamask.svg
 create mode 100644 packages/react-components/src/assets/svg/status.svg
 create mode 100644 packages/react-components/src/components/Networks.tsx

diff --git a/packages/react-components/src/WakuPolling/Poll.tsx b/packages/react-components/src/WakuPolling/Poll.tsx
index 9509ce8..c7ade22 100644
--- a/packages/react-components/src/WakuPolling/Poll.tsx
+++ b/packages/react-components/src/WakuPolling/Poll.tsx
@@ -109,6 +109,7 @@ const PollTitle = styled.div`
   font-weight: bold;
   font-size: 22px;
   line-height: 24px;
+  word-break: break-all;
 `
 
 const PollAnswersWrapper = styled.div`
diff --git a/packages/react-components/src/WakuPolling/index.tsx b/packages/react-components/src/WakuPolling/index.tsx
index cea9071..7d658c7 100644
--- a/packages/react-components/src/WakuPolling/index.tsx
+++ b/packages/react-components/src/WakuPolling/index.tsx
@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react'
 import WakuVoting from '@status-waku-voting/core'
+import { useEthers } from '@usedapp/core'
 import { providers } from 'ethers'
 import { PollList } from './PollList'
 import styled from 'styled-components'
 import { PollCreation } from './PollCreation'
 import { Button } from '../components/misc/Buttons'
 import { JsonRpcSigner } from '@ethersproject/providers'
+import { Modal } from '../components/Modal'
+import { Networks } from '../components/Networks'
 
 type WakuPollingProps = {
   appName: string
@@ -14,8 +17,11 @@ type WakuPollingProps = {
 }
 
 function WakuPolling({ appName, signer, localhost }: WakuPollingProps) {
+  const { activateBrowserWallet, account } = useEthers()
   const [wakuVoting, setWakuVoting] = useState<WakuVoting | undefined>(undefined)
   const [showPollCreation, setShowPollCreation] = useState(false)
+  const [selectConnect, setSelectConnect] = useState(false)
+
   let waku: any | undefined = undefined
   if (localhost) {
     waku = {
@@ -46,9 +52,27 @@ function WakuPolling({ appName, signer, localhost }: WakuPollingProps) {
       {showPollCreation && signer && (
         <PollCreation signer={signer} wakuVoting={wakuVoting} setShowPollCreation={setShowPollCreation} />
       )}
-      <CreatePollButton disabled={!signer} onClick={() => setShowPollCreation(true)}>
-        Create a poll
-      </CreatePollButton>
+      {account ? (
+        <CreatePollButton disabled={!signer} onClick={() => setShowPollCreation(true)}>
+          Create a poll
+        </CreatePollButton>
+      ) : (
+        <CreatePollButton
+          onClick={() => {
+            if ((window as any).ethereum) {
+              activateBrowserWallet()
+            } else setSelectConnect(true)
+          }}
+        >
+          Connect to vote
+        </CreatePollButton>
+      )}
+      {selectConnect && (
+        <Modal heading="Connect" setShowModal={setSelectConnect}>
+          <Networks />
+        </Modal>
+      )}
+
       <PollList wakuVoting={wakuVoting} signer={signer} />
     </Wrapper>
   )
@@ -61,7 +85,6 @@ const CreatePollButton = styled(Button)`
   font-weight: bold;
   font-size: 15px;
   line-height: 24px;
-  padding: 10px 125.5px;
   margin-bottom: 48px;
 
   &:not(:disabled):hover {
@@ -72,11 +95,6 @@ const CreatePollButton = styled(Button)`
     background: #f4b77e;
   }
 
-  &:disabled {
-    background: #888888;
-    filter: grayscale(1);
-  }
-
   @media (max-width: 425px) {
     position: fixed;
     bottom: 0;
diff --git a/packages/react-components/src/assets/svg/dapp.svg b/packages/react-components/src/assets/svg/dapp.svg
new file mode 100644
index 0000000..ea6750b
--- /dev/null
+++ b/packages/react-components/src/assets/svg/dapp.svg
@@ -0,0 +1,13 @@
+<svg width="176" height="64" viewBox="0 0 176 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M36.8154 11.9388C32.8028 9.66302 28.903 7.45134 25.0033 5.23965C24.3426 4.87104 23.698 4.93514 23.0534 5.30376C15.9306 9.37454 8.80786 13.4293 1.70122 17.5001C1.47561 17.6283 1.26611 17.9969 1.26611 18.2533C1.25 26.3789 1.23389 34.4884 1.28223 42.5979C1.28223 43.1268 1.6851 43.8801 2.1202 44.1365C5.95553 46.3962 9.8392 48.5598 13.7229 50.7555C13.7551 50.7715 13.8196 50.7555 13.9968 50.7555C13.9968 50.451 13.9968 50.1305 13.9968 49.826C13.9968 41.8447 14.0129 33.8794 13.9807 25.8981C13.9807 25.1448 14.2547 24.7922 14.867 24.4557C22.0059 20.4169 29.1287 16.3622 36.2514 12.3074C36.3964 12.2273 36.5576 12.1151 36.8154 11.9388Z" fill="#151512"/>
+<path d="M30.4659 53.0004C30.4659 52.6318 30.4659 52.3273 30.4659 52.0388C30.4659 46.4615 30.4821 40.8842 30.4498 35.2909C30.4498 34.5697 30.6593 34.1851 31.3039 33.8325C36.2673 31.0599 41.1984 28.2392 46.1457 25.4345C46.3874 25.3063 46.613 25.162 46.9031 24.9858C46.7742 24.8736 46.6936 24.7774 46.5808 24.7133C43.3578 22.8702 40.1187 21.0432 36.9119 19.1681C35.9611 18.6071 35.1392 18.5911 34.1562 19.152C29.354 21.9247 24.5196 24.6492 19.6851 27.3737C19.1533 27.6622 18.9922 27.9988 18.9922 28.5918C19.0083 34.153 19.0083 39.6983 18.9922 45.2595C18.9922 46.0929 19.25 46.75 19.9913 47.1667C23.3271 49.0579 26.6467 50.933 29.9825 52.8241C30.0953 52.8883 30.2403 52.9203 30.4659 53.0004Z" fill="#151512"/>
+<path d="M46.9996 43.6885C43.116 41.4768 39.3773 39.3613 35.542 37.1816C35.542 41.5569 35.542 45.788 35.542 50.1953C39.3451 48.0317 43.0837 45.9162 46.9996 43.6885Z" fill="#151512"/>
+</g>
+<path d="M60.4574 35C64.2244 35 66.5064 32.6697 66.5064 28.8061C66.5064 24.9545 64.2244 22.6364 60.4936 22.6364H56.0746V35H60.4574ZM58.6886 32.7603V24.8761H60.3548C62.6729 24.8761 63.8984 26.0593 63.8984 28.8061C63.8984 31.565 62.6729 32.7603 60.3487 32.7603H58.6886ZM69.8765 35L70.7941 32.1808H75.2554L76.173 35H78.9742L74.7121 22.6364H71.3435L67.0754 35H69.8765ZM71.4582 30.1403L72.9795 25.4616H73.0761L74.5974 30.1403H71.4582ZM80.414 38.4773H82.9857V33.5149H83.0642C83.4204 34.2876 84.1991 35.1509 85.6963 35.1509C87.8092 35.1509 89.4573 33.4787 89.4573 30.3757C89.4573 27.1882 87.7368 25.6065 85.7023 25.6065C84.1508 25.6065 83.4083 26.5302 83.0642 27.2848H82.9495V25.7273H80.414V38.4773ZM82.9314 30.3636C82.9314 28.7095 83.6317 27.6531 84.8813 27.6531C86.1551 27.6531 86.8312 28.7578 86.8312 30.3636C86.8312 31.9815 86.143 33.1044 84.8813 33.1044C83.6437 33.1044 82.9314 32.0178 82.9314 30.3636ZM91.1718 38.4773H93.7435V33.5149H93.822C94.1782 34.2876 94.9569 35.1509 96.4541 35.1509C98.567 35.1509 100.215 33.4787 100.215 30.3757C100.215 27.1882 98.4946 25.6065 96.4601 25.6065C94.9086 25.6065 94.1661 26.5302 93.822 27.2848H93.7073V25.7273H91.1718V38.4773ZM93.6892 30.3636C93.6892 28.7095 94.3895 27.6531 95.6391 27.6531C96.9129 27.6531 97.589 28.7578 97.589 30.3636C97.589 31.9815 96.9008 33.1044 95.6391 33.1044C94.4015 33.1044 93.6892 32.0178 93.6892 30.3636ZM116.821 26.9648C116.477 24.1094 114.316 22.4673 111.454 22.4673C108.188 22.4673 105.695 24.7734 105.695 28.8182C105.695 32.8509 108.146 35.169 111.454 35.169C114.624 35.169 116.537 33.0621 116.821 30.7862L114.177 30.7741C113.93 32.0962 112.891 32.8569 111.497 32.8569C109.619 32.8569 108.345 31.4624 108.345 28.8182C108.345 26.2464 109.601 24.7795 111.515 24.7795C112.945 24.7795 113.978 25.6065 114.177 26.9648H116.821ZM122.837 35.1811C125.65 35.1811 127.401 33.2553 127.401 30.3999C127.401 27.5263 125.65 25.6065 122.837 25.6065C120.024 25.6065 118.273 27.5263 118.273 30.3999C118.273 33.2553 120.024 35.1811 122.837 35.1811ZM122.849 33.1889C121.551 33.1889 120.887 31.9996 120.887 30.3817C120.887 28.7638 121.551 27.5685 122.849 27.5685C124.123 27.5685 124.787 28.7638 124.787 30.3817C124.787 31.9996 124.123 33.1889 122.849 33.1889ZM131.645 29.6392C131.651 28.4439 132.363 27.7436 133.402 27.7436C134.434 27.7436 135.056 28.4197 135.05 29.5547V35H137.621V29.0959C137.621 26.9347 136.354 25.6065 134.422 25.6065C133.045 25.6065 132.049 26.2827 131.633 27.3633H131.524V25.7273H129.073V35H131.645V29.6392ZM142.22 29.6392C142.226 28.4439 142.938 27.7436 143.977 27.7436C145.009 27.7436 145.631 28.4197 145.625 29.5547V35H148.197V29.0959C148.197 26.9347 146.929 25.6065 144.997 25.6065C143.621 25.6065 142.625 26.2827 142.208 27.3633H142.099V25.7273H139.648V35H142.22V29.6392ZM154.449 35.1811C156.743 35.1811 158.289 34.0643 158.651 32.3438L156.273 32.1868C156.013 32.8931 155.349 33.2614 154.492 33.2614C153.206 33.2614 152.391 32.4102 152.391 31.0277V31.0217H158.705V30.3153C158.705 27.1641 156.798 25.6065 154.347 25.6065C151.618 25.6065 149.849 27.5444 149.849 30.4059C149.849 33.3459 151.594 35.1811 154.449 35.1811ZM152.391 29.4279C152.445 28.3714 153.248 27.5263 154.389 27.5263C155.506 27.5263 156.279 28.3232 156.285 29.4279H152.391ZM164.573 35.1811C167.042 35.1811 168.594 33.7322 168.715 31.6012H166.288C166.137 32.5913 165.485 33.1467 164.604 33.1467C163.402 33.1467 162.623 32.1385 162.623 30.3636C162.623 28.6129 163.408 27.6108 164.604 27.6108C165.545 27.6108 166.149 28.2326 166.288 29.1562H168.715C168.606 27.0131 166.982 25.6065 164.561 25.6065C161.748 25.6065 160.009 27.5565 160.009 30.3999C160.009 33.2191 161.718 35.1811 164.573 35.1811ZM175.293 25.7273H173.549V23.5057H170.977V25.7273H169.709V27.6591H170.977V32.4886C170.965 34.3058 172.203 35.2053 174.068 35.1268C174.732 35.1026 175.203 34.9698 175.462 34.8853L175.058 32.9716C174.931 32.9957 174.66 33.0561 174.418 33.0561C173.905 33.0561 173.549 32.8629 173.549 32.1506V27.6591H175.293V25.7273Z" fill="black"/>
+<defs>
+<clipPath id="clip0">
+<rect width="45.75" height="48" fill="white" transform="translate(1.25 5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/react-components/src/assets/svg/metamask.svg b/packages/react-components/src/assets/svg/metamask.svg
new file mode 100644
index 0000000..eb78c2b
--- /dev/null
+++ b/packages/react-components/src/assets/svg/metamask.svg
@@ -0,0 +1,10 @@
+<svg width="168" height="64" viewBox="0 0 168 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="64" height="64" fill="url(#pattern0)"/>
+<path d="M81.0746 25.6364V38H83.6101V29.9226H83.7127L86.9123 37.9396H88.6388L91.8384 29.9528H91.9411V38H94.4766V25.6364H91.2528L87.848 33.9432H87.7031L84.2983 25.6364H81.0746ZM100.808 38.1811C103.102 38.1811 104.647 37.0643 105.01 35.3438L102.631 35.1868C102.371 35.8931 101.707 36.2614 100.85 36.2614C99.5642 36.2614 98.7492 35.4102 98.7492 34.0277V34.0217H105.064V33.3153C105.064 30.1641 103.156 28.6065 100.705 28.6065C97.9765 28.6065 96.2077 30.5444 96.2077 33.4059C96.2077 36.3459 97.9523 38.1811 100.808 38.1811ZM98.7492 32.4279C98.8035 31.3714 99.6064 30.5263 100.747 30.5263C101.864 30.5263 102.637 31.3232 102.643 32.4279H98.7492ZM111.674 28.7273H109.93V26.5057H107.358V28.7273H106.09V30.6591H107.358V35.4886C107.346 37.3058 108.583 38.2053 110.449 38.1268C111.113 38.1026 111.584 37.9698 111.843 37.8853L111.439 35.9716C111.312 35.9957 111.04 36.0561 110.799 36.0561C110.286 36.0561 109.93 35.8629 109.93 35.1506V30.6591H111.674V28.7273ZM115.994 38.1751C117.364 38.1751 118.252 37.5774 118.704 36.7141H118.777V38H121.216V31.7457C121.216 29.5362 119.344 28.6065 117.28 28.6065C115.058 28.6065 113.597 29.669 113.241 31.3594L115.619 31.5526C115.794 30.9368 116.344 30.484 117.267 30.484C118.143 30.484 118.644 30.9247 118.644 31.6854V31.7216C118.644 32.3192 118.01 32.3977 116.398 32.5547C114.563 32.7237 112.915 33.3395 112.915 35.4102C112.915 37.2454 114.225 38.1751 115.994 38.1751ZM116.73 36.4002C115.939 36.4002 115.372 36.032 115.372 35.3256C115.372 34.6012 115.97 34.245 116.875 34.1183C117.437 34.0398 118.354 33.907 118.662 33.7017V34.6857C118.662 35.6577 117.859 36.4002 116.73 36.4002ZM123.259 25.6364V38H125.795V29.9226H125.897L129.097 37.9396H130.823L134.023 29.9528H134.126V38H136.661V25.6364H133.437L130.033 33.9432H129.888L126.483 25.6364H123.259ZM141.411 38.1751C142.781 38.1751 143.669 37.5774 144.121 36.7141H144.194V38H146.633V31.7457C146.633 29.5362 144.761 28.6065 142.697 28.6065C140.475 28.6065 139.014 29.669 138.658 31.3594L141.036 31.5526C141.211 30.9368 141.761 30.484 142.684 30.484C143.56 30.484 144.061 30.9247 144.061 31.6854V31.7216C144.061 32.3192 143.427 32.3977 141.815 32.5547C139.98 32.7237 138.332 33.3395 138.332 35.4102C138.332 37.2454 139.642 38.1751 141.411 38.1751ZM142.147 36.4002C141.356 36.4002 140.789 36.032 140.789 35.3256C140.789 34.6012 141.387 34.245 142.292 34.1183C142.854 34.0398 143.771 33.907 144.079 33.7017V34.6857C144.079 35.6577 143.276 36.4002 142.147 36.4002ZM156.343 31.3714C156.114 29.663 154.737 28.6065 152.395 28.6065C150.022 28.6065 148.459 29.7053 148.465 31.4922C148.459 32.8807 149.334 33.7802 151.145 34.1424L152.751 34.4624C153.56 34.6254 153.928 34.9212 153.94 35.386C153.928 35.9354 153.331 36.3278 152.431 36.3278C151.513 36.3278 150.904 35.9354 150.747 35.1808L148.217 35.3136C148.459 37.0884 149.968 38.1811 152.425 38.1811C154.828 38.1811 156.548 36.9556 156.554 35.1264C156.548 33.7862 155.673 32.9833 153.874 32.6151L152.196 32.277C151.332 32.0898 151.012 31.794 151.018 31.3473C151.012 30.7919 151.64 30.4297 152.437 30.4297C153.331 30.4297 153.862 30.9187 153.989 31.5163L156.343 31.3714ZM158.174 38H160.745V35.054L161.44 34.2631L163.969 38H166.982L163.366 32.7418L166.807 28.7273H163.854L160.884 32.2468H160.745V25.6364H158.174V38Z" fill="black"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00666667)"/>
+</pattern>
+<image id="image0" width="150" height="150" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/packages/react-components/src/assets/svg/status.svg b/packages/react-components/src/assets/svg/status.svg
new file mode 100644
index 0000000..28f3f58
--- /dev/null
+++ b/packages/react-components/src/assets/svg/status.svg
@@ -0,0 +1,5 @@
+<svg width="120" height="45" viewBox="0 0 120 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.667 0C10.1481 0 0 10.0736 0 22.5C0 34.9264 10.1481 45 22.667 45C35.1859 45 45.3349 34.9264 45.3349 22.5C45.3349 10.0736 35.1859 0 22.667 0Z" fill="#4360DF"/>
+<path d="M22.7854 21.5139C23.9287 21.6312 25.0711 21.7485 26.4762 21.6714C30.2822 21.4616 32.5881 19.5299 32.4244 16.6426C32.2573 13.7048 29.19 11.8951 26.1211 12.0647C21.1192 12.3395 17.4406 16.682 17.0271 21.6432C17.7065 21.4865 18.4217 21.3917 19.0954 21.3548C20.5006 21.2776 21.643 21.3949 22.7854 21.5131V21.5139ZM12.9811 27.936C13.1384 30.6288 16.0444 32.2882 18.9519 32.1323C23.6919 31.8799 27.176 27.8998 27.5676 23.3516C26.9238 23.4963 26.2468 23.5823 25.6079 23.6168C24.2773 23.6875 23.1949 23.579 22.1117 23.4722C21.0292 23.3637 19.9468 23.256 18.6154 23.3275C15.0098 23.5196 12.8262 25.2898 12.9803 27.9368L12.9811 27.936Z" fill="white"/>
+<path d="M54.1572 26.2366H57.4394C57.4394 26.7871 57.5959 27.1824 57.9097 27.4227C58.2234 27.6629 58.6256 27.7827 59.1178 27.7827C59.5232 27.7827 59.8556 27.7087 60.1118 27.5601C60.3753 27.405 60.5067 27.1543 60.5067 26.8079C60.5067 26.603 60.4499 26.4375 60.3364 26.3097C60.2294 26.1763 60.0616 26.0598 59.8337 25.961C59.5496 25.8344 59.2567 25.728 58.9572 25.6428C58.6005 25.5367 58.1732 25.4025 57.6745 25.241C57.2468 25.1069 56.8226 24.9619 56.4024 24.8063C56.0321 24.663 55.6833 24.4705 55.3653 24.2341C55.0711 24.0139 54.8301 23.7314 54.6599 23.4072C54.4961 23.0826 54.4143 22.68 54.4143 22.1995C54.4143 21.649 54.5245 21.1725 54.7459 20.7691C54.9673 20.3659 55.2867 20.0237 55.6751 19.7735C56.0748 19.5123 56.5524 19.3187 57.1078 19.1909C57.7105 19.0516 58.3278 18.9841 58.9467 18.99C59.7656 18.99 60.471 19.0816 61.0629 19.2656C61.6548 19.4488 62.1388 19.6996 62.5167 20.0178C62.8945 20.3352 63.1726 20.7096 63.3502 21.1404C63.5359 21.5711 63.6283 22.0339 63.6283 22.5281H60.3251C60.3251 22.0974 60.2115 21.7615 59.9829 21.5221C59.7624 21.281 59.4234 21.1612 58.9678 21.1612C58.6191 21.1612 58.3191 21.2392 58.0702 21.3943C57.8205 21.5429 57.6956 21.7687 57.6956 22.0725C57.6956 22.2774 57.7524 22.4437 57.8667 22.5707C57.9883 22.6912 58.1626 22.7997 58.3905 22.8994C58.6183 22.9982 58.9005 23.1003 59.2353 23.2063C59.5702 23.3052 59.9545 23.4249 60.3899 23.5663C60.8602 23.6933 61.298 23.8347 61.7043 23.9898C62.1105 24.1457 62.4664 24.3362 62.7729 24.562C63.0867 24.7813 63.3324 25.0602 63.5107 25.3993C63.6964 25.7312 63.7888 26.1546 63.7888 26.6705C63.7888 27.278 63.6607 27.7971 63.4037 28.2279C63.1473 28.6515 62.7915 29.0077 62.3667 29.2661C61.9394 29.5345 61.4407 29.7249 60.8707 29.8382C60.3007 29.9587 59.7016 30.0182 59.0748 30.0182C57.514 30.0182 56.3026 29.6968 55.4399 29.0539C54.5853 28.4046 54.1572 27.4661 54.1572 26.2366ZM64.6224 21.7446V19.2761H66.2797V16.1719H69.6145V19.2761H72.0194V21.7446H69.6145V25.4837C69.6145 25.8726 69.6502 26.1828 69.7215 26.4158C69.7929 26.6424 69.8918 26.8224 70.0207 26.9566C70.1561 27.0836 70.3167 27.1687 70.5015 27.2105C70.6945 27.2459 70.9078 27.2636 71.1429 27.2636C71.2856 27.2636 71.4672 27.2604 71.6886 27.2531C71.9091 27.2395 72.1021 27.2178 72.2651 27.1888V29.7321C72.0161 29.7747 71.7024 29.8133 71.3245 29.8487C70.8875 29.8868 70.4489 29.9045 70.0102 29.9017C69.6178 29.9017 69.2051 29.8736 68.7697 29.8173C68.338 29.7619 67.9248 29.6097 67.5615 29.3721C67.1918 29.1311 66.8853 28.7646 66.6429 28.2704C66.4005 27.769 66.2797 27.0836 66.2797 26.2149V21.7446H64.6224ZM73.2275 24.4985C73.2275 23.715 73.3524 22.9878 73.6013 22.3168C73.8377 21.6782 74.1974 21.0914 74.6602 20.5891C75.1108 20.1061 75.6516 19.7142 76.2526 19.4352C76.8682 19.1503 77.5403 19.0054 78.2197 19.0109C79.0102 19.0109 79.6953 19.1772 80.2718 19.5091C80.8556 19.841 81.2943 20.2612 81.587 20.7699V19.2753H84.9324V29.7321H81.587V28.2592C81.3226 28.7397 80.8986 29.1496 80.314 29.4887C79.7302 29.8278 79.0321 29.9973 78.2197 29.9973C77.5207 29.9973 76.8656 29.8559 76.2526 29.573C75.6515 29.2938 75.1107 28.9016 74.6602 28.4183C74.1989 27.9113 73.8395 27.3216 73.6013 26.681C73.347 25.9812 73.2204 25.2422 73.2275 24.4985ZM76.5518 24.4985C76.5518 24.8593 76.6126 25.2056 76.7334 25.5367C76.8616 25.8621 77.0334 26.1442 77.2467 26.3845C77.468 26.6175 77.7316 26.8079 78.038 26.9566C78.3445 27.098 78.6867 27.1688 79.0637 27.1688C79.4416 27.1688 79.7837 27.098 80.0902 26.9566C80.3889 26.8189 80.6575 26.6245 80.8807 26.3845C81.1021 26.1442 81.2732 25.8621 81.394 25.5367C81.5221 25.2121 81.587 24.8657 81.587 24.4985C81.587 24.1385 81.5221 23.7994 81.394 23.482C81.277 23.1705 81.103 22.8831 80.8807 22.6342C80.6663 22.3864 80.4002 22.1877 80.1007 22.0516C79.775 21.9062 79.4209 21.8338 79.0637 21.8395C78.6859 21.8395 78.3445 21.9102 78.038 22.0516C77.7363 22.1893 77.4668 22.3877 77.2467 22.6342C77.0326 22.8817 76.8616 23.1646 76.7334 23.482C76.6118 23.7994 76.5518 24.1385 76.5518 24.4985ZM86.7283 21.7446V19.2761H88.3848V16.1719H91.7205V19.2761H94.1253V21.7446H91.7205V25.4837C91.7205 25.8726 91.7561 26.1828 91.8267 26.4158C91.898 26.6424 91.9978 26.8224 92.1267 26.9566C92.2621 27.0836 92.4218 27.1687 92.6075 27.2105C92.7997 27.2459 93.0137 27.2636 93.2488 27.2636C93.3915 27.2636 93.5732 27.2604 93.7937 27.2531C94.0151 27.2395 94.2072 27.2178 94.371 27.1888V29.7321C94.1221 29.7747 93.8083 29.8133 93.4305 29.8487C92.9932 29.8868 92.5543 29.9045 92.1153 29.9017C91.7237 29.9017 91.3102 29.8736 90.8756 29.8173C90.444 29.7619 90.0308 29.6096 89.6675 29.3721C89.297 29.1311 88.9905 28.7646 88.7488 28.2704C88.5064 27.769 88.3848 27.0836 88.3848 26.2149V21.7446H86.7283ZM96.0283 25.4837V19.2761H99.3526V24.6359C99.3526 25.3848 99.488 25.9963 99.7589 26.4696C100.03 26.9357 100.514 27.1688 101.213 27.1688C101.911 27.1688 102.424 26.9317 102.752 26.4584C103.086 25.9787 103.254 25.3318 103.254 24.5202V19.2761H106.6V29.7321H103.254V28.2383C102.962 28.7896 102.516 29.2203 101.918 29.5304C101.319 29.8414 100.603 29.9965 99.7694 29.9965C99.0421 29.9965 98.4437 29.884 97.9734 29.6582C97.5392 29.4542 97.1532 29.1618 96.8407 28.8C96.5048 28.3964 96.2767 27.9156 96.1775 27.4018C96.0778 26.8714 96.0283 26.2326 96.0283 25.4837ZM108.759 26.2366H112.041C112.041 26.7871 112.197 27.1824 112.511 27.4227C112.824 27.6629 113.227 27.7827 113.719 27.7827C114.125 27.7827 114.456 27.7087 114.713 27.5601C114.977 27.405 115.108 27.1543 115.108 26.8079C115.108 26.603 115.052 26.4375 114.937 26.3097C114.831 26.1763 114.663 26.0598 114.435 25.961C114.151 25.8345 113.858 25.7282 113.559 25.6428C113.202 25.5367 112.775 25.4025 112.276 25.241C111.848 25.1069 111.424 24.962 111.004 24.8063C110.634 24.6631 110.285 24.4706 109.967 24.2341C109.673 24.0139 109.432 23.7314 109.262 23.4072C109.098 23.0826 109.016 22.68 109.016 22.1995C109.016 21.649 109.126 21.1725 109.347 20.7691C109.569 20.3659 109.888 20.0238 110.277 19.7735C110.676 19.5123 111.153 19.3187 111.709 19.1909C112.312 19.0515 112.929 18.9841 113.548 18.99C114.367 18.99 115.073 19.0816 115.665 19.2656C116.256 19.4488 116.74 19.6996 117.118 20.0178C117.496 20.3352 117.773 20.7096 117.952 21.1404C118.139 21.5793 118.234 22.0516 118.23 22.5281H114.927C114.927 22.0974 114.813 21.7615 114.585 21.5221C114.364 21.281 114.025 21.1612 113.569 21.1612C113.22 21.1612 112.921 21.2392 112.671 21.3943C112.422 21.5429 112.297 21.7687 112.297 22.0725C112.297 22.2774 112.354 22.4437 112.468 22.5707C112.589 22.6912 112.764 22.7997 112.992 22.8994C113.22 22.9982 113.501 23.1003 113.836 23.2063C114.172 23.3052 114.556 23.4249 114.991 23.5663C115.461 23.6933 115.9 23.8347 116.306 23.9898C116.712 24.1457 117.068 24.3362 117.375 24.562C117.688 24.7813 117.934 25.0602 118.112 25.3993C118.297 25.7312 118.39 26.1546 118.39 26.6705C118.39 27.278 118.262 27.7971 118.005 28.2279C117.749 28.6516 117.393 29.0077 116.968 29.2661C116.541 29.5345 116.042 29.7249 115.472 29.8382C114.902 29.9587 114.303 30.0182 113.676 30.0182C112.116 30.0182 110.904 29.6968 110.042 29.0539C109.187 28.4046 108.759 27.4661 108.759 26.2366Z" fill="black"/>
+</svg>
diff --git a/packages/react-components/src/components/Networks.tsx b/packages/react-components/src/components/Networks.tsx
new file mode 100644
index 0000000..055f9f2
--- /dev/null
+++ b/packages/react-components/src/components/Networks.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import styled from 'styled-components'
+import dapp from '../assets/svg/dapp.svg'
+import status from '../assets/svg/status.svg'
+import metamask from '../assets/svg/metamask.svg'
+
+export function Networks() {
+  return (
+    <NetworksWrapper>
+      <Network href="https://ethereum.org/en/dapps/" style={{ backgroundImage: `url(${dapp})` }} />
+      <Network href="https://status.im/get/" style={{ backgroundImage: `url(${status})` }} />
+      <Network href="https://metamask.io/" style={{ backgroundImage: `url(${metamask})` }} />
+    </NetworksWrapper>
+  )
+}
+
+const NetworksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`
+
+const Network = styled.a`
+  width: 176px;
+  height: 64px;
+  margin-top: 32px;
+  border: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent;
+`