fixed build error

Author: aggre

package.json

@@ -38,9 +38,11 @@
 		"@devprotocol/dev-kit": "8.6.0",
 		"@devprotocol/util-ts": "4.0.0",
 		"@wagmi/core": "^1.4.7",
+		"@web3auth/base": "^7.1.0",
 		"@web3auth/modal": "^7.1.1",
 		"bignumber.js": "9.1.2",
-		"ramda": "0.29.1"
+		"ramda": "0.29.1",
+		"type-fest": "^4.7.1"
 	},
 	"peerDependencies": {
 		"@devprotocol/clubs-core": "^2.1.1",

src/components/ConnectButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { whenDefined, type UndefinedOr, isNotError } from '@devprotocol/util-ts'
-import type { Web3Auth as IWeb3Auth, Web3AuthOptions } from '@web3auth/modal'
-import { Web3Auth } from '@web3auth/modal'
+import type { Web3Auth, Web3AuthOptions } from '@web3auth/modal'
 import type { IProvider, UserInfo } from '@web3auth/base'
 import { mainnet, polygon, polygonMumbai } from '@wagmi/core/chains'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -10,6 +9,7 @@ import { BrowserProvider } from 'ethers'
 import Modal from './Modal.vue'
 import type { Web3AuthButtonOptions, Web3AuthButtonEnvs } from '../types'
 import ClubsLogo from '../assets/clubs--color.svg'
+import { load } from '../utils/load'
 
 const props = defineProps<Web3AuthButtonOptions & Web3AuthButtonEnvs>()
 
@@ -19,7 +19,7 @@ const loaded = ref<boolean>()
 const provider = ref<IProvider | null | undefined>()
 const showModal = ref(false)
 const userInfo = ref<Partial<UserInfo>>()
-let web3auth: UndefinedOr<IWeb3Auth>
+let web3auth: UndefinedOr<Web3Auth>
 let connectionPool: UndefinedOr<typeof Connection>
 
 const truncatedAddress = computed(() => {
@@ -68,7 +68,13 @@ const logout = async () => {
 
 onMounted(async () => {
 	console.log({ chainConfig })
-	web3auth = new Web3Auth({
+
+	const [{ connection }] = await Promise.all([
+		import('@devprotocol/clubs-core/connection'),
+		load('//cdn.jsdelivr.net/npm/buffer@6'),
+		load('//cdn.jsdelivr.net/npm/@web3auth/modal'),
+	])
+	web3auth = new window.Modal.Web3Auth({
 		clientId: props.web3authClientId,
 		web3AuthNetwork: props.web3authNetwork,
 		chainConfig,
@@ -81,8 +87,6 @@ onMounted(async () => {
 	await web3auth.initModal()
 	loaded.value = true
 
-	const { connection } = await import('@devprotocol/clubs-core/connection')
-
 	// @ts-ignore
 	connection().account.subscribe((_account) => {
 		account.value = _account

src/env.d.ts

@@ -1,6 +1,9 @@
 /* eslint-disable functional/type-declaration-immutability */
 /// <reference types="astro/client" />
 
+import type { Web3Auth } from '@web3auth/modal'
+import type { Constructor } from 'type-fest'
+
 interface ImportMetaEnv {
 	readonly PUBLIC_INFURA_KEY: string
 	readonly PUBLIC_WEB3AUTH_CLIENT_ID: string
@@ -14,3 +17,11 @@ declare module '*.astro' {
 	import type { AstroComponentFactory } from 'astro/dist/runtime/server'
 	export default InstanceType<AstroComponentFactory>
 }
+
+declare global {
+	interface Window {
+		Modal: {
+			Web3Auth: Constructor<Web3Auth>
+		}
+	}
+}

src/utils/load.ts

@@ -0,0 +1,22 @@
+/* eslint-disable functional/no-return-void */
+/* eslint-disable functional/immutable-data */
+/* eslint-disable functional/no-expression-statements */
+
+export const load = async (src: string): Promise<true> => {
+	const id = `__load_${window.btoa(src)}__`
+
+	const exists = Boolean(document.getElementById(id))
+
+	console.log({ id, exists })
+
+	return exists
+		? true
+		: new Promise((resolve) => {
+				const script = document.createElement('script')
+
+				script.id = id
+				script.src = src
+				document.body.append(script)
+				script.onload = () => resolve(true)
+		  })
+}