chore: add beliefs.social to ecosystem page

apps/base-docs/tutorials/docs/1_ock-swap-theme.md

@@ -0,0 +1,198 @@
+---
+title: 'Create a Custom Themed Swap Component with OnchainKit'
+slug: /create-custom-themed-swap-component
+description: Learn how to implement a swap component with a custom theme using OnchainKit in your React application.
+author: hughescoin
+keywords: [OnchainKit, Swap Component, Custom Theme, React, TypeScript, ERC20 Tokens, Base Chain]
+tags: ['frontend', 'defi', 'ethereum', 'base']
+difficulty: medium
+displayed_sidebar: null
+---
+
+In this tutorial, you'll learn how to create a swap component with a custom theme using OnchainKit. We'll start with the OnchainKit App Template and modify it to include a swap interface for ERC20 tokens on the Base.
+
+---
+
+## Objectives
+
+By the end of this tutorial, you should be able to:
+
+- Set up a project using the OnchainKit App Template
+- Implement a swap component for ERC20 tokens
+- Customize the theme of your OnchainKit components
+- Apply CSS overrides to fine-tune the appearance of your app
+
+## Prerequisites
+
+### React and TypeScript
+
+You should be familiar with React and TypeScript. If you're new to these technologies, consider reviewing their [official documentation](https://react.dev/) first.
+
+### OnchainKit
+
+This tutorial uses OnchainKit. Familiarity with its basic concepts will be helpful.
+
+---
+
+## Setting up the Project
+
+To get started, clone the OnchainKit App Template by running:
+
+```bash
+git clone [email protected]:coinbase/onchain-app-template.git
+```
+
+If you have an existing app that uses OnchainKit, update to the latest version:
+
+```bash
+bun update @coinbase/onchainkit --latest
+```
+
+Now let's implement the Swap component by importing it from OnchainKit. Import it into a new route of your app or, if you're following along, the `src/app/page.tsx` file:
+
+```ts
+import {
+ Swap,
+ SwapAmountInput,
+ SwapToggleButton,
+ SwapButton,
+ SwapMessage,
+ SwapToast,
+} from '@coinbase/onchainkit/swap';
+
+import type { Token } from 'node_modules/@coinbase/onchainkit/esm/token/types';
+```
+
+The `<Swap/>` component enables you to swap any ERC20 token on Base. For this example, your users will be able to swap between USDC and ETH. Next, using the `Token` type, create instances of ETH and USDC.
+
+```ts
+const ETHToken: Token = {
+ address: '',
+ chainId: 8453,
+ decimals: 18,
+ name: 'Ethereum',
+ symbol: 'ETH',
+ image:
+ 'https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png',
+};
+
+const USDCToken: Token = {
+ address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
+ chainId: 8453,
+ decimals: 6,
+ name: 'USDC',
+ symbol: 'USDC',
+ image:
+ 'https://dynamic-assets.coinbase.com/3c15df5e2ac7d4abbe9499ed9335041f00c620f28e8de2f93474a9f432058742cdf4674bd43f309e69778a26969372310135be97eb183d91c492154176d455b8/asset_icons/9d67b728b6c8f457717154b3a35f9ddc702eae7e76c4684ee39302c4d7fd0bb8.png',
+};
+```
+
+![swap-component-default](../../assets/images/onchainkit-tutorials/swapped-theme-before.png)
+
+Here's a [sample](https://gist.github.com/hughescoin/4558feabb4f40b51f800091f04a945ae) of the full `page.tsx` file for reference.
+
+## Changing the Theme
+
+To change the theme of the site, navigate to `src/components/OnchainProviders.tsx` and add a `config` object to the `OnchainKitProvider`. This is the first step in enabling Themes for your project.
+
+```js
+config={{
+ appearance: {
+ mode: 'auto', // 'auto' | 'light' | 'dark'
+ theme: 'default', // 'default' | 'base' | 'cyberpunk' | 'hacker'
+ },
+}}
+```
+
+OnchainKit provides you with four preset themes. We'll use the "hacker" theme for its fonts but change the colors to a different palette.
+
+If you need help coming up with a color palette, there are many online tools available. For example, I used [color magic](https://colormagic.app).
+
+## Customizing the CSS
+
+Once you've chosen your colors, add them to the CSS file. Update the `src/app/global.css` file to include CSS overrides for OnchainKit properties. In the sample below, the comments provide guidance on which properties will change color.
+
+:::tip Having trouble changing an element?
+
+Use the "Inspect" feature in your browser to identify the element you wish to override in your `global.css` file.
+
+![Inspect Element GIF](../../assets/images/onchainkit-tutorials/inspect-ock-theme.gif)
+
+:::
+
+```css
+@layer base {
+ :root,
+ .default-light,
+ .default-dark,
+ .base,
+ .cyberpunk,
+ .hacker {
+ /* Text colors */
+ --ock-text-inverse: #f1d579;
+ --ock-text-foreground: #8c3e21;
+ --ock-text-foreground-muted: #f1d579;
+ --ock-text-error: #c85c2d;
+ --ock-text-primary: #e1a04c;
+ --ock-text-success: #f5b370;
+ --ock-text-warning: #f1d579;
+ --ock-text-disabled: #8c3e21;
+
+ /* Background colors */
+ --ock-bg-default: #8c3e21;
+ --ock-bg-default-hover: #c85c2d;
+ --ock-bg-default-active: #f1d579;
+ --ock-bg-alternate: #f1d579;
+ --ock-bg-alternate-hover: #e1a04c;
+ --ock-bg-alternate-active: #c85c2d;
+ --ock-bg-inverse: #c85c2d;
+ --ock-bg-inverse-hover: #e1a04c;
+ --ock-bg-inverse-active: #f5b370;
+ --ock-bg-primary: #c85c2d;
+ --ock-bg-primary-hover: #e1a04c;
+ --ock-bg-primary-active: #f1d579;
+ --ock-bg-primary-washed: #f5b370;
+ --ock-bg-primary-disabled: #8c3e21;
+ --ock-bg-secondary: #e1a04c;
+ --ock-bg-secondary-hover: #f1d579;
+ --ock-bg-secondary-active: #f5b370;
+ --ock-bg-error: #c85c2d;
+ --ock-bg-warning: #f1d579;
+ --ock-bg-success: #f5b370;
+ --ock-bg-default-reverse: #c85c2d;
+
+ /* Icon colors */
+ --ock-icon-color-primary: #c85c2d;
+ --ock-icon-color-foreground: #c85c2d;
+ --ock-icon-color-foreground-muted: #e1a04c;
+ --ock-icon-color-inverse: #f5b370;
+ --ock-icon-color-error: #c85c2d;
+ --ock-icon-color-success: #f5b370;
+ --ock-icon-color-warning: #f1d579;
+
+ /* Line colors */
+ --ock-line-primary: #c85c2d;
+ --ock-line-default: #8c3e21;
+ --ock-line-heavy: #f1d579;
+ --ock-line-inverse: #e1a04c;
+ }
+}
+
+.ock-font-family.font-semibold.text-xl.leading-7 {
+ color: #f1d579;
+}
+```
+
+Now refresh your page, and you should see your swap component change to your defined color palette!
+
+![swap-component](../../assets/images/onchainkit-tutorials/swapped-theme-final.png)
+
+If something looks off, remember to check that you've overridden the correct element. See the above tip to learn how to find the correct element.
+
+## Conclusion
+
+Congratulations! You've successfully implemented the `<Swap/>` component and customized it to a theme of your choice. Pretty neat, right?
+
+[OnchainKit App Template]: https://github.com/coinbase/onchain-app-template
+[color magic]: https://colormagic.app
+[sample]: https://gist.github.com/hughescoin/4558feabb4f40b51f800091f04a945ae

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

@@ -5,10 +5,16 @@ import RegistrationProvider from 'apps/web/src/components/Basenames/Registration
 
 const usernameRegistrationAnalyticContext = 'username_registration';
 
-export default function RegistrationProviders({ children }: { children: React.ReactNode }) {
+export default function RegistrationProviders({
+ children,
+ code,
+}: {
+ children: React.ReactNode;
+ code?: string;
+}) {
  return (
  <AnalyticsProvider context={usernameRegistrationAnalyticContext}>
- <RegistrationProvider>{children}</RegistrationProvider>
+ <RegistrationProvider code={code}>{children}</RegistrationProvider>
  </AnalyticsProvider>
  );
 }

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

@@ -5,7 +5,6 @@ import RegistrationFAQ from 'apps/web/src/components/Basenames/RegistrationFaq';
 import RegistrationFlow from 'apps/web/src/components/Basenames/RegistrationFlow';
 import RegistrationValueProp from 'apps/web/src/components/Basenames/RegistrationValueProp';
 import type { Metadata } from 'next';
-import { Suspense } from 'react';
 import basenameCover from './basename_cover.png';
 import { initialFrame } from 'apps/web/pages/api/basenames/frame/frameResponses';
 
@@ -28,18 +27,19 @@ export const metadata: Metadata = {
  },
 };
 
-export default async function Page() {
+type PageProps = { searchParams?: { code?: string } };
+export default async function Page({ searchParams }: PageProps) {
+ const code = searchParams?.code;
+
  return (
  <ErrorsProvider context="registration">
- <RegistrationProviders>
- <Suspense>
- <main>
- <RegistrationFlow />
- <RegistrationValueProp />
- <PoweredByEns />
- <RegistrationFAQ />
- </main>
- </Suspense>
+ <RegistrationProviders code={code}>
+ <main>
+ <RegistrationFlow />
+ <RegistrationValueProp />
+ <PoweredByEns />
+ <RegistrationFAQ />
+ </main>
  </RegistrationProviders>
  </ErrorsProvider>
  );

apps/web/pages/api/proofs/discountCode/consume/index.ts

@@ -0,0 +1,36 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { logger } from 'apps/web/src/utils/logger';
+import { withTimeout } from 'apps/web/pages/api/decorators';
+import { incrementDiscountCodeUsage } from 'apps/web/src/utils/proofs/discount_code_storage';
+
+/*
+ this endpoint will increment the discount code usage to prevent abuse
+*/
+
+type DiscountCodeRequest = {
+ code: string;
+};
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ error: 'Method not allowed' });
+ }
+
+ try {
+ const { code } = req.body as DiscountCodeRequest;
+
+ if (!code || typeof code !== 'string') {
+ return res.status(500).json({ error: 'Invalid request' });
+ }
+
+ await incrementDiscountCodeUsage(code);
+
+ return res.status(200).json({ success: true });
+ } catch (error: unknown) {
+ logger.error('error incrementing the discount code', error);
+ }
+ // If error is not an instance of Error, return a generic error message
+ return res.status(500).json({ error: 'An unexpected error occurred' });
+}
+
+export default withTimeout(handler);

apps/web/pages/api/proofs/discountCode/index.ts

@@ -0,0 +1,81 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { proofValidation, signDiscountMessageWithTrustedSigner } from 'apps/web/src/utils/proofs';
+import { logger } from 'apps/web/src/utils/logger';
+import { withTimeout } from 'apps/web/pages/api/decorators';
+import { Address, Hash, stringToHex } from 'viem';
+import { USERNAME_DISCOUNT_CODE_VALIDATORS } from 'apps/web/src/addresses/usernames';
+import { getDiscountCode } from 'apps/web/src/utils/proofs/discount_code_storage';
+
+export type DiscountCodeResponse = {
+ discountValidatorAddress: Address;
+ address: Address;
+ signedMessage: Hash;
+};
+
+/*
+this endpoint returns whether or a discount code is valid
+*/
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+ if (req.method !== 'GET') {
+ return res.status(405).json({ error: 'method not allowed' });
+ }
+ const { address, chain, code } = req.query;
+ const validationErr = proofValidation(address, chain);
+ if (validationErr) {
+ return res.status(validationErr.status).json({ error: validationErr.error });
+ }
+
+ const chainId = parseInt(chain as string);
+
+ if (!code || typeof code !== 'string') {
+ return res.status(500).json({ error: 'Discount code invalid' });
+ }
+
+ try {
+ // 1. get the database model
+ const discountCodes = await getDiscountCode(code);
+
+ // 2. Validation: Coupon exists
+ if (!discountCodes || discountCodes.length === 0) {
+ return res.status(500).json({ error: 'Discount code invalid' });
+ }
+
+ const discountCode = discountCodes[0];
+
+ // 2.1 Validation: Coupon is expired
+ if (new Date(discountCode.expires_at) < new Date()) {
+ return res.status(500).json({ error: 'Discount code invalid' });
+ }
+
+ // 2.2 Validation: Coupon can be redeemed
+ if (Number(discountCode.usage_count) >= Number(discountCode.usage_limit)) {
+ return res.status(500).json({ error: 'Discount code invalid' });
+ }
+
+ // 3. Sign the validationData
+ const couponCodeUuid = stringToHex(discountCode.code, { size: 32 });
+ const expirationTimeUnix = Math.floor(discountCode.expires_at.getTime() / 1000);
+
+ const signature = await signDiscountMessageWithTrustedSigner(
+ address as Address,
+ couponCodeUuid,
+ USERNAME_DISCOUNT_CODE_VALIDATORS[chainId],
+ expirationTimeUnix,
+ );
+
+ // 4. Return the discount data
+ const result: DiscountCodeResponse = {
+ discountValidatorAddress: USERNAME_DISCOUNT_CODE_VALIDATORS[chainId],
+ address: address as Address,
+ signedMessage: signature,
+ };
+
+ return res.status(200).json(result);
+ } catch (error: unknown) {
+ logger.error('error getting proofs for discount code', error);
+ }
+ // If error is not an instance of Error, return a generic error message
+ return res.status(500).json({ error: 'An unexpected error occurred' });
+}
+
+export default withTimeout(handler);

apps/web/src/addresses/usernames.ts

@@ -86,3 +86,8 @@ export const EXPONENTIAL_PREMIUM_PRICE_ORACLE: AddressMap = {
  [baseSepolia.id]: '0x2B73408052825e17e0Fe464f92De85e8c7723231',
  [base.id]: '0xd53B558e1F07289acedf028d226974AbBa258312',
 };
+
+export const USERNAME_DISCOUNT_CODE_VALIDATORS: AddressMap = {
+ [baseSepolia.id]: '0x52acEeB464F600437a3681bEC087fb53F3f75638',
+ [base.id]: '0x6F9A31238F502E9C9489274E59a44c967F4deC91',
+};