NFT Auction

Introduction

This guide shows you how to create an Embeddable, using a CW721 Auction application.

Prerequisites

Before using an embeddable, you will need to have an App built to integrate into the embeddable. In this example, we will be using a Auction App similar to the one built in the Creating your Frist NFT Auction House. So before continuing with this guide make sure you have done the following:

Created an Auction App with at leat one minted NFT
Set up the NFT metadata and have it stored somewhere (IPFS, Pinata,nft.storage)

Using an embeddable on an App that does not have any minted NFTs will show up as empty.

You can create an *empty* embeddable, then add Content later with the Edit feature in the Embedding. If you do this, though, your Embeddable will appear empty until you insert content.

Let's Get Started

Access Embeddables Page

Make sure to use the wallet that built the Auction App.

Connect your wallet to the web-app. Go to the dashboard, and select "Embeddables" (the <> button) from the sidebar on the left of the page.

We will use the Andromeda chain for this example. Similar to our Apps in the assets page, each embeddable you create is linked to your connected address and chain. This means changing the connected wallet or chain will change the available embeddables to view.

Setting up the Embeddable

To start a new embeddable, click on the " + New Embeddable" button:

This will open up a panel that has the configurations for your embeddable. Here you specify the following:

The Coin Denom: The token micro-denomination to be used to buy from your application. Since I am using the Andromeda chain in this example, then I will use "uandr".
App Name: The name of embeddable application. Will be presented as header in your embeddable page.
Twitter URL: An optional url for the twitter account of the project that will be presented in the embeddable.
Banner Image URL: An optional URL pointing at a banner image which will be displayed on your embeddable. Must start with "https://".

Adding the Type of Embeddable

Now we need to add the type of collection we are looking to embed. This depends on the Application that we are embedding. Since our App in this example uses the Auction ADO, then we need to select the auction embeddable. Press on "+ Add Collection", choose "Auction Embeddable" and click “Add Collection” again.

Configuring the Auction Embeddable

Adding the auction embeddable open a new panel to configure. Here we need to specify the following:

Auction Address: The address of the auction component in the App whose auction sales you want to have in your embeddable interface.

You can get the auction address from the assets page.

Leaving the current page will delete your progress so far, so it is recommended to open the assets page in a new tab in your browser.

Clicking the address will automatically copy the address to your clipboard.

Go back to your Assets tab, open the App that contains your cw721 Auction, then copy the address of your auction component, then paste it in the embeddable panel:

CW721 Address: The address of the CW721 component in the App whose NFTs are used in the auction.

Also copy the address of your "cw721" ADO and paste it in the embeddable panel:

Collection Name: The consumer-facing name for this Embeddable. Name it whatever you wish!

Twitter URL: An optional url for the twitter account of the project that will be presented in the embeddable.

Featured Token Id: An optional token Id of the CW721 NFT token which you wish to display as the main face of your NFT collection.

Preview and Publish

Now that he embeddable panels are set up, we can publish our embeddable. Before publishing though, we can preview the interface to make sure it looks the way we want it:

Click Publish, which will invoke a preview/download popup

Preview: Click "Open Preview" to view your Embeddable’s preview page.

Name and Deploy: Go back and name your new Embeddable, then hit “Publish”.

In this example, we're calling our embeddable "UseCaseOneEmbeddable"

Your embeddable is now live, after you approve the transaction.

Checking the Embeddable in your Web-App.

Go to the Embeddables page, click the ‘three dots menu’ (…) on the upper right corner of your new Embeddable, then click VIEW to see your new Embeddable.

Embeddables are similar to ADO assets as they are linked to your address and chain.

If you login with a different address or on another chain, then this embeddable will not show.

At the bottom of the page, the ADOs which provides content for the new Embeddable you created are listed.

Viewing and Sharing your Embeddables

Click the "Deployment" link on your Embeddable to view the Embeddable’s deployed page. This link can be shared with your users to be used to interact with your Application. In our case, they would be able to bid on the NFTs.