(id: string): T;
13 | keys(): string[];
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting(),
21 | );
22 |
23 | // Then we find all the tests.
24 | const context = require.context('./', true, /\.spec\.ts$/);
25 | // And load the modules.
26 | context.keys().forEach(context);
27 |
--------------------------------------------------------------------------------
/templates/template-react-vite/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react-vite-new",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@stacks/connect": "7.7.1",
14 | "@stacks/connect-react": "22.4.2",
15 | "@stacks/connect-ui": "6.4.1",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.2.15",
21 | "@types/react-dom": "^18.2.7",
22 | "@vitejs/plugin-react": "^4.0.3",
23 | "eslint": "^8.45.0",
24 | "eslint-plugin-react": "^7.32.2",
25 | "eslint-plugin-react-hooks": "^4.6.0",
26 | "eslint-plugin-react-refresh": "^0.4.3",
27 | "vite": "^4.4.5"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/templates/template-angular/src/app/connect-wallet/connect-wallet.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { showConnect } from '@stacks/connect';
3 | import { userSession } from 'src/stacksUserSession';
4 |
5 | @Component({
6 | selector: 'app-connect-wallet',
7 | templateUrl: './connect-wallet.component.html',
8 | styleUrls: ['./connect-wallet.component.css'],
9 | })
10 | export class ConnectWalletComponent implements OnInit {
11 | constructor() {}
12 |
13 | ngOnInit(): void {}
14 |
15 | public userSession = userSession;
16 |
17 | authenticate() {
18 | showConnect({
19 | appDetails: {
20 | name: 'Stacks Angular Starter',
21 | icon: window.location.origin + '/logo240.png',
22 | },
23 | redirectTo: '/',
24 | onFinish: () => {
25 | window.location.reload();
26 | },
27 | userSession,
28 | });
29 | }
30 |
31 | disconnect() {
32 | userSession.signUserOut('/');
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/templates/template-react-vite-ts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react-vite-ts",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@stacks/connect": "7.7.1",
14 | "@stacks/connect-react": "22.4.2",
15 | "@stacks/connect-ui": "6.4.1",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0"
18 | },
19 | "devDependencies": {
20 | "@types/react": "^18.2.15",
21 | "@types/react-dom": "^18.2.7",
22 | "@typescript-eslint/eslint-plugin": "^6.0.0",
23 | "@typescript-eslint/parser": "^6.0.0",
24 | "@vitejs/plugin-react": "^4.0.3",
25 | "eslint": "^8.45.0",
26 | "eslint-plugin-react-hooks": "^4.6.0",
27 | "eslint-plugin-react-refresh": "^0.4.3",
28 | "typescript": "^5.0.2",
29 | "vite": "^4.4.5"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/templates/template-react-cra-ts/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | button.Connect,
16 | button.Vote {
17 | color: #fff;
18 | font-size: 18px;
19 | font-weight: bold;
20 | }
21 |
22 | button.Connect:hover,
23 | button.Vote:hover {
24 | filter: brightness(1.2);
25 | }
26 |
27 | button.Connect {
28 | background-color: #222;
29 | border: 2px solid #777;
30 | border-radius: 28px;
31 | font-size: 24px;
32 | padding: 16px 24px;
33 | }
34 |
35 | button.Vote {
36 | background-color: rgba(148, 48, 148, 0.2);
37 | border: 2px solid rgb(148, 48, 148);
38 | border-radius: 14px;
39 | padding: 8px 12px;
40 | margin: 4px;
41 | }
42 |
--------------------------------------------------------------------------------
/templates/template-react-cra/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | button.Connect,
16 | button.Vote {
17 | color: #fff;
18 | font-size: 18px;
19 | font-weight: bold;
20 | }
21 |
22 | button.Connect:hover,
23 | button.Vote:hover {
24 | filter: brightness(1.2);
25 | }
26 |
27 | button.Connect {
28 | background-color: #222;
29 | border: 2px solid #777;
30 | border-radius: 28px;
31 | font-size: 24px;
32 | padding: 16px 24px;
33 | }
34 |
35 | button.Vote {
36 | background-color: rgba(148, 48, 148, 0.2);
37 | border: 2px solid rgb(148, 48, 148);
38 | border-radius: 14px;
39 | padding: 8px 12px;
40 | margin: 4px;
41 | }
42 |
--------------------------------------------------------------------------------
/templates/template-react-cra/src/components/ConnectWallet.js:
--------------------------------------------------------------------------------
1 | import { AppConfig, UserSession } from "@stacks/connect";
2 | import { useConnect } from "@stacks/connect-react";
3 |
4 | const appConfig = new AppConfig(["store_write", "publish_data"]);
5 |
6 | export const userSession = new UserSession({ appConfig });
7 |
8 | function disconnect() {
9 | userSession.signUserOut("/");
10 | }
11 |
12 | const ConnectWallet = () => {
13 | const { doAuth } = useConnect();
14 |
15 | if (userSession.isUserSignedIn()) {
16 | return (
17 |
18 |
19 | Disconnect Wallet
20 |
21 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
22 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
23 |
29 | Connect Wallet
30 |
31 | );
32 | };
33 |
34 | export default ConnectWallet;
35 |
--------------------------------------------------------------------------------
/templates/template-svelte/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "bundler",
4 | "target": "ESNext",
5 | "module": "ESNext",
6 | /**
7 | * svelte-preprocess cannot figure out whether you have
8 | * a value or a type, so tell TypeScript to enforce using
9 | * `import type` instead of `import` for Types.
10 | */
11 | "verbatimModuleSyntax": true,
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | * To have warnings / errors of the Svelte compiler at the
16 | * correct position, enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | /**
22 | * Typecheck JS in `.svelte` and `.js` files by default.
23 | * Disable this if you'd like to use dynamic types.
24 | */
25 | "checkJs": true
26 | },
27 | /**
28 | * Use global.d.ts instead of compilerOptions.types
29 | * to avoid limiting type declarations.
30 | */
31 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
32 | }
33 |
--------------------------------------------------------------------------------
/templates/template-svelte/src/components/ConnectWallet.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 | {#if userSession.isUserSignedIn()}
26 |
Disconnect Wallet
27 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
28 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
29 | {:else}
30 |
Connect Wallet
31 | {/if}
32 |
25 | {#if userSession.isUserSignedIn()}
26 |
Disconnect Wallet
27 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
28 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
29 | {:else}
30 |
Connect Wallet
31 | {/if}
32 |
12 | {
21 | window.location.reload();
22 | },
23 | userSession,
24 | }}
25 | >
26 |
28 |
29 | );
30 |
31 | // If you want to start measuring performance in your app, pass a function
32 | // to log results (for example: reportWebVitals(console.log))
33 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
34 | reportWebVitals();
35 |
--------------------------------------------------------------------------------
/templates/template-utils/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 | import { Connect } from "@stacks/connect-react";
7 | import { userSession } from "./userSession";
8 |
9 | const root = ReactDOM.createRoot(document.getElementById("root"));
10 | root.render(
11 |
12 | {
21 | window.location.reload();
22 | },
23 | userSession,
24 | }}
25 | >
26 |
28 |
29 | );
30 |
31 | // If you want to start measuring performance in your app, pass a function
32 | // to log results (for example: reportWebVitals(console.log))
33 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
34 | reportWebVitals();
35 |
--------------------------------------------------------------------------------
/templates/template-sveltekit/README.md:
--------------------------------------------------------------------------------
1 | # create-svelte
2 |
3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4 |
5 | ## Creating a project
6 |
7 | If you're seeing this, you've probably already done this step. Congrats!
8 |
9 | ```bash
10 | # create a new project in the current directory
11 | npm create svelte@latest
12 |
13 | # create a new project in my-app
14 | npm create svelte@latest my-app
15 | ```
16 |
17 | ## Developing
18 |
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 |
21 | ```bash
22 | npm run dev
23 |
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 |
28 | ## Building
29 |
30 | To create a production version of your app:
31 |
32 | ```bash
33 | npm run build
34 | ```
35 |
36 | You can preview the production build with `npm run preview`.
37 |
38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39 |
--------------------------------------------------------------------------------
/templates/template-react-cra/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 |
7 | import { Connect } from "@stacks/connect-react";
8 |
9 | import { userSession } from "./components/ConnectWallet";
10 |
11 | const root = ReactDOM.createRoot(document.getElementById("root"));
12 | root.render(
13 |
14 | {
22 | window.location.reload();
23 | },
24 | userSession,
25 | }}
26 | >
27 |
29 |
30 | );
31 |
32 | // If you want to start measuring performance in your app, pass a function
33 | // to log results (for example: reportWebVitals(console.log))
34 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
35 | reportWebVitals();
36 |
--------------------------------------------------------------------------------
/templates/template-sveltekit-ts/README.md:
--------------------------------------------------------------------------------
1 | # create-svelte
2 |
3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4 |
5 | ## Creating a project
6 |
7 | If you're seeing this, you've probably already done this step. Congrats!
8 |
9 | ```bash
10 | # create a new project in the current directory
11 | npm create svelte@latest
12 |
13 | # create a new project in my-app
14 | npm create svelte@latest my-app
15 | ```
16 |
17 | ## Developing
18 |
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 |
21 | ```bash
22 | npm run dev
23 |
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 |
28 | ## Building
29 |
30 | To create a production version of your app:
31 |
32 | ```bash
33 | npm run build
34 | ```
35 |
36 | You can preview the production build with `npm run preview`.
37 |
38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39 |
--------------------------------------------------------------------------------
/templates/template-angular/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async () => {
6 | await TestBed.configureTestingModule({
7 | declarations: [AppComponent],
8 | }).compileComponents();
9 | });
10 |
11 | it('should create the app', () => {
12 | const fixture = TestBed.createComponent(AppComponent);
13 | const app = fixture.componentInstance;
14 | expect(app).toBeTruthy();
15 | });
16 |
17 | it(`should have as title 'stacks-angular'`, () => {
18 | const fixture = TestBed.createComponent(AppComponent);
19 | const app = fixture.componentInstance;
20 | expect(app.title).toEqual('stacks-angular');
21 | });
22 |
23 | it('should render title', () => {
24 | const fixture = TestBed.createComponent(AppComponent);
25 | fixture.detectChanges();
26 | const compiled = fixture.nativeElement as HTMLElement;
27 | expect(compiled.querySelector('.content span')?.textContent).toContain(
28 | 'stacks-angular app is running!'
29 | );
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/templates/template-angular/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/templates/template-react-cra-ts/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 | import reportWebVitals from "./reportWebVitals";
6 |
7 | import { Connect } from "@stacks/connect-react";
8 |
9 | import { userSession } from "./components/ConnectWallet";
10 |
11 | const root = ReactDOM.createRoot(
12 | document.getElementById("root") as HTMLElement
13 | );
14 | root.render(
15 |
16 | {
24 | window.location.reload();
25 | },
26 | userSession,
27 | }}
28 | >
29 |
31 |
32 | );
33 |
34 | // If you want to start measuring performance in your app, pass a function
35 | // to log results (for example: reportWebVitals(console.log))
36 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
37 | reportWebVitals();
38 |
--------------------------------------------------------------------------------
/templates/template-react-cra/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react-cra",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@stacks/connect": "7.7.1",
7 | "@stacks/connect-react": "22.4.2",
8 | "@stacks/connect-ui": "6.4.1",
9 | "@testing-library/jest-dom": "^5.17.0",
10 | "@testing-library/react": "^13.4.0",
11 | "@testing-library/user-event": "^13.5.0",
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "react-scripts": "5.0.1",
15 | "web-vitals": "^2.1.4"
16 | },
17 | "scripts": {
18 | "start": "react-scripts start",
19 | "dev": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/templates/template-react-vite-ts/src/components/ConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | import { showConnect } from "@stacks/connect";
2 |
3 | import { userSession } from "../user-session";
4 |
5 | function authenticate() {
6 | showConnect({
7 | appDetails: {
8 | name: "Stacks React Starter",
9 | icon: window.location.origin + "/logo512.png",
10 | },
11 | redirectTo: "/",
12 | onFinish: () => {
13 | window.location.reload();
14 | },
15 | userSession,
16 | });
17 | }
18 |
19 | function disconnect() {
20 | userSession.signUserOut("/");
21 | }
22 |
23 | const ConnectWallet = () => {
24 | if (userSession.isUserSignedIn()) {
25 | return (
26 |
27 |
28 | Disconnect Wallet
29 |
30 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
31 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
32 |
38 | Connect Wallet
39 |
40 | );
41 | };
42 |
43 | export default ConnectWallet;
44 |
--------------------------------------------------------------------------------
/templates/template-react-vite/src/components/ConnectWallet.jsx:
--------------------------------------------------------------------------------
1 | import { showConnect } from "@stacks/connect";
2 |
3 | import { userSession } from "../user-session";
4 |
5 | function authenticate() {
6 | showConnect({
7 | appDetails: {
8 | name: "Stacks React Starter",
9 | icon: window.location.origin + "/logo512.png",
10 | },
11 | redirectTo: "/",
12 | onFinish: () => {
13 | window.location.reload();
14 | },
15 | userSession,
16 | });
17 | }
18 |
19 | function disconnect() {
20 | userSession.signUserOut("/");
21 | }
22 |
23 | const ConnectWallet = () => {
24 | if (userSession.isUserSignedIn()) {
25 | return (
26 |
27 |
28 | Disconnect Wallet
29 |
30 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
31 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
32 |
38 | Connect Wallet
39 |
40 | );
41 | };
42 |
43 | export default ConnectWallet;
44 |
--------------------------------------------------------------------------------
/templates/template-angular/README.md:
--------------------------------------------------------------------------------
1 | # StacksAngular
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
28 |
--------------------------------------------------------------------------------
/templates/template-demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@stacks/connect": "7.7.1",
7 | "@stacks/connect-react": "22.4.2",
8 | "@stacks/connect-ui": "6.4.1",
9 | "@stacks/network": "^6.1.0",
10 | "@stacks/transactions": "^6.1.0",
11 | "@testing-library/jest-dom": "^5.16.5",
12 | "@testing-library/react": "^13.4.0",
13 | "@testing-library/user-event": "^14.4.3",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-scripts": "^5.0.1",
17 | "web-vitals": "^3.1.1"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | "chrome >= 67",
34 | "edge >= 79",
35 | "firefox >= 68",
36 | "opera >= 54",
37 | "safari >= 14"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/templates/template-vue-ts/src/components/StacksConnectWallet.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
Disconnect Wallet
27 |
mainnet: {{ userSession.loadUserData().profile.stxAddress.mainnet }}
28 |
testnet: {{ userSession.loadUserData().profile.stxAddress.testnet }}
29 |
31 | Connect Wallet
32 |
33 |
34 |
35 |
49 |
--------------------------------------------------------------------------------
/templates/template-sveltekit/src/lib/ConnectWallet.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 | {#if userSession.isUserSignedIn()}
26 |
Disconnect Wallet
27 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
28 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
29 | {:else}
30 |
Connect Wallet
31 | {/if}
32 |
25 | {#if userSession.isUserSignedIn()}
26 |
Disconnect Wallet
27 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
28 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
29 | {:else}
30 |
Connect Wallet
31 | {/if}
32 |
30 |
31 | Disconnect Wallet
32 |
33 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
34 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
35 |
41 | Connect Wallet
42 |
43 | );
44 | };
45 |
46 | export default ConnectWallet;
47 |
--------------------------------------------------------------------------------
/templates/template-vue/src/components/StacksConnectWallet.vue:
--------------------------------------------------------------------------------
1 |
23 |
24 |
25 |
26 |
27 | Disconnect Wallet
28 |
29 |
mainnet: {{ userSession.loadUserData().profile.stxAddress.mainnet }}
30 |
testnet: {{ userSession.loadUserData().profile.stxAddress.testnet }}
31 |
33 |
34 | Connect Wallet
35 |
36 |
37 |
38 |
39 |
53 |
--------------------------------------------------------------------------------
/templates/template-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@stacks/connect": "7.7.1",
7 | "@stacks/connect-react": "22.4.2",
8 | "@stacks/connect-ui": "6.4.1",
9 | "@stacks/network": "^6.1.0",
10 | "@stacks/transactions": "^6.14.1-pr.a4893189.3",
11 | "@testing-library/jest-dom": "^5.16.5",
12 | "@testing-library/react": "^13.4.0",
13 | "@testing-library/user-event": "^14.4.3",
14 | "react": "^18.2.0",
15 | "react-dom": "^18.2.0",
16 | "react-scripts": "^5.0.1",
17 | "web-vitals": "^3.1.1"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test",
23 | "eject": "react-scripts eject"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app",
28 | "react-app/jest"
29 | ]
30 | },
31 | "browserslist": {
32 | "production": [
33 | "chrome >= 67",
34 | "edge >= 79",
35 | "firefox >= 68",
36 | "opera >= 54",
37 | "safari >= 14"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | },
45 | "devDependencies": {
46 | "tailwindcss": "^3.4.3"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/templates/template-react-cra-ts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "template-react-cra-ts",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@stacks/connect": "7.7.1",
7 | "@stacks/connect-react": "22.4.2",
8 | "@stacks/connect-ui": "6.4.1",
9 | "@testing-library/jest-dom": "^5.17.0",
10 | "@testing-library/react": "^13.4.0",
11 | "@testing-library/user-event": "^13.5.0",
12 | "@types/jest": "^27.5.2",
13 | "@types/node": "^16.18.59",
14 | "@types/react": "^18.2.29",
15 | "@types/react-dom": "^18.2.14",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0",
18 | "react-scripts": "5.0.1",
19 | "typescript": "^4.9.5",
20 | "web-vitals": "^2.1.4"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "dev": "react-scripts start",
25 | "build": "react-scripts build",
26 | "test": "react-scripts test",
27 | "eject": "react-scripts eject"
28 | },
29 | "eslintConfig": {
30 | "extends": [
31 | "react-app",
32 | "react-app/jest"
33 | ]
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/templates/template-react-nextjs/public/next.svg:
--------------------------------------------------------------------------------
1 |
4 |
Stacks.js Demo 👋
5 |
6 | This starter walks-through the basic functionality provided by{" "}
7 | Stacks.js
8 |
9 |
10 | Start by editing the components in src/tabs/
11 |
12 |
13 |
19 | Hiro Docs
20 |
21 |
27 | Stacks.js Reference
28 |
29 |
30 | Some features require tokens to execute. All the features shown here
31 | are configured to use the testnet. You can get free
32 | testnet-STX tokens from the{" "}
33 |
38 | Faucet in the Stacks Explorer
39 |
40 | .
41 |
42 |
43 |
22 |
23 |
Try Out the Features
24 | {Object.keys(tabs).map((k) => (
25 | setTab(k)}
29 | disabled={!tabs[k] || (k !== initial && !isConnected)}
30 | title={
31 | !tabs[k]
32 | ? "Coming soon"
33 | : isConnected
34 | ? k
35 | : "Connect wallet first"
36 | }
37 | >
38 | {k}
39 |
40 | ))}
41 |
42 |
43 |
44 |
35 |
36 | Disconnect Wallet
37 |
38 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
39 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
40 |
46 | Connect Wallet
47 |
48 | );
49 | };
50 |
51 | export default ConnectWallet;
52 |
--------------------------------------------------------------------------------
/templates/template-react-nextjs-ts/src/components/ConnectWallet.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import { AppConfig, showConnect, UserSession } from "@stacks/connect";
5 |
6 | const appConfig = new AppConfig(["store_write", "publish_data"]);
7 |
8 | export const userSession = new UserSession({ appConfig });
9 |
10 | function authenticate() {
11 | showConnect({
12 | appDetails: {
13 | name: "Stacks Next.js Starter",
14 | icon: window.location.origin + "/logo512.png",
15 | },
16 | redirectTo: "/",
17 | onFinish: () => {
18 | window.location.reload();
19 | },
20 | userSession,
21 | });
22 | }
23 |
24 | function disconnect() {
25 | userSession.signUserOut("/");
26 | }
27 |
28 | const ConnectWallet = () => {
29 | const [mounted, setMounted] = useState(false);
30 | useEffect(() => setMounted(true), []);
31 |
32 | if (mounted && userSession.isUserSignedIn()) {
33 | return (
34 |
35 |
36 | Disconnect Wallet
37 |
38 |
mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}
39 |
testnet: {userSession.loadUserData().profile.stxAddress.testnet}
40 |
46 | Connect Wallet
47 |
48 | );
49 | };
50 |
51 | export default ConnectWallet;
52 |
--------------------------------------------------------------------------------
/templates/template-svelte/src/components/ContractVote.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 | {#if userSession.isUserSignedIn()}
38 |
39 |
Vote via Smart Contract
40 |
vote("🍊")}> Vote for 🍊
41 |
vote("🍎")}> Vote for 🍎
42 |
9 |
17 |
18 |
19 |
20 |
25 |
26 |
27 | Visit the Stacks.js
28 | official repository
34 | and library reference for
35 | more information.
36 |
37 |
38 |
40 |
41 |
55 |
--------------------------------------------------------------------------------
/templates/template-react-cra/src/App.js:
--------------------------------------------------------------------------------
1 | import logo from "./logo.svg";
2 | import "./App.css";
3 |
4 | import ConnectWallet from "./components/ConnectWallet";
5 | import ContractCallVote from "./components/ContractCallVote";
6 |
7 | function App() {
8 | return (
9 |
50 | );
51 | }
52 |
53 | export default App;
54 |
--------------------------------------------------------------------------------
/templates/template-svelte-ts/src/components/ContractVote.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 | {#if userSession.isUserSignedIn()}
38 |
39 |
Vote via Smart Contract
40 |
vote("🍊")}> Vote for 🍊
41 |
vote("🍎")}> Vote for 🍎
42 |
9 |
17 |
18 |
19 |
20 |
25 |
26 |
27 | Visit the Stacks.js
28 | official repository
34 | and library reference for
35 | more information.
36 |
37 |
38 |
40 |
41 |
55 |
--------------------------------------------------------------------------------
/templates/template-react-cra-ts/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import logo from "./logo.svg";
3 | import "./App.css";
4 |
5 | import ConnectWallet from "./components/ConnectWallet";
6 | import ContractCallVote from "./components/ContractCallVote";
7 |
8 | function App() {
9 | return (
10 |
51 | );
52 | }
53 |
54 | export default App;
55 |
--------------------------------------------------------------------------------
/templates/template-vue-ts/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + TypeScript + Vite
2 |
3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `
36 |
37 |
38 |
39 |
Vote via Smart Contract
40 |
Vote for 🍊
41 |
Vote for 🍎
42 |
44 |
45 |
58 |
--------------------------------------------------------------------------------
/templates/template-vue-ts/src/components/StacksContractVote.vue:
--------------------------------------------------------------------------------
1 |
36 |
37 |
38 |
39 |
Vote via Smart Contract
40 |
Vote for 🍊
41 |
Vote for 🍎
42 |
44 |
45 |
58 |
--------------------------------------------------------------------------------
/templates/template-react-cra/src/components/ContractCallVote.js:
--------------------------------------------------------------------------------
1 | import { useConnect } from "@stacks/connect-react";
2 | import { StacksTestnet } from "@stacks/network";
3 | import {
4 | AnchorMode,
5 | PostConditionMode,
6 | stringUtf8CV,
7 | } from "@stacks/transactions";
8 | import { userSession } from "./ConnectWallet";
9 |
10 | const ContractCallVote = () => {
11 | const { doContractCall } = useConnect();
12 |
13 | function vote(pick) {
14 | doContractCall({
15 | network: new StacksTestnet(),
16 | anchorMode: AnchorMode.Any,
17 | contractAddress: "ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK",
18 | contractName: "example-fruit-vote-contract",
19 | functionName: "vote",
20 | functionArgs: [stringUtf8CV(pick)],
21 | postConditionMode: PostConditionMode.Deny,
22 | postConditions: [],
23 | onFinish: (data) => {
24 | console.log("onFinish:", data);
25 | window
26 | .open(
27 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`,
28 | "_blank"
29 | )
30 | .focus();
31 | },
32 | onCancel: () => {
33 | console.log("onCancel:", "Transaction was canceled");
34 | },
35 | });
36 | }
37 |
38 | if (!userSession.isUserSignedIn()) {
39 | return null;
40 | }
41 |
42 | return (
43 |
44 |
Vote via Smart Contract
45 |
vote("🍊")}>
46 | Vote for 🍊
47 |
48 |
vote("🍎")}>
49 | Vote for 🍎
50 |
51 |
45 |
Vote via Smart Contract
46 |
vote("🍊")}>
47 | Vote for 🍊
48 |
49 |
vote("🍎")}>
50 | Vote for 🍎
51 |
52 |
44 |
Vote via Smart Contract
45 |
vote("🍊")}>
46 | Vote for 🍊
47 |
48 |
vote("🍎")}>
49 | Vote for 🍎
50 |
51 |
45 |
Vote via Smart Contract
46 |
vote("🍊")}>
47 | Vote for 🍊
48 |
49 |
vote("🍎")}>
50 | Vote for 🍎
51 |
52 |
39 |
Vote via Smart Contract
40 |
vote("🍊")}> Vote for 🍊
41 |
vote("🍎")}> Vote for 🍎
42 |
39 |
Vote via Smart Contract
40 |
vote("🍊")}> Vote for 🍊
41 |
vote("🍎")}> Vote for 🍎
42 |
21 |
22 | STX Unit Converter
23 |
24 |
25 |
26 | STX
27 |
28 |
35 |
36 |
37 | microSTX
38 |
39 |
46 |
Vite + React + Stacks.js 👋
20 |
21 | {/* ConnectWallet file: `./src/components/ConnectWallet.js` */}
22 |
49 |
50 | Edit src/App.jsx and save to test HMR
51 |
52 |
54 | Click on the Vite and React logos to learn more
55 |
56 |
57 | );
58 | }
59 |
60 | export default App;
61 |
--------------------------------------------------------------------------------
/templates/template-react-vite-ts/src/App.tsx:
--------------------------------------------------------------------------------
1 | import reactLogo from "./assets/react.svg";
2 | import viteLogo from "/vite.svg";
3 | import "./App.css";
4 | import ConnectWallet from "./components/ConnectWallet";
5 | import ContractCallVote from "./components/ContractCallVote";
6 |
7 | function App() {
8 | return (
9 | <>
10 |
18 |
19 | Vite + React + Stacks.js 👋
20 |
21 | {/* ConnectWallet file: `./src/components/ConnectWallet.js` */}
22 |
49 |
50 | Edit src/App.jsx and save to test HMR
51 |
52 |
54 | Click on the Vite and React logos to learn more
55 |
56 |
57 | );
58 | }
59 |
60 | export default App;
61 |
--------------------------------------------------------------------------------
/templates/template-react-nextjs/src/components/ContractCallVote.js:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import { useConnect } from "@stacks/connect-react";
5 | import { StacksTestnet } from "@stacks/network";
6 | import {
7 | AnchorMode,
8 | PostConditionMode,
9 | stringUtf8CV,
10 | } from "@stacks/transactions";
11 | import { userSession } from "./ConnectWallet";
12 |
13 | const ContractCallVote = () => {
14 | const { doContractCall } = useConnect();
15 |
16 | const [mounted, setMounted] = useState(false);
17 | useEffect(() => setMounted(true), []);
18 |
19 | function vote(pick) {
20 | doContractCall({
21 | network: new StacksTestnet(),
22 | anchorMode: AnchorMode.Any,
23 | contractAddress: "ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK",
24 | contractName: "example-fruit-vote-contract",
25 | functionName: "vote",
26 | functionArgs: [stringUtf8CV(pick)],
27 | postConditionMode: PostConditionMode.Deny,
28 | postConditions: [],
29 | onFinish: (data) => {
30 | console.log("onFinish:", data);
31 | window
32 | .open(
33 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`,
34 | "_blank"
35 | )
36 | .focus();
37 | },
38 | onCancel: () => {
39 | console.log("onCancel:", "Transaction was canceled");
40 | },
41 | });
42 | }
43 |
44 | if (!mounted || !userSession.isUserSignedIn()) {
45 | return null;
46 | }
47 |
48 | return (
49 |
50 |
Vote via Smart Contract
51 | vote("🍊")}>
52 | Vote for 🍊
53 |
54 | vote("🍎")}>
55 | Vote for 🍎
56 |
57 |
58 | );
59 | };
60 |
61 | export default ContractCallVote;
62 |
--------------------------------------------------------------------------------
/templates/template-svelte/src/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
17 |
18 | Svelte + Stacks.js 👋
19 |
20 |
21 |
27 | Visit the Stacks.js
28 | official repository
33 | and library reference for
34 | more information.
35 |
36 |
37 |
38 | Check out SvelteKit , the official Svelte app framework powered by Vite!
43 |
44 |
45 | Click on the Vite and Svelte logos to learn more
46 |
47 |
48 |
65 |
--------------------------------------------------------------------------------
/templates/template-react-cra/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/templates/template-react-nextjs-ts/src/components/ContractCallVote.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import { useConnect } from "@stacks/connect-react";
5 | import { StacksTestnet } from "@stacks/network";
6 | import {
7 | AnchorMode,
8 | PostConditionMode,
9 | stringUtf8CV,
10 | } from "@stacks/transactions";
11 | import { userSession } from "./ConnectWallet";
12 |
13 | const ContractCallVote = () => {
14 | const { doContractCall } = useConnect();
15 |
16 | const [mounted, setMounted] = useState(false);
17 | useEffect(() => setMounted(true), []);
18 |
19 | function vote(pick: string) {
20 | doContractCall({
21 | network: new StacksTestnet(),
22 | anchorMode: AnchorMode.Any,
23 | contractAddress: "ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK",
24 | contractName: "example-fruit-vote-contract",
25 | functionName: "vote",
26 | functionArgs: [stringUtf8CV(pick)],
27 | postConditionMode: PostConditionMode.Deny,
28 | postConditions: [],
29 | onFinish: (data) => {
30 | console.log("onFinish:", data);
31 | window
32 | .open(
33 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`,
34 | "_blank"
35 | )
36 | ?.focus();
37 | },
38 | onCancel: () => {
39 | console.log("onCancel:", "Transaction was canceled");
40 | },
41 | });
42 | }
43 |
44 | if (!mounted || !userSession.isUserSignedIn()) {
45 | return null;
46 | }
47 |
48 | return (
49 |
50 |
Vote via Smart Contract
51 | vote("🍊")}>
52 | Vote for 🍊
53 |
54 | vote("🍎")}>
55 | Vote for 🍎
56 |
57 |
58 | );
59 | };
60 |
61 | export default ContractCallVote;
62 |
--------------------------------------------------------------------------------
/templates/template-react-cra-ts/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
28 |
29 |
30 | You need to enable JavaScript to run this app.
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/templates/template-svelte-ts/src/App.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
17 |
18 | Svelte + Stacks.js 👋
19 |
20 |
21 |
27 | Visit the Stacks.js
28 | official repository
33 | and library reference for
34 | more information.
35 |
36 |
37 |
38 | Check out SvelteKit , the official Svelte app framework powered by Vite!
43 |
44 |
45 | Click on the Vite and Svelte logos to learn more
46 |
47 |
48 |
65 |
--------------------------------------------------------------------------------
/templates/template-svelte/src/assets/svelte.svg:
--------------------------------------------------------------------------------
1 |
34 | {/* intro */}
35 |
Connecting a Wallet
36 |
37 | First we need to connect a Stacks wallet using the{" "}
38 | @stacks/connect package. Calling showConnect{" "}
39 | (used by the "Connect Wallet" button below) will trigger the wallet
40 | popup to open and allow you to select an account.
41 |
42 | {/* example */}
43 |
44 | {isUserSignedIn ? (
45 |
Wallet is currently connected! 🎉
46 | ) : (
47 |
Wallet is currently NOT connected!
48 | )}
49 |
50 |
51 |
Connect Wallet
52 |
53 |
54 |
Disconnect Wallet
55 |
56 | isUserSignedIn: {" "}
57 | {isUserSignedIn.toString()}
58 |
59 |
60 | address : {truncatedAddress}
61 |
62 |
63 | {/* file name */}
64 |
65 | tabs/ConnectWallet.js
66 |
67 |
68 |
12 | 
15 |