no-cash-7970 / txnduck

Transaction building tool for Algorand blockchain

txnDuck 🦆
Transaction Builder UI

       

A free and open source web-based tool that serves as a graphical user interface (GUI) for easily creating and sending Algorand transactions without the need for software development knowledge.

🧭 Table of contents

• 🌐 Websites
• ✨ Features
• 💬 Supported languages
• 💻 Setting up and running locally
  • Requirements for local setup
  • Installing the local setup
  • Uninstalling and removing the local setup
  • Updating the local setup
• 🛠️ Installation for development
• 🤝 Contributing
• 🏆 Acknowledgments

🌐 Websites

You can use txnDuck for free (excluding any Algorand network fees) at the following websites:

Production: https://txnduck.vercel.app
Preview: https://txnduck-preview.vercel.app

The Production website hosts the latest stable release (the stable branch) where are all of the features are considered complete and stable. On the other hand, the Preview website usually hosts the unstable version (the main branch) with the latest developments, so it may have incomplete and/or unstable features that have yet to be released. There may be times when both websites are the same.

✨ Features

• Build and send a transaction to transfer Algos, create a token or NFT, call an application (smart contract), etc.
• Import a transaction file to sign or send
• Export to a signed/unsigned transaction file
• Specify custom Algod node
• FUTURE: Build transaction groups (atomic transactions)

💬 Supported languages

The UI (user interface) for txnDuck has multiple supported languages. However, not all of the languages have the same amount of support. The translations for some of the supported languages may be incomplete or contain errors due to being a machine translation.

If you want to help by adding or fixing a translation, read about how you can do so in the Contributing Guidelines.

Language	Completeness	Machine translated?
English	Full	No
Spanish	Full	Yes

💻 Setting up and running locally

Important

This is not for development. To set up and run txnDuck for development, follow the instructions for installing txnDuck for development.

Instead of using one of the official txnDuck websites, you can choose to download the source code and run the software locally on your own computer that does not rely on an external website.

Requirements for local setup

• Access to your machine's command line interface (CLI), such as Terminal, PowerShell or Command Prompt
• Node.js version 18.18.0 or higher installed. Version 20.0.0 or higher is recommended.
• Yarn package manager installed. Version 2.0.0 or higher, version 4.0.0 or higher is recommended.

  NOTE: If you have Yarn 1.x.x installed, you can install and switch to Yarn 2.0.0 or higher by running `corepack enable && yarn set version berry

Installing the local setup

1. Download the latest source code.

   • Production (stable branch): https://github.com/No-Cash-7970/txnDuck/archive/refs/heads/stable.zip
   • Preview (main branch): https://github.com/No-Cash-7970/txnDuck/archive/refs/heads/main.zip

2. Unzip the downloaded source code. You should now have a new folder that contains a bunch of files and folder, which include "public" and "yarn.lock".

3. Open the CLI and go to the folder created in step #2 by running the following in the CLI. Of course, replace PATH/TO/SOURCE_CODE/FOLDER with the actual path to the folder.

   cd PATH/TO/SOURCE_CODE/FOLDER

4. Install the source code dependencies.

   yarn workspaces focus --all --production

5. Build the source code.

   yarn build

6. Run the web server.

   yarn start

7. Open a web browser and go to http://localhost:3000 to start using your local txnDuck! 🎉 The web server must be running in the CLI (Command Line Interface) to use your local txnDuck.

8. (Optional) If you are finished using your local txnDuck, stop the web server by closing the CLI window or by pressing Ctrl+C (or Cmd+C on Mac) while in the CLI. You can start the web server again by following Steps #6 and #7.

Uninstalling and removing the local setup

1. Make sure the web server is not running. Stop the server if it is. Refer to step #8 in the installation instructions.
2. Delete the source code folder. (The folder created in Step #2 of the installation instructions)
3. OPTIONAL: Uninstall the software listed in the requirements for local setup if you do not need them for something else.

Updating the local setup

Some time after installing the local setup, a new version of txnDuck may be released. It is recommended that you update to the latest version to have the latest features and bug fixes.

1. OPTION #1: Uninstall the old version by following Steps #1 and #2 of the uninstallation instructions.
   OPTION #2: Keep the old version and rename the source code folder for the old version.
   OPTION #3: Keep the old version without renaming its source code folder. When installing the new version, use a different name for the new version's source code folder.
2. Make sure the web server is not running. Stop the server if it is. Refer to step #8 in the installation instructions.
3. Follow the installation instructions again. Make sure you download the latest source code.

🛠️ Installation for development

Refer to the Developers Documentation for instructions on how to install, update or uninstall the development environment.

🤝 Contributing

Contributions are highly welcomed and appreciated. Every little bit of help counts, so do not hesitate! Please read the Contributing Guidelines to learn how to contribute to this project.

🏆 Acknowledgments

• SilentRhetoric - Proposed the idea of a transaction builder for Algorand
• Wes - Recommended the name "txnDuck"

txnduck's Issues

Create footer

Compose txn: Send Algos

Compose txn page base

• Steps navigation component
• Page title
• Instructions

Create issue template(s)

Resources

• https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/about-issue-and-pull-request-templates
• https://github.com/stevemao/github-issue-templates
• https://github.com/devspace/awesome-github-templates

Compose txn: Asset Send

Set up release script(s)

The release script should do the following:

1. Lint
2. Test
3. Update version in package.json
4. Commit changes
5. Create Git tag
6. Generate GitHub release

Resources

https://classic.yarnpkg.com/lang/en/docs/cli/version/

https://github.com/conventional-changelog/releaser-tools/tree/master/packages/conventional-github-releaser

https://github.com/motdotla/dotenv

Install Algorand SDK and AlgoKit TypeScript Utilities

Using AlgoKit TypeScript Utilities should make working with the Algorand SDK easier.

Resources

https://github.com/algorand/js-algorand-sdk

https://github.com/algorandfoundation/algokit-utils-ts

Install Tabler icons

Huge icon set to be used

https://tabler.io/docs/icons/react

Nav Bar - Settings: Wallet connect/disconnect

Compose txn: Form field validation

• Validation for general fields
• Validation for payment fields
• Validation for asset transfer fields
• Validation for asset configuration fields
• Validation for asset freeze fields
• Validation for application fields
• Validation for key registration fields

Create pull request template

Resources

• https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/about-issue-and-pull-request-templates
• https://github.com/stevemao/github-issue-templates
• https://github.com/devspace/awesome-github-templates

Set up GitHub Actions for linting and testing

• Action for running Jest
• Action for running ESlint
• Action for running E2E tests

Set up git hooks

The pre-commit hook should run the linter and the tests. Then use the commitizen CLI to make it easier to write good commit message. Using a commit hook to run commitlint Using Husky to make it easier to install and manage hooks.

Resources

https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks

https://typicode.github.io/husky/

https://www.freecodecamp.org/news/how-to-add-commit-hooks-to-git-with-husky-to-automate-code-tasks/

https://github.com/commitizen/cz-cli#optional-install-and-run-commitizen-locally

https://github.com/conventional-changelog/commitlint#getting-started

Lefthook

https://github.com/evilmartians/lefthook

https://www.github.com/evilmartians/lefthook/issues/125

https://github.com/evilmartians/lefthook/blob/master/docs/install.md#node

https://github.com/evilmartians/lefthook/tree/master/examples/commitlint

https://www.bitovi.com/blog/how-to-migrate-husky-to-lefthook

Update README

• Badges
• Description
• Table of Contents
• Installation for development
• Installation for self/local hosting
• License
• How to Contribute
• Link to website(s)

Resources

https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/

https://www.readme-templates.com/

Compose txn: Close Out

Install Noto fonts

The Noto font family is a nice legible font with a wide variety of language options.

• Noto Sans
• Noto Sans Mono
• Noto Sans Display
• Noto Color Emoji

Resources

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

https://fonts.google.com/noto

https://fontsource.org/fonts/noto-sans/install

https://fontsource.org/fonts/noto-sans-mono/install

https://fontsource.org/fonts/noto-sans-display/install

https://fontsource.org/fonts/noto-color-emoji/install

Install & configure feature flags

To make continuous deployment easier by being able to disable unstable features

Options

https://github.com/garbles/flag/tree/master/packages/flag

https://github.com/romaindso/react-feature-flags

Install & configure i18next

For internationalization and localization

Resources

https://www.i18next.com/

https://locize.com/blog/next-13-app-dir-i18n/

https://react.i18next.com/

https://github.com/i18next/i18next-resources-to-backend

https://www.deepl.com/translator

Input components: Toggle

Component for a toggle switch form field

Nav Bar - Settings: Theme switcher

Resources

• https://github.com/11bit/jotai-minidb
• https://softwareengineering.stackexchange.com/a/219964

Install & configure Playwright

Playwright is to be used for E2E and integration testing

https://nextjs.org/docs/pages/building-your-application/optimizing/testing#manual-setup-1

Input components: TextField

Component for a plain text input form field

Install Jotai

For managing the application state. May switch to something else like Zustand.

Resources

https://github.com/pmndrs/jotai

https://egghead.io/lessons/react-share-state-between-react-components-with-jotai-useatom

https://www.reddit.com/r/reactjs/comments/110rseg/comment/j8cbjyb/?utm_source=share&utm_medium=web2x&context=3

Initialization

• yarn create next-app
• Add .editorconfig
• Add .vscode/ to .gitignore
• Add .gitattributes
• Add LICENSE
• First commit

Add CONTRIBUTING

• Git commit guidelines
• Installation
• Configuring environment
• How to contribute code
• How to contribute translation

Resources

https://www.conventionalcommits.org/en/v1.0.0/#summary

Examples

https://github.com/algorand/go-algorand/blob/master/CONTRIBUTING.md

https://github.com/angular/angular/blob/main/CONTRIBUTING.md

https://github.com/algorandfoundation/algorun/blob/main/CONTRIBUTING.md

https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md

https://github.com/algorandfoundation/algokit-cli/blob/main/CONTRIBUTING.md

Compose txn: Rekey

Configure metadata of pages

The metadata will have to be different for each language

Resources

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Input components: NumberField

Component for a number input form field

Review/Sign page

• #64
• Signing transaction
• Display transaction details
• Heading

Input components: FieldGroup

A group of input components with an optional h# heading.

Resources

• https://www.tpgi.com/fieldsets-legends-and-screen-readers-again/
• https://www.w3.org/WAI/tutorials/forms/grouping/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role

Input components: TextArea

Component for a text area input form field

Install & configure Gulp

For automating releases, CI, and git hooks. Works with *nix systems and Windows.

Set up & configure NOTICE generation

Many libraries and packages use the MIT license or some other license that requires the copyright notice of that library/package to be included in your library/package. The copyright notices for dependencies are usually placed in a NOTICE file.

Resources

https://classic.yarnpkg.com/en/docs/cli/licenses/#toc-yarn-licenses-generate-disclaimer

https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html#notice-condition

Create nav bar base

Create the nav bar with just the website title

Add loading skeletons

• Compose form
• Sign transaction area (with data table)

Nav Bar: Language switcher

Conditional show component (ShowIf)

A component that will only show if the given condition is true. The component is hidden by default.

Example:

<ShowIf cond={true}>
  Hello world!
</ShowIf>

Replace home page

Replace the placeholder home page with a real home page with the appropriate links.

Nav Bar: Settings modal base

Nav Bar: Algod node selection

Send txn page

• Heading
• Confirmed transaction message
• Handle failed transaction

Install & configure Jest

Jest is to be used for unit testing

https://nextjs.org/docs/pages/building-your-application/optimizing/testing#setting-up-jest-with-the-rust-compiler

Add E2E tests for language selection and URL redirection

Input components: RadioGroup

Component for a radio group form field

Set up & configure deployment to Vercel

Using Vercel to host the app

https://nextjs.org/docs/app/building-your-application/deploying#managed-nextjs-with-vercel

Txn presets page

This page will have /txn as the URL

• Set buttons to links using query parameter
• Process query parameter in Compose Txn page
• Add category filter

Input components: CheckBox

Input components: SelectBox

Component for a select input form field

Install & configure Tailwind libraries

Tailwind libraries to be used

• Install daisyUI
• Install tailwind typography plugin

https://daisyui.com/docs/install/

Set up and configure `.env` files

Environments: Local (development), Stable (main, production), Unstable (preview, beta)

Resources

https://nextjs.org/docs/app/building-your-application/configuring/environment-variables