Details

Reviewers

None

Group Reviewers

Restricted Project

Summary

There are a number of complications to work through in optimizing how we present Agora offers to the user.

Cashtab has already gone though some iterations here.

Currently, each OrderBook component is well optimized to load all the info it needs to render. The Agora screen loads an OrderBook component for every `active offer.

Still, this is more than 500 components. And we do not have any way of sorting or searching these components.

This diff gives us a start. We initialize a map as a ref (so that it does not rerender when it changes). This map is passed to each OrderBook, so that each OrderBook can update it when it loads its own information.

When the map is loaded, the Agora screen is able to use this information to sort OrderBooks. For now, we only enable a sort by number of offers.

Going forward, we will enable sorting by price and depth.

After that, we can add more calculations to each OrderBook component to enable sorting by trading volume.

We still have more optimization work to do here. For example we should not render all 500 components on the screen, it causes the screen to go slowly and even the switch to perform this sort is slow.

But this is an important incremental improvement.

Test Plan

npm test

this is deployed at https://cashtab-local-dev.netlify.app/

navigate to agora screen. see the switch for sorting by offer count. It is disabled and a spinner is next to it. After the components finish loading, we can click this switch to sort by offer count.

It takes ~ 20 seconds for offers to load. Clicking the switch is itself a slow process. These things will be optimized later by not rendering all 500 + offers.

Diff Detail

Repository

rABC Bitcoin ABC

Branch

agora-get-search-data

Lint

Lint Passed

Unit

No Test Coverage

Build Status

Buildable 31773
Build 63039: Build Diff	cashtab-tests
Build 63038: arc lint + arc unit

Event Timeline

bytesofman created this revision.Thu, Dec 26, 19:50

Herald added a reviewer: Restricted Project. · View Herald TranscriptThu, Dec 26, 19:50

Harbormaster completed remote builds in B31770: Diff 51754.Thu, Dec 26, 19:55

remove debug log, better switch rendering

Harbormaster completed remote builds in B31771: Diff 51755.Thu, Dec 26, 20:04

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

Failed tests logs:

====== CashTab Unit Tests: <Agora /> We can see multiple offers, some we made, others we did not, and we can cancel an offer ======
Error: expect(element).not.toBeInTheDocument()

expected document not to contain element, found <div class="sc-cSHVUG jkArnh" title="Loading"><div /><div /><div /><div /></div> instead

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <div
        class="sc-hdPSEv dEfOCU"
      >
        <div
          class="Toastify"
        />
        <div
          class="sc-cmIlrE hrtokr"
        >
          <div
            class="sc-gleUXh lndbxp"
          >
            <div
              class="sc-hARARD cgmwYj"
            >
              <img
                alt="cashtab"
                class="sc-ccLTTT dharwH"
                src="test-file-stub"
              />
            </div>
            <div
              class="sc-bJHhxl fyvWUN"
            >
              <div
                class="sc-jvEmr eWcPZT"
              >
                <select
                  class="sc-hycgNl gBGlcN"
                  data-testid="wallet-select"
                  id="wallets"
                  name="wallets"
                >
                  <option
                    class="sc-chAAoq dRSlrf"
                    value="Agora Partial Beta"
                  >
                    Agora Partial Beta
                  </option>
                  <option
                    class="sc-chAAoq dRSlrf"
                    value="Agora Partial Alpha"
                  >
                    Agora Partial Alpha
                  </option>
                </select>
                <div
                  class="sc-fKGOjr dODwBM"
                >
                  <button
                    aria-label="Copy ecash:qreq3mm4avxaw782g4qvhktx4qcv0w2tkqj3j5jaad"
                    class="sc-frDJqD iDiUEE"
                  >
                    <svg
                      title="copy-paste"
                    />
                  </button>
                  <div
                    class="sc-dymIpo hWxICM"
                  >
                    <div
                      class="sc-bnXvFD dzwPxp"
                    >
                      <input
                        checked=""
                        class="sc-gJWqzi efBCgh"
                        id="show-hide-balance"
                        name="show-hide-balance"
                        title="show-hide-balance"
                        type="checkbox"
                      />
                      <label
                        class="sc-gFaPwZ ghvKrk"
                        for="show-hide-balance"
                      >
                        <span
                          class="sc-fhYwyz cZDTKh"
                          data-off=""
                          data-on=""
                        />
                        <span
                          class="sc-jzgbtB dPhrEl"
                        />
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="sc-TuwoP jRfJNF"
                title="Wallet Info"
              >
                <div
                  class="sc-dTLGrV kpTbFj"
                  title="Balance in XEC"
                >
                  42.00
                   
                  XEC
                   
                </div>
                <div
                  class="sc-ivVeuv htUdFg"
                  title="Balance in Local Currency"
                >
                  $
                  0.00
                   
                  USD
                </div>
                <p
                  class="sc-cCbXAZ hmwpIQ"
                  title="Price in Local Currency"
                >
                  1 
                  XEC
                   = 
                  0.00003000
                   
                  USD
                </p>
              </div>
            </div>
            <div
              class="sc-eNPDpu iGZqUQ"
            >
              <h2
                class="sc-kafWEX eIsEHa"
              >
                Agora 
                <svg
                  title="Meme Agora"
                />
              </h2>
              <div
                class="sc-ciodno ekemxG"
                title="Active Offers"
              >
                <div
                  class="sc-jKVCRD gNurmH"
                >
                  <div
                    class="sc-dymIpo hWxICM"
                  >
                    <div
                      class="sc-bnXvFD fHgwZD"
                    >
                      <input
                        class="sc-gJWqzi efBCgh"
                        id="Toggle Active Offers"
                        name="Toggle Active Offers"
                        title="Toggle Active Offers"
                        type="checkbox"
                      />
                      <label
                        class="sc-gFaPwZ ghvKrk"
                        for="Toggle Active Offers"
                      >
                        <span
                          class="sc-fhY...
    at toBeInTheDocument (/work/cashtab/src/components/Agora/__tests__/index.test.js:525:56)
    at runWithExpensiveErrorDiagnosticsDisabled (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:47:12)
    at checkCallback (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:124:77)
    at checkRealTimersCallback (/work/cashtab/node_modules/@testing-library/dom/dist/wait-for.js:118:16)
    at Timeout.task [as _onTimeout] (/work/cashtab/node_modules/jsdom/lib/jsdom/browser/Window.js:520:19)
    at listOnTimeout (node:internal/timers:581:17)
    at processTimers (node:internal/timers:519:7)

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

confirm with a test

bytesofman edited the summary of this revision. (Show Details)Thu, Dec 26, 21:53

bytesofman edited the test plan for this revision. (Show Details)

Harbormaster completed remote builds in B31773: Diff 51758.Thu, Dec 26, 21:54

support sorting by tokenid

Harbormaster completed remote builds in B31774: Diff 51759.Thu, Dec 26, 22:14

show the switch disabled with a spinner until it is ready to roll

Harbormaster completed remote builds in B31775: Diff 51760.Thu, Dec 26, 22:19

bytesofman published this revision for review.Thu, Dec 26, 22:26

bytesofman edited the test plan for this revision. (Show Details)

[Cashtab] Allow user to sort Agora offers by offer count
Needs ReviewPublic
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 51758

cashtab/src/components/Agora/OrderBook/index.tsx

cashtab/src/components/Agora/tests/index.test.js

cashtab/src/components/Agora/index.tsx

cashtab/src/components/Common/Spinner.tsx

[Cashtab] Allow user to sort Agora offers by offer countNeeds ReviewPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 51758

cashtab/src/components/Agora/OrderBook/index.tsx

cashtab/src/components/Agora/__tests__/index.test.js

cashtab/src/components/Agora/index.tsx

cashtab/src/components/Common/Spinner.tsx

[Cashtab] Allow user to sort Agora offers by offer count
Needs ReviewPublic
Actions

Revision Contents
Changeset List

cashtab/src/components/Agora/tests/index.test.js