cairo.html•7.46 kB
<!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>
<div class="switch switch-cairo active with-version" id="cairo-switch">
<img src="/icons/cairo.svg" alt="cairo">
Cairo
<select class="switch switch-cairo active version" id="version-dropdown">
<option value="stable" />
<option value="alpha" />
</select>
</div>
<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="cairo"></oz-wizard>
</div>
<footer>
<p>© <a href="https://openzeppelin.com" target="_blank" rel="noopener noreferrer">OpenZeppelin</a> 2017-<span id="copyright-date"></span> | <a href="https://openzeppelin.com/privacy" target="_blank" rel="noopener noreferrer">Privacy</a> | <a href="https://openzeppelin.com/tos" target="_blank" rel="noopener noreferrer">Terms of Service</a></p>
</footer>
<script>
const dropdown = document.getElementById('version-dropdown');
function populateLabels() {
const options = dropdown.querySelectorAll('option');
options[0].label = contractsVersions.cairo;
options[1].label = contractsVersions.cairoAlpha;
}
function resizeDropdown() {
const selectedOption = dropdown.children[dropdown.selectedIndex];
dropdown.style.width = selectedOption.label.length + 1 + 'ch';
}
function onchangeVersion() {
resizeDropdown();
window.location = "cairo#version=" + dropdown.value;
window.location.reload();
}
function preselectFromParam() {
const urlParams = new URLSearchParams(window.location.hash.substring(1));
const version = urlParams.get('version');
if (version) {
if (!dropdown.querySelector(`option[value="${version}"]`)) {
// If version does not exist in dropdown options, use the default
window.location = "cairo#version=stable";
window.location.reload();
} else {
// Set the selected version in the dropdown
dropdown.value = version;
}
}
}
function onStartup() {
// Hide version dropdown if both versions are the same
if (contractsVersions.cairo === contractsVersions.cairoAlpha) {
dropdown.style.display = 'none';
// Revert Cairo switch to non-versioned style
const cairoSwitch = document.getElementById('cairo-switch');
cairoSwitch.classList.remove('with-version');
return;
}
populateLabels();
dropdown.addEventListener('change', onchangeVersion);
preselectFromParam();
resizeDropdown();
}
onStartup();
</script>
<!-- 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>
