add `apps/connector` (#589)

* add `apps/connector` --------- Co-authored-by: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Co-authored-by: Felicio Mununga <felicio@users.noreply.github.com> Co-authored-by: pavel <14926950+prichodko@users.noreply.github.com> Co-authored-by: marcelines <marcio@status.im>
2024-10-03 12:06:54 +02:00 · 2024-10-03 12:06:54 +02:00 · 006d57f7d1
parent 273db4ed9a
commit 006d57f7d1
50 changed files with 10178 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -14,6 +14,12 @@ This monorepo contains packages for building web applications in the Status ecos
 | [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)     | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |
 | [`@status-im/eslint-config`](./packages/eslint-config) |                                                                                                                           | Shared ESLint configuration for consistent code style across projects.                                                                                                        |

+## Apps
+
+| Name                                   | Description                                                                   |
+| -------------------------------------- | ----------------------------------------------------------------------------- |
+| [`./apps/connector`](./apps/connector) | Status Desktop Wallet extended to decentralised applications in your browser. |
+
 ## Prerequisites

 Required:
--- a/apps/connector/.eslintrc.js
+++ b/apps/connector/.eslintrc.js
@ -0,0 +1,39 @@
+module.exports = {
+  root: true,
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: ['@status-im/eslint-config', 'plugin:tailwindcss/recommended'],
+
+      rules: {
+        'no-constant-binary-expression': 'error',
+        'no-restricted-globals': ['error', 'process'],
+        'jsx-a11y/alt-text': [
+          1,
+          {
+            img: [],
+          },
+        ],
+      },
+    },
+    {
+      // parser: 'esprima',
+      files: ['*.mjs'],
+      // env: {
+      //   browser: true,
+      //   es2021: true,
+      // },
+      // extends: ['eslint:recommended', 'plugin:import/recommended'],
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    {
+      files: ['*.js'],
+      parserOptions: {
+        ecmaVersion: 'latest',
+      },
+    },
+  ],
+}
--- a/apps/connector/.gitignore
+++ b/apps/connector/.gitignore
@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+!.env.*
+.env*.local
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+*.tsbuildinfo
+
+apps/
--- a/apps/connector/.prettierrc
+++ b/apps/connector/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "tailwindConfig": "./tailwind.config.ts",
+  "endOfLine": "auto"
+}
--- a/apps/connector/.prettierrc.mjs
+++ b/apps/connector/.prettierrc.mjs
@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  importOrder: [
+    '<BUILTIN_MODULES>', // Node.js built-in modules
+    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
+    '', // Empty line
+    '^@plasmo/(.*)$',
+    '',
+    '^@plasmohq/(.*)$',
+    '',
+    '^~(.*)$',
+    '',
+    '^[./]',
+  ],
+}
--- a/apps/connector/Jenkinsfile
+++ b/apps/connector/Jenkinsfile
@ -0,0 +1,73 @@
+#!/usr/bin/env groovy
+library 'status-jenkins-lib@v1.9.1'
+
+pipeline {
+  agent { label 'linux' }
+
+  options {
+    timestamps()
+    /* Prevent Jenkins jobs from running forever */
+    timeout(time: 10, unit: 'MINUTES')
+    /* manage how many builds we keep */
+    buildDiscarder(logRotator(
+      numToKeepStr: '20',
+      daysToKeepStr: '30',
+    ))
+    disableConcurrentBuilds()
+  }
+
+  environment {
+    PLATFORM = 'chrome'
+    ZIP_NAME = utils.pkgFilename(
+      type: 'Extension',
+      version: 'none',
+      arch: 'chrome',
+      ext: 'zip',
+    )
+  }
+
+  stages {
+    stage('Install') {
+      steps { script {
+        nix.shell('yarn install --frozen-lockfile', pure: false)
+      } }
+    }
+
+    stage('Build') {
+      steps { script {
+        nix.shell('yarn build:chrome', pure: false)
+      } }
+    }
+
+    stage('Zip') {
+      steps {
+        zip(
+          zipFile: env.ZIP_NAME,
+          dir: 'build/chrome-mv3-prod',
+          archive: false,
+        )
+      }
+    }
+
+    stage('Archive') {
+      steps {
+        archiveArtifacts(
+          artifacts: env.ZIP_NAME,
+          fingerprint: true,
+        )
+      }
+    }
+
+    stage('Upload') {
+      steps { script {
+        env.PKG_URL = s5cmd.upload(env.ZIP_NAME)
+      } }
+    }
+  }
+
+  post {
+    success { script { github.notifyPR(true) } }
+    failure { script { github.notifyPR(false) } }
+    cleanup { cleanWs() }
+  }
+}
--- a/apps/connector/LICENSE.md
+++ b/apps/connector/LICENSE.md
@ -0,0 +1,355 @@
+Mozilla Public License Version 2.0
+==================================
+
+### 1. Definitions
+
+**1.1. “Contributor”**  
+    means each individual or legal entity that creates, contributes to
+    the creation of, or owns Covered Software.
+
+**1.2. “Contributor Version”**  
+    means the combination of the Contributions of others (if any) used
+    by a Contributor and that particular Contributor's Contribution.
+
+**1.3. “Contribution”**  
+    means Covered Software of a particular Contributor.
+
+**1.4. “Covered Software”**  
+    means Source Code Form to which the initial Contributor has attached
+    the notice in Exhibit A, the Executable Form of such Source Code
+    Form, and Modifications of such Source Code Form, in each case
+    including portions thereof.
+
+**1.5. “Incompatible With Secondary Licenses”**  
+    means
+
+* **(a)** that the initial Contributor has attached the notice described
+    in Exhibit B to the Covered Software; or
+* **(b)** that the Covered Software was made available under the terms of
+    version 1.1 or earlier of the License, but not also under the
+    terms of a Secondary License.
+
+**1.6. “Executable Form”**  
+    means any form of the work other than Source Code Form.
+
+**1.7. “Larger Work”**  
+    means a work that combines Covered Software with other material, in 
+    a separate file or files, that is not Covered Software.
+
+**1.8. “License”**  
+    means this document.
+
+**1.9. “Licensable”**  
+    means having the right to grant, to the maximum extent possible,
+    whether at the time of the initial grant or subsequently, any and
+    all of the rights conveyed by this License.
+
+**1.10. “Modifications”**  
+    means any of the following:
+
+* **(a)** any file in Source Code Form that results from an addition to,
+    deletion from, or modification of the contents of Covered
+    Software; or
+* **(b)** any new file in Source Code Form that contains any Covered
+    Software.
+
+**1.11. “Patent Claims” of a Contributor**  
+    means any patent claim(s), including without limitation, method,
+    process, and apparatus claims, in any patent Licensable by such
+    Contributor that would be infringed, but for the grant of the
+    License, by the making, using, selling, offering for sale, having
+    made, import, or transfer of either its Contributions or its
+    Contributor Version.
+
+**1.12. “Secondary License”**  
+    means either the GNU General Public License, Version 2.0, the GNU
+    Lesser General Public License, Version 2.1, the GNU Affero General
+    Public License, Version 3.0, or any later versions of those
+    licenses.
+
+**1.13. “Source Code Form”**  
+    means the form of the work preferred for making modifications.
+
+**1.14. “You” (or “Your”)**  
+    means an individual or a legal entity exercising rights under this
+    License. For legal entities, “You” includes any entity that
+    controls, is controlled by, or is under common control with You. For
+    purposes of this definition, “control” means **(a)** the power, direct
+    or indirect, to cause the direction or management of such entity,
+    whether by contract or otherwise, or **(b)** ownership of more than
+    fifty percent (50%) of the outstanding shares or beneficial
+    ownership of such entity.
+
+
+### 2. License Grants and Conditions
+
+#### 2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+* **(a)** under intellectual property rights (other than patent or trademark)
+    Licensable by such Contributor to use, reproduce, make available,
+    modify, display, perform, distribute, and otherwise exploit its
+    Contributions, either on an unmodified basis, with Modifications, or
+    as part of a Larger Work; and
+* **(b)** under Patent Claims of such Contributor to make, use, sell, offer
+    for sale, have made, import, and otherwise transfer either its
+    Contributions or its Contributor Version.
+
+#### 2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+#### 2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+* **(a)** for any code that a Contributor has removed from Covered Software;
+    or
+* **(b)** for infringements caused by: **(i)** Your and any other third party's
+    modifications of Covered Software, or **(ii)** the combination of its
+    Contributions with other software (except as part of its Contributor
+    Version); or
+* **(c)** under Patent Claims infringed by Covered Software in the absence of
+    its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+#### 2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+#### 2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+#### 2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+#### 2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+
+### 3. Responsibilities
+
+#### 3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+#### 3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+* **(a)** such Covered Software must also be made available in Source Code
+    Form, as described in Section 3.1, and You must inform recipients of
+    the Executable Form how they can obtain a copy of such Source Code
+    Form by reasonable means in a timely manner, at a charge no more
+    than the cost of distribution to the recipient; and
+
+* **(b)** You may distribute such Executable Form under the terms of this
+    License, or sublicense it under different terms, provided that the
+    license for the Executable Form does not attempt to limit or alter
+    the recipients' rights in the Source Code Form under this License.
+
+#### 3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+#### 3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+#### 3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+
+### 4. Inability to Comply Due to Statute or Regulation
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: **(a)** comply with
+the terms of this License to the maximum extent possible; and **(b)**
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+
+### 5. Termination
+
+**5.1.** The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated **(a)** provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and **(b)** on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+**5.2.** If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+**5.3.** In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+
+### 6. Disclaimer of Warranty
+
+> Covered Software is provided under this License on an “as is”
+> basis, without warranty of any kind, either expressed, implied, or
+> statutory, including, without limitation, warranties that the
+> Covered Software is free of defects, merchantable, fit for a
+> particular purpose or non-infringing. The entire risk as to the
+> quality and performance of the Covered Software is with You.
+> Should any Covered Software prove defective in any respect, You
+> (not any Contributor) assume the cost of any necessary servicing,
+> repair, or correction. This disclaimer of warranty constitutes an
+> essential part of this License. No use of any Covered Software is
+> authorized under this License except under this disclaimer.
+
+### 7. Limitation of Liability
+
+> Under no circumstances and under no legal theory, whether tort
+> (including negligence), contract, or otherwise, shall any
+> Contributor, or anyone who distributes Covered Software as
+> permitted above, be liable to You for any direct, indirect,
+> special, incidental, or consequential damages of any character
+> including, without limitation, damages for lost profits, loss of
+> goodwill, work stoppage, computer failure or malfunction, or any
+> and all other commercial damages or losses, even if such party
+> shall have been informed of the possibility of such damages. This
+> limitation of liability shall not apply to liability for death or
+> personal injury resulting from such party's negligence to the
+> extent applicable law prohibits such limitation. Some
+> jurisdictions do not allow the exclusion or limitation of
+> incidental or consequential damages, so this exclusion and
+> limitation may not apply to You.
+
+
+### 8. Litigation
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+
+### 9. Miscellaneous
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+
+### 10. Versions of the License
+
+#### 10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+#### 10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+#### 10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+#### 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+## Exhibit A - Source Code Form License Notice
+
+    This Source Code Form is subject to the terms of the Mozilla Public
+    License, v. 2.0. If a copy of the MPL was not distributed with this
+    file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+## Exhibit B - “Incompatible With Secondary Licenses” Notice
+
+    This Source Code Form is "Incompatible With Secondary Licenses", as
+    defined by the Mozilla Public License, v. 2.0.
--- a/apps/connector/README.md
+++ b/apps/connector/README.md
@ -0,0 +1,92 @@
+# A wallet connector by Status
+
+Status Desktop Wallet extended to decentralized applications in your browser.
+
+## Compatibility
+
+Depends on:
+
+- Status Desktop https://github.com/status-im/status-desktop/tree/release/2.30.x
+
+Tested with these browsers:
+
+- Google Chrome
+- Arc
+
+## Development
+
+### Google Chrome
+
+#### Develop
+
+```bash
+yarn dev:chrome
+```
+
+#### Build
+
+```bash
+yarn build:chrome
+```
+
+#### Load
+
+Google Chrome > Window > Extensions > enable Developer mode
+
+Google Chrome > Window > Extensions > Load unpacked > select build (build/chrome-mv3-dev)
+
+> Note: Reloads automatically in development.
+
+### Safari
+
+#### Develop
+
+```bash
+yarn dev:safari
+```
+
+#### Convert
+
+```bash
+xcrun safari-web-extension-converter --no-open --macos-only --swift --project-location ./apps --app-name Status --bundle-identifier im.Status.Status ./build/safari-mv3-dev/
+```
+
+#### Build
+
+```bash
+xcodebuild -project apps/Status/Status.xcodeproj -scheme Status build
+```
+
+#### Load
+
+Safari > Settings... > Developer > Allow unsigned extensions
+
+Safari > Settings... > Extensions > check Status
+
+> Note: Does not reload automatically, requires build on change and converting as well if adding new files.
+
+### Firefox Developer Edition
+
+#### Develop
+
+```bash
+yarn dev:firefox
+```
+
+#### Build
+
+```bash
+yarn build:firefox
+```
+
+#### Load
+
+https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox#w_what-are-my-options-if-i-want-to-use-an-unsigned-add-on-advanced-users
+
+Firefox Developer Edition > Tools > Add-ons and Themes > click on gear icon (Tools for all add-ons) > Install Add-on From File... > select build (build/firefox-mv3-prod.zip)
+
+> Note: Does not reload automatically, requires build and load on change.
+
+## Testing
+
+Download latest build from last merged PR or build from source. To use the extension see the load steps from [Development](#development) section.
--- a/apps/connector/assets/fonts/Inter.woff2
+++ b/apps/connector/assets/fonts/Inter.woff2
--- a/apps/connector/assets/icon-connected.png
+++ b/apps/connector/assets/icon-connected.png
--- a/apps/connector/assets/icon-disconnected.png
+++ b/apps/connector/assets/icon-disconnected.png
--- a/apps/connector/assets/icon.png
+++ b/apps/connector/assets/icon.png
--- a/apps/connector/assets/logo.png
+++ b/apps/connector/assets/logo.png
--- a/apps/connector/assets/network/arbitrum.webp
+++ b/apps/connector/assets/network/arbitrum.webp
--- a/apps/connector/assets/network/mainnet.webp
+++ b/apps/connector/assets/network/mainnet.webp
--- a/apps/connector/assets/network/optimism.webp
+++ b/apps/connector/assets/network/optimism.webp
--- a/apps/connector/assets/unable-to-connect.png
+++ b/apps/connector/assets/unable-to-connect.png
--- a/apps/connector/global.d.ts
+++ b/apps/connector/global.d.ts
@ -0,0 +1,7 @@
+import type { Provider } from './src/contents/provider'
+
+declare global {
+  interface Window {
+    ethereum: Provider
+  }
+}
--- a/apps/connector/package.json
+++ b/apps/connector/package.json
@ -0,0 +1,84 @@
+{
+  "name": "connector",
+  "version": "0.0.1",
+  "license": "MPL-2.0",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/status-im/status-web.git",
+    "directory": "apps/connector"
+  },
+  "scripts": {
+    "dev:chrome": "plasmo dev --target=chrome-mv3",
+    "dev:safari": "plasmo dev --target=safari-mv3",
+    "dev:firefox": "plasmo dev --target=firefox-mv3",
+    "build:chrome": "plasmo build --target=chrome-mv3",
+    "build:firefox": "plasmo build --target=firefox-mv3 --zip",
+    "lint": "eslint ./src",
+    "format": "prettier --write .",
+    "package": "plasmo package",
+    "clean": "rimraf apps build .plasmo node_modules"
+  },
+  "dependencies": {
+    "@plasmohq/messaging": "^0.6.2",
+    "@plasmohq/storage": "^1.11.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@status-im/colors": "^0.4.0",
+    "cva": "^1.0.0-beta.1",
+    "ethers": "^6.13.0",
+    "plasmo": "0.88.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "ts-pattern": "^5.2.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "4.1.1",
+    "@parcel/bundler-experimental": "^2.7.0",
+    "@status-im/eslint-config": "^0.3.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/chrome": "0.0.258",
+    "@types/node": "20.11.5",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "autoprefixer": "^10.4.19",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.0",
+    "postcss": "^8.4.38",
+    "prettier": "3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.1",
+    "rimraf": "^4.4.1",
+    "tailwind-merge": "^2.3.0",
+    "tailwind-scrollbar-utilities": "^0.2.0",
+    "tailwindcss": "^3.4.3",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "5.3.3"
+  },
+  "manifest": {
+    "manifest_version": 3,
+    "name": "A wallet connector by Status BETA",
+    "description": "THIS EXTENSION IS FOR BETA TESTING. Status Desktop Wallet extended to decentralised applications in your browser.",
+    "host_permissions": [
+      "https://*/*",
+      "https://chromewebstore.google.com/*"
+    ],
+    "permissions": [
+      "storage"
+    ],
+    "browser_specific_settings": {
+      "gecko": {
+        "id": "no-reply@status.im"
+      }
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,mjs}": [
+      "eslint",
+      "prettier --write"
+    ],
+    "*.{yml,yaml,json}": [
+      "prettier --write"
+    ]
+  }
+}
--- a/apps/connector/postcss.config.js
+++ b/apps/connector/postcss.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/apps/connector/shell.nix
+++ b/apps/connector/shell.nix
@ -0,0 +1,16 @@
+{
+  source ? builtins.fetchTarball {
+    url = "https://github.com/NixOS/nixpkgs/archive/614b4613980a522ba49f0d194531beddbb7220d3.tar.gz";
+    sha256 = "sha256:1kipdjdjcd1brm5a9lzlhffrgyid0byaqwfnpzlmw3q825z7nj6w";
+  },
+  pkgs ? import (source) {}
+}:
+
+pkgs.mkShell {
+  name = "browser-extension-shell";
+
+  buildInputs = with pkgs; [
+    nodejs_20
+    yarn
+  ];
+}
--- a/apps/connector/src/background.ts
+++ b/apps/connector/src/background.ts
@ -0,0 +1,48 @@
+import { Storage } from '@plasmohq/storage'
+import iconConnected from 'url:../assets/icon-connected.png' // eslint-disable-line import/no-unresolved
+import iconDisconnected from 'url:../assets/icon-disconnected.png' // eslint-disable-line import/no-unresolved
+
+import { config } from '~config'
+
+import type { ServiceWorkerMessage } from '~messages/service-worker-message'
+
+/**
+ * Check if the WebSocket server is reachable
+ */
+const storage = new Storage()
+
+const DESKTOP_ENDPOINT_URL = config.desktop.rpc.url.replace('ws:', 'http:')
+const CHECK_INTERVAL_MS = 5000
+
+const isWebSocketServerReachable = async (): Promise<boolean> => {
+  try {
+    await fetch(DESKTOP_ENDPOINT_URL, { method: 'HEAD' })
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function checkDesktopStatus() {
+  const isServerReachable = await isWebSocketServerReachable()
+  storage.set('status:desktop:running', isServerReachable)
+  chrome.action.setIcon({
+    path: isServerReachable ? iconConnected : iconDisconnected,
+  })
+}
+
+checkDesktopStatus()
+setInterval(checkDesktopStatus, CHECK_INTERVAL_MS)
+
+/**
+ * Handler for opening popup
+ */
+chrome.action.onClicked.addListener(async tab => {
+  if (!tab.id || !tab.url) {
+    return
+  }
+
+  chrome.tabs.sendMessage(tab.id, {
+    type: 'status:icon:clicked',
+  } satisfies ServiceWorkerMessage)
+})
--- a/apps/connector/src/components/connected.tsx
+++ b/apps/connector/src/components/connected.tsx
@ -0,0 +1,58 @@
+import { useLocalStorage } from '~hooks/use-local-storage'
+import { getFaviconUrl } from '~lib/get-favicon-url'
+
+import { Network } from './network'
+import { Switch } from './switch'
+
+const Connected = () => {
+  const [defaultWallet, setDefaultWallet] = useLocalStorage(
+    'status:default-wallet',
+    true,
+  )
+  const [, setReopen] = useLocalStorage('status:popup:reopen', false)
+
+  const dappUrl = window.location.hostname
+  const dappIcon = getFaviconUrl()
+
+  return (
+    <>
+      <div className="mb-5 flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          {/* fixme: set default favicon `onerror` */}
+          {dappIcon ? (
+            <img src={dappIcon} alt="icon" className="size-8 rounded-full" />
+          ) : (
+            <div className="size-8 rounded-full bg-neutral-5" />
+          )}
+          <div className="text-27 font-semibold">{dappUrl}</div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Network />
+
+        <div className="flex items-center gap-2 rounded-2xl border border-neutral-20 bg-neutral-2.5 px-4 py-3">
+          <div className="flex-1">
+            <div className="text-15 font-medium text-neutral-100">
+              Set as default wallet
+            </div>
+            <div className="text-13 font-regular text-neutral-50">
+              Launch Status (Desktop) when connecting to dApps with MetaMask or
+              other wallets
+            </div>
+          </div>
+          <Switch
+            checked={defaultWallet}
+            onCheckedChange={checked => {
+              setDefaultWallet(checked)
+              setReopen(true)
+              window.location.reload()
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export { Connected }
--- a/apps/connector/src/components/download-button.tsx
+++ b/apps/connector/src/components/download-button.tsx
--- a/apps/connector/src/components/dropdown-menu.tsx
+++ b/apps/connector/src/components/dropdown-menu.tsx
@ -0,0 +1,80 @@
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Root,
+  Trigger,
+} from '@radix-ui/react-dropdown-menu'
+import { cx } from 'cva'
+
+type Props = {
+  children: [React.ReactElement, React.ReactElement]
+  modal?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+const DropdownMenu = (props: Props) => {
+  const { children, onOpenChange, modal } = props
+
+  const [trigger, content] = children
+
+  return (
+    <Root onOpenChange={onOpenChange} modal={modal}>
+      <Trigger asChild>{trigger}</Trigger>
+      {content}
+    </Root>
+  )
+}
+
+type DropdownMenuItemProps = {
+  label: string
+  onSelect: () => void
+}
+
+const MenuItem = (props: DropdownMenuItemProps) => {
+  const { label, onSelect } = props
+
+  return (
+    <ItemBase onSelect={onSelect}>
+      <div className="flex items-center gap-8">
+        <p className="text-15 font-medium text-neutral-100">{label}</p>
+      </div>
+    </ItemBase>
+  )
+}
+
+const Content = (props: React.ComponentProps<typeof DropdownMenuContent>) => {
+  return (
+    <DropdownMenuContent
+      {...props}
+      className={cx('w-64 p-1 rounded-xl bg-white-100', 'shadow-3 ')}
+    />
+  )
+}
+
+const ItemBase = (props: React.ComponentProps<typeof DropdownMenuItem>) => {
+  return (
+    <DropdownMenuItem
+      {...props}
+      className="flex h-8 cursor-pointer select-none items-center justify-between gap-2 rounded-[10px] px-2 transition-colors hover:bg-neutral-5"
+    />
+  )
+}
+
+const Separator = (
+  props: React.ComponentProps<typeof DropdownMenuSeparator>,
+) => {
+  return (
+    <DropdownMenuSeparator
+      {...props}
+      className="mx-[-4px] my-1 h-px bg-neutral-10"
+    />
+  )
+}
+
+DropdownMenu.Content = Content
+DropdownMenu.Item = MenuItem
+DropdownMenu.Separator = Separator
+
+export { DropdownMenu }
+export type DropdownMenuProps = Omit<Props, 'children'>
--- a/apps/connector/src/components/mac-os-picker.tsx
+++ b/apps/connector/src/components/mac-os-picker.tsx
@ -0,0 +1,93 @@
+import { cx } from 'cva'
+
+import { config } from '~config'
+
+import { DropdownMenu } from './dropdown-menu'
+
+type Props = {
+  className?: string
+  children?: React.ReactNode
+}
+
+function downloadUrl(dataurl: string) {
+  const link = document.createElement('a')
+  link.href = dataurl
+  link.target = '_blank'
+  link.click()
+}
+
+const MacOsPicker = (props: Props) => {
+  const { children, className } = props
+
+  return (
+    <DropdownMenu>
+      <button
+        className={cx(
+          'group flex items-center justify-center gap-1 whitespace-nowrap rounded-xl border text-center text-15 font-medium leading-normal outline-none transition-all',
+          'h-10 px-3',
+          'border-neutral-30 bg-white-100 text-neutral-100 hover:border-neutral-40 active:border-neutral-50',
+          className,
+        )}
+      >
+        <span className="-mt-px">
+          <svg
+            color="rgba(9 16 28 / 100%)"
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 20"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              fill="rgba(9 16 28 / 100%)"
+              d="M14.357 10c.023 2.422 2.12 3.227 2.143 3.238-.018.056-.335 1.148-1.105 2.275-.665.975-1.356 1.946-2.444 1.966-1.069.02-1.413-.635-2.635-.635-1.222 0-1.604.615-2.616.655-1.05.04-1.85-1.054-2.52-2.025-1.371-1.987-2.42-5.613-1.012-8.062.699-1.215 1.948-1.985 3.303-2.005 1.031-.02 2.005.695 2.635.695.63 0 1.813-.86 3.056-.733.521.022 1.982.21 2.92 1.587-.075.047-1.743 1.02-1.725 3.044Zm-2.009-5.945c.558-.677.933-1.618.83-2.555-.803.032-1.775.537-2.351 1.213-.517.598-.97 1.556-.847 2.475.895.069 1.81-.457 2.368-1.133Z"
+            ></path>
+          </svg>
+        </span>
+        {children}
+
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          className="-ml-1 transition-transform duration-200 group-aria-expanded:rotate-180"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10Z"
+            fill="#E7EAEE"
+            fillOpacity={1}
+          />
+          <path
+            d="M7 8.5L10 11.5L13 8.5"
+            stroke={'#09101C'}
+            strokeWidth="1.2"
+          />
+        </svg>
+      </button>
+      <DropdownMenu.Content
+        align="start"
+        sideOffset={8}
+        className="[&>div]:outline-none"
+      >
+        <DropdownMenu.Item
+          label="Apple Silicon"
+          onSelect={() =>
+            downloadUrl(config.desktop.downloadUrls.macos.silicon)
+          }
+        />
+        <DropdownMenu.Item
+          label="Intel"
+          onSelect={() => downloadUrl(config.desktop.downloadUrls.macos.intel)}
+        />
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  )
+}
+
+export { MacOsPicker }
--- a/apps/connector/src/components/network.tsx
+++ b/apps/connector/src/components/network.tsx
@ -0,0 +1,39 @@
+import arbitrumImage from 'url:../../assets/network/arbitrum.webp'
+import mainnetImage from 'url:../../assets/network/mainnet.webp'
+import optimismImage from 'url:../../assets/network/optimism.webp'
+
+const Network = () => {
+  return (
+    <div className="flex h-[64px] items-center rounded-2xl border border-neutral-10 bg-white-100 px-4">
+      <div className="flex w-full items-center">
+        <div className="flex flex-1 flex-col">
+          <div className="text-13 font-regular text-neutral-50">
+            Supported networks
+          </div>
+          <div className="text-15 font-medium text-neutral-100">
+            Mainnet, Optimism, Arbitrum
+          </div>
+        </div>
+        <div className="flex">
+          <img
+            className="box-content size-6 rounded-full border border-white-100"
+            src={mainnetImage}
+            alt="Mainnet"
+          />
+          <img
+            className="ml-[-5px] box-content size-6 rounded-full border border-white-100"
+            src={optimismImage}
+            alt="Optimism"
+          />
+          <img
+            className="ml-[-5px] box-content size-6 rounded-full border border-white-100"
+            src={arbitrumImage}
+            alt="Arbitrum"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { Network }
--- a/apps/connector/src/components/not-connected.tsx
+++ b/apps/connector/src/components/not-connected.tsx
@ -0,0 +1,21 @@
+import unableToConnectImage from 'url:../../assets/unable-to-connect.png'
+
+import { DownloadButton } from './download-button'
+
+const NotConnected = () => {
+  return (
+    <div className="flex flex-col items-center">
+      <img src={unableToConnectImage} alt="Not connected" className="w-full" />
+      <div className="max-w-[304px] pb-5 pt-4 text-center">
+        <p className="text-19 font-semibold">Unable to connect to Status</p>
+        <p className="text-15">
+          Make sure Status desktop app is running on your machine or download it
+          below.
+        </p>
+      </div>
+      <DownloadButton />
+    </div>
+  )
+}
+
+export { NotConnected }
--- a/apps/connector/src/components/pin-instructions.tsx
+++ b/apps/connector/src/components/pin-instructions.tsx
@ -0,0 +1,58 @@
+import { useStorage } from '@plasmohq/storage/hook'
+
+const PinInstructions = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_showPinInstructions, setShowPinInstructions] = useStorage(
+    'show-pin-instructions',
+  )
+
+  return (
+    <div className="-mx-5 mt-8 flex items-center gap-2 border-t border-neutral-80/5 px-4 pt-3">
+      <div className="flex-1">
+        <div className="text-15 font-semibold text-neutral-100">
+          Pin the extension
+        </div>
+        <div className="flex items-center gap-1 text-13 font-regular">
+          Click <PuzzleIcon /> and then <PinIcon /> and voilà!
+        </div>
+      </div>
+      <button
+        className="group inline-flex h-8 items-center justify-center gap-1 whitespace-nowrap rounded-xl border border-neutral-30 bg-white-100 px-3 text-center text-15 font-medium leading-normal text-neutral-100 outline-none transition-all hover:border-neutral-40 active:border-neutral-50"
+        onClick={() => setShowPinInstructions(false)}
+      >
+        Dismiss
+      </button>
+    </div>
+  )
+}
+
+export { PinInstructions }
+
+const PuzzleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+    <path
+      fill="#09101C"
+      fillRule="evenodd"
+      d="M7.5 2.6a.9.9 0 0 0-.9.9v.6H5V2.9h.487a2.1 2.1 0 0 1 4.026 0h.611c.4 0 .735 0 1.01.023.287.023.56.074.82.206a2.1 2.1 0 0 1 .917.918c.132.26.183.532.207.82.022.274.022.61.022 1.01v.61a2.1 2.1 0 0 1 0 4.026v.612c0 .4 0 .735-.022 1.01-.024.287-.075.56-.207.819a2.1 2.1 0 0 1-.918.918c-.259.132-.532.183-.819.206-.275.023-.61.023-1.01.023H4.876c-.4 0-.735 0-1.01-.023-.287-.023-.56-.074-.82-.206a2.1 2.1 0 0 1-.917-.918c-.132-.26-.183-.532-.207-.82-.022-.274-.022-.61-.022-1.01V9.4h.6a.9.9 0 1 0 0-1.8h-.6V5.876c0-.4 0-.735.022-1.01.024-.287.075-.56.207-.819a2.1 2.1 0 0 1 .918-.918c.259-.132.532-.183.819-.206.275-.022.61-.022 1.01-.022H5v1.2h-.1c-.43 0-.716 0-.936.018-.213.017-.31.048-.373.08a.9.9 0 0 0-.393.393c-.031.062-.062.16-.08.372-.018.22-.018.507-.018.937v.586a2.1 2.1 0 0 1 0 4.026v.588c0 .43 0 .716.018.936.018.213.049.31.08.372a.9.9 0 0 0 .393.393c.062.032.16.063.373.08.22.018.506.018.936.018h5.2c.43 0 .716 0 .936-.018.213-.017.31-.048.373-.08a.9.9 0 0 0 .393-.393c.031-.062.062-.16.08-.372.017-.22.018-.507.018-.937V9.4h.6a.9.9 0 1 0 0-1.8h-.6V5.9c0-.43 0-.716-.018-.936-.018-.213-.049-.31-.08-.372a.9.9 0 0 0-.393-.393c-.062-.032-.16-.063-.373-.08-.22-.018-.506-.018-.936-.018H8.4v-.6a.9.9 0 0 0-.9-.9Z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+const PinIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
+    <g clipPath="url(#a)">
+      <path
+        fill="#09101C"
+        fillRule="evenodd"
+        d="M6.657 5.955c.497-.86.897-1.491 1.25-1.942.355-.454.625-.677.846-.78.377-.176.821-.097 1.932.545 1.111.641 1.402.986 1.439 1.4.02.243-.037.59-.253 1.124-.214.53-.56 1.193-1.057 2.053l-.073.126-.007.145-.173 3.53L3.58 8.123l2.896-1.973.113-.077.069-.119Zm4.628-3.217c-1.054-.608-2.033-1.062-3.04-.593-.47.22-.88.613-1.284 1.129-.387.495-.8 1.147-1.274 1.962L2.114 7.67l-.789.538.827.478 3.744 2.161-1.886 3.114h1.5l1.438-2.506 3.864 2.23.852.492.048-.981.214-4.367c.467-.815.823-1.497 1.058-2.078.245-.607.38-1.16.335-1.677-.097-1.105-.98-1.727-2.034-2.336Z"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h16v16H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
--- a/apps/connector/src/components/status-tag.tsx
+++ b/apps/connector/src/components/status-tag.tsx
@ -0,0 +1,66 @@
+import { cva } from 'cva'
+import { match } from 'ts-pattern'
+
+type Props = {
+  status: 'on' | 'off'
+}
+
+const styles = cva({
+  base: 'flex h-6 items-center gap-1 rounded-[20px] border px-2 text-13',
+  variants: {
+    status: {
+      on: 'border-success-/20 bg-success-/10 text-success-60',
+      off: 'border-danger-/20 bg-danger-/10 text-danger-60',
+    },
+  },
+})
+
+const StatusTag = (props: Props) => {
+  const { status } = props
+
+  return (
+    <div className={styles({ status })}>
+      {match(status)
+        .with('on', () => (
+          <>
+            <svg
+              width={12}
+              height={12}
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 1.5l-1.5 3H10L4.5 10 5 7H2l2.5-5.5H8z"
+                stroke="#1C8A80"
+                strokeWidth={1.1}
+              />
+            </svg>
+            <span className="text-success-60">Status desktop running</span>
+          </>
+        ))
+        .with('off', () => (
+          <>
+            <svg
+              width={12}
+              height={12}
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.45 1v4.5h1.1V1h-1.1zm2.525 1.58a3.95 3.95 0 11-3.95 0l-.55-.954a5.05 5.05 0 105.05 0l-.55.953z"
+                fill="#BA434D"
+              />
+            </svg>
+            <span className="text-danger-60">Status desktop not running</span>
+          </>
+        ))
+        .exhaustive()}
+    </div>
+  )
+}
+
+export { StatusTag }
--- a/apps/connector/src/components/switch.tsx
+++ b/apps/connector/src/components/switch.tsx
@ -0,0 +1,20 @@
+import * as BaseSwitch from '@radix-ui/react-switch'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+}
+
+const Switch = (props: Props) => {
+  return (
+    <BaseSwitch.Root
+      className="relative h-[20px] w-[30px] cursor-default rounded-full bg-neutral-30 outline-none data-[disabled]:cursor-not-allowed data-[state=checked]:bg-customisation-blue-50 data-[disabled]:opacity-30"
+      {...props}
+    >
+      <BaseSwitch.Thumb className="block size-[16px] translate-x-0.5 rounded-full bg-white-100 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[12px]" />
+    </BaseSwitch.Root>
+  )
+}
+
+export { Switch }
--- a/apps/connector/src/config/index.ts
+++ b/apps/connector/src/config/index.ts
@ -0,0 +1,17 @@
+export const config = {
+  desktop: {
+    rpc: {
+      url: 'ws://localhost:8586',
+      method: 'connector_callRPC',
+    },
+    downloadUrls: {
+      macos: {
+        silicon:
+          'https://status.app/api/download/macos-silicon?source=connector',
+        intel: 'https://status.app/api/download/macos-intel?source=connector',
+      },
+      windows: 'https://status.app/api/download/windows?source=connector',
+      linux: 'https://status.app/api/download/linux?source=connector',
+    },
+  },
+}
--- a/apps/connector/src/contents/font.css
+++ b/apps/connector/src/contents/font.css
@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Inter';
+  src: url(data-base64:../../assets/fonts/Inter.woff2) format('woff2');
+}
--- a/apps/connector/src/contents/popup.tsx
+++ b/apps/connector/src/contents/popup.tsx
@ -0,0 +1,87 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useStorage } from '@plasmohq/storage/hook'
+import styleText from 'data-text:../style.css' // eslint-disable-line import/no-unresolved
+import logoSrc from 'url:../../assets/logo.png'
+
+import { Connected } from '~components/connected'
+import { NotConnected } from '~components/not-connected'
+import { PinInstructions } from '~components/pin-instructions'
+import { StatusTag } from '~components/status-tag'
+import { useLocalStorage } from '~hooks/use-local-storage'
+import { useOutsideClick } from '~hooks/use-outside-click'
+import { ServiceWorkerMessage } from '~messages/service-worker-message'
+
+import type { PlasmoGetStyle } from 'plasmo'
+
+export const getStyle: PlasmoGetStyle = () => {
+  const style = document.createElement('style')
+  style.textContent = styleText
+  return style
+}
+
+type MessageHandler = Parameters<typeof chrome.runtime.onMessage.addListener>[0]
+
+export default function Popup() {
+  const [connected] = useStorage('status:desktop:running')
+  const [showPinInstructions] = useStorage('show-pin-instructions', true)
+
+  const [reopen, setReopen] = useLocalStorage('status:popup:reopen', false)
+  const [open, setOpen] = useState(false)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const handleOutsideClick = useCallback(() => setOpen(false), [])
+
+  useOutsideClick(containerRef, handleOutsideClick)
+
+  useEffect(() => {
+    const handleMessage: MessageHandler = (message: ServiceWorkerMessage) => {
+      try {
+        message = ServiceWorkerMessage.parse(message)
+      } catch {
+        return
+      }
+
+      if (message.type === 'status:icon:clicked') {
+        setOpen(open => !open)
+      }
+    }
+
+    chrome.runtime.onMessage.addListener(handleMessage)
+
+    return () => {
+      chrome.runtime.onMessage.removeListener(handleMessage)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (reopen) {
+      setOpen(true)
+      setReopen(false)
+    }
+  }, [reopen, setReopen])
+
+  if (!open) {
+    return null
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="fixed right-2 top-2 max-w-[390px] overflow-hidden rounded-3xl"
+    >
+      <div className="grid w-full grid-rows-[auto,1fr] rounded-3xl bg-neutral-100">
+        {/* Bar */}
+        <div className="flex items-center justify-between px-5 py-3">
+          <img src={logoSrc} alt="Status" className="size-8" />
+          <StatusTag status={connected ? 'on' : 'off'} />
+        </div>
+
+        <div className="mx-1 mb-1 overflow-hidden rounded-[20px] bg-white-100 p-5">
+          {connected ? <Connected /> : <NotConnected />}
+          {showPinInstructions && <PinInstructions />}
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/apps/connector/src/contents/provider.ts
+++ b/apps/connector/src/contents/provider.ts
@ -0,0 +1,319 @@
+import { ProviderRpcError } from '~lib/provider-rpc-error'
+import { RequestArguments } from '~lib/request-arguments'
+import { ProxyMessage } from '~messages/proxy-message'
+
+import type { ProviderMessage } from '~messages/provider-message'
+import type { PlasmoCSConfig } from 'plasmo'
+
+export const config: PlasmoCSConfig = {
+  matches: ['https://*/*'],
+  world: 'MAIN',
+  run_at: 'document_start',
+  all_frames: false,
+}
+
+type Event =
+  | 'connect'
+  | 'connected'
+  | 'disconnect'
+  | 'close'
+  | 'error'
+  | 'chainChanged'
+  | 'accountsChanged'
+  | 'networkChanged'
+
+/**
+ * @see https://eips.ethereum.org/EIPS/eip-1193 for spec
+ */
+export class Provider {
+  #listeners: Map<Event, (...args: unknown[]) => void>
+
+  /**
+   * @see https://github.com/snapshot-labs/lock/blob/503f4b07f1b631b1eed0dca993110dc561189261/src/utils.ts for other examples
+   */
+  public isStatus: boolean
+
+  public isMetaMask: boolean
+  public _metamask: {
+    isUnlocked: () => Promise<true>
+  } | null
+
+  // public isCoinbaseWallet: boolean
+  public qrUrl: null
+
+  public autoRefreshOnNetworkChange: boolean
+
+  public provider: Record<string, unknown> | null
+
+  public __isProvider: boolean
+
+  public connected: boolean
+
+  constructor() {
+    this.isStatus = true
+    this.isMetaMask = false
+    this._metamask = null
+    // this.isCoinbaseWallet = false
+    this.qrUrl = null
+    this.autoRefreshOnNetworkChange = false
+    this.provider = null
+    this.__isProvider = false
+    this.connected = false
+    this.#listeners = new Map()
+  }
+
+  public async request(args: RequestArguments) {
+    try {
+      args = RequestArguments.parse(args)
+    } catch {
+      throw new ProviderRpcError({
+        code: -32602,
+        message: 'Invalid request arguments',
+      })
+    }
+
+    await waitUntilComplete(document)
+
+    return new Promise((resolve, reject) => {
+      const { method, params } = args
+
+      const messageChannel = new MessageChannel()
+
+      messageChannel.port1.onmessage = ({ data }) => {
+        try {
+          const message = ProxyMessage.parse(data)
+
+          messageChannel.port1.close()
+
+          // note: method side-effects
+          switch (message.type) {
+            case 'status:proxy:success': {
+              if (
+                (method === 'eth_requestAccounts' ||
+                  method === 'eth_accounts') &&
+                !this.connected
+              ) {
+                this.#listeners.get('connect')?.({ chainId: '0x1' })
+                this.#listeners.get('connected')?.({ chainId: '0x1' })
+                this.connected = true
+
+                console.log('connected::')
+              }
+
+              if (method === 'wallet_switchEthereumChain') {
+                this.#listeners.get('chainChanged')?.(message.data)
+                this.#listeners.get('networkChanged')?.(message.data)
+
+                console.log('chainChanged::')
+              }
+
+              resolve(message.data)
+
+              return
+            }
+            case 'status:proxy:error': {
+              console.error(message.error)
+
+              // note: for those dApps that make call after having permissions revoked
+              if (
+                message.error.message === 'dApp is not permitted by user' &&
+                this.connected
+              ) {
+                this.disconnect()
+              }
+
+              reject(new ProviderRpcError(message.error))
+
+              return
+            }
+          }
+        } catch (error) {
+          // we don't reject here because incoming message is not from the proxy
+          return
+        }
+      }
+
+      const providerMessage: ProviderMessage = {
+        type: 'status:provider',
+        data: {
+          method,
+          params,
+        },
+      }
+
+      window.postMessage(providerMessage, window.origin, [messageChannel.port2])
+    })
+  }
+
+  /** @deprecated */
+  public async send(...args: unknown[]): Promise<unknown> {
+    return await this.request({
+      method: args[0] as string,
+      params: args[1] as Record<string, unknown>,
+    })
+  }
+
+  public on(event: Event, handler: (args: unknown) => void): void {
+    console.log('on::', event, handler)
+
+    this.#listeners.set(event, handler)
+  }
+
+  /** @deprecated */
+  public async close(...args: unknown[]): Promise<void> {
+    console.log('close::', args)
+
+    this.disconnect()
+  }
+
+  public removeListener(event: Event, handler: (args: unknown) => void): void {
+    console.log('removeListener::', event, handler)
+
+    // note: not all dapps remove these on disconnect
+    if (event === 'close' || event === 'disconnect') {
+      this.disconnect()
+    }
+
+    this.#listeners.delete(event)
+  }
+
+  private async disconnect() {
+    if (!this.connected) {
+      return
+    }
+
+    this.connected = false
+
+    console.log('disconnect::')
+
+    await this.request({
+      method: 'wallet_revokePermissions',
+      params: [
+        {
+          eth_accounts: {},
+        },
+      ],
+    })
+
+    window.postMessage(
+      {
+        type: 'status:provider:disconnect',
+      } satisfies ProviderMessage,
+      window.origin,
+    )
+
+    this.#listeners.get('disconnect')?.()
+    this.#listeners.get('close')?.()
+    this.#listeners.clear()
+  }
+}
+
+const provider = new Provider()
+
+/**
+ * @see https://eips.ethereum.org/EIPS/eip-6963 for spec
+ */
+function announceProvider() {
+  const info = {
+    uuid: 'c14d6a7e-14c2-477d-bcb7-ffb732145eae',
+    name: 'Status',
+    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzk1MF8xMjM5NikiPiA8bWFzayBpZD0ibWFzazBfOTUwXzEyMzk2IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSItMSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMzIj4gPHBhdGggZD0iTTE2IC0wLjAwMDQ4ODI4MUM0IC0wLjAwMDQ4ODI4MSAwIDMuOTk5NTEgMCAxNS45OTk1QzAgMjcuOTk5NSA0IDMxLjk5OTUgMTYgMzEuOTk5NUMyOCAzMS45OTk1IDMyIDI3Ljk5OTUgMzIgMTUuOTk5NUMzMiAzLjk5OTUxIDI4IC0wLjAwMDQ4ODI4MSAxNiAtMC4wMDA0ODgyODFaIiBmaWxsPSJ3aGl0ZSIvPiA8L21hc2s+IDxnIG1hc2s9InVybCgjbWFzazBfOTUwXzEyMzk2KSI+IDxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2ZfOTUwXzEyMzk2KSI+IDxjaXJjbGUgY3g9IjIzIiBjeT0iOC45OTk1MSIgcj0iMTkiIGZpbGw9IiMxOTkyRDciLz4gPC9nPiA8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMV9mXzk1MF8xMjM5NikiPiA8Y2lyY2xlIGN4PSIzMyIgY3k9IjE4Ljk5OTUiIHI9IjE5IiBmaWxsPSIjRjZCMDNDIi8+IDwvZz4gPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjJfZl85NTBfMTIzOTYpIj4gPGNpcmNsZSBjeD0iNSIgY3k9IjMwLjk5OTUiIHI9IjE5IiBmaWxsPSIjRkY3RDQ2Ii8+IDwvZz4gPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjNfZl85NTBfMTIzOTYpIj4gPGNpcmNsZSBjeD0iLTciIGN5PSI4Ljk5OTUxIiByPSIxOSIgZmlsbD0iIzcxNDBGRCIvPiA8L2c+IDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguMTI4NCA4LjgwODQzQzE0Ljk1NTEgOC45ODk4NCAxMi42MTIxIDExLjg3NDMgMTIuMzUxNiAxNS4xMzc1QzEyLjM2NzYgMTUuMTMyNiAxMi4zODUzIDE1LjEyNzYgMTIuNDAzIDE1LjEyMjdDMTIuNDIwNyAxNS4xMTc4IDEyLjQzODQgMTUuMTEyOSAxMi40NTQ0IDE1LjEwOEMxMi44NTM1IDE1LjAwNjcgMTMuMjYxNyAxNC45NDUyIDEzLjY3MzEgMTQuOTI0M0MxNC41NjQxIDE0Ljg3NDUgMTUuMjg4NyAxNC45NTE2IDE2LjAxMzIgMTUuMDI4OEMxNi43Mzg3IDE1LjEwNiAxNy40NjQgMTUuMTgzMiAxOC4zNTYyIDE1LjEzMjlDMTguNzY1OCAxNS4xMTEzIDE5LjE3MjIgMTUuMDQ3OSAxOS41Njg4IDE0Ljk0NEMyMS4yNDc2IDE0LjUwODYgMjIuMjEzNSAxMy4zNzQgMjIuMTI4MiAxMS44MTkxQzIyLjAyMzEgOS44ODcwOCAyMC4wNzY5IDguNjk3MzIgMTguMTI4NCA4LjgwODQzWk0xMy44Nzk2IDIzLjE5MDlDMTcuMDUyOSAyMy4wMDk1IDE5LjM5NTkgMjAuMTI1IDE5LjY1NjQgMTYuODYxOEMxOS42MzYzIDE2Ljg2OCAxOS42MTM1IDE2Ljg3NDIgMTkuNTkxNSAxNi44ODAxQzE5LjU3ODQgMTYuODgzNyAxOS41NjU1IDE2Ljg4NzIgMTkuNTUzNiAxNi44OTA1QzE5LjE1NDUgMTYuOTkxOSAxOC43NDYyIDE3LjA1MzQgMTguMzM0OCAxNy4wNzQyQzE3LjQ0MjcgMTcuMTI0OSAxNi43MTczIDE3LjA0NzkgMTUuOTkxOSAxNi45NzA4QzE1LjI2NzQgMTYuODkzOCAxNC41NDI4IDE2LjgxNjkgMTMuNjUxOCAxNi44NjcxQzEzLjI0MjEgMTYuODg4OCAxMi44MzU4IDE2Ljk1MjEgMTIuNDM5MiAxNy4wNTYxQzEwLjc2MDMgMTcuNDkwNyA5Ljc5ODI5IDE4LjYyNTMgOS44Nzk3OSAyMC4xODAyQzkuOTg0OTEgMjIuMTEyMiAxMS45MzExIDIzLjMwMiAxMy44Nzk2IDIzLjE5MDlaIiBmaWxsPSJ3aGl0ZSIvPiA8L2c+IDwvZz4gPGRlZnM+IDxmaWx0ZXIgaWQ9ImZpbHRlcjBfZl85NTBfMTIzOTYiIHg9Ii01LjQzMDI2IiB5PSItMTkuNDMwNyIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIxX2ZfOTUwXzEyMzk2IiB4PSI0LjU2OTc0IiB5PSItOS40MzA3NSIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIyX2ZfOTUwXzEyMzk2IiB4PSItMjMuNDMwMyIgeT0iMi41NjkyNSIgd2lkdGg9IjU2Ljg2MDUiIGhlaWdodD0iNTYuODYwNSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPiA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPiA8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJzaGFwZSIvPiA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjcxNTEzIiByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXJfOTUwXzEyMzk2Ii8+IDwvZmlsdGVyPiA8ZmlsdGVyIGlkPSJmaWx0ZXIzX2ZfOTUwXzEyMzk2IiB4PSItMzUuNDMwMyIgeT0iLTE5LjQzMDciIHdpZHRoPSI1Ni44NjA1IiBoZWlnaHQ9IjU2Ljg2MDUiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4gPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4gPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJCYWNrZ3JvdW5kSW1hZ2VGaXgiIHJlc3VsdD0ic2hhcGUiLz4gPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNC43MTUxMyIgcmVzdWx0PSJlZmZlY3QxX2ZvcmVncm91bmRCbHVyXzk1MF8xMjM5NiIvPiA8L2ZpbHRlcj4gPGNsaXBQYXRoIGlkPSJjbGlwMF85NTBfMTIzOTYiPiA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IndoaXRlIi8+IDwvY2xpcFBhdGg+IDwvZGVmcz4gPC9zdmc+',
+    rdns: 'app.status',
+  }
+
+  window.dispatchEvent(
+    new CustomEvent('eip6963:announceProvider', {
+      detail: Object.freeze({ info, provider }),
+    }),
+  )
+}
+
+window.addEventListener('eip6963:requestProvider', () => {
+  announceProvider()
+})
+
+announceProvider()
+
+function injectProvider() {
+  Object.defineProperties(provider, {
+    isStatus: {
+      value: true,
+      writable: false,
+    },
+    isMetaMask: {
+      value: true,
+      writable: false,
+    },
+    _metamask: {
+      value: {
+        isUnlocked: () => new Promise(resolve => resolve(true)),
+      },
+      writable: false,
+    },
+    // isCoinbaseWallet: {
+    //   value: true,
+    //   writable: false,
+    // },
+    qrUrl: {
+      value: null,
+      writable: false,
+    },
+    autoRefreshOnNetworkChange: {
+      value: false,
+      writable: true,
+    },
+    provider: {
+      value: {},
+      writable: true,
+    },
+    ['__isProvider']: {
+      value: true,
+      writable: false,
+    },
+    connected: {
+      value: true,
+      writable: true,
+    },
+  })
+
+  Object.seal(provider)
+
+  Object.defineProperties(window, {
+    ethereum: {
+      get() {
+        return provider
+      },
+      configurable: false,
+    },
+  })
+}
+
+// let redefinedProvider: any
+
+if (window.localStorage.getItem('status:default-wallet') !== 'false') {
+  // redefinedProvider = window.ethereum
+
+  injectProvider()
+}
+
+// window.addEventListener('storage', () => {
+//   if (window.localStorage.getItem('status:default-wallet') === 'false') {
+//     window.ethereum = redefinedProvider
+//   }
+// })
+
+async function waitUntilComplete(document: Document): Promise<void> {
+  return new Promise(resolve => {
+    if (document.readyState === 'complete') {
+      resolve()
+
+      return
+    }
+
+    document.addEventListener('readystatechange', () => {
+      if (document.readyState === 'complete') {
+        resolve()
+      }
+    })
+  })
+}
--- a/apps/connector/src/contents/proxy.ts
+++ b/apps/connector/src/contents/proxy.ts
@ -0,0 +1,115 @@
+import { getFaviconUrl } from '~lib/get-favicon-url'
+import { ProviderMessage } from '~messages/provider-message'
+
+import { DesktopClient } from '../lib/desktop-client'
+
+import type { ProxyMessage } from '~messages/proxy-message'
+import type { EthersError } from 'ethers'
+import type { PlasmoCSConfig } from 'plasmo'
+
+export const config: PlasmoCSConfig = {
+  run_at: 'document_start',
+}
+
+const desktopClient = new DesktopClient()
+
+const handleMessage = async (event: MessageEvent) => {
+  if (event.origin !== window.origin) {
+    return
+  }
+
+  let message: ProviderMessage
+  try {
+    message = ProviderMessage.parse(event.data)
+  } catch {
+    return
+  }
+
+  if (message.type === 'status:provider:disconnect') {
+    desktopClient.stop()
+    return
+  }
+
+  if (message.type !== 'status:provider') {
+    return
+  }
+
+  if (!event.ports.length) {
+    return
+  }
+
+  try {
+    console.log('request::', message.data)
+
+    const response = await desktopClient.send({
+      ...message.data,
+      name: window.location.hostname,
+      url: window.origin,
+      iconUrl: getFaviconUrl() ?? '',
+    })
+
+    console.log('response::', response)
+
+    event.ports[0].postMessage({
+      type: 'status:proxy:success',
+      data: response,
+    } satisfies ProxyMessage)
+  } catch (error) {
+    let proxyError = {
+      code: -32603,
+      message: isError(error) ? error.message : 'Internal error',
+    }
+
+    /**
+     * ethers.js library has a custom error detection mechanism.
+     * - Detected errors are stored in the `info` object:
+     *   @see https://github.com/ethers-io/ethers.js/blob/72c2182d01afa855d131e82635dca3da063cfb31/src.ts/providers/provider-jsonrpc.ts#L976-L1057
+     * - Undetected errors are stored in the `error` field:
+     *   @see https://github.com/ethers-io/ethers.js/blob/72c2182d01afa855d131e82635dca3da063cfb31/src.ts/providers/provider-jsonrpc.ts#L1059
+     */
+    if (isEthersError(error)) {
+      if (isRpcError(error.error)) {
+        proxyError = error.error
+      } else if (isRpcError(error.info?.error)) {
+        proxyError = error.info.error
+      }
+    }
+
+    const proxyMessage: ProxyMessage = {
+      type: 'status:proxy:error',
+      error: proxyError,
+    }
+
+    event.ports[0].postMessage(proxyMessage)
+  }
+}
+
+function isError(error: unknown): error is Error {
+  return !!error && typeof error === 'object' && 'message' in error
+}
+
+function isEthersError(error: unknown): error is EthersError & {
+  info?: { error?: { code: number; message: string } }
+} {
+  return (
+    !!error &&
+    typeof error === 'object' &&
+    'error' in error &&
+    error.error !== null &&
+    typeof error.error === 'object' &&
+    'code' in error.error
+  )
+}
+
+function isRpcError(
+  error: unknown,
+): error is { code: number; message: string } {
+  return (
+    !!error &&
+    typeof error === 'object' &&
+    'code' in error &&
+    'message' in error
+  )
+}
+
+window.addEventListener('message', handleMessage)
--- a/apps/connector/src/hooks/use-desktop-os.ts
+++ b/apps/connector/src/hooks/use-desktop-os.ts
@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+declare global {
+  interface Navigator {
+    // @see https://github.com/lukewarlow/user-agent-data-types/blob/master/index.d.ts
+    userAgentData?: {
+      platform: string
+    }
+  }
+}
+
+export type Platform = 'macos' | 'windows' | 'linux'
+
+export function detectDesktopOS(): Platform | null {
+  const platform =
+    window.navigator.userAgentData?.platform.toLowerCase() ??
+    window.navigator.platform.toLowerCase()
+
+  if (platform.includes('mac')) return 'macos'
+  if (platform.includes('win')) return 'windows'
+  if (platform.includes('linux')) return 'linux'
+  return null
+}
+
+export const useDesktopOS = () => {
+  const [desktopOS, setDesktopOS] = useState<Platform | null>(null)
+
+  useEffect(() => {
+    // note: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform#examples deprecated but use cases are still valid
+    // note: https://html.spec.whatwg.org/multipage/system-state.html#dom-navigator-platform-dev (e.g. "MacIntel", "Win32", "Linux x86_64", "Linux armv81")
+    setDesktopOS(detectDesktopOS())
+  }, [])
+
+  return desktopOS
+}
--- a/apps/connector/src/hooks/use-local-storage.tsx
+++ b/apps/connector/src/hooks/use-local-storage.tsx
@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(initialValue)
+
+  useEffect(() => {
+    try {
+      const item = window.localStorage.getItem(key)
+      setStoredValue(item ? JSON.parse(item) : initialValue)
+    } catch (error) {
+      console.log(error)
+      setStoredValue(initialValue)
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === key) {
+        setStoredValue(
+          event.newValue ? JSON.parse(event.newValue) : initialValue,
+        )
+      }
+    }
+
+    window.addEventListener('storage', handleStorageChange)
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange)
+    }
+  }, [key, initialValue])
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+
+      setStoredValue(valueToStore)
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      window.dispatchEvent(new Event('storage'))
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return [storedValue, setValue]
+}
--- a/apps/connector/src/hooks/use-outside-click.ts
+++ b/apps/connector/src/hooks/use-outside-click.ts
@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+
+export const useOutsideClick = (
+  ref: React.RefObject<HTMLDivElement>,
+  callback: () => void,
+) => {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const path = event.composedPath()
+      if (ref.current && !path.includes(ref.current)) {
+        callback()
+      }
+    }
+
+    document.addEventListener('click', handleClick, true)
+
+    return () => {
+      document.removeEventListener('click', handleClick, true)
+    }
+  }, [ref, callback])
+
+  return ref
+}
--- a/apps/connector/src/lib/desktop-client.ts
+++ b/apps/connector/src/lib/desktop-client.ts
@ -0,0 +1,101 @@
+import { WebSocketProvider } from 'ethers'
+
+import { config } from '~config'
+
+import type { RequestArguments } from '~lib/request-arguments'
+import type { WebSocketLike } from 'ethers'
+
+type DesktopRequestArguments = RequestArguments & {
+  name: string
+  url: string
+  iconUrl: string
+}
+
+export class DesktopClient {
+  #rpcClient: WebSocketProvider | null = null
+
+  public stop() {
+    if (!this.#rpcClient) {
+      return
+    }
+
+    console.log('stop::')
+    this.#rpcClient?.destroy()
+    this.#rpcClient = null
+
+    // todo: publish disconnect message/event after https://github.com/status-im/status-desktop/issues/16014
+  }
+
+  public async send(args: DesktopRequestArguments) {
+    if (!this.#rpcClient) {
+      console.log('start::')
+      this.#rpcClient = new WebSocketProvider(
+        config.desktop.rpc.url,
+        'mainnet',
+        {
+          staticNetwork: true,
+        },
+      )
+      ;(this.#rpcClient.websocket as WebSocket).onclose = () => {
+        this.stop()
+      }
+    }
+
+    await waitUntilOpen(this.#rpcClient.websocket)
+
+    console.log('client::', {
+      method: config.desktop.rpc.method,
+      params: [JSON.stringify(args)],
+    })
+
+    return await this.#rpcClient.send(config.desktop.rpc.method, [
+      JSON.stringify(args),
+    ])
+  }
+}
+
+async function waitUntilOpen(websocket: WebSocketLike) {
+  return new Promise<void>((resolve, reject) => {
+    if (websocket.readyState === WebSocket.OPEN) {
+      resolve()
+
+      return
+    }
+
+    if (websocket.readyState === WebSocket.CLOSING) {
+      reject(new Error('The RPC server is closing'))
+
+      return
+    }
+
+    if (websocket.readyState === WebSocket.CLOSED) {
+      reject(new Error('The RPC server is closed'))
+
+      return
+    }
+
+    const timeout = setTimeout(() => {
+      reject(new Error('Timed out to connect to the RPC server'))
+    }, 30 * 1000)
+
+    if (websocket.readyState === WebSocket.CONNECTING) {
+      console.info('Waiting for the RPC server to connect')
+    }
+
+    const onopen = websocket.onopen?.bind(websocket)
+    websocket.onopen = event => {
+      onopen?.(event)
+      websocket.onopen = onopen!
+      clearTimeout(timeout)
+      resolve()
+    }
+
+    const onerror = websocket.onerror?.bind(websocket)
+    websocket.onerror = event => {
+      onerror?.(event)
+      websocket.onerror = onerror!
+      clearTimeout(timeout)
+      reject(new Error('Failed to connect to the RPC server'))
+    }
+  })
+}
--- a/apps/connector/src/lib/get-favicon-url.ts
+++ b/apps/connector/src/lib/get-favicon-url.ts
@ -0,0 +1,17 @@
+export function getFaviconUrl() {
+  const faviconElement =
+    document.querySelector<HTMLLinkElement>('link[rel="icon"]')
+
+  if (faviconElement) {
+    return faviconElement.href
+  }
+
+  const iconElements =
+    document.querySelectorAll<HTMLLinkElement>('link[rel*="icon"]')
+
+  if (iconElements.length === 0) {
+    return null
+  }
+
+  return iconElements[0].href
+}
--- a/apps/connector/src/lib/provider-rpc-error.ts
+++ b/apps/connector/src/lib/provider-rpc-error.ts
@ -0,0 +1,10 @@
+export class ProviderRpcError extends Error {
+  public code: number
+  public data: unknown
+
+  constructor(args: { code: number; message: string; data?: unknown }) {
+    super(args.message)
+    this.code = args.code
+    this.data = args.data
+  }
+}
--- a/apps/connector/src/lib/request-arguments.ts
+++ b/apps/connector/src/lib/request-arguments.ts
@ -0,0 +1,13 @@
+import { z } from 'zod'
+
+/**
+ * @see https://eips.ethereum.org/EIPS/eip-1193#request-1
+ */
+export const RequestArguments = z.object({
+  method: z.string(),
+  params: z
+    .union([z.array(z.unknown()).readonly(), z.record(z.unknown()).optional()])
+    .optional(),
+})
+
+export type RequestArguments = z.infer<typeof RequestArguments>
--- a/apps/connector/src/messages/provider-message.ts
+++ b/apps/connector/src/messages/provider-message.ts
@ -0,0 +1,18 @@
+import { z } from 'zod'
+
+import { RequestArguments } from '~lib/request-arguments'
+
+export const ProviderMessage = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('status:provider'),
+    data: RequestArguments,
+  }),
+  z.object({
+    type: z.literal('status:provider:disconnect'),
+  }),
+  z.object({
+    type: z.literal('status:provider:data'),
+  }),
+])
+
+export type ProviderMessage = z.infer<typeof ProviderMessage>
--- a/apps/connector/src/messages/proxy-message.ts
+++ b/apps/connector/src/messages/proxy-message.ts
@ -0,0 +1,17 @@
+import { z } from 'zod'
+
+export const ProxyMessage = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('status:proxy:success'),
+    data: z.unknown(),
+  }),
+  z.object({
+    type: z.literal('status:proxy:error'),
+    error: z.object({
+      code: z.number(),
+      message: z.string(),
+    }),
+  }),
+])
+
+export type ProxyMessage = z.infer<typeof ProxyMessage>
--- a/apps/connector/src/messages/service-worker-message.ts
+++ b/apps/connector/src/messages/service-worker-message.ts
@ -0,0 +1,9 @@
+import { z } from 'zod'
+
+export const ServiceWorkerMessage = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal('status:icon:clicked'),
+  }),
+])
+
+export type ServiceWorkerMessage = z.infer<typeof ServiceWorkerMessage>
--- a/apps/connector/src/style.css
+++ b/apps/connector/src/style.css
@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*,
+::before,
+::after {
+  font-family: theme(fontFamily.sans);
+  color: theme(colors.neutral.100);
+}
+
+* {
+  font-family: theme(fontFamily.sans) !important;
+  font-size: initial !important;
+}
--- a/apps/connector/tailwind.config.ts
+++ b/apps/connector/tailwind.config.ts
@ -0,0 +1,291 @@
+import * as colors from '@status-im/colors'
+import { scrollbarWidth } from 'tailwind-scrollbar-utilities'
+import { fontFamily } from 'tailwindcss/defaultTheme'
+import plugin from 'tailwindcss/plugin'
+
+import type { Config } from 'tailwindcss'
+
+export const screens = {
+  // We simulate the desktop first approach by using min-width 1px above the max-width of the previous breakpoint to match the design breakpoints
+  // Otherwise, we would have to use max-width approach and change the entire codebase styles
+  sm: '431px',
+  md: '641px',
+  '2md': '768px',
+  lg: '869px',
+  xl: '1024px',
+  '2xl': '1281px',
+  '3xl': '1441px',
+  // TODO to be defined by design for pro-users
+  '4xl': '1601px',
+}
+
+export default {
+  darkMode: 'media',
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    // './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['Inter', ...fontFamily.sans],
+      mono: fontFamily.mono,
+    },
+
+    // use <Text /> from @status-im/components or arbitrary values
+    // note: https://tailwindcss.com/docs/font-size#providing-a-default-line-height for `[fontSize, { lineHeight?, letterSpacing?, fontWeight? }]`
+    fontSize: {
+      // note: not in design system
+      240: [
+        '15rem',
+        {
+          lineHeight: '13.25rem',
+          letterSpacing: '-0.6rem',
+        },
+      ],
+      // note: not in design system
+      120: [
+        '7.5rem',
+        {
+          lineHeight: '5.25rem',
+          letterSpacing: '-0.1575rem',
+        },
+      ],
+      88: [
+        '5.5rem',
+        {
+          lineHeight: '5.25rem',
+          letterSpacing: '-0.1155rem',
+        },
+      ],
+      // note: not in design system
+      76: [
+        '4.75rem',
+        {
+          lineHeight: '4.25rem',
+          letterSpacing: '-0.095rem',
+        },
+      ],
+      64: [
+        '4rem',
+        {
+          lineHeight: '4.25rem',
+          letterSpacing: '-0.08rem',
+        },
+      ],
+      // note: not in design system
+      48: [
+        '3rem',
+        {
+          lineHeight: '3.125rem',
+          letterSpacing: '-0.06rem',
+        },
+      ],
+      40: [
+        '2.5rem',
+        {
+          lineHeight: '2.75rem',
+          letterSpacing: '-0.05rem',
+        },
+      ],
+      27: [
+        '1.6875rem',
+        {
+          lineHeight: '2rem',
+          letterSpacing: '-0.0354375rem',
+        },
+      ],
+      19: [
+        '1.1875rem',
+        {
+          lineHeight: '1.75rem',
+          letterSpacing: '-0.019rem',
+        },
+      ],
+      15: [
+        '0.9375rem',
+        {
+          lineHeight: '1.359375rem',
+          letterSpacing: '-0.0084375rem',
+        },
+      ],
+      13: [
+        '0.8125rem',
+        {
+          lineHeight: '1.1375rem',
+          letterSpacing: '-0.0024375rem',
+        },
+      ],
+      11: [
+        '0.6875rem',
+        {
+          lineHeight: '0.97625rem',
+          letterSpacing: '-0.0034375rem',
+        },
+      ],
+    },
+
+    colors: colors,
+
+    fontWeight: {
+      regular: '400',
+      400: '400',
+      medium: '500',
+      500: '500',
+      semibold: '600',
+      600: '600',
+      bold: '700',
+      700: '700',
+    },
+
+    boxShadow: {
+      1: '0px 2px 20px rgba(9, 16, 28, 0.04)',
+      2: '0px 4px 20px rgba(9, 16, 28, 0.08)',
+      3: '0px 8px 30px rgba(9, 16, 28, 0.12);',
+    },
+
+    extend: {
+      spacing: {
+        30: '7.5rem',
+      },
+
+      borderRadius: {
+        '4xl': '2rem',
+      },
+
+      maxWidth: {
+        page: '1504',
+      },
+
+      transitionProperty: {
+        height: 'height',
+      },
+
+      screens,
+
+      keyframes: {
+        heightIn: {
+          from: { height: '0' },
+          // to: { height: 296 },
+          to: { height: 'var(--radix-navigation-menu-viewport-height)' },
+        },
+        heightOut: {
+          from: { height: 'var(--radix-navigation-menu-viewport-height)' },
+          // from: { height: 296 },
+          to: { height: '0' },
+        },
+        slide: {
+          from: {
+            transform: 'translateX(0)',
+          },
+          to: {
+            transform: 'translateX(-100%)',
+          },
+        },
+        slideInFromBottom: {
+          from: {
+            transform: 'translateY(200px)',
+          },
+          to: {
+            transform: 'translateY(0)',
+          },
+        },
+        marquee1: {
+          '0%': { transform: 'translateX(0%)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+        explanationIn: {
+          '0%': { opacity: '0', transform: 'scale(0.7)' },
+          '80%': { opacity: '0.8', transform: 'scale(1.02)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+        explanationOut: {
+          '0%': { opacity: '1', transform: 'scale(1)' },
+          '100%': { opacity: '0', transform: 'scale(0.7)' },
+        },
+        explanationSlide: {
+          '0%': {
+            transform: 'translateY(100px)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateY(0px)',
+            opacity: '1',
+          },
+        },
+        marquee2: {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0%)' },
+        },
+
+        // dialog
+        'overlay-enter': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'overlay-exit': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        'drawer-enter': {
+          from: { opacity: '0', transform: 'translateY(100%)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'drawer-exit': {
+          from: { opacity: '1', transform: 'translateY(0)' },
+          to: { opacity: '0', transform: 'translateY(100%)' },
+        },
+        'dialog-enter': {
+          from: {
+            opacity: '0',
+            transform: 'translate(-50%, -48%) scale(0.96)',
+          },
+          to: {
+            opacity: '1',
+            transform: 'translate(-50%, -50%) scale(1)',
+          },
+        },
+        'dialog-exit': {
+          from: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+          to: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+        },
+      },
+
+      animation: {
+        heightIn: 'heightIn 250ms ease',
+        heightOut: 'heightOut 250ms ease',
+        slide: '45s slide infinite linear',
+        slideInFromBottom: 'slideInFromBottom 0.5s ease',
+        marquee1: 'marquee1 180s linear infinite',
+        marquee2: 'marquee2 180s linear infinite',
+        explanationIn: 'explanationIn 150ms ease',
+        explanationOut: 'explanationIn 150ms ease reverse',
+        explanationSlideUp: 'explanationSlide 180ms ease',
+        explanationSlideDown: 'explanationSlide 180ms ease reverse',
+      },
+
+      backgroundImage: {
+        'gradient-hatching':
+          'repeating-linear-gradient(-75deg, #E7EAEE, #E7EAEE 4px, rgba(161, 171, 188, 0.2) 0px, rgba(161, 171, 188, 0.2) 6px)',
+      },
+    },
+  },
+  plugins: [
+    require('tailwindcss-animate'),
+    // add scrollbar utilities before lands in tailwindcss
+    // @see https://github.com/tailwindlabs/tailwindcss/pull/5732
+    scrollbarWidth(),
+    // scrollbarColor(),
+    // scrollbarGutter(),
+
+    plugin(({ matchUtilities }) => {
+      matchUtilities({
+        perspective: value => ({
+          perspective: value,
+        }),
+      })
+    }),
+  ],
+} satisfies Config
--- a/apps/connector/tsconfig.json
+++ b/apps/connector/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": ["node_modules"],
+  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx", "global.d.ts"],
+  "compilerOptions": {
+    "paths": {
+      "~*": ["./src/*"],
+    },
+    "baseUrl": ".",
+    "lib": ["WebWorker", "dom", "WebWorker.ImportScripts"],
+    "strictNullChecks": true,
+    "strict": true,
+    "target": "ESNext",
+  },
+}
--- a/apps/connector/yarn.lock
+++ b/apps/connector/yarn.lock