Page MenuHomePhabricator

[Cashtab] More refinements to spot price presentation in agora
ClosedPublic

Authored by bytesofman on Wed, Jan 1, 13:04.

Details

Summary

Make prices of exact integers more easily distinguishable from prices of almost integers. A price of exactly 1 XEC should be easily distinguishable from a price of 1.0035 XEC.

Update the API of getMinimumFractionDigits to not support any arbitary max. More appropriate to its use case here to take a switch of fiat or xec.

Test Plan

npm test

Diff Detail

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

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token ======
Error: Unable to find an element with the text: $0.00005 USD (1.67 XEC) per token. 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-bhlBdH gpOmpX"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-AnqlK cHoscA"
      >
        <div
          class="sc-keFjpB kvxjlS"
        >
          <div
            class="sc-chAAoq dIkPgC"
          >
            <img
              alt="cashtab"
              class="sc-dTLGrV kYvHxa"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-fHSTwm fVySmw"
          >
            <div
              class="sc-lcpuFF bqbWPO"
            >
              <select
                class="sc-bqjOQT cWSwXe"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-jkCMRl hOXmaz"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-gGCbJM iQNZkD"
              >
                <button
                  aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                  class="sc-ksYbfQ ikvLXx"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-emmjRN fIvjCD"
                >
                  <div
                    class="sc-cpmLhU kUbYwU"
                  >
                    <input
                      checked=""
                      class="sc-fhYwyz jqalqV"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-dymIpo naeFY"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-bnXvFD ygHZL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-gFaPwZ gQTsnN"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-hdPSEv eYQtR"
              title="Wallet Info"
            >
              <div
                class="sc-crNyjn kbCCdI"
                title="Balance in XEC"
              >
                9,970.81
                 
                XEC
                 
              </div>
              <div
                class="sc-cpHetk eIfOld"
                title="Balance in Local Currency"
              >
                $
                0.30
                 
                USD
              </div>
              <p
                class="sc-nrwXf EZcSZ"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-hycgNl cwiNTz"
          >
            <div
              class="sc-giadOv fyRAOR"
            >
              <div
                class="sc-hIVACf kTXUZl"
              >
                111.000000000
                 
                Vespene Gas (VSP)
              </div>
              <div
                class="sc-qrIAp heBwb"
                title="Token Stats"
              >
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <button
                    class="sc-hmXxxW eOeYde"
                  >
                    <img
                      alt="icon for 20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8"
                      height="128"
                      src="https://icons.etokens.cash/128/20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8.png"
                      width="128"
                    />
                  </button>
                </div>
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <div
                    class="sc-bmyXtO dKilMS"
                  >
                    <div
                      class="sc-dEoRIm bMPee"
                    >
                      Type:
                    </div>
                    <div
                      class="sc-ipZHIp dIEugn"
                    >
                      <div
                        class="sc-ipXKqB sjWry"
                      >
                        SLP
                         
                        <button
               ...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Etokens/__tests__/TokenActions.test.js:334:26)

Each failure log is accessible here:
CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token

better logic in getMinimumFractionDigits, add tests

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token ======
Error: Unable to find an element with the text: $0.00005 USD (1.67 XEC) per token. 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-bhlBdH gpOmpX"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-AnqlK cHoscA"
      >
        <div
          class="sc-keFjpB kvxjlS"
        >
          <div
            class="sc-chAAoq dIkPgC"
          >
            <img
              alt="cashtab"
              class="sc-dTLGrV kYvHxa"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-fHSTwm fVySmw"
          >
            <div
              class="sc-lcpuFF bqbWPO"
            >
              <select
                class="sc-bqjOQT cWSwXe"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-jkCMRl hOXmaz"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-gGCbJM iQNZkD"
              >
                <button
                  aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                  class="sc-ksYbfQ ikvLXx"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-emmjRN fIvjCD"
                >
                  <div
                    class="sc-cpmLhU kUbYwU"
                  >
                    <input
                      checked=""
                      class="sc-fhYwyz jqalqV"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-dymIpo naeFY"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-bnXvFD ygHZL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-gFaPwZ gQTsnN"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-hdPSEv eYQtR"
              title="Wallet Info"
            >
              <div
                class="sc-crNyjn kbCCdI"
                title="Balance in XEC"
              >
                9,970.81
                 
                XEC
                 
              </div>
              <div
                class="sc-cpHetk eIfOld"
                title="Balance in Local Currency"
              >
                $
                0.30
                 
                USD
              </div>
              <p
                class="sc-nrwXf EZcSZ"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-hycgNl cwiNTz"
          >
            <div
              class="sc-giadOv fyRAOR"
            >
              <div
                class="sc-hIVACf kTXUZl"
              >
                111.000000000
                 
                Vespene Gas (VSP)
              </div>
              <div
                class="sc-qrIAp heBwb"
                title="Token Stats"
              >
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <button
                    class="sc-hmXxxW eOeYde"
                  >
                    <img
                      alt="icon for 20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8"
                      height="128"
                      src="https://icons.etokens.cash/128/20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8.png"
                      width="128"
                    />
                  </button>
                </div>
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <div
                    class="sc-bmyXtO dKilMS"
                  >
                    <div
                      class="sc-dEoRIm bMPee"
                    >
                      Type:
                    </div>
                    <div
                      class="sc-ipZHIp dIEugn"
                    >
                      <div
                        class="sc-ipXKqB sjWry"
                      >
                        SLP
                         
                        <button
               ...
    at waitForWrapper (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:163:27)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:86:33
    at Object.findByText (/work/cashtab/src/components/Etokens/__tests__/TokenActions.test.js:334:26)
====== CashTab Unit Tests: <Token /> available actions rendered We can list an ALP fungible token ======
TestingLibraryElementError: Unable to find an element with the text: 33.00 XEC ($0.0009900 USD) per token. 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-bhlBdH gpOmpX"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-AnqlK cHoscA"
      >
        <div
          class="sc-keFjpB kvxjlS"
        >
          <div
            class="sc-chAAoq dIkPgC"
          >
            <img
              alt="cashtab"
              class="sc-dTLGrV kYvHxa"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-fHSTwm fVySmw"
          >
            <div
              class="sc-lcpuFF bqbWPO"
            >
              <select
                class="sc-bqjOQT cWSwXe"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-jkCMRl hOXmaz"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-gGCbJM iQNZkD"
              >
                <button
                  aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                  class="sc-ksYbfQ ikvLXx"
                >
                  <svg
                    title="copy-paste"
                  />
                </button>
                <div
                  class="sc-emmjRN fIvjCD"
                >
                  <div
                    class="sc-cpmLhU kUbYwU"
                  >
                    <input
                      checked=""
                      class="sc-fhYwyz jqalqV"
                      id="show-hide-balance"
                      name="show-hide-balance"
                      title="show-hide-balance"
                      type="checkbox"
                    />
                    <label
                      class="sc-dymIpo naeFY"
                      for="show-hide-balance"
                    >
                      <span
                        class="sc-bnXvFD ygHZL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-gFaPwZ gQTsnN"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="sc-hdPSEv eYQtR"
              title="Wallet Info"
            >
              <div
                class="sc-crNyjn kbCCdI"
                title="Balance in XEC"
              >
                9,970.81
                 
                XEC
                 
              </div>
              <div
                class="sc-cpHetk eIfOld"
                title="Balance in Local Currency"
              >
                $
                0.30
                 
                USD
              </div>
              <p
                class="sc-nrwXf EZcSZ"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-hycgNl cwiNTz"
          >
            <div
              class="sc-giadOv fyRAOR"
            >
              <div
                class="sc-hIVACf kTXUZl"
              >
                100.0000
                 
                Test CRD (tCRD)
              </div>
              <div
                class="sc-qrIAp heBwb"
                title="Token Stats"
              >
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <button
                    class="sc-hmXxxW eOeYde"
                  >
                    <img
                      alt="icon for 7cd7cd7c54167d306e770f972b564584c44cb412ee45839b4b97bb6e724c8849"
                      height="128"
                      src="https://icons.etokens.cash/128/7cd7cd7c54167d306e770f972b564584c44cb412ee45839b4b97bb6e724c8849.png"
                      width="128"
                    />
                  </button>
                </div>
                <div
                  class="sc-ipZHIp dIEugn"
                >
                  <div
                    class="sc-bmyXtO dKilMS"
                  >
                    <div
                      class="sc-dEoRIm bMPee"
                    >
                      Type:
                    </div>
                    <div
                      class="sc-ipZHIp dIEugn"
                    >
                      <div
                        class="sc-ipXKqB sjWry"
                      >
                        ALP
                         
                        <button
                      ...
    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:1771:20)

Each failure log is accessible here:
CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token
CashTab Unit Tests: <Token /> available actions rendered We can list an ALP fungible token

update listing tests to confirm new expected behavior

bytesofman published this revision for review.Wed, Jan 1, 13:33
Fabien added a subscriber: Fabien.
Fabien added inline comments.
cashtab/src/formatting/index.ts
204 ↗(On Diff #51891)

Where does that value comes from ? I thought only 9 decimals were allowed?

210 ↗(On Diff #51891)

You should add a comment to explain: for values between 0 and 1 the resolution is 4 digits + the leading zeros after the decimal point.

This revision is now accepted and ready to land.Wed, Jan 1, 14:24
bytesofman added inline comments.
cashtab/src/formatting/index.ts
204 ↗(On Diff #51891)

An SLP token can only have quantity decimals between 0-9, yes

We can have an agora price as low as 1 nanosatoshi, so 11 decimals

But then we could also (in theory) have a fiat currency worth less than XEC, taking us beyond 11 decimals

0.00000000000000000001 is from MAX_DIGITS_TO_RENDER_FIAT, which is set because "max decimals supported by Intl.NumberFormat." (commented above).

In practice I don't think we will ever get here. But ... might as well support it since the JS formatter will.

The XEC amount can never get here since it cannot be lower than 1e-11 (1 nanosatoshi).

210 ↗(On Diff #51891)

good point will add