From f6e0effff4a37457f35a7cf2e20d486c7a78b0e0 Mon Sep 17 00:00:00 2001 From: Tai Nguyen TT Date: Mon, 9 Dec 2024 22:14:31 +0700 Subject: [PATCH] use NFT checkout embed SDK --- .env.development | 3 - .github/workflows/ci.yml | 3 - package-lock.json | 126 ++++++++++++++------- package.json | 3 +- src/components/NftServices/NftServices.vue | 79 +++---------- src/config.ts | 4 - 6 files changed, 108 insertions(+), 110 deletions(-) delete mode 100644 src/config.ts diff --git a/.env.development b/.env.development index 1575c20..a01ce55 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1 @@ -VITE_APP_WS_EMBED_BUILD_ENV=development VITE_APP_INFURA_PROJECT_KEY=daeee53504be4cd3a997d4f2718d33e0 -VITE_APP_NFT_CHECKOUT_HOST=https://develop-nft-checkout.web3auth.io -VITE_APP_NFT_CHECKOUT_API_KEY=pk_test_4ca499b1f017c2a96bac63493dca4ac2eb08d1e91de0a796d87137dc7278e0af diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e40e471..b504570 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -31,9 +31,6 @@ jobs: - name: Generate build run: npm run build - env: - VITE_APP_NFT_CHECKOUT_HOST: 'https://develop-nft-checkout.web3auth.io' - VITE_APP_NFT_CHECKOUT_API_KEY: 'pk_test_4ca499b1f017c2a96bac63493dca4ac2eb08d1e91de0a796d87137dc7278e0af' # Set the credentials from repository settings/secrets - name: Configure AWS credentials diff --git a/package-lock.json b/package-lock.json index 5387580..2603847 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,11 +13,12 @@ "@toruslabs/vue-components": "^7.9.0", "@toruslabs/vue-icons": "^7.6.2", "@web3auth/auth-adapter": "^9.4.0", - "@web3auth/base": "^9.4.0", + "@web3auth/base": "9.4.5", "@web3auth/default-evm-adapter": "^9.4.0", "@web3auth/ethereum-provider": "^9.4.0", "@web3auth/modal": "^9.4.0", "@web3auth/modal-vue-composables": "^9.4.0", + "@web3auth/nft-checkout-plugin": "9.5.0-alpha.1", "@web3auth/wallet-connect-v2-adapter": "^9.4.0", "@web3auth/wallet-services-plugin": "^9.4.0", "@web3auth/wallet-services-plugin-vue-composables": "^9.4.0", @@ -1333,12 +1334,13 @@ } }, "node_modules/@nx/nx-linux-x64-gnu": { - "version": "19.8.8", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-19.8.8.tgz", - "integrity": "sha512-LCfnm42cQUrrch/8RqVgC46bYovX/ZcbP44pmTgrkChfrmxDhdaIfi0m1aUWpfize6DvCWxvmg8VEaV+Cf4/cg==", + "version": "20.2.1", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-20.2.1.tgz", + "integrity": "sha512-pTytPwGiPRakqz2PKiWTSRNm9taE1U9n0+kRAAFzbOtzeW+eIoebe5xY5QMoZ+XtIZ6pJM2BUOyMD+/TX57r8Q==", "cpu": [ "x64" ], + "license": "MIT", "optional": true, "os": [ "linux" @@ -1866,9 +1868,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.27.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.27.2.tgz", - "integrity": "sha512-PaW2DY5Tan+IFvNJGHDmUrORadbe/Ceh8tQxi8cmdQVCCYsLoQo2cuaSj+AU+YRX8M4ivS2vJ9UGaxfuNN7gmg==", + "version": "4.28.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz", + "integrity": "sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==", "cpu": [ "x64" ], @@ -2237,15 +2239,15 @@ } }, "node_modules/@toruslabs/base-controllers": { - "version": "6.2.4", - "resolved": "https://registry.npmjs.org/@toruslabs/base-controllers/-/base-controllers-6.2.4.tgz", - "integrity": "sha512-VRki0iYnSL3Chy2W/mwk2dc3tiLuSR5a/dwaapCNn3SgMGIEgnJMwq1wNQO1l5eaHgl3eN7b/IL8Y2DfqHnW4g==", + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@toruslabs/base-controllers/-/base-controllers-6.3.2.tgz", + "integrity": "sha512-YnRAtEM9jVR71ZDPSJtb1P1biAz322hv9R3jKh7SttfI//JPvtw8UdSCCQjSF5cAWLqgOupqq15p+p9Ka0bSPA==", "license": "ISC", "dependencies": { "@ethereumjs/util": "^9.1.0", "@toruslabs/broadcast-channel": "^11.0.0", "@toruslabs/http-helpers": "^7.0.0", - "@web3auth/auth": "^9.3.3", + "@web3auth/auth": "^9.5.2", "async-mutex": "^0.5.0", "bignumber.js": "^9.1.2", "bowser": "^2.11.0", @@ -2279,9 +2281,9 @@ } }, "node_modules/@toruslabs/constants": { - "version": "14.1.1", - "resolved": "https://registry.npmjs.org/@toruslabs/constants/-/constants-14.1.1.tgz", - "integrity": "sha512-+/ur6lXjMto4FdJR5Y6HqFiEX/8hea9usgwt99neV3IT46auC5NyVdiG6qmohuy67ThLt7IMCIyuJY78eC875g==", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@toruslabs/constants/-/constants-14.2.0.tgz", + "integrity": "sha512-Mb5EfYNSPyvvw5s1JXnpZwritCgp4NmLni1imTqrSKGV3yikYhUn1ufyLMAHGnBBgv4AuMIXBIe3EpJJ+SpA0g==", "license": "MIT", "engines": { "node": ">=18.x", @@ -2454,16 +2456,17 @@ } }, "node_modules/@toruslabs/starkware-crypto": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@toruslabs/starkware-crypto/-/starkware-crypto-4.0.0.tgz", - "integrity": "sha512-oEvcwEulCkLbOfRq3Rz3wS1DgSYV5oCh4N4YNWYDQhz1WoQe3S87hJlVUPvRQHHqhp9vBM0qDUVi0Ez7ibYhMA==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@toruslabs/starkware-crypto/-/starkware-crypto-4.0.1.tgz", + "integrity": "sha512-AhnXUscFN2+oLeQuOEbi8vvrQnxUKnE0USWpg7eFHmqUBV8kg6+PAFiWsvJ01+GMQPTMKhKZHyMysxW5AFHc6Q==", + "license": "MIT", "dependencies": { "assert": "^2.1.0", "bip39": "^3.1.0", "bn.js": "^5.2.1", - "elliptic": "~6.5.5", + "elliptic": "^6.6.1", "enc-utils": "^3.0.0", - "ethereum-cryptography": "^2.2.0", + "ethereum-cryptography": "^2.2.1", "hash.js": "^1.1.7" }, "engines": { @@ -2475,9 +2478,10 @@ } }, "node_modules/@toruslabs/starkware-crypto/node_modules/elliptic": { - "version": "6.5.7", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz", - "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==", + "version": "6.6.1", + "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.6.1.tgz", + "integrity": "sha512-RaddvvMatK2LJHqFJ+YA4WysVN5Ita9E35botqIYspQ4TkRAlCicdzKOjlyv/1Za5RyTNn7di//eEV0uTAfe3g==", + "license": "MIT", "dependencies": { "bn.js": "^4.11.9", "brorand": "^1.1.0", @@ -2489,9 +2493,10 @@ } }, "node_modules/@toruslabs/starkware-crypto/node_modules/elliptic/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.1.tgz", + "integrity": "sha512-k8TVBiPkPJT9uHLdOKfFpqcfprwBFOAAXXozRubr7R7PfIuKvQlzcI4M0pALeqXN09vdaMbUdUj+pass+uULAg==", + "license": "MIT" }, "node_modules/@toruslabs/tweetnacl-js": { "version": "1.0.4", @@ -3718,9 +3723,9 @@ } }, "node_modules/@web3auth/auth": { - "version": "9.5.1", - "resolved": "https://registry.npmjs.org/@web3auth/auth/-/auth-9.5.1.tgz", - "integrity": "sha512-+4VQg0JxD4B1iX8TXOqX6GeC4JfQdjmyux6nEHKF9TtxIJvuAdVTXEx48q/CeOSHBAfwjyGrj0Xiik1ZDBIzlg==", + "version": "9.5.3", + "resolved": "https://registry.npmjs.org/@web3auth/auth/-/auth-9.5.3.tgz", + "integrity": "sha512-774DFBzuq/mO9y5Zf0ICdK9pZ/YgYgnRVo3CYiayuknA4/wTxosK+xvhlcP6fGRKVgoaYa6bP+gBGmqoFCGUzQ==", "license": "MIT", "dependencies": { "@ethereumjs/util": "^9.1.0", @@ -3729,7 +3734,7 @@ "@toruslabs/metadata-helpers": "^6.0.0", "@toruslabs/secure-pub-sub": "^1.1.0", "@toruslabs/session-manager": "^3.2.0", - "@toruslabs/starkware-crypto": "^4.0.0", + "@toruslabs/starkware-crypto": "^4.0.1", "@toruslabs/tweetnacl-js": "^1.0.4", "base64url": "^3.0.1", "bip39": "^3.1.0", @@ -3753,8 +3758,8 @@ "npm": ">=9.x" }, "optionalDependencies": { - "@nx/nx-linux-x64-gnu": "^19.6.3", - "@rollup/rollup-linux-x64-gnu": "^4.24.4" + "@nx/nx-linux-x64-gnu": "^20.1.2", + "@rollup/rollup-linux-x64-gnu": "^4.27.3" }, "peerDependencies": { "@babel/runtime": "7.x" @@ -3780,15 +3785,15 @@ } }, "node_modules/@web3auth/base": { - "version": "9.4.0", - "resolved": "https://registry.npmjs.org/@web3auth/base/-/base-9.4.0.tgz", - "integrity": "sha512-wdqopG1XPcLZHiOigTCJpE8pCWta0f6SjJ5bDHFmicpol0Goc/Egfs/kdH+qnzCIjkL+loWSVl3Vxp9ee1NwpQ==", + "version": "9.4.5", + "resolved": "https://registry.npmjs.org/@web3auth/base/-/base-9.4.5.tgz", + "integrity": "sha512-ETyrRnsJIV9Xab9lkUL6EUVP1FKzal49yDFrZIOv1mtZhafhXNcmo5aOxLXF/LbUCDs37CereqQovujGUWzZXQ==", "license": "ISC", "dependencies": { - "@toruslabs/base-controllers": "^6.2.4", - "@toruslabs/constants": "^14.1.1", + "@toruslabs/base-controllers": "^6.3.2", + "@toruslabs/constants": "^14.2.0", "@toruslabs/http-helpers": "^7.0.0", - "@web3auth/auth": "^9.5.0", + "@web3auth/auth": "^9.5.3", "jwt-decode": "^4.0.0", "loglevel": "^1.9.2", "ts-custom-error": "^3.3.1" @@ -3928,6 +3933,47 @@ "vue": "^3.4.x" } }, + "node_modules/@web3auth/nft-checkout-plugin": { + "version": "9.5.0-alpha.1", + "resolved": "https://registry.npmjs.org/@web3auth/nft-checkout-plugin/-/nft-checkout-plugin-9.5.0-alpha.1.tgz", + "integrity": "sha512-SERyK/Hofpj5MEW42GPS9viKNfrUh0aLf5NLc44MW37iVBHCKYHU5WtU9se3R2hJ7/5J7WqJtY//Pe3itg8p3g==", + "license": "ISC", + "dependencies": { + "@toruslabs/base-controllers": "^6.2.4", + "@web3auth/auth": "^9.4.1", + "@web3auth/base": "^9.5.0-alpha.1", + "loglevel": "^1.9.2" + }, + "engines": { + "node": ">=18.x", + "npm": ">=9.x" + }, + "peerDependencies": { + "@babel/runtime": "^7.x" + } + }, + "node_modules/@web3auth/nft-checkout-plugin/node_modules/@web3auth/base": { + "version": "9.5.0-alpha.1", + "resolved": "https://registry.npmjs.org/@web3auth/base/-/base-9.5.0-alpha.1.tgz", + "integrity": "sha512-e7omS+c9wP8NVoJTnDRiLZNLlgej8Zfao/eX31M6E906eKBMkWQ3WixmZBtLCcSTTWlVWFtZV0LoRpNWH5Gi5g==", + "license": "ISC", + "dependencies": { + "@toruslabs/base-controllers": "^6.3.2", + "@toruslabs/constants": "^14.2.0", + "@toruslabs/http-helpers": "^7.0.0", + "@web3auth/auth": "^9.5.3", + "jwt-decode": "^4.0.0", + "loglevel": "^1.9.2", + "ts-custom-error": "^3.3.1" + }, + "engines": { + "node": ">=18.x", + "npm": ">=9.x" + }, + "peerDependencies": { + "@babel/runtime": "^7.x" + } + }, "node_modules/@web3auth/no-modal": { "version": "9.4.0", "resolved": "https://registry.npmjs.org/@web3auth/no-modal/-/no-modal-9.4.0.tgz", @@ -4664,6 +4710,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/bip39/-/bip39-3.1.0.tgz", "integrity": "sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==", + "license": "ISC", "dependencies": { "@noble/hashes": "^1.2.0" } @@ -5632,6 +5679,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/enc-utils/-/enc-utils-3.0.0.tgz", "integrity": "sha512-e57t/Z2HzWOLwOp7DZcV0VMEY8t7ptWwsxyp6kM2b2zrk6JqIpXxzkruHAMiBsy5wg9jp/183GdiRXCvBtzsYg==", + "license": "MIT", "dependencies": { "is-typedarray": "1.0.0", "typedarray-to-buffer": "3.1.5" @@ -8259,7 +8307,8 @@ "node_modules/is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==" + "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==", + "license": "MIT" }, "node_modules/is-weakmap": { "version": "2.0.2", @@ -12008,6 +12057,7 @@ "version": "3.1.5", "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", + "license": "MIT", "dependencies": { "is-typedarray": "^1.0.0" } diff --git a/package.json b/package.json index f046eb3..c406430 100644 --- a/package.json +++ b/package.json @@ -20,11 +20,12 @@ "@toruslabs/vue-components": "^7.9.0", "@toruslabs/vue-icons": "^7.6.2", "@web3auth/auth-adapter": "^9.4.0", - "@web3auth/base": "^9.4.0", + "@web3auth/base": "9.4.5", "@web3auth/default-evm-adapter": "^9.4.0", "@web3auth/ethereum-provider": "^9.4.0", "@web3auth/modal": "^9.4.0", "@web3auth/modal-vue-composables": "^9.4.0", + "@web3auth/nft-checkout-plugin": "9.5.0-alpha.1", "@web3auth/wallet-connect-v2-adapter": "^9.4.0", "@web3auth/wallet-services-plugin": "^9.4.0", "@web3auth/wallet-services-plugin-vue-composables": "^9.4.0", diff --git a/src/components/NftServices/NftServices.vue b/src/components/NftServices/NftServices.vue index d392ef1..28de1c8 100644 --- a/src/components/NftServices/NftServices.vue +++ b/src/components/NftServices/NftServices.vue @@ -4,50 +4,43 @@ import { Card } from '@toruslabs/vue-components/Card' import { Link } from '@toruslabs/vue-components/Link' import { IProvider } from '@web3auth/base' import { useWeb3Auth } from '@web3auth/modal-vue-composables' +import { NFTCheckoutEmbed } from '@web3auth/nft-checkout-plugin' import { useI18n } from 'petite-vue-i18n' -import { computed, onMounted, ref } from 'vue' +import { onMounted, ref } from 'vue' -import config from '@/config' import { getAccounts } from '@/services/ethHandlers' const { provider } = useWeb3Auth() const FREE_MINT_CONTRACT_ID = 'b5b4de3f-0212-11ef-a08f-0242ac190003' const PAID_MINT_CONTRACT_ID = 'd1145a8b-98ae-44e0-ab63-2c9c8371caff' +const NFT_CHECKOUT_CLIENT_ID = + 'BHgArYmWwSeq21czpcarYh0EVq2WWOzflX-NTK-tY1-1pauPzHKRRLgpABkmYiIV_og9jAvoIxQ8L3Smrwe04Lw' -const showNftMinting = ref(false) const { t } = useI18n() -const openNftMinting = () => { - showNftMinting.value = true -} - -const showNftPurchase = ref(false) -const openNftPurchase = () => { - showNftPurchase.value = true -} +const nftCheckoutEmbed = new NFTCheckoutEmbed({ clientId: NFT_CHECKOUT_CLIENT_ID }) +nftCheckoutEmbed.init() const receiverAddress = ref('') onMounted(async () => { - window.addEventListener('message', (event: MessageEvent) => { - if (event.origin === config.nftCheckoutHost && event.data === 'close-nft-checkout') { - showNftMinting.value = false - showNftPurchase.value = false - } - }) const address = await getAccounts(provider.value as IProvider) receiverAddress.value = address }) -const demoNftMintingUrl = computed( - () => - `${config.nftCheckoutHost}/?contract_id=${FREE_MINT_CONTRACT_ID}&receiver_address=${receiverAddress.value}&api_key=${config.nftCheckoutApiKey}` -) +const openNftMinting = () => { + nftCheckoutEmbed.show({ + contractId: FREE_MINT_CONTRACT_ID, + receiverAddress: receiverAddress.value + }) +} -const demoNftPurchaseUrl = computed( - () => - `${config.nftCheckoutHost}/?contract_id=${PAID_MINT_CONTRACT_ID}&receiver_address=${receiverAddress.value}&api_key=${config.nftCheckoutApiKey}` -) +const openNftPurchase = () => { + nftCheckoutEmbed.show({ + contractId: PAID_MINT_CONTRACT_ID, + receiverAddress: receiverAddress.value + }) +}