Add USDC claim modal for eligible addresses (#1559)

* Add USDC claim modal for eligible addresses

* Clean up

apps/web/next.config.js

@@ -118,6 +118,7 @@ const contentSecurityPolicy = {
     'https://sdk-api.neynar.com/', // Neymar API
     'https://unpkg.com/@lottiefiles/[email protected]/dist/dotlottie-player.wasm', // lottie player
     `https://${process.env.NEXT_PUBLIC_PINATA_GATEWAY_URL}`,
+    'https://usdc-claim-git-master-coinbase-vercel.vercel.app',
   ],
   'frame-src': ['https://p.datadoghq.com'],
   'frame-ancestors': ["'self'", baseXYZDomains],

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

@@ -337,8 +337,7 @@ export default function RegistrationForm() {
           </div>
           {code && (
             <div className="relative z-10 -mt-8 rounded-2xl bg-gradient-to-r from-indigo-40 to-orange-30 px-4 py-4 pt-12 text-center text-lg text-white">
-              Claim your <strong>free creator basename</strong> &mdash; See you{' '}
-              <strong>Friday at Botanica</strong>
+              Claim your <strong>free basename</strong> &mdash; Thanks for joining us!
             </div>
           )}
 

apps/web/src/components/Basenames/RegistrationSuccessMessage/USDCClaimModal.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
+
+type USDCClaimModalProps = {
+  message: string;
+  onClose: () => void;
+};
+
+function handleButtonClick() {
+  window.open('https://www.coinbase.com/usdc', '_blank', 'noopener noreferrer');
+}
+
+function USDCClaimModal({ message, onClose }: USDCClaimModalProps) {
+  const popupClasses = classNames(
+    'fixed top-0 left-0 w-full h-full flex items-center justify-center',
+  );
+
+  return (
+    <div className={popupClasses}>
+      <div className="relative w-11/12 max-w-lg rounded-lg bg-white p-8 opacity-95 shadow-lg sm:w-3/4 md:w-2/3 lg:w-1/2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="text-gray-600 hover:text-gray-800 absolute right-2 top-0"
+        >
+          &times;
+        </button>
+        <p className="text-center text-lg font-bold">{message}</p>
+        <Button
+          variant={ButtonVariants.SecondaryDarkBounce}
+          rounded
+          className="mx-auto mt-4 block"
+          onClick={handleButtonClick}
+        >
+          Learn more
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default USDCClaimModal;

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

@@ -5,13 +5,40 @@ import {
 } from 'apps/web/src/components/Basenames/RegistrationContext';
 import { Button, ButtonVariants } from 'apps/web/src/components/Button/Button';
 import { ActionType } from 'libs/base-ui/utils/logEvent';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
+import { useAccount } from 'wagmi';
+import USDCClaimModal from './USDCClaimModal';
 
 export default function RegistrationSuccessMessage() {
-  const { setRegistrationStep, redirectToProfile } = useRegistration();
+  const { setRegistrationStep, redirectToProfile, code } = useRegistration();
+
+  const { address } = useAccount();
 
   const { logEventWithContext } = useAnalytics();
 
+  const [popupMessage, setPopupMessage] = useState<string | null>(null);
+
+  const claimUSDC = useCallback(() => {
+    setPopupMessage('USDC is being sent to your wallet');
+    fetch(`${process.env.NEXT_PUBLIC_USDC_URL}?address=${address}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          const resp = (await response.json()) as { error: string };
+          throw new Error(resp.error);
+        }
+        setPopupMessage('USDC claimed successfully!');
+      })
+      .catch((error) => {
+        setPopupMessage(`${error.message}`);
+        console.error('Error:', error);
+      });
+  }, [address]);
+
+  const closePopup = useCallback(() => setPopupMessage(null), []);
+
   const customizeProfileOnClick = useCallback(() => {
     logEventWithContext('customize_profile', ActionType.click);
     setRegistrationStep(RegistrationSteps.Profile);
@@ -23,19 +50,28 @@ export default function RegistrationSuccessMessage() {
   }, [logEventWithContext, redirectToProfile]);
 
   return (
-    <div className="items-left mx-auto flex w-full max-w-[65rem] flex-col justify-between gap-6 rounded-3xl border border-[#266EFF] bg-blue-600 p-10 shadow-xl transition-all duration-500 md:flex-row md:items-center">
-      <h1 className="text-center text-3xl font-bold tracking-wider text-white md:text-left">
-        Congrats!
-        <br className="md:hidden" /> This name is yours!
-      </h1>
-      <div className="flex flex-col gap-4 md:flex-row">
-        <Button rounded fullWidth onClick={customizeProfileOnClick}>
-          Customize Profile
-        </Button>
-        <Button rounded fullWidth variant={ButtonVariants.Secondary} onClick={goToProfileOnClick}>
-          Go to Profile
-        </Button>
+    <>
+      {popupMessage && <USDCClaimModal message={popupMessage} onClose={closePopup} />}
+      <div className="items-left mx-auto flex w-full max-w-[65rem] flex-col justify-between gap-6 rounded-3xl border border-[#266EFF] bg-blue-600 p-10 shadow-xl transition-all duration-500 md:flex-row md:items-center">
+        <h1 className="text-center text-3xl font-bold tracking-wider text-white md:text-left">
+          Congrats!
+          <br className="md:hidden" /> This name is yours!
+        </h1>
+        <div className="flex flex-col gap-4 md:flex-row">
+          {code ? (
+            <Button rounded fullWidth onClick={claimUSDC}>
+              Claim USDC
+            </Button>
+          ) : (
+            <Button rounded fullWidth onClick={customizeProfileOnClick}>
+              Customize Profile
+            </Button>
+          )}
+          <Button rounded fullWidth variant={ButtonVariants.Secondary} onClick={goToProfileOnClick}>
+            Go to Profile
+          </Button>
+        </div>
       </div>
-    </div>
+    </>
   );
 }