esdt transfers

elven-js · Sep 1, 2022 · 8734527 · 8734527
1 parent 943d203
commit 8734527
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### [0.3.3](https://github.com/juliancwirko/elven.js/releases/tag/v0.3.3) (2022-09-01)
+- additional exports from erdjs required for esdt/sft/nft/meta sending (`ESDTNFTTransferPayloadBuilder`, `ESDTTransferPayloadBuilder`)
+- Updated demo. By default you can send a predefined ESDT token
+
 ### [0.3.2](https://github.com/juliancwirko/elven.js/releases/tag/v0.3.2) (2022-08-21)
 - fix type export
 - add Solid.js demo

diff --git a/build/elven.js b/build/elven.js
diff --git a/build/types/elven.d.ts b/build/types/elven.d.ts
@@ -1,4 +1,5 @@
 export { TokenPayment } from '@elrondnetwork/erdjs/out/tokenPayment';
+export { ESDTNFTTransferPayloadBuilder, ESDTTransferPayloadBuilder, } from '@elrondnetwork/erdjs/out/tokenTransferBuilders';
 export { Address } from '@elrondnetwork/erdjs/out/address';
 export { Account } from '@elrondnetwork/erdjs/out/account';
 export { Transaction } from '@elrondnetwork/erdjs/out/transaction';

diff --git a/example/demo-styles.css b/example/demo-styles.css
@@ -34,7 +34,6 @@ body * {
   display: flex;
   align-items: center;
   border-bottom: 1px dashed #000;
-  margin-bottom: 60px;
   padding-bottom: 20px;
 }
 
@@ -83,3 +82,12 @@ a {
     margin-left: 10px;
   }
 }
+
+.esdt-info {
+  margin-top: 10px;
+  margin-bottom: 60px;
+}
+
+.esdt-info, .esdt-info a {
+  font-size: 13px;
+}
diff --git a/example/demo-ui-tools.js b/example/demo-ui-tools.js
@@ -10,18 +10,21 @@ export const uiLoggedInState = (loggedIn) => {
   const loginMaiarButton = document.getElementById('button-login-mobile');
   const logoutButton = document.getElementById('button-logout');
   const txButton = document.getElementById('button-tx');
+  const txEsdtButton = document.getElementById('button-tx-esdt');
   const mintButton = document.getElementById('button-mint');
   if (loggedIn) {
     loginExtensionButton.style.display = 'none';
     loginMaiarButton.style.display = 'none';
     logoutButton.style.display = 'block';
     txButton.style.display = 'block';
+    txEsdtButton.style.display = 'block';
     mintButton.style.display = 'block';
   } else {
     loginExtensionButton.style.display = 'block';
     loginMaiarButton.style.display = 'block';
     logoutButton.style.display = 'none';
     txButton.style.display = 'none';
+    txEsdtButton.style.display = 'none';
     mintButton.style.display = 'none';
   }
 };
@@ -32,7 +35,9 @@ export const uiSpinnerState = (isLoading, button) => {
   );
   const buttonLoginMobile = document.getElementById('button-login-mobile');
   const buttonEgld = document.getElementById('button-tx');
+  const buttonEsdt = document.getElementById('button-tx-esdt');
   const buttonMint = document.getElementById('button-mint');
+  const spinnerText = 'Transaction pending...';
   if (isLoading) {
     if (button === 'loginExtension') {
       buttonLoginExtension.innerText = 'Logging in...';
@@ -43,11 +48,15 @@ export const uiSpinnerState = (isLoading, button) => {
       buttonLoginMobile.setAttribute('disabled', true);
     }
     if (button === 'egld') {
-      buttonEgld.innerText = 'Transaction pending...';
+      buttonEgld.innerText = spinnerText;
       buttonEgld.setAttribute('disabled', true);
     }
+    if (button === 'esdt') {
+      buttonEsdt.innerText = spinnerText;
+      buttonEsdt.setAttribute('disabled', true);
+    }
     if (button === 'mint') {
-      buttonMint.innerText = 'Transaction pending...';
+      buttonMint.innerText = spinnerText;
       buttonMint.setAttribute('disabled', true);
     }
   } else {
@@ -60,9 +69,13 @@ export const uiSpinnerState = (isLoading, button) => {
       buttonLoginMobile.removeAttribute('disabled');
     }
     if (button === 'egld') {
-      buttonEgld.innerText = 'Send predefined transaction';
+      buttonEgld.innerText = 'EGLD transaction';
       buttonEgld.removeAttribute('disabled');
     }
+    if (button === 'esdt') {
+      buttonEsdt.innerText = 'ESDT transaction*';
+      buttonEsdt.removeAttribute('disabled');
+    }
     if (button === 'mint') {
       buttonMint.innerText = 'Mint NFT';
       buttonMint.removeAttribute('disabled');

diff --git a/example/elven.js b/example/elven.js
diff --git a/example/index.html b/example/index.html
@@ -28,8 +28,8 @@
 <body>
   <div class="container">
     <div class="header" id="header">
-      <button class="button" id="button-tx" style="display: none;">Send predefined
-        transaction</button>
+      <button class="button" id="button-tx" style="display: none;">EGLD transaction</button>
+      <button class="button" id="button-tx-esdt" style="display: none;">ESDT transaction*</button>
       <button class="button" id="button-mint" style="display: none;">Mint NFT</button>
       <button class="button" id="button-login-extension" style="display: none;">Login with Extension</button>
       <button class="button" id="button-login-mobile" style="display: none;">Login
@@ -38,6 +38,10 @@
       <a class="button right" href="https://github.com/juliancwirko/elven.js" target="_blank"
         rel="noopener noreferrer">GitHub</a>
     </div>
+    <div class="esdt-info">* For the ESDT transfer you will need to get the <a
+        href="https://devnet-explorer.elrond.com/tokens/BUILDO-890d14" target="_blank"
+        rel="noopener noreferrer">BUILDO-890d14</a> token from the faucet: <a href="https://r3d4.fr/faucet"
+        target="_blank" rel="noopener noreferrer">r3d4.fr/faucet</a> (you can also modify the hardcoded token and test it with yours locally, check the sourcecode of this website).</div>
 
     <div id="tx-hash" class="tx-hash"></div>
     <div id="qr-code-container" class="qr-code-container"></div>
@@ -80,6 +84,13 @@ <h3>Demo transactions description (devnet):</h3>
       <li>it will call predefined smart contract and mint NFT</li>
       <li>after the transaction is finished below, you will find the transaction hash</li>
     </ul>
+
+    <h3>Other demos:</h3>
+    <ol>
+      <li><a href="https://stackblitz.com/edit/web-platform-d4rx5v?file=index.html" target="_blank" rel="noopener noreferrer">StackBlitz vanilla html demo</a></li>
+      <li><a href="https://stackblitz.com/edit/withastro-astro-pwareu?file=src%2Fpages%2Findex.astro" target="_blank" rel="noopener noreferrer">StackBlitz Astro demo</a></li>
+      <li><a href="https://stackblitz.com/edit/vitejs-vite-rbo6du?file=src/App.tsx" target="_blank" rel="noopener noreferrer">StackBlitz Solid.js demo</a></li>
+    </ol>
   </div>
 
   <!-- From v0.3.0 you would need to use the module type and import what you need -->
@@ -101,6 +112,7 @@ <h3>Demo transactions description (devnet):</h3>
       ContractCallPayloadBuilder,
       ContractFunction,
       U32Value,
+      ESDTTransferPayloadBuilder,
     } from './elven.js';
 
     // Options are the defaults
@@ -158,7 +170,7 @@ <h3>Demo transactions description (devnet):</h3>
       }
     });
 
-    // Simple transaction, you can build different transaction types and payload structures
+    // Simple EGLD transfer transaction
     const egldTransferAddress = 'erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f';
 
     document.getElementById('button-tx').addEventListener('click', async () => {
@@ -186,6 +198,42 @@ <h3>Demo transactions description (devnet):</h3>
       }
     });
 
+    // Simple ESDT transfer transaction
+    const esdtTransferAddress = 'erd17a4wydhhd6t3hhssvcp9g23ppn7lgkk4g2tww3eqzx4mlq95dukss0g50f';
+
+    document.getElementById('button-tx-esdt').addEventListener('click', async () => {
+      updateTxHashContainer(false);
+
+      // The preconfigured transaction is for the 1 'BUILDO-890d14' ESDT token on the devnet
+      // You need to know its ticker and how many decimals places it has
+      // In this case, the token has 18 decimal places. You can check it in the Elrond devnet explorer
+      // You can use the community-based faucet to get the BUILDO-890d14 token: https://r3d4.fr/faucet
+      const payment = TokenPayment.fungibleFromAmount(
+        'BUILDO-890d14',
+        '1',
+        18
+      );
+      const data = new ESDTTransferPayloadBuilder().setPayment(payment).build();
+
+      const tx = new Transaction({
+        data,
+        gasLimit: 50000 + 1500 * data.length() + 300000,
+        receiver: new Address(esdtTransferAddress),
+        sender: new Address(ElvenJS.storage.get('address')),
+        chainID: 'D',
+      });
+
+      try {
+        uiSpinnerState(true, 'esdt');
+        const transaction = await ElvenJS.signAndSendTransaction(tx);
+        uiSpinnerState(false, 'esdt');
+        updateTxHashContainer(transaction.hash)
+      } catch (e) {
+        uiSpinnerState(false, 'esdt');
+        throw new Error(e?.message);
+      }
+    });
+
     // Mint nft function
     // It mints on the smart contract from: https://dapp-demo.elven.tools/
     const nftMinterSmartContract = 'erd1qqqqqqqqqqqqqpgq5za2pty2tlfqhj20z9qmrrpjmyt6advcgtkscm7xep';

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "elven.js",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Authenticate, sign and send transactions and messages on the Elrond blockchain in the browser.",
   "type": "module",
   "types": "build/types/elven.d.ts",

diff --git a/src/elven.ts b/src/elven.ts
@@ -1,4 +1,8 @@
 export { TokenPayment } from '@elrondnetwork/erdjs/out/tokenPayment';
+export {
+  ESDTNFTTransferPayloadBuilder,
+  ESDTTransferPayloadBuilder,
+} from '@elrondnetwork/erdjs/out/tokenTransferBuilders';
 export { Address } from '@elrondnetwork/erdjs/out/address';
 export { Account } from '@elrondnetwork/erdjs/out/account';
 export { Transaction } from '@elrondnetwork/erdjs/out/transaction';