Page MenuHomePhabricator

[cashtab] Token view UI updates
AcceptedPublic

Authored by johnkuney on Fri, Jan 24, 17:36.

Details

Reviewers
bytesofman
Group Reviewers
Restricted Project
Summary

Proposed UI updates to improve readability and information organization on the token details page

Test Plan

npm run start and visit a token page /#/token/tokenid
review the new design and let me know any feedback

Diff Detail

Repository
rABC Bitcoin ABC
Branch
cashtab-token-details-ui
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 32207
Build 63904: Build Diffcashtab-tests
Build 63903: arc lint + arc unit

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <Token /> For an uncached token with no balance, we show a spinner while loading the token info, then show an info screen and open agora offers ======
TestingLibraryElementError: Unable to find an element with the text: Supply:. 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-AnqlK jzmxJP"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      />
      <div
        class="sc-keFjpB kpRoMq"
      >
        <div
          class="sc-jWojfa dWofVP"
        >
          <div
            class="sc-dTLGrV hVKRQa"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-hdPSEv NMixZ"
          >
            <div
              class="sc-bqjOQT bJwGKq"
            >
              <select
                class="sc-jkCMRl gBdLKu"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-crNyjn fdrrlO"
                  value="Transaction Fixtures"
                >
                  Transaction Fixtures
                </option>
              </select>
              <div
                class="sc-lcpuFF iSIgFF"
              >
                <button
                  aria-label="Copy ecash:qqa9lv3kjd8vq7952p7rq0f6lkpqvlu0cydvxtd70g"
                  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>
                </div>
              </div>
            </div>
            <div
              class="sc-cmIlrE dkSzlg"
              title="Wallet Info"
            >
              <div
                class="sc-cpHetk jEKVml"
              >
                <div
                  class="sc-nrwXf bsChRe"
                  title="Balance XEC"
                >
                  9,513.12
                   
                  XEC
                </div>
              </div>
              <div
                class="sc-eitiEO lmPAIm"
                title="Balance in Local Currency"
              >
                $
                0.29
                 
                USD
              </div>
              <p
                class="sc-bhlBdH umymk"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-chAAoq bzVCQv"
          >
            <div
              class="sc-ebFjAB gdAnYe"
            >
              <div
                class="sc-cooIXK egNoCH"
                title="Token Stats"
              >
                <div
                  class="sc-kZmsYB KVWTe"
                >
                  <button
                    class="sc-iBEsjs jWuvKl"
                  >
                    <img
                      alt="icon for aed861a31b96934b88c0252ede135cb9700d7649f69191235087a3030e553cb1"
                      height="128"
                      src="https://icons.etokens.cash/128/aed861a31b96934b88c0252ede135cb9700d7649f69191235087a3030e553cb1.png"
                      width="128"
                    />
                  </button>
                  <h2>
                    Cachet
                  </h2>
                  <span>
                    CACHET
                  </span>
                </div>
                <div
                  class="sc-fcdeBU kmDggL"
                >
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Type
                    </label>
                    <div>
                      <div
                        class="sc-LKuAh jgyJGf"
                      >
                        SLP
                         
                        <button
                          aria-label="Click for more info about this token type"
                          class="sc-cJSrbW kZNvLw"
                        >
                          <svg
                            title="More Info"
                          />
                        </button>
                      </div>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Token Id
                    </label>
                    <div>
                      <a
                        href="https://explorer.e.cash/tx/aed861a31b96934b88c0252ede135cb9700d7649f69191235087a3030e553cb1"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        aed
                        ...
                        cb1
                      </a>
                      <button
                        aria-label="Copy Token ID"
                        class="sc-cJSrbW kZNvLw"
                      >
                        <svg
                          title="copy-paste"
                        />
                      </button>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Decimals
                    </label>
                    <div>
                      2
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      URL
                    </label>
                    <div
                      class="sc-kZmsYB sc-RcBXQ dyDgLR"
                    >
                      <a
                        href="https://cashtab.com/"
                        rel="noreferrer"
                        target="_blank"
                      >
                        cashtab.com/
                      </a>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Created
                    </label>
                    <div>
                      Mar 30, 2024
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Genesis Qty
                    </label>
                    <div>
                      100,000.00
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Supply
                    </label>
                    <div>
                      29,999,987,980,000,000.00 (fixed)
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-eKZiaR cOnhGl"
              >
                <div
                  class="sc-jzJRlG eQTBdJ"
                  title="Loading"
                >
                  <div />
                  <div />
                  <div />
                  <div />
                </div>
              </div>
              <div
                class="sc-bbmXgH fbVlNd"
              >
                You do not hold this token.
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-kVrTmx exLrES"
        >
          <div
            class="sc-fHSTwm jBcETl"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <button
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Transactions
            </span>
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Send
            </span>
            <svg
              title="tx-sent"
            />
          </button>
          <button
            aria-label="Tokens"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Tokens
            </span>
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Receive
            </span>
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-ekkqgF dcQEnG"
            title="Show Other Screens"
          >
            <span
              class="sc-iBmynh dPVmzy"
            />
            <div
              class="sc-fKGOjr buAdOz"
              title="Other Screens"
            >
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <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__/Token.test.js:830:23)
====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 NFT ======
TestingLibraryElementError: Found multiple elements with the text: Gordon Chen

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="sc-gtfDJT fVOEnC"
>
  Gordon Chen
</div>

Ignored nodes: comments, script, style
<h2>
  Gordon Chen
</h2>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-AnqlK jzmxJP"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      />
      <div
        class="sc-keFjpB kpRoMq"
      >
        <div
          class="sc-jWojfa dWofVP"
        >
          <div
            class="sc-dTLGrV hVKRQa"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-hdPSEv NMixZ"
          >
            <div
              class="sc-bqjOQT bJwGKq"
            >
              <select
                class="sc-jkCMRl elqxlt"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-crNyjn fdrrlO"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-lcpuFF iSIgFF"
              >
                <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>
                </div>
              </div>
            </div>
            <div
              class="sc-cmIlrE dkSzlg"
              title="Wallet Info"
            >
              <div
                class="sc-cpHetk jEKVml"
              >
                <div
                  class="sc-nrwXf bsChRe"
                  title="Balance XEC"
                >
                  9,970.81
                   
                  XEC
                </div>
              </div>
              <div
                class="sc-eitiEO lmPAIm"
                title="Balance in Local Currency"
              >
                $
                0.30
                 
                USD
              </div>
              <p
                class="sc-bhlBdH umymk"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-chAAoq bzVCQv"
          >
            <div
              class="sc-ebFjAB gdAnYe"
            >
              <div
                class="sc-gtfDJT fVOEnC"
              >
                Gordon Chen
              </div>
              <div
                class="sc-fOICqy jlkXkw"
              >
                NFT from collection "
                <a
                  href="/token/12a049d0da64652b4e8db68b6052ad0cda43cf0269190fe81040bed65ca926a3"
                >
                  The Four Half-Coins of Jin-qua
                </a>
                "
              </div>
              <div
                class="sc-cooIXK egNoCH"
                title="Token Stats"
              >
                <div
                  class="sc-kZmsYB KVWTe"
                >
                  <button
                    class="sc-iBEsjs jWuvKl"
                  >
                    <img
                      alt="icon for 5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326"
                      height="128"
                      src="https://icons.etokens.cash/128/5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326.png"
                      width="128"
                    />
                  </button>
                  <h2>
                    Gordon Chen
                  </h2>
                  <span>
                    GC
                  </span>
                </div>
                <div
                  class="sc-fcdeBU kmDggL"
                >
                  <div
                    class="sc-iSDuPN iBWdux"
                  >
                    <label>
                      Your Balance
                    </label>
                    <div>
                      1
                       GC
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Type
                    </label>
                    <div>
                      <div
                        class="sc-LKuAh jgyJGf"
                      >
                        NFT
                         
                        <button
                          aria-label="Click for more info about this token type"
                          class="sc-cJSrbW kZNvLw"
                        >
                          <svg
                            title="More Info"
                          />
                        </button>
                      </div>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Token Id
                    </label>
                    <div>
                      <a
                        href="https://explorer.e.cash/tx/5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        5d9
                        ...
                        326
                      </a>
                      <button
                        aria-label="Copy Token ID"
                        class="sc-cJSrbW kZNvLw"
                      >
                        <svg
                          title="copy-paste"
                        />
                      </button>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      URL
                    </label>
                    <div
                      class="sc-kZmsYB sc-RcBXQ dyDgLR"
                    >
                      <a
                        href="https://en.wikipedia.org/wiki/Tai-Pan_(novel)"
                        rel="noreferrer"
                        target="_blank"
                      >
                        en.wikipedia.org/wiki/Tai-Pan_(novel)
                      </a>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Created
                    </label>
                    <div>
                      Jan 1, 2022
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Hash
                    </label>
                    <div>
                      824
                      ...
                      d72
                      <button
                        aria-label="Copy Token ID"
                        class="sc-cJSrbW kZNvLw"
                      >
                        <svg
                          title="copy-paste"
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-likbZx ezJTox"
              >
                <div
                  class="sc-bbmXgH fbVlNd"
                >
                  This NFT is not for sale
                </div>
              </div>
              <div
                class="sc-hzNEM kMIGYt"
                title="Token Actions"
              >
                <div
                  class="sc-fQejPQ kELCPK"
                >
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN iogvmX"
                    >
                      <input
                        class="sc-gFaPwZ iPJMNd"
                        id="Toggle Sell NFT"
                        name="Toggle Sell NFT"
                        title="Toggle Sell NFT"
                        type="checkbox"
                      />
                      <label
                        class="sc-cpmLhU iUeRKn"
                        for="Toggle Sell NFT"
                      >
                        <span
                          class="sc-dymIpo ebJcUo"
                          data-off="💰"
                          data-on="💰"
                        />
                        <span
                          class="sc-bnXvFD bEXILN"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-jqCOkK sCOdD"
                  >
                    Sell 
                    Gordon Chen
                     (
                    GC
                    )
                  </div>
                </div>
                <div
                  class="sc-chbbiW fJzeOD"
                >
                  <div
                    class="sc-kxynE bAMoGW"
                  >
                    <div
                      class="sc-dqBHgY ddqJJj"
                    >
                      <div
                        class="sc-gxMtzJ dXNKcv"
                      >
                        <input
                          class="sc-dfVpRl sc-hwwEjo iNMklK"
                          name="nftListPrice"
                          placeholder="Enter NFT list price"
                          type="number"
                          value=""
                        />
                        <select
                          class="sc-kIPQKe sc-ibxdXY bRndSs"
                          data-testid="currency-select-dropdown"
                        >
                          <option
                            class="sc-RefOD CkCRx"
                            data-testid="xec-option"
                            value="XEC"
                          >
                            XEC
                          </option>
                          <option
                            class="sc-RefOD CkCRx"
                            data-testid="fiat-option"
                            value="USD"
                          >
                            USD
                          </option>
                        </select>
                      </div>
                      <div
                        class="sc-iQKALj fwXoQo"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="sc-chbbiW fJzeOD"
                >
                  <button
                    class="sc-caSCKo sc-kjoXOD dWPhlM"
                    disabled=""
                    style="margin-top: 12px;"
                  >
                    List 
                    Gordon Chen
                  </button>
                </div>
                <div
                  class="sc-fQejPQ kELCPK"
                >
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN iogvmX"
                    >
                      <input
                        class="sc-gFaPwZ iPJMNd"
                        id="Toggle Send"
                        name="Toggle Send"
                        title="Toggle Send"
                        type="checkbox"
                      />
                      <label
                        class="sc-cpmLhU iUeRKn"
                        for="Toggle Send"
                      >
                        <span
                          class="sc-dymIpo ebJcUo"
                          data-off="➡️"
                          data-on="➡️"
                        />
                        <span
                          class="sc-bnXvFD bEXILN"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-jqCOkK sCOdD"
                  >
                    Send 
                    Gordon Chen
                     (
                    GC
                    )
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-kVrTmx exLrES"
        >
          <div
            class="sc-fHSTwm jBcETl"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <button
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Transactions
            </span>
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Send
            </span>
            <svg
              title="tx-sent"
            />
          </button>
          <button
            aria-label="Tokens"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Tokens
            </span>
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Receive
            </span>
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-ekkqgF dcQEnG"
            title="Show Other Screens"
          >
            <span
              class="sc-iBmynh dPVmzy"
            />
            <div
              class="sc-fKGOjr buAdOz"
              title="Other Screens"
            >
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <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 getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:20:35)
    at getMultipleElementsFoundError (/work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:23:10)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:55:13
    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:907:23)
====== CashTab Unit Tests: <Token /> available actions rendered SLP1 NFT page will update cashtab token cache for the NFT if it does not include groupTokenId, and for its parent if it is not in cache ======
TestingLibraryElementError: Found multiple elements with the text: Gordon Chen

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="sc-gtfDJT fVOEnC"
>
  Gordon Chen
</div>

Ignored nodes: comments, script, style
<h2>
  Gordon Chen
</h2>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-AnqlK jzmxJP"
    >
      <section
        aria-atomic="false"
        aria-label="Notifications Alt+T"
        aria-live="polite"
        aria-relevant="additions text"
        class="Toastify"
      />
      <div
        class="sc-keFjpB kpRoMq"
      >
        <div
          class="sc-jWojfa dWofVP"
        >
          <div
            class="sc-dTLGrV hVKRQa"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-hdPSEv NMixZ"
          >
            <div
              class="sc-bqjOQT bJwGKq"
            >
              <select
                class="sc-jkCMRl elqxlt"
                data-testid="wallet-select"
                id="wallets"
                name="wallets"
              >
                <option
                  class="sc-crNyjn fdrrlO"
                  value="Token Test"
                >
                  Token Test
                </option>
              </select>
              <div
                class="sc-lcpuFF iSIgFF"
              >
                <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>
                </div>
              </div>
            </div>
            <div
              class="sc-cmIlrE dkSzlg"
              title="Wallet Info"
            >
              <div
                class="sc-cpHetk jEKVml"
              >
                <div
                  class="sc-nrwXf bsChRe"
                  title="Balance XEC"
                >
                  9,970.81
                   
                  XEC
                </div>
              </div>
              <div
                class="sc-eitiEO lmPAIm"
                title="Balance in Local Currency"
              >
                $
                0.30
                 
                USD
              </div>
              <p
                class="sc-bhlBdH umymk"
                title="Price in Local Currency"
              >
                1 
                XEC
                 = 
                0.00003000
                 
                USD
              </p>
            </div>
          </div>
          <div
            class="sc-chAAoq bzVCQv"
          >
            <div
              class="sc-ebFjAB gdAnYe"
            >
              <div
                class="sc-gtfDJT fVOEnC"
              >
                Gordon Chen
              </div>
              <div
                class="sc-fOICqy jlkXkw"
              >
                NFT from collection "
                <a
                  href="/token/12a049d0da64652b4e8db68b6052ad0cda43cf0269190fe81040bed65ca926a3"
                >
                  The Four Half-Coins of Jin-qua
                </a>
                "
              </div>
              <div
                class="sc-cooIXK egNoCH"
                title="Token Stats"
              >
                <div
                  class="sc-kZmsYB KVWTe"
                >
                  <button
                    class="sc-iBEsjs jWuvKl"
                  >
                    <img
                      alt="icon for 5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326"
                      height="128"
                      src="https://icons.etokens.cash/128/5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326.png"
                      width="128"
                    />
                  </button>
                  <h2>
                    Gordon Chen
                  </h2>
                  <span>
                    GC
                  </span>
                </div>
                <div
                  class="sc-fcdeBU kmDggL"
                >
                  <div
                    class="sc-iSDuPN iBWdux"
                  >
                    <label>
                      Your Balance
                    </label>
                    <div>
                      1
                       GC
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Type
                    </label>
                    <div>
                      <div
                        class="sc-LKuAh jgyJGf"
                      >
                        NFT
                         
                        <button
                          aria-label="Click for more info about this token type"
                          class="sc-cJSrbW kZNvLw"
                        >
                          <svg
                            title="More Info"
                          />
                        </button>
                      </div>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Token Id
                    </label>
                    <div>
                      <a
                        href="https://explorer.e.cash/tx/5d9bff67b99e3f93c245a2d832ae40b67f39b79e5cf1daefe97fe6a8a2228326"
                        rel="noopener noreferrer"
                        target="_blank"
                      >
                        5d9
                        ...
                        326
                      </a>
                      <button
                        aria-label="Copy Token ID"
                        class="sc-cJSrbW kZNvLw"
                      >
                        <svg
                          title="copy-paste"
                        />
                      </button>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      URL
                    </label>
                    <div
                      class="sc-kZmsYB sc-RcBXQ dyDgLR"
                    >
                      <a
                        href="https://en.wikipedia.org/wiki/Tai-Pan_(novel)"
                        rel="noreferrer"
                        target="_blank"
                      >
                        en.wikipedia.org/wiki/Tai-Pan_(novel)
                      </a>
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Created
                    </label>
                    <div>
                      Jan 1, 2022
                    </div>
                  </div>
                  <div
                    class="sc-iSDuPN eDnwXA"
                  >
                    <label>
                      Hash
                    </label>
                    <div>
                      824
                      ...
                      d72
                      <button
                        aria-label="Copy Token ID"
                        class="sc-cJSrbW kZNvLw"
                      >
                        <svg
                          title="copy-paste"
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-likbZx ezJTox"
              >
                <div
                  class="sc-bbmXgH fbVlNd"
                >
                  This NFT is not for sale
                </div>
              </div>
              <div
                class="sc-hzNEM kMIGYt"
                title="Token Actions"
              >
                <div
                  class="sc-fQejPQ kELCPK"
                >
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN iogvmX"
                    >
                      <input
                        class="sc-gFaPwZ iPJMNd"
                        id="Toggle Sell NFT"
                        name="Toggle Sell NFT"
                        title="Toggle Sell NFT"
                        type="checkbox"
                      />
                      <label
                        class="sc-cpmLhU iUeRKn"
                        for="Toggle Sell NFT"
                      >
                        <span
                          class="sc-dymIpo ebJcUo"
                          data-off="💰"
                          data-on="💰"
                        />
                        <span
                          class="sc-bnXvFD bEXILN"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-jqCOkK sCOdD"
                  >
                    Sell 
                    Gordon Chen
                     (
                    GC
                    )
                  </div>
                </div>
                <div
                  class="sc-chbbiW fJzeOD"
                >
                  <div
                    class="sc-kxynE bAMoGW"
                  >
                    <div
                      class="sc-dqBHgY ddqJJj"
                    >
                      <div
                        class="sc-gxMtzJ dXNKcv"
                      >
                        <input
                          class="sc-dfVpRl sc-hwwEjo iNMklK"
                          name="nftListPrice"
                          placeholder="Enter NFT list price"
                          type="number"
                          value=""
                        />
                        <select
                          class="sc-kIPQKe sc-ibxdXY bRndSs"
                          data-testid="currency-select-dropdown"
                        >
                          <option
                            class="sc-RefOD CkCRx"
                            data-testid="xec-option"
                            value="XEC"
                          >
                            XEC
                          </option>
                          <option
                            class="sc-RefOD CkCRx"
                            data-testid="fiat-option"
                            value="USD"
                          >
                            USD
                          </option>
                        </select>
                      </div>
                      <div
                        class="sc-iQKALj fwXoQo"
                      />
                    </div>
                  </div>
                </div>
                <div
                  class="sc-chbbiW fJzeOD"
                >
                  <button
                    class="sc-caSCKo sc-kjoXOD dWPhlM"
                    disabled=""
                    style="margin-top: 12px;"
                  >
                    List 
                    Gordon Chen
                  </button>
                </div>
                <div
                  class="sc-fQejPQ kELCPK"
                >
                  <div
                    class="sc-eerKOB cvXwwv"
                  >
                    <div
                      class="sc-emmjRN iogvmX"
                    >
                      <input
                        class="sc-gFaPwZ iPJMNd"
                        id="Toggle Send"
                        name="Toggle Send"
                        title="Toggle Send"
                        type="checkbox"
                      />
                      <label
                        class="sc-cpmLhU iUeRKn"
                        for="Toggle Send"
                      >
                        <span
                          class="sc-dymIpo ebJcUo"
                          data-off="➡️"
                          data-on="➡️"
                        />
                        <span
                          class="sc-bnXvFD bEXILN"
                        />
                      </label>
                    </div>
                  </div>
                  <div
                    class="sc-jqCOkK sCOdD"
                  >
                    Send 
                    Gordon Chen
                     (
                    GC
                    )
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-kVrTmx exLrES"
        >
          <div
            class="sc-fHSTwm jBcETl"
          >
            <img
              alt="cashtab"
              class="sc-ivVeuv evHkvQ"
              src="test-file-stub"
            />
          </div>
          <button
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Transactions
            </span>
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Send
            </span>
            <svg
              title="tx-sent"
            />
          </button>
          <button
            aria-label="Tokens"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Tokens
            </span>
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-jvEmr hqZIZM"
          >
            <span>
              Receive
            </span>
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-ekkqgF dcQEnG"
            title="Show Other Screens"
          >
            <span
              class="sc-iBmynh dPVmzy"
            />
            <div
              class="sc-fKGOjr buAdOz"
              title="Other Screens"
            >
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-hycgNl bNyILw"
              >
                <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 getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:20:35)
    at getMultipleElementsFoundError (/work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:23:10)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:55:13
    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:1186:23)

Each failure log is accessible here:
CashTab Unit Tests: <Token /> For an uncached token with no balance, we show a spinner while loading the token info, then show an info screen and open agora offers
CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 NFT
CashTab Unit Tests: <Token /> available actions rendered SLP1 NFT page will update cashtab token cache for the NFT if it does not include groupTokenId, and for its parent if it is not in cache

johnkuney published this revision for review.Fri, Jan 24, 19:05
bytesofman added a subscriber: bytesofman.

nice looks much better.

see inline comment, we no longer use BalanceHeaderToken anywhere in Cashtab so it should be deleted

cashtab/src/components/Etokens/Token/index.tsx
15 ↗(On Diff #52368)

grep -r BalanceHeaderToken src/ --> this component is not used anywhere in the app now

delete components/Common/BalanceHeaderToken.tsx

2239 ↗(On Diff #52368)

nice, yeah this balance header token thing was always kinda garbage

This revision now requires changes to proceed.Fri, Jan 24, 22:37

delete balancetokenheader component as no longer used anywhere

This revision is now accepted and ready to land.Fri, Jan 24, 23:26