diff --git a/.circleci/config.yml b/.circleci/config.yml index 3676a8dc5..41f8d4262 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.github/ISSUE_TEMPLATE/BUG.yml b/.github/ISSUE_TEMPLATE/BUG.yml index 0bdee4011..0e36ced02 100644 --- a/.github/ISSUE_TEMPLATE/BUG.yml +++ b/.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" diff --git a/README.md b/README.md index f26bf5333..5d0855d87 100644 --- a/README.md +++ b/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** diff --git a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md index be9c1d57d..e0b56147e 100644 --- a/docs/src/lib/components/examples/connect-wallet/ReactConnectWallet.md +++ b/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: 'test@test.com', @@ -63,6 +65,7 @@ const wallets = [ keepkey, sequence, injected, + frontier, tally, ledger, coinbase, diff --git a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md b/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md index 1c2179345..18f81c427 100644 --- a/docs/src/lib/components/examples/connect-wallet/SvelteConnectWallet.md +++ b/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: 'test@test.com', @@ -66,6 +68,7 @@ const wallets = [ ledger, coinbase, dcent, + frontier, trezor, walletConnect, enkrypt, diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index 55ace93a8..bf5486c1c 100644 --- a/docs/src/lib/services/onboard.js +++ b/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' }) diff --git a/docs/src/routes/docs/[...4]wallets/frontier.md b/docs/src/routes/docs/[...4]wallets/frontier.md new file mode 100644 index 000000000..181bbc345 --- /dev/null +++ b/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) +``` diff --git a/packages/demo/package.json b/packages/demo/package.json index 13586ec75..265c77d1b 100644 --- a/packages/demo/package.json +++ b/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", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index a93c7c405..5bc289c32 100644 --- a/packages/demo/src/App.svelte +++ b/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: 'test@test.com', @@ -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, diff --git a/packages/frontier/README.md b/packages/frontier/README.md new file mode 100644 index 000000000..1e53867e7 --- /dev/null +++ b/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) +``` \ No newline at end of file diff --git a/packages/frontier/package.json b/packages/frontier/package.json new file mode 100644 index 000000000..564c9c849 --- /dev/null +++ b/packages/frontier/package.json @@ -0,0 +1,64 @@ +{ + "name": "@web3-onboard/frontier", + "version": "2.0.0-alpha.1", + "description": "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.", + "keywords": [ + "Ethereum", + "Web3", + "EVM", + "dapp", + "Multichain", + "Wallet", + "Transaction", + "Provider", + "Hardware Wallet", + "Notifications", + "React", + "Svelte", + "Vue", + "Next", + "Nuxt", + "MetaMask", + "Coinbase", + "WalletConnect", + "Ledger", + "Trezor", + "Connect Wallet", + "Ethereum Hooks", + "Blocknative", + "Mempool", + "Injected Wallet", + "Crypto", + "Crypto Wallet", + "Onboard", + "Frontier" + ], + "repository": { + "type": "git", + "url": "https://github.com/blocknative/web3-onboard.git", + "directory": "packages/frontier" + }, + "homepage": "https://www.blocknative.com/onboard", + "bugs": "https://github.com/blocknative/web3-onboard/issues", + "module": "dist/index.js", + "browser": "dist/index.js", + "main": "dist/index.js", + "type": "module", + "typings": "dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "tsc", + "dev": "tsc -w", + "type-check": "tsc --noEmit" + }, + "license": "MIT", + "devDependencies": { + "@types/node": "^17.0.21", + "typescript": "^4.5.5" + }, + "dependencies": { + "@web3-onboard/common": "^2.2.3" + } +} \ No newline at end of file diff --git a/packages/frontier/src/icon.ts b/packages/frontier/src/icon.ts new file mode 100644 index 000000000..4b9fc1662 --- /dev/null +++ b/packages/frontier/src/icon.ts @@ -0,0 +1,6 @@ +export default ` + + + + +` diff --git a/packages/frontier/src/index.ts b/packages/frontier/src/index.ts new file mode 100644 index 000000000..c4d11239c --- /dev/null +++ b/packages/frontier/src/index.ts @@ -0,0 +1,37 @@ +import type { WalletInit, EIP1193Provider } from '@web3-onboard/common' +import { CustomWindow } from './types.js' +declare const window: CustomWindow + +function frontier(): WalletInit { + if (typeof window === 'undefined') return () => null + + return () => { + return { + label: 'Frontier', + getIcon: async () => (await import('./icon.js')).default, + getInterface: async () => { + const { createEIP1193Provider } = await import('@web3-onboard/common') + const ethereumInjectionExists = window.hasOwnProperty('ethereum') + + let provider: EIP1193Provider + + // check if frontier is injected into window.ethereum + if (ethereumInjectionExists && window['ethereum'].isFrontier) { + provider = createEIP1193Provider(window['ethereum']) + } else if (window['frontier']) { + // directly use the window.frontier injection + provider = createEIP1193Provider(window['frontier']['ethereum']) + } else { + // frontier extension is not installed + // send user to install page + window.open('https://frontier.xyz/browser-extension', '_blank') + throw new Error('Please Install Frontier to use this wallet') + } + + return { provider } + } + } + } +} + +export default frontier diff --git a/packages/frontier/src/types.ts b/packages/frontier/src/types.ts new file mode 100644 index 000000000..51809da5c --- /dev/null +++ b/packages/frontier/src/types.ts @@ -0,0 +1,9 @@ +import { EIP1193Provider } from '@web3-onboard/common' +export interface CustomWindow extends Window { + ethereum: EIP1193Provider & { + isFrontier?: boolean + } + frontier: { + ethereum: EIP1193Provider + } +} diff --git a/packages/frontier/tsconfig.json b/packages/frontier/tsconfig.json new file mode 100644 index 000000000..08c7ab634 --- /dev/null +++ b/packages/frontier/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"], + + "compilerOptions": { + "outDir": "dist", + "rootDir": "src", + "declaration": true, + "declarationDir": "dist", + "paths": { + "*": ["./src/*", "./node_modules/*"] + }, + "typeRoots": ["node_modules/@types"] + } +} diff --git a/packages/injected/package.json b/packages/injected/package.json index decb9aeea..9f86b1781 100644 --- a/packages/injected/package.json +++ b/packages/injected/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/injected-wallets", - "version": "2.6.0-alpha.2", + "version": "2.6.0-alpha.3", "description": "Injected wallet module for connecting browser extension and mobile wallets to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised 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.", "keywords": [ "Ethereum", diff --git a/packages/injected/src/constants.ts b/packages/injected/src/constants.ts index 314549c12..7cdb119ab 100644 --- a/packages/injected/src/constants.ts +++ b/packages/injected/src/constants.ts @@ -17,5 +17,6 @@ export const WALLET_NAMES: { [key: string]: string } = { sequence: 'Sequence', core: 'Core', enkrypt: 'Enkrypt', + frontier: 'Frontier', zerion: 'Zerion' } diff --git a/packages/injected/src/icons/frontier.ts b/packages/injected/src/icons/frontier.ts new file mode 100644 index 000000000..cfda735ff --- /dev/null +++ b/packages/injected/src/icons/frontier.ts @@ -0,0 +1,5 @@ +export default ` + + + +` diff --git a/packages/injected/src/types.ts b/packages/injected/src/types.ts index cb479c355..cd5d12726 100644 --- a/packages/injected/src/types.ts +++ b/packages/injected/src/types.ts @@ -22,6 +22,7 @@ export enum ProviderIdentityFlag { Detected = 'request', Dcent = 'isDcentWallet', Exodus = 'isExodus', + Frontier = 'isFrontier', Frame = 'isFrame', HuobiWallet = 'isHbWallet', HyperPay = 'isHyperPay', @@ -68,6 +69,7 @@ export enum ProviderLabel { Detected = 'Detected Wallet', Exodus = 'Exodus', Frame = 'Frame', + Frontier = 'Frontier', HuobiWallet = 'Huobi Wallet', HyperPay = 'HyperPay', ImToken = 'imToken', @@ -121,6 +123,7 @@ export enum InjectedNameSpace { Bitski = 'Bitski', Enkrypt = 'enkrypt', Zeal = 'zeal', + Frontier = 'frontier', Phantom = 'phantom' } @@ -147,6 +150,9 @@ export interface CustomWindow extends Window { ethereum: InjectedProvider } } + frontier: { + ethereum: InjectedProvider + } phantom: { ethereum: InjectedProvider } diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts index ae5c2f5be..db90597d6 100644 --- a/packages/injected/src/wallets.ts +++ b/packages/injected/src/wallets.ts @@ -74,6 +74,20 @@ const exodus: InjectedWalletModule = { platforms: ['all'] } +const frontier: InjectedWalletModule = { + label: ProviderLabel.Frontier, + injectedNamespace: InjectedNameSpace.Frontier, + checkProviderIdentity: ({ provider }) => + !!provider && + !!provider['ethereum'] && + !!provider['ethereum'][ProviderIdentityFlag.Frontier], + getIcon: async () => (await import('./icons/frontier.js')).default, + getInterface: async () => ({ + provider: createEIP1193Provider(window.frontier.ethereum) + }), + platforms: ['all'] +} + const brave: InjectedWalletModule = { label: ProviderLabel.Brave, injectedNamespace: InjectedNameSpace.Ethereum, @@ -668,6 +682,7 @@ const phantom: InjectedWalletModule = { const wallets = [ zeal, exodus, + frontier, metamask, binance, coinbase,