Details

Reviewers

Group Reviewers

Restricted Project

Commits

rABC212529d453fa: [Cashtab] Show XECX sweeper balance and notice if user redemption will not be…

Summary

XECX redemptions may not be instant if the user is looking to redeem more XECX than the redemptions hot wallet can afford. Show a notice when this case occurs.

Since we need more specific conditional rendering for XECX redemptions, improve the XECX redemption modal (customize it so it is not identical to the normal listing modal).

Sidebar: In developing here, noticed a pattern where large amounts will often get the "agora quantity error" -- i.e. if you create an agora partial with the minAcceptAtoms the same as offeredAtoms, often the partial itself will end up with minAcceptAtoms > offeredAtoms. Needs to be fixed at the lib level.

Test Plan

npm test

Diff Detail

Repository

rABC Bitcoin ABC

Branch

xecx-redeem-notice

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 32653
Build 64794: Build Diff	cashtab-tests
Build 64793: arc lint + arc unit

Event Timeline

bytesofman created this revision.Tue, Mar 11, 12:27

Herald added a reviewer: Restricted Project. · View Herald TranscriptTue, Mar 11, 12:27

Harbormaster completed remote builds in B32649: Diff 53007.Tue, Mar 11, 12:32

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can redeem XECX for XEC 1:1 using a workflow unique to XECX ======
TestingLibraryElementError: Unable to find an element with the text: List XECX?. 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-keFjpB fuvsSf"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      >
        <div
          class="Toastify__toast-container Toastify__toast-container--top-right"
          tabindex="-1"
        >
          <div
            class="Toastify__toast Toastify__toast-theme--dark Toastify__toast--error Toastify__toast--close-on-click Toastify--animate Toastify__bounce-enter--top-right"
            data-in="true"
            id="13"
            role="alert"
            tabindex="0"
          >
            <div
              class="Toastify__toast-icon Toastify--animate-icon Toastify__zoom-enter"
            >
              <svg
                fill="var(--toastify-icon-color-error)"
                height="100%"
                viewBox="0 0 24 24"
                width="100%"
              >
                <path
                  d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"
                />
              </svg>
            </div>
            Unable to create Agora offer with these parameters, try increasing the min buy.
            <button
              aria-label="close"
              class="Toastify__close-button Toastify__close-button--dark"
              type="button"
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 14 16"
              >
                <path
                  d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
                  fill-rule="evenodd"
                />
              </svg>
            </button>
            <div
              class="Toastify__progress-bar--wrp"
              data-hidden="false"
            >
              <div
                class="Toastify__progress-bar--bg Toastify__progress-bar-theme--dark Toastify__progress-bar--error"
              />
              <div
                aria-hidden="false"
                aria-label="notification timer"
                class="Toastify__progress-bar Toastify__progress-bar--animated Toastify__progress-bar-theme--dark Toastify__progress-bar--error"
                role="progressbar"
                style="animation-duration: 2000ms; animation-play-state: paused;"
              />
            </div>
          </div>
        </div>
      </section>
      <div
        class="sc-jWojfa gOMhPW"
      >
        <div
          class="sc-kVrTmx dSIcDd"
        >
          <div
            class="sc-ivVeuv hQBWoJ"
          >
            <img
              alt="cashtab"
              class="sc-cCbXAZ jOUSPN"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-cmIlrE ckvYmi"
          >
            <div
              class="sc-jkCMRl gxKbjs"
            >
              <select
                class="sc-crNyjn bXFivV"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-cpHetk jodErs"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-bqjOQT kauMuv"
              >
                <button
                  aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                  class="sc-cJSrbW kZNvLw"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-eerKOB cvXwwv"
                >
                  <div
                    class="sc-emmjRN bSWkUh"
                  >
                    <input
                      checked=""
                      class="sc-gFaPwZ iPJMNd"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-cpmLhU iUeRKn"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-dymIpo hGwQkt"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-bnXvFD cpOMDW"
                      />
                    </label>
                  </div>
           ...
    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__/TokenActions.test.js:2034:23)

Each failure log is accessible here:
CashTab Unit Tests: <Token /> available actions rendered We can redeem XECX for XEC 1:1 using a workflow unique to XECX

remove debug logs, back out min qty change (todo in separate diff), add test for balance alert

add test for balance lookup failure

Harbormaster completed remote builds in B32652: Diff 53010.Tue, Mar 11, 12:59

lint, remove .only

Harbormaster completed remote builds in B32651: Diff 53009.Tue, Mar 11, 13:00

Harbormaster completed remote builds in B32653: Diff 53011.Tue, Mar 11, 13:05

bytesofman published this revision for review.Tue, Mar 11, 13:11

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

emack requested changes to this revision.Wed, Mar 12, 02:10

emack added a subscriber: emack.

emack added inline comments.

cashtab/src/components/Etokens/Token/index.tsx
453	I can't recall ever having to dynamically adjust modal height based on error validation. Can you just use an error validation error message state var sitting there and if the message !== null then wouldn't it automatically push the content down and stretch the modal height?
636	I'm assuming it's a JS thing where it forces you to async the useEffect block if it calls upon an async function, whereas TS is more relaxed about it?

This revision now requires changes to proceed.Wed, Mar 12, 02:10

bytesofman requested review of this revision.Wed, Mar 12, 03:27

bytesofman marked 2 inline comments as done.

bytesofman added inline comments.

cashtab/src/components/Etokens/Token/index.tsx
453	meant to include these there would be a way to make sure the modals are dynamically sized. but it needs to be its own diff, since it would overhaul the whole component. I've kicked the can on it because it would involve a calc param for vertical height app-wide, or a different implementation of the modal very few modals really need this (dynamic content is limited, and they all auto-scroll) Should probalby be rolled in with a general design improvement on the modals. The modal in this diff is a bit of a one-off in that the "normal" modal should be very small, but we can plausibly require 2 alerts that each take a bit of space.
636	in react > 18, can't have async in useEffect -- so if we want to do async stuff, we need to call an async function in the block (without await)