Mobile removal flow (#159)

packages/DApp/src/components/card/RemoveAmountPicker.tsx

@@ -87,6 +87,10 @@ export function RemoveAmountPicker({ community, availableAmount, setShowConfirmM
 const VoteProposeWrap = styled.div`
   margin-top: 32px;
   width: 100%;
+
+  @media (max-width: 600px) {
+    margin-bottom: 0;
+  }
 `
 
 const WarningWrapRemoval = styled.div`

packages/DApp/src/componentsMobile/FeatureMobile.tsx

@@ -17,7 +17,7 @@ import { ConnectMobile } from './ConnectMobile'
 import { HistoryLink } from './CardVoteMobile'
 import { useEthers } from '@usedapp/core'
 import { useGetCurrentVoting } from '../hooks/useGetCurrentVoting'
-import { ColumnFlexDiv } from '../constants/styles'
+import { MobileHeading, MobileBlock, MobileTop, MobileWrap, ColumnFlexDiv } from '../constants/styles'
 
 export function FeatureMobile() {
   const { publicKey } = useParams<{ publicKey: string }>()
@@ -36,15 +36,15 @@ export function FeatureMobile() {
     return <CommunitySkeleton />
   } else {
     return (
-      <FeatureWrap>
+      <MobileWrap>
         <HeaderVotingMobile>
           <ConnectMobile />
-          <FeatureTop>
+          <MobileTop>
             <CardCommunity community={community} />
-          </FeatureTop>
+          </MobileTop>
         </HeaderVotingMobile>
 
-        <VoteProposeWrap>
+        <MobileBlock>
           <FeatureHeading>{`Feature ${community.name}?`}</FeatureHeading>
           <VotePropose
             availableAmount={60000000}
@@ -90,25 +90,14 @@ export function FeatureMobile() {
               </tbody>
             </VoteHistoryTable>
           )}
-        </VoteProposeWrap>
-      </FeatureWrap>
+        </MobileBlock>
+      </MobileWrap>
     )
   }
 }
 
-const FeatureWrap = styled.div`
-  padding: 0 0 16px;
-`
-
-const FeatureTop = styled.div`
-  padding: 0 16px;
-`
-
-const FeatureHeading = styled.h2`
+const FeatureHeading = styled(MobileHeading)`
   margin-bottom: 16px;
-  font-weight: bold;
-  font-size: 17px;
-  line-height: 24px;
 `
 
 const FeatureBtn = styled(ButtonSecondary)`
@@ -119,8 +108,3 @@ const FeatureBtn = styled(ButtonSecondary)`
   line-height: 22px;
   margin-top: 32px;
 `
-
-const VoteProposeWrap = styled.div`
-  padding: 16px;
-  width: 100%;
-`

packages/DApp/src/componentsMobile/ProposeMobile.tsx

@@ -12,7 +12,7 @@ import { PublicKeyInput } from '../components/PublicKeyInput'
 import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
 import { VotePropose } from '../components/votes/VotePropose'
 import { Warning } from '../components/votes/VoteWarning'
-import { ColumnFlexDiv, WrapperTopSmall } from '../constants/styles'
+import { ColumnFlexDiv, MobileBlock, MobileHeading, MobileTop, WrapperTopSmall } from '../constants/styles'
 import { useCommunityDetails } from '../hooks/useCommunityDetails'
 import { useContracts } from '../hooks/useContracts'
 import { useProposeWarning } from '../hooks/useProposeWarning'
@@ -42,7 +42,7 @@ export function ProposeMobile() {
     <ColumnFlexDiv>
       <HeaderVotingMobile>
         <ConnectMobile />
-        <ProposingTop>
+        <MobileTop>
           <ProposingHeading>Add community to directory</ProposingHeading>
           <PublicKeyInput publicKey={publicKey} setPublicKey={setPublicKey} />
           {communityFound ? (
@@ -57,10 +57,10 @@ export function ProposeMobile() {
               </WrapperTopSmall>
             )
           )}
-        </ProposingTop>
+        </MobileTop>
       </HeaderVotingMobile>
 
-      <ProposingData>
+      <MobileBlock>
         <WarningWrap>{warning.text && <Warning icon={warning.icon} text={warning.text} />}</WarningWrap>
         {communityFound && communityFound.validForAddition && publicKey && (
           <VoteProposeWrap>
@@ -79,7 +79,7 @@ export function ProposeMobile() {
             <InfoText>To propose a community, it must have at least 42 members and have a ENS domain.</InfoText>
           </ProposingInfo>
         )}
-      </ProposingData>
+      </MobileBlock>
       {communityFound && communityFound.validForAddition && (
         <ProposingBtn
           disabled={!communityFound || !proposingAmount || !!warning.text}
@@ -123,26 +123,14 @@ export function ProposeMobile() {
   )
 }
 
-const ProposingTop = styled.div`
-  padding: 0 16px;
-`
-
-const ProposingHeading = styled.h2`
+const ProposingHeading = styled(MobileHeading)`
   margin-bottom: 8px;
-  font-weight: bold;
-  font-size: 17px;
-  line-height: 24px;
 `
 
 const ProposingHeadingMobile = styled(ProposingHeading)`
   margin-bottom: 16px;
 `
 
-const ProposingData = styled.div`
-  width: 100%;
-  padding: 16px;
-`
-
 const ProposingBtn = styled(ButtonPrimary)`
   width: calc(100% - 32px);
   padding: 10px 0;

packages/DApp/src/componentsMobile/RemoveMobile.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
 import { useParams } from 'react-router'
+import styled from 'styled-components'
 import { CardCommunity } from '../components/card/CardCommunity'
 import { RemoveAmountPicker } from '../components/card/RemoveAmountPicker'
 import { CommunitySkeleton } from '../components/skeleton/CommunitySkeleton'
-import { ColumnFlexDiv } from '../constants/styles'
+import { MobileBlock, MobileHeading, MobileTop, MobileWrap } from '../constants/styles'
 import { useCommunities } from '../hooks/useCommunities'
+import { ConnectMobile } from './ConnectMobile'
+import { HeaderVotingMobile } from './VotingMobile'
 
 export function RemoveMobile() {
   const { publicKey } = useParams<{ publicKey: string }>()
@@ -16,8 +19,16 @@ export function RemoveMobile() {
   }
 
   return (
-    <ColumnFlexDiv style={{ padding: '20px' }}>
+    <MobileWrap>
+      <HeaderVotingMobile>
+        <ConnectMobile />
+        <MobileTop>
           <CardCommunity community={community} />
+        </MobileTop>
+      </HeaderVotingMobile>
+      <MobileBlock>
+        <RemoveHeading>{`Remove ${community.name}?`}</RemoveHeading>
+
         <RemoveAmountPicker
           community={community}
           availableAmount={60000000}
@@ -25,6 +36,11 @@ export function RemoveMobile() {
             val
           }}
         />
-    </ColumnFlexDiv>
+      </MobileBlock>
+    </MobileWrap>
   )
 }
+
+const RemoveHeading = styled(MobileHeading)`
+  margin-bottom: 16px;
+`

packages/DApp/src/constants/styles.ts

@@ -46,3 +46,20 @@ export const WrapperTopSmall = styled.div`
 export const WrapperTop = styled.div`
   margin-top: 32px;
 `
+export const MobileWrap = styled.div`
+  padding: 0 0 16px;
+`
+
+export const MobileTop = styled.div`
+  padding: 0 16px;
+`
+
+export const MobileBlock = styled.div`
+  padding: 16px;
+  width: 100%;
+`
+export const MobileHeading = styled.h2`
+  font-weight: bold;
+  font-size: 17px;
+  line-height: 24px;
+`

packages/contracts/deploy/deploy.ts

@@ -2,11 +2,13 @@ import { ethers } from 'ethers'
 import { deployContract } from 'ethereum-waffle'
 import MockContract from '../build/MockContract.json'
 import Directory from '../build/Directory.json'
+import MultiCall from '../build/MultiCall.json'
 
 const deploy = async () => {
     const providerName = process.env.ETHEREUM_PROVIDER
     const privateKey = process.env.ETHEREUM_PRIVATE_KEY
     console.log(privateKey)
+    
     if (privateKey && providerName) {
         console.log(`deploying on ${providerName}`)
         const provider = ethers.getDefaultProvider(process.env.ETHEREUM_PROVIDER)
@@ -18,6 +20,8 @@ const deploy = async () => {
         const directoryContract = await deployContract(wallet,Directory,[mockContract.address])
         await mockContract.setDirectory(directoryContract.address)
         console.log(`Directory contract deployed with address: ${directoryContract.address}`)
+        const multiCall = await deployContract(wallet, MultiCall)
+        console.log(`MultiCall deployed with address: ${multiCall.address}`)
     }
 }