Compare commits

..
Author SHA1 Message Date
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
bfe9753be6 Version Packages (#4881)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-10-03 14:33:47 +13:00
Joaquim VergesandGitHub eeb993df75 feat: optimize zksync contract deployment and bytecode handling (#4902) 2024-10-03 14:09:00 +13:00
ElasticBottle 367a270bba fix: update timeline for GDPR compliance (#4897)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the compliance information regarding GDPR and CCPA in the `page.mdx` file, providing more detailed and accurate descriptions of the data handling practices.

### Detailed summary
- Updated the compliance statement for GDPR and CCPA.
- Changed the text from a general statement about in-app wallets to specify that `thirdweb` complies with GDPR and CCPA frameworks.
- Clarified the timeframe for data deletion requests (30 days for GDPR and 45 for CCPA).

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

<!-- end pr-codex -->
2024-10-03 01:02:51 +00:00
kumaryash90 e91581aec6 Update chain stack type check (#4901)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new property `stackType` across various components and utilities, enhancing the handling of blockchain network configurations and metadata.

### Detailed summary
- Added `stackType` property in `types.ts` for chains.
- Updated `utils.ts` to include `stackType` from data.
- Included `stackType` in `embed-setup.tsx` and `ConfigureNetworkForm.tsx`.
- Modified the `isZkSyncChain` function to use `getChainMetadata` for `stackType` validation.
- Removed the obsolete `getChainStack` function.

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

<!-- end pr-codex -->
2024-10-03 00:17:49 +00:00
ElasticBottle 985c4b0804 fix: add missing partner id for ecosystem wallet (#4886)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the issue of missing `partnerId` when creating an ecosystem wallet in the `thirdweb` package.

### Detailed summary
- Updated `partnerId` in `packages/thirdweb/src/wallets/in-app/web/ecosystem.ts` to use `ecosystem.partnerId`.
- Updated `partnerId` in `packages/thirdweb/src/wallets/in-app/native/ecosystem.ts` to use `createOptions?.partnerId`.

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

<!-- end pr-codex -->
2024-10-02 22:38:54 +00:00
MananTank 9fb5401a93 Add Coupon Card in Billing Page (#4895)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `SettingsBillingPage` component by adding a `teamId` prop to manage billing settings for different teams. It also introduces a new `CouponCard` component that allows users to apply coupon codes with relevant feedback.

### Detailed summary
- Updated `Page` component to pass `teamId` to `SettingsBillingPage`.
- Modified `SettingsBillingPage` to accept `teamId` as a prop.
- Adjusted `Billing` component to use `teamId` in its rendering.
- Introduced `CouponCard` component for applying coupon codes.
- Implemented logic in `CouponCard` to handle coupon submissions and display feedback based on response status.
- Updated `Billing` component to include `CouponCard`.

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

<!-- end pr-codex -->
2024-10-02 21:48:14 +00:00
Joaquim VergesandGitHub e54867550e feat: switch to v2 bundler for all user operations (#4884) 2024-10-03 10:12:43 +13:00
MananTank 514647cb53 Add Billing alerts on /connect layout in app router (#4892)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `BillingAlerts` component by allowing it to accept a `className` prop for better styling flexibility. It also updates the usage of `BillingAlerts` in various components to apply specific padding classes.

### Detailed summary
- Modified `BillingAlerts` to accept an optional `className` prop.
- Updated the `BillingAlerts` usage in `apps/dashboard/src/components/layout/app-shell/index.tsx` to include `className="py-6"`.
- Updated `BillingAlerts` usage in `apps/dashboard/src/app/(dashboard)/dashboard/connect/layout.tsx` to include `className="pb-6"`.
- Adjusted the rendering of `BillingAlertsUI` to apply the `className` prop.

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

<!-- end pr-codex -->
2024-10-02 19:56:29 +00:00
MananTank eb8638e0c2 Spacing fixes on OnboardingGeneral component (#4891)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the layout of the `OnboardingGeneral` and `AccountForm` components by replacing `FocusLock` and `Flex` components with `div` elements, enhancing the structure and styling of the components.

### Detailed summary
- Replaced `<FocusLock>` with `<div>` in `OnboardingGeneral`.
- Changed `<Flex>` to `<div className="flex flex-col gap-4">` in `OnboardingGeneral`.
- Updated `<Flex>` to `<div className={cn("flex w-full", ...)}> ` in `AccountForm`.
- Modified closing tags from `</Flex>` to `</div>` in both components.

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

<!-- end pr-codex -->
2024-10-02 18:45:33 +00:00
MananTank a6f85ac949 Replace react-otp-input with shadcn input-otp (#4889)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new OTP input component using the `input-otp` library, along with related animations and configuration updates. It replaces the existing `react-otp-input` dependency and enhances the onboarding email confirmation process.

### Detailed summary
- Added `input-otp` dependency to `package.json`.
- Removed `react-otp-input` from `package.json`.
- Updated `tailwind.config.js` to include `caret-blink` animation.
- Created new components: `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator`.
- Refactored `ConfirmEmail.tsx` to utilize the new OTP input components.
- Improved styling and functionality for OTP input slots.

> 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-10-02 17:57:34 +00:00
MananTank 726bbde9ca Add privacyPolicyUrl and termsOfServiceUrl on ConnectEmbed in login page (#4890)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `login` component by adding links for the privacy policy and terms of service.

### Detailed summary
- Added `privacyPolicyUrl` prop with the value `"/privacy"` to the component.
- Added `termsOfServiceUrl` prop with the value `"/tos"` to the component.

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

<!-- end pr-codex -->
2024-10-02 17:46:44 +00:00
MananTank 025c581be6 api server url env cleanup (#4887)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new constant, `API_SERVER_URL`, to centralize the API server URL configuration. It replaces instances of `process.env.NEXT_PUBLIC_THIRDWEB_API_HOST` throughout the codebase, enhancing maintainability and readability.

### Detailed summary
- Added `API_SERVER_URL` in `env.ts`.
- Replaced `process.env.NEXT_PUBLIC_THIRDWEB_API_HOST` with `API_SERVER_URL` in multiple files:
  - `getAccount.ts`
  - `fetchEcosystemList.ts`
  - `fetchEcosystem.ts`
  - `team-members.ts`
  - `get-auth-token/route.ts`
  - `getAPIKeys.ts`
  - `ensure-login/route.ts`
  - `server-proxy/api/[...paths].tsx`
  - `team.ts`
  - `projects.ts`
  - `create-ticket.action.ts`
  - `auth-actions.ts`
  - `utils.ts`
- Updated fetch requests to use `API_SERVER_URL` for consistent API endpoint access.

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

<!-- end pr-codex -->
2024-10-02 17:39:21 +00:00
arcoraven 522968a505 chore: Update version flow updates deployment (#4852)
## Problem solved

Changes the "update Engine version" flow to query the infra backend to perform the version upgrade.

Previously this would ping Slack for a thirdweb staff to update.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the code quality and user interface across various components in the dashboard. It includes updates to placeholders, text content, and the handling of engine updates.

### Detailed summary
- Updated `placeholder` in `ip-allowlist.tsx` to use curly braces.
- Added periods to sentences in `EngineImportPage.tsx` and `CreateEnginePage.tsx`.
- Simplified conditional rendering in `engine-instances-table.tsx`.
- Changed `cloudDeployedAt` to `deploymentId` in `useEngine.ts`.
- Renamed `useEngineUpdateVersion` to `useEngineUpdateServerVersion`.
- Updated fetch method to `PUT` for engine updates.
- Changed variable names for clarity in `EngineVersionBadge.tsx`.
- Updated props in `UpdateVersionModal` to use `latestVersion`.
- Adjusted toast messages for better user feedback during engine updates.

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

<!-- end pr-codex -->
2024-10-02 07:09:16 +00:00
joaquim-verges 454f063f98 refactor: optimize zksync chain detection and add Creator Testnet test (#4883)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring code related to the handling of contract metadata, specifically around bytecode fetching and the integration of `zksync` support. It enhances the clarity and functionality of contract deployment processes.

### Detailed summary
- Removed checks for `compilerType` in multiple files.
- Simplified bytecode fetching by introducing `fetchBytecodeFromCompilerMetadata`.
- Updated contract metadata handling in `fetchDeployMetadata`.
- Adjusted UI components to reflect new metadata structure.
- Added a test for sending transactions on the Creator Testnet.

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

<!-- end pr-codex -->
2024-10-02 03:40:38 +00:00
MananTank 78cbc412ce Migrate Billing related components to tailwind/shadcn - Part 1 (#4879)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily refactors the onboarding and billing components, improving the UI structure and enhancing the modal functionalities. It replaces the `OnboardingTitle` with `TitleAndDescription`, streamlining the code and updating various components for better usability and consistency.

### Detailed summary
- Replaced `<OnboardingTitle>` with `<TitleAndDescription>` in several components.
- Updated `OnboardingModal` to remove redundant `onClose` props.
- Refactored billing alert components to use new UI elements.
- Enhanced the layout of forms and alerts for better UX.
- Improved state management for modal visibility.
- Added new utility functions for account and billing data stubs.
- Updated import statements for consistency and clarity.

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

<!-- end pr-codex -->
2024-10-02 00:07:14 +00:00
kien-ngo 79c50cb311 [Dashboard] Remove react-icons (1) (#4882)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on replacing various icon components with `PlusIcon` and `UploadIcon` from the `lucide-react` library, enhancing the UI consistency across the application.

### Detailed summary
- Replaced `Upload` component with `UploadIcon` in `airdrop-upload-erc20.tsx` and `upload-step.tsx`.
- Updated `FiPlus` icons to `PlusIcon` in multiple components, including `external-links-fieldset.tsx`, `NFTMintButton.tsx`, and more.
- Removed unused `Icon` imports from several files.
- Adjusted icon classes for consistent styling.

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

<!-- end pr-codex -->
2024-10-01 23:46:56 +00:00
kien-ngo 764ee8ca47 [Dashboard] Remove some chakra icons, adjust IpfsUploadButton (#4880)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on UI enhancements and component updates across various files in the dashboard application, including adjustments to icons, button properties, and tooltip components.

### Detailed summary
- Updated `InputRightElement` width from `145px` to `160px`.
- Changed `Tooltip` to `ToolTipLabel` in `OpenSeaPropertyBadge`.
- Modified `leftIcon` rendering in `ConnectPlaygroundButton` and `CodeOptionButton` to use class-based icons.
- Replaced `FiUpload` with `UploadIcon` in `IpfsUploadButton`.
- Swapped `BsFillLightningChargeFill` with `ZapIcon` in `ProductButton`.

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

<!-- end pr-codex -->
2024-10-01 23:46:54 +00:00
jnsdls 783d84467d update dependencies (#4874)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on updating various dependencies across multiple packages, ensuring compatibility and incorporating improvements.

### Detailed summary
- Updated `turbo` from `2.1.2` to `2.1.3`.
- Updated `@types/react` from `^18.3.8` to `^18.3.10`.
- Updated `tailwindcss` from `3.4.12` to `3.4.13`.
- Updated `@walletconnect/react-native-compat` from `2.13.2` to `2.16.3`.
- Updated `@coinbase/wallet-sdk` from `4.0.4` to `4.1.0`.
- Updated `viem` from `2.21.12` to `2.21.16`.
- Various other dependency updates across multiple packages.

> 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-10-01 22:10:01 +00:00
jnsdls 687a733d4a Add deprecation warnings to dashboard folders (#4878)
### TL;DR

Added warning messages to deprecated folders in the dashboard to prevent further additions.

### What changed?

Added `DO_NOT_ADD_THINGS_HERE.md` files to several deprecated folders within the dashboard's `src` directory. These folders include:

- @3rdweb-sdk
- classes
- contract-ui
- core-ui
- og-lib
- pages
- tw-components

Each file contains a warning message stating that the folder is deprecated and advising developers not to add new content to these locations.

### How to test?

1. Navigate to each of the mentioned folders in the dashboard's `src` directory.
2. Verify that the `DO_NOT_ADD_THINGS_HERE.md` file exists in each folder.
3. Open the files and confirm they contain the correct warning message.

### Why make this change?

This change aims to prevent developers from adding new content to deprecated parts of the dashboard. By placing clear warning messages in these folders, we reduce the risk of introducing new code or features in areas that are scheduled for removal. This helps maintain code quality, reduces technical debt, and supports the ongoing efforts to modernize and streamline the dashboard's structure.
2024-10-01 21:32:00 +00:00
kien-ngo 96daa2654c [SDK] Update docs for claimTo extensions (#4849)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the documentation for the `claimTo` function across the `ERC1155`, `ERC20`, and `ERC721` extensions by adding usage examples for drops with allowlists, emphasizing the need to specify the claimer address.

### Detailed summary
- Added a "### Basic usage" section to the documentation for `claimTo` in all three extensions.
- Introduced a "### For Drops with allowlists" section explaining the need for the `from` parameter.
- Provided code examples for using `claimTo` with allowlists in `ERC1155`, `ERC20`, and `ERC721`.

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

<!-- end pr-codex -->
2024-10-01 21:08:24 +00:00
kien-ngo a2ce5f56ab [Dashboard] Remove <Code /> component (ez mode) (#4787)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing code readability by replacing instances of the `Code` component from Chakra UI with a new `InlineCode` component, which provides a consistent styling for inline code snippets across various files.

### Detailed summary
- Added `InlineCode` component in `inline-code.tsx`.
- Replaced `Code` with `InlineCode` in multiple components for improved consistency:
  - `ChainValidation`
  - `EngineCorsConfig`
  - `EngineIpAllowlistConfig`
  - `InteractiveAbiFunction`
  - `EngineAccessTokens`
  - `SnapshotUpload`
  - `UploadStep`

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

<!-- end pr-codex -->
2024-10-01 21:03:53 +00:00
kumaryash90 6beec7a35e Check zksync stack (#4869)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `isZkSyncChain` function to be asynchronous and modifying various parts of the codebase to await its result. This change enhances the handling of chain identification, particularly for zkSync-related operations.

### Detailed summary
- Changed `isZkSyncChain` to an async function.
- Updated calls to `isZkSyncChain` to use `await` in several files.
- Modified the logic in `isZkSyncChain` to include additional checks for specific chain IDs.
- Introduced a new async function `getChainStack` for fetching chain stack information.

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

<!-- end pr-codex -->
2024-10-01 20:12:35 +00:00
31f371d065 Superposition Mainnnet Custom Chain Page (#4875)
Co-authored-by: Jonas Daniels <[email protected]>
2024-10-01 12:45:00 -07:00
MananTank fd8674a8a4 Single Header component for App and Pages router (#4877)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the dashboard components, enhancing the UI elements, and improving the overall structure of the codebase. It includes updates to navigation, styling, and the introduction of new components for better functionality.

### Detailed summary
- Deleted unused files: `nav-link.client.tsx`, `headerLinks.ts`, `MobileBurgerMenu.tsx`.
- Updated `cmd-k-search` button styling and icon size.
- Changed import paths in `layout.tsx`.
- Added `DashboardHeaderTabs` component to manage navigation.
- Refactored `DashboardHeader` to streamline layout and include new links.
- Updated `ColorModeToggle` and `CreditsButton` for better UI interaction.
- Enhanced `CreditsItem` component layout and functionality.
- Replaced `TrackedLinkButton` with `NavLink` in `UpgradeButton`.

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

<!-- end pr-codex -->
2024-10-01 19:33:06 +00:00
0xFirekeeper d3b0dc6646 [Portal] Fix Unity link (#4876)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the links in the `page.mdx` file for the Unity SDK to reflect the correct versioning in the URLs.

### Detailed summary
- Updated the link in the text from `/unity/getting-started` to `/unity/v5/getting-started`.
- Changed the `href` attribute of the `ArticleIconCard` component from `/unity/getting-started` to `/unity/v5/getting-started`.

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

<!-- end pr-codex -->
2024-10-01 19:29:36 +00:00
kien-ngo 98c5fd0b79 [SDK} Skip pack test (#4873)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `createNewPack` test in the `createNewPack.test.ts` file. It enhances the test by ensuring the correct creation and opening of a Pack while managing ERC20 and ERC721 tokens, including minting, approval, and balance checks.

### Detailed summary
- Added a `describe.skip` for `createNewPack` to temporarily skip the test.
- Reformatted the test to ensure proper execution flow.
- Included minting and approval for ERC20 and ERC721 tokens.
- Added assertions to verify balances and pack content after creation.
- Ensured correct metadata checks for the created Pack.

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

<!-- end pr-codex -->
2024-10-01 00:57:50 +00:00
0xFirekeeper 2f11259ccd [Portal] Link new Telegram Unity Template (#4872)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the `page.mdx` file to modify existing `ArticleCard` entries and add new ones. It enhances the descriptions and removes a duplicate `ArticleCard` for `Pioneer`.

### Detailed summary
- Updated the `description` for the `Take Flight!` and `Blockventure` `ArticleCard` entries.
- Added two new `ArticleCard` entries for `Telegram Mini-App` and `Pioneer`.
- Removed the duplicate `ArticleCard` for `Pioneer`.

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

<!-- end pr-codex -->
2024-10-01 00:47:16 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
97c09003dc Version Packages (#4842)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-10-01 13:37:54 +13:00
Edward SunandGitHub 5d0505c43c Add purchaseData to transfer transactions (#4871) 2024-10-01 09:14:38 +09:00
Jonas DanielsandGitHub e552fda9e5 fix auth token (#4870) 2024-09-30 16:58:35 -07:00
kien-ngo cddeda4280 [Dashboard] Remove <Stack/> (5) (#4844)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the usage of the `Stack` component from `@chakra-ui/react` to standard HTML elements with Flexbox classes for layout consistency and performance improvements across various components in the dashboard.

### Detailed summary
- Removed `Stack` component and replaced it with `div` elements using Flexbox classes in multiple files.
- Updated `as` prop for `FormControl` elements to use `className` for styling.
- Adjusted various components to improve layout and spacing using Tailwind CSS classes.
- Added `StackProps` to `SelectOptionProps` interface, making it more flexible.
- Ensured consistency in component structure and styling throughout the dashboard.

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

<!-- end pr-codex -->
2024-09-30 23:27:38 +00:00
MananTank cb72f67c92 Fix Contract Type shown in Contracts Table, Fix PublishedBy not showing latest version (#4854)
Fixes DASH-274

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving the handling of published contracts in the dashboard by reversing and sorting the list of contracts based on the publisher, prioritizing those from `THIRDWEB_DEPLOYER_ADDRESS`.

### Detailed summary
- In `published-by.tsx`, the list of published contracts is reversed.
- In `cells.tsx`, a new sorted array `publishedContractsFromDeploySorted` is created from the original contracts.
- The sorting prioritizes contracts published by `THIRDWEB_DEPLOYER_ADDRESS`.
- The display name retrieval uses the sorted list instead of the original query.

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

<!-- end pr-codex -->
2024-09-30 23:15:51 +00:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
222964dcbb Bump eslint-plugin-storybook from 0.8.0 to 0.9.0 (#4866)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 16:14:49 -07:00
MananTank ec37c74199 Fix InteractiveAbiFunction component not rendered in published contract page explorer (#4868)
FIXES: DASH-273

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving type safety and handling of published contracts in the dashboard application. It modifies type definitions and enhances the rendering logic for contract functions.

### Detailed summary
- Changed `snippet` type from `Record<CodeEnvironment, any>` to `Partial<Record<CodeEnvironment, any>>` in `formatSnippet`.
- Added a check for `publishedContract` in `layout.tsx` to ensure it exists before proceeding.
- Updated the `ContractFunction` component to enforce required `fn` and optional `contract` props.
- Enhanced rendering logic in `ContractFunctionInner` to display function usage and code snippets based on contract availability.

> The following files were skipped due to too many changes: `apps/dashboard/tsconfig.tsbuildinfo`

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

<!-- end pr-codex -->
2024-09-30 22:57:39 +00:00
kien-ngo 2ac1e86b8f [Dashboard] Remove FTUX (#4851)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing the `FTUX` component and related files from the project, simplifying the `Dashboard` component by eliminating conditional rendering based on wallet connection status.

### Detailed summary
- Deleted `FTUX.tsx` and associated files: `shared.ts`, `slides.tsx`, `animations.ts`, `Graphics.tsx`, `ContentContainer.tsx`, and `GraphicContainer.tsx`.
- Removed logic for `connectionStatus` and `showFTUX` from `Dashboard`.
- Streamlined rendering in `Dashboard` by directly displaying `OnboardingSteps`.

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

<!-- end pr-codex -->
2024-09-30 22:49:45 +00:00
kien-ngo bdc5964054 [Dashboard] Remove ListItem (2) (#4850)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on the removal of several files related to the `contract-ui` and `core-ui` components, alongside updates to various components and hooks to include `txChainID` for improved transaction handling.

### Detailed summary
- Deleted multiple files in `contract-ui` and `core-ui`.
- Added `txChainID` prop to `TransactionButton` across various components for transaction context.
- Updated `useWalletNFTs` to accept an object parameter for better clarity.
- Enhanced error handling in API functions.
- Refactored several components to improve code readability and maintainability.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/claim-conditions/page.tsx`, `apps/dashboard/src/contract-ui/tabs/claim-conditions/components/claim-conditions.tsx`, `apps/dashboard/src/contract-ui/tabs/permissions/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/page.tsx`, `apps/dashboard/src/components/app-layouts/app.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/detectedFeatures/erc4337.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/page.tsx`, `apps/dashboard/src/contract-ui/tabs/tokens/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/page.tsx`, `apps/dashboard/src/contract-ui/tabs/shared-components/cancel-tab.tsx`, `apps/dashboard/src/pages/hackathon/readyplayer3.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/BuildYourApp.tsx`, `apps/dashboard/src/stores/chainStores.tsx`, `apps/dashboard/src/contract-ui/tabs/account/page.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/page.tsx`, `apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/stores/SyncStoreToStorage.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx`, `apps/dashboard/src/pages/contact-us.tsx`, `apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx`, `apps/dashboard/src/components/contract-functions/contract-function.tsx`, `apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx`, `apps/dashboard/src/@/components/blocks/Sidebar.tsx`, `apps/dashboard/src/components/shared/DeprecatedAlert.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractFromParams.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/ConfigureCustomChain.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/Analytics.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/detectedFeatures/claimConditions.ts`, `apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx`, `apps/dashboard/src/contract-ui/tabs/settings/page.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx`, `apps/dashboard/src/pages/hackathon/consumer-crypto.tsx`, `apps/dashboard/src/@/components/blocks/MobileSidebar.tsx`, `apps/dashboard/src/components/custom-contract/contract-header/contract-metadata.tsx`, `apps/dashboard/src/contract-ui/tabs/explorer/page.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/page.tsx`, `apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx`, `apps/dashboard/src/components/layout/app-shell/index.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx`, `apps/dashboard/src/og-lib/url-utils.ts`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useActiveChainId.tsx`, `apps/dashboard/src/@/components/blocks/charts/area-chart.tsx`, `apps/dashboard/src/contract-ui/components/primary-dashboard-button.tsx`, `apps/dashboard/src/pages/hackathon/earn.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadata.ts`, `apps/dashboard/src/contract-ui/tabs/nfts/page.tsx`, `apps/dashboard/src/core-ui/batch-upload/upload-step.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/pages/api/og/contract.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts`, `apps/dashboard/src/components/buttons/MismatchButton.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-30 22:49:44 +00:00
kien-ngoandManan Tank 5fc07f7111 [Dashboard] Remove ListItem (1) and fix some UI issues from the aspect-ratio PR (#4846)
Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

This PR focuses on replacing `List` and `ListItem` components with HTML `<ul>` and `<li>` elements across multiple files to improve semantic HTML structure and potentially enhance accessibility.

- Removed `List` and `ListItem` components in favor of `<ul>` and `<li>` elements in various components.
- Updated `label` in `CreateListingsForm` to use a `Card` with structured `<ul>` content.
- Adjusted lists in `Hackathon`, `HackathonEarn`, and `ContactUs` pages to use `<ul>` and `<li>`.
- Minor styling adjustments for improved layout and alignment.

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

<!-- end pr-codex -->
2024-10-01 03:59:35 +05:30
MananTank 80729e9748 Move contract pages to app router (#4820)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on code cleanup and refactoring, including the removal of deprecated files and the addition of `txChainID` props in various components for better transaction handling.

### Detailed summary
- Deleted multiple unused files in `apps/dashboard/src/contract-ui` and `apps/dashboard/src/core-ui`.
- Added `txChainID` prop to `TransactionButton` in various components for transaction context.
- Updated components to use direct imports and improved overall code structure.
- Enhanced error handling and metadata fetching for contracts.

> The following files were skipped due to too many changes: `apps/dashboard/src/contract-ui/tabs/permissions/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/page.tsx`, `apps/dashboard/src/components/app-layouts/app.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/detectedFeatures/erc4337.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/page.tsx`, `apps/dashboard/src/contract-ui/tabs/tokens/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/code/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/page.tsx`, `apps/dashboard/src/contract-ui/tabs/shared-components/cancel-tab.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/PermissionsTable.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/BuildYourApp.tsx`, `apps/dashboard/src/stores/chainStores.tsx`, `apps/dashboard/src/contract-ui/tabs/account/page.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/NFTDetails.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/settings/page.tsx`, `apps/dashboard/src/contract-ui/tabs/accounts/components/accounts-table.tsx`, `apps/dashboard/src/components/contract-functions/contract-function.tsx`, `apps/dashboard/src/contract-ui/tabs/code/components/code-overview.tsx`, `apps/dashboard/src/stores/SyncStoreToStorage.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/ContractChecklist.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/table.tsx`, `apps/dashboard/src/contract-ui/tabs/embed/components/embed-setup.tsx`, `apps/dashboard/src/contract-ui/tabs/listings/components/list-form.tsx`, `apps/dashboard/src/contract-ui/tabs/events/components/events-feed.tsx`, `apps/dashboard/src/@/components/blocks/Sidebar.tsx`, `apps/dashboard/src/components/shared/DeprecatedAlert.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractFromParams.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/ConfigureCustomChain.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/Analytics.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/detectedFeatures/claimConditions.ts`, `apps/dashboard/src/contract-ui/tabs/settings/page.tsx`, `apps/dashboard/src/contract-ui/tabs/nfts/components/token-id.tsx`, `apps/dashboard/src/@/components/blocks/MobileSidebar.tsx`, `apps/dashboard/src/components/custom-contract/contract-header/contract-metadata.tsx`, `apps/dashboard/src/contract-ui/tabs/explorer/page.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/LatestEvents.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/page.tsx`, `apps/dashboard/src/components/layout/app-shell/index.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx`, `apps/dashboard/src/og-lib/url-utils.ts`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useActiveChainId.tsx`, `apps/dashboard/src/@/components/blocks/charts/area-chart.tsx`, `apps/dashboard/src/contract-ui/components/primary-dashboard-button.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageSidebarLinks.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_utils/getContractPageMetadata.ts`, `apps/dashboard/src/contract-ui/tabs/nfts/page.tsx`, `apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`, `apps/dashboard/src/pages/api/og/contract.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/components/custom-contract/contract-header/metadata-header.tsx`, `apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts`, `apps/dashboard/src/components/buttons/MismatchButton.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-30 21:43:43 +00:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
8832f87f4a Bump @storybook/addon-interactions from 8.3.2 to 8.3.4 (#4867)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:35:43 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
39a43903ad Bump @aws-sdk/client-lambda from 3.656.0 to 3.659.0 (#4861)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:33:46 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
6396729839 Bump @cloudflare/workers-types from 4.20240919.0 to 4.20240925.0 (#4862)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:32:17 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
30fd225538 Bump @walletconnect/sign-client from 2.16.2 to 2.16.3 (#4864)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:31:13 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
931bbd4952 Bump @storybook/react-vite from 8.3.2 to 8.3.4 (#4863)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:23:30 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
3202ce105c Bump @storybook/blocks from 8.3.2 to 8.3.4 (#4860)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:19:56 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
36aa3f0937 Bump @storybook/react from 8.3.2 to 8.3.4 (#4855)
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-30 14:05:14 -07:00
MananTank ab43d9426a Fix Code tab not working in playground - revert shiki to 1.16 (#4853)
Fixes CNCT-1958
2024-09-30 18:52:16 +00:00
AmirandGitHub 29938abfe3 Update page.mdx (#4848)
Signed-off-by: Amir <[email protected]>
2024-09-29 21:40:27 -07:00
AmirandGitHub 5bb5a437cd Update page.mdx (#4847)
Signed-off-by: Amir <[email protected]>
2024-09-29 21:14:07 -07:00
kien-ngo 8b681729a1 [Dashboard] Remove <Stack /> (4) (#4843)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the layout components in various files from using `Stack` to `div` elements with Flexbox classes for better styling and layout control.

### Detailed summary
- Replaced `<Stack>` components with `<div>` using Flexbox classes in multiple files.
- Updated form structures to use `<form>` tags directly instead of wrapping them in `<Stack>`.
- Adjusted spacing and alignment using Flexbox properties.

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

<!-- end pr-codex -->
2024-09-29 18:29:22 +00:00
kien-ngo 6c26012a71 [SDK] Update smart wallet test (#4845)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `sleep` function in `sleep.ts` for delaying asynchronous operations and replaces existing inline sleep implementations across various files with this unified function.

### Detailed summary
- Added `sleep` function in `packages/thirdweb/src/utils/sleep.ts` for delaying async operations.
- Removed duplicate `sleep` functions from `packages/thirdweb/src/rpc/watchBlockNumber.ts` and `packages/thirdweb/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.ts`.
- Updated calls to `sleep` in `packages/thirdweb/src/wallets/smart/smart-wallet-integration-v07.test.ts` and `packages/thirdweb/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.ts` to use the new function.

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

<!-- end pr-codex -->
2024-09-28 23:11:39 +00:00
kien-ngo 90b5495efb [SDK] Add Pack extensions (#4579)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces new functionalities and enhancements for the `Pack` contract in the `thirdweb` project, including event definitions, deployment options, and methods for managing packs and rewards.

### Detailed summary
- Added `initialize` function to `Pack.json`.
- Exported new types and functions in `deploy-pack.ts`.
- Defined new events and functions in `IPackVRFDirect.json`.
- Created tests for deploying `Pack` contracts.
- Updated changelog with Pack extensions.
- Implemented various methods for managing packs, including `openPack`, `addPackContents`, and `claimRewards`.

> The following files were skipped due to too many changes: `packages/thirdweb/src/extensions/pack/createNewPack.test.ts`, `packages/thirdweb/src/extensions/prebuilts/__generated__/Pack/write/initialize.ts`, `packages/thirdweb/src/extensions/pack/__generated__/IPack/write/createPack.ts`, `packages/thirdweb/src/extensions/pack/createNewPack.ts`

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

<!-- end pr-codex -->
2024-09-28 12:46:54 +00:00
Kien NgoandGitHub 71575afef3 [SDK] Avoid out-of-fund in tests (#4840) 2024-09-28 20:59:40 +12:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
70adb57293 Version Packages (#4841)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-28 20:48:14 +12:00
Kien NgoandGitHub 96fa4102ba [SDK] Avoid IPFS uploads in tests whenever possible (#4824) 2024-09-28 20:26:44 +12:00
Joaquim VergesandGitHub fc56142880 fix: createAndSignUserOp with multiple transactions (#4839) 2024-09-28 20:26:06 +12:00
gregfromstl 842baa0513 [SDK] Fix: ensure optional chains are passed to wc (#4838)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the `wallet-connect` functionality by ensuring that optional chains are correctly handled in the wallet connection request process.

### Detailed summary
- Updated the destructuring of the return value from `getChainsToRequest` to include `requiredChain`.
- Changed how `optionalChains` and `chains` are assigned in `connectWC` and `initProvider` functions.
- Modified the return structure of `getChainsToRequest` to include `requiredChain` and `optionalChains`.

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

<!-- end pr-codex -->
2024-09-28 07:51:20 +00:00
jnsdls 601958d5b7 [Add] Framer rewrite for /framer-test route (#4577)
<!-- start pr-codex -->

## PR-Codex overview
This PR updates the `next.config.js` file to enhance security policies and add new redirect paths for Framer.

### Detailed summary
- Updated `style-src` and `font-src` directives to include `vercel.live`, `assets.vercel.com`, and `framerusercontent.com`.
- Added `framerusercontent.com` and `events.framer.com` to the `script-src` directive.
- Introduced `FRAMER_PATHS` for specific redirect paths.
- Added new redirect mappings for Framer paths to `https://landing.thirdweb.com`.

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

<!-- end pr-codex -->
2024-09-27 22:30:41 +00:00
Jonas DanielsGitHubgithub-actions[bot] <github-actions[bot]@users.noreply.github.com>
bec828de86 Version Packages (#4822)
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-09-27 15:30:03 -07:00
gregfromstl a576a5b858 [SDK] Test: Adds storage mocks and basic tests (#4833)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces new features and improvements related to file uploads and downloads using IPFS and Arweave, along with enhancements to testing with `msw`. It also updates dependencies and modifies some configurations.

### Detailed summary
- Updated `.gitignore` to include `.aider*`.
- Modified `web-node.ts` to streamline header handling.
- Added `msw` as a dependency in `package.json`.
- Enhanced `download.ts` to better handle request timeouts.
- Implemented `msw` handlers in `storage.ts` for IPFS and Arweave.
- Expanded tests in `download.test.ts` for various download scenarios.
- Added tests in `web-node.test.ts` for file uploads and error handling.

> 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-27 22:04:39 +00:00
MananTank 5e3be734a3 Fix line break in engine Allowlisted Domains textarea placeholder (#4835)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `placeholder` prop of the `Textarea` component in the `cors.tsx` file to use a JavaScript expression instead of a string literal.

### Detailed summary
- Changed the `placeholder` prop from a string literal (`"https://example.com\nhttp://localhost:3000"`) to a JavaScript expression (`{"https://example.com\nhttp://localhost:3000"}`) for potentially better handling of the string.

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

<!-- end pr-codex -->
2024-09-27 22:00:05 +00:00
MananTank ce6d873ccc Fix Page crash on Module selection (#4834)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the handling of `selectedModule` in the `ModuleForm.tsx` component by including additional properties for better data management.

### Detailed summary
- Added `selectedModule?.contractId` to the data array.
- Added `selectedModule?.bytecodeHash` to the data array.

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

<!-- end pr-codex -->
2024-09-27 21:39:17 +00:00
gregfromstl bbe75b0bc8 [SDK] Fix: Only request specified wallet connect chains (#4832)
Falls in line with the WC spec and appeases some picky wallets

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing wallet connection issues in the `thirdweb` package, particularly for wallets with limited chain support. It improves handling of optional chains and modifies how chains are requested.

### Detailed summary
- Updated handling of `optionalChains` to default to `[1]` if empty.
- Changed `chains` to be `undefined` if `chainToRequest` is not provided.
- Modified `setRequestedChainsIds` function to accept `chains` as `undefined`.
- Simplified logic for `chainsToRequest` to use `undefined` when no chains are available.

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

<!-- end pr-codex -->
2024-09-27 19:47:31 +00:00
gregfromstl cefa4eb097 [SDK] Docs: fix social profiles docs (#4821)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the method used to retrieve social profiles in the `profiles.ts` file, changing the function name from `getProfiles` to `getSocialProfiles`.

### Detailed summary
- Changed the import statement from `getProfiles` to `getSocialProfiles` from the `thirdweb/social` module.
- Updated the usage of the function in the example to reflect the new function name.

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

<!-- end pr-codex -->
2024-09-27 16:34:01 +00:00
kien-ngo 63ceb2874c [Dashboard] Remove <Stack/> (3) (#4831)
## 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 `Stack` component from Chakra UI with `div` elements styled using Tailwind CSS classes. This change aims to improve layout consistency across various components in the application.

### Detailed summary
- Replaced `<Stack>` with `<div className="flex ...">` in multiple components for layout consistency.
- Adjusted spacing and alignment properties to match previous `Stack` behavior.
- Updated components in `airdrop-tab.tsx`, `select-option.tsx`, `airdrop-upload.tsx`, and others.

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

<!-- end pr-codex -->
2024-09-27 16:08:38 +00:00
kien-ngo 509c7981ee [Dashboard] Remove <Stack /> (2) (#4830)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on replacing instances of the `Stack` component with `div` elements styled using Tailwind CSS classes, enhancing the layout while maintaining functionality across various components in the dashboard application.

### Detailed summary
- Replaced `<Stack>` with `<div className="flex flex-col gap-X">` in multiple components for consistent styling.
- Updated `spacing` properties to `gap` for better alignment with Tailwind CSS practices.
- Maintained functionality across components such as `PermissionEditor`, `EventsFeedItem`, and various modal dialogs.

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

<!-- end pr-codex -->
2024-09-27 15:54:39 +00:00
kien-ngo 8ea9420cc4 [Dashboard] Remove <Stack /> (1) (#4829)
## 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 `Stack` component with `div` elements styled with Flexbox classes for layout consistency across various components in the application.

### Detailed summary
- Replaced `Stack` components with `div` elements using Flexbox for layout in multiple files.
- Updated spacing and alignment properties to maintain visual consistency.
- Adjusted modal body structures to use Flexbox for better responsiveness.

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

<!-- end pr-codex -->
2024-09-27 15:48:40 +00:00
kien-ngo 8dda1139dc [Dashboard] Remove default <Stack /> (#4828)
@MananTank here's the source code: https://github.com/chakra-ui/chakra-ui/blob/main/packages/react/src/components/stack/stack.tsx

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing `Stack` components with `div` elements styled with `flex` and `gap` classes across various files for a more consistent layout approach in the UI.

### Detailed summary
- Replaced `Stack` with `div className="flex flex-col gap-2"` in multiple components.
- Updated layout in `airdrop-tab.tsx`, `mint-form.tsx`, `lazy-mint-form.tsx`, `split/page.tsx`, `shared-metadata-form.tsx`, `update-metadata-form.tsx`, `transaction-timeline.tsx`, `NewsletterSection.tsx`, and more.
- Enhanced UI consistency and responsiveness.

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

<!-- end pr-codex -->
2024-09-27 11:21:45 +00:00
kien-ngo a637cab051 [Dashboard] Remove @react-icons/all-files (#4819)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating icon components in the `dashboard` application by replacing `react-icons` with custom SVG icons for improved performance and maintainability.

### Detailed summary
- Removed `@react-icons/all-files` dependency.
- Added new SVG components: `MediumIcon`, `YoutubeIcon`, `TiktokIcon`, `TelegramIcon`, `RedditIcon`, `MetaIcon`, `InstagramIcon`.
- Updated `SupportPage`, `PublisherSocials`, `AppFooter`, and other components to use new icons.

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

<!-- end pr-codex -->
2024-09-27 03:07:36 +00:00
kien-ngo c31f919cd4 [Dashboard] Replace Linkedin icon (#4818)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `LinkedInIcon` component and replaces instances of the `SiLinkedin` icon with the new `LinkedInIcon` in two files, enhancing the consistency of icon usage across the application.

### Detailed summary
- Created a new `LinkedInIcon` component in `LinkedinIcon.tsx`.
- Replaced `SiLinkedin` with `LinkedInIcon` in `socialLinks.tsx`.
- Replaced `SiLinkedin` with `LinkedInIcon` in `PublisherSocials.tsx`.

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

<!-- end pr-codex -->
2024-09-27 02:41:46 +00:00
kien-ngo ffcd199381 [Dashboard] Replace twitter icon (#4817)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new `XIcon` component and replaces existing Twitter icons in various components with this new icon, enhancing consistency and potentially improving the visual design.

### Detailed summary
- Added a new `XIcon` component in `XIcon.tsx`.
- Replaced `SiTwitter` icon with `XIcon` in:
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`

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

<!-- end pr-codex -->
2024-09-27 02:41:43 +00:00
kien-ngo b1d78b1f42 [Dashboard] Replace Discord icon (#4816)
## 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 `SiDiscord` icon from `@react-icons/all-files` with a custom `DiscordIcon` component in multiple files, enhancing the icon's integration and potentially improving styling consistency.

### Detailed summary
- Replaced `SiDiscord` icon with `DiscordIcon` in:
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`
- Introduced `DiscordIcon` component in `DiscordIcon.tsx` with an SVG representation.

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

<!-- end pr-codex -->
2024-09-27 01:52:10 +00:00
kien-ngo bc348ea953 [Dashboard] Replace Unity icon (#4814)
## 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 `SiUnity` icon from the `react-icons` library with a new custom `UnityIcon` component across multiple files in the dashboard application.

### Detailed summary
- Added a new `UnityIcon` component in `UnityIcon.tsx`.
- Replaced `SiUnity` with `UnityIcon` in:
  - `ConnectSDKCard.tsx`
  - `ConnectPlaygroundButton.tsx`
  - `CodeOptionButton.tsx`
  - `SupportedPlatformLink.tsx`
  - `CodeSegment.tsx`

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

<!-- end pr-codex -->
2024-09-27 01:24:04 +00:00
kien-ngo 43a24e2ed4 [Dashboard] Replace React icon (#4813)
## 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 `SiReact` icon with a new custom `ReactIcon` component across several files in the dashboard application.

### Detailed summary
- Added `ReactIcon` component in `apps/dashboard/src/components/icons/brand-icons/ReactIcon.tsx`.
- Replaced `SiReact` with `ReactIcon` in:
  - `ConnectSDKCard.tsx`
  - `ConnectPlaygroundButton.tsx`
  - `CodeOptionButton.tsx`
  - `SupportedPlatformLink.tsx`
  - `CodeSegment.tsx`

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

<!-- end pr-codex -->
2024-09-27 01:24:02 +00:00
kien-ngo 7b40f2e8e4 [Dashboard] Replace JS and TS icons (#4812)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing existing icon imports for `JavaScript` and `TypeScript` with custom icon components, enhancing the visual representation in the application.

### Detailed summary
- Replaced `SiJavascript` with `JavaScriptIcon` in `ConnectPlaygroundButton.tsx`, `CodeOptionButton.tsx`, `CodeSegment.tsx`.
- Replaced `SiTypescript` with `TypeScriptIcon` in `SupportedPlatformLink.tsx`, `ConnectSDKCard.tsx`, `CodeSegment.tsx`.
- Added new components: `JavaScriptIcon.tsx` and `TypeScriptIcon.tsx` for custom icons.

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

<!-- end pr-codex -->
2024-09-27 01:24:00 +00:00
kien-ngo c1d94aec4f [Dashboard] Replace SiGithub (#4811)
## 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 `SiGithub` icon from `@react-icons` with a custom `GithubIcon` component across several files in the dashboard application.

### Detailed summary
- Replaced `SiGithub` with `GithubIcon` in:
  - `GameCard.tsx`
  - `app-footer.tsx`
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`
- Added `GithubIcon` component in `GithubIcon.tsx` with SVG implementation.

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

<!-- end pr-codex -->
2024-09-27 01:23:58 +00:00
kien-ngo ebd5908d4a [Dashboard] Remove non-branding icons (#4810)
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on replacing various `react-icons` with `lucide-react` icons across multiple components, along with some minor adjustments to properties and imports. It aims to standardize icon usage within the codebase.

### Detailed summary
- Removed `IconType` from multiple interfaces in `types.ts` and `AnimatedCLICommand.tsx`.
- Replaced `react-icons` with `lucide-react` icons in `HackathonFooter`, `NFTClaimButton`, and other components.
- Updated icon rendering logic in multiple components for consistency.
- Adjusted imports and usage of icons in `FileInput`, `BatchLazyMint`, and `MismatchButton`.

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

<!-- end pr-codex -->
2024-09-27 01:11:42 +00:00
Edward SunandGitHub 21b032d1b8 Remove text in UI (#4823) 2024-09-26 16:56:46 -07:00
kumaryash90 d0616c4486 Fix Cronos zkevm deployments (#4815)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR adds support for the `cronos zkevm` by updating the `isZkSyncChain` check to include additional chain IDs for both the testnet and mainnet.

### Detailed summary
- Updated the `isZkSyncChain` function in the file `packages/thirdweb/src/utils/any-evm/zksync/isZkSyncChain.ts`.
- Added chain ID `282` for `cronos zkevm testnet`.
- Added chain ID `388` for `cronos zkevm mainnet`.

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

<!-- end pr-codex -->
2024-09-26 22:13:03 +00:00
MananTank 88db5eaeab Add upload to IPFS on teams & account avatar form fields (#4807)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the account and team settings pages by adding image upload functionality for accounts and teams, updating component imports, and improving layout responsiveness.

### Detailed summary
- Added `updateAccountImage` method to `AccountSettingsPage` and `AccountSettingsPageUI`.
- Introduced `updateTeamImage` method in `TeamGeneralSettingsPage` and `TeamGeneralSettingsPageUI`.
- Changed layout from `min-h-full` to `min-h-screen`.
- Updated import statements to reflect new component names.
- Implemented async image upload functionality with IPFS integration.
- Added error handling for image update methods.

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

<!-- end pr-codex -->
2024-09-26 20:43:18 +00:00
MananTank 09b1c28c09 Replace Avatar placeholders with Avatar components in teams and account layout (#4803)
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on updating the account handling in various components to use an `account` object instead of separate email fields, and introduces new avatar components for enhanced visual representation of users and projects.

### Detailed summary
- Replaced `email` with `account` in multiple components.
- Introduced `GradientAvatar` and `ProjectAvatar` components for displaying user and project images.
- Updated story files to showcase new avatar components.
- Added placeholder comments for future image integration.
- Adjusted layout and styling for better alignment with new account structure.

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

<!-- end pr-codex -->
2024-09-26 20:43:14 +00:00
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
5579 changed files with 765928 additions and 462663 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"
+2 -6
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,8 +24,8 @@ codecov
sitemap*.xml
# typedoc
legacy_packages/*/typedoc/*
packages/*/typedoc/*
*storybook.log
storybook-static
storybook-static
.aider*
@@ -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=""
+16 -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,13 @@ module.exports = {
"FormErrorMessage",
"MenuGroup",
"MenuItem",
"VStack",
"HStack",
"AspectRatio",
"useToast",
"useClipboard",
"Badge",
"Stack",
// also the types
"ButtonProps",
"BadgeProps",
@@ -62,6 +72,9 @@ module.exports = {
"HelpTextProps",
"MenuGroupProps",
"MenuItemProps",
"AspectRatioProps",
"BadgeProps",
"StackProps",
],
message:
'Use the equivalent component from "tw-components" instead.',
@@ -98,7 +111,7 @@ module.exports = {
],
},
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint", "import", "react-compiler"],
plugins: ["@typescript-eslint", "react-compiler"],
parserOptions: {
ecmaVersion: 2019,
ecmaFeatures: {
@@ -115,31 +128,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(
+10 -4
View File
@@ -5,10 +5,10 @@ const ContentSecurityPolicy = `
img-src * data: blob:;
media-src * data: blob:;
object-src 'none';
style-src 'self' 'unsafe-inline' https://vercel.live;
font-src 'self' https://vercel.live https://assets.vercel.com;
style-src 'self' 'unsafe-inline' vercel.live;
font-src 'self' vercel.live assets.vercel.com framerusercontent.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 framerusercontent.com events.framer.com;
connect-src * data: blob:;
worker-src 'self' blob:;
block-all-mixed-content;
@@ -39,6 +39,9 @@ const securityHeaders = [
const redirects = require("./redirects");
// add framer paths here
const FRAMER_PATHS = ["/connect/sign-in", "/contracts/modular-contracts"];
/**
* @returns {import('next').RemotePattern[]}
*/
@@ -128,6 +131,10 @@ const moduleExports = {
source: "/thirdweb.eth/:path*",
destination: "/deployer.thirdweb.eth/:path*",
},
...FRAMER_PATHS.map((path) => ({
source: path,
destination: `https://landing.thirdweb.com${path}`,
})),
];
},
images: {
@@ -144,7 +151,6 @@ const moduleExports = {
reactStrictMode: true,
experimental: {
scrollRestoration: true,
esmExternals: "loose",
webpackBuildWorker: true,
serverSourceMaps: false,
},
+32 -70
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,14 @@
"@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",
"@sentry/nextjs": "8.32.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 +60,22 @@
"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.9.0",
"fuse.js": "7.0.0",
"input-otp": "^1.2.4",
"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",
@@ -96,8 +88,6 @@
"react-icons": "^5.2.1",
"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 +101,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.4",
"@storybook/addon-interactions": "8.3.4",
"@storybook/addon-links": "8.3.4",
"@storybook/addon-onboarding": "8.3.4",
"@storybook/addon-viewport": "8.3.4",
"@storybook/blocks": "8.3.4",
"@storybook/nextjs": "8.3.4",
"@storybook/react": "8.3.4",
"@storybook/test": "8.3.4",
"@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.10",
"@types/react-dom": "^18",
"@types/react-table": "^7.7.20",
"@types/spdx-correct": "^3.1.3",
@@ -145,40 +133,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-plugin-storybook": "^0.8.0",
"eslint-config-biome": "1.8.4",
"eslint-plugin-react-compiler": "0.0.0-experimental-ca16900-20240916",
"eslint-plugin-storybook": "^0.9.0",
"knip": "^5.30.6",
"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.4",
"tailwindcss": "3.4.13",
"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"
]
}
}
+3 -5
View File
@@ -1,10 +1,8 @@
import "server-only";
import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
import { API_SERVER_URL } from "@/constants/env";
import { cookies } from "next/headers";
const THIRDWEB_API_HOST =
process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
export type Project = {
id: string;
name: string;
@@ -34,7 +32,7 @@ export async function getProjects(teamSlug: string) {
}
const teamsRes = await fetch(
`${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects`,
`${API_SERVER_URL}/v1/teams/${teamSlug}/projects`,
{
headers: {
Authorization: `Bearer ${token}`,
@@ -59,7 +57,7 @@ export async function getProject(teamSlug: string, projectSlug: string) {
}
const teamsRes = await fetch(
`${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/projects/${projectSlug}`,
`${API_SERVER_URL}/v1/teams/${teamSlug}/projects/${projectSlug}`,
{
headers: {
Authorization: `Bearer ${token}`,
+2 -4
View File
@@ -1,10 +1,8 @@
import "server-only";
import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
import { API_SERVER_URL } from "@/constants/env";
import { cookies } from "next/headers";
const THIRDWEB_API_HOST =
process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
const TeamAccountRole = {
OWNER: "OWNER",
MEMBER: "MEMBER",
@@ -39,7 +37,7 @@ export async function getMembers(teamSlug: string) {
}
const teamsRes = await fetch(
`${THIRDWEB_API_HOST}/v1/teams/${teamSlug}/members`,
`${API_SERVER_URL}/v1/teams/${teamSlug}/members`,
{
headers: {
Authorization: `Bearer ${token}`,
+3 -5
View File
@@ -1,10 +1,8 @@
import "server-only";
import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
import { API_SERVER_URL } from "@/constants/env";
import { cookies } from "next/headers";
const THIRDWEB_API_HOST =
process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com";
export type Team = {
id: string;
name: string;
@@ -35,7 +33,7 @@ export async function getTeamBySlug(slug: string) {
return null;
}
const teamRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams/${slug}`, {
const teamRes = await fetch(`${API_SERVER_URL}/v1/teams/${slug}`, {
headers: {
Authorization: `Bearer ${token}`,
},
@@ -57,7 +55,7 @@ export async function getTeams() {
return [];
}
const teamsRes = await fetch(`${THIRDWEB_API_HOST}/v1/teams`, {
const teamsRes = await fetch(`${API_SERVER_URL}/v1/teams`, {
headers: {
Authorization: `Bearer ${token}`,
},
@@ -0,0 +1,89 @@
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { BadgeContainer } from "../../../../stories/utils";
import { Button } from "../../ui/button";
import { GradientAvatar } from "./GradientAvatar";
const meta = {
title: "blocks/Avatars/GradientAvatar",
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-6 className </p>
<BadgeContainer label="No Src, No id - Skeleton">
<GradientAvatar id={undefined} src={undefined} className="size-6" />
</BadgeContainer>
<BadgeContainer label="No Src, id=foo - Skeleton">
<GradientAvatar id={"foo"} src={undefined} className="size-6" />
</BadgeContainer>
<BadgeContainer label="Invalid/Empty Src, id=foo - Gradient">
<GradientAvatar id={"foo"} src={""} className="size-6" />
</BadgeContainer>
<BadgeContainer label="Invalid/Empty Src, id=bar - Gradient">
<GradientAvatar id={"bar"} src={""} className="size-6" />
</BadgeContainer>
<BadgeContainer label="Empty/Invalid Src, No id - default fallback">
<GradientAvatar src="invalid-src" id={undefined} className="size-6" />
</BadgeContainer>
<ToggleTest />
</div>
);
}
function ToggleTest() {
const [data, setData] = useState<undefined | { src: string; id: string }>(
undefined,
);
return (
<div className="relative flex flex-col gap-10 border p-6">
<Button
variant="outline"
onClick={() => {
if (data) {
setData(undefined);
} else {
setData({
id: "foo",
src: "https://picsum.photos/400",
});
}
}}
className="absolute top-6 right-6 inline-flex"
>
Toggle Src
</Button>
<p> Src+ID is: {data ? "set" : "not set"} </p>
<BadgeContainer label="Valid Src">
<GradientAvatar src={data?.src} id={data?.id} className="size-6" />
</BadgeContainer>
<BadgeContainer label="invalid Src">
<GradientAvatar
className="size-6"
src={data ? "invalid-src" : undefined}
id={undefined}
/>
</BadgeContainer>
</div>
);
}
@@ -0,0 +1,58 @@
import { Img } from "@/components/blocks/Img";
import { useMemo } from "react";
import { cn } from "../../../lib/utils";
const gradients = [
["#fca5a5", "#b91c1c"],
["#fdba74", "#c2410c"],
["#fcd34d", "#b45309"],
["#fde047", "#a16207"],
["#a3e635", "#4d7c0f"],
["#86efac", "#15803d"],
["#67e8f9", "#0e7490"],
["#7dd3fc", "#0369a1"],
["#93c5fd", "#1d4ed8"],
["#a5b4fc", "#4338ca"],
["#c4b5fd", "#6d28d9"],
["#d8b4fe", "#7e22ce"],
["#f0abfc", "#a21caf"],
["#f9a8d4", "#be185d"],
["#fda4af", "#be123c"],
];
function getGradientForString(str: string) {
const number = Math.abs(
str.split("").reduce((acc, b, i) => acc + b.charCodeAt(0) * (i + 1), 0),
);
const index = number % gradients.length;
return gradients[index];
}
export function GradientAvatar(props: {
src: string | undefined;
id: string | undefined;
className: string;
}) {
const gradient = useMemo(() => {
if (!props.id) {
return undefined;
}
return getGradientForString(props.id);
}, [props.id]);
return (
<Img
src={props.src}
className={cn("rounded-full", props.className)}
fallback={
gradient ? (
<div
style={{
background: `linear-gradient(45deg, ${gradient[0]} 0%, ${gradient[1]} 100%)`,
}}
/>
) : undefined
}
/>
);
}
@@ -0,0 +1,76 @@
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { BadgeContainer } from "../../../../stories/utils";
import { Button } from "../../ui/button";
import { ProjectAvatar } from "./ProjectAvatar";
const meta = {
title: "blocks/Avatars/ProjectAvatar",
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-6 className </p>
<BadgeContainer label="No Src - Skeleton">
<ProjectAvatar src={undefined} className="size-6" />
</BadgeContainer>
<BadgeContainer label="Invalid/Empty Src - BoxIcon Fallback">
<ProjectAvatar src={""} className="size-6" />
</BadgeContainer>
<ToggleTest />
</div>
);
}
function ToggleTest() {
const [data, setData] = useState<undefined | { src: string; name: string }>(
undefined,
);
return (
<div className="relative flex flex-col gap-10 border p-6">
<Button
variant="outline"
onClick={() => {
if (data) {
setData(undefined);
} else {
setData({
name: "foo",
src: "https://picsum.photos/400",
});
}
}}
className="absolute top-6 right-6 inline-flex"
>
Toggle Src
</Button>
<p> Src+Name is: {data ? "set" : "not set"} </p>
<BadgeContainer label="Valid Src">
<ProjectAvatar src={data?.src} className="size-6" />
</BadgeContainer>
<BadgeContainer label="invalid Src">
<ProjectAvatar
src={data ? "invalid-src" : undefined}
className="size-6"
/>
</BadgeContainer>
</div>
);
}
@@ -0,0 +1,21 @@
import { Img } from "@/components/blocks/Img";
import { BoxIcon } from "lucide-react";
import { cn } from "../../../lib/utils";
export function ProjectAvatar(props: {
src: string | undefined;
className: string | undefined;
}) {
return (
<Img
src={props.src}
className={cn("rounded-lg border", props.className)}
alt={""}
fallback={
<div className="flex items-center justify-center bg-muted/50">
<BoxIcon className="size-[50%] text-muted-foreground" />
</div>
}
/>
);
}
@@ -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>
);
}
@@ -4,30 +4,50 @@ import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { ChevronDownIcon } from "lucide-react";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { useMemo, useState } from "react";
import { cn } from "../../lib/utils";
import { NavLink } from "../ui/NavLink";
import type { SidebarLink } from "./Sidebar";
import {
RenderSidebarLinks,
type SidebarBaseLink,
type SidebarLink,
} from "./Sidebar";
export function MobileSidebar(props: {
links?: SidebarLink[];
links: SidebarLink[];
footer?: React.ReactNode;
trigger?: React.ReactNode;
triggerClassName?: string;
}) {
const [isOpen, setIsOpen] = useState(false);
const pathname = usePathname();
const activeLink = props.links?.find((link) => {
if (link.exactMatch) {
return link.href === pathname;
const activeLink = useMemo(() => {
function isActive(link: SidebarBaseLink) {
if (link.exactMatch) {
return link.href === pathname;
}
return pathname?.startsWith(link.href);
}
return pathname?.startsWith(link.href);
});
for (const link of props.links) {
if ("group" in link) {
for (const subLink of link.links) {
if (isActive(subLink)) {
return subLink;
}
}
} else {
if (isActive(link)) {
return link;
}
}
}
}, [props.links, pathname]);
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 +61,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="no-scrollbar max-h-[80vh] overflow-auto rounded-t-xl rounded-b-none p-4"
dialogCloseClassName="hidden"
onClick={(e) => {
if (e.target instanceof HTMLAnchorElement) {
@@ -49,23 +69,7 @@ export function MobileSidebar(props: {
}
}}
>
<div className="flex flex-col gap-2">
{props.links?.map((link) => {
return (
<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"
activeClassName="bg-accent"
exactMatch={link.exactMatch}
tracking={link.tracking}
>
{link.label}
</NavLink>
</Button>
);
})}
</div>
<RenderSidebarLinks links={props.links} />
{props.footer}
</DialogContent>
</Dialog>
@@ -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>
@@ -3,7 +3,7 @@ import type React from "react";
import { cn } from "../../lib/utils";
import { NavLink } from "../ui/NavLink";
export type SidebarLink = {
export type SidebarBaseLink = {
href: string;
label: React.ReactNode;
exactMatch?: boolean;
@@ -14,7 +14,14 @@ export type SidebarLink = {
};
};
export type SidebarContentProps = {
export type SidebarLink =
| SidebarBaseLink
| {
group: string;
links: SidebarBaseLink[];
};
type SidebarContentProps = {
header?: React.ReactNode;
links: SidebarLink[];
className?: string;
@@ -24,30 +31,49 @@ 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,
)}
>
<div className="pt-7">
{props.header}
<div className="flex flex-col gap-1">
{props.links?.map((link) => {
const isExternal = link.href.startsWith("http");
return (
<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"
activeClassName="text-foreground"
exactMatch={link.exactMatch}
>
{link.label}
{isExternal && <ExternalLinkIcon className="size-3" />}
</NavLink>
);
})}
<RenderSidebarLinks links={props.links} />
</div>
</div>
</aside>
);
}
export function RenderSidebarLinks(props: { links: SidebarLink[] }) {
return (
<div className="flex flex-col gap-1">
{props.links.map((link, i) => {
if ("group" in link) {
return (
<div className={cn({ "mt-6": i !== 0 })}>
<p className={cn("px-3 py-2 font-medium text-foreground")}>
{link.group}
</p>
<RenderSidebarLinks links={link.links} />
</div>
);
}
const isExternal = link.href.startsWith("http");
return (
<NavLink
key={link.href}
href={link.href}
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}
>
{link.label}
{isExternal && <ExternalLinkIcon className="size-3" />}
</NavLink>
);
})}
</div>
);
}
@@ -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>
@@ -1,17 +1,15 @@
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
import { DiscordIcon } from "components/icons/brand-icons/DiscordIcon";
import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
import { InstagramIcon } from "components/icons/brand-icons/InstagramIcon";
import { LinkedInIcon } from "components/icons/brand-icons/LinkedinIcon";
import { RedditIcon } from "components/icons/brand-icons/RedditIcon";
import { TiktokIcon } from "components/icons/brand-icons/TiktokIcon";
import { XIcon } from "components/icons/brand-icons/XIcon";
import { YoutubeIcon } from "components/icons/brand-icons/YoutubeIcon";
import Link from "next/link";
import {
SiDiscord,
SiGithub,
SiInstagram,
SiLinkedin,
SiReddit,
SiTiktok,
SiX,
SiYoutube,
} from "react-icons/si";
type AppFooterProps = {
className?: string;
@@ -21,31 +19,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" />
<GithubIcon 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" />
<TiktokIcon 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" />
<InstagramIcon className="size-5 text-muted-foreground" />
</Link>
</Button>
<Button size="icon" variant="ghost" asChild className="size-9">
@@ -53,83 +51,83 @@ export function AppFooter(props: AppFooterProps) {
href="hhttps://www.linkedin.com/company/third-web/"
target="_blank"
>
<SiLinkedin className="text-muted-foreground size-5" />
<LinkedInIcon 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" />
<YoutubeIcon 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" />
<DiscordIcon 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" />
<RedditIcon 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" />
<XIcon 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"
>
@@ -1,14 +1,5 @@
"use client";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
type ChartConfig,
ChartContainer,
@@ -18,11 +9,9 @@ import {
ChartTooltipContent,
} from "@/components/ui/chart";
import { useMemo } from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
export type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
// metadata
title: string;
description?: string;
type ThirdwebAreaChartProps<TConfig extends ChartConfig> = {
// chart config
config: TConfig;
data: Array<Record<keyof TConfig, number> & { time: number | string | Date }>;
@@ -37,73 +26,65 @@ export function ThirdwebAreaChart<TConfig extends ChartConfig>(
) {
const configKeys = useMemo(() => Object.keys(props.config), [props.config]);
return (
<Card>
<CardHeader>
<CardTitle>{props.title}</CardTitle>
{props.description && (
<CardDescription>{props.description}</CardDescription>
)}
</CardHeader>
<CardContent>
<ChartContainer config={props.config} className={props.chartClassName}>
<AreaChart
accessibilityLayer
data={props.data}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="time"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => new Date(value).toLocaleDateString()}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
<defs>
{configKeys.map((key) => (
<linearGradient
key={key}
id={`fill_${key}`}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor={`var(--color-${key})`}
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor={`var(--color-${key})`}
stopOpacity={0.1}
/>
</linearGradient>
))}
</defs>
<div className="rounded-lg border border-border bg-muted/50 px-4 pt-10 pb-4">
<ChartContainer config={props.config} className={props.chartClassName}>
<AreaChart
accessibilityLayer
data={props.data}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="time"
tickLine={false}
axisLine={false}
tickMargin={20}
tickFormatter={(value) => new Date(value).toLocaleDateString()}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
<defs>
{configKeys.map((key) => (
<Area
<linearGradient
key={key}
dataKey={key}
type="natural"
fill={`url(#fill_${key})`}
fillOpacity={0.4}
stroke={`var(--color-${key})`}
stackId="a"
/>
id={`fill_${key}`}
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="5%"
stopColor={`var(--color-${key})`}
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor={`var(--color-${key})`}
stopOpacity={0.1}
/>
</linearGradient>
))}
</defs>
{configKeys.map((key) => (
<Area
key={key}
dataKey={key}
type="natural"
fill={`url(#fill_${key})`}
fillOpacity={0.4}
stroke={`var(--color-${key})`}
stackId="a"
/>
))}
{props.showLegend && (
<ChartLegend content={<ChartLegendContent />} />
)}
</AreaChart>
</ChartContainer>
</CardContent>
</Card>
{props.showLegend && (
<ChartLegend content={<ChartLegendContent />} className="pt-8" />
)}
</AreaChart>
</ChartContainer>
</div>
);
}
@@ -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>
</>
@@ -0,0 +1,17 @@
import { cn } from "@/lib/utils";
export function InlineCode({
code,
className,
}: { code: string; className?: string }) {
return (
<code
className={cn(
"inline-block rounded bg-muted px-2 font-mono text-sm",
className,
)}
>
{code}
</code>
);
}
@@ -0,0 +1,72 @@
"use client";
import { OTPInput, OTPInputContext } from "input-otp";
import { Dot } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50",
containerClassName,
)}
className={cn("disabled:cursor-not-allowed", className)}
{...props}
/>
));
InputOTP.displayName = "InputOTP";
const InputOTPGroup = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center", className)} {...props} />
));
InputOTPGroup.displayName = "InputOTPGroup";
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext);
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
return (
<div
ref={ref}
className={cn(
"relative flex h-10 w-10 items-center justify-center border-input border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
isActive && "z-10 ring-2 ring-ring ring-offset-background",
className,
)}
{...props}
>
{char}
{hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
</div>
)}
</div>
);
});
InputOTPSlot.displayName = "InputOTPSlot";
const InputOTPSeparator = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
// biome-ignore lint/a11y/useFocusableInteractive: <explanation>
<div ref={ref} role="separator" {...props}>
<Dot />
</div>
));
InputOTPSeparator.displayName = "InputOTPSeparator";
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+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}
+8 -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>
@@ -165,6 +165,8 @@ function useUnderline<El extends HTMLElement>() {
block: "nearest",
inline: "center",
});
} else if (lineRef.current) {
lineRef.current.style.width = "0px";
}
}
@@ -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;
}
+7
View File
@@ -16,3 +16,10 @@ 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";
export const API_SERVER_URL =
process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.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}%`,
+8
View File
@@ -1,3 +1,7 @@
"use client";
import { useSyncExternalStore } from "react";
export type Store<T> = {
getValue(): T;
setValue(newValue: T): void;
@@ -45,3 +49,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;
}
@@ -0,0 +1,3 @@
# DO NOT ADD NEW THINGS INSIDE THIS FOLDER OR SUB_FOLDERS
This part of the dashboard is deprecated, and we are actively working on removing it. Please do not add new things here. If you need to add new things, please add them to the appropriate folder in the src folder.
@@ -1,12 +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,
multiChainRegistry: ["multi-chain-registry"] as const,
};
export const accountKeys = {
all: ["account"] as const,
wallet: (walletAddress: string) =>
@@ -107,59 +98,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";
@@ -1,93 +0,0 @@
import { networkKeys, useDashboardEVMChainId } from "@3rdweb-sdk/react";
import {
type MutationFunction,
type QueryFunction,
type QueryKey,
type UseMutationOptions,
type UseQueryOptions,
type UseQueryResult,
useMutation,
useQuery,
useQueryClient,
} from "@tanstack/react-query";
import { useCallback } from "react";
export function useQueryWithNetwork<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey,
>(
queryKey: TQueryKey,
queryFn: QueryFunction<TQueryFnData, TQueryKey>,
options?: Omit<
UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
"queryKey" | "queryFn"
>,
): UseQueryResult<TData, TError> {
const activeChainId = useDashboardEVMChainId();
const mergedOptions: Omit<
UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
"queryKey" | "queryFn"
> = {
...options,
enabled: !!(activeChainId && options?.enabled),
};
const combinedQueryKey = (
networkKeys.chain(activeChainId) as readonly unknown[]
).concat(queryKey) as unknown as TQueryKey;
return useQuery(combinedQueryKey, queryFn, mergedOptions);
}
export function useMutationWithInvalidate<
TData = unknown,
TError = unknown,
TVariables = void,
TContext = unknown,
TQueryKey extends QueryKey = QueryKey,
>(
mutationFn: MutationFunction<TData, TVariables>,
options?: Omit<
UseMutationOptions<TData, TError, TVariables, TContext>,
"mutationFn" | "onSuccess"
> & {
onSuccess?: (
data: TData,
variables: TVariables,
context: TContext | undefined,
wrapCacheKeys: (
cacheKeysToInvalidate: TQueryKey[],
// biome-ignore lint/suspicious/noConfusingVoidType: FIX ME
) => Promise<void[]>,
) => Promise<unknown> | undefined;
},
) {
const activeChainId = useDashboardEVMChainId();
const queryClient = useQueryClient();
const invalidate = useCallback(
(cacheKeysToInvalidate: TQueryKey[]) => {
return Promise.all(
cacheKeysToInvalidate.map((cacheKey) => {
return queryClient.invalidateQueries(
(networkKeys.chain(activeChainId) as readonly unknown[]).concat(
cacheKey,
) as unknown[],
);
}),
);
},
[queryClient, activeChainId],
);
return useMutation(mutationFn, {
...options,
onSuccess: (...args) => {
if (options?.onSuccess) {
options.onSuccess(...args, invalidate);
}
},
});
}

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