({
+ logEventWithContext: function () {
+ return undefined;
+ },
+ fullContext: '',
+});
+
+export function useAnalytics() {
+ const context = useContext(AnalyticsContext);
+ if (context === undefined) {
+ throw new Error('useAnalytics must be used within a AnalyticsProvider');
+ }
+ return context;
+}
+
+type AnalyticsProviderProps = {
+ children?: ReactNode;
+ context: string; // TODO: This could be an enum in CCAEventData
+};
+
+export default function AnalyticsProvider({ children, context }: AnalyticsProviderProps) {
+ const { fullContext: previousContext } = useAnalytics();
+
+ const fullContext = [previousContext, context].filter((c) => !!c).join('_');
+ const logEventWithContext = useCallback(
+ (eventName: string, action: ActionType, eventData?: CCAEventData) => {
+ const sanitizedEventName = eventName.toLocaleLowerCase();
+ logEvent(
+ sanitizedEventName, // TODO: Do we want context here?
+ {
+ action: action,
+ context: fullContext,
+ page_path: window.location.pathname,
+ ...eventData,
+ },
+ AnalyticsEventImportance.high,
+ );
+ },
+ [fullContext],
+ );
+
+ const values = useMemo(() => {
+ return { logEventWithContext, context, fullContext };
+ }, [context, fullContext, logEventWithContext]);
+
+ return {children};
+}
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 4f11a03..fd36f94 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,5 +1,6 @@
///
///
+///
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index bed6b11..7625c93 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -76,6 +76,8 @@ const contentSecurityPolicy = {
],
'connect-src': [
"'self'",
+ 'https://blob.vercel-storage.com', // Vercel File storage
+ 'https://zku9gdedgba48lmr.public.blob.vercel-storage.com', // Vercel File storage
walletconnectDomains,
sprigDomains,
greenhouseDomains,
@@ -84,9 +86,14 @@ const contentSecurityPolicy = {
'wss://www.walletlink.org/rpc', // coinbase wallet connection
'https://analytics-service-dev.cbhq.net',
'mainnet.base.org',
+ 'sepolia.base.org',
'https://cloudflare-eth.com',
'https://i.seadn.io/', // ens avatars
'https://api.opensea.io', // enables getting ENS avatars
+ 'https://ipfs.io', // ipfs ens avatar resolution
+ 'wss://www.walletlink.org',
+ 'https://base.easscan.org/graphql',
+ 'https://api.guild.xyz/',
isLocalDevelopment ? 'ws://localhost:3000/' : '',
isLocalDevelopment ? 'http://localhost:3000/' : '',
'https://flag.lab.amplitude.com/sdk/v2/flags',
@@ -96,9 +103,13 @@ const contentSecurityPolicy = {
'form-action': ["'self'", baseXYZDomains],
'img-src': [
"'self'",
+ 'blob:',
+ 'https://blob.vercel-storage.com', // Vercel File storage
+ 'https://zku9gdedgba48lmr.public.blob.vercel-storage.com', // Vercel File storage
'data:',
'https://*.walletconnect.com/', // WalletConnect
'https://i.seadn.io/', // ens avatars
+ 'https://ipfs.io', // ipfs ens avatar resolution
],
};
@@ -154,6 +165,24 @@ module.exports = extendBaseConfig(
protocol: 'https',
hostname: 'i.seadn.io',
},
+ {
+ protocol: 'https',
+ hostname: 'ipfs.io',
+ },
+ {
+ protocol: 'https',
+ hostname: 'cf-ipfs.com',
+ },
+ {
+ protocol: 'https',
+ hostname: 'blob.vercel-storage.com',
+ port: '',
+ },
+ {
+ protocol: 'https',
+ hostname: 'zku9gdedgba48lmr.public.blob.vercel-storage.com',
+ port: '',
+ },
],
},
async headers() {
diff --git a/apps/web/package.json b/apps/web/package.json
index fd13eb8..2e16e90 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -13,17 +13,29 @@
"dependencies": {
"@coinbase/cookie-banner": "^1.0.3",
"@coinbase/cookie-manager": "^1.1.1",
- "@coinbase/onchainkit": "^0.6.0",
- "@heroicons/react": "^2.0.18",
+ "@coinbase/onchainkit": "^0.26.3",
+ "@guildxyz/sdk": "2.6.0",
+ "@headlessui/react": "^1.7.19",
+ "@heroicons/react": "^2.1.3",
+ "@next/font": "^13.1.5",
+ "@radix-ui/react-tooltip": "^1.1.2",
"@rainbow-me/rainbowkit": "^2.1.3",
- "@tanstack/react-query": "^5.29.2",
+ "@tanstack/react-query": "^5.51.11",
+ "@types/jsonwebtoken": "^9.0.6",
+ "@vercel/blob": "^0.23.4",
"@vercel/kv": "^1.0.1",
+ "@vercel/og": "^0.6.2",
"@vercel/postgres-kysely": "^0.8.0",
"base-ui": "0.1.1",
+ "classnames": "^2.5.1",
"ethers": "5.7.2",
"framer-motion": "^8.5.5",
+ "jose": "^5.4.1",
+ "jsonwebtoken": "^9.0.2",
"kysely": "^0.27.3",
- "next": "^13.2.0",
+ "next": "^13.5.6",
+ "node-fetch": "^3.3.0",
+ "permissionless": "^0.1.41",
"pg": "^8.12.0",
"react": "^18.2.0",
"react-blockies": "^1.4.1",
@@ -31,21 +43,24 @@
"react-dom": "^18.2.0",
"react-intersection-observer": "^9.10.2",
"react-intl": "^6.2.1",
+ "satori": "^0.10.14",
"sharp": "^0.33.4",
+ "twemoji": "^14.0.2",
"usehooks-ts": "^3.1.0",
"uuidv4": "^6.2.13",
"viem": "2.x",
- "wagmi": "^2.5.20"
+ "wagmi": "^2.11.3"
},
"devDependencies": {
"@types/node": "18.11.18",
"@types/pg": "^8.11.6",
+ "@types/react": "^18",
"@types/react-copy-to-clipboard": "^5.0.7",
+ "@types/react-dom": "^18",
"autoprefixer": "^10.4.13",
"csv-parser": "^3.0.0",
"dotenv": "^16.0.3",
"eslint-config-next": "^13.1.6",
- "node-fetch": "^3.3.0",
"postcss": "^8.4.21",
"prettier-plugin-tailwindcss": "^0.2.5",
"tailwindcss": "^3.2.4",
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index d808bc9..37a60c9 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,3 +1,4 @@
+import '@coinbase/onchainkit/styles.css';
import './global.css';
import {
@@ -6,6 +7,8 @@ import {
TrackingCategory,
TrackingPreference,
} from '@coinbase/cookie-manager';
+import { OnchainKitProvider } from '@coinbase/onchainkit';
+import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
import { connectorsForWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';
import {
@@ -16,14 +19,16 @@ import {
walletConnectWallet,
} from '@rainbow-me/rainbowkit/wallets';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { UserAvatar } from 'apps/web/src/components/ConnectWalletButton/UserAvatar';
import useSprig from 'base-ui/hooks/useSprig';
import { MotionConfig } from 'framer-motion';
+import { NextPage } from 'next';
import { AppProps } from 'next/app';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
import { createConfig, http, WagmiProvider } from 'wagmi';
import { base, baseSepolia, mainnet, sepolia } from 'wagmi/chains';
import ClientAnalyticsScript from '../src/components/ClientAnalyticsScript/ClientAnalyticsScript';
-import { Layout } from '../src/components/Layout/Layout';
+import { Layout, NavigationType } from '../src/components/Layout/Layout';
import { cookieManagerConfig } from '../src/utils/cookieManagerConfig';
import ExperimentsProvider from 'base-ui/contexts/Experiments';
@@ -57,11 +62,18 @@ const config = createConfig({
},
ssr: true,
});
-
const queryClient = new QueryClient();
const sprigEnvironmentId = process.env.NEXT_PUBLIC_SPRIG_ENVIRONMENT_ID;
-export default function StaticApp({ Component, pageProps }: AppProps) {
+export type NextPageWithLayout = NextPage & {
+ getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+ Component: NextPageWithLayout;
+};
+
+export default function StaticApp({ Component, pageProps }: AppPropsWithLayout) {
// Cookie Manager Provider Configuration
const [isMounted, setIsMounted] = useState(false);
const trackingPreference = useRef();
@@ -99,6 +111,10 @@ export default function StaticApp({ Component, pageProps }: AppProps) {
useSprig(sprigEnvironmentId);
+ const getLayout =
+ Component.getLayout ??
+ ((page) => {page});
+
if (!isMounted) return null;
return (
@@ -115,13 +131,18 @@ export default function StaticApp({ Component, pageProps }: AppProps) {
-
-
-
-
-
-
-
+
+
+
+
+ {getLayout()}
+
+
+
+
diff --git a/apps/web/pages/api/addresses/[address]/proof/index.ts b/apps/web/pages/api/addresses/[address]/proof/index.ts
deleted file mode 100644
index 7e431ea..0000000
--- a/apps/web/pages/api/addresses/[address]/proof/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { getProofsByNamespaceAndAddress, ProofTableNamespace } from 'apps/web/src/utils/proofs';
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
- if (req.method !== 'GET') {
- return res.status(405).json({ error: 'method not allowed' });
- }
- const { address, namespace } = req.query;
- if (!address) {
- return res.status(400).json({ error: 'address is required' });
- }
-
- try {
- const content = await getProofsByNamespaceAndAddress(
- address as string,
- namespace as ProofTableNamespace,
- );
-
- return res.status(200).json({ result: content });
- } catch (error) {
- console.error(error);
- }
-
- return res.status(404).json({ error: 'address is not eligible for this project' });
-}
diff --git a/apps/web/pages/api/basenames/[name]/assets/cardImage.svg.tsx b/apps/web/pages/api/basenames/[name]/assets/cardImage.svg.tsx
new file mode 100644
index 0000000..83cc39d
--- /dev/null
+++ b/apps/web/pages/api/basenames/[name]/assets/cardImage.svg.tsx
@@ -0,0 +1,111 @@
+import satori from 'satori';
+import { NextRequest } from 'next/server';
+import { getUserNamePicture } from 'apps/web/src/utils/usernames';
+import twemoji from 'twemoji';
+
+const emojiCache: Record> = {};
+
+export async function loadEmoji(emojiString: string) {
+ const code = twemoji.convert.toCodePoint(emojiString);
+
+ if (code in emojiCache) {
+ return emojiCache[code];
+ }
+
+ // TODO: Is this okay? Vercel's OG image already does these calls
+ const url = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`;
+
+ return (emojiCache[code] = fetch(url).then(async (r) => r.text()));
+}
+
+export const config = {
+ runtime: 'edge',
+};
+
+// TODO: Do we want to check if the name actually exists?
+export default async function handler(request: NextRequest) {
+ const fontData = await fetch(
+ new URL('../../../../../src/fonts/CoinbaseDisplay-Regular.ttf', import.meta.url),
+ ).then(async (res) => res.arrayBuffer());
+
+ // TODO: Check this works in live/production
+ const url = new URL(request.url);
+ const username = url.searchParams.get('name') ?? 'yourname';
+ const domainName = `${url.protocol}//${url.host}`;
+ const profilePicture = getUserNamePicture(username);
+
+ // Using Satori for a SVG response
+ const svg = await satori(
+
+
+
+ 
+
+
+ {username}
+
+
+
+
+
+
+
+
+ {username}
+
+
+