From d46a9449cf6398ba0f5e120a9cabd1b565218149 Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Wed, 21 Jul 2021 00:39:22 +0300 Subject: [PATCH] move providerOptions to plugin --- .env.example | 2 + composables/useWeb3.ts | 15 ++---- nuxt.config.js | 8 ++- package.json | 1 + plugins/web3modal.js | 62 ++++++++++++++++++++++ yarn.lock | 115 +++++++++++++++++++++++++++++++++++++---- 6 files changed, 182 insertions(+), 21 deletions(-) create mode 100644 .env.example create mode 100644 plugins/web3modal.js diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..56d4917 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +INFURA_ID= +PORTIS_ID= \ No newline at end of file diff --git a/composables/useWeb3.ts b/composables/useWeb3.ts index 3322c0e..2e218d6 100644 --- a/composables/useWeb3.ts +++ b/composables/useWeb3.ts @@ -1,25 +1,21 @@ import { onMounted, ref } from "@nuxtjs/composition-api"; import Web3 from "web3"; import Web3Modal from "web3modal"; -import WalletConnectProvider from "@walletconnect/web3-provider"; let web3Modal: Web3Modal; let web3Provider: any; -const providerOptions = { - walletconnect: { - package: WalletConnectProvider, - options: { - infuraId: "4a22c748450749e49ca8124355fff52d" - } - } -}; +let providerOptions = {}; const active = ref(false); const chainId = ref(); const account = ref(); const web3 = ref(); +export function setProviders(providers: any) { + providerOptions = providers; +} + export function useWeb3() { onMounted(async () => { if (web3Modal) { @@ -60,7 +56,6 @@ export function useWeb3() { if (typeof web3.value.currentProvider.disconnect === "function") { //@ts-ignore web3.value.currentProvider.disconnect(); - console.log("e"); } } web3Modal.clearCachedProvider(); diff --git a/nuxt.config.js b/nuxt.config.js index e8092f2..faa89e8 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -23,9 +23,15 @@ export default { css: [ ], + publicRuntimeConfig: { + INFURA_ID: process.env.INFURA_ID, + PORTIS_ID: process.env.PORTIS_ID, + }, + // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [ - "~/plugins/v-click-outside.js" + "~/plugins/v-click-outside.js", + "~/plugins/web3modal.js", ], // Auto import components: https://go.nuxtjs.dev/config-components diff --git a/package.json b/package.json index f00810f..56f57da 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@nuxtjs/composition-api": "^0.24.7", + "@portis/web3": "^4.0.5", "@tailwindcss/forms": "^0.3.3", "@vueuse/core": "^5.1.4", "@walletconnect/web3-provider": "^1.4.1", diff --git a/plugins/web3modal.js b/plugins/web3modal.js new file mode 100644 index 0000000..5db2d50 --- /dev/null +++ b/plugins/web3modal.js @@ -0,0 +1,62 @@ +import WalletConnectProvider from "@walletconnect/web3-provider"; +import { setProviders } from "~/composables/useWeb3" +import WalletLink from 'walletlink' +import Portis from '@portis/web3' +import SVGcoinbase from '~/assets/coinbase.svg' + +export default ({ $config }) => { + setProviders({ + walletconnect: { + package: WalletConnectProvider, + options: { + infuraId: $config.INFURA_ID, + rpc: { + 137: 'https://rpc-mainnet.maticvigil.com', + }, + }, + }, + portis: { + package: Portis, + options: { + id: $config.PORTIS_ID, + }, + }, + 'custom-walletlink': { + display: { + logo: SVGcoinbase, + name: 'Coinbase Wallet', + description: 'Scan with Coinbase Wallet to connect', + }, + package: WalletLink, + options: { + infuraId: $config.INFURA_ID, + }, + connector: async (ProviderPackage, options) => { + const ETH_JSONRPC_URL = `https://mainnet.infura.io/v3/${options.infuraId}` + const CHAIN_ID = 1 + + // Initialize WalletLink + const walletLink = new ProviderPackage({ + appName: 'Instadapp', + appLogoUrl: 'https://raw.githubusercontent.com/InstaDApp/brand/master/instadapp%20logo%20only%20filled.svg', + darkMode: false, + }) + + // Initialize a Web3 Provider object + const provider = await walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID) + await provider + .enable() + .then((accounts) => { + // eslint-disable-next-line no-console + console.log('Connected to Coinbase Wallet:', accounts[0]) + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.error(err) + throw err + }) + return provider + }, + }, + }); +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3358257..e1c0101 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1641,6 +1641,16 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23" integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA== +"@portis/web3@^4.0.5": + version "4.0.5" + resolved "https://registry.yarnpkg.com/@portis/web3/-/web3-4.0.5.tgz#7931ac129c2ba7e75a8c451434fc5765bed1a5fe" + integrity sha512-H4spuHI4gDILHS/SjznTBn4t0/qE+UgYc7yi6/kX2oSFe8G12F0xiON7orkx7vpU+8tI9rf4VNe/Gt1fyeDgNw== + dependencies: + ethereumjs-util "5.2.0" + penpal "3.0.7" + pocket-js-core "0.0.3" + web3-provider-engine "16.0.1" + "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -2778,6 +2788,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== +axios@^0.18.0: + version "0.18.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3" + integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g== + dependencies: + follow-redirects "1.5.10" + is-buffer "^2.0.2" + babel-loader@^8.2.2: version "8.2.2" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81" @@ -2903,13 +2921,20 @@ bind-decorator@^1.0.11: resolved "https://registry.yarnpkg.com/bind-decorator/-/bind-decorator-1.0.11.tgz#e41bc06a1f65dd9cec476c91c5daf3978488252f" integrity sha1-5BvAah9l3ZzsR2yRxdrzl4SIJS8= -bindings@^1.5.0: +bindings@^1.2.1, bindings@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df" integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ== dependencies: file-uri-to-path "1.0.0" +bip66@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/bip66/-/bip66-1.1.5.tgz#01fa8748785ca70955d5011217d1b3139969ca22" + integrity sha1-AfqHSHhcpwlV1QESF9GzE5lpyiI= + dependencies: + safe-buffer "^5.0.1" + blakejs@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.1.1.tgz#bf313053978b2cd4c444a48795710be05c785702" @@ -3011,7 +3036,7 @@ brorand@^1.0.1, brorand@^1.1.0: resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f" integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8= -browserify-aes@^1.0.0, browserify-aes@^1.0.4, browserify-aes@^1.2.0: +browserify-aes@^1.0.0, browserify-aes@^1.0.4, browserify-aes@^1.0.6, browserify-aes@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA== @@ -4233,6 +4258,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3: dependencies: ms "2.0.0" +debug@=3.1.0, debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^3.1.0, debug@^3.1.1: version "3.2.7" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a" @@ -4247,13 +4279,6 @@ debug@^4.1.0, debug@^4.1.1: dependencies: ms "2.1.2" -debug@~3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" - integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== - dependencies: - ms "2.0.0" - decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -4540,6 +4565,15 @@ dotenv@^9.0.2: resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-9.0.2.tgz#dacc20160935a37dea6364aa1bef819fb9b6ab05" integrity sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg== +drbg.js@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/drbg.js/-/drbg.js-1.0.1.tgz#3e36b6c42b37043823cdbc332d58f31e2445480b" + integrity sha1-Pja2xCs3BDgjzbwzLVjzHiRFSAs= + dependencies: + browserify-aes "^1.0.6" + create-hash "^1.1.2" + create-hmac "^1.1.4" + dsa-connect@^0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/dsa-connect/-/dsa-connect-0.4.2.tgz#1fb200eb3a93d260acada2cdbe8d5ebb71e3ba95" @@ -4997,6 +5031,19 @@ ethereumjs-tx@^2.1.1: ethereumjs-common "^1.5.0" ethereumjs-util "^6.0.0" +ethereumjs-util@5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.2.0.tgz#3e0c0d1741471acf1036052d048623dee54ad642" + integrity sha512-CJAKdI0wgMbQFLlLRtZKGcy/L6pzVRgelIZqRqNbuVFM3K9VEnyfbcvz0ncWMRNCe4kaHWjwRYQcYMucmwsnWA== + dependencies: + bn.js "^4.11.0" + create-hash "^1.1.2" + ethjs-util "^0.1.3" + keccak "^1.0.2" + rlp "^2.0.0" + safe-buffer "^5.1.1" + secp256k1 "^3.0.1" + ethereumjs-util@^5.0.0, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereumjs-util@^5.1.5: version "5.2.1" resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.2.1.tgz#a833f0e5fca7e5b361384dc76301a721f537bf65" @@ -5391,6 +5438,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -6344,6 +6398,11 @@ is-buffer@^1.1.5: resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== +is-buffer@^2.0.2: + version "2.0.5" + resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191" + integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ== + is-callable@^1.1.4, is-callable@^1.2.3: version "1.2.3" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e" @@ -6810,6 +6869,16 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +keccak@^1.0.2: + version "1.4.0" + resolved "https://registry.yarnpkg.com/keccak/-/keccak-1.4.0.tgz#572f8a6dbee8e7b3aa421550f9e6408ca2186f80" + integrity sha512-eZVaCpblK5formjPjeTBik7TAg+pqnDrMHIffSvi9Lh7PQgM1+hSzakUeZFCk9DVVG0dacZJuaz2ntwlzZUIBw== + dependencies: + bindings "^1.2.1" + inherits "^2.0.3" + nan "^2.2.1" + safe-buffer "^5.1.0" + keccak@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.1.tgz#ae30a0e94dbe43414f741375cff6d64c8bea0bff" @@ -7629,7 +7698,7 @@ mute-stream@0.0.8: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== -nan@^2.12.1: +nan@^2.12.1, nan@^2.14.0, nan@^2.2.1: version "2.14.2" resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19" integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ== @@ -8279,6 +8348,11 @@ pbkdf2@^3.0.17, pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" +penpal@3.0.7: + version "3.0.7" + resolved "https://registry.yarnpkg.com/penpal/-/penpal-3.0.7.tgz#d252711ed93b30f1d867eb82342785b3a95f5f75" + integrity sha512-WSXiq5HnEvzvY05SHhaXcsviUmCvh4Ze8AiIZzvmdzaaYAAx4rx8c6Xq6+MaVDG/Nfve3VmGD8HyRP3CkPvPbQ== + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" @@ -8335,6 +8409,13 @@ pnp-webpack-plugin@^1.6.4: dependencies: ts-pnp "^1.1.6" +pocket-js-core@0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/pocket-js-core/-/pocket-js-core-0.0.3.tgz#1ab278b9a6a5775e2bdc3c2c2e218057774061e4" + integrity sha512-OUTEvEVutdjLT6YyldvAlSebpBueUUWg2XKxGNt5u3QqrmLpBOOBmdDnGMNJ+lEwXtko+JqgwFq+HTi4g1QDVg== + dependencies: + axios "^0.18.0" + portfinder@^1.0.26: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -9924,6 +10005,20 @@ scule@^0.2.1: resolved "https://registry.yarnpkg.com/scule/-/scule-0.2.1.tgz#0c1dc847b18e07219ae9a3832f2f83224e2079dc" integrity sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg== +secp256k1@^3.0.1: + version "3.8.0" + resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.8.0.tgz#28f59f4b01dbee9575f56a47034b7d2e3b3b352d" + integrity sha512-k5ke5avRZbtl9Tqx/SA7CbY3NF6Ro+Sj9cZxezFzuBlLDmyqPiL8hJJ+EmzD8Ig4LUDByHJ3/iPOVoRixs/hmw== + dependencies: + bindings "^1.5.0" + bip66 "^1.1.5" + bn.js "^4.11.8" + create-hash "^1.2.0" + drbg.js "^1.0.1" + elliptic "^6.5.2" + nan "^2.14.0" + safe-buffer "^5.1.2" + secp256k1@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.2.tgz#15dd57d0f0b9fdb54ac1fa1694f40e5e9a54f4a1"