Page MenuHomePhabricator

[Cashtab] Orderbooks on token landing pages
DraftPublic

Authored by bytesofman on Thu, Oct 31, 00:03.
This is a draft revision that has not yet been submitted for review.

Details

Reviewers
None
Group Reviewers
Restricted Project
Summary

Depends on D17045

Improve Orderbook component so it looks nice on token landing page.

Test Plan

npm test

Diff Detail

Repository
rABC Bitcoin ABC
Branch
tlp2
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 30933
Build 61369: Build Diffcashtab-tests
Build 61368: arc lint + arc unit

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <Agora /> We can see a rendered offer ======
TestingLibraryElementError: Unable to find an element with the text: Cachet (CACHET). 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-eitiEO kCxyt"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-bhlBdH dKnoNj"
      >
        <div
          class="sc-AnqlK ddpYa"
        >
          <div
            class="sc-hycgNl OaVeU"
          >
            <img
              alt="cashtab"
              class="sc-chAAoq fyvXko"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-ciodno gKGePj"
          >
            <select
              class="sc-gGCbJM kVsgqI"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Alpha"
              >
                Agora Partial Alpha
              </option>
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Beta"
              >
                Agora Partial Beta
              </option>
            </select>
            <div
              class="sc-ekulBa cOrKFe"
            >
              <button
                aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                class="sc-cQFLBn jGCEIx"
              >
                <svg
                  title="copy-paste"
                />
              </button>
              <div
                class="sc-gFaPwZ bhfoic"
              >
                <div
                  class="sc-fhYwyz kXwmEk"
                >
                  <input
                    checked=""
                    class="sc-bMvGRv dnGmSn"
                    id="show-hide-balance"
                    name="show-hide-balance"
                    title="show-hide-balance"
                    type="checkbox"
                  />
                  <label
                    class="sc-jzgbtB hsNhPD"
                    for="show-hide-balance"
                  >
                    <span
                      class="sc-gJWqzi dYGNll"
                      data-off=""
                      data-on=""
                    />
                    <span
                      class="sc-rBLzX gWpmmy"
                    />
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="sc-cCbXAZ kqkefR"
            title="Wallet Info"
          >
            <div
              class="sc-jkCMRl lpgFuI"
              title="Balance in XEC"
            >
              4,200.00
               
              XEC
               
            </div>
            <div
              class="sc-crNyjn geQHnh"
              title="Balance in Local Currency"
            >
              $
              0.13
               
              USD
            </div>
            <p
              class="sc-cpHetk dSDwNK"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-jvEmr bczZPX"
          >
            <div
              class="sc-gpHHfC hYDcrz"
              title="Active Offers"
            >
              <div
                class="sc-etwtAo eenSFC"
              >
                <div
                  class="sc-gFaPwZ bhfoic"
                >
                  <div
                    class="sc-fhYwyz kZTqdd"
                  >
                    <input
                      class="sc-bMvGRv dnGmSn"
                      id="Toggle Active Offers"
                      name="Toggle Active Offers"
                      title="Toggle Active Offers"
                      type="checkbox"
                    />
                    <label
                      class="sc-jzgbtB hsNhPD"
                      for="Toggle Active Offers"
                    >
                      <span
                        class="sc-gJWqzi gEydeL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-rBLzX hAekJS"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-hqyNC ctrwFD"
                >
                  Toggle Buy / Manage Listings
                </div>
              </div>
              <div
                class="sc-gVyKpa jvCxHs"
              >
                Token Offers
              </div>
              <div
                class="sc-eXNvrr zUETp"
              >
                <div
                  class="sc-jbKcbu hGlJKO"
                >
                  No active offers for 
                  Cachet
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-keFjpB epyvJQ"
        >
          <button
            class="sc-fKGOjr fUlMuB"
          >
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-fKGOjr fUlMuB"
            style="padding-bottom: 10px;"
          >
            <div
              class="sc-iwsKbI cuDgAv"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            aria-label="Tokens"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-jWojfa dBenOO"
            title="Show Other Screens"
          >
            <span
              class="sc-kVrTmx kZpItY"
            />
            <div
              class="sc-ekkqgF ijSjpP"
              title="Other Screens"
            >
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <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/Agora/__tests__/index.test.js:275:23)
====== CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer ======
TestingLibraryElementError: Unable to find an element with the text: Cachet (CACHET). 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-eitiEO kCxyt"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-bhlBdH dKnoNj"
      >
        <div
          class="sc-AnqlK ddpYa"
        >
          <div
            class="sc-hycgNl OaVeU"
          >
            <img
              alt="cashtab"
              class="sc-chAAoq fyvXko"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-ciodno gKGePj"
          >
            <select
              class="sc-gGCbJM kVsgqI"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Alpha"
              >
                Agora Partial Alpha
              </option>
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Beta"
              >
                Agora Partial Beta
              </option>
            </select>
            <div
              class="sc-ekulBa cOrKFe"
            >
              <button
                aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                class="sc-cQFLBn jGCEIx"
              >
                <svg
                  title="copy-paste"
                />
              </button>
              <div
                class="sc-gFaPwZ bhfoic"
              >
                <div
                  class="sc-fhYwyz kXwmEk"
                >
                  <input
                    checked=""
                    class="sc-bMvGRv dnGmSn"
                    id="show-hide-balance"
                    name="show-hide-balance"
                    title="show-hide-balance"
                    type="checkbox"
                  />
                  <label
                    class="sc-jzgbtB hsNhPD"
                    for="show-hide-balance"
                  >
                    <span
                      class="sc-gJWqzi dYGNll"
                      data-off=""
                      data-on=""
                    />
                    <span
                      class="sc-rBLzX gWpmmy"
                    />
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="sc-cCbXAZ kqkefR"
            title="Wallet Info"
          >
            <div
              class="sc-jkCMRl lpgFuI"
              title="Balance in XEC"
            >
              4,200.00
               
              XEC
               
            </div>
            <div
              class="sc-crNyjn geQHnh"
              title="Balance in Local Currency"
            >
              $
              0.13
               
              USD
            </div>
            <p
              class="sc-cpHetk dSDwNK"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-jvEmr bczZPX"
          >
            <div
              class="sc-gpHHfC hYDcrz"
              title="Active Offers"
            >
              <div
                class="sc-etwtAo eenSFC"
              >
                <div
                  class="sc-gFaPwZ bhfoic"
                >
                  <div
                    class="sc-fhYwyz kZTqdd"
                  >
                    <input
                      class="sc-bMvGRv dnGmSn"
                      id="Toggle Active Offers"
                      name="Toggle Active Offers"
                      title="Toggle Active Offers"
                      type="checkbox"
                    />
                    <label
                      class="sc-jzgbtB hsNhPD"
                      for="Toggle Active Offers"
                    >
                      <span
                        class="sc-gJWqzi gEydeL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-rBLzX hAekJS"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-hqyNC ctrwFD"
                >
                  Toggle Buy / Manage Listings
                </div>
              </div>
              <div
                class="sc-gVyKpa jvCxHs"
              >
                Token Offers
              </div>
              <div
                class="sc-eXNvrr zUETp"
              >
                <div
                  class="sc-jbKcbu hGlJKO"
                >
                  No active offers for 
                  Bull
                </div>
                <div
                  class="sc-jbKcbu hGlJKO"
                >
                  No active offers for 
                  Cachet
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-keFjpB epyvJQ"
        >
          <button
            class="sc-fKGOjr fUlMuB"
          >
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-fKGOjr fUlMuB"
            style="padding-bottom: 10px;"
          >
            <div
              class="sc-iwsKbI cuDgAv"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            aria-label="Tokens"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-jWojfa dBenOO"
            title="Show Other Screens"
          >
            <span
              class="sc-kVrTmx kZpItY"
            />
            <div
              class="sc-ekkqgF ijSjpP"
              title="Other Screens"
            >
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <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/Agora/__tests__/index.test.js:499:23)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:545:9)
    at processTimers (node:internal/timers:519:7)
====== CashTab Unit Tests: <Agora /> We can buy an offer ======
TestingLibraryElementError: Unable to find an element with the text: Cachet (CACHET). 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-eitiEO kCxyt"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-bhlBdH dKnoNj"
      >
        <div
          class="sc-AnqlK ddpYa"
        >
          <div
            class="sc-hycgNl OaVeU"
          >
            <img
              alt="cashtab"
              class="sc-chAAoq fyvXko"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-ciodno gKGePj"
          >
            <select
              class="sc-gGCbJM kVsgqI"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Alpha"
              >
                Agora Partial Alpha
              </option>
              <option
                class="sc-lcpuFF ffVCEK"
                value="Agora Partial Beta"
              >
                Agora Partial Beta
              </option>
            </select>
            <div
              class="sc-ekulBa cOrKFe"
            >
              <button
                aria-label="Copy ecash:qqpmsv8yh8wwx3lnf92rrc0e6yq97j6zqs8av8vx8h"
                class="sc-cQFLBn jGCEIx"
              >
                <svg
                  title="copy-paste"
                />
              </button>
              <div
                class="sc-gFaPwZ bhfoic"
              >
                <div
                  class="sc-fhYwyz kXwmEk"
                >
                  <input
                    checked=""
                    class="sc-bMvGRv dnGmSn"
                    id="show-hide-balance"
                    name="show-hide-balance"
                    title="show-hide-balance"
                    type="checkbox"
                  />
                  <label
                    class="sc-jzgbtB hsNhPD"
                    for="show-hide-balance"
                  >
                    <span
                      class="sc-gJWqzi dYGNll"
                      data-off=""
                      data-on=""
                    />
                    <span
                      class="sc-rBLzX gWpmmy"
                    />
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div
            class="sc-cCbXAZ kqkefR"
            title="Wallet Info"
          >
            <div
              class="sc-jkCMRl lpgFuI"
              title="Balance in XEC"
            >
              4,200.00
               
              XEC
               
            </div>
            <div
              class="sc-crNyjn geQHnh"
              title="Balance in Local Currency"
            >
              $
              0.13
               
              USD
            </div>
            <p
              class="sc-cpHetk dSDwNK"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-jvEmr bczZPX"
          >
            <div
              class="sc-gpHHfC hYDcrz"
              title="Active Offers"
            >
              <div
                class="sc-etwtAo eenSFC"
              >
                <div
                  class="sc-gFaPwZ bhfoic"
                >
                  <div
                    class="sc-fhYwyz kZTqdd"
                  >
                    <input
                      class="sc-bMvGRv dnGmSn"
                      id="Toggle Active Offers"
                      name="Toggle Active Offers"
                      title="Toggle Active Offers"
                      type="checkbox"
                    />
                    <label
                      class="sc-jzgbtB hsNhPD"
                      for="Toggle Active Offers"
                    >
                      <span
                        class="sc-gJWqzi gEydeL"
                        data-off=""
                        data-on=""
                      />
                      <span
                        class="sc-rBLzX hAekJS"
                      />
                    </label>
                  </div>
                </div>
                <div
                  class="sc-hqyNC ctrwFD"
                >
                  Toggle Buy / Manage Listings
                </div>
              </div>
              <div
                class="sc-gVyKpa jvCxHs"
              >
                Token Offers
              </div>
              <div
                class="sc-eXNvrr zUETp"
              >
                <div
                  class="sc-jbKcbu hGlJKO"
                >
                  No active offers for 
                  Bull
                </div>
                <div
                  class="sc-jbKcbu hGlJKO"
                >
                  No active offers for 
                  Cachet
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="sc-keFjpB epyvJQ"
        >
          <button
            class="sc-fKGOjr fUlMuB"
          >
            <svg />
          </button>
          <button
            aria-label="Send Screen"
            class="sc-fKGOjr fUlMuB"
            style="padding-bottom: 10px;"
          >
            <div
              class="sc-iwsKbI cuDgAv"
            >
              <svg
                title="tx-sent"
              />
            </div>
          </button>
          <button
            aria-label="Tokens"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="Tokens"
            />
          </button>
          <button
            aria-label="Receive"
            class="sc-fKGOjr fUlMuB"
          >
            <svg
              title="tx-received"
            />
          </button>
          <div
            class="sc-jWojfa dBenOO"
            title="Show Other Screens"
          >
            <span
              class="sc-kVrTmx kZpItY"
            />
            <div
              class="sc-ekkqgF ijSjpP"
              title="Other Screens"
            >
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallet Backup
                </p>
                <svg
                  title="wallet"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Wallets
                </p>
                <svg
                  title="wallets"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Listed NFTs
                </p>
                <svg
                  title="NFT"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Agora
                </p>
                <svg
                  title="Meme Agora"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Contacts
                </p>
                <svg
                  title="Contact List"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Airdrop
                </p>
                <svg
                  title="tx-airdrop"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Rewards
                </p>
                <svg
                  title="Cashtab Rewards"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                 
                <p>
                  Swap
                </p>
                <svg
                  title="swap"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <p>
                  Sign & Verify
                </p>
                <svg
                  class="sc-htpNat bPFBeM"
                />
              </button>
              <button
                class="sc-iBmynh ezGUUm"
              >
                <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/Agora/__tests__/index.test.js:789:23)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:545:9)
    at processTimers (node:internal/timers:519:7)

Each failure log is accessible here:
CashTab Unit Tests: <Agora /> We can see a rendered offer
CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer
CashTab Unit Tests: <Agora /> We can buy an offer