merge master

base-org · Oct 11, 2024 · d8aedd1 · d8aedd1
2 parents 2db8b17 + 3247345
commit d8aedd1
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 82 deletions.
diff --git a/apps/web/src/components/Basenames/ConfigureFramesPageContent/FrameBuilder.tsx b/apps/web/src/components/Basenames/ConfigureFramesPageContent/FrameBuilder.tsx
@@ -25,7 +25,6 @@ import nftProduct from './ui/nftProduct.svg';
 import previewBackground from './ui/preview-background.svg';
 import emptyPreviewFrame from './ui/preview-frame.svg';
 import starActive from './ui/starActive.svg';
-import swap from './ui/swap.svg';
 
 export default function FrameBuilder() {
   const params = useParams();
@@ -46,10 +45,6 @@ export default function FrameBuilder() {
 
   const { profileAddress } = useUsernameProfile();
 
-  const [swapTokenSymbol, setSwapTokenSymbol] = useState('');
-  const handleSwapTokenSymbolChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setSwapTokenSymbol(e.target.value);
-  }, []);
   const emptyFrameUrl = !debouncedNewFrameUrl;
   const isValidFrameUrl = isValidUrl(debouncedNewFrameUrl);
   const { logEventWithContext } = useAnalytics();
@@ -134,18 +129,6 @@ export default function FrameBuilder() {
     }
   }, [basename, handleNextStep, logEventWithContext]);
 
-  const handleSwapPreviewClick = useCallback(() => {
-    if (swapTokenSymbol) {
-      logEventWithContext('basename_profile_frame_preview', ActionType.click, {
-        context: 'social-dex',
-      });
-      setNewFrameUrl(`https://social-dex-frontend.vercel.app/api/buy/ticker/${swapTokenSymbol}`);
-      handleNextStep();
-    } else {
-      setNewFrameUrl('');
-    }
-  }, [swapTokenSymbol, handleNextStep, logEventWithContext]);
-
   const handleBuildTopClick = useCallback(() => {
     if (profileAddress) {
       logEventWithContext('basename_profile_frame_preview', ActionType.click, {
@@ -351,37 +334,6 @@ export default function FrameBuilder() {
           Show Preview
         </Button>
       </SuggestionCard>
-      <SuggestionCard
-        handleTriggerClick={() =>
-          logEventWithContext('basename_profile_frame_swap_opened', ActionType.click)
-        }
-        imgData={swap as StaticImageData}
-        title="Swap with me"
-        description="Buy my tokens"
-      >
-        <p className="text-sm text-palette-foreground">
-          Enter the token symbol of the token you want others to buy from your profile
-        </p>
-        <div className="mt-3 flex flex-row gap-2 lg:gap-4">
-          <Input
-            placeholder="token symbol (example: USDC)"
-            value={swapTokenSymbol}
-            onChange={handleSwapTokenSymbolChange}
-            type="text"
-            className="flex-grow rounded-xl border border-palette-line/20 px-3 py-2 md:max-w-[180px] lg:max-w-full"
-          />
-          <Button
-            rounded
-            disabled={!swapTokenSymbol}
-            className="flex grow items-center justify-center md:max-w-[120px]"
-            variant={ButtonVariants.Black}
-            size={ButtonSizes.Tiny}
-            onClick={handleSwapPreviewClick}
-          >
-            Show preview
-          </Button>
-        </div>
-      </SuggestionCard>
       <SuggestionCard
         handleTriggerClick={() =>
           logEventWithContext('basename_profile_frame_rsvp_opened', ActionType.click)

diff --git a/apps/web/src/components/Basenames/ConfigureFramesPageContent/ui/swap.svg b/apps/web/src/components/Basenames/ConfigureFramesPageContent/ui/swap.svg
diff --git a/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx b/apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem.tsx
@@ -8,13 +8,32 @@ import { useFrameContext } from 'apps/web/src/components/Basenames/UsernameProfi
 import Frame from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/Frame';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
 import Image, { StaticImageData } from 'next/image';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import TrashIcon from './assets/trash-icon.svg';
+import { useCopyToClipboard } from 'usehooks-ts';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
 
 export default function FrameListItem({ url }: { url: string }) {
   const { removeFrame } = useFrameContext();
   const { currentWalletIsProfileOwner } = useUsernameProfile();
   const { logEventWithContext } = useAnalytics();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const [, copy] = useCopyToClipboard();
+  const handleCopyFrameURLClick = useCallback(() => {
+    copy(url)
+      .then(() => {
+        setIsCopied(true);
+      })
+      .catch((e) => {
+        console.error(e);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setIsCopied(false);
+        }, 2000);
+      });
+  }, [copy, url]);
 
   const handleRemoveFrameClick = useCallback(() => {
     removeFrame(url)
@@ -26,23 +45,42 @@ export default function FrameListItem({ url }: { url: string }) {
 
   return (
     <div className="relative mb-4 break-inside-avoid">
-      {currentWalletIsProfileOwner && (
-        <Popover.Root>
-          <Popover.Trigger asChild>
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <button
+            type="button"
+            aria-label="more"
+            className="absolute right-2.5 top-2.5 z-2 flex items-center justify-center rounded-lg bg-white p-2 text-gray-80 transition-colors hover:bg-gray-5"
+          >
+            <EllipsisHorizontalIcon width="12px" />
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            align="end"
+            className="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade rounded-xl bg-white p-2 will-change-[transform,opacity]"
+            sideOffset={5}
+          >
             <button
               type="button"
-              aria-label="more"
-              className="absolute right-2.5 top-2.5 z-2 flex items-center justify-center rounded-lg bg-white p-2 text-gray-80 transition-colors hover:bg-gray-5"
+              aria-label="copy frame url"
+              onClick={handleCopyFrameURLClick}
+              className="flex flex-row items-center justify-start gap-2 px-2 py-1"
             >
-              <EllipsisHorizontalIcon width="12px" />
+              {isCopied ? (
+                <>
+                  <span className="text-[#62A77E]">
+                    <Icon name="checkmark" color="currentColor" width={16} />{' '}
+                  </span>
+                  <span>Frame link copied!</span>
+                </>
+              ) : (
+                <>
+                  <Icon name="copy" color="currentColor" width={16} /> Copy frame URL
+                </>
+              )}
             </button>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content
-              align="end"
-              className="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade rounded-xl bg-white p-2 will-change-[transform,opacity]"
-              sideOffset={5}
-            >
+            {currentWalletIsProfileOwner && (
               <button
                 type="button"
                 aria-label="remove frame"
@@ -51,10 +89,10 @@ export default function FrameListItem({ url }: { url: string }) {
               >
                 <Image alt="" src={TrashIcon as StaticImageData} width={16} /> Remove frame
               </button>
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
+            )}
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
       <Frame url={url} />
     </div>
   );

diff --git a/apps/web/src/components/ChainDropdown/index.tsx b/apps/web/src/components/ChainDropdown/index.tsx
@@ -0,0 +1,49 @@
+import { useErrors } from 'apps/web/contexts/Errors';
+import Dropdown from 'apps/web/src/components/Dropdown';
+import DropdownItem from 'apps/web/src/components/DropdownItem';
+import DropdownMenu from 'apps/web/src/components/DropdownMenu';
+import DropdownToggle from 'apps/web/src/components/DropdownToggle';
+import { useCallback } from 'react';
+import { Chain } from 'viem';
+import { useAccount, useSwitchChain } from 'wagmi';
+
+export function DropdownChainSwitcher({
+  chain,
+  currentChain,
+}: {
+  chain: Chain;
+  currentChain: Chain;
+}) {
+  const { switchChainAsync } = useSwitchChain();
+  const { logError } = useErrors();
+
+  const handleSwitchChain = useCallback(() => {
+    if (chain !== currentChain) {
+      switchChainAsync({ chainId: chain.id }).catch((error) =>
+        logError(error, 'Failed to switch chain'),
+      );
+    }
+  }, [chain, currentChain, logError, switchChainAsync]);
+  return <DropdownItem onClick={handleSwitchChain}>{chain.name}</DropdownItem>;
+}
+
+export default function ChainDropdown() {
+  const { chain: currentChain, isConnected } = useAccount();
+  const { chains } = useSwitchChain();
+
+  if (!isConnected || !currentChain) return null;
+  return (
+    <Dropdown>
+      <DropdownToggle>
+        <span className="inline-block rounded bg-blue-5 px-3 py-1 text-blue-50">
+          {currentChain.name}
+        </span>
+      </DropdownToggle>
+      <DropdownMenu>
+        {chains.map((chain) => (
+          <DropdownChainSwitcher key={chain.id} chain={chain} currentChain={currentChain} />
+        ))}
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -25,6 +25,8 @@ import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { useAccount, useSwitchChain } from 'wagmi';
+import ChainDropdown from 'apps/web/src/components/ChainDropdown';
+import { useSearchParams } from 'next/navigation';
 
 export enum ConnectWalletButtonVariants {
   BaseOrg,
@@ -46,7 +48,8 @@ export function ConnectWalletButton({
     () => switchChain({ chainId: base.id }),
     [switchChain],
   );
-  // Hydration bug
+  const searchParams = useSearchParams();
+  const showChainSwitcher = searchParams?.get('showChainSwitcher');
   const [isMounted, setIsMounted] = useState<boolean>(false);
 
   useEffect(() => {
@@ -134,13 +137,17 @@ export function ConnectWalletButton({
     <Wallet>
       <ConnectWallet
         withWalletAggregator
-        className="rounded-xl bg-transparent p-2 hover:bg-gray-40/20"
+        className="flex items-center justify-center rounded-xl bg-transparent p-2 hover:bg-gray-40/20"
       >
-        <UserAvatar />
-        <Name chain={basenameChain} className={userAddressClasses} />
+        <div className="flex items-center gap-2">
+          <UserAvatar />
+          <Name chain={basenameChain} className={userAddressClasses} />
+          {showChainSwitcher && <ChainDropdown />}
+        </div>
       </ConnectWallet>
+
       <WalletDropdown className="rounded-xl bg-white font-sans shadow-md">
-        <Identity className={classNames('px-4 pb-2 pt-3 font-display')}>
+        <Identity className="px-4 pb-2 pt-3 font-display">
           <UserAvatar />
           <Name
             onClick={copyAddress}

diff --git a/apps/web/src/components/Layout/UsernameNav/index.tsx b/apps/web/src/components/Layout/UsernameNav/index.tsx
@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
 import { base, baseSepolia } from 'viem/chains';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
-import { useCallback } from 'react';
+import { Suspense, useCallback } from 'react';
 import { isDevelopment } from 'apps/web/src/constants';
 import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
 
@@ -111,7 +111,11 @@ export default function UsernameNav() {
           <ImageAdaptive src={usernameBaseLogo as StaticImageData} alt="Base" />
         </Link>
         <span className={walletStateClasses}>
-          <ConnectWalletButton connectWalletButtonVariant={ConnectWalletButtonVariants.Basename} />
+          <Suspense>
+            <ConnectWalletButton
+              connectWalletButtonVariant={ConnectWalletButtonVariants.Basename}
+            />
+          </Suspense>
         </span>
       </nav>
     </div>

diff --git a/apps/web/src/components/base-org/shared/TopNavigation/index.tsx b/apps/web/src/components/base-org/shared/TopNavigation/index.tsx
@@ -11,6 +11,7 @@ import {
 import MenuDesktop from 'apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop';
 import MenuMobile from 'apps/web/src/components/base-org/shared/TopNavigation/MenuMobile';
 import GasPriceDropdown from 'apps/web/src/components/base-org/shared/TopNavigation/GasPriceDropdown';
+import { Suspense } from 'react';
 
 export type SubItem = {
   name: string;
@@ -113,7 +114,11 @@ export default function TopNavigation() {
 
           {/* Connect Wallet button */}
           <div className="flex items-end justify-end md:min-w-[16rem]">
-            <ConnectWalletButton connectWalletButtonVariant={ConnectWalletButtonVariants.BaseOrg} />
+            <Suspense>
+              <ConnectWalletButton
+                connectWalletButtonVariant={ConnectWalletButtonVariants.BaseOrg}
+              />
+            </Suspense>
           </div>
         </div>
       </nav>