Add pending transaction list in wallet sidekick and a loading spinner next to wallet

[marc-aurele-besner]

User description

Add pending transaction list in wallet sidekick and a loading spinner next to wallet

• Add a pending transaction section in wallet sidekick to log transaction between when they are submitted using Astral wallets actions and when they are detected by the indexer
• Show status (extrinsic event Success or Failure)
• Move out the transaction when finalized (2 min after it's detected)
• Add a count badge on top when pending transation are present

Screenshots

---

PR Type

enhancement, other

---

Description

• Added handling for pending transactions across various components.
• Created new components for displaying and managing pending transactions.
• Updated existing components to integrate pending transactions logic.
• Added Zustand store for managing transaction states.
• Defined new types and constants for transactions.
• Updated package dependencies to include zustand.

---

Changes walkthrough 📝

	Relevant files
Enhancement	13 files ActionsModal.tsx Add pending transactions handling in `ActionsModal`.          explorer/src/components/Operator/ActionsModal.tsx Added addPendingTransactions function calls to handle pending transactions. Included TransactionStatus and useTransactionsStates imports. Updated transaction handling logic to include pending transaction details. +154/-26 OperatorStake.tsx Add pending transactions handling in `OperatorStake`.        explorer/src/components/Operator/OperatorStake.tsx Added addPendingTransactions function calls to handle pending transactions. Included TransactionStatus and useTransactionsStates imports. Updated transaction handling logic to include pending transaction details. +33/-4    AccountListDropdown.tsx Create `AccountListDropdown` component for wallet accounts. explorer/src/components/WalletButton/AccountListDropdown.tsx Created new AccountListDropdown component for wallet account selection. Added logic for displaying and switching between accounts. Included wallet disconnect functionality. +136/-1  index.tsx Rename and update `ConnectWalletButton` to `WalletButton`. explorer/src/components/WalletButton/index.tsx Renamed ConnectWalletButton to WalletButton. Updated button styling and logic. +2/-2      ActionsModal.tsx Add pending transactions handling in `ActionsModal`.          explorer/src/components/WalletSideKick/ActionsModal.tsx Added addPendingTransactions function calls to handle pending transactions. Included TransactionStatus and useTransactionsStates imports. Updated transaction handling logic to include pending transaction details. +76/-6    LastExtrinsics.tsx Handle and display pending transactions in `LastExtrinsics`. explorer/src/components/WalletSideKick/LastExtrinsics.tsx Added logic to handle and display pending transactions. Included TransactionStatus and useTransactionsStates imports. Updated extrinsics handling to check and move pending transactions. +79/-9    PendingTransactions.tsx Create PendingTransactions component to display pending transactions. explorer/src/components/WalletSideKick/PendingTransactions.tsx Created new PendingTransactions component to display pending transactions. Added logic to filter and display pending transactions for the acting account. +96/-0    index.tsx Add pending transactions label and component in wallet sidekick. explorer/src/components/WalletSideKick/index.tsx Added PendingTransactionsLabel component to display pending transactions count. Included PendingTransactions component in the wallet sidekick. +36/-1    DomainHeader.tsx Replace `ConnectWalletButton` with `WalletButton` in `DomainHeader`. explorer/src/components/layout/DomainHeader.tsx Replaced ConnectWalletButton with WalletButton. Updated import paths and component usage. +6/-6      index.ts Export transaction constants.                                                        explorer/src/constants/index.ts Added export for transaction constants. +1/-0      transaction.ts Add transaction status and event constants.                            explorer/src/constants/transaction.ts Created new constants for transaction statuses and events. +8/-0      transactions.ts Create Zustand store for transaction states management.    explorer/src/states/transactions.ts Created Zustand store for managing transaction states. Added functions to handle pending and finalized transactions. +82/-0    transaction.ts Define types for transactions.                                                      explorer/src/types/transaction.ts Defined types for transactions and transactions with metadata. +24/-0
Dependencies	1 files package.json Add `zustand` dependency.                                                                explorer/package.json Added zustand dependency for state management. +2/-1

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[netlify]

✅ Deploy Preview for dev-astral ready!

Name	Link
🔨 Latest commit	6167a2b
🔍 Latest deploy log	https://app.netlify.com/sites/dev-astral/deploys/667c3806f1f8740008283cb4
😎 Deploy Preview	https://deploy-preview-665--dev-astral.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	4
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The transaction handling logic in various components seems to be repetitive and could be centralized to reduce duplication and potential errors. For example, the transaction handling in ActionsModal.tsx and OperatorStake.tsx could be abstracted into a single reusable function or component.
	Performance Concern: The extensive use of useMemo and useCallback with large dependency arrays across multiple components might lead to performance issues. It's crucial to ensure that these hooks are necessary and optimally used to avoid unnecessary re-renders.
	Code Clarity: The transaction status updates and the handling of pending transactions are scattered across multiple components, which could lead to maintenance challenges. Consolidating related logic into a dedicated context or custom hook could improve readability and maintainability.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Correct the import path to ensure proper module resolution Replace the double slash in the import statement with a single slash to avoid potential issues with module resolution. explorer/src/components/WalletButton/AccountListDropdown.tsx [12] -import { formatAddress } from 'utils//formatAddress' +import { formatAddress } from 'utils/formatAddress' Suggestion importance[1-10]: 10 Why: Correcting the import path from a double slash to a single slash is crucial for proper module resolution and avoiding potential runtime errors.	10
	Modify the markAsFinalized function to correctly update and move transactions between states To ensure that the markAsFinalized function correctly updates the status of a transaction, it should also remove the transaction from the pendingTransactions array after updating its status. This avoids potential inconsistencies in the transaction states. explorer/src/states/transactions.ts [43-64] markAsFinalized: (transaction: Transaction, status: TransactionStatus) => set((state) => { const pendingTransaction = state.pendingTransactions.find( (t) => t.txHash === transaction.txHash && t.blockHash === transaction.blockHash, ) if (!pendingTransaction) return state return { - pendingTransactions: [ - ...state.pendingTransactions.filter( - (t) => - t.status === TransactionStatus.Pending && - t.txHash !== transaction.txHash && - t.blockHash !== transaction.blockHash, - ), + pendingTransactions: state.pendingTransactions.filter( + (t) => t.txHash !== transaction.txHash && t.blockHash !== transaction.blockHash, + ), + finalizedTransactions: [ + ...state.finalizedTransactions, { ...pendingTransaction, status, finalizedAtLocalTimestamp: new Date(), }, ], } }), Suggestion importance[1-10]: 9 Why: The suggestion correctly identifies a potential inconsistency in the markAsFinalized function. By ensuring that the transaction is removed from pendingTransactions and added to finalizedTransactions, it maintains the integrity of transaction states. This is a crucial improvement for the correctness of the state management.	9
Possible bug	Retrieve and use the correct nonce value for the transaction Ensure that the nonce value is correctly retrieved and used when adding a transaction to the pending transactions list. Using a hardcoded value of 0 can lead to incorrect transaction ordering or failures. explorer/src/components/Operator/ActionsModal.tsx [150] -nonce: 0, +nonce: await api.rpc.system.accountNextIndex(from), Suggestion importance[1-10]: 9 Why: Using a hardcoded nonce value of 0 can lead to incorrect transaction ordering or failures. Retrieving the correct nonce value ensures the transaction is processed correctly, which is crucial for maintaining the integrity of the transaction sequence.	9
	Add error handling to parseString to manage unexpected input formats Consider adding error handling for the parseString function to manage cases where the input does not contain a period or is in an unexpected format, which could lead to runtime errors. explorer/src/components/WalletSideKick/LastExtrinsics.tsx [55-59] +if (!input.includes('.')) throw new Error('Input must contain a period.'); const parts = input.split('.') const capitalizedPart = parts[0].charAt(0).toUpperCase() + parts[0].slice(1) -const snakeCasePart = parts[1].replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase() +const snakeCasePart = parts.length > 1 ? parts[1].replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase() : '' Suggestion importance[1-10]: 9 Why: Adding error handling to the parseString function is crucial for preventing runtime errors due to unexpected input formats. This enhances the reliability of the code.	9
Enhancement	Validate the transaction amount before submission Consider validating the amount value to ensure it is within acceptable limits before submitting the transaction. This can prevent errors related to invalid transaction values. explorer/src/components/Operator/ActionsModal.tsx [130] const amount = floatToStringWithDecimals(values.amount, tokenDecimals); +if (amount <= 0 || amount > walletBalance) { + throw new Error('Invalid amount'); +} Suggestion importance[1-10]: 8 Why: Validating the transaction amount before submission helps prevent errors related to invalid transaction values, which can improve the robustness and reliability of the application.	8
	Improve the robustness of URL comparison in transaction filtering Replace the strict equality check for URLs with a more robust method that handles potential variations in URL formatting or query parameters. This can prevent issues where URLs that are functionally the same but formatted differently are not recognized as equal. explorer/src/components/WalletSideKick/LastExtrinsics.tsx [36] -actingAccount.address === tx.from && selectedChain.urls.page == tx.chain.urls.page +actingAccount.address === tx.from && new URL(selectedChain.urls.page).origin === new URL(tx.chain.urls.page).origin Suggestion importance[1-10]: 8 Why: This suggestion improves the robustness of URL comparison, which can prevent potential issues with URL formatting variations. It addresses a significant aspect of the code's functionality.	8
	Refactor dynamic class names to use conditional expressions within template literals for clarity Use template literals for dynamic class names in JSX for better readability and consistency. explorer/src/components/WalletButton/AccountListDropdown.tsx [42-45] -className={`relative cursor-default select-none py-2 pr-4 text-gray-900 dark:text-white md:pl-10 ${ - active && 'dark:bg-blueDarkAccent bg-gray-100' -}`} +className={`relative cursor-default select-none py-2 pr-4 text-gray-900 dark:text-white md:pl-10 ${active ? 'dark:bg-blueDarkAccent bg-gray-100' : ''}`} Suggestion importance[1-10]: 6 Why: Using conditional expressions within template literals improves readability and consistency, but the change is minor and does not affect functionality.	6
Maintainability	Simplify the extensionIcon useMemo logic for better readability and maintainability Refactor the extensionIcon useMemo to return early if actingAccount is null, simplifying the structure and improving readability. explorer/src/components/WalletButton/AccountListDropdown.tsx [18-33] -if (!actingAccount) return null -switch (actingAccount.source as SupportedWalletExtension) { - case SupportedWalletExtension.PolkadotJs: - return ( - <div className='size-5'> - <PolkadotIcon /> - </div> - ) - default: - return ( - <div className='size-6'> - <SubWalletIcon /> - </div> - ) -} +if (!actingAccount) return null; +return actingAccount.source === SupportedWalletExtension.PolkadotJs ? ( + <div className='size-5'> + <PolkadotIcon /> + </div> +) : ( + <div className='size-6'> + <SubWalletIcon /> + </div> +); Suggestion importance[1-10]: 8 Why: The refactor simplifies the logic and improves readability, making the code easier to maintain without changing its functionality.	8
	Refactor moveIfPending to improve code clarity and separation of concerns Refactor the moveIfPending function to separate concerns, improving readability and maintainability. Specifically, separate the logging, data processing, and condition checks into distinct functions or blocks. explorer/src/components/WalletSideKick/LastExtrinsics.tsx [64-98] -console.log('edges', edges) -console.log('transactions', transactions) if (!transactions || !transactions[0] || !transactions[0].call) return edges try { - console.log('pendingTransactions', parseString(transactions[0].call)) const timeNowPlus2min = new Date(new Date().getTime() + 2 * 60000).getTime() // 2 minutes from now const pending = transactions.find( (tx) => edges[0].node && parseString(tx.call) === edges[0].node.name, ) - console.log('pending', pending) const toMove = pending && pending.finalizedAtLocalTimestamp && pending.finalizedAtLocalTimestamp.getTime() > timeNowPlus2min - console.log('pending', pending) - if (pending && pending.finalizedAtLocalTimestamp) { - console.log( - 'pending.finalizedAtLocalTimestamp', - pending.finalizedAtLocalTimestamp.getTime(), - ) - console.log('timeNowPlus2min', timeNowPlus2min) - } if (pending) { markAsFinalized( pending, edges[0].node.success ? TransactionStatus.Success : TransactionStatus.Failed, ) if (toMove) moveToFinalizedTransactions(toMove && pending) } } catch (error) { console.error('Error in moveIfPending', error) } return edges Suggestion importance[1-10]: 7 Why: The refactoring suggestion improves code readability and maintainability by separating concerns. However, it does not introduce new functionality or fix critical bugs.	7
Best practice	Improve type safety by explicitly defining the type of chainIdx Consider using a more specific type for chainIdx in the accounts.map function to ensure type safety. TypeScript can infer the type, but explicitly defining it as number can prevent potential bugs if the data structure changes in the future. explorer/src/components/WalletButton/AccountListDropdown.tsx [39] -accounts.map((account, chainIdx) => ( +accounts.map((account, chainIdx: number) => ( Suggestion importance[1-10]: 7 Why: Explicitly defining the type of chainIdx as number can prevent potential bugs and improve type safety. However, TypeScript can infer this type, so the improvement is minor.	7
Performance	Use method binding instead of inline functions for event handlers to enhance performance Avoid using inline functions for event handlers like onClick to improve performance. Instead, define a method in the component. explorer/src/components/WalletSideKick/PendingTransactions.tsx [80] -<TrashIcon className='size-5' stroke='red' onClick={() => handleRemove(tx)} /> +<TrashIcon className='size-5' stroke='red' onClick={handleRemove.bind(null, tx)} /> Suggestion importance[1-10]: 6 Why: Using method binding instead of inline functions for event handlers can improve performance. This is a minor optimization but still beneficial for the codebase.	6

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@apollo/client@3.9.6	network	+4	7.13 MB	apollo-bot
npm/@apollo/experimental-nextjs-app-support@0.8.0	None	0	112 kB	apollo-bot
npm/@babel/code-frame@7.23.5	Transitive: environment	+6	163 kB	nicolo-ribaudo
npm/@babel/compat-data@7.23.5	None	0	64.6 kB	nicolo-ribaudo
npm/@babel/core@7.24.0	environment, filesystem, unsafe	+9	1.79 MB	nicolo-ribaudo
npm/@babel/generator@7.23.6	None	+1	524 kB	nicolo-ribaudo
npm/@babel/helper-compilation-targets@7.23.6	None	+2	82.5 kB	nicolo-ribaudo
npm/@babel/helper-create-class-features-plugin@7.24.0	None	+6	457 kB	nicolo-ribaudo
npm/@babel/helper-create-regexp-features-plugin@7.22.15	None	+1	31 kB	nicolo-ribaudo
npm/@babel/helper-function-name@7.23.0	None	0	21.6 kB	nicolo-ribaudo
npm/@babel/helper-member-expression-to-functions@7.23.0	None	0	55 kB	nicolo-ribaudo
npm/@babel/helper-module-imports@7.22.15	None	0	54.4 kB	nicolo-ribaudo
npm/@babel/helper-plugin-utils@7.24.0	None	0	11.7 kB	nicolo-ribaudo
npm/@babel/helper-validator-option@7.23.5	None	0	11.7 kB	nicolo-ribaudo
npm/@babel/parser@7.24.0	None	0	1.88 MB	nicolo-ribaudo
npm/@babel/plugin-syntax-class-properties@7.12.13	None	0	2.68 kB	nicolo-ribaudo
npm/@babel/plugin-syntax-flow@7.23.3	None	0	5.49 kB	nicolo-ribaudo
npm/@babel/plugin-syntax-import-assertions@7.23.3	None	0	3.71 kB	nicolo-ribaudo
npm/@babel/plugin-syntax-jsx@7.23.3	None	0	4.21 kB	nicolo-ribaudo
npm/@babel/plugin-syntax-object-rest-spread@7.8.3	None	0	2.53 kB	nicolo-ribaudo
npm/@babel/plugin-transform-arrow-functions@7.23.3	None	0	5.62 kB	nicolo-ribaudo
npm/@babel/plugin-transform-block-scoped-functions@7.23.3	None	0	6.62 kB	nicolo-ribaudo
npm/@babel/plugin-transform-block-scoping@7.23.4	None	0	88.5 kB	nicolo-ribaudo
npm/@babel/plugin-transform-classes@7.23.8	None	+6	185 kB	nicolo-ribaudo
npm/@babel/plugin-transform-computed-properties@7.23.3	None	0	22.8 kB	nicolo-ribaudo
npm/@babel/plugin-transform-destructuring@7.23.3	None	0	82 kB	nicolo-ribaudo
npm/@babel/plugin-transform-for-of@7.23.6	None	+1	50.7 kB	nicolo-ribaudo
npm/@babel/plugin-transform-function-name@7.23.3	None	0	6.27 kB	nicolo-ribaudo
npm/@babel/plugin-transform-literals@7.23.3	None	0	4.7 kB	nicolo-ribaudo
npm/@babel/plugin-transform-member-expression-literals@7.23.3	None	0	5.01 kB	nicolo-ribaudo
npm/@babel/plugin-transform-modules-commonjs@7.23.3	None	+5	281 kB	nicolo-ribaudo
npm/@babel/plugin-transform-object-super@7.23.3	None	+3	54.4 kB	nicolo-ribaudo
npm/@babel/plugin-transform-optional-chaining@7.23.4	None	+2	46.4 kB	nicolo-ribaudo
npm/@babel/plugin-transform-parameters@7.23.3	None	0	65 kB	nicolo-ribaudo
npm/@babel/plugin-transform-property-literals@7.23.3	None	0	4.79 kB	nicolo-ribaudo
npm/@babel/plugin-transform-react-display-name@7.23.3	None	0	12.5 kB	nicolo-ribaudo
npm/@babel/plugin-transform-react-jsx@7.23.4	None	+1	84 kB	nicolo-ribaudo
npm/@babel/plugin-transform-shorthand-properties@7.23.3	None	0	7.18 kB	nicolo-ribaudo
npm/@babel/plugin-transform-spread@7.23.3	None	+1	27.2 kB	nicolo-ribaudo
npm/@babel/plugin-transform-template-literals@7.23.3	None	0	15.9 kB	nicolo-ribaudo
npm/@babel/preset-env@7.24.0	environment Transitive: unsafe	+68	1.74 MB	nicolo-ribaudo
npm/@babel/runtime@7.24.0	None	0	262 kB	nicolo-ribaudo
npm/@babel/template@7.24.0	None	0	68.9 kB	nicolo-ribaudo
npm/@babel/traverse@7.24.0	None	+4	675 kB	nicolo-ribaudo
npm/@babel/types@7.24.0	environment	+2	2.49 MB	nicolo-ribaudo
npm/@discordjs/rest@2.2.0	None	+6	4 MB	crawl
npm/@eslint-community/eslint-utils@4.4.0	None	0	379 kB	eslint-community-bot
npm/@eslint-community/regexpp@4.10.0	None	0	431 kB	eslint-community-bot
npm/@graphql-codegen/cli@4.0.1	environment, filesystem, network, shell, unsafe	+77	9.47 MB	dotansimha
npm/@graphql-codegen/client-preset@4.0.0	Transitive: environment, eval, filesystem, network, shell	+38	5.33 MB	dotansimha
npm/@graphql-codegen/plugin-helpers@5.0.3	unsafe	+12	239 kB	dotansimha
npm/@graphql-codegen/typescript@4.0.6	Transitive: environment, eval, filesystem, network, shell	+29	3.47 MB	dotansimha
npm/@graphql-tools/graphql-tag-pluck@8.3.0	None	0	63.1 kB	ardatan
npm/@graphql-tools/merge@9.0.3	None	0	95.5 kB	ardatan
npm/@graphql-tools/schema@10.0.3	None	0	67.9 kB	ardatan
npm/@graphql-tools/url-loader@8.0.2	network Transitive: environment, filesystem, shell	+19	1.62 MB	ardatan
npm/@graphql-tools/utils@10.1.0	None	+2	517 kB	ardatan
npm/@headlessui/react@1.7.18	environment	+2	2.25 MB	malfaitrobin
npm/@headlessui/tailwindcss@0.2.0	environment	0	10.7 kB	malfaitrobin
npm/@heroicons/react@2.1.1	None	0	3.33 MB	malfaitrobin
npm/@jridgewell/gen-mapping@0.3.5	None	+1	99.5 kB	jridgewell
npm/@jridgewell/sourcemap-codec@1.4.15	None	0	45.9 kB	jridgewell
npm/@jridgewell/trace-mapping@0.3.25	None	+1	222 kB	jridgewell
npm/@next/eslint-plugin-next@14.1.3	filesystem Transitive: environment, shell	+12	1.1 MB	vercel-release-bot
npm/@next/third-parties@14.2.3	None	0	14.1 kB	vercel-release-bot
npm/@nivo/core@0.84.0	Transitive: environment	+15	3.84 MB	plouc
npm/@nivo/line@0.84.0	Transitive: environment	+30	4.9 MB	plouc
npm/@nivo/pie@0.84.0	Transitive: environment	+22	4.77 MB	plouc
npm/@polkadot/api@10.12.1	None	+10	6.24 MB	polkadotjs
npm/@polkadot/extension-dapp@0.46.7	None	0	49.1 kB	polkadotjs
npm/@polkadot/extension-inject@0.46.7	None	0	23.9 kB	polkadotjs
npm/@polkadot/react-identicon@3.6.5	Transitive: environment	+7	1.33 MB	polkadotjs
npm/@polkadot/rpc-provider@10.12.1	network	+18	45.3 MB	polkadotjs
npm/@polkadot/types@10.12.1	None	+3	4.57 MB	polkadotjs
npm/@subwallet/wallet-connect@0.2.7	None	+18	1.24 MB	anhmtv
npm/@svgr/webpack@8.1.0	None	+22	470 kB	neoziro
npm/@tailwindcss/forms@0.5.7	None	0	50.2 kB	thecrypticace
npm/@tanstack/match-sorter-utils@8.11.8	None	0	269 kB	tannerlinsley
npm/@tanstack/react-table@8.13.2	Transitive: environment	+1	3.99 MB	tannerlinsley
npm/@testing-library/jest-dom@6.4.2	None	+9	822 kB	testing-library-bot
npm/@testing-library/react@14.2.1	environment	+9	9.03 MB	testing-library-bot
npm/@testing-library/user-event@14.5.2	Transitive: environment	+9	4.05 MB	testing-library-bot
npm/@types/istanbul-lib-coverage@2.0.6	None	0	5.45 kB	types
npm/@types/jest@29.5.12	Transitive: environment	+19	1.14 MB	types
npm/@types/js-cookie@3.0.6	None	0	7.43 kB	types
npm/@types/json-schema@7.0.15	None	0	31.7 kB	types
npm/@types/jsonwebtoken@9.0.6	None	0	13.5 kB	types
npm/@types/node@20.11.25	None	0	4 MB	types
npm/@types/prop-types@15.7.11	None	0	6.16 kB	types
npm/@types/react-dom@18.2.21	None	0	34 kB	types
npm/@types/react@18.2.64	None	+2	1.68 MB	types
npm/@typescript-eslint/eslint-plugin@7.1.1	None	+17	6.81 MB	jameshenry
npm/@vercel/og@0.6.2	environment, filesystem, network	+1	7.64 MB	vercel-release-bot
npm/acorn@8.11.3	None	0	531 kB	marijn
npm/agent-base@7.1.0	network	0	23.5 kB	tootallnate
npm/ansi-escapes@4.3.2	None	+1	135 kB	sindresorhus
npm/aria-query@5.3.0	None	+1	206 kB	jessebeach
npm/array-includes@3.1.7	None	0	25.4 kB	ljharb
npm/array.prototype.flat@1.3.2	None	0	18.7 kB	ljharb
npm/asn1js@3.0.5	None	0	289 kB	microshine
npm/async@3.2.5	None	0	808 kB	aearly
npm/autoprefixer@10.4.18	environment	+1	286 kB	ai
npm/available-typed-arrays@1.0.7	None	0	20.4 kB	ljharb
npm/browserslist@4.23.0	environment, filesystem	+1	342 kB	ai
npm/caniuse-lite@1.0.30001596	None	0	1.99 MB	caniuse-lite
npm/client-only@0.0.1	None	0	611 B	sebmarkbage
npm/common-tags@1.8.2	None	0	228 kB	fatfisz
npm/core-js-compat@3.36.0	None	0	715 kB	zloirock
npm/cosmiconfig@8.3.6	filesystem	0	78.5 kB	d-fischer
npm/crc-32@1.2.2	None	0	31 kB	sheetjs
npm/css-to-react-native@3.2.0	environment	+2	109 kB	jacobp100
npm/d3-array@2.12.1	None	+1	146 kB	mbostock
npm/d3-color@3.1.0	None	0	61.2 kB	mbostock
npm/d3-format@1.4.5	None	0	58.7 kB	mbostock
npm/d3-interpolate@3.0.1	None	0	69.7 kB	mbostock
npm/d3-time-format@3.0.0	None	0	84.2 kB	recifs
npm/d3-time@1.1.0	None	0	58.4 kB	mbostock
npm/deepmerge@4.3.1	None	0	31.2 kB	tehshrike
npm/discord-api-types@0.37.77	None	0	2.64 MB	crawl
npm/domhandler@5.0.3	None	+1	86.7 kB	feedic
npm/end-of-stream@1.4.4	None	0	6.23 kB	mafintosh
npm/entities@4.5.0	None	0	413 kB	feedic
npm/es-abstract@1.22.5	None	+10	2.19 MB	ljharb
npm/es-iterator-helpers@1.0.17	None	+4	227 kB	ljharb
npm/es-set-tostringtag@2.0.3	None	0	13.9 kB	ljharb
npm/es-shim-unscopables@1.0.2	None	0	11 kB	ljharb
npm/escape-string-regexp@1.0.5	None	0	2.69 kB	jbnicolai
npm/eslint-config-prettier@9.1.0	None	0	20.8 kB	lydell
npm/eslint-config-standard-with-typescript@43.0.1	None	+11	5.26 MB	mightyiam
npm/eslint-plugin-import@2.29.1	filesystem, unsafe Transitive: environment	+10	1.55 MB	ljharb
npm/eslint-plugin-jsx-a11y@6.8.0	None	+12	4.89 MB	ljharb
npm/eslint-plugin-prettier@5.1.3	None	+2	252 kB	jounqin
npm/eslint-plugin-promise@6.1.1	None	0	67.1 kB	eslint-community-bot
npm/eslint-plugin-react-hooks@4.6.0	environment	0	118 kB	gnoff
npm/eslint-plugin-react@7.34.0	filesystem Transitive: environment	+9	1.11 MB	ljharb
npm/eslint-plugin-tailwindcss@3.14.3	None	0	189 kB	francoismassart
npm/eslint-visitor-keys@3.4.3	None	0	32.3 kB	eslintbot
npm/eslint@8.57.0	environment, filesystem Transitive: unsafe	+32	6.38 MB	eslintbot
npm/espree@9.6.1	None	+1	98 kB	eslintbot
npm/ethers@6.11.1	network	+7	19.6 MB	ricmoo
npm/fast-glob@3.3.2	filesystem	0	96.7 kB	mrmlnc
npm/faunadb@4.8.0	environment, network Transitive: filesystem	+11	770 kB	fauna-bot
npm/fbjs@3.0.5	Transitive: network	+2	520 kB	bigfootjon
npm/find-up@4.1.0	Transitive: filesystem	+1	18.2 kB	sindresorhus
npm/formik@2.4.5	environment Transitive: eval	+3	1.25 MB	jaredpalmer
npm/function.prototype.name@1.1.6	None	+1	42.2 kB	ljharb
npm/gh-pages@6.1.1	filesystem, shell Transitive: environment	+10	450 kB	tschaub
npm/graceful-fs@4.2.11	environment, filesystem	0	32.5 kB	isaacs
npm/graphql@16.8.1	None	0	1.34 MB	i1g
npm/has-proto@1.0.3	None	0	12 kB	ljharb
npm/hoist-non-react-statics@3.3.2	Transitive: environment	+1	62.8 kB	mridgway
npm/ignore@5.3.1	None	0	51.5 kB	kael
npm/is-core-module@2.13.1	None	0	30.2 kB	ljharb
npm/is-map@2.0.3	None	0	20.4 kB	ljharb
npm/is-set@2.0.3	None	0	19.7 kB	ljharb
npm/is-shared-array-buffer@1.0.3	None	0	18.7 kB	ljharb
npm/jest-canvas-mock@2.5.2	None	+1	121 kB	atool
npm/jiti@1.21.0	environment, filesystem, unsafe	0	1.91 MB	pi0
npm/js-cookie@3.0.5	None	0	26.2 kB	carhartl
npm/js-tokens@4.0.0	None	0	15.1 kB	lydell
npm/json5@2.2.3	None	0	235 kB	jordanbtucker
npm/jsonwebtoken@9.0.2	None	+11	162 kB	charlesrea
npm/jsx-ast-utils@3.3.5	None	0	236 kB	ljharb
npm/lodash@4.17.21	None	0	1.41 MB	bnjmnt4n
npm/log-symbols@4.1.0	None	+1	8.12 kB	sindresorhus
npm/loose-envify@1.4.0	environment	0	5.81 kB	zertosh
npm/lottie-react@2.4.0	Transitive: network	+1	25.9 MB	gamote

🚮 Removed packages: npm/@belopash/typeorm-store@1.3.0, npm/@polkadot/api@10.11.2, npm/@subsquid/archive-registry@3.3.0, npm/@subsquid/graphql-server@4.5.0, npm/@subsquid/ss58@2.0.2, npm/@subsquid/substrate-metadata-explorer@3.1.2, npm/@subsquid/substrate-processor@8.1.1, npm/@subsquid/substrate-typegen@8.0.2, npm/@subsquid/typeorm-codegen@1.3.3, npm/@subsquid/typeorm-migration@1.3.0, npm/@types/node@18.14.0, npm/@types/node@20.11.17, npm/@typescript-eslint/eslint-plugin@5.53.0, npm/@typescript-eslint/parser@5.53.0, npm/dotenv@16.0.3, npm/dotenv@16.4.4, npm/eslint-plugin-eslint-plugin@5.0.8, npm/eslint@8.34.0, npm/pg@8.11.3, npm/prom-client@14.2.0, npm/typeorm@0.3.20, npm/typescript@4.9.5, npm/typescript@5.3.3, npm/undici@5.21.0

View full report↗︎

[socket-security]

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert	Package	Note	Source	CI
Install scripts	npm/faunadb@4.8.0	Install script: postinstall Source: node ./tools/printReleaseNotes	explorer/package.json	🚫

View full report↗︎

Next steps

What is an install script?

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/foo@1.0.0 or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore npm/faunadb@4.8.0