refactor: move playground types to separate file (#1625)

Co-authored-by: dschlabach <daniel.schlabach@coinbase.com>

playground/nextjs-app-router/components/AppProvider.tsx

@@ -1,62 +1,21 @@
 // AppContext.js
 import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
+import {
+  type CheckoutOptions,
+  CheckoutTypes,
+  type ComponentMode,
+  type ComponentTheme,
+  OnchainKitComponent,
+  type Paymaster,
+  TransactionTypes,
+} from '@/types/onchainkit';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import type React from 'react';
 import { createContext, useEffect, useState } from 'react';
 import { useConnect, useConnectors } from 'wagmi';
 import { base } from 'wagmi/chains';
 import { WalletPreference } from './form/wallet-type';
 
-export enum OnchainKitComponent {
-  Fund = 'fund',
-  Identity = 'identity',
-  IdentityCard = 'identity-card',
-  Checkout = 'checkout',
-  Swap = 'swap',
-  SwapDefault = 'swap-default',
-  Transaction = 'transaction',
-  TransactionDefault = 'transaction-default',
-  Wallet = 'wallet',
-  WalletDefault = 'wallet-default',
-  NFTCard = 'nft-card',
-  NFTCardDefault = 'nft-card-default',
-  NFTMintCard = 'nft-mint-card',
-  NFTMintCardDefault = 'nft-mint-card-default',
-}
-
-export enum TransactionTypes {
-  Calls = 'calls',
-  Contracts = 'contracts',
-  CallsPromise = 'callsPromise',
-  ContractsPromise = 'contractsPromise',
-  CallsCallback = 'callsCallback',
-  ContractsCallback = 'contractsCallback',
-}
-
-export type Paymaster = {
-  url: string;
-  enabled: boolean;
-};
-
-export type CheckoutOptions = {
-  chargeId?: string;
-  productId?: string;
-};
-
-export enum CheckoutTypes {
-  ChargeID = 'chargeId',
-  ProductID = 'productId',
-}
-
-export type ComponentTheme =
-  | 'base'
-  | 'cyberpunk'
-  | 'default'
-  | 'hacker'
-  | 'none'; // Simulates an undefined theme field
-
-export type ComponentMode = 'auto' | 'light' | 'dark';
-
 type State = {
   activeComponent?: OnchainKitComponent;
   setActiveComponent?: (component: OnchainKitComponent) => void;

playground/nextjs-app-router/components/Demo.tsx

@@ -1,6 +1,7 @@
 'use client';
-import { AppContext, OnchainKitComponent } from '@/components/AppProvider';
+import { AppContext } from '@/components/AppProvider';
 import { cn } from '@/lib/utils';
+import { OnchainKitComponent } from '@/types/onchainkit';
 import { useContext, useEffect, useState } from 'react';
 import DemoOptions from './DemoOptions';
 import CheckoutDemo from './demo/Checkout';

playground/nextjs-app-router/components/DemoOptions.tsx

@@ -1,7 +1,7 @@
 import { ComponentMode } from '@/components/form/component-mode';
 import { ComponentTheme } from '@/components/form/component-theme';
 import { PaymasterUrl } from '@/components/form/paymaster';
-import { OnchainKitComponent } from './AppProvider';
+import { OnchainKitComponent } from '@/types/onchainkit';
 import { ActiveComponent } from './form/active-component';
 import { Chain } from './form/chain';
 import { CheckoutOptions } from './form/checkout-options';

playground/nextjs-app-router/components/demo/Checkout.tsx

@@ -1,3 +1,4 @@
+import { CheckoutTypes } from '@/types/onchainkit';
 import {
   Checkout,
   CheckoutButton,
@@ -6,8 +7,7 @@ import {
 import type { LifecycleStatus } from '@coinbase/onchainkit/checkout';
 import { useCallback, useMemo } from 'react';
 import { useContext } from 'react';
-import { AppContext, CheckoutTypes } from '../AppProvider';
-
+import { AppContext } from '../AppProvider';
 export default function CheckoutDemo() {
   const { checkoutTypes, checkoutOptions, isSponsored } =
     useContext(AppContext);

playground/nextjs-app-router/components/demo/Transaction.tsx

@@ -1,6 +1,7 @@
 import { clickCalls, clickContracts } from '@/lib/transactions';
 import type { Call } from '@/onchainkit/esm/transaction/types';
 import type { LifecycleStatus } from '@/onchainkit/src/transaction';
+import { TransactionTypes } from '@/types/onchainkit';
 import {
   Transaction,
   TransactionButton,
@@ -15,7 +16,7 @@ import {
 } from '@coinbase/onchainkit/transaction';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 import type { ContractFunctionParameters } from 'viem';
-import { AppContext, TransactionTypes } from '../AppProvider';
+import { AppContext } from '../AppProvider';
 
 function TransactionDemo() {
   const { chainId, transactionType, isSponsored } = useContext(AppContext);

playground/nextjs-app-router/components/demo/TransactionDefault.tsx

@@ -1,8 +1,9 @@
 import { useCapabilities } from '@/lib/hooks';
 import { clickCalls, clickContracts } from '@/lib/transactions';
+import { TransactionTypes } from '@/types/onchainkit';
 import { TransactionDefault } from '@coinbase/onchainkit/transaction';
 import { useCallback, useContext, useEffect } from 'react';
-import { AppContext, TransactionTypes } from '../AppProvider';
+import { AppContext } from '../AppProvider';
 
 export default function TransactionDefaultDemo() {
   const { chainId, transactionType } = useContext(AppContext);

playground/nextjs-app-router/components/form/active-component.tsx

@@ -6,8 +6,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { OnchainKitComponent } from '@/types/onchainkit';
 import { useContext } from 'react';
-import { AppContext, OnchainKitComponent } from '../AppProvider';
+import { AppContext } from '../AppProvider';
 
 export function ActiveComponent() {
   const { activeComponent, setActiveComponent } = useContext(AppContext);

playground/nextjs-app-router/components/form/checkout-options.tsx

@@ -1,9 +1,10 @@
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { CheckoutTypes } from '@/types/onchainkit';
 import { useContext } from 'react';
 import { useState } from 'react';
-import { AppContext, CheckoutTypes } from '../AppProvider';
+import { AppContext } from '../AppProvider';
 
 export function CheckoutOptions() {
   const {

playground/nextjs-app-router/components/form/component-mode.tsx

@@ -6,9 +6,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import type { ComponentMode as ComponentModeReact } from '@/types/onchainkit';
 import { useContext } from 'react';
 import { AppContext } from '../AppProvider';
-import type { ComponentMode as ComponentModeReact } from '../AppProvider';
 
 export function ComponentMode() {
   const { componentMode, setComponentMode } = useContext(AppContext);

playground/nextjs-app-router/components/form/component-theme.tsx

@@ -6,9 +6,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import type { ComponentTheme as ComponentThemeType } from '@/types/onchainkit';
 import { useContext } from 'react';
 import { AppContext } from '../AppProvider';
-import type { ComponentTheme as ComponentThemeType } from '../AppProvider';
 
 export function ComponentTheme() {
   const { componentTheme, setComponentTheme } = useContext(AppContext);

playground/nextjs-app-router/components/form/transaction-options.tsx

@@ -6,8 +6,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { TransactionTypes } from '@/types/onchainkit';
 import { useContext } from 'react';
-import { AppContext, TransactionTypes } from '../AppProvider';
+import { AppContext } from '../AppProvider';
 
 export function TransactionOptions() {
   const { transactionType, setTransactionType } = useContext(AppContext);

playground/nextjs-app-router/types/onchainkit.ts

@@ -0,0 +1,49 @@
+export enum OnchainKitComponent {
+  Fund = 'fund',
+  Identity = 'identity',
+  IdentityCard = 'identity-card',
+  Checkout = 'checkout',
+  Swap = 'swap',
+  SwapDefault = 'swap-default',
+  Transaction = 'transaction',
+  TransactionDefault = 'transaction-default',
+  Wallet = 'wallet',
+  WalletDefault = 'wallet-default',
+  NFTCard = 'nft-card',
+  NFTCardDefault = 'nft-card-default',
+  NFTMintCard = 'nft-mint-card',
+  NFTMintCardDefault = 'nft-mint-card-default',
+}
+
+export enum TransactionTypes {
+  Calls = 'calls',
+  Contracts = 'contracts',
+  CallsPromise = 'callsPromise',
+  ContractsPromise = 'contractsPromise',
+  CallsCallback = 'callsCallback',
+  ContractsCallback = 'contractsCallback',
+}
+
+export type Paymaster = {
+  url: string;
+  enabled: boolean;
+};
+
+export type CheckoutOptions = {
+  chargeId?: string;
+  productId?: string;
+};
+
+export enum CheckoutTypes {
+  ChargeID = 'chargeId',
+  ProductID = 'productId',
+}
+
+export type ComponentTheme =
+  | 'base'
+  | 'cyberpunk'
+  | 'default'
+  | 'hacker'
+  | 'none'; // Simulates an undefined theme field
+
+export type ComponentMode = 'auto' | 'light' | 'dark';