From 2ba8d26dfb76a23bc42e4ac1161e4b909969b3eb Mon Sep 17 00:00:00 2001 From: goosewobbler <432005+goosewobbler@users.noreply.github.com> Date: Wed, 10 May 2023 17:31:59 +0100 Subject: [PATCH] Add frame connector (#1700) --- .circleci/config.yml | 19 ++++- README.md | 1 + docs/src/lib/services/onboard.js | 3 + .../docs/[...1]overview/[...1]introduction.md | 3 +- docs/src/routes/docs/[...4]wallets/frame.md | 81 +++++++++++++++++++ packages/demo/package.json | 1 + packages/demo/src/App.svelte | 3 + packages/frame/README.md | 74 +++++++++++++++++ packages/frame/package.json | 65 +++++++++++++++ packages/frame/src/icon.ts | 4 + packages/frame/src/index.ts | 46 +++++++++++ packages/frame/tsconfig.json | 15 ++++ packages/injected/src/icons/frame.ts | 8 +- yarn.lock | 31 ++++++- 14 files changed, 347 insertions(+), 7 deletions(-) create mode 100644 docs/src/routes/docs/[...4]wallets/frame.md create mode 100644 packages/frame/README.md create mode 100644 packages/frame/package.json create mode 100644 packages/frame/src/icon.ts create mode 100644 packages/frame/src/index.ts create mode 100644 packages/frame/tsconfig.json diff --git a/.circleci/config.yml b/.circleci/config.yml index ab910486b..f4113427e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -197,6 +197,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/injected steps: - node-build-steps + build-frame: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frame + steps: + - node-build-steps build-keepkey: docker: - image: cimg/node:16.13.1 @@ -421,6 +427,12 @@ jobs: working_directory: ~/web3-onboard-monorepo/packages/injected steps: - node-staging-build-steps + build-staging-frame: + docker: + - image: cimg/node:16.13.1 + working_directory: ~/web3-onboard-monorepo/packages/frame + steps: + - node-staging-build-steps build-staging-keepkey: docker: - image: cimg/node:16.13.1 @@ -647,6 +659,12 @@ workflows: <<: *deploy_production_filters - build-staging-injected: <<: *deploy_staging_filters + frame: + jobs: + - build-frame: + <<: *deploy_production_filters + - build-staging-frame: + <<: *deploy_staging_filters keepkey: jobs: - build-keepkey: @@ -839,4 +857,3 @@ workflows: <<: *deploy_production_filters - build-staging-cede-store: <<: *deploy_staging_filters - diff --git a/README.md b/README.md index c5fa4c276..df2ef767d 100644 --- a/README.md +++ b/README.md @@ -103,6 +103,7 @@ For full documentation, check out the README.md for each package or the [docs pa - [Frontier](packages/frontier/README.md) - [XDEFI](packages/xdefi/README.md) - [Infinity Wallet](packages/infinity-wallet/README.md) +- [Frame](packages/frame/README.md) **Hardware Wallets** diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index d3844e5a5..8a9923d4e 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -51,6 +51,7 @@ const intiOnboard = async (theme) => { const { default: uauthModule } = await import('@web3-onboard/uauth') const { default: trustModule } = await import('@web3-onboard/trust') const { default: xdefiModule } = await import('@web3-onboard/xdefi') + const { default: frameModule } = await import('@web3-onboard/frame') const INFURA_ID = '8b60d52405694345a99bcb82e722e0af' const injected = injectedModule() @@ -76,6 +77,7 @@ const intiOnboard = async (theme) => { const torus = torusModule() const trust = trustModule() const xdefi = xdefiModule() + const frame = frameModule() const cede = cedeModule() const portis = portisModule({ @@ -132,6 +134,7 @@ const intiOnboard = async (theme) => { keystone, keepkey, portis, + frame, infinityWallet ], chains: [ diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md index 2dc04d99b..643132a1c 100644 --- a/docs/src/routes/docs/[...1]overview/[...1]introduction.md +++ b/docs/src/routes/docs/[...1]overview/[...1]introduction.md @@ -35,7 +35,7 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../docs/modules/core.md#options). -- Ethereum +- Ethereum - Polygon - Base Goerli - Goerli @@ -156,6 +156,7 @@ We recommend you add the [Core Repo](../../docs/modules/core.md#install) and con - [MEW](../../docs/wallets/mewwallet.md#install) - [Portis](../../docs/wallets/portis.md#install) - [Web3Auth](../../docs/wallets/web3auth.md#install) +- [Frame](../../docs/wallets/frame.md#install) **Hardware Wallets** diff --git a/docs/src/routes/docs/[...4]wallets/frame.md b/docs/src/routes/docs/[...4]wallets/frame.md new file mode 100644 index 000000000..e3e242c56 --- /dev/null +++ b/docs/src/routes/docs/[...4]wallets/frame.md @@ -0,0 +1,81 @@ +# Frame + +[Frame](https://frame.sh/) is a privacy focused EVM desktop wallet, enabling a secure system-wide interface to your chains and web3 accounts. + +### Install + +```sh copy +yarn add @web3-onboard/core @web3-onboard/frame +``` + +or + +```sh copy +npm install @web3-onboard/core @web3-onboard/frame +``` + +## Usage + +```typescript +import Onboard from '@web3-onboard/core' +import frameModule from '@web3-onboard/frame' + +// initialize the module +const frame = frameModule() + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + frame + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +### Filtering Platforms + +You may decide that on certain platforms you do not want to display this wallet as a selectable option. To do that you can use the `filter` init option which is an array of platforms that you would like this wallet to **not** be displayed to the end user: + +```typescript +import Onboard from '@web3-onboard/core' +import frameModule from '@web3-onboard/frame' + +const frame = frameModule({ filter: ['iOS', 'Android'] }) + +const onboard = Onboard({ + // ... other Onboard options + wallets: [ + frame + //... other wallets + ] +}) + +const connectedWallets = await onboard.connectWallet() +console.log(connectedWallets) +``` + +The following is a list of the platforms that can be filtered: + +```typescript +type Platform = + | 'Windows Phone' + | 'Windows' + | 'macOS' + | 'iOS' + | 'Android' + | 'Linux' + | 'Chrome OS' + | 'Android Browser' + | 'Chrome' + | 'Chromium' + | 'Firefox' + | 'Microsoft Edge' + | 'Opera' + | 'Safari' + | 'desktop' + | 'mobile' + | 'tablet' +``` diff --git a/packages/demo/package.json b/packages/demo/package.json index 49f6c2580..91668b835 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -27,6 +27,7 @@ "@web3-onboard/coinbase": "^2.2.3-alpha.2", "@web3-onboard/transaction-preview": "^2.0.7-alpha.2", "@web3-onboard/dcent": "^2.2.6-alpha.2", + "@web3-onboard/frame": "2.21.2-alpha.1", "@web3-onboard/frontier": "^2.0.3-alpha.2", "@web3-onboard/fortmatic": "^2.0.18-alpha.2", "@web3-onboard/gas": "^2.1.7-alpha.2", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index e0374a864..4036923ba 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -1,6 +1,7 @@