Front End UX (Mobile & Web)

How the App Works (screenshots/links)

• As shown in the screenshot, our webapp has a “share” page section with different developer tools such as a custom test network that can be added to a wallet by scanning the QR code.

• Other resources such as links to accessing our open source code to share examples on how we developed the NFT functionality, also provided.

• Users can add the NFT test network on Xumm by scanning this QR code with your Xumm app’s QR code scanner. To complete our demo, the first step for users is to add the test network and switch to it. In our slide deck, we provide instructions for users to be able to swap networks on the Xumm app.

1. Custom Test Network Nodes available on our app.
   • Resources available in the app’s “share-page” menu options. Screenshot from our webapp (dapp)

   • Link to our NFT webapp’s share page for adding test networks that are available. In this case, the XLS-20d developer test network. Note that it is imperative for users to switch to the XLS-20d test network first before using the app.

The Device you chose to use will determine your UX!

Xumm xApp UX: Add the “NFT Workshop” xApp to Xumm by scanning the QR code with your Xumm app’s QR code scanner.

OR

Desktop web-app (dapp) UX: The app can also be accessed on a desktop web browser as a web-app (dapp) but you will need your mobile wallet to sign transactions.

2. Three UI environments are supported by our app. Users are provided with various options.

• Web browser (dapp) that interacts with an external wallet.
  • Safari, Chrome, Firefox
• Mobile web browser (UI adapts to a mobile environment)
  • Safari, Chrome
• XApp - Xumm’s marketplace for dapps, similar to an IOS App store.

Mobile: Once you add the xApp on Xumm, the wallet you are logged in with will already be connected and linked to the xApp.

Desktop: If accessing the app from the web-browser, you will be prompted to “sign-in by scanning a QR code with Xumm app. This is a “sign-in” transaction type you will be authorizing on the ledger.

The login-in UX is vastly different depending on if you choose to use the app as an xApp on Xumm or as a Dapp on your desktop’s browser.

Also, at any point, the user may log out of the dapp on their desktops web browser by clicking the sign out button on the menu bar. (disconnecting the wallet they are using). Note that if the user were to sign out during the demo and sign back in, the dapp would save all the user’s information so they can pick back up where they left off.

Desktop: Xumm provides developer docs and SDKs to make this dapp UX possible (web-apps interacting with mobile wallets).

Desktop Web-app (dapp) Ux: Sign-in process:

1. Default Start Page - screenshot

2. Prompted to Sign into dapp using mobile wallet - screenshot

3. Clicking the “sign in” button generates a new tab (screenshot) to sign in using your Xumm wallet by scanning the QR code.

4. Upon scanning the QR code with your Xumm wallet’s scanner tool, the webpage now indicates it is awaiting you to sign with your wallet. \ Parallel views:
   1. Webapp status message (screenshot)
   2. Mobile Xumm app in real time (screenshot)

   5. Once you approve the transaction on your phone to sign in you are given the following parallel views on your screen:

   A. Xumm’s confirmation message on the web browser (screenshot)

   B. Refresh the dapp page to see the “green indicator” that you have now signed in with your wallet (screenshot)

   Mobile xApp UX:

   Our app is on the Xumm xApp marketplace. The benefit of an xApp is that accessing the app on Xumm will automatically “sign-in” your wallet to the xApp.

   1. Default Start Page on xApp (screenshot)
   2. By default, accessing the app from Xumm will already log you in with the wallet you chose to log in with on the app, helping you avoid all the steps needed when trying to sign in from a desktop web browser (dapp)

Activating a wallet by meeting the XRP reserve requirement is an important step to enable a user to transact with that wallet. Although minting/claiming NFTs requires a very cheap amount of XRP (a handful of “drops” which amounts to less than 1 XRP).

Don’t get excited though, this is test XRP for the XLS-20d test network that you are using for the app. This is essential in order to mint/claim any NFTs later in our demo.

Desktop Web-app (dapp) & Mobile xApp views:

1. Once users have signed in with their wallet on their desktop web-app, they will be prompted with the step to “fund” their wallet from a faucet. (screenshot). For users accessing the xApp, this will be the first step they will see.
2. Once users click on this “fund wallet” button, the test faucet will send the test XRP to the users wallet.
   1. The status is then updated to show that the user has successfully completed this step. - Screenshot

   2. Users may also check their wallets XRP balance while on the testnet to see how much test XRP was sent to their wallet. - Screenshot

At this point, in order for an NFT to be “claimed” by a user to their wallet, that NFT has to be “minted” on to the blockchain first. Typically, most NFTs you will find on a marketplace, have already been minted. However, for the purpose of this demo, we will be showcasing the entire NFT process from zero to one.

If you want to learn more about how our mint bot works “under the hood”. You may read about it in one of our previous hackathon posts for Thebettermint or watch a demo video here where Ryan shows the code in action.

At this step, we need to “mint” the unique NFT so that the user can then “claim” it on the following step. When the user clicks the “mint NFT” button, on the back-end of our app, we have an NFT mint bot that automatically mints a new NFT in its wallet and holds onto the NFT until the user later signs the “NFT Claim” function to receive the NFT.

Screenshots of this step:

1. NFT needs to be minted. (screenshot)
2. Green indicates that the NFT has been minted by our mint bot on the back end. (screenshot)

Now that the NFT has been minted by our app’s mint bot on the backend, the user must now sign “claim” the NFT to receive it within their wallet. Outlined are the various steps and processes for doing so depending on whether you’re using the app as an xApp or on your PC’s web browser.

The UX for claiming an NFT will be more efficient when using an xApp on Xumm because you skip the parts that require scanning a QR code.

Desktop Web-app (dapp) UX to “Claim NFT” process:

1. Initiate the Claim your NFT process - (screenshot)
   • Scan QR Code with your Xumm wallet to initiate the “NFTTokenAcceptOffer” request on the ledger. - (screenshot)
   • Once you scan, the QR code on the screen will change its message to indicate it is waiting for you to manually sign the transaction from your Xumm wallet. - (screenshot)

2. At this point, the user needs to open their Xumm app on their phone to see the transaction request that it is asking you to sign or reject. - (Screenshot 1/ screenshot 2)

3. Once you sign the transaction you will get the following prompt, confirming that you signed the transaction (screenshot). It takes 1-4 seconds for the XRP Ledger to confirm the transaction, which then gives the following prompt indicating the user’s success in claiming the NFT (screenshot).

   Mobile xApp UX

   1. Initiate the Claim your NFT process - (screenshot)

   2. Once the user clicks “Claim NFT” button on the xApp, the interface on their phone will change to the NFT Claim Request for you to sign. - (Screenshot 1/ screenshot 2)

   3. Once you sign the transaction you will get the following prompt, confirming that you signed the transaction (screenshot). It takes 1-4 seconds for the XRP Ledger to confirm the transaction, which then gives the following prompt indicating the user’s success in claiming the NFT (screenshot).

Now that the NFT has been claimed in your wallet, users can view the NFT that contains a unique ID for identifying each NFT.

Desktop Web-app (dapp) & Mobile xApp views:

1. Click to view your NFT in the visualizer. (screenshot)

2. Once you do this, you may notice that instead of the punch background from one-punch man, you are now seeing the aftermath of that punch, your NFT visualized *tada* (screenshot of NFT)
   • You may also now notice that at the bottom of the NFT, the status says “claimed”. However, is there anything else this NFT can do?

This feature is only available on the Mobile xApp UI. The reason is because it opens up the camera on your phone to scan NFTs, similar to how a ticket scanner would work.

Users who performed the demo on their desktop’s mobile browser, can use our xApp to access the NFT scanner tool and scan their NFT. By doing so, they will notice that the status of their NFT will change from “Claimed” to “consumed”.

You can access this feature on both mobile and desktop, from the App’s menu.

We built a testing monitor tool that we then decided to make part of the app’s public features to help users identify the status of their NFTs and other user’s NFTs. Each wallet represents a unique user. In fact, clicking on one of the colored boxes will provide real metadata about other users.

Please note, that even though this app is on a test network, public wallet addresses for wallets are the same for Mainnets and testnets.

• This tool is accessible from the app's menu bar.

• View the overall NFT status of all users (identified by their wallet) that have initiated the app. (screenshot).

• Click on any numbered box to view the metadata associated with that particular wallet user.
  • For example, Box 96 was my test wallet where I was able to successfully scan my NFT on my computer using the scanner on the xApp from my phone. (screenshot)

In the menu bar we have a Twitter button for users to share their experience with others on twitter using our handle.

In the menu bar, we have the options for users to contact us to provide feedback.