Merge branch 'master' into heatmap

apps/base-docs/docs/building-with-base/fees.md

@@ -42,4 +42,4 @@ same implementation as the L1; you can read more about it
 
 For additional details about fee calculation on Base, please refer to the
 [op-stack developer
-documentation](https://community.optimism.io/docs/developers/build/transaction-fees/).
+documentation](https://docs.optimism.io/stack/transactions/fees).

apps/base-docs/docs/tools/basenames-faq.md

@@ -88,7 +88,7 @@ Currently, only one address at a time can be linked to a Basename. However, we p
 
 ### 14. I am a builder. How do I integrate Basenames to my app?
 
-If you're a builder looking to integrate Basenames into your app, [OnchainKit](https://onchainkit.xyz/wallet/wallet-dropdown-base-name) is the easiest way to get started (tutorial [here](https://docs.base.org/docs/tools/basenames-tutorial)). If you have ideas for new features or badges that you'd like to integrate with Basenames, we'd love to [hear from you](https://app.deform.cc/form/b9c1c39f-f238-459e-a765-5093ca638075/?page_number=0).
+If you're a builder looking to integrate Basenames into your app, [OnchainKit](https://onchainkit.xyz/wallet/wallet-dropdown-basename) is the easiest way to get started (tutorial [here](https://docs.base.org/docs/tools/basenames-tutorial)). If you have ideas for new features or badges that you'd like to integrate with Basenames, we'd love to [hear from you](https://app.deform.cc/form/b9c1c39f-f238-459e-a765-5093ca638075/?page_number=0).
 
 ### 15. How do I get a Basename for my app or project?
 

apps/base-docs/docs/tools/oracles.md

@@ -38,7 +38,7 @@ hide_table_of_contents: true
 
 API3 is live with:
 
-- [dAPIs](https://docs.api3.org/guides/dapis/subscribing-managed-dapis/): First-party aggregated data feeds sourced directly from the data providers.
+- [dAPIs](https://docs.api3.org/guides/dapis/subscribing-to-dapis/): First-party aggregated data feeds sourced directly from the data providers.
 - [Airnode](https://docs.api3.org/guides/airnode/calling-an-airnode/): The first-party serverless Oracle solution to bring any REST API onchain.
 - [QRNG](https://docs.api3.org/guides/qrng/): Quantum Random Number Generator for verifiable quantum RNG onchain.
 

apps/web/package.json

@@ -16,7 +16,7 @@
     "@coinbase/onchainkit": "^0.28.5",
     "@datadog/browser-logs": "^5.23.3",
     "@datadog/browser-rum": "^5.23.3",
-    "@frames.js/render": "^0.3.7",
+    "@frames.js/render": "^0.3.12",
     "@guildxyz/sdk": "2.6.0",
     "@headlessui/react": "^1.7.19",
     "@heroicons/react": "^2.1.3",

apps/web/src/components/Basenames/ConfigureFramesPageContent/FrameBuilder.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-perf/jsx-no-new-function-as-prop */
 'use client';
-import { ArrowLeftIcon } from '@heroicons/react/16/solid';
 import { PlusIcon } from '@heroicons/react/24/solid';
 import * as Accordion from '@radix-ui/react-accordion';
 import { useAnalytics } from 'apps/web/contexts/Analytics';
@@ -9,6 +8,7 @@ import { useFrameContext } from 'apps/web/src/components/Basenames/UsernameProfi
 import Frame from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/Frame';
 import { SuggestionCard } from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/SuggestionCard';
 import { Button, ButtonSizes, ButtonVariants } from 'apps/web/src/components/Button/Button';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
 import Input from 'apps/web/src/components/Input';
 import { isValidUrl } from 'apps/web/src/utils/urls';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
@@ -316,7 +316,7 @@ export default function FrameBuilder() {
         }
         imgData={mintMe as StaticImageData}
         title="Mint me"
-        description="Mint your NFT on Highlight"
+        description="Mint your Base NFT on Highlight"
       >
         <p className="text-sm">To pin a frame:</p>
         <ol className="list-inside list-decimal indent-1 text-sm text-palette-foreground">
@@ -331,7 +331,7 @@ export default function FrameBuilder() {
               highlight.xyz
             </a>
           </li>
-          <li>Paste a link to the NFT you want others to mint</li>
+          <li>Paste a link to the Base NFT you want others to mint</li>
         </ol>
         <Input
           placeholder="https://"
@@ -459,7 +459,7 @@ export default function FrameBuilder() {
           href={`/name/${basename}`}
           className="mb-8 flex max-w-36 items-center justify-start gap-2 text-base font-medium hover:underline"
         >
-          <ArrowLeftIcon width="12px" /> Back to profile
+          <Icon name="backArrow" color="currentColor" height="1rem" width="1rem" /> Back to profile
         </Link>
         <h1 className="font-display text-3xl">Choose a frame to pin</h1>
         <div className="mt-4 flex flex-row justify-between gap-12">
@@ -507,7 +507,7 @@ export default function FrameBuilder() {
           href={`/name/${basename}`}
           className="mb-3 flex max-w-36 items-center justify-start gap-2 text-base hover:underline"
         >
-          <ArrowLeftIcon width="12px" /> Back to profile
+          <Icon name="backArrow" color="currentColor" height="1rem" width="1rem" /> Back to profile
         </Link>
         <h1 className="mb-4 font-display text-2xl">Choose a frame to pin</h1>
         <Accordion.Root
@@ -530,7 +530,7 @@ export default function FrameBuilder() {
             className="mb-4"
             onClick={handlePrevStep}
           >
-            <ArrowLeftIcon width="12px" /> Back
+            <Icon name="backArrow" color="currentColor" height="1rem" width="1rem" /> Back
           </Button>
           <h1 className="mb-4 font-display text-2xl">Preview your frame</h1>
           <div

apps/web/src/components/Basenames/ProfilePromo/index.tsx

@@ -1,8 +1,5 @@
 'use client';
 import classNames from 'classnames';
-
-const videoClasses = classNames('mix-blend-screen');
-
 import globe from './assets/globe.webp';
 import { Button } from 'apps/web/src/components/Button/Button';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
@@ -15,8 +12,16 @@ import { useAnalytics } from 'apps/web/contexts/Analytics';
 import { useAccount } from 'wagmi';
 import useBaseEnsName from 'apps/web/src/hooks/useBaseEnsName';
 
+const videoClasses = classNames('mix-blend-screen');
+
 export default function ProfilePromo() {
   const [shouldShowPromo, setShouldShowPromo] = useLocalStorage('shouldShowPromo', true);
+  const [hasClickedGetBasename, setHasClickedGetBasename] = useLocalStorage(
+    'hasClickedGetBasename',
+    false,
+  );
+  const [hasClosedPromo, setHasClosedPromo] = useLocalStorage('hasClosedPromo', false);
+
   // Web3 data
   const { address } = useAccount();
   const { data: basename, isLoading: basenameIsLoading } = useBaseEnsName({
@@ -25,33 +30,37 @@ export default function ProfilePromo() {
   const hasExistingBasename = address && basename && !basenameIsLoading;
 
   const { logEventWithContext } = useAnalytics();
+
   const onClose = useCallback(() => {
     logEventWithContext('profile_promo_close', ActionType.click, {
       componentType: ComponentType.button,
     });
     setShouldShowPromo(false);
-  }, [logEventWithContext, setShouldShowPromo]);
+    setHasClosedPromo(true);
+  }, [logEventWithContext, setShouldShowPromo, setHasClosedPromo]);
 
   const onCTA = useCallback(() => {
     logEventWithContext('profile_promo_cta', ActionType.click, {
       componentType: ComponentType.button,
     });
     setShouldShowPromo(false);
-  }, [logEventWithContext, setShouldShowPromo]);
+    setHasClickedGetBasename(true);
+  }, [logEventWithContext, setShouldShowPromo, setHasClickedGetBasename]);
 
   useEffect(() => {
     if (hasExistingBasename) {
       setShouldShowPromo(false);
     }
   }, [hasExistingBasename, setShouldShowPromo]);
 
-  if (!shouldShowPromo) {
+  // Don't show promo if the user has already clicked "Get a Basename" or closed it
+  if (!shouldShowPromo || hasClickedGetBasename || hasClosedPromo) {
     return null;
   }
 
   return (
     <div
-      className="absolute bottom-4 right-4 flex max-w-[18rem] flex-col items-center justify-between gap-4 rounded-[24px] p-6"
+      className="fixed bottom-4 right-4 flex max-w-[18rem] flex-col items-center justify-between gap-4 rounded-[24px] p-6"
       style={{ background: 'linear-gradient(180deg, #000 0%, #725EE5 158.87%)' }}
     >
       <button

apps/web/src/components/Basenames/UsernameProfileSectionFrames/Frame.tsx

@@ -7,12 +7,13 @@ import {
   theme,
 } from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameTheme';
 import cn from 'classnames';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 type FrameProps = {
   url: string;
   className?: string;
 };
+
 export default function Frame({ url, className }: FrameProps) {
   const { frameConfig, farcasterSignerState, anonSignerState } = useFrameContext();
   const queryClient = useQueryClient();
@@ -44,25 +45,27 @@ export default function Frame({ url, className }: FrameProps) {
     fetchFn,
   });
 
-  const openFrameWorks = useMemo(() => {
+  // Persist if openFrameWorks has ever been true for this frame
+  const [openFrameWorksPersisted, setOpenFrameWorksPersisted] = useState(false);
+
+  useEffect(() => {
     const currentFrameStackItem = openFrameState.currentFrameStackItem;
-    if (!currentFrameStackItem) return false;
-    const status = currentFrameStackItem.status;
-    if (status === 'requestError') {
-      return true;
-    }
-    if (status === 'done' && currentFrameStackItem.frameResult.frame.accepts) {
-      return currentFrameStackItem.frameResult.frame.accepts.some(
-        (element) => element.id === 'anonymous',
-      );
-    } else {
-      return false;
+    if (!openFrameWorksPersisted && currentFrameStackItem) {
+      const status = currentFrameStackItem.status;
+      if (status === 'done' && currentFrameStackItem.frameResult.frame.accepts) {
+        const acceptsAnonymous = currentFrameStackItem.frameResult.frame.accepts.some(
+          (element) => element.id === 'anonymous',
+        );
+        if (acceptsAnonymous) {
+          setOpenFrameWorksPersisted(true);
+        }
+      }
     }
-  }, [openFrameState]);
+  }, [openFrameState, openFrameWorksPersisted]);
 
   const frameState = useMemo(
-    () => (openFrameWorks ? openFrameState : farcasterFrameState),
-    [farcasterFrameState, openFrameState, openFrameWorks],
+    () => (openFrameWorksPersisted ? openFrameState : farcasterFrameState),
+    [farcasterFrameState, openFrameState, openFrameWorksPersisted],
   );
 
   const aggregatedTheme = useMemo(

apps/web/src/components/Basenames/UsernameProfileSectionFrames/index.tsx

@@ -8,7 +8,6 @@ import {
 } from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/Context';
 import FarcasterAccountModal from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/FarcasterAccountModal';
 import FrameListItem from 'apps/web/src/components/Basenames/UsernameProfileSectionFrames/FrameListItem';
-import UsernameProfileSectionTitle from 'apps/web/src/components/Basenames/UsernameProfileSectionTitle';
 import { Button, ButtonSizes } from 'apps/web/src/components/Button/Button';
 import ImageAdaptive from 'apps/web/src/components/ImageAdaptive';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
@@ -69,8 +68,7 @@ function SectionContent() {
   }
   return (
     <section>
-      <div className="flex flex-row justify-between">
-        <UsernameProfileSectionTitle title="Frames" />
+      <div className="flex flex-row-reverse justify-between">
         {currentWalletIsProfileOwner && (
           <Link
             onClick={handleAddFrameLinkClick}

yarn.lock

@@ -357,7 +357,7 @@ __metadata:
     "@coinbase/onchainkit": ^0.28.5
     "@datadog/browser-logs": ^5.23.3
     "@datadog/browser-rum": ^5.23.3
-    "@frames.js/render": ^0.3.7
+    "@frames.js/render": ^0.3.12
     "@guildxyz/sdk": 2.6.0
     "@headlessui/react": ^1.7.19
     "@heroicons/react": ^2.1.3
@@ -3696,13 +3696,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@frames.js/render@npm:^0.3.7":
-  version: 0.3.7
-  resolution: "@frames.js/render@npm:0.3.7"
+"@frames.js/render@npm:^0.3.12":
+  version: 0.3.12
+  resolution: "@frames.js/render@npm:0.3.12"
   dependencies:
     "@farcaster/core": ^0.14.7
     "@noble/ed25519": ^2.0.0
-    frames.js: ^0.19.1
+    frames.js: ^0.19.3
   peerDependencies:
     "@lens-protocol/client": 2.0.0
     "@rainbow-me/rainbowkit": ^2.1.2
@@ -3715,7 +3715,7 @@ __metadata:
     react-native: ^0.74.3
     viem: ^2.7.8
     wagmi: ^2.9.10
-  checksum: 1391c86861b5d8c637f6c3fdea265ad0f81a0a8b7bed57180e90e998302a709131efe4488a7a1dc3dae84ef128c1a4db94dd9599ba795cb9b8ef5e3f8595d670
+  checksum: e8600f67eeb2527f8052f044abbaa8e58124cda72011a5998910a350ba6a6dd3d803974f6e11bd5b0439935f5be3dd29f862700d68970f068060f9fb57ab3d92
   languageName: node
   linkType: hard
 
@@ -8882,6 +8882,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vercel/og@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "@vercel/og@npm:0.6.3"
+  dependencies:
+    "@resvg/resvg-wasm": 2.4.0
+    satori: 0.10.9
+    yoga-wasm-web: 0.3.3
+  checksum: bae2fa64533faf7ae25fabecca30ed1c213d3856aa823777997ea29155237bb7cdd18af1b9add31c7959ec69cd996287ad0c58ef9b221a05e16f2c38c64be0b5
+  languageName: node
+  linkType: hard
+
 "@vercel/postgres-kysely@npm:^0.8.0":
   version: 0.8.0
   resolution: "@vercel/postgres-kysely@npm:0.8.0"
@@ -15224,11 +15235,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"frames.js@npm:^0.19.1":
-  version: 0.19.1
-  resolution: "frames.js@npm:0.19.1"
+"frames.js@npm:^0.19.3":
+  version: 0.19.3
+  resolution: "frames.js@npm:0.19.3"
   dependencies:
-    "@vercel/og": ^0.6.2
+    "@vercel/og": ^0.6.3
     cheerio: ^1.0.0-rc.12
     protobufjs: ^7.2.6
     viem: ^2.7.8
@@ -15240,7 +15251,7 @@ __metadata:
     next: ^14.1.0
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 56e9735c3005a2ade000f43790a3446f98e71b827bd95be80e609eb1ae7e9fa7eaf778676fdabd882420ace1230cfec7174318fea6a5d7858b9cd044074c04aa
+  checksum: 28d6465e12e658b28768bfa8860b155eee443ac3cf0f8d32a4701dd92e2bb182dbc83f2e8d4a378fe75b35903bda34c4fe16f3351438845c05b5fd272f481052
   languageName: node
   linkType: hard