feat: add Venly connector to packages (#1660)

* feat: add venly connector

* chore: add venly.md to docs

* Update docs/src/routes/docs/[...4]wallets/venly.md

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* Update packages/venly/README.md

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* Update packages/venly/package.json

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* dynamically import @venly/web3-provider

* add details for VenlyProviderOptions

* environment as optional param

* add VenlyProviderOptions details to package README.md

* simplify VenlyOptions - only clientId required. update documentation to match

* update @venly/web3-provider to latest release

* add environment option with typescript documentation

* add venly to demo-app. update config and core.md for zlib

* update demo clientId. update README. fix issues with switching environment

* Add venly to internal demo and test

* update web3-provider to 3.1.1 which fixes/updates chain switching. Update README with list of supported networks

---------

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Author: David Fu

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -1476,7 +1476,8 @@ module.exports = {
       os: 'os-browserify/browser',
       process: 'process/browser',
       stream: 'stream-browserify',
-      util: 'util'
+      util: 'util',
+      zlib: 'browserify-zlib'
     }
   },
   experiments: {
@@ -1525,7 +1526,8 @@ module.exports = function override(config) {
     process: require.resolve('process/browser'),
     stream: require.resolve('stream-browserify'),
     url: require.resolve('url'),
-    util: require.resolve('util')
+    util: require.resolve('util'),
+    zlib: require.resolve('browserify-zlib')
   })
   config.resolve.fallback = fallback
   config.resolve.alias = {
@@ -1564,7 +1566,7 @@ module.exports = function override(config) {
 
 Add the following dev dependencies:
 
-`yarn add rollup-plugin-polyfill-node crypto-browserify stream-browserify assert -D`
+`yarn add rollup-plugin-polyfill-node crypto-browserify stream-browserify assert browserify-zlib -D`
 
 Then add the following to your `svelte.config.js` file:
 
@@ -1594,7 +1596,8 @@ const config = {
         alias: {
           crypto: 'crypto-browserify',
           stream: 'stream-browserify',
-          assert: 'assert'
+          assert: 'assert',
+          zlib: 'browserify-zlib'
         }
       },
       build: {
@@ -1629,7 +1632,7 @@ Checkout a boilerplate example [here](https://github.com/blocknative/web3-onboar
 
 Add the following dev dependencies:
 
-`yarn add rollup-plugin-polyfill-node crypto-browserify stream-browserify assert -D`
+`yarn add rollup-plugin-polyfill-node crypto-browserify stream-browserify assert browserify-zlib -D`
 
 Then add the following to your `svelte.config.js` file:
 
@@ -1677,7 +1680,8 @@ const config: UserConfig = {
     alias: {
       crypto: 'crypto-browserify',
       stream: 'stream-browserify',
-      assert: 'assert'
+      assert: 'assert',
+      zlib: 'browserify-zlib'
     }
   },
   build: {
@@ -1742,7 +1746,7 @@ Checkout a boilerplate example for Vite-React [here](https://github.com/blocknat
 
 Add the following dev dependencies:
 
-`npm i --save-dev rollup-plugin-polyfill-node crypto-browserify stream-browserify assert`
+`npm i --save-dev rollup-plugin-polyfill-node crypto-browserify stream-browserify assert browserify-zlib`
 
 Then add the following to your `vite.config.js` file:
 
@@ -1764,7 +1768,8 @@ export default {
     alias: {
       crypto: 'crypto-browserify',
       stream: 'stream-browserify',
-      assert: 'assert'
+      assert: 'assert',
+      zlib: 'browserify-zlib'
     }
   },
   build: {

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

@@ -0,0 +1,61 @@
+# Venly
+
+Wallet module for connecting Venly Wallet SDK to web3-onboard. Check out the [Venly Docs](https://docs.venly.io/) for more information.
+## Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/venly
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/venly
+```
+
+  </TabPanel>
+</Tabs>
+
+## Options
+
+```typescript
+type VenlyOptions = {
+  clientId: string
+  environment?: string
+}
+```
+
+`clientId` - The Client ID used to connect with Venly. More information can be found [here](https://docs.venly.io/widget/deep-dive/authentication#client-id).
+`environment` - The environment to which you want to connect, possible values are 'staging' and 'production'. Defaults to 'production'.
+
+**NOTE**: Production environment handles main networks while Staging handles test networks. List of supported networks can be found [here](https://docs.venly.io/api/deep-dive-1/environments-and-networks#blockchain-networks).
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import venlyModule from '@web3-onboard/venly'
+
+// initialize the module with options
+const venly = venlyModule({ 
+  clientId: 'YOUR_CLIENT_ID',
+})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    venly
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```
+
+## Build Environments
+For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)

packages/demo/package.json

@@ -50,6 +50,7 @@
     "@web3-onboard/trezor": "^2.4.2",
     "@web3-onboard/trust": "^2.0.3",
     "@web3-onboard/uauth": "^2.0.4",
+    "@web3-onboard/venly": "^2.0.0-alpha.1",
     "@web3-onboard/walletconnect": "^2.3.8",
     "@web3-onboard/web3auth": "^2.2.2",
     "@web3-onboard/xdefi": "^2.0.3",

packages/demo/src/App.svelte

@@ -29,6 +29,7 @@
   import trustModule from '@web3-onboard/trust'
   import frontierModule from '@web3-onboard/frontier'
   import cedeStoreModule from '@web3-onboard/cede-store'
+  import venlyModule from '@web3-onboard/venly'
   import {
     recoverAddress,
     arrayify,
@@ -179,6 +180,10 @@
   const transactionPreview = transactionPreviewModule({
     requireTransactionApproval: true
   })
+  const venly = venlyModule({
+    clientId: 'blocknative',
+    environment: 'staging'
+  })
 
   const onboard = Onboard({
     wallets: [
@@ -208,7 +213,8 @@
       frontier,
       xdefi,
       frameWallet,
-      cedeStore
+      cedeStore,
+      venly
     ],
     transactionPreview,
     gas,

packages/demo/webpack.config.js

@@ -22,7 +22,8 @@ module.exports = {
       os: 'os-browserify/browser',
       process: 'process/browser',
       stream: 'stream-browserify',
-      util: 'util'
+      util: 'util',
+      zlib: 'browserify-zlib'
     },
     extensions: ['.mjs', '.js', '.svelte'],
     mainFields: ['svelte', 'browser', 'module', 'main']

packages/venly/README.md

@@ -0,0 +1,45 @@
+# @web3-onboard/venly
+
+## Wallet module for connecting Venly SDK to web3-onboard
+See [Venly SDK Docs](https://docs.venly.io/widget/) for complete documentation of Venly usage
+
+### Install
+
+`npm install @web3-onboard/venly`
+
+## Options
+
+```typescript
+type VenlyOptions = {
+  clientId: string
+  environment?: string
+}
+```
+
+`clientId` - The Client ID used to connect with Venly. More information can be found [here](https://docs.venly.io/widget/deep-dive/authentication#client-id).
+`environment` - The environment to which you want to connect, possible values are 'staging' and 'production'. Defaults to 'production'.
+
+**NOTE**: Production environment handles main networks while Staging handles test networks. List of supported networks can be found [here](https://docs.venly.io/api/deep-dive-1/environments-and-networks#blockchain-networks).
+
+## Usage
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import venlyModule from '@web3-onboard/venly'
+
+// initialize the module with options
+const venly = venlyModule({
+  clientId: 'YOUR_CLIENT_ID'
+})
+
+const onboard = Onboard({
+  // ... other Onboard options
+  wallets: [
+    venly
+    //... other wallets
+  ]
+})
+
+const connectedWallets = await onboard.connectWallet()
+console.log(connectedWallets)
+```

packages/venly/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@web3-onboard/venly",
+  "version": "2.0.0-alpha.1",
+  "description": "Venly wallet module for connecting 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",
+    "Web3",
+    "EVM",
+    "dapp",
+    "Multichain",
+    "Wallet",
+    "Transaction",
+    "Provider",
+    "Notifications",
+    "React",
+    "Venly",
+    "Connect Wallet",
+    "Ethereum Hooks",
+    "Blocknative",
+    "Crypto",
+    "Crypto Wallet"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/blocknative/web3-onboard.git",
+    "directory": "packages/venly"
+  },
+  "homepage": "https://onboard.blocknative.com",
+  "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": {
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "@venly/web3-provider": "^3.1.1",
+    "@web3-onboard/common": "^2.3.1"
+  }
+}

packages/venly/src/icon.ts

@@ -0,0 +1,12 @@
+export default `
+  <svg width="100%" height="100%" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="1080" height="1080" fill="url(#paint0_linear)" rx="20%"/>
+    <path d="M834.167 474.367L760.572 502.319C757.478 503.445 754.478 500.443 755.79 497.348L837.823 298.208C839.042 295.206 836.135 292.111 833.135 293.237L677.227 347.829C674.227 348.861 671.789 351.206 670.57 354.207L564.913 620.884C563.6 624.261 566.882 627.638 570.257 626.418L636.257 602.218C639.914 600.904 643.289 604.844 641.32 608.315L544.381 772.936C542.319 776.5 537.069 776.5 535.006 772.936L438.067 608.221C436.098 604.844 439.38 600.811 443.13 602.124L509.131 626.324C512.506 627.544 515.787 624.167 514.475 620.79L408.723 354.207C407.504 351.206 405.16 348.954 402.067 347.829L246.346 293.237C243.252 292.205 240.439 295.206 241.658 298.208L323.597 497.348C324.816 500.35 321.816 503.445 318.815 502.319L245.689 474.367C241.939 472.96 238.564 476.993 240.627 480.464L458.317 841.035C460.474 844.6 464.318 846.757 468.536 846.757H611.226C615.351 846.757 619.288 844.6 621.445 841.035L839.51 480.464C841.292 476.993 837.917 472.96 834.167 474.367Z" fill="white"/>
+    <defs>
+      <linearGradient id="paint0_linear" x1="435.874" y1="-3.23691e-05" x2="1146.57" y2="178.471" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#7735E8"/>
+        <stop offset="1" stop-color="#C62CF1"/>
+      </linearGradient>
+    </defs>
+  </svg>
+`

packages/venly/src/index.ts

@@ -0,0 +1,39 @@
+import { WalletInit } from '@web3-onboard/common'
+
+interface VenlyOptions {
+  /**  @property {string} clientId - The Client ID used to connect with Venly. More information at https://docs.venly.io/widget/deep-dive/authentication#client-id */
+  clientId: string
+  /**  @property {string} environment - The environment to which you want to connect, possible values are 'staging' and 'production'. Defaults to 'production' */
+  environment?: string
+}
+
+function venly(options: VenlyOptions): WalletInit {
+  return () => {
+    return {
+      label: 'Venly',
+      getIcon: async () => (await import('./icon.js')).default,
+      getInterface: async ({ chains }) => {
+        const { VenlyProvider, SECRET_TYPES } = await import('@venly/web3-provider')
+
+        const chainId = +chains[0].id
+        const chain = SECRET_TYPES[chainId]
+        if (!chain) 
+          throw new Error('Chain not supported')
+
+        const providerOptions = { ...options, secretType: chain.secretType }
+        if (!options.environment) 
+          providerOptions.environment = chain.env
+        
+        const instance = new VenlyProvider()
+        const provider = await instance.createProvider(providerOptions)
+
+        return {
+          provider,
+          instance
+        }
+      }
+    }
+  }
+}
+
+export default venly

packages/venly/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "declarationDir": "dist",
+    "paths": {
+      "*": ["./src/*", "./node_modules/*"]
+    },
+    "typeRoots": ["node_modules/@types"],
+  }
+}