Skip to content

Commit 3818af3

Browse files
stephanniegbstephanniegb
committed
Chore: update readme
1 parent 8cc8d55 commit 3818af3

File tree

7 files changed

+64
-98
lines changed

7 files changed

+64
-98
lines changed

‎other/starknet-example/.env.example‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID_DEV=
2-
NEXT_PUBLIC_WEB3AUTH_CLIENT_ID=
3-
NEXT_PUBLIC_STARKNET_JSON_RPC_URL_MAINNET=
4-
NEXT_PUBLIC_STARKNET_JSON_RPC_URL_SEPOLIA=https://starknet-sepolia.public.blastapi.io/rpc/v0_8
1+
VITE_WEB3AUTH_CLIENT_ID_DEV=BEQc78qNSC_nE4sh2YSf6MPK4mep2CLELdQ3jPU85y8YrRX3pGBxHV4Yx9hcEoEL_3gg8TUdTL0wST9HV0YHp3A
2+
VITE_WEB3AUTH_CLIENT_ID=
3+
VITE_STARKNET_JSON_RPC_URL_MAINNET=
4+
VITE_STARKNET_JSON_RPC_URL_SEPOLIA=https://starknet-sepolia.public.blastapi.io/rpc/v0_8
5+
6+
7+

‎other/starknet-example/README.md‎

Lines changed: 48 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,51 @@
1-
# React + TypeScript + Vite
2-
3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4-
5-
Currently, two official plugins are available:
6-
7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9-
10-
## Expanding the ESLint configuration
11-
12-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13-
14-
```js
15-
export default tseslint.config([
16-
globalIgnores(['dist']),
17-
{
18-
files: ['**/*.{ts,tsx}'],
19-
extends: [
20-
// Other configs...
21-
22-
// Remove tseslint.configs.recommended and replace with this
23-
...tseslint.configs.recommendedTypeChecked,
24-
// Alternatively, use this for stricter rules
25-
...tseslint.configs.strictTypeChecked,
26-
// Optionally, add this for stylistic rules
27-
...tseslint.configs.stylisticTypeChecked,
28-
29-
// Other configs...
30-
],
31-
languageOptions: {
32-
parserOptions: {
33-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34-
tsconfigRootDir: import.meta.dirname,
35-
},
36-
// other options...
37-
},
38-
},
39-
])
1+
# Web3Auth Starknet Demo
2+
3+
This example demonstrates how to integrate Web3Auth into a React application for the Starknet blockchain.
4+
5+
## Prerequisites
6+
7+
- Node.js 20+
8+
- npm
9+
- A Web3Auth Client ID (get one from [Web3Auth Dashboard](https://dashboard.web3auth.io))
10+
11+
## Quick Start
12+
13+
### 1. Clone the repository
14+
15+
```bash
16+
git clone https://github.com/stephanniegb/web3auth-starknet.git
4017
```
4118

42-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43-
44-
```js
45-
// eslint.config.js
46-
import reactX from 'eslint-plugin-react-x'
47-
import reactDom from 'eslint-plugin-react-dom'
48-
49-
export default tseslint.config([
50-
globalIgnores(['dist']),
51-
{
52-
files: ['**/*.{ts,tsx}'],
53-
extends: [
54-
// Other configs...
55-
// Enable lint rules for React
56-
reactX.configs['recommended-typescript'],
57-
// Enable lint rules for React DOM
58-
reactDom.configs.recommended,
59-
],
60-
languageOptions: {
61-
parserOptions: {
62-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63-
tsconfigRootDir: import.meta.dirname,
64-
},
65-
// other options...
66-
},
67-
},
68-
])
19+
### 2. Install dependencies
20+
21+
```bash
22+
npm install
6923
```
24+
25+
### 3. Configure environment variables
26+
27+
Create a `.env` file and add your Web3Auth Client ID and RPC provider urls:
28+
29+
```bash
30+
cp .env.example .env.local
31+
```
32+
33+
### 4. Run the application
34+
35+
```bash
36+
npm run dev
37+
```
38+
39+
Visit `http://localhost:3000` in your browser to see the application running.
40+
41+
## 📚 Resources
42+
43+
- [Web3Auth Documentation](https://web3auth.io/docs/connect-blockchain/other/starknet)
44+
- [Starknet js Create Account Documentation](https://starknetjs.com/docs/guides/create_account)
45+
- [SDK References](https://web3auth.io/docs/sdk)
46+
- [Developer Dashboard](https://dashboard.web3auth.io)
47+
- [Web3Auth Community](https://web3auth.io/community)
48+
49+
## License
50+
51+
MIT

‎other/starknet-example/src/App.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function App() {
2020
const starknetProvider = new RpcProvider({
2121
nodeUrl: isProduction
2222
? import.meta.env.VITE_STARKNET_JSON_RPC_URL_MAINNET
23-
: import.meta.env.VITE_STARKNET_JSON_RPC_URL_SEPOLIA,
23+
: "https://starknet-sepolia.public.blastapi.io/rpc/v0_8",
2424
});
2525

2626
const { provider: web3authProvider } = useWeb3Auth();
@@ -165,9 +165,7 @@ function App() {
165165
href="https://www.starknet.io"
166166
target="_blank"
167167
rel="noreferrer"
168-
style={{
169-
color: "white",
170-
}}
168+
style={{ color: "white" }}
171169
>
172170
StarkNet
173171
</a>{" "}

‎other/starknet-example/src/main.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { createRoot } from "react-dom/client";
2-
import { Web3AuthProvider } from "@web3auth/modal/react";
3-
4-
import "./index.css";
52
import App from "./App.tsx";
6-
import web3AuthContextConfig from "./web3authContext.tsx";
73

8-
console.log("About to render app");
4+
// Setup Web3Auth Provider
5+
import { Web3AuthProvider } from "@web3auth/modal/react";
6+
import web3AuthContextConfig from "./web3authContext.tsx";
97

108
createRoot(document.getElementById("root")!).render(
119
<Web3AuthProvider config={web3AuthContextConfig}>
1210
<App />
1311
</Web3AuthProvider>
1412
);
15-
16-
console.log("Render call completed");

‎other/starknet-example/src/web3authContext.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,19 @@
22
import { type Web3AuthContextConfig } from "@web3auth/modal/react";
33
import { WEB3AUTH_NETWORK } from "@web3auth/modal";
44

5-
console.log("Environment variables check:");
6-
console.log("PROD:", import.meta.env.PROD);
7-
console.log(
8-
"VITE_WEB3AUTH_CLIENT_ID:",
9-
import.meta.env.VITE_WEB3AUTH_CLIENT_ID
10-
);
11-
console.log(
12-
"VITE_WEB3AUTH_CLIENT_ID_DEV:",
13-
import.meta.env.VITE_WEB3AUTH_CLIENT_ID_DEV
14-
);
15-
5+
// Dashboard Registration
166
const isProduction = import.meta.env.PROD;
177
const clientId = isProduction
188
? import.meta.env.VITE_WEB3AUTH_CLIENT_ID
19-
: import.meta.env.VITE_WEB3AUTH_CLIENT_ID_DEV;
20-
21-
console.log("Selected clientId:", clientId);
9+
: "BEQc78qNSC_nE4sh2YSf6MPK4mep2CLELdQ3jPU85y8YrRX3pGBxHV4Yx9hcEoEL_3gg8TUdTL0wST9HV0YHp3A"; // you can get yours from https://dashboard.web3auth.io
2210

2311
if (!clientId) {
2412
throw new Error(
25-
"VITE_WEB3AUTH_CLIENT_ID is not set –– need to set in .env for web3auth to work"
13+
"clientId is not set –– need to set in .env for web3auth to work"
2614
);
2715
}
2816

17+
// Instantiate SDK
2918
const web3AuthContextConfig: Web3AuthContextConfig = {
3019
web3AuthOptions: {
3120
clientId,

‎other/starknet-example/tsconfig.app.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"strict": true,
2020
"noUnusedLocals": true,
2121
"noUnusedParameters": true,
22-
"erasableSyntaxOnly": true,
2322
"noFallthroughCasesInSwitch": true,
2423
"noUncheckedSideEffectImports": true
2524
},

‎other/starknet-example/tsconfig.node.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"strict": true,
1818
"noUnusedLocals": true,
1919
"noUnusedParameters": true,
20-
"erasableSyntaxOnly": true,
2120
"noFallthroughCasesInSwitch": true,
2221
"noUncheckedSideEffectImports": true
2322
},

0 commit comments

Comments
 (0)