Approach to converting React's Wallet Dependencies to Vue3

[e274426380]

Right now all of Sui's wallets don't support Vue, so I've used a plugin to make them work with Vue. I think this is a better interim solution, and using it could be a good breakthrough for Vue developers, so I'm sharing it. The plug-in used is Veaury plug-in URL：https://github.com/devilwjp/veaury This plugin does not require any other configuration, it is plug and play. The conversion is done in just a few steps I will use the ethos wallet plugin as an example to show how this is done Project : Vue3 + TypeScript Installation npm i veaury -S Use Create wallet.ts

import { ethos } from 'ethos-connect';
import { applyPureReactInVue, createCrossingProviderForPureVueInReact } from 'veaury'

// Create a react hooks across the tech stack to vue and a corresponding react provider to use
// provider needs to be wrapped around the component using hooks to get the value
const [useEthosForVue, EthosProviderForVue] = createCrossingProviderForPureVueInReact(
    function () {
        return {
            // Expose the value of React ethos to vue
            ethos: ethos.useWallet(),
        }
    }
)
const VueMissReact = applyPureReactInVue(EthosProviderForVue)
export {
    useEthosForVue,
    EthosProviderForVue,
    VueMissReact
}

In App.vue Note: The VueMiss component may not be used in App.vue, but it is an important associated part of using ethos and must be wrapped around the periphery of the place where ethos is to be used

<template>
    <EthosWalletProvider :ethosConfiguration="{hideEmailSignIn:true}">
        <VueMiss>
            <router-view/>
        </VueMiss>
    </EthosWalletProvider>
</template>

<script lang="ts" setup>
    import { applyPureReactInVue,} from 'veaury'
    import { EthosProviderForVue, VueMissReact } from "@/common/wallet";

    const EthosWalletProvider = applyPureReactInVue(EthosConnectProvider);
    const VueMiss = VueMissReact
</script>

Any Component

   import { useEthosForVue } from "@/common/wallet";
   const {ethos} = useEthosForVue();
   console.log("ethos",ethos)
   console.log("ethos.status",ethos.status)

Done Components and Api for ethos can now be used in Vue projects.

[jaredcosulich]

This looks great. Thank you for writing it up. We can look to incorporate these instructions into the ethos-connect documentation.

[e274426380]

@jaredcosulich Looking forward to your verification

[i-am-neon]

Hey @e274426380 do you have an email address/telegram that would be a good way of contacting you?

[e274426380]

@0xNeon-opensource sure，this is my email [email protected]

[Jordan-Mysten]

We're looking into generalizing the underlying logic for our UI layer so that it can be used in other frameworks more easily: https://github.com/MystenLabs/sui/pull/6577

For converting dependencies, this is an unsupported pattern for our libraries. I'd recommend building your own UI based on either this upcoming base wallet logic layer, or the existing wallet adapters.