KUP web

GitHub - catze-labs/coinbase-kup-web: KUP stands for Klaytn, Unity, and Playfab. Klaytn is a metaverse platform solution.GitHub

Overview:

The front-end of KUP is built using React.js (Next.js) and makes use of Axios for API calls. These API calls are managed by React-Query, which provides caching and invalidation capabilities to reduce unnecessary duplicate calls and simplify the organization of components. The project also uses Tailwindcss for styling, although other CSS libraries could be used as well.

Technology Details:

1. React.js (Next.js) - React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the UI in response to changes in data. Next.js is a framework built on top of React that provides server-rendered and statically generated React applications.

2. Axios - Axios is a library that allows developers to make HTTP requests from the browser. It can be used to send data to and receive data from a server.

3. React-Query - React-Query is a library that provides an easy way to manage API calls in a React application. It has caching and invalidation capabilities to reduce the number of unnecessary calls and make it easier to divide components.

4. Tailwindcss - Tailwindcss is a CSS library that provides a set of utility classes for building user interfaces. It allows developers to quickly style elements without the need to write custom CSS.

coinbase-kup-web allows you to see the process of retrieving data within the game through interactions with the Playfab API and minting NFTs on the Klaytn Baobab chain using that data. The following are necessary for this process:

• Playfab Studio (identified through titleId)

• Metaverse Unity project (a.k.a game) using the created Playfab API

• Smart contract that allows minting of the game data as NFTs

Library in use

Name	Range	Link
React (Next.js)	Front-end Framework	https://reactjs.org/
Axios	Interaction with Server	https://axios-http.com/
React-Query	Server state management and Server response cache utilization	https://react-query-v3.tanstack.com/
Recoil	Global State Management	https://recoiljs.org/
tailwindcss	Utility-based CSS Library	https://tailwindcss.com/
caver-js	Interaction with Klaytn Contract	https://github.com/klaytn/caver-js
nft.storage	For upload image blob to IPFS	https://nft.storage/
klip-sdk	Klip wallet sdk	https://docs.klipwallet.com/a2a-sdk/a2a-sdk-js
@coinbase/wallet-sdk	Coinbase wallet sdk	https://www.coinbase.com/cloud/products/wallet-sdk

The front-end of KUP uses React.js (Next.js). It also makes use of Axios for API calls, which is wrapped in the functions provided by React-Query. React-Query has the ability to cache responses from servers for a certain period of time and allows them to be invalidated as needed, resulting in only making a single API call even if there are multiple API call codes. This helps to reduce unnecessary duplicate API calls and makes it easier to divide components because there are no restrictions on writing API call syntax. The use of Tailwindcss is purely based on personal preference, and you can use a different CSS library that suits the needs of your project.

KUP is using klip-sdk and @coinbase/wallet-sdk to support not only metamask and kaikas, but also coinbase wallet. In this process, caver.js is used to interact with Klaytn contract.

In the case of IPFS communication and NFT minting, it is done through the API route of next.js. In this process, the private key is hidden and security is strengthened. What was used in this process is nft.storage and axios.

Project structure in client

It is advisable to use a scalable structure when building the front-end project to allow for the easy addition and modification of various features. In the front-end of this KUP, files are organized by feature.

Feature name	Usage
landing	Landing page components
auth	Login, Signup
contract	Wallet Connect Modal, Contract interaction

Each of the features includes the components used in the feature, the pages to be routed, and various hooks.

Each feature can be referenced by other features, and the decision of how to do this is up to the front-end developer.

In this case, the hook for API calls and the part that manages global states are separated into directories inside the root directory, rather than inside the /feature directory. /service is a collection of hooks for API calls, and /states is a collection of Recoil-atoms for managing global states. This is done for ease of management. In addition, the types used in the project can be found in /types.

The diagram on the next page provides a more detailed view of the structure.

API Route

coinbase-kup-web is configured as a server-less environment unique to Next.js, without building a separate backend server. You can check the API endpoint through /contract/controller in the @/pages/api directory.

route	description
/api/contract/setMetadataUri	Through this API, the Blob of the image that will be the metadata of the NFT is uploaded to IPFS.
/api/contract/ensureAttackAmount	Through this API, the number of attacks of the in-game account obtained through Playfab is minted as an NFT.

The detailed implementation of the above APIs is implemented in the service method of @/api/.

The order of using the APIs is to get the URI through /api/contract/setMetadataUri, and then insert the URI into the payload of /api/contract/ensureAttackAmount to get the result of the transaction.