Page MenuHomePhabricator
Differential D17074

[Cashtab] Add Collection component to better organize and render NFTs
ClosedPublic
Actions

Authored by bytesofman on Nov 4 2024, 19:57.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABCa4863a710ccf: [Cashtab] Add Collection component to better organize and render NFTs
Summary

The NFTs page is becoming unusable due to slow load times. We need a more attractive and efficient component to render listed NFTs in a Collection.

Introduce the tested Collection component.

Test Plan

npm test

This diff is live at prod testing site
Can see the updated NFTs screen featuring this component at https://cashtab-local-dev.netlify.app/#/nfts

Diff Detail

Repository
rABC Bitcoin ABC
Branch
cashtab-ts-collections
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 31061
Build 61623: Build Diffcashtab-tests
Build 61622: arc lint + arc unit

Event Timeline

bytesofman created this revision.Nov 4 2024, 19:57
Herald added a reviewer: Restricted Project. · View Herald TranscriptNov 4 2024, 19:57
Harbormaster completed remote builds in B30990: Diff 50650.Nov 4 2024, 20:00
teamcity added a comment.Nov 4 2024, 20:00
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

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-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 workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
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.52.1 build
> node scripts/build.js

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

TS7016: Could not find a declaration file for module 'react'. '/work/cashtab/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`
    3 | // file COPYING or http://www.opensource.org/licenses/mit-license.php.
    4 |
  > 5 | import React, { useState, useEffect } from 'react';
      |                                            ^^^^^^^
    6 | import { Agora, AgoraOffer } from 'ecash-agora';
    7 | import { Alert, Info } from 'components/Common/Atoms';
    8 | import { InlineLoader } from 'components/Common/Spinner';


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50657.Nov 5 2024, 04:35

Add accept and cancel methods, wallet methods to ts

Harbormaster completed remote builds in B30996: Diff 50657.Nov 5 2024, 04:38
teamcity added a comment.Nov 5 2024, 04:38
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

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 1655 packages, and audited 1661 packages in 18s

271 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.52.1 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Agora/Collection/index.tsx
  Line 61:10:  'getNft' is defined but never used  @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50670.Nov 5 2024, 17:44

lots more logic, start implementing, too heavy for NFT screen

Harbormaster completed remote builds in B31007: Diff 50670.Nov 5 2024, 17:47
teamcity added a comment.Nov 5 2024, 17:47
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

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 1659 packages, and audited 1665 packages in 18s

271 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.52.1 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Agora/Collection/index.tsx
  Line 108:25:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/Nfts/index.js
  Line 9:10:   'getTokenGenesisInfo' is defined but never used                    @typescript-eslint/no-unused-vars
  Line 47:12:  'offeredCollectionsThisWallet' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 50:11:  'getMyNfts' is assigned a value but never used                     @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1
bytesofman edited the summary of this revision. (Show Details)Nov 5 2024, 18:33
bytesofman updated this revision to Diff 50686.Nov 5 2024, 21:10

Improve loadtimes by click-to-load option, do not write cache for this component

Harbormaster completed remote builds in B31021: Diff 50686.Nov 5 2024, 21:14
teamcity added a comment.Nov 5 2024, 21:14
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

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 1656 packages, and audited 1662 packages in 18s

271 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.52.1 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Nfts/index.js
  Line 29:9:   'updateCashtabState' is assigned a value but never used            @typescript-eslint/no-unused-vars
  Line 46:12:  'offeredCollectionsThisWallet' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 49:11:  'getMyNfts' is assigned a value but never used                     @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50688.Nov 5 2024, 22:30

before moving buy and cancel methods into the swiper portable

Harbormaster completed remote builds in B31023: Diff 50688.Nov 5 2024, 22:33
teamcity added a comment.Nov 5 2024, 22:33
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

  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-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 workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
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 1656 packages, and audited 1662 packages in 18s

271 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.52.1 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Agora/Collection/index.tsx
  Line 138:23:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/Nfts/index.tsx
  Line 31:9:   'updateCashtabState' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 55:12:  'selectedIndex' is assigned a value but never used       @typescript-eslint/no-unused-vars


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50689.Nov 6 2024, 00:50

still working on cache fixes for collection, improve jest setup

Harbormaster completed remote builds in B31024: Diff 50689.Nov 6 2024, 00:50
teamcity added a comment.Nov 6 2024, 00:53
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

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-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 workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
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 1631 packages, and audited 1637 packages in 18s

271 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.52.1 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Agora/Collection/index.tsx
  Line 149:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50696.Nov 6 2024, 04:36

fixing tests

Harbormaster completed remote builds in B31029: Diff 50696.Nov 6 2024, 04:39
teamcity added a comment.Nov 6 2024, 04:39
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

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-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 @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 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 1631 packages, and audited 1637 packages in 18s

271 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.52.3 build
> node scripts/build.js

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

[eslint] 
src/components/Agora/Collection/index.tsx
  Line 149:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50697.Nov 6 2024, 04:46

ts lint

Harbormaster completed remote builds in B31030: Diff 50697.Nov 6 2024, 04:49
bytesofman updated this revision to Diff 50723.Nov 6 2024, 22:34

remove dead code, improve styles, bigger images for NFTs

Harbormaster completed remote builds in B31047: Diff 50723.Nov 6 2024, 22:57
bytesofman mentioned this in D17096: [Cashtab] Improve styles for button components.Nov 6 2024, 23:02
bytesofman updated this revision to Diff 50730.Nov 7 2024, 00:53

rebase, fix width css issue showing partial div while loading

Harbormaster completed remote builds in B31053: Diff 50730.Nov 7 2024, 00:56
bytesofman mentioned this in rABC6f26baaa482f: [Cashtab] Improve styles for button components.Nov 7 2024, 14:26
bytesofman updated this revision to Diff 50742.Nov 7 2024, 15:58

rebase

Harbormaster completed remote builds in B31060: Diff 50742.Nov 7 2024, 16:01
teamcity added a comment.Nov 7 2024, 16:01
Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

  npm audit fix

Run `npm audit` for details.

> ecash-lib@0.2.1 build
> tsc && tsc -p ./tsconfig.build.json && cp -r ./src/ffi ./dist

Installing ecash-agora dependencies...
/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

added 364 packages, and audited 367 packages in 2s

60 packages are looking for funding
  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

added 1481 packages, and audited 3327 packages in 25s

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

3 vulnerabilities (2 moderate, 1 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

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

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

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 270 more ...; formTarget?: string | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Property 'disabled' is missing in type '{ children: (string | Element)[]; onClick: () => void; }' but required in type '{ form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 270 more ...; formTarget?: string | undefined; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"button", any, { disabled: boolean; }, never, "button", "button">): ReactElement<StyledComponentPropsWithAs<"button", any, { disabled: boolean; }, never, "button", "button">, string | JSXElementConstructor<...>>', gave the following error.
    Property 'disabled' is missing in type '{ children: (string | Element)[]; onClick: () => void; }' but required in type '{ form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 270 more ...; formTarget?: string | undefined; }'.
    533 |                                     <ButtonRow>
    534 |                                         {isMaker ? (
  > 535 |                                             <SecondaryButton
        |                                              ^^^^^^^^^^^^^^^
    536 |                                                 onClick={() =>
    537 |                                                     setSelectedIndex(index)
    538 |                                                 }


Build cashtab-tests failed with exit code 1
bytesofman updated this revision to Diff 50743.Nov 7 2024, 16:25

fix build lint issues

Harbormaster completed remote builds in B31061: Diff 50743.Nov 7 2024, 16:29
bytesofman updated this revision to Diff 50755.Nov 8 2024, 12:32

rebase

Harbormaster completed remote builds in B31069: Diff 50755.Nov 8 2024, 12:56
bytesofman mentioned this in D17103: [Cashtab] Patch ts bug in button components and propagate type.Nov 8 2024, 13:02
bytesofman mentioned this in rABCf5711bc61aac: [Cashtab] Patch ts bug in button components and propagate type.Nov 8 2024, 13:45
bytesofman updated this revision to Diff 50765.Nov 8 2024, 13:46

rebase

Harbormaster completed remote builds in B31075: Diff 50765.Nov 8 2024, 14:11
bytesofman published this revision for review.Nov 8 2024, 14:11
bytesofman edited the test plan for this revision. (Show Details)
bytesofman updated this revision to Diff 50766.Nov 8 2024, 14:14

remove debug log

Harbormaster completed remote builds in B31076: Diff 50766.Nov 8 2024, 14:19
emack requested changes to this revision.Nov 10 2024, 01:28
emack added a subscriber: emack.
emack added inline comments.
cashtab/src/components/Agora/Collection/index.tsx
290 ↗(On Diff #50766)

on the basis that broadcast errors are typically caused by stale UTXO sets, should this catch block explicitly trigger a UTXO refresh?

603 ↗(On Diff #50766)

Looking further down the line, if the amount of listings exponentially increase, does this become a DDOS vector? say, someone simply spawns 50k listings via a custom script, which can potentially slow down the app from the client side? Also not sure about whether printing 50k token ids via console log would slow down the app as well.

image.png (601×516 px, 76 KB)

Edit: I had a quick look at OpenSea stats on Dune, and they average 4-5k trades per day, but no stats on average open listings. I would guess probably 20-30k open listings at any time.

cashtab/src/components/Nfts/index.tsx
155 ↗(On Diff #50766)

Not for this diff, but the option to sort by price, listing date and alphabetical order would be very useful at this location in the UI.

This revision now requires changes to proceed.Nov 10 2024, 01:28
bytesofman requested review of this revision.Nov 12 2024, 14:05
bytesofman marked 3 inline comments as done.
bytesofman added inline comments.
cashtab/src/components/Agora/Collection/index.tsx
290 ↗(On Diff #50766)

imo is is too rube goldberg, esp to be handled at the screen level like in this function.

this is an issue that should be solved at the app level, i.e. the user should never be able to build a tx with a stale utxo set.

Right now it is "mostly" solved -- if a user broadcasts a tx, there is an app-wide spinner handled in the App screen until the utxo set is updated. We still have some edge cases like just opening a wallet that was last used on another device.

Anyway, we should not attempt to handle it in a one-off way on this screen.

603 ↗(On Diff #50766)

yes, this would be an issue. However, the issue is much worse in the existing prod version of Cashtab, which loads all collections and all listed nfts on screen load.

in this diff, we only load listed NFTs on a per-collection basis, and when the user clicks on the collection.

Still room for improvement but we are getting an over 10x improvement with this diff (load ~150 collections when user checks screen vs load ~150 collections and ~1500 listings when user checks screen).

Separately, to somewhat combat the DDOS -- we are not actually writing to cache in this screen now. I might add that in later. But most users do not need to cache 1000s of NFTs just because they browsed a collection.

cashtab/src/components/Nfts/index.tsx
155 ↗(On Diff #50766)

yes, I still need to implement volume and trading stats to sort by more useful things.

Will also add search -- can do this after this diff, since now we have all the collection info on the screen.

emack accepted this revision.Nov 12 2024, 22:53
This revision is now accepted and ready to land.Nov 12 2024, 22:53
Closed by commit rABCa4863a710ccf: [Cashtab] Add Collection component to better organize and render NFTs (authored by bytesofman). · Explain WhyNov 13 2024, 00:49
This revision was automatically updated to reflect the committed changes.
bytesofman marked 3 inline comments as done.
bytesofman added a commit: rABCa4863a710ccf: [Cashtab] Add Collection component to better organize and render NFTs.

Revision Contents
Changeset List

PathSize
cashtab/
1 line
17 lines
23113 lines
2 lines
src/
assets/
4 lines
components/
Agora/
Collection/
521 lines
744 lines
167 lines
fixtures/
295 lines
App/
__tests__/
2 lines
Common/
Atoms.tsx
Atoms.js
44 lines
6 lines
2 lines
Etokens/
Token/
30 lines
__tests__/
4 lines
Nfts/
__tests__/
375 lines
194 lines
styled.ts
styled.js
10 lines
wallet/
fixtures/
6 lines
9 lines

Diff 50743

View Options

cashtab/jest.config.js

Loading...
View Options

cashtab/jest.setup.js

Loading...
View Options

cashtab/package-lock.json

Loading...
View Options

cashtab/package.json

Loading...
View Options

cashtab/src/assets/collapse-down.svg

Loading...
View Options

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

Loading...
View Options

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

Loading...
View Options

cashtab/src/components/Agora/Collection/styled.ts

Loading...
View Options

cashtab/src/components/Agora/fixtures/mocks.js

Loading...
View Options

cashtab/src/components/App/__tests__/App.test.js

Loading...
View Options

cashtab/src/components/Common/Atoms.js

Loading...
View Options

cashtab/src/components/Common/Atoms.tsx

Loading...
View Options

cashtab/src/components/Common/BrowseCollection.js

Loading...
View Options

cashtab/src/components/Common/Buttons.tsx

Loading...
View Options

cashtab/src/components/Common/CustomIcons.js

Loading...
View Options

cashtab/src/components/Common/NftListingActions.js

Loading...
View Options

cashtab/src/components/Etokens/Token/index.js

Loading...
View Options

cashtab/src/components/Etokens/__tests__/TokenActions.test.js

Loading...
View Options

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

Loading...
View Options

cashtab/src/components/Nfts/index.js

Loading...
View Options

cashtab/src/components/Nfts/index.tsx

Loading...
View Options

cashtab/src/components/Nfts/styled.js

Loading...
View Options

cashtab/src/components/Nfts/styled.ts

Loading...
View Options

cashtab/src/wallet/fixtures/vectors.js

Loading...
View Options

cashtab/tsconfig.json

Loading...