PoC: modular contract wizard

apps/dashboard/package.json

@@ -25,8 +25,10 @@
     "@chakra-ui/styled-system": "^2.9.2",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@coinbase/onchainkit": "^0.14.2",
+    "@dnd-kit/core": "^6.1.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
+    "@hello-pangea/dnd": "^16.6.0",
     "@hookform/resolvers": "^3.6.0",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@radix-ui/react-alert-dialog": "^1.1.1",

apps/dashboard/src/app/(dashboard)/contract-wizard/components/draggable.tsx

@@ -0,0 +1,23 @@
+import { useDraggable } from '@dnd-kit/core';
+
+export function Draggable({ children }: { children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id: 'draggable',
+  });
+  const style = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+  } : undefined;
+
+  return (
+    <button
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+    >
+      {children}
+    </button>
+  );
+}
+
+

apps/dashboard/src/app/(dashboard)/contract-wizard/components/droppable.tsx

@@ -0,0 +1,13 @@
+import { useDroppable } from '@dnd-kit/core';
+
+export function Droppable({ children }: { children: React.ReactNode }) {
+  const { isOver, setNodeRef } = useDroppable({
+    id: 'droppable',
+  });
+
+  return (
+    <div ref={setNodeRef}>
+      {children}
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/contract-wizard/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "thirdweb Blockchain Tools",
+  description:
+    "A wysiwyg contract wizard to help you build your own modular smart contracts.",
+};
+
+export default function ContractWizardLayout({
+  children,
+}: { children: React.ReactNode }) {
+  return (
+    <section className="flex flex-col h-full gap-8">
+      <main className="container pb-20 flex-1">
+        {children}
+      </main>
+    </section>
+  );
+}
+