Page MenuHomePhabricator

[Cashtab] Better formdata organization in create token form
ClosedPublic

Authored by bytesofman on Apr 17 2024, 12:48.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC2844d9ce0c0c: [Cashtab] Better formdata organization in create token form
Summary

T3528

We have many state fields different form data input and errors. We do not need so many. Combine string form data items into one object. Combine input handling into one function.

This will make it easier to support additional token genesis tx types, like NFTs.

Test Plan

npm test

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

Tail of the build log:

Test depends on mock-chronik-client. Installing mock-chronik-client dependencies...
/work/modules/mock-chronik-client /work/abc-ci-builds/token-server-tests

added 236 packages, and audited 237 packages in 1s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Test does not depend on ecash-lib-wasm, skipping
/work/apps/token-server /work/modules/mock-chronik-client /work/abc-ci-builds/token-server-tests
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 611 packages, and audited 612 packages in 5s

113 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
CI configured to test build. Building...

> token-server@0.0.0 prebuild
> ts-node scripts/prepSecrets.ts

secrets.ts does not exist, copying secrets.sample.ts...

> token-server@0.0.0 build
> tsc

scripts/sendTgIconNotice.ts(28,43): error TS2345: Argument of type '{ name: string; ticker: string; decimals: number; url: string; initialQty: string; tokenId: string; }' is not assignable to parameter of type 'TokenInfo'.
  Property 'genesisQty' is missing in type '{ name: string; ticker: string; decimals: number; url: string; initialQty: string; tokenId: string; }' but required in type 'TokenInfo'.
Build token-server-tests failed with exit code 2

Failed tests logs:

====== CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification ======
TestingLibraryElementError: Unable to find an element with the text: OK. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-hgRTRy jOfdtI"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-iIHSe rdePw"
      >
        <div
          class="sc-feryYK kkHVET"
        >
          <div
            class="sc-gldTML femPiK"
          >
            <div
              class="sc-kkbgRg ftXgaI"
            >
              <img
                alt="cashtab"
                class="sc-hRmvpr fUuxBg"
                src="test-file-stub"
              />
            </div>
            <div
              class="sc-gbzWSY hBCHVc"
              title="Wallet Info"
            >
              <div
                class="sc-dREXXX fAmbLM"
              >
                <select
                  class="sc-kcbnda qXwFy"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-hcmgZB fKdOEb"
                    value="Transaction Fixtures"
                  >
                    Transaction Fixtures
                  </option>
                </select>
                <div
                  class="sc-fEUNkw NZUjR"
                >
                  <button
                    aria-label="Copy ecash:qqa9lv3kjd8vq7952p7rq0f6lkpqvlu0cydvxtd70g"
                    class="sc-fOKMvo fAHLVb"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </button>
                  <div
                    class="sc-gHboQg fjXpEN"
                  >
                    <div
                      class="sc-eilVRo impULA"
                    >
                      <input
                        checked=""
                        class="sc-dymIpo dhyqmP"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        title="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-eerKOB NZoeG"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-emmjRN gmaaWK"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-cpmLhU lcLQqB"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-dHmInP gUvHSH"
                title="Balance in XEC"
              >
                9,513.12
                 
                XEC
                 
              </div>
              <div
                class="sc-ejGVNB eJFbkD"
                title="Balance in Local Currency"
              >
                $
                0.29
                 
                USD
              </div>
              <p
                class="sc-eLdqWK cjusfr"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-ESoVU gTaONH"
          >
            <h3
              class="sc-fjmCvl vuQGm"
            >
              Create a Token
            </h3>
            <div
              class="sc-bnXvFD priFA"
            >
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="name"
                    placeholder="Enter a name for your token"
                    value="test token"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="ticker"
                    placeholder="Enter a ticker for your token"
                    value="TKE"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="decimals"
                    placeholder="Enter number of decimal places"
                    value="2"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT sc-kTUwUJ eijHiD"
                    name="genesisQty"
                    placeholder="Enter the supply of your token"
                    step="0.01"
                    type="number"
                    value="600000"
                  />
                  <button
                    class="sc-dqBHgY sc-gxMtzJ qrFKP"
                  >
                    max
                  </button>
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="url"
                    placeholder="Enter a website for your token"
                    value="https://www.cashtab.com"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-gFaPwZ ggUIxn"
              >
                <div
                  class="sc-gHboQg fjXpEN"
                >
                  <div
                    class="sc-eilVRo kjfyIc"
                  >
                    <input
                      class="sc-dymIpo dhyqmP"
                      id="Toggle Mint Baton"
                      name="Toggle Mint Baton"
                      title="Toggle Mint Baton"
                      type="checkbox"
                    />
                    <label
                      class="sc-eerKOB NZoeG"
                      for="Toggle Mint Baton"
                    >
                      <span
                        class="sc-emmjRN fxtHZz"
                        data-off="Fixed"
                        data-on="Variable"
                      />
                      <span
                        class="sc-cpmLhU jvFtRk"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-fhYwyz gsromS"
                >
                  Token supply
                </div>
              </div>
              <form
                class="sc-bwCtUz gZsjwj"
                id="form-file-upload"
              >
                <input
                  class="sc-iQKALj fEYqEB"
                  id="input-file-upload"
                  name="Cashtab Dragger"
                  type="file"
                />
                <label
                  class="sc-hrWEMg iOpFXy"
                  for="input-file-upload"
                  id="label-file-upload"
                >
                  <div
                    class="sc-hXRMBi kcwAsj"
                  >
                    <p
                      class="sc-gwVKww eWCHnX"
                    >
                      Drag and drop a png or jpg for your token icon
                    </p>
                    <div
                      class="sc-eTuwsz cUNmmL"
                    >
                      or click to upload
                    </div>
                  </div>
                </label>
              </form>
              <button
                class="sc-bXGyLb sc-eLExRp PtLLF"
                disabled=""
                style="margin-top: 30px;"
              >
                Create eToken
              </button>
            </div>
          </div>
        </div>
        <div
          class="sc-cJOK bNXPnn"
        >
          <button
            class="sc-hUMlYv bfxVjT"
          >
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-hUMlYv bfxVjT"
            style="padding-bottom: 10px;"
          >
            <div
              class="sc-iwsKbI cuDgAv"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            aria-label="Tokens"
            class="sc-hUMlYv bfxVjT"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-hUMlYv bfxVjT"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-ccSCjj ceyGJc"
            title="Show Other Screens"
          >
            <span
              class="sc-jKmXuR eUwhtz"
            />
            <div
              class="sc-elNKlv hDTtNH"
              title="Other Screens"
            >
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Etokens/__tests__/CreateTokenForm.test.js:133:33)
====== CashTab Unit Tests: <CreateTokenForm /> User can create a token with a mint baton ======
TestingLibraryElementError: Unable to find an element with the text: OK. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-hgRTRy jOfdtI"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-iIHSe rdePw"
      >
        <div
          class="sc-feryYK kkHVET"
        >
          <div
            class="sc-gldTML femPiK"
          >
            <div
              class="sc-kkbgRg ftXgaI"
            >
              <img
                alt="cashtab"
                class="sc-hRmvpr fUuxBg"
                src="test-file-stub"
              />
            </div>
            <div
              class="sc-gbzWSY hBCHVc"
              title="Wallet Info"
            >
              <div
                class="sc-dREXXX fAmbLM"
              >
                <select
                  class="sc-kcbnda qXwFy"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-hcmgZB fKdOEb"
                    value="Transaction Fixtures"
                  >
                    Transaction Fixtures
                  </option>
                </select>
                <div
                  class="sc-fEUNkw NZUjR"
                >
                  <button
                    aria-label="Copy ecash:qqa9lv3kjd8vq7952p7rq0f6lkpqvlu0cydvxtd70g"
                    class="sc-fOKMvo fAHLVb"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </button>
                  <div
                    class="sc-gHboQg fjXpEN"
                  >
                    <div
                      class="sc-eilVRo impULA"
                    >
                      <input
                        checked=""
                        class="sc-dymIpo dhyqmP"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        title="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-eerKOB NZoeG"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-emmjRN gmaaWK"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-cpmLhU lcLQqB"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-dHmInP gUvHSH"
                title="Balance in XEC"
              >
                9,513.12
                 
                XEC
                 
              </div>
              <div
                class="sc-ejGVNB eJFbkD"
                title="Balance in Local Currency"
              >
                $
                0.29
                 
                USD
              </div>
              <p
                class="sc-eLdqWK cjusfr"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-ESoVU gTaONH"
          >
            <h3
              class="sc-fjmCvl vuQGm"
            >
              Create a Token
            </h3>
            <div
              class="sc-bnXvFD priFA"
            >
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="name"
                    placeholder="Enter a name for your token"
                    value="test token"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="ticker"
                    placeholder="Enter a ticker for your token"
                    value="TKE"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="decimals"
                    placeholder="Enter number of decimal places"
                    value="2"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT sc-kTUwUJ eijHiD"
                    name="genesisQty"
                    placeholder="Enter the supply of your token"
                    step="0.01"
                    type="number"
                    value="600000"
                  />
                  <button
                    class="sc-dqBHgY sc-gxMtzJ qrFKP"
                  >
                    max
                  </button>
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-btzYZH kSktdT"
              >
                <div
                  class="sc-lhVmIH fuhlTY"
                >
                  <input
                    class="sc-bYSBpT dNtLsk"
                    name="url"
                    placeholder="Enter a website for your token"
                    value="https://www.cashtab.com"
                  />
                </div>
                <div
                  class="sc-kPVwWT kixwk"
                />
              </div>
              <div
                class="sc-gFaPwZ ggUIxn"
              >
                <div
                  class="sc-gHboQg fjXpEN"
                >
                  <div
                    class="sc-eilVRo kjfyIc"
                  >
                    <input
                      class="sc-dymIpo dhyqmP"
                      id="Toggle Mint Baton"
                      name="Toggle Mint Baton"
                      title="Toggle Mint Baton"
                      type="checkbox"
                    />
                    <label
                      class="sc-eerKOB NZoeG"
                      for="Toggle Mint Baton"
                    >
                      <span
                        class="sc-emmjRN fxtHZz"
                        data-off="Fixed"
                        data-on="Variable"
                      />
                      <span
                        class="sc-cpmLhU jvFtRk"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-fhYwyz gsromS"
                >
                  Token supply
                </div>
              </div>
              <form
                class="sc-bwCtUz gZsjwj"
                id="form-file-upload"
              >
                <input
                  class="sc-iQKALj fEYqEB"
                  id="input-file-upload"
                  name="Cashtab Dragger"
                  type="file"
                />
                <label
                  class="sc-hrWEMg iOpFXy"
                  for="input-file-upload"
                  id="label-file-upload"
                >
                  <div
                    class="sc-hXRMBi kcwAsj"
                  >
                    <p
                      class="sc-gwVKww eWCHnX"
                    >
                      Drag and drop a png or jpg for your token icon
                    </p>
                    <div
                      class="sc-eTuwsz cUNmmL"
                    >
                      or click to upload
                    </div>
                  </div>
                </label>
              </form>
              <button
                class="sc-bXGyLb sc-eLExRp PtLLF"
                disabled=""
                style="margin-top: 30px;"
              >
                Create eToken
              </button>
            </div>
          </div>
        </div>
        <div
          class="sc-cJOK bNXPnn"
        >
          <button
            class="sc-hUMlYv bfxVjT"
          >
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-hUMlYv bfxVjT"
            style="padding-bottom: 10px;"
          >
            <div
              class="sc-iwsKbI cuDgAv"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            aria-label="Tokens"
            class="sc-hUMlYv bfxVjT"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-hUMlYv bfxVjT"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-ccSCjj ceyGJc"
            title="Show Other Screens"
          >
            <span
              class="sc-jKmXuR eUwhtz"
            />
            <div
              class="sc-elNKlv hDTtNH"
              title="Other Screens"
            >
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-bYwvMP bwHDjw"
              >
                <p>
                  Settings
                </p>
                <svg
                  title="settings"
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Etokens/__tests__/CreateTokenForm.test.js:230:33)

Each failure log is accessible here:
CashTab Unit Tests: <CreateTokenForm /> User can input valid token parameters, generate a token, and view a success notification
CashTab Unit Tests: <CreateTokenForm /> User can create a token with a mint baton

Tail of the build log:

Test depends on mock-chronik-client. Installing mock-chronik-client dependencies...
/work/modules/mock-chronik-client /work/abc-ci-builds/token-server-tests

added 236 packages, and audited 237 packages in 1s

35 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Test does not depend on ecash-lib-wasm, skipping
/work/apps/token-server /work/modules/mock-chronik-client /work/abc-ci-builds/token-server-tests
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

added 611 packages, and audited 612 packages in 5s

113 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
CI configured to test build. Building...

> token-server@0.0.0 prebuild
> ts-node scripts/prepSecrets.ts

secrets.ts does not exist, copying secrets.sample.ts...

> token-server@0.0.0 build
> tsc

scripts/sendTgIconNotice.ts(28,43): error TS2345: Argument of type '{ name: string; ticker: string; decimals: number; url: string; initialQty: string; tokenId: string; }' is not assignable to parameter of type 'TokenInfo'.
  Property 'genesisQty' is missing in type '{ name: string; ticker: string; decimals: number; url: string; initialQty: string; tokenId: string; }' but required in type 'TokenInfo'.
Build token-server-tests failed with exit code 2

update script type in token-server

emack added a subscriber: emack.

accepted with minor nits

cashtab/src/components/Etokens/CreateTokenForm/index.js
293 ↗(On Diff #47236)
346 ↗(On Diff #47236)

This can be misleading the user into thinking their < 68 char but malformed url is exceeding 68 chars

This revision is now accepted and ready to land.Apr 17 2024, 14:47
This revision was automatically updated to reflect the committed changes.
bytesofman marked 2 inline comments as done.
cashtab/src/components/Etokens/CreateTokenForm/index.js
346 ↗(On Diff #47236)

will leave this unchanged for now as the validation function itself should be updated to provide a more specific msg (and, while I am at that, should be updated to not require https:// ...imo cashtab.com is a better use of space than utf8 encoding https:// which is as good as implied these days.