feat: template#454
Open
skywardboundd wants to merge 20 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughA new ChangesCreate-AppKit CLI and Scaffolding System
Sequence Diagram(s)sequenceDiagram
rect rgba(100, 149, 237, 0.5)
Note over User,FS: CLI Scaffolding
participant User
participant CLI as create-ton-appkit CLI
participant FS as FileSystem
User->>CLI: create-ton-appkit my-app --template react --app-url https://example.com
CLI->>CLI: parse args (mri), detect package manager from npm_config_user_agent
CLI->>User: interactive prompts for missing project name / template / app URL
CLI->>FS: resolve target dir, check for conflicts, optionally empty dir
CLI->>FS: copy template-react/** into target dir
CLI->>FS: rewrite package.json name, index.html title, tonconnect-manifest.json
CLI->>User: print cd + install + dev next steps
end
rect rgba(144, 238, 144, 0.5)
Note over ReactApp,Toncenter: Runtime AppKit flow
participant ReactApp as App (React)
participant AppKitProvider
participant Toncenter
ReactApp->>AppKitProvider: render Providers (QueryClientProvider + AppKitProvider)
AppKitProvider->>Toncenter: initialize AppKit with mainnet Toncenter client + TonConnect connector
AppKitProvider->>AppKitProvider: register Omniston, DeDust, Tonstakers providers
ReactApp->>AppKitProvider: useAddress / useBalance / useJettons / useNfts
AppKitProvider->>Toncenter: fetch balance, jettons, NFTs (refetchInterval 15s)
Toncenter-->>ReactApp: data for BalanceCard, JettonsCard, NftsCard
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Closed
Alejandbel
previously approved these changes
Jun 10, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
pnpm-workspace.yaml (1)
41-43: 💤 Low valueHardcoded alpha version exclusions will require manual maintenance.
The
minimumReleaseAgeExcludelist contains specific alpha versions (1.0.0-alpha.4). As these packages evolve toalpha.5,alpha.6, etc., this list will need manual updates. Stale entries may accumulate, and new alpha versions won't be automatically excluded if needed during development.Consider whether:
- A wildcard pattern could exclude all alpha versions of these packages (if pnpm supports it)
- These exclusions are temporary and can be removed once stable versions are released
- A comment should be added explaining when/how to maintain this list
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pnpm-workspace.yaml` around lines 41 - 43, The hardcoded entries in minimumReleaseAgeExclude for '`@ton/appkit-react`@1.0.0-alpha.4', '`@ton/appkit`@1.0.0-alpha.4', and '`@ton/walletkit`@1.0.0-alpha.4' will require manual updates as alpha versions change; replace the exact-version exclusions with a wildcard/semver pattern that excludes all alpha releases for those packages (e.g., an alpha wildcard for '`@ton/appkit-react`', '`@ton/appkit`', and '`@ton/walletkit`') if pnpm supports it, or else remove the temporary exclusions and add a clear comment indicating these are temporary and should be revisited/removed once stable releases are available; verify pnpm pattern syntax before changing minimumReleaseAgeExclude to ensure the new rule matches all alpha versions..github/workflows/create-ton-appkit-test.yml (2)
104-107: ⚡ Quick winConsider adding explicit server readiness verification after the wait loop.
The current wait loop polls for up to 30 seconds but doesn't explicitly verify that the server is responsive when the loop completes. If the server never starts, the script silently continues to the validation curl commands, which will fail with potentially unclear error messages.
🔍 Suggested improvement for clearer failure diagnostics
for _ in $(seq 1 30); do curl -sSf http://localhost:4173 >/dev/null 2>&1 && break sleep 1 done + + # Verify server is actually responsive + if ! curl -sSf http://localhost:4173 >/dev/null 2>&1; then + echo "::error::Preview server failed to start within 30 seconds" + kill "$SERVER_PID" 2>/dev/null || true + cat preview.log || true + exit 1 + fi STATUS=0🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/create-ton-appkit-test.yml around lines 104 - 107, The wait loop that repeatedly runs curl (the for ... seq 1 30 loop which calls curl -sSf http://localhost:4173) can exit silently without the server being ready; after that loop, add an explicit readiness check that verifies curl succeeded and if not print a clear error message and exit non‑zero (e.g., log "Server did not start on http://localhost:4173 after 30s" and exit 1) so subsequent validation commands do not run when the server isn't responsive.
113-118: ⚡ Quick winBundle extraction pattern may be fragile across template changes.
The regex
/assets/[^"]+\.jswithhead -1assumes a specific Vite output structure. If the template's build configuration changes (e.g., multiple entry points, different asset naming, or HTML structure modifications), this pattern may fail silently or extract the wrong bundle.📝 Suggested improvements
Option 1: Add a comment documenting the assumption:
# 2) the JS bundle the shell references is actually reachable + # Assumes Vite output structure with /assets/*.js pattern BUNDLE="$(curl -sSf http://localhost:4173 | grep -oE '/assets/[^"]+\.js' | head -1)"Option 2: Make the check more robust:
# 2) the JS bundle the shell references is actually reachable - BUNDLE="$(curl -sSf http://localhost:4173 | grep -oE '/assets/[^"]+\.js' | head -1)" + BUNDLE="$(curl -sSf http://localhost:4173 | grep -oE 'src="(/assets/[^"]+\.js)"' | sed 's/.*src="//;s/".*//' | head -1)" if [ -n "$BUNDLE" ]; then curl -sSf "http://localhost:4173$BUNDLE" >/dev/null || STATUS=1 else + echo "::warning::Could not extract JS bundle URL from HTML" STATUS=1 fi🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/create-ton-appkit-test.yml around lines 113 - 118, The bundle-extraction regex is brittle; update the BUNDLE assignment (the line setting BUNDLE via curl | grep | head) to robustly parse script src attributes and prefer module entry scripts (e.g., use grep/sed/awk to match <script[^>]+type=["']module["'][^>]+src=["']([^"']+\.js)["'] first, then fall back to any script src that ends with .js), and ensure the subsequent curl check still uses the resolved BUNDLE variable; alternatively add a concise comment above the BUNDLE/STATUS logic documenting the assumption about Vite output and why the regex is used. Ensure you reference and modify the BUNDLE assignment and the STATUS fallback logic so failures are detected reliably.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.github/workflows/release_create_ton_appkit.yml:
- Around line 70-78: The "Publish create-ton-appkit" workflow step runs pnpm
publish but doesn't set the required npm auth token; update that step (the one
running the pnpm publish command) to export NODE_AUTH_TOKEN from a repository
secret (e.g. set NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} in the step's env) so
the setup-node/registry-url authentication works and pnpm publish can
authenticate successfully.
- Around line 3-6: Remove the unsupported branches filter under the
workflow_dispatch trigger and add a runtime branch guard at the start of the
workflow: keep workflow_dispatch as the trigger, then add an initial validation
step (e.g., in the first job) that inspects github.ref / github.ref_name (or
GITHUB_REF) and fails or exits unless the branch is "release" so the workflow
only proceeds when run on the intended branch; reference the workflow_dispatch
trigger and the initial job/step that performs the branch check.
In `@packages/create-ton-appkit/README.md`:
- Around line 7-18: The README's example commands use the wrong package name
("appkit"); update the commands so they reference the actual package
"ton-appkit": change "pnpm create appkit" to "pnpm create ton-appkit", change
"npm create appkit" to "npm create ton-appkit", and change "yarn create appkit"
to "yarn create ton-appkit"; keep the direct invocations "npx create-ton-appkit"
and "bunx create-ton-appkit" as they already reference the correct package form.
In `@packages/create-ton-appkit/template-react/eslint.config.js`:
- Around line 8-22: Replace the default export with a named export: change the
default export of the result of defineConfig(...) to a named export (e.g.,
eslintConfig) so consumers import { eslintConfig } instead of default; update
the export declaration that currently reads "export default defineConfig([...])"
to a named export "export const eslintConfig = defineConfig([...])" and ensure
any internal/consumer imports reference eslintConfig.
In `@packages/create-ton-appkit/template-react/src/main.tsx`:
- Around line 8-12: The current call to
createRoot(document.getElementById('root')!) uses a non-null assertion and can
crash if the root element is missing; replace the assertion with an explicit
null check: retrieve the element via document.getElementById('root'), if it is
null log/throw a clear error (or return early) with a helpful message, otherwise
pass the element to createRoot(...). Update the bootstrap around createRoot(...)
/ StrictMode / <App /> to use this guard so the app fails fast with a readable
message instead of a runtime exception.
---
Nitpick comments:
In @.github/workflows/create-ton-appkit-test.yml:
- Around line 104-107: The wait loop that repeatedly runs curl (the for ... seq
1 30 loop which calls curl -sSf http://localhost:4173) can exit silently without
the server being ready; after that loop, add an explicit readiness check that
verifies curl succeeded and if not print a clear error message and exit non‑zero
(e.g., log "Server did not start on http://localhost:4173 after 30s" and exit 1)
so subsequent validation commands do not run when the server isn't responsive.
- Around line 113-118: The bundle-extraction regex is brittle; update the BUNDLE
assignment (the line setting BUNDLE via curl | grep | head) to robustly parse
script src attributes and prefer module entry scripts (e.g., use grep/sed/awk to
match <script[^>]+type=["']module["'][^>]+src=["']([^"']+\.js)["'] first, then
fall back to any script src that ends with .js), and ensure the subsequent curl
check still uses the resolved BUNDLE variable; alternatively add a concise
comment above the BUNDLE/STATUS logic documenting the assumption about Vite
output and why the regex is used. Ensure you reference and modify the BUNDLE
assignment and the STATUS fallback logic so failures are detected reliably.
In `@pnpm-workspace.yaml`:
- Around line 41-43: The hardcoded entries in minimumReleaseAgeExclude for
'`@ton/appkit-react`@1.0.0-alpha.4', '`@ton/appkit`@1.0.0-alpha.4', and
'`@ton/walletkit`@1.0.0-alpha.4' will require manual updates as alpha versions
change; replace the exact-version exclusions with a wildcard/semver pattern that
excludes all alpha releases for those packages (e.g., an alpha wildcard for
'`@ton/appkit-react`', '`@ton/appkit`', and '`@ton/walletkit`') if pnpm supports it,
or else remove the temporary exclusions and add a clear comment indicating these
are temporary and should be revisited/removed once stable releases are
available; verify pnpm pattern syntax before changing minimumReleaseAgeExclude
to ensure the new rule matches all alpha versions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 324bda38-35fa-4510-a51f-d3cec52e6fc7
⛔ Files ignored due to path filters (2)
packages/create-ton-appkit/template-react/public/favicon.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (36)
.github/workflows/create-ton-appkit-test.yml.github/workflows/release_create_ton_appkit.ymleslint.config.jspackage.jsonpackages/create-ton-appkit/.npmignorepackages/create-ton-appkit/LICENSEpackages/create-ton-appkit/README.mdpackages/create-ton-appkit/package.jsonpackages/create-ton-appkit/src/index.tspackages/create-ton-appkit/template-react/README.mdpackages/create-ton-appkit/template-react/_envpackages/create-ton-appkit/template-react/_gitignorepackages/create-ton-appkit/template-react/eslint.config.jspackages/create-ton-appkit/template-react/index.htmlpackages/create-ton-appkit/template-react/package.jsonpackages/create-ton-appkit/template-react/public/tonconnect-manifest.jsonpackages/create-ton-appkit/template-react/src/App.csspackages/create-ton-appkit/template-react/src/App.tsxpackages/create-ton-appkit/template-react/src/Providers.tsxpackages/create-ton-appkit/template-react/src/appKit.tspackages/create-ton-appkit/template-react/src/components/BalanceCard.tsxpackages/create-ton-appkit/template-react/src/components/Header.tsxpackages/create-ton-appkit/template-react/src/components/JettonsCard.tsxpackages/create-ton-appkit/template-react/src/components/NftsCard.tsxpackages/create-ton-appkit/template-react/src/components/StakingCard.tsxpackages/create-ton-appkit/template-react/src/components/SwapCard.tsxpackages/create-ton-appkit/template-react/src/index.csspackages/create-ton-appkit/template-react/src/main.tsxpackages/create-ton-appkit/template-react/src/polyfills.tspackages/create-ton-appkit/template-react/src/utils/format.tspackages/create-ton-appkit/template-react/tsconfig.app.jsonpackages/create-ton-appkit/template-react/tsconfig.jsonpackages/create-ton-appkit/template-react/tsconfig.node.jsonpackages/create-ton-appkit/template-react/vite.config.tspackages/create-ton-appkit/tsconfig.jsonpnpm-workspace.yaml
Draft
heyllog
reviewed
Jun 12, 2026
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
packages/create-ton-appkit/template-react/src/Providers.tsx (1)
9-17: 💤 Low valueQueryClient created outside component causes shared state across instances.
The
QueryClientis instantiated at module scope, meaning allProviderscomponent instances share the same client. This is typically correct for a single root provider but can cause issues ifProvidersis instantiated multiple times (e.g., in tests or nested apps). Consider documenting this assumption or moving instantiation inside if multiple instances are expected.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/create-ton-appkit/template-react/src/Providers.tsx` around lines 9 - 17, The queryClient constant is instantiated at module scope outside the Providers component, which causes all instances of the Providers component to share the same QueryClient. Either add a clear comment above the queryClient initialization explaining that this is intentional and that the QueryClient is shared across all Providers instances (suitable if there is only one root provider), or move the queryClient instantiation inside the Providers component body so each instance gets its own QueryClient (suitable if Providers may be instantiated multiple times, such as in tests or nested applications). Choose the approach that matches your application's architecture and expected usage patterns.packages/create-ton-appkit/template-react/src/App.tsx (1)
33-59: The tab approach adequately mitigates rate limits; routing migration is unnecessary.The current tab implementation reduces API requests compared to rendering all widgets simultaneously—only the active component mounts and executes API calls. Additionally, React Query is available for caching and request deduplication, providing further rate-limit protection. Adding a routing library would introduce unnecessary complexity for a minimal template; the tab-based approach is a reasonable solution for the current scope.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/create-ton-appkit/template-react/src/App.tsx` around lines 33 - 59, The current tab-based implementation using activeTab state management is appropriate and does not require changes. The tabs with role="tab" and corresponding tabpanel with role="tabpanel" adequately reduce API requests by only rendering the ActiveComponent for the selected tab, and React Query can provide additional caching if needed. No migration to a routing library is necessary for this template scope..github/workflows/create_ton_appkit_test.yml (1)
40-42: ⚡ Quick winConsider pinning the yarn version for CI reproducibility.
Installing yarn globally without a version pin can lead to inconsistent behavior if yarn releases breaking changes. For test stability, consider:
- run: npm install -g yarn + run: npm install -g yarn@4Or use
corepack(built into Node.js 22) to manage yarn:- name: Set up Yarn if: matrix.pm == 'yarn' - run: npm install -g yarn + run: corepack enable && corepack prepare yarn@stable --activate🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.github/workflows/create_ton_appkit_test.yml around lines 40 - 42, The yarn installation step in the "Set up Yarn" job (where matrix.pm == 'yarn') currently installs yarn globally without pinning a specific version, which can cause CI inconsistencies. Modify the run command to either pin an explicit yarn version by specifying it in the npm install command (e.g., npm install -g yarn@specific.version), or replace it with corepack enable to use Node.js's built-in package manager management feature. Choose the approach that best aligns with your project's Node.js version support and dependency management strategy.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/create-ton-appkit/template-react/src/App.css`:
- Around line 44-63: The `.tab-btn` selector removes the default browser focus
ring but provides no custom focus indicator for keyboard users. Add a
`.tab-btn:focus-visible` rule that applies a visible focus indicator such as an
outline or box-shadow to ensure keyboard users can see which tab button has
focus when navigating with the Tab key. This will restore keyboard accessibility
for the tab navigation component.
In `@packages/create-ton-appkit/template-react/src/components/BalanceCard.tsx`:
- Around line 11-12: The condition `balance !== undefined` in the balanceText
assignment does not exclude null values, allowing null to be passed to
formatAmount() which coerces it to 0 and displays as "0 GRAM" instead of the
empty placeholder. Update the condition to check for both null and undefined
(using `balance != null` or `balance !== null && balance !== undefined`) to
ensure that when balance is null, it renders as the empty placeholder "—"
instead of "0 GRAM".
In `@packages/create-ton-appkit/template-react/src/utils/format.ts`:
- Around line 5-8: The toLocaleString call in the token balance formatter
includes maximumSignificantDigits: 4, which causes inappropriate rounding of
large integer amounts based on their magnitude (e.g., 12345 becomes 12350). This
is unsuitable for financial balance display. Remove the
maximumSignificantDigits: 4 line from the options object and rely only on
maximumFractionDigits to control decimal precision consistently, which will
preserve integer values while controlling only decimal places.
---
Nitpick comments:
In @.github/workflows/create_ton_appkit_test.yml:
- Around line 40-42: The yarn installation step in the "Set up Yarn" job (where
matrix.pm == 'yarn') currently installs yarn globally without pinning a specific
version, which can cause CI inconsistencies. Modify the run command to either
pin an explicit yarn version by specifying it in the npm install command (e.g.,
npm install -g yarn@specific.version), or replace it with corepack enable to use
Node.js's built-in package manager management feature. Choose the approach that
best aligns with your project's Node.js version support and dependency
management strategy.
In `@packages/create-ton-appkit/template-react/src/App.tsx`:
- Around line 33-59: The current tab-based implementation using activeTab state
management is appropriate and does not require changes. The tabs with role="tab"
and corresponding tabpanel with role="tabpanel" adequately reduce API requests
by only rendering the ActiveComponent for the selected tab, and React Query can
provide additional caching if needed. No migration to a routing library is
necessary for this template scope.
In `@packages/create-ton-appkit/template-react/src/Providers.tsx`:
- Around line 9-17: The queryClient constant is instantiated at module scope
outside the Providers component, which causes all instances of the Providers
component to share the same QueryClient. Either add a clear comment above the
queryClient initialization explaining that this is intentional and that the
QueryClient is shared across all Providers instances (suitable if there is only
one root provider), or move the queryClient instantiation inside the Providers
component body so each instance gets its own QueryClient (suitable if Providers
may be instantiated multiple times, such as in tests or nested applications).
Choose the approach that matches your application's architecture and expected
usage patterns.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 74147169-dc49-4fe1-b006-05832e970460
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
.github/workflows/create_ton_appkit_test.ymlpackages/create-ton-appkit/template-react/README.mdpackages/create-ton-appkit/template-react/_envpackages/create-ton-appkit/template-react/package.jsonpackages/create-ton-appkit/template-react/src/App.csspackages/create-ton-appkit/template-react/src/App.tsxpackages/create-ton-appkit/template-react/src/Providers.tsxpackages/create-ton-appkit/template-react/src/appKit.tspackages/create-ton-appkit/template-react/src/components/BalanceCard.tsxpackages/create-ton-appkit/template-react/src/components/JettonsCard.tsxpackages/create-ton-appkit/template-react/src/components/NftsCard.tsxpackages/create-ton-appkit/template-react/src/components/StakingCard.tsxpackages/create-ton-appkit/template-react/src/components/SwapCard.tsxpackages/create-ton-appkit/template-react/src/utils/format.ts
✅ Files skipped from review due to trivial changes (1)
- packages/create-ton-appkit/template-react/_env
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/create-ton-appkit/template-react/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
origin in #445
Summary by CodeRabbit
Release Notes
New Features
create-ton-appkitcommand to scaffold new TON AppKit projects with interactive or non-interactive setup, template selection, overwrite control, and project configuration updates.Documentation
Tests / CI