Merge remote-tracking branch 'origin/master' into biome_setup

app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx

@@ -1,28 +1,62 @@
 'use client';
 
 import AddressSearchBox from 'components/common/AddressSearchBox';
-import { useRouter } from 'lib/i18n/navigation';
-import type { NextPage } from 'next';
-import { useState } from 'react';
+import Button from 'components/common/Button';
+import { useCsrRouter } from 'lib/i18n/csr-navigation';
+import { NextPage } from 'next';
+import { useTranslations } from 'next-intl';
+import { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useAccount } from 'wagmi';
 
 interface Props {
   chainId: number;
   placeholder: string;
 }
 
 const TokenApprovalCheckerSearchBox: NextPage<Props> = ({ chainId, placeholder }) => {
-  const router = useRouter();
+  const t = useTranslations();
+  const router = useCsrRouter();
   const [value, setValue] = useState<string>('');
 
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const { address } = useAccount();
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  const onFocus = () => {
+    clearTimeout(timerRef.current);
+    setIsFocused(true);
+  };
+
+  const onBlur = () => {
+    timerRef.current = setTimeout(() => setIsFocused(false), 200);
+  };
+
+  const onClick = () => {
+    if (address) {
+      setValue(address);
+      router.push(`/address/${address}`, { retainSearchParams: ['chainId'] });
+    }
+  };
+
   return (
-    <AddressSearchBox
-      id="tac-search"
-      onSubmit={() => router.push(`/address/${value}?chainId=${chainId}`)}
-      onChange={(ev) => setValue(ev.target.value.trim())}
-      value={value}
-      placeholder={placeholder}
-      className="w-full max-w-3xl text-base sm:text-lg"
-    />
+    <div className="relative w-full max-w-3xl">
+      <AddressSearchBox
+        id="tac-search"
+        onSubmit={() => router.push(`/address/${value}?chainId=${chainId}`)}
+        onChange={(ev) => setValue(ev.target.value.trim())}
+        value={value}
+        placeholder={placeholder}
+        className="w-full text-base sm:text-lg"
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+      <div className={twMerge('absolute mt-2', (!isFocused || !address) && 'hidden')}>
+        <Button style="secondary" size="md" onClick={onClick}>
+          {t('common.buttons.check_connected_address')}
+        </Button>
+      </div>
+    </div>
   );
 };
 

components/address/BalanceDisplay.tsx

@@ -26,7 +26,7 @@ const BalanceDisplay = ({ isLoading, balance, price, className }: Props) => {
   return (
     <Loader isLoading={isLoading || isNullish(balance)} loadingChildren={placeholder} className="rounded-md">
       <div className={classes}>
-        <span>{balance ? formatFixedPointBigInt(balance, 18) : null}</span>
+        <span>{isNullish(balance) ? null : formatFixedPointBigInt(balance, 18)}</span>
         <span className="font-bold">{nativeToken}</span>
         {fiatBalanceText ? <span>({fiatBalanceText})</span> : null}
       </div>

components/address/navigation/AddressNavigationTab.tsx

@@ -1,5 +1,6 @@
 import Button from 'components/common/Button';
-import { usePathname, useRouter } from 'lib/i18n/navigation';
+import { useCsrRouter } from 'lib/i18n/csr-navigation';
+import { usePathname } from 'lib/i18n/navigation';
 import { twMerge } from 'tailwind-merge';
 
 interface Props {
@@ -8,7 +9,7 @@ interface Props {
 }
 
 const AddressNavigationTab = ({ name, href }: Props) => {
-  const router = useRouter();
+  const router = useCsrRouter();
   const path = usePathname();
 
   const selected = path?.endsWith(href);
@@ -21,7 +22,7 @@ const AddressNavigationTab = ({ name, href }: Props) => {
   );
 
   const onClick = () => {
-    router.replace(`${href}${location.search}`);
+    router.replace(`${href}`, { retainSearchParams: ['chainId'] });
   };
 
   return (

components/allowances/dashboard/controls/FilterSelect.tsx

@@ -91,8 +91,7 @@ const FilterSelect = ({ table }: Props) => {
       aria-label="Select Filters"
       className="w-full"
       classNamePrefix="filters-select"
-      controlTheme={darkMode ? 'dark' : 'light'}
-      menuTheme={darkMode ? 'dark' : 'light'}
+      theme={darkMode ? 'dark' : 'light'}
       options={options}
       value={selectedFilters}
       onChange={(options) => setSelectedFilters(options as Option[])}

components/allowances/dashboard/controls/SortSelect.tsx

@@ -87,8 +87,7 @@ const SortSelect = ({ table }: Props) => {
       aria-label="Sort By"
       className="w-full shrink-0"
       classNamePrefix="sort-select"
-      controlTheme={darkMode ? 'dark' : 'light'}
-      menuTheme={darkMode ? 'dark' : 'light'}
+      theme={darkMode ? 'dark' : 'light'}
       value={options.find((option) => {
         const [sorting] = table.getState().sorting;
         return option.id === sorting.id && option.desc === sorting.desc;

components/common/Button.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useColorTheme } from 'lib/hooks/useColorTheme';
+import { CsrLink } from 'lib/i18n/csr-navigation';
 import { Link } from 'lib/i18n/navigation';
 import { type ForwardedRef, type MouseEventHandler, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -20,6 +21,7 @@ export interface Props extends Record<string, any> {
   loading?: boolean;
   asDiv?: boolean;
   align?: 'left' | 'center' | 'right';
+  retainSearchParams?: boolean | string[];
 }
 
 const Button = (
@@ -36,6 +38,7 @@ const Button = (
     loading,
     asDiv,
     align,
+    retainSearchParams,
     ...props
   }: Props,
   ref: ForwardedRef<any>,
@@ -75,6 +78,14 @@ const Button = (
   // Note: This code is repeated in Href.tsx for styling reasons
   if (href) {
     if (router) {
+      if (retainSearchParams) {
+        return (
+          <CsrLink {...props} className={classes} href={href} ref={ref} retainSearchParams={retainSearchParams}>
+            {children}
+          </CsrLink>
+        );
+      }
+
       return (
         <Link {...props} className={classes} href={href} ref={ref}>
           {children}

components/common/Href.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Link } from 'lib/i18n/navigation';
 import { type AnchorHTMLAttributes, type ForwardedRef, type ReactNode, forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';

components/common/MarkdownProse.tsx

@@ -1,4 +1,5 @@
-import ReactMarkdown, { type Components } from 'react-markdown';
+import Image from 'next/image';
+import ReactMarkdown, { Components } from 'react-markdown';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -52,6 +53,21 @@ const MarkdownProse = ({ content, className }: Props) => {
     'youtube-video': (props: any) => {
       return <YouTubeEmbed {...props} />;
     },
+    img: ({ src, alt, width, height }) => {
+      if (!width || !height) {
+        return (
+          <p>
+            <img src={src!} alt={alt ?? src!} />
+          </p>
+        );
+      }
+
+      return (
+        <p>
+          <Image src={src!} alt={alt ?? src!} width={width as any} height={height as any} />
+        </p>
+      );
+    },
     // <pre> is handled by the code component (SyntaxHighlighter)
     pre: ({ children }) => <>{children}</>,
     code({ node, inline, className, children, ...props }: any) {

components/common/donate/TipSection.tsx

@@ -84,7 +84,7 @@ const TipOption = ({ amount, children, nativeToken }: TipOptionProps) => {
     <Radio
       value={amount}
       className={twMerge(
-        'flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold uppercase cursor-pointer focus:outline-none data-[focus]:ring-2 data-[focus]:ring-black ring-1 ring-gray-300 hover:bg-gray-50 data-[checked]:bg-brand data-[checked]:ring-0 whitespace-nowrap',
+        'flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold uppercase cursor-pointer focus:outline-none data-[focus]:ring-2 data-[focus]:ring-black ring-1 ring-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 data-[checked]:bg-brand dark:data-[checked]:bg-brand data-[checked]:ring-0 whitespace-nowrap',
       )}
     >
       {children ?? `${amount} ${nativeToken}`}

components/common/select/ChainSelect.tsx

@@ -67,8 +67,7 @@ const ChainSelect = ({ onSelect, selected, menuAlign, chainIds, instanceId, show
       aria-label="Select Network"
       size="md"
       className="shrink-0"
-      controlTheme={darkMode ? 'dark' : 'light'}
-      menuTheme={darkMode ? 'dark' : 'light'}
+      theme={darkMode ? 'dark' : 'light'}
       value={groups.flatMap((group) => group.options).find((option) => option.chainId === selected)}
       options={chainIds ? mainnetOptions : groups}
       isOptionDisabled={(option) => !isSupportedChain(option.chainId)}

components/common/select/ChainSelectHref.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import ChainLogo from 'components/common/ChainLogo';
-import { useRouter } from 'lib/i18n/navigation';
+import { useCsrRouter } from 'lib/i18n/csr-navigation';
 import { CHAIN_SELECT_MAINNETS, CHAIN_SELECT_TESTNETS, getChainName, isSupportedChain } from 'lib/utils/chains';
 import { useTranslations } from 'next-intl';
 import { memo } from 'react';
@@ -26,7 +26,7 @@ interface Props {
 // This component is designed to match the styling of the ChainSelect component, but with links instead
 const ChainSelectHref = ({ selected, chainIds, getUrl, instanceId, menuAlign, showNames }: Props) => {
   const t = useTranslations();
-  const router = useRouter();
+  const router = useCsrRouter();
 
   const mainnetOptions = (chainIds ?? CHAIN_SELECT_MAINNETS).map((chainId) => ({
     value: getChainName(chainId),

components/common/select/SearchableSelect.tsx

@@ -50,7 +50,7 @@ const SearchableSelect = <O, I extends boolean, G extends GroupBase<O>>(props: P
   };
 
   const filterOption = createFilter({
-    stringify: (option: FilterOptionOption<O>) => option.value,
+    stringify: (option: FilterOptionOption<O>) => option.value.replace('ZERϴ', 'ZERO | ZERϴ'),
   });
 
   const formatOptionLabel = (option: O, formatOptionLabelMeta: FormatOptionLabelMeta<O>) => {