Skip to content

Commit

Permalink
Merge pull request #14 from Web3Auth/feat/waas-integrate
Browse files Browse the repository at this point in the history
Feat/waas integrate
  • Loading branch information
chaitanyapotti authored Jan 31, 2024
2 parents 199d5bf + a26f1e1 commit 0b8462b
Show file tree
Hide file tree
Showing 29 changed files with 2,851 additions and 10,340 deletions.
2 changes: 2 additions & 0 deletions .env.development
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
VITE_APP_WS_EMBED_BUILD_ENV=development
VITE_APP_INFURA_PROJECT_KEY=daeee53504be4cd3a997d4f2718d33e0
11,956 changes: 2,262 additions & 9,694 deletions package-lock.json

Large diffs are not rendered by default.

26 changes: 15 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,24 @@
"format": "prettier --write src/"
},
"dependencies": {
"@toruslabs/vue-components": "^6.0.0",
"@toruslabs/vue-icons": "^6.0.0",
"@toruslabs/ethereum-controllers": "^5.3.6",
"@toruslabs/vue-components": "^7.2.0",
"@toruslabs/vue-icons": "^7.2.0",
"@vueuse/core": "^10.6.1",
"@web3auth/base": "^7.2.0",
"@web3auth/ethereum-provider": "^7.2.0",
"@web3auth/no-modal": "^7.2.0",
"@web3auth/openlogin-adapter": "^7.2.0",
"@web3auth/torus-wallet-connector-plugin": "^7.2.0",
"@web3auth/ws-embed": "^0.0.0",
"@walletconnect/sign-client": "^2.11.0",
"@web3auth/default-evm-adapter": "^8.0.0-alpha.4",
"@web3auth/ethereum-provider": "^8.0.0-alpha.0",
"@web3auth/modal": "^8.0.0-alpha.4",
"@web3auth/openlogin-adapter": "^8.0.0-alpha.0",
"@web3auth/wallet-services-plugin": "^8.0.0-alpha.6",
"bowser": "^2.11.0",
"ethereum-public-key-to-address": "^0.0.5",
"ethers": "^6.9.0",
"ethers": "^6.10.0",
"pinia": "^2.1.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"vue": "^3.3.10",
"vue-router": "^4.2.5",
"web3": "^4.3.0"
"vue-router": "^4.2.5"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.6.0",
Expand Down
1 change: 0 additions & 1 deletion src/.env.development

This file was deleted.

259 changes: 17 additions & 242 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,256 +1,31 @@
<template>
<div>
<!-- Navbar -->
<Navbar
@on-log-out="logout"
@on-redirect="
() => {
currentStep = -1
mbViewSteps = false
}
"
@on-menu-click="(idx) => (currentStep = idx)"
/>
<!-- Small Screen -->
<Button
v-if="!mbViewSteps && currentStep !== -1"
variant="text"
class="!flex xl:!hidden !text-gray-400 !px-6 mb-4 mt-6"
@on-click="mbViewSteps = true"
>
<Icon name="chevron-left-solid-icon" /> Back to next steps
</Button>
<!-- Main -->
<main
v-if="!account"
class="flex flex-col items-center justify-center h-[calc(100vh_-_120px)] px-6"
>
<LoginForm
@on-email-login="login({ icon: 'email_passwordless' })"
@on-social-login-click="login"
@handle-email-password-less="handleEmailValue"
/>
</main>
<main
:class="[
'px-6 mb-6 mt-6 sm:mt-0 md:mb-0 flex gap-4 main-container',
{ 'sm:px-6 px-0': mbViewSteps && currentStep !== -1 }
]"
v-else
>
<!-- Desktop -->
<Steps @on-steps-click="handleSteps" class="hidden xl:flex" />
<!-- Small Screen -->
<Steps v-if="mbViewSteps" @on-steps-click="handleSteps" class="flex xl:hidden !w-full" />
<!-- Desktop -->
<div
class="hidden xl:flex flex-col flex-1 bg-white px-8 py-6 rounded-2xl shadow-lg overflow-auto"
>
<LoginDetails v-if="currentStep === -1" @on-view-steps="mbViewSteps = true" />
<OpenloginDetails v-if="currentStep === 0" />
<WalletServiceDetails
v-if="currentStep === 1"
@open-wallet-service-ui="openWalletUi"
@open-wallet-sign-message="signPersonalMsg"
/>
<TopupDetails v-if="currentStep === 2" @initiate-top-up-plugin="openCheckout" />
<WalletConnectDetails v-if="currentStep === 3" @open-wallet-connect="openWalletConnect" />
</div>
<!-- Small Screen -->
<div
v-if="!mbViewSteps"
class="flex xl:hidden flex-col flex-1 bg-white p-5 rounded-2xl shadow-lg overflow-auto"
>
<LoginDetails v-if="currentStep === -1" @on-view-steps="mbViewSteps = true" />
<OpenloginDetails v-if="currentStep === 0" />
<WalletServiceDetails
v-if="currentStep === 1"
@open-wallet-service-ui="openWalletUi"
@open-wallet-sign-message="signPersonalMsg"
/>
<TopupDetails v-if="currentStep === 2" @initiate-top-up-plugin="openCheckout" />
<WalletConnectDetails v-if="currentStep === 3" @open-wallet-connect="openWalletConnect" />
</div>
</main>
</div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { BrowserProvider } from 'ethers'
import Web3 from 'web3'
import WsEmbed, { type UserInfo, type WS_EMBED_BUILD_ENV_TYPE } from '@web3auth/ws-embed'
import { SUPPORTED_NETWORKS, MAINNET_CHAIN_ID } from '@toruslabs/ethereum-controllers'
import { Button, Icon } from '@toruslabs/vue-components'
import type { SocialLoginObj } from 'node_modules/@toruslabs/vue-components/dist/common/LoginForm'
import { Loader } from '@toruslabs/vue-components'
import Navbar from '@/components/Navbar'
import LoginForm from '@/components/LoginForm'
import Steps from '@/components/Steps'
import LoginDetails from '@/components/LoginDetails'
import OpenloginDetails from '@/components/OpenloginDetails'
import WalletServiceDetails from '@/components/WalletServiceDetails'
import TopupDetails from '@/components/TopupDetails'
import WalletConnectDetails from '@/components/WalletConnectDetails'
const buildEnvironment = process.env.VUE_APP_WS_EMBED_BUILD_ENV || 'testing'
const currentStep = ref(-1)
const mbViewSteps = ref(false)
const account = ref<string>('')
const userInfo = ref<(UserInfo & { typeOfLogin: string }) | null | undefined>(null)
const emailLoginHint = ref<string>('')
const isLoading = ref<boolean>(false)
const signedMessage = ref<string>('')
import { onBeforeMount, ref } from 'vue'
import { useWeb3authStore } from './store/web3authStore'
const chainId = ref<string>(MAINNET_CHAIN_ID)
const currentNetwork = ref<string>(SUPPORTED_NETWORKS[chainId.value].displayName)
const switchChainTo = ref<string>('0x1')
const web3Auth = useWeb3authStore()
const isLoading = ref(false)
let wsEmbed: WsEmbed | null = null
let web3: Web3 | null = null
let ethersProvider: BrowserProvider | null = null
// Providers
provide('wsEmbed', wsEmbed)
provide('account', account)
provide('userInfo', userInfo)
provide('emailLoginHint', emailLoginHint)
provide('signedMessage', signedMessage)
onMounted(async () => {
onBeforeMount(async () => {
isLoading.value = true
try {
isLoading.value = true
wsEmbed = new WsEmbed()
await wsEmbed.init({
showWidgetButton: false,
buildEnv: buildEnvironment as WS_EMBED_BUILD_ENV_TYPE | 'testing',
chainConfig: SUPPORTED_NETWORKS[MAINNET_CHAIN_ID],
enableLogging: true
})
// Update provider on chain change
wsEmbed.provider.on('chainChanged', async () => {
if (wsEmbed?.provider) {
// needs to update ethers provider if using ethers
ethersProvider = new BrowserProvider(wsEmbed.provider, 'any')
}
getCurrentChain()
})
// Update provider on accountsChanged
wsEmbed.provider.on('accountsChanged', async (accounts) => {
if (account.value.length > 0 && accounts.length === 0) {
account.value = ''
isLoading.value = false
return
}
if (wsEmbed?.communicationProvider.isLoggedIn) {
login()
}
})
ethersProvider = new BrowserProvider(wsEmbed.provider, 'any')
web3 = new Web3()
web3.setProvider(wsEmbed.provider)
await web3Auth.initializeWeb3Auth()
} catch (error) {
console.error(error)
} finally {
isLoading.value = false
}
})
const getCurrentChain = async () => {
const currentChainId = (await wsEmbed?.provider.request({ method: 'eth_chainId' })) as string
// const currentChainId = `0x${(await ethersProvider?.getNetwork())?.chainId.toString(16)}`;
currentNetwork.value =
SUPPORTED_NETWORKS[currentChainId]?.displayName || `Chain Id: ${currentChainId}`
chainId.value = currentChainId
switchChainTo.value = chainId.value !== '0x5' ? '0x5' : '0x1'
}
const login = async (loginObj?: SocialLoginObj) => {
try {
// Note: can pass loginProvider and login_hint as params if you want to preselect a provider and login identifier eg. email
// const loginaccs = await torus?.login({ loginProvider: "google", login_hint: "[email protected]" });
// Passing empty will trigger showing the login modal showing all login provider options
isLoading.value = true
const obj = { loginProvider: loginObj?.icon as any, login_hint: emailLoginHint.value }
const loginaccs = await wsEmbed?.login(obj)
account.value = (loginaccs || [])[0] || ''
localStorage.setItem('accountLocal', account.value)
userInfo.value = (await wsEmbed?.getUserInfo()) as UserInfo & { typeOfLogin: string }
isLoading.value = false
getCurrentChain()
} catch (error) {
console.error(error)
isLoading.value = false
}
}
const logout = async () => {
try {
isLoading.value = true
await wsEmbed?.logout()
} catch (error) {
console.error('Logout Error', error)
}
}
const handleSteps = (idx: number) => {
currentStep.value = idx
// if (idx === 3) {
// openWalletConnect()
// }
// if (idx === 2) {
// openCheckout()
// }
// if (idx === 1) {
// openWalletUi()
// }
mbViewSteps.value = false
}
const handleEmailValue = (e: Event) => {
const { value } = e.target as HTMLInputElement
emailLoginHint.value = value
}
const openWalletConnect = async () => {
await wsEmbed?.showWalletConnectScanner()
}
const openWalletUi = async () => {
await wsEmbed?.showWalletUi()
}
const openCheckout = async () => {
await wsEmbed?.showCheckout()
}
const signPersonalMsg = async () => {
try {
const message = 'Some string'
const signer = await ethersProvider?.getSigner()
const msg = await signer?.signMessage(message)
signedMessage.value = msg || ''
} catch (error) {
signedMessage.value = ''
console.error('Failed', (error as Error).message)
}
}
</script>

<style scoped>
.main-container {
@media (min-width: 700px) {
height: calc(100vh - 124px);
}
}
</style>
<template>
<div v-if="isLoading" class="h-screen flex justify-center items-center">
<Loader :use-spinner="true" />
</div>
<div v-else class="h-screen flex flex-col">
<Navbar />
<router-view />
</div>
</template>
Loading

0 comments on commit 0b8462b

Please sign in to comment.