MEPE(MetaPersona) on Polygon

MEPE on Polygon

Inspiration

Infrastructure - Wallet and Application Layer

As of December 2022, the number of people who have used cryptocurrencies or related services at least once is expected to reach 1 billion globally. (crypto.com)
As the entire token market is on a downtrend, at this point, it is absolutely necessary to invest in infrastructure to prepare for the next bull-cycle and mass adoption.
If the infrastructure of the previous two cycles was miner, mainnet, defi and sdk, respectively, the infrastructure of the next cycle will be the wallet and application layer.
Currently, many services or projects issue individual cryptocurrencies, and the Chain Foundation also has LP tokens, but they do not provide an infrastructure solution that can securitize tokens or provide utilities.

Absence of multi-chain dashboard service

There are various chains, but there is no service that allows you to check the on-chain data of multiple chains on one dashboard. Even if it deals with side chains, there is no product that handles separate chains. *Multi-Chain: Treating multiple chains in one service
Although Ethereum has a dashboard that shows individual crypto assets (e.g. light, noox, zapper, etc.), there is currently no dashboard service that shows individual NFTs or tokens in the Klaytn ecosystem.
There is a swap or bridging system. However, from a UX point of view, it is difficult for general users to use, and the fee is high and communication takes a long time.
Even in the case of DEX, Uniswap and Osmosis only handle a single chain, and there is no user-friendly product that handles multiple chains.

Difficulty in issuing NFTs experienced by individual users

Although there are several services that help general users to issue NFTs, they usually adopt a uniform business model that induces users to make additional payments in order to increase the number of issuance or specify small options.
Users who are not familiar with blockchain development have difficulty in issuing NFTs, and many users use nodes by registering meaningless data on the chain.
Existing services that issue NFTs (e.g. Opensea, Krafterspace, etc.) have many restrictions on NFT issuance.
When issuing NFTs, if you are not a developer, you must rely on the NFT issuance platform. In addition, if there are no services that support issuance of NFTs like Ethereum and Klaytn, general users cannot issue NFTs on the chain and become one-sided buyers.

Lack of treasury management and team building services through NFT

It does not provide a clear methodology when using NFT as a ticket or membership for a specific community.
There are currently no useful treasure management tools or services through NFT.
A similar service is “Guild”, which only supports team building, but lacks utility aspects, including a dashboard that shows detailed information needed for the community.

What it does

MEPE is a user-friendly multi-wallet dashboard & NFT aggregator. By connecting one or more wallets from multiple chains to your personal dashboard, you can collect and view the assets (e.g. Tokens, NFTs, etc.) in the wallets. Also, in MEPE, users can issue NFTs to multiple chains in one page. MEPE provides technical support so that users can easily issue NFTs when they input specific information. (Website and lazy minting support) Increase the number of users through NFT issuance and token launchpad with improved UX. In the long term, we want to create a cross-chain collateralized loan service by issuing MEPE tokens on the Polygon chain. MEPE tokens allow individuals to liquidate their assets. It facilitates cross-chain lending between individuals and DAOs. It also allows web 3.0 communities such as DAO to configure treasury, onboarding many communities to the Polygon ecosystem.

Details

Multi-chain dashboard

On the dashboard, users show personal on & off-chain data and form social graphs and communities in Web 3.0 through following.
Through badges issued by MEPE, users prove their experience in Web 3.0 and certain qualifications.
You can check and manage the status of your assets distributed across multiple chains on the dashboard.
You can connect web 3.0 social media to show data you want to show your on- and off-chain footprint.

Convenient NFT issuance & Discover NFT badges

You can conveniently publish NFTs by entering information and description, uploading images, and customizing.
NFT can be issued to multiple chains in one GUI, and the lazy mint method is adopted.
You can search for and claim NFT badges issued by other users or communities.
It can be developed as a marketplace or community building service.
ref. POAP, Opensea, Krafterspace

Polygon Transaction Explorer & Asset Transfer

If you connect a wallet, you can check the balance of tokens handled by Polygon and send tokens to other wallets.
Transaction explorer using polygon api

How we built it

Load users’ NFT into a dashboard

1. API that we used

We use moralis api to get polygon NFTs. Here is the moralis api link that I used.

Moralis api dashboard

2. How to use the API

The “RestTemplate” and “HttpEntity” library were used to invoke the external api in spring to retrieve the body. Here is the code that get polygon NFT informations by using Moralis API.

RestTemplate rest = new RestTemplate();
HttpHeaders headers = new HttpHeaders();
headers.add(“x-api-key”, Secret.NFT_API_KEY);
String body = “”;
HttpEntity<String> requestEntity = new HttpEntity<String>(body, headers);
ResponseEntity<String> responseEntity = null;
try{
    responseEntity = rest.exchange(“https://deep-index.moralis.io/api/v2/”+walletAddress+“/nft?chain=“+”polygon”+“&format=decimal”, HttpMethod.GET, requestEntity, String.class);
}catch(Exception e){
    return “”;
}
HttpStatus httpStatus = responseEntity.getStatusCode();
int status = httpStatus.value();
String response = responseEntity.getBody();

Then, information such as NFT’s images and names, which are necessary information for the dashboard of our page, was selectively brought. And we sorts the imported nfts based on the time the user received the NFT and sends only the latest eight to the frontend. The time for obtaining nft was based on the block hash value.

polyNFTResult.sort(new Comparator<Map<String, Object>>() {
            @Override
            public int compare(Map<String, Object> o1, Map<String, Object> o2) {
                return -(Float.compare(Float.parseFloat((String) o1.get(“obtainedAt”)),Float.parseFloat((String) o2.get(“obtainedAt”))));
            }
        });

Connect Wallet and Get Balance

    const connectMetamaskWallet = async () => {
        let balanceList = [];

        if (typeof window.ethereum !== "undefined") {
          // Instance web3 with the provided information
          var web3 = new Web3(window.ethereum);
          try {
            let balance = -1;
            let walletAddr = "";
            // Request account access
            await window.ethereum.enable();
            var accounts = await web3.eth.getAccounts();
            walletAddr = accounts[0]; // get wallet address
            console.log(accounts[0]);
            console.log(props.setWalletAddress);
            props.setWalletAddress(walletAddr)
            var ethBalance = await web3.eth.getBalance(walletAddr);
            console.log(ethBalance / Math.pow(10, 18));
            var promises = wallet?.tokens.map(async (val, idx) => {
              balance = -1;
              if (idx == 0) {
                const result = await axios
                  .get(
                    `https://api.polygonscan.com/api?module=account&action=balance&address=${walletAddr}&apikey=${process.env.POLYGONSCAN_API_KEY}`,
                    {
                      headers: {
                        "Content-Type": "appliction/json",
                      },
                    }
                  )
                  .then((data) => {
                    console.log(data);
                    balance = data.data.result;

                    balanceList.push({
                      balance: balance,
                      denom: val.currencies[0].coinMinimalDenom,
                    });
                  })
                  .catch((error) => {
                    console.log(error);
                  });
              } else {
                balanceList.push({
                  balance: balance,
                  denom: val.currencies[0].coinMinimalDenom,
                });
              }
              console.log("Account balance", {
                user: walletAddr,
                balance: balance,
              });
            });

            Promise.all(promises).then(function () {
              console.log(balanceList);
              setTokenBalance(balanceList);
            });

            console.log(balanceList);
          } catch (e) {
            // User denied access
          }
        }
      };

Connect and get wallet account by web3 module, get user’s wallet address. And get MATIC balance for the single address using polygonscan api.

Get a list of 'Normal' Transactions By Address

    function relativeDays(timestamp) { // for switch api's return timestamp value to "~ ago" 
      if (timestamp) {
        var date = new Date(+timestamp * 1000);
        const rtf = new Intl.RelativeTimeFormat("en", {
          numeric: "auto",
        });
        const oneDayInMs = 1000 * 60 * 60 * 24;
        console.log(date);
        console.log(date.getTime());
        const daysDifference = Math.round(
          (date.getTime() - new Date().getTime()) / oneDayInMs
        );

        return rtf.format(daysDifference, "day");
      }
    }

    const [data, setData] = useState([]);

      useEffect(() => {
        if (props.walletAddress != "") {
          (async () => {
            const result = await axios
              .get(
                `https://api.polygonscan.com/api?module=account&action=txlist&address=${
                  props.walletAddress
                }&startblock=0&endblock=99999999&page=1&offset=10&sort=asc&apikey=${process.env.POLYGONSCAN_API_KEY}`,
                {
                  headers: {
                    "Content-Type": "appliction/json",
                  },
                }
              )
              .then((data) => {
                console.log(data);
                var tmpData = [];
                var tableColumns = [
                  "hash",
                  "functionName",
                  "from",
                  "to",
                  "value",
                  "cumulativeGasUsed",
                  "timeStamp",
                ];
                data?.data?.result?.map((value, index) => {
                  var tmpRow = [];
                  tableColumns.map((val2, idx2) => {
                    tmpRow.push(value[val2]);
                  });
                  tmpData.push(tmpRow);
                });
                setData(tmpData);
                console.log(tmpData);
              })
              .catch((error) => {
                console.log(error);
              });
          })();
        }
      }, [props.walletAddress]);

Get the list of transactions performed by an address, with optional pagination. After filtering into 7 items(hash, functionName, from, to, value, gas fee, timestamp), it was shown as a table and downloaded to csv.
See github for more details. github

Challenges we ran into

Blockchain Product UX Improvement

It is difficult for individuals to issue NFTs, especially in the Polygon network.
Except for Opensea, there is no good way for non-developers to issue NFTs on Polygon.
Technology lightweight of NFT minting.
By providing a user-friendly NFT issuance process, we want to attract more users and contribute to the Polygon ecosystem.

Onboarding to Polygon Ecosystem

By using Polygon's fast, low-cost, and Ethereum-integrated advantages, it provides utility in a user-friendly way and onboards more users to the Polygon ecosystem.
By providing technical support through MEPE, more users can make NFT and use Polygon more conveniently.

Community building with Polygon NFTs

Build a community by bringing together people who meet certain criteria with Polygon NFT; Other events (e.g. token drop, NFT airdrop, event news delivery, etc.) can be continuously created to help the community operate.
Facilitate the creation of many Web 3.0 communities and DAOs in the Polygon ecosystem; Each organization creates a Discover page where they can discover each other well.

Accomplishments that we're proud of

NFT aggregator
User-friendly NFT issuance platform
Easy sign-in/up process (ID: unique string within 15 characters, PW: wallet connection, multiple connections possible)
User-friendly token and NFT transfer

What we learned

There are many things that are not user-friendly in blockchain products.
Using the advantages of Polygon to give utility to tokens and NFTs will greatly increase usability.
The utility of NFT is diverse.
The idea we are trying to try is suitable to try in Polygon.

What's next for MEPE(MetaPersona) on Polygon

Interworking with other ecosystems

Increase the number of potential users by linking with other chains including Ethereum.
Currently, only wallets from multiple chains can be connected, but APIs that call NFTs from multiple chains will be linked.

Token issuance and swap pool

Develop a pool for staking tokens and NFTs in a cross chain by issuing MEPE's own tokens.
Construct DAO or community treasury with MEPE tokens.
Cross-chain collateralized loan service between individuals and DAOs using MEPE tokens
Cross chain swap pool