Open source Dapp template for the Elrond blockchain.

Hi @juliancwirko,

First of all thank you for this extra ordinary work. This lightweight template is very impressive.

I would like to ask whether it has also support for calling smart contract endpoints, which expect MultiESDT payment.

Thanks!

Hi Julian,

This problem seems to be very difficult to replicate. But in general I am using your template and it works perfectly fine for me.

Recently I got a lot of reports that the sending transaction fails after signin with maiiar wallet. They have the same problem on your template website -> https://elrond-nextjs-dapp.netlify.app/.

So Far I managed to find that the line which is failing is await apiNetworkProvider.sendTransaction(tx); within sendTxOperation.ts.

This is then very general exception: Error: Request error on url [transactions]: [{"statusCode":400,"message":""}] at ApiNetworkProvider.handleApiError (apiNetworkProvider.js?5989:213:1) at ApiNetworkProvider.eval (apiNetworkProvider.js?5989:202:1) at Generator.throw (<anonymous>) at rejected (apiNetworkProvider.js?5989:6:42)

This really happening only for some users, at the moment I have no idea why.

Do you have any hints, what might be wrong?

Thanks a lot!

Hi Julian,

I m struggling with tracing the transaction when it is signed by elrond wallet. After signing the transaction I am redirected back to the page and although transaction is still pending my state is not updated correctly and CustomTransactionTrigger component is displayed again in this example even though I should still see Pending. When I click on the btn again then it seems the transaction starts to be processed again.

Please excuse me for this very brief code example. But it should demonstrate whats happening. Probably I m doing something wrong. For e.g. maiar wallet this approach works totally fine.

const TransactionModel: React.FC = () => {
  const [result, setResult] = useState<{ type: string; content: string }>();
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string>();

  const handleTxCb = useCallback(
    ({ transaction, pending, error }: TransactionCb) => {
      if (transaction) {
        setResult({ type: "tx", content: transaction.getHash().hex() });
        setPending(false);
        setError(undefined);
      }
      if (pending) {
        setPending(true);
        setError(undefined);
        setResult(undefined);
      }
      if (error) {
        setError(error);
        setPending(false);
        setResult(undefined);
      }
    },
    []
  );

  if (pending) {
    return <h1>TRANSACTION PENDING</h1>;
}

   if (result) {
return <h1>TRANSACTION RESULT</h1>
}

return <CustomTransactionTrigger />;
};


const CustomTransactionTrigger : React.FC<> = ({
  cb,
}) => {
  const { pending, triggerTx, transaction, error } = useScMultiESDTTransaction({
    cb
  });
  const handleSendTx = useCallback(
    (membership: SaleMembershipIf) => {
      const payload = TransactionPayload.contractCall()
        .setFunction(new ContractFunction("MultiESDTNFTTransfer"))
        .setArgs([
          new AddressValue(
            new Address(process.env.NEXT_PUBLIC_SC_ADDRESS as string)
          ),
          new U32Value(2),
          BytesValue.fromUTF8(process.env.NEXT_PUBLIC_WEGLD_TOKEN_ID as string),
          new U64Value(0),
          new BigUIntValue(new BigNumber(egldPrice)),
          BytesValue.fromUTF8(process.env.NEXT_PUBLIC_ELRD_TOKEN_ID as string),
          new U64Value(0),
          new BigUIntValue(new BigNumber(elrdPrice)),
          BytesValue.fromUTF8(BUY_CARD_ENDPOINT),
        ])
        .build();

      triggerTx({
        receiver: address,
        gasLimit: 14000000,
        data: payload,
      });
    },
    [triggerTx]
  );

  return <button onClick={handleSendTx}>trigger</button>;
}

• ~~migrate the elven-tools-dapp to erdjs 10~~ [done]
• ~~clone and clean the template to be more generic~~ [done]
• ~~add docs (readme)~~ [done]
• then more improvements
  • ~~Ledger auth~~ [done]
  • more React hooks
  • more tooling
  • rethink the backend integration and server-side auth checks, research: https://github.com/ElrondNetwork/native-auth
  • languages/translations support
• then maybe split into separate npm packages, but I am not sure if this is required

It seems like something is wrong with the CardWrapper. I'm a very fresh web development beginner (coming from the .NET World), so it probably is just me, but I found a very strange behavior:

This is working. It only rerenders the updated value-attribute to the DOM every time I enter a character into the NumberInput.

const Test= () => {
  const [limit, setLimit] = useState('0.0');
  return (
    <NumberInput
      minW="40%"
      maxW="40%"
      ml={5}
      clampValueOnBlur={false}
      defaultValue={0}
      precision={2}
      onChange={(enteredLimit) => setLimit(enteredLimit)}
      value={limit}
      step={0.2}
    >
      <NumberInputField />
    </NumberInput>
  );
};

This is NOT working. It rerenders the whole outer div every time I type a character into the number input, thus loosing the keyboardfocus every time I type a character into the NumberInput:

const Test = () => {
  const [limit, setLimit] = useState('0.0');
  return (
    <CardWrapper>
      <NumberInput
        minW="40%"
        maxW="40%"
        ml={5}
        clampValueOnBlur={false}
        defaultValue={0}
        precision={2}
        onChange={(enteredLimit) => setLimit(enteredLimit)}
        value={limit}
        step={0.2}
      >
        <NumberInputField />
      </NumberInput>
    </CardWrapper>
  );
};

I must be doing something terribly wrong. Do you have any idea, what could be wrong?

Hi,

I'm having an issue to connect with my ledger while developing a DApp. When I click on the Ledger button to connect it always goes into the first if statement meaning the await dappProvider.init(); hasn't returned a successful response, so nothing happens except for the console.warn message in the console.

When I connect myself with the Extansion (or any other login method), logout and then try to reconnect with ledger, it is working fine. Not sure how it really works there ?

First of all, thanks a lot for the template!

Child of MainLayout not re-rendered

The root component of the child of MainLayout is not re-rendered after changing the state. It affects just to the root component, the tree is re-rendered upon the state changes.

This behaviour is confusing when using hooks on nextjs pages because changes are not reflected in the page but in the children components.

How to reproduce

1. Create a nextjs page as below

const Home: NextPage = () => {
  const { address } = useAccount()
  return (
    <MainLayout>
      <HeaderMenu>
        <HeaderMenuButtons enabled={['auth']} />
      </HeaderMenu>
      <h1>### {address} ###</h1>
      <GetUserDataDemo />
   <MainLayout>
)

3. Connect your Elrond account
4. The value of address inside <h1> is not updated but the same value in component GetUserDataDemo is updated

By removing / commenting out the enviroment variable NEXT_PUBLIC_MULTIVERSX_API the maskin of the public MultiversX api can be disabled. When masking is disabled all api requests done by the dapp will go directly to the public api endpoint.

Further more I've simplified the access to the active network configuration. We can use activeNetworkConfiguration-method to get the active network configuration, if we don't want to retrieve a specific configuration for a given chainType.

Fixes #18

First solution:

1. make the NEXT_PUBLIC_MULTIVERSX_API actual public API endpoint (not proxied)
2. use a different name for the proxy endpoint, for example, NEXT_PUBLIC_MULTIVERSX_API_PROXY.
3. allow passing the NEXT_PUBLIC_MULTIVERSX_API_PROXY as optional env var. If not present, then use NEXT_PUBLIC_MULTIVERSX_API as Elrond's public API endpoint (visible for all)

Second solution, probably better:

1. make the private env var MULTIVERSX_CUSTOM_API optional and check if it exists
2. keep the public env var NEXT_PUBLIC_MULTIVERSX_API as is, but use it for absolute public API endpoint or for relative proxy API endpoint when MULTIVERSX_CUSTOM_API is configured

Changes will require a new major version and improvements in docs, more info about it (README.md).

• Nextjs update
• React update
• erdjs libraries update
• other dependencies updates
• improvements for useScQuery hook
• config moved to env variables - see .env.example
• minor fixes
• ts types improvements
• switched to MIT license (erdjs libs are now MIT too)

I'll be yolo merging it to test the Netlify deployment with new env vars.

If you log into your wallet via WEB WALLET and use either the method Maiar or Ledger, you can't send transactions with that session.

Maiar: Does say "rejected by user" Ledger: Does give something like BAD REQUEST signature invalid

In many cases its necessary to know, if a transaction is failing or not.

We already call it here: sendTxOperations#L27

const transactionWatcher = new TransactionWatcher(apiNetworkProvider);
await transactionWatcher.awaitCompleted(tx);
setTransaction(tx);
cb?.({ transaction: tx, pending: false });

To be able to deal with the transactions status at a higher level I would suggest something like this:

const transactionWatcher = new TransactionWatcher(apiNetworkProvider);
const txResult = await transactionWatcher.awaitCompleted(tx);
setTransaction(tx);
cb?.({ transaction: tx, pending: false; result: txResult });

For now it is an abstraction for /vm-values/string and /vm-values/int the /vm-values/query is also needed

This will be probably simplified and it will use ABI + result parser