dev-ptera / thebananostand

There's always money in The Banano Stand, a cryptocurrency web wallet.

TheBananoStand

https://thebananostand.com

About

TheBananoStand is a web-based Banano wallet - manage your favorite digital meme currency with ease!

This project was created to manage funds via the highly secure Ledger hardware wallets, but has been extended to support seeds and mnemonic phrases as well.

Note: a ledger device is the recommended way to guarantee there will always be money in the banano stand.

Supported Browsers

• Chrome
• Brave
• Edge
• Firefox

Note: Most Chromium-based browsers will work with this wallet.

Ledger Usage

Do you already own a ledger device and want to use it to store your Banano?

1. Visit https://thebananostand.com
2. Download the Banano Ledger app (>=1.2.6) onto your hardware wallet and open it. See Ledger Live for details.
3. Connect your ledger device to your computer via USB.
4. Click the "Load Ledger" button.

After your ledger is unlocked, you can now send or receive as you please.

API Usage (send | change)

You can send others requests for payment or requests to change representative by adding the following query parameters to your URLs.

Supported query parameters:

Name	Description
request	The type of transaction - can either be 'send' or 'change'
address	The address to send Banano, or change representative to
amount	(send only) the amount of Banano to send

Send example

https://thebananostand.com?request=send&address=ban_1z7rxmcwataoqahha6xdo3j1tfikoufkhb95dg4b7aajapa4cnp6h3s9f8oj&amount=.006

Change example

https://thebananostand.com?request=change&address=ban_3batmanuenphd7osrez9c45b3uqw9d9u81ne8xa6m43e1py56y9p48ap69zg

API Usage (message signing)

Using an address you own and your private key, you can prove use message signing to prove to others you own the address.

Supported query parameters:

Name	Description
request	Can either be 'block_sign' or 'message_sign'
address	An address that you own
message	A secret message to encrypt

Message Signing example

https://thebananostand.com/signing?request=message_sign&address=ban_11juro8jq16455kbggfa1ge3s7jjy6154gtg3pgyn45irw5sdf3qamntjeam&message=cheese

Block Signing example

TODO

Running Project

Did you clone the project and want to run it on your machine?

yarn && yarn start

or

npm i --legacy-peer-deps && npm run start

Requires NodeJS version 14.20.x, 16.13.x or 18.10.x.

Releases

This project has fully automated GitHub releases which are validated and published via a GitHub Actions pipeline.

Testing

This project uses Cypress for end-to-end testing. In order to run the Cypress tests, run in terminal 1: yarn start & in terminal 2: yarn cypress.

All tests are ran using Electron.

Issues / Requests

Is there either something horribly wrong or do you have a cool feature request? Pick one:

• Open an issue on GitHub
• Tag me in the Banano discord
• Send me an email ([email protected])

Note: If you want to contribute to this project, please contact me before implementing a new feature. We want to make sure it makes sense to add before working on it.

thebananostand's Issues

Feature: Push notifications so the user doesn't have to manually reload pages.

This could be implemented by having a webservice subscribed to a Banano node websocket and then thebananostand can subscribe to the webservice to receive push notifications.

Host app in Electron

Make a desktop-runnable version of this app, using electron to wrap it.
Update readme with instructions for how to download and run it.

Add NFT list to wallet

post to get the list of banano NFTs an address owns.

example address ban_1jsdpfa46qh5u49t3mbhisngtqunj43zc1k9x73okk6syi54zkugy1psyer1

https://nft.coranos.cc/api?action=get_nft_owner_assets&owner=ban_1jsdpfa46qh5u49t3mbhisngtqunj43zc1k9x73okk6syi54zkugy1psyer1

response (no nfts):

{"success":true,"asset_owners":[]}

response (some nfts)

    {
    "success":true,
    "asset_owners": [
        {
         "template":"QmbEFhEg7h4fuS34huLARat7KqSQutPfa55fjE8irBEq6G",
       }
     ]
    }

then get:

https://gateway.pinata.cloud/ipfs/${template}

response:

    {
        "title":"The Frogs and the Ox",
        "art_data_ipfs_cid":"QmPU4BG4Kxorz769xdrVTFxXSQxe6x6ofCyKoMxrNZfjxE"
    }

then get:

https://gateway.pinata.cloud/ipfs/${art_data_ipfs_cid}

and process it using the js:

        const imageUrl = ipfsApiUrl + '/' + imageIpfsCid;
        const imageResponse = await fetch(imageUrl, {
          method: 'GET',
          headers: {
            'content-type': 'image',
          },
        });
        const imageContentType = imageResponse.headers.get('content-type');

        if (imageResponse.status === 200) {
          const imageBlob = await imageResponse.blob();
          if (imageContentType == 'image/svg+xml') {
            const text = await imageBlob.text();
            // html += text;
            const svg = `data:image/svg+xml;base64,${btoa(text)}`;
            html += `<object title="${imageIpfsCid}" style="width:30vmin;height30vmin;" type="image/svg+xml" data="${svg}"></object>`;
          } else if (imageContentType == 'image/png' || imageContentType == 'image/gif' || imageContentType == 'image/png') {
            const imageObjectUrl = URL.createObjectURL(imageBlob);
            html += `<img title="${imageIpfsCid}" style="width:30vmin;height30vmin;" src="${imageObjectUrl}"></img>`;
          } else {
            html += `Unsupported Content Type: ${imageContentType}`;
          }
        } else {
          html = 'error:' + imageResponse.status + ' ' + imageResponse.statusText;
          allowReload = 'true';
        }

Add an Option to Clear All Session LocalStorage Data

Overview

Add an option to the Settings menu (top left corner) that clears all LocalStorage information on long-press.
This should effectively clear all Wallet Information so that on page refresh, the site does not remember the user.

This image represents a rough idea of what this new option would look like (2nd option):

Running the Project

1. Clone the Repo
2. run yarn && yarn start
3. Enter the test seed: 727A5E960F6189BBF196D84A6B7715D0A78DE82AC15BBDB340540076768CDB31
4. Observe Settings icon in top-right corner

Additional Info

This is the file where this menu should be added:
https://github.com/dev-ptera/thebananostand/blob/master/src/app/components/account-settings/account-settings.component.ts

Feature: Bluetooth Ledger Support

Should be possible to add bluetooth ledger support to the Banano Stand.

Add Option to add own RPC node

Add API Options

Users should be able to quickly send to specific accounts via url parameters.

The bananostand.com?send=ban_addr?amount=19

This is difficult; how to choose which account to send from?

Send links without amount don't work properly

A link like this
https://thebananostand.com/?request=send&address=ban_1rainrjfauss66rbormm3td5gucnnza41w78qepdmzy15dprgb6qrp6x516h

results in:

There's no way to specify the amount...

Unable to send from secondary wallet when using ?request=send

Not sure what happened recently-ish but I stopped seeing the accounts for wallets other than my main one when opening The Banano Stand from an external website to make a payment. Only the accounts for the first wallet I have configured are showing up on the modal flow that is triggered by ?request=send, but the wallets are loaded fine if I close the modal.

Add a Settings Page

Include a Settings Page, that will provide options for users to:

• Switch RPC Nodes (kalium or booster)
• Change Theme
• Change Currency (Dollar, GBP, Euro, etc) (future)

Feature: Accompany every Banano address displayed with a monKey

Can paste the letter "e" in send value and it treats as exponent.

Accidentally pasted an address into the Value field. Resulted in an "e" being inputted.
Manually typing an e does not work. Only pasting.
Probably shouldn't process exponents.

Add MonKey to wallet

add svg from https://monkey.banano.cc to wallet.

https://monkey.banano.cc/api/v1/monkey/

example MonKey URL:
https://monkey.banano.cc/api/v1/monkey/ban_1coranoshiqdentfbwkfo7fxzgg1jhz6m33pt9aa8497xxfageuskroocdxa

Fix Dashboard Sortation

Implement custom angular matSort logic so that each column sorts correctly.

UX Login Error

When you enter your PW to unlock your wallet, hitting ENTER to sign in instead results in toggling of the reveal password button

pending cycle time.

if you have a lot of pending transactions that they wont all go through properly. It took 3 attempts at receiving incoming for them all to properly go through. Most went through okay but some just basically got skipped until the second or third attempt of receiving for them to go through and to even get the notification on the ledger. I had 23 pending as i have not checked in on it for awhile.

This may be because the code only receives one block at a time, and it may need to be coded to check for more pending blocks

Add an Option to Copy Address for Mobile Views

Overview

Users need to be able to easily copy their account address.

On smaller viewports, there is no way to copy the current address. Add a menu option that copies the address to the clipboard. After the address is clicked, there should be a Snackbar that appears saying something like "Address Copied!". See the image below, this option should be added to this list.

Running the Project

1. Clone the Repo
2. run yarn && yarn start
3. Enter the test seed: 727A5E960F6189BBF196D84A6B7715D0A78DE82AC15BBDB340540076768CDB31
4. Click the first account once loaded.
5. Make the screen smaller (less than 600px wide)
6. Click the three dots icon to pull up the Account Actions overlay and observe there’s no option to copy account address.

Additional Info

This is the template where this menu should be added:
https://github.com/dev-ptera/thebananostand/blob/master/src/app/pages/account/account.component.html#L1

Import Seeds from Vault

This should be a seamless transition, assuming there is localstorage data for vault seeds, import them into Bananostand.
Show users the password option immediately.

Add Wallet Option to Receive All

Add Wallet Option to Receive All

Feature: Alias & Address Book enhancements

Add minimum receivable threshold

I want to ignore incoming transactions below a certain value.

Set up Analytics

Plausible or maybe GA

Add ability to sort accounts on dashboard by balance

Feature: Tooltips over the buttons

Old request but a good one; add tooltips over the buttons for

• "Add Account"
• "Add by Index"
• "Remove Account"
• "Refresh"

New wallet link has poor contrast under festive conditions

This is kinda problematic when I was thinking of onboarding some new monkes today 😅 I had some trouble seeing that the option was still there. (but also, maybe the "new wallet" option should be more of a 1st class citizen and be shown alongside the "mnemonic" and "ledger" options 🤔 )

Add Ability to Rename Accounts

is this new official wallet?

There was online wallet at https://vault.banano.cc/. It is not working for few days. There was no official message that it will be shutdown or replaced with something else, like https://thebananostand.com/

I am not sure about status of thebananostand.com. Is it legit? Or is it a scam to steal my secret passphrase and bananas?? Could you update this ticket with a reference to some official message or announcement that vault.banano.cc was replaced with thebananostand.com ??

This wiki still points to vault.banano.cc

thebananostand even doesn't have dedicated page at wiki

Add Address Book Option

Add an address book option so users can manage known accounts.
This should play nicely with vault address book feature.

Deal with newlines in messages to sign

When passing a newline in the message to sign, e.g.

https://thebananostand.com/signing?request=message_sign&address=ban_11juro8jq16455kbggfa1ge3s7jjy6154gtg3pgyn45irw5sdf3qamntjeam&message=test%0Anewline

The newline doesn't appear in the input field,

even though it is considered in the signature. ⚠️
It stops being considered as soon as you edit anything in the message input. (delete the last e of the string and add it again, and resign: the signature will change)

This field should really support multiple lines. This is relevant because JungleTV intends to use a message format similar to the one proposed for Ethereum in EIP-4361. Messages JungleTV will request to sign will follow this format:

I assume many other services will use multi-line messages because it just makes sense to make certain things more readable. But right now they appear in a single line, making them really hard to read.

Timeout unlocked wallet

Add options on settings page for adjusting timeout length, 5 min to 1 hour

add snack bar notification when timeout is about to happen, “are you still there? Logging out in 60sec, 59, etc”

Respect external API rate limits

Kalium API has a limit of 100 requests a minute; update the wallet to respect rate limits, customizable per source.

Feature: Make receivable items more intuitive

Feature: Dropdown to select recipients from address book when sending

Add localization options

I want to be able to switch languages.
Start with English, Spanish & propose a way to scale elegantly.
Preferred language is remembered in local storage.