UI improvements (#37)

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`

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)}>
+      {account ? (
-        Create a poll
+        <CreatePollButton disabled={!signer} onClick={() => setShowPollCreation(true)}>
-      </CreatePollButton>
+          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;

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>

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;
+`