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(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 && ( )} - setShowPollCreation(true)}> - Create a poll - + {account ? ( + setShowPollCreation(true)}> + Create a poll + + ) : ( + { + if ((window as any).ethereum) { + activateBrowserWallet() + } else setSelectConnect(true) + }} + > + Connect to vote + + )} + {selectConnect && ( + + + + )} + ) @@ -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 @@ + + + + + + + + + + + + + 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 @@ + + + + + + + + + + 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 @@ + + + + + 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 ( + + + + + + ) +} + +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; +`