Feat: Developers

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

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next';
+import AnalyticsProvider from 'apps/web/contexts/Analytics';
+import Container from 'apps/web/src/components/base-org/Container';
+import { Hero } from 'apps/web/src/components/Developers/Hero';
+import { UseCases } from 'apps/web/src/components/Developers/UseCases';
+import { Customers } from 'apps/web/src/components/Developers/Customers';
+import { Testimonials } from 'apps/web/src/components/Developers/Testimonials';
+import { Tools } from 'apps/web/src/components/Developers/Tools';
+import { WhyBase } from 'apps/web/src/components/Developers/WhyBase';
+import { BottomCta } from 'apps/web/src/components/Developers/BottomCta';
+import { LiveDemo } from 'apps/web/src/components/Developers/LiveDemo';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://base.org'),
+  title: `Base | Developers`,
+  openGraph: {
+    title: `Base | Developers`,
+    url: `/developers`,
+  },
+};
+
+export default async function Developers() {
+  return (
+    <AnalyticsProvider context="developers">
+      <Container>
+        <main className="mb-32 flex min-h-screen w-full flex-col items-center bg-black">
+          <Hero />
+          <UseCases />
+          <Customers />
+          <Testimonials />
+          <Tools />
+          <WhyBase />
+          <LiveDemo />
+          <BottomCta />
+        </main>
+      </Container>
+    </AnalyticsProvider>
+  );
+}

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

@@ -1,6 +1,5 @@
 import ErrorsProvider from 'apps/web/contexts/Errors';
 import type { Metadata } from 'next';
-import { initialFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
 import NamesList from 'apps/web/src/components/Basenames/ManageNames/NamesList';
 
 export const metadata: Metadata = {
@@ -16,9 +15,6 @@ export const metadata: Metadata = {
     site: '@base',
     card: 'summary_large_image',
   },
-  other: {
-    ...(initialFrame as Record<string, string>),
-  },
 };
 
 export default async function Page() {

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

@@ -6,7 +6,6 @@ import RegistrationFlow from 'apps/web/src/components/Basenames/RegistrationFlow
 import RegistrationValueProp from 'apps/web/src/components/Basenames/RegistrationValueProp';
 import type { Metadata } from 'next';
 import basenameCover from './basename_cover.png';
-import { initialFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://base.org'),
@@ -22,9 +21,6 @@ export const metadata: Metadata = {
     site: '@base',
     card: 'summary_large_image',
   },
-  other: {
-    ...(initialFrame as Record<string, string>),
-  },
 };
 
 type PageProps = { searchParams?: { code?: string } };

apps/web/app/CryptoProviders.tsx

@@ -68,6 +68,7 @@ export default function CryptoProviders({ children }: CryptoProvidersProps) {
         <OnchainKitProvider
           chain={isDevelopment ? baseSepolia : base}
           apiKey={process.env.NEXT_PUBLIC_ONCHAINKIT_API_KEY}
+          projectId={process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_ID}
           config={onchainKitConfig}
         >
           <RainbowKitProvider modalSize="compact">{children}</RainbowKitProvider>

apps/web/next.config.js

@@ -281,6 +281,11 @@ module.exports = extendBaseConfig(
           destination: '/build',
           permanent: true,
         },
+        {
+          source: '/build',
+          destination: '/resources',
+          permanent: true,
+        },
         {
           source: '/onchainfont',
           // just so the build doesn't fail in CI

apps/web/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@coinbase/cookie-banner": "^1.0.3",
     "@coinbase/cookie-manager": "^1.1.1",
-    "@coinbase/onchainkit": "^0.35.2",
+    "@coinbase/onchainkit": "^0.36.0",
     "@datadog/browser-logs": "^5.23.3",
     "@datadog/browser-rum": "^5.23.3",
     "@frames.js/render": "^0.3.14",
@@ -24,6 +24,7 @@
     "@heroicons/react": "^2.1.3",
     "@lottiefiles/dotlottie-react": "^0.8.10",
     "@monogrid/gainmap-js": "^3.0.6",
+    "@number-flow/react": "^0.5.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-popover": "^1.1.1",
@@ -73,14 +74,16 @@
     "recharts": "^2.12.7",
     "satori": "^0.10.14",
     "sharp": "^0.33.4",
+    "shiki": "^2.1.0",
+    "tailwindcss-animate": "^1.0.7",
     "three": "^0.168.0",
     "three-stdlib": "^2.33.0",
     "twemoji": "^14.0.2",
     "typed.js": "^2.1.0",
     "usehooks-ts": "^3.1.0",
     "uuid": "^10.0.0",
     "viem": "2.x",
-    "wagmi": "^2.11.3"
+    "wagmi": "^2.14.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",

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

@@ -8,7 +8,7 @@ import {
 import { weiToEth } from 'apps/web/src/utils/weiToEth';
 import { formatWei } from 'apps/web/src/utils/formatWei';
 import { logger } from 'apps/web/src/utils/logger';
-import { CHAIN } from 'apps/web/pages/api/basenames/frame/constants';
+import { base } from 'viem/chains';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { name, years } = req.query;
@@ -30,7 +30,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
 async function getBasenameRegistrationPrice(name: string, years: number): Promise<bigint | null> {
   const client = createPublicClient({
-    chain: CHAIN,
+    chain: base,
     transport: http(),
   });
   try {
@@ -40,7 +40,7 @@ async function getBasenameRegistrationPrice(name: string, years: number): Promis
     }
 
     const price = await client.readContract({
-      address: REGISTER_CONTRACT_ADDRESSES[CHAIN.id],
+      address: REGISTER_CONTRACT_ADDRESSES[base.id],
       abi: REGISTER_CONTRACT_ABI,
       functionName: 'registerPrice',
       args: [normalizedName, secondsInYears(years)],

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

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'apps/web/node_modules/next/dist/shared/lib/utils';
 import { getBasenameAvailable } from 'apps/web/src/utils/usernames';
-import { CHAIN } from 'apps/web/pages/api/basenames/frame/constants';
+import { base } from 'viem/chains';
 
 export type IsNameAvailableResponse = {
   nameIsAvailable: boolean;
@@ -9,7 +9,7 @@ export type IsNameAvailableResponse = {
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { name } = req.query;
   try {
-    const isNameAvailableResponse = await getBasenameAvailable(String(name), CHAIN);
+    const isNameAvailableResponse = await getBasenameAvailable(String(name), base);
     const responseData: IsNameAvailableResponse = {
       nameIsAvailable: isNameAvailableResponse,
     };