diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md index c4033664..2be155b8 100644 --- a/examples/nextjs/README.md +++ b/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** diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 69ecdfd9..38df86ea 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,13 +1,13 @@ { - "name": "nextjs", + "name": "soundxyz-sdk-nextjs-example", "version": "0.1.0", "private": true, "scripts": { - "prepare": "node pull-env.mjs", - "dev": "next dev", "build": "next build", - "start": "next start", - "lint": "next lint" + "dev": "next dev", + "lint": "next lint", + "prepare": "node pull-env.mjs", + "start": "next start" }, "dependencies": { "@fortawesome/free-solid-svg-icons": "^6.4.2", @@ -15,7 +15,6 @@ "@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", diff --git a/examples/nextjs/pull-env.mjs b/examples/nextjs/pull-env.mjs index b13025ba..bea313ce 100644 --- a/examples/nextjs/pull-env.mjs +++ b/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) diff --git a/examples/nextjs/src/context/sound.ts b/examples/nextjs/src/context/sound.ts index 903cb8e1..613c94ca 100644 --- a/examples/nextjs/src/context/sound.ts +++ b/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', }) diff --git a/examples/nextjs/src/lib/persistence.ts b/examples/nextjs/src/lib/persistence.ts index e11dfea4..4ce4c760 100644 --- a/examples/nextjs/src/lib/persistence.ts +++ b/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 = { set: (value: Input) => Promise state: PersistedStoreState clear(): Promise - produceExistingState(callback: (draft: Draft) => void): void | Promise useStore: () => INTERNAL_Snapshot> } @@ -111,23 +108,6 @@ export function PersistenceStorage) => void): void | Promise { - 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 = { get, set, @@ -136,7 +116,6 @@ export function PersistenceStorage) diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 497eda14..97fdcf74 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -1,7 +1,7 @@ { "name": "@soundxyz/sdk", "version": "3.0.0", - "private": true, + "private": false, "homepage": "https://docs.sound.xyz", "repository": { "type": "git", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2c86736d..7ed31c1d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -140,9 +140,6 @@ importers: '@tanstack/react-query': specifier: ^5.0.0 version: 5.0.0(react-dom@18.2.0)(react@18.2.0) - immer: - specifier: ^10.0.3 - version: 10.0.3 next: specifier: 13.5.5 version: 13.5.5(react-dom@18.2.0)(react@18.2.0) @@ -166,7 +163,7 @@ importers: version: 1.16.6(typescript@5.2.2)(zod@3.22.4) wagmi: specifier: ^1.4.4 - version: 1.4.4(@types/react@18.2.28)(immer@10.0.3)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4) + version: 1.4.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4) zod: specifier: ^3.22.4 version: 3.22.4 @@ -6307,7 +6304,7 @@ packages: - zod dev: false - /@wagmi/core@1.4.4(@types/react@18.2.28)(immer@10.0.3)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4): + /@wagmi/core@1.4.4(@types/react@18.2.28)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4): resolution: {integrity: sha512-38Pa5iH9/2zHX837vYm6M+c//BBikt6vKJqUiEgkIzSqFvlfzbxaNmwybpIxl98N5r+X22C3yHv5bboO9eP0vQ==} peerDependencies: typescript: '>=5.0.4' @@ -6321,7 +6318,7 @@ packages: eventemitter3: 4.0.7 typescript: 5.2.2 viem: 1.16.6(typescript@5.2.2)(zod@3.22.4) - zustand: 4.4.3(@types/react@18.2.28)(immer@10.0.3)(react@18.2.0) + zustand: 4.4.3(@types/react@18.2.28)(react@18.2.0) transitivePeerDependencies: - '@react-native-async-storage/async-storage' - '@types/react' @@ -10479,10 +10476,6 @@ packages: resolution: {integrity: sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==} dev: true - /immer@10.0.3: - resolution: {integrity: sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==} - dev: false - /immutable@3.7.6: resolution: {integrity: sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==} engines: {node: '>=0.8.0'} @@ -15149,7 +15142,7 @@ packages: hasBin: true dev: true - /wagmi@1.4.4(@types/react@18.2.28)(immer@10.0.3)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4): + /wagmi@1.4.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4): resolution: {integrity: sha512-uT6GRNrw3WTrdVRQ7wAHiQL2/gaqaUjcEeHRwsbiqrAT9ZfVtZw7uhl+ZueLpem2zFxlR2zhnRMNbAOKD0IcEA==} peerDependencies: react: '>=17.0.0' @@ -15162,7 +15155,7 @@ packages: '@tanstack/query-sync-storage-persister': 4.36.1 '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-query-persist-client': 4.36.1(@tanstack/react-query@4.36.1) - '@wagmi/core': 1.4.4(@types/react@18.2.28)(immer@10.0.3)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4) + '@wagmi/core': 1.4.4(@types/react@18.2.28)(react@18.2.0)(typescript@5.2.2)(viem@1.16.6)(zod@3.22.4) abitype: 0.8.7(typescript@5.2.2)(zod@3.22.4) react: 18.2.0 typescript: 5.2.2 @@ -15601,7 +15594,7 @@ packages: /zod@3.22.4: resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} - /zustand@4.4.3(@types/react@18.2.28)(immer@10.0.3)(react@18.2.0): + /zustand@4.4.3(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-oRy+X3ZazZvLfmv6viIaQmtLOMeij1noakIsK/Y47PWYhT8glfXzQ4j0YcP5i0P0qI1A4rIB//SGROGyZhx91A==} engines: {node: '>=12.7.0'} peerDependencies: @@ -15617,7 +15610,6 @@ packages: optional: true dependencies: '@types/react': 18.2.28 - immer: 10.0.3 react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) dev: false