From 3de0037d8ef86a07a9e2a76080d5682279afb088 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Wed, 1 Sep 2021 11:48:26 +0200
Subject: [PATCH] Add network modal (#33)
---
packages/example/src/assets/images/close.svg | 3 +
packages/example/src/assets/images/dapp.svg | 13 +++
.../example/src/assets/images/metamask.svg | 10 ++
packages/example/src/assets/images/status.svg | 5 +
packages/example/src/components/Modal.tsx | 94 +++++++++++++++++++
packages/example/src/components/TopBar.tsx | 42 ++++++++-
.../react-components/src/WakuPolling/Poll.tsx | 4 +-
.../react-components/src/components/Modal.tsx | 1 +
8 files changed, 170 insertions(+), 2 deletions(-)
create mode 100644 packages/example/src/assets/images/close.svg
create mode 100644 packages/example/src/assets/images/dapp.svg
create mode 100644 packages/example/src/assets/images/metamask.svg
create mode 100644 packages/example/src/assets/images/status.svg
create mode 100644 packages/example/src/components/Modal.tsx
diff --git a/packages/example/src/assets/images/close.svg b/packages/example/src/assets/images/close.svg
new file mode 100644
index 0000000..6f9425b
--- /dev/null
+++ b/packages/example/src/assets/images/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/example/src/assets/images/dapp.svg b/packages/example/src/assets/images/dapp.svg
new file mode 100644
index 0000000..ea6750b
--- /dev/null
+++ b/packages/example/src/assets/images/dapp.svg
@@ -0,0 +1,13 @@
+
diff --git a/packages/example/src/assets/images/metamask.svg b/packages/example/src/assets/images/metamask.svg
new file mode 100644
index 0000000..eb78c2b
--- /dev/null
+++ b/packages/example/src/assets/images/metamask.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/example/src/assets/images/status.svg b/packages/example/src/assets/images/status.svg
new file mode 100644
index 0000000..28f3f58
--- /dev/null
+++ b/packages/example/src/assets/images/status.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/example/src/components/Modal.tsx b/packages/example/src/components/Modal.tsx
new file mode 100644
index 0000000..5523c9d
--- /dev/null
+++ b/packages/example/src/components/Modal.tsx
@@ -0,0 +1,94 @@
+import React, { ReactNode, useEffect } from 'react'
+import styled from 'styled-components'
+import closeButton from '../assets/images/close.svg'
+
+type ModalProps = {
+ heading: string
+ children: ReactNode
+ setShowModal: (val: boolean) => void
+}
+
+export function Modal({ heading, children, setShowModal }: ModalProps) {
+ const body = document.getElementById('root')
+
+ useEffect(() => {
+ if (body) {
+ body.style.position = 'fixed'
+ return () => {
+ body.style.position = 'static'
+ }
+ }
+ }, [])
+
+ return (
+ setShowModal(false)}>
+ e.stopPropagation()}>
+
+ {heading}
+ setShowModal(false)} />
+
+ {children}
+
+
+ )
+}
+
+const PopUpOverlay = styled.div`
+ height: 100vh;
+ width: 100%;
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.4);
+ z-index: 9999;
+ transition: all 0.3s;
+
+ @media (max-width: 600px) {
+ padding: 16px;
+ align-items: center;
+ }
+`
+
+const PopUpWindow = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 468px;
+ max-height: 75vh;
+ background-color: white;
+ margin: 20vh auto 2vh;
+ padding: 24px 24px 32px;
+ box-shadow: 10px 10px 31px -2px #a3a1a1;
+ border-radius: 5px;
+ overflow: scroll;
+ z-index: 9998;
+
+ @media (max-width: 600px) {
+ padding: 16px 16px 32px;
+ margin: 0;
+ }
+`
+const PopUpHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+`
+const PopUpHeading = styled.p`
+ font-style: normal;
+ font-weight: bold;
+ font-size: 17px;
+ line-height: 24px;
+ margin: 0;
+`
+const PopUpContetnt = styled.div`
+ width: 100%;
+`
+const CloseButton = styled.button`
+ width: 24px;
+ height: 24px;
+ background-image: url(${closeButton});
+ background-color: transparent;
+ border: none;
+`
diff --git a/packages/example/src/components/TopBar.tsx b/packages/example/src/components/TopBar.tsx
index 7a2248f..040d96c 100644
--- a/packages/example/src/components/TopBar.tsx
+++ b/packages/example/src/components/TopBar.tsx
@@ -1,6 +1,11 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useEthers, shortenAddress } from '@usedapp/core'
+import dapp from '../assets/images/dapp.svg'
+import status from '../assets/images/status.svg'
+import metamask from '../assets/images/metamask.svg'
+import { Modal } from './Modal'
+
type TopBarProps = {
logo: string
title: string
@@ -9,6 +14,7 @@ type TopBarProps = {
export function TopBar({ logo, title }: TopBarProps) {
const { activateBrowserWallet, deactivate, account } = useEthers()
const [isOpened, setIsOpened] = useState(false)
+ const [selectConnect, setSelectConnect] = useState(false)
return (
@@ -35,9 +41,27 @@ export function TopBar({ logo, title }: TopBarProps) {
) : (
-
+
)}
+
+ {selectConnect && (
+
+
+
+
+
+
+
+ )}
)
}
@@ -181,3 +205,19 @@ const ContentWrapper = styled.div`
padding-left: 24px;
}
`
+const Networks = 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;
+`
diff --git a/packages/react-components/src/WakuPolling/Poll.tsx b/packages/react-components/src/WakuPolling/Poll.tsx
index d602b29..9509ce8 100644
--- a/packages/react-components/src/WakuPolling/Poll.tsx
+++ b/packages/react-components/src/WakuPolling/Poll.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
import { RadioGroup } from '../components/radioGroup'
import { SmallButton } from '../components/misc/Buttons'
import { PollResults } from './PollResults'
+import { useEthers } from '@usedapp/core'
type PollProps = {
poll: DetailedTimedPoll
@@ -16,6 +17,7 @@ type PollProps = {
}
export function Poll({ poll, wakuVoting, signer }: PollProps) {
+ const { account } = useEthers()
const [selectedAnswer, setSelectedAnswer] = useState(undefined)
const [tokenAmount, setTokenAmount] = useState(0)
const [address, setAddress] = useState('')
@@ -61,7 +63,7 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
{userInVoters < 0 && (
{
if (wakuVoting && signer) {
wakuVoting.sendTimedPollVote(
diff --git a/packages/react-components/src/components/Modal.tsx b/packages/react-components/src/components/Modal.tsx
index e26b467..d1692f0 100644
--- a/packages/react-components/src/components/Modal.tsx
+++ b/packages/react-components/src/components/Modal.tsx
@@ -80,6 +80,7 @@ const PopUpHeading = styled.p`
font-weight: bold;
font-size: 17px;
line-height: 24px;
+ margin: 0;
`
const PopUpContetnt = styled.div`
width: 100%;