diff --git a/jest.config.cjs b/jest.config.cjs index 96092180e..a6212aedb 100644 --- a/jest.config.cjs +++ b/jest.config.cjs @@ -9,9 +9,12 @@ module.exports = { collectCoverageFrom: ['src/**/*.ts(x)'], setupFilesAfterEnv: ['/src/test/setup.ts'], modulePaths: ['/src/'], - // moduleDirectories overrides default jest package lookup behavior - // using this to include utils folder so jest is aware of where the test-utils file resides moduleDirectories: ['node_modules', 'utils', __dirname], setupFiles: ['dotenv/config'], transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|react-merge-refs))'], + + moduleNameMapper: { + '^@aragon/ods$': '/node_modules/@aragon/ods', + '^@aragon/ods-old(.*)$': '/src/@aragon/ods-old$1', + }, }; diff --git a/src/@aragon/ods-old/components/listItem/action.tsx b/src/@aragon/ods-old/components/listItem/action.tsx index ca89d207b..bebd14dc7 100644 --- a/src/@aragon/ods-old/components/listItem/action.tsx +++ b/src/@aragon/ods-old/components/listItem/action.tsx @@ -1,6 +1,5 @@ import React, {type ButtonHTMLAttributes} from 'react'; import {styled} from 'styled-components'; - import {AvatarDao} from '../avatar'; import {ITagProps, Tag} from '@aragon/ods'; @@ -25,6 +24,10 @@ export type ListItemActionProps = CustomButtonProps & { */ title: string; tag?: ITagProps; + /** + * WalletConnect logo. Optional. Displayed inline with the title. + */ + wcLogo?: boolean; /** * Normal font, small. Optional. Displayed below the title, left aligned */ @@ -42,6 +45,7 @@ export const ListItemAction: React.FC = ({ iconLeft, iconRight, tag, + wcLogo, mode = 'default', truncateText = false, ...props @@ -53,7 +57,7 @@ export const ListItemAction: React.FC = ({ {/* This could be done with label. However, I can't get the label's text to inherit the color (for example, when selected mode is on) */} -
+

= ({ > {title}

+ {tag && } + {wcLogo && ( + + + + )}
{subtitle && (

{ + return ( + + + + ); +}; diff --git a/src/assets/images/WalletConnectIcon.svg b/src/assets/images/WalletConnectIcon.svg new file mode 100644 index 000000000..99c005650 --- /dev/null +++ b/src/assets/images/WalletConnectIcon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/walletConnect.svg b/src/assets/images/walletConnect.svg deleted file mode 100644 index e2958a921..000000000 --- a/src/assets/images/walletConnect.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/images/walletConnectLogo.svg b/src/assets/images/walletConnectLogo.svg new file mode 100644 index 000000000..b1e019026 --- /dev/null +++ b/src/assets/images/walletConnectLogo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json index fdeecd6c2..bbead2169 100644 --- a/src/assets/locales/en/common.json +++ b/src/assets/locales/en/common.json @@ -1347,11 +1347,12 @@ } }, "dappConnect": { - "desc": "You can interact with any dApp that supports interacting with DAOs and add actions to your proposal.", + "desc1": "Powered by WalletConnect", + "desc2": "Add any dApp that supports DAO interactions and compose new actions for your proposal.", "validation": { "codeInputHelp": "To connect, open the dApp, copy the WalletConnect QR code to your clipboard, and paste it here.", "modalTitle": "Connect new dApp", - "codeInputLabel": "WalletConnect QR code", + "codeInputLabel": "QR code", "ctaLabelDefault": "Create connection", "ctaLabelVerifying": "Connecting dApp …", "ctaLabelCritical": "Retry", diff --git a/src/containers/addActionMenu/index.tsx b/src/containers/addActionMenu/index.tsx index e9b596956..6ad082cdb 100644 --- a/src/containers/addActionMenu/index.tsx +++ b/src/containers/addActionMenu/index.tsx @@ -44,6 +44,7 @@ const AddActionMenu: React.FC = ({actions}) => { title={a.title} subtitle={a.subtitle} tag={a.tag} + wcLogo={a.wcLogo} mode={ !a.isReuseable && usedActions.some(ua => ua.name === a.type) ? 'disabled' diff --git a/src/containers/walletConnect/dAppValidationModal/index.tsx b/src/containers/walletConnect/dAppValidationModal/index.tsx index a909142c4..be99a8fa1 100644 --- a/src/containers/walletConnect/dAppValidationModal/index.tsx +++ b/src/containers/walletConnect/dAppValidationModal/index.tsx @@ -19,6 +19,7 @@ import {TransactionState as ConnectionState} from 'utils/constants/misc'; import {handleClipboardActions} from 'utils/library'; import {useWalletConnectContext} from '../walletConnectProvider'; import {METADATA_NAME_ERROR} from '../walletConnectProvider/useWalletConnectInterceptor'; +import WalletConnect from '../../../assets/images/WalletConnectIcon.svg'; type Props = { onBackButtonClicked: () => void; @@ -175,7 +176,15 @@ const DAppValidationModal: React.FC = props => { /> -

+
+ Wallet Connect + + {t('modal.dappConnect.desc1')} +

{t('modal.dappConnect.validation.codeInputLabel')}

@@ -274,3 +283,7 @@ const FormGroup = styled.div.attrs({className: 'space-y-3'})``; const AlertWrapper = styled.div.attrs({ className: 'mt-3 flex justify-center', })``; + +const Description = styled.p.attrs({ + className: 'ft-text-sm text-neutral-600', +})``; diff --git a/src/containers/walletConnect/selectdAppModal/index.tsx b/src/containers/walletConnect/selectdAppModal/index.tsx index 623c85eb3..8719e2563 100644 --- a/src/containers/walletConnect/selectdAppModal/index.tsx +++ b/src/containers/walletConnect/selectdAppModal/index.tsx @@ -10,6 +10,7 @@ import ModalHeader from 'components/modalHeader'; import useScreen from 'hooks/useScreen'; import {parseWCIconUrl} from 'utils/library'; import {useWalletConnectContext} from '../walletConnectProvider'; +import WalletConnect from '../../../assets/images/WalletConnectIcon.svg'; type Props = { isOpen: boolean; @@ -45,8 +46,14 @@ const SelectdAppModal: React.FC = props => { {...(isDesktop ? {showCloseButton: true, onClose} : {})} /> -
- {t('modal.dappConnect.desc')} +
+ Wallet Connect + + {t('modal.dappConnect.desc1')} + + + {t('modal.dappConnect.desc2')} + {sessions.length > 0 && ( )} diff --git a/src/hooks/useDaoActions.tsx b/src/hooks/useDaoActions.tsx index d32038695..e1ec11759 100644 --- a/src/hooks/useDaoActions.tsx +++ b/src/hooks/useDaoActions.tsx @@ -87,7 +87,7 @@ export function useDaoActions(dao: string): HookData { title: t('AddActionModal.connectdAppsTitle'), subtitle: t('AddActionModal.connectdAppsSubtitle'), isReuseable: true, - tag: {label: 'Alpha', variant: 'warning'}, + wcLogo: true, isDisabled: featureFlags.getValue('VITE_FEATURE_FLAG_DAO_WALLET_CONNECT') === 'false', diff --git a/src/utils/types.ts b/src/utils/types.ts index 92bea1ce4..36eb2da44 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -242,6 +242,10 @@ export type ActionParameter = { * Optional tag to be shown */ tag?: ITagProps; + /** + * Optional icon to be shown inline with title + */ + wcLogo?: boolean; /** * Whether an action can be used several times in a proposal. Currently * actions are either limited to 1 or not limited at all. This might need to