MEPEvmos

Multi-Chain & Multi-Wallet
Issue & Claim your Membership NFT
Send Tokens Through Friend's Profile

Inspiration

We focused on implementing an infrastructure that allows Evmos to issue, store, and transmit membership NFTs that can be utilized in practice.
Evmos is implementing EVM in the IBC ecosystem. So we can issue NFTs using existing ERC formats such as ERC-1155. It also makes it easy to implement swaps and transfers as well. Using this infrastructure, we wanted to create a tool that brings together the financial and social assets in the IBC and EVM ecosystems. Being able to easily issue and create social assets can increase the usage of Evmos. And bring more liquidity from the Ethereum ecosystem.

What It Does

MEPE is a service for individuals and organizations that create Web 3.0 communities. Users can easily create their own membership NFT and manage their communities & members. (e.g. buy me a coffee NFT, coupon, community membership, etc.) It provides an incredibly simple way to create membership NFTs without smart contracts and blockchain knowledge.

Features

Things were already done:
Personal Multi wallet Dashboard

A nice dashboard where you can showcase your community and its crypto assets.
You can connect wallets of various chains, including Keplr and Metamask, to the dashboard.

During hackathon period:
ERC-1155 contracts on Evmos

Evmos, Marvelous blockchain where communities of various blockchain ecosystems can gather through the connection of Ethereum and Cosmos.
MEPE supports Evmos ERC-1155 contract generation.
Suites to all your membership or products you want to tokenize.
Fungible and Non-fungible NFTs are possible.

Sending tokens through a friend's profile

You can easily send tokens by finding your wallet address in your friend's profile.
You can send tokens and write notes on transactions.

How We Built It

Back-end 1. transaction related

When the Front-end sends remittance-related information, the Back-end stores the information in the DB. And it collects and provides remittance information(transaction history) to the user.

Back-end 2. NFT related

The following steps are taken to import the EVMOS NFT.
1. Call up all kinds of tokens in the user’s wallet using the covalenthq API
2. Identify the token that corresponds to NFT among the tokens
3. Bring up metadata of NFTs using orbitmarket api
4. Delivering Information to the Client

We use the APIs using JAVA’s RestTemplate as follows.

RestTemplate rest = new RestTemplate();
HttpHeaders headers = new HttpHeaders();
additionalHeaders.forEach((strKey, strValue)->{
  headers.add(strKey, strValue);
});
HttpEntity<String> requestEntity = new HttpEntity<String>(body, headers);
ResponseEntity<String> responseEntity = null;
try{
  responseEntity = rest.exchange(url, HttpMethod.GET, requestEntity, String.class);
}catch(Exception e){
  return “”;
}
return responseEntity.getBody();

Front-end 1. Send Token and Request Token

The UI automatically loads the MEPE friend list and each wallet list, allowing users to easily request or send tokens to the other wallet address. At this time, Metamask API was mainly used to perform functions such as current chain information, wallet information, and send transaction. In addition, the chain type and token amount can be easily modified, and the tx generated by the MEPE service itself is differentiated by memo input. The main related codes are as follows.

     const sendFunction = (onConnected, settings) => {
      return new Promise(async (resolve, reject) => {
        try {
          const hexString = “0x” + Number(settings.value * 10 ** 18).toString(16);
          console.log(hexString);
          const convertToNumber = parseInt(Number(hexString));
          console.log(convertToNumber);
          const transactionParameters = {
            nonce: “0x00", // ignored by MetaMask
            gasPrice: “0x09184e72a000”, // customizable by user during MetaMask confirmation.
            gas: “0x2710", // customizable by user during MetaMask confirmation.
            to: settings.toAddr, // Required except during contract publications.
            from: settings.fromAddr, // must match user’s active address.
            value: hexString, // Only required to send ether to the recipient from the initiating external account.
            // data: “0x7f7465737432000000000000000000000000000000000000000000000000000000600057”, // Optional, but used for defining smart contract creation and interaction.
            chainId: settings.chainId, // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
          };
          const txHash = await window.ethereum.request({
            method: “eth_sendTransaction”,
            params: [transactionParameters],
          });
          console.log(txHash);
          // onConnected(txHash);
          const returnValue = {
            toWalletAddress: settings.toAddr,
            fromWalletAddress: settings.fromAddr,
            toUser: settings.toUser,
            fromUser: settings.fromUser,
            gasPrice: transactionParameters.gasPrice,
            gas: transactionParameters.gas,
            value: settings.value,
            chainID: settings.chainId,
            memo: settings.memo,
            udenom: settings.udenom,
            walletType: “Metamask”,
            txHash: txHash,
          };
          onConnected(returnValue);
        } catch (error) {
          if (isMobileDevice()) {
            try {
              const accounts = await window.ethereum.request({
                method: “eth_requestAccounts”,
              });
              onConnected(accounts[0]);
            } catch (error) {
              alert(error.message);
              console.error(error.message);
            }
          } else {
            alert(error.message);
            console.error(error.message);
          }
        }
      });
    };

Front-end 2. Show transactions

A function that stores and calls the token-related event transmitted above in db to output it easily. The code below is some key code.

const TransactionComponent = () => {
    useEffect(() => {
    (async () => {
      const getTxResult = await getTx(localStorage.getItem(“userID”)).then((data) => {
        console.log(data);
        setTxList(data.result);
      });
    })();
  }, []);
  export const getTx = async (userID) => {
  let returnValue = 0;
  const result = await axios
    .get(
      process.env.REACT_APP_DB_HOST +
        `/wallet/transactions/all?userID=${userID}`,
      {
        headers: {
          “Content-Type”: “application/json”,
        },
      }
    )
    .then((data) => {
      console.log(data.data);
      returnValue = data.data;
    })
    .catch(() => {
      alert(“Something is wrong.“);
    });
  return returnValue;
};
}

Challenges we ran into

How can the transfer layer be made easier?
- We tried our best to make the process of connecting wallets and sending tokens to friends as easy as possible.
- We made UX/UI simple.
- It allows to send money just by pressing a friend's profile picture.
- Then a user can select which token to transfer, from which wallet to which wallet. Changing the wallet or token is easy as well.
How can we create a seamless user experience?
- We needed an ecosystem where both an Ethereum-based wallet (Metamask) and an IBC-based wallet (Keplr) could be connected.
- We made it. (still working on some bridging functions)
- We made both wallets to be able to link to one's profile, and connect / disconnect is so easy.
- ERC-1155 has been adopted to facilitate the issuance, distribution, and airdrop of NFTs.
- There are various benefits in NFT coupons and mamberships.
- We improved readability of mobile UX/UI as well.

Accomplishments that we're proud of

It works.
Easy to publish NFT.
Easy to make a community.
Easy to send money to friends and community members.
Easy to understand functions.
Infinite applicability with Web2.
Expectations for the next step: Treasury, DAO, and Web2 collaborations. (ex: commerce. Evmos membership coupons)
##What we learned
What is the hard point to use Evmos
- Swap, purchase...
- Same asset names, differnet networks
- Hard to tell what I have in my wallet right now
- Hard to tranfer the right token to friends' wallet
- Hard to build a community
How we can make the process better
- Users can see which asset they have
- Users can easily build community
- Users can easily issue NFTs and transfer
- More to go.
Why Evmos is great
- Strong concept
- EVM x IBC
- Multi-assets can make a big synergy
- Great solidity developer pool
- Interoperability