tosidrop / vm-frontend

Frontend for TosiDrop

vm-frontend

Welcome to the Tosidrop VM Frontend!

About

The code is split into two projects, an Express API which serves as a backend for the frontend, and a React UI which is built into static assets.

This is intended for use via Docker.

Within this repository is an Ansible playbook to install Docker on the local machine and run the containers. You can disable installing Docker by setting MANAGE_DOCKER=false in .env.

Usage

./runme.sh

Dev usage

You can run npm install and npm run from the client, server, and root folders as needed. The preferred way for testing us npm run dev from the root folder. There's a readme on the client folder you should check out.

Project uses NPM version 16. Most accurate results are obtained runnning the docker image.

Logging

Access logging is enabled in the server. It uses Morgan and the type of logs which are output can be controlled by setting LOG_TYPE to a valid Morgan log type, such as LOG_TYPE=combined for Apache Combined Log Format.

Mainnet

For Mainnet, you'll want to set the following variables to point to a mainnet instance of the backends. Also, make sure API token (and PSK) matches mainnet.

AIRDROP_ENABLED=false
CARDANO_NETWORK=mainnet
KOIOS_URL=https://api.koios.rest/api/v0
VM_URL=https://vm.adaseal.eu

vm-frontend's Issues

Surface transaction submit failures to user

Freeloaderz USA load balancer has an expired SSL certificate.

We don't handle this well.

sanitize address on api only

• instead of sanitizing on both client and server

Icons horizontally squished on mobile

See image (Brave on Pixel 6)

Typhon Wallet not displaying connection

Appears that the wallet is connecting behind the scenes but is not displaying visually that the wallet is connecting in top right corner of frontend.

Display queue depth (pending transactions)

Use VM get_pending_tx_count to give an estimate of the number of transactions in line

Show insufficient funds error to user.

Send ADA wording

Before sending the screen shows this.

Please only send 8.4 ADA. Any other amount will be considered an error and refunded in aproximately 72 hours

This is not exactly true. It is recommended to send a little bit more as the TX fees may change once ADA is sent out and tokens + ADA is received. Seal recommends a little bit more. If anything is more the ADA is returned with the tokens - TX fees. If less just the ADA is returned - TX fees

I think it should be similar wording on VM which is this.

**Withdraw all available rewards by sending a deposit of 8.7₳ to this address: addr1xxxxxxxxxxxxxxxxxxx or click customize to cherry pick only tokens you want. We will send you deposit back together with your tokens minus service fee 0.1 ₳ and TX fees (fees depend on amount of tokens, should be somewhere between 0.2 - 0.6 ADA).

This deposit is necessary, because Cardano protocol requires UTXO of certain amount of ADA in order to transfer additional tokens (more tokens require higher deposit)**

Also approximately is misspelled.

Brief wallet logo/image not found

On a page refresh there is a brief image not found message while waiting for wallet to connect before wallet icon is shown.

Screen.Recording.2022-04-28.at.4.35.09.AM.mp4

add decimals

Overflow on successful wallet claim

Message is too long and overflowing modal

Use Koios for protocol parameters

Currently, we fetch these from Blockfrost. Also, it appears our network detection is broken here.

Calculation for ADA "You'll get back (Aprox)" is incorrect

I got +7.927787 ₳ back when the interface said I would get 4.032 ₳

About 3.895787 difference on what you get back on the calculation for "You'll get back (Aprox).
In the user favor which is actually more in the end. But might make people hesitant on paying if the cost is telling them it is almost 4 ADA.

True costs is about
.1 ADA for VM
+
0.366009 for TX

Support C-wallet

Issue with Send All vs Custom logic ( UI + wallet connector )

As we know, there are 2 endpoints that can be used for Seal's VM API depending if the user selected the "Send all" ( or manually selected all tokens ) versus if they just selected a few tokens.

Currently, the deposit address that is shown in the UI, is always the same, no matter if custom or select all is selected. It is defaulting to the "send all" address it seems? in the UI. However, in the backend ( if you are connecting to a wallet ) the wallet connector knows what address to send to, and sends to a different address that is shown in the UI.

Another issue, is when I tried to select "ALL" tokens, the wallet connector ALSO sent to a different address than what is shown in the UI. Does this mean that the wallet connector is using the "Custom Rewards" logic even when somebody selects all tokens?

Examples:

Select all ( with wallet connected ):
UI "deposit address" shown:
addr_test1qzq0uld9tkp9x75n4tp43rsztgz3hg7sfsphqgjwzsrlxzu8qjkhrfpyngv405v225v2n2hntlgl95rx8yjwd4vaatxqte3cc4

Wallet connector sent to this address, instead, on a "Select All" transaction:
addr_test1qp6jes22lrtzn5k2hucuzyxgezsdvjg33p2f0759sqp20ry8qjkhrfpyngv405v225v2n2hntlgl95rx8yjwd4vaatxq86vn08

Custom Withdrawal ( with wallet connected ):
UI "deposit address" shown:
addr_test1qzq0uld9tkp9x75n4tp43rsztgz3hg7sfsphqgjwzsrlxzu8qjkhrfpyngv405v225v2n2hntlgl95rx8yjwd4vaatxqte3cc4

Wallet connector sent to this address, instead, on a "Custom Request" transaction:
addr_test1qzywzr4xu8ctpylpflrej3egtfyyuukdt4ywvmgg6kff7cv8qjkhrfpyngv405v225v2n2hntlgl95rx8yjwd4vaatxqlhayhx

As per SEAL, the "Send All" address never should change it seems if you are doing a "Send All Tokens" transaction, however, when doing a custom request transaction, a different address should be provided, since this is how VM API tracks the deposits for custom requests. You can confirm this info with SEAL, but i'm 90% sure this is how this works.

Set LICENSE for community use

We have some licenses written into some metadata files here and there, but let's set it correctly at the repository level to allow community use.

Migrate ADAHandle queries to server

Since this was a minor thing, we decided not to migrate ADAHandle support to the server.

Right now, the client queries koios.rest directly.

Maybe we should address this before the next mainnet release?

TypeError ( oA.deposit is undefined ) on Claim My Rewards

When finish selecting the tokens you want, and press Claim My Rewards, an error is thrown, and app crashes. This happens with select All, and also custom claim:

TypeError: oA.deposit is undefined

Airdrop page shows coming soon and suddently switch to airdrop page

as per title

Use webserver to serve routes

Currently, tosidrop.io/airdrop can only be accessed thru client. if we use the url directly, it goes to the backend instead. This is not desired. It is better to be explicit in routing.

One quick solution is to use a webserver such as nginx to route / to client and the rest to server.

To make things clearer, it is better to mark the api route by using /api/v0/health for example.

Return txid to user

Display txid to user upon success to help with support issues.

Custom Rewards uses incorrect endpoint

To create a custom rewards withdrawal, you just first generate the custom reward, then use that address for withdrawal. We're using the standard endpoint, which leads to errors (too many tokens) and insufficient funds sent in the transaction.

unregisted typo

GetRewards fails if metadata fetch fails

The pool metadata may not be available and it comes from a remote source (wherever the pool has registered it) which can go offline. We need to account for this. Otherwise, the spinner just spins and there's no feedback to the user that there was a failure.

Example:

{
  "message": "connect EHOSTUNREACH <IP>:443",
  "name": "Error",
  "stack": "Error: connect EHOSTUNREACH <IP>:443\n    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16)",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "User-Agent": "axios/0.26.1"
    },
    "method": "get",
    "url": "https://<REDACTED>/poolMetaData.json"
  },
  "code": "EHOSTUNREACH",
  "status": null
}

Remove txid modal

Instead of a modal the transaction I'd should be displayed on page with a copy button. Will make support easier.

Minor UI fixes needed

DONE 1. Space between Logo and Logo Text, possibly after logo padding was changed. Also, the Logo looks a bit too big versus Figma. Should we change UI ? or should I change the logo file ( PNG ) instead? ( what is easier / better? ) I feel the PNG has enough padding, so if it's easy to change in UI instead, might be the way to go.
2. Space between the Claim and Airdrop tabs, on mouseover shows no space... will some spacing look better?
3. Were there no icons that are supposed to show inside each button? SVG?
4. Reminder to remove https://api.qrserver.com call on page load.

1. In Light theme, blue colour ( #2E3192 ? ) supposed to show instead of black? Also, in Dark theme, instead of white font, #EDE2D1 should be used? This is for the Logo "text" portion.
2. In Light theme, the background colour and top buttons do not match the colours from the Figma: https://www.figma.com/file/ljqKsNLxZcD9KGPOmwydKq/TosiDrop-UI

NOTE: However, I do feel in the original Figma, the logo is a bit too small, too... Maybe something in between original and current is ideal?

NOTE2: Also, I just saw that the style of the buttons was supposed to be a bit different, however, if that's hard to change i'm sure people won't complain too much, but Frosty can comment on that.

Page listing participating pools

And what they distribute maybe, seen Here
https://vm.adaseal.eu/pools

Also a delegate now button that hooks into connected wallet.

Support rewards breakdown

Add a way to show rewards breakdown get_reward_breakdown data.

Reduce calls to /getsettings

This shouldn't change often. Let's see if we can lower the number of calls significantly.

Display epoch changeover notice

Let's monitor tip + system_info and show a notice, as appropriate.

Improvement: UI - Remove / Disable Send ADA button after payment sent to wallet?

When using Etrnl wallet ( i'm sure others as well ) We should Remove or Disable the "Send ADA" button after payment was sent to the wallet.

Also, maybe even if not using a connected wallet, as soon as there is "Payment Confirmed" We should switch message to "Payment Received" or something similar and remove the QR code from the screen?

Show visible indicator on testnet

When running on testnet, let's show it somewhere to the user.

ADA rewards need special handling

ADA isn't a token on the chain, but the coin. If the user has an ADA reward greater than the withdrawal + selected tokens, we should be able to withdraw without a send. Also, the calculated amount doesn't appear to be correct for this case. I had 1 token + 3.6 ADA as rewards.

Opening the app with the last enabled wallet extension disabled gives a weird error

We should improve the text to be more user friendly

UX issue when connecting a wallet for the first time

When the dialog pops up to select the wallet to connect to and you select a wallet (such as Eternl), a new window pops up for the wallet, but when that window disappears, the page is still showing the dialog to select a wallet for a few seconds. This dialog should have some additional visual indicator (partially transparent mask, spinner, etc.) that it's waiting on the wallet to not confuse the user.

No rewards found for the account wording

Improve upon the message when user has already claimed and no rewards available or if the user is not eligible because they are not staking to a qualified pool. List of pools to choose from and a delegate now button. Something like that. nip it at the bud and gain delegation.

Support NuFi wallet

UI shows No Rewards Found while API returns tokens

When checking address stake1u8670u7n0cvdf4cpl2ha7e5jd5e8glvmj7enzu059qh278scjh8ar the UI is returning that the rewards are not found, however, the API is actually returning tokens.

This seems to be a special case where the user potentially sent back the cNETA tokens.

Fix ADAHandle support

After we converted from using SEAL's API to check addresses for faster query times ( and to offload some of the processing from Seal's API into the client ) We lost ADAHandle support, apparently that his API was handling.

A person should be able to enter a payment address ( gets converted to stake address via lib ), a stake address or an ADAHandle name. This name will have to be converted to hex and sent to Koios API ( as an example, this is for $boris handle, "boris" converts to 626f726973 in HEX ):

curl "https://api.koios.rest/api/v0/asset_address_list?_asset_policy=f0ff48bbb7bbe9d59a40f1ce90e9e9d0ff5002ec48f232b49ca0fb9a&_asset_name=626f726973"

We should add the following logic: If address starts with $ remove the $, convert to hex, and send it to Koios Api.

Response from API will be:
[{"payment_address":"addr1qxnczhf8pg6z4xhmmxqcqvehdwnf0fcj7kc2nfhszch3aq8x6mcsda3y6njfulqnphug43w96le0fe85qts4t7ld4meqxtlegl","quantity":"1"}]

( if the handle is not found, response will be empty )

Then, this address can be converted to stake address before sending it over to VM API.

The policy to supply to Koios for mainnet and testnet are different ( however, i actually don't know anybody with a testnet handle... so not sure who we are going to check as a test with the testnet version... )
Mainnet: f0ff48bbb7bbe9d59a40f1ce90e9e9d0ff5002ec48f232b49ca0fb9a
Testnet: 8d18d786e92776c824607fd8e193ec535c79dc61ea2405ddf3b09fe3

Here is also a demo how they are doing it with Blockfrost, but again, we can use Koios. https://docs.adahandle.com/quick-start

Eventually, adahandle will release their own API for this, since they might be posting more than a single policy ID in the future, and having to check all policy IDs might be extra work later.

Send ADA button context sensitivity

We should make the Send ADA button "greyed out" or otherwise blocked from being pushed if there's not an attach wallet. If possible, alternate text like "Connect wallet to use automated send ADA" or something would be nice, too.

Support custom prefix on session IDs

Since we generate our own session IDs before the VM API, let's allow them to be configurable, preferably with a default of "tosidrop" to allow us to easily find our requests.

On 304, results show as empty

After checking rewards once.... Click on Aidrop, then back to Claim. Wallet is still connected, but checking rewards returns a 304, which is not interpreted correctly. In the screenshot, you can see I have 18 rewards available.

Use /features for network

There's currently a /network endpoint, but we also have a /features endpoint which gives network information for the server. Let's switch.

Add handle support for airdrop

font-family not consistent

• input in claim has different font
• replace font-family in body tag

Bug: Transaction link returned shows testnet always

The transaction link returned shows testnet on mainnet.

Centering "Currently staking 1,036 with [anetaBTC LISO Pool 2] Decentralized..."

Centering the above sentence after checking address for rewards

add custom airdrop url

• just in case the page is refreshed
• for support

Transactions generated via dApp wallet connector should have TTL

When connecting a wallet (such as Eternl) and using the "Send Ada" button on the claims page, the generated transaction that I'm prompted to sign shows as no time limit. A transaction generated from within Eternl will show a time limit of 3 hours by default.

Feature flags using booleans cannot be disabled

We use logic like const = process.env.FOO_ENABLED || true; which will always evaluate as true. If we provide a false-like value, it'll trigger the OR logic.

Feature request: "select all" checkbox/button on claim

There can be a lot of tokens. I would like to select all.