diff --git a/examples/passkeys-vue/components/LoginWithPasskey.vue b/examples/passkeys-vue/components/LoginWithPasskey.vue
index b107fa35..7e198446 100644
--- a/examples/passkeys-vue/components/LoginWithPasskey.vue
+++ b/examples/passkeys-vue/components/LoginWithPasskey.vue
@@ -1,44 +1,44 @@
@@ -60,7 +60,10 @@ async function showSafeInfo(passkey: PasskeyArgType) {
Connect existing Safe using an existing passkey
- Use an existing passkey
diff --git a/examples/passkeys-vue/components/SafeAccountDetails.vue b/examples/passkeys-vue/components/SafeAccountDetails.vue
index b41b9283..74261d96 100644
--- a/examples/passkeys-vue/components/SafeAccountDetails.vue
+++ b/examples/passkeys-vue/components/SafeAccountDetails.vue
@@ -1,32 +1,35 @@
@@ -35,7 +38,11 @@ function splitAddress(
class="mt-20 dark:bg-stone-800 bg-stone-50 p-8 rounded w-fit flex flex-col items-center"
>
Your Safe Accout
-
+
- {{ splitAddress(store.safeAddress) }}
diff --git a/examples/passkeys-vue/layouts/default.vue b/examples/passkeys-vue/layouts/default.vue
index e6faab77..f0d30930 100644
--- a/examples/passkeys-vue/layouts/default.vue
+++ b/examples/passkeys-vue/layouts/default.vue
@@ -16,7 +16,10 @@
>
Read tutorial
-
+
({
- passkeys: ([]),
- selectedPasskey: ({}),
- safeAddress: (''),
- isSafeDeployed: (false),
- isLoading: (false),
- userOp: (''),
- jiffyLink: (''),
- safeLink: (''),
- }),
- actions: {
- setPasskeys(data: PasskeyArgType[]) {
- this.passkeys = data
- },
- setSelectedPasskey(data: PasskeyArgType) {
- this.selectedPasskey = data
- },
- setSafeAddress(data: string) {
- this.safeAddress = data
- },
- setIsSafeDeployed(data: boolean) {
- this.isSafeDeployed = data
- },
- setIsLoading(data: boolean) {
- this.isLoading = data
- },
- setUserOp(data: string) {
- this.userOp = data
- },
- setSafeLink(data: string) {
- this.safeLink = data
- },
- setJiffyLink(data: string) {
- this.jiffyLink = data
- }
+ state: () => ({
+ passkeys: [],
+ selectedPasskey: {},
+ safeAddress: '',
+ isSafeDeployed: false,
+ isLoading: false,
+ userOp: '',
+ jiffyLink: '',
+ safeLink: ''
+ }),
+ actions: {
+ setPasskeys(data: PasskeyArgType[]) {
+ this.passkeys = data
+ },
+ setSelectedPasskey(data: PasskeyArgType) {
+ this.selectedPasskey = data
+ },
+ setSafeAddress(data: string) {
+ this.safeAddress = data
+ },
+ setIsSafeDeployed(data: boolean) {
+ this.isSafeDeployed = data
+ },
+ setIsLoading(data: boolean) {
+ this.isLoading = data
+ },
+ setUserOp(data: string) {
+ this.userOp = data
+ },
+ setSafeLink(data: string) {
+ this.safeLink = data
+ },
+ setJiffyLink(data: string) {
+ this.jiffyLink = data
}
- })
+ }
+})
diff --git a/examples/passkeys-vue/utils/mintNFT.ts b/examples/passkeys-vue/utils/mintNFT.ts
index 1acd7cf0..b09854d8 100644
--- a/examples/passkeys-vue/utils/mintNFT.ts
+++ b/examples/passkeys-vue/utils/mintNFT.ts
@@ -16,7 +16,8 @@ export const mintNFT = async (passkey: PasskeyArgType, safeAddress: string) => {
const paymasterOptions = {
isSponsored: true,
paymasterAddress: PAYMASTER_ADDRESS,
- paymasterUrl: PAYMASTER_URL + runtimeConfig.public.NUXT_PUBLIC_PIMLICO_API_KEY
+ paymasterUrl:
+ PAYMASTER_URL + runtimeConfig.public.NUXT_PUBLIC_PIMLICO_API_KEY
}
const safe4337Pack = await Safe4337Pack.init({
@@ -44,9 +45,8 @@ export const mintNFT = async (passkey: PasskeyArgType, safeAddress: string) => {
})
// 3) Sign SafeOperation
- const signedSafeOperation = await safe4337Pack.signSafeOperation(
- safeOperation
- )
+ const signedSafeOperation =
+ await safe4337Pack.signSafeOperation(safeOperation)
console.log('SafeOperation', signedSafeOperation)
diff --git a/examples/passkeys-vue/utils/passkeys.ts b/examples/passkeys-vue/utils/passkeys.ts
index 817fab76..f229bd39 100644
--- a/examples/passkeys-vue/utils/passkeys.ts
+++ b/examples/passkeys-vue/utils/passkeys.ts
@@ -1,11 +1,14 @@
-import { type PasskeyArgType, extractPasskeyData } from '@safe-global/protocol-kit'
+import {
+ type PasskeyArgType,
+ extractPasskeyData
+} from '@safe-global/protocol-kit'
/**
* Create a passkey using WebAuthn API.
* @returns {Promise} Passkey object with rawId and coordinates.
* @throws {Error} If passkey creation fails.
*/
-export async function createPasskey (): Promise {
+export async function createPasskey(): Promise {
const displayName = 'Safe Owner' // This can be customized to match, for example, a user name.
// Generate a passkey credential using WebAuthn API
const passkeyCredential = await navigator.credentials.create({
@@ -36,7 +39,7 @@ export async function createPasskey (): Promise {
}
const passkey = await extractPasskeyData(passkeyCredential)
- console.log("Created Passkey: ", passkey)
+ console.log('Created Passkey: ', passkey)
return passkey
}
@@ -73,9 +76,7 @@ export function loadPasskeysFromLocalStorage(): PasskeyArgType[] {
export function getPasskeyFromRawId(passkeyRawId: string): PasskeyArgType {
const passkeys = loadPasskeysFromLocalStorage()
- const passkey = passkeys.find(
- (passkey) => passkey.rawId === passkeyRawId
- )!
+ const passkey = passkeys.find((passkey) => passkey.rawId === passkeyRawId)!
return passkey
}
diff --git a/examples/passkeys/app/layout.tsx b/examples/passkeys/app/layout.tsx
index c9351435..6c3f2bf0 100644
--- a/examples/passkeys/app/layout.tsx
+++ b/examples/passkeys/app/layout.tsx
@@ -13,13 +13,13 @@ export const metadata: Metadata = {
description: 'Generated by create next app'
}
-export default function RootLayout ({
+export default function RootLayout({
children
}: Readonly<{
children: React.ReactNode
}>) {
return (
-
+