XPR-178: New design

.nvmrc

@@ -1 +1 @@
-v18.19.1
+v24.12.0

.vscode/settings.json

@@ -2,5 +2,6 @@
     "svelte.plugin.svelte.compilerWarnings": {
         "a11y-click-events-have-key-events": "ignore",
         "a11y-interactive-supports-focus": "ignore"
-    }
+    },
+    "editor.formatOnSave": true,
 }

README.md

@@ -44,19 +44,23 @@ const login = async (restoreSession) => {
       transportOptions: {
         requestAccount: appIdentifier
       },
-      selectorOptions: {
-        appName: "Tasklyy",
-        appLogo: "https://taskly.protonchain.com/static/media/taskly-logo.ad0bfb0f.svg",
-        customStyleOptions: {
-            modalBackgroundColor: "#F4F7FA",
-            logoBackgroundColor: "white",
-            isLogoRound: true,
-            optionBackgroundColor: "white",
-            optionFontColor: "black",
-            primaryFontColor: "black",
-            secondaryFontColor: "#6B727F",
-            linkColor: "#752EEB"
-        }
+      uiOptions: {
+        theme: 'light',
+        themes: {
+          dark: {
+            base: {
+              textColorBase: 'black',
+              textColorSecondary: '#6B727F',
+              textColorLink: '#752EEB',
+              bodyBackground: '#F4F7FA'
+            },
+            button: {
+              primary: {
+                backgroundHover: 'black',
+              },
+            },
+          },
+        },
       }
     })
 ​
@@ -119,6 +123,7 @@ The ```ProtonWebSDK``` Class takes three main types of option objects:
  - ```linkOptions```
  - ```transportOptions```  
  - ```selectorOptions```
+ - ```uiOptions```
 ​
 ### Link Options
 A required object which includes all options for communication customization.
@@ -146,41 +151,26 @@ If you add [https://api-dev.protonchain.com/v1/chain/info](https://api-dev.proto
 An object which contains all needed data for the client communication. If not specified an empty object will be provided for the SDK.
 
 **transportOptions:**
+
  - **requestAccount** – type string – optional – this field is used for identifying which account is requesting the client transaction. If no value provided, it will be replaced with the “Unknown Requestor” in the transaction request.
 ​
-
     > Typically same as appName
-​
- - **backButton** – type Boolean – optional – this field specifies the need of displaying the “back” button in the wallet type selection screen of the modal window. By default - set to ```true```, if set to ```false``` no “back” button will be displayed.
-​
+​​
 ### Selector Options
 An object which includes style options for the wallet selection. If not specified the basic styling for the modal window will be provided.
+
 **selectorOptions:**
- - **appName** – type string – optional – text which is displayed in the modal window and the name of the app displayed in transaction
-​
- - **appLogo** – type string – optional – image is displayed in the modal window.
 
-  - **dialogRootNode** - type string | HTMLElement - optional - The Webauth modal parent html node. Can be a valid css selector or a HTMLElement. If not provided the default parent is the ``document.body``
-​
- - **customStyleOptions** – type Object – optional – object which can include all styles needed for the wallet selection modal window.  
-The ```CustomStyleOptions``` interface located in the ```proton-web-sdk``` directory should be changed in order to customize it.  
-​
-#### Styling Options Definition of basic styling
+  - **enabledWalletTypes** - type stringp[] - optional - The list of enabled wallets. All wallets are enabled by default. Possible values: proton, webauth, anchor.
 ​
-Basic interface contains several fields which can be overridden by the styles provided by the developer. All  color  types  are  acceptable. 
+ - **walletType** – type string – optional – The name of the wallet to use. In this case the wallet selector step will be skipped.
 
-##### customStyleOptions:
-```
-modalBackgroundColor: _string_,
-logoBackgroundColor: _string_,
-isLogoRound: _boolean_,
-optionBackgroundColor: _string_,
-optionFontColor: _string_,
-primaryFontColor: _string_,
-secondaryFontColor: _string_,
-linkColor: _string_,
-```
+**uiOptions:**
 
+  - **theme** - type string - optional - The name of the theme applied for the widget
+​
+ - **themes** – type Object – optional – object which can includes options to configure or defined theme of the widget.
+Check the ```proton-web-renderer``` directory for more info.  
 
 ## Contributors
 ​

packages/proton-browser-transport/.prettierrc

@@ -1,19 +1,10 @@
 {
-    "arrowParens": "always",
-    "bracketSpacing": false,
-    "endOfLine": "lf",
-    "printWidth": 100,
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "plugins": ["prettier-plugin-svelte"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "endOfLine": "lf",
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
 }

packages/proton-browser-transport/README.md

@@ -33,14 +33,10 @@ const link = new ProtonLink({transport})
 
 ## Developing
 
-You need [Make](https://www.gnu.org/software/make/), [node.js](https://nodejs.org/en/) and [yarn](https://classic.yarnpkg.com/en/docs/install) installed.
+You need [node.js](https://nodejs.org/en/) and [pnpm](https://pnpm.io/installation) installed.
 
-Clone the repository and run `make` to checkout all dependencies and build the project. See the [Makefile](./Makefile) for other useful targets. Before submitting a pull request make sure to run `make lint`.
+Clone the repository and run `pnpm run build` to checkout all dependencies and build the project. See the [package.json](./package.json) for other useful commanfs. Before submitting a pull request make sure to run `pnpm run lint`.
 
 ## License
 
 [MIT](./LICENSE.md)
-
----
-
-Made with ☕️ & ❤️ by [Greymass](https://greymass.com), if you find this useful please consider [supporting us](https://greymass.com/support-us).

packages/proton-browser-transport/eslint.config.ts

@@ -1,10 +1,7 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
-import css from '@eslint/css'
 import {defineConfig, globalIgnores} from 'eslint/config'
-import svelte from 'eslint-plugin-svelte'
-import svelteparser from 'svelte-eslint-parser'
 import prettier from 'eslint-plugin-prettier/recommended'
 
 export default defineConfig([
@@ -16,25 +13,12 @@ export default defineConfig([
     languageOptions: {
       globals: {...globals.browser, ...globals.node, NodeJS: true},
       parserOptions: {
-        extraFileExtensions: ['.svelte'],
         tsconfigRootDir: __dirname,
       },
     },
   },
   tseslint.configs.recommended,
-  svelte.configs.recommended,
   prettier,
-  svelte.configs.prettier,
-  {
-    files: ['**/*.svelte', '**/*.svelte.ts'],
-    languageOptions: {
-      parser: svelteparser,
-      parserOptions: {
-        parser: tseslint.parser,
-        extraFileExtensions: ['.svelte'],
-      },
-    },
-  },
   {
     rules: {
       'prettier/prettier': 'warn',
@@ -67,7 +51,4 @@ export default defineConfig([
       ],
     },
   },
-  {files: ['**/*.css'], plugins: {css}, language: 'css/css', extends: ['css/recommended']},
-
-  // {files: ['**/*.json'], plugins: {json}, language: 'json/json', extends: ['json/recommended']},
 ])

packages/proton-browser-transport/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@proton/browser-transport",
-  "version": "4.4.1",
+  "version": "5.0.0",
   "description": "Vanilla JS browser transport for Proton Link",
-  "homepage": "https://github.com/protonprotocol/proton-browser-transport",
+  "homepage": "https://github.com/XPRNetwork/proton-web-sdk",
+  "bugs": {
+    "url": "https://github.com/XPRNetwork/proton-web-sdk/issues"
+  },
   "license": "BSD-3-Clause",
   "type": "module",
   "main": "lib/proton-browser-transport.js",
@@ -15,19 +18,21 @@
   },
   "scripts": {
     "watch": "rollup -c -w",
-    "prepare": "make",
-    "build": "make",
-    "lint": "make lint"
+    "prepare": "pnpm run build",
+    "build": "rollup -c",
+    "lint": "eslint ./src --ext .ts --fix"
   },
   "files": [
     "lib",
     "src"
   ],
   "dependencies": {
-    "@proton/link": "workspace:^"
+    "@proton/link": "workspace:^",
+    "@proton/web-renderer": "workspace:^"
   },
   "peerDependencies": {
-    "@proton/link": "workspace:^"
+    "@proton/link": "workspace:^",
+    "@proton/web-renderer": "workspace:^"
   },
   "devDependencies": {
     "@eslint/css": "^0.14.1",
@@ -39,31 +44,21 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^16.4.0",
     "@types/ws": "^7.2.2",
     "core-js": "^3.42.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-svelte": "^3.13.0",
     "globals": "^16.5.0",
     "jiti": "^2.6.1",
-    "postcss": "^8.5.3",
     "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
     "rollup": "^4.40.0",
     "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-svelte": "^7.2.0",
-    "sass": "^1.89.0",
-    "svelte": "^5.41.0",
-    "svelte-check": "^4.3.3",
-    "svelte-eslint-parser": "^1.4.0",
-    "svelte-preprocess": "^6.0.3",
     "ts-node": "^10.0.0",
     "tslib": "^2.4.0",
     "typescript": "~5.4.0",
     "typescript-eslint": "^8.46.4"
   },
   "gitHead": "d81cd76c8aacc2538243e24d0801b3eae4b8dba2"
-}
+}