deptagency / algomart

Algorand NFT Storefront platform

AlgoMart Marketplace

🚧 2.0 Work In Progress 🚧

Please note that the current version of this project should be considered unstable for the time being as we finalize the upgrade to version 2.0

---

Migration

This project is developed to be a foundational starter for creating your own NFT storefront on the Algorand blockchain. It is a monorepo that includes:

• A headless CMS (Directus)
• A back-end API (Fastify)
• A job server (BullMQ)
• A front-end sample implementation (NextJS)
• Shared libs
• Terraform templates for setting up infrastructure on Google Cloud Platform
• GitHub Workflows for linting, type-checking, building, dockerizing, and deploying

📚 General Project Overview

The main purpose of this platform is twofold; to make it easy for developers to spin up a custom storefront that interfaces with the blockchain, and to make that storefront accessible to the storefront administrators and its end-users who might not be familiar with the technical nuances of blockchain technology.

In order to accomplish this, storefront administrators should be able to easily to create, configure, and mint NFTs. Likewise, end-users should be able to redeem, purchase, or bid on them without concern of what's happening behind the scenes on the blockchain.

Backend Overview

To accomplish these challenges, templates are used within the CMS.

NFT Templates represent an NFT that will be minted (any number of specified times). It includes key information such as title, description, rarity, and other important configurable metadata that will be consumed by the API.

NFT Templates are grouped within Pack Templates. Packs can contain one or more NFT Templates and also have a number of configurable settings. Most notably, they can be set to be purchasable, to be auctioned, to be claimed via an auto-generated redemption code, or to be given away free. For a full overview of the CMS model, see the CMS README.

Meanwhile, the API continually polls the CMS for new NFT Templates and Pack Templates. So once the templates are configured in the CMS, the API will find them, generate the NFT instances in the API's database, and then group them into Packs based on the Pack template's configuration.

From here on out, the NFT and Pack information can be accessed from the API and displayed to an end-user, who can then purchase, bid on, redeem, or freely claim the Pack (based on the corresponding Pack template's configuration).

Frontend Overview

The backend API can be accessed via REST endpoints by a frontend. This frontend can be custom-built, or the included NextJS web project can be used and further customized.

When an end-user registers through the site, a user account record is created via the API and a new Algorand wallet is generated on their behalf. That wallet's mnemonic key is encrypted via a secret PIN code the end-user provides upon sign-up.

An authenticated end-user can then engage in user flows that allow them to acquire Packs (again, containing one or more to-be-minted NFTs). In the case of a monetary transaction, an end-user can enter their credit card information. Upon submission, this information will be validated and processed via Circle's Payments API. Upon a valid confirmation, the API then mints and transfers the assets to the user's wallet.

🚧 Pre-release

This software is in a pre-release state. This means while we strive to keep it stable and include database migrations, sometimes we may introduce breaking changes or an accidental bug. Follow our issue tracker for more details on what's coming next.

✅ Requirements

• Node.js v16.10 or greater (lts is v16.13.1 as of Jan 2022 and works well), npm v7 or greater (manage version via nvm)
• PostgreSQL (Postgres.app is recommended on macOS, or run via docker-compose up db)
• Redis for jobs
• algod (Algorand node)
  • Consider using a third party api for initial setup and experimentation.
  • A sandbox is recommended for continued learning about Algorand and its smart signatures/smart contracts
• Circle account for taking payments
• Firebase account for authentication
• Pinata account for storing NFTs
• Chainalysis for blockchain address verification

🤷 Optional

• SendGrid for sending email notifications
• Google Cloud Platform account for hosting
• Install the Nx CLI for ease of development: npm i -g nx
• Docker for a local dev environment using VSCode Dev Containers or docker compose

🚀 Get Started

You can either build and run each application manually or you can use docker-compose.

Development Environment Setup

1. Create .env files

      cp ./.env.exmaple ./.env
      cp ./apps/cms/.env.example ./apps/cms/.env
      cp ./apps/scribe/.env.example ./apps/scribe/.env
      cp ./apps/api/.env.example ./apps/api/.env
      cp ./apps/web/.env.example ./apps/web/.env

2. Address SETUP: comments in env files

3. Initialize the databases with npm run drop-tables && npm run initialize

4. Start the CMS nx serve cms

   1. If database is empty, it will automatically seed itself with test data
   2. Checkpoint: you should be able to log in the CMS and see some sample pack templates (http://localhost:8055/admin/content/pack_templates)

5. Start the job server nx serve scribe

   1. Checkpoint: you should be able to see the jobs dashboard (http://localhost:3002/bullboard)
   2. Run the sync-cms-cache job manually, twice, by promoting the delayed job in the dashboard
   3. Checkpoint: you should see rows in the Pack table in the API database (algomart_api.public.Pack)

6. Start the API nx serve api

   1. Checkpoint: you should be able to see swagger docs (http://localhost:3001/docs/static/index.html)

7. Start the web server nx serve web

   1. Checkpoint: You should be able to register an AlgoMart account, sign in and see some drops available (http://localhost:3000/drops)

8. Configure Circle webhooks

   1. Add Money to your merchant wallet to cover/float pending end user credit card transactions
      1. Get your merchant wallet's address using your Circle my-sandbox account's "Transfer from a blockchain wallet" functionality
      2. Send testnet USDC to your merchant wallet from Algorand Testnet Dispenser
   2. Checkpoint: you can add money to your wallet using one of Circle's test card numbers

9. Purchase a pack using credits

   1. Using credits from the previous step
   2. Checkpoint: you have collectibles in your collection

10. Configure an Algorand sandbox (optional)

    Local Algorand Setup

    This is an alternative to using a 3rd party Algorand node API. For local development, the Algorand Sandbox is handy docker instance that makes interfacing with the blockchain simple from your local machine. More information on Sandbox vs Third-party API services here

    • Download the Algorand Sandbox and start up the docker instance:

    ./sandbox up

    • By default this will create a private network, as well as fund a few accounts with Algos. You'll need to generate a passphrase mnemonic for one of these accounts. To see the list of the created accounts:

    ./sandbox goal account list

    • Take the <ADDRESS> from the first account and input here

    ./sandbox goal account export -a <ADDRESS>

    Use this outputted mnemonic as the FUNDING_MNEMONIC variable within the .env file within the api and scribe projects.

    Disclaimer: If you use a private network as described above, you will not be able to test features that require a public network, including the Pera Wallet (the mobile non-custodial wallet app for Algorand). For running a public network node, see below.

    Testnet Algorand Setup

    Alternatively you may choose to run the algorand sandbox on a public network such as testnet. In that case you'll need a few additional steps, such as creating and funding an account.

    • To run sandbox on testnet:

    ./sandbox up testnet

    • Then create an account:

    ./sandbox goal account new

    This will create a new, unfunded account. Testnet accounts can be funded with fake Algos using the Testnet Dispenser. You can then follow the account export steps above to get your mnemonic passphrase.

    Disclaimer: The sandbox testnet configuration will not provide an indexer. There are public indexer's available (e.g. https://algoindexer.testnet.algoexplorerapi.io/), and the Indexer Configuration will need to be updated in both app and scribe .env files.

    To learn more about available goal CLI commands for e.g. creating a new account, see the Alogrand docs.

💾 DB initialization

To initialize the databases:

npm run drop-tables  # drop existing CMS and API databases
npm run initialize   # initialize the CMS and API databases

🏃 Run

Run all 4 projects (api, cms, web, & scribe) simultaneously with combined output.

npm start

📦 Build

To build everything:

npm run build

⚙️ Unit Tests

To run all tests:

npm test

To run tests/lint only a specific library:

# assuming shared-utils is an nx library
# (ie. an alias for libs/shared/utils defined in workspace.json)...
nx run shared-utils:test
nx run shared-utils:lint

⚙️ E2E Tests

To run End-to-end integration tests with Cypress:

Be sure to follow steps outlined in the web-e2e README first.

# To open the Cypress UI and watch the tests run:
npm run test:cypress:open

# To run the test in the terminal
npm run test:cypress:run

🧹 Linting

To run eslint for all projects:

npm run lint

🐳 Running with docker-compose

Alternative to running the services manually, they can also be run via Docker. After creating the relevant .env files above, add a file called .babelrc to the root of the web project (apps/web/) and populate it with:

{ "presets": ["next/babel"] }

Then run all services:,

🆚 Running with VSCode Dev Containers.

This codebase leverages VSCode Dev Containers.

1. Install VSCode Remote Containers plugin.

2. Open the project in VSCode. When prompted, click the "Reopen in Container" button

🪆 Project dependencies

When updating dependencies, there are a few things that must be kept in mind.

Directus

If doing any updates to the Directus version, the version numbers must match across the application and the snapshot.yml file must be created with the updated version. You can use apps/cms/scripts/directus-update.sh to perform these steps. Update the version number at the top of the script.

1. Update versions
   1. Pin directus, @directus/sdk, and @directus/extensions-sdk versions in package.json
   2. Pin host version in /apps/cms/extensions/displays/pack-price/package.json
   3. Pin host version in /apps/cms/extensions/interfaces/price-conversion/package.json
   4. Pin host version in /apps/cms/extensions/hooks/import-data/package.json
   5. Pin host version in /apps/cms/extensions/hooks/kyc-management/package.json
   6. Pin host version in /apps/cms/extensions/hooks/set-verification-status/package.json
   7. Set npm install step of /docker/deploy/cms/Dockerfile to version
2. Run npm install from root to generate latest package-lock.json
3. Run nx export cms to generate latest snapshot.yml
4. Rebuild cms extensions, either via nx build cms or all of these:
   1. Run nx build-price-display cms to generate latest js file
   2. Run nx build-price-interface cms to generate latest js file
   3. Run nx build-import-data cms to generate latest js file
   4. Run nx build-kyc-management cms to generate latest js file
   5. Run nx build-set-verification-status cms to generate latest js file

Libs

libs/*

Shared Typescript interfaces and enums

For performance and code organization reasons, the Nx docs recommend putting as much functionality as possible into libs, even if the code is only used in a single app. In Nx, a lib is more than just a directory under the libs/ directory. Each lib must have an entry in the workspace.json file for the lib to build and import correctly.

Linting will fail for any lib code that tries to import code from an app. This means that lib code should never access things like global configuration variables or environment variables. (eg. Configuration) Rather, lib code should receive any environment configuration via arguments that are passed in.

If you wanted to create a new library at the path libs/shared/utils, you'd use the nx generator... nx generate @nrwl/node:lib utils --directory shared

🚢 Deployment

Please see the detailed step-by-step guide for instructions on how to use the included Terraform templates and Github Workflow to create a complete storefront environment on Google Cloud Platform.

algomart's Issues

Cannot re-run Terraform deploy on service configuration change without bumping commit

We currently specify the Cloud Run revision name when deploying via Github Actions, which helps alleviate revision name conflicts if a revision is issued in the Cloud Run console.

Unfortunately, this also prevents us from re-running terraform apply for a given workflow if we've changed environment variables, as Terraform then detects that a revision with that name already exists with a different configuration. One use case for that is misconfiguration; if Github Secrets are not set right (or if we need to update external API keys), we SHOULD BE able to update the secrets and re-deploy without bumping the git commit.

Setup and integrate with ElasticSearch or a similar service

Overview

To ensure pack and collectibles filters, various paginated pages, etc run smoothly, setting up an indexer between the CMS+API and the frontend would be helpful.

Features

• #40
• #41

Prompt consent for use of cookies

Overview

To better comply with the wealth of emerging privacy laws, we should provide a consent notice that prompts the user to acknowledge the use of cookies on the website.

Defer sending initial funds until first NFT transfer

Overview

To avoid locking up Algos in unused accounts (0.1 Algo per account), we should defer sending the initial amount until a user acquires their first NFT. This will ensure we keep funds in the funding wallet for as long as possible and is great for storefronts that will mostly rely on auctions where the NFT volume is relatively low.

Can create NFT template without unique code, but can't edit code

Overview

An NFT template can be created in the CMS without a unique code, but that blank unique code cannot be changed without deleting or archiving the entry.

Automate CMS setup that is currently manual

Overview

As a developer, I want to be able to get up and running via terminal commands only, so that I don't waste hours trying to figure out why the API can't talk to the CMS or why I don't see images in the app.

Image permissions step outlined here should be able to be replaced by a simple insert:

The user token step outlined here should be replaceable by updating the user record token column:

I propose we update the cms seed script to do both of these things.

Admin user is not created when LOG_LEVEL isn't provided

Overview

When LOG_LEVEL is not set, the admin user will not be created when the npm run bootstrap script is run. Therefore, it says it's successful in bootstrapping, but when you go to login with your username and password, it doesn't work.

To reproduce

Steps to reproduce the behavior:
This should be for a new project without a user.

1. Comment out LOG_LEVEL
2. Go to apps/cms
3. Run npm run bootstrap
4. Check CMS database table directus_users; there's no user. It also will specify in the logs it created the user if it worked.

Expected behavior

When LOG_LEVEL is warn, the admin user is created as expected and you can login.

Additional context

When you console log console.log({ userCount }) in the bootstrap file, it returns:

{
  usersCount: '17:00:32 ✨ Loaded extensions: price-conversion, pack-price\n0\n'
}

SPIKE: 3DS

Overview

Since we need to support 3DS verification, this is a for doing research and testing so we can know exactly what needs to happen for implementation.

Additional context

Questions to look into

• Is Circle's 3DS support only in the Sandbox environment?
• We need a success/error page for the user to return to upon successful verification or an error. What is needed for this?
• How would the payment flow change?
• Can we programmatically determine what countries require 3DS?
• What countries require 3DS?

Scheduled task for checking wire payments

Overview

Create task for checking the Circle payments endpoint for successful wire transfer.

We cannot transfer the asset automatically without the passcode, so this may be for sending them an email to let them know payment was verified, and then they can login to make the transfer. We'll need a form for gathering the passcode and initiating the transfer, since payment will be complete.

Additional context

We currently have a task for retrieving pending payments and looking up the payment status and updating it in the database. There will not be a payment created initially, so this cannot be used for checking for wire transfers.

The get payments endpoint has a query param for filtering by wire transfers (type = wire). The source.id attribute matches the ID of the bank account initially created. The status will be paid when the funds have settled.

This could be a manual step though, so this isn't necessary but a nice-to-have. But we'll need to mark the user as the owner of the pack once we get confirmation of payment.

Should there be a time limit to how long the user has to initiate wire transfer? AKA should we support bid expiration for these auctions. If we do, we should probably double check the status of payment right before assigning to next bidder, and maybe add time if the status is pending.

We need to check the price of the successful payment as well during this process.

Show videos in UI for NFTs

Overview

Use the preview_video field from NFT Templates to show videos in the UI when displaying an NFT (instead of the preview_image). Still use the image in thumbnails. This does not include showing videos for packs.

Keep in mind that until #20 is resolved, the upload size limit is about 32 MB.

3DS support

Overview

3DS verification is an additional authentication step used for verification in the payment flow. Certain countries require 3DS verification, so we need to support this. This will change the flow a bit, as the user has to login to their bank and then be redirected to the app upon success/error. Circle supports 3DS verification, at least in the Sandbox environment, and has documentation on how to accomplish here.

Features

• #72
• #73

Show video for packs in UI

Overview

May require some exploration before tackling this issue. Right now we only support showing images for packs in the UI. The field additional_images, while it implies it only supports images, could be used to upload videos and other files. Ideally, if someone uploads a video here, the video should show up on its pack page (e.g. /releases/pack-slug).

Keep in mind that until #20 is resolved, the upload size limit is about 32 MB.

Setup and integrate with TBD indexer

Overview

Integrate the backend with the indexer picked in #40.

Need a build workflow to protect against breaking deploys

https://github.com/rocketinsights/algorand-marketplace/commit/f57df0cbf9686da9677166a46d62c88f157f244e added a lock file that then broke the docker images and terraform deploy, requiring https://github.com/rocketinsights/algorand-marketplace/commit/0f8549cb58b43ef930aa71819cf13bf45f2efc78 to fix it

Because the API deploy failed (due to migrations not running), Web and CMS were updated, but API was broken. There should be some process to check that the images build and run properly prior to deploy. Basically, Terraform should not be 'the test' and be able to leave the overall marketplace in a broken state.

Implementation of 3DS

Overview

In order to support payments from certain countries, we need to use 3DS verification, opposed to just cvv verification as is currently supported for card payments. This is for building out the necessary functionality to support this.

Additional context

More details to come after #72 is complete.

Requires #112 to be available, so we can determine which country is used and determine what verification to use.

Infinite login redirect loop

Overview

When my token expires and I try to visit my/collectibles I get in an infinite redirect loop between login and the my/collectibles page.

To reproduce

Steps to reproduce the behavior:

1. Login using email (dev tools network tab open)
2. set TOKEN_COOKIE_EXPIRES_IN_DAYS=0 in auth-context.tsx (...or wait a day. This always happens after long periods of being idle.)
3. visit /my/collectibles
4. 😬 (at this point you should be able to set TOKEN_COOKIE_EXPIRES_IN_DAYS back to 1 and continue getting in the same loop)

Expected behavior

I should either be logged in automagically or be forced to do it manually if it's not possible to programmatically renew the expiration.

Screenshots

Desktop:

• OS: MacOS 11.6
• Browser: Chrome
• Version: 95.0.4638.54

Spike: Integrate with Moonpay

Overview

Explore using Moonpay as an alternative to Circle.

Where is the CMS's Subtitle for an NFT Template?

Overview

To be fair, I can't get through the flow through right now, but there are fields in the CMS that I simply don't see on the front end.

Adhere to the ARC3 standard

Overview

Follow the ARC3 standard to improve compatibility with other (future) NFT storefronts. This will involve storing NFT data in IPFS and also generating a metadata.json file according to the ARC3 spec.

Features

• #118
• #119
• #120

Wire payment support

Overview

Circle requires payments over 3k to be wire payments. This is for building out the functionality to support this new flow.

Features

• #75
• #76
• #131
• #138
• #77
• #139
• #152
• #125
• #126 (holding off)
• #162
• #180

Error when viewing 1 pack per user when having other purchases

Overview

When viewing a pack that only allows one purchase per customer the user will encounter an error if they have purchased other packs, but not the one per customer pack they are trying to view.

To reproduce

Steps to reproduce the behavior:

1. Create a new user
2. Create a pack that allows only one purchase per user
3. Purchase any other pack
4. Find the one per customer pack in releases and navigate to that pack.
5. Will encounter 400 error

Expected behavior

Be able to view and purchase the pack

Screenshots

Desktop (if applicable):

• OS: OSX 11.1
• Browser: Chrome
• Version: 95.0.4638.54

Page for individual NFT templates and NFT instances

Overview

Setup pages for individual NFT templates and NFT instances so they can be linked from, for example, the homepage. Will need some design guidelines here, but can infer most styles from existing content to start.

Additional context

On the homepage you can add "featured" NFT templates (aka Collectibles). In the sample implementation, they do not link to anything, which may be unexpected. To have them link somewhere, we'll first need to add pages for them.

Additionally, NFT instances (that is, an NFT template that has been minted and has its own ASA index), might be useful to be shareable via links from a user's profile page.

Switch from Container Registry to Artifact Registry?

Apparently AR is the recommended service over CR

Affects

• github deploy script
• local build script (not checked in yet)
• documentation

Spike: Explore alternatives to TypeBox

Due to the weird behaviors we've seen with Nullable lately, one question is if we can switch to using Zod and Zod to JSON Schema instead of TypeBox. If the nullable issues (#217) go away, then we should make the switch. Otherwise we'll need to explore other options to allow for some fields to be null in our API.

Another option is Superstruct, but would require some more work adapting to Fastify and Objection.

Either option can also replace validator-fns.

Not limited to these options, so some research would be helpful to identify other options.

Video Preview Upload Fails

Overview

I tried uploading a preview video for an NFT that was very large for something like that and got an error but could only discover what it was after digging into the network requests: https://share.brandonontheinternet.com/X6ub9oZR

To reproduce

Steps to reproduce the behavior:

1. Go to the CMS
2. Create an NFT Template
3. Try to upload a video to the CMS that's too big
4. See error

Expected behavior

It uploads the video or tells me in the UI that the file is too large.

In-page notifications

Overview

We'll need some design clarification on this one before we tackle it. But basically, we'll want a page to list notifications that we also send out emails for (bought an NFT, won an auction, was outbid, etc). We may also want a fairly real-time toast notification.

Will need to extend the existing Notification model, or make new one. May also need to look into Elastic Search or similar to index packs and collectibles for quick lookup.

Switch from Cloud Run to an alternative (Compute Engine/Kubernetes/??)

Overview

As Cloud Run imposes some limitations that are proving hard to workaround, let's switch to Compute Engine (or some other non-serverless GCP option).

Switch to nodemailer to support SMTP and reduce vendor lock-in

Overview

Right now the API requires a SendGrid account. To remove that vendor lock-in, we can switch to using Nodemailer and SMTP configuration. SendGrid, among many other email service providers, support using SMTP.

Then we can use SMTP "connection strings" like these:

SMTP_URL=smtp://user:password@host:port/?option=a

And later in code:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport(process.env.SMTP_URL);

transporter
  .sendMail({
    from: "[email protected]",
    to: "[email protected]",
    subject: "My subject line",
    html: "<p>Hello there</p>",
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

Unable to create new account

Overview

To reproduce

[1636418886593] ERROR (185 on 643993e0280a): Bad Request
    context: "AlgorandAdapter"
    err: {
      "type": "Error",
      "message": "Bad Request",
      "stack":
          Error: Bad Request
              at Request.callback (/app/node_modules/superagent/src/node/index.js:879:15)
              at fn (/app/node_modules/superagent/src/node/index.js:1130:18)
              at IncomingMessage.<anonymous> (/app/node_modules/superagent/src/node/parsers/json.js:19:7)
              at IncomingMessage.emit (node:events:402:35)
              at endReadableNT (node:internal/streams/readable:1343:12)
              at processTicksAndRejections (node:internal/process/task_queues:83:21)
      "status": 400,
      "response": {
        "req": {
          "method": "POST",
          "url": "http://3.134.119.141:4001/v2/transactions",
          "data": {
            "type": "Buffer",
            "data": [
              130,
              163,
              ...
	      ...
              114,
              101,
              103
            ]
          },
          "headers": {
            "x-algo-api-token": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
            "content-type": "application/x-binary"
          }
        },
        "header": {
          "access-control-allow-origin": "*",
          "content-type": "application/json; charset=UTF-8",
          "vary": "Origin",
          "date": "Tue, 09 Nov 2021 00:48:06 GMT",
          "content-length": "714",
          "connection": "close"
        },
        "status": 400,
        "text": "{\"message\":\"TransactionPool.Remember: transaction OHLE3O3U2FAO6MO3V3CEVDLGDU3BLWTHUUI6V4MY2WZOE47DILMA: overspend (account A473OSLPGV7FEMMQ3VCAOX7PZNO44Y5X5VZQC34IJFL6LBHC2AMHCKH2CE, 
        data {_struct:{} Status:Offline MicroAlgos:{Raw:0} RewardsBase:0 RewardedMicroAlgos:{Raw:0} VoteID:[0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] 
        SelectionID:[0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0] 
        VoteFirstValid:0 VoteLastValid:0 VoteKeyDilution:0 AssetParams:map[] Assets:map[] AuthAddr:AAAAAAAAA                                                       AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAY5HFKQ 
        AppLocalStates:map[] AppParams:map[] 
        TotalAppSchema:{_struct:{} NumUint:0 NumByteSlice:0} TotalExtraAppPages:0}, tried to spend {100                                                       0})\"}\n"
      }
    }

Expected behavior

I don't have any idea what error text means.

Release detail page should be accessible when unauthenticated

Overview

Currently, the /releases/[pack-slug] page forces end users into a login redirect flow. Ideally, they should be able to access this page when authenticated, but not take any actions to purchase, claim, bid, or redeem.

Can't see image preview for the NFT template.

Overview

I can't see the image preview for the NFT template.

To reproduce

Go to 'http://18.223.54.34:3000/releases', the image is just blank.
Go to 'http://18.223.54.34:3000/releases/11111', can see the image.

The image URI of the image is not correct.

Screenshots

Desktop (if applicable):

• ubuntu 20

Add wire account information to the profile section

Overview

We should add the details for the bank account created for the payment in the Profile section so the user can easily reference this information when initiating payment. It remains to be seen what this will look like.

Additional context

Where should this information be added?

Support videos

Overview

Support video content in AlgoMart.

Features

• #20
• #21
• #22
• #12

Notifications from Circle

Overview

Instead of regularly checking for statuses of payments, we can subscribe to Circle's notifications that will let us know when a resolved status has been reached, eliminating unnecessary polling before a resolution has been reached. However, Circle resolves a payment as paid in 3 days, and we are only checking non-resolved statuses, so the impact isn't too significant.

Additional context

See the Circle API documentation on notifications and this documentation on payment status notifications in particular.

Circle: Consolidate submission handlers & general cleanup

Overview

• The checkout page has two large functions that are nearly identical (submit bid and submit purchase).
  • Can we consolidate these into one function?
  • Both of these functions do an awful lot, can they be streamlined or split up?
• The add payment method page does something almost identical as well, so same thoughts here.
• Does it make sense to add a payment context? There's a good deal of prop drilling going on.

Change wording & link when nothing is owned

Overview

When a user logs in, and owns nothing, and clicks "Find something cool" they're taken /brands instead of /releases:

https://share.brandonontheinternet.com/RBuE4OnG

Redemption doesn't work on JITM assets

Redeeming a pack with unminted assets will fail due to user invariant.

Pass "showCollectibles" CMS value to front end and display on Release details

Overview

There is a CMS setting "show_nfts" that is not being ingested in the DirectusAdapter. We should consume this and if it's present on a pack, show as depicted in the design.

To keep this simple, we can probably just say "This pack contains X collectibles". And for whatever number X is, show the generic mystery release item box with the question mark:

Accepting wire payments

Overview

This is for building out the functionality to support accepting wire payments.

Additional context

A lot of the functionality was built for another project and just needs to be pulled into this project.

Including

• API endpoints to support front-end functionality (creating bank accounts, getting the status, and getting wire instructions) and corresponding types.
• Front-end endpoints and validation.
• Simplify bid flow for wire payments (no need to gather credit car information)
• Checkout flow for initiating creating an account for the wire payment

Do not wait for minting and do not trigger transfer during checkout

Overview

During checkout, do not wait for minting to complete and do not trigger transfer endpoint.

Support generating NFTs just-in-time instead of ahead-of-time

Overview

To support a model with a high amount of editions per NFT template, we'll need to either: a) switch to only use JIT minting or b) have to option to choose between JIT and AOT.

Seeing as b) might make the code overly complex, it probably makes more sense to only support JIT.

Additional context

We did consider using JIT minting before. But due to various reasons we settled on AOT as it was easier to implement:

• Algorand accounts can only hold up to 1000 assets at a time. This restriction is going away, but we'll need to work around it for the time being to avoid issues in the short-term.
• If we do JIT, then we need to make sure that not only the payment and asset transfer succeeds, but also that the asset minting is successful. If the minting fails at the time of initial purchase, then we need to have a mechanism in place to resolve the underlying issue (lack of funds, invalid ASA params, etc).

Spike: Explore options for an indexer and search service

Overview

Some options include:

• ElasticSearch
• Algolia
• Solr
• Lucene
• others...

Ideally an open-source option that we can self-host. If possible, we want to avoid vendor lock-in.

Trigger transfer after package opening

Overview

Change the checkout flow so that it only deals with payments and minting of assets. The asset transfer will be moved to after the pack opening screen. This is somewhat related to the wire payment epic #74

Features

• #62
• #87
• #86
• #88
• #89

Additional context

This way the checkout will speed up a bit and the minting process can happen in the background while the user opens their pack. We'll still need to wait for the pack's NFTs to be minted before triggering the transfer. This also means moving the passphrase entry to show after the pack opening, most likely in a modal (similar to how it shows for free packs today).

May need some design input here too as we'll need to show in the UI, where appropriate, that NFTs are still being minted. We'll also need to provide an option to transfer a pack on a user's list of transactions (i.e. /my/profile/transactions).

Passphrase prompt

New transfer button needed on these screens

/my/profile/transactions

/pack-opening/:id

Flowchart for payment checkout

Flowchart for transfer

Extend AppLink & ExternalLink components to support button styling.

Overview

There are (and will be more instances where a button should behave as an AppLink or ExternalLink (for example, on DRL we have a button that kicks the user to a newsletter signup page on the main DRL site).

It would be nice if we could have buttons and text links (both in-app and external) render as button tag or anchor tag, but inherit the appropriate styling based on props.

Support non-custodial wallets

Overview

Support using wallets outside of AlgoMart such as MyAlgo, Algorand Wallet, AlgoSigner. This also includes adding a feature to export the AlgoMart wallet to one of the aforementioned ones.

Various flows and questions that relates to this:

• Transfer NFTs (from pack): when buying a pack the ASAs would still get sent to the custodial wallet.
• Transfer NFTs (from my collection): add option to transfer ASA to non-custodial wallet. Can only once ASAs are no longer in frozen state (meaning chargebacks are no longer possible due to X days have passed). Need to verify this with Circle.
• Showcase: Remove showcase as-is today. Replace with endpoint that takes a Algorand account address and list ASAs belonging to that account that also exist in the AlgoMart instance.
• Tracking ownership: Once transferred to non-custodial, ownership within AlgoMart is "cleared out". That means AlgoMart no longer knows who is the current owner and Collectibles will no longer be listed in their collection.
• Purchase packs using on-chain transaction: A user can opt to purchase a pack using USDCa on-chain (maybe later support for Algos, via swap on Tinyman). Once purchased, the ASAs would still be sent to the custodial wallet. We can remove frozen state right away due to no KYC requirements.

Features

• #140
• #142
• #147
• #148
• #149
• #252
• #150
• #101 (related epic)
• #143
• #144

Remove passphrase prompt ahead of checkout

Overview

Passphrase prompt should not happen until after pack opening.

Releases & My Collection are buried on mobile.

Not sure if this is an issue, but these links move from being extremely prominent on the top of the page on desktop to extremely subtle near the bottom on mobile.

Response code 401 (Unauthorized)

Hi:

I'm getting Response code 401 (Unauthorized) when executing GET requests to the CMS. I've got the key set up in the services/api/.env, Just wondering what I'm missing here. I set up a wallet and have the mnemonic set and Circle is setup.
Cheers, Dave

Infinite Loop on Sign-in

Overview

As an aside, it drives me nuts it says "sign in" if you intend to sign up.

That said, the flow is broken right now (at least on nfty-mart): https://share.brandonontheinternet.com/Kou7ZryJ

I just infinitely loop on the same sign in flow.

Slim down docker images

API and Web docker images should be multistage to strip out any dev dependencies that aren't needed after building.