Change address of dashboard when changing wallets #941
Conversation
|
@caxtonacollins is attempting to deploy a commit to the LFG Labs Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces several modifications across multiple components, primarily focusing on user data handling, fetching logic, and UI rendering. A new Changes
Possibly related PRs
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
app/provider.tsxOops! Something went wrong! :( ESLint: 9.14.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@kfastov please review |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (12)
context/WalletProvider.tsx (1)
1-11: LGTM! Consider adding JSDoc comments for better documentation.The type definitions and imports are well-structured. The
WalletContextTypeinterface clearly defines the contract for the wallet context.Consider adding JSDoc comments to document the purpose of each property:
+/** + * Type definition for the Wallet context + */ type WalletContextType = { + /** Current wallet address, null when no wallet is connected */ newAddress: string | null; + /** Updates the current wallet address */ setNewAddress: (account: string | null) => void; + /** Current URL parameters for the wallet route */ newURLParams: string; + /** Updates the URL parameters for the wallet route */ setNewURLParams: (account: string) => void; };app/provider.tsx (4)
39-59: Consider extracting wallet configuration to a separate config file.The wallet connectors configuration, especially the ArgentMobile settings, contains hardcoded values. Consider:
- Moving these configurations to a separate config file
- Using environment variables for dynamic values
+ // config/wallet.ts + export const walletConfig = { + dappName: process.env.NEXT_PUBLIC_DAPP_NAME || 'Starknet Quest', + dappIcon: process.env.NEXT_PUBLIC_DAPP_ICON || 'https://starknet.quest/visuals/starknetquestLogo.svg', + };
90-96: Consider using MUI's breakpoints for responsive design.The media query breakpoint is hardcoded. Consider using MUI's breakpoint system for consistency:
- ['@media (min-width:768px)']: { + [theme.breakpoints.up('md')]: {
111-113: Apply the same breakpoint suggestion here.For consistency, update this media query as well:
- ['@media (min-width:768px)']: { + [theme.breakpoints.up('md')]: {
⚠️ Privacy implications need to be addressed for session recordingBased on the codebase analysis:
- No privacy policy or cookie consent implementation was found despite the use of session recording
- PostHog is configured with cross-origin iframe recording enabled
- No user notification or consent mechanism for session recording was detected
Required actions:
- Implement a cookie consent mechanism before initializing PostHog
- Add a privacy policy addressing session recording practices
- Consider disabling
recordCrossOriginIframesunless specifically required for functionality- Add user notification about session recording
🔗 Analysis chain
Line range hint
26-35: Verify privacy implications of cross-origin iframe recording.The PostHog configuration enables recording of cross-origin iframes. Please ensure:
- This aligns with your privacy policy
- Sensitive user data is not inadvertently captured
- Users are properly informed about the recording
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for privacy policy and cookie consent implementations echo "Searching for privacy policy and cookie consent..." rg -i "privacy|cookie|consent" --type html --type tsx --type tsLength of output: 204
Script:
#!/bin/bash # Check for privacy policy and cookie consent with correct file extensions echo "Searching for privacy policy and cookie consent..." rg -i "privacy|cookie|consent" -t ts -t js -t jsx -t tsx # Check for PostHog configuration and usage echo -e "\nSearching for PostHog configuration and usage..." rg -i "posthog" -t ts -t js -t jsx -t tsx -A 3 # Check for any session recording related code echo -e "\nSearching for session recording related code..." rg -i "session.*record|record.*session" -t ts -t js -t jsx -t tsxLength of output: 592
Script:
#!/bin/bash # Search using ripgrep without file type specifications echo "Searching for privacy and cookie consent..." rg -i "privacy|cookie|consent" echo -e "\nSearching for PostHog configuration..." rg -i "posthog" -A 3 echo -e "\nSearching for session recording..." rg -i "session.*record|record.*session" # Also check for any configuration files echo -e "\nChecking configuration files..." fd -e json -e yaml -e yml -e configLength of output: 5110
components/UI/profileCard/profileCard.tsx (2)
53-59: Consider adding input validationThe address formatting logic is well-memoized, but consider adding validation for the identity.owner string.
const formattedAddress = useMemo( () => + !identity.owner ? undefined : (identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`) as Address, [identity.owner] );
74-84: Improve error handling specificityThe error logging could be more specific about the type of error encountered to aid debugging.
- console.error( - `Attempt ${attempts} - Error fetching total balance:`, - err - ); + console.error( + `Attempt ${attempts} - Error fetching total balance for address ${formattedAddress}:`, + err instanceof Error ? err.message : err + );components/UI/navbar.tsx (1)
314-321: Consider moving social media URLs to constants.While the social media links are properly formatted with security attributes, consider moving the URLs to a constants file for better maintainability.
Example implementation:
// constants/social-media.ts export const SOCIAL_MEDIA = { TWITTER: 'https://twitter.com/starknet_quest', DISCORD: 'https://discord.gg/byEGk6w6T6' } as const;Then update the links:
- href='https://twitter.com/starknet_quest' + href={SOCIAL_MEDIA.TWITTER}Also applies to: 326-333
app/[addressOrDomain]/page.tsx (4)
Line range hint
208-322: Consider optimizing parallel promise execution and error handling.The portfolio calculation logic has several areas for improvement:
- The parallel promise execution could be optimized by using
Promise.allSettledinstead ofPromise.allto handle failed calculations gracefully.- Magic numbers (like 4 for max assets) should be extracted as constants.
Consider applying these changes:
+ const MAX_DISPLAYED_ASSETS = 4; + const ASSET_COLORS = ["#1E2097", "#637DEB", "#2775CA", "#5CE3FE", "#F4FAFF"]; - const results = (await Promise.all([...balancePromises, ...userTokenPromises])).filter(Boolean); + const results = (await Promise.allSettled([...balancePromises, ...userTokenPromises])) + .filter((result) => result.status === 'fulfilled') + .map((result) => (result as PromiseFulfilledResult<any>).value) + .filter(Boolean); - if (sortedAssets.length > 4) { + if (sortedAssets.length > MAX_DISPLAYED_ASSETS) {
553-591: Improve error handling and consider splitting responsibilities.The
fetchPortfolioDatafunction handles multiple concerns and could benefit from:
- More specific error type handling beyond just AbortError
- Separation of data fetching and processing responsibilities
Consider splitting the function:
+ const fetchRawPortfolioData = async ( + addr: string, + abortController: AbortController + ) => { + const normalizedAddr = addr.toLowerCase(); + return Promise.all([ + fetchDapps({ signal: abortController.signal }), + fetchTokens({ signal: abortController.signal }), + fetchUserTokens(normalizedAddr, { signal: abortController.signal }), + fetchUserDapps(normalizedAddr, { signal: abortController.signal }), + ]); + }; const fetchPortfolioData = useCallback( async (addr: string, abortController: AbortController) => { setLoadingProtocols(true); try { - const normalizedAddr = addr.toLowerCase(); - const [dappsData, tokensData, userTokensData, userDappsData] = - await Promise.all([...]); + const [dappsData, tokensData, userTokensData, userDappsData] = + await fetchRawPortfolioData(addr, abortController);
726-727: Extract UI strings to constants for better maintainability.Consider moving hardcoded strings to a constants file for better maintainability and internationalization support.
+ const UI_STRINGS = { + ERROR_PROFILE_NOT_FOUND: 'Profile or Page not found', + ERROR_GO_BACK: 'Go back to quests', + NO_QUESTS_MESSAGE: 'User has not completed any quests at the moment', + }; - errorMessage='Profile or Page not found' - buttonText='Go back to quests' + errorMessage={UI_STRINGS.ERROR_PROFILE_NOT_FOUND} + buttonText={UI_STRINGS.ERROR_GO_BACK}Also applies to: 840-843
791-795: Enhance accessibility attributes for tab navigation.The tab implementation could benefit from additional ARIA attributes for better screen reader support.
<Tabs style={{ borderBottom: "0.5px solid rgba(224, 224, 224, 0.3)", }} className='pb-6' value={tabIndex} onChange={handleChangeTab} - aria-label='quests and collectons tabs' + aria-label='Quest completion status' + role="navigation" indicatorColor='secondary' >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
app/[addressOrDomain]/page.tsx(14 hunks)app/provider.tsx(4 hunks)components/UI/navbar.tsx(10 hunks)components/UI/profileCard/profileCard.tsx(9 hunks)components/navbar/walletButton.tsx(4 hunks)context/WalletProvider.tsx(1 hunks)tsconfig.json(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- components/navbar/walletButton.tsx
- tsconfig.json
🔇 Additional comments (10)
context/WalletProvider.tsx (2)
49-55: LGTM! Well-implemented context consumer hook.
The useWallet hook follows React best practices with proper error handling for usage outside the provider context.
1-55: Consider additional architectural improvements.
A few architectural considerations for the wallet management implementation:
- State Persistence: Consider persisting the wallet state in localStorage to handle page refreshes
- SEO Impact: The dynamic URL updates might affect SEO. Consider implementing proper meta tags and Next.js static paths
- Integration: This component might benefit from integration with a wallet connection library (e.g., Web3Modal, RainbowKit)
Let's check if there are any wallet connection libraries already in use:
app/provider.tsx (2)
1-23: LGTM! Import statements are well-organized.
The imports are logically grouped and the addition of WalletProvider aligns with the PR's objective of handling wallet changes.
136-138: LGTM! Provider hierarchy is well-structured.
The placement of WalletProvider wrapping QuestsContextProvider ensures wallet state is available to quest-related components, which aligns with the PR's objective of handling wallet changes.
components/UI/profileCard/profileCard.tsx (3)
27-27: LGTM: Clean wallet integration
The integration of the WalletProvider context through the useWallet hook is well-implemented and follows React best practices.
Also applies to: 51-52
136-144: LGTM: Improved accessibility and consistent styling
The UI changes improve accessibility with proper alt texts and maintain consistent styling conventions.
Also applies to: 160-160, 169-179, 190-203, 213-228
97-100: Verify wallet address dependency
The effect now depends on newAddress but ensure this doesn't cause unnecessary refetches when the address hasn't actually changed.
✅ Verification successful
After analyzing the code, I can now generate the final response:
Effect dependency on newAddress is correctly implemented
The newAddress dependency in the effect is properly used as it:
- Only triggers
fetchTotalBalancewhen there's a new address value - Is used alongside
formattedAddresswhich is required for the balance calculation - Serves as a proper guard to prevent unnecessary API calls
- Is consistently used in the component for display purposes as well
The implementation ensures the balance is only fetched when there's an actual address change, avoiding unnecessary refetches.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for other uses of newAddress to ensure consistent behavior
rg "newAddress" --type ts --type tsx
Length of output: 64
Script:
#!/bin/bash
# Search for newAddress usage with proper file type patterns
rg "newAddress" -t typescript -t tsx
# Also check the specific file content to understand the context
cat "components/UI/profileCard/profileCard.tsx"
Length of output: 8739
components/UI/navbar.tsx (3)
34-34: LGTM: Wallet context integration looks good!
The addition of the useWallet hook and its destructured methods aligns well with the PR objective of managing wallet address changes.
Also applies to: 52-52
186-189: LGTM: UI formatting changes are consistent.
The formatting changes to div elements, Link components, and icon properties maintain consistent styling without affecting functionality.
Also applies to: 196-199, 233-235, 239-240
34-34: Verify wallet address updates across different scenarios.
While the implementation looks correct, please ensure testing covers:
- Wallet disconnection/reconnection
- Network changes
- Multiple wallet switches in succession
Also applies to: 52-52, 156-157
✅ Verification successful
Wallet address updates implementation is properly structured and contained
The implementation is well-organized with proper state management through the WalletContext:
- Address updates are centralized in the WalletProvider context
- Only two components consume the wallet context: navbar (for updates) and profileCard (for display)
- State updates are properly handled with both address and URL params being updated together
- The implementation includes proper mounting checks and router integration
The current implementation already covers the scenarios mentioned in the review:
- Wallet disconnection/reconnection (handled via setNewAddress null/address states)
- Network changes (managed through the context)
- Multiple wallet switches (handled via state updates in navbar)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other components that might be affected by wallet address changes
echo "Searching for components using address-dependent routes..."
rg -l "/${address}" --type tsx
echo "Checking for other wallet address dependencies..."
ast-grep --pattern 'useWallet()' --lang tsx
Length of output: 499
Script:
#!/bin/bash
# Let's check the actual usage patterns and dependencies more thoroughly
# Check how wallet address is used in components
echo "Checking wallet address usage patterns..."
rg -A 5 "newAddress" --type ts --type tsx
# Check for route definitions that might depend on wallet addresses
echo "\nChecking route definitions..."
rg -A 3 "path.*:.*address" --type ts --type tsx
# Look for wallet-related state updates
echo "\nChecking wallet state updates..."
rg -A 3 "setNewAddress|setNewURLParams" --type ts --type tsx
# Check the wallet context implementation
echo "\nChecking WalletProvider implementation..."
cat "@context/WalletProvider.tsx" 2>/dev/null || echo "WalletProvider.tsx not found in expected location"
Length of output: 723
Script:
#!/bin/bash
# Let's try with correct file extensions and without type specifications
# Check how wallet address is used in components
echo "Checking wallet address usage patterns..."
rg -A 5 "newAddress"
# Check for route definitions that might depend on wallet addresses
echo "\nChecking route definitions..."
rg -A 3 "path.*:.*address"
# Look for wallet-related state updates
echo "\nChecking wallet state updates..."
rg -A 3 "setNewAddress|setNewURLParams"
# Find and check the wallet provider implementation
echo "\nLocating WalletProvider file..."
fd -e tsx -e ts "WalletProvider"
Length of output: 4767
context/WalletProvider.tsx
Outdated
| useEffect(() => { | ||
| if (isMounted && newURLParams) { | ||
| const updateUrl = (newURLParams: string) => { | ||
| // Replace everything after the base URL with the new address | ||
| const newUrl = `/${newURLParams}`; | ||
| router.replace(newUrl); | ||
| }; | ||
|
|
||
| updateUrl(newURLParams); | ||
| } | ||
| }, [isMounted, newURLParams, newAddress]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize useEffect implementation and add error handling.
The URL update effect has several potential improvements:
newAddressis in the dependency array but not used in the effectupdateUrlfunction is recreated on every render- No error handling for URL updates
Consider this improved implementation:
+ const updateUrl = React.useCallback((newURLParams: string) => {
+ try {
+ const newUrl = `/${newURLParams}`;
+ router.replace(newUrl);
+ } catch (error) {
+ console.error('Failed to update URL:', error);
+ }
+ }, [router]);
useEffect(() => {
if (isMounted && newURLParams) {
- const updateUrl = (newURLParams: string) => {
- const newUrl = `/${newURLParams}`;
- router.replace(newUrl);
- };
updateUrl(newURLParams);
}
- }, [isMounted, newURLParams, newAddress]);
+ }, [isMounted, newURLParams, updateUrl]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(() => { | |
| if (isMounted && newURLParams) { | |
| const updateUrl = (newURLParams: string) => { | |
| // Replace everything after the base URL with the new address | |
| const newUrl = `/${newURLParams}`; | |
| router.replace(newUrl); | |
| }; | |
| updateUrl(newURLParams); | |
| } | |
| }, [isMounted, newURLParams, newAddress]); | |
| const updateUrl = React.useCallback((newURLParams: string) => { | |
| try { | |
| const newUrl = `/${newURLParams}`; | |
| router.replace(newUrl); | |
| } catch (error) { | |
| console.error('Failed to update URL:', error); | |
| } | |
| }, [router]); | |
| useEffect(() => { | |
| if (isMounted && newURLParams) { | |
| updateUrl(newURLParams); | |
| } | |
| }, [isMounted, newURLParams, updateUrl]); |
components/UI/navbar.tsx
Outdated
| setNewAddress(domainOrAddressMinified); | ||
| if (address) setNewURLParams(address); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider separating state updates from text generation.
The topButtonText function now has side effects (state updates) which doesn't align with its naming convention. Consider:
- Renaming the function to better reflect its behavior, or
- Moving the state updates to a more appropriate location (e.g., useEffect or click handler)
Here's a suggested refactor:
- function topButtonText(): string | undefined {
- setNewAddress(domainOrAddressMinified);
- if (address) setNewURLParams(address);
- const textToReturn = isConnected ? domainOrAddressMinified : "connect";
- return textToReturn;
- }
+ useEffect(() => {
+ if (domainOrAddressMinified) {
+ setNewAddress(domainOrAddressMinified);
+ }
+ if (address) {
+ setNewURLParams(address);
+ }
+ }, [domainOrAddressMinified, address]);
+
+ function topButtonText(): string {
+ return isConnected ? domainOrAddressMinified : "connect";
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| setNewAddress(domainOrAddressMinified); | |
| if (address) setNewURLParams(address); | |
| useEffect(() => { | |
| if (domainOrAddressMinified) { | |
| setNewAddress(domainOrAddressMinified); | |
| } | |
| if (address) { | |
| setNewURLParams(address); | |
| } | |
| }, [domainOrAddressMinified, address]); | |
| function topButtonText(): string { | |
| return isConnected ? domainOrAddressMinified : "connect"; | |
| } |
|
@caxtonacollins Sorry, was busy on HH, will review today |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
app/provider.tsx
Outdated
| @@ -130,7 +133,9 @@ export function Providers({ children }: { children: React.ReactNode }) { | |||
| <NotificationProvider> | |||
| <ThemeProvider theme={theme}> | |||
| <PostHogProvider client={posthog}> | |||
| <QuestsContextProvider>{children}</QuestsContextProvider> | |||
| <WalletProvider> | |||
There was a problem hiding this comment.
I don't think you need a walletProvider here to do the job, it adds unnecessary complexity.
What I would do instead is to use starknet react useAccount() hook to change URL based on the address you can get from it, you can do that directly on the [addressOrDomain]/page.tsx file.
Here is an example of what i would look like.
export default function Page({ params }: AddressOrDomainProps) {
// ... existing state declarations ...
const [connectedAddress, setConnectedAddress] = useState<string | undefined>(); // address set as connected
const { address } = useAccount(); // current address connected
// Add this useEffect to handle address changes and URL updates
useEffect(() => {
// Skip if the address hasn't changed or isn't defined
if (!address || address === connectedAddress) return;
// Update connected address state
setConnectedAddress(address);
// If we're not on the current user's profile, don't redirect
if (address && addressOrDomain !== address && addressOrDomain !== undefined) {
return;
}
// Redirect to the new address profile
if (address) {
router.push(`/${address}`);
}
}, [address, addressOrDomain, connectedAddress, router]);
// ... rest of the component ...
}I might have done some mistake here so I'll let you test and adapt but that solution would be way easier than adding a provider (starknet-react is your provider here)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
app/[addressOrDomain]/page.tsx (4)
100-110: Add error handling for router navigation.The URL update logic should include error handling for the router.replace call to gracefully handle navigation failures.
const updateUrl = (address: string) => { - const newUrl = `/${address}`; - router.replace(newUrl); + const newUrl = `/${address}`; + router.replace(newUrl).catch((error) => { + console.error('Failed to update URL:', error); + showNotification('Failed to update profile URL', 'error'); + }); };
Line range hint
221-373: Optimize promise handling and improve error messages.The portfolio calculation logic could be optimized in several ways:
- Use Promise.allSettled instead of Promise.all to handle partial failures
- Add more specific error messages for better debugging
const results = ( - await Promise.all([...balancePromises, ...userTokenPromises]) + await Promise.allSettled([...balancePromises, ...userTokenPromises]) ).filter(Boolean); -results.forEach((result) => { +results.forEach((promiseResult) => { + if (promiseResult.status === 'rejected') { + console.error('Failed to calculate token value:', promiseResult.reason); + return; + } + const result = promiseResult.value; if (!result) return; // ... rest of the code });
566-604: Enhance data fetching reliability.The portfolio data fetching could be more resilient by:
- Adding retry logic for transient failures
- Implementing request timeout
const fetchPortfolioData = useCallback( async (addr: string, abortController: AbortController) => { setLoadingProtocols(true); + const timeout = setTimeout(() => abortController.abort(), 30000); // 30s timeout try { // ... existing code } catch (error) { console.log("Error while fetching address portfolio", error); - if (error instanceof Error && error.name === "AbortError") { + if (error instanceof Error && (error.name === "AbortError" || error.name === "TimeoutError")) { // Do not show notification for AbortError return; } showNotification("Error while fetching address portfolio", "error"); } finally { + clearTimeout(timeout); setLoadingProtocols(false); } }, [fetchPortfolioProtocols, fetchPortfolioAssets] );
739-740: Improve consistency and maintainability of UI strings.Consider moving hardcoded strings to constants and maintaining consistent quote usage throughout the component.
+const UI_STRINGS = { + ERROR_MESSAGE: 'Profile or Page not found', + ERROR_BUTTON: 'Go back to quests', + ARIA_LABEL: 'quests and collectons tabs', +}; -errorMessage='Profile or Page not found' -buttonText='Go back to quests' +errorMessage={UI_STRINGS.ERROR_MESSAGE} +buttonText={UI_STRINGS.ERROR_BUTTON} -className='pb-6' -aria-label='quests and collectons tabs' +className="pb-6" +aria-label={UI_STRINGS.ARIA_LABEL}Also applies to: 804-808
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
app/[addressOrDomain]/page.tsx(16 hunks)app/provider.tsx(4 hunks)components/UI/navbar.tsx(7 hunks)components/UI/profileCard/profileCard.tsx(9 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- app/provider.tsx
- components/UI/navbar.tsx
- components/UI/profileCard/profileCard.tsx
|
@fricoben please review |
|
@caxtonacollins waiting for your conflicts fix |
|
@fricoben please review, conflicts resolved |
Change.adress.of.dashboard.when.changing.wallets.mp4
Summary by CodeRabbit
Release Notes
New Features
ProfileCardcomponent.Bug Fixes
Style
Chores
tsconfig.jsonfor JSON formatting compliance.