Merge pull request #2 from Access-Labs-Inc/fix/deployment

Add deployment setup
Access-Labs-Inc · Jul 10, 2024 · e60ac4c · e60ac4c
2 parents 315e029 + 5d2df71
commit e60ac4c
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 106 deletions.
diff --git a/.github/workflows/release-production.yml b/.github/workflows/release-production.yml
@@ -46,7 +46,7 @@ jobs:
           args: --follow-symlinks --delete
         env:
           SOURCE_DIR: "./dist"
-          DEST_DIR: "acs-widget"
+          DEST_DIR: "acs-widget-actions"
           AWS_REGION: ${{ secrets.AWS_S3_REGION }}
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -58,7 +58,7 @@ jobs:
         env:
           DISTRIBUTION: ${{ secrets.AWS_CF_DISTRIBUTION }}
           # TODO: Update only updated files w example: https://github.com/chetan/invalidate-cloudfront-action
-          PATHS: "/acs-widget/widget.js /acs-widget/index.html /acs-widget/favicon.ico"
+          PATHS: "/acs-widget-actions/*"
           AWS_REGION: ${{ secrets.AWS_S3_REGION }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/.github/workflows/release-staging.yml b/.github/workflows/release-staging.yml
@@ -45,7 +45,7 @@ jobs:
           args: --follow-symlinks --delete
         env:
           SOURCE_DIR: "./dist"
-          DEST_DIR: "acs-widget-staging"
+          DEST_DIR: "acs-widget-actions-staging"
           AWS_REGION: ${{ secrets.AWS_S3_REGION }}
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -57,7 +57,7 @@ jobs:
         env:
           DISTRIBUTION: ${{ secrets.AWS_CF_DISTRIBUTION }}
           # TODO: Update only updated files w example: https://github.com/chetan/invalidate-cloudfront-action
-          PATHS: "/acs-widget-staging/*"
+          PATHS: "/acs-widget-actions-staging/*"
           AWS_REGION: ${{ secrets.AWS_S3_REGION }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
diff --git a/AWS_SETUP.md b/AWS_SETUP.md
@@ -0,0 +1,66 @@
+# Setup the AWS for distribution
+
+- S3 will save the files
+- Cloudfront will provide HTTPS for sending the files and CDN
+
+## Setup S3 bucket
+- Name: acs-widget-actions
+
+- Block all public access (bucket settings)
+  - Block all public access: Off
+  - Click yellow box - [x] I acknowledge that... 
+
+- Bucket versioning - Disabled
+- Tags - None
+- Default encryption
+
+- Bucket policy
+```json
+{
+    "Version": "2012-10-17",
+    "Statement": [
+        {
+            "Sid": "PublicReadGetObject",
+            "Effect": "Allow",
+            "Principal": "*",
+            "Action": "s3:GetObject",
+            "Resource": "arn:aws:s3:::acs-widget-actions/*"
+        }
+    ]
+}
+```
+- ACL disabled
+
+- CORS file
+```json
+[
+    {
+        "AllowedHeaders": [
+            "*"
+        ],
+        "AllowedMethods": [
+            "GET"
+        ],
+        "AllowedOrigins": [
+            "*"
+        ],
+        "ExposeHeaders": []
+    }
+]
+```
+
+- Directories:
+  - acs-widget-actions-staging
+  - acs-widget-actions
+
+### Github Action Secrets setup
+  - AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY -> in 1Password or create new IAM user with full access to S3
+  - AWS_S3_BUCKET, AWS_S3_REGION -> 'acs-widget-actions', 'eu-central-1'
+  - AWS_CF_DISTRIBUTION -> Is the Cloudfront distribution ID
+
+### Cloudfront setup
+  - Create new distribution
+  - Connect it to our existing bucket as Origin
+  - Allow HTTP3 and HTTP with HTTPS
+  - All the rest should stay default
+
diff --git a/README.md b/README.md
@@ -9,20 +9,20 @@ In order to embed the widget add the following snippet at any location on the ho
 ```html
 <head>
   <!-- Import the styles from us or provide your own -->
-  <link rel="stylesheet" href="https://TODO/acs-widget-staging/main.css" /> 
+  <link rel="stylesheet" href="https://d365a01fpruiwk.cloudfront.net/acs-widget-actions-staging/main.css" /> 
 </head>
 <body>
   ...
-  <div id="acs"></div> <!-- <= Place where the ACS button will show -->
+  <div id="acs-blink"></div> <!-- <= Place where the ACS button will show -->
   ...
   <script>
     (function (w, d, s, o, f, js, fjs) {
         w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
         js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
         js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
-    }(window, document, 'script', '_acs', 'https://TODO/acs-widget-staging/widget.js'));
-    _acs('init', {
-      element: document.getElementById('acs'),
+    }(window, document, 'script', '_acs_blink', 'https://d365a01fpruiwk.cloudfront.net/acs-widget-actions-staging/widget.js'));
+    _acs_blink('init', {
+      element: document.getElementById('acs-blink'),
       poolId: 'Fxh4hDFHJuTfD3Eq4en36dTk8QvbsSMoTE5Y2hVX3qVt',
       poolName: "The Block",
     });
@@ -33,10 +33,10 @@ In order to embed the widget add the following snippet at any location on the ho
     // airdrop - amount of ACS (with decimals) airdroped against your pool
     // ----------------------------------------------------------------
     // NOTE: To get ACS withtout decimals divide the numbers by 10 ** 6
-    document.querySelector("#acs").addEventListener("connected", (event) => {
+    document.querySelector("#acs-blink").addEventListener("connected", (event) => {
       console.log("Connected to the wallet: " + JSON.stringify(event.detail));
     });
-    document.querySelector("#acs").addEventListener("bought", (event) => {
+    document.querySelector("#acs-blink").addEventListener("bought", (event) => {
       console.log("Bought tNFT with signature: " + JSON.stringify(event.detail));
     });
   </script>
@@ -50,8 +50,8 @@ You can optionally change CSS class prefix `classPrefix` to provide your CSS sty
 ## Production builds
 
 For production use these URLs:
-- `https://TODO.cloudfront.net/acs-widget/widget.js`
-- `https://TODO.cloudfront.net/acs-widget/main.css`
+- `https://d365a01fpruiwk.cloudfront.net/acs-widget-actions/widget.js`
+- `https://d365a01fpruiwk.cloudfront.net/acs-widget-actions/main.css`
 
 ## Develop
 
@@ -73,7 +73,7 @@ git tag vX.X.X-beta && git push origin vX.X.X-beta
 ```
 
 After this wait for the Github Actions to finish the deploy to S3 and Cloudfront.
-The demo app will be avail at: https://XXX.cloudfront.net/acs-widget-staging/index.html
+The demo app will be avail at: https://d365a01fpruiwk.cloudfront.net/acs-widget-actions-staging/index.html
 
 
 ## Release new version to production
@@ -84,7 +84,7 @@ git tag vX.X.X && git push origin vX.X.X
 ```
 
 After this wait for the Github Actions to finish the deploy to S3 and Cloudfront.
-The demo app will be avail at: https://XXX.cloudfront.net/acs-widget/index.html
+The demo app will be avail at: https://d365a01fpruiwk.cloudfront.net/acs-widget-actions/index.html
 
 ## License
 The source and documentation in this project are released under the [MIT License](LICENSE)
diff --git a/html-dev/index.html b/html-dev/index.html
@@ -13,26 +13,26 @@
       <h1>ACS Actions Widget dev page</h1>
       <h2>The shown widget is for demonstration purpose only</h2>
 
-      <div id="acs"></div>
+      <div id="acs-blink"></div>
     </div>
 
     <script>
       (function (w, d, s, o, f, js, fjs) {
           w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
           js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
           js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
-      }(window, document, 'script', '_acs', './widget.js'));
-      _acs('init', {
-        element: document.getElementById('acs'),
+      }(window, document, 'script', '_acs_blink', './widget.js'));
+      _acs_blink('init', {
+        element: document.getElementById('acs-blink'),
         debug: true,
         poolName: "The Block",
         poolId: 'Fxh4hDFHJuTfD3Eq4en36dTk8QvbsSMoTE5Y2hVX3qVt',
         poolSlug: 'the-block',
       });
-      document.querySelector("#acs").addEventListener("connected", (event) => {
+      document.querySelector("#acs-blink").addEventListener("connected", (event) => {
         console.log("Connected to the wallet with address: " + JSON.stringify(event.detail));
       });
-      document.querySelector("#acs").addEventListener("bought", (event) => {
+      document.querySelector("#acs-blink").addEventListener("bought", (event) => {
         console.log("Bought with address: " + JSON.stringify(event.detail));
       });
     </script>

diff --git a/html-production/index.html b/html-production/index.html
@@ -3,27 +3,27 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>ACS Widget dev page</title>
+    <title>ACS Widget Actions - Demo</title>
     <link rel="icon" href="./favicon.ico" />
     <link rel="stylesheet" href="./main.css" />
   </head>
 
   <body>
     <div style="padding: 2rem;">
-      <h1>ACS Widget dev page</h1>
+      <h1>ACS Widget Actions - Demo</h1>
       <h2>The shown widget is for demonstration purpose only</h2>
 
-      <div id="acs"></div>
+      <div id="acs-blink"></div>
     </div>
 
     <script>
       (function (w, d, s, o, f, js, fjs) {
           w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
           js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
           js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
-      }(window, document, 'script', '_acs', './widget.js'));
-      _acs('init', {
-        element: document.getElementById('acs'),
+      }(window, document, 'script', '_acs_blink', './widget.js'));
+      _acs_blink('init', {
+        element: document.getElementById('acs-blink'),
         debug: true,
         poolId: 'D9C7Yf5euSjpQ8Wo8XwJP7CWymm54oomeREkogiNf4yS',
         poolName: "Coingecko",

diff --git a/html-staging/index.html b/html-staging/index.html
@@ -3,27 +3,27 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>ACS Widget dev page</title>
+    <title>ACS Widget Actions - Staging</title>
     <link rel="icon" href="./favicon.ico" />
     <link rel="stylesheet" href="./main.css" />
   </head>
 
   <body>
     <div style="padding: 2rem;">
-      <h1>ACS Widget dev page</h1>
+      <h1>ACS Widget Actions - Staging</h1>
       <h2>The shown widget is for demonstration purpose only</h2>
 
-      <div id="acs"></div>
+      <div id="acs-blink"></div>
     </div>
 
     <script>
       (function (w, d, s, o, f, js, fjs) {
           w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
           js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
           js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
-      }(window, document, 'script', '_acs', './widget.js'));
-      _acs('init', {
-        element: document.getElementById('acs'),
+      }(window, document, 'script', '_acs_blink', './widget.js'));
+      _acs_blink('init', {
+        element: document.getElementById('acs-blink'),
         debug: true,
         poolId: '2hQSDVwJLbtwHzi3CKj8pmiQzLyfKZs5ZDhT1QZdHXv3',
         poolName: "The Block",

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
diff --git a/src/layout/Main.tsx b/src/layout/Main.tsx
@@ -5,7 +5,7 @@ import {
   useEffect,
   useMemo,
 } from 'preact/hooks';
-import { useWallet } from '@solana/wallet-adapter-react'
+import { useWallet } from '@solana/wallet-adapter-react';
 
 import { Router, RouteComponent } from '../layout/Router';
 import { Blink } from '../routes/Blink';

diff --git a/src/libs/utils.ts b/src/libs/utils.ts
@@ -26,9 +26,9 @@ export function clsxp(prefix: string, ...args: ClassValue[]) {
   return clsx(args.filter(Boolean).map((arg) => `${prefix}${arg}`));
 }
 
-export function toSpliced<T>(arr: Array<T> | undefined, n: number): Array<T> {
-  if (!arr) return [];
-  const carr = arr.slice(); //copy
+export function toSpliced<T>(arr: T[] | undefined, n: number): T[] {
+  if (!arr) { return []; }
+  const carr = arr.slice(); // copy
   carr.splice(n);
   return carr;
 }
diff --git a/src/routes/Blink.tsx b/src/routes/Blink.tsx
@@ -7,7 +7,7 @@ import { ActionContainer } from '../components/dialect/ui/ActionContainer';
 
 export const Blink = () => {
   const { poolSlug } = useContext(ConfigContext);
-  const actionUrl = `https://actions.dialect.to/api/access-protocol/subscribe/${poolSlug}`
+  const actionUrl = `https://actions.dialect.to/api/access-protocol/subscribe/${poolSlug}`;
 
   return (
     <ActionContainer