pi-sdk-nextjs 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +138 -0
- package/cli.js +73 -0
- package/dist/file.svg +1 -0
- package/dist/globe.svg +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +3092 -0
- package/dist/index.js.map +1 -0
- package/dist/next.svg +1 -0
- package/dist/routes/approve.d.ts +8 -0
- package/dist/routes/cancel.d.ts +8 -0
- package/dist/routes/complete.d.ts +8 -0
- package/dist/routes/error.d.ts +8 -0
- package/dist/routes/incomplete.d.ts +8 -0
- package/dist/vercel.svg +1 -0
- package/dist/window.svg +1 -0
- package/lib/piServer.ts +78 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# Pi SDK Next.js Integration โ Community Developer Guide
|
|
2
|
+
|
|
3
|
+
This package helps you quickly scaffold, configure, and integrate all
|
|
4
|
+
necessary components for using Pi Network payments, authentication,
|
|
5
|
+
and user flows with a Next.js project. It is designed for modern
|
|
6
|
+
Next.js apps (App Router or Pages Router) that want a working,
|
|
7
|
+
idiomatic Pi payment and authentication experience with minimal
|
|
8
|
+
boilerplate.
|
|
9
|
+
It is part of the "Ten Minutes to Transactions" effort described in this
|
|
10
|
+
[video](https://www.youtube.com/watch?v=cIFqf1Z5pRM&t=35s).
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## ๐ Quick Start
|
|
15
|
+
|
|
16
|
+
1. **Add as a dependency in your Next.js project**
|
|
17
|
+
```sh
|
|
18
|
+
yarn add pi-sdk-nextjs
|
|
19
|
+
# or
|
|
20
|
+
npm install pi-sdk-nextjs
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
2. **Run the Pi component and API scaffolder:**
|
|
24
|
+
```sh
|
|
25
|
+
yarn pi-sdk-nextjs-install
|
|
26
|
+
```
|
|
27
|
+
This will generate:
|
|
28
|
+
- A `components/PiButton.tsx` file (ready-to-use React component)
|
|
29
|
+
- All standard Pi payment API endpoints in `app/api/pi_payment/<event>/route.ts` (`approve`, `complete`, `cancel`, `error`, `incomplete`)
|
|
30
|
+
|
|
31
|
+
3. **Ensure the global Pi SDK is loaded:**
|
|
32
|
+
Add the Pi SDK `<script>` to your document head (see the [official docs](https://developer.minepi.com/)):
|
|
33
|
+
```html
|
|
34
|
+
<script src="https://sdk.minepi.com/pi-sdk.js"></script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
4. **Use the PiButton in your UI:**
|
|
38
|
+
```tsx
|
|
39
|
+
import { PiButton } from '@/components/PiButton';
|
|
40
|
+
// or relative:
|
|
41
|
+
import { PiButton } from '../components/PiButton';
|
|
42
|
+
|
|
43
|
+
export default function Page() {
|
|
44
|
+
return <PiButton />;
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
6. **Register your application with Pi Network:**
|
|
49
|
+
Open your Pi Mining app. Click the hamburger. Select "Pi Utilities". Click the "Develop" icon followed by the
|
|
50
|
+
"New App" icon. Provide name and description of your app and submit. Then click the "Configuration" icon. Set
|
|
51
|
+
the app URL to something valid, but does not necessarily exists, and the development URL to be
|
|
52
|
+
"http://localhost:3000" (actual port is up to you). Submit your changes.
|
|
53
|
+
|
|
54
|
+
6. **Provide the Pi API key as an environment variable:**
|
|
55
|
+
Click on the "API Key" icon to get the API key for your app.
|
|
56
|
+
```bash
|
|
57
|
+
export PI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
6. **Register a wallet for your app:**
|
|
61
|
+
Click on the "Wallet" icon to select or create a wallet for use with your app.
|
|
62
|
+
|
|
63
|
+
7. **Run your app through the Sandbox browser:**
|
|
64
|
+
Start the local server.
|
|
65
|
+
```bash
|
|
66
|
+
yarn dev
|
|
67
|
+
```
|
|
68
|
+
Visit "https://sandbox.minepi.com/mobile-app-ui/app/your-app-name". It will ask you to provide an
|
|
69
|
+
authorization code to the Pi Mining app. Click the link at the bottom of the Pi Utilities screen.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
## ๐น Video Script
|
|
74
|
+
You can watch a [video](https://www.youtube.com/watch?v=cIFqf1Z5pRM&t=35s) describing the entire process.
|
|
75
|
+
Here's are the commands used in the video.
|
|
76
|
+
```bash
|
|
77
|
+
# Create the app
|
|
78
|
+
yarn create next-app tmtt_nextjs --yes
|
|
79
|
+
|
|
80
|
+
cd tmtt_nextjs
|
|
81
|
+
|
|
82
|
+
# Add the Pi SDK package for Next.js
|
|
83
|
+
yarn add pi-sdk-nextjs@https://github.com/pi-apps/pi-sdk-nextjs
|
|
84
|
+
|
|
85
|
+
# Generate the routes and PiButton.tsx
|
|
86
|
+
yarn pi-sdk-nextjs-install
|
|
87
|
+
|
|
88
|
+
# Load Pi SDK on your pages
|
|
89
|
+
sed -i '' '3i\
|
|
90
|
+
import Script from "next/script";\
|
|
91
|
+
' app/layout.tsx
|
|
92
|
+
|
|
93
|
+
sed -i '' '28i\
|
|
94
|
+
<head>\
|
|
95
|
+
<Script src="https://sdk.minepi.com/pi-sdk.js" strategy="beforeInteractive" />\
|
|
96
|
+
</head>\
|
|
97
|
+
' app/layout.tsx
|
|
98
|
+
|
|
99
|
+
# Enable PiButton on the home page
|
|
100
|
+
sed -i '' '2i\
|
|
101
|
+
import { PiButton } from "@/components/PiButton";
|
|
102
|
+
' app/page.tsx
|
|
103
|
+
|
|
104
|
+
sed -i '' '38i\
|
|
105
|
+
<PiButton/>
|
|
106
|
+
' app/page.tsx
|
|
107
|
+
|
|
108
|
+
# Build the app
|
|
109
|
+
yarn build
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## โ FAQ
|
|
115
|
+
|
|
116
|
+
### What does this CLI actually do?
|
|
117
|
+
- Generates a PiButton component for direct use in your app.
|
|
118
|
+
- Generates stubbed (or pluggable) Next.js API routes for all standard Pi payment lifecycle events.
|
|
119
|
+
- Handles directory creation and required "use client" directives for new components.
|
|
120
|
+
|
|
121
|
+
### How do I customize the generated code?
|
|
122
|
+
- Edit `components/PiButton.tsx` and API route files as you wish. New SDK versions won't overwrite unless you delete them first (or add a force flag to the CLI).
|
|
123
|
+
|
|
124
|
+
### Can I run this many times?
|
|
125
|
+
- Yes, running multiple times is safeโthe CLI checks for pre-existing files and will not overwrite by default.
|
|
126
|
+
|
|
127
|
+
### Is this production safe?
|
|
128
|
+
- Yes, but always audit generated files and integrations before shipping!
|
|
129
|
+
|
|
130
|
+
### What else can I do with the SDKs?
|
|
131
|
+
- Leverage hooks, server helpers, and the underlying SDKs (`pi-sdk-react`, `pi-sdk-js`) for advanced use cases, custom payment flows, and more.
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
## ๐ Further Resources
|
|
136
|
+
- [Official Pi SDK Docs](https://developer.minepi.com/)
|
|
137
|
+
- [pi-sdk-react on GitHub](https://github.com/pi-apps/pi-sdk-react)
|
|
138
|
+
- [Pi SDK JS](https://github.com/pi-apps/pi-sdk-js)
|
package/cli.js
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { spawn } from 'node:child_process';
|
|
3
|
+
import path from 'node:path';
|
|
4
|
+
import fs from 'node:fs/promises';
|
|
5
|
+
import minimist from 'minimist';
|
|
6
|
+
import { createRequire } from 'node:module';
|
|
7
|
+
|
|
8
|
+
const argv = process.argv.slice(2);
|
|
9
|
+
const require = createRequire(import.meta.url);
|
|
10
|
+
|
|
11
|
+
// Components directory for PiButton
|
|
12
|
+
const componentsDir = path.join(process.cwd(), 'components');
|
|
13
|
+
const piButtonFile = path.join(componentsDir, 'PiButton.tsx');
|
|
14
|
+
|
|
15
|
+
// Ensure components directory exists
|
|
16
|
+
const ensureComponents = async () => {
|
|
17
|
+
await fs.mkdir(componentsDir, { recursive: true });
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// Robustly resolve pi-sdk-react CLI regardless of hoisting/nesting
|
|
21
|
+
const reactBinPath = require.resolve('pi-sdk-react/cli.js', { paths: [process.cwd()] });
|
|
22
|
+
|
|
23
|
+
// Ensure components dir, then spawn the CLI with that dir as --dest
|
|
24
|
+
ensureComponents().then(() => {
|
|
25
|
+
const child = spawn(
|
|
26
|
+
process.execPath,
|
|
27
|
+
[reactBinPath, '--dest', componentsDir, ...argv],
|
|
28
|
+
{ stdio: 'inherit' }
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
child.on('exit', async (code) => {
|
|
32
|
+
if (code !== 0) {
|
|
33
|
+
process.exit(code);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
try {
|
|
37
|
+
let content = await fs.readFile(piButtonFile, 'utf8');
|
|
38
|
+
// Ensure "use client" at the top
|
|
39
|
+
if (!content.startsWith('"use client"') && !content.startsWith("'use client'")) {
|
|
40
|
+
content = '"use client";\n' + content;
|
|
41
|
+
}
|
|
42
|
+
await fs.writeFile(piButtonFile, content, 'utf8');
|
|
43
|
+
} catch (err) {
|
|
44
|
+
console.error(`[Pi SDK Nextjs] Could not update PiButton.tsx:`, err);
|
|
45
|
+
process.exit(1);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// Step 2: Add all required Next.js API endpoint routes
|
|
49
|
+
const endpoints = [
|
|
50
|
+
'approve',
|
|
51
|
+
'complete',
|
|
52
|
+
'cancel',
|
|
53
|
+
'error',
|
|
54
|
+
'incomplete'
|
|
55
|
+
];
|
|
56
|
+
for (const endpoint of endpoints) {
|
|
57
|
+
const apiRouteDir = path.join(process.cwd(), 'app', 'api', 'pi_payment', endpoint);
|
|
58
|
+
await fs.mkdir(apiRouteDir, { recursive: true });
|
|
59
|
+
const routeFile = path.join(apiRouteDir, 'route.ts');
|
|
60
|
+
if (!(await fileExists(routeFile))) {
|
|
61
|
+
const content = `import { NextRequest, NextResponse } from 'next/server';\nimport { ${endpoint}POST } from 'pi-sdk-nextjs';\n\nexport async function POST(req: NextRequest) {\n // TODO: Fill this handler with Pi logic or call out to your SDK\n return ${endpoint}POST(req);\n}`;
|
|
62
|
+
await fs.writeFile(routeFile, content, 'utf8');
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
async function fileExists(file) {
|
|
69
|
+
try {
|
|
70
|
+
await fs.access(file);
|
|
71
|
+
return true;
|
|
72
|
+
} catch { return false; }
|
|
73
|
+
}
|
package/dist/file.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
package/dist/globe.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|