Example docs

examples/nextjs/README.md

@@ -1,36 +1,25 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Sound.xyz SDK + Viem + Wagmi + Next.js Example
 
-## Getting Started
+This example uses:
 
-First, run the development server:
+- `Next.js` https://nextjs.org/
+- `Typescript` https://www.typescriptlang.org/
+- `Wagmi` https://wagmi.sh/
+- `Viem` https://viem.sh/
+- `Tailwind` https://tailwindcss.com/
+- `Tanstack Query` aka `React Query` https://tanstack.com/query
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+With the help of libraries like:
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- `radix-ui/themes` https://www.radix-ui.com/
+- `Zod` https://zod.dev/
+- `Valtio` https://valtio.pmnd.rs/
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Breakdown of important scripts
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- [./src/context/wagmi.tsx](./src/context/wagmi.tsx) **Wagmi** initialization and importing **Sound.xyz SDK**
+- [./src/context/wallet.ts](./src/context/wallet.ts) **Viem** initialization and importing **Sound.xyz SDK**, this integration will vary depending on custom wallet integration, this example only includes a secret-key implementation that is not suitable for production environments
+- [./src/context/sound.ts](./src/context/sound.ts) **Sound.xyz API + SDK** client initialization
+- [./src/app/v2/page.tsx](./src/app/v2/page.tsx) **Sound Edition V2 usage** (Tiered Editions)
+- [./src/app/v1/page.tsx](./src/app/v1/page.tsx) **Sound Edition V1 usage** (Previous Tiered Edition Upgrade)
+  - [./src/app/v1/sam/page.tsx](./src/app/v1/sam/page.tsx) **Sound Edition V1 with SAM/Sound Swap usage**

examples/nextjs/package.json

@@ -10,12 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/themes": "^2.0.0",
     "@soundxyz/sdk": "workspace:^",
     "@tanstack/react-query": "^5.0.0",
-    "immer": "^10.0.3",
     "next": "13.5.5",
     "react": "^18",
     "react-dom": "^18",

examples/nextjs/pull-env.mjs

@@ -10,3 +10,4 @@ await fetch('https://vault.dotenv.org/pull.txt', {
 })
   .then((response) => response.text())
   .then((env) => promises.writeFile('.env', env))
+  .catch(console.error)

examples/nextjs/src/context/sound.ts

@@ -1,6 +1,9 @@
 import { SoundAPI } from '@soundxyz/sdk/api/sound'
 
 export const soundApi = SoundAPI({
+  // Remove this line to use the production API
   apiEndpoint: 'https://preview.api.sound.xyz/graphql',
+
+  // Change with your own API key
   apiKey: 'preview-no-key',
 })

examples/nextjs/src/lib/persistence.ts

@@ -1,6 +1,4 @@
 import { IS_SERVER } from '@/utils/constants'
-import type { Draft } from 'immer'
-import { produce } from 'immer'
 import { parse, stringify } from 'superjson'
 import { proxy, useSnapshot, type INTERNAL_Snapshot } from 'valtio'
 
@@ -16,7 +14,6 @@ export type PersistedStore<Input, Output> = {
   set: (value: Input) => Promise<Output | null>
   state: PersistedStoreState<Output>
   clear(): Promise<void>
-  produceExistingState(callback: (draft: Draft<Output>) => void): void | Promise<Output | null>
   useStore: () => INTERNAL_Snapshot<PersistedStoreState<Output>>
 }
 
@@ -111,23 +108,6 @@ export function PersistenceStorage<Output = unknown, Input = Output, Def extends
     }
   }
 
-  function produceExistingState(callback: (draft: Draft<Output>) => void): void | Promise<Output | null> {
-    if (IS_SERVER) return
-
-    if (state.value == null) {
-      throw Error(`Unexpected empty persisted store state for ${key}`)
-    }
-
-    const newState = produce(state.value, callback)
-
-    // Skip persisting if the value didn't change
-    if (newState === state.value) return
-
-    state.value = newState
-
-    return setStorage(newState)
-  }
-
   const store: PersistedStore<Input, Output> = {
     get,
     set,
@@ -136,7 +116,6 @@ export function PersistenceStorage<Output = unknown, Input = Output, Def extends
     useStore() {
       return useSnapshot(state)
     },
-    produceExistingState,
   }
 
   PersistedStores.set(idempotentStoreKey, store as PersistedStore<unknown, unknown>)