Skip to content

Commit ae088f4

Browse files
aboutmydreamsaboutmydreams
committed
fix: init solana pay demo
0 parents  commit ae088f4

File tree

102 files changed

+19136
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+19136
-0
lines changed

‎.gitignore

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.idea
2+
.vscode
3+
4+
.DS_Store
5+
6+
node_modules
7+
build
8+
.env
9+
.next

‎README.md

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
# Point of Sale
2+
3+
This is an example of how you can use the `@solana/pay` JavaScript library to create a simple point of sale system.
4+
5+
You can [check out the app](https://app.solanapay.com?recipient=GvHeR432g7MjN9uKyX3Dzg66TqwrEWgANLnnFZXMeyyj&label=Solana+Pay), use the code as a reference, or run it yourself to start accepting decentralized payments in-person.
6+
7+
## Prerequisites
8+
9+
To build and run this app locally, you'll need:
10+
11+
- Node.js v14.17.0 or above
12+
- Yarn
13+
- <details>
14+
<summary> Setup two wallets on <a href="https://phantom.app">Phantom</a> (Merchant and Customer) </summary>
15+
16+
#### 1. Create merchant wallet
17+
18+
Follow the [guide][1] on how to create a wallet. This wallet will provide the recipient address.
19+
20+
#### 2. Create customer wallet
21+
22+
Follow the [guide][1] on how to create another wallet. This wallet will be paying for the goods/services.
23+
24+
#### 3. Set Phantom to connect to devnet
25+
26+
1. Click the settings icon in the Phantom window
27+
2. Select the "Change network" option and select "Devnet"
28+
29+
#### 4. Airdrop SOL to customer wallet
30+
31+
Use [solfaucet][3] to airdrop SOL to the customer wallet.
32+
33+
> You'll need SOL in the customer wallet to pay for the goods/services + transaction fees
34+
35+
</details>
36+
37+
## Getting Started
38+
39+
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
40+
41+
### Clone the repository
42+
43+
#### With Git
44+
45+
```shell
46+
git clone https://github.com/solana-labs/solana-pay.git
47+
```
48+
49+
#### With Github CLI
50+
51+
```shell
52+
gh repo clone solana-labs/solana-pay
53+
```
54+
55+
### Install dependencies
56+
57+
```shell
58+
cd solana-pay/examples/point-of-sale
59+
npm install
60+
```
61+
62+
### Start the local dev server
63+
64+
```shell
65+
npm run dev
66+
```
67+
68+
### In a separate terminal, run a local SSL proxy
69+
70+
```shell
71+
npm run proxy
72+
```
73+
74+
### Open the point of sale app
75+
76+
```shell
77+
open "https://localhost:3001?recipient=Your+Merchant+Address&label=Your+Store+Name"
78+
```
79+
80+
You may need to accept a locally signed SSL certificate to open the page.
81+
82+
## Accepting USDC on Mainnet
83+
84+
Import the Mainnet endpoint, along with USDC's mint address and icon in the [`client/components/pages/App.tsx`](https://github.com/solana-labs/solana-pay/blob/master/examples/point-of-sale/src/client/components/pages/App.tsx) file.
85+
86+
```tsx
87+
import { MAINNET_ENDPOINT, MAINNET_USDC_MINT } from '../../utils/constants';
88+
import { USDCIcon } from '../images/USDCIcon';
89+
```
90+
91+
In the same file, set the `endpoint` value in the `<ConnectionProvider>` to `MAINNET_ENDPOINT` and set the following values in the `<ConfigProvider>`:
92+
93+
```tsx
94+
splToken={MAINNET_USDC_MINT}
95+
symbol="USDC"
96+
icon={<USDCIcon />}
97+
decimals={6}
98+
minDecimals={2}
99+
```
100+
101+
**Make sure to use 6 decimals for USDC!**
102+
103+
When you're done, it should look like this:
104+
105+
```tsx
106+
<ConnectionProvider endpoint={MAINNET_ENDPOINT}>
107+
<WalletProvider wallets={wallets} autoConnect={connectWallet}>
108+
<WalletModalProvider>
109+
<ConfigProvider
110+
baseURL={baseURL}
111+
link={link}
112+
recipient={recipient}
113+
label={label}
114+
message={message}
115+
splToken={MAINNET_USDC_MINT}
116+
symbol="USDC"
117+
icon={<USDCIcon />}
118+
decimals={6}
119+
minDecimals={2}
120+
connectWallet={connectWallet}
121+
>
122+
```
123+
124+
## Using Transaction Requests
125+
126+
[Transaction Requests](https://github.com/solana-labs/solana-pay/blob/master/SPEC.md#specification-transaction-request) are a new feature in Solana Pay.
127+
128+
In the [`client/components/pages/App.tsx`](https://github.com/solana-labs/solana-pay/blob/master/examples/point-of-sale/src/client/components/pages/App.tsx) file, toggle these lines:
129+
130+
```tsx
131+
// Toggle comments on these lines to use transaction requests instead of transfer requests.
132+
const link = undefined;
133+
// const link = useMemo(() => new URL(`${baseURL}/api/`), [baseURL]);
134+
```
135+
136+
When you're done, it should look like this:
137+
138+
```tsx
139+
// Toggle comments on these lines to use transaction requests instead of transfer requests.
140+
// const link = undefined;
141+
const link = useMemo(() => new URL(`${baseURL}/api/`), [baseURL]);
142+
```
143+
144+
The generated QR codes in the app should now use transaction requests. To see what's going on and customize it, check out the [`server/api/index.ts`](https://github.com/solana-labs/solana-pay/blob/master/examples/point-of-sale/src/server/api/index.ts) file.
145+
146+
## Deploying to Vercel
147+
148+
You can deploy this point of sale app to Vercel with a few clicks.
149+
150+
### 1. Fork the project
151+
152+
Fork the Solana Pay repository
153+
154+
### 2. Login to Vercel
155+
156+
Login to Vercel and create a new project
157+
158+
![setup1](./setup/1.New.png)
159+
160+
Import the forked repository from GitHub.
161+
162+
![setup2](./setup/2.Import.png)
163+
164+
> If you're forked repository is not listed, you'll need to adjust your GitHub app permissions. Search for the and select the `Missing Git repository? Adjust GitHub App Permissions` option.
165+
166+
### 3. Configure project
167+
168+
Choose `point-of-sale` as the root directory:
169+
170+
![setup3](./setup/3.Root_directory.png)
171+
172+
Configure the project as follows:
173+
174+
![setup4](./setup/4.Configuration.png)
175+
176+
### Deploy project
177+
178+
Once the deployment finishes, navigate to
179+
180+
`
181+
https://<YOUR DEPLOYMENT URL>?recipient=<YOUR WALLET ADDRESS>&label=Your+Store+Name
182+
`
183+
184+
## License
185+
186+
The Solana Pay Point of Sale app is open source and available under the Apache License, Version 2.0. See the [LICENSE](./LICENSE) file for more info.
187+
188+
<!-- Links -->
189+
190+
[1]: https://help.phantom.app/hc/en-us/articles/4406388623251-How-to-create-a-new-wallet
191+
[3]: https://solfaucet.com/

‎base58.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const base58 = require('bs58');
2+
3+
const key = require(process.argv[2]);
4+
5+
console.log(base58.encode(key));

‎keypair.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[
2+
122, 237, 93, 254, 70, 126, 181, 48, 51, 167, 169, 110, 126, 207, 75, 253, 10, 163, 171, 76, 87, 166, 237, 52, 224,
3+
179, 153, 16, 38, 4, 182, 232, 3, 248, 133, 68, 7, 238, 87, 159, 104, 254, 57, 166, 177, 183, 249, 81, 164, 169,
4+
103, 167, 177, 202, 225, 41, 155, 230, 87, 31, 207, 184, 115, 214
5+
]

‎next-env.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎next.config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
async redirects() {
5+
return [
6+
{
7+
source: '/',
8+
destination: '/new',
9+
permanent: false,
10+
has: [
11+
{
12+
type: 'query',
13+
key: 'recipient',
14+
},
15+
{
16+
type: 'query',
17+
key: 'label',
18+
},
19+
],
20+
},
21+
];
22+
},
23+
};
24+
25+
module.exports = nextConfig;

0 commit comments

Comments
 (0)