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>
This commit is contained in:
Felicio Mununga
GitHub
parent
273db4ed9a
commit
006d57f7d1
|
|
@ -14,6 +14,12 @@ This monorepo contains packages for building web applications in the Status ecos
|
||||||
| [`@status-im/colors`](./packages/colors) | [](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/colors`](./packages/colors) | [](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. |
|
| [`@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
|
## Prerequisites
|
||||||
|
|
||||||
Required:
|
Required:
|
||||||
|
|
|
||||||
|
|
@ -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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
@ -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/
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"tailwindConfig": "./tailwind.config.ts",
|
||||||
|
"endOfLine": "auto"
|
||||||
|
}
|
||||||
|
|
@ -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/(.*)$',
|
||||||
|
'',
|
||||||
|
'^~(.*)$',
|
||||||
|
'',
|
||||||
|
'^[./]',
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
@ -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() }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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.
|
||||||
|
|
@ -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.
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
import type { Provider } from './src/contents/provider'
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
ethereum: Provider
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'tailwindcss/nesting': {},
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
})
|
||||||
|
|
@ -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 }
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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'>
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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 }
|
||||||
|
|
@ -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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter';
|
||||||
|
src: url(data-base64:../../assets/fonts/Inter.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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]
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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",
|
||||||
|
},
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue