nft-collection-pages

This project is to fetch the collections on an ethereum address using OpenSea API and display a collection list and respective detail information.

Features

• Fetch NFT assets from OpenSea API https://api.opensea.io/api
• Display a collection page using UIKit and RxSwift
• Display the specific asset detail page using SwiftUI
• Display the fetched ETH balance on the title of the collection list page

Use Cases

• Display a collection page and scroll down to load more content

LoadMore.mp4

• Tap an asset item in the collection page to push the specific asset detail page, and then tap the back button to pop back to asses collection page

pushpop.mp4

• Scroll the asset detail page and tap the bottom button to open the marketplace link in an external browser

detail-to-marketplace.mp4

Flowchart

Payload Contract

OpenSea

• Base url: https://api.opensea.io

GET /api/v1/assets

Query Parameters:
format (string): The format of response: json
owner (string): The address of the owner of the assets
limit (string): Limit. Defaults to 20, capped at 200.
cursor (string): A cursor pointing to the page to retrieve

200 RESPONSE
{
  "assets": [
    {
      "image_url": An image for the item. Note that this is the cached URL we store on our end. The original image url is image_original_url,
      "name": Name of the item,
      "collection": {
        "name": Name of the collection,
        ...
      },
      "description": Description of the item,
      "permalink": The item link to the OpenSea marketplace,
      ...
    }
  ],
  "next": a cursor pointing to the next page,
  "previous: a cursor pointing to the previous page
}

Infura JSON-RPC Server

• Base url: https://mainnet.infura.io/v3/{INFURA_API_KEY}

Get ETH Balance

HTTP method: POST

Request Body
{
  "jsonrpc": "2.0",
  "method": "eth_getBalance",
  "params": [
    "0x19818f44faf5a217f619aff0fd487cb2a55cca65", // ethereum address
    "latest"
  ],
  "id": 1
}

200 RESPONSE
{
  "jsonrpc": "2.0",
  "id": 1,
  "result": "0x3bd8ae5cc6f1f60" // Balance (Wei) in hex format. 1 Ether = 1000000000000000000 Wei
}

Model Specs

Asset

Property	Type
id	Int
imageUrl	String
name	String
description	String
permanentlink	String

Wallet

Property	Type
etherAddress	String
balance	Double

App Architecture

This projecct adopts the MVVM-C (Model-View-ViewModel-Coordinator) pattern, which separates business logic, presentation, flow navigation from massive view controller. And the repository pattern is used for accessing data and keeping the implementation of fetching remote data agnostic to other layers.

State Management

Application state is managed and represented by the Coordinators that are currently attached to the Coordinator tree.