Release 1.0.0

matter-labs · Dec 8, 2020 · efe88ac · efe88ac
commit efe88ac
Show file tree

Hide file tree

Showing 26 changed files with 3,454 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1 @@
+custom: https://pay.now.sh/?MHgwNTM1NzY2RTc1RUUwNjAzZjQwZTg1MjBFZUFGQmNFOTQ0QTU3RjcyfHw
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+.idea
+.vercel
+.DS_Store
+node_modules
+public/**/bundle.*
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+stable
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,5 @@
+## Pay Now | Changelog
+
+
+### 1.0.0 (2020-12-08)
+* Initial release
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+<p align="center">
+    <b>Pay Now</b>
+    <br>
+    Create payment links, get paid in tokens
+</p>
+
+#### Payment 3.0 made by you
+Accept payments instantly using payment links (provided by [zkSync](https://zksync.io)). Generate a link in one tap, copy your payment link and share it with your clients, friends and users to request payments and donations. 
+
+#### Application
+* [https://pay.now.sh](https://pay.now.sh)
+
+#### Example
+* [Sponsor the project](https://pay.now.sh/?MHgwNTM1NzY2RTc1RUUwNjAzZjQwZTg1MjBFZUFGQmNFOTQ0QTU3RjcyfHw)
+
+#### Features
+* Hand drafted frontend
+* Based on [zkSync Checkout](https://www.notion.so/zkSync-Checkout-docs-2bffd6f169e746d0b51873e4127992a6)
+* Sync available tokens from API
+* Copy payment link to clipboard
+* Update payment link on changes
+* En-/Decryption by `btoa` / `atob`
+* No DB, no 3rd-party dependencies
+* Performance optimized application
+
+#### UI
+* Usability tested
+* Full responsive layout
+* Flat & clean user interface
+* Dark / Light themes (auto switch)
+
+#### Illustration
+* Created by [pch.vector](https://www.freepik.com)
+
+
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "pay.now.sh",
+    "private": true,
+    "description": "Pay Now - Create payment links, get paid in tokens",
+    "version": "1.0.0",
+    "scripts": {
+        "build": "rollup -c",
+        "dev": "rollup -c -w",
+        "start": "sirv public"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^14.0.0",
+        "@rollup/plugin-json": "^4.1.0",
+        "@rollup/plugin-node-resolve": "^8.0.0",
+        "rollup": "^2.33.1",
+        "rollup-plugin-css-asset": "^1.0.2",
+        "rollup-plugin-livereload": "^2.0.0",
+        "rollup-plugin-node-builtins": "^2.1.2",
+        "rollup-plugin-svelte": "^6.0.0",
+        "rollup-plugin-terser": "^7.0.0",
+        "sirv-cli": "^1.0.0",
+        "svelte": "^3.0.0",
+        "vercel": "^21.0.1"
+    },
+    "dependencies": {
+        "ethers": "^5.0.23",
+        "zksync-checkout": "^0.0.6"
+    },
+    "license": "MIT"
+}
diff --git a/public/fonts/ibm-plex-sans-400.woff2 b/public/fonts/ibm-plex-sans-400.woff2
diff --git a/public/fonts/ibm-plex-sans-700.woff2 b/public/fonts/ibm-plex-sans-700.woff2
diff --git a/public/images/arrow.svg b/public/images/arrow.svg
diff --git a/public/images/artwork.svg b/public/images/artwork.svg
diff --git a/public/images/favicon.png b/public/images/favicon.png
diff --git a/public/images/icon-192.png b/public/images/icon-192.png
diff --git a/public/images/icon-512.png b/public/images/icon-512.png
diff --git a/public/images/icon.svg b/public/images/icon.svg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+
+<html lang="en">
+    <head>
+    	<meta charset="utf-8">
+        <meta name="robots" content="noindex">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+        <meta name="description" content="Pay Now - Create payment links, get paid in tokens">
+
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-title" content="Pay Now - Create payment links, get paid in tokens">
+        <meta name="apple-mobile-web-app-status-bar-style" content="#f4f7fe">
+        <meta name="theme-color" content="#f4f7fe">
+
+    	<link rel="stylesheet" href="styles/global.css">
+        <link rel="stylesheet" href="styles/bundle.css">
+
+        <link rel="icon" type="image/png" href="images/favicon.png">
+        <link rel="apple-touch-icon" sizes="192x192" href="images/icon-192.png">
+        <link rel="apple-touch-icon" sizes="512x512" href="images/icon-512.png">
+
+        <title>Pay Now - Create payment links, get paid in tokens</title>
+    </head>
+
+    <body>
+    	<script src="scripts/bundle.js"></script>
+    </body>
+</html>
diff --git a/public/scripts/sw.js b/public/scripts/sw.js
@@ -0,0 +1,36 @@
+const CACHE_NAME = 'zksync-v1';
+
+self.addEventListener('fetch', event => {
+    const request = event.request;
+    const url = new URL(request.url);
+
+    if (request.method !== 'GET') {
+        return;
+    }
+
+    if (url.origin !== location.origin) {
+        return;
+    }
+
+    const whitelist = ['font', 'style', 'script', 'image'];
+    const destination = request.destination;
+
+    if (whitelist.indexOf(destination) === -1) {
+        return;
+    }
+
+    event.respondWith(
+        caches.open(CACHE_NAME).then(cache => {
+            return cache.match(request).then(response => {
+                return response || fetch(request).then(response => {
+                    if (!response || response.status !== 200 || response.type !== 'basic') {
+                        return response;
+                    }
+
+                    cache.put(request, response.clone());
+                    return response;
+                });
+            });
+        })
+    );
+});
diff --git a/public/styles/global.css b/public/styles/global.css
@@ -0,0 +1,121 @@
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url(../fonts/ibm-plex-sans-400.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+    src: url(../fonts/ibm-plex-sans-700.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+    --color-page-text: rgb(43, 41, 85);
+    --color-page-text-light: rgb(152, 166, 215);
+
+    --color-aside-background: #f4f7fe;
+    --color-main-background: #ffffff;
+
+    --color-submit: var(--color-page-text);
+    --color-submit-hover: rgb(255, 255, 255);
+    --color-submit-background: var(--color-page-text-light);
+    --color-submit-background-hover: rgb(87, 147, 86);
+
+    --color-input-border: #f3f6f9;
+    --color-input-border-hover: var(--color-page-text-light);
+    --color-input-background: #f3f6f9;
+    --color-input-placeholder: lightgray;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-page-text: rgb(255, 255, 255);
+        --color-page-text-light: rgb(161, 167, 187);
+
+        --color-aside-background: rgb(52, 54, 69);
+        --color-main-background: rgb(36, 38, 49);
+
+        --color-submit: var(--color-page-text);
+        --color-submit-hover: rgb(255, 255, 255);
+        --color-submit-background: rgb(97, 136, 255);
+        --color-submit-background-hover: rgb(87, 147, 86);
+
+        --color-input-border: rgb(52, 54, 69);
+        --color-input-border-hover: var(--color-page-text-light);
+        --color-input-background: rgb(52, 54, 69);
+        --color-input-placeholder: rgb(100, 107, 128);
+    }
+}
+
+a,
+p,
+h1,
+h2,
+h3,
+div,
+nav,
+body,
+html,
+main,
+form,
+aside,
+input,
+select,
+button,
+legend,
+fieldset,
+textarea {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    flex-direction: row;
+}
+
+body, a, input, select, textarea, button {
+    color: var(--color-page-text);
+
+    font: 1.1rem/1 'IBM Plex Sans', sans-serif;
+    text-rendering: optimizeLegibility;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+
+h2 {
+    font-size: 1.6rem;
+    line-height: 1.8rem;
+}
+h3 {
+    color: var(--color-page-text-light);
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    font-weight: normal;
+    display: block;
+    margin-top: 1rem;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+input[type=number] {
+    -webkit-appearance: textfield;
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,94 @@
+import svelte from 'rollup-plugin-svelte';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import builtins from 'rollup-plugin-node-builtins';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-asset';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+    let server;
+
+    function toExit() {
+        if (server) server.kill(0);
+    }
+
+    return {
+        writeBundle() {
+            if (server) return;
+            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+                stdio: ['ignore', 'inherit', 'inherit'],
+                shell: true
+            });
+
+            process.on('SIGTERM', toExit);
+            process.on('exit', toExit);
+        }
+    };
+}
+
+export default {
+    input: 'src/app.js',
+    output: {
+        sourcemap: !production,
+        format: 'iife',
+        name: 'app',
+        dir: 'public',
+        assetFileNames: 'styles/bundle.css',
+        entryFileNames: 'scripts/bundle.js',
+        inlineDynamicImports: true,
+    },
+    plugins: [
+        json(),
+        svelte({
+            dev: !production,
+            emitCss: true,
+        }),
+
+        css({
+            name: 'bundle',
+        }),
+
+        resolve({
+            browser: true,
+            preferBuiltins: false,
+            dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
+        }),
+        commonjs(),
+        builtins(),
+
+        !production && serve(),
+        !production && livereload('public'),
+
+        production && terser()
+    ],
+    watch: {
+        clearScreen: false
+    },
+    moduleContext: (id) => {
+        const thisAsWindowForModules = [
+            'node_modules/@ethersproject/web/lib.esm/geturl.js',
+            'node_modules/@ethersproject/hash/lib.esm/typed-data.js',
+            'node_modules/@ethersproject/json-wallets/lib.esm/keystore.js',
+            'node_modules/@ethersproject/providers/lib.esm/websocket-provider.js',
+            'node_modules/@ethersproject/web/lib.esm/index.js',
+            'node_modules/@ethersproject/providers/lib.esm/url-json-rpc-provider.js',
+            'node_modules/@ethersproject/providers/lib.esm/json-rpc-provider.js',
+            'node_modules/@ethersproject/providers/lib.esm/cloudflare-provider.js',
+            'node_modules/@ethersproject/providers/lib.esm/fallback-provider.js',
+            'node_modules/@ethersproject/providers/lib.esm/etherscan-provider.js',
+            'node_modules/@ethersproject/wallet/lib.esm/index.js',
+            'node_modules/@ethersproject/abstract-signer/lib.esm/index.js',
+            'node_modules/@ethersproject/contracts/lib.esm/index.js',
+            'node_modules/@ethersproject/properties/lib.esm/index.js',
+            'node_modules/@ethersproject/providers/lib.esm/base-provider.js',
+        ];
+
+        if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
+            return 'window';
+        }
+    }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		custom: https://pay.now.sh/?MHgwNTM1NzY2RTc1RUUwNjAzZjQwZTg1MjBFZUFGQmNFOTQ0QTU3RjcyfHw