Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reskin | Proposal Builder and Proposal Template builder #1590

Merged
merged 9 commits into from
Apr 24, 2024
+844 −761
Merged

Reskin | Proposal Builder and Proposal Template builder #1590

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d5de9c3
Merge branch 'develop' into reskin/proposal-builder
mudrila Apr 22, 2024
69694c3
Structural refactoring of proposal builder to match new markup
mudrila Apr 22, 2024
f31ffc5
Finalize UI for proposal creation
mudrila Apr 23, 2024
3cd06c7
Fix ABI Selector, dividers colors and spacing
mudrila Apr 23, 2024
544fddd
Prettier
mudrila Apr 23, 2024
3c96fdc
Merge branch 'reskin/refactor-root-reskin' into reskin/proposal-builder
mudrila Apr 23, 2024
b6d6eb9
Finish Proposal Templates list redesign, finish Proposal Templates bu…
mudrila Apr 23, 2024
d159557
Replace the shit out of this Dividers. Hell yeah
mudrila Apr 23, 2024
f852a17
Prettier
mudrila Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,17 @@
/>
<title>%VITE_APP_NAME%</title>
</head>
<style>
@font-face {
font-family: 'TT Firs Neue Variable';
font-style: normal;
font-weight: 400;
src:
url('/fonts/TT_Firs_Neue_Variable.woff') format('woff'),
url('/fonts/TT_Firs_Neue_Variable.woff2') format('woff2'),
url('/fonts/TT_Firs_Neue_Variable.ttf') format('truetype');
}
</style>
mudrila marked this conversation as resolved.
Show resolved Hide resolved
<body>
<div id="root"></div>
<script
Expand Down
595 changes: 35 additions & 560 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
"@adraffy/ens-normalize": "^1.10.1",
"@apollo/client": "^3.7.10",
"@chakra-ui/react": "^2.8.2",
"@decent-org/fractal-ui": "^0.1.25",
"@decent-org/fractal-ui": "^0.2.5",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a good chance these changes are coming from me merging develop into my branch, which I have to do to pick up latest refactor into proposal builder

"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@ethersproject/abstract-signer": "^5.7.0",
"@ethersproject/providers": "^5.7.2",
"@fontsource/ibm-plex-mono": "^4.5.12",
"@fontsource/ibm-plex-sans": "^4.5.13",
"@fontsource/space-mono": "^5.0.19",
"@fractal-framework/fractal-contracts": "^0.7.0",
"@graphprotocol/client-apollo": "^1.0.16",
"@lido-sdk/contracts": "^3.0.2",
"@netlify/blobs": "^6.5.0",
"@netlify/functions": "^2.6.0",
"@phosphor-icons/react": "^2.1.4",
"@safe-global/safe-deployments": "^1.34.0",
"@safe-global/safe-ethers-lib": "^1.9.2",
"@safe-global/safe-service-client": "^1.5.2",
Expand Down Expand Up @@ -51,7 +51,6 @@
"viem": "^2.8.12",
"vite": "^5.1.0",
"vite-plugin-checker": "^0.6.4",
"vite-plugin-node-polyfills": "^0.21.0",
"wagmi": "^2.5.11",
"yup": "^1"
},
Expand Down
Binary file added public/fonts/TT-Firs-Neue-Variable.ttf
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/TT_Firs_Neue_Variable.woff
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/TT_Firs_Neue_Variable.woff2
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion src/components/DaoCreator/StepWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Flex, Text } from '@chakra-ui/react';
import { Trash } from '@decent-org/fractal-ui';
import { Trash } from '@phosphor-icons/react';
import { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
Expand Down
69 changes: 35 additions & 34 deletions src/components/ProposalBuilder/ProposalDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,22 @@
import { Avatar, Box, Divider, HStack, Text, VStack } from '@chakra-ui/react';
import { Avatar, Box, HStack, Text, VStack } from '@chakra-ui/react';
import { FormikProps } from 'formik';
import { Fragment, PropsWithChildren } from 'react';
import { useTranslation } from 'react-i18next';
import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import Markdown from '../ui/proposal/Markdown';
import Divider from '../ui/utils/Divider';
import '../../assets/css/Markdown.css';

export function TransactionValueContainer({
children,
isValue = true,
}: PropsWithChildren<{ isValue?: boolean }>) {
export function TransactionValueContainer({ children }: PropsWithChildren<{}>) {
return (
<Box
bg={isValue ? 'black.900' : 'chocolate.800'}
borderRadius="8px"
px={4}
py={2}
bg="neutral-2"
borderRadius={4}
padding={2}
>
<Text
color="grayscale.100"
fontStyle={isValue ? 'normal' : 'italic'}
color="neutral-grayscale-100"
fontStyle="code-snippet-helper"
>
{children}
</Text>
Expand All @@ -38,23 +34,29 @@ export default function ProposalTemplateDetails({
return (
<Box
rounded="lg"
p={4}
bg={BACKGROUND_SEMI_TRANSPARENT}
width="416px"
border="1px solid"
borderColor="neutral-3"
p={6}
maxWidth="400px"
>
<VStack
spacing={3}
align="left"
>
<Text textStyle="text-lg-mono-medium">{t('preview')}</Text>
<Divider color="chocolate.700" />
<Text textStyle="display-lg">{t('preview')}</Text>
<Divider />
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('previewTitle')}</Text>
<Text textAlign="right">{trimmedTitle}</Text>
<Text color="neutral-7">{t('previewTitle')}</Text>
<Text
textAlign="right"
width="66%"
>
{trimmedTitle}
</Text>
</HStack>
{mode === ProposalBuilderMode.TEMPLATE && (
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('previewThumnbail')}</Text>
<Text color="neutral-7">{t('previewThumnbail')}</Text>
{trimmedTitle && (
<Avatar
size="sm"
Expand All @@ -68,50 +70,49 @@ export default function ProposalTemplateDetails({
</HStack>
)}
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
<Text color="neutral-7">{t('proposalTemplateDescription')}</Text>
<Markdown
content={proposalMetadata.description}
collapsedLines={2}
collapsedLines={1}
hideCollapsed
/>
</HStack>
<Divider color="chocolate.700" />
<Divider />
{transactions.map((transaction, i) => {
const valueBiggerThanZero = transaction.ethValue.bigintValue
? transaction.ethValue.bigintValue > 0n
: false;
return (
<Fragment key={i}>
<Text color="grayscale.500">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
<Text color="neutral-7">{t('labelTargetAddress', { ns: 'proposal' })}</Text>
{transaction.targetAddress && (
<TransactionValueContainer>{transaction.targetAddress}</TransactionValueContainer>
)}
<Divider color="chocolate.700" />
<Text color="grayscale.500">{t('labelFunctionName', { ns: 'proposal' })}</Text>
<Divider />
<Text color="neutral-7">{t('labelFunctionName', { ns: 'proposal' })}</Text>
{transaction.functionName && (
<TransactionValueContainer>{transaction.functionName}</TransactionValueContainer>
)}
{transaction.parameters.map((parameter, parameterIndex) => (
<Fragment key={parameterIndex}>
<Text color="grayscale.500">{t('parameter')}</Text>
<Text color="neutral-7">{t('parameter')}</Text>
{parameter.signature && (
<TransactionValueContainer>{parameter.signature}</TransactionValueContainer>
)}
<Text color="grayscale.500">
{!!parameter.label ? parameter.label : t('value')}
</Text>
<Text color="neutral-7">{!!parameter.label ? parameter.label : t('value')}</Text>
{(parameter.label || parameter.value) && (
<TransactionValueContainer isValue={!!parameter.value}>
<TransactionValueContainer>
{parameter.value || t('userInput')}
</TransactionValueContainer>
)}
</Fragment>
))}
<Divider color="chocolate.700" />
<Divider />
<HStack justifyContent="space-between">
<Text color="grayscale.500">{t('eth')}</Text>
<Text color="neutral-7">{t('eth')}</Text>
<Text
textAlign="right"
color={valueBiggerThanZero ? 'white' : 'grayscale.500'}
color={valueBiggerThanZero ? 'white-0' : 'neutral-7'}
wordBreak="break-all"
>
{valueBiggerThanZero ? transaction.ethValue.value : 'n/a'}
Expand Down
97 changes: 39 additions & 58 deletions src/components/ProposalBuilder/ProposalMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,60 @@
import { Button, Divider, VStack } from '@chakra-ui/react';
import { VStack } from '@chakra-ui/react';
import { FormikProps } from 'formik';
import { useTranslation } from 'react-i18next';
import { CreateProposalState } from '../../types';
import { CreateProposalForm, ProposalBuilderMode } from '../../types/proposalBuilder';
import { InputComponent, TextareaComponent } from '../ui/forms/InputComponent';

export interface ProposalMetadataProps extends FormikProps<CreateProposalForm> {
setFormState: (state: CreateProposalState) => void;
mode: ProposalBuilderMode;
}

export default function ProposalMetadata({
values: { proposalMetadata },
setFieldValue,
errors: { proposalMetadata: proposalMetadataError },
setFormState,
mode,
}: ProposalMetadataProps) {
const { t } = useTranslation(['proposalTemplate', 'proposal', 'common']);
const isProposalMode = mode === ProposalBuilderMode.PROPOSAL;

return (
<>
<VStack
align="left"
spacing={4}
mt={4}
>
<InputComponent
label={
isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')
}
helper={
isProposalMode
? t('proposalTitleHelper', { ns: 'proposal' })
: t('proposalTemplateTitleHelperText')
}
isRequired
value={proposalMetadata.title}
onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
disabled={false}
testId="metadata.title"
maxLength={50}
/>
<TextareaComponent
label={
isProposalMode
? t('proposalDescription', { ns: 'proposal' })
: t('proposalTemplateDescription')
}
subLabel={t('')}
helper={
isProposalMode
? t('proposalDescriptionHelper', { ns: 'proposal' })
: t('proposalTemplateDescriptionHelperText')
}
isRequired={false}
value={proposalMetadata.description}
onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
disabled={false}
rows={12}
/>
</VStack>
<Divider
color="chocolate.700"
mt={8}
mb={6}
<VStack
align="left"
spacing={8}
>
<InputComponent
label={isProposalMode ? t('proposalTitle', { ns: 'proposal' }) : t('proposalTemplateTitle')}
helper={
isProposalMode
? t('proposalTitleHelper', { ns: 'proposal' })
: t('proposalTemplateTitleHelperText')
}
placeholder={t('proposalTitlePlaceholder', { ns: 'proposal' })}
isRequired
value={proposalMetadata.title}
onChange={e => setFieldValue('proposalMetadata.title', e.target.value)}
disabled={false}
testId="metadata.title"
maxLength={50}
/>
<Button
w="100%"
onClick={() => setFormState(CreateProposalState.TRANSACTIONS_FORM)}
isDisabled={!!proposalMetadataError || !proposalMetadata.title}
>
{t('next', { ns: 'common' })}
</Button>
</>
<TextareaComponent
label={
isProposalMode
? t('proposalDescription', { ns: 'proposal' })
: t('proposalTemplateDescription')
}
subLabel={t('')}
helper={
isProposalMode
? t('proposalDescriptionHelper', { ns: 'proposal' })
: t('proposalTemplateDescriptionHelperText')
}
placeholder={t('proposalDescriptionPlaceholder', { ns: 'proposal' })}
isRequired={false}
value={proposalMetadata.description}
onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
disabled={false}
rows={12}
/>
</VStack>
);
}
Loading