forked from latticexyz/mud
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(create-mud): new react template with stash/entrykit (latticexyz#…
- Loading branch information
Showing
54 changed files
with
3,112 additions
and
1,088 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@latticexyz/entrykit": patch | ||
| --- | ||
|
|
||
| Bumped react-error-boundary dependency. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "create-mud": patch | ||
| --- | ||
|
|
||
| Updated React template with Stash client state library, EntryKit for wallet support, and a cleaned up app structure. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,16 @@ | ||
| .DS_Store | ||
| logs | ||
| *.log | ||
|
|
||
| node_modules | ||
|
|
||
| # mud artifacts | ||
| .mud | ||
| # sqlite indexer data | ||
| *.db | ||
| *.db-journal | ||
| .env.* | ||
|
|
||
| # foundry | ||
| cache | ||
| broadcast | ||
| out/* | ||
| !out/IWorld.sol | ||
| out/IWorld.sol/* | ||
| !out/IWorld.sol/IWorld.abi.json | ||
| !out/IWorld.sol/IWorld.abi.d.json.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,21 @@ | ||
| scrollback: 10000 | ||
| procs: | ||
| client: | ||
| cwd: packages/client | ||
| shell: pnpm run dev | ||
| contracts: | ||
| cwd: packages/contracts | ||
| shell: pnpm mud dev-contracts --rpc http://127.0.0.1:8545 | ||
| deploy-prereqs: | ||
| cwd: packages/contracts | ||
| shell: pnpm deploy-local-prereqs | ||
| env: | ||
| DEBUG: "mud:*" | ||
| # Anvil default account (0x70997970C51812dc3A010C7d01b50e0d17dc79C8) | ||
| PRIVATE_KEY: "0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d" | ||
| anvil: | ||
| cwd: packages/contracts | ||
| shell: anvil --base-fee 0 --block-time 2 | ||
| shell: anvil --block-time 2 | ||
| explorer: | ||
| cwd: packages/contracts | ||
| shell: pnpm explorer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| node_modules | ||
| dist | ||
| .DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,105 +1,46 @@ | ||
| import { useMUD } from "./MUDContext"; | ||
|
|
||
| const styleUnset = { all: "unset" } as const; | ||
|
|
||
| export const App = () => { | ||
| const { | ||
| network: { tables, useStore }, | ||
| systemCalls: { addTask, toggleTask, deleteTask }, | ||
| } = useMUD(); | ||
|
|
||
| const tasks = useStore((state) => { | ||
| const records = Object.values(state.getRecords(tables.Tasks)); | ||
| records.sort((a, b) => Number(a.value.createdAt - b.value.createdAt)); | ||
| return records; | ||
| }); | ||
| import { stash } from "./mud/stash"; | ||
| import { useRecords } from "@latticexyz/stash/react"; | ||
| import { AccountButton } from "@latticexyz/entrykit/internal"; | ||
| import { Direction } from "./common"; | ||
| import mudConfig from "contracts/mud.config"; | ||
| import { useMemo } from "react"; | ||
| import { GameMap } from "./game/GameMap"; | ||
| import { useWorldContract } from "./mud/useWorldContract"; | ||
| import { Synced } from "./mud/Synced"; | ||
| import { useSync } from "@latticexyz/store-sync/react"; | ||
|
|
||
| export function App() { | ||
| const players = useRecords({ stash, table: mudConfig.tables.app__Position }); | ||
|
|
||
| const sync = useSync(); | ||
| const worldContract = useWorldContract(); | ||
| const onMove = useMemo( | ||
| () => | ||
| sync.data && worldContract | ||
| ? async (direction: Direction) => { | ||
| const tx = await worldContract.write.app__move([mudConfig.enums.Direction.indexOf(direction)]); | ||
| await sync.data.waitForTransaction(tx); | ||
| } | ||
| : undefined, | ||
| [sync.data, worldContract], | ||
| ); | ||
|
|
||
| return ( | ||
| <> | ||
| <table> | ||
| <tbody> | ||
| {tasks.map((task) => ( | ||
| <tr key={task.id}> | ||
| <td align="right"> | ||
| <input | ||
| type="checkbox" | ||
| checked={task.value.completedAt > 0n} | ||
| title={task.value.completedAt === 0n ? "Mark task as completed" : "Mark task as incomplete"} | ||
| onChange={async (event) => { | ||
| event.preventDefault(); | ||
| const checkbox = event.currentTarget; | ||
|
|
||
| checkbox.disabled = true; | ||
| try { | ||
| await toggleTask(task.key.id); | ||
| } finally { | ||
| checkbox.disabled = false; | ||
| } | ||
| }} | ||
| /> | ||
| </td> | ||
| <td>{task.value.completedAt > 0n ? <s>{task.value.description}</s> : <>{task.value.description}</>}</td> | ||
| <td align="right"> | ||
| <button | ||
| type="button" | ||
| title="Delete task" | ||
| style={styleUnset} | ||
| onClick={async (event) => { | ||
| event.preventDefault(); | ||
| if (!window.confirm("Are you sure you want to delete this task?")) return; | ||
|
|
||
| const button = event.currentTarget; | ||
| button.disabled = true; | ||
| try { | ||
| await deleteTask(task.key.id); | ||
| } finally { | ||
| button.disabled = false; | ||
| } | ||
| }} | ||
| > | ||
| × | ||
| </button> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| <tfoot> | ||
| <tr> | ||
| <td> | ||
| <input type="checkbox" disabled /> | ||
| </td> | ||
| <td colSpan={2}> | ||
| <form | ||
| onSubmit={async (event) => { | ||
| event.preventDefault(); | ||
| const form = event.currentTarget; | ||
| const fieldset = form.querySelector("fieldset"); | ||
| if (!(fieldset instanceof HTMLFieldSetElement)) return; | ||
|
|
||
| const formData = new FormData(form); | ||
| const desc = formData.get("description"); | ||
| if (typeof desc !== "string") return; | ||
|
|
||
| fieldset.disabled = true; | ||
| try { | ||
| await addTask(desc); | ||
| form.reset(); | ||
| } finally { | ||
| fieldset.disabled = false; | ||
| } | ||
| }} | ||
| > | ||
| <fieldset style={styleUnset}> | ||
| <input type="text" name="description" />{" "} | ||
| <button type="submit" title="Add task"> | ||
| Add | ||
| </button> | ||
| </fieldset> | ||
| </form> | ||
| </td> | ||
| </tr> | ||
| </tfoot> | ||
| </table> | ||
| <div className="fixed inset-0 grid place-items-center p-4"> | ||
| <Synced | ||
| fallback={({ message, percentage }) => ( | ||
| <div className="tabular-nums"> | ||
| {message} ({percentage.toFixed(1)}%)… | ||
| </div> | ||
| )} | ||
| > | ||
| <GameMap players={players} onMove={onMove} /> | ||
| </Synced> | ||
| </div> | ||
| <div className="fixed top-2 right-2"> | ||
| <AccountButton /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
| } |
Oops, something went wrong.