Update web builds (#22)

* Update extension build * Fix building web * Update readme * Add extension workflow * Web build * Update name for a tasks * Update extension build * Update OS * Deploy web workflow * Update locales * Revert "Update extension build" This reverts commit 8398c8c. * Switch web to vite build * Update build * remove extension * Downgrade vite * WIP * Update styled components and vite * Latest vite * test main branch
tonkeeper · Jan 12, 2024 · 304e6a4 · 304e6a4
1 parent 1273df4
commit 304e6a4
Show file tree

Hide file tree

Showing 23 changed files with 857 additions and 226 deletions.
diff --git a/.github/workflows/cd.yaml b/.github/workflows/cd.yaml
@@ -104,3 +104,45 @@ jobs:
               run: |
                   security delete-keychain build.keychain
                   rm ${{ github.workspace }}/AuthKey.p8
+
+    web-build:
+        name: web-build
+        runs-on: macos-13
+        timeout-minutes: 10
+
+        steps:
+            - name: Checkout to git repository
+              uses: actions/checkout@v4
+
+            - name: Set up Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.7.0
+
+            - name: Enable Corepack
+              run: |
+                  corepack enable
+
+            - name: Run install
+              uses: borales/actions-yarn@v4
+              with:
+                  cmd: install
+
+            - name: Run build
+              uses: borales/actions-yarn@v4
+              env:
+                  REACT_APP_AMPLITUDE: ${{ secrets.REACT_APP_AMPLITUDE_EXTENSION }}
+                  REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
+                  REACT_APP_LOCALES: en,zh_CN,ru,it,tr
+              with:
+                  cmd: build:web
+
+            - name: Publish to Cloudflare Pages
+              uses: cloudflare/pages-action@v1
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  projectName: tonkeeper-web
+                  directory: apps/web/dist
+                  branch: main
+                  wranglerVersion: '3'
diff --git a/.github/workflows/pull-request.yaml b/.github/workflows/pull-request.yaml
@@ -145,3 +145,44 @@ jobs:
               run: |
                   security delete-keychain build.keychain
                   rm ${{ github.workspace }}/AuthKey.p8
+
+    web-build:
+        name: web-build
+        runs-on: ubuntu-latest
+        timeout-minutes: 10
+
+        steps:
+            - name: Checkout to git repository
+              uses: actions/checkout@v4
+
+            - name: Set up Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 20.7.0
+
+            - name: Enable Corepack
+              run: |
+                  corepack enable
+
+            - name: Run install
+              uses: borales/actions-yarn@v4
+              with:
+                  cmd: install
+
+            - name: Run build
+              uses: borales/actions-yarn@v4
+              env:
+                  REACT_APP_AMPLITUDE: ${{ secrets.REACT_APP_AMPLITUDE_EXTENSION }}
+                  REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
+                  REACT_APP_LOCALES: en,zh_CN,ru,it,tr
+              with:
+                  cmd: build:web
+
+            - name: Publish to Cloudflare Pages
+              uses: cloudflare/pages-action@v1
+              with:
+                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                  projectName: tonkeeper-web
+                  directory: apps/web/dist
+                  wranglerVersion: '3'
diff --git a/README.md b/README.md
@@ -7,14 +7,21 @@ browsers. We recommend using the latest available browser version.
 
 ## Building locally
 
--   Install `Node.js` version v20.7.0
--   Install `Yarn` version 4.0.2
+```sh
+# Install `Node.js` version v20.7.0
+nvm use
+
+# Install `Yarn` version 4.0.2
+corepack enable
+```
 
 ### Build web script
 
 ```sh
+# Install dependencies
 yarn
 
+# Build web app
 yarn build:web
 ```
 
@@ -23,8 +30,10 @@ Compressed build could be found in `/apps/web/build` once they're built.
 ### Build extension script
 
 ```sh
+# Install dependencies
 yarn
 
+# Build extension apps
 yarn build:extension
 ```
 
@@ -34,8 +43,10 @@ once they're built.
 ### Build desktop script
 
 ```sh
+# Install dependencies
 yarn
 
+# Build desktop for current OS
 yarn build:desktop
 ```
 

diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@tonkeeper/extension",
-    "version": "3.3.13",
+    "version": "3.5.2",
     "author": "Nikita Kuznetsov <nkuz915@gmail.com>",
     "description": "Your extension wallet on The Open Network",
     "dependencies": {
@@ -12,12 +12,13 @@
         "buffer": "^6.0.3",
         "copy-to-clipboard": "^3.3.3",
         "crypto-browserify": "^3.12.0",
+        "process": "^0.11.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
         "react-router-dom": "^6.4.5",
         "stream-browserify": "^3.0.0",
-        "styled-components": "^5.3.6",
+        "styled-components": "^6.1.1",
         "web-vitals": "^2.1.4",
         "webextension-polyfill": "^0.10.0"
     },
@@ -26,6 +27,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "@types/fs-extra": "^11.0.4",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.6",
         "@types/react": "^18.0.26",

diff --git a/apps/extension/task/webpack.config.js b/apps/extension/task/webpack.config.js
@@ -2,76 +2,76 @@ const path = require('path');
 const { ProvidePlugin } = require('webpack');
 
 module.exports = [
-  {
-    target: 'browserslist',
-    mode: 'production',
-    entry: './src/background.ts',
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
+    {
+        target: 'browserslist',
+        mode: 'production',
+        entry: './src/background.ts',
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: 'ts-loader',
+                    exclude: /node_modules/
+                }
+            ]
         },
-      ],
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-      fallback: {
-        buffer: require.resolve('buffer'),
-      },
-    },
-    output: {
-      filename: 'background.js',
-      path: path.resolve(__dirname, '../build'),
-    },
-    plugins: [
-      new ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
-        process: 'process/browser',
-      }),
-    ],
-  },
-  {
-    target: 'node',
-    mode: 'production',
-    entry: './src/provider.ts',
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js'],
+            fallback: {
+                buffer: require.resolve('buffer/')
+            }
         },
-      ],
-    },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-    },
-    output: {
-      filename: 'provider.js',
-      path: path.resolve(__dirname, '../build'),
-    },
-  },
-  {
-    target: 'node',
-    mode: 'production',
-    entry: './src/content.ts',
-    module: {
-      rules: [
-        {
-          test: /\.tsx?$/,
-          use: 'ts-loader',
-          exclude: /node_modules/,
+        output: {
+            filename: 'background.js',
+            path: path.resolve(__dirname, '../build')
         },
-      ],
+        plugins: [
+            new ProvidePlugin({
+                Buffer: ['buffer', 'Buffer'],
+                process: 'process/browser'
+            })
+        ]
     },
-    resolve: {
-      extensions: ['.tsx', '.ts', '.js'],
-    },
-    output: {
-      filename: 'content.js',
-      path: path.resolve(__dirname, '../build'),
+    {
+        target: 'node',
+        mode: 'production',
+        entry: './src/provider.ts',
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: 'ts-loader',
+                    exclude: /node_modules/
+                }
+            ]
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js']
+        },
+        output: {
+            filename: 'provider.js',
+            path: path.resolve(__dirname, '../build')
+        }
     },
-  },
+    {
+        target: 'node',
+        mode: 'production',
+        entry: './src/content.ts',
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    use: 'ts-loader',
+                    exclude: /node_modules/
+                }
+            ]
+        },
+        resolve: {
+            extensions: ['.tsx', '.ts', '.js']
+        },
+        output: {
+            filename: 'content.js',
+            path: path.resolve(__dirname, '../build')
+        }
+    }
 ];
diff --git a/apps/twa/package.json b/apps/twa/package.json
@@ -18,7 +18,7 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^12.1.1",
         "react-router-dom": "^6.4.5",
-        "styled-components": "^5.3.6",
+        "styled-components": "^6.1.1",
         "web-vitals": "^2.1.4"
     },
     "devDependencies": {

diff --git a/apps/web/public/index.html → apps/web/index.html b/apps/web/public/index.html → apps/web/index.html
@@ -22,20 +22,29 @@
     <link rel="canonical" href="https://wallet.tonkeeper.com/">
 
     <link rel="apple-touch-icon" sizes="288x288" href="https://tonkeeper.com/assets/tonconnect-icon.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/logo-16x16.png">
-    <link rel="icon" type="image/png" sizes="64x64" href="%PUBLIC_URL%/logo-64x64.png">
-    <link rel="icon" type="image/png" sizes="128x128" href="%PUBLIC_URL%/logo-128x128.png">
-    <link rel="alternate icon" href="%PUBLIC_URL%/favicon.ico" type="image/x-icon">
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/logo-16x16.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="/logo-64x64.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="/logo-128x128.png">
+    <link rel="alternate icon" href="/favicon.ico" type="image/x-icon">
+    <link rel="manifest" href="/manifest.json" />
 
 
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&amp;display=swap"
       rel="stylesheet"
     />
+
+    <script type="module">
+      import { Buffer } from "buffer";
+      window.Buffer = Buffer;
+
+      import process from "process";
+      window.process = process; 
+    </script>
   </head>
   <body style="background:#10161F;margin: 0;" class="top bottom">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>