├── .gitignore ├── ATTRIBUTION.md ├── LICENSE ├── README.md ├── index.js ├── misc ├── icons │ ├── angular.png │ ├── nextjs.png │ ├── react.png │ ├── svelte.png │ └── vue.png ├── publish └── update ├── package-lock.json ├── package.json ├── templates ├── template-angular │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── .vscode │ │ ├── extensions.json │ │ ├── launch.json │ │ └── tasks.json │ ├── README.md │ ├── angular.json │ ├── karma.conf.js │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── connect-wallet │ │ │ │ ├── connect-wallet.component.css │ │ │ │ ├── connect-wallet.component.html │ │ │ │ ├── connect-wallet.component.spec.ts │ │ │ │ └── connect-wallet.component.ts │ │ │ └── contract-vote │ │ │ │ ├── contract-vote.component.css │ │ │ │ ├── contract-vote.component.html │ │ │ │ ├── contract-vote.component.spec.ts │ │ │ │ └── contract-vote.component.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ └── logo240.png │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── stacksUserSession.ts │ │ ├── styles.css │ │ ├── test.ts │ │ └── typings.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── template-demo │ ├── .gitignore │ ├── README.md │ ├── best │ ├── deleteme │ ├── deleteme2 │ ├── deleteme21 │ ├── deleteme24 │ ├── foo │ ├── foobar │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.js │ │ ├── App.test.js │ │ ├── extra │ │ ├── AppIntro.js │ │ ├── AppTabs.js │ │ └── AppTransactions.js │ │ ├── index.css │ │ ├── index.js │ │ ├── reportWebVitals.js │ │ ├── setupTests.js │ │ ├── tabs │ │ ├── ConnectWallet.js │ │ └── ContractCallVote.js │ │ └── userSession.js ├── template-react-cra-ts │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── components │ │ │ ├── ConnectWallet.tsx │ │ │ └── ContractCallVote.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── reportWebVitals.ts │ │ └── setupTests.ts │ └── tsconfig.json ├── template-react-cra │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ ├── ConnectWallet.js │ │ └── ContractCallVote.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── template-react-nextjs-ts │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ ├── src │ │ ├── app │ │ │ ├── favicon.ico │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ ├── page.module.css │ │ │ └── page.tsx │ │ └── components │ │ │ ├── ConnectWallet.tsx │ │ │ └── ContractCallVote.tsx │ └── tsconfig.json ├── template-react-nextjs │ ├── .gitignore │ ├── README.md │ ├── jsconfig.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ └── src │ │ ├── app │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── layout.js │ │ ├── page.js │ │ └── page.module.css │ │ └── components │ │ ├── ConnectWallet.js │ │ └── ContractCallVote.js ├── template-react-vite-ts │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── ConnectWallet.tsx │ │ │ └── ContractCallVote.tsx │ │ ├── index.css │ │ ├── main.tsx │ │ ├── user-session.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── template-react-vite │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── ConnectWallet.jsx │ │ │ └── ContractCallVote.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ └── user-session.js │ └── vite.config.js ├── template-svelte-ts │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── app.css │ │ ├── assets │ │ │ └── svelte.svg │ │ ├── components │ │ │ ├── ConnectWallet.svelte │ │ │ └── ContractVote.svelte │ │ ├── lib │ │ │ └── Counter.svelte │ │ ├── main.ts │ │ ├── stacksUserSession.ts │ │ └── vite-env.d.ts │ ├── svelte.config.js │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── template-svelte │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.svelte │ │ ├── app.css │ │ ├── assets │ │ │ └── svelte.svg │ │ ├── components │ │ │ ├── ConnectWallet.svelte │ │ │ └── ContractVote.svelte │ │ ├── lib │ │ │ └── Counter.svelte │ │ ├── main.js │ │ ├── stacksUserSession.js │ │ └── vite-env.d.ts │ ├── svelte.config.js │ └── vite.config.js ├── template-sveltekit-ts │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── lib │ │ │ ├── ConnectWallet.svelte │ │ │ ├── ContractVote.svelte │ │ │ ├── index.ts │ │ │ └── stacksUserSession.ts │ │ └── routes │ │ │ └── +page.svelte │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── template-sveltekit │ ├── .gitignore │ ├── .npmrc │ ├── README.md │ ├── jsconfig.json │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── lib │ │ │ ├── ConnectWallet.svelte │ │ │ ├── ContractVote.svelte │ │ │ ├── index.js │ │ │ └── stacksUserSession.js │ │ └── routes │ │ │ └── +page.svelte │ ├── static │ │ └── favicon.png │ ├── svelte.config.js │ └── vite.config.js ├── template-utils │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Intro.js │ │ ├── index.css │ │ ├── index.js │ │ ├── reportWebVitals.js │ │ ├── setupTests.js │ │ ├── userSession.js │ │ └── utils │ │ │ ├── 01-Unit.js │ │ │ └── 02-ClarityEncoder.js │ └── tailwind.config.js ├── template-vue-ts │ ├── .gitignore │ ├── .vscode │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── vue.svg │ │ ├── components │ │ │ ├── HelloWorld.vue │ │ │ ├── StacksConnectWallet.vue │ │ │ └── StacksContractVote.vue │ │ ├── main.ts │ │ ├── stacksUserSession.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── template-vue │ ├── .gitignore │ ├── .vscode │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── HelloWorld.vue │ │ ├── StacksConnectWallet.vue │ │ └── StacksContractVote.vue │ ├── main.js │ ├── stacksUserSession.js │ └── style.css │ └── vite.config.js ├── tsconfig.json └── vercel.json /misc/icons/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/misc/icons/angular.png -------------------------------------------------------------------------------- /misc/icons/nextjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/misc/icons/nextjs.png -------------------------------------------------------------------------------- /misc/icons/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/misc/icons/react.png -------------------------------------------------------------------------------- /misc/icons/svelte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/misc/icons/svelte.png -------------------------------------------------------------------------------- /misc/icons/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/misc/icons/vue.png -------------------------------------------------------------------------------- /misc/publish: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # - requires `sed` in path 3 | 4 | # publish `create-stacks` 5 | npm publish 6 | 7 | # rename `create-stacks` to `create-stacks-app` and publish 8 | sed -i '' -e 's/\(.*\)\"name\": \"create-stacks\"\(.*\)/\1"name": "create-stacks-app"\2/g' package.json 9 | npm publish 10 | 11 | # undo rename 12 | sed -i '' -e 's/\(.*\)\"name\": \"create-stacks-app\"\(.*\)/\1"name": "create-stacks"\2/g' package.json 13 | -------------------------------------------------------------------------------- /misc/update: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | for dir in ./templates/*; do (cd "$dir" && echo "$dir" && npm install @stacks/connect@latest @stacks/connect-react@latest @stacks/connect-ui@latest); done 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-stacks", 3 | "version": "0.1.20", 4 | "description": "Quickly bootstrap frontend applications with Stacks.js", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "mkdir -p public && echo 'hi mom' > public/index.html", 9 | "release": "./misc/publish" 10 | }, 11 | "author": "hirosystems", 12 | "license": "MIT", 13 | "dependencies": { 14 | "kolorist": "^1.5.1", 15 | "minimist": "^1.2.6", 16 | "prompts": "^2.4.2" 17 | }, 18 | "bin": { 19 | "create-stacks": "index.js" 20 | }, 21 | "files": [ 22 | "index.js", 23 | "templates/" 24 | ], 25 | "engines": { 26 | "node": ">=12.0.0" 27 | }, 28 | "devDependencies": { 29 | "regenerator-runtime": "^0.13.9" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /templates/template-angular/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /templates/template-angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /templates/template-angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /templates/template-angular/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /templates/template-angular/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "pwa-chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | }, 12 | { 13 | "name": "ng test", 14 | "type": "chrome", 15 | "request": "launch", 16 | "preLaunchTask": "npm: test", 17 | "url": "http://localhost:9876/debug.html" 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /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-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-angular/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: "", 7 | frameworks: ["jasmine", "@angular-devkit/build-angular"], 8 | plugins: [ 9 | require("karma-jasmine"), 10 | require("karma-chrome-launcher"), 11 | require("karma-jasmine-html-reporter"), 12 | require("karma-coverage"), 13 | require("@angular-devkit/build-angular/plugins/karma"), 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true, // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require("path").join(__dirname, "./coverage/stacks-angular"), 29 | subdir: ".", 30 | reporters: [{ type: "html" }, { type: "text-summary" }], 31 | }, 32 | reporters: ["progress", "kjhtml"], 33 | port: 9876, 34 | colors: true, 35 | logLevel: config.LOG_INFO, 36 | autoWatch: true, 37 | browsers: ["Chrome"], 38 | singleRun: false, 39 | restartOnFileChange: true, 40 | }); 41 | }; 42 | -------------------------------------------------------------------------------- /templates/template-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stacks-angular", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "^14.1.0", 15 | "@angular/common": "^14.1.0", 16 | "@angular/compiler": "^14.1.0", 17 | "@angular/core": "^14.1.0", 18 | "@angular/forms": "^14.1.0", 19 | "@angular/platform-browser": "^14.1.0", 20 | "@angular/platform-browser-dynamic": "^14.1.0", 21 | "@angular/router": "^14.1.0", 22 | "@stacks/connect": "7.7.1", 23 | "@stacks/connect-react": "22.4.2", 24 | "@stacks/connect-ui": "6.4.1", 25 | "@stacks/network": "^6.1.0", 26 | "@stacks/transactions": "^6.1.0", 27 | "core-js": "3.24.0", 28 | "rxjs": "7.5.6", 29 | "tslib": "2.4.0", 30 | "zone.js": "0.11.7" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/build-angular": "^14.1.0", 34 | "@angular/cli": "^14.1.0", 35 | "@angular/compiler-cli": "^14.1.0", 36 | "@angular/language-service": "^14.1.0", 37 | "@types/jasmine": "4.0.3", 38 | "@types/jasminewd2": "2.0.10", 39 | "@types/node": "18.6.2", 40 | "codelyzer": "6.0.2", 41 | "jasmine-core": "4.3.0", 42 | "jasmine-spec-reporter": "7.0.0", 43 | "karma": "6.4.0", 44 | "karma-chrome-launcher": "3.1.1", 45 | "karma-coverage-istanbul-reporter": "3.0.3", 46 | "karma-jasmine": "5.1.0", 47 | "karma-jasmine-html-reporter": "2.0.0", 48 | "protractor": "7.0.0", 49 | "ts-node": "10.9.1", 50 | "tslint": "~6.1.3", 51 | "typescript": "4.7.4" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-angular/src/app/app.component.css -------------------------------------------------------------------------------- /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/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | title = 'stacks-angular'; 10 | } 11 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | import { ConnectWalletComponent } from './connect-wallet/connect-wallet.component'; 6 | import { ContractVoteComponent } from './contract-vote/contract-vote.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | ConnectWalletComponent, 12 | ContractVoteComponent 13 | ], 14 | imports: [ 15 | BrowserModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/connect-wallet/connect-wallet.component.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin-top: 8px; 3 | } 4 | 5 | button { 6 | margin: 8px; 7 | background-color: #333; 8 | border: 2px solid #777; 9 | border-radius: 28px; 10 | font-size: 18px; 11 | padding: 16px 24px; 12 | } 13 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/connect-wallet/connect-wallet.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 7 |

mainnet: {{ userSession.loadUserData().profile.stxAddress.mainnet }}

8 |

testnet: {{ userSession.loadUserData().profile.stxAddress.testnet }}

9 |
10 | 11 | 12 |
13 | 16 |
17 | 18 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/connect-wallet/connect-wallet.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ConnectWalletComponent } from './connect-wallet.component'; 4 | 5 | describe('ConnectWalletComponent', () => { 6 | let component: ConnectWalletComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ConnectWalletComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ConnectWalletComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /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-angular/src/app/contract-vote/contract-vote.component.css: -------------------------------------------------------------------------------- 1 | div { 2 | margin-top: 16px; 3 | } 4 | 5 | button { 6 | color: #772078; 7 | background-color: rgba(148, 48, 148, 0.2); 8 | border: 2px solid rgb(148, 48, 148); 9 | border-radius: 14px; 10 | padding: 8px 12px; 11 | margin: 4px; 12 | } 13 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/contract-vote/contract-vote.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

Vote via Smart Contract

4 | 5 | 6 |
7 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/contract-vote/contract-vote.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContractVoteComponent } from './contract-vote.component'; 4 | 5 | describe('ContractVoteComponent', () => { 6 | let component: ContractVoteComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ContractVoteComponent ] 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(ContractVoteComponent); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /templates/template-angular/src/app/contract-vote/contract-vote.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { openContractCall } from '@stacks/connect'; 3 | import { StacksTestnet } from '@stacks/network'; 4 | import { 5 | AnchorMode, 6 | PostConditionMode, 7 | stringUtf8CV, 8 | } from '@stacks/transactions'; 9 | import { userSession } from 'src/stacksUserSession'; 10 | 11 | @Component({ 12 | selector: 'app-contract-vote', 13 | templateUrl: './contract-vote.component.html', 14 | styleUrls: ['./contract-vote.component.css'], 15 | }) 16 | export class ContractVoteComponent implements OnInit { 17 | constructor() {} 18 | 19 | ngOnInit(): void {} 20 | 21 | public userSession = userSession; 22 | 23 | vote(pick: string) { 24 | openContractCall({ 25 | network: new StacksTestnet(), 26 | anchorMode: AnchorMode.Any, 27 | contractAddress: 'ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK', 28 | contractName: 'example-fruit-vote-contract', 29 | functionName: 'vote', 30 | functionArgs: [stringUtf8CV(pick)], 31 | postConditionMode: PostConditionMode.Deny, 32 | postConditions: [], 33 | onFinish: (data) => { 34 | console.log('onFinish:', data); 35 | window 36 | ?.open( 37 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`, 38 | '_blank' 39 | ) 40 | ?.focus(); 41 | }, 42 | onCancel: () => { 43 | console.log('onCancel:', 'Transaction was canceled'); 44 | }, 45 | }); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /templates/template-angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-angular/src/assets/.gitkeep -------------------------------------------------------------------------------- /templates/template-angular/src/assets/logo240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-angular/src/assets/logo240.png -------------------------------------------------------------------------------- /templates/template-angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /templates/template-angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false, 8 | }; 9 | -------------------------------------------------------------------------------- /templates/template-angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-angular/src/favicon.ico -------------------------------------------------------------------------------- /templates/template-angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | TemplateAngular 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /templates/template-angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /templates/template-angular/src/stacksUserSession.ts: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from '@stacks/connect'; 2 | 3 | const appConfig = new AppConfig(['store_write', 'publish_data']); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | button { 4 | color: #fff; 5 | font-size: 18px; 6 | font-weight: bold; 7 | } 8 | 9 | button:hover { 10 | filter: brightness(1.2); 11 | } 12 | -------------------------------------------------------------------------------- /templates/template-angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | (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-angular/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /templates/template-angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /templates/template-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "moduleResolution": "node", 11 | "importHelpers": true, 12 | "target": "es2020", 13 | "module": "es2020", 14 | "lib": [ 15 | "es2020", 16 | "dom" 17 | ], 18 | "allowSyntheticDefaultImports": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /templates/template-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /templates/template-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /templates/template-demo/best: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/best -------------------------------------------------------------------------------- /templates/template-demo/deleteme: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/deleteme -------------------------------------------------------------------------------- /templates/template-demo/deleteme2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/deleteme2 -------------------------------------------------------------------------------- /templates/template-demo/deleteme21: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/deleteme21 -------------------------------------------------------------------------------- /templates/template-demo/deleteme24: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/deleteme24 -------------------------------------------------------------------------------- /templates/template-demo/foo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/foo -------------------------------------------------------------------------------- /templates/template-demo/foobar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/foobar -------------------------------------------------------------------------------- /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-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-demo/public/favicon.ico -------------------------------------------------------------------------------- /templates/template-demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Stacks.js Demo 11 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /templates/template-demo/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import AppIntro from "./extra/AppIntro"; 3 | import AppTabs from "./extra/AppTabs"; 4 | import AppTransactions from "./extra/AppTransactions"; 5 | 6 | function App() { 7 | const [txs, setTxs] = useState([]); 8 | const addTx = (txId) => 9 | setTxs((prev) => [{ txId, date: new Date() }, ...prev]); 10 | 11 | return ( 12 |
13 | 14 | 15 | 16 |
17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /templates/template-demo/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn hiro docs link", () => { 5 | render(); 6 | const element = screen.getByText(/hiro docs/i); 7 | expect(element).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /templates/template-demo/src/extra/AppIntro.js: -------------------------------------------------------------------------------- 1 | const AppIntro = () => { 2 | return ( 3 |
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 |
44 | ); 45 | }; 46 | 47 | export default AppIntro; 48 | -------------------------------------------------------------------------------- /templates/template-demo/src/extra/AppTabs.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ConnectWallet from "../tabs/ConnectWallet"; 3 | import ContractCallVote from "../tabs/ContractCallVote"; 4 | import { userSession } from "../userSession"; 5 | 6 | const tabs = { 7 | "Connect Wallet": ConnectWallet, 8 | "Contract Interaction": ContractCallVote, 9 | "Gaia Data Storage ": null, 10 | "Multisig Transactions ": null, 11 | }; 12 | const initial = Object.keys(tabs)[0]; 13 | 14 | const AppTabs = ({ addTx }) => { 15 | const [tab, setTab] = useState(initial); 16 | const Tab = tabs[tab]; 17 | 18 | const isConnected = userSession.isUserSignedIn(); 19 | 20 | return ( 21 |
22 |
23 |

Try Out the Features

24 | {Object.keys(tabs).map((k) => ( 25 | 40 | ))} 41 |
42 |
43 | 44 |
45 | ); 46 | }; 47 | 48 | export default AppTabs; 49 | -------------------------------------------------------------------------------- /templates/template-demo/src/extra/AppTransactions.js: -------------------------------------------------------------------------------- 1 | const AppTransactions = ({ txs }) => { 2 | if (txs.length <= 0) { 3 | return <>; 4 | } 5 | 6 | return ( 7 |
8 |

Transaction History

9 | {txs.map((t, i) => ( 10 |

11 | {txs.length - i}: 12 | 17 | 18 | {`0x${t.txId.slice(0, 6)}…${t.txId.slice(-6)}`} @{" "} 19 | {t.date.toLocaleTimeString()} 20 | 21 | 22 |

23 | ))} 24 |
25 | ); 26 | }; 27 | 28 | export default AppTransactions; 29 | -------------------------------------------------------------------------------- /templates/template-demo/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 | 27 | 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-demo/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /templates/template-demo/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /templates/template-demo/src/tabs/ConnectWallet.js: -------------------------------------------------------------------------------- 1 | // import { useConnect } from "@stacks/connect-react"; 2 | import React from "react"; 3 | import { showConnect } from "@stacks/connect"; 4 | import { userSession } from "../userSession"; 5 | 6 | function authenticate() { 7 | showConnect({ 8 | appDetails: { 9 | name: "Stacks Template", 10 | icon: window.location.origin + "/logo.png", 11 | }, 12 | redirectTo: "/", 13 | onFinish: () => { 14 | window.location.reload(); 15 | }, 16 | userSession, 17 | }); 18 | } 19 | 20 | function disconnect() { 21 | userSession.signUserOut("/"); 22 | } 23 | 24 | const ConnectWallet = () => { 25 | // load account address if wallet connected 26 | const isUserSignedIn = userSession.isUserSignedIn(); 27 | const address = isUserSignedIn 28 | ? userSession.loadUserData().profile.stxAddress.testnet 29 | : ""; 30 | const truncatedAddress = `${address.slice(0, 4)}…${address.slice(-4)}`; 31 | 32 | return ( 33 |
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 | 52 |
53 |
54 | 55 |

56 | isUserSignedIn:{" "} 57 | {isUserSignedIn.toString()} 58 |

59 |

60 | address: {truncatedAddress} 61 |

62 | 63 | {/* file name */} 64 | 65 | tabs/ConnectWallet.js 66 | 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default ConnectWallet; 73 | -------------------------------------------------------------------------------- /templates/template-demo/src/userSession.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /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-cra-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra-ts/public/favicon.ico -------------------------------------------------------------------------------- /templates/template-react-cra-ts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra-ts/public/logo192.png -------------------------------------------------------------------------------- /templates/template-react-cra-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra-ts/public/logo512.png -------------------------------------------------------------------------------- /templates/template-react-cra-ts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /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 |
11 |
12 | logo 13 | 14 |

React + Stacks.js 👋

15 | 16 | {/* ConnectWallet file: `./src/components/ConnectWallet.js` */} 17 | 18 | 19 | {/* ContractCallVote file: `./src/components/ContractCallVote.js` */} 20 | 21 | 22 |

23 | Edit src/App.tsx and save to reload. 24 |

25 | 31 | Learn Stacks 32 | 33 | 39 | Learn to Build on Stacks 40 | 41 | 47 | Learn React 48 | 49 |
50 |
51 | ); 52 | } 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/components/ConnectWallet.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppConfig, showConnect, UserSession } from "@stacks/connect"; 3 | 4 | const appConfig = new AppConfig(["store_write", "publish_data"]); 5 | 6 | export const userSession = new UserSession({ appConfig }); 7 | 8 | function authenticate() { 9 | showConnect({ 10 | appDetails: { 11 | name: "Stacks React Starter", 12 | icon: window.location.origin + "/logo512.png", 13 | }, 14 | redirectTo: "/", 15 | onFinish: () => { 16 | window.location.reload(); 17 | }, 18 | userSession, 19 | }); 20 | } 21 | 22 | function disconnect() { 23 | userSession.signUserOut("/"); 24 | } 25 | 26 | const ConnectWallet = () => { 27 | if (userSession.isUserSignedIn()) { 28 | return ( 29 |
30 | 33 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

34 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

35 |
36 | ); 37 | } 38 | 39 | return ( 40 | 43 | ); 44 | }; 45 | 46 | export default ConnectWallet; 47 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/components/ContractCallVote.tsx: -------------------------------------------------------------------------------- 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: string) { 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 | 48 | 51 |
52 | ); 53 | }; 54 | 55 | export default ContractCallVote; 56 | -------------------------------------------------------------------------------- /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-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 | 30 | 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-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /templates/template-react-cra-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /templates/template-react-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /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-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra/public/favicon.ico -------------------------------------------------------------------------------- /templates/template-react-cra/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /templates/template-react-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra/public/logo192.png -------------------------------------------------------------------------------- /templates/template-react-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-cra/public/logo512.png -------------------------------------------------------------------------------- /templates/template-react-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /templates/template-react-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /templates/template-react-cra/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /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 |
10 |
11 | logo 12 | 13 |

React + Stacks.js 👋

14 | 15 | {/* ConnectWallet file: `./src/components/ConnectWallet.js` */} 16 | 17 | 18 | {/* ContractCallVote file: `./src/components/ContractCallVote.js` */} 19 | 20 | 21 |

22 | Edit src/App.js and save to reload. 23 |

24 | 30 | Learn Stacks 31 | 32 | 38 | Learn to Build on Stacks 39 | 40 | 46 | Learn React 47 | 48 |
49 |
50 | ); 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /templates/template-react-cra/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /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 | 21 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

22 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

23 |
24 | ); 25 | } 26 | 27 | return ( 28 | 31 | ); 32 | }; 33 | 34 | export default ConnectWallet; 35 | -------------------------------------------------------------------------------- /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 | 48 | 51 |
52 | ); 53 | }; 54 | 55 | export default ContractCallVote; 56 | -------------------------------------------------------------------------------- /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/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 | 28 | 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-react-cra/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /templates/template-react-cra/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-react-nextjs-ts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@stacks/connect": "7.7.1", 13 | "@stacks/connect-react": "22.4.2", 14 | "@stacks/connect-ui": "6.4.1", 15 | "next": "13.5.6", 16 | "react": "^18", 17 | "react-dom": "^18" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^20", 21 | "@types/react": "^18", 22 | "@types/react-dom": "^18", 23 | "typescript": "^5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-nextjs-ts/src/app/favicon.ico -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Inter } from 'next/font/google' 3 | import './globals.css' 4 | 5 | const inter = Inter({ subsets: ['latin'] }) 6 | 7 | export const metadata: Metadata = { 8 | title: 'Create Next App', 9 | description: 'Generated by create next app', 10 | } 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode 16 | }) { 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /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 | 38 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

39 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

40 |
41 | ); 42 | } 43 | 44 | return ( 45 | 48 | ); 49 | }; 50 | 51 | export default ConnectWallet; 52 | -------------------------------------------------------------------------------- /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 | 54 | 57 |
58 | ); 59 | }; 60 | 61 | export default ContractCallVote; 62 | -------------------------------------------------------------------------------- /templates/template-react-nextjs-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-react-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@stacks/connect": "7.7.1", 13 | "@stacks/connect-react": "22.4.2", 14 | "@stacks/connect-ui": "6.4.1", 15 | "next": "13.5.6", 16 | "react": "^18", 17 | "react-dom": "^18" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-react-nextjs/src/app/favicon.ico -------------------------------------------------------------------------------- /templates/template-react-nextjs/src/app/layout.js: -------------------------------------------------------------------------------- 1 | import { Inter } from "next/font/google"; 2 | import "./globals.css"; 3 | 4 | const inter = Inter({ subsets: ["latin"] }); 5 | 6 | export const metadata = { 7 | title: "Create Next App", 8 | description: "Generated by create next app", 9 | }; 10 | 11 | export default function RootLayout({ children }) { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /templates/template-react-nextjs/src/components/ConnectWallet.js: -------------------------------------------------------------------------------- 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 | 38 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

39 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

40 |
41 | ); 42 | } 43 | 44 | return ( 45 | 48 | ); 49 | }; 50 | 51 | export default ConnectWallet; 52 | -------------------------------------------------------------------------------- /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 | 54 | 57 |
58 | ); 59 | }; 60 | 61 | export default ContractCallVote; 62 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/.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 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/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 | parserOptions: { 18 | ecmaVersion: 'latest', 19 | sourceType: 'module', 20 | project: ['./tsconfig.json', './tsconfig.node.json'], 21 | tsconfigRootDir: __dirname, 22 | }, 23 | ``` 24 | 25 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` 26 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked` 27 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list 28 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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-vite-ts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /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 | 23 | 24 | {/* ContractCallVote file: `./src/components/ContractCallVote.js` */} 25 | 26 | 27 | 37 | 47 | 48 |
49 |

50 | Edit src/App.jsx and save to test HMR 51 |

52 |
53 |

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/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 | 30 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

31 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

32 |
33 | ); 34 | } 35 | 36 | return ( 37 | 40 | ); 41 | }; 42 | 43 | export default ConnectWallet; 44 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/components/ContractCallVote.tsx: -------------------------------------------------------------------------------- 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 | 9 | import { userSession } from "../user-session"; 10 | 11 | const ContractCallVote = () => { 12 | const { doContractCall } = useConnect(); 13 | 14 | function vote(pick: string) { 15 | doContractCall({ 16 | network: new StacksTestnet(), 17 | anchorMode: AnchorMode.Any, 18 | contractAddress: "ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK", 19 | contractName: "example-fruit-vote-contract", 20 | functionName: "vote", 21 | functionArgs: [stringUtf8CV(pick)], 22 | postConditionMode: PostConditionMode.Deny, 23 | postConditions: [], 24 | onFinish: (data) => { 25 | console.log("onFinish:", data); 26 | window 27 | .open( 28 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`, 29 | "_blank" 30 | ) 31 | ?.focus(); 32 | }, 33 | onCancel: () => { 34 | console.log("onCancel:", "Transaction was canceled"); 35 | }, 36 | }); 37 | } 38 | 39 | if (!userSession.isUserSignedIn()) { 40 | return null; 41 | } 42 | 43 | return ( 44 |
45 |

Vote via Smart Contract

46 | 49 | 52 |
53 | ); 54 | }; 55 | 56 | export default ContractCallVote; 57 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | margin: 4px; 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.tsx"; 4 | import "./index.css"; 5 | 6 | import { Connect } from "@stacks/connect-react"; 7 | 8 | import { userSession } from "./user-session"; 9 | 10 | ReactDOM.createRoot(document.getElementById("root")!).render( 11 | 12 | { 20 | window.location.reload(); 21 | }, 22 | userSession, 23 | }} 24 | > 25 | 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/user-session.ts: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/template-react-vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /templates/template-react-vite/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /templates/template-react-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 | -------------------------------------------------------------------------------- /templates/template-react-vite/README.md: -------------------------------------------------------------------------------- 1 | # React + 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 | -------------------------------------------------------------------------------- /templates/template-react-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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-react-vite/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/App.jsx: -------------------------------------------------------------------------------- 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 | 23 | 24 | {/* ContractCallVote file: `./src/components/ContractCallVote.js` */} 25 | 26 | 27 | 37 | 47 | 48 |
49 |

50 | Edit src/App.jsx and save to test HMR 51 |

52 |
53 |

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/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 | 30 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

31 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

32 |
33 | ); 34 | } 35 | 36 | return ( 37 | 40 | ); 41 | }; 42 | 43 | export default ConnectWallet; 44 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/components/ContractCallVote.jsx: -------------------------------------------------------------------------------- 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 | 9 | import { userSession } from "../user-session"; 10 | 11 | const ContractCallVote = () => { 12 | const { doContractCall } = useConnect(); 13 | 14 | function vote(pick) { 15 | doContractCall({ 16 | network: new StacksTestnet(), 17 | anchorMode: AnchorMode.Any, 18 | contractAddress: "ST39MJ145BR6S8C315AG2BD61SJ16E208P1FDK3AK", 19 | contractName: "example-fruit-vote-contract", 20 | functionName: "vote", 21 | functionArgs: [stringUtf8CV(pick)], 22 | postConditionMode: PostConditionMode.Deny, 23 | postConditions: [], 24 | onFinish: (data) => { 25 | console.log("onFinish:", data); 26 | window 27 | .open( 28 | `https://explorer.hiro.so/txid/${data.txId}?chain=testnet`, 29 | "_blank" 30 | ) 31 | .focus(); 32 | }, 33 | onCancel: () => { 34 | console.log("onCancel:", "Transaction was canceled"); 35 | }, 36 | }); 37 | } 38 | 39 | if (!userSession.isUserSignedIn()) { 40 | return null; 41 | } 42 | 43 | return ( 44 |
45 |

Vote via Smart Contract

46 | 49 | 52 |
53 | ); 54 | }; 55 | 56 | export default ContractCallVote; 57 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | margin: 4px; 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | import { Connect } from "@stacks/connect-react"; 7 | 8 | import { userSession } from "./user-session"; 9 | 10 | ReactDOM.createRoot(document.getElementById("root")).render( 11 | 12 | { 20 | window.location.reload(); 21 | }, 22 | userSession, 23 | }} 24 | > 25 | 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /templates/template-react-vite/src/user-session.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-react-vite/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/.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 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-svelte-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^2.4.2", 14 | "@tsconfig/svelte": "^5.0.0", 15 | "svelte": "^4.0.5", 16 | "svelte-check": "^3.4.6", 17 | "tslib": "^2.6.0", 18 | "typescript": "^5.0.2", 19 | "vite": "^4.4.5" 20 | }, 21 | "dependencies": { 22 | "@stacks/connect": "7.7.1", 23 | "@stacks/connect-react": "22.4.2", 24 | "@stacks/connect-ui": "6.4.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 17 | 18 |

Svelte + Stacks.js 👋

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

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-ts/src/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | .card { 40 | padding: 2em; 41 | } 42 | 43 | #app { 44 | max-width: 1280px; 45 | margin: 0 auto; 46 | padding: 2rem; 47 | text-align: center; 48 | } 49 | 50 | button { 51 | border-radius: 8px; 52 | border: 1px solid transparent; 53 | padding: 0.6em 1.2em; 54 | font-size: 1em; 55 | font-weight: 500; 56 | font-family: inherit; 57 | background-color: #1a1a1a; 58 | cursor: pointer; 59 | transition: border-color 0.25s; 60 | } 61 | button:hover { 62 | border-color: #646cff; 63 | } 64 | button:focus, 65 | button:focus-visible { 66 | outline: 4px auto -webkit-focus-ring-color; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/assets/svelte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/components/ConnectWallet.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | {#if userSession.isUserSignedIn()} 26 | 27 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

28 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

29 | {:else} 30 | 31 | {/if} 32 |
33 | 34 | 39 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/components/ContractVote.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | {#if userSession.isUserSignedIn()} 38 |
39 |

Vote via Smart Contract

40 | 41 | 42 |
43 | {/if} 44 | 45 | 50 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/lib/Counter.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app'), 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/stacksUserSession.ts: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true 17 | }, 18 | "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 19 | "references": [{ "path": "./tsconfig.node.json" }] 20 | } 21 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler" 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /templates/template-svelte-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /templates/template-svelte/.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 | -------------------------------------------------------------------------------- /templates/template-svelte/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/template-svelte/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Svelte 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /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/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-svelte-new", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "@sveltejs/vite-plugin-svelte": "^2.4.2", 13 | "svelte": "^4.0.5", 14 | "vite": "^4.4.5" 15 | }, 16 | "dependencies": { 17 | "@stacks/connect": "7.7.1", 18 | "@stacks/connect-react": "22.4.2", 19 | "@stacks/connect-ui": "6.4.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /templates/template-svelte/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-svelte/src/App.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
9 | 17 | 18 |

Svelte + Stacks.js 👋

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

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/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | .card { 40 | padding: 2em; 41 | } 42 | 43 | #app { 44 | max-width: 1280px; 45 | margin: 0 auto; 46 | padding: 2rem; 47 | text-align: center; 48 | } 49 | 50 | button { 51 | border-radius: 8px; 52 | border: 1px solid transparent; 53 | padding: 0.6em 1.2em; 54 | font-size: 1em; 55 | font-weight: 500; 56 | font-family: inherit; 57 | background-color: #1a1a1a; 58 | cursor: pointer; 59 | transition: border-color 0.25s; 60 | } 61 | button:hover { 62 | border-color: #646cff; 63 | } 64 | button:focus, 65 | button:focus-visible { 66 | outline: 4px auto -webkit-focus-ring-color; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /templates/template-svelte/src/assets/svelte.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-svelte/src/components/ConnectWallet.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | {#if userSession.isUserSignedIn()} 26 | 27 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

28 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

29 | {:else} 30 | 31 | {/if} 32 |
33 | 34 | 39 | -------------------------------------------------------------------------------- /templates/template-svelte/src/components/ContractVote.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | {#if userSession.isUserSignedIn()} 38 |
39 |

Vote via Smart Contract

40 | 41 | 42 |
43 | {/if} 44 | 45 | 50 | -------------------------------------------------------------------------------- /templates/template-svelte/src/lib/Counter.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /templates/template-svelte/src/main.js: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './App.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app'), 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /templates/template-svelte/src/stacksUserSession.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-svelte/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /templates/template-svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /templates/template-svelte/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /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-sveltekit-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-sveltekit-ts", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^2.0.0", 14 | "@sveltejs/kit": "^1.20.4", 15 | "svelte": "^4.0.5", 16 | "svelte-check": "^3.4.3", 17 | "tslib": "^2.4.1", 18 | "typescript": "^5.0.0", 19 | "vite": "^4.4.2" 20 | }, 21 | "type": "module", 22 | "dependencies": { 23 | "@stacks/connect": "7.7.1", 24 | "@stacks/connect-react": "22.4.2", 25 | "@stacks/connect-ui": "6.4.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/lib/ConnectWallet.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | {#if userSession.isUserSignedIn()} 26 | 27 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

28 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

29 | {:else} 30 | 31 | {/if} 32 |
33 | 34 | 48 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/lib/ContractVote.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | {#if userSession.isUserSignedIn()} 38 |
39 |

Vote via Smart Contract

40 | 41 | 42 |
43 | {/if} 44 | 45 | 58 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/lib/stacksUserSession.ts: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Svelte + Stacks.js 👋

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Visit the Stacks.js 16 | official repository 21 | and library reference for more 22 | information. 23 |

24 | 25 |
26 | 27 |

28 | Visit kit.svelte.dev to read the documentation 29 |

30 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-sveltekit-ts/static/favicon.png -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /templates/template-sveltekit-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | -------------------------------------------------------------------------------- /templates/template-sveltekit/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | -------------------------------------------------------------------------------- /templates/template-sveltekit/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /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-sveltekit/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "esModuleInterop": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "resolveJsonModule": true, 8 | "skipLibCheck": true, 9 | "sourceMap": true, 10 | "strict": true 11 | } 12 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files 13 | // 14 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 15 | // from the referenced tsconfig.json - TypeScript does not merge them in 16 | } 17 | -------------------------------------------------------------------------------- /templates/template-sveltekit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-sveltekit-new", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/adapter-auto": "^2.0.0", 14 | "@sveltejs/kit": "^1.20.4", 15 | "svelte": "^4.0.5", 16 | "svelte-check": "^3.4.3", 17 | "typescript": "^5.0.0", 18 | "vite": "^4.4.2" 19 | }, 20 | "type": "module", 21 | "dependencies": { 22 | "@stacks/connect": "7.7.1", 23 | "@stacks/connect-react": "22.4.2", 24 | "@stacks/connect-ui": "6.4.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/lib/ConnectWallet.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 |
25 | {#if userSession.isUserSignedIn()} 26 | 27 |

mainnet: {userSession.loadUserData().profile.stxAddress.mainnet}

28 |

testnet: {userSession.loadUserData().profile.stxAddress.testnet}

29 | {:else} 30 | 31 | {/if} 32 |
33 | 34 | 48 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/lib/ContractVote.svelte: -------------------------------------------------------------------------------- 1 | 36 | 37 | {#if userSession.isUserSignedIn()} 38 |
39 |

Vote via Smart Contract

40 | 41 | 42 |
43 | {/if} 44 | 45 | 58 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/lib/index.js: -------------------------------------------------------------------------------- 1 | // place files you want to import through the `$lib` alias in this folder. 2 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/lib/stacksUserSession.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-sveltekit/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |

Svelte + Stacks.js 👋

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 | Visit the Stacks.js 16 | official repository 21 | and library reference for more 22 | information. 23 |

24 | 25 |
26 | 27 |

28 | Visit kit.svelte.dev to read the documentation 29 |

30 | -------------------------------------------------------------------------------- /templates/template-sveltekit/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-sveltekit/static/favicon.png -------------------------------------------------------------------------------- /templates/template-sveltekit/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | kit: { 6 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 7 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 8 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 9 | adapter: adapter() 10 | } 11 | }; 12 | 13 | export default config; 14 | -------------------------------------------------------------------------------- /templates/template-sveltekit/vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | -------------------------------------------------------------------------------- /templates/template-utils/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /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-utils/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hirosystems/stacks.js-starters/f0cfc7fb32b9673067ea9da508d7fab722ed05b3/templates/template-utils/public/favicon.ico -------------------------------------------------------------------------------- /templates/template-utils/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Stacks.js Demo 11 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /templates/template-utils/src/App.js: -------------------------------------------------------------------------------- 1 | import Intro from "./Intro"; 2 | import Units from "./utils/01-Unit"; 3 | import ClarityEncoder from "./utils/02-ClarityEncoder"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /templates/template-utils/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn hiro docs link", () => { 5 | render(); 6 | const element = screen.getByText(/hiro docs/i); 7 | expect(element).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /templates/template-utils/src/Intro.js: -------------------------------------------------------------------------------- 1 | const Intro = () => { 2 | return ( 3 |
4 |

Stacks Utils

5 | 23 |
24 | ); 25 | }; 26 | 27 | export default Intro; 28 | -------------------------------------------------------------------------------- /templates/template-utils/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /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 | 27 | 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/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /templates/template-utils/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /templates/template-utils/src/userSession.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-utils/src/utils/01-Unit.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const Units = () => { 4 | const [stx, setStx] = useState(""); 5 | const [microStx, setMicroStx] = useState(""); 6 | 7 | const handleStxChange = (e) => { 8 | const stxs = e.target.value; 9 | setStx(stxs); 10 | setMicroStx(stxs * 1000000); // 1 STX = 1,000,000 microSTX 11 | }; 12 | 13 | const handleMicroStxChange = (e) => { 14 | const microStxs = e.target.value; 15 | setMicroStx(microStxs); 16 | setStx(microStxs / 1000000); 17 | }; 18 | 19 | return ( 20 |
21 |

22 | STX Unit Converter 23 |

24 |
25 | 28 | 34 |
35 |
36 | 39 | 45 |
46 |
47 | ); 48 | }; 49 | 50 | export default Units; 51 | -------------------------------------------------------------------------------- /templates/template-utils/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /templates/template-vue-ts/.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 | -------------------------------------------------------------------------------- /templates/template-vue-ts/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /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 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/template-vue-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-vue-ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@stacks/connect": "7.7.1", 13 | "@stacks/connect-react": "22.4.2", 14 | "@stacks/connect-ui": "6.4.1", 15 | "vue": "^3.3.4" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.2.3", 19 | "typescript": "^5.0.2", 20 | "vite": "^4.4.5", 21 | "vue-tsc": "^1.8.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /templates/template-vue-ts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 40 | 41 | 55 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/components/StacksConnectWallet.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 34 | 35 | 49 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/components/StacksContractVote.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 44 | 45 | 58 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/stacksUserSession.ts: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | #app { 63 | max-width: 1280px; 64 | margin: 0 auto; 65 | padding: 2rem; 66 | text-align: center; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /templates/template-vue-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /templates/template-vue-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /templates/template-vue-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /templates/template-vue-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /templates/template-vue/.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 | -------------------------------------------------------------------------------- /templates/template-vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /templates/template-vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Vite 2 | 3 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /templates/template-vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-vue-new", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@stacks/connect": "7.7.1", 13 | "@stacks/connect-react": "22.4.2", 14 | "@stacks/connect-ui": "6.4.1", 15 | "vue": "^3.3.4" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-vue": "^4.2.3", 19 | "vite": "^4.4.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /templates/template-vue/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-vue/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 40 | 41 | 55 | -------------------------------------------------------------------------------- /templates/template-vue/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/template-vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /templates/template-vue/src/components/StacksConnectWallet.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 38 | 39 | 53 | -------------------------------------------------------------------------------- /templates/template-vue/src/components/StacksContractVote.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 44 | 45 | 58 | -------------------------------------------------------------------------------- /templates/template-vue/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /templates/template-vue/src/stacksUserSession.js: -------------------------------------------------------------------------------- 1 | import { AppConfig, UserSession } from "@stacks/connect"; 2 | 3 | const appConfig = new AppConfig(["store_write", "publish_data"]); 4 | 5 | export const userSession = new UserSession({ appConfig }); 6 | -------------------------------------------------------------------------------- /templates/template-vue/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | a { 27 | font-weight: 500; 28 | color: #646cff; 29 | text-decoration: inherit; 30 | } 31 | a:hover { 32 | color: #535bf2; 33 | } 34 | 35 | body { 36 | margin: 0; 37 | display: flex; 38 | place-items: center; 39 | min-width: 320px; 40 | min-height: 100vh; 41 | } 42 | 43 | h1 { 44 | font-size: 3.2em; 45 | line-height: 1.1; 46 | } 47 | 48 | button { 49 | border-radius: 8px; 50 | border: 1px solid transparent; 51 | padding: 0.6em 1.2em; 52 | font-size: 1em; 53 | font-weight: 500; 54 | font-family: inherit; 55 | background-color: #1a1a1a; 56 | cursor: pointer; 57 | transition: border-color 0.25s; 58 | } 59 | button:hover { 60 | border-color: #646cff; 61 | } 62 | button:focus, 63 | button:focus-visible { 64 | outline: 4px auto -webkit-focus-ring-color; 65 | } 66 | 67 | .card { 68 | padding: 2em; 69 | } 70 | 71 | #app { 72 | max-width: 1280px; 73 | margin: 0 auto; 74 | padding: 2rem; 75 | text-align: center; 76 | } 77 | 78 | @media (prefers-color-scheme: light) { 79 | :root { 80 | color: #213547; 81 | background-color: #ffffff; 82 | } 83 | a:hover { 84 | color: #747bff; 85 | } 86 | button { 87 | background-color: #f9f9f9; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /templates/template-vue/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "redirects": [ 3 | { 4 | "source": "/", 5 | "destination": "https://docs.hiro.so/stacksjs-starters", 6 | "permanent": false 7 | }, 8 | { 9 | "source": "/react(-vite)?", 10 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-react-vite", 11 | "permanent": false 12 | }, 13 | { 14 | "source": "/cra", 15 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-react-cra", 16 | "permanent": false 17 | }, 18 | { 19 | "source": "/react-cra", 20 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-react-cra", 21 | "permanent": false 22 | }, 23 | { 24 | "source": "/angular", 25 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-angular", 26 | "permanent": false 27 | }, 28 | { 29 | "source": "/next(js)?", 30 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-react-nextjs", 31 | "permanent": false 32 | }, 33 | { 34 | "source": "/react-next(js)?", 35 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-react-nextjs", 36 | "permanent": false 37 | }, 38 | { 39 | "source": "/svelte", 40 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-svelte", 41 | "permanent": false 42 | }, 43 | { 44 | "source": "/sveltekit", 45 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-sveltekit", 46 | "permanent": false 47 | }, 48 | { 49 | "source": "/vue", 50 | "destination": "https://githubbox.com/hirosystems/stacks.js-starters/tree/main/templates/template-vue", 51 | "permanent": false 52 | }, 53 | { 54 | "source": "/(.*)", 55 | "destination": "https://github.com/hirosystems/stacks.js-starters", 56 | "permanent": false 57 | } 58 | ] 59 | } 60 | --------------------------------------------------------------------------------