Feat/basenames frame

apps/web/app/(base-org)/frames/names/page.tsx

@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import Image from 'apps/web/node_modules/next/image';
+import Link from 'apps/web/node_modules/next/link';
+import initialFrameImage from 'apps/web/pages/api/basenames/frame/assets/initial-image.png';
+import { initialFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://base.org'),
+  title: `Basenames | Frame`,
+  description:
+    'Basenames are a core onchain building block that enables anyone to establish their identity on Base by registering human-readable names for their address(es). They are a fully onchain solution which leverages ENS infrastructure deployed on Base.',
+  openGraph: {
+    title: `Basenames | Frame`,
+    url: `/frames/names`,
+    images: [initialFrameImage.src],
+  },
+  twitter: {
+    site: '@base',
+    card: 'summary_large_image',
+  },
+  other: {
+    ...(initialFrame as Record<string, string>),
+  },
+};
+
+export default async function NameFrame() {
+  return (
+    <div className="mt-[-96px] flex w-full flex-col items-center bg-black pb-[96px]">
+      <div className="flex h-screen w-full max-w-[1440px] flex-col items-center justify-center gap-12 px-8 py-8 pt-28">
+        <div className="relative flex aspect-[993/516] h-auto w-full max-w-[1024px] flex-col items-center">
+          <Link href="/names">
+            <Image src={initialFrameImage.src} alt="Claim a basename today" fill />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/pages/api/basenames/[name]/getBasenameRegistrationPrice.ts

@@ -0,0 +1,57 @@
+import { NextApiRequest, NextApiResponse } from 'apps/web/node_modules/next/dist/shared/lib/utils';
+import { createPublicClient, http } from 'viem';
+import { base } from 'viem/chains';
+import {
+  REGISTER_CONTRACT_ABI,
+  REGISTER_CONTRACT_ADDRESSES,
+  normalizeName,
+} from 'apps/web/src/utils/usernames';
+import { weiToEth } from 'apps/web/src/utils/weiToEth';
+import { formatWei } from 'apps/web/src/utils/formatWei';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { name, years } = req.query;
+
+  try {
+    const registrationPrice = await getBasenameRegistrationPrice(String(name), Number(years));
+    if (!registrationPrice) {
+      throw new Error('Could not get registration price.');
+    }
+
+    const registrationPriceInWei = formatWei(registrationPrice).toString();
+    const registrationPriceInEth = weiToEth(registrationPrice).toString();
+    return res.status(200).json({ registrationPriceInWei, registrationPriceInEth });
+  } catch (error) {
+    console.error('Could not get registration price: ', error);
+    return res.status(500).json(error);
+  }
+}
+
+async function getBasenameRegistrationPrice(name: string, years: number): Promise<bigint | null> {
+  const client = createPublicClient({
+    chain: base,
+    transport: http(),
+  });
+  try {
+    const normalizedName = normalizeName(name);
+    if (!normalizedName) {
+      throw new Error('Invalid ENS domain name');
+    }
+
+    const price = await client.readContract({
+      address: REGISTER_CONTRACT_ADDRESSES[base.id],
+      abi: REGISTER_CONTRACT_ABI,
+      functionName: 'registerPrice',
+      args: [normalizedName, secondsInYears(years)],
+    });
+    return price;
+  } catch (error) {
+    console.error('Could not get claim price:', error);
+    return null;
+  }
+}
+
+function secondsInYears(years: number) {
+  const secondsPerYear = 365.25 * 24 * 60 * 60; // .25 accounting for leap years
+  return BigInt(Math.round(years * secondsPerYear));
+}

apps/web/pages/api/basenames/[name]/isNameAvailable.ts

@@ -0,0 +1,21 @@
+import { NextApiRequest, NextApiResponse } from 'apps/web/node_modules/next/dist/shared/lib/utils';
+import { base } from 'viem/chains';
+import { getBasenameAvailable } from 'apps/web/src/utils/usernames';
+
+export type IsNameAvailableResponse = {
+  nameIsAvailable: boolean;
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { name } = req.query;
+  try {
+    const isNameAvailableResponse = await getBasenameAvailable(String(name), base);
+    const responseData: IsNameAvailableResponse = {
+      nameIsAvailable: isNameAvailableResponse,
+    };
+    return res.status(200).json(responseData);
+  } catch (error) {
+    console.error('Could not read name availability:', error);
+    return res.status(500).json({ error: 'Could not determine name availability' });
+  }
+}

apps/web/pages/api/basenames/frame/01_inputSearchValue.ts

@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from 'next/dist/shared/lib/utils';
+import { inputSearchValueFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: `Search Screen — Method (${req.method}) Not Allowed` });
+  }
+
+  try {
+    return res.status(200).setHeader('Content-Type', 'text/html').send(inputSearchValueFrame);
+  } catch (error) {
+    console.error('Could not process request:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}

apps/web/pages/api/basenames/frame/02_validateSearchInputAndSetYears.ts

@@ -0,0 +1,49 @@
+import { NextApiRequest, NextApiResponse } from 'next/dist/shared/lib/utils';
+import { FrameRequest } from '@coinbase/onchainkit/frame';
+import { formatDefaultUsername, validateEnsDomainName } from 'apps/web/src/utils/usernames';
+import type { IsNameAvailableResponse } from 'apps/web/pages/api/basenames/[name]/isNameAvailable';
+import {
+  retryInputSearchValueFrame,
+  setYearsFrame,
+} from 'apps/web/pages/api/basenames/frame/frameResponses';
+import { DOMAIN } from 'apps/web/pages/api/basenames/frame/constants';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: `Set Years Screen — Method (${req.method}) Not Allowed` });
+  }
+
+  try {
+    const body = req.body as FrameRequest;
+    const { untrustedData } = body;
+    const targetName: string = encodeURIComponent(untrustedData.inputText);
+
+    const { valid, message } = validateEnsDomainName(targetName);
+    if (!valid) {
+      return res
+        .status(200)
+        .setHeader('Content-Type', 'text/html')
+        .send(retryInputSearchValueFrame(message));
+    }
+
+    const isNameAvailableResponse = await fetch(
+      `${DOMAIN}/api/basenames/${targetName}/isNameAvailable`,
+    );
+    const isNameAvailableResponseData = await isNameAvailableResponse.json();
+    const { nameIsAvailable } = isNameAvailableResponseData as IsNameAvailableResponse;
+    if (!nameIsAvailable) {
+      return res
+        .status(200)
+        .setHeader('Content-Type', 'text/html')
+        .send(retryInputSearchValueFrame('Name unavailable'));
+    }
+
+    const formattedTargetName = await formatDefaultUsername(targetName);
+    return res
+      .status(200)
+      .setHeader('Content-Type', 'text/html')
+      .send(setYearsFrame(targetName, formattedTargetName));
+  } catch (error) {
+    return res.status(500).json({ error }); // TODO: figure out error state for the frame BAPP-452
+  }
+}

apps/web/pages/api/basenames/frame/03_getPriceAndConfirm.ts

@@ -0,0 +1,64 @@
+import { NextApiRequest, NextApiResponse } from 'next/dist/shared/lib/utils';
+import { FrameRequest } from '@coinbase/onchainkit/frame';
+import {
+  confirmationFrame,
+  buttonIndexToYears,
+} from 'apps/web/pages/api/basenames/frame/frameResponses';
+import { DOMAIN } from 'apps/web/pages/api/basenames/frame/constants';
+
+type ButtonIndex = 1 | 2 | 3 | 4;
+const validButtonIndexes: readonly ButtonIndex[] = [1, 2, 3, 4] as const;
+
+type GetBasenameRegistrationPriceResponseType = {
+  registrationPriceInWei: string;
+  registrationPriceInEth: string;
+};
+
+type ConfirmationFrameStateType = {
+  targetName: string;
+  formattedTargetName: string;
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: `Confirm Screen — Method (${req.method}) Not Allowed` });
+  }
+
+  const body = req.body as FrameRequest;
+  const { untrustedData } = body;
+  const messageState = JSON.parse(
+    decodeURIComponent(untrustedData.state),
+  ) as ConfirmationFrameStateType;
+  const targetName = encodeURIComponent(messageState.targetName);
+  const formattedTargetName = messageState.formattedTargetName;
+
+  const buttonIndex = untrustedData.buttonIndex as ButtonIndex;
+  if (!validButtonIndexes.includes(buttonIndex)) {
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+  const targetYears = buttonIndexToYears[buttonIndex];
+
+  const getRegistrationPriceResponse = await fetch(
+    `${DOMAIN}/api/basenames/${targetName}/getBasenameRegistrationPrice?years=${targetYears}`,
+  );
+  const getRegistrationPriceResponseData = await getRegistrationPriceResponse.json();
+  const { registrationPriceInWei, registrationPriceInEth } =
+    getRegistrationPriceResponseData as GetBasenameRegistrationPriceResponseType;
+
+  try {
+    return res
+      .status(200)
+      .setHeader('Content-Type', 'text/html')
+      .send(
+        confirmationFrame(
+          targetName,
+          formattedTargetName,
+          targetYears,
+          registrationPriceInWei,
+          registrationPriceInEth,
+        ),
+      );
+  } catch (error) {
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}

apps/web/pages/api/basenames/frame/04_txSuccess.ts

@@ -0,0 +1,45 @@
+import { NextApiRequest, NextApiResponse } from 'next/dist/shared/lib/utils';
+import { FrameRequest, getFrameMessage } from '@coinbase/onchainkit/frame';
+import { txSuccessFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
+import { NEYNAR_API_KEY } from 'apps/web/pages/api/basenames/frame/constants';
+import type { TxFrameStateType } from 'apps/web/pages/api/basenames/frame/tx';
+
+if (!NEYNAR_API_KEY) {
+  throw new Error('missing NEYNAR_API_KEY');
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: `TxSuccess Screen — Method (${req.method}) Not Allowed` });
+  }
+
+  const body = req.body as FrameRequest;
+  let message;
+  let isValid;
+  let name;
+
+  try {
+    const result = await getFrameMessage(body, {
+      neynarApiKey: NEYNAR_API_KEY,
+    });
+    isValid = result.isValid;
+    message = result.message;
+    if (!isValid) {
+      throw new Error('Message is not valid');
+    }
+    if (!message) {
+      throw new Error('No message received');
+    }
+
+    const messageState = JSON.parse(
+      decodeURIComponent(message.state?.serialized),
+    ) as TxFrameStateType;
+    if (!messageState) {
+      throw new Error('No message state received');
+    }
+    name = messageState.targetName;
+    return res.status(200).setHeader('Content-Type', 'text/html').send(txSuccessFrame(name));
+  } catch (e) {
+    return res.status(500).json({ error: e });
+  }
+}