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 31771
Build 63036: Build Diff	cashtab-tests
Build 63035: 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