From 02c3847d99079dada700857f3777393916b8c394 Mon Sep 17 00:00:00 2001 From: John Mitsch Date: Tue, 17 Dec 2024 15:43:56 -0500 Subject: [PATCH] formatting --- .vscode/launch.json | 66 +++++++++--------- .../examples/nft-react-hooks/src/app/app.tsx | 2 +- .../app/scenes/Collections/Collections.css | 8 +-- .../app/scenes/Collections/Collections.tsx | 67 +++++++++++-------- .../src/app/scenes/Home/Home.css | 8 +-- .../src/app/scenes/Home/Home.tsx | 2 +- .../src/app/scenes/Wallets/Wallets.css | 3 +- .../src/app/scenes/Wallets/Wallets.tsx | 33 ++++++--- .../examples/nft-react-hooks/src/main.tsx | 8 +-- .../examples/nft-react-hooks/src/styles.css | 21 +++--- packages/libs/sdk/src/solana/solana.ts | 7 +- packages/libs/ui/nft-react-hooks/README.md | 4 +- packages/libs/ui/nft-react-hooks/src/index.ts | 1 - .../src/lib/hooks/useCollection/query.ts | 2 +- .../lib/hooks/useTrendingCollections/query.ts | 18 ++--- .../src/lib/hooks/useWalletNFTs/query.ts | 11 ++- tools/build-lib-nft-hooks/README.md | 7 +- tools/build-lib-nft-hooks/cpMainCjs.js | 7 +- tools/build-lib-nft-hooks/makeMainCjs.js | 7 +- tools/build-lib-nft-hooks/prepareDist.js | 9 ++- 20 files changed, 150 insertions(+), 141 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 8e9c2d11..257ad1e6 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -1,8 +1,8 @@ { // https://stackoverflow.com/a/60488372 // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { @@ -13,38 +13,36 @@ "webRoot": "${workspaceFolder}" }, { - "type": "pwa-node", - "request": "launch", - "name": "Launch Program", - "skipFiles": [ - "/**" - ], - "program": "${file}" - }, - { - "name": "debug-app-nft-hooks", - "type": "node", - "request": "launch", - "runtimeExecutable": "yarn", - "runtimeArgs": [ - "run", - "nx", - "run", - "apps-examples-nft-react-hooks:serve:development", - "-r", - "ts-node/register", - "-r", - "tsconfig-paths/register" - ], - "protocol": "inspector", - "outputCapture": "std", - "internalConsoleOptions": "openOnSessionStart", - "console": "internalConsole", - "env": { - "TS_NODE_IGNORE": "false", - "TS_NODE_PROJECT": "${workspaceFolder}/packages/apps/examples/nft-react-hooks/tsconfig.json" + "type": "pwa-node", + "request": "launch", + "name": "Launch Program", + "skipFiles": ["/**"], + "program": "${file}" }, - "cwd": "${workspaceFolder}/packages/apps/examples/nft-react-hooks/" - } + { + "name": "debug-app-nft-hooks", + "type": "node", + "request": "launch", + "runtimeExecutable": "yarn", + "runtimeArgs": [ + "run", + "nx", + "run", + "apps-examples-nft-react-hooks:serve:development", + "-r", + "ts-node/register", + "-r", + "tsconfig-paths/register" + ], + "protocol": "inspector", + "outputCapture": "std", + "internalConsoleOptions": "openOnSessionStart", + "console": "internalConsole", + "env": { + "TS_NODE_IGNORE": "false", + "TS_NODE_PROJECT": "${workspaceFolder}/packages/apps/examples/nft-react-hooks/tsconfig.json" + }, + "cwd": "${workspaceFolder}/packages/apps/examples/nft-react-hooks/" + } ] } diff --git a/packages/apps/examples/nft-react-hooks/src/app/app.tsx b/packages/apps/examples/nft-react-hooks/src/app/app.tsx index 63b4bd99..7ee93756 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/app.tsx +++ b/packages/apps/examples/nft-react-hooks/src/app/app.tsx @@ -1,4 +1,4 @@ -import { Link, Outlet } from "react-router-dom"; +import { Link, Outlet } from 'react-router-dom'; function App() { return ( diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.css b/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.css index f31ccef0..0168165b 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.css +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.css @@ -1,8 +1,8 @@ thead td th { - padding: 8px 12px; - font-weight: 600; + padding: 8px 12px; + font-weight: 600; } tbody td th { - padding: 2px 12px; -} \ No newline at end of file + padding: 2px 12px; +} diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.tsx b/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.tsx index 6cd6c0fd..7f7f1487 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.tsx +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Collections/Collections.tsx @@ -1,8 +1,11 @@ -import { useTrendingCollections, TrendingCollectionsTimePeriod } from '@quicknode/icy-nft-hooks'; +import { + useTrendingCollections, + TrendingCollectionsTimePeriod, +} from '@quicknode/icy-nft-hooks'; import { useState } from 'react'; import './Collections.css'; - + function Collections() { const [cursor, setCursor] = useState(undefined); const { collections, pageInfo } = useTrendingCollections({ @@ -10,43 +13,50 @@ function Collections() { orderDirection: 'DESC', timePeriod: TrendingCollectionsTimePeriod.ONE_HOUR, first: 5, - after: cursor + after: cursor, }); return (
-
- Stats in last hour -
+
Stats in last hour
- - - - - + + + + + - {collections.map( - (collection) => { - return ( - - - - - - - - ); - } - )} + {collections.map((collection) => { + return ( + + + + + + + + ); + })}
CollectionFloorVolumeTotal SalesAverageCollectionFloorVolumeTotal SalesAverage
{collection.name}Ξ{collection.stats.floor.toFixed(3)}Ξ{collection.stats.volume.toFixed(3)}{collection.stats.totalSales}Ξ{collection.stats.average.toFixed(3)}
{collection.name}Ξ{collection.stats.floor.toFixed(3)}Ξ{collection.stats.volume.toFixed(3)}{collection.stats.totalSales}Ξ{collection.stats.average.toFixed(3)}
{pageInfo?.hasNextPage && ( -
- +
+
)}
@@ -54,4 +64,3 @@ function Collections() { } export default Collections; - diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.css b/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.css index 13432c5c..67f8e28f 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.css +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.css @@ -1,5 +1,5 @@ .Home { - display: flex; - flex-direction: column; - align-items: center; -} \ No newline at end of file + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.tsx b/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.tsx index 5f534cbb..2261f6b2 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.tsx +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Home/Home.tsx @@ -1,4 +1,4 @@ -import "./Home.css"; +import './Home.css'; function Home() { return ( diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.css b/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.css index af82cbd2..1479df6f 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.css +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.css @@ -1 +1,2 @@ -.Wallets {} \ No newline at end of file +.Wallets { +} diff --git a/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.tsx b/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.tsx index 3b4dab53..8f364e55 100644 --- a/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.tsx +++ b/packages/apps/examples/nft-react-hooks/src/app/scenes/Wallets/Wallets.tsx @@ -6,7 +6,11 @@ import './Wallets.css'; function Wallets() { const [ensName, setEnsName] = useState(''); const [cursor, setCursor] = useState(undefined); - const { nfts, isSearchValid, pageInfo } = useWalletNFTs({ ensName, first: 10, after: cursor }); + const { nfts, isSearchValid, pageInfo } = useWalletNFTs({ + ensName, + first: 10, + after: cursor, + }); return (
@@ -17,7 +21,8 @@ function Wallets() { value={ensName} onChange={(e) => setEnsName(e.target.value)} style={{ - outlineColor: !isSearchValid && ensName.length > 0 ? 'red' : undefined, + outlineColor: + !isSearchValid && ensName.length > 0 ? 'red' : undefined, }} />
@@ -28,10 +33,7 @@ function Wallets() { const imageUrl = nft.images.find((i) => !!i.url)?.url; return ( -
+

{contract.name}

@@ -50,10 +52,21 @@ function Wallets() { })} {pageInfo?.hasNextPage && ( -
- +
+
)}
diff --git a/packages/apps/examples/nft-react-hooks/src/main.tsx b/packages/apps/examples/nft-react-hooks/src/main.tsx index 0ff9ec36..501af622 100644 --- a/packages/apps/examples/nft-react-hooks/src/main.tsx +++ b/packages/apps/examples/nft-react-hooks/src/main.tsx @@ -1,10 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { - BrowserRouter as Router, - Routes, - Route, -} from "react-router-dom"; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { IcyProvider } from '@quicknode/icy-nft-hooks'; import './styles.css'; @@ -18,7 +14,7 @@ const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); -const apiKey = process.env['NX_ICY_API_KEY'] || '' +const apiKey = process.env['NX_ICY_API_KEY'] || ''; root.render( diff --git a/packages/apps/examples/nft-react-hooks/src/styles.css b/packages/apps/examples/nft-react-hooks/src/styles.css index 215129f8..ce9bf189 100644 --- a/packages/apps/examples/nft-react-hooks/src/styles.css +++ b/packages/apps/examples/nft-react-hooks/src/styles.css @@ -1,7 +1,7 @@ body { margin: 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -37,7 +37,7 @@ code { border-radius: 8px; text-decoration: none; font-weight: 500; - opacity: .75; + opacity: 0.75; } .nav .links { display: grid; @@ -46,13 +46,12 @@ code { .nav a:hover { opacity: 1; - background: #292A2B; + background: #292a2b; } .search { display: inline-flex; margin: 16px auto; - } .search button { background: #434445; @@ -61,7 +60,7 @@ code { height: 40px; padding: 0 16px; font-weight: 600; - transition: all 150ms ease-out; + transition: all 150ms ease-out; cursor: pointer; font-size: 16px; @@ -81,16 +80,16 @@ code { .empty { padding: 32px; - background: #292A2B; + background: #292a2b; border-radius: 6px; - color: #AEAEB2; + color: #aeaeb2; text-align: center; } .mono { text-align: right; font-family: 'Roboto Mono', monospace; - opacity: .75; + opacity: 0.75; } :root { @@ -98,7 +97,7 @@ code { } .card { - background: #292A2B; + background: #292a2b; padding: 16px; margin: 32px; border-radius: 12px; @@ -144,7 +143,7 @@ code { } .top h2 { - opacity: .5; + opacity: 0.5; margin-top: 12px; font-size: 16px; } diff --git a/packages/libs/sdk/src/solana/solana.ts b/packages/libs/sdk/src/solana/solana.ts index 9f83a5bf..6cfb083c 100644 --- a/packages/libs/sdk/src/solana/solana.ts +++ b/packages/libs/sdk/src/solana/solana.ts @@ -128,9 +128,10 @@ export class Solana { feeType: PriorityFeeLevels = 'medium' ) { const { result } = await this.fetchEstimatePriorityFees({}); - const priorityFee = feeType === 'recommended' - ? result.recommended - : result.per_compute_unit[feeType]; + const priorityFee = + feeType === 'recommended' + ? result.recommended + : result.per_compute_unit[feeType]; const priorityFeeInstruction = ComputeBudgetProgram.setComputeUnitPrice({ microLamports: priorityFee, diff --git a/packages/libs/ui/nft-react-hooks/README.md b/packages/libs/ui/nft-react-hooks/README.md index 2b323c89..641bba16 100644 --- a/packages/libs/ui/nft-react-hooks/README.md +++ b/packages/libs/ui/nft-react-hooks/README.md @@ -108,9 +108,7 @@ const { nfts, loading, isSearchValid } = useWalletNFTs({ ensName: string; } - export type WalletNFTsQueryVariables = - | WalletNFTsQueryAddressVariables - | WalletNFTsQueryENSVariables; + export type WalletNFTsQueryVariables = WalletNFTsQueryAddressVariables | WalletNFTsQueryENSVariables; ``` ###### returns: diff --git a/packages/libs/ui/nft-react-hooks/src/index.ts b/packages/libs/ui/nft-react-hooks/src/index.ts index 994aa557..a1da57f5 100644 --- a/packages/libs/ui/nft-react-hooks/src/index.ts +++ b/packages/libs/ui/nft-react-hooks/src/index.ts @@ -4,5 +4,4 @@ import _ from 'graphql'; export * from './lib/hooks'; export { default as IcyProvider } from './lib/provider'; - // export * from './lib/libs-ui-nft-react-hooks'; diff --git a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useCollection/query.ts b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useCollection/query.ts index dec80801..af08280a 100644 --- a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useCollection/query.ts +++ b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useCollection/query.ts @@ -13,7 +13,7 @@ export const collectionQuery = gql` floor totalSales volume - } + } unsafeOpenseaBannerImageUrl unsafeOpenseaImageUrl unsafeOpenseaSlug diff --git a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useTrendingCollections/query.ts b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useTrendingCollections/query.ts index 3e02f6e7..c52b1c53 100644 --- a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useTrendingCollections/query.ts +++ b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useTrendingCollections/query.ts @@ -4,17 +4,17 @@ import { Connection, PaginationArgs } from '../../types'; export const trendingCollectionsQuery = gql` query TrendingCollections( - $first: Int, - $after: String, - $orderBy: TrendingCollectionsOrderByEnum, - $orderDirection: OrderDirectionEnum, + $first: Int + $after: String + $orderBy: TrendingCollectionsOrderByEnum + $orderDirection: OrderDirectionEnum $timePeriod: TrendingCollectionsTimePeriodEnum ) { trendingCollections( - first: $first, - after: $after, - orderBy: $orderBy, - orderDirection: $orderDirection, + first: $first + after: $after + orderBy: $orderBy + orderDirection: $orderDirection timePeriod: $timePeriod ) { pageInfo { @@ -64,7 +64,7 @@ export enum TrendingCollectionsTimePeriod { ONE_HOUR = 'ONE_HOUR', TWELVE_HOURS = 'TWELVE_HOURS', ONE_DAY = 'ONE_DAY', - SEVEN_DAYS = 'SEVEN_DAYS' + SEVEN_DAYS = 'SEVEN_DAYS', } export interface TrendingCollectionsQueryVariables extends PaginationArgs { diff --git a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useWalletNFTs/query.ts b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useWalletNFTs/query.ts index a55aebb2..a3d715be 100644 --- a/packages/libs/ui/nft-react-hooks/src/lib/hooks/useWalletNFTs/query.ts +++ b/packages/libs/ui/nft-react-hooks/src/lib/hooks/useWalletNFTs/query.ts @@ -4,15 +4,12 @@ import { Connection, PaginationArgs } from '../../types'; export const walletNFTsQuery = gql` query WalletNFTs( - $address: String, - $ensName: String, - $first: Int, + $address: String + $ensName: String + $first: Int $after: String ) { - wallet( - address: $address, - ensName: $ensName - ) { + wallet(address: $address, ensName: $ensName) { ensName address tokens(first: $first, after: $after) { diff --git a/tools/build-lib-nft-hooks/README.md b/tools/build-lib-nft-hooks/README.md index 671a3ee0..4006a143 100644 --- a/tools/build-lib-nft-hooks/README.md +++ b/tools/build-lib-nft-hooks/README.md @@ -1,9 +1,10 @@ # Build & Packaging Process -Requirements: support ESM & CommonJS formats, +Requirements: support ESM & CommonJS formats, mimic @apollo/client build system ## Rollup & Nx -Rollup configuration can be done with either a data structure, or a JS function. [JS has limitations](https://www.rollupjs.org/guide/en/#differences-to-the-javascript-api). [Apollo client uses a data structure config](https://github.com/apollographql/apollo-client/blob/main/config/rollup.config.js). It's preferable to copy the apollo technique, but we cannot because we require an initial config from Nx, which can only come through a JS function. Nx does not support a promise from this function, therefore we cannot directly use [the rollup API](https://www.rollupjs.org/guide/en/#javascript-api). Therefore we cannot return an array of configs from our JS function (which is what apollo does). -The workaround is to run the build twice, once each for ESM and CommonJS. Since Nx clears the package dist folder between builds, we preserve the `main.cjs` file after the `cjs` build and copy it into the dist folder after running the `esm` format. The shell script `build-lib-nft-hooks.bash` encapsulates the process. +Rollup configuration can be done with either a data structure, or a JS function. [JS has limitations](https://www.rollupjs.org/guide/en/#differences-to-the-javascript-api). [Apollo client uses a data structure config](https://github.com/apollographql/apollo-client/blob/main/config/rollup.config.js). It's preferable to copy the apollo technique, but we cannot because we require an initial config from Nx, which can only come through a JS function. Nx does not support a promise from this function, therefore we cannot directly use [the rollup API](https://www.rollupjs.org/guide/en/#javascript-api). Therefore we cannot return an array of configs from our JS function (which is what apollo does). + +The workaround is to run the build twice, once each for ESM and CommonJS. Since Nx clears the package dist folder between builds, we preserve the `main.cjs` file after the `cjs` build and copy it into the dist folder after running the `esm` format. The shell script `build-lib-nft-hooks.bash` encapsulates the process. diff --git a/tools/build-lib-nft-hooks/cpMainCjs.js b/tools/build-lib-nft-hooks/cpMainCjs.js index fb7f281f..c7d21eb2 100644 --- a/tools/build-lib-nft-hooks/cpMainCjs.js +++ b/tools/build-lib-nft-hooks/cpMainCjs.js @@ -1,6 +1,6 @@ -const {promisify} = require('util'); +const { promisify } = require('util'); const fs = require('fs'); -const {join} = require('path'); +const { join } = require('path'); const mv = promisify(fs.rename); const libPath = `packages/libs/ui/nft-react-hooks`; @@ -10,7 +10,6 @@ const moveMainFile = async () => { const original = '/tmp/main.cjs'; const target = `${distRoot}/main.cjs`; await mv(original, target); -} +}; moveMainFile(); - diff --git a/tools/build-lib-nft-hooks/makeMainCjs.js b/tools/build-lib-nft-hooks/makeMainCjs.js index 57161d66..8e1a566e 100644 --- a/tools/build-lib-nft-hooks/makeMainCjs.js +++ b/tools/build-lib-nft-hooks/makeMainCjs.js @@ -1,6 +1,6 @@ -const {promisify} = require('util'); +const { promisify } = require('util'); const fs = require('fs'); -const {join} = require('path'); +const { join } = require('path'); const mv = promisify(fs.rename); const libPath = `packages/libs/ui/nft-react-hooks`; @@ -10,7 +10,6 @@ const moveMainFile = async () => { const original = `${distRoot}/index.js`; const target = '/tmp/main.cjs'; await mv(original, target); -} +}; moveMainFile(); - diff --git a/tools/build-lib-nft-hooks/prepareDist.js b/tools/build-lib-nft-hooks/prepareDist.js index 84aca3ce..7da6202c 100644 --- a/tools/build-lib-nft-hooks/prepareDist.js +++ b/tools/build-lib-nft-hooks/prepareDist.js @@ -16,7 +16,7 @@ const path = require('path'); const libPath = `packages/libs/ui/nft-react-hooks`; const distRoot = `${__dirname}/../../dist/${libPath}`; -fs.copyFileSync(`${distRoot}/package.json`, `${__dirname}/package.json`); +fs.copyFileSync(`${distRoot}/package.json`, `${__dirname}/package.json`); const packageJson = require('./package.json'); @@ -35,13 +35,13 @@ delete packageJson.scripts; delete packageJson.bundlesize; delete packageJson.engines; -packageJson.main = './main.cjs' +packageJson.main = './main.cjs'; // The root package.json points to the CJS/ESM source in "dist", to support // on-going package development (e.g. running tests, supporting npm link, etc.). // When publishing from "dist" however, we need to update the package.json // to point to the files within the same directory. -const distPackageJson = JSON.stringify(packageJson, null, 2) + "\n"; +const distPackageJson = JSON.stringify(packageJson, null, 2) + '\n'; // Save the modified package.json to "dist" fs.writeFileSync(`${distRoot}/package.json`, distPackageJson); @@ -50,5 +50,4 @@ fs.unlinkSync(`${__dirname}/package.json`); // Copy supporting files into "dist" const topDir = `${__dirname}/../..`; // fs.copyFileSync(`${topDir}/${libPath}/README.md`, `${distRoot}/README.md`); -fs.copyFileSync(`${topDir}/LICENSE.txt`, `${distRoot}/LICENSE.txt`); - +fs.copyFileSync(`${topDir}/LICENSE.txt`, `${distRoot}/LICENSE.txt`);