-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: APP-2264 - Action Builder & Execution Widget (#911)
* update type of ActionWC to include the raw action * new data type for input form * WalletConnectAction Card * walletConnect action in action builder * action listener finalized * wallet connect action card into actionbuilder * added wc action card to execution widget * update create proposal with wc action * natspec comments * new component for type for uneditable fields * decode action * time sensitive warning * minor styling update for action card in execution widget * lint * moved search header * search header references update * formless component for type and time sensitive action refactor * waiting for inputs to be decoded * optimization comment * comment fix * fix multiple actions in review proposal * spacing fix and capitalization * lint and Crowdin todos
- Loading branch information
1 parent
0ba64fa
commit 37e1709
Showing
15 changed files
with
559 additions
and
114 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
packages/web-app/src/components/executionWidget/actions/walletConnectActionCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import {AlertCard, Label} from '@aragon/ui-components'; | ||
| import React, {useMemo} from 'react'; | ||
| import {useTranslation} from 'react-i18next'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| import {AccordionMethod, AccordionMethodType} from 'components/accordionMethod'; | ||
| import {FormlessComponentForType} from 'containers/smartContractComposer/components/inputForm'; | ||
| import {POTENTIALLY_TIME_SENSITIVE_FIELDS} from 'utils/constants/misc'; | ||
| import {capitalizeFirstLetter, shortenAddress} from 'utils/library'; | ||
| import {ActionWC, Input} from 'utils/types'; | ||
|
|
||
| type WCActionCardActionCardProps = Pick<AccordionMethodType, 'type'> & { | ||
| action: ActionWC; | ||
| methodActions?: Array<{ | ||
| component: React.ReactNode; | ||
| callback: () => void; | ||
| }>; | ||
| }; | ||
|
|
||
| export const WCActionCard: React.FC<WCActionCardActionCardProps> = ({ | ||
| action, | ||
| methodActions, | ||
| type, | ||
| }) => { | ||
| const {t} = useTranslation(); | ||
|
|
||
| const showTimeSensitiveWarning = useMemo(() => { | ||
| // Note: need to check whether the inputs exist because the decoding | ||
| // and form setting might take a while | ||
| if (action.inputs) { | ||
| for (const i of action.inputs) { | ||
| if (POTENTIALLY_TIME_SENSITIVE_FIELDS.has(i.name.toLowerCase())) | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| }, [action.inputs]); | ||
|
|
||
| return ( | ||
| <AccordionMethod | ||
| type={type} | ||
| methodName={action.functionName} | ||
| dropdownItems={methodActions} | ||
| smartContractName={shortenAddress(action.contractName)} | ||
| verified={!!action.verified} | ||
| methodDescription={action.notice} | ||
| > | ||
| <Content type={type}> | ||
| {action.inputs?.length > 0 ? ( | ||
| <FormGroup> | ||
| {action.inputs.map(input => { | ||
| if (!input.name) return null; | ||
| return ( | ||
| <FormItem key={input.name}> | ||
| <Label | ||
| label={capitalizeFirstLetter(input.name)} | ||
| helpText={input.notice} | ||
| /> | ||
| <FormlessComponentForType | ||
| disabled | ||
| key={input.name} | ||
| input={input as Input} | ||
| /> | ||
| </FormItem> | ||
| ); | ||
| })} | ||
| </FormGroup> | ||
| ) : null} | ||
| {!action.decoded && ( | ||
| <AlertCard | ||
| title={t('newProposal.configureActions.actionAlertWarning.title')} | ||
| helpText={t('newProposal.configureActions.actionAlertWarning.desc')} | ||
| mode="warning" | ||
| /> | ||
| )} | ||
| {showTimeSensitiveWarning && ( | ||
| <AlertCard | ||
| title={t('newProposal.configureActions.actionAlertCritical.title')} | ||
| helpText={t( | ||
| 'newProposal.configureActions.actionAlertCritical.desc' | ||
| )} | ||
| mode="critical" | ||
| /> | ||
| )} | ||
| </Content> | ||
| </AccordionMethod> | ||
| ); | ||
| }; | ||
|
|
||
| type ContentProps = Pick<WCActionCardActionCardProps, 'type'>; | ||
|
|
||
| const Content = styled.div.attrs(({type}: ContentProps) => ({ | ||
| className: `px-2 desktop:px-3 p-3 border border-ui-100 border-t-0 space-y-2 desktop:space-y-3 rounded-b-xl ${ | ||
| type === 'action-builder' ? 'bg-ui-0' : 'bg-ui-50' | ||
| }`, | ||
| }))<ContentProps>``; | ||
|
|
||
| const FormGroup = styled.div.attrs({ | ||
| className: 'space-y-2 desktop:space-y-3', | ||
| })``; | ||
|
|
||
| const FormItem = styled.div.attrs({ | ||
| className: 'space-y-1.5', | ||
| })``; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
packages/web-app/src/containers/actionBuilder/walletConnect/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import {ListItemAction} from '@aragon/ui-components'; | ||
| import React from 'react'; | ||
| import {useWatch} from 'react-hook-form'; | ||
| import {useTranslation} from 'react-i18next'; | ||
|
|
||
| import {WCActionCard} from 'components/executionWidget/actions/walletConnectActionCard'; | ||
| import {useActionsContext} from 'context/actions'; | ||
| import {useAlertContext} from 'context/alert'; | ||
| import {ActionIndex} from 'utils/types'; | ||
|
|
||
| const WalletConnectAction: React.FC<ActionIndex & {allowRemove?: boolean}> = ({ | ||
| actionIndex, | ||
| allowRemove = true, | ||
| }) => { | ||
| const {t} = useTranslation(); | ||
| const {alert} = useAlertContext(); | ||
|
|
||
| const [actionData] = useWatch({name: [`actions.${actionIndex}`]}); | ||
| const {removeAction} = useActionsContext(); | ||
|
|
||
| const methodActions = (() => { | ||
| const result = []; | ||
|
|
||
| if (allowRemove) { | ||
| result.push({ | ||
| component: ( | ||
| <ListItemAction title={t('labels.removeEntireAction')} bgWhite /> | ||
| ), | ||
| callback: () => { | ||
| removeAction(actionIndex); | ||
| alert(t('alert.chip.removedAction')); | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| return result; | ||
| })(); | ||
|
|
||
| if (actionData) { | ||
| return ( | ||
| <> | ||
| <WCActionCard | ||
| type="action-builder" | ||
| action={actionData} | ||
| methodActions={methodActions} | ||
| /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default WalletConnectAction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.