chore: update strings, asset (#1402)

* chore: add logos, copy * chore: add logos, copy * chore: clean up, add hover * Revert yarn.lock to the version from develop * chore: add extra logo --------- Co-authored-by: Barukimang <[email protected]>
aragon · Sep 26, 2024 · a39a3cf · a39a3cf
1 parent af11e37
commit a39a3cf
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 13 deletions.
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -9,9 +9,12 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.ts(x)'],
   setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
   modulePaths: ['<rootDir>/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$': '<rootDir>/node_modules/@aragon/ods',
+    '^@aragon/ods-old(.*)$': '<rootDir>/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
@@ -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<ListItemActionProps> = ({
   iconLeft,
   iconRight,
   tag,
+  wcLogo,
   mode = 'default',
   truncateText = false,
   ...props
@@ -53,15 +57,21 @@ export const ListItemAction: React.FC<ListItemActionProps> = ({
         {/* 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) */}
         <LabelContainer>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-x-1">
             <p
               className={`font-semibold ft-text-base ${
                 truncateText ? 'truncate' : ''
               }`}
             >
               {title}
             </p>
+
             {tag && <Tag {...tag} />}
+            {wcLogo && (
+              <span>
+                <WalletConnectLogoMini />
+              </span>
+            )}
           </div>
           {subtitle && (
             <p
@@ -141,3 +151,19 @@ const LabelContainer = styled.div.attrs({
 const LeftContent = styled.div.attrs({
   className: 'flex items-center space-x-3 flex-1 overflow-hidden',
 })``;
+
+const WalletConnectLogoMini = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      className="h-5"
+      fill="currentColor"
+    >
+      <path
+        d="M3.276 5.05c2.609-2.521 6.84-2.521 9.449 0l.314.304c.13.126.13.33 0 .457l-1.075 1.038a.171.171 0 0 1-.236 0l-.432-.417c-1.82-1.76-4.772-1.76-6.592 0l-.463.447a.171.171 0 0 1-.236 0L2.931 5.841a.315.315 0 0 1 0-.457l.345-.333Zm11.67 2.148.956.924c.13.126.13.33 0 .457l-4.31 4.167a.342.342 0 0 1-.473 0L8.059 9.79a.086.086 0 0 0-.118 0l-3.06 2.957a.342.342 0 0 1-.472 0L.098 8.58a.315.315 0 0 1 0-.457l.956-.924a.342.342 0 0 1 .472 0l3.06 2.958a.086.086 0 0 0 .118 0l3.06-2.958a.342.342 0 0 1 .472 0l3.06 2.958a.086.086 0 0 0 .118 0l3.06-2.958a.342.342 0 0 1 .472 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/assets/images/WalletConnectIcon.svg b/src/assets/images/WalletConnectIcon.svg
diff --git a/src/assets/images/walletConnect.svg b/src/assets/images/walletConnect.svg
diff --git a/src/assets/images/walletConnectLogo.svg b/src/assets/images/walletConnectLogo.svg
diff --git 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
@@ -44,6 +44,7 @@ const AddActionMenu: React.FC<AddActionMenuProps> = ({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
@@ -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> = props => {
       />
       <Content>
         <FormGroup>
-          <div className="flex flex-col gap-y-1">
+          <div className="flex flex-col gap-y-3">
+            <img
+              src={WalletConnect}
+              alt="Wallet Connect"
+              className="h-[50px]"
+            />
+            <Description className="text-center">
+              {t('modal.dappConnect.desc1')}
+            </Description>
             <p className="font-semibold text-neutral-800 ft-text-base">
               {t('modal.dappConnect.validation.codeInputLabel')}
             </p>
@@ -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
@@ -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> = props => {
         {...(isDesktop ? {showCloseButton: true, onClose} : {})}
       />
       <Content>
-        <div className="flex flex-col gap-2">
-          <Description>{t('modal.dappConnect.desc')}</Description>
+        <div className="flex flex-col gap-y-3">
+          <img src={WalletConnect} alt="Wallet Connect" className="h-[50px]" />
+          <Description className="mb-2 text-center">
+            {t('modal.dappConnect.desc1')}
+          </Description>
+          <Description className="text-center">
+            {t('modal.dappConnect.desc2')}
+          </Description>
           {sessions.length > 0 && (
             <Label>{t('modal.dappConnect.detaildApp.listTitle')}</Label>
           )}

diff --git a/src/hooks/useDaoActions.tsx b/src/hooks/useDaoActions.tsx
@@ -87,7 +87,7 @@ export function useDaoActions(dao: string): HookData<ActionParameter[]> {
       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
@@ -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