refactor: changing the way state is managed

apps/sample-react-app/package.json

@@ -44,6 +44,7 @@
         "@vechain/hardhat-web3": "^0.1.4",
         "@vechain/picasso": "^2.1.1",
         "@vechain/react-wallet-kit": "*",
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
         "@vechain/web3-providers-connex": "^1.1.2",

apps/sample-react-app/src/Components/SwitchWalletButton.tsx

@@ -14,22 +14,20 @@ export const SwitchWalletButton: React.FC<SwitchWalletButtonProps> = ({
 }): React.ReactElement => {
     const { isOpen, onOpen, onClose } = useDisclosure();
 
-    const {
-        accountState: { address, source },
-    } = useWallet();
+    const { account, source } = useWallet();
 
-    if (address && source)
+    if (account && source)
         return (
             <>
                 <AccountDetailModal
-                    address={address}
+                    address={account}
                     isOpen={isOpen}
                     onClose={onClose}
                     source={source}
                 />
                 <AddressButton
                     {...buttonProps}
-                    address={address}
+                    address={account}
                     onClick={onOpen}
                     showCopyIcon={false}
                 />

apps/sample-react-app/src/Components/layout/NavBar.tsx

@@ -18,7 +18,6 @@ import type { JSX } from 'react';
 import React from 'react';
 import { Bars3Icon } from '@heroicons/react/24/solid';
 import { useWallet } from '@vechain/react-wallet-kit';
-import { VechainLogo } from '../../Logos';
 import { AccountDetailBody } from '../AccountDetailBody';
 import { SwitchWalletButton } from '../SwitchWalletButton';
 
@@ -49,9 +48,7 @@ export const NavBar = (): JSX.Element => {
 const DesktopNavBar = (): JSX.Element => {
     return (
         <>
-            <Box h="30px">
-                <VechainLogo />
-            </Box>
+            <Box h="30px" />
             <NavBarWalletConnect />
         </>
     );
@@ -62,9 +59,7 @@ const MobileNavBar = (): JSX.Element => {
     return (
         <>
             <MobileNavBarDrawer isOpen={isOpen} onClose={onClose} />
-            <Box h="30px">
-                <VechainLogo />
-            </Box>
+            <Box h="30px" />
             <IconButton
                 aria-label="light"
                 fontSize="20px"
@@ -84,7 +79,7 @@ const MobileNavBarDrawer = ({
     isOpen,
     onClose,
 }: MobileNavBarDrawerProps): JSX.Element => {
-    const { accountState, disconnect } = useWallet();
+    const { account, source, disconnect } = useWallet();
 
     return (
         <Drawer isOpen={isOpen} onClose={onClose} placement="right">
@@ -94,11 +89,11 @@ const MobileNavBarDrawer = ({
                     <VStack h="full" justifyContent="space-between" w="full">
                         <VStack alignItems="flex-start" spacing={4} w="full">
                             <Text>Connected Wallet</Text>
-                            {accountState.address && accountState.source ? (
+                            {account && source ? (
                                 <AccountDetailBody
-                                    accountAddress={accountState.address}
+                                    accountAddress={account}
                                     disconnectWallet={disconnect}
-                                    source={accountState.source}
+                                    source={source}
                                 />
                             ) : (
                                 <SwitchWalletButton />

apps/sample-react-app/src/Logos/Logo.tsx

@@ -1,36 +1,17 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Image, useColorModeValue } from '@chakra-ui/react';
+import { Image } from '@chakra-ui/react';
 import React from 'react';
+import { VeWorldLogo as VWLogo } from '@vechain/vanilla-wallet-kit';
 
 type IIMage = HTMLChakraProps<'img'>;
 
-export const VechainLogo: React.FC<IIMage> = ({
-    ...props
-}): React.ReactElement => {
-    const lightModeUrl = `${process.env.PUBLIC_URL}/images/logo/vechain.png`;
-    const darkModeUrl = `${process.env.PUBLIC_URL}/images/logo/vechain_white.png`;
-    const logoUrl = useColorModeValue(lightModeUrl, darkModeUrl);
-    return (
-        <Image
-            alt="Vechain logo"
-            h="full"
-            objectFit="cover"
-            src={logoUrl}
-            {...props}
-        />
-    );
-};
-
 export const VeWorldLogo: React.FC<IIMage> = ({ ...props }) => {
-    const lightModeUrl = `${process.env.PUBLIC_URL}/images/logo/veWorld.png`;
-    const darkModeUrl = `${process.env.PUBLIC_URL}/images/logo/veworld_black.png`;
-    const logoUrl = useColorModeValue(lightModeUrl, darkModeUrl);
     return (
         <Image
             alt="VeWorld logo"
             h="full"
             objectFit="cover"
-            src={logoUrl}
+            src={VWLogo}
             {...props}
         />
     );

apps/sample-react-app/src/Screens/components/Counter.tsx

@@ -18,7 +18,7 @@ import { useCounter } from '../../Hooks/useCounter';
 import { AddressButton } from '../../Components';
 
 export const Counter = (): JSX.Element => {
-    const { accountState } = useWallet();
+    const { account } = useWallet();
     const { count, increment, status, address, error } = useCounter();
     const toast = useToast();
 
@@ -40,17 +40,15 @@ export const Counter = (): JSX.Element => {
         return (
             <Button
                 disabled={
-                    !accountState.address ||
-                    status === 'pending' ||
-                    status === 'in-wallet'
+                    !account || status === 'pending' || status === 'in-wallet'
                 }
                 leftIcon={<Icon as={ArrowUpIcon} />}
                 onClick={incrementCounter}
             >
                 Increment
             </Button>
         );
-    }, [accountState.address, incrementCounter, status]);
+    }, [account, incrementCounter, status]);
 
     const message = useMemo(() => {
         switch (status) {

apps/sample-vue-app/src/App.vue

@@ -5,37 +5,18 @@
             <vwk-connect-button-with-modal
                 mode="DARK"
             ></vwk-connect-button-with-modal>
-            <ConnectWalletModal v-show="isModalVisible" @close="closeModal" />
         </div>
     </ConnexProvider>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import ConnexProvider from '@/connex/ConnexProvider.vue';
 
 export default defineComponent({
     components: {
         ConnexProvider,
     },
-
-    setup() {
-        const isModalVisible = ref(false);
-
-        const showModal = () => {
-            isModalVisible.value = true;
-        };
-
-        const closeModal = () => {
-            isModalVisible.value = false;
-        };
-
-        return {
-            isModalVisible,
-            showModal,
-            closeModal,
-        };
-    },
 });
 </script>
 

apps/sample-vue-app/src/connex/ConnexProvider.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, readonly, toRefs } from 'vue';
 import {
+    ConnectResponse,
     MultiWalletConnex,
     WalletSource,
-    WalletSources,
 } from '@vechain/wallet-kit';
 import type Connex from '@vechain/connex';
 import {
@@ -46,32 +46,42 @@ const walletConnectOptions: WalletConnectOptions = {
 export default defineComponent({
     setup() {
         const walletState: WalletState = reactive<WalletState>({
-            wallets: WalletSources,
-            availableWallets: initWallets(true),
+            availableWallets: initWallets(!!walletConnectOptions),
             source: null,
             account: null,
         });
 
-        const onDisconnected = () => {
-            walletState.account = null;
-            walletState.source = null;
-        };
-
         const connex = new MultiWalletConnex({
             nodeUrl: 'https://mainnet.vechain.org/',
-            onDisconnected,
             walletConnectOptions,
         });
 
+        const onDisconnected = () => {
+            walletState.source = null;
+            walletState.account = null;
+        };
+
+        const onSourceChanged = (source: WalletSource | null) => {
+            walletState.source = source;
+        };
+
+        connex.wallet.onDisconnected(onDisconnected);
+        connex.wallet.onSourceChanged(onSourceChanged);
+
         configureThorModal(connex);
 
-        const updateAccount = (addr: string) => {
+        const setAccount = (addr: string) => {
             walletState.account = addr;
         };
 
-        const updateSource = (source: WalletSource) => {
+        const setSource = (source: WalletSource) => {
             connex.wallet.setSource(source);
-            walletState.source = source;
+        };
+
+        const connect = async (): Promise<ConnectResponse> => {
+            const res = await connex.wallet.connect();
+            walletState.account = res.account;
+            return res;
         };
 
         const _connex: Connex = {
@@ -84,11 +94,12 @@ export default defineComponent({
             walletState.source = null;
             walletState.account = null;
         };
+
         const walletActions: WalletActions = {
-            updateAccount,
-            updateSource,
+            setAccount,
+            setSource,
             disconnect,
-            connect: connex.wallet.connect,
+            connect,
         };
 
         provide(ConnexSymbol, readonly(_connex));

apps/sample-vue-app/src/connex/injections.ts

@@ -7,12 +7,33 @@ import {
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
 
+const NOT_SETUP = new Error('`ConnexProvider` not setup properly');
+
+const defaultState: WalletState = {
+    account: null,
+    source: null,
+    availableWallets: [],
+};
+
+const defaultActions: WalletActions = {
+    setAccount: () => {
+        throw NOT_SETUP;
+    },
+    setSource: () => {
+        throw NOT_SETUP;
+    },
+    connect: () => Promise.reject(NOT_SETUP),
+    disconnect: () => {
+        throw NOT_SETUP;
+    },
+};
+
 const injectConnex = (): Connex => inject<Connex>(ConnexSymbol, {} as Connex);
 
 const injectWalletState = (): WalletState =>
-    inject(WalletStateSymbol, {} as WalletState);
+    inject(WalletStateSymbol, defaultState);
 
 const injectWalletActions = (): WalletActions =>
-    inject(WalletActionsSymbol, {} as WalletActions);
+    inject(WalletActionsSymbol, defaultActions);
 
 export { injectConnex, injectWalletState, injectWalletActions };

apps/sample-vue-app/src/connex/types.d.ts

@@ -1,16 +1,14 @@
-import { WalletSource } from '@vechain/wallet-kit';
-import { ConnectResponse } from '@vechain/wallet-kit/src/types';
+import { ConnectResponse, WalletSource } from '@vechain/wallet-kit';
 
 type WalletState = {
-    wallets: WalletSource[];
     availableWallets: WalletSource[];
     source: WalletSource | null;
     account: string | null;
 };
 
 type WalletActions = {
-    updateAccount: (account: string) => void;
-    updateSource: (source: WalletSource) => void;
+    setAccount: (account: string) => void;
+    setSource: (source: WalletSource) => void;
     connect: () => Promise<ConnectResponse>;
     disconnect: () => void;
 };

packages/react-wallet-kit/package.json

@@ -19,6 +19,7 @@
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
         "@vechain/picasso": "^2.1.1",
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
         "thor-devkit": "^2.0.9"