Web3modal and Moralis

Moralis General
#1

Hi there! Is it possible to user web3modal and Moralis auth with Vue?
Because in all examples there is React for web3modal and Moralis auth.

1 Like
#2

you can use moralis and set up your own web3 modal like follows. first you should make a connectors file with the details of all the wallets you want to have as options. that file would look lik ethis

import WalletConnect from './WalletIcons/WC';
import MathWallet from './WalletIcons/MathWallet';
import TokenPocket from './WalletIcons/TokenPocket';
import SafePal from './WalletIcons/SafePal';
import TrustWallet from './WalletIcons/TWT';
import Metamask from './WalletIcons/Metamask';

/**
 * We have here connectorId : 'metamask' but actually it's 'injected' type
 * Currently there is no type 'injected' in react-moralis
 * so it's temporary
 */

const connectors = [
    {
        title: 'Metamask',
        icon: Metamask,
        connectorId: 'metamask',
        priority: 1,
    },
    {
        title: 'WalletConnect',
        icon: WalletConnect,
        connectorId: 'walletconnect',
        priority: 2,
    },
    {
        title: 'Trust Wallet',
        icon: TrustWallet,
        connectorId: 'metamask',
        priority: 3,
    },
    {
        title: 'MathWallet',
        icon: MathWallet,
        connectorId: 'metamask',
        priority: 999,
    },
    {
        title: 'TokenPocket',
        icon: TokenPocket,
        connectorId: 'metamask',
        priority: 999,
    },
    {
        title: 'SafePal',
        icon: SafePal,
        connectorId: 'metamask',
        priority: 999,
    },
];

export default connectors;

then in your wallet modal file you should make a modal that opens whenever you click some connect button for example, then you can map through all of the connectors from above as buttons that when clicked will connect using that wallet.

import Moralis from 'moralis/types';
import React, { FC } from 'react';
import { useMoralis } from 'react-moralis';
import { Button } from '../Button';
import { iconTypes } from '../Icon';
import connectors from './config';
import { WalletModalProps } from './types';
import WalletModalStyles from './WalletModal.styles';

const {
    GridItemStyled,
    GridStyled,
    HeaderStyled,
    ModalStyled,
    TitleStyled,
    WalletCardStyled,
    WalletLogo,
    WalletNameStyled,
    WrapperStyled,
} = WalletModalStyles;

const WalletModal: FC<WalletModalProps> = ({
    isOpened = true,
    moralisAuth,
    setIsOpened,
}) => {
    const { authenticate, isInitialized, enableWeb3 } = useMoralis();

    function connectWallet(connectorId: Moralis.Web3ProviderType) {
      //saefy check for next.js
        if (typeof window == 'undefined') return;
        const connectProps = {
            provider: connectorId,
            onSuccess: () => {
                window.localStorage.setItem('connectorId', connectorId);
                setIsOpened(false);
            },
        };
        isInitialized && moralisAuth
            ? authenticate(connectProps)
            : enableWeb3(connectProps);
    }

    if (!isOpened) return null;

    return (
        <WrapperStyled>
            <ModalStyled>
                <HeaderStyled>
                    <TitleStyled>Connect Wallet</TitleStyled>
                    <Button
                        icon={iconTypes.x}
                        iconLayout="icon-only"
                        theme="outline"
                        onClick={() => setIsOpened(!isOpened)}
                    />
                </HeaderStyled>
                <GridStyled>
                    {connectors.map(({ title, icon, connectorId }, key) => (
                        <GridItemStyled key={key}>
                            <WalletCardStyled
                                onClick={() =>
                                    connectWallet(
                                        connectorId as Moralis.Web3ProviderType,
                                    )
                                }
                            >
                                <WalletLogo>{icon()}</WalletLogo>
                                <WalletNameStyled>{title}</WalletNameStyled>
                            </WalletCardStyled>
                        </GridItemStyled>
                    ))}
                </GridStyled>
            </ModalStyled>
        </WrapperStyled>
    );
};

export default WalletModal;

you will need to make the styled compent css yourself tho

#3

Tnx, but i need solution for Vue with Moralis and Web3Modal

1 Like
#4

ahh sorry i have no experience with view. however if you look at the source code of web3 modal the above method in the snippet is pretty much similar to the approach they use, only they use web3React to activate wallets and handle web3 stuff

#5

i do like web3 modal but it can be fairly limited especially in terms of their moda design its a bit generic. what i would do is look at their source code and use it to make your own version if you cursious and like doing things from scratch. (good learning exp too). im not sure if moralis has any integration with web3mdal but you could look through their docs. and im not experienced enough with vue to give any advice on how you could proceed with setting things up in vue. i can ask @cryptokid if he knows anymore on your situation hes the pro here

#6

Thanks for reply. No need to disturb @cryptokid.

1 Like
#7

Can you not use this? web3modal-vue - npm (npmjs.com)

You could implement your own modal with a UI library as a Web3Modal alternative.

#8

Ill try, tnx!!!

#9

@panda.code.lab did you get anywhere with this? I so would be interested to hear your experience.

#10

Hi, is it possible to simply inject an already exisiting walletconnect connector/provider into the enableWeb3 hook like so enableWeb3(await web3Modal.connect()).

#11

See your new thread.