v1.14.2

Author: mytonwalletorg

.env.example

@@ -1,7 +1,9 @@
 NODE_ENV=development
 
 TONHTTPAPI_MAINNET_URL=https://tonhttpapi.mytonwallet.org/jsonRPC
+TONHTTPAPI_MAINNET_API_KEY=
 TONHTTPAPI_TESTNET_URL=https://tonhttpapi-testnet.mytonwallet.org/jsonRPC
+TONHTTPAPI_TESTNET_API_KEY=
 TONAPIIO_MAINNET_URL=https://tonapiio.mytonwallet.org
 TONAPIIO_TESTNET_URL=https://tonapiio-testnet.mytonwallet.org
 BRILLIANT_API_BASE_URL=

.eslintignore

@@ -1,10 +1,13 @@
 dev
+public
 
 src/lib/rlottie/rlottie-wasm.js
-
-webpack.config.js
 jest.config.js
 playwright.config.ts
 postcss.config.js
 
 coverage
+
+trash
+
+dist

.eslintrc

@@ -9,7 +9,9 @@
     "jsx-expressions",
     "no-async-without-await",
     "teactn",
-    "no-null"
+    "no-null",
+    "simple-import-sort",
+    "react-hooks-static-deps"
   ],
   "rules": {
     "indent": [
@@ -34,10 +36,24 @@
     "no-console": "error",
     "semi": "error",
     "no-implicit-coercion": "error",
-    "react-hooks/exhaustive-deps": [
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks-static-deps/exhaustive-deps": [
       "error",
       {
-        "additionalHooks": "(useSyncEffect|useAsync|useDebouncedCallback|useThrottledCallback|useEffectWithPrevDeps|useLayoutEffectWithPrevDeps|useDerivedState|useDerivedSignal|useThrottledResolver|useDebouncedResolver)$"
+        "additionalHooks": "(useSyncEffect|useAsync|useDebouncedCallback|useThrottledCallback|useEffectWithPrevDeps|useLayoutEffectWithPrevDeps|useDerivedState|useDerivedSignal|useThrottledResolver|useDebouncedResolver)$",
+        "staticHooks": {
+          "getActions": true,
+          "useFlag": [
+            false,
+            true,
+            true
+          ],
+          "useForceUpdate": true,
+          "useReducer": [
+            false,
+            true
+          ]
+        }
       }
     ],
     "arrow-body-style": "off",
@@ -76,6 +92,7 @@
     "import/prefer-default-export": "off",
     "import/named": "off",
     "import/no-webpack-loader-syntax": "off",
+    "import/extensions": "off",
     "react/prop-types": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/button-has-type": "off",
@@ -120,7 +137,57 @@
       "error",
       "in-try-catch"
     ],
-    "teactn/prefer-separate-component-file": "off"
+    "teactn/prefer-separate-component-file": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports",
+        "disallowTypeAnnotations": false
+      }
+    ],
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          [
+            "^react",
+            "^ton",
+            "^tonweb(/.*|$)",
+            "^@?\\w",
+            "dist(/.*|$)",
+            "^(\\.+/)+(lib)(/.*|$)"
+          ],
+          [
+            "^(\\.+/|\\w+/)+(types)(/.*|$)",
+            "^(\\.+/|\\w+/)+(types)\\u0000"
+          ],
+          [
+            "^(\\.+/)+config",
+            "^(\\.+/)+(global)(/.*|$)",
+            "^(\\.+/)+(util)(/.*|$)",
+            "^(\\.+/)+(contracts)(/.*|$)",
+            "^(\\.+/)+(ui)/[a-z](([a-z]+[A-Z]?)*)",
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./?$",
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$"
+          ],
+          [
+            "^(\\.+/)+(hooks)(/.*|$)"
+          ],
+          [
+            "\/[A-Z](([a-z]+[A-Z]?)*)"
+          ],
+          [
+            "^.+\\.s?css$"
+          ],
+          [
+            "^(\\.+/)+(assets)(/.*|$)"
+          ]
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": "webpack"

.fantasticonrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  inputDir: './src/assets/icons',
+  inputDir: './src/assets/font-icons',
   outputDir: './src/styles',
   name: 'brilliant-icons',
   fontTypes: ['woff', 'woff2'],

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+dist-electron
 MyTonWallet.zip
 .cache
 .env*
@@ -13,3 +14,4 @@ test-results
 trash/
 coverage/
 src/i18n/en.json
+notarization-error.log

.prettierrc

@@ -0,0 +1,38 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "all",
+
+  "overrides": [
+    {
+      "files": ["*.json"],
+      "options": {
+        "parser": "json",
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.yml"],
+      "options": {
+        "parser": "yml",
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.css"],
+      "options": {
+        "parser": "css",
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.scss"],
+      "options": {
+        "parser": "scss",
+        "singleQuote": false
+      }
+    }
+  ]
+}

.stylelintrc.json

@@ -20,6 +20,7 @@
     "selector-attribute-quotes": "always",
     "scss/operator-no-unspaced": null,
     "no-descending-specificity": null,
+    "color-hex-case": "upper",
     "selector-pseudo-class-no-unknown": [
       true,
       {

README.md

@@ -4,7 +4,16 @@
 
 <img src="https://user-images.githubusercontent.com/102837730/193835310-1436afcd-ed78-4656-92c3-9c8f4beacacf.png" width="600" />
 
-The wallet is **self-custodial and safe**. The developers **do not** have access to funds, browser history or any other information. We focus on **speed**, **size** and **attention to detail**. We try to avoid using third-party libraries to ensure maximum reliability and safety, and also to lower the bundle size. 
+The wallet is **self-custodial and safe**. The developers **do not** have access to funds, browser history or any other information. We focus on **speed**, **size** and **attention to detail**. We try to avoid using third-party libraries to ensure maximum reliability and safety, and also to lower the bundle size.
+
+## Requirements
+
+Ready to build on **macOS** and **Linux**.
+
+To build on **Windows**, you will also need:
+
+- Any terminal emulator with bash (Git Bash, MinGW, Cygwin)
+- A zip utility (for several commands)
 
 ## Local Setup
 
@@ -20,6 +29,82 @@ npm i
 npm run dev
 ```
 
+## Electron
+
+Electron allows to build native application, that can be installed and run on Windows, macOS and Linux.
+
+#### NPM scripts
+
+- `npm run electron:dev`
+
+Run Electron in development mode, concurrently starts 3 processes with watch for changes: main (main Electron process), renderer (FE code) and Webpack for Electron (compiles main Electron process from TypeScript).
+
+- `npm run electron:webpack`
+
+The main process code for Electron, which includes preload functionality, is written in TypeScript and is compiled using the `webpack-electron.config.js` configuration to generate JavaScript code.
+
+- `npm run electron:build`
+
+Prepare renderer (FE code) build, compile Electron main process code, install and build native dependencies, is used before packaging or publishing.
+
+- `npm run electron:package:staging`
+
+Create packages for macOS, Windows and Linux in `dist-electron` folders with `APP_ENV` as `staging` (allows to open DevTools, includes sourcemaps and does not minify built JavaScript code), can be used for manual distribution and testing packaged application.
+
+- `npm run electron:package:production`
+
+Create packages for macOS, Windows and Linux in `dist-electron` folders with `APP_ENV` as `production` (disabled DevTools, minified built JavaScript code), can be used for manual distribution and testing packaged application.
+
+- `npm run electron:publish`
+
+Create packages for macOS, Windows and Linux in `dist-electron` folder and publish release to GitHub, which allows supporting autoupdates. See [GitHub release workflow](#github-release) for more info.
+
+#### Code signing on MacOS
+
+To sign the code of your application, follow these steps:
+
+- Install certificates to `login` folder of your Keychain.
+- Download and install `Developer ID - G2` certificate from the [Apple PKI](https://www.apple.com/certificateauthority/) page.
+- Under the Keychain application, go to the private key associated with your developer certificate. Then do `key > Get Info > Access Control`. Down there, make sure your application (Xcode) is in the list `Always allow access by these applications` and make sure `Confirm before allowing access` is turned on.
+- A valid and appropriate identity from your keychain will be automatically used when you publish your application.
+
+More info in the [official documentation](https://www.electronjs.org/docs/latest/tutorial/code-signing).
+
+#### Notarize on MacOS
+
+Application notarization is done automatically in [electron-builder](https://github.com/electron-userland/electron-builder/) module, which requires `APPLE_ID` and `APPLE_APP_SPECIFIC_PASSWORD` environment variables to be passed.
+
+How to obtain app-specific password:
+
+- Sign in to [appleid.apple.com](appleid.apple.com).
+- In the "Sign-In and Security" section, select "App-Specific Passwords".
+- Select "Generate an app-specific password" or select the Add button, then follow the steps on your screen.
+
+#### GitHub release
+
+##### GitHub access token
+
+In order to publish new release, you need to add GitHub access token to `.env`. Generate a GitHub access token by going to https://github.com/settings/tokens/new. The access token should have the repo scope/permission. Once you have the token, assign it to an environment variable:
+
+```
+# .env
+GH_TOKEN="{YOUR_TOKEN_HERE}"
+```
+
+##### Publish settings
+
+Publish configuration in `electron-builder.yml` config file allows to set GitHub repository owner/name.
+
+##### Release workflow
+
+- Draft a new release on GitHub. Create new tag version with the value of `version` in your application `package.json`, and prefix it with `v`. “Release title” can be anything you want.
+
+  For example, if your application `package.json` version is `1.0`, your draft’s tag version would be `v1.0`.
+
+- Save draft release
+- Run `npm run electron:publish`, which will upload build artefacts to newly reated release.
+- Once you are done, publish the release. GitHub will tag the latest commit.
+
 ## Support Us
 
 If you like what we do, feel free to contribute by creating a pull request, or just support us using this TON wallet: `EQAIsixsrb93f9kDyplo_bK5OdgW5r0WCcIJZdGOUG1B282S`. We appreciate it a lot!

dev/panel.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sliding panel animation experiments</title>
+    <style>
+      .panel {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 68%; /* Set to desired closed height */
+        background-color: #ccc; /* Grey background */
+        border-radius: 15px 15px 0 0; /* Rounded corners at the top */
+        transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.2, 1); /* Adjust speed as needed */
+        overflow: hidden;
+        z-index: 10; /* Ensure panel is above backdrop */
+        will-change: transform; /* New line to hint the browser that transform will be animated */
+      }
+
+      .panel.closed {
+        transform: translateY(100%);
+      }
+
+      .panel.open {
+        transform: translateY(0%);
+      }
+
+      .panel-content {
+        padding: 20px;
+        /* Add more styles for your content here */
+      }
+
+      /* Backdrop styles */
+      .backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0); /* Fully transparent black */
+        transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+        z-index: 5; /* Ensure backdrop is below panel */
+        opacity: 0;
+        will-change: opacity; /* New line to hint the browser that opacity will be animated */
+      }
+
+      .backdrop.show {
+        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
+        opacity: 1;
+      }
+    </style>
+</head>
+<body>
+<div id="panel" class="panel closed">
+    <div class="panel-content">
+        <!-- Add your content here -->
+        <p>Some content...</p>
+    </div>
+</div>
+
+<!-- Backdrop div -->
+<!--<div id="backdrop" class="backdrop"></div>-->
+
+<script>
+  document.addEventListener('click', togglePanel);
+
+  // Close panel when backdrop is clicked
+  // document.getElementById('backdrop').addEventListener('click', togglePanel);
+
+  function togglePanel() {
+    const panel = document.getElementById('panel');
+    // const backdrop = document.getElementById('backdrop');
+    if (panel.classList.contains('open')) {
+      panel.classList.remove('open');
+      panel.classList.add('closed');
+      // backdrop.classList.remove('show');
+    } else {
+      panel.classList.remove('closed');
+      panel.classList.add('open');
+      // backdrop.classList.add('show');
+    }
+  }
+</script>
+</body>
+</html>