├── .DS_Store
├── .gitignore
├── README.md
├── package.json
├── public
    ├── .DS_Store
    ├── images
    │   ├── beacon.png
    │   ├── sass.png
    │   ├── svelte.png
    │   ├── taquito.png
    │   ├── typescript.png
    │   └── webpack.png
    └── index.html
├── src
    ├── App.svelte
    ├── main.ts
    └── styles
    │   └── index.scss
├── svelte.config.js
├── tsconfig.json
└── webpack.config.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/.DS_Store


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Tezos Template
 2 | 
 3 | ## A Svelte template to build awesome dapps on Tezos!
 4 | 
 5 | This template comes with all the good stuff you need to start building a dapp on Tezos:
 6 | 
 7 | - Svelte v.3
 8 | - Webpack v.5
 9 | - TypeScript v.3
10 | - Sass v.5
11 | - Taquito v.8
12 | - Beacon SDK v.2
13 | 
14 | To use it:
15 | 
16 | 1. `git clone https://github.com/claudebarde/svelte-tezos-template.git`
17 | 2. `cd svelte-tezos-template`
18 | 3. `npm install`
19 | 4. `npm run dev`
20 | 
21 | Here are a few tips if you are new to creating web apps in Svelte or in general:
22 | 
23 | - Add new Svelte components in the `src` folder, either next to the `App.svelte` or in a new folder, for example, `components`
24 | - Add new Sass files in the `styles` folder and import them either in the `index.scss` file with `@import "./myfile.scss"` or directly into the `main.ts` file just under `import "./styles/index.scss";`
25 | 
26 | Please leave comments for new features and open issues if you have any problem!
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-tezos-template",
 3 |   "version": "1.0.0",
 4 |   "devDependencies": {
 5 |     "@tsconfig/svelte": "^2.0.1",
 6 |     "@types/node": "^16.11.11",
 7 |     "autoprefixer": "^10.4.0",
 8 |     "buffer": "^6.0.3",
 9 |     "cross-env": "^7.0.3",
10 |     "crypto-browserify": "^3.12.0",
11 |     "css-loader": "^6.5.1",
12 |     "events": "^3.3.0",
13 |     "https-browserify": "^1.0.0",
14 |     "mini-css-extract-plugin": "^2.4.5",
15 |     "node-sass": "^6.0.1",
16 |     "os-browserify": "^0.3.0",
17 |     "path-browserify": "^1.0.1",
18 |     "postcss-loader": "^6.2.1",
19 |     "sass-loader": "^12.3.0",
20 |     "stream-browserify": "^3.0.0",
21 |     "stream-http": "^3.2.0",
22 |     "style-loader": "^3.3.1",
23 |     "svelte": "^3.44.2",
24 |     "svelte-check": "^2.2.10",
25 |     "svelte-loader": "^3.1.2",
26 |     "svelte-preprocess": "^4.9.8",
27 |     "ts-loader": "^9.2.6",
28 |     "tslib": "^2.3.1",
29 |     "typescript": "^4.5.2",
30 |     "url": "^0.11.0",
31 |     "webpack": "^5.64.4",
32 |     "webpack-cli": "^4.9.1",
33 |     "webpack-dev-server": "^4.6.0"
34 |   },
35 |   "scripts": {
36 |     "build": "cross-env NODE_ENV=production webpack",
37 |     "dev": "webpack serve",
38 |     "validate": "svelte-check"
39 |   },
40 |   "dependencies": {
41 |     "@microsoft/signalr": "^6.0.0",
42 |     "@taquito/beacon-wallet": "^11.0.2",
43 |     "@taquito/taquito": "^11.0.2",
44 |     "file-loader": "^6.2.0"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/public/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/.DS_Store


--------------------------------------------------------------------------------
/public/images/beacon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/beacon.png


--------------------------------------------------------------------------------
/public/images/sass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/sass.png


--------------------------------------------------------------------------------
/public/images/svelte.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/svelte.png


--------------------------------------------------------------------------------
/public/images/taquito.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/taquito.png


--------------------------------------------------------------------------------
/public/images/typescript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/typescript.png


--------------------------------------------------------------------------------
/public/images/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claudebarde/svelte-tezos-template/8b053ba7ca1aaacc3e713e741dc6eddc40d2759c/public/images/webpack.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1" />
 6 | 
 7 |     <title>Svelte Tezos Template</title>
 8 | 
 9 |     <link rel="icon" type="image/png" href="images/taquito.png" />
10 |     <link rel="stylesheet" href="/build/bundle.css" />
11 | 
12 |     <script defer src="/build/bundle.js"></script>
13 |   </head>
14 | 
15 |   <body></body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { onMount, onDestroy } from "svelte";
  3 |   import { TezosToolkit } from "@taquito/taquito";
  4 |   import { BeaconWallet } from "@taquito/beacon-wallet";
  5 |   import { NetworkType } from "@airgap/beacon-sdk";
  6 |   import { HubConnectionBuilder, HubConnection } from "@microsoft/signalr";
  7 | 
  8 |   let Tezos: TezosToolkit;
  9 |   let wallet: BeaconWallet;
 10 |   let userAddress: string;
 11 |   let subscription: HubConnection;
 12 |   let blockHead: { protocol: string; level: number; lastUpdate: string };
 13 | 
 14 |   const rpcUrl = "https://api.tez.ie/rpc/mainnet";
 15 |   const packages: { name: string; display: string; version: number }[] = [
 16 |     { name: "svelte", display: "Svelte", version: 3 },
 17 |     { name: "webpack", display: "Webpack", version: 5 },
 18 |     { name: "typescript", display: "TypeScript", version: 3 },
 19 |     { name: "sass", display: "Sass", version: 5 },
 20 |     { name: "taquito", display: "Taquito", version: 8 },
 21 |     { name: "beacon", display: "Beacon SDK", version: 2 }
 22 |   ];
 23 | 
 24 |   const connect = async () => {
 25 |     try {
 26 |       await wallet.requestPermissions({
 27 |         network: {
 28 |           type: NetworkType.MAINNET,
 29 |           rpcUrl
 30 |         }
 31 |       });
 32 |       Tezos.setWalletProvider(wallet);
 33 |       userAddress = await wallet.getPKH();
 34 |     } catch (err) {
 35 |       console.error(err);
 36 |     }
 37 |   };
 38 | 
 39 |   const disconnect = () => {
 40 |     wallet.client.destroy();
 41 |     wallet = undefined;
 42 |     userAddress = undefined;
 43 |   };
 44 | 
 45 |   const subscribeToEvents = async () => {
 46 |     const connection = new HubConnectionBuilder()
 47 |       .withUrl("https://api.tzkt.io/v1/events")
 48 |       .build();
 49 | 
 50 |     // auto-reconnect
 51 |     connection.onclose(subscribeToEvents);
 52 | 
 53 |     connection.on("head", msg => {
 54 |       blockHead = {
 55 |         protocol: msg.data.protocol,
 56 |         level: msg.data.level,
 57 |         lastUpdate: msg.data.timestamp
 58 |       };
 59 |     });
 60 | 
 61 |     // open connection
 62 |     await connection.start();
 63 |     // subscribe to head
 64 |     await connection.invoke("SubscribeToHead");
 65 |     // return connection instance
 66 |     return connection;
 67 |   };
 68 | 
 69 |   onMount(async () => {
 70 |     Tezos = new TezosToolkit(rpcUrl);
 71 | 
 72 |     wallet = new BeaconWallet({
 73 |       name: "Svelte Tezos Template",
 74 |       preferredNetwork: NetworkType.MAINNET
 75 |     });
 76 |     const activeAccount = await wallet.client.getAccounts();
 77 |     if (activeAccount) {
 78 |       Tezos.setWalletProvider(wallet);
 79 |       userAddress = await wallet.getPKH();
 80 |     }
 81 | 
 82 |     const headerInfo = await Tezos.rpc.getBlockHeader();
 83 |     blockHead = {
 84 |       protocol: headerInfo.protocol,
 85 |       level: headerInfo.level,
 86 |       lastUpdate: headerInfo.timestamp
 87 |     };
 88 |     subscription = await subscribeToEvents();
 89 |   });
 90 | 
 91 |   onDestroy(async () => {
 92 |     // closes subscription when component unmounts
 93 |     await subscription.stop();
 94 |   });
 95 | </script>
 96 | 
 97 | <style lang="scss">
 98 |   $tezos-blue: #2e7df7;
 99 | 
100 |   .container {
101 |     font-size: 20px;
102 |     max-width: 50%;
103 | 
104 |     .title {
105 |       color: $tezos-blue;
106 |       font-size: 100px;
107 |       margin: 20px;
108 |     }
109 | 
110 |     .subtitle {
111 |       font-size: 30px;
112 |       color: #333;
113 |       margin: 10px;
114 |     }
115 | 
116 |     ul {
117 |       width: 30%;
118 |       margin: 0 auto;
119 |       text-align: left;
120 |       list-style: none;
121 | 
122 |       li {
123 |         display: flex;
124 |         justify-content: left;
125 |         align-items: center;
126 |         padding: 3px;
127 | 
128 |         img {
129 |           width: 30px;
130 |           height: 30px;
131 |           margin-right: 20px;
132 |         }
133 |       }
134 |     }
135 | 
136 |     .chain-info {
137 |       font-size: 15px;
138 | 
139 |       p {
140 |         margin: 5px;
141 |         font-style: italic;
142 |       }
143 |     }
144 | 
145 |     button {
146 |       appearance: none;
147 |       border: solid 2px $tezos-blue;
148 |       border-radius: 5px;
149 |       background-color: white;
150 |       padding: 20px;
151 |       font-size: 20px;
152 |       color: $tezos-blue;
153 |       transition: 0.3s;
154 |       cursor: pointer;
155 |       outline: none;
156 | 
157 |       &:hover {
158 |         color: white;
159 |         background-color: $tezos-blue;
160 |       }
161 |     }
162 |   }
163 | </style>
164 | 
165 | <main>
166 |   <div class="container">
167 |     <div class="title">Hello Tezos!</div>
168 |     <div class="subtitle">
169 |       A Svelte template to build awesome dapps on Tezos!
170 |     </div>
171 |     <br />
172 |     {#if blockHead}
173 |       <div class="chain-info">
174 |         <p>Protocol: {blockHead.protocol}</p>
175 |         <p>Level: {blockHead.level}</p>
176 |         <p>Block timestamp: {blockHead.lastUpdate}</p>
177 |       </div>
178 |     {/if}
179 |     <br />
180 |     <div>
181 |       This template comes with all the good stuff you need to start building a
182 |       dapp on Tezos:
183 |     </div>
184 |     <br /><br />
185 |     <ul>
186 |       {#each packages as pkg}
187 |         <li>
188 |           <img src={`images/${pkg.name}.png`} alt={pkg.name} />
189 |           {pkg.display} v.{pkg.version}
190 |         </li>
191 |       {/each}
192 |     </ul>
193 |     <br /><br />
194 |     <div>
195 |       {#if userAddress}
196 |         <button on:click={disconnect}>Disconnect</button>
197 |       {:else}
198 |         <button on:click={connect}>Connect now!</button>
199 |       {/if}
200 |     </div>
201 |   </div>
202 | </main>
203 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import "./styles/index.scss";
 2 | 
 3 | import App from "./App.svelte";
 4 | 
 5 | const app = new App({
 6 |   target: document.body
 7 | });
 8 | 
 9 | export default app;
10 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   height: 100vh;
 3 | 
 4 |   main {
 5 |     display: grid;
 6 |     place-items: center;
 7 |     height: 100vh;
 8 |     text-align: center;
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | const preprocess = require("svelte-preprocess");
2 | 
3 | module.exports = {
4 |   preprocess: preprocess()
5 | };
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/svelte/tsconfig.json",
 3 |   "include": ["src/**/*", "src/node_modules/**/*"],
 4 |   "exclude": ["node_modules/*", "__sapper__/*", "static/*"],
 5 |   "compilerOptions": {
 6 |     "target": "es2020",
 7 |     "types": ["node", "svelte"]
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 2 | const path = require("path");
 3 | const sveltePreprocess = require("svelte-preprocess");
 4 | const webpack = require("webpack");
 5 | 
 6 | const mode = process.env.NODE_ENV || "development";
 7 | const prod = mode === "production";
 8 | 
 9 | module.exports = {
10 |   entry: {
11 |     "build/bundle": ["./src/main.ts"]
12 |   },
13 |   resolve: {
14 |     alias: {
15 |       svelte: path.dirname(require.resolve("svelte/package.json"))
16 |     },
17 |     extensions: [".mjs", ".js", ".ts", ".svelte"],
18 |     mainFields: ["svelte", "browser", "module", "main"],
19 |     fallback: {
20 |       buffer: require.resolve("buffer/"),
21 |       crypto: require.resolve("crypto-browserify"),
22 |       stream: require.resolve("stream-browserify"),
23 |       events: require.resolve("events/"),
24 |       path: require.resolve("path-browserify"),
25 |       http: require.resolve("stream-http"),
26 |       https: require.resolve("https-browserify"),
27 |       os: require.resolve("os-browserify/browser"),
28 |       url: require.resolve("url/")
29 |     }
30 |   },
31 |   output: {
32 |     path: path.join(__dirname, "/public"),
33 |     filename: "[name].js",
34 |     chunkFilename: "[name].[id].js"
35 |   },
36 |   module: {
37 |     rules: [
38 |       {
39 |         test: /\.ts$/,
40 |         loader: "ts-loader",
41 |         exclude: /node_modules/
42 |       },
43 |       {
44 |         test: /\.svelte$/,
45 |         use: {
46 |           loader: "svelte-loader",
47 |           options: {
48 |             compilerOptions: {
49 |               dev: !prod
50 |             },
51 |             emitCss: prod,
52 |             hotReload: !prod,
53 |             preprocess: sveltePreprocess({ sourceMap: !prod })
54 |           }
55 |         }
56 |       },
57 |       {
58 |         test: /\.(scss|css)$/,
59 |         use: ["style-loader", "css-loader", "sass-loader"]
60 |       },
61 |       /*{
62 |         test: /\.css$/,
63 |         use: [MiniCssExtractPlugin.loader, "css-loader"]
64 |       },*/
65 |       {
66 |         // required to prevent errors from Svelte on Webpack 5+
67 |         test: /node_modules\/svelte\/.*\.mjs$/,
68 |         resolve: {
69 |           fullySpecified: false
70 |         }
71 |       },
72 |       {
73 |         test: /\.jpg$/,
74 |         loader: "file-loader"
75 |       }
76 |     ]
77 |   },
78 |   mode,
79 |   plugins: [
80 |     new MiniCssExtractPlugin({
81 |       filename: "[name].css"
82 |     }),
83 |     new webpack.ProvidePlugin({
84 |       Buffer: ["buffer", "Buffer"]
85 |     })
86 |   ],
87 |   devtool: prod ? false : "source-map",
88 |   devServer: {
89 |     hot: true
90 |   }
91 | };
92 | 


--------------------------------------------------------------------------------