create-mud 2.2.17-f52b1476f04ce0be68691e3b021a81e0fb9cce99 → 2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e

package/dist/templates/vanilla/packages/client/src/mud/supportedChains.ts

@@ -0,0 +1,20 @@
+/*
+ * The supported chains.
+ * By default, there are only two chains here:
+ *
+ * - mudFoundry, the chain running on anvil that pnpm dev
+ *   starts by default. It is similar to the viem anvil chain
+ *   (see https://viem.sh/docs/clients/test.html), but with the
+ *   basefee set to zero to avoid transaction fees.
+ * - Redstone, our production blockchain (https://redstone.xyz/)
+ * - Garnet, our test blockchain (https://garnetchain.com/))
+ *
+ */
+
+import { MUDChain, mudFoundry, redstone, garnet } from "@latticexyz/common/chains";
+
+/*
+ * See https://mud.dev/guides/hello-world/add-chain-client
+ * for instructions on how to add networks.
+ */
+export const supportedChains: MUDChain[] = [mudFoundry, redstone, garnet];

package/dist/templates/vanilla/packages/client/src/mud/world.ts

@@ -0,0 +1,3 @@
+import { createWorld } from "@latticexyz/recs";
+
+export const world = createWorld();

package/{templates/react → dist/templates/vanilla}/packages/client/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "types": ["vite/client", "vite-plugin-mud/env"],
+    "types": ["vite/client"],
     "target": "ESNext",
     "lib": ["ESNext", "DOM"],
     "jsx": "react-jsx",

package/dist/templates/vanilla/packages/contracts/.env

@@ -0,0 +1,11 @@
+# This .env file is for demonstration purposes only.
+#
+# This should usually be excluded via .gitignore and the env vars attached to
+# your deployment environment, but we're including this here for ease of local
+# development. Please do not commit changes to this file!
+#
+# Enable debug logs for MUD CLI
+DEBUG=mud:*
+#
+# Anvil default private key:
+PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

package/dist/templates/vanilla/packages/contracts/gitignore

@@ -0,0 +1,9 @@
+out/
+cache/
+node_modules/
+bindings/
+artifacts/
+broadcast/
+
+# Ignore MUD deploy artifacts
+deploys/**/*.json

package/dist/templates/vanilla/packages/contracts/mud.config.ts

@@ -0,0 +1,13 @@
+import { defineWorld } from "@latticexyz/world";
+
+export default defineWorld({
+  namespace: "app",
+  tables: {
+    Counter: {
+      schema: {
+        value: "uint32",
+      },
+      key: [],
+    },
+  },
+});

package/{templates/react → dist/templates/vanilla}/packages/contracts/package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@latticexyz/cli": "{{mud-version}}",
-    "@latticexyz/entrykit": "{{mud-version}}",
     "@latticexyz/schema-type": "{{mud-version}}",
     "@latticexyz/store": "{{mud-version}}",
     "@latticexyz/world": "{{mud-version}}",

package/{templates/react → dist/templates/vanilla}/packages/contracts/script/PostDeploy.s.sol

@@ -18,7 +18,11 @@ contract PostDeploy is Script {
     // Start broadcasting transactions from the deployer account
     vm.startBroadcast(deployerPrivateKey);
 
-    // TODO
+    // ------------------ EXAMPLES ------------------
+
+    // Call increment on the world via the registered function selector
+    uint32 newValue = IWorld(worldAddress).app__increment();
+    console.log("Increment via IWorld:", newValue);
 
     vm.stopBroadcast();
   }

package/{templates/react/packages/contracts/src/codegen/common.sol → dist/templates/vanilla/packages/contracts/src/codegen/index.sol}

@@ -3,9 +3,4 @@ pragma solidity >=0.8.24;
 
 /* Autogenerated file. Do not edit manually. */
 
-enum Direction {
-  North,
-  East,
-  South,
-  West
-}
+import { Counter } from "./tables/Counter.sol";

package/{templates/react-ecs/packages/contracts/src/codegen/tables/EntityCount.sol → dist/templates/vanilla/packages/contracts/src/codegen/tables/Counter.sol}

@@ -16,17 +16,17 @@ import { Schema } from "@latticexyz/store/src/Schema.sol";
 import { EncodedLengths, EncodedLengthsLib } from "@latticexyz/store/src/EncodedLengths.sol";
 import { ResourceId } from "@latticexyz/store/src/ResourceId.sol";
 
-library EntityCount {
-  // Hex below is the result of `WorldResourceIdLib.encode({ namespace: "app", name: "EntityCount", typeId: RESOURCE_TABLE });`
-  ResourceId constant _tableId = ResourceId.wrap(0x74626170700000000000000000000000456e74697479436f756e740000000000);
+library Counter {
+  // Hex below is the result of `WorldResourceIdLib.encode({ namespace: "app", name: "Counter", typeId: RESOURCE_TABLE });`
+  ResourceId constant _tableId = ResourceId.wrap(0x74626170700000000000000000000000436f756e746572000000000000000000);
 
   FieldLayout constant _fieldLayout =
-    FieldLayout.wrap(0x0020010020000000000000000000000000000000000000000000000000000000);
+    FieldLayout.wrap(0x0004010004000000000000000000000000000000000000000000000000000000);
 
   // Hex-encoded key schema of ()
   Schema constant _keySchema = Schema.wrap(0x0000000000000000000000000000000000000000000000000000000000000000);
-  // Hex-encoded value schema of (uint256)
-  Schema constant _valueSchema = Schema.wrap(0x002001001f000000000000000000000000000000000000000000000000000000);
+  // Hex-encoded value schema of (uint32)
+  Schema constant _valueSchema = Schema.wrap(0x0004010003000000000000000000000000000000000000000000000000000000);
 
   /**
    * @notice Get the table's key field names.
@@ -42,7 +42,7 @@ library EntityCount {
    */
   function getFieldNames() internal pure returns (string[] memory fieldNames) {
     fieldNames = new string[](1);
-    fieldNames[0] = "count";
+    fieldNames[0] = "value";
   }
 
   /**
@@ -60,79 +60,79 @@ library EntityCount {
   }
 
   /**
-   * @notice Get count.
+   * @notice Get value.
    */
-  function getCount() internal view returns (uint256 count) {
+  function getValue() internal view returns (uint32 value) {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
     bytes32 _blob = StoreSwitch.getStaticField(_tableId, _keyTuple, 0, _fieldLayout);
-    return (uint256(bytes32(_blob)));
+    return (uint32(bytes4(_blob)));
   }
 
   /**
-   * @notice Get count.
+   * @notice Get value.
    */
-  function _getCount() internal view returns (uint256 count) {
+  function _getValue() internal view returns (uint32 value) {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
     bytes32 _blob = StoreCore.getStaticField(_tableId, _keyTuple, 0, _fieldLayout);
-    return (uint256(bytes32(_blob)));
+    return (uint32(bytes4(_blob)));
   }
 
   /**
-   * @notice Get count.
+   * @notice Get value.
    */
-  function get() internal view returns (uint256 count) {
+  function get() internal view returns (uint32 value) {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
     bytes32 _blob = StoreSwitch.getStaticField(_tableId, _keyTuple, 0, _fieldLayout);
-    return (uint256(bytes32(_blob)));
+    return (uint32(bytes4(_blob)));
   }
 
   /**
-   * @notice Get count.
+   * @notice Get value.
    */
-  function _get() internal view returns (uint256 count) {
+  function _get() internal view returns (uint32 value) {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
     bytes32 _blob = StoreCore.getStaticField(_tableId, _keyTuple, 0, _fieldLayout);
-    return (uint256(bytes32(_blob)));
+    return (uint32(bytes4(_blob)));
   }
 
   /**
-   * @notice Set count.
+   * @notice Set value.
    */
-  function setCount(uint256 count) internal {
+  function setValue(uint32 value) internal {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
-    StoreSwitch.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((count)), _fieldLayout);
+    StoreSwitch.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((value)), _fieldLayout);
   }
 
   /**
-   * @notice Set count.
+   * @notice Set value.
    */
-  function _setCount(uint256 count) internal {
+  function _setValue(uint32 value) internal {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
-    StoreCore.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((count)), _fieldLayout);
+    StoreCore.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((value)), _fieldLayout);
   }
 
   /**
-   * @notice Set count.
+   * @notice Set value.
    */
-  function set(uint256 count) internal {
+  function set(uint32 value) internal {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
-    StoreSwitch.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((count)), _fieldLayout);
+    StoreSwitch.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((value)), _fieldLayout);
   }
 
   /**
-   * @notice Set count.
+   * @notice Set value.
    */
-  function _set(uint256 count) internal {
+  function _set(uint32 value) internal {
     bytes32[] memory _keyTuple = new bytes32[](0);
 
-    StoreCore.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((count)), _fieldLayout);
+    StoreCore.setStaticField(_tableId, _keyTuple, 0, abi.encodePacked((value)), _fieldLayout);
   }
 
   /**
@@ -157,8 +157,8 @@ library EntityCount {
    * @notice Tightly pack static (fixed length) data using this table's schema.
    * @return The static data, encoded into a sequence of bytes.
    */
-  function encodeStatic(uint256 count) internal pure returns (bytes memory) {
-    return abi.encodePacked(count);
+  function encodeStatic(uint32 value) internal pure returns (bytes memory) {
+    return abi.encodePacked(value);
   }
 
   /**
@@ -167,8 +167,8 @@ library EntityCount {
    * @return The lengths of the dynamic fields (packed into a single bytes32 value).
    * @return The dynamic (variable length) data, encoded into a sequence of bytes.
    */
-  function encode(uint256 count) internal pure returns (bytes memory, EncodedLengths, bytes memory) {
-    bytes memory _staticData = encodeStatic(count);
+  function encode(uint32 value) internal pure returns (bytes memory, EncodedLengths, bytes memory) {
+    bytes memory _staticData = encodeStatic(value);
 
     EncodedLengths _encodedLengths;
     bytes memory _dynamicData;

package/dist/templates/vanilla/packages/contracts/src/codegen/world/IIncrementSystem.sol

@@ -0,0 +1,13 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+
+/* Autogenerated file. Do not edit manually. */
+
+/**
+ * @title IIncrementSystem
+ * @author MUD (https://mud.dev) by Lattice (https://lattice.xyz)
+ * @dev This interface is automatically generated from the corresponding system contract. Do not edit manually.
+ */
+interface IIncrementSystem {
+  function app__increment() external returns (uint32);
+}

package/dist/templates/vanilla/packages/contracts/src/codegen/world/IWorld.sol

@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+
+/* Autogenerated file. Do not edit manually. */
+
+import { IBaseWorld } from "@latticexyz/world/src/codegen/interfaces/IBaseWorld.sol";
+import { IIncrementSystem } from "./IIncrementSystem.sol";
+
+/**
+ * @title IWorld
+ * @author MUD (https://mud.dev) by Lattice (https://lattice.xyz)
+ * @notice This interface integrates all systems and associated function selectors
+ * that are dynamically registered in the World during deployment.
+ * @dev This is an autogenerated file; do not edit manually.
+ */
+interface IWorld is IBaseWorld, IIncrementSystem {}

package/dist/templates/vanilla/packages/contracts/src/systems/IncrementSystem.sol

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+
+import { System } from "@latticexyz/world/src/System.sol";
+import { Counter } from "../codegen/index.sol";
+
+contract IncrementSystem is System {
+  function increment() public returns (uint32) {
+    uint32 counter = Counter.get();
+    uint32 newValue = counter + 1;
+    Counter.set(newValue);
+    return newValue;
+  }
+}

package/dist/templates/vanilla/packages/contracts/test/CounterTest.t.sol

@@ -0,0 +1,31 @@
+// SPDX-License-Identifier: MIT
+pragma solidity >=0.8.24;
+
+import "forge-std/Test.sol";
+import { MudTest } from "@latticexyz/world/test/MudTest.t.sol";
+import { getKeysWithValue } from "@latticexyz/world-modules/src/modules/keyswithvalue/getKeysWithValue.sol";
+
+import { IWorld } from "../src/codegen/world/IWorld.sol";
+import { Counter } from "../src/codegen/index.sol";
+
+contract CounterTest is MudTest {
+  function testWorldExists() public {
+    uint256 codeSize;
+    address addr = worldAddress;
+    assembly {
+      codeSize := extcodesize(addr)
+    }
+    assertTrue(codeSize > 0);
+  }
+
+  function testCounter() public {
+    // Expect the counter to be 1 because it was incremented in the PostDeploy script.
+    uint32 counter = Counter.get();
+    assertEq(counter, 1);
+
+    // Expect the counter to be 2 after calling increment.
+    IWorld(worldAddress).app__increment();
+    counter = Counter.get();
+    assertEq(counter, 2);
+  }
+}

package/dist/templates/vanilla/packages/contracts/worlds.json

@@ -0,0 +1,5 @@
+{
+  "31337": {
+    "address": "0x8d8b6b8414e1e3dcfd4168561b9be6bd3bf6ec4b"
+  }
+}

package/package.json

@@ -1,22 +1,17 @@
 {
   "name": "create-mud",
-  "version": "2.2.17-f52b1476f04ce0be68691e3b021a81e0fb9cce99",
+  "version": "2.2.17-f88e48e47ceb4a29a3862a3f3b85891490952f0e",
   "description": "Create a new MUD project",
   "license": "MIT",
   "author": "Lattice <mud@lattice.xyz>",
-  "type": "module",
-  "bin": "bin/cli.js",
+  "bin": "dist/cli.js",
   "files": [
-    "bin",
-    "dist",
-    "templates"
+    "dist"
   ],
   "dependencies": {
-    "fast-glob": "^3.3.3",
-    "yargs-interactive": "^3.0.1"
+    "create-create-app": "git+https://github.com/holic/create-create-app#74376c59b48a04aabbe94d9cacfe9cb1cecccd63"
   },
   "devDependencies": {
-    "@types/yargs-interactive": "^2.1.6",
     "execa": "^7.0.0"
   },
   "publishConfig": {
@@ -25,17 +20,16 @@
   },
   "scripts": {
     "build": "pnpm run build:js",
-    "build:js": "tsup && pnpm run copy-templates",
+    "build:js": "tsup && tsx ./scripts/copy-templates.ts",
     "clean": "pnpm run clean:js",
     "clean:js": "shx rm -rf dist",
-    "copy-templates": "tsx ./scripts/copy-templates.ts",
     "dev": "tsup --watch",
-    "test": "pnpm run copy-templates && pnpm vitest --run && pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs",
+    "test": "pnpm run test:vanilla && pnpm run test:react && pnpm run test:react-ecs && pnpm run test:phaser && pnpm run test:threejs",
     "test:ci": "pnpm run test",
-    "test:phaser": "bin/cli.js --name test-project --template phaser && pnpm --dir test-project install && shx rm -rf test-project",
-    "test:react": "bin/cli.js --name test-project --template react && pnpm --dir test-project install && shx rm -rf test-project",
-    "test:react-ecs": "bin/cli.js --name test-project --template react-ecs && pnpm --dir test-project install && shx rm -rf test-project",
-    "test:threejs": "bin/cli.js --name test-project --template threejs && pnpm --dir test-project install && shx rm -rf test-project",
-    "test:vanilla": "bin/cli.js --name test-project --template vanilla && pnpm --dir test-project install && shx rm -rf test-project"
+    "test:phaser": "dist/cli.js test-project --template phaser && shx rm -rf test-project",
+    "test:react": "dist/cli.js test-project --template react && shx rm -rf test-project",
+    "test:react-ecs": "dist/cli.js test-project --template react-ecs && shx rm -rf test-project",
+    "test:threejs": "dist/cli.js test-project --template threejs && shx rm -rf test-project",
+    "test:vanilla": "dist/cli.js test-project --template vanilla && shx rm -rf test-project"
   }
 }

package/bin/cli.js

@@ -1,4 +0,0 @@
-#!/usr/bin/env node
-
-// workaround for https://github.com/pnpm/pnpm/issues/1801
-import "../dist/cli.js";

package/templates/react/.gitignore_

@@ -1,16 +0,0 @@
-.DS_Store
-logs
-*.log
-
-node_modules
-
-.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

package/templates/react/mprocs.yaml

@@ -1,21 +0,0 @@
-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 --block-time 2
-  explorer:
-    cwd: packages/contracts
-    shell: pnpm explorer

package/templates/react/packages/client/.gitignore_

@@ -1 +0,0 @@
-dist

package/templates/react/packages/client/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/templates/react/packages/client/src/game/useKeyboardMovement.ts

@@ -1,26 +0,0 @@
-import { useEffect } from "react";
-import { Direction } from "../common";
-
-const keys = new Map<KeyboardEvent["key"], Direction>([
-  ["ArrowUp", "North"],
-  ["ArrowRight", "East"],
-  ["ArrowDown", "South"],
-  ["ArrowLeft", "West"],
-]);
-
-export const useKeyboardMovement = (move: undefined | ((direction: Direction) => void)) => {
-  useEffect(() => {
-    if (!move) return;
-
-    const listener = (event: KeyboardEvent) => {
-      const direction = keys.get(event.key);
-      if (direction == null) return;
-
-      event.preventDefault();
-      move(direction);
-    };
-
-    window.addEventListener("keydown", listener);
-    return () => window.removeEventListener("keydown", listener);
-  }, [move]);
-};

package/templates/react/packages/client/src/index.tsx

@@ -1,19 +0,0 @@
-import "tailwindcss/tailwind.css";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { Providers } from "./Providers";
-import { App } from "./App";
-import { Explorer } from "./mud/Explorer";
-import { ErrorBoundary } from "react-error-boundary";
-import { ErrorFallback } from "./ui/ErrorFallback";
-
-createRoot(document.getElementById("react-root")!).render(
-  <StrictMode>
-    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <Providers>
-        <App />
-        <Explorer />
-      </Providers>
-    </ErrorBoundary>
-  </StrictMode>,
-);

package/templates/react/packages/client/src/mud/Explorer.tsx

@@ -1,32 +0,0 @@
-import { useState } from "react";
-import { getChain, getWorldAddress } from "../common";
-import { MUDIcon } from "../ui/icons/MUDIcon";
-
-export function Explorer() {
-  const [open, setOpen] = useState(false);
-
-  const chain = getChain();
-  const worldAddress = getWorldAddress();
-
-  const explorerUrl = chain.blockExplorers?.worldsExplorer?.url;
-  if (!explorerUrl) return null;
-
-  return (
-    <div className="fixed bottom-0 inset-x-0 flex flex-col opacity-80 transition hover:opacity-100">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="outline-none flex justify-end gap-2 p-2 font-medium leading-none text-black"
-      >
-        {open ? (
-          <>Close</>
-        ) : (
-          <>
-            Explore <MUDIcon className="text-orange-500" />
-          </>
-        )}
-      </button>
-      {open ? <iframe src={`${explorerUrl}/${worldAddress}`} className="bg-black h-[50vh]" /> : null}
-    </div>
-  );
-}

package/templates/react/packages/client/src/mud/useWorldContract.ts

@@ -1,44 +0,0 @@
-import { useClient } from "wagmi";
-import { chainId, getWorldAddress } from "../common";
-import { Account, Chain, Client, GetContractReturnType, Transport, getContract } from "viem";
-import { useQuery } from "@tanstack/react-query";
-import { useSessionClient } from "@latticexyz/entrykit/internal";
-import { observer } from "@latticexyz/explorer/observer";
-import worldAbi from "contracts/out/IWorld.sol/IWorld.abi.json";
-
-export function useWorldContract():
-  | GetContractReturnType<
-      typeof worldAbi,
-      {
-        public: Client<Transport, Chain>;
-        wallet: Client<Transport, Chain, Account>;
-      }
-    >
-  | undefined {
-  const client = useClient({ chainId });
-  const { data: sessionClient } = useSessionClient();
-
-  const { data: worldContract } = useQuery({
-    queryKey: ["worldContract", client?.uid, sessionClient?.uid],
-    queryFn: () => {
-      if (!client || !sessionClient) {
-        throw new Error("Not connected.");
-      }
-
-      return getContract({
-        abi: worldAbi,
-        address: getWorldAddress(),
-        client: {
-          public: client,
-          wallet: sessionClient.extend(observer()),
-        },
-      });
-    },
-    staleTime: Infinity,
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
-  });
-
-  return worldContract;
-}

package/templates/react/packages/client/src/ui/AsyncButton.tsx

@@ -1,41 +0,0 @@
-import { DetailedHTMLProps, ButtonHTMLAttributes, useState, useRef, useCallback, MouseEventHandler } from "react";
-
-export type AsyncButtonProps = {
-  pending?: boolean;
-};
-
-export type Props = AsyncButtonProps & DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
-
-export const AsyncButton = ({ pending, type, disabled, onClick, ...props }: Props) => {
-  // TODO: move all this logic into a hook so we can wrap other event handlers
-
-  const promiseRef = useRef<Promise<unknown>>();
-  const [promisePending, setPromisePending] = useState<true | undefined>(undefined);
-
-  const asyncOnClick = useCallback<MouseEventHandler<HTMLButtonElement>>(
-    (...args) => {
-      if (!onClick) return;
-      const result = onClick(...args);
-      const promise = Promise.resolve(result);
-      promiseRef.current = promise;
-      setPromisePending(true);
-      promise.finally(() => {
-        if (promiseRef.current === promise) {
-          setPromisePending(undefined);
-        }
-      });
-    },
-    [onClick],
-  );
-
-  return (
-    <button
-      type={type || "button"}
-      aria-busy={pending || promisePending}
-      aria-disabled={disabled}
-      disabled={disabled || pending || promisePending}
-      onClick={onClick ? asyncOnClick : undefined}
-      {...props}
-    />
-  );
-};