From b094e2f8a07509f57498c69623340f8548886099 Mon Sep 17 00:00:00 2001 From: dragosct10 Date: Fri, 28 Jul 2023 17:40:08 +0300 Subject: [PATCH] Create index.md --- docs/get-tokens/index.md | 376 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 376 insertions(+) create mode 100644 docs/get-tokens/index.md diff --git a/docs/get-tokens/index.md b/docs/get-tokens/index.md new file mode 100644 index 0000000..be91299 --- /dev/null +++ b/docs/get-tokens/index.md @@ -0,0 +1,376 @@ +--- +title: Get Tokens Example +layout: docs +description: View Get Tokens example +--- + +{% include edit-on-github.md %} + +## Get Tokens Example + +In this tutorial, we will learn how to get tokens from an address with real data using components from MultiversX Design System and MultiversX API. + +#### Requirements + +
+ + + + + React + + + + + + Next.js + + + + + + Combined Shape@1x + Created with Sketch. + + + + + + + + + + + + + + MultiversX API + +
+ +### Create a New Next.js Project + +See how to create a new project in the official Next.js documentation here: Next.js. + +### Add Dependencies + +We recommend the following dependencies to be added to your package.json file: + +
+{% highlight javascript %} + +{ +"name": "Your project", +"version": "1.0.0", +"author": "Author", +"license": "License", +"homepage": "your\*homepage", +"repository": { +"type": "git", +"url": "your_url" +}, +"private": true, +"scripts": { +"dev": "next dev", +"build": "next build", +"start": "next start", +"export": "next export", +"lint": "next lint", +"format": "prettier --write '\*\*/\_.{js,ts,tsx,json}'" +}, +"dependencies": { +"next": "^12.2.0", +"react": "17.0.2", +"@useelven/core": "0.4.0", +"react-bootstrap": "^2.4.0", +"react-dom": "17.0.2", +"react-router-dom": "^6.3.0", +"sass": "^1.53.0" +}, +"devDependencies": { +"@types/jsonwebtoken": "^8.5.8", +"@types/lodash.clonedeep": "^4.5.7", +"eslint": "8.19.0", +"eslint-config-next": "12.2.0", +"eslint-config-prettier": "8.5.0", +"eslint-plugin-prettier": "^4.2.1", +"eslint-plugin-valtio": "0.4.4", +"prettier": "2.7.1", +"typescript": "4.7.4" +} +} + +{% endhighlight %} + +
+ +### Get Collection from MultiversX API + +In your new component created file, you can use the below code to get stats collection data: + +
+{% highlight javascript %} +import React, { useEffect, useState } from 'react'; +import NavTabsInit from './NavTabsInit'; +import ReactPaginate from 'react-paginate'; +import NoNFT from './NoNFT'; +import HeaderMain from './Header'; +import { useAccount } from '@useelven/core'; + +interface IApiData { +getTokens?: string[]; +getMetaESDT?: string[]; +} + +const Tokens = () => { +const { address } = useAccount(); +const [tokens, setTokens] = +useState < IApiData | null > (); + + useEffect(() => { + const urls = [ + `https://api.multiversx.com/accounts/${address}/tokens`, + `https://api.multiversx.com/${address}/nfts?type=MetaESDT`, + ]; + + Promise.all( + urls.map((url) => fetch(url).then((resp) => resp.json())) + ).then((data) => { + setTokens({ + getTokens: data[1], + getMetaESDT: data[2], + }); + }); + }, [address]); + + const [loading, setLoading] = useState(true); + + // We start with an empty list of items. + const [currentItems, setCurrentItems] = useState < any[] > ([]); + const [pageCount, setPageCount] = useState(0); + // Here we use item offsets; we could also use page offsets + // following the API or data you're working with. + const [itemOffset, setItemOffset] = useState(0); + const itemsPerPage = 5; + + useEffect(() => { + // Fetch items from another resources. + const endOffset = itemOffset + itemsPerPage; + setCurrentItems(tokens.getTokens.slice(itemOffset, endOffset)); + setPageCount(Math.ceil(tokens.getTokens.length / itemsPerPage)); + + setTimeout(() => { + setLoading(false); + }, 1500); + }, [itemOffset, tokens.getTokens]); + + // Invoke when user click to request another page. + const handlePageClick = (event: { selected: number }) => { + const newOffset = (event.selected * itemsPerPage) % tokens.getTokens.length; + setItemOffset(newOffset); + }; + + const formatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }); + + const getValueFromBalance = (balance: string, decimals: number) => { + const position = balance.length - decimals; + if (position < 0) { + let size = Math.abs(position); + let zeros = ''; + while (size > 0) { + zeros += '0'; + size--; + } + return `0.${zeros}${balance}`; + } else { + return parseFloat( + balance.substring(0, position) + '.' + balance.substring(position) + ).toLocaleString(); + } + }; + + return (); + +}; + +export default Tokens; +{% endhighlight %} + +
+ +### Design Stats Card + +In the previously created component, you can add the code for the tokens card inside the return () statement. This token card will use the received data to be displayed on our new card: + +
+ +
+
+ +
+
+ +
+ +
+{% highlight html %} + +
+
+

+ My Tokens +

+

+ Find out the details about each Token and MetaESDT from your + wallet. +

+
+
+
+
+
+
+
+
+
    + {currentItems.map( + (token: any, i: React.Key | null | undefined) => ( +
  • +
    + {`${token.identifier}`} +
    +
    +
    + {token.name} +
    +

    + {token.identifier} +

    +

    + {getValueFromBalance( + token.balance, + token.decimals + )}{' '} + ( + + {token.valueUsd + ? formatter.format(token.valueUsd) + : '$0'} + + ) +

    +
    + + + Token Details + +
    • + ) + )} +
+
+
+
    + {currentItems.map( + (token: any, i: React.Key | null | undefined) => ( +
  • +
    + {`${token.name}`} +
    +
    +
    + {token.name} +
    +

    + {token.identifier} +

    +

    + {getValueFromBalance( + token.balance, + token.decimals + )}{' '} + ( + + {token.valueUsd + ? formatter.format(token.valueUsd) + : ''} + + ) +

    +
    +
    • + ) + )} +
+
+ +
+
+
+
+ +
+ +{% endhighlight %} + +