From cef8466dbf51902c6b566a73c8b06f43702f7c39 Mon Sep 17 00:00:00 2001 From: Madusha Prasanjith Date: Wed, 30 Mar 2022 23:00:25 +0530 Subject: [PATCH 1/2] feat: Implement dynamic generic function editor form. --- .../ActionsModal/ContractActionsList.tsx | 76 ++++++---------- .../Guilds/ActionsModal/ContractsList.tsx | 91 +++++-------------- .../Guilds/ActionsModal/MintRepModal.tsx | 69 -------------- .../Guilds/ActionsModal/ParamsModal.tsx | 42 +++++++++ src/components/Guilds/ActionsModal/index.tsx | 9 +- src/components/Guilds/ActionsModal/styles.tsx | 58 ++++++++++++ 6 files changed, 159 insertions(+), 186 deletions(-) delete mode 100644 src/components/Guilds/ActionsModal/MintRepModal.tsx create mode 100644 src/components/Guilds/ActionsModal/ParamsModal.tsx create mode 100644 src/components/Guilds/ActionsModal/styles.tsx diff --git a/src/components/Guilds/ActionsModal/ContractActionsList.tsx b/src/components/Guilds/ActionsModal/ContractActionsList.tsx index b367a0b9aa..fcb6d0eb04 100644 --- a/src/components/Guilds/ActionsModal/ContractActionsList.tsx +++ b/src/components/Guilds/ActionsModal/ContractActionsList.tsx @@ -1,46 +1,12 @@ -import styled from 'styled-components'; -import { Flex } from '../common/Layout'; -import { ContainerText } from '../common/Layout/Text'; -import { Button } from '../common/Button'; import { RegistryContract } from 'hooks/Guilds/contracts/useContractRegistry'; - -const Wrapper = styled(Flex)` - margin: 16px auto; -`; -const WrapperText = styled(ContainerText).attrs(() => ({ - variant: 'bold', -}))` - justify-content: left; - flex-direction: row; - width: 85%; - margin: 8px auto; - color: ${({ theme }) => theme.colors.proposalText.grey}; -`; - -const ExternalWrapper = styled(Flex)` - width: 100%; - margin: 8px auto; -`; - -const ButtonText = styled(ContainerText).attrs(() => ({ - variant: 'medium', -}))` - justify-content: space-between; - flex-direction: row; -`; - -const ActionsButton = styled(Button)` - width: 90%; - margin: 6px 0; - flex-direction: column; - justify-content: left; - border-radius: 10px; - &:active, - &:focus { - border: 2px solid ${({ theme }) => theme.colors.text}; - } -`; - +import { + ActionsButton, + ButtonDetail, + ButtonLabel, + SectionTitle, + SectionWrapper, + Wrapper, +} from './styles'; interface ContractActionsListProps { contract: RegistryContract; onSelect: (functionName: string) => void; @@ -52,18 +18,32 @@ const ContractActionsList: React.FC = ({ }) => { return ( - - 6 Actions + + + {contract.functions.length}{' '} + {contract.functions.length >= 2 ? 'Actions' : 'Action'} + {contract.functions.map(contractFunction => ( onSelect(contractFunction.functionName)} > - {contractFunction.title} - {contractFunction.functionName} + {contractFunction.title} + + {contractFunction.functionName}( + {contractFunction.params.reduce( + (acc, cur, i) => + acc.concat( + cur.type, + i === contractFunction.params.length - 1 ? '' : ', ' + ), + '' + )} + ) + ))} - + ); }; diff --git a/src/components/Guilds/ActionsModal/ContractsList.tsx b/src/components/Guilds/ActionsModal/ContractsList.tsx index b9d922033d..061b30de27 100644 --- a/src/components/Guilds/ActionsModal/ContractsList.tsx +++ b/src/components/Guilds/ActionsModal/ContractsList.tsx @@ -1,8 +1,4 @@ import React from 'react'; -import styled from 'styled-components'; -import { Flex } from '../common/Layout'; -import { ContainerText } from '../common/Layout/Text'; -import { Button } from '../common/Button'; import { ReactComponent as Vector } from '../../../assets/images/vector.svg'; import StyledIcon from '../common/SVG'; import { @@ -11,57 +7,14 @@ import { } from 'hooks/Guilds/contracts/useContractRegistry'; import { useWeb3React } from '@web3-react/core'; import { SupportedAction } from '../ActionsBuilder/types'; - -const CoreWrapper = styled(Flex)` - width: 100%; - margin-bottom: 16px; -`; - -const ExternalWrapper = styled(Flex)` - width: 100%; -`; - -const Wrapper = styled(Flex)` - width: 100%; - margin: 24px auto; -`; - -const ActionsButton = styled(Button).attrs(() => ({ - variant: 'secondary', -}))` - width: 90%; - height: 40px; - margin: 6px 0; - flex-direction: row; - justify-content: left; - &:active, - &:focus { - border: 2px solid ${({ theme }) => theme.colors.text}; - } -`; - -const WrapperText = styled(ContainerText).attrs(() => ({ - variant: 'bold', -}))` - justify-content: left; - flex-direction: row; - width: 85%; - color: ${({ theme }) => theme.colors.proposalText.grey}; -`; - -const ButtonText = styled(ContainerText).attrs(() => ({ - variant: 'medium', -}))` - justify-content: space-between; - flex-direction: row; - color: ${({ theme }) => theme.colors.proposalText.grey}; -`; - -const ExternalButton = styled(ActionsButton).attrs(() => ({ - variant: 'secondary', -}))` - justify-content: space-between; -`; +import { + ActionsButton, + ButtonDetail, + ButtonLabel, + SectionTitle, + SectionWrapper, + Wrapper, +} from './styles'; interface ContractsListProps { onSelect: (contract: RegistryContract) => void; @@ -77,29 +30,31 @@ const ContractsList: React.FC = ({ return ( - - Core + + Core onSupportedActionSelect(SupportedAction.ERC20_TRANSFER) } > - - Transfer & Mint + + + Transfer & Mint + - - - External Contracts + + + External Contracts {contracts?.map(contract => ( - onSelect(contract)}> - {contract.title} - + onSelect(contract)}> + {contract.title} + {contract.functions?.length}{' '} {contract.functions?.length > 1 ? 'Actions' : 'Action'} - - + + ))} - + ); }; diff --git a/src/components/Guilds/ActionsModal/MintRepModal.tsx b/src/components/Guilds/ActionsModal/MintRepModal.tsx deleted file mode 100644 index 3e539124ca..0000000000 --- a/src/components/Guilds/ActionsModal/MintRepModal.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import styled from 'styled-components'; -import { Input } from '../../../components/Guilds/common/Form'; -import { useWeb3React } from '@web3-react/core'; -import { useState } from 'react'; -import { Flex } from '../common/Layout'; -import { ContainerText } from '../common/Layout/Text'; -import iconsByChain from '../common/ChainIcons'; - -const RepWrapper = styled(Flex)` - margin: 16px auto; -`; -const WrapperText = styled(ContainerText).attrs(() => ({ - variant: 'bold', -}))` - justify-content: left; - flex-direction: row; - width: 85%; - margin: 8px auto; - color: grey; -`; - -const ExternalWrapper = styled(Flex)` - width: 100%; - margin: 8px auto; -`; - -const MintReputationModal: React.FC = () => { - const [address, setAddress] = useState(''); - const [repAmount, setRepAmount] = useState(''); - const [repPercent, setRepPercent] = useState(''); - const { chainId } = useWeb3React(); - - return ( - - - Recipient - setAddress(e.target.value)} - icon={iconsByChain[chainId] || null} - size={24} - width="85%" - /> - - - Reputation Amount - setRepAmount(e.target.value)} - size={24} - width="85%" - /> - - - Reputation in % - setRepPercent(e.target.value)} - width="85%" - /> - - - ); -}; - -export default MintReputationModal; diff --git a/src/components/Guilds/ActionsModal/ParamsModal.tsx b/src/components/Guilds/ActionsModal/ParamsModal.tsx new file mode 100644 index 0000000000..44e100f9ec --- /dev/null +++ b/src/components/Guilds/ActionsModal/ParamsModal.tsx @@ -0,0 +1,42 @@ +import styled from 'styled-components'; +import { Input } from '../common/Form'; +import { useState } from 'react'; +import { ActionsButton, FormElement, FormLabel, Wrapper } from './styles'; +import { RegistryContractFunction } from 'hooks/Guilds/contracts/useContractRegistry'; + +const SubmitButton = styled(ActionsButton).attrs(() => ({ + variant: 'primary', +}))` + background-color: ${({ theme }) => theme.colors.button.primary}; + justify-content: center; +`; + +interface ParamsModalProps { + fn: RegistryContractFunction; +} + +const ParamsModal: React.FC = ({ fn }) => { + const [address, setAddress] = useState(''); + + return ( + + {fn.params.map(param => ( + + {param.description} + setAddress(e.target.value)} + size={24} + /> + + ))} + + + Add action + + + ); +}; + +export default ParamsModal; diff --git a/src/components/Guilds/ActionsModal/index.tsx b/src/components/Guilds/ActionsModal/index.tsx index d00f02a0d9..6d861fe2f3 100644 --- a/src/components/Guilds/ActionsModal/index.tsx +++ b/src/components/Guilds/ActionsModal/index.tsx @@ -6,6 +6,7 @@ import { DecodedAction, SupportedAction } from '../ActionsBuilder/types'; import { Modal } from '../common/Modal'; import ContractActionsList from './ContractActionsList'; import ContractsList from './ContractsList'; +import ParamsModal from './ParamsModal'; interface ActionModalProps { isOpen: boolean; @@ -40,7 +41,13 @@ const ActionModal: React.FC = ({ function getContent() { if (selectedFunction) { - return null; + return ( + fn.functionName === selectedFunction + )} + /> + ); } if (selectedContract) { diff --git a/src/components/Guilds/ActionsModal/styles.tsx b/src/components/Guilds/ActionsModal/styles.tsx new file mode 100644 index 0000000000..31d2f64203 --- /dev/null +++ b/src/components/Guilds/ActionsModal/styles.tsx @@ -0,0 +1,58 @@ +import styled from 'styled-components'; +import { Button } from '../common/Button'; +import { ContainerText } from '../common/Layout/Text'; + +export const Wrapper = styled.div` + width: 100%; +`; + +export const SectionWrapper = styled.div` + margin: 1.5rem; +`; + +export const ActionsButton = styled(Button).attrs(() => ({ + variant: 'secondary', +}))` + background-color: transparent; + padding: ${({ vertical }) => (vertical ? '1rem' : '0.75rem 1rem')}; + width: 100%; + display: flex; + align-items: ${({ vertical }) => (vertical ? 'flex-start' : 'center')}; + justify-content: space-between; + flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')}; + border-radius: ${({ vertical }) => (vertical ? '0.625rem' : '2rem')}; + &:active, + &:focus { + border: 2px solid ${({ theme }) => theme.colors.text}; + } +`; + +export const SectionTitle = styled(ContainerText).attrs(() => ({ + variant: 'bold', +}))` + display: block; + color: ${({ theme }) => theme.colors.proposalText.grey}; + margin-bottom: 0.75rem; + font-size: 0.875rem; +`; + +export const ButtonLabel = styled.div` + display: flex; + align-items: center; +`; + +export const ButtonDetail = styled(ContainerText).attrs(() => ({ + variant: 'medium', +}))` + margin: ${({ vertical }) => (vertical ? '0.5rem 0 0 0' : '0')}; + color: ${({ theme }) => theme.colors.proposalText.grey}; +`; + +export const FormElement = styled.div` + margin: 1.5rem; +`; + +export const FormLabel = styled.div` + color: ${({ theme }) => theme.colors.proposalText.grey}; + margin-bottom: 0.75rem; +`; \ No newline at end of file From 73e57aa1d89e50c0737fd4a83cb9375cc11fcf11 Mon Sep 17 00:00:00 2001 From: Madusha Prasanjith Date: Thu, 31 Mar 2022 14:27:54 +0530 Subject: [PATCH 2/2] chore: Fix code formatting. --- src/components/Guilds/ActionsModal/styles.tsx | 116 +++++++++--------- 1 file changed, 58 insertions(+), 58 deletions(-) diff --git a/src/components/Guilds/ActionsModal/styles.tsx b/src/components/Guilds/ActionsModal/styles.tsx index 31d2f64203..f781cd85c7 100644 --- a/src/components/Guilds/ActionsModal/styles.tsx +++ b/src/components/Guilds/ActionsModal/styles.tsx @@ -1,58 +1,58 @@ -import styled from 'styled-components'; -import { Button } from '../common/Button'; -import { ContainerText } from '../common/Layout/Text'; - -export const Wrapper = styled.div` - width: 100%; -`; - -export const SectionWrapper = styled.div` - margin: 1.5rem; -`; - -export const ActionsButton = styled(Button).attrs(() => ({ - variant: 'secondary', -}))` - background-color: transparent; - padding: ${({ vertical }) => (vertical ? '1rem' : '0.75rem 1rem')}; - width: 100%; - display: flex; - align-items: ${({ vertical }) => (vertical ? 'flex-start' : 'center')}; - justify-content: space-between; - flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')}; - border-radius: ${({ vertical }) => (vertical ? '0.625rem' : '2rem')}; - &:active, - &:focus { - border: 2px solid ${({ theme }) => theme.colors.text}; - } -`; - -export const SectionTitle = styled(ContainerText).attrs(() => ({ - variant: 'bold', -}))` - display: block; - color: ${({ theme }) => theme.colors.proposalText.grey}; - margin-bottom: 0.75rem; - font-size: 0.875rem; -`; - -export const ButtonLabel = styled.div` - display: flex; - align-items: center; -`; - -export const ButtonDetail = styled(ContainerText).attrs(() => ({ - variant: 'medium', -}))` - margin: ${({ vertical }) => (vertical ? '0.5rem 0 0 0' : '0')}; - color: ${({ theme }) => theme.colors.proposalText.grey}; -`; - -export const FormElement = styled.div` - margin: 1.5rem; -`; - -export const FormLabel = styled.div` - color: ${({ theme }) => theme.colors.proposalText.grey}; - margin-bottom: 0.75rem; -`; \ No newline at end of file +import styled from 'styled-components'; +import { Button } from '../common/Button'; +import { ContainerText } from '../common/Layout/Text'; + +export const Wrapper = styled.div` + width: 100%; +`; + +export const SectionWrapper = styled.div` + margin: 1.5rem; +`; + +export const ActionsButton = styled(Button).attrs(() => ({ + variant: 'secondary', +}))` + background-color: transparent; + padding: ${({ vertical }) => (vertical ? '1rem' : '0.75rem 1rem')}; + width: 100%; + display: flex; + align-items: ${({ vertical }) => (vertical ? 'flex-start' : 'center')}; + justify-content: space-between; + flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')}; + border-radius: ${({ vertical }) => (vertical ? '0.625rem' : '2rem')}; + &:active, + &:focus { + border: 2px solid ${({ theme }) => theme.colors.text}; + } +`; + +export const SectionTitle = styled(ContainerText).attrs(() => ({ + variant: 'bold', +}))` + display: block; + color: ${({ theme }) => theme.colors.proposalText.grey}; + margin-bottom: 0.75rem; + font-size: 0.875rem; +`; + +export const ButtonLabel = styled.div` + display: flex; + align-items: center; +`; + +export const ButtonDetail = styled(ContainerText).attrs(() => ({ + variant: 'medium', +}))` + margin: ${({ vertical }) => (vertical ? '0.5rem 0 0 0' : '0')}; + color: ${({ theme }) => theme.colors.proposalText.grey}; +`; + +export const FormElement = styled.div` + margin: 1.5rem; +`; + +export const FormLabel = styled.div` + color: ${({ theme }) => theme.colors.proposalText.grey}; + margin-bottom: 0.75rem; +`;