├── .editorconfig ├── .gitattributes ├── .gitignore ├── package-lock.json ├── package.json ├── readme.md ├── src ├── components.d.ts ├── components │ └── wallet │ │ ├── readme.md │ │ ├── wallet.scss │ │ └── wallet.tsx ├── global │ └── style.scss ├── index.html └── index.ts ├── stencil.config.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | !src/components/loader 5 | 6 | *~ 7 | *.sw[mnpcod] 8 | *.log 9 | *.lock 10 | *.tmp 11 | *.tmp.* 12 | log.txt 13 | *.sublime-project 14 | *.sublime-workspace 15 | 16 | .stencil/ 17 | .idea/ 18 | .vscode/ 19 | .sass-cache/ 20 | .versions/ 21 | node_modules/ 22 | $RECYCLE.BIN/ 23 | 24 | .DS_Store 25 | Thumbs.db 26 | UserInterfaceState.xcuserstate 27 | .env 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stellar-demo-wallet", 3 | "version": "0.0.47", 4 | "description": "Stellar Demo Wallet", 5 | "main": "dist/index.js", 6 | "module": "dist/index.mjs", 7 | "es2015": "dist/esm/index.mjs", 8 | "es2017": "dist/esm/index.mjs", 9 | "types": "dist/types/index.d.ts", 10 | "collection": "dist/collection/collection-manifest.json", 11 | "collection:main": "dist/collection/index.js", 12 | "unpkg": "dist/stellar-demo-wallet/stellar-demo-wallet.js", 13 | "files": [ 14 | "dist/", 15 | "loader/" 16 | ], 17 | "scripts": { 18 | "prepare": "npm run build", 19 | "build": "stencil build --docs", 20 | "start": "stencil build --dev --watch --serve", 21 | "generate": "stencil generate", 22 | "deploy": "npm publish ; vercel --prod --confirm --name stellar-demo-wallet" 23 | }, 24 | "devDependencies": { 25 | "@capacitor/cli": "^2.2.0", 26 | "@capacitor/core": "^2.2.0", 27 | "@stablelib/base64": "^1.0.0", 28 | "@stencil/core": "1.9.2", 29 | "@stencil/postcss": "^1.0.1", 30 | "@stencil/sass": "^1.3.2", 31 | "@tinyanvil/argon2": "0.0.5", 32 | "@types/autoprefixer": "^9.7.2", 33 | "autoprefixer": "^9.8.4", 34 | "axios": "^0.19.2", 35 | "copy-to-clipboard": "^3.3.1", 36 | "husky": "^4.2.5", 37 | "js-combinatorics": "^0.6.1", 38 | "lodash-es": "^4.17.15", 39 | "menubar": "^9.0.1", 40 | "prettier": "^2.0.5", 41 | "pretty-quick": "^2.0.1", 42 | "rollup-plugin-node-polyfills": "^0.2.1", 43 | "stellar-sdk": "^5.0.3", 44 | "toml": "^3.0.0", 45 | "tweetnacl": "^1.0.3" 46 | }, 47 | "husky": { 48 | "hooks": { 49 | "pre-commit": "pretty-quick --staged" 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) 2 | 3 | # Stencil Component Starter 4 | 5 | This is a starter project for building a standalone Web Component using Stencil. 6 | 7 | Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead. 8 | 9 | # Stencil 10 | 11 | Stencil is a compiler for building fast web apps using Web Components. 12 | 13 | Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec. 14 | 15 | Stencil components are just Web Components, so they work in any major framework or with no framework at all. 16 | 17 | ## Getting Started 18 | 19 | To start building a new web component using Stencil, clone this repo to a new directory: 20 | 21 | ```bash 22 | git clone https://github.com/ionic-team/stencil-component-starter.git my-component 23 | cd my-component 24 | git remote rm origin 25 | ``` 26 | 27 | and run: 28 | 29 | ```bash 30 | npm install 31 | npm start 32 | ``` 33 | 34 | To build the component for production, run: 35 | 36 | ```bash 37 | npm run build 38 | ``` 39 | 40 | To run the unit tests for the components, run: 41 | 42 | ```bash 43 | npm test 44 | ``` 45 | 46 | Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component). 47 | 48 | 49 | ## Naming Components 50 | 51 | When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: ``). This is because the generated component has little to nothing to do with Stencil; it's just a web component! 52 | 53 | Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`. 54 | 55 | 56 | ## Using this component 57 | 58 | ### Script tag 59 | 60 | - [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages) 61 | - Put a script tag similar to this `` in the head of your index.html 62 | - Then you can use the element anywhere in your template, JSX, html etc 63 | 64 | ### Node Modules 65 | - Run `npm install my-component --save` 66 | - Put a script tag similar to this `` in the head of your index.html 67 | - Then you can use the element anywhere in your template, JSX, html etc 68 | 69 | ### In a stencil-starter app 70 | - Run `npm install my-component --save` 71 | - Add an import to the npm packages `import my-component;` 72 | - Then you can use the element anywhere in your template, JSX, html etc 73 | -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /* tslint:disable */ 3 | /** 4 | * This is an autogenerated file created by the Stencil compiler. 5 | * It contains typing information for all components that exist in this project. 6 | */ 7 | import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; 8 | export namespace Components { 9 | interface StellarWallet {} 10 | } 11 | declare global { 12 | interface HTMLStellarWalletElement 13 | extends Components.StellarWallet, 14 | HTMLStencilElement {} 15 | var HTMLStellarWalletElement: { 16 | prototype: HTMLStellarWalletElement; 17 | new (): HTMLStellarWalletElement; 18 | }; 19 | interface HTMLElementTagNameMap { 20 | "stellar-wallet": HTMLStellarWalletElement; 21 | } 22 | } 23 | declare namespace LocalJSX { 24 | interface StellarWallet {} 25 | interface IntrinsicElements { 26 | "stellar-wallet": StellarWallet; 27 | } 28 | } 29 | export { LocalJSX as JSX }; 30 | declare module "@stencil/core" { 31 | export namespace JSX { 32 | interface IntrinsicElements { 33 | "stellar-wallet": LocalJSX.StellarWallet & 34 | JSXBase.HTMLAttributes; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/wallet/readme.md: -------------------------------------------------------------------------------- 1 | # stellar-wallet 2 | 3 | 4 | 5 | --- 6 | 7 | _Built with [StencilJS](https://stenciljs.com/)_ 8 | -------------------------------------------------------------------------------- /src/components/wallet/wallet.scss: -------------------------------------------------------------------------------- 1 | @import '../../global/style.scss'; 2 | 3 | :host { 4 | display: block; 5 | font-family: $font-family; 6 | font-size: 15px; 7 | 8 | p { 9 | white-space: nowrap; 10 | overflow: hidden; 11 | text-overflow: ellipsis; 12 | display: block; 13 | } 14 | button { 15 | margin-bottom: 10px; 16 | } 17 | 18 | .account-key { 19 | display: flex; 20 | align-items: center; 21 | width: 100%; 22 | margin-bottom: 10px; 23 | 24 | .small { 25 | margin: 0 0 0 10px; 26 | flex-shrink: 0; 27 | } 28 | } 29 | .account-state, 30 | .error { 31 | overflow: scroll; 32 | padding: 10px; 33 | font-size: 12px; 34 | line-height: 1.2; 35 | font-family: $font-mono; 36 | margin-bottom: 10px; 37 | width: 100%; 38 | } 39 | .account-state { 40 | background-color: whitesmoke; 41 | } 42 | .error { 43 | background-color: orangered; 44 | color: white; 45 | } 46 | 47 | stellar-loader { 48 | position: absolute; 49 | top: 50%; 50 | left: 50%; 51 | transform: translate(-50%, -50%); 52 | } 53 | } -------------------------------------------------------------------------------- /src/components/wallet/wallet.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h } from '@stencil/core' 2 | import * as StellarSdk from 'stellar-sdk' 3 | 4 | @Component({ 5 | tag: 'stellar-wallet', 6 | styleUrl: 'wallet.scss', 7 | shadow: true 8 | }) 9 | export class Wallet { 10 | render() { 11 | return [ 12 |

13 | { 14 | !!StellarSdk 15 | ? 'The StellarSdk is ready to rock 🤘' 16 | : 'Uh oh, the StellarSdk is missing 😱' 17 | } 18 |

19 | ] 20 | } 21 | } -------------------------------------------------------------------------------- /src/global/style.scss: -------------------------------------------------------------------------------- 1 | $font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; 2 | $font-mono: monospace; 3 | 4 | html, body, div, span, applet, object, iframe, 5 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 6 | a, abbr, acronym, address, big, cite, code, 7 | del, dfn, em, img, ins, kbd, q, s, samp, 8 | small, strike, strong, sub, sup, tt, var, 9 | b, u, i, center, 10 | dl, dt, dd, ol, ul, li, 11 | fieldset, form, label, legend, 12 | table, caption, tbody, tfoot, thead, tr, th, td, 13 | article, aside, canvas, details, embed, 14 | figure, figcaption, footer, header, hgroup, 15 | menu, nav, output, ruby, section, summary, 16 | time, mark, audio, video { 17 | margin: 0; 18 | padding: 0; 19 | border: 0; 20 | font-size: 100%; 21 | font: inherit; 22 | vertical-align: baseline; 23 | } 24 | /* HTML5 display-role reset for older browsers */ 25 | article, aside, details, figcaption, figure, 26 | footer, header, hgroup, menu, nav, section { 27 | display: block; 28 | } 29 | body { 30 | line-height: 1; 31 | } 32 | ol, ul { 33 | list-style: none; 34 | } 35 | blockquote, q { 36 | quotes: none; 37 | } 38 | blockquote:before, blockquote:after, 39 | q:before, q:after { 40 | content: ''; 41 | content: none; 42 | } 43 | table { 44 | border-collapse: collapse; 45 | border-spacing: 0; 46 | } 47 | 48 | * { 49 | box-sizing: border-box; 50 | } 51 | input, 52 | button, 53 | select, 54 | textarea { 55 | font-family: $font-family; 56 | font-size: 15px; 57 | outline: none; 58 | appearance: none; 59 | border-radius: 0; 60 | } 61 | input, 62 | select, 63 | button { 64 | height: 30px; 65 | } 66 | button { 67 | border: none; 68 | appearance: none; 69 | position: relative; 70 | background-color: blue; 71 | color: white; 72 | margin: 0; 73 | display: flex; 74 | align-items: center; 75 | align-content: center; 76 | justify-content: center; 77 | justify-items: center; 78 | padding: 0 10px; 79 | cursor: pointer; 80 | 81 | &.loading { 82 | color: transparent; 83 | pointer-events: none; 84 | } 85 | &.small { 86 | font-size: 12px; 87 | height: 20px; 88 | } 89 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stellar Wallet 7 | 8 | 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | -------------------------------------------------------------------------------- /stencil.config.ts: -------------------------------------------------------------------------------- 1 | import { Config } from "@stencil/core"; 2 | import { sass } from "@stencil/sass"; 3 | import { postcss } from "@stencil/postcss"; 4 | import autoprefixer from "autoprefixer"; 5 | import nodePolyfills from "rollup-plugin-node-polyfills"; 6 | 7 | export const config: Config = { 8 | namespace: "stellar-wallet", 9 | devServer: { 10 | openBrowser: false, 11 | }, 12 | outputTargets: [ 13 | { 14 | type: "dist", 15 | esmLoaderPath: "../loader", 16 | }, 17 | { 18 | type: "docs-readme", 19 | }, 20 | { 21 | type: "www", 22 | serviceWorker: null, // disable service workers 23 | baseUrl: "http://localhost:3333/", 24 | }, 25 | ], 26 | globalStyle: "src/global/style.scss", 27 | commonjs: { 28 | namedExports: { 29 | "stellar-sdk": [ 30 | "StrKey", 31 | "xdr", 32 | "Transaction", 33 | "Keypair", 34 | "Networks", 35 | "Account", 36 | "TransactionBuilder", 37 | "BASE_FEE", 38 | "Operation", 39 | "Asset", 40 | "Memo", 41 | "MemoHash", 42 | ], 43 | }, 44 | }, 45 | plugins: [ 46 | nodePolyfills(), 47 | sass(), 48 | postcss({ 49 | plugins: [autoprefixer()], 50 | }), 51 | ], 52 | nodeResolve: { 53 | browser: true, 54 | preferBuiltins: true, 55 | }, 56 | }; 57 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src", 21 | "types/jsx.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------