Merge branch 'develop' into f/sdk-update

.env.development

@@ -9,3 +9,5 @@ VITE_FEATURE_FLAG_MONITORING=true
 VITE_FEATURE_FLAG_DELEGATION=true
 
 VITE_FEATURE_FLAG_OSX_UPDATES=true
+
+VITE_FEATURE_FLAG_CONNECT_ANY_DAPP=true

.env.staging

@@ -8,4 +8,6 @@ VITE_FEATURE_FLAG_MONITORING=true
 
 VITE_FEATURE_FLAG_DELEGATION=true
 
-VITE_FEATURE_FLAG_OSX_UPDATES=true
+VITE_FEATURE_FLAG_OSX_UPDATES=true
+
+VITE_FEATURE_FLAG_CONNECT_ANY_DAPP=true

src/@aragon/ods-old/components/button/buttonGroup/button.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {ButtonText} from '../buttonText';
 import {useButtonGroupContext} from './buttonGroup';
 
-export type OptionProps = {
+export type OptionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   value: string;
   label: string;
   disabled?: boolean;
@@ -12,6 +12,7 @@ export const Option: React.FC<OptionProps> = ({
   value,
   label,
   disabled = false,
+  className,
 }) => {
   const {bgWhite, selectedValue, onChange} = useButtonGroupContext();
 
@@ -22,7 +23,7 @@ export const Option: React.FC<OptionProps> = ({
       bgWhite={!bgWhite}
       mode="ghost"
       size="small"
-      className="justify-center whitespace-nowrap"
+      className={`justify-center whitespace-nowrap ${className}`}
       disabled={disabled}
       onClick={() => onChange?.(value)}
     />

src/@aragon/ods-old/components/cards/cardProposal.tsx

@@ -5,7 +5,6 @@ import {shortenAddress} from '../../utils/addresses';
 import {AlertInline} from '../alerts';
 import {AvatarDao} from '../avatar';
 import {IconClock, IconUpdate} from '../icons';
-import {Link} from '../link';
 import {LinearProgress} from '../progress';
 import {Tag} from '../tag';
 
@@ -61,6 +60,9 @@ export type CardProposalProps = {
   /** Publisher's ethereum address, ENS name **or** DAO address when type is
    * explore */
   publisherAddress?: string;
+  /** Human readable name */
+  publisherDisplayName: string;
+
   /** DAO name to display when type is explore */
   daoName?: string;
   /** Blockchain explorer URL */
@@ -91,6 +93,7 @@ export const CardProposal: React.FC<CardProposalProps> = ({
   winningOptionValue,
   publishLabel,
   publisherAddress,
+  publisherDisplayName,
   explorer = 'https://etherscan.io/',
   alertMessage,
   stateLabel,
@@ -130,14 +133,15 @@ export const CardProposal: React.FC<CardProposalProps> = ({
               <PublisherLabel>{publishLabel}</PublisherLabel>
             )}
 
-            <Link
-              external
+            <PublisherAddress
               href={addressExploreUrl}
-              label={shortenAddress(
-                (isExploreProposal(type) ? daoName : publisherAddress) ?? ''
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {shortenAddress(
+                (isExploreProposal(type) ? daoName : publisherDisplayName) ?? ''
               )}
-              className="text-sm leading-normal"
-            />
+            </PublisherAddress>
           </Publisher>
         </TextContent>
         {process === 'active' && voteProgress !== undefined && (
@@ -295,3 +299,8 @@ const PublisherLabel = styled.p.attrs({className: '-mr-1'})``;
 const VotedAlertWrapper = styled.div.attrs({
   className: 'flex justify-center xl:justify-start',
 })``;
+
+const PublisherAddress = styled.a.attrs({
+  className: `font-semibold ft-text-sm text-primary-400 hover:text-primary-600 active:text-primary-800
+        focus-visible:ring focus-visible:ring-primary-200 focus-visible:bg-neutral-50 `,
+})``;

src/@aragon/ods-old/components/input/dateInput.tsx

@@ -27,9 +27,10 @@ const InputContainer = styled.div.attrs<InputContainerProps>(({disabled}) => {
   if (disabled) {
     className += ' bg-neutral-100 text-neutral-300 border-neutral-200';
   } else {
-    const focusVisibleClasses = 'focus-within:ring focus-within:ring-primary';
+    const focusVisibleClasses =
+      'focus-within:border-primary-500 focus-within:hover:border-primary-500';
     const hoverClasses = 'hover:border-neutral-300';
-    const activeClasses = 'active:border-primary-500 active:ring-0';
+    const activeClasses = 'active:border-primary-500';
     className += ` bg-neutral-0 text-neutral-600 ${focusVisibleClasses} ${hoverClasses} ${activeClasses}`;
   }
   return {className, disabled};

src/@aragon/ods-old/components/input/numberInput.tsx

@@ -153,9 +153,8 @@ const Container = styled.div.attrs<StyledContainerProps>(
     } inline-flex bg-neutral-0 ${
       width ? '' : 'w-full'
     } focus:outline-none items-center py-1.5 px-2
-      focus-within:ring focus-within:ring-primary justify-between
+      focus-within:border-primary-500 focus-within:hover:border-primary-500 justify-between
       rounded-xl hover:border-neutral-300 border-2 active:border-primary-500
-      active:ring-0
     `;
 
     if (mode === 'default') {

src/@aragon/ods-old/components/input/textInput.tsx

@@ -49,10 +49,8 @@ export const Container = styled.div.attrs<StyledContainerProps>(
   ({mode, disabled, containerClassName}) => {
     let className = `${
       disabled ? 'bg-neutral-100 border-neutral-200 border-2' : 'bg-neutral-0'
-    } flex items-center focus-within:ring
-    focus-within:ring-primary
-    rounded-xl hover:border-neutral-300 border-2 h-12
-    active:border-primary-500 active:ring-0 `;
+    } flex items-center focus-within:border-primary-500 focus-within:hover:border-primary-500
+    rounded-xl hover:border-neutral-300 border-2 h-12 `;
 
     if (containerClassName) {
       className += containerClassName;

src/@aragon/ods-old/components/input/valueInput.tsx

@@ -59,8 +59,8 @@ export const Container = styled.div.attrs<StyledContainerProps>(
     let className = `${
       disabled ? 'bg-neutral-100 border-neutral-200' : 'bg-neutral-0'
     } flex items-center space-x-3 p-1.5 pl-4 text-neutral-600 rounded-xl
-    border-2 focus-within:ring focus-within:ring-primary
-    hover:border-neutral-300 active:border-primary-500 active:ring-0 `;
+    border-2 focus-within:border-primary-500 focus-within:hover:border-primary-500
+    hover:border-neutral-300 active:border-primary-500 `;
 
     if (mode === 'default') {
       className += 'border-neutral-100';

src/@aragon/ods-old/components/input/walletInput.tsx

@@ -583,7 +583,7 @@ export const Container = styled.div.attrs<StyledContainerProps>(
 
     const focusClass = disabled
       ? ''
-      : 'focus-within:ring focus-within:ring-primary';
+      : 'focus-within:border-primary-500 focus-within:hover:border-primary-500';
 
     const bgAndBorderColor = disabled
       ? 'bg-neutral-100 border-neutral-200 text-neutral-700'

src/@aragon/ods-old/components/input/walletInputLegacy.tsx

@@ -69,8 +69,8 @@ export const Container = styled.div.attrs<StyledContainerProps>(
     let className = `${
       disabled ? 'bg-neutral-100 border-neutral-200' : 'bg-neutral-0'
     } flex items-center space-x-3 p-1.5 pl-4 text-neutral-600 rounded-xl
-    border-2 focus-within:ring focus-within:ring-primary
-    hover:border-neutral-300 active:border-primary-500 active:ring-0 `;
+    border-2 focus-within:border-primary-500 focus-within:hover:border-primary-500
+    hover:border-neutral-300 active:border-primary-500 `;
 
     if (mode === 'default') {
       className += 'border-neutral-100';

src/@aragon/ods-old/components/modal/modal.tsx

@@ -98,7 +98,7 @@ const ModalContainer = styled(Content).attrs(({style}: StyledContentProps) => {
     borderRadius: 12,
     width: '90vw',
     maxWidth: '448px',
-    maxHeight: '75vh',
+    maxHeight: '85vh',
     outline: 'none',
     overflow: 'auto',
   };

src/@aragon/ods-old/components/pagination/pagination.tsx

@@ -47,7 +47,33 @@ export const Pagination: React.FC<PaginationProps> = ({
     const {isMobile} = useScreen();
 
     if (isMobile) {
-      if (totalPages - page <= 1) {
+      if (totalPages === 2) {
+        return (
+          <>
+            <ButtonText
+              mode="secondary"
+              size="large"
+              isActive={page === 1}
+              onClick={() => setPage(1)}
+              {...(bgWhite && {bgWhite})}
+              label={`${1}`}
+              key={1}
+            />
+
+            <ButtonText
+              mode="secondary"
+              size="large"
+              isActive={page === 2}
+              onClick={() => setPage(2)}
+              {...(bgWhite && {bgWhite})}
+              label={`${2}`}
+              key={2}
+            />
+          </>
+        );
+      }
+
+      if (totalPages - page <= 1 && totalPages > 2) {
         const penultimatePage = totalPages - 1;
         return (
           <>

src/@aragon/ods-old/components/spinner/spinner.tsx

@@ -34,7 +34,7 @@ const StyledSpinner = styled.div.attrs<SpinnerProps>(({size}) => {
   };
   const className = `rounded-full
         ease-linear border-2
-        border-t-2 border-neutral-0
+        border-t-2 border-[transparent]
         ${sizes[size]}
     `;
 

src/@aragon/ods-old/components/table/votersTable.tsx

@@ -82,7 +82,7 @@ export const VotersTable: React.FC<VotersTableProps> = ({
 };
 
 const Container = styled.div.attrs({
-  className: 'w-full border-2 rounded-xl whitespace-nowrap',
+  className: 'w-full border-2 border-neutral-100 rounded-xl whitespace-nowrap',
 })`
   button:first-child {
     border-top-right-radius: 12px;

src/@aragon/ods-old/components/textarea/textarea.tsx

@@ -8,7 +8,7 @@ export type TextareaSimpleProps = Omit<
 
 export const TextareaSimple = styled.textarea.attrs({
   className: `py-3 px-4 rounded-xl resize-none w-full border-2 border-neutral-100 hover:border-neutral-300
-    disabled:bg-neutral-100 disabled:border-neutral-200 focus:ring focus:ring-primary focus:outline-none bg-neutral-0 text-neutral-600 active:border-primary-500 active:ring-0`,
+    disabled:bg-neutral-100 disabled:border-neutral-200 focus-within:border-primary-500 focus-within:hover:border-primary-500 focus:outline-none bg-neutral-0 text-neutral-600 active:border-primary-500`,
 })`
   min-height: 144px;
 

src/@aragon/ods-old/components/textarea/wysiwyg.tsx

@@ -228,7 +228,7 @@ const Container = styled.div.attrs<Props>(({disabled, fullScreen = false}) => ({
   className: `w-full text-neutral-600 overflow-auto ${
     fullScreen
       ? 'h-screen flex flex-col fixed top-0'
-      : 'rounded-xl border-2 border-neutral-100 hover:border-neutral-300 focus-within:ring focus-within:ring-primary active:border-primary-500 active:ring-0 '
+      : 'rounded-xl border-2 border-neutral-100 hover:border-neutral-300 focus-within:border-primary-500 focus-within:hover:border-primary-500 active:border-primary-500 '
   } ${disabled ? 'bg-neutral-100 border-neutral-200' : 'bg-neutral-0'}`,
 }))<Props>`
   ::-webkit-input-placeholder {
@@ -258,15 +258,16 @@ const Toolgroup = styled.div.attrs({
 const StyledEditorContent = styled(EditorContent)`
   flex: 1;
 
+  .ProseMirror:focus,
+  .ProseMirror:focus-visible {
+    outline: none;
+  }
+
   .ProseMirror {
     padding: 12px 16px;
     height: 100%;
     min-height: 112px;
 
-    :focus {
-      outline: none;
-    }
-
     ul {
       list-style-type: decimal;
       padding: 0 1rem;

src/components/membersList/actionItemAddress.tsx

@@ -229,7 +229,7 @@ export const ActionItemAddress: React.FC<ActionItemAddressProps> = props => {
 
         <Dropdown
           align="end"
-          className="px-0 py-2"
+          className="p-2"
           listItems={buildMenuOptions()}
           side="bottom"
           trigger={

src/components/navLink/index.tsx

@@ -50,7 +50,9 @@ const NavLink = ({caller, data, onItemClick}: NavLinkProps) => {
   const handleOnClick = () => {
     const dao = daoMatch?.params?.dao;
     onItemClick?.();
-    navigate(generatePath(data.path, {network, dao}));
+    // timeout is to allow any state changes triggered by onItemClick to take effect
+    // before navigation occurs, potentially unmounting components
+    setTimeout(() => navigate(generatePath(data.path, {network, dao})), 100);
   };
 
   if (caller === 'dropdown') {

src/components/proposalList/index.tsx

@@ -159,12 +159,18 @@ export function proposal2CardProps(
   daoAddressOrEns: string,
   address: string | null
 ): {id: string} & CardProposalProps {
+  const publisherDisplayName =
+    address && proposal.creatorAddress.toLowerCase() === address.toLowerCase()
+      ? t('labels.you')
+      : proposal.creatorAddress;
+
   const props = {
     id: proposal.id,
     title: proposal.metadata.title,
     description: proposal.metadata.summary,
     explorer: CHAIN_METADATA[network].explorer,
     publisherAddress: proposal.creatorAddress,
+    publisherDisplayName,
     publishLabel: t('governance.proposals.publishedBy'),
     process: proposal.status.toLowerCase() as CardProposalProps['process'],
     onClick: () => {

src/components/protectedRoute/index.tsx

@@ -106,7 +106,9 @@ const ProtectedRoute: React.FC = () => {
 
     if (!canCreateProposal) {
       open('gating');
-    } else {
+    }
+
+    if (canCreateProposal && isOpen) {
       close();
     }
   }, [
@@ -119,6 +121,7 @@ const ProtectedRoute: React.FC = () => {
     membersAreLoading,
     network,
     open,
+    isOpen,
     provider,
   ]);
 

src/containers/delegateVotingMenu/delegateVotingForm.tsx

@@ -123,7 +123,7 @@ export const DelegateVotingForm: React.FC<IDelegateVotingFormProps> = props => {
   return (
     <div className="flex flex-col gap-6">
       <FormGroup>
-        <p className="text-base leading-normal text-neutral-800">
+        <p className="font-semibold text-neutral-800 ft-text-base">
           {t('modal.delegation.optionsLabel')}
         </p>
         <CheckboxListItem
@@ -194,5 +194,5 @@ export const DelegateVotingForm: React.FC<IDelegateVotingFormProps> = props => {
 };
 
 const FormGroup = styled.div.attrs({
-  className: 'flex flex-col gap-3' as string,
+  className: 'flex flex-col gap-3',
 })``;

src/containers/delegateVotingMenu/delegateVotingMenu.tsx

@@ -36,7 +36,7 @@ const buildFormSettings = (
 
 type DelegateVotingMenuState = {
   /**
-   * Initialises the form in reclaim mode when set to true.
+   * Initializes the form in reclaim mode when set to true.
    */
   reclaimMode?: boolean;
   /**
@@ -52,7 +52,7 @@ export const DelegateVotingMenu: React.FC = () => {
     useGlobalModalContext<DelegateVotingMenuState>('delegateVoting');
   const formSettings = buildFormSettings(modalState?.delegate);
   const formValues = useForm<IDelegateVotingFormValues>(formSettings);
-  const {setValue, control} = formValues;
+  const {setValue, clearErrors, control} = formValues;
   const delegate = useWatch({
     name: DelegateVotingFormField.TOKEN_DELEGATE,
     control: control,
@@ -101,6 +101,7 @@ export const DelegateVotingMenu: React.FC = () => {
       address: currentDelegate ?? '',
       ensName: currentDelegateEns,
     });
+    clearErrors(DelegateVotingFormField.TOKEN_DELEGATE);
     setTxHash(undefined);
     close();
     resetDelegateProcess();