Add Polkadot Solidity tab

packages/ui/api/ai-assistant/function-definitions/polkadot.ts

@@ -0,0 +1,17 @@
+import {
+  solidityERC20AIFunctionDefinition,
+  solidityERC721AIFunctionDefinition,
+  solidityERC1155AIFunctionDefinition,
+  solidityStablecoinAIFunctionDefinition,
+  solidityRealWorldAssetAIFunctionDefinition,
+  solidityGovernorAIFunctionDefinition,
+  solidityCustomAIFunctionDefinition,
+} from './solidity.ts';
+
+export const polkadotERC20AIFunctionDefinition = solidityERC20AIFunctionDefinition;
+export const polkadotERC721AIFunctionDefinition = solidityERC721AIFunctionDefinition;
+export const polkadotERC1155AIFunctionDefinition = solidityERC1155AIFunctionDefinition;
+export const polkadotStablecoinAIFunctionDefinition = solidityStablecoinAIFunctionDefinition;
+export const polkadotRealWorldAssetAIFunctionDefinition = solidityRealWorldAssetAIFunctionDefinition;
+export const polkadotGovernorAIFunctionDefinition = solidityGovernorAIFunctionDefinition;
+export const polkadotCustomAIFunctionDefinition = solidityCustomAIFunctionDefinition;

packages/ui/api/ai-assistant/types/languages.ts

@@ -20,16 +20,22 @@ import type { KindedOptions as StylusKindedOptions } from '../../../../core/styl
 import type { CommonContractOptions as StylusCommonContractOptionsBase } from '../../../../core/stylus/dist/common-options';
 export type StylusCommonContractOptions = Omit<StylusCommonContractOptionsBase, 'access'> & { access?: false };
 
+type SolidityContractsOptions = Omit<
+  SolidityKindedOptions,
+  'Stablecoin' | 'RealWorldAsset' | 'Account' | 'Governor'
+> & {
+  Stablecoin: Omit<SolidityKindedOptions['Stablecoin'], 'upgradeable'> & { upgradeable?: false };
+  RealWorldAsset: Omit<SolidityKindedOptions['RealWorldAsset'], 'upgradeable'> & { upgradeable?: false };
+  Account: Omit<SolidityKindedOptions['Account'], 'upgradeable' | 'access'> & { upgradeable?: false; access?: false };
+  Governor: Omit<SolidityKindedOptions['Governor'], 'access'> & { access?: false };
+};
+
 // Add supported language here
 export type LanguagesContractsOptions = {
-  solidity: Omit<SolidityKindedOptions, 'Stablecoin' | 'RealWorldAsset' | 'Account' | 'Governor'> & {
-    Stablecoin: Omit<SolidityKindedOptions['Stablecoin'], 'upgradeable'> & { upgradeable?: false };
-    RealWorldAsset: Omit<SolidityKindedOptions['RealWorldAsset'], 'upgradeable'> & { upgradeable?: false };
-    Account: Omit<SolidityKindedOptions['Account'], 'upgradeable' | 'access'> & { upgradeable?: false; access?: false };
-    Governor: Omit<SolidityKindedOptions['Governor'], 'access'> & { access?: false };
-  };
+  solidity: SolidityContractsOptions;
   cairo: CairoKindedOptions;
   cairoAlpha: CairoAlphaKindedOptions;
+  polkadot: Omit<SolidityContractsOptions, 'Account'>;
   stellar: Omit<StellarKindedOptions, 'Fungible' | 'NonFungible' | 'Stablecoin'> & {
     Fungible: StellarKindedOptions['Fungible'] & StellarCommonContractOptions;
     NonFungible: StellarKindedOptions['NonFungible'] & StellarCommonContractOptions;
@@ -45,6 +51,7 @@ export type LanguagesContractsOptions = {
 export type AllLanguagesContractsOptions = LanguagesContractsOptions['solidity'] &
   LanguagesContractsOptions['cairo'] &
   LanguagesContractsOptions['cairoAlpha'] &
+  LanguagesContractsOptions['polkadot'] &
   LanguagesContractsOptions['stellar'] &
   LanguagesContractsOptions['stylus'];
 //

packages/ui/api/ai.ts

@@ -1,5 +1,6 @@
 import { OpenAIStream } from 'ai';
 import * as solidityFunctions from './ai-assistant/function-definitions/solidity.ts';
+import * as polkadotFunctions from './ai-assistant/function-definitions/polkadot.ts';
 import * as cairoFunctions from './ai-assistant/function-definitions/cairo.ts';
 import * as cairoAlphaFunctions from './ai-assistant/function-definitions/cairo-alpha.ts';
 import * as stellarFunctions from './ai-assistant/function-definitions/stellar.ts';
@@ -21,6 +22,7 @@ const getFunctionsContext = <TLanguage extends SupportedLanguage = SupportedLang
     solidity: solidityFunctions,
     cairo: cairoFunctions,
     cairoAlpha: cairoAlphaFunctions,
+    polkadot: polkadotFunctions,
     stellar: stellarFunctions,
     stylus: stylusFunctions,
   };
@@ -39,7 +41,7 @@ const buildAiChatMessages = (request: AiChatBodyRequest): Chat[] => {
       content: `
       You are a smart contract assistant built by OpenZeppelin to help users using OpenZeppelin Contracts Wizard.
       The current options are ${JSON.stringify(request.currentOpts)}.
-      The current contract code is ${request.currentCode}, written in ${request.language}
+      The current contract code is ${request.currentCode}, written for the ${request.language} ecosystem.
       Please be kind and concise. Keep responses to <100 words.
     `.trim(),
     },

packages/ui/public/cairo.html

@@ -73,6 +73,7 @@
           <option value="alpha" />
         </select>
       </div>
+      <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="polkadot">Polkadot</a>
       <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
       <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
     </div>

packages/ui/public/index.html

@@ -97,6 +97,7 @@
     <div class="nav nav-switches flex flex-row">
       <a class="switch switch-solidity active" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
       <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="polkadot">Polkadot</a>
       <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
       <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
     </div>

packages/ui/public/polkadot.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+  <title>OpenZeppelin Contracts Wizard</title>
+
+  <!-- Twitter card -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:creator" content="@OpenZeppelin">
+  <meta name="twitter:title" content="OpenZeppelin Contracts Wizard">
+  <meta name="twitter:description" content="An interactive smart contract generator based on OpenZeppelin Contracts.">
+  <meta name="twitter:image" content="https://wizard.openzeppelin.com/tw-card.png">
+
+  <!-- Favicons -->
+  <link rel='icon' type='image/png' href='/favicons/favicon.ico'>
+  <link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-icon-57x57.png" />
+  <link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-icon-60x60.png" />
+  <link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-icon-72x72.png" />
+  <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-icon-76x76.png" />
+  <link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-icon-114x114.png" />
+  <link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-icon-120x120.png" />
+  <link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-icon-144x144.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-icon-152x152.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
+  <link rel="icon" type="image/png" sizes="192x192" href="/favicons/favicon-192x192.png" />
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
+
+  <!-- Scripts and CSS -->
+  <link rel="preload" href="/fonts/Inter-VariableFont_opsz,wght.ttf" as="font" type="font/woff2" crossorigin>
+  <link rel='stylesheet' href='/build/standalone.css'>
+  <script async src='/build/embed.js'></script>
+  <script src="/build/versions.js"></script>
+</head>
+<body>
+
+  <div class="header container flex flex-row justify-between items-center overflow-auto">
+    <div class="flex flex-row items-center">
+      <a href="https://www.openzeppelin.com/" target="_blank" rel="noopener noreferrer"><img src="/logo.svg" alt="OpenZeppelin" class="logo" width="160"></a>
+    </div>
+    <div class="flex flex-row items-center">
+      <a class="link" href="https://forum.openzeppelin.com/" target="_blank" rel="noopener noreferrer">Forum</a>
+      <a class="link" href="https://docs.openzeppelin.com/" target="_blank" rel="noopener noreferrer">Docs</a>
+      <a class="link" href="https://github.com/OpenZeppelin/" target="_blank" rel="noopener noreferrer"><img src="/icons/github-mark.svg" width="20" alt="GitHub OpenZeppelin"></a>
+      <a class="link" href="https://x.com/OpenZeppelin" target="_blank" rel="noopener noreferrer"><img src="/icons/x-logo.svg" width="20" alt="Twitter/X"></a>
+    </div>
+  </div>
+  <div class="banner flex w-full gap-2">
+    <div class="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md text-sm font-medium">New</div>
+    <div>
+      Build secure, OpenZeppelin-standard smart contracts with your favorite AI using the
+      <a
+        href="https://mcp.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-gray-600 hover:underline">Contracts MCP</a
+      >.
+    </div>
+  </div>
+  <div class="nav-row flex flex-row items-center justify-between">
+    <div class="nav">
+      <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
+      <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-polkadot active" href="#"><img src="/icons/polkadot_active.svg" alt="polkadot">Polkadot</a>
+      <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
+      <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
+    </div>
+  </div>
+  <div class="wizard-container">
+    <oz-wizard class="wizard" data-sync-url="fragment" data-lang="polkadot"></oz-wizard>
+  </div>
+
+  <footer>
+    <p>© <a href="https://openzeppelin.com" target="_blank" rel="noopener noreferrer">OpenZeppelin</a> 2017-<span id="copyright-date"></span> |&nbsp;<a href="https://openzeppelin.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a> |&nbsp;<a href="https://openzeppelin.com/tos" target="_blank" rel="noopener noreferrer">Terms of Service</a></p>
+  </footer>
+
+<!-- Set current year -->
+<script>document.getElementById('copyright-date').innerHTML = new Date().getFullYear();</script>
+
+<!-- Start of HubSpot Embed Code -->
+<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/7795250.js"></script>
+<!-- End of HubSpot Embed Code -->
+<!-- Hotjar Tracking Code for OpenZeppelinWizard -->
+<script>
+  (function(h,o,t,j,a,r){
+      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+      h._hjSettings={hjid:5302135,hjsv:6};
+      a=o.getElementsByTagName('head')[0];
+      r=o.createElement('script');r.async=1;
+      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+      a.appendChild(r);
+  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+</script>
+</body>
+</html>

packages/ui/public/stellar.html

@@ -65,6 +65,7 @@
     <div class="nav">
       <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
       <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="polkadot">Polkadot</a>
       <a class="switch switch-stellar active" href="#"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
       <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
     </div>

packages/ui/public/stylus.html

@@ -65,6 +65,7 @@
     <div class="nav">
       <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
       <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-polkadot" href="/polkadot"><img src="/icons/polkadot.svg" alt="polkadot">Polkadot</a>
       <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
       <a class="switch switch-stylus active" href="#"><img src="/icons/stylus_active.svg" alt="stylus">Stylus</a>
     </div>

packages/ui/src/common/languages-types.ts

@@ -9,4 +9,4 @@ export type LanguagesOptions =
   | Required<StellarOptions>
   | Required<StylusOptions>;
 
-export type Language = 'solidity' | 'cairo' | 'stylus' | 'stellar';
+export type Language = 'solidity' | 'cairo' | 'polkadot-solidity' | 'stylus' | 'stellar';

packages/ui/src/common/styles/vars.css

@@ -30,6 +30,8 @@
 
   --cairo-orange: #fe4a3c;
 
+  --polkadot-pink: #ff2670;
+
   --stylus-pink: #e3066e;
 
   --stellar-black: #0f0f0f;

packages/ui/src/main.ts

@@ -3,6 +3,7 @@ import './common/styles/global.css';
 import SolidityApp from './solidity/App.svelte';
 import CairoApp from './cairo/App.svelte';
 import CairoAlphaApp from './cairo_alpha/App.svelte';
+import PolkadotApp from './polkadot/App.svelte';
 import StellarApp from './stellar/App.svelte';
 import StylusApp from './stylus/App.svelte';
 import VersionedApp from './common/VersionedApp.svelte';
@@ -43,7 +44,7 @@ const initialOpts: InitialOptions = {
 
 interface CompatibleSelection {
   compatible: true;
-  appType: 'solidity' | 'cairo' | 'cairo_alpha' | 'stellar' | 'stylus';
+  appType: 'solidity' | 'cairo' | 'cairo_alpha' | 'polkadot' | 'stellar' | 'stylus';
 }
 
 interface IncompatibleSelection {
@@ -79,6 +80,14 @@ function evaluateSelection(
         return { compatible: false, compatibleVersionsSemver: `${cairoAlphaSemver} || ${cairoSemver}` };
       }
     }
+    case 'polkadot': {
+      // Use Solidity Contracts semver
+      if (requestedVersion === undefined || semver.satisfies(requestedVersion, soliditySemver)) {
+        return { compatible: true, appType: 'polkadot' };
+      } else {
+        return { compatible: false, compatibleVersionsSemver: soliditySemver };
+      }
+    }
     case 'stellar': {
       if (requestedVersion === undefined || semver.satisfies(requestedVersion, stellarSemver)) {
         return { compatible: true, appType: 'stellar' };
@@ -145,6 +154,9 @@ if (!selection.compatible) {
         },
       });
       break;
+    case 'polkadot':
+      app = new PolkadotApp({ target: document.body, props: { initialTab, initialOpts } });
+      break;
     case 'stellar':
       app = new StellarApp({ target: document.body, props: { initialTab, initialOpts } });
       break;

packages/ui/src/polkadot/App.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import SolidityApp from '../solidity/App.svelte';
+  import type { InitialOptions } from '../common/initial-options';
+  import type { Overrides } from '../solidity/overrides';
+  import { defineOmitFeatures, sanitizeOmittedFeatures } from './handle-unsupported-features';
+  import { createWiz } from '../common/Wiz.svelte';
+
+  export let initialTab: string | undefined = 'ERC20';
+  export let initialOpts: InitialOptions = {};
+
+  let overrides: Overrides = {
+    omitTabs: ['Account'],
+    omitFeatures: defineOmitFeatures(),
+    omitZipFoundry: true,
+    omitZipHardhat: true, // Disabled until Polkadot-specific config is added for the download package
+    remix: {
+      label: 'Open in Polkadot Remix',
+      url: 'https://remix.polkadot.io',
+    },
+    sanitizeOmittedFeatures,
+    aiAssistant: {
+      svelteComponent: createWiz<'polkadot'>(),
+      language: 'polkadot',
+    },
+  };
+</script>
+
+<div class="polkadot-app">
+  <SolidityApp {initialTab} {initialOpts} {overrides} />
+</div>
+
+<style lang="postcss">
+  .polkadot-app :global(.tab button.selected) {
+    background-color: var(--polkadot-pink) !important;
+    color: white;
+    order: -1;
+  }
+</style>

packages/ui/src/polkadot/handle-unsupported-features.ts

@@ -0,0 +1,18 @@
+import type { GenericOptions, Kind } from '@openzeppelin/wizard';
+
+export function defineOmitFeatures(): Map<Kind, string[]> {
+  const omitFeatures: Map<Kind, string[]> = new Map();
+  omitFeatures.set('ERC20', ['superchain']);
+  omitFeatures.set('Stablecoin', ['superchain']);
+  omitFeatures.set('RealWorldAsset', ['superchain']);
+  return omitFeatures;
+}
+
+export function sanitizeOmittedFeatures(opts: GenericOptions): GenericOptions {
+  if (opts.kind === 'ERC20' || opts.kind === 'Stablecoin' || opts.kind === 'RealWorldAsset') {
+    if (opts.crossChainBridging === 'superchain') {
+      opts.crossChainBridging = 'custom';
+    }
+  }
+  return opts;
+}