fix: Update code formatting (#612)

* Fix code formatting * Fix Dynamic imports * Add small fixes * Format code snippets in examples
safe-global · Oct 9, 2024 · f68cd6b · f68cd6b
1 parent 3c9b139
commit f68cd6b
Show file tree

Hide file tree

Showing 23 changed files with 164 additions and 135 deletions.
diff --git a/examples/passkeys-vue/components/LoginWithPasskey.vue b/examples/passkeys-vue/components/LoginWithPasskey.vue
@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import { useSafeStore } from "@/stores/safe";
-import { Safe4337Pack } from "@safe-global/relay-kit";
+import { useSafeStore } from '@/stores/safe'
+import { Safe4337Pack } from '@safe-global/relay-kit'
 
-import type { PasskeyArgType } from "@safe-global/protocol-kit";
+import type { PasskeyArgType } from '@safe-global/protocol-kit'
 
-const store = useSafeStore();
-const runtimeConfig = useRuntimeConfig();
+const store = useSafeStore()
+const runtimeConfig = useRuntimeConfig()
 
 async function handleCreatePasskey() {
-  const passkey = await createPasskey();
+  const passkey = await createPasskey()
 
-  storePasskeyInLocalStorage(passkey);
-  store.setSelectedPasskey(passkey);
+  storePasskeyInLocalStorage(passkey)
+  store.setSelectedPasskey(passkey)
 
-  await showSafeInfo(passkey);
+  await showSafeInfo(passkey)
 }
 
 async function selectExistingPasskey() {
-  const passkeys = loadPasskeysFromLocalStorage();
+  const passkeys = loadPasskeysFromLocalStorage()
 
-  store.setPasskeys(passkeys);
-  store.setSelectedPasskey(passkeys[0]);
+  store.setPasskeys(passkeys)
+  store.setSelectedPasskey(passkeys[0])
 
-  await showSafeInfo(store.selectedPasskey);
+  await showSafeInfo(store.selectedPasskey)
 }
 
 async function showSafeInfo(passkey: PasskeyArgType) {
-  store.setIsLoading(true);
+  store.setIsLoading(true)
   const safe4337Pack = await Safe4337Pack.init({
     provider: RPC_URL,
     signer: passkey,
     bundlerUrl: BUNDLER_URL + runtimeConfig.public.NUXT_PUBLIC_PIMLICO_API_KEY,
     options: {
       owners: [],
-      threshold: 1,
-    },
-  });
-  store.setSafeAddress(await safe4337Pack.protocolKit.getAddress());
-  store.setIsSafeDeployed(await safe4337Pack.protocolKit.isSafeDeployed());
-  store.setIsLoading(false);
+      threshold: 1
+    }
+  })
+  store.setSafeAddress(await safe4337Pack.protocolKit.getAddress())
+  store.setIsSafeDeployed(await safe4337Pack.protocolKit.isSafeDeployed())
+  store.setIsLoading(false)
 }
 </script>
 
@@ -60,7 +60,10 @@ async function showSafeInfo(passkey: PasskeyArgType) {
     </UButton>
     <UDivider label="OR" :ui="{ border: { base: 'dark:border-gray-500' } }" />
     <h2 class="my-12">Connect existing Safe using an existing passkey</h2>
-    <UButton icon="material-symbols:fingerprint" block @click="selectExistingPasskey"
+    <UButton
+      icon="material-symbols:fingerprint"
+      block
+      @click="selectExistingPasskey"
       >Use an existing passkey</UButton
     >
   </div>

diff --git a/examples/passkeys-vue/components/SafeAccountDetails.vue b/examples/passkeys-vue/components/SafeAccountDetails.vue
@@ -1,32 +1,35 @@
 <script setup lang="ts">
-import { useSafeStore } from "@/stores/safe";
+import { useSafeStore } from '@/stores/safe'
 
-const store = useSafeStore();
+const store = useSafeStore()
 
 async function handleMintNFT() {
-  store.setIsLoading(true);
+  store.setIsLoading(true)
 
-  const userOp = await mintNFT(store.selectedPasskey, store.safeAddress!);
+  const userOp = await mintNFT(store.selectedPasskey, store.safeAddress!)
 
-  store.setIsLoading(false);
-  store.setIsSafeDeployed(true);
-  store.setUserOp(userOp);
-  store.setJiffyLink(`https://jiffyscan.xyz/userOpHash/${userOp}?network=${CHAIN_NAME}`);
-  store.setSafeLink(`https://app.safe.global/home?safe=sep:${store.safeAddress}`);
+  store.setIsLoading(false)
+  store.setIsSafeDeployed(true)
+  store.setUserOp(userOp)
+  store.setJiffyLink(
+    `https://jiffyscan.xyz/userOpHash/${userOp}?network=${CHAIN_NAME}`
+  )
+  store.setSafeLink(
+    `https://app.safe.global/home?safe=sep:${store.safeAddress}`
+  )
 }
 
-const DEFAULT_CHAR_DISPLAYED = 6;
+const DEFAULT_CHAR_DISPLAYED = 6
 
 function splitAddress(
   address: string,
   charDisplayed: number = DEFAULT_CHAR_DISPLAYED
 ): string {
-  const firstPart = address.slice(0, charDisplayed);
-  const lastPart = address.slice(address.length - charDisplayed);
+  const firstPart = address.slice(0, charDisplayed)
+  const lastPart = address.slice(address.length - charDisplayed)
 
-  return `${firstPart}...${lastPart}`;
+  return `${firstPart}...${lastPart}`
 }
-
 </script>
 
 <template>
@@ -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"
   >
     <h1 class="text-4xl text-[#12FF80]">Your Safe Accout</h1>
-    <UIcon v-if="store.isLoading" name="line-md:loading-loop" class="mt-4 w-12 h-12" />
+    <UIcon
+      v-if="store.isLoading"
+      name="line-md:loading-loop"
+      class="mt-4 w-12 h-12"
+    />
     <div v-if="!store.isLoading" class="flex flex-col items-center">
       <UButton
         variant="link"
@@ -46,7 +53,8 @@ function splitAddress(
         target="_blank"
         rel="noopener noreferrer"
       >
-        <template #leading><UIcon name="token:safe" class="h-8 w-8" /> </template
+        <template #leading
+          ><UIcon name="token:safe" class="h-8 w-8" /> </template
         >{{ splitAddress(store.safeAddress) }}
         <template #trailing
           ><UIcon name="tabler:external-link" class="w-5 h-5" />

diff --git a/examples/passkeys-vue/layouts/default.vue b/examples/passkeys-vue/layouts/default.vue
@@ -16,7 +16,10 @@
           >
             Read tutorial
             <template #trailing>
-              <UIcon name="tabler:external-link" class="dark:white black h-6 w-6"/>
+              <UIcon
+                name="tabler:external-link"
+                class="dark:white black h-6 w-6"
+              />
             </template>
           </UButton>
           <UButton

diff --git a/examples/passkeys-vue/stores/safe.ts b/examples/passkeys-vue/stores/safe.ts
@@ -1,40 +1,40 @@
 import type { PasskeyArgType } from '@safe-global/protocol-kit'
 
 export const useSafeStore = defineStore('safe', {
-    state: () => ({
-      passkeys: <PasskeyArgType[]>([]),
-      selectedPasskey: <PasskeyArgType>({}),
-      safeAddress: <string>(''),
-      isSafeDeployed: <boolean>(false),
-      isLoading: <boolean>(false),
-      userOp: <string>(''),
-      jiffyLink: <string>(''),
-      safeLink: <string>(''),
-    }),
-    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: <PasskeyArgType[]>[],
+    selectedPasskey: <PasskeyArgType>{},
+    safeAddress: <string>'',
+    isSafeDeployed: <boolean>false,
+    isLoading: <boolean>false,
+    userOp: <string>'',
+    jiffyLink: <string>'',
+    safeLink: <string>''
+  }),
+  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
@@ -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
@@ -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<PasskeyArgType>} Passkey object with rawId and coordinates.
  * @throws {Error} If passkey creation fails.
  */
-export async function createPasskey (): Promise<PasskeyArgType> {
+export async function createPasskey(): Promise<PasskeyArgType> {
   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<PasskeyArgType> {
   }
 
   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
@@ -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 (
-    <html lang='en'>
+    <html lang="en">
       <body className={inter.className}>
         <nav
           style={{
@@ -28,27 +28,27 @@ export default function RootLayout ({
             padding: '1rem'
           }}
         >
-          <a href='https://safe.global'>
+          <a href="https://safe.global">
             <Safe width={95} height={36} />
           </a>
           <div style={{ display: 'flex' }}>
             <a
-              href='https://docs.safe.global/home/passkeys-tutorials/safe-passkeys-tutorial'
+              href="https://docs.safe.global/home/passkeys-tutorials/safe-passkeys-tutorial"
               style={{
                 display: 'flex',
                 alignItems: 'center',
                 marginRight: '1rem'
               }}
-              target='_blank'
-              rel='noopener noreferrer'
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Read tutorial <ExternalLink style={{ marginLeft: '0.5rem' }} />
             </a>
             <a
-              href='https://github.com/5afe/safe-passkeys-tutorial'
+              href="https://github.com/5afe/safe-passkeys-tutorial"
               style={{ display: 'flex', alignItems: 'center' }}
-              target='_blank'
-              rel='noopener noreferrer'
+              target="_blank"
+              rel="noopener noreferrer"
             >
               View on GitHub{' '}
               <Github width={24} height={24} style={{ marginLeft: '0.5rem' }} />