From e6bbcf50728a2cd8e8660fa3230c1d8b4379d6e4 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Tue, 27 Jul 2021 11:38:43 +0200 Subject: [PATCH] Mobile removal flow (#159) --- .../components/card/RemoveAmountPicker.tsx | 4 ++ .../src/componentsMobile/FeatureMobile.tsx | 32 ++++------------ .../src/componentsMobile/ProposeMobile.tsx | 24 +++--------- .../src/componentsMobile/RemoveMobile.tsx | 38 +++++++++++++------ packages/DApp/src/constants/styles.ts | 17 +++++++++ packages/contracts/deploy/deploy.ts | 4 ++ 6 files changed, 66 insertions(+), 53 deletions(-) diff --git a/packages/DApp/src/components/card/RemoveAmountPicker.tsx b/packages/DApp/src/components/card/RemoveAmountPicker.tsx index c333d68..fc47e11 100644 --- a/packages/DApp/src/components/card/RemoveAmountPicker.tsx +++ b/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` diff --git a/packages/DApp/src/componentsMobile/FeatureMobile.tsx b/packages/DApp/src/componentsMobile/FeatureMobile.tsx index af3894b..cf232cb 100644 --- a/packages/DApp/src/componentsMobile/FeatureMobile.tsx +++ b/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 } else { return ( - + - + - + - + {`Feature ${community.name}?`} )} - - + + ) } } -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%; -` diff --git a/packages/DApp/src/componentsMobile/ProposeMobile.tsx b/packages/DApp/src/componentsMobile/ProposeMobile.tsx index 1aee670..0e1fbac 100644 --- a/packages/DApp/src/componentsMobile/ProposeMobile.tsx +++ b/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() { - + Add community to directory {communityFound ? ( @@ -57,10 +57,10 @@ export function ProposeMobile() { ) )} - + - + {warning.text && } {communityFound && communityFound.validForAddition && publicKey && ( @@ -79,7 +79,7 @@ export function ProposeMobile() { To propose a community, it must have at least 42 members and have a ENS domain. )} - + {communityFound && communityFound.validForAddition && ( () @@ -16,15 +19,28 @@ export function RemoveMobile() { } return ( - - - { - val - }} - /> - + + + + + + + + + {`Remove ${community.name}?`} + + { + val + }} + /> + + ) } + +const RemoveHeading = styled(MobileHeading)` + margin-bottom: 16px; +` diff --git a/packages/DApp/src/constants/styles.ts b/packages/DApp/src/constants/styles.ts index 6ebe054..272d334 100644 --- a/packages/DApp/src/constants/styles.ts +++ b/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; +` diff --git a/packages/contracts/deploy/deploy.ts b/packages/contracts/deploy/deploy.ts index 75c4ad4..a5829b5 100644 --- a/packages/contracts/deploy/deploy.ts +++ b/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}`) } }