Add Polkadot Solidity tab #650
Conversation
Reviewer's GuideThis PR integrates a new Polkadot tab into the existing Solidity wizard by parameterizing and overriding key UI features, routing logic, and deployment buttons. It layers in an Overrides API to omit unsupported features and tabs, adapts the remix integration for Polkadot Remix URLs, and injects Polkadot-specific assets (HTML, CSS, icons) while keeping the original Solidity code paths largely intact. Class diagram for removeUnsupportedFeatures utilityclassDiagram
class removeUnsupportedFeatures {
+removeUnsupportedFeatures(opts: GenericOptions): GenericOptions
}
class GenericOptions {
kind: string
permit: boolean
votes: boolean
crossChainBridging: string | boolean
}
removeUnsupportedFeatures --> GenericOptions
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughAdds Polkadot support across UI and AI layers: new Polkadot page and nav links, app selection and instantiation, AI function definitions and language type, Solidity app override system, feature-omission handling, Remix URL override, CSS variables/styles, and conditional feature gating in ERC20/Stablecoin/RealWorldAsset controls. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant Router as UI Router (main.ts)
participant App as App Factory
participant PApp as PolkadotApp
participant SApp as SolidityApp (wrapped)
U->>Router: Load /polkadot
Router->>App: evaluateSelection(lang=polkadot, version)
App-->>Router: CompatibleSelection(appType='polkadot')
Router->>PApp: new PolkadotApp(initialTab, initialOpts)
PApp->>SApp: Instantiate with overrides (omit tabs/features, AI, Remix)
SApp-->>U: Render Wizard (Polkadot ecosystem)
sequenceDiagram
autonumber
participant PApp as PolkadotApp
participant SApp as SolidityApp
participant C as Controls (ERC20/Stablecoin/RWA)
participant AI as AI Assistant
participant Remix as Remix URL Builder
PApp->>SApp: overrides { omitTabs/Features, sanitize, aiAssistant, remix }
SApp->>C: Pass omitFeatures per Kind
Note right of C: Conditionally render Superchain/Permit/Votes\nTooltips optional
SApp->>SApp: sanitizeOmittedFeatures(opts) before build
SApp->>AI: Use overrides.aiAssistant (language='polkadot', samples, component)
SApp->>Remix: remixURL(code, upgradeable, overrides.remix.url)
Remix-->>SApp: URL (e.g., remix.polkadot.io)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/ui/src/solidity/App.svelte (1)
152-152: Fix telemetry: events always report 'solidity'
postConfig(..., language)uses a hard-coded'solidity', andwizLanguageis forced to type'solidity'. This mislabels Polkadot sessions.Apply:
-const language = 'solidity'; +import type { SupportedLanguage } from '../../api/ai-assistant/types/languages'; @@ - await postConfig(opts, 'copy', language); + await postConfig(opts, 'copy', wizLanguage); @@ - await postConfig(opts, 'remix', language); + await postConfig(opts, 'remix', wizLanguage); @@ - await postConfig(opts, 'download-hardhat', language); + await postConfig(opts, 'download-hardhat', wizLanguage); @@ - await postConfig(opts, 'download-foundry', language); + await postConfig(opts, 'download-foundry', wizLanguage); @@ -$: wizLanguage = (overrides.aiAssistant?.language ?? 'solidity') as 'solidity'; +$: wizLanguage = (overrides.aiAssistant?.language ?? 'solidity') as SupportedLanguage; @@ - <WizSolidity - language={wizLanguage} + <WizSolidity + language={wizLanguage}Additionally, relax the AI event type to accommodate overridden languages:
-import type { AiFunctionCall } from '../../api/ai-assistant/types/assistant'; +import type { AiFunctionCall } from '../../api/ai-assistant/types/assistant'; +import type { SupportedLanguage } from '../../api/ai-assistant/types/languages'; @@ -const applyFunctionCall = ({ detail: aiFunctionCall }: CustomEvent<AiFunctionCall<'solidity'>>) => { +const applyFunctionCall = ({ detail: aiFunctionCall }: CustomEvent<AiFunctionCall<SupportedLanguage>>) => {Also applies to: 159-161, 178-181, 199-201, 211-213, 220-221, 223-235, 281-283
🧹 Nitpick comments (13)
packages/ui/src/standalone.css (1)
117-119: Consider using the Polkadot brand color for consistency.The active state uses
--color-2: #000000(black), but this might not align with Polkadot's brand identity. Consider using the--polkadot-pinkvariable defined invars.cssfor better brand consistency, similar to how other switches use their brand colors..nav .switch.switch-polkadot.active { - --color-2: #000000; + --color-2: var(--polkadot-pink); }packages/ui/src/solidity/remix.ts (1)
1-2: Accept URL | string and guard against invalid base URLsNice extension. Minor polish: allow a URL object, and fall back safely if an invalid string is passed.
Apply:
-export function remixURL(code: string, upgradeable = false, overrideRemixURL?: string): URL { - const remix = new URL(overrideRemixURL ?? 'https://remix.ethereum.org'); +export function remixURL(code: string, upgradeable = false, baseRemixUrl?: string | URL): URL { + let remix: URL; + try { + remix = new URL(baseRemixUrl ?? 'https://remix.ethereum.org'); + } catch { + remix = new URL('https://remix.ethereum.org'); + }packages/ui/src/solidity/ERC20Controls.svelte (3)
23-24: Strongly type omitFeatures to prevent driftConstrain to a union of known feature keys to avoid typos and ease refactors.
Apply:
-export let omitFeatures: string[] | undefined = undefined; +type ERC20FeatureKey = 'superchain' | 'permit' | 'votes'; +export let omitFeatures: ERC20FeatureKey[] | undefined = undefined;
33-39: Destroy tooltip on unmount to avoid leaksIf the component is torn down, the Tippy instance should be destroyed.
Apply:
-import { onMount } from 'svelte'; +import { onMount, onDestroy } from 'svelte'; @@ onMount(() => { superchainTooltip = !omitFeatures?.includes('superchain') ? tippy(superchainLabel, superchainTooltipProps) : undefined; }); + + onDestroy(() => { + superchainTooltip?.destroy(); + superchainTooltip = undefined; + });
190-199: Guard state when feature is omittedIf
omitFeaturesincludessuperchainbutopts.crossChainBridgingwas previously'superchain', the UI won’t render that choice yet the value persists. Ensure upstream sanitization or add a local fallback.If needed locally:
$: { + if (omitFeatures?.includes('superchain') && opts.crossChainBridging === 'superchain') { + opts.crossChainBridging = 'custom'; + } }If handled by
removeUnsupportedFeaturesupstream, we’re good—please confirm.packages/ui/src/solidity/StablecoinControls.svelte (1)
33-38: Destroy tooltip on unmount to avoid leaks
tippy()instances should be destroyed. Also safe to noop if the feature is omitted.Apply:
import { onMount } from 'svelte'; +import { onDestroy } from 'svelte'; @@ onMount(() => { superchainTooltip = !omitFeatures?.includes('superchain') ? tippy(superchainLabel, superchainTooltipProps) : undefined; }); + + onDestroy(() => { + superchainTooltip?.destroy(); + superchainTooltip = undefined; + });Also applies to: 43-43
packages/ui/src/main.ts (1)
83-90: Version gating for Polkadot mirrors Solidity semverLogic is sound. Optional: consider accepting
version=stablealias for parity with Cairo’s UX.If desired:
case 'polkadot': { // Use Solidity Contracts semver - if (requestedVersion === undefined || semver.satisfies(requestedVersion, soliditySemver)) { + if ( + requestedVersion === undefined || + requestedVersion === 'stable' || + semver.satisfies(requestedVersion, soliditySemver) + ) { return { compatible: true, appType: 'polkadot' }; } else { return { compatible: false, compatibleVersionsSemver: soliditySemver }; } }packages/ui/public/polkadot.html (2)
35-37: Font preload MIME/type mismatchYou’re preloading a
.ttfbut declaringtype="font/woff2". Aligning these avoids a wasted preload.Use either a WOFF2 file or update the type:
-<link rel="preload" href="/fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/woff2" crossorigin> +<link rel="preload" href="/fonts/Inter-VariableFont_opsz,wght.woff2" as="font" type="font/woff2" crossorigin>—or—
-<link rel="preload" href="/fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/woff2" crossorigin> +<link rel="preload" href="/fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/ttf" crossorigin>
66-73: Optional: make the active tab linkableUsing
/polkadotinstead of#lets users copy the link to this page.-<a class="switch switch-polkadot active" href="#"><img src="/icons/polkadot_active.svg" alt="polkadot">Polkadot</a> +<a class="switch switch-polkadot active" href="/polkadot"><img src="/icons/polkadot_active.svg" alt="polkadot">Polkadot</a>packages/ui/src/solidity/RealWorldAssetControls.svelte (1)
36-41: Tippy instance should be cleaned upDestroy on unmount to prevent leaks, same pattern as Stablecoin.
import { onMount } from 'svelte'; +import { onDestroy } from 'svelte'; @@ onMount(() => { superchainTooltip = !omitFeatures?.includes('superchain') ? tippy(superchainLabel, superchainTooltipProps) : undefined; }); + onDestroy(() => { + superchainTooltip?.destroy(); + superchainTooltip = undefined; + });Also applies to: 46-46
packages/ui/src/solidity/overrides.ts (1)
8-48: Overrides shape looks solid and future-proofGood separation of concerns. Optional: consider
ReadonlyMap<Kind, readonly string[]>if immutability is desired.packages/ui/public/stellar.html (1)
68-68: Nit: avoid duplicate accessible name from icon alt textSince the link already contains the text “Polkadot”, the icon is decorative. Consider empty alt and aria-hidden to prevent screen readers from announcing it twice (apply consistently across pages in a follow-up).
- <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="polkadot">Polkadot</a> + <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="" aria-hidden="true">Polkadot</a>packages/ui/src/common/styles/vars.css (1)
33-34: Verify WCAG contrast for --polkadot-pink (#ff2670)
Contrast vs white: 3.64:1 (below 4.5:1 for normal text); contrast vs black: 5.76:1 (meets 4.5:1). Reserve for graphical accents or large text on light backgrounds, or select a darker shade for normal body text on white.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
-
packages/ui/public/icons/polkadot.svgis excluded by!**/*.svg -
packages/ui/public/icons/polkadot_active.svgis excluded by!**/*.svg
📒 Files selected for processing (19)
-
packages/ui/api/ai-assistant/function-definitions/polkadot.ts(1 hunks) -
packages/ui/api/ai-assistant/types/languages.ts(2 hunks) -
packages/ui/api/ai.ts(3 hunks) -
packages/ui/public/cairo.html(1 hunks) -
packages/ui/public/index.html(1 hunks) -
packages/ui/public/polkadot.html(1 hunks) -
packages/ui/public/stellar.html(1 hunks) -
packages/ui/public/stylus.html(1 hunks) -
packages/ui/src/common/styles/vars.css(1 hunks) -
packages/ui/src/main.ts(4 hunks) -
packages/ui/src/polkadot/App.svelte(1 hunks) -
packages/ui/src/polkadot/handle-unsupported-features.ts(1 hunks) -
packages/ui/src/solidity/App.svelte(10 hunks) -
packages/ui/src/solidity/ERC20Controls.svelte(3 hunks) -
packages/ui/src/solidity/RealWorldAssetControls.svelte(5 hunks) -
packages/ui/src/solidity/StablecoinControls.svelte(3 hunks) -
packages/ui/src/solidity/overrides.ts(1 hunks) -
packages/ui/src/solidity/remix.ts(1 hunks) -
packages/ui/src/standalone.css(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/ui/api/ai-assistant/function-definitions/polkadot.ts (1)
packages/ui/api/ai-assistant/function-definitions/solidity.ts (6)
solidityERC20AIFunctionDefinition(14-68)solidityERC721AIFunctionDefinition(70-110)solidityERC1155AIFunctionDefinition(112-143)solidityStablecoinAIFunctionDefinition(145-172)solidityRealWorldAssetAIFunctionDefinition(174-178)solidityCustomAIFunctionDefinition(308-323)
packages/ui/src/solidity/overrides.ts (1)
packages/ui/api/ai-assistant/types/languages.ts (1)
SupportedLanguage(54-54)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: build (solidity, default)
- GitHub Check: semgrep-cloud-platform/scan
🔇 Additional comments (22)
packages/ui/public/index.html (1)
100-100: Navigation structure is properly maintained.The Polkadot link is correctly positioned in the navigation flow and follows the established pattern for language switches. The implementation is consistent with the other HTML files in this PR.
packages/ui/public/cairo.html (1)
76-76: Consistent navigation implementation.The Polkadot navigation link maintains consistency with the existing navigation structure and properly integrates with the Cairo page's layout.
packages/ui/public/stylus.html (1)
68-68: Navigation addition follows established pattern.The Polkadot navigation link is properly implemented and maintains consistency with the navigation structure across all HTML files.
packages/ui/src/polkadot/handle-unsupported-features.ts (1)
1-18: No Account/Governor references; omission logic is complete.
Grep across all.tsfiles found no instances of “Account” or “Governor,” so no additional feature omissions are needed in this utility.packages/ui/api/ai.ts (3)
3-3: Import structure is clean and consistent.The import of polkadotFunctions follows the established pattern for language-specific function definitions.
25-25: Function mapping properly integrates Polkadot support.The addition of
polkadot: polkadotFunctionsto the functionPerLanguages mapping enables AI assistance for Polkadot, maintaining consistency with the existing language support structure.
44-44: System prompt adjustment improves accuracy.Changing from "written in ${request.language}" to "written for the ${request.language} ecosystem" is more technically accurate, especially for Polkadot which uses Solidity but targets a different ecosystem.
packages/ui/src/solidity/StablecoinControls.svelte (2)
22-22: Prop looks good and backward compatibleAdding
omitFeatures?: string[]keeps default behavior unchanged. No issues.
224-233: Conditional render for Superchain is correctGating the Superchain option via
omitFeaturesis clean and matches the tooltip logic.packages/ui/src/main.ts (1)
157-159: Instantiation wiring for PolkadotApp is correctProps passed match the component’s public API.
packages/ui/src/solidity/RealWorldAssetControls.svelte (2)
25-26: Prop addition LGTM
omitFeaturesmirrors other controls and keeps defaults intact.
141-149: Feature gating is consistent and correctPermit/Votes/Superchain are conditionally rendered based on
omitFeatures. Good alignment with overrides.Also applies to: 190-215, 231-240
packages/ui/src/polkadot/App.svelte (1)
33-39: Styling override is scoped correctlyScoped to
.polkadot-app, safely overriding the default selected tab color.packages/ui/api/ai-assistant/function-definitions/polkadot.ts (1)
1-16: Re-exports are fine for nowSimple aliasing keeps definitions in sync with Solidity. If we later diverge on parameters (e.g., omit Superchain), we can specialize here.
packages/ui/src/solidity/overrides.ts (1)
50-58: Sane defaults
defaultOverridesis a no-op, preserving existing behavior.packages/ui/src/solidity/App.svelte (5)
93-94: Sanitizing omitted features before build is correctThis ensures hidden/unsupported options don’t break generation.
119-145: Buttons visibility logic matches product rulesThe per-kind gating and global overrides behave as expected.
247-249: Account tab gating via overrides is correctMatches the new
omitTabscontract.
341-365: PropagatingomitFeaturesto controls is correctKeeps controls decoupled and override-driven.
58-61: Further investigatingcreateWizimplementation to confirm typing behavior.packages/ui/public/stellar.html (1)
68-68: Polkadot nav link addition — LGTMPlacement, href, classes, and icon usage are consistent with existing tabs.
packages/ui/src/common/styles/vars.css (1)
33-34: New theme token looks goodNaming aligns with existing chain color tokens; value matches Polkadot brand pink.
Adds a Polkadot tab based on Solidity, with the following differences:
Limitations outside of Wizard's scope:
Remaining to do:
Future items (separate PR(s)):