Feat/basenames frame

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

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import basenameCover from 'apps/web/app/(basenames)/names/basename_cover.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: [basenameCover.src],
+  },
+  twitter: {
+    site: '@base',
+    card: 'summary_large_image',
+  },
+  other: {
+    ...initialFrame,
+  },
+};
+
+export default async function NameFrame() {
+  return <div>Hello Neo</div>;
+}

apps/web/app/(basenames)/names/page.tsx

@@ -1,8 +1,8 @@
+import { Suspense } from 'react';
+import type { Metadata } from 'next';
 import RegistrationProviders from 'apps/web/app/(basenames)/names/RegistrationProviders';
 import ErrorsProvider from 'apps/web/contexts/Errors';
 import RegistrationFlow from 'apps/web/src/components/Basenames/RegistrationFlow';
-import type { Metadata } from 'next';
-import { Suspense } from 'react';
 import basenameCover from './basename_cover.png';
 
 export const metadata: Metadata = {

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

@@ -0,0 +1,81 @@
+import { NextApiRequest, NextApiResponse } from 'apps/web/node_modules/next/dist/shared/lib/utils';
+import { ethers } from 'ethers';
+import {
+  normalizeEnsDomainName,
+  REGISTER_CONTRACT_ABI,
+  REGISTER_CONTRACT_ADDRESSES,
+  validateEnsDomainName,
+} from 'apps/web/src/utils/usernames';
+import { formatEthPrice, formatWeiPrice } from 'apps/web/src/utils/formatEthPrice';
+
+const url = 'https://mainnet.base.org';
+const provider = new ethers.providers.JsonRpcProvider(url);
+const baseMainnetChainId = 8453;
+const contractAddress = REGISTER_CONTRACT_ADDRESSES[baseMainnetChainId];
+const contract = new ethers.Contract(contractAddress, REGISTER_CONTRACT_ABI, provider);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { name, years } = req.query;
+
+  try {
+    const registrationPrice = await getBasenameRegistrationPrice(String(name), Number(years));
+    const registrationPriceInWei = formatWeiPrice(registrationPrice).toString();
+    const registrationPriceInEth = formatEthPrice(registrationPrice);
+    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) {
+  const normalizedName = normalizeName(name);
+  if (!normalizedName) {
+    throw new Error('Invalid ENS domain name');
+  }
+
+  try {
+    const claimPrice = await contract.registerPrice(normalizedName, secondsInYears(years));
+    return claimPrice;
+  } catch (error) {
+    console.error('Could not get claim price:', error);
+    return null;
+  }
+}
+
+// async function getDiscountedBasenameClaimPrice(
+//   name: string,
+//   years: number,
+//   discountKey: `0x${string}` | undefined,
+// ) {
+//   const normalizedName = normalizeName(name);
+//   if (!normalizedName) {
+//     throw new Error('Invalid ENS domain name');
+//   }
+
+//   try {
+//     const discountedClaimPrice = await contract.discountedRegisterPrice(
+//       normalizedName,
+//       secondsInYears(years),
+//       discountKey ?? '0x',
+//     );
+//     return discountedClaimPrice;
+//   } catch (error) {
+//     console.error('Could not get discounted claim price:', error);
+//   }
+// }
+
+function normalizeName(name: string) {
+  const normalizedName: string = normalizeEnsDomainName(name);
+  const { valid } = validateEnsDomainName(name);
+
+  if (!valid) {
+    return null;
+  }
+  return normalizedName;
+}
+
+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,45 @@
+import { NextApiRequest, NextApiResponse } from 'apps/web/node_modules/next/dist/shared/lib/utils';
+import {
+  normalizeEnsDomainName,
+  REGISTER_CONTRACT_ABI,
+  REGISTER_CONTRACT_ADDRESSES,
+  validateEnsDomainName,
+} from 'apps/web/src/utils/usernames';
+import { ethers } from 'ethers';
+
+const url = 'https://mainnet.base.org';
+const provider = new ethers.providers.JsonRpcProvider(url);
+const baseMainnetChainId = 8453;
+const contractAddress = REGISTER_CONTRACT_ADDRESSES[baseMainnetChainId];
+const contract = new ethers.Contract(contractAddress, REGISTER_CONTRACT_ABI, provider);
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { name } = req.query;
+  try {
+    const nameIsAvailable = await isNameAvailable(String(name));
+    return res.status(200).json({ nameIsAvailable });
+  } catch (error) {
+    console.error('Could not read name availability:', error);
+    return res.status(500).json({ error: 'Could not determine name availability' });
+  }
+}
+
+async function isNameAvailable(name: string): Promise<boolean> {
+  const normalizedName: string = normalizeEnsDomainName(name);
+  const { valid } = validateEnsDomainName(name);
+
+  if (!valid) {
+    throw new Error('Invalid ENS domain name');
+  }
+
+  try {
+    const available = await contract.available(normalizedName);
+    if (typeof available !== 'boolean') {
+      throw new Error('Invalid return type, expected boolean');
+    }
+    return available;
+  } catch (error) {
+    console.error('Error checking name availability:', error);
+    throw error;
+  }
+}

apps/web/pages/api/basenames/frame/confirmation.ts

@@ -0,0 +1,35 @@
+import { NextApiRequest, NextApiResponse } from 'next/dist/shared/lib/utils';
+import { FrameRequest, getFrameMessage, getFrameHtmlResponse } from '@coinbase/onchainkit/frame';
+import {
+  confirmationFrame,
+  buttonIndexToYears,
+} 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: 'Method Not Allowed' });
+  }
+
+  const body: FrameRequest = req.body;
+  const { untrustedData } = body;
+  console.log('confirmation.....', { untrustedData });
+
+  const messageState = JSON.parse(untrustedData.state);
+  const targetName = messageState.targetName;
+  const targetYears = buttonIndexToYears[untrustedData.buttonIndex];
+
+  const response = await fetch(
+    `http://localhost:3000/api/basenames/${targetName}/getBasenameRegistrationPrice?years=${targetYears}`,
+  );
+  const { registrationPriceInWei, registrationPriceInEth} = await response.json();
+
+  try {
+    return res
+      .status(200)
+      .setHeader('Content-Type', 'text/html')
+      .send(confirmationFrame(targetName, targetYears, registrationPriceInWei, registrationPriceInEth));
+  } catch (error) {
+    console.error('Failed to fetch questions:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}

apps/web/pages/api/basenames/frame/frameResponses.ts

@@ -0,0 +1,97 @@
+import { getFrameMetadata, getFrameHtmlResponse } from '@coinbase/onchainkit/frame';
+
+export const initialFrame = getFrameMetadata({
+  buttons: [
+    {
+      label: 'Claim a basename today!',
+    },
+  ],
+  image: {
+    src: `http://localhost:3000/images/basenames/contract-uri/feature-image.png`,
+  },
+  postUrl: `http://localhost:3000/api/basenames/frame/inputSearchValue`,
+});
+
+export const inputSearchValueFrame = getFrameHtmlResponse({
+  buttons: [
+    {
+      action: 'post',
+      label: 'Claim name',
+      target: `http://localhost:3000/api/basenames/frame/validateSearchInputAndSetYears`,
+    },
+  ],
+  image: {
+    src: `http://localhost:3000/images/basenames/contract-uri/cover-image.png`,
+  },
+  input: {
+    text: 'Search for a name',
+  },
+  postUrl: `http://localhost:3000/api/basenames/frame/validateSearchInputAndSetYears`,
+});
+
+export const buttonIndexToYears = {
+  1: 1,
+  2: 5,
+  3: 10,
+  4: 100,
+};
+
+export const setYearsFrame = (targetName: string) =>
+  getFrameHtmlResponse({
+    buttons: [
+      {
+        action: 'post',
+        label: '1 year',
+        target: `http://localhost:3000/api/basenames/frame/confirmation`,
+      },
+      {
+        action: 'post',
+        label: '5 years',
+        target: `http://localhost:3000/api/basenames/frame/confirmation`,
+      },
+      {
+        action: 'post',
+        label: '10 years',
+        target: `http://localhost:3000/api/basenames/frame/confirmation`,
+      },
+      {
+        action: 'post',
+        label: '100 years',
+        target: `http://localhost:3000/api/basenames/frame/confirmation`,
+      },
+    ],
+    image: {
+      src: `http://localhost:3000/api/basenames/${targetName}/assets/coverImage.png`,
+    },
+    postUrl: `http://localhost:3000/api/basenames/frame/confirmation`,
+    state: {
+      targetName,
+    },
+  });
+
+export const confirmationFrame = (
+  targetName: string,
+  targetYears: number,
+  registrationPriceInWei: string,
+  registrationPriceInEth: number,
+) =>
+  getFrameHtmlResponse({
+    buttons: [
+      {
+        action: 'tx',
+        label: `Confirm: Register ${targetName} for ${targetYears} years for ${registrationPriceInEth} ETH`,
+        target: `http://localhost:3000/api/basenames/frame/tx`,
+      },
+    ],
+    image: {
+      src: `http://localhost:3000/api/basenames/${targetName}/assets/coverImage.png`,
+    },
+    target: `http://localhost:3000/api/basenames/frame/tx`,
+    postUrl: `http://localhost:3000/api/basenames/frame/tx`,
+    state: {
+      name: targetName,
+      years: targetYears,
+      priceInWei: registrationPriceInWei,
+      priceInEth: registrationPriceInEth,
+    },
+  });

apps/web/pages/api/basenames/frame/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: 'Method Not Allowed' });
+  }
+
+  try {
+    return res.status(200).setHeader('Content-Type', 'text/html').send(inputSearchValueFrame);
+  } catch (error) {
+    console.error('Failed to fetch questions:', error);
+    return res.status(500).json({ error: 'Internal Server Error' });
+  }
+}