Below you will find the list of most essential utilities, hooks, and components with examples that are actual code from the Dapp. You can search them in the code to better understand how they work.
There are much more hooks and tools, but most of them are already used in the ones listed below.
The code samples are not ready to copy and paste. Please search them in the code.
The template is based on @useelven/core npm library.
useNetworkSync hook from useElven takse whole custom configuration. Elven Tools Dapp is based pn .env variables that are passed to useNetworkSync. These are for now chainType and optionally API endpoint.
Besides that, there are custom React components that will help you with development.
The component provides the Connect button with the modal, which will contain another four buttons for three different authentication possibilities (xPortal Mobile App, MultiversX Defi Wallet - browser extension, Web Wallet, Ledger). You should be able to use it in any place on the website. It also includes the LoginComponent (login buttons).
import { LoginModalButton } from "../tools/LoginModalButton";
<LoginModalButton />;
The component is used as a small wrapper where we need to be in the authenticated context, for example, for all transactions.
It can display the spinner and also the fallback React element.
Important Do not wrap it in big sections of the code. Its purpose is to be used multiple times on as small blocks as possible.
But all code 'blocks' in your app that require the network and auth sync should be wrapped with it.
<Authenticated
spinnerCentered
fallback={
<>
<Text fontWeight="bold" fontSize="2xl" textAlign="center" mt={8}>
Connect your wallet!
</Text>
<Flex mt={4} justifyContent="center">
<LoginModalButton />
</Flex>
</>
}
>
<Box>Do something here in the auth context...</Box>
</Authenticated>
The wrapper component that checks if users are logged in and redirects to chosen path if they are not. You should wrap whole page content with it. You should use it only for pages that should be accessible for logged in users. Remember that this is only client side check.
const Profile = () => {
return (
<ProtectedPageWrapper>
<MainLayout>
<HeaderMenu>
<HeaderMenuButtons enabled={['auth', 'about', 'mint']} />
</HeaderMenu>
<ProfileUserData />
<ProfileNFTsList />
</MainLayout>
</ProtectedPageWrapper>
);
};