Page MenuHomePhabricator

[Cashtab] Implement typescript
ClosedPublic

Authored by bytesofman on Thu, Oct 31, 18:01.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABCabacec78b2a7: [Cashtab] Implement typescript
Summary

Commence converting Cashtab to typescript by updating 2 simple files, appConfig and formatting. 2 files because formatting has functions, which are unit-tested, so we can confirm the implementation does not break jest --- and formatting imports appConfig. Seemed like the smallest possible change.

Update linters and webpack settings to support ts

Going forward, will be a big process to get Cashtab fully converted. But we can now use typescript for any new developments. It's particularly important for working with agora and chronik-client.

Test Plan

npm test, npm run build works

Diff Detail

Repository
rABC Bitcoin ABC
Branch
cashtab-ts
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 30953
Build 61409: Build Diffcashtab-tests
Build 61408: arc lint + arc unit

Event Timeline

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token ======
TestingLibraryElementError: Unable to find an element with the text: 0.50 XEC ($0.000015 USD) per token. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-cpHetk jFBcrU"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-nrwXf fNiHDX"
      >
        <div
          class="sc-eitiEO cOdCdq"
        >
          <div
            class="sc-fKGOjr fDbWIH"
          >
            <img
              alt="cashtab"
              class="sc-jvEmr TGsLz"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-dznXNo mmyBK"
          >
            <select
              class="sc-ekulBa kPfdXv"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-ciodno bDKxBk"
                value="Token Test"
              >
                Token Test
              </option>
            </select>
            <div
              class="sc-ghsgMZ eoHiwc"
            >
              <button
                aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                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-dTLGrV bUlpzg"
            title="Wallet Info"
          >
            <div
              class="sc-lcpuFF hKVwNE"
              title="Balance in XEC"
            >
              9,970.81
               
              XEC
               
            </div>
            <div
              class="sc-bqjOQT eIJVRl"
              title="Balance in Local Currency"
            >
              $
              0.30
               
              USD
            </div>
            <p
              class="sc-jkCMRl knQaq"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-iBmynh dVkwbT"
          >
            <div
              class="sc-LKuAh cgbRuv"
            >
              111.000000000
               
              Vespene Gas
               (
              VSP
              )
            </div>
            <div
              class="sc-kZmsYB GaVcJ"
              title="Token Stats"
            >
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <button
                  class="sc-kxynE iJdosy"
                >
                  <img
                    alt="icon for 20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8"
                    height="128"
                    src="https://icons.etokens.cash/128/20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8.png"
                    width="128"
                  />
                </button>
              </div>
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <div
                  class="sc-fQejPQ dbVdh"
                >
                  <div
                    class="sc-clNaTc iEsKiy"
                  >
                    Type:
                  </div>
                  <div
                    class="sc-iSDuPN dDJLwR"
                  >
                    <div
                      class="sc-chbbiW oKWgc"
                    >
                      SLP
                       
                      <button
                        aria-label="Click for more info about this token type"
                        class="sc-cQFLBn jGCEIx"
                      >
                        <svg
                          title="More Info"
                        />
                      </button>
                    </div>
                  </div>
      ...
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Etokens/__tests__/TokenActions.test.js:354:20)

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

Tail of the build log:

  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecash-agora@0.1.1 build
> tsc && tsc -p ./tsconfig.build.json

/work/cashtab /work/modules/ecash-agora /work/modules/ecash-lib /work/modules/ecash-lib-wasm /work/modules/ecash-script /work/modules/chronik-client /work/modules/mock-chronik-client /work/modules/ecashaddrjs /work/abc-ci-builds/cashtab-tests
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm warn deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm warn deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm warn deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm warn deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 1645 packages, and audited 1651 packages in 18s

270 packages are looking for funding
  run `npm fund` for details

1 low severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> cashtab@2.50.0 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

[eslint] 
src/components/Common/GoogleAnalytics.js
  Line 49:17:  Unexpected empty arrow function         @typescript-eslint/no-empty-function
  Line 57:31:  Unexpected empty method 'RouteTracker'  @typescript-eslint/no-empty-function

Search for the keywords to learn more about each error.


Build cashtab-tests failed with exit code 1

need the GA patch for CI to work with ts linter

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token ======
TestingLibraryElementError: Unable to find an element with the text: 0.50 XEC ($0.000015 USD) per token. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-cpHetk jFBcrU"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-nrwXf fNiHDX"
      >
        <div
          class="sc-eitiEO cOdCdq"
        >
          <div
            class="sc-fKGOjr fDbWIH"
          >
            <img
              alt="cashtab"
              class="sc-jvEmr TGsLz"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-dznXNo mmyBK"
          >
            <select
              class="sc-ekulBa kPfdXv"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-ciodno bDKxBk"
                value="Token Test"
              >
                Token Test
              </option>
            </select>
            <div
              class="sc-ghsgMZ eoHiwc"
            >
              <button
                aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                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-dTLGrV bUlpzg"
            title="Wallet Info"
          >
            <div
              class="sc-lcpuFF hKVwNE"
              title="Balance in XEC"
            >
              9,970.81
               
              XEC
               
            </div>
            <div
              class="sc-bqjOQT eIJVRl"
              title="Balance in Local Currency"
            >
              $
              0.30
               
              USD
            </div>
            <p
              class="sc-jkCMRl knQaq"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-iBmynh dVkwbT"
          >
            <div
              class="sc-LKuAh cgbRuv"
            >
              111.000000000
               
              Vespene Gas
               (
              VSP
              )
            </div>
            <div
              class="sc-kZmsYB GaVcJ"
              title="Token Stats"
            >
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <button
                  class="sc-kxynE iJdosy"
                >
                  <img
                    alt="icon for 20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8"
                    height="128"
                    src="https://icons.etokens.cash/128/20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8.png"
                    width="128"
                  />
                </button>
              </div>
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <div
                  class="sc-fQejPQ dbVdh"
                >
                  <div
                    class="sc-clNaTc iEsKiy"
                  >
                    Type:
                  </div>
                  <div
                    class="sc-iSDuPN dDJLwR"
                  >
                    <div
                      class="sc-chbbiW oKWgc"
                    >
                      SLP
                       
                      <button
                        aria-label="Click for more info about this token type"
                        class="sc-cQFLBn jGCEIx"
                      >
                        <svg
                          title="More Info"
                        />
                      </button>
                    </div>
                  </div>
      ...
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Etokens/__tests__/TokenActions.test.js:354:20)

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

patch type error causing test format change

Failed tests logs:

====== CashTab Unit Tests: <Token /> available actions rendered We can list an SLP1 fungible token ======
TestingLibraryElementError: Unable to find an element with the text: 0.50 XEC ($0.000015 USD) per token. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      class="sc-cpHetk jFBcrU"
    >
      <div
        class="Toastify"
      />
      <div
        class="sc-nrwXf fNiHDX"
      >
        <div
          class="sc-eitiEO cOdCdq"
        >
          <div
            class="sc-fKGOjr fDbWIH"
          >
            <img
              alt="cashtab"
              class="sc-jvEmr TGsLz"
              src="test-file-stub"
            />
          </div>
          <div
            class="sc-dznXNo mmyBK"
          >
            <select
              class="sc-ekulBa kPfdXv"
              data-testid="wallet-select"
              id="wallets"
              name="wallets"
            >
              <option
                class="sc-ciodno bDKxBk"
                value="Token Test"
              >
                Token Test
              </option>
            </select>
            <div
              class="sc-ghsgMZ eoHiwc"
            >
              <button
                aria-label="Copy ecash:qqq9f9z3uhpzkxrgdjkd7dxuuey7tmpmugpmnw0kue"
                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-dTLGrV bUlpzg"
            title="Wallet Info"
          >
            <div
              class="sc-lcpuFF hKVwNE"
              title="Balance in XEC"
            >
              9,970.81
               
              XEC
               
            </div>
            <div
              class="sc-bqjOQT eIJVRl"
              title="Balance in Local Currency"
            >
              $
              0.30
               
              USD
            </div>
            <p
              class="sc-jkCMRl knQaq"
              title="Price in Local Currency"
            >
              1 
              XEC
               = 
              0.00003000
               
              USD
            </p>
          </div>
          <div
            class="sc-iBmynh dVkwbT"
          >
            <div
              class="sc-LKuAh cgbRuv"
            >
              111.000000000
               
              Vespene Gas
               (
              VSP
              )
            </div>
            <div
              class="sc-kZmsYB GaVcJ"
              title="Token Stats"
            >
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <button
                  class="sc-kxynE iJdosy"
                >
                  <img
                    alt="icon for 20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8"
                    height="128"
                    src="https://icons.etokens.cash/128/20a0b9337a78603c6681ed2bc541593375535dcd9979196620ce71f233f2f6f8.png"
                    width="128"
                  />
                </button>
              </div>
              <div
                class="sc-iSDuPN dDJLwR"
              >
                <div
                  class="sc-fQejPQ dbVdh"
                >
                  <div
                    class="sc-clNaTc iEsKiy"
                  >
                    Type:
                  </div>
                  <div
                    class="sc-iSDuPN dDJLwR"
                  >
                    <div
                      class="sc-chbbiW oKWgc"
                    >
                      SLP
                       
                      <button
                        aria-label="Click for more info about this token type"
                        class="sc-cQFLBn jGCEIx"
                      >
                        <svg
                          title="More Info"
                        />
                      </button>
                    </div>
                  </div>
      ...
    at Object.getElementError (/work/cashtab/node_modules/@testing-library/dom/dist/config.js:37:19)
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
    at /work/cashtab/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
    at Object.getByText (/work/cashtab/src/components/Etokens/__tests__/TokenActions.test.js:354:20)

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

Tail of the build log:

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> ecash-agora@0.1.1 build
> tsc && tsc -p ./tsconfig.build.json

/work/cashtab /work/modules/ecash-agora /work/modules/ecash-lib /work/modules/ecash-lib-wasm /work/modules/ecash-script /work/modules/chronik-client /work/modules/mock-chronik-client /work/modules/ecashaddrjs /work/abc-ci-builds/cashtab-tests
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm warn deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm warn deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm warn deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm warn deprecated workbox-google-analytics@6.6.0: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
npm warn deprecated domexception@4.0.0: Use your platform's native DOMException instead
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated @babel/plugin-proposal-private-property-in-object@7.21.11: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 1645 packages, and audited 1651 packages in 17s

270 packages are looking for funding
  run `npm fund` for details

1 low severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> cashtab@2.50.3 build
> node scripts/build.js

Creating an optimized production build...
Failed to compile.

TS2345: Argument of type 'string | number' is not assignable to parameter of type 'string'.
  Type 'number' is not assignable to type 'string'.
    181 |     const renderFiat = typeof fiatPrice === 'number';
    182 |     const renderedPrice = renderFiat
  > 183 |         ? parseFloat(priceXec) * fiatPrice
        |                      ^^^^^^^^
    184 |         : parseFloat(priceXec);
    185 |     let ticker = 'XEC';
    186 |     if (renderFiat) {


Build cashtab-tests failed with exit code 1

fix ts lint issue at build time

bytesofman published this revision for review.Fri, Nov 1, 17:00
bytesofman added inline comments.
cashtab/src/types.d.ts
5 ↗(On Diff #50600)

need this so importing pngs into ts files does not throw lint error

cashtab/src/utils/formatting.ts
189 ↗(On Diff #50600)

lint error caught by ts and also related to this diff, since we are updating all formatting functions here

This revision is now accepted and ready to land.Sat, Nov 2, 00:54
This revision was automatically updated to reflect the committed changes.