update dependencies and adjust the code

xdevguild · Mar 10, 2024 · e91f086 · e91f086
1 parent 06e08c3
commit e91f086
Show file tree

Hide file tree

Showing 6 changed files with 2,749 additions and 969 deletions.
diff --git a/components/containers/Deposit.tsx b/components/containers/Deposit.tsx
@@ -1,13 +1,10 @@
 import { Box, Spinner, Input, Stack, Text, Heading } from '@chakra-ui/react';
-import { useCallback, useState } from 'react';
-import { BigUIntValue } from '@multiversx/sdk-core';
-import {
-  useConfig,
-  useTokenTransfer,
-  ScTokenTransferType,
-} from '@useelven/core';
+import { useState } from 'react';
+import { BigUIntValue, TokenTransfer } from '@multiversx/sdk-core';
+import { useConfig, useTokenTransfer, ESDTType } from '@useelven/core';
 import { ActionButton } from '../tools/ActionButton';
 import { shortenHash } from '../../utils/shortenHash';
+import { Authenticated } from '../tools/Authenticated';
 
 const InputWrapper = ({ ...props }) => {
   return (
@@ -19,13 +16,13 @@ const InputWrapper = ({ ...props }) => {
 };
 
 export const Deposit = () => {
-  const { explorerAddress } = useConfig();
+  const { explorerAddress, apiAddress } = useConfig();
   const [tokenId, setTokenId] = useState('');
   const [amount, setAmount] = useState('');
   const [maxAmountPerDay, setMaxAmountPerDay] = useState('');
   const { pending, transfer, transaction } = useTokenTransfer();
 
-  const handleDepositTx = useCallback(() => {
+  const handleDepositTx = async () => {
     if (
       !process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS ||
       !tokenId ||
@@ -34,21 +31,27 @@ export const Deposit = () => {
     )
       return;
 
-    const limitArgument = new BigUIntValue(maxAmountPerDay);
+    const response = await fetch(`${apiAddress}/tokens/${tokenId.trim()}`);
+    const data = await response.json();
+    const tokenTransfer = TokenTransfer.fungibleFromAmount(
+      tokenId,
+      maxAmountPerDay,
+      data.decimals
+    );
+
     transfer({
-      type: ScTokenTransferType.ESDTTransfer,
+      type: ESDTType.FungibleESDT,
       tokenId,
-      address: process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
+      receiver: process.env.NEXT_PUBLIC_FAUCET_SMART_CONTRACT_ADDRESS,
       amount,
       gasLimit: 3000000,
-      value: 0,
       endpointName: 'setLimit',
-      endpointArgs: [limitArgument],
+      endpointArgs: [new BigUIntValue(tokenTransfer.amountAsBigInteger)],
     });
     setTokenId('');
     setAmount('');
     setMaxAmountPerDay('');
-  }, [amount, maxAmountPerDay, tokenId, transfer]);
+  };
 
   const handleTokenChange = (event: React.ChangeEvent<HTMLInputElement>) =>
     setTokenId(event.target.value);
@@ -63,34 +66,37 @@ export const Deposit = () => {
   return (
     <Box>
       <Stack spacing={3}>
-        <Heading as="h5" size="md">
+        <Heading as="h5" size="md" mb={4}>
           Remember to use the wallet of the manager of the token.
         </Heading>
-        <Text mb={4}>Token Id (ticker, for example: BUILDO-890d14)</Text>
+        <Text>Token Id (ticker, for example: BUILDO-890d14)</Text>
         <InputWrapper
           placeholder="Token Id"
           size="lg"
           value={tokenId}
+          mb={4}
           onChange={handleTokenChange}
         />
-        <Text mb={4}>
-          Amount to deposit (for example 1000000000000000000 for 1 ESDT token
-          with 18 decimal places)
+        <Text>
+          Amount to deposit (for example 1 for 1 ESDT token, don&apos;t worry
+          about decimal places.)
         </Text>
         <InputWrapper
           placeholder="Amount to deposit"
           size="lg"
           value={amount}
+          mb={4}
           onChange={handleAmountChange}
         />
-        <Text mb={4}>
-          Max amount to claim per one address per day (for example
-          1000000000000000000 for 1 ESDT token with 18 decimal places)
+        <Text>
+          Max amount to claim per one address per day (for example 1 for 1 ESDT
+          token, don&apos;t worry about decimal places.)
         </Text>
         <InputWrapper
           placeholder="Max amount to claim"
           size="lg"
           value={maxAmountPerDay}
+          mb={4}
           onChange={handleMaxClaimAmountChange}
         />
       </Stack>
@@ -99,12 +105,14 @@ export const Deposit = () => {
         transaction hash.
       </Text>
       <Stack direction="row" mt={4} alignItems="center">
-        <ActionButton
-          disabled={pending || !tokenId || !amount || !maxAmountPerDay}
-          onClick={handleDepositTx}
-        >
-          Deposit
-        </ActionButton>
+        <Authenticated noSpinner fallback={<div>Connect your wallet</div>}>
+          <ActionButton
+            disabled={pending || !tokenId || !amount || !maxAmountPerDay}
+            onClick={handleDepositTx}
+          >
+            Deposit
+          </ActionButton>
+        </Authenticated>
         {pending && <Spinner ml={5} />}
         {transaction && process.env.NEXT_PUBLIC_MULTIVERSX_CHAIN ? (
           <Stack direction="row" ml={5}>

diff --git a/components/containers/SCTokensTable.tsx b/components/containers/SCTokensTable.tsx
@@ -15,6 +15,7 @@ import { useEffectOnlyOnUpdate } from '../../hooks/useEffectOnlyOnUpdate';
 import { SCToken } from '../../types/scToken';
 import { denominate } from '../../utils/denominate';
 import { ActionButton } from '../tools/ActionButton';
+import { Authenticated } from '../tools/Authenticated';
 
 interface ScTokensTable {
   handleChooseTokenToClaim: (token: SCToken) => () => void;
@@ -66,9 +67,14 @@ export const ScTokensTable: FC<ScTokensTable> = ({
               <Td>{token.identifier}</Td>
               <Td>{denominate(token.balance, token.decimals)}</Td>
               <Td textAlign="right">
-                <ActionButton onClick={handleChooseTokenToClaim(token)}>
-                  Claim
-                </ActionButton>
+                <Authenticated
+                  noSpinner
+                  fallback={<div>Connect your wallet</div>}
+                >
+                  <ActionButton onClick={handleChooseTokenToClaim(token)}>
+                    Claim
+                  </ActionButton>
+                </Authenticated>
               </Td>
             </Tr>
           ))}

diff --git a/components/ui/Footer.tsx b/components/ui/Footer.tsx
@@ -40,27 +40,7 @@ export const Footer = () => {
             target="_blank"
             rel="noopener noreferrer nofollow"
           >
-            {'Elven Tools'}
-          </Text>
-          {' - '}
-          <Text
-            as="a"
-            color="dappTemplate.color3.base"
-            href="https://www.useelven.com"
-            target="_blank"
-            rel="noopener noreferrer nofollow"
-          >
-            {'useElven'}
-          </Text>
-          {' - '}
-          <Text
-            as="a"
-            color="dappTemplate.color3.base"
-            href="https://github.com/juliancwirko/elven.js"
-            target="_blank"
-            rel="noopener noreferrer nofollow"
-          >
-            {'Elven.js'}
+            {'Elven Family Tools'}
           </Text>
           {' - '}
           <Text
@@ -73,16 +53,6 @@ export const Footer = () => {
             {'Nextjs Dapp Template'}
           </Text>
           {' - '}
-          <Text
-            as="a"
-            color="dappTemplate.color3.base"
-            href="https://github.com/xdevguild/buildo-begins"
-            target="_blank"
-            rel="noopener noreferrer nofollow"
-          >
-            {'Buildo Begins'}
-          </Text>
-          {' - '}
           <Text
             as="a"
             color="dappTemplate.color3.base"