(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4992],{14957:function(e,s,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/extending-a-world",function(){return n(59930)}])},48986:function(e,s,n){"use strict";n.d(s,{C:function(){return t}});var r=n(7505),l=n(7765),o=n(24737),i=n.n(o);function t(e){let{children:s}=e,n=(0,l.useRef)(null),[o,t]=(0,l.useState)(!0);return(0,l.useEffect)(()=>{if(!n.current)return;let e=Array.from(n.current.querySelectorAll(".line")),s=[];e.forEach((e,n)=>{e.matches(".highlighted")&&s.push(n),/^\s+$/g.test(e.innerHTML)&&e.setAttribute("data-empty","")}),s.length&&e.forEach((e,n)=>{let r=s.reduce((e,s)=>Math.min(e,Math.abs(s-n)),1/0);e.setAttribute("data-highlight-distance",Math.min(r,4).toString())})},[o]),(0,r.jsx)("div",{ref:n,style:{marginTop:"1.5rem"},className:o?i().collapsed:i().expanded,onClick:e=>{e.target instanceof Element&&e.target.closest(".line")&&t(!o)},children:s})}},73307:function(e,s,n){"use strict";n.d(s,{Z:function(){return i}});var r=n(7505),l=n(11689);let o={logo:function(){return(0,r.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:"0.25em",fontSize:"32px",fontFamily:"PP Supply Mono",textTransform:"uppercase"},children:[(0,r.jsx)("img",{src:"/images/logos/mud-white.svg",style:{height:"calc(var(--nextra-navbar-height) - 35px)"},alt:"MUD logo"}),"MUD"]})},useNextSeoProps(){let{asPath:e}=(0,l.useRouter)();return{titleTemplate:"/"===e?"MUD – a framework for ambitious Ethereum applications":"%s – MUD"}},project:{link:"https://github.com/latticexyz/mud"},docsRepositoryBase:"https://github.com/latticexyz/mud/tree/main/docs",head:(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("meta",{property:"title",content:"MUD documentation"})}),darkMode:!1,nextThemes:{defaultTheme:"dark"},footer:{text:"MIT 2023 \xa9 MUD"},primaryHue:28,sidebar:{defaultMenuCollapseLevel:1}};var i=o},59930:function(e,s,n){"use strict";n.r(s),n.d(s,{default:function(){return p}});var r=n(7505),l=n(42585),o=n(38288),i=n(73307);n(54693);var t=n(26736),a=n(98823),c=n.n(a),h={src:"/_next/static/media/extend-ui-with-msgs.27b00a60.png",height:578,width:1580,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAADCAMAAACZFr56AAAAD1BMVEUpNEUiLD4WIDORlp/+//9+04F0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAHUlEQVR4nBXBgQ0AAAzCoFb9/+ZlwBpNwiqCrOEdAn4AJbns81AAAAAASUVORK5CYII=",blurWidth:8,blurHeight:3},d=n(48986);let x={MDXContent:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}=Object.assign({},(0,t.ah)(),e.components);return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(k,{...e})}):k(e)},pageOpts:{filePath:"pages/guides/extending-a-world/index.mdx",route:"/guides/extending-a-world",headings:[{depth:1,value:"Extending a World Permissionlessly",id:"extending-a-world-permissionlessly"},{depth:2,value:"The sample program",id:"the-sample-program"},{depth:2,value:"Create the World to extend",id:"create-the-world-to-extend"},{depth:2,value:"Create the Solidity code",id:"create-the-solidity-code"},{depth:2,value:"Deploy to the blockchain",id:"deploy-to-the-blockchain"},{depth:2,value:"Create an updated user interface",id:"create-an-updated-user-interface"},{depth:3,value:"Run the user interface",id:"run-the-user-interface"},{depth:3,value:"Increment and send a message",id:"increment-and-send-a-message"},{depth:3,value:"Read the counter",id:"read-the-counter"}],pageMap:[{kind:"Meta",data:{introduction:{title:"What is MUD?",theme:{breadcrumb:!1}},quickstart:{title:"Get started",theme:{breadcrumb:!1}},protocol:{title:"Protocol",type:"separator"},store:"Store",world:"World",framework:{title:"Framework",type:"separator"},config:"Config",cli:"CLI","state-query":"State Query",services:"Services","---":{title:"",type:"separator"},guides:"Guides",templates:"Templates",contribute:{title:"Contribute",theme:{breadcrumb:!1}},changelog:"Changelog",retrospectives:"Retrospectives",audits:"Audits",version:{title:"2.1.1",type:"menu",items:{changelog:{title:"Changelog",href:"/changelog"},contribute:{title:"Contribute",href:"/contribute"}}},status:{title:"Status",type:"page",href:"https://status.mud.dev",newWindow:!0},community:{title:"Community",type:"page",href:"https://community.mud.dev",newWindow:!0},twitter:{title:"Twitter",type:"page",href:"https://twitter.com/latticexyz",newWindow:!0},discord:{title:"Discord",type:"page",href:"https://lattice.xyz/discord",newWindow:!0}}},{kind:"Folder",name:"audits",route:"/audits",children:[{kind:"MdxPage",name:"2024-02-11-open-zeppelin",route:"/audits/2024-02-11-open-zeppelin"},{kind:"Meta",data:{"2024-02-11-open-zeppelin":"2024-02-11 OpenZeppelin",pdf:{display:"hidden"},icons:{display:"hidden"}}}]},{kind:"MdxPage",name:"changelog",route:"/changelog"},{kind:"Folder",name:"cli",route:"/cli",children:[{kind:"Meta",data:{tablegen:"mud tablegen",worldgen:"mud worldgen",test:"mud test",deploy:"mud deploy",verify:"mud verify","dev-contracts":"mud dev-contracts","abi-ts":"mud abi-ts","set-version":"mud set-version"}},{kind:"MdxPage",name:"abi-ts",route:"/cli/abi-ts"},{kind:"MdxPage",name:"deploy",route:"/cli/deploy"},{kind:"MdxPage",name:"dev-contracts",route:"/cli/dev-contracts"},{kind:"MdxPage",name:"set-version",route:"/cli/set-version"},{kind:"MdxPage",name:"tablegen",route:"/cli/tablegen"},{kind:"MdxPage",name:"test",route:"/cli/test"},{kind:"MdxPage",name:"verify",route:"/cli/verify"},{kind:"MdxPage",name:"worldgen",route:"/cli/worldgen"}]},{kind:"Folder",name:"config",route:"/config",children:[{kind:"MdxPage",name:"reference",route:"/config/reference"},{kind:"Meta",data:{reference:"Reference"}}]},{kind:"MdxPage",name:"config",route:"/config"},{kind:"MdxPage",name:"contribute",route:"/contribute"},{kind:"Folder",name:"guides",route:"/guides",children:[{kind:"Meta",data:{"replicating-onchain-state":"Replicating onchain state","hello-world":"Hello World","extending-a-world":"Extending a World","adding-delegation":"Adding Delegation",modules:"Writing MUD Modules",emojimon:"Emojimon",testing:"Testing","best-practices":"Best Practices"}},{kind:"MdxPage",name:"adding-delegation",route:"/guides/adding-delegation"},{kind:"Folder",name:"best-practices",route:"/guides/best-practices",children:[{kind:"Meta",data:{"dividing-into-systems":"Dividing Code into Systems","system-best-practices":"System Best Practices","deployment-settings":"Recommended Deployment Settings",kms:"Deploy production worlds using AWS KMS"}},{kind:"MdxPage",name:"deployment-settings",route:"/guides/best-practices/deployment-settings"},{kind:"MdxPage",name:"dividing-into-systems",route:"/guides/best-practices/dividing-into-systems"},{kind:"MdxPage",name:"kms",route:"/guides/best-practices/kms"},{kind:"MdxPage",name:"system-best-practices",route:"/guides/best-practices/system-best-practices"}]},{kind:"Folder",name:"emojimon",route:"/guides/emojimon",children:[{kind:"MdxPage",name:"1-preface-the-ecs-model",route:"/guides/emojimon/1-preface-the-ecs-model"},{kind:"MdxPage",name:"2-getting-started",route:"/guides/emojimon/2-getting-started"},{kind:"MdxPage",name:"3-players-and-movement",route:"/guides/emojimon/3-players-and-movement"},{kind:"MdxPage",name:"4-map-and-terrain",route:"/guides/emojimon/4-map-and-terrain"},{kind:"MdxPage",name:"5-a-wild-emojimon-appears",route:"/guides/emojimon/5-a-wild-emojimon-appears"},{kind:"MdxPage",name:"6-advanced",route:"/guides/emojimon/6-advanced"},{kind:"Meta",data:{"1-preface-the-ecs-model":"Preface: the ECS model","2-getting-started":"Getting started","3-players-and-movement":"Players and movement","4-map-and-terrain":"Map and terrain","5-a-wild-emojimon-appears":"A wild Emojimon appears","6-advanced":"Advanced features"}}]},{kind:"MdxPage",name:"emojimon",route:"/guides/emojimon"},{kind:"Folder",name:"extending-a-world",route:"/guides/extending-a-world",children:[{kind:"Meta",data:{index:"Extending a World Permissionlessly"}},{kind:"MdxPage",name:"index",route:"/guides/extending-a-world"}]},{kind:"Folder",name:"hello-world",route:"/guides/hello-world",children:[{kind:"Meta",data:{"add-table":"Add a table","filter-sync":"Filter data synchronization","add-system":"Add a system",deploy:{title:"Deploy to a blockchain",href:"/cli/deploy"},"add-chain-client":"Add chains to the client"}},{kind:"MdxPage",name:"add-chain-client",route:"/guides/hello-world/add-chain-client"},{kind:"MdxPage",name:"add-system",route:"/guides/hello-world/add-system"},{kind:"MdxPage",name:"add-table",route:"/guides/hello-world/add-table"},{kind:"MdxPage",name:"filter-sync",route:"/guides/hello-world/filter-sync"}]},{kind:"MdxPage",name:"hello-world",route:"/guides/hello-world"},{kind:"MdxPage",name:"modules",route:"/guides/modules"},{kind:"MdxPage",name:"replicating-onchain-state",route:"/guides/replicating-onchain-state"},{kind:"MdxPage",name:"testing",route:"/guides/testing"}]},{kind:"MdxPage",name:"introduction",route:"/introduction"},{kind:"MdxPage",name:"quickstart",route:"/quickstart"},{kind:"Folder",name:"retrospectives",route:"/retrospectives",children:[{kind:"MdxPage",name:"2023-09-12-register-system-vulnerability",route:"/retrospectives/2023-09-12-register-system-vulnerability"},{kind:"MdxPage",name:"2024-04-17-storeread-getdynamicfieldlength-bug",route:"/retrospectives/2024-04-17-storeread-getdynamicfieldlength-bug"},{kind:"Meta",data:{"2024-04-17-storeread-getdynamicfieldlength-bug":"2024-04-17 StoreRead.getDynamicFieldLength bug","2023-09-12-register-system-vulnerability":"2023-09-12 registerSystem vulnerability"}}]},{kind:"Folder",name:"services",route:"/services",children:[{kind:"Meta",data:{indexer:"Indexer",faucet:"Faucet"}},{kind:"MdxPage",name:"faucet",route:"/services/faucet"},{kind:"Folder",name:"indexer",route:"/services/indexer",children:[{kind:"Meta",data:{"using-indexer":"Using the Indexer","sqlite-indexer":"SQLite Indexer","postgres-event-only":"PostgreSQL for events","postgres-decoded":"PostgreSQL for data (and events)"}},{kind:"MdxPage",name:"postgres-decoded",route:"/services/indexer/postgres-decoded"},{kind:"MdxPage",name:"postgres-event-only",route:"/services/indexer/postgres-event-only"},{kind:"MdxPage",name:"sqlite-indexer",route:"/services/indexer/sqlite-indexer"},{kind:"MdxPage",name:"using-indexer",route:"/services/indexer/using-indexer"}]},{kind:"MdxPage",name:"indexer",route:"/services/indexer"}]},{kind:"Folder",name:"state-query",route:"/state-query",children:[{kind:"Meta",data:{typescript:"TypeScript"}},{kind:"Folder",name:"typescript",route:"/state-query/typescript",children:[{kind:"Meta",data:{recs:"RECS",zustand:"Zustand"}},{kind:"MdxPage",name:"recs",route:"/state-query/typescript/recs"},{kind:"MdxPage",name:"zustand",route:"/state-query/typescript/zustand"}]}]},{kind:"Folder",name:"store",route:"/store",children:[{kind:"Meta",data:{introduction:"Introduction","data-model":"Data model",tables:"Tables","table-libraries":"Table libraries",encoding:"Encoding","store-hooks":"Store hooks",reference:"Reference"}},{kind:"MdxPage",name:"data-model",route:"/store/data-model"},{kind:"MdxPage",name:"encoding",route:"/store/encoding"},{kind:"MdxPage",name:"introduction",route:"/store/introduction"},{kind:"Folder",name:"reference",route:"/store/reference",children:[{kind:"Meta",data:{"store-core":"StoreCore (internal)",store:"IStore (external)","store-hook":"StoreHook",misc:"Miscellaneous"}},{kind:"MdxPage",name:"misc",route:"/store/reference/misc"},{kind:"MdxPage",name:"store-core",route:"/store/reference/store-core"},{kind:"MdxPage",name:"store-hook",route:"/store/reference/store-hook"},{kind:"MdxPage",name:"store",route:"/store/reference/store"}]},{kind:"MdxPage",name:"store-hooks",route:"/store/store-hooks"},{kind:"MdxPage",name:"table-libraries",route:"/store/table-libraries"},{kind:"MdxPage",name:"tables",route:"/store/tables"}]},{kind:"Folder",name:"templates",route:"/templates",children:[{kind:"Meta",data:{typescript:"TypeScript",godot:"Godot",pwa:"Progressive Web App (for mobile)",swift:"Swift",svelte:"Svelte",unity:"Unity",nethereum:"Nethereum"}},{kind:"MdxPage",name:"godot",route:"/templates/godot"},{kind:"MdxPage",name:"nethereum",route:"/templates/nethereum"},{kind:"MdxPage",name:"pwa",route:"/templates/pwa"},{kind:"MdxPage",name:"svelte",route:"/templates/svelte"},{kind:"MdxPage",name:"swift",route:"/templates/swift"},{kind:"Folder",name:"typescript",route:"/templates/typescript",children:[{kind:"Meta",data:{contracts:"Contracts",vanilla:"Vanilla","react-ecs":"React-ECS",threejs:"Three.js",vue:"Vue"}},{kind:"MdxPage",name:"contracts",route:"/templates/typescript/contracts"},{kind:"MdxPage",name:"react-ecs",route:"/templates/typescript/react-ecs"},{kind:"MdxPage",name:"threejs",route:"/templates/typescript/threejs"},{kind:"MdxPage",name:"vanilla",route:"/templates/typescript/vanilla"},{kind:"MdxPage",name:"vue",route:"/templates/typescript/vue"}]},{kind:"MdxPage",name:"unity",route:"/templates/unity"}]},{kind:"Folder",name:"world",route:"/world",children:[{kind:"Meta",data:{introduction:"Introduction","resource-ids":"Resource Identifiers","namespaces-access-control":"Namespaces & Access Control",tables:"Tables",systems:"Systems","system-hooks":"System Hooks","function-selectors":"Function Selectors",balance:"Balance","account-delegation":"Account Delegation","batch-calls":"Batch Calls",upgrades:"Upgrading",modules:"Modules",reference:"Reference"}},{kind:"MdxPage",name:"account-delegation",route:"/world/account-delegation"},{kind:"MdxPage",name:"balance",route:"/world/balance"},{kind:"MdxPage",name:"batch-calls",route:"/world/batch-calls"},{kind:"MdxPage",name:"function-selectors",route:"/world/function-selectors"},{kind:"MdxPage",name:"introduction",route:"/world/introduction"},{kind:"Folder",name:"modules",route:"/world/modules",children:[{kind:"Meta",data:{keyswithvalue:"Keys with Value",erc721:"ERC-721 (NFT)"}},{kind:"MdxPage",name:"erc721",route:"/world/modules/erc721"},{kind:"MdxPage",name:"keyswithvalue",route:"/world/modules/keyswithvalue"}]},{kind:"MdxPage",name:"modules",route:"/world/modules"},{kind:"MdxPage",name:"namespaces-access-control",route:"/world/namespaces-access-control"},{kind:"Folder",name:"reference",route:"/world/reference",children:[{kind:"Meta",data:{"delegation-external":"Delegation (interface)",module:"Modules","module-external":"Modules (interface)",system:"Systems","system-external":"Systems (interface)",world:"World","world-external":"World (interfaces)","world-context":"World context","world-context-external":"World context (interface)","resource-ids":"Resource IDs",misc:"Miscellaneous",internal:"Internals"}},{kind:"MdxPage",name:"delegation-external",route:"/world/reference/delegation-external"},{kind:"Folder",name:"internal",route:"/world/reference/internal",children:[{kind:"Meta",data:{"access-control":"Access Control",create:"Create2",delegation:"Delegation",erc165:"ERC165","erc165-external":"ERC165 (interface)","init-module":"Init Module","init-module-implementation":"Init Module Implementation",systemcall:"SystemCall"}},{kind:"MdxPage",name:"access-control",route:"/world/reference/internal/access-control"},{kind:"MdxPage",name:"create",route:"/world/reference/internal/create"},{kind:"MdxPage",name:"delegation",route:"/world/reference/internal/delegation"},{kind:"MdxPage",name:"erc165-external",route:"/world/reference/internal/erc165-external"},{kind:"MdxPage",name:"erc165",route:"/world/reference/internal/erc165"},{kind:"MdxPage",name:"init-module-implementation",route:"/world/reference/internal/init-module-implementation"},{kind:"MdxPage",name:"init-module",route:"/world/reference/internal/init-module"},{kind:"MdxPage",name:"systemcall",route:"/world/reference/internal/systemcall"}]},{kind:"MdxPage",name:"misc",route:"/world/reference/misc"},{kind:"MdxPage",name:"module-external",route:"/world/reference/module-external"},{kind:"MdxPage",name:"module",route:"/world/reference/module"},{kind:"MdxPage",name:"resource-ids",route:"/world/reference/resource-ids"},{kind:"MdxPage",name:"system-external",route:"/world/reference/system-external"},{kind:"MdxPage",name:"system",route:"/world/reference/system"},{kind:"MdxPage",name:"world-context-external",route:"/world/reference/world-context-external"},{kind:"MdxPage",name:"world-context",route:"/world/reference/world-context"},{kind:"MdxPage",name:"world-external",route:"/world/reference/world-external"},{kind:"MdxPage",name:"world",route:"/world/reference/world"}]},{kind:"MdxPage",name:"resource-ids",route:"/world/resource-ids"},{kind:"MdxPage",name:"system-hooks",route:"/world/system-hooks"},{kind:"MdxPage",name:"systems",route:"/world/systems"},{kind:"MdxPage",name:"tables",route:"/world/tables"},{kind:"MdxPage",name:"upgrades",route:"/world/upgrades"}]}],flexsearch:{codeblocks:!0},title:"Extending a World Permissionlessly"},pageNextRoute:"/guides/extending-a-world",nextraLayout:o.ZP,themeConfig:i.Z};function k(e){let s=Object.assign({h1:"h1",p:"p",code:"code",a:"a",h2:"h2",ul:"ul",li:"li",strong:"strong",pre:"pre",span:"span",ol:"ol",details:"details",summary:"summary",em:"em",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",h3:"h3"},(0,t.ah)(),e.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{children:"Extending a World Permissionlessly"}),"\n",(0,r.jsxs)(s.p,{children:["On this page you learn how to modify a ",(0,r.jsx)(s.code,{children:"World"})," that is already deployed to the blockchain, without using a privileged address, such as the one that initially deployed it.\nIf you want to learn how to modify a ",(0,r.jsx)(s.code,{children:"World"})," before it is deployed, ",(0,r.jsx)(s.a,{href:"../hello-world",children:"see the hello world page"}),"."]}),"\n",(0,r.jsx)(s.h2,{id:"the-sample-program",children:"The sample program"}),"\n",(0,r.jsxs)(s.p,{children:["To learn how to extend a ",(0,r.jsx)(s.code,{children:"World"}),", we will extend the ",(0,r.jsx)(s.code,{children:"Counter"})," example to allow users to leave a message while incrementing the counter."]}),"\n",(0,r.jsxs)(s.p,{children:["To extend the ",(0,r.jsx)(s.code,{children:"World"})," with the message functionality requires adding several resources:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Namespace"}),".\nA ",(0,r.jsx)(s.a,{href:"/world/namespaces-access-control",children:"namescape"})," can contain tables and systems.\nIn most cases, the only way you would be able to extend a ",(0,r.jsx)(s.code,{children:"World"})," that somebody else owns is to create your own namespace within that world."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Table"}),".\nA ",(0,r.jsx)(s.a,{href:"/world/tables",children:"table"})," to store the messages that have been posted."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"System"}),".\nA ",(0,r.jsx)(s.a,{href:"/world/systems",children:(0,r.jsx)(s.code,{children:"System"})})," that updates the messages table and then calls ",(0,r.jsx)(s.code,{children:"increment"})," to update the counter."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"create-the-world-to-extend",children:["Create the ",(0,r.jsx)(s.code,{children:"World"})," to extend"]}),"\n",(0,r.jsxs)(s.p,{children:["To have a ",(0,r.jsx)(s.code,{children:"World"})," with the ",(0,r.jsx)(s.code,{children:"Counter"})," example to modify, go to a separate command line window and create a blockchain with a ",(0,r.jsx)(s.code,{children:"World"})," using ",(0,r.jsx)(s.a,{href:"/quickstart",children:"the TypeScript template"})," and start the execution."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"create"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"mud@latest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"extendMe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--template"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"vanilla"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"extendMe"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"dev"})]})]})}),"\n",(0,r.jsx)(s.h2,{id:"create-the-solidity-code",children:"Create the Solidity code"}),"\n",(0,r.jsx)(s.p,{children:"The easiest way to create the Solidity code is to use the MUD template:"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Create a new MUD application."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"create"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"mud@latest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"extension"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--template"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"vanilla"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"extension/packages/contracts"})]})]})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Edit ",(0,r.jsx)(s.code,{children:"mud.config.ts"})," to include the definitions we need."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"mud.config.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { defineWorld } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"defineWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  namespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  tables"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Messages"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      schema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        counterValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint32"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        message"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"string"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"counterValue"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  systems"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"MessageSystem"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      openAccess"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Create ",(0,r.jsx)(s.code,{children:"src/systems/MessageSystem.sol"}),"."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",filename:"MessageSystem.sol",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.21;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/System.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Messages"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WorldWithIncrement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"app__increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"external"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"incrementMessage"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"memory"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" message) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newVal "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldWithIncrement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"())."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"app__increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Messages."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(newVal"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" message);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newVal;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/System.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Messages"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsxs)(s.p,{children:["These are the two main things the ",(0,r.jsx)(s.code,{children:"System"})," needs to know: how to be a ",(0,r.jsx)(s.code,{children:"System"})," and how to access the ",(0,r.jsx)(s.code,{children:"Messages"})," table."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WorldWithIncrement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"app__increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"external"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,r.jsxs)(s.p,{children:["This ",(0,r.jsx)(s.code,{children:"System"})," needs to call ",(0,r.jsx)(s.code,{children:"increment"})," on the ",(0,r.jsx)(s.code,{children:"World"})," where it is implemented, which is in the ",(0,r.jsx)(s.code,{children:"app"})," namespace.\nHowever, as an extension author, you might not have access to the source code of any ",(0,r.jsx)(s.code,{children:"System"})," that isn't part of your extension."]}),(0,r.jsxs)(s.p,{children:["If you define your own interface for ",(0,r.jsx)(s.code,{children:"World"})," you can add whatever function signatures are supported.\nNote that ",(0,r.jsx)(s.a,{href:"https://docs.soliditylang.org/en/latest/abi-spec.html#function-selector",children:"the Ethereum function selector"})," is based on the function name and its parameter types, it does not include the return type.\nSo if you are unsure of the return type that is not a huge problem."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"System"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"incrementMessage"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"memory"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" message) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"public"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"returns"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint32"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newVal "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldWithIncrement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"_world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"())."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"app__increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),(0,r.jsxs)(s.p,{children:["This is how we use the ",(0,r.jsx)(s.code,{children:"WorldWithIncrement"})," interface we created.\nThe ",(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/world/src/WorldContext.sol#L38-L44",children:(0,r.jsx)(s.code,{children:"_world()"})})," call gives us the address of the ",(0,r.jsx)(s.code,{children:"World"})," that called us.\nWhen we specify ",(0,r.jsx)(s.code,{children:"WorldWithIncrement(<address>)"}),", we are telling Solidity that there is already a ",(0,r.jsx)(s.code,{children:"WorldWithIncrement"})," at that address, and therefore we can use functions that are supported by ",(0,r.jsx)(s.code,{children:"WorldWithIncrement"}),", such as ",(0,r.jsx)(s.code,{children:"app__increment()"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Messages."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"set"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(newVal"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" message);"})]})})}),(0,r.jsxs)(s.p,{children:["This is one way to create a record with the key ",(0,r.jsx)(s.code,{children:"newVal"})," and the value ",(0,r.jsx)(s.code,{children:"message"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" newVal;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,r.jsxs)(s.p,{children:["When we are called by a user, an externally owned account, the return value is meaningless.\nHowever, just as we call ",(0,r.jsx)(s.code,{children:"increment()"})," from a contract and use the return value (instead of having to read ",(0,r.jsx)(s.code,{children:"Counter"})," ourselves), some future onchain code might call ",(0,r.jsx)(s.code,{children:"incrementMessage"})," and use the returned value."]})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Remove files that are part of the template, but not useful in an extension."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"rm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"src/systems/IncrementSystem.sol"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"test/*.t.sol"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"script/PostDeploy.s.sol"})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Build and compile the Solidity code."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"build"})]})})}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"deploy-to-the-blockchain",children:"Deploy to the blockchain"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Create a ",(0,r.jsx)(s.code,{children:".env"})," file with:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"PRIVATE_KEY"})," - the private key of an account that has ETH on the blockchain.\nPreferably, ",(0,r.jsx)(s.em,{children:"not"})," the one that deployed the ",(0,r.jsx)(s.code,{children:"World"}),"."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"WORLD_ADDRESS"})," - the address of the ",(0,r.jsx)(s.code,{children:"World"})," to which you add the namespace."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["If you are using the template with a fresh ",(0,r.jsx)(s.code,{children:"pnpm dev"}),", then you can use this ",(0,r.jsx)(s.code,{children:".env"})," (verify that ",(0,r.jsx)(s.code,{children:"WORLD_ADDRESS"})," is correct using the MUD Dev Tools):"]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",filename:".env",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"# Anvil default private key for the second account"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"# (NOT the account that deployed the World)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"PRIVATE_KEY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"# Address for the world we are extending"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"WORLD_ADDRESS"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b"})]})]})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Create this script in ",(0,r.jsx)(s.code,{children:"script/MessagingExtension.s.sol"}),"."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",filename:"MessagingExtension.s.sol",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.21;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"forge-std/Script.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"forge-std/console.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"IBaseWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world-modules/src/interfaces/IBaseWorld.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldRegistrationSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/modules/init/implementations/WorldRegistrationSystem.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Create resource identifiers (for the namespace and system)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ResourceId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/ResourceId.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldResourceIdLib"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/WorldResourceId.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"RESOURCE_SYSTEM"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/worldResourceTypes.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// For registering the table"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Messages"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../src/codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"IStore"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/IStore.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"StoreSwitch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/StoreSwitch.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// For deploying MessageSystem"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../src/systems/MessageSystem.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessagingExtension"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"run"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"external"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deployerPrivateKey "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"envUint"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"PRIVATE_KEY"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" worldAddress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"envAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"WORLD_ADDRESS"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    WorldRegistrationSystem world "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldRegistrationSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(worldAddress);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    ResourceId namespaceResource "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" WorldResourceIdLib."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encodeNamespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes14"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    ResourceId systemResource "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" WorldResourceIdLib."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encode"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(RESOURCE_SYSTEM"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"MessageSystem"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"startBroadcast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(deployerPrivateKey);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerNamespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(namespaceResource);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    StoreSwitch."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setStoreAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(worldAddress);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Messages."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"register"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    MessageSystem messageSystem "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    console."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"MessageSystem address: "'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(messageSystem));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(systemResource"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" messageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerFunctionSelector"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(systemResource"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"incrementMessage(string)"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"stopBroadcast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// SPDX-License-Identifier: MIT"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"pragma"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"solidity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" >=0.8.21;"})]})]})}),(0,r.jsx)(s.p,{children:"Standard Solidity boilerplate."}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"forge-std/Script.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"forge-std/console.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsxs)(s.p,{children:["The definitions for ",(0,r.jsx)(s.a,{href:"https://book.getfoundry.sh/reference/forge/forge-script",children:"forge scripts"})," and ",(0,r.jsx)(s.a,{href:"https://book.getfoundry.sh/reference/forge-std/console-log",children:"the console"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"IBaseWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world-modules/src/interfaces/IBaseWorld.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,r.jsxs)(s.p,{children:["Use ",(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/world-modules/src/interfaces/IBaseWorld.sol",children:"IBaseWorld.sol"})," to get definitions that are common to all ",(0,r.jsx)(s.code,{children:"World"})," contracts."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldRegistrationSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/modules/init/implementations/WorldRegistrationSystem.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})})}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/world/src/modules/init/implementations/WorldRegistrationSystem.sol",children:"WorldRegistartionSystem.sol"})," contains the function definitions necessary to register new namespaces and systems with an existing ",(0,r.jsx)(s.code,{children:"World"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Create resource identifiers (for the namespace and system)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ResourceId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/ResourceId.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldResourceIdLib"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/WorldResourceId.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"RESOURCE_SYSTEM"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world/src/worldResourceTypes.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsx)(s.p,{children:"These definitions make it easy to manage resource identifiers.\nWe need them for the resource IDs we need to create: the namespace and the system."}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// For registering the table"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Messages"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:", "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessagesTableId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../src/codegen/index.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"IStore"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/IStore.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"StoreSwitch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/src/StoreSwitch.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsxs)(s.p,{children:["These are the definitions we need to register the ",(0,r.jsx)(s.code,{children:"Messages"})," table."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// For deploying MessageSystem"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../src/systems/MessageSystem.sol"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]})]})}),(0,r.jsxs)(s.p,{children:["These are the definitions we need to deploy the ",(0,r.jsx)(s.code,{children:"MessageSystem"})," contract so we'll then be able to register it as a ",(0,r.jsx)(s.code,{children:"System"})," in the ",(0,r.jsx)(s.code,{children:"World"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"contract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessagingExtension"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"is"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"run"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"external"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]})]})}),(0,r.jsx)(s.p,{children:"This is the function that implements the script."}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" deployerPrivateKey "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"envUint"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"PRIVATE_KEY"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" worldAddress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"envAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"WORLD_ADDRESS"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),(0,r.jsxs)(s.p,{children:["Read the private key and the address of the ",(0,r.jsx)(s.code,{children:"World"})," from the environment (which includes the content of the ",(0,r.jsx)(s.code,{children:".env"})," file)."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        WorldRegistrationSystem world "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"WorldRegistrationSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(worldAddress);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        ResourceId namespaceResource "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" WorldResourceIdLib."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encodeNamespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"bytes14"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        ResourceId systemResource "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" WorldResourceIdLib."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encode"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(RESOURCE_SYSTEM"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"MessageSystem"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),(0,r.jsxs)(s.p,{children:["We don't ",(0,r.jsx)(s.em,{children:"have"})," to name the system the same as the contract name, but it makes writing the client code later easier."]}),(0,r.jsxs)(s.p,{children:["Among other things, a MUD ",(0,r.jsx)(s.code,{children:"World"})," is a ",(0,r.jsx)(s.code,{children:"WorldRegistrationSystem"}),", so it has the appropriate functions.\nA ",(0,r.jsx)(s.code,{children:"ResourceId"})," is a 32 byte value that uniquely identifies a resource in a MUD ",(0,r.jsx)(s.code,{children:"World"}),".\nIt is two bytes of resource type followed by 14 bytes of namespace and then 16 bytes of the name of the actual resource."]}),(0,r.jsxs)(s.p,{children:["Here we create two ",(0,r.jsx)(s.code,{children:"ResourceId"})," values:"]}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Name"}),(0,r.jsx)(s.th,{children:"Type"}),(0,r.jsx)(s.th,{children:"Namespace"}),(0,r.jsx)(s.th,{children:"Resource name"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"namespaceResource"}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"ns"})," (namespace)"]}),(0,r.jsx)(s.td,{children:"messaging"}),(0,r.jsx)(s.td,{children:"Empty"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"systemResource"}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"sy"})," (system)"]}),(0,r.jsx)(s.td,{children:"messaging"}),(0,r.jsx)(s.td,{children:"MessageSystem"})]})]})]}),(0,r.jsx)(s.p,{children:"If you want to see these values, add these two lines to the script:"}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        console."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Namespace ID: %x"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(ResourceId."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"unwrap"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(namespaceResource)));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        console."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"System ID:    %x"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"uint256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(ResourceId."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"unwrap"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(systemResource)));"})]})]})}),(0,r.jsxs)(s.p,{children:["Note that ",(0,r.jsx)(s.code,{children:"console.log"})," requires a ",(0,r.jsx)(s.code,{children:"uint256"})," value, and we can't get that directly from a ",(0,r.jsx)(s.code,{children:"ResourceId"}),".\nInstead, we have to ",(0,r.jsx)(s.a,{href:"https://docs.soliditylang.org/en/v0.8.20/types.html#user-defined-value-types",children:"unwrap"})," our ",(0,r.jsx)(s.code,{children:"ResourceId"})," to get the original type (",(0,r.jsx)(s.code,{children:"bytes32"}),") and then ",(0,r.jsx)(s.a,{href:"https://docs.soliditylang.org/en/v0.8.20/types.html#explicit-conversions",children:"cast"})," it to ",(0,r.jsx)(s.code,{children:"uint256"}),"."]}),(0,r.jsx)(s.p,{children:"The expected values are:"}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Name"}),(0,r.jsx)(s.th,{children:"Expected value"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"Namespace ID"}),(0,r.jsx)(s.td,{children:"0x6e736d6573736167696e67000000000000000000000000000000000000000000"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"System ID"}),(0,r.jsx)(s.td,{children:"0x73796d6573736167696e6700000000004d65737361676553797374656d000000"})]})]})]}),(0,r.jsxs)(s.p,{children:["You can use ",(0,r.jsx)(s.a,{href:"https://www.duplichecker.com/hex-to-text.php",children:"an online calculator"})," to verify the values are correct."]}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{align:"right",children:"Hex value"}),(0,r.jsx)(s.th,{children:"ASCII"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"6e736d6573736167696e67"}),(0,r.jsx)(s.td,{children:"nsmessaging"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"73796d6573736167696e67"}),(0,r.jsx)(s.td,{children:"symessaging"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"4d65737361676553797374656d"}),(0,r.jsx)(s.td,{children:"MessageSystem"})]})]})]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"startBroadcast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(deployerPrivateKey);"})]})})}),(0,r.jsx)(s.p,{children:"Use the private key to submit transactions."}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerNamespace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(namespaceResource);"})]})})}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/world/src/modules/init/implementations/WorldRegistrationSystem.sol#L39-L63",children:"Register the namespace"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        StoreSwitch."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setStoreAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(worldAddress);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        Messages."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"register"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]})]})}),(0,r.jsxs)(s.p,{children:["Register the ",(0,r.jsx)(s.code,{children:"Messages"})," table to ",(0,r.jsx)(s.code,{children:"worldAddress"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        MessageSystem messageSystem "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MessageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(systemResource"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" messageSystem"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})]})}),(0,r.jsxs)(s.p,{children:["Deploy the new system and then register it with the ",(0,r.jsx)(s.code,{children:"World"})," we are extending.\nThe last parameter is whether or not we allow everybody to access this ",(0,r.jsx)(s.code,{children:"System"}),"."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        world."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"registerFunctionSelector"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(systemResource"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"incrementMessage(string)"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]})})}),(0,r.jsxs)(s.p,{children:["Register ",(0,r.jsx)(s.code,{children:"MessageSystem.incrementMessage(string)"}),".\nThis step is necessary to make the function accessible through the ",(0,r.jsx)(s.code,{children:"World"}),".\nThe function's name when accessed through the world is ",(0,r.jsx)(s.code,{children:"<namespace>__<function>"}),", so this function will be available as ",(0,r.jsx)(s.code,{children:"messaging__incrementMessage(string)"}),"."]}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," This is the case for all namespaces except for the root namespace, where we just use the name of the function (such as ",(0,r.jsx)(s.code,{children:"increment()"}),")."]}),(0,r.jsx)(s.pre,{"data-language":"solidity","data-theme":"default",children:(0,r.jsxs)(s.code,{"data-language":"solidity","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        vm."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"stopBroadcast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),(0,r.jsxs)(s.p,{children:["Stop using the private key.\nHere this call is not necessary because we immediately leave the script, but it is a good idea to include it in case ",(0,r.jsx)(s.code,{children:"MessagingExtension.run()"})," ever becomes part of a larger script."]})]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Run the script.\nNote that you need to provide the URL in the command line, you can't rely on the ",(0,r.jsx)(s.code,{children:"ETH_RPC_URL"})," environment variable."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"forge"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"script"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"script/MessagingExtension.s.sol:MessagingExtension"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--rpc-url"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"http://localhost:8545"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--broadcast"})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Increment and write a message."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"source"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:".env"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"send"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" $WORLD_ADDRESS "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--rpc-url"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"http://localhost:8545"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--private-key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" $PRIVATE_KEY "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"messaging__incrementMessage(string)"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"hello"'})]})]})}),"\n",(0,r.jsxs)(s.p,{children:["When a function is ",(0,r.jsx)(s.em,{children:"not"})," in the root namespace, it is accessible as ",(0,r.jsx)(s.code,{children:"<namespace>__<function name>"})," (as long as it is ",(0,r.jsx)(s.a,{href:"/world/function-selectors",children:"registered"}),")."]}),"\n",(0,r.jsxs)(s.p,{children:["Here we call our ",(0,r.jsx)(s.code,{children:"incrementMessage(string)"})," with the parameter ",(0,r.jsx)(s.code,{children:"hello"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["You can see in the user interface of ",(0,r.jsx)(s.code,{children:"extendMe"})," that the counter has been incremented.\nTo see the message we sent, use these commands:"]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"sh","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"TABLE_ID"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0x74626d6573736167696e6700000000004d657373616765730000000000000000"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"KEY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"to-int256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"]"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"RAW_RESULT"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"call"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" $WORLD_ADDRESS "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--rpc-url"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"http://localhost:8545"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "getRecord(bytes32,bytes32[])" $TABLE_ID $KEY`'})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--to-ascii"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ${RAW_RESULT"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"322"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"2}"})]})]})}),"\n",(0,r.jsxs)(s.details,{children:[(0,r.jsx)(s.summary,{children:"Explanation"}),(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"TABLE_ID"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"0x74626d6573736167696e6700000000004d657373616765730000000000000000"})]})})}),(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"TABLE_ID"})," is the ",(0,r.jsx)(s.code,{children:"ResourceId"})," for the table, taken from ",(0,r.jsx)(s.code,{children:"src/codegen/tables/Messages.sol"}),"\nYou can verify the interpretation ",(0,r.jsx)(s.a,{href:"https://www.duplichecker.com/hex-to-text.php",children:"with the online calculator"}),"."]}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Type"}),(0,r.jsx)(s.th,{children:"Namespace"}),(0,r.jsx)(s.th,{children:"Resource name"})]})}),(0,r.jsx)(s.tbody,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:"tb"})," (table)"]}),(0,r.jsx)(s.td,{children:"messaging"}),(0,r.jsx)(s.td,{children:"Messages"})]})})]}),(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"KEY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"to-int256"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"]"})]})})}),(0,r.jsxs)(s.p,{children:["The key to a MUD table is always an array of ",(0,r.jsx)(s.code,{children:"byte32"})," values.\nTo create that value, we convert our key (",(0,r.jsx)(s.code,{children:"2"}),", because that's the first user call to ",(0,r.jsx)(s.code,{children:"increment()"}),", the 0->1 increment is done by the post deploy script) to a 256 bit value using ",(0,r.jsx)(s.a,{href:"https://book.getfoundry.sh/reference/cast/cast-to-int256",children:(0,r.jsx)(s.code,{children:"cast"})})," and then envelop it in an array."]}),(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"RAW_RESULT"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"call"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' $WORLD_ADDRESS "getRecord(bytes32,bytes32[],bytes32)" $TABLE_ID $KEY $FIELD_LAYOUT`'})]})})}),(0,r.jsxs)(s.p,{children:["To call ",(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/store/src/StoreRead.sol#L44-L57",children:(0,r.jsx)(s.code,{children:"getRecord"})})," we need the tableID, the key array, and the field layout.\nThe call result is the entire value, which may have multiple static (fixed length) and dynamic (variable length) fields."]}),(0,r.jsx)(s.p,{children:"Here is the raw result divided into 32 byte words."}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{align:"right",children:"Word"}),(0,r.jsx)(s.th,{children:"Value"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"0"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"0000000000000000000000000000000000000000000000000000000000000060"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"1"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"0000000000000000000000000000000000000000000000000500000000000005"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"2"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"0000000000000000000000000000000000000000000000000000000000000080"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"3"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"0000000000000000000000000000000000000000000000000000000000000000"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"4"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"0000000000000000000000000000000000000000000000000000000000000005"})})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"5"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"68656c6c6f000000000000000000000000000000000000000000000000000000"})})]})]})]}),(0,r.jsx)(s.p,{children:"When there is a variable-length field (a field whose length is not known at compile-time) in a Solidity function's return value, it is represented by a word that tells us at what offset into the return data that field starts.\nThis function is used for different tables with different lengths of static fields, so the static fields are a variable length field as far as Solidity is concerned."}),(0,r.jsxs)(s.p,{children:["Word 0 shows us that this field's value starts at ",(0,r.jsx)(s.code,{children:"0x60"}),", which is word 3.\nBecause there are no static fields, word 3 is all zeros."]}),(0,r.jsxs)(s.p,{children:["Word 1 is a ",(0,r.jsx)(s.a,{href:"https://github.com/latticexyz/mud/blob/main/packages/store/src/EncodedLengths.sol",children:(0,r.jsx)(s.code,{children:"EncodedLengths"})})," with the lengths of the dynamic fields.\nHere is the interpretation."]}),(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{align:"right",children:"Bytes"}),(0,r.jsx)(s.th,{align:"right",children:"Value"}),(0,r.jsx)(s.th,{children:"Meaning"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"6-0"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"00000000000005"})}),(0,r.jsx)(s.td,{children:"The total length of all dynamic fields is five bytes."})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"11-7"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"0000000005"})}),(0,r.jsx)(s.td,{children:"The length of the first dynamic field is five bytes."})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"16-12"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"0000000000"})}),(0,r.jsxs)(s.td,{children:["The length of the (non-existent in ",(0,r.jsx)(s.code,{children:"Messages"}),") second dynamic field is zero"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"21-17"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"0000000000"})}),(0,r.jsxs)(s.td,{children:["The length of the (non-existent in ",(0,r.jsx)(s.code,{children:"Messages"}),") third dynamic field is zero"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"26-22"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"0000000000"})}),(0,r.jsxs)(s.td,{children:["The length of the (non-existent in ",(0,r.jsx)(s.code,{children:"Messages"}),") fourth dynamic field is zero"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{align:"right",children:"31-27"}),(0,r.jsx)(s.td,{align:"right",children:(0,r.jsx)(s.code,{children:"0000000000"})}),(0,r.jsxs)(s.td,{children:["The length of the (non-existent in ",(0,r.jsx)(s.code,{children:"Messages"}),") fifth dynamic field is zero"]})]})]})]}),(0,r.jsxs)(s.p,{children:["MUD tables can only have up to five dynamic fields because ",(0,r.jsx)(s.code,{children:"EncodedLengths"})," needs to fit in a 32 byte word."]}),(0,r.jsx)(s.p,{children:"Word 2 shows us that the field with the dynamic lengths starts at byte 0x80, which is word 4.\nWord 4 gives us the length of the string."}),(0,r.jsx)(s.p,{children:'Finally, word 5 gives us the actual message, "hello".'}),(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cast"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"--to-ascii"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ${RAW_RESULT"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"322"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"2}"})]})})}),(0,r.jsxs)(s.p,{children:["Based on the above we don't need the first 322 characters of ",(0,r.jsx)(s.code,{children:"$RAW_RESULT"}),".\nThe first two characters are the ",(0,r.jsx)(s.code,{children:"0x"})," that tells us this is a hexadecimal number.\nThe next 320 characters are words 0-4, which are not the actual message (each word is 32 bytes, which is 64 hexadecimal digits). We also don't need the trailing newline. ",(0,r.jsx)(s.code,{children:"${RAW_RESULT:322:-2}"})," removes those characters so we can use ",(0,r.jsx)(s.a,{href:"https://book.getfoundry.sh/reference/cast/cast-to-ascii",children:(0,r.jsx)(s.code,{children:"cast"})})," to get the ASCII."]})]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h2,{id:"create-an-updated-user-interface",children:"Create an updated user interface"}),"\n",(0,r.jsx)(s.p,{children:"Finally, we create a user interface that supports the messaging system."}),"\n",(0,r.jsx)(s.h3,{id:"run-the-user-interface",children:"Run the user interface"}),"\n",(0,r.jsxs)(s.p,{children:["For the user interface to run permissionlessly, it cannot require resources that that are not available because of the changes we made in ",(0,r.jsx)(s.code,{children:"packages/contracts"}),".\nHere we modify the template UI."]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Change to the client package of the extension."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"cd"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"../client"})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Port 3000 is already in use by the ",(0,r.jsx)(s.code,{children:"extendMe"})," application, so edit ",(0,r.jsx)(s.code,{children:"vite.config.ts"})," to use a different port."]}),"\n",(0,r.jsx)(d.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"vite.config.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { defineConfig } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"vite"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"defineConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  server"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    port"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"3001"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    fs"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      strict"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  build"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    target"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"es2022"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    minify"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    sourcemap"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsx)(s.p,{children:"Start the user interface."}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"vite"})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Open the application at ",(0,r.jsx)(s.a,{href:"http://localhost:3001",children:"http://localhost:3001"}),".\nThe client will throw errors because we haven't updated the client code to work with the new contracts yet - we'll fix that in the next steps."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["The network configuration does not have the correct ",(0,r.jsx)(s.code,{children:"World"})," address.\nYou need it in ",(0,r.jsx)(s.code,{children:"../contracts/worlds.json"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["You can either copy ",(0,r.jsx)(s.code,{children:"...extendMe/packages/contracts/worlds.json"})," into ",(0,r.jsx)(s.code,{children:"../contracts/worlds.json"}),", or get it from the MUD Dev Tools of the applications you extend typically at ",(0,r.jsx)(s.a,{href:"http://localhost:3000",children:"http://localhost:3000"})," and edit the value manually."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"json","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"json","data-theme":"default",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"{"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"31337"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:'"address"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b"'})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Note that while at this point you can access the user interface, the counter value is inaccurate and if you click ",(0,r.jsx)(s.strong,{children:"Increment"})," you get an error.\nWe will fix these problems now."]}),"\n",(0,r.jsx)(s.h3,{id:"increment-and-send-a-message",children:"Increment and send a message"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Edit ",(0,r.jsx)(s.code,{children:"src/mud/createSystemCalls.ts"})," to use the new ",(0,r.jsx)(s.code,{children:"messaging__incrementMessage"})," function instead of ",(0,r.jsx)(s.code,{children:"increment"}),"."]}),"\n",(0,r.jsx)(d.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"createSystemCalls.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * Create the system calls that the client can use to ask"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * for changes in the World state (using the System contracts)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { getComponentValue } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/recs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { ClientComponents } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./createClientComponents"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { SetupNetworkResult } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./setupNetwork"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { singletonEntity } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store-sync/recs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SystemCalls"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReturnType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"typeof"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" createSystemCalls>;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createSystemCalls"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * The parameter list informs TypeScript that:"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * - The first parameter is expected to be a"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   SetupNetworkResult, as defined in setupNetwork.ts"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   Out of this parameter, we only care about two fields:"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   - worldContract (which comes from getContract, see"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *     https://github.com/latticexyz/mud/blob/main/templates/vanilla/packages/client/src/mud/setupNetwork.ts#L63-L69)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   - waitForTransaction (which comes from syncToRecs, see"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *     https://github.com/latticexyz/mud/blob/main/templates/vanilla/packages/client/src/mud/setupNetwork.ts#L77-L83)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * - From the second parameter, which is a ClientComponent,"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   we only care about Counter. This parameter comes to use"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   through createClientComponents.ts, but it originates in"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   syncToRecs"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   *   (https://github.com/latticexyz/mud/blob/main/templates/vanilla/packages/client/src/mud/setupNetwork.ts#L77-L83)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" waitForTransaction }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SetupNetworkResult"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  { Counter }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ClientComponents"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"     * Because IncrementSystem"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"     * (https://mud.dev/templates/typescript/contracts#incrementsystemsol)"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"     * is in the root namespace, `.increment` can be called directly"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"     * on the World contract."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"     */"})}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"tx"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".messaging__incrementMessage"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`message at "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"${"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Date"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"]);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitForTransaction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(tx);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getComponentValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" singletonEntity);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["We no longer have a ",(0,r.jsx)(s.code,{children:"Counter"})," component.\nModify ",(0,r.jsx)(s.code,{children:"src/index.ts"})," to be able to run without it."]}),"\n",(0,r.jsx)(d.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"index.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { setup } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./mud/setup"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"contracts/mud.config"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  systemCalls: { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"increment"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Components expose a stream that triggers when the component is updated."})}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"?."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".subscribe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"((update) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"prevValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"] "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".value;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"console"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".log"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Counter updated"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" prevValue });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getElementById"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"counter"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".innerHTML "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"String"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"nextValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"?.value "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"unset"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Attach the increment function to the html element with ID `incrementButton` (if it exists)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"document"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".querySelector"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#incrementButton"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"?.addEventListener"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"click"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" increment);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// https://vitejs.dev/guide/env-and-mode.html"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"meta"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"env"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"DEV"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { mount: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"mountDevTools"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/dev-tools"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"mountDevTools"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    config"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    walletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".walletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    worldAddress"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    worldAbi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".abi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    recsWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"network"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  });"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Now you can click ",(0,r.jsx)(s.strong,{children:"Increment"})," in the user interface and create messages.\nThe user interface does not display those messages, but you can open the ",(0,r.jsx)(s.strong,{children:"MUD Dev Tools"}),", click the ",(0,r.jsx)(s.strong,{children:"Components"})," tab, and select ",(0,r.jsx)(s.strong,{children:"messagings__Messages"})," to view them."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(c(),{alt:"The extended UI with the messages shown in the MUD Dev Tools",placeholder:"blur",src:h})}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(s.h3,{id:"read-the-counter",children:"Read the counter"}),"\n",(0,r.jsxs)(s.p,{children:["We still don't have the ",(0,r.jsx)(s.code,{children:"Counter"})," value available, because the definition in ",(0,r.jsx)(s.code,{children:"mud.config.ts"})," is in the ",(0,r.jsx)(s.code,{children:"messaging"})," namespace, not the ",(0,r.jsx)(s.code,{children:"app"})," one.\nWe will now fix this."]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Add the ",(0,r.jsx)(s.code,{children:"@latticexyz/store"})," package."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"sh","data-theme":"default",hasCopyCode:!0,children:(0,r.jsx)(s.code,{"data-language":"sh","data-theme":"default",children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"pnpm"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"add"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"@latticexyz/store@latest"})]})})}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Copy the ",(0,r.jsx)(s.code,{children:"mud.config.ts"})," from the application being extended (",(0,r.jsx)(s.code,{children:"extendMe/packages/contracts"}),") to ",(0,r.jsx)(s.code,{children:"src/mud/counter.config.ts"}),"."]}),"\n",(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"counter.config.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-language":"ts","data-theme":"default",children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { defineWorld } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/world"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"default"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"defineWorld"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  tables"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    Counter"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      schema"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"        value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"uint32"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"      key"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" []"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"});"})})]})}),"\n",(0,r.jsxs)(s.p,{children:["Here we are using the definition from the original application for convenience, but we could have used ",(0,r.jsx)(s.a,{href:"/store/encoding#schema",children:"the schema"})," which is available in ",(0,r.jsx)(s.code,{children:"store__Tables"})," to get all the required information to rebuild this file."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:["Edit ",(0,r.jsx)(s.code,{children:"src/mud/setupNetwork.ts"})," to add a ",(0,r.jsx)(s.code,{children:"tables"})," parameter with the ",(0,r.jsx)(s.code,{children:"Counter"})," component's tables to the ",(0,r.jsx)(s.code,{children:"syncToRecs"})," call."]}),"\n",(0,r.jsx)(d.C,{children:(0,r.jsx)(s.pre,{"data-language":"ts","data-theme":"default",filename:"setupNetwork.ts",hasCopyCode:!0,children:(0,r.jsxs)(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"default","data-line-numbers-max-digits":"3",children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * The MUD client code is built on top of viem"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * (https://viem.sh/docs/getting-started.html)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * This line imports the functions we need from it."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  createPublicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  fallback"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  webSocket"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  http"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  createWalletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  Hex"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  ClientConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  getContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"} "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"viem"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { encodeEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" syncToRecs } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store-sync/recs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { getNetworkConfig } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./getNetworkConfig"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { world } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./world"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" IWorldAbi "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"contracts/out/IWorld.sol/IWorld.abi.json"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { createBurnerAccount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" transportObserver"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" ContractWrite } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/common"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { transactionQueue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" writeObserver } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/common/actions"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { resolveConfig } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/internal"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { storeToV1 } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"@latticexyz/store/config/v2"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { Subject"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" share } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"rxjs"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * Import our MUD config, which includes strong types for"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * our tables and other config options. We use this to generate"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * things like RECS components and get back strong types for them."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * See https://mud.dev/templates/typescript/contracts#mudconfigts"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" * for the source of this information."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"contracts/mud.config"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" counterConfig "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"./counter.config"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"SetupNetworkResult"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Awaited"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReturnType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"typeof"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" setupNetwork>>;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setupNetwork"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"() {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getNetworkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Create a viem public (read only) client"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * (https://viem.sh/docs/clients/public.html)"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"clientOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    chain"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".chain"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    transport"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"transportObserver"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"fallback"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(["}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"webSocket"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"http"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"()]))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    pollingInterval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"satisfies"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ClientConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createPublicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(clientOptions);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Create an observable for contract writes that we can"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * pass into MUD dev tools for transaction observability."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"new"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Subject"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ContractWrite"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:">();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Create a temporary wallet and a viem client for it"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * (see https://viem.sh/docs/clients/wallet.html)."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"burnerAccount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createBurnerAccount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".privateKey "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Hex"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"burnerWalletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"createWalletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"clientOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    account"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" burnerAccount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  })"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".extend"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"transactionQueue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"())"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".extend"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"writeObserver"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({ "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onWrite"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" (write) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".next"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(write) }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Create an object for communicating with the deployed World."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".worldAddress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Hex"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    abi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" IWorldAbi"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    client"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { public"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" wallet"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" burnerWalletClient }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  });"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"/*"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Sync on-chain state into RECS and keeps our client in sync."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * Uses the MUD indexer if available, otherwise falls back"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * to the viem publicClient to make RPC calls to fetch MUD"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   * events from the chain."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"   */"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"waitForTransaction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"syncToRecs"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    config"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" mudConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".worldAddress "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"as"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"Hex"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    startBlock"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"BigInt"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"networkConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".initialBlockNumber)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line highlighted",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    tables"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"resolveConfig"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"storeToV1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"(counterConfig)).tables"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  });"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:" "}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    components"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    playerEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"encodeEntity"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"({ address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"address"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" { address"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"burnerWalletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"account"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:".address })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    publicClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    walletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" burnerWalletClient"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    latestBlock$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    storedBlockLogs$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    waitForTransaction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    worldContract"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"    write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"write$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".asObservable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"()"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".pipe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"share"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"())"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"  };"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-color-text)"},children:"}"})})]})})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Now you can click ",(0,r.jsx)(s.strong,{children:"Increment"})," and see the update.\nAlso, you can look in ",(0,r.jsx)(s.strong,{children:"Components > app__Counter"})," and see the counter value."]})]})}var p=(0,l.j)(x)},24737:function(e){e.exports={collapsed:"CollapseCode_collapsed__D1CXB",expanded:"CollapseCode_expanded__x1xKU"}}},function(e){e.O(0,[3720,2888,179],function(){return e(e.s=14957)}),_N_E=e.O()}]);