updates

.env.example

@@ -30,3 +30,5 @@ API_ALLOWED_DAPP_HOST = http://localhost:3000
 # =============================================
 
 NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS = erd1qqqqqqqqqqqqqpgqwd59aum8c7c72ces7cezsmhqd8rqrtwagtksp6jahr
+
+NEXT_PUBLIC_WC_PROJECT_ID=f89a4bd66d3879ea74637eec03497b46

README.md

@@ -29,6 +29,7 @@ Please report all bugs and ideas for improvements.
 
 ### You may also like
 
-- [Elven Tools](https://github.com/ElvenTools)
-- [Elven.js](https://github.com/juliancwirko/elven.js)
-- [Buildo Begins](https://github.com/xdevguild/buildo-begins)
+- [Elven Tools - NFT/SFT tools](https://github.com/ElvenTools)
+- [Elven.js - lite browse only SDK](https://github.com/juliancwirko/elven.js)
+- [useElven - custom React hooks](https://github.com/useElven)
+- [Buildo Begins - CLI tools for interaction](https://github.com/xdevguild/buildo-begins)

components/containers/SCTokensTable.tsx

@@ -42,7 +42,7 @@ export const ScTokensTable: FC<ScTokensTable> = ({
       <Spinner
         thickness="3px"
         speed="0.4s"
-        color="elvenTools.color2.base"
+        color="dappTemplate.color2.base"
         size="md"
         mt={3}
       />

components/tools/Authenticated.tsx

@@ -22,7 +22,7 @@ export const Authenticated: FC<PropsWithChildren<AuthenticatedProps>> = ({
         <Spinner
           thickness="3px"
           speed="0.4s"
-          color="elvenTools.color2.base"
+          color="dappTemplate.color2.base"
           size="md"
           mt={3}
         />

components/tools/LedgerAccountsList.tsx

@@ -26,55 +26,81 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
   handleLogin,
 }) => {
   const [accounts, setAccounts] = useState<string[]>();
-  const [currentPage, setCurrentPage] = useState(0);
   const [listPending, setListPending] = useState(true);
   const [error, setError] = useState<string>();
   const [chosenAddress, setAddress] = useState<string>();
 
   const { loginToken } = useLoginInfo();
 
-  const mounted = useRef(false);
-
   const router = useRouter();
 
-  useEffect(() => {
-    mounted.current = true;
+  const handleAccounts = async (page: number) => {
+    const accountsResult = await getHWAccounts(page, ADDRESSES_PER_PAGE);
+    if (accountsResult?.length > 0) setAccounts(accountsResult);
+  };
+
+  const handleErrors = (e: unknown) => {
+    const err = e as { statusCode: number; name: string };
+    if (
+      err.statusCode === LEDGER_NOT_CONNECTED_CODE ||
+      err.name === LEDGER_DISCONNECTED
+    ) {
+      setError(
+        'Not connected, please check the connection and make sure that you have the MultiversX app opened on your Ledger device.'
+      );
+    } else {
+      setError(`Error: ${errorParse(e)}`);
+    }
+  };
 
+  const fetchedOnce = useRef<boolean>(false);
+  useEffect(() => {
     const fetch = async () => {
+      setListPending(true);
       try {
-        mounted.current && setListPending(true);
-        const accounts = await getHWAccounts(currentPage, ADDRESSES_PER_PAGE);
-        if (accounts?.length > 0 && mounted.current) setAccounts(accounts);
+        await handleAccounts(0);
       } catch (e) {
-        const err = e as { statusCode: number; name: string };
-        if (
-          (err.statusCode === LEDGER_NOT_CONNECTED_CODE ||
-            err.name === LEDGER_DISCONNECTED) &&
-          mounted.current
-        ) {
-          setError(
-            'Not connected, please check the connection and make sure that you have the MultiversX app opened on your Ledger device.'
-          );
-        } else {
-          setError(`Error: ${errorParse(e)}`);
-        }
+        handleErrors(e);
       } finally {
-        mounted.current && setListPending(false);
+        setListPending(false);
       }
     };
-    fetch();
+    if (!fetchedOnce.current) fetch();
     return () => {
-      mounted.current = false;
+      fetchedOnce.current = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPage]);
+  }, []);
 
-  const handlePrev = useCallback(() => {
-    setCurrentPage((prevState) => (prevState > 0 ? prevState - 1 : prevState));
+  const currentPage = useRef<number>(0);
+
+  const handlePrev = useCallback(async () => {
+    setListPending(true);
+    try {
+      const prevPage =
+        currentPage.current > 0 ? currentPage.current - 1 : currentPage.current;
+      currentPage.current = prevPage;
+      await handleAccounts(prevPage);
+    } catch (e) {
+      handleErrors(e);
+    } finally {
+      setListPending(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleNext = useCallback(() => {
-    setCurrentPage((prevState) => prevState + 1);
+  const handleNext = useCallback(async () => {
+    setListPending(true);
+    try {
+      const nextPage = currentPage.current + 1;
+      currentPage.current = nextPage;
+      await handleAccounts(nextPage);
+    } catch (e) {
+      handleErrors(e);
+    } finally {
+      setListPending(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleRefresh = useCallback(() => {
@@ -93,12 +119,13 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
     if (!listPending && !accounts && !error) {
       resetLoginMethod();
     }
-  }, [accounts, error, listPending, resetLoginMethod]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [accounts, error, listPending]);
 
   if (listPending) {
     return (
       <Flex justify="center" align="center" marginTop={6} direction="column">
-        <Spinner color="elvenTools.color2.base" />
+        <Spinner color="dappTemplate.color2.base" />
         <Box marginTop={3}>Loading addresses, please wait...</Box>
       </Flex>
     );
@@ -125,7 +152,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
   if (chosenAddress)
     return (
       <Flex justify="center" align="center" marginTop={6} direction="column">
-        <Spinner color="elvenTools.color2.base" />
+        <Spinner color="dappTemplate.color2.base" />
         <Box marginTop={3}>Confirm on the Ledger device:</Box>
         <Box marginTop={3} wordBreak="break-word" textAlign="center">
           <Box fontWeight="bold">Address:</Box> {chosenAddress}
@@ -157,7 +184,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
           onClick={login(index, account)}
         >
           <Box as="span" display="inline-block" textAlign="center" minWidth={4}>
-            {index + currentPage * ADDRESSES_PER_PAGE}
+            {index + currentPage.current * ADDRESSES_PER_PAGE}
           </Box>
           :
           <Box
@@ -173,8 +200,8 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
       <Flex justifyContent="space-between" marginTop={6}>
         <Text
           onClick={handlePrev}
-          cursor={currentPage === 0 ? 'not-allowed' : 'pointer'}
-          opacity={currentPage === 0 ? 0.5 : 1}
+          cursor={currentPage.current === 0 ? 'not-allowed' : 'pointer'}
+          opacity={currentPage.current === 0 ? 0.5 : 1}
         >
           Prev
         </Text>

components/tools/LoginComponent.tsx

@@ -3,16 +3,24 @@
 import { useCallback, memo, useState } from 'react';
 import { Box, Stack } from '@chakra-ui/react';
 import { useLogin, LoginMethodsEnum } from '@useelven/core';
-import { MobileLoginQR } from './MobileLoginQR';
+import { WalletConnectQRCode } from './WalletConnectQRCode';
+import { WalletConnectPairings } from './WalletConnectPairings';
 import { ActionButton } from './ActionButton';
 import { LedgerAccountsList } from './LedgerAccountsList';
 
 export const LoginComponent = memo(() => {
-  // If you need the auth signature and token you can pass it here
-  // example: const { ... } = useLogin({ token: "some_hash_here" })
-  // all auth providers will return the signature, it will be saved in localstorage and global state
-  const { login, isLoggedIn, error, walletConnectUri, getHWAccounts } =
-    useLogin();
+  // If you need the auth signature and token pas your unique token in useLogin
+  // For the demo purposes here is a dummy token, you should probably use MX Native Auth token
+  const {
+    login,
+    isLoggedIn,
+    error,
+    walletConnectUri,
+    getHWAccounts,
+    walletConnectPairings,
+    walletConnectPairingLogin,
+    walletConnectRemovePairing,
+  } = useLogin({ token: 'token_just_for_testing_purposes' });
 
   const [loginMethod, setLoginMethod] = useState<LoginMethodsEnum>();
 
@@ -65,9 +73,20 @@ export const LoginComponent = memo(() => {
       </Stack>
       {loginMethod === LoginMethodsEnum.walletconnect && walletConnectUri && (
         <Box mt={5}>
-          <MobileLoginQR walletConnectUri={walletConnectUri} />
+          <WalletConnectQRCode uri={walletConnectUri} />
         </Box>
       )}
+
+      {loginMethod === LoginMethodsEnum.walletconnect &&
+        walletConnectPairings &&
+        walletConnectPairings.length > 0 && (
+          <WalletConnectPairings
+            pairings={walletConnectPairings}
+            login={walletConnectPairingLogin}
+            remove={walletConnectRemovePairing}
+          />
+        )}
+
       {loginMethod === LoginMethodsEnum.ledger && (
         <LedgerAccountsList
           getHWAccounts={getHWAccounts}

components/tools/LoginModalButton.tsx

@@ -8,6 +8,7 @@ import {
   useDisclosure,
   Spinner,
   Flex,
+  ModalHeader,
 } from '@chakra-ui/react';
 import { FC } from 'react';
 import { useLogin, useLogout } from '@useelven/core';
@@ -28,7 +29,7 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
   onClose,
   onOpen,
 }) => {
-  const { isLoggedIn, isLoggingIn } = useLogin();
+  const { isLoggedIn, isLoggingIn, setLoggingInState } = useLogin();
   const { logout } = useLogout();
   const {
     isOpen: opened,
@@ -42,14 +43,25 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
     }
   }, [isLoggedIn]);
 
+  const onCloseComplete = () => {
+    setLoggingInState('error', '');
+  };
+
   return (
     <>
       {isLoggedIn ? (
         <ActionButton onClick={logout}>Disconnect</ActionButton>
       ) : (
         <ActionButton onClick={open}>Connect</ActionButton>
       )}
-      <Modal isOpen={opened} size="sm" onClose={close} isCentered>
+      <Modal
+        isOpen={opened}
+        size="sm"
+        onClose={close}
+        isCentered
+        scrollBehavior="inside"
+        onCloseComplete={onCloseComplete}
+      >
         <CustomModalOverlay />
         <ModalContent
           bgColor="dappTemplate.dark.darker"
@@ -59,10 +71,12 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
           position="relative"
         >
           <ModalCloseButton _focus={{ outline: 'none' }} />
-          <ModalBody>
+          <ModalHeader>
             <Text textAlign="center" mb={7} fontWeight="black" fontSize="2xl">
               Connect your wallet
             </Text>
+          </ModalHeader>
+          <ModalBody>
             {isLoggingIn && (
               <Flex
                 alignItems="center"

components/tools/WalletConnectPairings.tsx

@@ -0,0 +1,71 @@
+import { FC, MouseEventHandler } from 'react';
+import { PairingTypes } from '@useelven/core';
+import { Stack, Box, Text, Heading, IconButton } from '@chakra-ui/react';
+import { CloseIcon } from '@chakra-ui/icons';
+
+interface WalletConnectPairingsProps {
+  pairings: PairingTypes.Struct[];
+  login: (topic: string) => Promise<void>;
+  remove: (topic: string) => Promise<void>;
+}
+
+export const WalletConnectPairings: FC<WalletConnectPairingsProps> = ({
+  pairings,
+  login,
+  remove,
+}) => {
+  const handleLogin = (topic: string) => () => {
+    login(topic);
+  };
+
+  const handleRemove =
+    (topic: string): MouseEventHandler<HTMLButtonElement> | undefined =>
+    (e) => {
+      e.stopPropagation();
+      remove(topic);
+    };
+
+  return (
+    <Stack>
+      {pairings?.length > 0 && (
+        <Heading size="md" mt={4}>
+          Existing pairings:
+        </Heading>
+      )}
+      {pairings.map((pairing) => (
+        <Box
+          bgColor="dappTemplate.white"
+          py={2}
+          px={4}
+          pr={8}
+          borderRadius="md"
+          key={pairing.topic}
+          cursor="pointer"
+          onClick={handleLogin(pairing.topic)}
+          userSelect="none"
+          position="relative"
+        >
+          <IconButton
+            position="absolute"
+            top={2}
+            right={2}
+            aria-label="remove-pairing"
+            color="dappTemplate.dark.base"
+            h={6}
+            minW={6}
+            icon={<CloseIcon boxSize={2} />}
+            onClick={handleRemove(pairing.topic)}
+          />
+          <Text fontSize="lg" color="dappTemplate.dark.base">
+            {pairing.peerMetadata?.name}
+          </Text>
+          {pairing.peerMetadata?.url ? (
+            <Text fontSize="xs" color="dappTemplate.dark.base">
+              ({pairing.peerMetadata.url})
+            </Text>
+          ) : null}
+        </Box>
+      ))}
+    </Stack>
+  );
+};