Add Frontier Wallet Package (#1454)

* Add Frontier Wallet Package

* frontier wallet sdk added

* logo minor UI update

* feedback updates, added docs file & removed frontier from onboard.js

* Update readme

* Cleanup package.json

* Revert changes for testing locally

Co-authored-by: Adam Carpenter <[email protected]>

Author: punithbm

.circleci/config.yml

@@ -243,6 +243,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/trezor
     steps:
       - node-build-steps
+  build-frontier:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/frontier
+    steps:
+      - node-build-steps
   build-walletconnect:
     docker:
       - image: cimg/node:16.13.1
@@ -425,6 +431,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/trezor
     steps:
       - node-staging-build-steps
+  build-staging-frontier:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/frontier
+    steps:
+      - node-staging-build-steps
   build-staging-walletconnect:
     docker:
       - image: cimg/node:16.13.1
@@ -609,6 +621,12 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-trezor:
           <<: *deploy_staging_filters
+  frontier:
+    jobs:
+      - build-frontier:
+          <<: *deploy_production_filters
+      - build-staging-frontier:
+          <<: *deploy_staging_filters
   walletconnect:
     jobs:
       - build-walletconnect:

.github/ISSUE_TEMPLATE/BUG.yml

@@ -56,6 +56,7 @@ body:
         - "@web3-onboard/react"
         - "@web3-onboard/torus"
         - "@web3-onboard/trezor"
+        - "@web3-onboard/frontier"
         - "@web3-onboard/vue"
         - "@web3-onboard/walletconnect"
         - "@web3-onboard/walletlink"

README.md

@@ -99,6 +99,7 @@ For full documentation, check out the README.md for each package or the [docs pa
 - [TallyHo](packages/tallyho/README.md)
 - [Enkrypt](packages/enkrypt/README.md)
 - [Unstoppable Domains](packages/uauth/README.md)
+- [Frontier](packages/frontier/README.md)
 
 **Hardware Wallets**
 

docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md

@@ -22,6 +22,7 @@ import web3authModule from '@web3-onboard/web3auth'
 import dcentModule from '@web3-onboard/dcent'
 import sequenceModule from '@web3-onboard/sequence'
 import tallyHoModule from '@web3-onboard/tallyho'
+import frontierModule from '@web3-onboard/frontier'
 
 const INFURA_KEY = ''
 
@@ -44,6 +45,7 @@ const keepkey = keepkeyModule()
 const gnosis = gnosisModule()
 const sequence = sequenceModule()
 const tally = tallyModule()
+const frontier = frontierModule()
 
 const trezorOptions = {
   email: '[email protected]',
@@ -63,6 +65,7 @@ const wallets = [
   keepkey,
   sequence,
   injected,
+  frontier,
   tally,
   ledger,
   coinbase,

docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md

@@ -21,6 +21,7 @@ import web3authModule from '@web3-onboard/web3auth'
 import dcentModule from '@web3-onboard/dcent'
 import sequenceModule from '@web3-onboard/sequence'
 import tallyHoModule from '@web3-onboard/tallyho'
+import frontierModule from '@web3-onboard/frontier'
 
 const INFURA_KEY = ''
 
@@ -43,6 +44,7 @@ const keepkey = keepkeyModule()
 const gnosis = gnosisModule()
 const sequence = sequenceModule()
 const tally = tallyModule()
+const frontier = frontierModule()
 
 const trezorOptions = {
   email: '[email protected]',
@@ -66,6 +68,7 @@ const wallets = [
   ledger,
   coinbase,
   dcent,
+  frontier,
   trezor,
   walletConnect,
   enkrypt,

docs/src/lib/services/onboard.js

@@ -70,7 +70,7 @@ const intiOnboard = async () => {
       'openid wallet email:optional humanity_check:optional profile:optional social:optional'
   }
   const uauth = uauthModule(uauthOptions)
-  
+
   const magic = magicModule({
     apiKey: 'pk_live_02207D744E81C2BA'
   })

docs/src/routes/docs/[...4]wallets/frontier.md

@@ -0,0 +1,37 @@
+# Frontier
+
+[Frontier](https://frontier.xyz/) is a Crypto, DeFi, and NFT wallet browser extension where you can send, store & invest in crypto assets across multiple chains. Explore DeFi in multiple ecosystems, collect and display NFTs, and browse all of Web3 from a single place.
+For more information on Frontier, please refer to the [Frontier support](https://help.frontier.xyz/).
+
+### Install
+
+```sh copy
+yarn add @web3-onboard/core @web3-onboard/frontier
+```
+
+or
+
+```sh copy
+npm install @web3-onboard/core @web3-onboard/frontier
+```
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import frontierModule from '@web3-onboard/frontier'
+
+// initialize the module
+const frontier = frontierModule()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    frontier
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/demo/package.json

@@ -27,10 +27,11 @@
     "@web3-onboard/coinbase": "^2.1.4",
     "@web3-onboard/transaction-preview": "^2.0.0",
     "@web3-onboard/dcent": "^2.2.2",
+    "@web3-onboard/frontier": "^2.0.0-alpha.1",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.3",
     "@web3-onboard/gnosis": "^2.1.5",
-    "@web3-onboard/injected-wallets": "^2.6.0-alpha.2",
+    "@web3-onboard/injected-wallets": "^2.6.0-alpha.3",
     "@web3-onboard/keepkey": "^2.3.2",
     "@web3-onboard/keystone": "^2.3.2",
     "@web3-onboard/ledger": "^2.4.1-alpha.1",

packages/demo/src/App.svelte

@@ -23,6 +23,7 @@
   import mewWalletModule from '@web3-onboard/mew-wallet'
   import uauthModule from '@web3-onboard/uauth'
   import phantomModule from '@web3-onboard/phantom'
+  import frontierModule from '@web3-onboard/frontier'
   import {
     recoverAddress,
     arrayify,
@@ -127,6 +128,7 @@
   const tallyho = tallyHoModule()
   const zeal = zealModule()
   const phantom = phantomModule()
+  const frontier = frontierModule()
 
   const trezorOptions = {
     email: '[email protected]',
@@ -158,8 +160,6 @@
   const onboard = Onboard({
     wallets: [
       injected,
-      zeal,
-      web3auth,
       ledger,
       trezor,
       walletConnect,
@@ -177,6 +177,9 @@
       sequence,
       tallyho,
       uauth,
+      web3auth,
+      zeal,
+      frontier,
       phantom
     ],
     transactionPreview,

packages/frontier/README.md

@@ -0,0 +1,33 @@
+# @web3-onboard/frontier
+
+## Wallet module for connecting Frontier Wallet through web3-onboard
+
+Frontier Wallet SDK wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.
+
+### Install
+
+**NPM**
+`npm i @web3-onboard/core @web3-onboard/frontier`
+
+**Yarn**
+`yarn add @web3-onboard/core @web3-onboard/frontier`
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import frontierModule from '@web3-onboard/frontier'
+
+const frontier = frontierModule()
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    frontier
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```