Page MenuHomePhabricator

[Cashtab] Build custom switch to deprecate antd switch
ClosedPublic

Authored by bytesofman on Mar 25 2024, 20:35.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABCc5320ca2c33a: [Cashtab] Build custom switch to deprecate antd switch
Summary

Build a custom switch component to replace antd switch in Cashtab

Because implementing this switch on the Airdrop page required restyling the form, restyle it with non-antd form components.

Test Plan

npm test

npm start and check appearance of airdrop, configure, screens
check appearance of show/hide balance switch
check appearance of new multiple recipients switch on send screen

Diff Detail

Repository
rABC Bitcoin ABC
Branch
custom-switch
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 28108
Build 55761: Build Diffcashtab-tests
Build 55760: arc lint + arc unit

Event Timeline

alt switch components that work, basic styling

build and implement switch, clean up airdrop form and use custom Inputs

Failed tests logs:

====== CashTab Unit Tests: <Airdrop /> We can send a pro-rata airdrop and equal tx to a tokenId not in our cache using custom settings ======
Error: expect(element).toHaveAttribute("aria-checked", "false") // element.getAttribute("aria-checked") === "false"

Expected the element to have attribute:
  aria-checked="false"
Received:
  null
    at Object.toHaveAttribute (/work/cashtab/src/components/Airdrop/__tests__/Airdrop.test.js:150:41)
====== CashTab Unit Tests: <Airdrop /> We can ignore addresses with less than a token balance for a token with decimals ======
Error: expect(element).toHaveAttribute("aria-checked", "false") // element.getAttribute("aria-checked") === "false"

Expected the element to have attribute:
  aria-checked="false"
Received:
  null
    at Object.toHaveAttribute (/work/cashtab/src/components/Airdrop/__tests__/Airdrop.test.js:274:41)
====== CashTab Unit Tests: <App /> Setting "Send Confirmations" settings will show send confirmations ======
Error: expect(element).toHaveStyle()

- Expected

- background-color: rgb(189, 189, 189);
+ background-color: white;
    at Object.toHaveStyle (/work/cashtab/src/components/__tests__/App.test.js:512:41)
====== CashTab Unit Tests: <App /> Setting "ABSOLUTE MINIMUM fees" settings will reduce fees to absolute min ======
Error: expect(element).toHaveStyle()

- Expected

- background-color: rgb(189, 189, 189);
+ background-color: white;
    at Object.toHaveStyle (/work/cashtab/src/components/__tests__/App.test.js:655:35)
====== CashTab Unit Tests: <App /> Migrating from wallet/savedWallet keys (version < 1.6.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:910:58)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7)
====== CashTab Unit Tests: <App /> Migrating from wallet/savedWallet keys (version < 1.6.0): A user with pre-2.1.0 valid wallets in savedWallets has them all migrated to new storage keys and new shape ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:941:58)
====== CashTab Unit Tests: <App /> Cashtab version >= 1.6.0 and < 2.1.0: A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:1030:58)

Each failure log is accessible here:
CashTab Unit Tests: <Airdrop /> We can send a pro-rata airdrop and equal tx to a tokenId not in our cache using custom settings
CashTab Unit Tests: <Airdrop /> We can ignore addresses with less than a token balance for a token with decimals
CashTab Unit Tests: <App /> Setting "Send Confirmations" settings will show send confirmations
CashTab Unit Tests: <App /> Setting "ABSOLUTE MINIMUM fees" settings will reduce fees to absolute min
CashTab Unit Tests: <App /> Migrating from wallet/savedWallet keys (version < 1.6.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup
CashTab Unit Tests: <App /> Migrating from wallet/savedWallet keys (version < 1.6.0): A user with pre-2.1.0 valid wallets in savedWallets has them all migrated to new storage keys and new shape
CashTab Unit Tests: <App /> Cashtab version >= 1.6.0 and < 2.1.0: A user with an invalid Cashtab wallet as the active wallet is migrated on startup

updating airdrop tests, starting to fix app tests

Failed tests logs:

====== CashTab Unit Tests: <App /> Cashtab version >= 1.6.0 and < 2.1.0: A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:1005:58)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7)

Each failure log is accessible here:
CashTab Unit Tests: <App /> Cashtab version >= 1.6.0 and < 2.1.0: A user with an invalid Cashtab wallet as the active wallet is migrated on startup

standardize loading methods in app tests

Better styling for airdrop form

fix all the forms in airdrop.js

Failed tests logs:

====== CashTab Unit Tests: <Airdrop /> We can send a pro-rata airdrop and equal tx to a tokenId not in our cache using custom settings ======
Error: expect(element).toHaveValue(ecash:qz2708636snqhsxu8wnlka78h6fdp77ar59jrf5035, 555.55
ecash:qr204yfphngxthvnukyrz45u7500tf60vyqspva5a6, 1666.66
ecash:qrq64hyel9hulnl9vsk29xjnuuqlpwqpcv6mk9pqly, 555.55
ecash:qzn3gqf7vvm2qdu2rac6m6r4kgfcsyaras7jfqja3m, 2222.22)

Expected the element to have value:
  ecash:qz2708636snqhsxu8wnlka78h6fdp77ar59jrf5035, 555.55
  ecash:qr204yfphngxthvnukyrz45u7500tf60vyqspva5a6, 1666.66
  ecash:qrq64hyel9hulnl9vsk29xjnuuqlpwqpcv6mk9pqly, 555.55
  ecash:qzn3gqf7vvm2qdu2rac6m6r4kgfcsyaras7jfqja3m, 2222.22
Received:
  ecash:qzj5zu6fgg8v2we82gh76xnrk9njcreglum9ffspnr, 150
  ecash:qz2708636snqhsxu8wnlka78h6fdp77ar59jrf5035, 50
  ecash:qr204yfphngxthvnukyrz45u7500tf60vyqspva5a6, 150
  ecash:qrq64hyel9hulnl9vsk29xjnuuqlpwqpcv6mk9pqly, 50
  ecash:qzn3gqf7vvm2qdu2rac6m6r4kgfcsyaras7jfqja3m, 200
  ecash:qpmytrdsakt0axrrlswvaj069nat3p9s7cjctmjasj, 4400
    at Object.toHaveValue (/work/cashtab/src/components/Airdrop/__tests__/Airdrop.test.js:173:11)
====== CashTab Unit Tests: <Airdrop /> We can ignore addresses with less than a token balance for a token with decimals ======
Error: expect(element).toHaveValue(ecash:qpmytrdsakt0axrrlswvaj069nat3p9s7cjctmjasj, 500000)

Expected the element to have value:
  ecash:qpmytrdsakt0axrrlswvaj069nat3p9s7cjctmjasj, 500000
Received:
  ecash:qp6qkpeg5xmpcqtu6uc5qkhzexg4sq009sfeekcfk2, 499905.84
  ecash:qpmytrdsakt0axrrlswvaj069nat3p9s7cjctmjasj, 94.15
    at Object.toHaveValue (/work/cashtab/src/components/Airdrop/__tests__/Airdrop.test.js:293:11)

Each failure log is accessible here:
CashTab Unit Tests: <Airdrop /> We can send a pro-rata airdrop and equal tx to a tokenId not in our cache using custom settings
CashTab Unit Tests: <Airdrop /> We can ignore addresses with less than a token balance for a token with decimals

fix airdrop formdata state initialized at false, fix airdrop test with spaces in input data csv

bytesofman edited the test plan for this revision. (Show Details)
bytesofman added inline comments.
cashtab/src/components/Airdrop/__tests__/Airdrop.test.js
150 ↗(On Diff #46548)

we don't need to test the switch. that the switch works is implied by the test passing

bytesofman edited the summary of this revision. (Show Details)

rebase

emack requested changes to this revision.Mar 29 2024, 11:45
emack added a subscriber: emack.

Same issue upon startup as D15804, however for reference D15748 loads fine without this issue.

This revision now requires changes to proceed.Mar 29 2024, 11:45

Same issue upon startup as D15804, however for reference D15748 loads fine without this issue.

This looks related to testing this diff after testing the migration diff.

Need to test this in incognito if your localhost:3000 storage has already migrated (or build and deploy to netlify, or test in a different browser). this diff is not expected to reverse migrate

in general -- while I think these diffs are good to be reviewed now, I won't be landing them until after D15784 lands

rebase onto wallet migration 2.9.0

Failed tests logs:

====== CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup ======
Error: expect(element).toHaveTextContent()

Expected element to have text content:
  9,513.12 XEC
Received:
  0.00 XEC
    at Object.toHaveTextContent (/work/cashtab/src/components/__tests__/App.test.js:1132:58)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at processTimers (node:internal/timers:514:7)

Each failure log is accessible here:
CashTab Unit Tests: <App /> Migrating (version < 2.9.0): A user with an invalid Cashtab wallet as the active wallet is migrated on startup

wait for wallet to load in migration tests

emack requested changes to this revision.Mar 29 2024, 14:04

The switches on the airdrop screen are too large relative to the rest of the UI, should resize to match the ones on config

image.png (477×514 px, 40 KB)

This revision now requires changes to proceed.Mar 29 2024, 14:04

The switches on the airdrop screen are too large relative to the rest of the UI, should resize to match the ones on config

image.png (477×514 px, 40 KB)

eh I kind of like them.

they are major form elements in Airdrop, and there are a lot of them. I think the larger size makes them less ambiguous and easier to work with for mobile users.

Might bump the size in Config as well. imo the small switches are tough to hit on mobile. may also want to consider more spacing between the switches. but, imo not strictly related to this diff.

This revision is now accepted and ready to land.Mar 29 2024, 22:21