Kyc.vue

<template>
    <div>
        <button v-if="isReady" @click="launchWidget">Start KYC Verification</button>
        <div v-else>
            <p>Loading Wallet Connection...</p>
        </div>
        <div id="zkme-widget"></div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { ZkMeWidget, type Provider } from "@zkmelabs/widget";
import { getAccount, signMessage, sendTransaction, prepareTransactionRequest } from "@wagmi/core";
import { wagmiConfig } from "../assets/js/wagmiConfig";
import "@zkmelabs/widget/dist/style.css";

const APP_ID = process.env.VUE_APP_ZK_ME_APP_ID || "";
const API_KEY = process.env.VUE_APP_ZK_ME_API_KEY || "";
const PROGRAM_NO = process.env.VUE_APP_ZK_ME_PROGRAM_NO || "";

export default defineComponent({
    name: "KycRequest",
    setup() {
        const isReady = ref(false);

        const fetchAccessToken = async (): Promise<string> => {
            try {
                const response = await fetch("https://nest-api.zk.me/api/token/get", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        apiKey: API_KEY,
                        appId: APP_ID,
                        apiModePermission: 1,
                        lv: 1,
                    }),
                });

                const data = await response.json();
                if (response.ok && data.code === 80000000) {
                    return data.data.accessToken;
                } else {
                    throw new Error(data.msg || "Failed to generate access token");
                }
            } catch (error) {
                console.log("Error fetching access token:", error);
                throw error;
            }
        };

        const initializeProviderData = async () => {
            try {
                const account = getAccount(wagmiConfig);

                if (!account?.address) {
                    throw new Error("Wallet is not connected.");
                }

                const accessToken = await fetchAccessToken();

                return {
                    address: account.address,
                    accessToken,
                    signMessage: async (message: string) => {
                        console.log("Signing message:", message);
                        const signature = await signMessage(wagmiConfig, { message });
                        return signature;
                    },
                    delegateTransaction: async (tx: any): Promise<string> => {
                        const transactionRequest = await prepareTransactionRequest(wagmiConfig, {
                            ...tx,
                            chainId: 137,
                        });
                        transactionRequest.chainId = 0x89;

                        const txResponse = await sendTransaction(wagmiConfig, transactionRequest);
                        return txResponse;
                    },
                };
            } catch (error) {
                console.log("Error initializing provider data:", error);
                throw error;
            }
        };

        const launchWidget = async () => {
            try {
                const { address, accessToken, signMessage, delegateTransaction } = await initializeProviderData();

                const provider: Provider = {
                    async getAccessToken() {
                        return accessToken;
                    },
                    async getUserAccounts() {
                        return [address];
                    },
                    async signMessage(message: string) {
                        return signMessage(message);
                    },
                    async delegateTransaction(tx: any) {
                        return delegateTransaction(tx);
                    },
                };

                const zkMeWidget = new ZkMeWidget(APP_ID, "DeltaCraft", "0x89", provider, {
                    lv: "zkKYC",
                    programNo: PROGRAM_NO,
                });

                zkMeWidget.on("kycFinished", (results) => {
                    console.log("KYC Finished:", results);
                });

                zkMeWidget.launch();
            } catch (error) {
                console.log("Error launching KYC widget:", error);
            }
        };

        onMounted(async () => {
            try {
                const account = getAccount(wagmiConfig);
                if (account?.address) {
                    console.log("Wallet is ready for KYC.");
                    isReady.value = true;
                } else {
                    console.log("Wallet not ready.");
                }
            } catch (error) {
                console.log("Error initializing WalletConnect:", error);
            }
        });

        return {
            isReady,
            launchWidget,
        };
    },
});
</script>

<style scoped>
#zkme-widget {
    margin-top: 20px;
}
</style>