Style react components (#9)

packages/example/src/index.tsx

@@ -4,7 +4,7 @@ import { Example } from '@status-waku-voting/react-components'
 
 ReactDOM.render(
   <div>
-    <Example appName={'testApp'} />
+    <Example appName={'testApp_'} />
   </div>,
   document.getElementById('root')
 )

packages/react-components/src/Poll.tsx

@@ -20,36 +20,49 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
     signer.getAddress().then((e) => setAddress(e))
   }, [signer])
   return (
-    <div>
+    <PollWrapper>
-      {poll.poll.question}
+      <PollTitle>
-      <ul>
+        <PollQuestion>{poll.poll.question}</PollQuestion>
+        <PollTypeWrapper>{poll.poll.pollType === PollType.WEIGHTED ? 'WEIGHTED' : 'NON WEIGHTED'}</PollTypeWrapper>
+      </PollTitle>
+      <PollAnswersWrapper>
         {!poll.votesMessages.find((vote) => vote.voter === address) && (
-          <div onChange={(e) => setSelectedAnswer(Number.parseInt((e.target as any).value ?? 0))}>
+          <div>
-            {poll.poll.answers.map((answer, idx) => {
+            <div onChange={(e) => setSelectedAnswer(Number.parseInt((e.target as any).value ?? 0))}>
+              {poll.poll.answers.map((answer, idx) => {
+                return (
+                  <PollAnswer key={idx}>
+                    <input type="radio" value={idx} name={poll.poll.id} /> {answer}
+                  </PollAnswer>
+                )
+              })}
+            </div>
+            {poll.poll.pollType === PollType.WEIGHTED && (
+              <div>
+                Token amount
+                <input
+                  onChange={(e) => setTokenAmount(Number.parseInt(e.target.value))}
+                  value={tokenAmount}
+                  type="number"
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {poll.votesMessages.find((vote) => vote.voter === address) && (
+          <div>
+            Results
+            {poll.answers.map((answer, idx) => {
               return (
-                <div key={idx}>
+                <PollAnswer key={idx}>
-                  <input type="radio" value={idx} name={poll.poll.id} /> {answer}
+                  <PollAnswerText>{answer.text}</PollAnswerText>
-                </div>
+                  <VoteCount>Votes : {answer.votes.toString()}</VoteCount>
+                </PollAnswer>
               )
             })}
           </div>
         )}
-        {poll.votesMessages.find((vote) => vote.voter === address) &&
+      </PollAnswersWrapper>
-          poll.answers.map((answer, idx) => {
-            return (
-              <div key={idx}>
-                {answer.text}
-                <VoteCount>Votes : {answer.votes.toString()}</VoteCount>
-              </div>
-            )
-          })}
-      </ul>
-      {poll.poll.pollType === PollType.WEIGHTED && (
-        <div>
-          Token amount
-          <input onChange={(e) => setTokenAmount(Number.parseInt(e.target.value))} value={tokenAmount} type="number" />
-        </div>
-      )}
       <button
         onClick={() => {
           if (wakuVoting) {
@@ -65,10 +78,64 @@ export function Poll({ poll, wakuVoting, signer }: PollProps) {
         {' '}
         Vote
       </button>
-    </div>
+    </PollWrapper>
   )
 }
 
 const VoteCount = styled.div`
-  margin-left: 20px;
+  margin-left: auto;
+  margin-right: 5px;
+`
+
+const PollWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  box-shadow: 10px 10px 31px -2px #a3a1a1;
+  border-radius: 5px;
+  background-color: lightgray;
+  margin: 10px;
+  padding: 10px;
+`
+
+const PollTitle = styled.div`
+  display: flex;
+  padding: 10px;
+  height: 20px;
+  border: 1px solid black;
+  border-radius: 5px;
+`
+
+const PollQuestion = styled.div`
+  display: block;
+  width: 200px;
+  margin-left: 10px;
+  margin-top: auto;
+  overflow: hidden;
+`
+
+const PollTypeWrapper = styled.div`
+  width: 150px;
+  margin-right: 10px;
+  margin-left: auto;
+  margin-top: auto;
+  color: green;
+  font-weight: bold;
+`
+
+const PollAnswersWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+`
+
+const PollAnswer = styled.div`
+  display: flex;
+  margin: 20px;
+  width: 300px;
+  border-bottom: 1px solid black;
+  border-radius: 10px;
+`
+
+const PollAnswerText = styled.div`
+  width: 200px;
 `

packages/react-components/src/PollList.tsx

@@ -4,6 +4,7 @@ import { Wallet } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import { Poll } from './Poll'
 import { JsonRpcSigner } from '@ethersproject/providers'
+import styled from 'styled-components'
 
 type PollListProps = {
   wakuVoting: WakuVoting | undefined
@@ -23,14 +24,14 @@ export function PollList({ wakuVoting, signer }: PollListProps) {
   }, [wakuVoting])
 
   return (
-    <ul>
+    <PollListWrapper>
       {polls.map((poll) => {
-        return (
+        return <Poll key={poll.poll.id} poll={poll} wakuVoting={wakuVoting} signer={signer} />
-          <li key={poll.poll.id}>
-            <Poll poll={poll} wakuVoting={wakuVoting} signer={signer} />
-          </li>
-        )
       })}
-    </ul>
+    </PollListWrapper>
   )
 }
+const PollListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`

packages/react-components/src/index.tsx

@@ -5,7 +5,9 @@ import { PollList } from './PollList'
 import styled from 'styled-components'
 import { PollType } from '@status-waku-voting/core/dist/esm/src/types/PollType'
 
-const provider = new providers.Web3Provider((window as any).ethereum)
+const ethereum = (window as any).ethereum
+
+const provider = new providers.Web3Provider(ethereum)
 
 type ExampleProps = {
   appName: string
@@ -13,66 +15,146 @@ type ExampleProps = {
 
 function Example({ appName }: ExampleProps) {
   const [signer, setSigner] = useState(provider.getSigner())
+
   const [wakuVoting, setWakuVoting] = useState<WakuVoting | undefined>(undefined)
 
-  const [answers, setAnswers] = useState<string[]>([])
+  const [answers, setAnswers] = useState<string[]>([''])
   const [question, setQuestion] = useState('')
-
+  const [showNewPollBox, setShowNewPollBox] = useState(false)
   const [selectedType, setSelectedType] = useState(PollType.WEIGHTED)
 
   useEffect(() => {
-    ;(window as any).ethereum.on('accountsChanged', async () => setSigner(provider.getSigner()))
+    ethereum.ethereum.on('accountsChanged', async () => {
+      provider.send('eth_requestAccounts', [])
+      setSigner(provider.getSigner())
+    })
     WakuVoting.create(appName, '0x01').then((e) => setWakuVoting(e))
+    provider.send('eth_requestAccounts', [])
   }, [])
 
   return (
     <Wrapper>
+      {showNewPollBox && (
+        <NewPollBoxWrapper>
+          <NewPollBox>
+            <NewPollBoxTitle>
+              Question
+              <CloseNewPollBoxButton onClick={() => setShowNewPollBox(false)}>X</CloseNewPollBoxButton>
+            </NewPollBoxTitle>
+            <input value={question} onChange={(e) => setQuestion(e.target.value)} />
+            Answers
+            <button onClick={() => setAnswers((answers) => [...answers, ''])}>Add answer</button>
+            {answers.map((answer, idx) => (
+              <AnswerWraper key={idx}>
+                <AnswerInput
+                  value={answer}
+                  onChange={(e) =>
+                    setAnswers((answers) => {
+                      const newAnswers = [...answers]
+                      newAnswers[idx] = e.target.value
+                      return newAnswers
+                    })
+                  }
+                />
+                <RemoveAnswerButton
+                  onClick={() =>
+                    setAnswers((answers) => {
+                      const newAnswers = [...answers]
+                      if (newAnswers.length > 1) {
+                        newAnswers.splice(idx, 1)
+                      }
+                      return newAnswers
+                    })
+                  }
+                >
+                  -
+                </RemoveAnswerButton>
+              </AnswerWraper>
+            ))}
+            <div onChange={(e) => setSelectedType(Number.parseInt((e.target as any).value))}>
+              <input type="radio" value={PollType.WEIGHTED} name="newPollType" /> Weighted
+              <input type="radio" value={PollType.NON_WEIGHTED} name="newPollType" /> Non weighted
+            </div>
+            <SendButton
+              onClick={async () => {
+                await wakuVoting?.createTimedPoll(signer, question, answers, selectedType)
+                setAnswers([])
+              }}
+            >
+              Send
+            </SendButton>
+          </NewPollBox>
+        </NewPollBoxWrapper>
+      )}
+      <button onClick={() => setShowNewPollBox(true)}>New Poll </button>
       <PollList wakuVoting={wakuVoting} signer={signer} />
-      <NewPollBox>
-        Question
-        <input value={question} onChange={(e) => setQuestion(e.target.value)} />
-        Answers
-        <button onClick={() => setAnswers((answers) => [...answers, ''])}>Add answer</button>
-        {answers.map((answer, idx) => (
-          <input
-            key={idx}
-            value={answer}
-            onChange={(e) =>
-              setAnswers((answers) => {
-                const newAnswers = [...answers]
-                newAnswers[idx] = e.target.value
-                return newAnswers
-              })
-            }
-          />
-        ))}
-        <div onChange={(e) => setSelectedType(Number.parseInt((e.target as any).value))}>
-          <input type="radio" value={PollType.WEIGHTED} name="newPollType" /> Weighted
-          <input type="radio" value={PollType.NON_WEIGHTED} name="newPollType" /> Non weighted
-        </div>
-        <button
-          onClick={async () => {
-            await wakuVoting?.createTimedPoll(signer, question, answers, selectedType)
-            setAnswers([])
-          }}
-        >
-          Send
-        </button>
-      </NewPollBox>
     </Wrapper>
   )
 }
 
+const CloseNewPollBoxButton = styled.div`
+  width: 5px;
+  margin-right: 5px;
+  margin-left: auto;
+  font-weight: bold;
+`
+
+const NewPollBoxTitle = styled.div`
+  display: flex;
+`
+
+const AnswerInput = styled.input`
+  margin-right: 5px;
+  width: 200px;
+`
+
+const RemoveAnswerButton = styled.button`
+  margin-right: 5px;
+  margin-left: auto;
+`
+
+const SendButton = styled.button`
+  margin: 10px;
+`
+
+const AnswerWraper = styled.div`
+  display: flex;
+  margin: 5px;
+  width: 250px;
+`
+
 const Wrapper = styled.div`
   display: flex;
+  flex-direction: column;
+  height: 600px;
+  width: 435px;
+  overflow: auto;
+  border: 2px solid black;
+  padding 10px;
+  border-radius: 10px;
 `
 
 const NewPollBox = styled.div`
   display: flex;
   flex-direction: column;
+  background-color: white;
   margin: 20px;
   padding: 20px;
   box-shadow: 10px 10px 31px -2px #a3a1a1;
+  border-radius: 5px;
+  overflow: auto;
+  z-index: 1;
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+`
+
+const NewPollBoxWrapper = styled.div`
+  position: relative;
+  top: 10px;
+  left: 10px;
 `
 
 export { Example }