18 |
19 | {stringify(
20 | {
21 | address: address ?? "Connect wallet first",
22 | connector: connector?.id ?? "Connect wallet first",
23 | account: account ? typeof account : "Connect wallet first",
24 | },
25 | null,
26 | 2,
27 | )}
28 |
29 |
37 |
Chain to Add
38 |
{stringify(chainData, null, 2)}
39 |
40 |
Response
41 |
42 | {stringify(
43 | {
44 | data,
45 | isPending,
46 | isError,
47 | error: error?.message,
48 | },
49 | null,
50 | 2,
51 | )}
52 |
53 |
54 |
55 |
56 |
57 | Important: This does not work with Braavos wallet, as they don't support
58 | the API at the moment.
59 |
60 |
33 |
34 |
Current Chain:
35 |
{chain.name}
36 |
37 |
38 |
39 |
Default Chain:
40 |
{defaultChain.name}
41 |
42 |
43 |
44 |
Change Default Chain:
45 |
46 | {chains.map((chain) => (
47 |
54 | ))}
55 |
56 |
57 |
58 |
59 |
Behavior Explanation:
60 |
61 | {isConnected
62 | ? "Connected: Changing default chain won't affect current chain"
63 | : "Not Connected: Changing default chain will update current chain"}
64 |
65 |
66 |
23 |
Params
24 |
{stringify(params, null, 2)}
25 |
26 |
Response
27 |
28 | {stringify(
29 | {
30 | data,
31 | isPending,
32 | isError,
33 | error: error?.message,
34 | },
35 | null,
36 | 2,
37 | )}
38 |
39 |
40 |
43 |
36 |
Calls
37 |
[contract.populate("transfer", [address, 1n])]
38 |
39 |
Response
40 |
41 | {stringify(
42 | {
43 | data,
44 | isLoading,
45 | isPending,
46 | isError,
47 | error: error?.message,
48 | suggestedMaxFee: `${formatAmount(
49 | data?.suggestedMaxFee,
50 | chain.nativeCurrency.decimals,
51 | )} ${chain.nativeCurrency.symbol}`,
52 | },
53 | null,
54 | 2,
55 | )}
56 |
57 |
Loading first events ...
28 | ) : status === "error" ? (
29 | <>
30 | Error: {error?.message}
31 | {stringify({ data, error }, null, 2)}
32 |
33 | ) : (
34 | <>
35 |
36 |
46 |
47 |
48 | {data?.pages
49 | .slice(0)
50 | .reverse()
51 | .map((page, i) => (
52 |
53 |
Chunk: {data.pages.length - i}
54 |
{stringify({ page }, null, 2)}
55 |
62 |
Fetching events for
63 |
64 | {stringify(
65 | { address, eventName, fromBlock, toBlock, pageSize },
66 | null,
67 | 2,
68 | )}
69 |
70 | {response}
71 |
26 |
27 | {stringify(
28 | {
29 | data,
30 | isLoading,
31 | isPending,
32 | isError,
33 | error: error?.message,
34 | },
35 | null,
36 | 2,
37 | )}
38 |
39 |
37 |
Response
38 |
39 | {stringify(
40 | {
41 | data,
42 | isPending,
43 | isError,
44 | error: error?.message,
45 | },
46 | null,
47 | 2,
48 | )}
49 |
50 |
51 |
24 |
25 |
Starkname
26 |
setName(e.target.value)}
32 | />
33 |
34 |
35 |
Response
36 |
37 | {stringify(
38 | {
39 | data,
40 | isLoading,
41 | isPending,
42 | isError,
43 | error: error?.message,
44 | },
45 | null,
46 | 2,
47 | )}
48 |
49 |
50 |
26 |
27 |
Address
28 |
setAddress(e.target.value)}
33 | />{" "}
34 |
35 |
36 |
37 |
Response
38 |
39 | {stringify(
40 | {
41 | data,
42 | isLoading,
43 | isPending,
44 | isError,
45 | error: error?.message,
46 | },
47 | null,
48 | 2,
49 | )}
50 |
51 |
52 |
26 |
27 |
Address
28 |
setAddress(e.target.value)}
33 | />{" "}
34 |
35 |
36 |
37 |
Response
38 |
39 | {stringify(
40 | {
41 | data,
42 | isLoading,
43 | isPending,
44 | isError,
45 | error: error?.message,
46 | },
47 | null,
48 | 2,
49 | )}
50 |
51 |
52 |
29 |
Current Chain:
30 |
{chain.name}
31 |
32 |
Response
33 |
34 | {stringify(
35 | {
36 | data,
37 | isPending,
38 | isError,
39 | error: error?.message,
40 | },
41 | null,
42 | 2,
43 | )}
44 |
45 |
46 |
49 |
56 |
63 |
64 |
65 | Important: This does not work with Braavos wallet, as they don't support
66 | the API at the moment.
67 |
68 |
21 |
Response
22 |
23 | {stringify(
24 | {
25 | data,
26 | isPending,
27 | isError,
28 | error: error?.message,
29 | },
30 | null,
31 | 2,
32 | )}
33 |
34 |
35 |
36 |
* Wallet connection required
37 |
9 | {address ? : }
10 |
11 | );
12 | }
13 |
14 | function ConnectedWallet({ address }: { address: `0x${string}` }) {
15 | const { disconnect } = useDisconnect();
16 | return (
17 |
18 |
Connected Address:
19 |
20 |
21 | {address.slice(0, 25)}...{address.slice(-25)}
22 |
23 |
31 |
32 |
41 |
Connect Wallet
42 |
43 | {connectors.map((connector) => (
44 |
54 | ))}
55 |
56 |
16 | {hasWallet ?
: null}
17 |
{children}
18 | {hasWallet ? (
19 |
* Wallet connection required
20 | ) : null}
21 |
9 | Get started by editing
10 | pages/index.tsx
11 |
12 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/next/src/components/starknet-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import type { ReactNode } from "react";
3 |
4 | import { mainnet } from "@starknet-react/chains";
5 | import {
6 | StarknetConfig,
7 | argent,
8 | braavos,
9 | publicProvider,
10 | useInjectedConnectors,
11 | voyager,
12 | } from "@starknet-react/core";
13 |
14 | export function StarknetProvider({ children }: { children: ReactNode }) {
15 | const { connectors } = useInjectedConnectors({
16 | // Show these connectors if the user has no connector installed.
17 | recommended: [argent(), braavos()],
18 | // Hide recommended connectors if the user has any connector installed.
19 | includeRecommended: "onlyIfNoConnectors",
20 | // Randomize the order of the connectors.
21 | order: "random",
22 | });
23 |
24 | return (
25 |
31 | {children}
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/next/src/components/ui/Button.tsx:
--------------------------------------------------------------------------------
1 | import type React from "react";
2 |
3 | interface ButtonProps extends React.ButtonHTMLAttributes {
4 | children: React.ReactNode;
5 | }
6 |
7 | export const Button = ({ children, ...props }: ButtonProps) => {
8 | return (
9 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/next/src/components/wallet-bar.tsx.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { useAccount, useConnect, useDisconnect } from "@starknet-react/core";
3 | import { useMemo } from "react";
4 | import { Button } from "./ui/Button";
5 |
6 | function WalletConnected() {
7 | const { address } = useAccount();
8 | const { disconnect } = useDisconnect();
9 |
10 | const shortenedAddress = useMemo(() => {
11 | if (!address) return "";
12 | return `${address.slice(0, 6)}...${address.slice(-4)}`;
13 | }, [address]);
14 |
15 | return (
16 |
17 | Connected: {shortenedAddress}
18 |
19 |
20 | );
21 | }
22 |
23 | function ConnectWallet() {
24 | const { connectors, connect } = useConnect();
25 |
26 | return (
27 |
28 | Choose a wallet:
29 | {connectors.map((connector) => {
30 | return (
31 |
38 | );
39 | })}
40 |
41 | );
42 | }
43 |
44 | export default function WalletBar() {
45 | const { address } = useAccount();
46 |
47 | return address ? : ;
48 | }
49 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/next/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
13 | "gradient-conic":
14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
15 | },
16 | },
17 | },
18 | plugins: [],
19 | };
20 | export default config;
21 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/next/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/README.md:
--------------------------------------------------------------------------------
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/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-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 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default tseslint.config({
18 | languageOptions: {
19 | // other options...
20 | parserOptions: {
21 | project: ['./tsconfig.node.json', './tsconfig.app.json'],
22 | tsconfigRootDir: import.meta.dirname,
23 | },
24 | },
25 | })
26 | ```
27 |
28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29 | - Optionally add `...tseslint.configs.stylisticTypeChecked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31 |
32 | ```js
33 | // eslint.config.js
34 | import react from 'eslint-plugin-react'
35 |
36 | export default tseslint.config({
37 | // Set the react version
38 | settings: { react: { version: '18.3' } },
39 | plugins: {
40 | // Add the react plugin
41 | react,
42 | },
43 | rules: {
44 | // other rules...
45 | // Enable its recommended rules
46 | ...react.configs.recommended.rules,
47 | ...react.configs['jsx-runtime'].rules,
48 | },
49 | })
50 | ```
51 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from "@eslint/js";
2 | import reactHooks from "eslint-plugin-react-hooks";
3 | import reactRefresh from "eslint-plugin-react-refresh";
4 | import globals from "globals";
5 | import tseslint from "typescript-eslint";
6 |
7 | export default tseslint.config(
8 | { ignores: ["dist"] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ["**/*.{ts,tsx}"],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | "react-hooks": reactHooks,
18 | "react-refresh": reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | "react-refresh/only-export-components": [
23 | "warn",
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | );
29 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Create Starknet
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@starknet-react/chains": "^3.0.0",
14 | "@starknet-react/core": "^3.0.0",
15 | "get-starknet-core": "^4.0.0",
16 | "starknet": "^7.1.0",
17 | "react": "^18.3.1",
18 | "react-dom": "^18.3.1"
19 | },
20 | "devDependencies": {
21 | "@eslint/js": "^9.9.0",
22 | "@types/react": "^18.3.3",
23 | "@types/react-dom": "^18.3.0",
24 | "@vitejs/plugin-react": "^4.3.1",
25 | "autoprefixer": "^10.4.20",
26 | "eslint": "^9.9.0",
27 | "eslint-plugin-react-hooks": "^5.1.0-rc.0",
28 | "eslint-plugin-react-refresh": "^0.4.9",
29 | "globals": "^15.9.0",
30 | "postcss": "^8.4.41",
31 | "tailwindcss": "^3.4.10",
32 | "typescript": "^5.5.3",
33 | "typescript-eslint": "^8.0.1",
34 | "vite": "^5.4.1"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/src/App.tsx:
--------------------------------------------------------------------------------
1 | // import { useBlock } from "@starknet-react/core";
2 | import Header from "./components/Header";
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
9 | Get started by editing
10 | src/App.tsx
11 |
12 |
50 |
51 | );
52 | }
53 |
54 | export default App;
55 |
--------------------------------------------------------------------------------
/packages/create-starknet/src/templates/vite/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import { useAccount, useDisconnect } from "@starknet-react/core";
2 | import ConnectModal from "./starknet/ConnectModal";
3 |
4 | export default function Header() {
5 | const { address } = useAccount();
6 | const { disconnect } = useDisconnect();
7 |
8 | return (
9 |
10 | {address ? (
11 |
12 |
{`${address.slice(
13 | 0,
14 | 6,
15 | )}...${address.slice(-4)}`}
16 |
disconnect()}
18 | className="cursor-pointer text-black/50"
19 | >
20 | Disconnect
21 |
22 |
23 | ) : (
24 |
25 | )}
26 |
12 |
13 | {isOpen && (
14 |
15 |
16 |
17 |
{title}
18 |
25 |
26 | {children}
27 |
28 |
29 | )}
30 |
6 |
7 |
8 | 
9 |
10 |
11 | 
12 |
13 | 
24 | 
42 |