Compare commits

..
Author SHA1 Message Date
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
98f2b56c19 Version Packages (#4782)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-26 15:29:28 +12:00
gregfromstl 500970e001 [SDK] Fix: logout on iframe (#4809)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing account logout functionality and updating error messages related to transaction limits across various tests in the `thirdweb` package.

### Detailed summary
- Updated `logout` method in `iframe-auth.ts` to check for `AuthQuerier` before calling logout.
- Changed expected address in `deploy-published.test.ts`.
- Updated error messages from `TransactionError: Error - !Qty` to `DropClaimExceedLimit` in multiple test files for `erc20`, `erc721`, and `erc1155`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-26 02:14:43 +00:00
jnsdls 9c58c08945 simplify siwe auth login flow (#4808) 2024-09-26 01:23:13 +00:00
kien-ngo 587804d5a8 [Dashboard] Remove chakra useToast (#4802)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of `useToast` from `@chakra-ui/react` with `toast` from `sonner` for displaying notifications across various components in the dashboard. This change aims to streamline the notification handling.

### Detailed summary
- Removed `useToast` from multiple components.
- Replaced toast notifications with `toast.info`, `toast.success`, and `toast.error` methods from `sonner`.
- Updated the `AddressCopyButton`, `PermissionsTable`, `LatestEvents`, `IpfsUploadDropzone`, and `AuthorizedWalletsTable` components to reflect these changes.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-26 00:19:57 +00:00
kumaryash90 3f83a377bc New zksolc metadata format (#4568)
## Problem solved

Handle new zksolc metadata format
ref: ipfs://QmS6ehXYWKJEJq3LBSfG2ujKPzQQJooNE7L375zyFbpxmw

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces support for a new `zksolc` metadata format in the `thirdweb` package, enhancing the handling of zkSync contracts by updating various functions and types to accommodate the new compiler type.

### Detailed summary
- Added `compilerType` option to several functions and types to support `solc` and `zksolc`.
- Updated `fetchPublishedContractMetadata` and `deployPublishedContract` to utilize `compilerType`.
- Enhanced `formatCompilerMetadata` to handle `zksolc` specific metadata.
- Modified `fetchDeployMetadata` to validate and fetch `zksolc` metadata correctly.
- Updated `CustomContractForm` to determine `compilerType` based on the active wallet chain.
- Improved error handling for missing `zksolc` metadata.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-26 00:14:07 +00:00
gregfromstl 5ab3a81f79 [Dashboard] Feature: update ecosystem wallet auth options (#4797)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces new authentication options for the ecosystem feature, updates related types, and enhances the UI components to support these options.

### Detailed summary
- Added new authentication options: `google`, `facebook`, `x`, `discord`, `farcaster`, `telegram`, `phone`, `email`, `guest`, `apple`, `coinbase`, `line`.
- Updated `Ecosystem` type to include `authOptions`.
- Modified `useUpdateEcosystem` to accept optional `authOptions`.
- Added `AuthOptionsSection` to the `EcosystemPermissionsPage`.
- Created `AuthOptionsForm` for managing authentication options.
- Implemented confirmation dialog for adding/removing auth options.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 23:47:49 +00:00
kien-ngo 931569b374 [Dashboard] Remove <Box/> easy mode (#4786)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing all instances of the `Box` component with the `div` element across various files in the codebase, likely for consistency or to simplify the component structure.

### Detailed summary
- Replaced `Box` with `div` in `PermissionsTable.tsx`
- Replaced `Box` with `div` in `LatestEvents.tsx`
- Replaced `Box` with `div` in `templates.tsx`
- Replaced `Box` with `div` in `detail-page.tsx`
- Replaced `Box` with `div` in `contract-publish-form/index.tsx`
- Replaced `Box` with `div` in `custom-factory.tsx`
- Replaced `Box` with `div` in `metadata.tsx`
- Replaced `Box` with `div` in `Solutions.tsx`
- Replaced `Box` with `div` in `MiniPlayground.tsx`
- Replaced `Box` with `div` in `FormItem.tsx`
- Replaced `Box` with `div` in `DevRelEvent.tsx`
- Replaced `Box` with `div` in `shared-metadata-form.tsx`
- Replaced `Box` with `div` in `update-metadata-form.tsx`
- Replaced `Box` with `div` in `external-links-fieldset.tsx`
- Replaced `Box` with `div` in `events-feed.tsx`
- Replaced `Box` with `div` in `lazy-mint-form.tsx`
- Replaced `Box` with `div` in `mint-form.tsx`
- Replaced `Box` with `div` in `page.tsx`
- Replaced `Box` with `div` in `landing-fieldset.tsx`
- Replaced `Box` with `div` in `PlanCard.tsx`
- Replaced `Box` with `div` in `index.tsx` of `CodeBlock`
- Replaced `Box` with `div` in `SponsorshipPolicies/index.tsx`
- Replaced `Box` with `div` in `AccountAbstractionSettingsPage` across multiple instances.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:47:51 +00:00
kien-ngo d76618fc00 [Dashboard] Remove Flex easy mode (#4785)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing instances of the `Flex` component with `div` elements that have corresponding CSS classes for layout styling. This change aims to streamline the code while maintaining the same visual structure.

### Detailed summary
- Replaced `<Flex>` with `<div className="flex flex-row">` in multiple components for horizontal alignment.
- Replaced `<Flex>` with `<div className="flex flex-col">` in several components for vertical alignment.
- Ensured all functional components maintain the same layout and behavior after changes.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:47:48 +00:00
kien-ngo 46acf33b5a [Dashboard] Remove more Flex (#4784)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing instances of the `Flex` component with `div` elements styled with Tailwind CSS classes. This change aims to standardize layout styling across various components in the application.

### Detailed summary
- Replaced `Flex` with `div` and added Tailwind CSS classes for layout.
- Updated components in files like `GraphicContainer.tsx`, `contract-functions.tsx`, `engine-overview.tsx`, and others.
- Maintained existing functionality while improving styling consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:47:45 +00:00
kien-ngo 10a84d2810 [Dashboard] Remove <Center /> (#4765)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of the `Center` component from `@chakra-ui/react` with `div` elements styled with Flexbox classes for better layout control across various components in the dashboard.

### Detailed summary
- Replaced `Center` with `div` and applied Flexbox utility classes in multiple components for consistent styling.
- Updated components include `TransactionButton`, `ContractSplitPage`, `OnboardingPaymentForm`, and more.
- Maintained existing functionality while improving layout responsiveness.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:47:42 +00:00
MananTank 3e8c074011 Fix Publish page not prepopulated with latest published version metadata (#4806)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `PublishContractPage` by adding logic to handle cases where published contract metadata lacks a version. It fetches existing contracts associated with a publisher and merges their data with the fetched metadata.

### Detailed summary
- Imported `getPublishedContractsWithPublisherMapping` utility.
- Renamed variable `publishMetadata` to `publishMetadataFromUri`.
- Added logic to check if `publishMetadataFromUri` lacks a version.
- Fetched existing published contracts for the publisher.
- Merged existing contract data with `publishMetadataFromUri` if applicable.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:34:26 +00:00
MananTank 206340cc1d Add Img component with skeleton + fallback support (#4791)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `Img` component that handles image loading states with customizable skeletons and fallbacks. It also adds a Storybook story to demonstrate various usages of the `Img` component.

### Detailed summary
- Added `Img` component to handle image loading states.
- Implemented state management for loading, fallback, and loaded statuses.
- Introduced customizable `skeleton` and `fallback` props.
- Created Storybook stories showcasing different scenarios for the `Img` component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 21:23:16 +00:00
gregandGitHub 6153d57c34 [SDK] Fix: adds ERC20 transfer overrides param (#4804) 2024-09-26 08:23:46 +12:00
jnsdls 39aeb140d2 Handle 400 error in user creation check (#4805) 2024-09-25 20:18:15 +00:00
MananTank 8e9d13c95c Add position relative on all Shadcn/Chakra AspectRatio component replacement divs (#4801)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating various components to add the `relative` class to `div` elements that define aspect ratios, enhancing layout control and positioning.

### Detailed summary
- Added `relative` class to `div` elements in:
  - `GameShowcase.tsx` for aspect ratios `16/9`
  - `GuideCard.tsx` for aspect ratios `2400/1260`
  - `airdrop-upload-erc20.tsx` for aspect ratios `21/9`
  - `chain-header.tsx` for conditional aspect ratios
  - `airdrop-upload.tsx` for aspect ratios `21/9`
  - `snapshot-upload.tsx` for aspect ratios `21/9`
  - `upload-step.tsx` for aspect ratio `square`
  - `NFTCards.tsx` for aspect ratio `square`
  - `MarketplaceDetails.tsx` for aspect ratio `square`
  - `dropzone.tsx` for aspect ratio adjustments
  - `WithoutThirdwebSection.tsx` for aspect ratios `16/10`
  - `logo/index.tsx` for aspect ratio `516/321`
  - Updated `Logo` component for aspect ratio `1377/267`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 15:40:12 +00:00
kien-ngo d35f0b2cc6 [Dashboard] Remove <AspectRatio/> (#4750)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing the `AspectRatio` component from the project and replacing its usage with `div` elements styled with Tailwind CSS classes to maintain the aspect ratio.

### Detailed summary
- Deleted `@radix-ui/react-aspect-ratio` from `package.json`.
- Removed all instances of the `AspectRatio` component across various files.
- Replaced `AspectRatio` with `div` elements using Tailwind CSS classes for aspect ratios.
- Updated related props and imports as necessary.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 05:52:04 +00:00
Joaquim VergesandGitHub 2f010fa3fc feat(storage): add JSON object upload example and documentation (#4796) 2024-09-25 15:35:57 +12:00
joaquim-verges 944d56f6d8 ecosystem refactor part 4: react native edition (#4783)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing wallet functionalities and authentication processes in the `thirdweb` library, particularly for ecosystem wallets in React Native. It introduces new wallet interfaces, updates existing methods, and improves error handling for user authentication.

### Detailed summary
- Removed obsolete `web-wallet.ts.changeset/chilled-dancers-cheer.md` file.
- Added support for ecosystem wallets in `useAutoConnect` hook.
- Updated `createInAppWallet` to include new `createOptions` structure.
- Defined `IWebWallet` interface with methods for wallet setup and user status.
- Expanded `EcosystemWalletCreationOptions` to include authentication options.
- Modified `getUserStatus` to handle user status retrieval with better error logging.
- Updated `InAppWebConnector` to utilize the new wallet interfaces and methods.
- Implemented `ShardedWallet` class with user wallet status and account retrieval.
- Enhanced error handling in the authentication processes across various modules.
- Removed deprecated methods from `native-auth.ts`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 01:41:15 +00:00
joaquim-verges 1f1f99ddd0 ecosystem refactor part 3 (#4781)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new constant `IS_DEV` to streamline environment checks, updates various wallet-related functionalities to use `ClientScopedStorage`, and replaces enum usages with string literals for better type safety. It also enhances error handling and modifies authentication processes.

### Detailed summary
- Added `IS_DEV` constant for environment checks.
- Replaced `process.env.NODE_ENV` checks with `IS_DEV` in multiple files.
- Updated wallet functions to utilize `ClientScopedStorage`.
- Converted enums to string literals for `RecoveryShareManagement` and `AuthProvider`.
- Improved error handling in authentication functions.
- Standardized user status strings across wallet components.
- Enhanced documentation for `ecosystemWallet` function.
- Refactored several functions to accept an object with parameters for better clarity.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 01:41:12 +00:00
joaquim-verges de63195d43 ecosystem wallet refactor (part 2) (#4780)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `thirdweb` wallet implementation, specifically enhancing the `in-app` wallet functionality by integrating `localStorage` for authentication and modifying wallet creation methods.

### Detailed summary
- Deleted `get-auth-token.ts` and `ecosystem-core.ts`.
- Updated wallet creation to use `createInAppWallet`.
- Integrated `localStorage` for authentication in multiple files.
- Modified `EcosystemWalletCreationOptions` to include `InAppWalletCreationOptions`.
- Removed obsolete auth token fetching in various functions.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-25 01:41:10 +00:00
Joaquim VergesandGitHub e2b3484764 Update pregen docs (#4795)
Signed-off-by: Joaquim Verges <[email protected]>
2024-09-25 11:14:10 +12:00
jnsdls c0d81dcaca Add optional Headers param to fetchChain (#4793)
### TL;DR

Added an optional Headers parameter to the `fetchChain` function.

### What changed?

- Introduced a new optional `headers` parameter to the `fetchChain` function in `apps/dashboard/src/utils/fetchChain.ts`.
- Updated the fetch request to include the provided headers.
- Created a new changeset file to document this patch-level change.

### How to test?

1. Call the `fetchChain` function without providing headers to ensure backward compatibility.
2. Call the `fetchChain` function with custom headers and verify they are included in the request.
3. Confirm that the function still correctly fetches chain metadata from the API.

### Why make this change?

This change allows for greater flexibility when making API requests to fetch chain metadata. By allowing custom headers, it enables use cases such as authentication, caching control, or other custom requirements when interacting with the API.
2024-09-24 21:09:41 +00:00
jnsdls 0aea48e37d fix typedoc setup (#4792)
### TL;DR

Refactored TypeDoc script and added a dedicated TypeScript configuration for documentation generation.

### What changed?

- Simplified the `typedoc.mjs` script by removing the `typedoc` function and directly executing the TypeDoc application.
- Added a new `tsconfig.typedoc.json` file specifically for TypeDoc configuration.
- Updated the TypeDoc application configuration to use the new TypeScript config file.

### How to test?

1. Run the TypeDoc script to generate documentation.
2. Verify that the `typedoc/documentation.json` file is created successfully.
3. Check that the generated documentation includes the correct files and excludes the specified ones.

### Why make this change?

This change improves the documentation generation process by:
1. Simplifying the TypeDoc script for better maintainability.
2. Providing a dedicated TypeScript configuration for documentation, ensuring more accurate type information.
3. Enhancing consistency in the documentation output by using a specific tsconfig file.
2024-09-24 21:03:38 +00:00
arcoraven f91e32f133 Add Alert docs to Portal (#4788)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces new features and updates to the `thirdweb Engine`, including alert notifications, metadata enhancements, and updated documentation for troubleshooting and alert management.

### Detailed summary
- Added new alert notifications feature in `page.mdx` with instructions.
- Introduced `metadata` for `Alert Notifications` and `Troubleshooting` pages.
- Updated asset imports for alert images in `page.mdx`.
- Enhanced troubleshooting documentation for clarity.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-24 19:52:49 +00:00
MananTank e38400195f Restore deleted whitespaces, Remove unsafe biome formatting (#4789)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the user interface by adding space between certain text elements and enhancing readability across various components in the dashboard application.

### Detailed summary
- Added space after text in various components to improve readability.
- Updated text elements in `templates.tsx`, `index.tsx`, `TransactionModeScreen.tsx`, and others.
- Ensured consistent formatting in `HeroSection.tsx`, `PricingCard.tsx`, and various settings pages.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/embedded-wallets/Configure/index.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx`, `apps/dashboard/src/core-ui/batch-upload/upload-step.tsx`, `packages/thirdweb/package.json`, `apps/dashboard/src/pages/template/[id].tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-24 23:14:39 +05:30
joaquim-verges e02d87b831 Refactor linkProfile and getProfiles API + prepare for ecosystemWallet in React Native (#4755)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the wallet's profile management system, enhancing the `linkProfile` and `getProfiles` functionalities. It also updates the import paths and improves the organization of wallet-related hooks and types.

### Detailed summary
- Deleted `useAdminAccount.ts` and updated references to `useAdminWallet.ts`.
- Refactored `linkProfile` and `getProfiles` APIs for improved functionality.
- Updated import paths for `Ecosystem` type across multiple files.
- Consolidated wallet profiles logic in `useProfiles` hook.
- Enhanced error handling and type definitions in wallet connectors.
- Added `linkProfile` and `getProfiles` methods to `InAppNativeConnector` and `InAppWebConnector`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-24 04:05:00 +00:00
joaquim-verges d5312304f7 refactor: update contract implementation resolution and module info retrieval (#4779)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `InstalledModulesTable` component by incorporating `getContract` for fetching contract information and updating the bytecode retrieval process in the `usePublishedContractsFromDeploy` function.

### Detailed summary
- In `InstalledModulesTable.tsx`:
  - Updated `contractInfo` to use `getContract` with parameters `moduleAddress`, `chain`, and `client`.

- In `hooks.ts`:
  - Replaced `getBytecode` with `resolveImplementation` to fetch bytecode.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-24 02:45:39 +00:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
b80b61b0a6 Bump react-native-quick-crypto from 0.7.4 to 0.7.5 (#4775)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-24 14:41:05 +12:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
d37e3fe6e3 Bump knip from 5.30.4 to 5.30.5 (#4773)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-23 14:13:22 -07:00
jnsdls 3b91dad963 Remove "push" script and task (#4762)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on modifying the `turbo.json` and `package.json` configuration files, specifically removing certain caching options and adjusting command scripts related to the build process.

### Detailed summary
- In `turbo.json`, removed the `push` configuration and its `cache` and `dependsOn` settings.
- In `package.json`, removed the `push` script that executed `turbo run push --filter=./packages/*`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 19:41:42 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
daf5fdafd5 Version Packages (#4761)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-23 12:40:27 -07:00
jnsdls 399ba2efd0 Improve storage upload error handling (#4763) 2024-09-23 18:30:36 +00:00
arcoraven 57a0e271b3 fix: Return 402 status if payment required (#4760)
<!-- start pr-codex -->

## PR-Codex overview
This PR addresses the handling of payment requirement errors in the `@thirdweb-dev/service-utils` package by changing the HTTP status code returned from `403` to `402`. This indicates that payment is required to proceed.

### Detailed summary
- Updated the status code returned in `usageLimit` functions from `403` to `402`.
- Modified the error message for `Storage Pinning` to reflect the change in status.
- Adjusted the error message for `Embedded Wallets` to align with the new status code.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 18:13:37 +00:00
ElasticBottle 2d34771e18 fix: guest auth should use random session Ids (#4759)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing guest account creation by ensuring the uniqueness of guest session IDs and improving storage handling in the `thirdweb` package.

### Detailed summary
- Updated guest account creation to use unique session IDs.
- Introduced `GUEST_SESSION_LOCAL_STORAGE_NAME` constant for guest session storage.
- Implemented methods in `ClientScopedStorage` for managing guest session IDs.
- Modified `guestAuthenticate` to handle guest session IDs properly.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 17:56:50 +00:00
jnsdls a2b4daafcf enfore more lint rules (#4754)
does what it says on the tin
2024-09-23 16:16:38 +00:00
Joaquim VergesandGitHub b85fe2a59e feat(playground): update in-app wallet auth options and components (#4757) 2024-09-23 20:57:57 +12:00
kien-ngo 5293fba07e [Dashboard] ERC20 Airdrop form (#4722)
- add a new airdrop-upload form for ERC20 that doesn't open a second Drawer (shadcn Sheet)
- removing bunch of react-icons & chakra stuff in the process

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the Token Airdrop feature in the dashboard UI, improving user experience and code organization.

### Detailed summary
- Refactored Token Airdrop UI using `Sheet` component
- Improved error handling and notifications
- Updated Airdrop form layout and functionality

> The following files were skipped due to too many changes: `apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 08:53:21 +00:00
Joaquim VergesandGitHub 294ec4dd0d refactor(playground): move in-app wallet layout and metadata to separate file (#4721) 2024-09-23 20:22:52 +12:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
5a4ef087ef Version Packages (#4742)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-23 19:17:14 +12:00
gregfromstl fc2ecdfd98 [React] Fix: hides guest accounts from linked profiles (#4687)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on hiding guest accounts from the linked profiles screen in React.

### Detailed summary
- Excludes guest profiles from being displayed on the linked profiles screen
- Updates the rendering logic to filter out guest profiles before displaying them

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 06:34:18 +00:00
joaquim-verges 33936b3a86 fix: handle BigInt serialization for ecosystem wallets (#4756)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to handle biging serialization for ecosystem wallets.

### Detailed summary
- Updated `signTypedData`, `signMessage`, and `signTransaction` functions to use `stringify` for serialization
- Improved handling of payload data in ecosystem wallets

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 05:29:44 +00:00
joaquim-verges 1133ccc239 fix: improve ABI resolution fallback (#4753)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing ABI resolution fallback in `resolve-abi.ts`.

### Detailed summary
- Removed unnecessary imports
- Updated ABI resolution logic with new imports
- Improved handling of root ABI merging
- Enhanced efficiency in joining ABIs

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 02:14:14 +00:00
kien-ngo 3eef910a24 [Dashboard] Remove HStack (#4749)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces changes to replace `HStack` with `div` using flex classes in various components for better styling consistency.

### Detailed summary
- Replaced `HStack` with `div` using flex classes in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 01:29:48 +00:00
kien-ngo 3d52dd4587 [Dashboard] Remove VStack (#4748)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to replace the `VStack` components with `div` elements styled using Tailwind CSS classes for layout consistency and improved accessibility.

### Detailed summary
- Replaced `VStack` with `div` in multiple components for layout consistency
- Used Tailwind CSS classes for styling and spacing
- Improved accessibility and readability of the codebase

> The following files were skipped due to too many changes: `apps/dashboard/src/components/settings/Account/AccountForm.tsx`, `apps/dashboard/src/components/settings/Account/Usage.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 01:29:46 +00:00
jnsdls 24ff6f2ab6 knip it in the... (#4751)
1. make `knip` a part of `packages/thirdweb`
2. clean up all the things
3. ???
4. profit

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing unused files, updating types, and deprecating constants.

### Detailed summary
- Removed unused files related to benchmarks, wallets, and UI components
- Updated type definitions in various files
- Deprecated and replaced constant `ADDRESS_ZERO` with `ZERO_ADDRESS`

> The following files were skipped due to too many changes: `packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx`, `packages/thirdweb/src/pay/utils/definitions.ts`, `packages/thirdweb/src/utils/hashing/sha256.ts`, `packages/thirdweb/src/wallets/eip5792/show-calls-status.ts`, `packages/thirdweb/src/extensions/modules/ClaimableERC20/mint.ts`, `packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx`, `apps/portal/package.json`, `packages/thirdweb/src/extensions/modules/ClaimableERC721/mint.ts`, `packages/thirdweb/src/utils/hashing/hashMessage.ts`, `packages/thirdweb/src/react/native/ui/components/text.tsx`, `packages/thirdweb/src/utils/promise/resolve-promised-value.ts`, `packages/thirdweb/src/auth/core/verify-jwt.ts`, `packages/thirdweb/src/utils/hashing/keccak256.ts`, `packages/thirdweb/src/utils/uint8-array.ts`, `packages/thirdweb/src/react/core/design-system/CustomThemeProvider.tsx`, `packages/thirdweb/src/react/native/ui/connect/SendScreen.tsx`, `packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx`, `packages/thirdweb/src/gas/estimate-l1-fee.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx`, `packages/thirdweb/src/extensions/modules/MintableERC721/mintWithSignature.ts`, `packages/thirdweb/src/react/native/ui/connect/ExternalWalletsList.tsx`, `packages/thirdweb/src/exports/extensions/erc1155.ts`, `packages/thirdweb/src/extensions/modules/ClaimableERC1155/mint.ts`, `packages/thirdweb/src/extensions/modules/MintableERC1155/mintWithSignature.ts`, `packages/thirdweb/src/utils/encoding/helpers/trim.ts`, `packages/thirdweb/src/wallets/utils/getTokenBalance.ts`, `apps/dashboard/knip.json`, `packages/thirdweb/src/react/native/ui/connect/TokenListScreen.tsx`, `packages/thirdweb/src/extensions/vote/write/executeProposal.ts`, `packages/thirdweb/src/react/native/ui/components/spinner.tsx`, `packages/thirdweb/src/react/web/ui/MediaRenderer/ModelViewer.tsx`, `packages/thirdweb/src/transaction/extract-error.ts`, `packages/thirdweb/src/react/native/ui/components/button.tsx`, `packages/thirdweb/src/extensions/erc1155/write/updateTokenURI.ts`, `packages/thirdweb/src/wallets/interfaces/wallet.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/useSwapSupportedChains.ts`, `packages/thirdweb/src/utils/storage/walletStorage.ts`, `packages/thirdweb/src/wallets/in-app/native/native-connector.ts`, `packages/thirdweb/src/extensions/erc20/write/sigMint.ts`, `packages/thirdweb/src/extensions/erc721/write/updateTokenURI.ts`, `packages/thirdweb/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx`, `packages/thirdweb/src/wallets/eip5792/wait-for-bundle.ts`, `packages/thirdweb/src/utils/jwt/jwt-header.ts`, `packages/thirdweb/src/extensions/modules/MintableERC20/mintWithSignature.ts`, `packages/thirdweb/src/exports/modules.ts`, `packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx`, `packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts`, `packages/thirdweb/src/auth/core/generate-jwt.ts`, `packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts`, `packages/thirdweb/src/exports/extensions/erc1271.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts`, `packages/thirdweb/src/contract/deployment/publisher.ts`, `packages/thirdweb/src/extensions/erc721/drops/write/updateMetadata.ts`, `packages/thirdweb/src/extensions/erc1155/drops/write/updateMetadata.ts`, `packages/thirdweb/src/extensions/prebuilts/deploy-marketplace.ts`, `packages/thirdweb/src/wallets/in-app/native/auth/index.ts`, `packages/thirdweb/src/wallets/in-app/native/helpers/auth/middleware.ts`, `packages/thirdweb/src/utils/platform.ts`, `.github/CODEOWNERS`, `packages/thirdweb/src/wallets/in-app/web/lib/auth/index.ts`, `packages/thirdweb/src/react/core/utils/structuralSharing.ts`, `packages/thirdweb/src/react/core/hooks/transaction/useSendAndConfirmTransaction.ts`, `packages/thirdweb/src/extensions/prebuilts/get-required-transactions.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/FiatDetailsScreen.tsx`, `packages/thirdweb/src/extensions/ens/resolve-l2-name.ts`, `packages/thirdweb/src/utils/any-evm/deploy-metadata.ts`, `packages/thirdweb/src/cli/commands/generate/utils.ts`, `packages/thirdweb/src/extensions/farcaster/eip712Signatures/keyRequestSignature.ts`, `packages/thirdweb/src/extensions/airdrop/write/airdropERC20WithSignature.ts`, `packages/thirdweb/src/extensions/airdrop/write/airdropERC721WithSignature.ts`, `packages/thirdweb/src/transaction/actions/zksync/send-eip712-transaction.ts`, `packages/thirdweb/src/wallets/in-app/web/utils/iFrameCommunication/InAppWalletIframeCommunicator.ts`, `packages/thirdweb/src/utils/any-evm/zksync/constants.ts`, `packages/thirdweb/src/extensions/marketplace/direct-listings/utils.ts`, `packages/thirdweb/src/transaction/actions/gasless/send-gasless-transaction.ts`, `packages/thirdweb/src/extensions/prebuilts/deploy-vote.ts`, `packages/thirdweb/src/react/web/ui/components/Drawer.tsx`, `packages/thirdweb/src/extensions/airdrop/write/airdropERC1155WithSignature.ts`, `packages/thirdweb/src/react/core/hooks/others/useWalletBalance.ts`, `packages/thirdweb/src/extensions/permissions/utils.ts`, `packages/thirdweb/src/wallets/in-app/native/helpers/auth/logout.ts`, `packages/thirdweb/src/wallets/smart/lib/utils.ts`, `packages/thirdweb/src/react/web/ui/components/buttons.tsx`, `packages/thirdweb/src/react/web/ui/prebuilt/thirdweb/ClaimButton/index.tsx`, `packages/thirdweb/src/wallets/wallet-connect/receiver/index.ts`, `packages/thirdweb/src/transaction/actions/gasless/providers/engine.ts`, `packages/thirdweb/src/transaction/actions/gasless/providers/openzeppelin.ts`, `packages/thirdweb/src/wallets/in-app/web/types.ts`, `packages/thirdweb/src/extensions/airdrop/write/claimERC20.ts`, `packages/thirdweb/test/globalSetup.ts`, `packages/thirdweb/src/extensions/erc721/read/getAllOwners.ts`, `packages/thirdweb/src/wallets/smart/lib/userop.ts`, `packages/thirdweb/src/wallets/in-app/native/helpers/wallet/retrieval.ts`, `packages/thirdweb/src/wallets/in-app/web/lib/iframe-wallet.ts`, `packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx`, `packages/thirdweb/src/react/native/ui/connect/ConnectedModal.tsx`, `packages/thirdweb/src/extensions/erc4337/account/common.ts`, `packages/thirdweb/test/vitest.config.ts`, `packages/thirdweb/src/exports/extensions/farcaster.ts`, `packages/thirdweb/src/exports/chains.ts`, `packages/thirdweb/src/extensions/erc4337/account/permissions.test.ts`, `packages/thirdweb/src/wallets/in-app/core/constants/settings.ts`, `packages/thirdweb/scripts/typedoc.mjs`, `packages/thirdweb/src/extensions/airdrop/write/merkleInfoERC20.ts`, `packages/thirdweb/src/utils/extensions/drops/hash-entry.ts`, `packages/thirdweb/src/extensions/farcaster/eip712Signatures/registerSignature.ts`, `packages/thirdweb/src/react/native/ui/icons/svgs.ts`, `packages/thirdweb/src/transaction/actions/gasless/providers/biconomy.ts`, `packages/thirdweb/src/extensions/farcaster/eip712Signatures/addSignature.ts`, `packages/thirdweb/src/react/web/ui/AutoConnect/AutoConnect.tsx`, `packages/thirdweb/src/react/native/ui/AutoConnect/AutoConnect.tsx`, `packages/service-utils/package.json`, `packages/thirdweb/src/stories/utils.tsx`, `packages/thirdweb/src/react/core/utils/defaultTokens.ts`, `package.json`, `packages/thirdweb/knip.json`, `packages/thirdweb/src/pay/buyWithCrypto/getStatus.ts`, `packages/thirdweb/src/exports/extensions/marketplace.ts`, `packages/thirdweb/src/utils/semver.ts`, `packages/thirdweb/src/extensions/uniswap/read/getUniswapV3Pools.ts`, `apps/dashboard/package.json`, `packages/thirdweb/src/utils/royalty-engine.ts`, `packages/react-native-adapter/package.json`, `packages/thirdweb/src/wallets/in-app/core/authentication/types.ts`, `packages/thirdweb/src/contract/deployment/deploy-deterministic.ts`, `packages/thirdweb/src/contract/deployment/utils/infra.ts`, `packages/thirdweb/src/wallets/injected/index.ts`, `packages/thirdweb/src/wallets/smart/lib/packUserOp.ts`, `packages/thirdweb/src/wallets/in-app/native/helpers/storage/local.ts`, `packages/thirdweb/src/react/web/ui/components/ChainIcon.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.tsx`, `packages/thirdweb/src/wallets/in-app/native/helpers/constants.ts`, `packages/thirdweb/src/wallets/in-app/native/helpers/api/fetchers.ts`, `packages/thirdweb/package.json`, `packages/thirdweb/src/react/core/utils/walletIcon.ts`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-23 00:00:12 +00:00
Joaquim VergesandGitHub e9ae98084a feat(ReactNative): respect icon theme color in wallet UI (#4752) 2024-09-23 11:56:47 +12:00
MananTank d936d4e5b9 Remove permissions form field in ecosystem partners page + UI adjusments (#4747)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR removes unused code related to partner permissions and updates UI components in the dashboard ecosystem section.

### Detailed summary
- Removed unused `PartnerPermission` type and related code
- Updated UI components in the dashboard ecosystem section for better user experience

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/add-partner-form.client.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 22:51:27 +00:00
MananTank bc7288370c Migrate Network Config Modal from chakra to shadcn/tailwind (#4745)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR removes unused components, updates UI elements, and refactors form fields in the dashboard application.

### Detailed summary
- Deleted `TooltipBox.tsx` and `ConfirmationPopover.tsx`
- Updated UI elements in `IconUpload.tsx` and `ConfigureNetworkModal.tsx`
- Refactored form fields in `ChainIdInput.tsx`, `RpcInput.tsx`, and `NetworkIDInput.tsx`

> The following files were skipped due to too many changes: `apps/dashboard/src/@/components/ui/radio-group.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 21:24:47 +00:00
MananTank 0a4e44575d Remove all chain override contexts and move to global store (#4743)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor chain-related functionality and imports, update TypeScript types, and improve store management.

### Detailed summary
- Refactored chain-related functionality and imports
- Updated TypeScript types for chain mapping
- Improved store management for chains
- Updated API calls for chain data
- Removed unused hooks and contexts

> The following files were skipped due to too many changes: `apps/dashboard/src/components/configure-networks/ConfigureNetworkModal.tsx`, `apps/dashboard/src/contract-ui/tabs/account-permissions/components/account-signer.tsx`, `apps/dashboard/src/contract-ui/tabs/split/page.tsx`, `apps/dashboard/src/stores/SyncStoreToStorage.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/NetworkDropdown.tsx`, `apps/dashboard/src/components/configure-networks/Form/NetworkIdInput.tsx`, `apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx`, `apps/dashboard/src/components/buttons/MismatchButton.tsx`, `apps/dashboard/src/components/selects/NetworkSelectDropdown.tsx`, `apps/dashboard/src/components/selects/CustomChainRenderer.tsx`, `apps/dashboard/src/components/app-layouts/app.tsx`, `apps/dashboard/src/components/contract-components/published-contract/addresses-modal.tsx`, `apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx`, `apps/dashboard/src/lib/v5-adapter.ts`, `apps/dashboard/src/components/engine/overview/transactions-table.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts`, `apps/dashboard/src/stores/chainStores.tsx`, `apps/dashboard/src/components/engine/relayer/relayers-table.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/hooks/chains/allChains.ts`, `apps/dashboard/src/pages/[chain_id]/[...paths].tsx`, `apps/dashboard/src/components/selects/NetworkSelectorButton.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 21:10:49 +00:00
arcoraven f2307fde02 chore: show min version number (#4744)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the alert management feature message for cloud-hosted Engines to specify version requirement.

### Detailed summary
- Updated alert management feature message for cloud-hosted Engines to require v2.0.10 or later.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 16:30:43 +00:00
kien-ngo a4dac95630 [SDK] Fix jsdoc for getCLaimParams (#4738)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to fix the JSDoc for the `getClaimParams` function in the `thirdweb` package.

### Detailed summary
- Updated JSDoc for `getClaimParams` in `thirdweb/utils` directory.
- Changed import path from `thirdweb/extensions/erc1155` to `thirdweb/utils`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 11:08:35 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
f424d0ab2d Version Packages (#4741)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-21 22:46:48 +12:00
Joaquim VergesandGitHub 915442e1c4 feat: enable wallet linking and guest mode for ecosystem wallets (#4740) 2024-09-21 22:31:25 +12:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
89728c6578 Version Packages (#4739)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-21 19:43:51 +12:00
Joaquim VergesandGitHub 2707db136e feat: allow linking identities when using in-app + smart wallets (#4737) 2024-09-21 19:34:23 +12:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
ca23a95bfd Version Packages (#4735)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-21 14:27:50 +12:00
Joaquim VergesandGitHub 997bfa84cc Update pregenerate docs (#4736)
Signed-off-by: Joaquim Verges <[email protected]>
2024-09-21 13:14:48 +12:00
gregfromstl 824b1bdb69 [SDK] Feature: Ecosystem account linking (#4733)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enables account linking for ecosystem wallets.

### Detailed summary
- Added support for ecosystem wallets in account linking functionality
- Updated conditions for multi-auth support in various components
- Imported and utilized `isEcosystemWallet` function in multiple files
- Modified functions to handle both in-app and ecosystem wallets in account linking operations

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-21 01:01:07 +00:00
Joaquim VergesandGitHub 6e3669d384 chore(docs): update embedded wallet API endpoint (#4734) 2024-09-21 11:54:20 +12:00
gregfromstl 09eb0e6a3f Fix/pregen docs (#4732)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the structure of the `wallet` object in the `page.mdx` file to include `address` and `createdAt` properties.

### Detailed summary
- Updated the `wallet` object in `page.mdx` to include `address` and `createdAt` properties.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 23:37:40 +00:00
gregfromstl 786ef9d777 Docs: Get User Page (#4730)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add guides for retrieving user details from the server using In-App Wallets and pregenerating user wallets.

### Detailed summary
- Added guide for retrieving In-App Wallet user details on the server
- Added guide for pregenerating user wallets
- Updated sidebar links for better navigation

> The following files were skipped due to too many changes: `apps/portal/src/app/connect/sidebar.tsx`, `apps/portal/redirects.mjs`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 23:11:42 +00:00
Joaquim VergesandGitHub f8e69989a3 feat(playground): update ecosystem for prod (#4731) 2024-09-21 10:52:32 +12:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
07d191bd8b Version Packages (#4710)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-21 10:12:04 +12:00
arcoraven f8d3578bbc Add Engine Alerts to dashboard (#4695)
<!-- start pr-codex -->

## PR-Codex overview
This PR adds alert management features to the dashboard, including alert rules, notifications, and recent alerts.

### Detailed summary
- Added alert management pages and components
- Updated cache keys for alert-related data
- Improved styling for autofilled inputs
- Created modals for deleting alerts
- Added stubs for alert-related entities
- Implemented UI components for recent alerts section

> The following files were skipped due to too many changes: `apps/dashboard/src/components/engine/alerts/RecentEngineAlerts.tsx`, `apps/dashboard/src/components/engine/alerts/ManageEngineAlerts.stories.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts`, `apps/dashboard/src/components/engine/alerts/EngineAlertDialogForm.tsx`, `apps/dashboard/src/components/engine/alerts/ManageEngineAlerts.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 22:02:01 +00:00
MananTank 60a77e0b31 Fix '0' rendered in Contract Overview page (#4729)
Because `0 && <div />` returns `0` and react renders `0`
2024-09-20 20:41:13 +00:00
MananTank eb79810afa Replace all isLoading to isPending in dashboard (#4728)
### Why?

we recently moved from react-query v4 to v5.

In v5, `isLoading` is now called `isPending`

but we haven't changed `isLoading` to `isPending` and that has introduced some bugs related to loading spinners/skeletons where they are not shown if the query is not currently being fetched (not enabled yet)

`isLoading` is no longer `true` from the beggining as it is assumed to be throughout the codebase in v5 - it is only true when a fetch is in-flight

To get a the "loading" state in v5 - we should be using the `isPending` state. `isPending` is true  -> "if there's no cached data and no query attempt was finished yet" according to the docs:

https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#status-loading-has-been-changed-to-status-pending-and-isloading-has-been-changed-to-ispending-and-isinitialloading-has-now-been-renamed-to-isloading

in v5 , `isLoading` is  `isFetching && isPending`
2024-09-20 20:41:11 +00:00
MananTank 200e8da84b Fix login page centered layout + some UI adjustments (#4726)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the styling of the login page in the dashboard app for better UI/UX.

### Detailed summary
- Updated main layout and styling of the login page
- Adjusted heading size and alignment
- Applied shadow to the custom connect component
- Positioned background image dynamically based on screen size

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 17:05:54 +00:00
MananTank 2ece661620 Remove Configure Network Modal contexts + Fix in App Router (#4725)
FIXES: DASH-259
2024-09-20 16:55:21 +00:00
MananTank fb92f873cd Fix body height issue in dashboard (#4724)
Fixes body not expanding to content size:

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/de2d88d4-db8c-4325-9135-8fc3d400a75b.png)
2024-09-20 14:15:20 +00:00
arcoraven 63ada206a4 Add Engine troubleshooting page (#4723)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to add a troubleshooting page with detailed explanations and solutions for common transaction issues in the Engine application.

### Detailed summary
- Added troubleshooting page for transaction issues
- Imported `OutOfGasImage` for visual aid
- Provided detailed explanations and resolutions for common transaction errors

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 06:56:18 +00:00
joaquim-verges 7d547a4e33 fix: show user info for ecosystem wallets (#4715)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the display of user information for ecosystem wallets in the Thirdweb application.

### Detailed summary
- Updated function name from `getEnclaveUserStatus` to `getUserStatus` in multiple files.
- Modified parameters in functions to include `ecosystem` for ecosystem wallets.
- Updated caching mechanism for InAppWalletConnector.
- Added logic to handle ecosystem wallets in `InAppWalletUserInfo` component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 03:35:18 +00:00
gregandGitHub c1008a5314 [SDK] Feature: Enclave migration (#4684) 2024-09-20 15:11:36 +12:00
gregfromstl 11a833e1dc [React] Fix: Improve social button icon arrangement (#4718)
![Screenshot 2024-09-19 at 5 13 13 PM](https://github.com/user-attachments/assets/ae06781e-6b44-4231-9385-0a4ac27be563)
![Screenshot 2024-09-19 at 5 13 07 PM](https://github.com/user-attachments/assets/23b3f073-b6ab-4aae-8be8-a5820763cd65)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR improves the layout of social icons in the Connect UI by organizing them into columns for better user experience.

### Detailed summary
- Added logic to arrange social icons into columns based on the number of login options
- Updated the layout of social buttons to display them in columns instead of a row

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 01:29:03 +00:00
joaquim-verges c67d8a9dd2 feat(playground): add ecosystem and sponsored transaction pages for in-app wallet (#4719)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance the in-app wallet feature by adding expanded navigation links, ecosystem connection, and sponsored transaction previews.

### Detailed summary
- Added expanded navigation links in the in-app wallet section
- Implemented ecosystem connection functionality
- Included sponsored transaction previews for in-app wallets

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 01:10:26 +00:00
gregfromstl dab7b4ebd8 style(dashboard): add padding to partners table (#4713)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to rename `EcosystemRow` component to `PartnerRow` and update styling in the partners table.

### Detailed summary
- Renamed `EcosystemRow` component to `PartnerRow`.
- Updated styling in the partners table for better alignment.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 00:46:44 +00:00
MananTank a491d8bd7c Show Deterministic Deploy warning banner if constructor params exist (#4717)
FIXES DASH-257

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance the Custom Contract Form in the dashboard by adding a warning for deterministic deployment.

### Detailed summary
- Added `CircleAlertIcon` and warning message for deterministic deployment
- Updated the layout of the deterministic deploy checkbox and warning display

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 00:26:34 +00:00
joaquim-verges a7b3d0e72c feat: remove prompting for enclave ecosystem wallets (#4711)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR removes the usage of `getEcosystemPartnerPermissions` function and related logic in `IFrameWallet` class.

### Detailed summary
- Removed `getEcosystemPartnerPermissions` function usage
- Removed logic related to partner permissions and showing the iframe based on permissions

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-20 00:04:05 +00:00
gregfromstl b0337849a5 [React] Feature: Shows the social provider name in details modal (#4709)
![Screenshot 2024-09-19 at 2 22 09 PM](https://github.com/user-attachments/assets/9c8a14e9-3328-4e6f-8d56-0c420bdeea17)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on displaying the social login provider in the details modal for wallet connections.

### Detailed summary
- Added `SocialAuthOption` type and `socialAuthOptions` import
- Updated logic to display social login provider in details modal based on active wallet and last auth provider

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 23:45:23 +00:00
MananTank 3229e1f03c Fix Explorer page component re-renders (#4716)
FIXES: DASH-207
2024-09-19 23:34:04 +00:00
gregfromstl f228e03ecc [Playground] Fix: Correct IAW checkbox labels (#4708)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `InAppWalletFormGroup` component to dynamically generate unique IDs for `htmlFor` and `id` attributes based on the `method`.

### Detailed summary
- Dynamically generate unique IDs for `htmlFor` and `id` attributes based on the `method` value in `InAppWalletFormGroup.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 22:05:35 +00:00
gregfromstl 0a7448cb2b [SDK] Feature: Coinbase login (#4692)
DO NOT MERGE, needs IAW PR to merge first

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces Coinbase as a new authentication option across various wallet-related components.

### Detailed summary
- Added `coinbase` as an authentication option in wallets
- Updated icons and authentication types to include Coinbase
- Updated in-app wallet authentication types to include Coinbase
- Updated login and connection options to support Coinbase

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 21:29:08 +00:00
jnsdls f51dd8f1ac ban createContext usage from dashboard (#4707)
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/VXaCVgbx1DROqoQd8UuD/786700f4-1588-4238-a7eb-884c2df54584.png)
2024-09-19 21:02:18 +00:00
MananTank 448dc21cba Add multi-select component that can render thousands of options efficiently (#4698)
## Problem solved

Added this to use it for multi network selector component. The current multi network selector component is abysmally slow.

This component is not added to website yet on this PR - coming up in next stack

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/911a10ef-405b-4dab-8da8-ab008a1fca73.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on adding a `useShowMore` hook for lazy loading items and a `MultiSelect` component with search functionality and item selection.

### Detailed summary
- Added `useShowMore` hook for lazy loading items in `useShowMore.ts`
- Implemented `MultiSelect` component with search, selection, and display options in `multi-select.tsx`
- Created stories for `MultiSelect` component variations in `multi-select.stories.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 19:53:54 +00:00
jnsdls 2a51d3c5ae improve deploy deterministic test accuracy (#4706) 2024-09-19 19:25:01 +00:00
gregfromstl 80a2eba0f4 [SDK] Feature: Enclave wallets (#4651)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the enclave wallet functionality by adding new types and methods for wallet setup, authentication, and actions.

### Detailed summary
- Added `IWebWallet` interface with new methods
- Updated wallet setup and authentication types
- Implemented actions for enclave wallet generation, signing messages, transactions, and typed data
- Modified `IFrameWallet` class for wallet setup
- Added new authentication methods for enclave wallets

> The following files were skipped due to too many changes: `packages/thirdweb/src/wallets/in-app/web/lib/auth/iframe-auth.ts`, `packages/thirdweb/src/wallets/in-app/web/lib/enclave-wallet.ts`, `packages/thirdweb/src/wallets/in-app/web/lib/web-connector.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 18:46:23 +00:00
YashandGitHub 5b48590034 add faq for account abstraction - trusted forwarders (#4705) 2024-09-19 10:45:42 -07:00
Jonas DanielsandGitHub 8fa6227fe4 Refactor client authentication logic (#4703) 2024-09-19 09:45:11 -07:00
arcoraven fbffa718b4 Fix: Add keypair auth ID to table (#4700)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the `.env.example` file with a new API server secret and adds a new column to display Key ID in the `keypairs-table.tsx` component.

### Detailed summary
- Updated API_SERVER_SECRET in `.env.example`
- Added a new column to display Key ID in `keypairs-table.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 16:27:18 +00:00
kien-ngo 9e11c15c2d [Dashboard] Clean up some clipboard code (#4702)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a `useClipboard` custom hook to manage clipboard functionality in multiple components, replacing direct clipboard interactions with a reusable hook.

### Detailed summary
- Introduced `useClipboard` custom hook for clipboard functionality
- Replaced direct clipboard interactions with `useClipboard` in `CopyButton.tsx`, `CopyTextButton.tsx`, and `WalletAddress.tsx`
- Removed `useState` for managing copied state in favor of `useClipboard` in all affected components

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 16:18:43 +00:00
kien-ngo 5c23e5237f [Dashboard] Remove chakra-ui Flex (2) (#4699)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates various components to replace `<Flex>` with `<div>` for styling consistency.

### Detailed summary
- Replaced `<Flex>` with `<div>` in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/mission/MajorSection.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 14:50:39 +00:00
kien-ngo a16293a10c [Dashboard] Remove chakra <Flex/ > (1) (#4697)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates various components to replace `<Flex>` with `<div>` for styling consistency.

### Detailed summary
- Replaces `<Flex>` with `<div>` in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/credits/SettingsCreditsPage.tsx`, `apps/dashboard/src/pages/dashboard/settings/devices.tsx`, `apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx`, `apps/dashboard/src/components/dashboard/Changelog.tsx`, `apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 14:50:34 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
7ff46a50d2 Version Packages (#4694)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-19 22:08:29 +12:00
Joaquim VergesandGitHub 0c97d7965e Handle default chain when connecting via redirect URL (#4696) 2024-09-19 22:00:25 +12:00
jnsdls 4a87109289 Fix getClaimConditions for ERC20, ERC721, and ERC1155 (#4693)
FIXES: DASH-249
2024-09-19 06:35:12 +00:00
jnsdls dddf95daca v2 auth endpoints (#4689)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to add a new API server secret variable and update authentication actions to use it securely.

### Detailed summary
- Added `API_SERVER_SECRET` variable in `.env.example`
- Updated authentication actions to use `API_SERVER_SECRET` securely
- Replaced `json.token` with `jwt` for better security

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 05:55:18 +00:00
jnsdls 06cd6a62d9 fix split deployments (#4690)
FIXES: DASH-253
2024-09-19 05:29:13 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
51510a1358 Version Packages (#4688)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-19 16:39:09 +12:00
gregfromstl 89d517d375 [Dashboard] Feature: Adds SDK card to AA page (#4683)
![Screenshot 2024-09-18 at 4 28 05 PM](https://github.com/user-attachments/assets/3d634e42-0cc5-40ea-9443-d96408dbc803)

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the Connect SDK card component across multiple files for improved consistency and customization.

### Detailed summary
- Updated the `ConnectSDKCard` component to accept `title` and `description` props for customization.
- Modified the usage of `ConnectSDKCard` in various files to include custom titles and descriptions.
- Adjusted tab names and functionality in the `SmartWallets` component for clarity and consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 03:59:16 +00:00
jnsdls 25f0975a3f Remove portal.usecontext.io from CSP script-src (#4681) 2024-09-19 03:46:14 +00:00
gregfromstl 1b8946408c [SDK] Fix: Use legacy transactions for Polygon zkEVM Cardona Testnet (#4686)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enforces legacy transactions on the Polygon zkEVM Cardona Testnet for `thirdweb`.

### Detailed summary
- Updated gas fee data to include legacy transactions for Polygon zkEVM Cardona Testnet.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 03:35:08 +00:00
jnsdls 37927d6358 massively simplify overriding thirdweb domains in dev / preview (#4682) 2024-09-19 03:21:15 +00:00
gregfromstl 00f2d6e938 [Playground] Fix: do not disconnect non in app wallets (#4685)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR removes unused code related to wallet management in the `SponsoredInAppTxPreview` component.

### Detailed summary
- Removed unused `useActiveWallet` and `useDisconnect` imports
- Removed `wallet` and `disconnect` state and effect
- Updated usage of `useActiveAccount` for `smartAccount`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-19 02:59:41 +00:00
gregfromstl 0dfba3094c [Playground] Chore: Allow overriding default domains with env vars (#4679)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to set Thirdweb domains dynamically based on environment variables.

### Detailed summary
- Added import for `setThirdwebDomains` from "thirdweb/utils"
- Set Thirdweb domains using environment variables for inAppWallet, rpc, social, storage, bundler, and pay
- Configured Thirdweb client with `THIRDWEB_SECRET_KEY` from environment variables

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 23:59:40 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
b76d298245 Version Packages (#4666)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-19 11:01:37 +12:00
kien-ngo c13058a711 [Dashboard] ERC20 Claim form (#4669)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR refactors the token claim functionality by replacing a Drawer with a Sheet component and updating UI elements for a better user experience.

### Detailed summary
- Replaced `Drawer` with `Sheet` component for better UI
- Updated UI elements like buttons, form controls, and labels
- Added transaction handling logic for claiming tokens

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:32:21 +00:00
jnsdls a78e50413e cleanup posthog (#4678)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates PostHog dependencies across multiple files, replacing `posthog-js-opensource` with `posthog-js` for consistency and version upgrades.

### Detailed summary
- Replaced `posthog-js-opensource` imports with `posthog-js` in multiple files
- Updated `posthog-js` version to "1.67.1" in various package.json files

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:19:14 +00:00
MananTank 3c72aeb8f3 Team layout UI adjustments (#4680)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds upgrade team links to various components and improves search functionality by making it case-insensitive.

### Detailed summary
- Added `upgradeTeamLink` prop to `TeamHeaderUI`, `TeamAndProjectSelectorPopoverButton`, `TeamSelectorMobileMenuButton`, and `TeamSelectionUI`
- Modified search functionality to be case-insensitive for projects and teams
- Updated `TeamSelectorMobileMenuButton` prop name to `TeamSelectorMobileMenuButtonProps`
- Adjusted `TeamSelectionUI` to use the `upgradeTeamLink` prop for displaying an upgrade button

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:12 +00:00
MananTank 90662e8e49 Move pay webhooks tab to page with route in project/connect (#4677)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor and improve the Pay feature in the dashboard by renaming components and updating page structures.

### Detailed summary
- Renamed `WebhooksPage` component to `PayWebhooksPage`.
- Updated page structures and components related to Pay feature.
- Refactored and improved code readability in the Pay feature section.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:12 +00:00
MananTank 80893aa085 Remove Pay settings tab in project/connect (#4676)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the `PayPageUI` component to use `clientId` instead of `apiKey` for simplicity and clarity.

### Detailed summary
- Updated `PayPageUI` component to accept `clientId` as a string instead of `apiKey`
- Removed unnecessary fields from `apiKey` object
- Updated references to `props.apiKey.key` to `props.clientId` in `PayPageUI` component

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:11 +00:00
MananTank a587ebf125 Remove AA settings from project/connect (#4675)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to replace the `SmartWallets` component with `AccountFactories` in the `AccountAbstractionPage.tsx`.

### Detailed summary
- Replaced `SmartWallets` component with `AccountFactories`.
- Updated component import paths.
- Added a comment for future improvement.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:11 +00:00
MananTank 009edeb5f5 Remove In-app wallet settings from project/connect (#4674)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to rename the `Users` component to `InAppWalletUsersPageContent` for clarity and consistency in the embedded wallets feature.

### Detailed summary
- Renamed `Users` component to `InAppWalletUsersPageContent` for clarity
- Updated references to the renamed component in multiple files

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:10 +00:00
MananTank f5a5078ff5 Add Account Abstraction settings in product settings layout (chakra) (#4668)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
**Focus:** Refactoring SponsorshipPolicies to AccountAbstractionSettingsPage for better clarity and consistency.

### Detailed summary
- Renamed `SponsorshipPolicies` to `AccountAbstractionSettingsPage` for clarity
- Updated imports and references accordingly
- Updated form schema and component name
- Improved variable names and code readability

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:10 +00:00
MananTank c08b3b56b2 Add in-app wallet settings on project settings layout (#4667)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the `Configure` component to `InAppWalletSettingsPage` and update its usage throughout the codebase.

### Detailed summary
- Renamed `Configure` component to `InAppWalletSettingsPage`
- Updated references to `Configure` component to `InAppWalletSettingsPage`
- Updated component props and types for consistency
- Added a new page file for in-app wallet settings with API key retrieval logic

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 22:02:09 +00:00
MananTank 4bda0cedc4 Remove posthog cloud (#4671)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update dependencies, remove `posthog-js`, adjust script sources, and optimize the Next.js configuration.

### Detailed summary
- Updated `posthog-js` to `posthog-js-opensource`
- Removed `posthog-js` initialization in `_app.tsx`
- Adjusted script sources in `next.config.js`
- Optimized Next.js configuration for better performance

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 20:03:39 +00:00
jnsdls 32dbdab4e9 add contract deployment analytics back (#4672)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to add event tracking using `useTrack` hook in the custom contract deployment form.

### Detailed summary
- Added `useTrack` hook for event tracking
- Implemented tracking for contract deployment events
- Added tracking for adding contract to dashboard
- Implemented error tracking for deployment failures

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 19:08:50 +00:00
jnsdls 406de39ecd handle JWT directly in thirdwebClient (#4659)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates dependencies, simplifies ERC721 and ERC1155 updateMetadata extension params, and allows using valid JWTs for authorization.

### Detailed summary
- Updated `tailwindcss` to versions `3.4.12`
- Added `JWTString` type for valid JWTs
- Simplified updateMetadata extension params for ERC721 and ERC1155
- Updated dependencies in various packages
- Removed unnecessary imports and components
- Refactored code to use `getThirdwebClient()` consistently

> The following files were skipped due to too many changes: `apps/dashboard/src/contract-ui/tabs/account/components/account-balance.tsx`, `packages/service-utils/package.json`, `apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/components/server/chain-icon.tsx`, `apps/dashboard/src/components/wallets/PosthogIdentifier.tsx`, `apps/dashboard/src/@/constants/thirdweb.server.ts`, `apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx`, `packages/thirdweb/package.json`, `apps/dashboard/src/pages/api/frame/base/get-tx-frame.ts`, `apps/dashboard/src/lib/rpc.ts`, `apps/dashboard/src/contract-ui/tabs/manage/components/getModuleInstalledParams.ts`, `apps/dashboard/src/components/contract-components/publisher/masked-avatar.tsx`, `apps/dashboard/src/components/smart-wallets/AccountFactories/account-cell.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/hooks/use-create-ecosystem.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx`, `apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx`, `apps/dashboard/src/tw-components/nft-media.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/ecosystem-header.client.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx`, `packages/thirdweb/src/utils/fetch.test.ts`, `apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx`, `apps/dashboard/src/app/(dashboard)/contracts/deploy/[compiler_uri]/page.tsx`, `apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx`, `apps/dashboard/src/contract-ui/tabs/account/components/deposit-native.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/utils/publishedContractOGImageTemplate.tsx`, `apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/utils/getPublishedContractsWithPublisherMapping.ts`, `apps/dashboard/src/app/login/page.tsx`, `apps/dashboard/src/contract-ui/hooks/useContractSources.ts`, `apps/dashboard/src/app/(dashboard)/tools/transaction-simulator/components/TransactionSimulator.tsx`, `apps/dashboard/src/components/selects/NetworkSelectorButton.tsx`, `apps/dashboard/src/contract-ui/tabs/split/page.tsx`, `apps/dashboard/src/components/ipfs-upload/dropzone.tsx`, `apps/dashboard/src/utils/tx-frame.ts`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx`, `apps/dashboard/src/components/explore/contract-card/index.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx`, `packages/thirdweb/src/client/client.test.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/tx/[txHash]/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx`, `apps/dashboard/src/components/contract-components/tables/cells.tsx`, `packages/thirdweb/src/extensions/erc721/drops/write/updateMetadata.ts`, `packages/thirdweb/src/utils/fetch.ts`, `apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx`, `apps/dashboard/src/@/constants/thirdweb.client.ts`, `apps/dashboard/src/app/(dashboard)/contracts/publish/[publish_uri]/page.tsx`, `apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx`, `packages/thirdweb/src/client/client.ts`, `packages/thirdweb/src/extensions/erc1155/drops/write/updateMetadata.ts`, `apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-button.tsx`, `apps/dashboard/src/lib/ens.ts`, `apps/dashboard/src/@/components/blocks/wallet-address.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts`, `apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx`, `apps/dashboard/src/components/buttons/MismatchButton.tsx`, `apps/dashboard/src/contract-ui/tabs/manage/components/ModuleForm.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx`, `apps/dashboard/src/contract-ui/tabs/proposals/page.tsx`, `apps/dashboard/src/contract-ui/tabs/proposals/components/proposal-form.tsx`, `apps/dashboard/src/components/contract-components/fetch-contracts-with-versions.ts`, `apps/dashboard/src/contract-ui/tabs/proposals/components/delegate-button.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/contract-ui/tabs/manage/page.tsx`, `apps/dashboard/src/pages/[chain_id]/[...paths].tsx`, `apps/dashboard/src/contract-ui/tabs/sources/page.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useSplit.ts`, `apps/dashboard/src/components/contract-components/published-contract/index.tsx`, `apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useVote.ts`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 18:36:17 +00:00
MananTank 25e1135dc7 Move pay tabs to pages with routes, Add pay settings page in project layout (#4658)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on restructuring the Pay section in the dashboard, improving API key handling, and fixing endpoint issues.

### Detailed summary
- Deleted `PayAnalytics.tsx` and `pay-ui.client.tsx`
- Added components for `NoApiKeys`, `PayConfig`, `APIKeySelector`
- Updated text in `ProjectGeneralSettingsPage.tsx`
- Modified page layouts and settings
- Improved API key retrieval and handling

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/page.tsx`, `apps/dashboard/src/components/pay/PayConfig.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 18:22:45 +00:00
kien-ngo 7a07d05398 [Dashboard] Migrate TokenERC20 Drawer to Sheet (#4662)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates token transfer, mint, and burn functionality in the dashboard.

### Detailed summary
- Updated UI components for token transfer, mint, and burn
- Replaced `useTxNotifications` with custom error handling and toast notifications
- Improved transaction handling and event tracking
- Enhanced form validations and error messages

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 18:06:29 +00:00
kien-ngo 53af73c9ae [Dashboard] ERC20 burn tab (#4661)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update token transfer and burn components in the dashboard.

### Detailed summary
- Updated UI components for token transfer and burn
- Replaced `react-icons` with `lucide-react` and `sonner`
- Improved error handling and notifications for token transactions

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 18:06:28 +00:00
jnsdls bb51afa723 simplify build tooling and remove redundant dependencies (#4664)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates dependencies, TypeScript configurations, and package versions across multiple packages. It also refactors code in the `dashboard` app for improved functionality and type safety.

### Detailed summary
- Updated `next` version to `14.2.12` in `wallet-ui`, `playground-web`, and `portal`.
- Updated `@types/react` to `^18.3.7` in `wallet-ui`, `playground-web`, and `portal`.
- Updated `eslint` and related plugins in `dashboard` and `portal`.
- Refactored code in `dashboard` app for improved functionality and type safety.
- Updated `@walletconnect` packages to version `2.16.2` in `thirdweb`.
- Modified TypeScript configurations in `typedoc-gen` and `service-utils`.
- Updated `react-native-svg` to version `15.7.1` in `portal`.
- Updated `posthog-js` to version `1.161.6` in `wallet-ui` and `portal`.
- Updated `happy-dom` to version `^15.7.4` in `portal`.
- Updated `typescript` to version `5.6.2` in `typedoc-gen` and `dashboard`.

> The following files were skipped due to too many changes: `apps/dashboard/package.json`, `apps/dashboard/src/core-ui/sidebar/tunnel.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts`, `packages/typedoc-gen/tsconfig.base.json`, `packages/service-utils/tsconfig.base.json`, `packages/service-utils/package.json`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 17:56:14 +00:00
kien-ngo f66f99096a [SDK] Improve tests for marketplace DirectListings (#4619)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the Marketplace Direct Listings tests for ERC721 and ERC1155 contracts.

### Detailed summary
- Refactors test setup and contract deployment
- Updates NFT minting and approval transactions
- Improves listing creation and validation checks
- Enhances buy transaction testing for ERC721 tokens

> The following files were skipped due to too many changes: `packages/thirdweb/src/extensions/marketplace/direct-listings/direct-listings.test.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 12:40:31 +00:00
joaquim-verges 6ce7c83a3b chore: update @mobile-wallet-protocol/client to 0.0.3 (#4665)
Fixes #4663

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates `@mobile-wallet-protocol/client` to version 0.0.3 and aligns package dependencies and TypeScript type definitions.

### Detailed summary
- Updated `@mobile-wallet-protocol/client` to 0.0.3
- Aligned package dependencies
- Adjusted TypeScript type definitions for various modules

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 12:18:39 +00:00
kien-ngo 6e69959dc1 [Dashboard] Replace Chakra-ui's useClipboard (#4660)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor code by centralizing the `useClipboard` hook and importing it where needed.

### Detailed summary
- Centralized `useClipboard` hook in a separate file
- Imported `useClipboard` in multiple components for code reusability

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 11:36:33 +00:00
kien-ngo e5393efcee [Dashboard] erc20 transfer Drawer (#4643)
chakra-ui Drawer -> Shadcn's Sheet

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `Sheet` component for modals and refactors the transfer token functionality to use the `Sheet` component.

### Detailed summary
- Added `Sheet`, `SheetContent`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger` components
- Refactored token transfer functionality to use the new `Sheet` component
- Updated imports and dependencies to include new components and utilities

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 10:18:49 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
f68228f5b0 Version Packages (#4654)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-18 14:56:48 +12:00
gregfromstl acd56a7e46 Redirect to login from main ecosystem page (#4657)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add authentication logic to a page component in the wallet-ui app.

### Detailed summary
- Added import for `getCurrentUser` from `@/lib/auth`
- Added import for `redirect` from `next/navigation`
- Updated `Page` function to fetch current user and redirect based on authentication status

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 01:54:21 +00:00
jnsdls 00ce74a060 Improve getNFTs compatibility for ERC1155 contracts (#4653) 2024-09-18 01:41:18 +00:00
gregfromstl ef2d406ce5 [SDK] Fix: Remove useless caching (#4656)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the `fetch.ts` file in the `thirdweb` package and add unit tests in `fetch.test.ts`.

### Detailed summary
- Removed `FETCH_CACHE` and `IS_THIRDWEB_URL_CACHE` WeakMap in `fetch.ts`
- Added `IS_THIRDWEB_URL_CACHE` export in `fetch.ts`
- Added unit tests for `getClientFetch` and `isThirdwebUrl` functions in `fetch.test.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 01:28:15 +00:00
gregfromstl ebbb87b26c Simplify wallet UI redirects (#4655)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the middleware logic in the wallet-ui app by simplifying the URL path handling and removing unnecessary JWT decoding.

### Detailed summary
- Updated URL path generation logic in middleware
- Removed unused JWT decoding and user handling
- Simplified redirection based on ecosystem and URL path

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-18 00:06:30 +00:00
kumaryash90 e89ffd4aa2 Handle custom id for published contract (#4644)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on handling a custom id for published contracts in the `thirdweb` package.

### Detailed summary
- Added handling of custom id for published contracts in `deploy-metadata.ts` file.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 23:44:05 +00:00
gregfromstl cf1683c3fe [SDK] Fix: Switch active connection on wallet account change (#4618)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add a subscription for when the account changes in the wallet manager.

### Detailed summary
- Added a subscription for "accountChanged" event in the wallet manager
- Calls `handleConnection` when the account changes
- Invokes `onConnect` with the new connected wallet
- Updates the active wallet after the account changes

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 23:23:27 +00:00
gregfromstl a46843992b [SDK] Feature: Guest accounts (#4631)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to introduce a "guest" login option in the wallet authentication system.

### Detailed summary
- Added "guest" login option for temporary accounts
- Updated locale files to support "guest" login
- Implemented "guest" authentication functionality
- Updated UI components to include "guest" login option

> The following files were skipped due to too many changes: `packages/thirdweb/src/wallets/in-app/core/authentication/types.ts`, `packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx`, `packages/thirdweb/src/react/native/ui/icons/svgs.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx`, `packages/thirdweb/src/wallets/in-app/native/auth/native-auth.ts`, `packages/thirdweb/src/wallets/in-app/native/native-connector.ts`, `packages/thirdweb/src/react/web/wallets/shared/GuestLogin.tsx`, `packages/thirdweb/src/react/core/utils/walletIcon.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 23:11:24 +00:00
gregfromstl 39a6f86b3b Fix wallet UI cookie (#4652)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add console log messages for user address and redirection, and update cookie settings for JWT with additional security configurations.

### Detailed summary
- Added console log messages for user address and redirection
- Updated cookie settings for JWT with additional security configurations: name, value, httpOnly, secure, sameSite, maxAge, domain, path

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 23:08:13 +00:00
MananTank 589e81c8b7 Revamp API Key settings UI, Add Project General settings (#4645)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates file paths, refactors components, and improves code readability.

### Detailed summary
- Renamed and relocated several components for better organization
- Updated function names for clarity and consistency
- Improved type imports and removed unnecessary dependencies
- Enhanced code structure and readability for easier maintenance

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/pay-ui.client.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.stories.tsx`, `apps/dashboard/src/pages/dashboard/settings/api-keys/[id].tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/settings/ProjectGeneralSettingsPage.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 22:22:53 +00:00
MananTank db16d8ba54 Set auth token everywhere ThirdwebProvider is used (#4650)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds a new `SetAuthHeaderForSDK` component to manage authentication headers for the SDK and updates providers to include it.

### Detailed summary
- Added `SetAuthHeaderForSDK` component to manage authentication headers for SDK
- Updated providers to include the new component for SDK authentication

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 22:01:45 +00:00
MananTank 9878f49790 Fix _defaultAdmin not prefilled with connected wallet address (#4649)
Not sure if this is the proper solution

refer to - https://linear.app/thirdweb/issue/DASH-255/custom-contract-deployment-issue-via-dashboard#comment-6afa6f35
2024-09-17 21:34:10 +00:00
gregfromstl a53e8ea13b [Wallet UI] Fix: Redirect properly from login page (#4646)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance user authentication and ecosystem info handling in the wallet UI app.

### Detailed summary
- Added user authentication check and redirect in `layout.tsx`
- Improved error handling for fetching ecosystem info in `ecosystems.ts`
- Refactored middleware logic in `middleware.ts` for better routing

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 20:24:32 +00:00
jnsdls 5ee748921a fix auth on contract deploy (#4647) 2024-09-17 18:29:16 +00:00
kien-ngo 3be53f436d [Dashboard] Add from to claimTo (#4642)
Jake did mention sometimes we have issues with allowlist if `from` is not specified.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `claim-form.tsx` file in both the `tokens` and `nfts` directories to include the `from` field with the account address.

### Detailed summary
- Added `from: account.address` field to the transaction object.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 09:26:16 +00:00
Jonas DanielsandGitHub 0946d90744 no-contract-card-ssr (#4641) 2024-09-16 22:35:22 -07:00
Jonas DanielsandGitHub 97a7d83e03 update dependencies & re-run biome (#4640) 2024-09-16 21:55:28 -07:00
jnsdls ca610d6b3d move explore to app router (#4637)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is updating components and pages in the dashboard app related to exploring smart contracts.

### Detailed summary
- Updated `MaskedAvatar` component with new props and styling
- Modified `ExplorePage` layout and content
- Improved `ContractRow` component functionality
- Enhanced `ContractCard` component with initial data handling

> The following files were skipped due to too many changes: `apps/dashboard/src/components/explore/contract-card/index.tsx`, `apps/dashboard/src/app/(dashboard)/explore/[category]/page.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 03:23:43 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
7b0040bb92 Version Packages (#4589)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-17 15:21:23 +12:00
joaquim-verges c320b189f6 feat: export Abi types from abitype (#4639)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on exporting Abi types in the `thirdweb` package.

### Detailed summary
- Exported Abi types like `Abi`, `AbiFunction`, `AbiReceive`, `AbiError`, `AbiEvent`, `AbiConstructor`, and `AbiFallback` from "abitype".
- Exported `toFunctionSelector` from "viem".

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 02:51:11 +00:00
jnsdls 6bb2904936 [Update] Refactor product links in ChainListRow component (#4638) 2024-09-17 02:40:08 +00:00
Joaquim VergesandGitHub 5bde07508a feat(pay): allow customizing PayEmbed metadata for top-up flow (#4621) 2024-09-17 14:17:14 +12:00
edwardysun ac4f68d5c8 Pay - Stop polling after status is complete (#4632)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the `refetchInterval` logic in `useBuyWithCryptoStatus` and `useBuyWithFiatStatus` hooks based on different status conditions.

### Detailed summary
- Updated `refetchInterval` logic based on status conditions in `useBuyWithCryptoStatus` hook.
- Updated `refetchInterval` logic based on status conditions in `useBuyWithFiatStatus` hook.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 01:10:11 +00:00
joaquim-verges 3961ef477e feat: handle function signatures and ABIs in resolveMethod (#4628)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `resolveMethod` function in `transaction/resolve-method.ts` to handle function signatures and contract ABIs efficiently.

### Detailed summary
- Updated `resolveMethod` function to handle function signatures and contract ABIs
- Added `parseAbiItem` import and type definitions
- Modified test cases in `resolve-method.test.ts` to cover new functionality

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-17 00:47:38 +00:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
085ea2bf00 Bump shiki from 1.16.2 to 1.17.7 (#4626)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-16 17:19:21 -07:00
joaquim-verges 2b6a2fda3d feat: invalidate wallet balance after successful purchases (#4630)
Fixes CNCT-1861

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on invalidating wallet balances on successful payments.

### Detailed summary
- Updated query key in `invalidateWalletBalance.test.ts`
- Modified query key logic in `invalidateWalletBalance.ts`
- Added `invalidateWalletBalance` function in `BuyScreen.tsx` to invalidate wallet balances on payment success

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 23:49:37 +00:00
joaquim-verges a5e605c65e test: conditionally run tests based on TW_SECRET_KEY (#4636)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds a conditional test runner based on the environment variable `TW_SECRET_KEY` to the test suite for ERC721, MintableERC20, MintableERC721, and MintableERC1155 modules.

### Detailed summary
- Modified test descriptions to include conditional test execution based on `TW_SECRET_KEY` environment variable.
- Updated test suite for ERC721, MintableERC20, MintableERC721, and MintableERC1155 modules to run tests conditionally.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 23:30:29 +00:00
MananTank 85ddb175d7 Fix account abstraction factories table crash (#4629)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the `useFactories` function in `AccountFactories/index.tsx`.

### Detailed summary
- Refactored the `useFactories` function to improve readability and maintainability
- Updated how factories are filtered and returned
- Updated the `contracts` prop passed to `FactoryContracts` component

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 22:25:38 +00:00
jnsdls c373ea571a remove v4 (#4627) 2024-09-16 22:00:47 +00:00
MananTank fdae05fc00 Add Export to CSV button on Connect Analytics cards (#4617)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR removes the `ExportToCSVButton` component from multiple files and centralizes it in a single location. It also adds a `valueFormatter` prop to the `ChartTooltipContent` component.

### Detailed summary
- Removed `ExportToCSVButton` from multiple files and centralized it in a single location.
- Added `valueFormatter` prop to the `ChartTooltipContent` component.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 20:45:09 +00:00
MananTank 7c1ea4a1e2 Add Project Setting pages Layout (#4620)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update the layout and styling of various pages in the dashboard app.

### Detailed summary
- Updated body and html styles for full height
- Added new pages for Pay Settings, In-App Wallet Settings, and Account Abstraction Settings
- Modified project selector UI link
- Updated text and layout for General Settings page
- Adjusted layout in TeamLayout and RootTeamLayout components
- Added a new Layout component for settings with sidebar links
- Added a new page for API key details with editing functionality

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 20:26:40 +00:00
jnsdls 95b3c787a3 [Update] Refactor contract publish form to use thirdweb v5 (#4605)
<!-- start pr-codex -->

## PR-Codex overview
This PR removes unnecessary files, updates type definitions, refactors contract-related components, and improves API handling.

### Detailed summary
- Removed several files related to publishing contracts and provider setup
- Updated type definitions and constants
- Refactored contract-related components for consistency
- Improved API handling and URL configurations

> The following files were skipped due to too many changes: `apps/dashboard/src/pages/explore/[category]/index.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/hooks.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx`, `apps/dashboard/src/contract-ui/tabs/manage/components/moduleContractInfo.ts`, `apps/dashboard/src/constants/chains.ts`, `apps/dashboard/src/components/contract-components/contract-table/cells/description.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/landing-fieldset.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/factory-fieldset.tsx`, `apps/dashboard/src/app/(dashboard)/contracts/publish/[publish_uri]/page.tsx`, `apps/dashboard/src/components/explore/contract-card/index.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/default-factory.tsx`, `apps/dashboard/src/components/contract-components/shared/contract-id-image.tsx`, `apps/dashboard/src/components/smart-wallets/AccountFactories/index.tsx`, `apps/dashboard/src/lib/sdk.ts`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx`, `apps/dashboard/src/pages/profile/[profileAddress].tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/legacy-zod-schema.ts`, `apps/dashboard/src/contract-ui/tabs/manage/components/ModuleForm.tsx`, `apps/dashboard/src/components/contract-functions/contract-function.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 19:33:35 +00:00
jnsdls 468067e47f fix direct deploy (#4616) 2024-09-16 17:21:00 +00:00
MananTank 1d0291fb9e Sidebar and team header cleanups (#4612)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor layout components and improve sidebar navigation in the dashboard app.

### Detailed summary
- Refactored layout components for better structure
- Updated sidebar navigation in various pages
- Improved handling of sidebar links and layout components

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 16:45:22 +00:00
MananTank 6e5d89bf2a Add rate limit on contact-us form using redis + move to app router (#4614)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to implement rate limiting for a HubSpot API endpoint using Redis caching.

### Detailed summary
- Added `cacheGet` and `cacheSet` functions for Redis caching
- Implemented rate limiting logic based on IP address
- Added `rateLimiter` function to handle rate limiting
- Updated handler to use `rateLimiter` before processing requests

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 16:32:48 +00:00
MananTank 2bf9fc598a Fix Empty Publish contract page (#4613)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to replace the `useSingleQueryParam` hook with `useRouter` and `useSearchParams` for better navigation handling in different components.

### Detailed summary
- Replaced `useSingleQueryParam` with `useRouter` and `useSearchParams` in multiple files for improved navigation handling.
- Updated the usage of hooks for query parameter retrieval in several components.
- Made changes to handle query parameters more efficiently in the codebase.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 16:14:49 +00:00
Joaquim VergesandGitHub 18239dd5df chore: simplify uploaded published data (#4611) 2024-09-16 20:59:49 +12:00
jnsdls b837b690ae various dependency bumps (#4603)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates various dependencies across different packages.

### Detailed summary
- Updated Vite to version 5.4.5
- Bumped `viem` to version 2.21.7
- Updated `@playwright/test` to 1.47.1
- Increased `postcss` to version 8.4.47
- Updated `tailwindcss` to 3.4.11
- Updated `@tanstack/react-query` to version 5.56.2

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 01:31:14 +00:00
joaquim-verges 7b94bf55fd feat: expose checkModulesCompatiblity for modular contracts (#4607)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new function `checkModulesCompatibility` and related tests to verify module compatibility in the `thirdweb` package.

### Detailed summary
- Added `checkModulesCompatibility` function in `modules.ts`
- Created tests for `checkModulesCompatibility` in `checkModulesCompatibility.test.ts`
- Implemented `checkModulesCompatibility` logic in `checkModulesCompatibility.ts`
- Updated `arrays.ts` with a new utility function

> The following files were skipped due to too many changes: `packages/thirdweb/test/src/bytecode/mintable-erc20.ts`, `packages/thirdweb/test/src/bytecode/claimable-erc721.ts`, `packages/thirdweb/test/src/bytecode/claimable-erc20.ts`, `packages/thirdweb/test/src/bytecode/erc20core.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 01:16:42 +00:00
joaquim-verges 3009a0f6e5 feat: expose publishContract extension (#4604)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR exposes a new extension `publishContract` and refactors metadata handling in the `thirdweb` package.

### Detailed summary
- Exposed `publishContract` extension
- Refactored metadata handling in `deploy-metadata.ts`
- Updated `publisher.ts` with export changes
- Added new functions and types in `semver.ts`
- Introduced `publishContract` and related functions in `publish.ts`
- Added tests for `publishContract` in `publish.test.ts`

> The following files were skipped due to too many changes: `packages/thirdweb/src/extensions/thirdweb/write/publish.test.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-16 00:04:13 +00:00
joaquim-verges 07b949dd8c fix(pay): allow topping up from a different wallet with the same currency (#4602)
Fixes CNCT-1835

<!-- start pr-codex -->

---

## PR-Codex overview
This PR allows topping up from a different wallet with the same currency.

### Detailed summary
- Enable topping up from a different wallet with the same currency
- Rename "Seller" to "Receiver" in ConfirmationScreen
- Modify condition in showSwapFlow to include "fund_wallet" mode

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 22:12:10 +00:00
jnsdls 575c3e3141 react-query v4 -> v5 (#4600)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates loading states in various components to use `isPending` instead of `isLoading`.

### Detailed summary
- Replaced `isLoading` with `isPending` in multiple components for loading state handling.

> The following files were skipped due to too many changes: `apps/dashboard/src/contract-ui/tabs/manage/components/InstalledModulesTable.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayCustomers.ts`, `apps/dashboard/src/components/pay/PayConfig.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/add-partner-form.client.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx`, `apps/dashboard/src/contract-ui/tabs/split/components/distribute-button.tsx`, `apps/dashboard/src/components/onboarding/LinkWallet.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/components/TotalVolumePieChart.tsx`, `apps/dashboard/package.json`, `apps/dashboard/src/components/pay/PayAnalytics/hooks/usePayPurchases.ts`, `apps/dashboard/src/components/engine/configuration/local-config.tsx.tsx`, `apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/server/partners-table.tsx`, `apps/dashboard/src/contract-ui/components/solidity-inputs/string-input.tsx`, `apps/dashboard/src/components/settings/Account/Billing/index.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/update-partner-form.client.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/page.tsx`, `apps/dashboard/src/components/configure-networks/Form/IconUpload.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/hooks/use-create-ecosystem.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx`, `apps/dashboard/src/components/engine/engine-instances-table.tsx`, `apps/dashboard/src/components/engine/contract-subscription/contract-subscriptions-table.tsx`, `apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx`, `apps/dashboard/src/pages/api/revalidate/publish.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/hooks/use-update-ecosystem.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/hooks/use-add-partner.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/hooks/use-delete-partner.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/hooks/use-update-partner.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx`, `apps/dashboard/src/contract-ui/tabs/shared-components/marketplace-table.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/query/useQueryWithNetwork.ts`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx`, `apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx`, `apps/dashboard/src/contract-ui/tabs/proposals/components/proposal.tsx`, `apps/dashboard/src/components/app-layouts/app.tsx`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/client/integration-permissions-toggle.client.tsx`, `apps/dashboard/src/app/account/settings/AccountSettingsPageUI.tsx`, `apps/dashboard/src/components/cmd-k-search/index.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useLoggedInUser.ts`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useRegistry.ts`, `apps/dashboard/src/contract-ui/tabs/manage/components/ModuleForm.tsx`, `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.tsx`, `apps/dashboard/src/components/storage/your-files.tsx`, `apps/dashboard/src/components/contract-functions/interactive-abi-function.tsx`, `apps/dashboard/src/components/ipfs-upload/dropzone.tsx`, `apps/dashboard/src/core-ui/nft-drawer/useNftDrawerTabs.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts`, `pnpm-lock.yaml`, `apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 21:32:49 +00:00
joaquim-verges a4a41364cd feat: add optional wallet.getAdminAccount(), new useAdminWallet() hook and auto auth when using inapp+smart accounts (#4601)
Fixes CNCT-1833

## PR-Codex overview
This PR introduces a new `useAdminWallet()` hook for smart wallets and adds functionality for automatic authentication with in-app and smart accounts.

### Detailed summary
- Added `getAdminAccount` method to `Wallet` interface
- Created `useAdminWallet()` hook to get admin wallet for smart wallets
- Automatic authentication for in-app and smart accounts
- Updated various files to implement the new hook and method

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 20:34:38 +00:00
jnsdls eba1c60895 appease the knip overlords (#4594)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on refactoring and updating various components, types, and functions across the dashboard app.

### Detailed summary
- Deleted several UI components and hooks
- Updated types and functions across different files
- Refactored component props and functions

> The following files were skipped due to too many changes: `apps/dashboard/src/utils/fetchChain.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/components/module-list.client.tsx`, `apps/dashboard/src/components/analytics/area-chart.tsx`, `apps/dashboard/knip.json`, `apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/constants.ts`, `apps/dashboard/src/components/contract-components/published-contract/index.tsx`, `apps/dashboard/src/lib/search.ts`, `apps/dashboard/src/@3rdweb-sdk/react/cache-keys.ts`, `apps/dashboard/src/components/contract-components/contract-table-v2/index.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts`, `apps/dashboard/package.json`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/constants/mappings.ts`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 03:49:07 +00:00
jnsdls 1168bc702f make --turbo work (#4593)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update file paths for image sources and add the `--turbo` flag to the `next dev` script for improved performance.

### Detailed summary
- Updated file paths for image sources in multiple components
- Added `--turbo` flag to `next dev` script in `package.json` for improved performance

> The following files were skipped due to too many changes: `apps/dashboard/src/pages/sdk.tsx`, `apps/dashboard/src/pages/learn/index.tsx`, `apps/dashboard/src/pages/solutions/gaming.tsx`, `apps/dashboard/src/pages/solutions/commerce.tsx`, `apps/dashboard/src/pages/community/ambassadors.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 03:49:06 +00:00
jnsdls 06ef6f0a07 remove @thirdweb-dev/react (#4591)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update dependencies and refactor provider setup in the `apps/dashboard` directory.

### Detailed summary
- Updated dependencies for `@tanstack/react-query` and `@tanstack/react-table`
- Removed unused imports and code related to `@thirdweb-dev/react`
- Refactored provider setup in `apps/dashboard/src/components/app-layouts/provider-setup.tsx` and `apps/dashboard/src/components/app-layouts/providers.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 03:49:05 +00:00
jnsdls 390aedcc8a remove claimconditions legacy (#4590)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor claim conditions components and improve error handling.

### Detailed summary
- Refactored components related to claim conditions
- Improved error handling in `errorParser.tsx`
- Updated transaction button component
- Enhanced ERC20 amount conversion logic
- Streamlined wallet confirmation logic

> The following files were skipped due to too many changes: `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/hooks.ts`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions-form/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 03:49:04 +00:00
jnsdls ebe4975aa3 permissions in v5 (#4588)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to refactor permissions handling in the dashboard.

### Detailed summary
- Refactored permissions handling to use `useReadContract`
- Removed `isPrebuilt` checks in `ContractPermission`
- Updated `getAllRoleMembers` and `createSetAllRoleMembersTx`
- Removed unnecessary imports and variables

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 00:25:26 +00:00
Jonas DanielsandGitHub 9c8beac7fe [Update] Add special case for zero address in WalletAddress component (#4599) 2024-09-14 17:22:59 -07:00
gregfromstl dc250225d2 [Playground] Feature: Track tab state in URL (#4597)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add a `tab` parameter to the `Page` component in the sign-in button page and update the `RightSection` component to handle the tab switching functionality.

### Detailed summary
- Added `tab` parameter to `Page` component
- Updated `RightSection` to handle tab switching functionality based on the `tab` parameter
- Utilized `useRouter` and `useMemo` for tab handling
- Implemented tab switching functionality in `RightSection`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-15 00:11:24 +00:00
Jonas DanielsandGitHub 11437524e4 [Update] Replace redirect with notFound for 404 handling (#4596) 2024-09-14 17:10:18 -07:00
Jonas DanielsandGitHub 1a56ed6214 [Update] Resolve avatar URI using thirdwebClient (#4598) 2024-09-14 17:10:00 -07:00
jnsdls b2a2c9784a [Update] Refactor setOverrides() call and IPFS URL resolution (#4587)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to refactor the codebase to run `setOverrides()` function on app load efficiently.

### Detailed summary
- Moved `setOverrides()` function calls to run on app load in various files
- Added `useEffect` hooks to ensure `setOverrides()` runs once on app load
- Updated `replaceIpfsUrl` function to use `resolveScheme` with `thirdwebClient`
- Imported `setOverrides` function in multiple files for app initialization

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-14 19:52:27 +00:00
kien-ngo 5abc652871 [Dashboard] Fix missing Vote contract UI (#4592)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the condition in `useRouteConfig.tsx` to check for "VoteERC20" instead of "Vote".

### Detailed summary
- Updated condition to check for "VoteERC20" instead of "Vote" in `useRouteConfig.tsx` for enabling/disabling a component.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-14 15:56:56 +00:00
kien-ngo fb0daabbf6 [Dashboard] Remove extensionDetectedState (#4557)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on exposing Marketplace extensions for feature detection. It updates extension detection states and refactors extension method imports.

### Detailed summary
- Exposed Marketplace extensions for feature detection
- Refactored extension method imports to use `ExtensionDetectedState`
- Added functions to check support for specific methods in Marketplace extensions

> The following files were skipped due to too many changes: `packages/thirdweb/src/extensions/marketplace/direct-listings/read/getListing.ts`, `packages/thirdweb/src/extensions/marketplace/direct-listings/write/buyFromListing.ts`, `packages/thirdweb/src/exports/extensions/marketplace.ts`, `packages/thirdweb/src/extensions/marketplace/english-auctions/read/getWinningBid.ts`, `packages/thirdweb/src/extensions/marketplace/english-auctions/write/bidInAuction.ts`, `apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-14 01:26:53 +00:00
jnsdls b142b8a893 remove custom publisher context (#4586) 2024-09-14 00:16:24 +00:00
MananTank e80a87a0d8 Fix Engine Page contract subscriptions crash + some form validation (#4585)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to enhance contract address validation and error handling in the contract subscription feature.

### Detailed summary
- Added `isAddress` function for contract address validation
- Improved error handling for invalid contract addresses and URLs

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-14 00:02:10 +00:00
jnsdls ce45cb2f24 [Update] Refine billing alert message for plan-specific scenarios (#4584) 2024-09-13 23:21:26 +00:00
MananTank de362ba2f5 Refactor Create API Key Modal, Add in teams for creating projects (#4583)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds functionality to create projects in the dashboard UI.

### Detailed summary
- Added `createProject` functionality to various components
- Updated global CSS variables
- Created `LazyCreateAPIKeyDialog` for project creation dialog
- Updated UI components for project creation functionality

> The following files were skipped due to too many changes: `apps/dashboard/src/stories/stubs.ts`, `apps/dashboard/src/pages/dashboard/settings/api-keys/index.tsx`, `apps/dashboard/src/components/settings/ApiKeys/Create/CreateApiKeyModal.stories.tsx`, `apps/dashboard/src/app/team/[team_slug]/(team)/TeamOverviewPage.tsx`, `apps/dashboard/src/components/settings/ApiKeys/Create/index.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-13 23:08:24 +00:00
jnsdls ece86ccdc3 v5 deploy dashboard changes (#4498)
<!-- start pr-codex -->

## PR-Codex overview
This PR deprecates functions, updates types, refactors components, and adds modules for contract deployment.

### Detailed summary
- Deprecated functions in favor of new ones
- Updated types and added necessary type assertions
- Refactored components with new props and imports
- Added modules for contract deployment and handling metadata

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/published-contract/utils/module-base-64.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/components/module-list.client.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/uri-based-deploy.tsx`, `pnpm-lock.yaml`, `apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-deploy.client.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/contract-info.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/contract-actions-published.client.tsx`, `packages/thirdweb/src/utils/any-evm/deploy-metadata.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/utils/getPublishedContractsWithPublisherMapping.ts`, `packages/thirdweb/package.json`, `apps/dashboard/src/app/(dashboard)/contracts/deploy/[compiler_uri]/page.tsx`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/trusted-forwarders-fieldset.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/layout.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/contract-metadata-fieldset.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/contract-header.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/components/breadcrumbs.client.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/opengraph-image.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/opengraph-image.tsx`, `packages/thirdweb/src/utils/abi/normalizeFunctionParams.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/components/version-selector.tsx`, `packages/thirdweb/src/contract/deployment/deploy-with-abi.ts`, `apps/dashboard/src/contract-ui/tabs/manage/components/getModuleInstalledParams.ts`, `packages/thirdweb/src/extensions/prebuilts/get-required-transactions.test.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx`, `apps/dashboard/src/components/contract-components/fetch-contracts-with-versions.ts`, `apps/dashboard/src/components/contract-functions/contract-function.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx`, `packages/thirdweb/src/extensions/prebuilts/get-required-transactions.ts`, `apps/dashboard/src/pages/api/og/publishedContract.tsx`, `apps/dashboard/src/components/contract-components/published-contract/index.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-13 19:16:20 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
d115307db1 Version Packages (#4570)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-13 12:01:55 -07:00
gregfromstl 5d3b39587b [React] Feature: Can hide certain wallets in the wallet switcher (#4582)
Adds the ability to hide certain wallets in the wallet switcher

```tsx
      <ConnectButton
        client={client}
        detailsModal={{
          // We hide the in-app wallet so they can't switch to it
          hiddenWallets: ["inApp"],
        }}
        accountAbstraction={{
          chain: baseSepolia,
          sponsorGas: true,
        }}
      />
```

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to add the ability to hide specific wallets in the wallet switcher UI component.

### Detailed summary
- Added `hiddenWallets` prop to `ConnectButton`, `DetailsModal`, `WalletSwitcherConnectionScreen`, `BuyScreen`, and `PayEmbed` components.
- Implemented filtering of connected wallets based on `hiddenWallets` in `WalletManagerScreen` and `WalletSwitcherDrawerContent`.
- Updated types to include `WalletId` for consistency across components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-13 18:37:29 +00:00
Jonas DanielsandGitHub 53015711fe update next version (#4576) 2024-09-13 10:42:33 -07:00
gregfromstl 5058fdb470 [SDK] Feature: X auth (#4571)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds authentication support for a new provider 'X' across various components and modules.

### Detailed summary
- Added 'X' authentication provider
- Updated authentication types and components
- Implemented 'X' authentication in multiple files

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-13 06:12:59 +00:00
Jonas DanielsandGitHub a47bc2233c [Update] Add address validation in WalletAddress and AddAdminButton components (#4575) 2024-09-12 21:12:47 -07:00
Edward SunandGitHub 390180592a Add preferredProvider in buyWithFiat (#4546) 2024-09-12 17:37:57 -07:00
joaquim-verges 285321b193 docs: Update in-app wallet backend API link (#4572)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates redirects and icon imports in the `portal` app and refactors the sidebar in `sidebar.tsx`.

### Detailed summary
- Added a new redirect for in-app wallet details on the server
- Reordered icon imports in `sidebar.tsx`
- Updated sidebar links for In-App Wallet and Ecosystem Wallet pages

> The following files were skipped due to too many changes: `apps/portal/src/app/connect/sidebar.tsx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-13 00:06:10 +00:00
0xFirekeeper 8035923cda .net 2.1 docs hotfix (#4569)
<!-- start pr-codex -->

## PR-Codex overview
This PR simplifies the OTP login process in the `page.mdx` file by removing the retry logic and adding a comment for handling failed login attempts.

### Detailed summary
- Removed `canRetry` variable and related logic
- Added a comment for handling failed login attempts

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 23:26:42 +00:00
gregfromstl c0778cb930 [SDK] Feature: Export uri parsing utils (#4565)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds `parseAvatarRecord` and `parseNftUri` utilities for ENS avatars and NFT URIs. Detailed summary:

### Detailed summary
- Added `parseAvatarRecord` and `parseNftUri` functions for ENS avatars and NFT URIs
- Updated `common.ts` and `ens.ts` with new exports
- Created `parseNftUri` function in `parseNft.ts`
- Added `parseAvatarRecord` function in `avatar.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 22:12:44 +00:00
arcoraven db1f79678c fix: incorrect gasLimit reference in Engine (#4566)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to update the gas settings override mechanism for write transactions in the contract page.

### Detailed summary
- Updated gas settings override mechanism for transactions
- Removed individual `gasLimit` and `gasPrice` fields
- Added `gas`, `maxFeePerGas`, and `maxPriorityFeePerGas` fields
- Fields are now optional and will be estimated if omitted

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 20:54:40 +00:00
0xFirekeeper 113468e361 .NET 2.1 // Unity 5.1 Docs (#4564)
<!-- start pr-codex -->

## PR-Codex overview
The focus of this PR is to add new methods and documentation for interacting with smart wallets in the .NET SDK.

### Detailed summary
- Added methods for getting personal wallet, all admins, active signers, transaction count, and transferring in .NET SDK
- Updated documentation for In-App Wallet and Ecosystem Wallet login methods

> The following files were skipped due to too many changes: `apps/portal/src/app/dotnet/wallets/providers/ecosystem-wallet/page.mdx`, `apps/portal/src/app/dotnet/sidebar.tsx`, `apps/portal/src/app/unity/v5/wallets/ecosystem-wallet/page.mdx`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 20:15:25 +00:00
MananTank a24de21f00 Fix no redirect to dashboard if user is already logged in and lands on login page (#4561)
Did not go the middleware route here because even if we properly check the logged in status in middleware and redirect - it's possible for user to get stuck in that case if for some reason the wallet never gets into "connecting" status and so the useLoggedInUser query never runs and never redirects the user to login page ( and even if it did - they would immediately get redirected to other page because they have a "valid" auth cookie )

so safest solution here is to let the user land on login page and once then redirect from there after wallet connection + sign in is done

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to refactor the login process in the dashboard app.

### Detailed summary
- Removed unused imports and functions
- Refactored `doLogin` function to handle redirect logic internally
- Added `useDashboardRouter` hook to handle navigation
- Improved error handling and redirect logic in the login process

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 18:37:42 +00:00
Joaquim VergesandGitHub 2d2e6cb380 test: Update ERC1967 proxy constructor data parameter (#4563) 2024-09-13 06:36:47 +12:00
MananTank 03c21903c9 Fix Popular chain missing icons on dashboard (#4562)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `connect-wallet` component to include support for popular chains with metadata.

### Detailed summary
- Added `useSupportedChainsRecord` import
- Added `chainsRecord` state
- Added `popularChainsWithMeta` state
- Updated `chainSections` to use `popularChainsWithMeta`
- Updated dependencies for `useMemo` in `chainSections`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
2024-09-12 18:13:09 +00:00
5344 changed files with 756301 additions and 454843 deletions
+1 -27
View File
@@ -10,33 +10,7 @@
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": [
"bundlers-esbuild",
"bundlers-vite",
"bundlers-webpack",
"bundlers-swc",
"runtimes-node-commonjs",
"runtimes-node-module",
"playground-web",
"thirdweb-dashboard",
"wallet-ui",
"portal",
"@thirdweb-dev/auth",
"@thirdweb-dev/chains",
"@thirdweb-dev/cli",
"@thirdweb-dev/contracts-js",
"@thirdweb-dev/crypto",
"@thirdweb-dev/generated-abis",
"@thirdweb-dev/merkletree",
"@thirdweb-dev/pay",
"@thirdweb-dev/payments",
"@thirdweb-dev/react",
"@thirdweb-dev/react-core",
"@thirdweb-dev/sdk",
"@thirdweb-dev/storage",
"@thirdweb-dev/unity-js-bridge",
"@thirdweb-dev/wallets"
],
"ignore": ["playground-web", "thirdweb-dashboard", "wallet-ui", "portal"],
"___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
"updateInternalDependents": "always",
"onlyUpdatePeerDependentsWhenOutOfRange": true
+2 -27
View File
@@ -3,42 +3,17 @@
# default ownership group
- @jnsdls @joaquim-verges @MananTank @gregfromstl
# legacy packages
legacy_packages/auth/ @jnsdls @joaquim-verges
legacy_packages/chains/ @jnsdls @joaquim-verges
legacy_packages/cli/ @jnsdls @joaquim-verges
legacy_packages/contracts-js/ @jnsdls @joaquim-verges
legacy_packages/crypto/ @jnsdls @joaquim-verges
legacy_packages/generated-abis/ @jnsdls @joaquim-verges
legacy_packages/merkletree/ @jnsdls @joaquim-verges
legacy_packages/pay/ @jnsdls @joaquim-verges
legacy_packages/payments/ @jnsdls @joaquim-verges
legacy_packages/react/ @MananTank @jnsdls @joaquim-verges
legacy_packages/react-core/ @MananTank @jnsdls @joaquim-verges
legacy_packages/react-native/ @jnsdls @joaquim-verges
legacy_packages/react-native-compat/ @jnsdls @joaquim-verges
legacy_packages/sdk/ @joaquim-verges @jnsdls
legacy_packages/storage/ @jnsdls @joaquim-verges
legacy_packages/wallets/ @MananTank @jnsdls @joaquim-verges
# legacy e2e
legacy_e2e/ @jnsdls
# packages
packages/thirdweb/ @joaquim-verges @gregfromstl @jnsdls
## specific thirdweb pieces
packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls
packages/thirdweb/src/react/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
packages/thirdweb/src/reactive/ @joaquim-verges @gregfromstl @MananTank @jnsdls
packages/thirdweb/src/gas/ @joaquim-verges @jnsdls
packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls
packages/typedoc-gen/ @MananTank @jnsdls @joaquim-verges
packages/thirdweb/src/pay/ @joaquim-verges @gregfromstl @MananTank @jnsdls @edwardysun
packages/service-utils/ @arcoraven @jnsdls @joaquim-verges
packages/eslint-config-thirdweb/ @jnsdls @joaquim-verges
packages/tw-tsconfig/ @jnsdls @joaquim-verges
packages/unity-js-bridge/ @joaquim-verges @0xFirekeeper @jnsdls
# apps
apps/ @jnsdls @joaquim-verges
-3
View File
@@ -5,9 +5,6 @@ dashboard:
playground:
- changed-files:
- any-glob-to-any-file: "apps/playground-web/**/*"
legacy_packages:
- changed-files:
- any-glob-to-any-file: "legacy-packages/**/*"
packages:
- changed-files:
- any-glob-to-any-file: "packages/**/*"
-113
View File
@@ -1,113 +0,0 @@
name: CI (Legacy Packages)
on:
push:
branches: ["main"]
paths:
- "legacy_packages/**"
- "legacy_e2e/**"
- "package.json"
pull_request:
types: [opened, synchronize]
paths:
- "legacy_packages/**"
- "legacy_e2e/**"
- "package.json"
workflow_dispatch:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
# To use Remote Caching, uncomment the next lines and follow the steps below.
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
TW_SECRET_KEY: ${{ secrets.TW_SECRET_KEY }}
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
jobs:
optimize_ci:
runs-on: ubuntu-latest
outputs:
skip: ${{ steps.check_skip.outputs.skip }}
steps:
- name: Optimize CI
id: check_skip
uses: withgraphite/graphite-ci-action@main
with:
graphite_token: ${{ secrets.GRAPHITE_OMTIMIZE_TOKEN }}
build:
needs: optimize_ci
if: needs.optimize_ci.outputs.skip == 'false'
runs-on: ubuntu-latest
name: Build Packages
steps:
- name: Check out the code
uses: actions/checkout@v4
- name: Setup & Install
uses: ./.github/composite-actions/install
- name: Build Packages
run: pnpm build:legacy_packages
lint:
needs: optimize_ci
if: needs.optimize_ci.outputs.skip == 'false'
timeout-minutes: 15
name: Lint Packages
runs-on: ubuntu-latest
steps:
- name: Check out the code
uses: actions/checkout@v4
- name: Setup & Install
uses: ./.github/composite-actions/install
- run: pnpm lint:legacy
test:
needs: optimize_ci
if: needs.optimize_ci.outputs.skip == 'false'
timeout-minutes: 15
name: Unit Tests
runs-on: ubuntu-latest
steps:
- name: Check out the code
uses: actions/checkout@v4
- name: Setup & Install
uses: ./.github/composite-actions/install
- run: pnpm test:legacy
- name: Upload coverage reports to Codecov
uses: codecov/codecov-action@v4
with:
directory: legacy_packages/
flags: legacy_packages
verbose: true
e2e:
needs: optimize_ci
if: needs.optimize_ci.outputs.skip == 'false'
timeout-minutes: 15
name: E2E Tests
runs-on: ubuntu-latest
steps:
- name: Check out the code
uses: actions/checkout@v4
- name: Setup & Install
uses: ./.github/composite-actions/install
- name: Install Playwright
run: npx playwright install --with-deps
- name: Run e2e tests
run: pnpm e2e:legacy
env:
NODE_OPTIONS: "--max_old_space_size=4096"
CLI_E2E_API_KEY: ${{ secrets.CLI_E2E_API_KEY }}
-1
View File
@@ -8,7 +8,6 @@ on:
paths:
- ".changeset/**"
- "packages/**"
- "legacy_packages/**"
branches:
- main
-58
View File
@@ -1,58 +0,0 @@
name: Sync chains every hour
on:
# temporarily disabled chain syncing
# schedule:
# - cron: "0 * * * *" # Runs every hour
workflow_dispatch: # Allows you to manually run the workflow from the Actions tab
jobs:
sync-chains:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v4
- name: Install bun
uses: oven-sh/setup-bun@v1
with:
bun-version: 1.0.35
- name: Run chains sync
run: bun run db:sync
working-directory: ./legacy_packages/chains
- name: Check for Changes
id: git-check
run: |
if git diff --quiet; then
echo "CHANGES_FOUND=false" >> $GITHUB_ENV
else
echo "CHANGES_FOUND=true" >> $GITHUB_ENV
fi
- name: Create or Update sync-chains.md
if: env.CHANGES_FOUND == 'true'
run: |
echo '---' > .changeset/sync-chains.md
echo '"@thirdweb-dev/chains": patch' >> .changeset/sync-chains.md
echo '---' >> .changeset/sync-chains.md
echo '' >> .changeset/sync-chains.md
echo 'Synced Chains Package' >> .changeset/sync-chains.md
- name: Commit Changes
if: env.CHANGES_FOUND == 'true'
run: |
git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
git config --local user.name "github-actions[bot]"
git add -A
git commit -m "chore(chains): sync from db"
- name: Create or Update Pull Request
if: env.CHANGES_FOUND == 'true'
uses: peter-evans/create-pull-request@v6
with:
title: "chore(chains): update chains"
branch: "sync-chains"
body: "This PR was automatically created by a GitHub Action. It updates the chains package with the latest changes from the database."
commit-message: "chore(chains): sync from db"
-5
View File
@@ -10,7 +10,6 @@ dist-ssr
.cache
server/dist
public/dist
./legacy_packages/contracts-js/abis
.idea/
.yalc/
yalc.lock
@@ -18,9 +17,6 @@ yalc.lock
playwright-report/
.env/
# Artifacts
legacy_packages/cli/artifacts/
# codecov binary
codecov
@@ -28,7 +24,6 @@ codecov
sitemap*.xml
# typedoc
legacy_packages/*/typedoc/*
packages/*/typedoc/*
*storybook.log
@@ -1,6 +0,0 @@
---
"@thirdweb-dev/cli": minor
"thirdweb": minor
---
Adds --expo option to cli
@@ -1,5 +0,0 @@
---
"@thirdweb-dev/sdk": patch
---
ZkCandy addresses
@@ -1,6 +0,0 @@
---
"@thirdweb-dev/cli": patch
"@thirdweb-dev/sdk": patch
---
Override contract publish id on CLI
@@ -1,17 +0,0 @@
---
"@thirdweb-dev/merkletree": patch
"@thirdweb-dev/react-core": patch
"@thirdweb-dev/payments": patch
"@thirdweb-dev/storage": patch
"@thirdweb-dev/wallets": patch
"@thirdweb-dev/chains": patch
"@thirdweb-dev/crypto": patch
"@thirdweb-dev/service-utils": patch
"@thirdweb-dev/react": patch
"@thirdweb-dev/auth": patch
"@thirdweb-dev/cli": patch
"@thirdweb-dev/pay": patch
"@thirdweb-dev/sdk": patch
---
update dependencies
@@ -1,5 +0,0 @@
---
"@thirdweb-dev/react": patch
---
Fix error when doing buy with Crypto transaction with InApp wallet
@@ -1,5 +0,0 @@
---
"@thirdweb-dev/sdk": patch
---
Fix EIP155 check for create2 factory deployment
@@ -1,6 +0,0 @@
---
"@thirdweb-dev/wallets": patch
"@thirdweb-dev/sdk": patch
---
respect gas overrides if they are passed in
@@ -1,5 +0,0 @@
---
"@thirdweb-dev/react": patch
---
Fix wallet app not opening when using ConnectButton inside an iframe
@@ -1,5 +0,0 @@
---
"@thirdweb-dev/chains": patch
---
Synced Chains Package
+4 -1
View File
@@ -93,4 +93,7 @@ UNTHREAD_GROWTH_TIER_ID=""
UNTHREAD_PRO_TIER_ID=""
# Demo Engine
NEXT_PUBLIC_DEMO_ENGINE_URL=""
NEXT_PUBLIC_DEMO_ENGINE_URL=""
# API server secret (required for thirdweb.com SIWE login). Copy from Vercel.
API_SERVER_SECRET=""
+12 -28
View File
@@ -2,9 +2,7 @@ module.exports = {
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/typescript",
"plugin:@next/next/recommended",
"plugin:promise/recommended",
"plugin:storybook/recommended",
],
rules: {
@@ -16,6 +14,11 @@ module.exports = {
message:
'Are you *sure* you need to use "useEffect" here? If you loading any async function prefer using "useQuery".',
},
{
selector: "CallExpression[callee.name='createContext']",
message:
'Are you *sure* you need to use a "Context"? In almost all cases you should prefer passing props directly.',
},
{
selector: "CallExpression[callee.name='defineChain']",
message:
@@ -52,6 +55,11 @@ module.exports = {
"FormErrorMessage",
"MenuGroup",
"MenuItem",
"VStack",
"HStack",
"AspectRatio",
"useToast",
"useClipboard",
// also the types
"ButtonProps",
"BadgeProps",
@@ -62,6 +70,7 @@ module.exports = {
"HelpTextProps",
"MenuGroupProps",
"MenuItemProps",
"AspectRatioProps",
],
message:
'Use the equivalent component from "tw-components" instead.',
@@ -98,7 +107,7 @@ module.exports = {
],
},
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint", "import", "react-compiler"],
plugins: ["@typescript-eslint", "react-compiler"],
parserOptions: {
ecmaVersion: 2019,
ecmaFeatures: {
@@ -115,31 +124,6 @@ module.exports = {
},
},
overrides: [
{
files: "src/core-ui/**/*",
rules: {
// no restricted imports
"@typescript-eslint/no-restricted-imports": [
"error",
{
paths: [
{
name: "@thirdweb-dev/sdk",
message:
"core-ui should not import from @thirdweb-dev/sdk. (except for types)",
allowTypeImports: true,
},
{
name: "@thirdweb-dev/react",
message:
"core-ui should not import from @thirdweb-dev/react. (except for types)",
allowTypeImports: true,
},
],
},
],
},
},
// disable restricted imports in tw-components
{
files: "src/tw-components/**/*",
+13 -5
View File
@@ -1,8 +1,16 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
"$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
"extends": ["../../biome.json"],
"files": {
"ignore": ["src/graphql/**"]
}
"overrides": [
{
"include": ["src/css/swagger-ui.css"],
"linter": {
"rules": {
"suspicious": {
"noImportantInKeyframe": "off"
}
}
}
}
]
}
+3 -2
View File
@@ -1,7 +1,8 @@
{
"$schema": "https://unpkg.com/knip@5/schema.json",
"next": true,
"ignore": ["src/graphql/**", "src/theme/*"],
"ignore": ["src/@/components/ui/**"],
"project": ["src/**"],
"ignoreBinaries": ["only-allow"]
"ignoreBinaries": ["only-allow", "biome"],
"ignoreDependencies": ["@storybook/blocks", "@thirdweb-dev/service-utils"]
}
-2
View File
@@ -1,7 +1,6 @@
// @ts-check
/**
*
* @returns {Promise<import("@thirdweb-dev/chains").Chain[]>}
*/
async function fetchChainsFromApi() {
const res = await fetch(`https://api.thirdweb.com/v1/chains`, {
@@ -21,7 +20,6 @@ async function fetchChainsFromApi() {
/**
*
* @param {number|string} chainIdOrSlug
* @returns {Promise<import("@thirdweb-dev/chains").Chain>}
*/
async function getSingleChain(chainIdOrSlug) {
const res = await fetch(
+1 -2
View File
@@ -8,7 +8,7 @@ const ContentSecurityPolicy = `
style-src 'self' 'unsafe-inline' https://vercel.live;
font-src 'self' https://vercel.live https://assets.vercel.com;
frame-src * data:;
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com pg.paper.xyz portal.usecontext.io;
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
connect-src * data: blob:;
worker-src 'self' blob:;
block-all-mixed-content;
@@ -144,7 +144,6 @@ const moduleExports = {
reactStrictMode: true,
experimental: {
scrollRestoration: true,
esmExternals: "loose",
webpackBuildWorker: true,
serverSourceMaps: false,
},
+29 -66
View File
@@ -4,15 +4,15 @@
"private": true,
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "next dev",
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"format": "biome format ./src --write",
"lint": "biome check ./src && eslint ./src",
"lint": "biome check ./src && knip && eslint ./src",
"fix": "biome check ./src --fix && eslint ./src --fix",
"typecheck": "tsc --noEmit",
"gen:theme-typings": "chakra-cli tokens src/theme/index.ts",
"postinstall": "pnpm run gen:theme-typings",
"find:unused": "next-unused",
"postbuild": "next-sitemap",
"build:analyze": "ANALYZE=true pnpm run build",
"knip": "knip",
@@ -31,7 +31,6 @@
"@hookform/resolvers": "^3.9.0",
"@n8tb1t/use-scroll-position": "^2.0.3",
"@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-aspect-ratio": "^1.0.3",
"@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "1.1.1",
@@ -45,20 +44,15 @@
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-toggle-group": "^1.1.0",
"@radix-ui/react-tooltip": "1.1.2",
"@react-icons/all-files": "^4.1.0",
"@sentry/nextjs": "8.30.0",
"@shazow/whatsabi": "^0.14.1",
"@stripe/react-stripe-js": "^2.7.3",
"@stripe/stripe-js": "^3.5.0",
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-query": "5.56.2",
"@tanstack/react-table": "^8.17.3",
"@thirdweb-dev/react": "workspace:*",
"@thirdweb-dev/sdk": "workspace:*",
"@thirdweb-dev/service-utils": "workspace:*",
"@thirdweb-dev/storage": "workspace:*",
"@vercel/og": "^0.6.2",
"abitype": "1.0.5",
"chakra-react-select": "^4.7.6",
@@ -67,23 +61,21 @@
"color": "^4.2.3",
"compare-versions": "^6.1.0",
"date-fns": "^3.6.0",
"ethers": "5.7.2",
"flat": "^6.0.1",
"framer-motion": "11.5.4",
"framer-motion": "11.5.6",
"fuse.js": "7.0.0",
"ioredis": "^5.4.1",
"ipaddr.js": "^2.2.0",
"lottie-react": "^2.4.0",
"lucide-react": "0.439.0",
"next": "14.2.9",
"lucide-react": "0.441.0",
"next": "14.2.13",
"next-plausible": "^3.12.0",
"next-seo": "^6.5.0",
"next-themes": "^0.3.0",
"nextjs-toploader": "^1.6.12",
"papaparse": "^5.4.1",
"pluralize": "^8.0.0",
"posthog-js": "1.161.3",
"posthog-js-opensource": "npm:[email protected]",
"posthog-js": "1.67.1",
"prism-react-renderer": "^2.3.1",
"prismjs": "^1.29.0",
"qrcode": "^1.5.3",
@@ -97,7 +89,6 @@
"react-intersection-observer": "^9.10.3",
"react-markdown": "^9.0.1",
"react-otp-input": "^3.1.1",
"react-query-v5": "npm:@tanstack/[email protected]",
"react-responsive-carousel": "^3.2.23",
"react-table": "^7.8.0",
"recharts": "^2.12.7",
@@ -111,31 +102,29 @@
"thirdweb": "workspace:*",
"tiny-invariant": "^1.3.3",
"use-debounce": "^10.0.1",
"vaul": "^0.9.1",
"zksync-ethers": "5.9.0",
"zod": "3.23.8"
},
"devDependencies": {
"@chakra-ui/cli": "^2.4.1",
"@chromatic-com/storybook": "^1.5.0",
"@next/bundle-analyzer": "14.2.9",
"@next/eslint-plugin-next": "^14.2.9",
"@playwright/test": "1.47.0",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/addon-onboarding": "^8.2.9",
"@storybook/addon-viewport": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/nextjs": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/test": "^8.2.9",
"@chromatic-com/storybook": "2.0.2",
"@next/bundle-analyzer": "14.2.13",
"@next/eslint-plugin-next": "14.2.13",
"@playwright/test": "1.47.2",
"@storybook/addon-essentials": "8.3.2",
"@storybook/addon-interactions": "8.3.2",
"@storybook/addon-links": "8.3.2",
"@storybook/addon-onboarding": "8.3.2",
"@storybook/addon-viewport": "8.3.2",
"@storybook/blocks": "8.3.2",
"@storybook/nextjs": "8.3.2",
"@storybook/react": "8.3.2",
"@storybook/test": "8.3.2",
"@types/color": "^3.0.6",
"@types/node": "20.14.9",
"@types/papaparse": "^5.3.14",
"@types/pluralize": "^0.0.33",
"@types/qrcode": "^1.5.5",
"@types/react": "^18.3.5",
"@types/react": "^18.3.8",
"@types/react-dom": "^18",
"@types/react-table": "^7.7.20",
"@types/spdx-correct": "^3.1.3",
@@ -145,40 +134,14 @@
"autoprefixer": "^10.4.19",
"checkly": "^4.8.1",
"eslint": "8.57.0",
"eslint-config-biome": "1.8.3",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-promise": "^6.2.0",
"eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
"eslint-config-biome": "1.8.4",
"eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
"eslint-plugin-storybook": "^0.8.0",
"knip": "^5.30.5",
"next-sitemap": "^4.2.3",
"next-unused": "^0.0.6",
"storybook": "^8.2.9",
"tailwindcss": "^3.4.10",
"postcss": "8.4.47",
"storybook": "8.3.2",
"tailwindcss": "3.4.12",
"typescript": "5.6.2"
},
"next-unused": {
"alias": {},
"include": [
"components",
"hooks",
"schema",
"theme",
"utils",
"@3rdweb-sdk",
"constants",
"tw-components",
"contract-ui"
],
"exclude": [
"node_modules",
"types",
"tw-components"
],
"entrypoints": []
},
"browserslist": [
"defaults",
"unreleased versions",
"not UCAndroid > 0"
]
}
}
@@ -1,12 +1,9 @@
import type { Meta, StoryObj } from "@storybook/react";
import {
BadgeContainer,
mobileViewport,
} from "../../../../../../../stories/utils";
import { BadgeContainer, mobileViewport } from "../../../stories/utils";
import { DangerSettingCard } from "./DangerSettingCard";
const meta = {
title: "Team/Settings/components/DangerCard",
title: "blocks/DangerSettingCard",
component: Story,
parameters: {
nextjs: {
@@ -31,15 +28,15 @@ export const Mobile: Story = {
function Story() {
return (
<div className="min-h-screen bg-background text-foreground py-4">
<div className="lg:p-10 container max-w-[1000px] flex flex-col gap-8">
<div className="min-h-screen bg-background py-4 text-foreground">
<div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
<BadgeContainer label="Base">
<DangerSettingCard
title="This is a title"
description="This is a description"
buttonLabel="Some Action"
buttonOnClick={() => {}}
isLoading={false}
isPending={false}
confirmationDialog={{
title: "This is confirmation title",
description: "This is confirmation description",
@@ -53,7 +50,7 @@ function Story() {
description="This is a description"
buttonLabel="Some Action"
buttonOnClick={() => {}}
isLoading={true}
isPending={true}
confirmationDialog={{
title: "This is confirmation title",
description: "This is confirmation description",
@@ -17,31 +17,31 @@ export function DangerSettingCard(props: {
description: string;
buttonLabel: string;
buttonOnClick: () => void;
isLoading: boolean;
isPending: boolean;
confirmationDialog: {
title: string;
description: string;
};
}) {
return (
<div className="border border-red-500/70 rounded-lg overflow-hidden">
<div className="px-4 lg:px-6 py-6 bg-muted/50">
<h3 className="text-xl font-semibold tracking-tight">{props.title}</h3>
<div className="overflow-hidden rounded-lg border border-red-500/70">
<div className="bg-muted/50 px-4 py-6 lg:px-6">
<h3 className="font-semibold text-xl tracking-tight">{props.title}</h3>
<p className="text-foreground text-sm mt-1.5 mb-4">
<p className="mt-1.5 mb-4 text-foreground text-sm">
{props.description}
</p>
</div>
<div className="bg-red-100 dark:bg-red-500/20 px-4 lg:px-6 py-4 flex justify-end border-red-500/70 border-t">
<div className="flex justify-end border-red-500/70 border-t bg-red-100 px-4 py-4 lg:px-6 dark:bg-red-500/20">
<Dialog>
<DialogTrigger asChild>
<Button
variant="destructive"
className="bg-red-600 hover:bg-red-600/80 text-white font-semibold gap-2"
disabled={props.isLoading}
className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
disabled={props.isPending}
>
{props.isLoading && <Spinner className="size-3" />}
{props.isPending && <Spinner className="size-3" />}
{props.buttonLabel}
</Button>
</DialogTrigger>
@@ -64,11 +64,11 @@ export function DangerSettingCard(props: {
<Button
variant="destructive"
className="bg-red-600 hover:bg-red-600/80 text-white font-semibold gap-2"
className="gap-2 bg-red-600 font-semibold text-white hover:bg-red-600/80"
onClick={props.buttonOnClick}
disabled={props.isLoading}
disabled={props.isPending}
>
{props.isLoading && <Spinner className="size-3" />}
{props.isPending && <Spinner className="size-3" />}
{props.buttonLabel}
</Button>
</DialogFooter>
@@ -3,10 +3,13 @@ import { Button } from "@/components/ui/button";
import { useMutation } from "@tanstack/react-query";
import { DownloadIcon } from "lucide-react";
import { toast } from "sonner";
import { cn } from "../../lib/utils";
export function ExportToCSVButton(props: {
getData: () => Promise<{ header: string[]; rows: string[][] }>;
fileName: string;
disabled?: boolean;
className?: string;
}) {
const exportMutation = useMutation({
mutationFn: async () => {
@@ -26,12 +29,13 @@ export function ExportToCSVButton(props: {
return (
<Button
variant="outline"
className="border flex gap-2 items-center text-xs"
disabled={props.disabled}
className={cn("flex items-center gap-2 border text-xs", props.className)}
onClick={async () => {
exportMutation.mutate();
}}
>
{exportMutation.isLoading ? (
{exportMutation.isPending ? (
<>
Downloading
<Spinner className="size-3" />
@@ -0,0 +1,36 @@
import { Label } from "@/components/ui/label";
import { ToolTipLabel } from "@/components/ui/tooltip";
import { AsteriskIcon, InfoIcon } from "lucide-react";
export function FormFieldSetup(props: {
htmlFor: string;
label: string;
errorMessage: React.ReactNode | undefined;
children: React.ReactNode;
tooltip: React.ReactNode | undefined;
isRequired: boolean;
}) {
return (
<div>
<div className="mb-2 inline-flex items-center gap-1">
<Label htmlFor={props.htmlFor}>{props.label}</Label>
{props.isRequired && (
<AsteriskIcon className="size-3.5 text-destructive-text" />
)}
{props.tooltip && (
<ToolTipLabel label={props.tooltip}>
<InfoIcon className="size-3.5 text-muted-foreground" />
</ToolTipLabel>
)}
</div>
{props.children}
{props.errorMessage && (
<p className="mt-1 text-destructive-text text-sm">
{props.errorMessage}
</p>
)}
</div>
);
}
@@ -0,0 +1,113 @@
import type { Meta, StoryObj } from "@storybook/react";
import { ImageIcon } from "lucide-react";
import { useState } from "react";
import { BadgeContainer } from "../../../stories/utils";
import { Spinner } from "../ui/Spinner/Spinner";
import { Button } from "../ui/button";
import { Img } from "./Img";
const meta = {
title: "blocks/Img",
component: Story,
parameters: {},
} satisfies Meta<typeof Story>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Desktop: Story = {
args: {},
};
function Story() {
return (
<div className="flex flex-col gap-10 p-10">
<p> All images below are set with size-20 className </p>
<BadgeContainer label="No Src - pending">
<Img className="size-20" src={undefined} />
</BadgeContainer>
<BadgeContainer label="Failed to load - fallback">
<Img className="size-20" src="invalid-src" />
</BadgeContainer>
<BadgeContainer label="No Src, pending - rounded-full">
<Img className="size-20 rounded-full" src={undefined} />
</BadgeContainer>
<BadgeContainer label="Failed to load - fallback - rounded-full">
<Img className="size-20 rounded-full" src="invalid-src" />
</BadgeContainer>
<BadgeContainer label="Valid Src">
<Img className="size-20" src="https://picsum.photos/200" />
</BadgeContainer>
<BadgeContainer label="Valid Src, rounded">
<Img className="size-20 rounded-full" src="https://picsum.photos/200" />
</BadgeContainer>
<ToggleTest />
<BadgeContainer label="Custom Skeleton">
<Img
src={undefined}
skeleton={
<div className="flex items-center justify-center rounded-lg border">
<Spinner className="size-6" />
</div>
}
className="size-20"
/>
</BadgeContainer>
<BadgeContainer label="Custom Fallback">
<Img
fallback={
<div className="flex items-center justify-center rounded-lg border">
<ImageIcon className="size-10 text-muted-foreground" />
</div>
}
className="size-20"
src="invalid-src"
/>
</BadgeContainer>
</div>
);
}
function ToggleTest() {
const [src, setSrc] = useState<undefined | string>(undefined);
return (
<div className="relative flex flex-col gap-10 border p-6">
<Button
variant="outline"
onClick={() => {
if (src) {
setSrc(undefined);
} else {
setSrc("https://picsum.photos/400");
}
}}
className="absolute top-6 right-6 inline-flex"
>
Toggle Src
</Button>
<p> Src is {src ? "set" : "not set"} </p>
<BadgeContainer label="Valid Src">
<Img className="size-20" src={src} />
</BadgeContainer>
<BadgeContainer label="invalid Src">
<Img
className="size-20 rounded-full"
src={src ? "invalid-src" : undefined}
/>
</BadgeContainer>
</div>
);
}
@@ -0,0 +1,62 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import { useState } from "react";
import { cn } from "../../lib/utils";
type imgElementProps = React.DetailedHTMLProps<
React.ImgHTMLAttributes<HTMLImageElement>,
HTMLImageElement
> & {
skeleton?: React.ReactNode;
fallback?: React.ReactNode;
src: string | undefined;
};
export function Img(props: imgElementProps) {
const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
"pending",
);
const status =
props.src === undefined
? "pending"
: props.src === ""
? "fallback"
: _status;
const { className, fallback, skeleton, ...restProps } = props;
const defaultSkeleton = <div className="animate-pulse bg-accent" />;
const defaultFallback = <div className="bg-muted" />;
return (
<div className="relative">
<img
{...restProps}
onLoad={() => {
setStatus("loaded");
}}
onError={() => {
setStatus("fallback");
}}
style={{
opacity: status === "loaded" ? 1 : 0,
}}
alt={restProps.alt || ""}
className={cn(
"fade-in-0 object-cover transition-opacity duration-300",
className,
)}
/>
{status !== "loaded" && (
<div
className={cn(
"fade-in-0 absolute inset-0 overflow-hidden transition-opacity duration-300 [&>*]:h-full [&>*]:w-full",
className,
)}
>
{status === "pending" && (skeleton || defaultSkeleton)}
{status === "fallback" && (fallback || defaultFallback)}
</div>
)}
</div>
);
}
@@ -27,7 +27,7 @@ export function MobileSidebar(props: {
const defaultTrigger = (
<Button
className={cn(
"w-full lg:hidden text-left justify-between gap-2 bg-muted/50",
"w-full justify-between gap-2 bg-muted/50 text-left lg:hidden",
props.triggerClassName,
)}
variant="outline"
@@ -41,7 +41,7 @@ export function MobileSidebar(props: {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>{props.trigger || defaultTrigger}</DialogTrigger>
<DialogContent
className="p-4 rounded-t-xl rounded-b-none"
className="rounded-t-xl rounded-b-none p-4"
dialogCloseClassName="hidden"
onClick={(e) => {
if (e.target instanceof HTMLAnchorElement) {
@@ -55,7 +55,7 @@ export function MobileSidebar(props: {
<Button size="sm" variant="ghost" asChild key={link.href}>
<NavLink
href={link.href}
className="!text-left justify-start flex gap-2 h-auto py-3"
className="!text-left flex h-auto justify-start gap-2 py-3"
activeClassName="bg-accent"
exactMatch={link.exactMatch}
tracking={link.tracking}
@@ -1,12 +1,9 @@
import type { Meta, StoryObj } from "@storybook/react";
import {
BadgeContainer,
mobileViewport,
} from "../../../../../../../stories/utils";
import { BadgeContainer, mobileViewport } from "../../../stories/utils";
import { SettingsCard } from "./SettingsCard";
const meta = {
title: "Team/Settings/components/SettingsCard",
title: "blocks/SettingsCard",
component: Story,
parameters: {
nextjs: {
@@ -31,8 +28,8 @@ export const Mobile: Story = {
function Story() {
return (
<div className="min-h-screen bg-background text-foreground py-6">
<div className="lg:p-10 container max-w-[1100px] flex flex-col gap-10">
<div className="min-h-screen bg-background py-6 text-foreground">
<div className="container flex max-w-[1100px] flex-col gap-10 lg:p-10">
<BadgeContainer label="No Header">
<SettingsCard
bottomText="This is bottom text"
@@ -84,10 +81,10 @@ function Story() {
}}
saveButton={{
disabled: false,
isLoading: false,
isPending: false,
onClick: () => {},
}}
noPermissionText={"You do not have permission to edit this"}
noPermissionText="You do not have permission to edit this"
errorText={undefined}
>
<ChildrenPlaceholder />
@@ -103,7 +100,7 @@ function Story() {
}}
saveButton={{
disabled: false,
isLoading: false,
isPending: false,
onClick: () => {},
}}
noPermissionText={undefined}
@@ -122,7 +119,7 @@ function Story() {
}}
saveButton={{
disabled: true,
isLoading: false,
isPending: false,
onClick: () => {},
}}
noPermissionText={undefined}
@@ -141,7 +138,7 @@ function Story() {
}}
saveButton={{
disabled: false,
isLoading: true,
isPending: true,
onClick: () => {},
}}
noPermissionText={undefined}
@@ -157,8 +154,8 @@ function Story() {
function ChildrenPlaceholder() {
return (
<div className="h-10 flex items-center justify-center text-muted-foreground/50 text-xs">
{"CHILDREN GOES HERE"}
<div className="flex h-10 items-center justify-center text-muted-foreground/50 text-xs">
CHILDREN GOES HERE
</div>
);
}
@@ -1,37 +1,40 @@
import { Spinner } from "@/components/ui/Spinner/Spinner";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type React from "react";
export function SettingsCard(props: {
bottomText: string;
header?: {
description: string | undefined;
title: string;
};
children: React.ReactNode;
errorText: string | undefined;
noPermissionText: string | undefined;
saveButton?: {
onClick: () => void;
disabled: boolean;
isLoading: boolean;
};
}) {
export function SettingsCard(
props: React.PropsWithChildren<{
bottomText: React.ReactNode;
header?: {
description: string | undefined;
title: string;
};
errorText: string | undefined;
noPermissionText: string | undefined;
saveButton?: {
onClick?: () => void;
disabled: boolean;
isPending: boolean;
type?: "submit";
};
}>,
) {
return (
<div className="border rounded-lg bg-muted/50 relative">
<div className="relative rounded-lg border border-border bg-muted/50">
<div
className={cn(
"border-b border-border px-4 lg:px-6 py-6 relative",
"relative border-border border-b px-4 py-6 lg:px-6",
props.noPermissionText && "cursor-not-allowed",
)}
>
{props.header && (
<>
<h3 className="text-xl font-semibold tracking-tight">
<h3 className="font-semibold text-xl tracking-tight">
{props.header.title}
</h3>
{props.header.description && (
<p className="text-foreground text-sm mt-1.5 mb-4">
<p className="mt-1.5 mb-4 text-foreground text-sm">
{props.header.description}
</p>
)}
@@ -41,7 +44,7 @@ export function SettingsCard(props: {
{props.children}
</div>
<div className="px-4 lg:px-6 py-3 flex items-center justify-between gap-2 min-h-[60px]">
<div className="flex min-h-[60px] items-center justify-between gap-2 px-4 py-3 lg:px-6">
{props.noPermissionText ? (
<p className="text-muted-foreground text-sm">
{props.noPermissionText}
@@ -57,11 +60,12 @@ export function SettingsCard(props: {
size="sm"
className="gap-2"
onClick={props.saveButton.onClick}
disabled={props.saveButton.disabled || props.saveButton.isLoading}
disabled={props.saveButton.disabled || props.saveButton.isPending}
variant="outline"
type={props.saveButton.type}
>
{props.saveButton.isLoading && <Spinner className="size-3" />}
{props.saveButton.isLoading ? "Saving" : "Save"}
{props.saveButton.isPending && <Spinner className="size-3" />}
{props.saveButton.isPending ? "Saving" : "Save"}
</Button>
)}
</div>
@@ -14,7 +14,7 @@ export type SidebarLink = {
};
};
export type SidebarContentProps = {
type SidebarContentProps = {
header?: React.ReactNode;
links: SidebarLink[];
className?: string;
@@ -24,7 +24,7 @@ export function Sidebar(props: SidebarContentProps) {
return (
<aside
className={cn(
"w-[230px] flex-shrink-0 hidden lg:block self-start sticky top-0",
"sticky top-0 hidden w-[230px] flex-shrink-0 self-start lg:block",
props.className,
)}
>
@@ -37,7 +37,7 @@ export function Sidebar(props: SidebarContentProps) {
<NavLink
key={link.href}
href={link.href}
className="py-2 hover:bg-muted rounded-md px-3 text-muted-foreground text-sm flex items-center gap-2"
className="flex items-center gap-2 rounded-md px-3 py-2 text-muted-foreground text-sm hover:bg-muted"
activeClassName="text-foreground"
exactMatch={link.exactMatch}
>
@@ -3,7 +3,7 @@ import { mobileViewport } from "../../../stories/utils";
import { SidebarLayout } from "./SidebarLayout";
const meta = {
title: "layouts/SidebarLayout",
title: "blocks/SidebarLayout",
component: Story,
parameters: {
nextjs: {
@@ -55,8 +55,8 @@ function Story() {
function ContentPlaceholder() {
return (
<div className="bg-muted grow flex items-center justify-center">
<p className="text-muted-foreground text-3xl"> CHILDREN </p>
<div className="flex grow items-center justify-center bg-muted">
<p className="text-3xl text-muted-foreground"> CHILDREN </p>
</div>
);
}
@@ -13,7 +13,7 @@ export function SidebarLayout(props: {
return (
<div
className={cn(
"flex flex-col lg:flex-row gap-6 container px-4 w-full grow max-sm:pt-6",
"container flex w-full grow flex-col gap-6 px-4 max-sm:pt-6 lg:flex-row",
props.className,
)}
>
@@ -23,7 +23,7 @@ export function SidebarLayout(props: {
triggerClassName={props.mobileSidebarClassName}
/>
{/* min-w-0 is enough to ensure the content inside does not stretch this container */}
<main className="grow max-sm:w-full flex flex-col lg:pt-8 pb-10 min-w-0">
<main className="flex min-w-0 grow flex-col pb-10 max-sm:w-full lg:pt-8">
{children}
</main>
</div>
@@ -21,31 +21,31 @@ export function AppFooter(props: AppFooterProps) {
return (
<footer
className={cn(
"bg-muted/50 border-t border-border py-6 md:py-8 w-full",
"w-full border-border border-t bg-muted/50 py-6 md:py-8",
props.className,
)}
>
<div className="container flex flex-col gap-4 md:gap-6">
{/* top row */}
<div className="flex flex-col md:flex-row gap-4 md:justify-between md:items-center">
<div className="flex flex-row gap-3 items-center">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex flex-row items-center gap-3">
<ThirdwebMiniLogo className="h-7" />
<p className="text-sm text-muted-foreground">© 2024 thirdweb</p>
<p className="text-muted-foreground text-sm">© 2024 thirdweb</p>
</div>
<div className="flex flex-row gap-3">
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://github.com/thirdweb-dev" target="_blank">
<SiGithub className="text-muted-foreground size-5" />
<SiGithub className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://www.tiktok.com/@thirdweb" target="_blank">
<SiTiktok className="text-muted-foreground size-5" />
<SiTiktok className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://www.instagram.com/thirdweb/" target="_blank">
<SiInstagram className="text-muted-foreground size-5" />
<SiInstagram className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
@@ -53,83 +53,83 @@ export function AppFooter(props: AppFooterProps) {
href="hhttps://www.linkedin.com/company/third-web/"
target="_blank"
>
<SiLinkedin className="text-muted-foreground size-5" />
<SiLinkedin className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://www.youtube.com/@thirdweb_" target="_blank">
<SiYoutube className="text-muted-foreground size-5" />
<SiYoutube className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://discord.gg/thirdweb" target="_blank">
<SiDiscord className="text-muted-foreground size-5" />
<SiDiscord className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://www.reddit.com/r/thirdweb/" target="_blank">
<SiReddit className="text-muted-foreground size-5" />
<SiReddit className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
<Link href="https://x.com/thirdweb" target="_blank">
<SiX className="text-muted-foreground size-5" />
<SiX className="size-5 text-muted-foreground" />
</Link>
</Button>
</div>
</div>
{/* bottom row */}
<div className="grid grid-rows-5 grid-cols-2 grid-flow-col gap-2 md:flex md:flex-row md:justify-between">
<div className="grid grid-flow-col grid-cols-2 grid-rows-5 gap-2 md:flex md:flex-row md:justify-between">
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="/"
>
Home
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://blog.thirdweb.com"
target="_blank"
>
Blog
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://portal.thirdweb.com/changelog"
target="_blank"
>
Changelog
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://feedback.thirdweb.com/"
target="_blank"
>
Feedback
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://thirdweb.com/privacy"
target="_blank"
>
Privacy Policy
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://thirdweb.com/tos"
target="_blank"
>
Terms of Service
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://thirdweb.com/gas"
target="_blank"
>
Gas Estimator
</Link>
<Link
className="py-[6px] px-[10px] text-muted-foreground text-sm hover:underline"
className="px-[10px] py-[6px] text-muted-foreground text-sm hover:underline"
href="https://thirdweb.com/chainlist"
target="_blank"
>
@@ -19,7 +19,7 @@ import {
} from "@/components/ui/chart";
import { useMemo } from "react";
export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
// metadata
title: string;
description?: string;
@@ -19,7 +19,7 @@ import {
} from "@/components/ui/chart";
import { useMemo } from "react";
export type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
type ThirdwebBarChartProps<TConfig extends ChartConfig> = {
// metadata
title: string;
description?: string;
@@ -0,0 +1,79 @@
import type { Meta, StoryObj } from "@storybook/react";
import { useMemo, useState } from "react";
import { BadgeContainer, mobileViewport } from "../../../stories/utils";
import { MultiSelect } from "./multi-select";
const meta = {
title: "blocks/MultiSelect",
component: Story,
parameters: {
nextjs: {
appDirectory: true,
},
},
} satisfies Meta<typeof Story>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Desktop: Story = {
args: {},
};
export const Mobile: Story = {
args: {},
parameters: {
viewport: mobileViewport("iphone14"),
},
};
function createList(len: number) {
return Array.from({ length: len }, (_, i) => ({
value: `${i}`,
label: `Item ${i}`,
}));
}
function Story() {
return (
<div className="mx-auto flex w-full max-w-[600px] flex-col gap-6 px-4 py-6">
<VariantTest defaultValues={[]} storyLabel="5 items" listLen={5} />
<VariantTest defaultValues={[]} storyLabel="5000 items" listLen={5000} />
<VariantTest
defaultValues={["1", "3", "5"]}
storyLabel="20 items, 3 selected by default"
listLen={20}
/>
<VariantTest
defaultValues={["1", "2", "3", "4", "5", "6", "7"]}
storyLabel="20 items, 7 selected, show max 3"
listLen={20}
maxCount={3}
/>
</div>
);
}
function VariantTest(props: {
defaultValues: string[];
maxCount?: number;
storyLabel: string;
listLen: number;
}) {
const list = useMemo(() => createList(props.listLen), [props.listLen]);
const [values, setValues] = useState<string[]>(props.defaultValues);
return (
<BadgeContainer label={props.storyLabel}>
<MultiSelect
selectedValues={values}
options={list}
onSelectedValuesChange={(values) => {
setValues(values);
}}
placeholder="Select items"
maxCount={props.maxCount}
/>
</BadgeContainer>
);
}
@@ -0,0 +1,263 @@
"use client";
import { Button } from "@/components/ui/button";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import { CheckIcon, ChevronDown, SearchIcon, XIcon } from "lucide-react";
import * as React from "react";
import { useShowMore } from "../../lib/useShowMore";
import { ScrollShadow } from "../ui/ScrollShadow/ScrollShadow";
import { Input } from "../ui/input";
interface MultiSelectProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
options: {
label: string;
value: string;
}[];
selectedValues: string[];
onSelectedValuesChange: (value: string[]) => void;
placeholder: string;
/**
* Maximum number of items to display. Extra selected items will be summarized.
* Optional, defaults to 3.
*/
maxCount?: number;
className?: string;
}
export const MultiSelect = React.forwardRef<
HTMLButtonElement,
MultiSelectProps
>(
(
{
options,
onSelectedValuesChange,
placeholder,
maxCount = Number.POSITIVE_INFINITY,
className,
selectedValues,
...props
},
ref,
) => {
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
const [searchValue, setSearchValue] = React.useState("");
const handleInputKeyDown = React.useCallback(
(event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === "Enter") {
setIsPopoverOpen(true);
} else if (event.key === "Backspace" && !event.currentTarget.value) {
const newSelectedValues = [...selectedValues];
newSelectedValues.pop();
onSelectedValuesChange(newSelectedValues);
}
},
[selectedValues, onSelectedValuesChange],
);
const toggleOption = React.useCallback(
(option: string) => {
const newSelectedValues = selectedValues.includes(option)
? selectedValues.filter((value) => value !== option)
: [...selectedValues, option];
onSelectedValuesChange(newSelectedValues);
},
[selectedValues, onSelectedValuesChange],
);
const handleClear = React.useCallback(() => {
onSelectedValuesChange([]);
}, [onSelectedValuesChange]);
const handleTogglePopover = () => {
setIsPopoverOpen((prev) => !prev);
};
const clearExtraOptions = React.useCallback(() => {
const newSelectedValues = selectedValues.slice(0, maxCount);
onSelectedValuesChange(newSelectedValues);
}, [selectedValues, onSelectedValuesChange, maxCount]);
// show 50 initially and then 20 more when reaching the end
const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
const optionsToShow = React.useMemo(() => {
const searchValLowercase = searchValue.toLowerCase();
const filteredOptions = options.filter((option) => {
return option.label.toLowerCase().includes(searchValLowercase);
});
return filteredOptions.slice(0, itemsToShow);
}, [options, searchValue, itemsToShow]);
return (
<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
<PopoverTrigger asChild>
<Button
ref={ref}
{...props}
onClick={handleTogglePopover}
className={cn(
"flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-3 hover:bg-inherit",
className,
)}
>
{selectedValues.length > 0 ? (
<div className="flex w-full justify-between">
{/* badges */}
<div className="flex flex-wrap items-center gap-1.5">
{selectedValues.slice(0, maxCount).map((value) => {
const option = options.find((o) => o.value === value);
return (
<ClosableBadge
key={value}
label={option?.label || ""}
onClose={() => toggleOption(value)}
/>
);
})}
{/* +X more */}
{selectedValues.length > maxCount && (
<ClosableBadge
label={`+ ${selectedValues.length - maxCount} more`}
onClose={clearExtraOptions}
/>
)}
</div>
<div className="flex items-center justify-between gap-2">
{/* Clear All */}
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
{/* biome-ignore lint/a11y/useFocusableInteractive: <explanation> */}
<div
role="button"
onClick={(event) => {
event.stopPropagation();
handleClear();
}}
className="rounded p-1 hover:bg-muted"
>
<XIcon className="h-4 cursor-pointer text-muted-foreground" />
</div>
<Separator
orientation="vertical"
className="flex h-full min-h-6"
/>
<ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
</div>
</div>
) : (
<div className="flex w-full items-center justify-between">
<span className="text-muted-foreground text-sm">
{placeholder}
</span>
<ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
</div>
)}
</Button>
</PopoverTrigger>
<PopoverContent
className="p-0"
align="center"
sideOffset={10}
onEscapeKeyDown={() => setIsPopoverOpen(false)}
style={{
width: "var(--radix-popover-trigger-width)",
maxHeight: "var(--radix-popover-content-available-height)",
}}
>
<div>
{/* Search */}
<div className="relative">
<Input
placeholder="Search"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
onKeyDown={handleInputKeyDown}
/>
<SearchIcon className="-translate-y-1/2 absolute top-1/2 left-4 size-4 text-muted-foreground" />
</div>
<ScrollShadow
scrollableClassName="max-h-[350px] p-1"
className="rounded"
>
{/* List */}
<div>
{optionsToShow.length === 0 && (
<div className="flex justify-center py-10">
No results found
</div>
)}
{optionsToShow.map((option, i) => {
const isSelected = selectedValues.includes(option.value);
return (
<Button
key={option.value}
role="option"
aria-selected={isSelected}
onClick={() => toggleOption(option.value)}
variant="ghost"
className="flex w-full cursor-pointer justify-start gap-3 rounded-sm px-3 py-2"
ref={
i === optionsToShow.length - 1 ? lastItemRef : undefined
}
>
<div
className={cn(
"flex size-4 items-center justify-center rounded-sm border border-foreground",
isSelected
? "bg-inverted text-inverted-foreground"
: "opacity-50 [&_svg]:invisible",
)}
>
<CheckIcon className="size-4" />
</div>
<span>{option.label}</span>
</Button>
);
})}
</div>
</ScrollShadow>
</div>
</PopoverContent>
</Popover>
);
},
);
function ClosableBadge(props: {
label: string;
onClose: () => void;
}) {
return (
<span className="flex items-center gap-3 rounded-xl border border-border bg-muted px-2 py-1 text-foreground text-xs">
{props.label}
<XIcon
className="h-3 w-3 cursor-pointer text-muted-foreground"
onClick={(e) => {
e.stopPropagation();
props.onClose();
}}
/>
</span>
);
}
MultiSelect.displayName = "MultiSelect";
@@ -6,8 +6,11 @@ import {
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
import { useThirdwebClient } from "@/constants/thirdweb.client";
import { useClipboard } from "hooks/useClipboard";
import { Check, Copy, ExternalLinkIcon } from "lucide-react";
import { useMemo, useState } from "react";
import { useMemo } from "react";
import { type ThirdwebClient, isAddress } from "thirdweb";
import { ZERO_ADDRESS } from "thirdweb";
import {
Blobbie,
@@ -16,7 +19,6 @@ import {
useSocialProfiles,
} from "thirdweb/react";
import { resolveScheme } from "thirdweb/storage";
import { thirdwebClient } from "../../constants/client";
import { cn } from "../../lib/utils";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
@@ -26,8 +28,10 @@ export function WalletAddress(props: {
shortenAddress?: boolean;
className?: string;
}) {
const thirdwebClient = useThirdwebClient();
// default back to zero address if no address provided
const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
const [shortenedAddress, lessShortenedAddress] = useMemo(() => {
return [
props.shortenAddress !== false
@@ -42,17 +46,16 @@ export function WalletAddress(props: {
client: thirdwebClient,
});
const [isCopied, setIsCopied] = useState(false);
const { onCopy, hasCopied } = useClipboard(address, 2000);
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(address);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 2000); // Reset after 2 seconds
} catch (err) {
console.error("Failed to copy: ", err);
}
};
if (!isAddress(address)) {
return <span>Invalid Address ({address})</span>;
}
// special case for zero address
if (address === ZERO_ADDRESS) {
return <span className="cursor-pointer font-mono">{shortenedAddress}</span>;
}
return (
<HoverCard>
@@ -61,14 +64,18 @@ export function WalletAddress(props: {
onClick={(e) => e.stopPropagation()}
variant="link"
className={cn(
"flex flex-row gap-2 items-center px-0",
"flex flex-row items-center gap-2 px-0",
props.className,
)}
>
{address && (
<WalletAvatar address={address} profiles={profiles.data || []} />
<WalletAvatar
address={address}
profiles={profiles.data || []}
thirdwebClient={thirdwebClient}
/>
)}
<span className="font-mono cursor-pointer">
<span className="cursor-pointer font-mono">
{profiles.data?.[0]?.name || shortenedAddress}
</span>
</Button>
@@ -82,33 +89,33 @@ export function WalletAddress(props: {
>
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">Wallet Address</h3>
<h3 className="font-semibold text-lg">Wallet Address</h3>
<Button
variant="outline"
size="sm"
onClick={copyToClipboard}
onClick={onCopy}
className="flex items-center gap-2"
>
{isCopied ? (
{hasCopied ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
{isCopied ? "Copied!" : "Copy"}
{hasCopied ? "Copied!" : "Copy"}
</Button>
</div>
<p className="text-sm font-mono bg-muted p-2 rounded text-center">
<p className="rounded bg-muted p-2 text-center font-mono text-sm">
{lessShortenedAddress}
</p>
<h3 className="text-lg font-semibold">Social Profiles</h3>
{profiles.isLoading ? (
<p className="text-sm text-muted-foreground">Loading profiles...</p>
<h3 className="font-semibold text-lg">Social Profiles</h3>
{profiles.isPending ? (
<p className="text-muted-foreground text-sm">Loading profiles...</p>
) : !profiles.data?.length ? (
<p className="text-sm text-muted-foreground">No profiles found</p>
<p className="text-muted-foreground text-sm">No profiles found</p>
) : (
profiles.data?.map((profile) => (
<div
className="flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2"
key={profile.type + profile.name}
>
{profile.avatar &&
@@ -129,13 +136,13 @@ export function WalletAddress(props: {
)}
</Avatar>
)}
<div className="flex flex-col gap-1 w-full">
<div className="flex flex-row gap-4 w-full items-center justify-between">
<h4 className="text-md font-semibold">{profile.name}</h4>
<div className="flex w-full flex-col gap-1">
<div className="flex w-full flex-row items-center justify-between gap-4">
<h4 className="font-semibold text-md">{profile.name}</h4>
<Badge variant="outline">{profile.type}</Badge>
</div>
{profile.bio && (
<p className="text-sm text-muted-foreground whitespace-normal line-clamp-1">
<p className="line-clamp-1 whitespace-normal text-muted-foreground text-sm">
{profile.bio}
</p>
)}
@@ -146,7 +153,7 @@ export function WalletAddress(props: {
<Button
asChild
variant="upsell"
className="text-sm flex flex-row gap-2 items-center"
className="flex flex-row items-center gap-2 text-sm"
size="sm"
>
<a
@@ -167,6 +174,7 @@ export function WalletAddress(props: {
function WalletAvatar(props: {
address: string;
profiles: SocialProfile[];
thirdwebClient: ThirdwebClient;
}) {
const avatar = useMemo(() => {
return props.profiles.find(
@@ -180,7 +188,7 @@ function WalletAvatar(props: {
<div className="size-6 overflow-hidden rounded-full">
{avatar ? (
<MediaRenderer
client={thirdwebClient}
client={props.thirdwebClient}
src={avatar}
className="size-6"
/>
@@ -10,7 +10,7 @@ export function ColorModeToggle() {
const { setTheme, theme } = useTheme();
return (
<ClientOnly ssr={<Skeleton className="size-10 bg-accent border" />}>
<ClientOnly ssr={<Skeleton className="size-10 border bg-accent" />}>
<Button
variant="ghost"
size="icon"
@@ -20,12 +20,12 @@ export const CodeBlock = ({
{({ className, tokens, getLineProps, getTokenProps }) => (
<Card className={className}>
{canCopy && (
<CopyButton text={code} className="float-right p-2 m-2" />
<CopyButton text={code} className="float-right m-2 p-2" />
)}
<div
className={cn(
"block font-mono text-sm whitespace-pre-wrap p-4 overflow-auto",
"block overflow-auto whitespace-pre-wrap p-4 font-mono text-sm",
className,
)}
>
@@ -1,8 +1,8 @@
"use client";
import { cn } from "@/lib/utils";
import { useClipboard } from "hooks/useClipboard";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "./button";
import { ToolTipLabel } from "./tooltip";
@@ -12,20 +12,16 @@ export function CopyButton(props: {
iconClassName?: string;
variant?: "ghost" | "primary" | "secondary";
}) {
const [isCopied, setIsCopied] = useState(false);
const { hasCopied, onCopy } = useClipboard(props.text, 1000);
return (
<ToolTipLabel label="Copy">
<Button
variant={props.variant || "ghost"}
aria-label="Copy"
className={cn("h-auto w-auto p-1", props.className)}
onClick={() => {
navigator.clipboard.writeText(props.text);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
}}
onClick={onCopy}
>
{isCopied ? (
{hasCopied ? (
<CheckIcon
className={cn("size-4 text-green-500", props.iconClassName)}
/>
@@ -1,8 +1,8 @@
"use client";
import { cn } from "@/lib/utils";
import { useClipboard } from "hooks/useClipboard";
import { CheckIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "./button";
import { ToolTipLabel } from "./tooltip";
@@ -22,15 +22,15 @@ export function CopyTextButton(props: {
copyIconPosition: "left" | "right";
onClick?: () => void;
}) {
const [isCopied, setIsCopied] = useState(false);
const copyButton = isCopied ? (
const { hasCopied, onCopy } = useClipboard(props.textToCopy, 1000);
const copyButton = hasCopied ? (
<CheckIcon
className={cn("size-3 text-green-500 shrink-0", props.iconClassName)}
className={cn("size-3 shrink-0 text-green-500", props.iconClassName)}
/>
) : (
<CopyIcon
className={cn(
"size-3 text-muted-foreground shrink-0",
"size-3 shrink-0 text-muted-foreground",
props.iconClassName,
)}
/>
@@ -42,26 +42,24 @@ export function CopyTextButton(props: {
variant={props.variant || "outline"}
aria-label={props.tooltip}
className={cn(
"h-auto w-auto px-2.5 py-1.5 flex gap-2 rounded-lg text-foreground font-normal",
"flex h-auto w-auto gap-2 rounded-lg px-2.5 py-1.5 font-normal text-foreground",
props.className,
)}
onClick={(e) => {
navigator.clipboard.writeText(props.textToCopy);
setIsCopied(true);
setTimeout(() => setIsCopied(false), 1000);
onCopy();
e.stopPropagation();
props.onClick?.();
}}
>
{props.copyIconPosition === "right" ? (
<>
<span className="truncate min-w-0"> {props.textToShow} </span>
<span className="min-w-0 truncate"> {props.textToShow} </span>
{copyButton}
</>
) : (
<>
{copyButton}
<span className="truncate min-w-0"> {props.textToShow} </span>
<span className="min-w-0 truncate"> {props.textToShow} </span>
</>
)}
</Button>
@@ -48,9 +48,9 @@ export function DatePickerWithRange(props: {
<PopoverTrigger asChild>
<Button
id="date"
variant={"outline"}
variant="outline"
className={cn(
"justify-start text-left font-normal gap-2",
"justify-start gap-2 text-left font-normal",
props.className,
)}
>
@@ -60,7 +60,7 @@ export function DatePickerWithRange(props: {
{format(from, "LLL dd, y")} - {format(to, "LLL dd, y")}
</>
)}
<ChevronDownIcon className="h-4 w-4 ml-auto text-muted-foreground" />
<ChevronDownIcon className="ml-auto h-4 w-4 text-muted-foreground" />
</Button>
</PopoverTrigger>
@@ -69,7 +69,7 @@ export function DatePickerWithRange(props: {
<DynamicHeight>
<div>
{!isValid && (
<p className="text-sm pt-2 justify-center text-destructive-text text-center flex items-center gap-2">
<p className="flex items-center justify-center gap-2 pt-2 text-center text-destructive-text text-sm">
<CalendarX2Icon className="h-4 w-4" />
Invalid date range
</p>
@@ -71,8 +71,15 @@ export function ScrollShadow(props: {
});
});
content.addEventListener("scroll", handleScroll);
const resizeObserver = new ResizeObserver(() => {
handleScroll();
});
resizeObserver.observe(content);
return () => {
content.removeEventListener("scroll", handleScroll);
resizeObserver.disconnect();
};
}, []);
@@ -87,7 +94,7 @@ export function ScrollShadow(props: {
}
>
<div
className={`${styles.scrollShadowTop} ${styles.scrollShadowY}`}
className={cn(styles.scrollShadowTop, styles.scrollShadowY)}
ref={shadowTopEl}
style={{
opacity: "0",
@@ -95,28 +102,28 @@ export function ScrollShadow(props: {
}}
/>
<div
className={`${styles.scrollShadowBottom} ${styles.scrollShadowY}`}
className={cn(styles.scrollShadowBottom, styles.scrollShadowY)}
ref={shadowBottomEl}
style={{
opacity: "0",
}}
/>
<div
className={`${styles.scrollShadowLeft} ${styles.scrollShadowX}`}
className={cn(styles.scrollShadowLeft, styles.scrollShadowX)}
ref={shadowLeftEl}
style={{
opacity: "0",
}}
/>
<div
className={`${styles.scrollShadowRight} ${styles.scrollShadowX}`}
className={cn(styles.scrollShadowRight, styles.scrollShadowX)}
ref={shadowRightEl}
style={{
opacity: "0",
}}
/>
<div
className={cn("overflow-auto no-scrollbar", props.scrollableClassName)}
className={cn("no-scrollbar overflow-auto", props.scrollableClassName)}
ref={scrollableEl}
>
{props.children}
@@ -1,10 +1,11 @@
import { cn } from "../../../lib/utils";
import style from "./Spinner.module.css";
export function Spinner(props: { className?: string }) {
return (
<svg
viewBox="0 0 50 50"
className={`${style.loader} ${props.className || "size-4"}`}
className={cn(style.loader, props.className || "size-4")}
>
<title>loading</title>
<circle
@@ -19,7 +19,7 @@ const AlertDialogOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -80,7 +80,7 @@ const AlertDialogTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn("text-lg hyphens-auto font-semibold", className)}
className={cn("hyphens-auto font-semibold text-lg", className)}
{...props}
/>
));
@@ -92,7 +92,7 @@ const AlertDialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
));
+1 -1
View File
@@ -52,7 +52,7 @@ const AlertDescription = React.forwardRef<
<div
ref={ref}
className={cn(
"text-sm [&_p]:leading-relaxed text-muted-foreground mt-1.5",
"mt-1.5 text-muted-foreground text-sm [&_p]:leading-relaxed",
className,
)}
{...props}
@@ -1,7 +0,0 @@
"use client";
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
const AspectRatio = AspectRatioPrimitive.Root;
export { AspectRatio };
@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
"flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
className,
)}
{...props}
@@ -61,6 +61,7 @@ const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
// biome-ignore lint/a11y/useFocusableInteractive: required
<span
ref={ref}
role="link"
@@ -20,7 +20,7 @@ export const AllVariants: Story = {
function Component() {
return (
<div className="min-h-screen bg-background p-6 text-foregroun flex flex-col gap-6">
<div className="flex min-h-screen flex-col gap-6 bg-background p-6 text-foregroun">
<Variants size="default" />
<Variants size="sm" />
<Variants size="icon" />
+2 -2
View File
@@ -32,7 +32,7 @@ const CardTitle = React.forwardRef<
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
"font-semibold text-2xl leading-none tracking-tight",
className,
)}
{...props}
@@ -46,7 +46,7 @@ const CardDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
));
+8 -4
View File
@@ -113,6 +113,7 @@ const ChartTooltipContent = React.forwardRef<
indicator?: "line" | "dot" | "dashed";
nameKey?: string;
labelKey?: string;
valueFormatter?: (v: unknown) => string | undefined;
}
>(
(
@@ -130,6 +131,7 @@ const ChartTooltipContent = React.forwardRef<
color,
nameKey,
labelKey,
valueFormatter,
},
ref,
) => {
@@ -231,7 +233,7 @@ const ChartTooltipContent = React.forwardRef<
)}
<div
className={cn(
"flex flex-1 gap-2 justify-between leading-none",
"flex flex-1 justify-between gap-2 leading-none",
nestLabel ? "items-end" : "items-center",
)}
>
@@ -242,8 +244,10 @@ const ChartTooltipContent = React.forwardRef<
</span>
</div>
{item.value && (
<span className="font-mono font-medium tabular-nums text-foreground">
{item.value}
<span className="font-medium font-mono text-foreground tabular-nums">
{valueFormatter
? valueFormatter(item.value) || item.value
: item.value}
</span>
)}
</div>
@@ -283,7 +287,7 @@ const ChartLegendContent = React.forwardRef<
<div
ref={ref}
className={cn(
"flex items-center justify-center gap-x-4 gap-y-2 overflow-x-auto flex-wrap",
"flex flex-wrap items-center justify-center gap-x-4 gap-y-2 overflow-x-auto",
verticalAlign === "top" ? "pb-3" : "pt-3",
className,
)}
@@ -34,9 +34,10 @@ export function CheckboxWithLabel(props: {
className?: string;
}) {
return (
// biome-ignore lint/a11y/noLabelWithoutControl: cannot do this here because the checkbox is a child of the label
<label
className={cn(
"flex gap-2 items-start text-muted-foreground text-sm cursor-pointer select-none [&>button]:mt-0.5",
"flex cursor-pointer select-none items-start gap-2 text-muted-foreground text-sm [&>button]:mt-0.5",
props.className,
)}
>
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -41,16 +41,16 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-300 rounded-t-xl md:rounded-lg border-border",
"fixed grid w-full gap-4 rounded-t-xl border border-border bg-background p-6 shadow-lg duration-300 md:max-w-lg md:rounded-lg",
// on mobile - put the dialog at the bottom of the screen, animate - slide up and fade in
"bottom-0 left-0 right-0",
"right-0 bottom-0 left-0",
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
// on desktop - vertically and horizontally center the dialog, animate - zoom and fade in
"md:bottom-auto md:left-[50%] md:top-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
"md:top-[50%] md:bottom-auto md:left-[50%] md:translate-x-[-50%] md:translate-y-[-50%] ",
"md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95 ",
"md:data-[state=closed]:slide-out-to-left-1/2 md:data-[state=closed]:slide-out-to-top-[48%] ",
"md:data-[state=open]:slide-in-from-left-1/2 md:data-[state=open]:slide-in-from-top-[48%] ",
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:animate-out data-[state=open]:animate-in",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
@@ -59,7 +59,7 @@ const DialogContent = React.forwardRef<
{children}
<DialogPrimitive.Close
className={cn(
"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
"absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
props.dialogCloseClassName,
)}
>
@@ -103,7 +103,7 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
"font-semibold text-lg leading-none tracking-tight",
className,
)}
{...props}
@@ -117,7 +117,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
));
@@ -1,118 +0,0 @@
"use client";
import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "@/lib/utils";
const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
Drawer.displayName = "Drawer";
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className,
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
);
DrawerHeader.displayName = "DrawerHeader";
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className,
)}
{...props}
/>
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
checked={checked}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
@@ -147,7 +147,7 @@ const DropdownMenuLabel = React.forwardRef<
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
"px-2 py-1.5 font-semibold text-sm",
inset && "pl-8",
className,
)}
+3 -3
View File
@@ -117,7 +117,7 @@ const RequiredFormLabel = React.forwardRef<
{...props}
>
{props.children}
<span className="absolute -top-1.5 -right-2 text-destructive-text">
<span className="-top-1.5 -right-2 absolute text-destructive-text">
•
</span>
</Label>
@@ -159,7 +159,7 @@ const FormDescription = React.forwardRef<
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
@@ -181,7 +181,7 @@ const FormMessage = React.forwardRef<
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive-text", className)}
className={cn("font-medium text-destructive-text text-sm", className)}
{...props}
>
{body}
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -31,7 +31,7 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
<div
{...getRootProps()}
className={cn(
"border bg-card relative group cursor-pointer hover:border-primary flex-col gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 overflow-hidden transition-all rounded-md flex items-center justify-center p-4 py-6 text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
"group relative flex cursor-pointer flex-col items-center justify-center gap-1.5 overflow-hidden rounded-md border bg-card p-4 py-6 text-muted-foreground transition-all hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
isDragActive ? "border-primary" : "border-input",
!activeFile ? "w-full" : "min-h-32 min-w-32",
className,
@@ -47,8 +47,8 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
/>
) : (
<>
<UploadIcon className="w-5 h-5 transition-all group-hover:scale-110" />
<p className="text-xs text-center">
<UploadIcon className="h-5 w-5 transition-all group-hover:scale-110" />
<p className="text-center text-xs">
Drag and drop a file or click to upload
</p>
</>
+1 -1
View File
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils";
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
<nav
role="navigation"
aria-label="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
{...props}
@@ -47,7 +46,7 @@ const PaginationLink = ({
<Button
variant={!isActive ? "outline" : "default"}
className={cn(
"px-3 py-2 h-auto",
"h-auto px-3 py-2",
className,
props.disabled && "cursor-not-allowed",
)}
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
@@ -29,7 +29,7 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"aspect-square h-4 w-4 rounded-full border border-inverted text-inverted ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
@@ -51,19 +51,19 @@ const RadioGroupItemButton = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"cursor-pointer group flex items-center px-3 peer-hover:border-nonce py-4 space-x-3 space-y-0 border-2 rounded-md min-w-32 font-medium hover:border-foreground/25 transition-all data-[state=checked]:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"group flex min-w-32 cursor-pointer items-center space-x-3 space-y-0 rounded-md border-2 px-3 py-4 font-medium transition-all hover:border-foreground/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 peer-hover:border-nonce data-[state=checked]:border-inverted",
className,
)}
{...props}
>
<div className="flex items-center justify-center w-4 h-4 border-2 rounded-full transition-all group-data-[state=checked]:border-primary text-primary group-hover:border-foreground/25 aspect-square ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
<div className="flex aspect-square h-4 w-4 items-center justify-center rounded-full border-2 text-inverted ring-offset-background transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 group-hover:border-foreground/25 group-data-[state=checked]:border-inverted">
{/* Show on checked */}
<RadioGroupPrimitive.Indicator className="flex items-center justify-center transition-all rounded-full">
<Circle className="w-2 h-2 text-current fill-current" />
<RadioGroupPrimitive.Indicator className="flex items-center justify-center rounded-full transition-all">
<Circle className="h-2 w-2 fill-current text-current" />
</RadioGroupPrimitive.Indicator>
{/* Show on hover */}
<div className="items-center justify-center hidden transition-all rounded-full text-foreground/25 group-hover:flex group-data-[state=checked]:hidden">
<Circle className="w-2 h-2 text-current fill-current" />
<div className="hidden items-center justify-center rounded-full text-foreground/25 transition-all group-hover:flex group-data-[state=checked]:hidden">
<Circle className="h-2 w-2 fill-current text-current" />
</div>
</div>
<Label className="cursor-pointer">{props.children}</Label>
@@ -31,7 +31,7 @@ function randomName() {
function Component() {
return (
<div className="min-h-screen bg-background p-6 text-foregroun flex flex-col gap-10">
<div className="flex min-h-screen flex-col gap-10 bg-background p-6 text-foregroun">
<BadgeContainer label="5 items, no placeholder, no label, value filled">
<SelectDemo listItems={5} selectFirst />
</BadgeContainer>
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex gap-2 h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
@@ -87,9 +87,9 @@ const SelectContent = React.forwardRef<
};
}}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
"data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",
className,
)}
position={position}
@@ -117,7 +117,7 @@ const SelectLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
className={cn("py-1.5 pr-2 pl-8 font-semibold text-sm", className)}
{...props}
/>
));
@@ -130,7 +130,7 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
@@ -0,0 +1,143 @@
"use client";
import * as SheetPrimitive from "@radix-ui/react-dialog";
import { type VariantProps, cva } from "class-variance-authority";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
const Sheet = SheetPrimitive.Root;
const SheetTrigger = SheetPrimitive.Trigger;
const SheetClose = SheetPrimitive.Close;
const SheetPortal = SheetPrimitive.Portal;
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
className,
)}
{...props}
ref={ref}
/>
));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border",
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
},
},
defaultVariants: {
side: "right",
},
},
);
interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm border-border opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
));
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 border-border text-center sm:text-left",
className,
)}
{...props}
/>
);
SheetHeader.displayName = "SheetHeader";
const SheetFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse border-border sm:flex-row sm:justify-end sm:space-x-2",
className,
)}
{...props}
/>
);
SheetFooter.displayName = "SheetFooter";
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn(
"border-border font-semibold text-foreground text-lg",
className,
)}
{...props}
/>
));
SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn("border-border text-muted-foreground text-sm", className)}
{...props}
/>
));
SheetDescription.displayName = SheetPrimitive.Description.displayName;
export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
};
@@ -25,7 +25,7 @@ function SkeletonContainer<T>(props: {
style={props.style}
aria-hidden={isLoading ? "true" : "false"}
className={cn(
isLoading && "animate-pulse rounded-lg bg-muted inline-block",
isLoading && "inline-block animate-pulse rounded-lg bg-muted",
props.className,
)}
>
@@ -36,7 +36,7 @@ export const Mobile: Story = {
function Component() {
return (
<div className="flex flex-col gap-6 lg:max-w-[1000px] lg:mx-auto min-w-0 py-6 px-4">
<div className="flex min-w-0 flex-col gap-6 px-4 py-6 lg:mx-auto lg:max-w-[1000px]">
<BadgeContainer label="Normal">
<TableDemo />
</BadgeContainer>
+8 -8
View File
@@ -10,7 +10,7 @@ const Table = React.forwardRef<
<table
ref={ref}
className={cn(
"caption-bottom w-full text-sm border-collapse tabular-nums lining-nums align-top",
"w-full caption-bottom border-collapse align-top text-sm lining-nums tabular-nums",
className,
)}
{...props}
@@ -25,7 +25,7 @@ const TableHeader = React.forwardRef<
<thead
ref={ref}
className={cn(
"bg-muted/50 border-b border-border [&_tr]:border-b",
"border-border border-b bg-muted/50 [&_tr]:border-b",
className,
)}
{...props}
@@ -53,7 +53,7 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
"border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
"border-border border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className,
)}
{...props}
@@ -68,7 +68,7 @@ const TableRow = React.forwardRef<
<tr
ref={ref}
className={cn(
"border-b border-border last:border-0 data-[state=selected]:bg-muted",
"border-border border-b last:border-0 data-[state=selected]:bg-muted",
className,
)}
{...props}
@@ -83,7 +83,7 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"px-6 py-4 uppercase text-xs text-left tracking-wider align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
"px-6 py-4 text-left align-middle font-medium text-muted-foreground text-xs uppercase tracking-wider [&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
@@ -98,7 +98,7 @@ const TableCell = React.forwardRef<
<td
ref={ref}
className={cn(
"px-6 py-4 text-sm text-start align-middle [&:has([role=checkbox])]:pr-0",
"px-6 py-4 text-start align-middle text-sm [&:has([role=checkbox])]:pr-0",
className,
)}
{...props}
@@ -112,7 +112,7 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("text-sm text-muted-foreground py-4", className)}
className={cn("py-4 text-muted-foreground text-sm", className)}
{...props}
/>
));
@@ -121,7 +121,7 @@ TableCaption.displayName = "TableCaption";
function TableContainer(props: { children: React.ReactNode }) {
return (
<ScrollShadow
className="border border-border rounded-lg whitespace-nowrap relative"
className="relative whitespace-nowrap rounded-lg border border-border"
shadowColor="hsl(var(--muted))"
>
{props.children}
+6 -6
View File
@@ -27,7 +27,7 @@ export function TabLinks(props: {
return (
<div className={cn("relative", props.className)}>
{/* Bottom line */}
<div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
<ScrollShadow
scrollableClassName="pb-[8px] relative"
@@ -51,7 +51,7 @@ export function TabLinks(props: {
href={tab.href}
aria-disabled={tab.isDisabled}
className={cn(
"rounded-lg hover:bg-muted px-3 font-normal text-sm lg:text-sm relative h-auto text-muted-foreground",
"relative h-auto rounded-lg px-3 font-normal text-muted-foreground text-sm hover:bg-muted lg:text-sm",
!tab.isActive && !tab.isDisabled && "hover:text-foreground",
tab.isDisabled && "pointer-events-none",
tab.isActive && "!text-foreground",
@@ -67,7 +67,7 @@ export function TabLinks(props: {
{/* Active line */}
<div
ref={lineRef}
className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
/>
</ScrollShadow>
</div>
@@ -94,7 +94,7 @@ export function TabButtons(props: {
return (
<div className={cn("relative", props.containerClassName)}>
{/* Bottom line */}
<div className="h-[1px] bg-border absolute bottom-0 left-0 right-0" />
<div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
<ScrollShadow
scrollableClassName="pb-[8px] relative"
@@ -111,7 +111,7 @@ export function TabButtons(props: {
variant="ghost"
ref={tab.isActive ? activeTabRef : undefined}
className={cn(
"rounded-lg hover:bg-accent px-2 lg:px-3 font-medium text-sm lg:text-base relative h-auto inline-flex gap-1.5 items-center",
"relative inline-flex h-auto items-center gap-1.5 rounded-lg px-2 font-medium text-sm hover:bg-accent lg:px-3 lg:text-base",
!tab.isActive &&
"text-muted-foreground hover:text-foreground",
!tab.isEnabled && "cursor-not-allowed opacity-50",
@@ -130,7 +130,7 @@ export function TabButtons(props: {
{/* Active line */}
<div
ref={lineRef}
className="absolute left-0 bottom-0 h-[2px] bg-foreground rounded-lg fade-in-0 animate-in"
className="fade-in-0 absolute bottom-0 left-0 h-[2px] animate-in rounded-lg bg-foreground"
/>
</ScrollShadow>
</div>
@@ -1,61 +0,0 @@
"use client";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { toggleVariants } from "@/components/ui/toggle";
import { cn } from "@/lib/utils";
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
});
const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, children, ...props }, ref) => (
<ToggleGroupPrimitive.Root
ref={ref}
className={cn("flex items-center justify-center gap-1", className)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext);
return (
<ToggleGroupPrimitive.Item
ref={ref}
className={cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size,
}),
className,
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
export { ToggleGroup, ToggleGroupItem };
@@ -1,45 +0,0 @@
"use client";
import * as TogglePrimitive from "@radix-ui/react-toggle";
import { type VariantProps, cva } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
{
variants: {
variant: {
default: "bg-transparent",
outline:
"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
},
size: {
default: "h-10 px-3",
sm: "h-9 px-2.5",
lg: "h-11 px-5",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
VariantProps<typeof toggleVariants>
>(({ className, variant, size, ...props }, ref) => (
<TogglePrimitive.Root
ref={ref}
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
));
Toggle.displayName = TogglePrimitive.Root.displayName;
export { Toggle, toggleVariants };
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-popover-foreground text-sm shadow-md data-[state=closed]:animate-out",
className,
)}
{...props}
@@ -48,9 +48,9 @@ export function ToolTipLabel(props: {
</TooltipTrigger>
<TooltipContent
sideOffset={10}
className="max-w-[400px] leading-relaxed whitespace-normal"
className="max-w-[400px] whitespace-normal leading-relaxed"
>
<div className="p-2 text-sm flex items-center gap-1.5">
<div className="flex items-center gap-1.5 p-2 text-sm">
{props.leftIcon}
{props.label}
{props.rightIcon}
+2 -2
View File
@@ -6,8 +6,8 @@ const LOGGED_IN_ONLY_PATHS = [
// anything that _starts_ with /cli is logged in only
"/cli",
"/support",
// TODO: add any other logged in only paths here
// publish page
"/contracts/publish",
];
export function isLoginRequired(pathname: string) {
-30
View File
@@ -1,30 +0,0 @@
import {
DASHBOARD_THIRDWEB_CLIENT_ID,
DASHBOARD_THIRDWEB_SECRET_KEY,
IPFS_GATEWAY_URL,
} from "@/constants/env";
import { createThirdwebClient } from "thirdweb";
export const thirdwebClient = createThirdwebClient(
DASHBOARD_THIRDWEB_SECRET_KEY
? {
secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
config: {
storage: {
gatewayUrl: IPFS_GATEWAY_URL,
},
},
}
: {
clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
config: {
storage: {
gatewayUrl: IPFS_GATEWAY_URL,
},
},
},
);
/**
* DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
*/
+10
View File
@@ -1,2 +1,12 @@
import { cookies } from "next/headers";
export const COOKIE_ACTIVE_ACCOUNT = "tw_active_account";
export const COOKIE_PREFIX_TOKEN = "tw_token_";
export function getActiveAccountCookie() {
return cookies().get(COOKIE_ACTIVE_ACCOUNT)?.value;
}
export function getJWTCookie(address: string) {
return cookies().get(COOKIE_PREFIX_TOKEN + address)?.value;
}
+4
View File
@@ -16,3 +16,7 @@ export const isProd =
"production";
export const PROD_OR_DEV_URL = isProd ? "thirdweb.com" : "thirdweb-dev.com";
export const DASHBOARD_STORAGE_URL =
process.env.NEXT_PUBLIC_DASHBOARD_UPLOAD_SERVER ||
"https://storage.thirdweb.com";
@@ -0,0 +1,40 @@
import { useQuery } from "@tanstack/react-query";
import { useMemo } from "react";
import { useActiveAccount } from "thirdweb/react";
import type { GetAuthTokenResponse } from "../../app/api/auth/get-auth-token/route";
import { getThirdwebClient } from "./thirdweb.server";
// returns a thirdweb client with optional JWT passed i
export function useThirdwebClient(jwt?: string) {
const account = useActiveAccount();
const query = useQuery({
queryKey: ["jwt", account?.address],
// only enable the query if there is an account and no JWT is passed in directly
enabled: !!account && !jwt,
retry: false,
queryFn: async () => {
if (!account) {
throw new Error("No account");
}
const res = await fetch(
`/api/auth/get-auth-token?address=${account.address}`,
);
if (!res.ok) {
throw new Error("Failed to get auth token");
}
const json = (await res.json()) as GetAuthTokenResponse;
return json.jwt || undefined;
},
});
return useMemo(
// prfer jwt from props over the one from the token query if it exists
() => getThirdwebClient(jwt || query.data),
[jwt, query.data],
);
}
/**
* DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
*/
@@ -0,0 +1,42 @@
import {
DASHBOARD_THIRDWEB_CLIENT_ID,
DASHBOARD_THIRDWEB_SECRET_KEY,
IPFS_GATEWAY_URL,
} from "@/constants/env";
import {
THIRDWEB_INAPP_WALLET_DOMAIN,
THIRDWEB_PAY_DOMAIN,
THIRDWEB_RPC_DOMAIN,
THIRDWEB_SOCIAL_API_DOMAIN,
THIRDWEB_STORAGE_DOMAIN,
} from "constants/urls";
import { createThirdwebClient } from "thirdweb";
import { setThirdwebDomains } from "thirdweb/utils";
import { getVercelEnv } from "../../lib/vercel-utils";
// returns a thirdweb client with optional JWT passed in
export function getThirdwebClient(jwt?: string) {
if (getVercelEnv() !== "production") {
// if not on production: run this when creating a client to set the domains
setThirdwebDomains({
rpc: THIRDWEB_RPC_DOMAIN,
inAppWallet: THIRDWEB_INAPP_WALLET_DOMAIN,
pay: THIRDWEB_PAY_DOMAIN,
storage: THIRDWEB_STORAGE_DOMAIN,
social: THIRDWEB_SOCIAL_API_DOMAIN,
});
}
return createThirdwebClient({
secretKey: jwt ? jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
config: {
storage: {
gatewayUrl: IPFS_GATEWAY_URL,
},
},
});
}
/**
* DO NOT ADD ANYTHING TO THIS FILE IF YOU ARE NOT ABSOLUTELY SURE IT IS OK
*/
+2 -2
View File
@@ -15,7 +15,7 @@ import { createStore } from "./reactive";
// Using useDashboardRouter instead of useRouter gives us a nice progress bar on top of the page when navigating using router.push or router.replace
// using a store instead of context to avoid triggering re-renders on root component
export const LoadingRouteHref = createStore<string | undefined>(undefined);
const LoadingRouteHref = createStore<string | undefined>(undefined);
export function useDashboardRouter() {
const router = useRouter();
@@ -117,7 +117,7 @@ function DashboardRouterTopProgressBarInner() {
const width = isLoading ? progress : 100;
return (
<span
className="block fixed top-0 h-[2px] bg-blue-500"
className="fixed top-0 block h-[2px] bg-blue-500"
style={{
opacity: isLoading ? "100" : "0",
width: `${width}%`,
+6
View File
@@ -1,3 +1,5 @@
import { useSyncExternalStore } from "react";
export type Store<T> = {
getValue(): T;
setValue(newValue: T): void;
@@ -45,3 +47,7 @@ export function createStore<T>(initialValue: T): Store<T> {
},
};
}
export function useStore<T>(store: Store<T>): T {
return useSyncExternalStore(store.subscribe, store.getValue, store.getValue);
}
+37
View File
@@ -0,0 +1,37 @@
"use client";
import { useCallback, useState } from "react";
/**
*
* @internal
*/
export function useShowMore<T extends HTMLElement>(
initialItemsToShow: number,
itemsToAdd: number,
) {
// start with showing first `initialItemsToShow` items, when the last item is in view, show `itemsToAdd` more
const [itemsToShow, setItemsToShow] = useState(initialItemsToShow);
const lastItemRef = useCallback(
(node: T) => {
if (!node) {
return;
}
const observer = new IntersectionObserver(
(entries) => {
if (entries[0]?.isIntersecting) {
setItemsToShow((prev) => prev + itemsToAdd); // show 10 more items
}
},
{ threshold: 1 },
);
observer.observe(node);
// when the node is removed from the DOM, observer will be disconnected automatically by the browser
},
[itemsToAdd],
);
return { itemsToShow, lastItemRef };
}
+24 -1
View File
@@ -27,7 +27,7 @@
--muted-foreground: 0 0% 40%;
--accent-foreground: 0 0% 9%;
--destructive-foreground: 0 0% 100%;
--inverted-foreground: var(--background);
--inverted-foreground: 0 0% 100%;
--link-foreground: 221.21deg 83.19% 53.33%;
--success-text: 142.09 70.56% 35.29%;
--warning-text: 38 92% 40%;
@@ -72,6 +72,7 @@
--warning-text: 38 92% 50%;
--destructive-text: 360 72% 55%;
--success-text: 142 75% 50%;
--inverted-foreground: 0 0% 0%;
/* Borders */
--border: 0 0% 15%;
@@ -138,3 +139,25 @@
scrollbar-width: none; /* Firefox */
}
}
html {
height: 100%;
}
body {
min-height: 100%;
}
/* Fix colors on autofilled inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
/* Revert text color */
-webkit-text-fill-color: hsl(var(--foreground)) !important;
color: hsl(var(--foreground)) !important;
caret-color: hsl(var(--foreground)) !important;
/* Revert background color */
transition: background-color 5000s ease-in-out 0s;
}
@@ -1,6 +1,3 @@
import type { ContractType } from "constants/contracts";
import { ZERO_ADDRESS } from "thirdweb";
export const networkKeys = {
all: ["network"] as const,
chain: (chainId?: number) => [...networkKeys.all, chainId] as const,
@@ -107,59 +104,11 @@ export const engineKeys = {
[...engineKeys.all, engineId, "systemMetrics"] as const,
queueMetrics: (engineId: string) =>
[...engineKeys.all, engineId, "queueMetrics"] as const,
};
export const contractKeys = {
all: ["contract"] as const,
lists: () => [...contractKeys.all, "list"] as const,
list: (address = ZERO_ADDRESS) => [...contractKeys.lists(), address] as const,
listWithFilters: (address = ZERO_ADDRESS, filters?: ContractType[]) =>
[...contractKeys.list(address), { filters }] as const,
details: () => [...contractKeys.all, "detail"] as const,
detail: (address: string = ZERO_ADDRESS) =>
[...contractKeys.details(), address] as const,
};
export const walletKeys = {
all: ["balance"] as const,
balances: (walletAddress: string) =>
[...splitsKeys.all, walletAddress] as const,
};
export const splitsKeys = {
all: ["splits"] as const,
lists: () => [...splitsKeys.all, "list"] as const,
list: (address = ZERO_ADDRESS) => [...splitsKeys.lists(), address] as const,
detail: (address = ZERO_ADDRESS) => [...splitsKeys.all, address] as const,
currencies: (address = ZERO_ADDRESS) =>
[...splitsKeys.detail(address), "currencies"] as const,
balances: (address = ZERO_ADDRESS) =>
[...splitsKeys.detail(address), "balances"] as const,
};
export const voteKeys = {
all: ["vote"] as const,
detail: (address = ZERO_ADDRESS) => [...voteKeys.all, address] as const,
proposals: (address = ZERO_ADDRESS) =>
[...voteKeys.detail(address), "proposals"] as const,
proposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
[...voteKeys.proposals(address), proposalId] as const,
balances: (address = ZERO_ADDRESS, addresses = [] as string[]) =>
[...voteKeys.detail(address), "balances", { addresses }] as const,
delegations: (address = ZERO_ADDRESS) =>
[...voteKeys.detail(address), "delegations"] as const,
delegation: (address = ZERO_ADDRESS, userAddress = ZERO_ADDRESS) =>
[...voteKeys.delegations(address), userAddress] as const,
userHasVotedOnProposal: (
proposalId = "-1",
address = ZERO_ADDRESS,
userAddress = ZERO_ADDRESS,
) =>
[
...voteKeys.proposal(proposalId, address),
"hasVotedOnProposal",
userAddress,
] as const,
canExecuteProposal: (proposalId = "-1", address = ZERO_ADDRESS) =>
[...voteKeys.proposal(proposalId, address), "canExecute"] as const,
alertRules: (engineId: string) =>
[...engineKeys.all, engineId, "alertRules"] as const,
alerts: (engineId: string) =>
[...engineKeys.all, engineId, "alerts"] as const,
notificationChannels: (engineId: string) =>
[...engineKeys.all, engineId, "notificationChannels"] as const,
};
@@ -2,25 +2,32 @@
import { Spinner } from "@/components/ui/Spinner/Spinner";
import { Button } from "@/components/ui/button";
import { thirdwebClient } from "@/constants/client";
import { useThirdwebClient } from "@/constants/thirdweb.client";
import { useStore } from "@/lib/reactive";
import { getSDKTheme } from "app/components/sdk-component-theme";
import { CustomChainRenderer } from "components/selects/CustomChainRenderer";
import { mapV4ChainToV5Chain } from "contexts/map-chains";
import { useTrack } from "hooks/analytics/useTrack";
import { useSupportedChains } from "hooks/chains/configureChains";
import {
useAddRecentlyUsedChainId,
useRecentlyUsedChains,
} from "hooks/chains/recentlyUsedChains";
import { useSetIsNetworkConfigModalOpen } from "hooks/networkConfigModal";
import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCallback, useMemo } from "react";
import { useCallback, useMemo, useState } from "react";
import type { Chain } from "thirdweb";
import { AutoConnect, ConnectButton, useConnectModal } from "thirdweb/react";
import { useFavoriteChains } from "../../hooks/useFavoriteChains";
import {
AutoConnect,
ConnectButton,
type NetworkSelectorProps,
useConnectModal,
} from "thirdweb/react";
import { useFavoriteChainIds } from "../../../../app/(dashboard)/(chain)/components/client/star-button";
import { LazyConfigureNetworkModal } from "../../../../components/configure-networks/LazyConfigureNetworkModal";
import { useAllChainsData } from "../../../../hooks/chains/allChains";
import {
type StoredChain,
addRecentlyUsedChainId,
recentlyUsedChainIdsStore,
} from "../../../../stores/chainStores";
import { useLoggedInUser } from "../../hooks/useLoggedInUser";
import { popularChains } from "../popularChains";
@@ -29,48 +36,96 @@ export const CustomConnectWallet = (props: {
connectButtonClassName?: string;
detailsButtonClassName?: string;
}) => {
const thirdwebClient = useThirdwebClient();
const loginRequired =
props.loginRequired === undefined ? true : props.loginRequired;
const { theme } = useTheme();
const recentChainsv4 = useRecentlyUsedChains();
const addRecentlyUsedChainId = useAddRecentlyUsedChainId();
// const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
const t = theme === "light" ? "light" : "dark";
const allv4Chains = useSupportedChains();
const favChainsQuery = useFavoriteChains();
const setIsNetworkConfigModalOpen = useSetIsNetworkConfigModalOpen();
const allChains = useMemo(() => {
return allv4Chains.map(mapV4ChainToV5Chain);
}, [allv4Chains]);
const chainSections = useMemo(() => {
const { theme } = useTheme();
const t = theme === "light" ? "light" : "dark";
// chains
const favChainIdsQuery = useFavoriteChainIds();
const recentChainIds = useStore(recentlyUsedChainIdsStore);
const { idToChain, allChains } = useAllChainsData();
const allChainsWithMetadata = useMemo(
() => allChains.map(mapV4ChainToV5Chain),
[allChains],
);
const recentlyUsedChainsWithMetadata = useMemo(
() =>
recentChainIds
.map((id) => {
const c = idToChain.get(id);
// eslint-disable-next-line no-restricted-syntax
return c ? mapV4ChainToV5Chain(c) : undefined;
})
.filter((x) => !!x),
[recentChainIds, idToChain],
);
const favoriteChainsWithMetadata = useMemo(() => {
return (favChainIdsQuery.data || [])
.map((id) => {
const c = idToChain.get(Number(id));
// eslint-disable-next-line no-restricted-syntax
return c ? mapV4ChainToV5Chain(c) : undefined;
})
.filter((x) => !!x);
}, [idToChain, favChainIdsQuery.data]);
const popularChainsWithMetadata = useMemo(() => {
// eslint-disable-next-line no-restricted-syntax
return popularChains.map((x) =>
// eslint-disable-next-line no-restricted-syntax
{
const v4Chain = idToChain.get(x.id);
// eslint-disable-next-line no-restricted-syntax
return v4Chain ? mapV4ChainToV5Chain(v4Chain) : x;
},
);
}, [idToChain]);
// Network Config Modal
const [isNetworkConfigModalOpen, setIsNetworkConfigModalOpen] =
useState(false);
const [editChain, setEditChain] = useState<StoredChain | undefined>(
undefined,
);
const chainSections: NetworkSelectorProps["sections"] = useMemo(() => {
return [
{
label: "Favorites",
chains: favChainsQuery.data.map(mapV4ChainToV5Chain),
},
{
label: "Popular",
chains: popularChains,
chains: favoriteChainsWithMetadata,
},
{
label: "Recent",
chains: recentChainsv4.map(mapV4ChainToV5Chain),
chains: recentlyUsedChainsWithMetadata,
},
{
label: "Popular",
chains: popularChainsWithMetadata,
},
];
}, [recentChainsv4, favChainsQuery.data]);
}, [
recentlyUsedChainsWithMetadata,
favoriteChainsWithMetadata,
popularChainsWithMetadata,
]);
// ensures login status on pages that need it
const { isLoading, isLoggedIn } = useLoggedInUser();
const { isPending, isLoggedIn } = useLoggedInUser();
const pathname = usePathname();
if (isLoading) {
if (isPending) {
return (
<>
<div className="w-[144px] h-[48px] bg-muted border border-border rounded-lg flex items-center justify-center">
<div className="flex h-[48px] w-[144px] items-center justify-center rounded-lg border border-border bg-muted">
<Spinner className="size-4" />
</div>
{/* need autoconnect here so that we actually connect */}
{/* need auto connect here so that we actually connect */}
<AutoConnect client={thirdwebClient} />
</>
);
@@ -86,61 +141,80 @@ export const CustomConnectWallet = (props: {
Sign In
</Link>
</Button>
{/* need autoconnect here so that we actually connect */}
{/* need auto connect here so that we actually connect */}
<AutoConnect client={thirdwebClient} />
</>
);
}
return (
<ConnectButton
theme={getSDKTheme(t)}
client={thirdwebClient}
connectModal={{
privacyPolicyUrl: "/privacy",
termsOfServiceUrl: "/tos",
showThirdwebBranding: false,
welcomeScreen: () => <ConnectWalletWelcomeScreen theme={t} />,
}}
appMetadata={{
name: "thirdweb",
logoUrl: "https://thirdweb.com/favicon.ico",
url: "https://thirdweb.com",
}}
onDisconnect={async () => {
try {
// log out the user
await fetch("/api/auth/logout", {
method: "POST",
});
} catch (err) {
console.error("Failed to log out", err);
}
}}
connectButton={{
className: props.connectButtonClassName,
}}
detailsButton={{
className: props.detailsButtonClassName,
}}
chains={allChains}
detailsModal={{
networkSelector: {
sections: chainSections,
onSwitch(chain) {
addRecentlyUsedChainId(chain.id);
<>
<ConnectButton
theme={getSDKTheme(t)}
client={thirdwebClient}
connectModal={{
privacyPolicyUrl: "/privacy",
termsOfServiceUrl: "/tos",
showThirdwebBranding: false,
welcomeScreen: () => <ConnectWalletWelcomeScreen theme={t} />,
}}
appMetadata={{
name: "thirdweb",
logoUrl: "https://thirdweb.com/favicon.ico",
url: "https://thirdweb.com",
}}
onDisconnect={async () => {
try {
// log out the user
await fetch("/api/auth/logout", {
method: "POST",
});
} catch (err) {
console.error("Failed to log out", err);
}
}}
connectButton={{
className: props.connectButtonClassName,
}}
detailsButton={{
className: props.detailsButtonClassName,
}}
chains={allChainsWithMetadata}
detailsModal={{
networkSelector: {
sections: chainSections,
onSwitch(chain) {
addRecentlyUsedChainId(chain.id);
},
renderChain(props) {
return (
<CustomChainRenderer
{...props}
openEditChainModal={(c) => {
setIsNetworkConfigModalOpen(true);
setEditChain(c);
}}
/>
);
},
onCustomClick: () => {
setEditChain(undefined);
setIsNetworkConfigModalOpen(true);
},
},
renderChain: CustomChainRenderer,
onCustomClick: () => {
setIsNetworkConfigModalOpen(true);
},
},
}}
/>
}}
/>
<LazyConfigureNetworkModal
open={isNetworkConfigModalOpen}
onOpenChange={setIsNetworkConfigModalOpen}
editChain={editChain}
/>
</>
);
};
export function ConnectWalletWelcomeScreen(props: {
function ConnectWalletWelcomeScreen(props: {
theme: "light" | "dark";
subtitle?: string;
}) {
@@ -153,7 +227,7 @@ export function ConnectWalletWelcomeScreen(props: {
backgroundColor: props.theme === "dark" ? "#18132f" : "#c7b5f1",
backgroundImage: `url("/assets/connect-wallet/welcome-gradient-${props.theme}.png")`,
}}
className="flex flex-col p-6 h-full bg-cover bg-center bg-no-repeat"
className="flex h-full flex-col bg-center bg-cover bg-no-repeat p-6"
>
<div className="flex flex-grow flex-col justify-center">
<div>
@@ -174,7 +248,7 @@ export function ConnectWalletWelcomeScreen(props: {
<div className="h-10" />
<h2
className="text-xl text-center font-semibold"
className="text-center font-semibold text-xl"
style={{
color: fontColor,
}}
@@ -185,7 +259,7 @@ export function ConnectWalletWelcomeScreen(props: {
<div className="h-4" />
<p
className="text-center opacity-80 font-semibold"
className="text-center font-semibold opacity-80"
style={{
color: fontColor,
}}
@@ -196,7 +270,7 @@ export function ConnectWalletWelcomeScreen(props: {
</div>
<TrackedAnchorLink
className="text-center font-semibold opacity-70 hover:opacity-100 hover:no-underline"
className="text-center font-semibold opacity-70 hover:no-underline hover:opacity-100"
target="_blank"
category="custom-connect-wallet"
label="new-to-wallets"
@@ -214,6 +288,7 @@ export function ConnectWalletWelcomeScreen(props: {
export function useCustomConnectModal() {
const { connect } = useConnectModal();
const { theme } = useTheme();
const thirdwebClient = useThirdwebClient();
return useCallback(
(options?: { chain?: Chain }) => {
@@ -236,7 +311,7 @@ export function useCustomConnectModal() {
theme: getSDKTheme(theme === "light" ? "light" : "dark"),
});
},
[connect, theme],
[connect, theme, thirdwebClient],
);
}
@@ -1,3 +1,2 @@
export * from "./useActiveChainId";
export * from "./useCommon";
export * from "./useWalletNFTs";
@@ -39,7 +39,11 @@ export function useQueryWithNetwork<
networkKeys.chain(activeChainId) as readonly unknown[]
).concat(queryKey) as unknown as TQueryKey;
return useQuery(combinedQueryKey, queryFn, mergedOptions);
return useQuery({
...mergedOptions,
queryKey: combinedQueryKey,
queryFn,
});
}
export function useMutationWithInvalidate<
TData = unknown,
@@ -71,19 +75,20 @@ export function useMutationWithInvalidate<
(cacheKeysToInvalidate: TQueryKey[]) => {
return Promise.all(
cacheKeysToInvalidate.map((cacheKey) => {
return queryClient.invalidateQueries(
(networkKeys.chain(activeChainId) as readonly unknown[]).concat(
cacheKey,
) as unknown[],
);
return queryClient.invalidateQueries({
queryKey: (
networkKeys.chain(activeChainId) as readonly unknown[]
).concat(cacheKey) as unknown[],
});
}),
);
},
[queryClient, activeChainId],
);
return useMutation(mutationFn, {
return useMutation({
...options,
mutationFn,
onSuccess: (...args) => {
if (options?.onSuccess) {
options.onSuccess(...args, invalidate);
@@ -17,10 +17,14 @@ export type EVMContractInfo = {
type SetEVMContractInfo = (info: EVMContractInfo) => void;
// Legacy: will be removed with contract page -> app router refactor
// eslint-disable-next-line no-restricted-syntax
const EVMContractInfoContext = createContext<EVMContractInfo | undefined>(
undefined,
);
// Legacy: will be removed with contract page -> app router refactor
// eslint-disable-next-line no-restricted-syntax
const SetEVMContractInfoContext = createContext<SetEVMContractInfo | undefined>(
undefined,
);
@@ -5,7 +5,6 @@ import {
useQueryClient,
} from "@tanstack/react-query";
import { THIRDWEB_ANALYTICS_API_HOST, THIRDWEB_API_HOST } from "constants/urls";
import type { ChainMetadata } from "thirdweb/chains";
import invariant from "tiny-invariant";
import { accountKeys, apiKeys, authorizedWallets } from "../cache-keys";
import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
@@ -172,7 +171,7 @@ interface UpdateKeyServiceInput {
actions?: string[];
}
interface CreateKeyInput {
export interface CreateKeyInput {
name?: string;
domains?: string[];
bundleIds?: string[];
@@ -254,15 +253,16 @@ export interface BillingCredit {
interface UseAccountInput {
refetchInterval?:
| number
| false
| ((
data: Account | undefined,
query: Query<
Account,
unknown,
Error,
Account,
readonly ["account", string, "me"]
>,
) => number | false);
) => number | false | undefined)
| undefined;
}
export function useAccount({ refetchInterval }: UseAccountInput = {}) {
@@ -286,7 +286,7 @@ export function useAccount({ refetchInterval }: UseAccountInput = {}) {
return json.data as Account;
},
enabled: !!user?.address && isLoggedIn,
refetchInterval: refetchInterval ?? false,
refetchInterval,
});
}
@@ -444,8 +444,8 @@ export function useUpdateAccount() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutationWithInvalidate(
async (input: UpdateAccountInput) => {
return useMutation({
mutationFn: async (input: UpdateAccountInput) => {
invariant(user?.address, "walletAddress is required");
const res = await fetch(`${THIRDWEB_API_HOST}/v1/account`, {
@@ -465,14 +465,13 @@ export function useUpdateAccount() {
return json.data;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
accountKeys.me(user?.address as string),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
});
},
);
});
}
export function useUpdateAccountPlan(waitForWebhook?: boolean) {
@@ -507,13 +506,15 @@ export function useUpdateAccountPlan(waitForWebhook?: boolean) {
return json.data;
},
{
onSuccess: () => {
onSuccess: async () => {
// invalidate usage data as limits are different
queryClient.invalidateQueries(accountKeys.me(user?.address as string));
await queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
});
return queryClient.invalidateQueries(
accountKeys.usage(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: accountKeys.usage(user?.address as string),
});
},
},
);
@@ -545,9 +546,9 @@ export function useUpdateNotifications() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
accountKeys.me(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
});
},
},
);
@@ -608,16 +609,19 @@ export function useConfirmEmail() {
return json.data;
},
{
onSuccess: () => {
onSuccess: async () => {
// invalidate related cache, since could be relinking account
queryClient.invalidateQueries(apiKeys.keys(user?.address as string));
queryClient.invalidateQueries(
accountKeys.usage(user?.address as string),
);
return queryClient.invalidateQueries(
accountKeys.me(user?.address as string),
);
return Promise.all([
queryClient.invalidateQueries({
queryKey: apiKeys.keys(user?.address as string),
}),
queryClient.invalidateQueries({
queryKey: accountKeys.usage(user?.address as string),
}),
queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
}),
]);
},
},
);
@@ -652,9 +656,9 @@ export function useResendEmailConfirmation() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
accountKeys.me(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
});
},
},
);
@@ -688,9 +692,9 @@ export function useCreatePaymentMethod() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
accountKeys.me(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: accountKeys.me(user?.address as string),
});
},
},
);
@@ -723,8 +727,8 @@ export function useCreateApiKey() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutation(
async (input: CreateKeyInput) => {
return useMutation({
mutationFn: async (input: CreateKeyInput) => {
invariant(user?.address, "walletAddress is required");
const res = await fetch(`${THIRDWEB_API_HOST}/v1/keys`, {
@@ -743,14 +747,13 @@ export function useCreateApiKey() {
return json.data as ApiKey;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
apiKeys.keys(user?.address as string),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: apiKeys.keys(user?.address as string),
});
},
);
});
}
export function useUpdateApiKey() {
@@ -780,9 +783,9 @@ export function useUpdateApiKey() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
apiKeys.keys(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: apiKeys.keys(user?.address as string),
});
},
},
);
@@ -814,9 +817,9 @@ export function useRevokeApiKey() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
apiKeys.keys(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: apiKeys.keys(user?.address as string),
});
},
},
);
@@ -869,41 +872,14 @@ export const useUpdatePolicies = () => {
},
{
onSuccess: (_, variables) => {
return queryClient.invalidateQueries(["policies", variables.serviceId]);
return queryClient.invalidateQueries({
queryKey: ["policies", variables.serviceId],
});
},
},
);
};
export function useAuthorizeWalletWithAccount() {
const { user } = useLoggedInUser();
return useMutationWithInvalidate(
async (variables: { token: string; deviceName?: string }) => {
invariant(user?.address, "walletAddress is required");
const res = await fetch(`${THIRDWEB_API_HOST}/v1/jwt/authorize-wallet`, {
method: "POST",
headers: {
"Content-Type": "application/json",
authorization: `Bearer ${variables.token}`,
},
body: JSON.stringify({
deviceName: variables.deviceName,
}),
});
const json = await res.json();
if (json.error) {
throw new Error(json.error.message);
}
return json.data;
},
);
}
export function useRevokeAuthorizedWallet() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
@@ -935,9 +911,11 @@ export function useRevokeAuthorizedWallet() {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
authorizedWallets.authorizedWallets(user?.address as string),
);
return queryClient.invalidateQueries({
queryKey: authorizedWallets.authorizedWallets(
user?.address as string,
),
});
},
},
);
@@ -965,31 +943,6 @@ export function useAuthorizedWallets() {
return json.data as AuthorizedWallet[];
},
enabled: !!user?.address && isLoggedIn,
cacheTime: 0,
});
}
/**
*
*/
export async function fetchChainsFromApi() {
// always fetch from prod for chains for now
// TODO: re-visit this
const res = await fetch("https://api.thirdweb.com/v1/chains");
const json = await res.json();
if (json.error) {
throw new Error(json.error.message);
}
return json.data as ChainMetadata[];
}
export function useApiChains() {
return useQuery({
queryKey: ["all-chains"],
queryFn: () => {
return fetchChainsFromApi();
},
gcTime: 0,
});
}
@@ -1,45 +0,0 @@
export function usePascalCaseContractName(contractName: string) {
if (!contractName) {
return null;
}
if (contractName === "nft-drop") {
return "NFTDrop";
}
if (contractName === "edition-drop") {
return "EditionDrop";
}
if (contractName === "nft-collection") {
return "NFTCollection";
}
if (contractName === "edition") {
return "Edition";
}
if (contractName === "token") {
return "Token";
}
if (contractName === "marketplace") {
return "Marketplace";
}
if (contractName === "vote") {
return "Vote";
}
if (contractName === "split") {
return "Split";
}
if (contractName === "token-drop") {
return "TokenDrop";
}
if (contractName === "signature-drop") {
return "SignatureDrop";
}
if (contractName === "pack") {
return "Pack";
}
if (contractName === "multiwrap") {
return "Multiwrap";
}
if (contractName === "marketplace-v3") {
return "MarketplaceV3";
}
return contractName;
}
@@ -1,4 +1,4 @@
import { thirdwebClient } from "@/constants/client";
import { useThirdwebClient } from "@/constants/thirdweb.client";
import { useMutation } from "@tanstack/react-query";
import { upload } from "thirdweb/storage";
@@ -8,6 +8,7 @@ type DashboardUploadOptions = {
};
export function useDashboardStorageUpload(options?: DashboardUploadOptions) {
const thirdwebClient = useThirdwebClient();
return useMutation({
mutationFn: async (files: Array<File | string>): Promise<string[]> => {
const uris = await upload({
@@ -8,12 +8,6 @@ import { engineKeys } from "../cache-keys";
import { useMutationWithInvalidate } from "./query/useQueryWithNetwork";
import { useLoggedInUser } from "./useLoggedInUser";
export function useEngineConnectedInstance() {
const [instance, setInstance] = useState<EngineInstance | null>(null);
return { instance, setInstance };
}
export type EngineTier = "STARTER" | "PREMIUM" | "ENTERPRISE";
// Engine instances
@@ -116,7 +110,7 @@ export function useEngineBackendWallets(instance: string) {
});
}
export interface EngineSystemHealth {
interface EngineSystemHealth {
status: string;
engineVersion?: string;
features?: string[];
@@ -143,7 +137,7 @@ export function useEngineSystemHealth(
});
}
export interface EngineSystemQueueMetrics {
interface EngineSystemQueueMetrics {
result: {
queued: number;
pending: number;
@@ -197,24 +191,26 @@ interface UpdateVersionInput {
}
export function useEngineUpdateVersion() {
return useMutation(async (input: UpdateVersionInput) => {
invariant(input.engineId, "engineId is required");
return useMutation({
mutationFn: async (input: UpdateVersionInput) => {
invariant(input.engineId, "engineId is required");
const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
method: "POST",
const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/update-version`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
engineId: input.engineId,
}),
});
// we never use the response body
res.body?.cancel();
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
engineId: input.engineId,
}),
});
// we never use the response body
res.body?.cancel();
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
},
});
}
@@ -222,8 +218,8 @@ export function useEngineRemoveFromDashboard() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutation(
async (instanceId: string) => {
return useMutation({
mutationFn: async (instanceId: string) => {
invariant(instanceId, "instance is required");
const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
@@ -235,14 +231,13 @@ export function useEngineRemoveFromDashboard() {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.instances(user?.address as string),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.instances(user?.address as string),
});
},
);
});
}
export interface RemoveCloudHostedInput {
@@ -255,8 +250,12 @@ export function useEngineRemoveCloudHosted() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutation(
async ({ instanceId, reason, feedback }: RemoveCloudHostedInput) => {
return useMutation({
mutationFn: async ({
instanceId,
reason,
feedback,
}: RemoveCloudHostedInput) => {
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${instanceId}/remove-cloud-hosted`,
{
@@ -274,14 +273,13 @@ export function useEngineRemoveCloudHosted() {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.instances(user?.address as string),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.instances(user?.address as string),
});
},
);
});
}
export interface EditEngineInstanceInput {
@@ -294,8 +292,8 @@ export function useEngineEditInstance() {
const { user } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutation(
async ({ instanceId, name, url }: EditEngineInstanceInput) => {
return useMutation({
mutationFn: async ({ instanceId, name, url }: EditEngineInstanceInput) => {
const res = await fetch(`${THIRDWEB_API_HOST}/v1/engine/${instanceId}`, {
method: "PUT",
@@ -310,14 +308,13 @@ export function useEngineEditInstance() {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.instances(user?.address as string),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.instances(user?.address as string),
});
},
);
});
}
export type Transaction = {
@@ -592,7 +589,9 @@ export function useEngineAddKeypair(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.keypairs(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.keypairs(instance),
});
},
},
);
@@ -625,7 +624,9 @@ export function useEngineRemoveKeypair(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.keypairs(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.keypairs(instance),
});
},
},
);
@@ -690,7 +691,9 @@ export function useEngineCreateRelayer(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.relayers(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.relayers(instance),
});
},
},
);
@@ -723,7 +726,9 @@ export function useEngineRevokeRelayer(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.relayers(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.relayers(instance),
});
},
},
);
@@ -761,7 +766,9 @@ export function useEngineUpdateRelayer(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.relayers(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.relayers(instance),
});
},
},
);
@@ -839,7 +846,9 @@ export function useEngineSetWalletConfig(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.walletConfig(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.walletConfig(instance),
});
},
},
);
@@ -872,9 +881,9 @@ export function useEngineCreateBackendWallet(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.backendWallets(instance),
);
return queryClient.invalidateQueries({
queryKey: engineKeys.backendWallets(instance),
});
},
},
);
@@ -908,9 +917,9 @@ export function useEngineUpdateBackendWallet(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.backendWallets(instance),
);
return queryClient.invalidateQueries({
queryKey: engineKeys.backendWallets(instance),
});
},
},
);
@@ -959,9 +968,9 @@ export function useEngineImportBackendWallet(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.backendWallets(instance),
);
return queryClient.invalidateQueries({
queryKey: engineKeys.backendWallets(instance),
});
},
},
);
@@ -990,7 +999,9 @@ export function useEngineGrantPermissions(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.permissions(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.permissions(instance),
});
},
},
);
@@ -1023,7 +1034,9 @@ export function useEngineRevokePermissions(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.permissions(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.permissions(instance),
});
},
},
);
@@ -1056,7 +1069,9 @@ export function useEngineCreateAccessToken(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.accessTokens(instance),
});
},
},
);
@@ -1089,7 +1104,9 @@ export function useEngineRevokeAccessToken(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.accessTokens(instance),
});
},
},
);
@@ -1123,7 +1140,9 @@ export function useEngineUpdateAccessToken(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.accessTokens(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.accessTokens(instance),
});
},
},
);
@@ -1158,7 +1177,9 @@ export function useEngineCreateWebhook(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.webhooks(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.webhooks(instance),
});
},
},
);
@@ -1191,7 +1212,9 @@ export function useEngineRevokeWebhook(instance: string) {
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.webhooks(instance));
return queryClient.invalidateQueries({
queryKey: engineKeys.webhooks(instance),
});
},
},
);
@@ -1208,31 +1231,33 @@ type SendTokensInput = {
export function useEngineSendTokens(instance: string) {
const token = useLoggedInUser().user?.jwt ?? null;
return useMutation(async (input: SendTokensInput) => {
invariant(instance, "instance is required");
return useMutation({
mutationFn: async (input: SendTokensInput) => {
invariant(instance, "instance is required");
const res = await fetch(
`${instance}backend-wallet/${input.chainId}/transfer`,
{
method: "POST",
headers: {
...getEngineRequestHeaders(token),
"x-backend-wallet-address": input.fromAddress,
const res = await fetch(
`${instance}backend-wallet/${input.chainId}/transfer`,
{
method: "POST",
headers: {
...getEngineRequestHeaders(token),
"x-backend-wallet-address": input.fromAddress,
},
body: JSON.stringify({
to: input.toAddress,
amount: input.amount.toString(),
currencyAddress: input.currencyAddress,
}),
},
body: JSON.stringify({
to: input.toAddress,
amount: input.amount.toString(),
currencyAddress: input.currencyAddress,
}),
},
);
const json = await res.json();
);
const json = await res.json();
if (json.error) {
throw new Error(json.error.message);
}
if (json.error) {
throw new Error(json.error.message);
}
return json.result;
return json.result;
},
});
}
@@ -1263,8 +1288,8 @@ export function useEngineSetCorsConfiguration(instance: string) {
const queryClient = useQueryClient();
const token = useLoggedInUser().user?.jwt ?? null;
return useMutation(
async (input: SetCorsUrlInput) => {
return useMutation({
mutationFn: async (input: SetCorsUrlInput) => {
invariant(instance, "instance is required");
const res = await fetch(`${instance}configuration/cors`, {
@@ -1280,12 +1305,13 @@ export function useEngineSetCorsConfiguration(instance: string) {
return json.result;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.corsUrls(instance));
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.corsUrls(instance),
});
},
);
});
}
export function useEngineIpAllowlistConfiguration(instance: string) {
@@ -1320,8 +1346,8 @@ export function useEngineSetIpAllowlistConfiguration(instance: string) {
const queryClient = useQueryClient();
const token = useLoggedInUser().user?.jwt ?? null;
return useMutation(
async (input: SetIpAllowlistInput) => {
return useMutation({
mutationFn: async (input: SetIpAllowlistInput) => {
invariant(instance, "instance is required");
const res = await fetch(`${instance}configuration/ip-allowlist`, {
@@ -1337,12 +1363,13 @@ export function useEngineSetIpAllowlistConfiguration(instance: string) {
return json.result;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(engineKeys.ipAllowlist(instance));
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.ipAllowlist(instance),
});
},
);
});
}
export interface EngineContractSubscription {
@@ -1392,8 +1419,8 @@ export function useEngineAddContractSubscription(instance: string) {
const queryClient = useQueryClient();
const token = useLoggedInUser().user?.jwt ?? null;
return useMutation(
async (input: AddContractSubscriptionInput) => {
return useMutation({
mutationFn: async (input: AddContractSubscriptionInput) => {
invariant(instance, "instance is required");
const res = await fetch(`${instance}contract-subscriptions/add`, {
@@ -1409,17 +1436,16 @@ export function useEngineAddContractSubscription(instance: string) {
return json.result;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.contractSubscriptions(instance),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.contractSubscriptions(instance),
});
},
);
});
}
export interface RemoveContractSubscriptionInput {
interface RemoveContractSubscriptionInput {
contractSubscriptionId: string;
}
@@ -1427,8 +1453,8 @@ export function useEngineRemoveContractSubscription(instance: string) {
const queryClient = useQueryClient();
const token = useLoggedInUser().user?.jwt ?? null;
return useMutation(
async (input: RemoveContractSubscriptionInput) => {
return useMutation({
mutationFn: async (input: RemoveContractSubscriptionInput) => {
invariant(instance, "instance is required");
const res = await fetch(`${instance}contract-subscriptions/remove`, {
@@ -1444,14 +1470,13 @@ export function useEngineRemoveContractSubscription(instance: string) {
return json.result;
},
{
onSuccess: () => {
return queryClient.invalidateQueries(
engineKeys.contractSubscriptions(instance),
);
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.contractSubscriptions(instance),
});
},
);
});
}
export function useEngineSubscriptionsLastBlock(
@@ -1481,7 +1506,7 @@ export function useEngineSubscriptionsLastBlock(
});
}
export interface EngineResourceMetrics {
interface EngineResourceMetrics {
error: string;
data: {
cpu: number;
@@ -1514,3 +1539,177 @@ export function useEngineSystemMetrics(engineId: string) {
refetchInterval: 5_000,
});
}
export interface EngineAlertRule {
id: string;
title: string;
// A unique string identifying the alert.
// Note the "." which allows `subscriptionRoutes` to use wildcards in notificationChannel.
// Example: "alert.sla-5xx-99"
routingKey: string;
description: string;
createdAt: Date;
pausedAt: Date | null;
}
export function useEngineAlertRules(engineId: string) {
const { isLoggedIn } = useLoggedInUser();
return useQuery({
queryKey: engineKeys.alertRules(engineId),
queryFn: async () => {
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${engineId}/alert-rules`,
{ method: "GET" },
);
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
const json = await res.json();
return json.data as EngineAlertRule[];
},
enabled: isLoggedIn,
});
}
export interface EngineAlert {
id: string;
alertRuleId: string;
status: "pending" | "firing" | "resolved";
startsAt: Date;
endsAt: Date | null;
}
export function useEngineAlerts(engineId: string, limit: number, offset = 0) {
const { isLoggedIn } = useLoggedInUser();
return useQuery({
queryKey: engineKeys.alerts(engineId),
queryFn: async () => {
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${engineId}/alerts?limit=${limit}&offset=${offset}`,
{ method: "GET" },
);
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
const json = await res.json();
return json.data as EngineAlert[];
},
enabled: isLoggedIn,
});
}
export const EngineNotificationChannelTypeConfig = {
slack: {
display: "Slack",
valueDisplay: "Slack Webhook URL",
},
email: {
display: "Email",
valueDisplay: "Email Address",
},
} as const;
type EngineNotificationChannelType =
keyof typeof EngineNotificationChannelTypeConfig;
export type EngineNotificationChannel = {
id: string;
type: EngineNotificationChannelType;
value: string;
createdAt: Date;
pausedAt: Date | null;
// A list of routingKeys to listen to. Supports wildcards.
// Example: [ 'alert.sla-5xx-99' ] or [ 'alert.*' ] will both notify when
// the alert with routingKey `alert.sla-5xx-99` triggers.
subscriptionRoutes: string[];
};
export function useEngineNotificationChannels(engineId: string) {
const { isLoggedIn } = useLoggedInUser();
return useQuery({
queryKey: engineKeys.notificationChannels(engineId),
queryFn: async () => {
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
{ method: "GET" },
);
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
const json = await res.json();
return json.data as EngineNotificationChannel[];
},
enabled: isLoggedIn,
});
}
export interface CreateNotificationChannelInput {
subscriptionRoutes: string[];
type: "slack" | "email"; // TODO: Add others when implemented.
value: string;
}
export function useEngineCreateNotificationChannel(engineId: string) {
const { isLoggedIn } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutationWithInvalidate(
async (input: CreateNotificationChannelInput) => {
invariant(isLoggedIn, "Must be logged in.");
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels`,
{
method: "POST",
body: JSON.stringify(input),
},
);
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
const json = await res.json();
return json.data as EngineNotificationChannel;
},
{
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.notificationChannels(engineId),
});
},
},
);
}
export function useEngineDeleteNotificationChannel(engineId: string) {
const { isLoggedIn } = useLoggedInUser();
const queryClient = useQueryClient();
return useMutationWithInvalidate(
async (notificationChannelId: string) => {
invariant(isLoggedIn, "Must be logged in.");
const res = await fetch(
`${THIRDWEB_API_HOST}/v1/engine/${engineId}/notification-channels/${notificationChannelId}`,
{ method: "DELETE" },
);
if (!res.ok) {
throw new Error(`Unexpected status ${res.status}: ${await res.text()}`);
}
res.body?.cancel();
},
{
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: engineKeys.notificationChannels(engineId),
});
},
},
);
}
@@ -1,31 +0,0 @@
import { useFavouriteChainIds } from "app/(dashboard)/(chain)/components/client/star-button";
import { useSupportedChains } from "hooks/chains/configureChains";
import { useMemo } from "react";
import type { ChainMetadata } from "thirdweb/chains";
export function useFavoriteChains() {
const allChains = useSupportedChains();
const favChainsQuery = useFavouriteChainIds();
const data = useMemo(() => {
if (favChainsQuery.data) {
const _chains: ChainMetadata[] = [];
// biome-ignore lint/complexity/noForEach: FIXME
favChainsQuery.data.forEach((chainId) => {
const chain = allChains.find((c) => String(c.chainId) === chainId);
if (chain) {
_chains.push(chain);
}
});
return _chains;
}
return [] as ChainMetadata[];
}, [favChainsQuery.data, allChains]);
return {
isLoading: favChainsQuery.isLoading,
data,
};
}
@@ -3,7 +3,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
import { useQuery } from "@tanstack/react-query";
import type { EnsureLoginResponse } from "app/api/auth/ensure-login/route";
import { usePathname } from "next/navigation";
import { useRef } from "react";
import { useEffect, useState } from "react";
import {
useActiveAccount,
useActiveWalletConnectionStatus,
@@ -17,7 +17,7 @@ declare global {
}
export function useLoggedInUser(): {
isLoading: boolean;
isPending: boolean;
isLoggedIn: boolean;
user: { address: string; jwt?: string } | null;
} {
@@ -27,10 +27,16 @@ export function useLoggedInUser(): {
const connectionStatus = useActiveWalletConnectionStatus();
// this is to work around the fact that `connectionStatus` ends up as "disconnected"
// which we *do* care about, but only after we have been "connecting" at least once
const statusWasEverConnecting = useRef(false);
if (connectionStatus === "connecting" || connectionStatus === "connected") {
statusWasEverConnecting.current = true;
}
const [statusWasEverConnecting, setStatusWasEverConnecting] = useState(
connectionStatus === "connecting" || connectionStatus === "connected",
);
// needs to be a useEffect for now
// eslint-disable-next-line no-restricted-syntax
useEffect(() => {
if (connectionStatus === "connecting" || connectionStatus === "connected") {
setStatusWasEverConnecting(true);
}
}, [connectionStatus]);
const query = useQuery({
// enabled if:
@@ -40,7 +46,7 @@ export function useLoggedInUser(): {
enabled:
!!pathname &&
connectionStatus !== "connecting" &&
statusWasEverConnecting.current &&
statusWasEverConnecting &&
isLoginRequired(pathname),
// the last "persist", part of the queryKey, is to make sure that we do not cache this query in indexDB
// convention in v4 of the SDK that we are (ab)using here
@@ -63,24 +69,20 @@ export function useLoggedInUser(): {
return (await res.json()) as EnsureLoginResponse;
},
onSuccess: (data) => {
if (data.redirectTo) {
router.replace(data.redirectTo);
}
if (data.jwt) {
// necessary for legacy things for now (SDK picks it up from there)
// eslint-disable-next-line react-compiler/react-compiler
window.TW_AUTH_TOKEN = data.jwt;
} else {
window.TW_AUTH_TOKEN = undefined;
}
},
});
// legit use-case for now
// eslint-disable-next-line no-restricted-syntax
useEffect(() => {
if (query.data?.redirectTo) {
router.replace(query.data.redirectTo);
}
}, [query.data?.redirectTo, router]);
// if we are "disconnected" we are not logged in
if (connectionStatus === "disconnected") {
return {
isLoading: false,
isPending: false,
isLoggedIn: false,
user: null,
};
@@ -89,7 +91,7 @@ export function useLoggedInUser(): {
// if we are still connecting, we are "loading"
if (connectionStatus === "connecting") {
return {
isLoading: true,
isPending: true,
isLoggedIn: false,
user: null,
};
@@ -98,7 +100,7 @@ export function useLoggedInUser(): {
// same if we do not yet have a path
if (!pathname) {
return {
isLoading: true,
isPending: true,
isLoggedIn: false,
user: null,
};
@@ -107,7 +109,7 @@ export function useLoggedInUser(): {
// if we do not have an address we are not logged in
if (!connectedAddress) {
return {
isLoading: false,
isPending: false,
isLoggedIn: false,
user: null,
};
@@ -116,7 +118,7 @@ export function useLoggedInUser(): {
// if we are not on a logged in path, we can simply return the connected address
if (!isLoginRequired(pathname)) {
return {
isLoading: false,
isPending: false,
isLoggedIn: true,
user: { address: connectedAddress },
};
@@ -124,7 +126,7 @@ export function useLoggedInUser(): {
// otherwise we return the query data
return {
isLoading: query.isLoading,
isPending: query.isPending,
isLoggedIn: query.data ? query.data.isLoggedIn : false,
user: query.data?.isLoggedIn
? { address: connectedAddress, jwt: query.data.jwt }
@@ -8,14 +8,13 @@ import {
import type { BasicContract } from "contract-ui/types/types";
import { getAllMultichainRegistry } from "dashboard-extensions/common/read/getAllMultichainRegistry";
import { useAllChainsData } from "hooks/chains/allChains";
import { useSupportedChainsRecord } from "hooks/chains/configureChains";
import { useMemo } from "react";
import { sendAndConfirmTransaction } from "thirdweb";
import { remove } from "thirdweb/extensions/thirdweb";
import { useActiveAccount } from "thirdweb/react";
import invariant from "tiny-invariant";
function useMultiChainRegContractList(walletAddress?: string) {
export function useMultiChainRegContractList(walletAddress?: string) {
return useQuery({
queryKey: ["dashboard-registry", walletAddress, "multichain-contract-list"],
queryFn: async () => {
@@ -42,7 +41,8 @@ export const useAllContractList = (
) => {
const multiChainQuery = useMultiChainRegContractList(walletAddress);
const configuredChainsRecord = useSupportedChainsRecord();
// TODO - instead of using ALL chains, fetch only the ones used here
const { idToChain } = useAllChainsData();
const contractList = useMemo(() => {
const data = multiChainQuery.data || [];
@@ -51,14 +51,12 @@ export const useAllContractList = (
// biome-ignore lint/complexity/noForEach: FIXME
data.forEach((net) => {
if (net.chainId in configuredChainsRecord) {
const chainRecord = configuredChainsRecord[net.chainId];
if (chainRecord.status !== "deprecated") {
if (chainRecord.testnet) {
testnets.push(net);
} else {
mainnets.push(net);
}
const chn = idToChain.get(net.chainId);
if (chn && chn.status !== "deprecated") {
if (chn.testnet) {
testnets.push(net);
} else {
mainnets.push(net);
}
}
});
@@ -71,7 +69,7 @@ export const useAllContractList = (
testnets.sort((a, b) => a.chainId - b.chainId);
return mainnets.concat(testnets);
}, [multiChainQuery.data, onlyMainnet, configuredChainsRecord]);
}, [multiChainQuery.data, onlyMainnet, idToChain]);
return {
...multiChainQuery,
@@ -85,12 +83,10 @@ type RemoveContractParams = {
};
export function useRemoveContractMutation() {
const { chainIdToChainRecord } = useAllChainsData();
const queryClient = useQueryClient();
const account = useActiveAccount();
return useMutation(
async (data: RemoveContractParams) => {
invariant(chainIdToChainRecord, "chains not initialzed yet");
return useMutation({
mutationFn: async (data: RemoveContractParams) => {
invariant(data.chainId, "chainId not provided");
invariant(account, "No wallet connected");
const { contractAddress, chainId } = data;
@@ -111,12 +107,13 @@ export function useRemoveContractMutation() {
},
});
},
{
onSettled: () => {
return queryClient.invalidateQueries(["dashboard-registry"]);
},
onSettled: () => {
return queryClient.invalidateQueries({
queryKey: ["dashboard-registry"],
});
},
);
});
}
type AddContractParams = {
@@ -129,8 +126,8 @@ export function useAddContractMutation() {
const queryClient = useQueryClient();
return useMutation(
async (data: AddContractParams) => {
return useMutation({
mutationFn: async (data: AddContractParams) => {
invariant(account, "cannot add a contract without an address");
return await addContractToMultiChainRegistry(
@@ -142,10 +139,11 @@ export function useAddContractMutation() {
300000n,
);
},
{
onSettled: () => {
return queryClient.invalidateQueries(["dashboard-registry"]);
},
onSettled: () => {
return queryClient.invalidateQueries({
queryKey: ["dashboard-registry"],
});
},
);
});
}
@@ -1,55 +1,62 @@
import {
queryOptions,
useMutation,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import type {
BalanceQueryRequest,
BalanceQueryResponse,
} from "pages/api/moralis/balances";
import { toast } from "sonner";
import type { ThirdwebContract } from "thirdweb";
import { type ThirdwebContract, sendAndConfirmTransaction } from "thirdweb";
import { distribute, distributeByToken } from "thirdweb/extensions/split";
import { useSendAndConfirmTransaction } from "thirdweb/react";
import { useActiveAccount } from "thirdweb/react";
import invariant from "tiny-invariant";
import { splitsKeys } from "..";
import {
useMutationWithInvalidate,
useQueryWithNetwork,
} from "./query/useQueryWithNetwork";
async function getSplitBalances(contract: ThirdwebContract) {
const query = await fetch("/api/moralis/balances", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
chainId: contract.chain.id,
address: contract.address,
} as BalanceQueryRequest),
});
if (query.status >= 400) {
throw new Error(await query.json().then((r) => r.error));
}
return query.json() as Promise<BalanceQueryResponse>;
}
function getQuery(contract: ThirdwebContract) {
return queryOptions({
queryKey: ["split-balances", contract.chain.id, contract.address],
queryFn: () => getSplitBalances(contract),
retry: false,
});
}
export function useSplitBalances(contract: ThirdwebContract) {
const chainId = contract.chain.id;
const contractAddress = contract.address;
const currencies = useQueryWithNetwork(
splitsKeys.currencies(contractAddress),
async () => {
const query = await fetch("/api/moralis/balances", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
chainId,
address: contractAddress,
} as BalanceQueryRequest),
});
if (query.status >= 400) {
throw new Error(await query.json().then((r) => r.error));
}
return query.json() as Promise<BalanceQueryResponse>;
},
{ enabled: !!chainId && !!contractAddress, retry: false },
);
return currencies;
return useQuery(getQuery(contract));
}
export function useSplitDistributeFunds(contract: ThirdwebContract) {
const contractAddress = contract.address;
const balances = useSplitBalances(contract);
const { mutateAsync } = useSendAndConfirmTransaction();
const account = useActiveAccount();
const queryClient = useQueryClient();
return useMutationWithInvalidate(
async () => {
invariant(contract, "split contract is not ready");
invariant(balances.data, "No balances to distribute");
const distributions = (balances.data || [])
return useMutation({
mutationFn: async () => {
invariant(account, "No active account");
const balances =
// get the cached data if it exists, otherwise fetch it
queryClient.getQueryData(getQuery(contract).queryKey) ||
(await queryClient.fetchQuery(getQuery(contract)));
const distributions = balances
.filter((token) => token.display_balance !== "0.0")
.map(async (currency) => {
const transaction =
@@ -59,24 +66,21 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
contract,
tokenAddress: currency.token_address,
});
const promise = mutateAsync(transaction);
const promise = sendAndConfirmTransaction({
transaction,
account,
});
toast.promise(promise, {
success: `Successfully distributed ${currency.name}`,
error: `Error distributing ${currency.name}`,
loading: "Distributing funds",
loading: `Distributing ${currency.name}`,
});
});
return await Promise.all(distributions);
},
{
onSuccess: (_data, _variables, _options, invalidate) => {
return invalidate([
splitsKeys.currencies(contractAddress),
splitsKeys.balances(contractAddress),
splitsKeys.list(contractAddress),
]);
},
onSettled: () => {
queryClient.invalidateQueries(getQuery(contract));
},
);
});
}
@@ -1,288 +1,103 @@
import { thirdwebClient } from "@/constants/client";
import { type ThirdwebContract, getContract, toTokens } from "thirdweb";
import { useMutation } from "@tanstack/react-query";
import {
balanceOf,
decimals,
delegate,
delegates,
} from "thirdweb/extensions/erc20";
import {
type VoteType,
canExecute,
castVoteWithReason,
executeProposal,
getAll,
hasVoted,
propose,
token,
} from "thirdweb/extensions/vote";
import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
type BaseTransactionOptions,
type ThirdwebContract,
getAddress,
getContract,
toTokens,
} from "thirdweb";
import * as ERC20Ext from "thirdweb/extensions/erc20";
import * as VoteExt from "thirdweb/extensions/vote";
import { useSendAndConfirmTransaction } from "thirdweb/react";
import type { Account } from "thirdweb/wallets";
import invariant from "tiny-invariant";
import { voteKeys } from "../cache-keys";
import {
useMutationWithInvalidate,
useQueryWithNetwork,
} from "./query/useQueryWithNetwork";
export function useVoteProposalList(contract?: ThirdwebContract) {
return useQueryWithNetwork(
voteKeys.proposals(contract?.address || ""),
async () => {
invariant(contract, "contract is required");
return await getAll({ contract });
},
{
enabled: !!contract,
},
);
export async function tokensDelegated(
options: BaseTransactionOptions<{ account: Account | undefined }>,
) {
if (!options.account) {
throw new Error("Expected an account to be passed in options");
}
const tokenAddress = await VoteExt.token(options);
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
...options.contract,
address: tokenAddress,
});
const delegatedAddress = await ERC20Ext.delegates({
contract: tokenContract,
account: options.account.address,
});
return getAddress(delegatedAddress) === getAddress(options.account.address);
}
export function useHasVotedOnProposal(
contract: ThirdwebContract,
proposalId: bigint,
export async function voteTokenBalances(
options: BaseTransactionOptions<{ addresses: string[] }>,
) {
const userAddress = useActiveAccount()?.address;
return useQueryWithNetwork(
voteKeys.userHasVotedOnProposal(
proposalId.toString(),
contract.address,
userAddress,
invariant(options.addresses.length, "addresses are required");
const tokenAddress = await VoteExt.token({ contract: options.contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
...options.contract,
address: tokenAddress,
});
const [decimals, balanceData] = await Promise.all([
ERC20Ext.decimals({ contract: tokenContract }),
Promise.all(
options.addresses.map((address) =>
ERC20Ext.balanceOf({ contract: tokenContract, address }),
),
),
async () => {
invariant(userAddress, "address is required");
return await hasVoted({ contract, proposalId, account: userAddress });
},
{
enabled: !!contract,
},
);
}
export function useCanExecuteProposal(
contract: ThirdwebContract,
proposalId: bigint,
) {
return useQueryWithNetwork(
voteKeys.canExecuteProposal(proposalId.toString(), contract.address),
async () => await canExecute({ contract, proposalId }),
{
enabled: !!contract,
},
);
}
export function useTokensDelegated(contract: ThirdwebContract) {
const userAddress = useActiveAccount()?.address;
return useQueryWithNetwork(
voteKeys.delegation(contract.address, userAddress),
async () => {
invariant(userAddress, "wallet address is required");
const tokenAddress = await token({ contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
address: tokenAddress,
chain: contract.chain,
client: thirdwebClient,
});
const delegatedAddress = await delegates({
contract: tokenContract,
account: userAddress,
});
return delegatedAddress?.toLowerCase() === userAddress.toLowerCase();
},
{
enabled: !!contract && !!userAddress,
},
);
}
export function useVoteTokenBalances(
contract: ThirdwebContract,
addresses: string[],
) {
return useQueryWithNetwork(
voteKeys.balances(contract.address, addresses),
async (): Promise<
Array<{ address: string; balance: string; decimals: number }>
> => {
invariant(addresses.length, "addresses are required");
const tokenAddress = await token({ contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
address: tokenAddress,
chain: contract.chain,
client: thirdwebClient,
});
const _decimals = await decimals({ contract: tokenContract });
const balanceData = await Promise.all(
addresses.map((address) =>
balanceOf({ contract: tokenContract, address }),
),
);
const balances = addresses.map((address, index) => {
const balance = balanceData[index] || 0n;
return {
address,
balance: toTokens(balance, _decimals),
decimals: _decimals,
};
});
return await Promise.all(balances);
},
{
enabled: addresses.length > 0,
},
);
}
export interface IProposalInput {
description: string;
}
/**
* This hook is a simplified version meant to use on the Dashboard
* since _currently_ the dashboard only supports creating proposals with descriptions
*
* todo: make an extension in the SDK that is more robust and user-friendly ?
*/
export function useProposalCreateMutation(contract: ThirdwebContract) {
const { mutateAsync } = useSendAndConfirmTransaction();
return useMutationWithInvalidate(
async (proposal: IProposalInput) => {
const { description } = proposal;
const transaction = propose({
contract,
description,
targets: [contract.address],
values: [0n],
calldatas: ["0x"],
});
return await mutateAsync(transaction);
},
{
onSuccess: (_data, _options, _variables, invalidate) => {
return invalidate([voteKeys.proposals(contract.address)]);
},
},
);
}
export function useDelegateMutation(contract: ThirdwebContract) {
const userAddress = useActiveAccount()?.address;
const { mutateAsync } = useSendAndConfirmTransaction();
return useMutationWithInvalidate(
async () => {
invariant(userAddress, "address is required");
const tokenAddress = await token({ contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
address: tokenAddress,
chain: contract.chain,
client: thirdwebClient,
});
const transaction = delegate({
contract: tokenContract,
delegatee: userAddress,
});
return await mutateAsync(transaction);
},
{
onSuccess: (_data, _options, _variables, invalidate) => {
return invalidate([voteKeys.delegation(contract.address, userAddress)]);
},
},
);
]);
return options.addresses.map((address, index) => {
const balance = balanceData[index] || 0n;
return {
address,
balance: toTokens(balance, decimals),
decimals: decimals,
};
});
}
/**
* Get the decimals of the voting erc20 token
*
* TODO: move this into SDK extensions?
*/
export function useVotingTokenDecimals(contract: ThirdwebContract) {
return useMutationWithInvalidate(async () => {
const tokenAddress = await token({ contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
address: tokenAddress,
chain: contract.chain,
client: thirdwebClient,
});
const _decimals = await decimals({ contract: tokenContract });
return _decimals;
export async function votingTokenDecimals(options: BaseTransactionOptions) {
const tokenAddress = await VoteExt.token(options);
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
...options.contract,
address: tokenAddress,
});
return await ERC20Ext.decimals({ contract: tokenContract });
}
interface IVoteCast {
voteType: VoteType;
reason?: string;
}
export function useCastVoteMutation(
contract: ThirdwebContract,
proposalId: bigint,
) {
const address = useActiveAccount()?.address;
const contractAddress = contract.address;
export function useDelegateMutation() {
const { mutateAsync } = useSendAndConfirmTransaction();
return useMutationWithInvalidate(
async (voteItem: IVoteCast) => {
invariant(contract, "contract is required");
invariant(address, "address is required");
const { voteType, reason } = voteItem;
const transaction = castVoteWithReason({
contract,
proposalId,
support: voteType,
reason: reason ?? "",
return useMutation({
mutationFn: async (contract: ThirdwebContract) => {
const tokenAddress = await VoteExt.token({ contract });
if (!tokenAddress) {
throw new Error("Expected a delegated token address");
}
const tokenContract = getContract({
...contract,
address: tokenAddress,
});
const transaction = ERC20Ext.delegate({
contract: tokenContract,
delegatee: contract.address,
});
return await mutateAsync(transaction);
},
{
onSuccess: (_data, _options, _variables, invalidate) => {
return invalidate([
voteKeys.proposals(contractAddress),
voteKeys.userHasVotedOnProposal(
proposalId.toString(),
contractAddress,
address,
),
voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
]);
},
},
);
}
/**
* This hook is a simplified version for the Dashboard
* It doesn't pass any extra info to the execute function
*/
export function useExecuteProposalMutation(
contract: ThirdwebContract,
proposalId: bigint,
) {
const contractAddress = contract.address;
const mutation = useSendAndConfirmTransaction();
return useMutationWithInvalidate(
async () => {
const transaction = executeProposal({ contract, proposalId });
return await mutation.mutateAsync(transaction);
},
{
onSuccess: (_data, _options, _variables, invalidate) => {
return invalidate([
voteKeys.proposals(contractAddress),
voteKeys.canExecuteProposal(proposalId.toString(), contractAddress),
]);
},
},
);
});
}

Some files were not shown because too many files have changed in this diff Show More