Release 1.3.0 (#3)

* Add social media sharing links
matter-labs · Dec 15, 2020 · 4cbd74c · 4cbd74c
1 parent 0a3f3d6
commit 4cbd74c
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 ## PayNow | Changelog
 
 
+### 1.3.0 (2020-12-15)
+* Add social media sharing links
+
 ### 1.2.0 (2020-12-10)
 * Update app icons
 * Logo @ page header

diff --git a/README.md b/README.md
@@ -11,14 +11,15 @@ Accept payments instantly using payment links (provided by [zkSync](https://zksy
 * [https://pay.now.sh](https://pay.now.sh)
 
 #### Example
-* [Sponsor the project](https://pay.now.sh/?MHgwNTM1NzY2RTc1RUUwNjAzZjQwZTg1MjBFZUFGQmNFOTQ0QTU3RjcyfHw)
+* [Sponsor this 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
+* Get available tokens from zkSync API
+* Copy the payment link to clipboard
+* Share the payment link on social media
+* Update the payment link on changes
 * En-/Decryption by `btoa` / `atob`
 * No DB, no 3rd-party dependencies
 * Performance optimized application
@@ -33,7 +34,6 @@ Accept payments instantly using payment links (provided by [zkSync](https://zksy
 * CI tests
 * Additional infos
 * QR Code generator
-* Social Media links
 * `semanticType: FeeOrCommission`
 
 #### Illustration

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "pay.now.sh",
     "private": true,
     "description": "PayNow - Create payment links, get paid in tokens",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "scripts": {
         "build": "rollup -c",
         "dev": "rollup -c -w",

diff --git a/src/Constants.js b/src/Constants.js
@@ -1,2 +1,4 @@
 export const HOME_URL = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
 export const TOKENS_API = 'https://api.zksync.io/api/v0.1/tokens';
+export const TWEET_URL = 'https://twitter.com/intent/tweet?url=';
+export const SHARER_URL = 'https://www.facebook.com/sharer/sharer.php?u=';
diff --git a/src/Main.svelte b/src/Main.svelte
@@ -1,13 +1,14 @@
 <script>
-    import { HOME_URL, TOKENS_API } from './Constants'
+    import { HOME_URL, TOKENS_API, TWEET_URL, SHARER_URL } from './Constants'
     import { CheckoutManager } from 'zksync-checkout'
     import { onMount } from 'svelte';
 
     let form;
+    let select;
     let link;
     let tokens;
     let visible;
-    let copied = 'Copy';
+    let copied = 'copy';
 
     export let to = '';
     export let token = '';
@@ -48,9 +49,17 @@
     const copy = async () => {
         await navigator.clipboard.writeText(form.link.value);
 
-        copied = 'Copied';
+        copied = 'copied';
 
-        setTimeout(() => copied = 'Copy', 2500);
+        setTimeout(() => copied = 'copy', 2500);
+    }
+
+    const tweet = () => {
+        window.open(`${TWEET_URL}${encodeURIComponent(form.link.value)}`, '_blank');
+    }
+
+    const share = () => {
+        window.open(`${SHARER_URL}${encodeURIComponent(form.link.value)}`, '_blank');
     }
 
     const zkCheckout = async () => {
@@ -78,25 +87,11 @@
 
     onMount(async () => {
         fetch(TOKENS_API)
-        .then(response => {
-            if (response.ok) {
-                return response.json();
-            }
-
-            throw new Error('Fetch tokens network error');
-        })
-        .then(items => {
-            const select = form.querySelector('select[name="token"]');
-            const symbols = items.map(item => item.symbol).filter(symbol => !['ETH', 'DAI'].includes(symbol));
-
-            symbols.forEach(symbol => select.add(new Option(symbol)));
-
-            select.value = token;
-            tokens = items;
-        })
-        .catch(error => {
-            console.error('Fetch tokens error:', error);
-        });
+        .then(response => response.json())
+        .then(items => tokens = items)
+        .then(() => tokens.map(item => item.symbol).filter(symbol => !['ETH', 'DAI'].includes(symbol)).forEach(symbol => select.add(new Option(symbol))))
+        .then(() => select.value = token)
+        .catch(error => console.error('Fetch tokens error:', error));
     });
 </script>
 
@@ -168,13 +163,13 @@
         color: var(--color-input-placeholder);
     }
 
-    select:hover,
-    input:hover {
+    select:not([disabled]):hover,
+    input:not([readonly]):hover {
         background-color: transparent;
         border-color: var(--color-input-border-hover);
     }
 
-    select[readonly],
+    select[disabled],
     input[readonly] {
         cursor: default;
     }
@@ -183,10 +178,6 @@
         border-color: var(--color-input-border-hover);
     }
 
-    input[readonly]:hover {
-        pointer-events: none;
-    }
-
     select {
         width: 9rem;
         -webkit-appearance: none;
@@ -240,29 +231,39 @@
         top: .5rem;
         right: 1.5rem;
         position: absolute;
+        display: flex;
     }
     nav button {
         cursor: pointer;
         display: flex;
+        align-items: center;
         background-color: transparent;
     }
+    nav button + button {
+        margin-left: 1rem;
+    }
     nav button small {
-        display: block;
+        display: none;
         margin-right: .4rem;
         color: var(--color-page-text-light);
         font-size: .8rem;
         line-height: 1rem;
-        transition: color .25s;
+        opacity: .6;
+        transition: color .25s, opacity .25s;
     }
     nav button svg {
         width: auto;
-        height: 1rem;
+        height: .9rem;
         display: block;
         fill: var(--color-page-text-light);
         transition: fill .25s;
     }
+    nav button:nth-child(2) svg {
+        height: 1rem;
+    }
     nav button:hover small {
         color: var(--color-page-text);
+        opacity: 1;
     }
     nav button:hover svg {
         fill: var(--color-page-text);
@@ -294,6 +295,9 @@
             width: 38rem;
             padding: 2rem;
         }
+        nav button small {
+            display: block;
+        }
     }
     @media (min-width: 1024px) {
         main {
@@ -366,15 +370,15 @@
         <fieldset>
             <div class="token">
                 <legend>Token</legend>
-                <select name="token" disabled="{token}" required="{checkout}" on:change="{update}" on:blur="{update}">
+                <select name="token" disabled="{token}" required="{checkout}" on:change="{update}" on:blur="{update}" bind:this={select}>
                     <option></option>
                     <option>ETH</option>
                     <option>DAI</option>
                 </select>
             </div>
             <div class="amount">
                 <legend>Amount</legend>
-                <input type="number" name="amount" value="{amount}" readonly="{amount}" required="{checkout}" on:input="{update}" step="any" placeholder="10" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off">
+                <input type="number" name="amount" value="{amount}" readonly="{amount}" required="{checkout}" on:input="{update}" step="any" autocapitalize="off" autocorrect="off" spellcheck="false" autocomplete="off">
             </div>
         </fieldset>
 
@@ -395,13 +399,27 @@
                 <nav>
                     <button type="button" on:click="{copy}">
                         <small>{copied}</small>
-                        <svg height="500" viewBox="0 0 375 500" width="375" xmlns="http://www.w3.org/2000/svg">
+                        <svg viewBox="0 0 375 500" xmlns="http://www.w3.org/2000/svg">
                             <g>
                                 <path d="m319.808594 33.949219h-80.355469c-9.105469-20.632813-29.535156-33.949219-52.089844-33.949219-22.558593 0-42.988281 13.316406-52.09375 33.949219h-80.359375c-30.3125.035156-54.875 24.601562-54.910156 54.914062v356.222657c.035156 30.3125 24.597656 54.878906 54.910156 54.914062h264.898438c30.3125-.035156 54.878906-24.601562 54.914062-54.914062v-356.222657c-.035156-30.3125-24.601562-54.878906-54.914062-54.914062zm-175.496094 25c5.867188 0 10.945312-4.082031 12.207031-9.820313 3.070313-13.976562 16.042969-24.128906 30.84375-24.128906s27.769531 10.152344 30.839844 24.128906c1.257813 5.738282 6.335937 9.820313 12.210937 9.820313h24.785157v10.96875c-.019531 16.511719-13.398438 29.890625-29.910157 29.910156h-75.855468c-16.515625-.019531-29.894532-13.398437-29.914063-29.910156v-10.96875zm205.410156 386.136719c-.015625 16.515624-13.398437 29.898437-29.914062 29.914062h-264.898438c-16.511718-.015625-29.890625-13.398438-29.910156-29.914062v-356.222657c.019531-16.515625 13.398438-29.894531 29.910156-29.914062h39.609375v10.96875c.035157 30.3125 24.601563 54.875 54.914063 54.910156h75.855468c30.3125-.035156 54.875-24.597656 54.910157-54.910156v-10.96875h39.609375c16.515625.019531 29.894531 13.398437 29.914062 29.914062z"/>
                                 <path d="m249.226562 230.957031-82.0625 80.125-41.671874-40.675781c-4.902344-4.796875-12.753907-4.738281-17.59375.121094-4.835938 4.863281-4.855469 12.714844-.039063 17.597656l.167969.164062 50.398437 49.210938c4.859375 4.742188 12.613281 4.742188 17.46875 0l90.792969-88.648438c4.910156-4.828124 4.988281-12.714843.183594-17.640624-4.8125-4.925782-12.695313-5.035157-17.644532-.246094z"/>
                             </g>
                         </svg>
                     </button>
+
+                    <button type="button" on:click="{tweet}">
+                        <small>tweet</small>
+                        <svg viewBox="0 -47 512.00004 512" xmlns="http://www.w3.org/2000/svg">
+                            <path d="m512 55.964844c-32.207031 1.484375-31.503906 1.363281-35.144531 1.667968l19.074219-54.472656s-59.539063 21.902344-74.632813 25.820313c-39.640625-35.628907-98.5625-37.203125-140.6875-11.3125-34.496094 21.207031-53.011719 57.625-46.835937 100.191406-67.136719-9.316406-123.703126-41.140625-168.363282-94.789063l-14.125-16.964843-10.554687 19.382812c-13.339844 24.492188-17.769531 52.496094-12.476563 78.851563 2.171875 10.8125 5.863282 21.125 10.976563 30.78125l-12.117188-4.695313-1.4375 20.246094c-1.457031 20.566406 5.390625 44.574219 18.320313 64.214844 3.640625 5.53125 8.328125 11.605469 14.269531 17.597656l-6.261719-.960937 7.640625 23.199218c10.042969 30.480469 30.902344 54.0625 57.972657 67.171875-27.035157 11.472657-48.875 18.792969-84.773438 30.601563l-32.84375 10.796875 30.335938 16.585937c11.566406 6.324219 52.4375 27.445313 92.820312 33.78125 89.765625 14.078125 190.832031 2.613282 258.871094-58.664062 57.308594-51.613282 76.113281-125.03125 72.207031-201.433594-.589844-11.566406 2.578125-22.605469 8.921875-31.078125 12.707031-16.964844 48.765625-66.40625 48.84375-66.519531zm-72.832031 48.550781c-10.535157 14.066406-15.8125 32.03125-14.867188 50.578125 3.941407 77.066406-17.027343 136.832031-62.328125 177.628906-52.917968 47.660156-138.273437 66.367188-234.171875 51.324219-17.367187-2.722656-35.316406-8.820313-50.171875-14.910156 30.097656-10.355469 53.339844-19.585938 90.875-37.351563l52.398438-24.800781-57.851563-3.703125c-27.710937-1.773438-50.785156-15.203125-64.96875-37.007812 7.53125-.4375 14.792969-1.65625 22.023438-3.671876l55.175781-15.367187-55.636719-13.625c-27.035156-6.621094-42.445312-22.796875-50.613281-35.203125-5.363281-8.152344-8.867188-16.503906-10.96875-24.203125 5.578125 1.496094 12.082031 2.5625 22.570312 3.601563l51.496094 5.09375-40.800781-31.828126c-29.398437-22.929687-41.179687-57.378906-32.542969-90.496093 91.75 95.164062 199.476563 88.011719 210.320313 90.527343-2.386719-23.183593-2.449219-23.238281-3.074219-25.445312-13.886719-49.089844 16.546875-74.015625 30.273438-82.453125 28.671874-17.621094 74.183593-20.277344 105.707031 8.753906 6.808593 6.265625 16.015625 8.730469 24.632812 6.589844 7.734375-1.921875 14.082031-3.957031 20.296875-6.171875l-12.9375 36.945312 16.515625.011719c-3.117187 4.179688-6.855469 9.183594-11.351562 15.183594zm0 0"/>
+                        </svg>
+                    </button>
+
+                    <button type="button" on:click="{share}">
+                        <small>share</small>
+                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+                            <path d="m75 512h167v-182h-60v-60h60v-75c0-41.355469 33.644531-75 75-75h75v60h-60c-16.542969 0-30 13.457031-30 30v60h87.292969l-10 60h-77.292969v182h135c41.355469 0 75-33.644531 75-75v-362c0-41.355469-33.644531-75-75-75h-362c-41.355469 0-75 33.644531-75 75v362c0 41.355469 33.644531 75 75 75zm-45-437c0-24.8125 20.1875-45 45-45h362c24.8125 0 45 20.1875 45 45v362c0 24.8125-20.1875 45-45 45h-105v-122h72.707031l20-120h-92.707031v-30h90v-120h-105c-57.898438 0-105 47.101562-105 105v45h-60v120h60v122h-137c-24.8125 0-45-20.1875-45-45zm0 0"/>
+                        </svg>
+                    </button>
                 </nav>
             </div>
         </fieldset>