Merge pull request #3 from 0xWrapper/testnet

grid to wrapper gallery

next.config.mjs

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        dangerouslyAllowSVG: true,
+        domains: ['wrapper.space','localhost'], // 添加你允许加载图片的域名
+    },
+};
 
-export default nextConfig;
+export default nextConfig;

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",

src/components/element/owner-object.tsx

@@ -9,13 +9,14 @@ import { useDrag } from 'react-dnd';
 const Row = ({ index, style, data }: { index: number, style: any, data: any[] }) => {
     const [{ isDragging }, drag] = useDrag(() => ({
         type: 'object',
-        item: { id: index },
+        item: { id: data[index].data.objectId, type: 'object' },
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
     }));
     const object = data[index].data;
     return (
+        // @ts-ignore
         <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1, ...style }}>
             <GalleryObject
                 id={object.objectId}
@@ -52,13 +53,13 @@ export default function OwnedObjects() {
         // @ts-ignore
         setCursor(nextCursor);
         setLoading(false);
-    }, [wallet.connected, cursor, loading]);
+    }, [wallet.connected, cursor, loading, wallet.account?.address]);
 
     useEffect(() => {
         if (wallet.connected && ownedObjects.length === 0) {
             loadMoreItems();
         }
-    }, [wallet.connected, loadMoreItems]);
+    }, [wallet.connected, loadMoreItems, ownedObjects.length]);
 
     return (
         <List

src/components/element/owner-wrapper.tsx

@@ -0,0 +1,40 @@
+import GalleryWrapper from "../layout/gallery-wrapper";
+import WrapperCreate from "./wrapper-create";
+
+type WrapperCellProps = {
+    items: any[],
+    columnCount: number,
+};
+export const Cell = ({ columnIndex, rowIndex, style, data }: { columnIndex: number, rowIndex: number, style: any, data: WrapperCellProps }) => {
+    const index = rowIndex * data.columnCount + columnIndex;
+    if (index === 0) {
+        return (
+            <div style={style} className="p-2">
+                {/* 将物品放入新Wrapper */}
+                <WrapperCreate
+                    title="Create Wrapper"
+                />
+            </div>
+        );
+    } else {
+        if (!data.items[index - 1]) {
+            return null;
+        }
+        const wrapper = data.items[index - 1].data;
+        return (
+            <div style={style} className="p-2">
+                {/* 将物品放入已存在的Wrapper */}
+                <GalleryWrapper
+                    wrapperProps={
+                        {
+                            id: wrapper.objectId,
+                            alias: wrapper.display.data?.alias,
+                            kind: wrapper.display.data?.kind,
+                            image_url: wrapper.display.data?.image_url,
+                        }
+                    }
+                />
+            </div>
+        );
+    }
+};

src/components/element/wrapper-card.tsx

@@ -12,6 +12,7 @@ export default function WrapperCard({ title, children, onDrop }: { title: string
     }));
 
     return (
+        // @ts-ignore
         <Card ref={drop} className={`w-full bg-white ${isOver ? 'bg-gray-200' : ''}`}>
             <CardHeader>
                 <CardTitle>{title}</CardTitle>

src/components/element/wrapper-create.tsx

@@ -0,0 +1,39 @@
+import { useDrop } from 'react-dnd';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../ui/card';
+import { Button } from '../ui/button';
+import { LogoIcon } from '../layout/logo';
+
+// dnd
+const handleDropNewWrapper = (item: any) => {
+    console.log("Creating new wrapper with:", item);
+    // 添加创建新的wrapper的逻辑
+};
+
+export default function WrapperCreate({
+    title,
+}: {
+    title: string,
+}) {
+    const [{ isOver }, drop] = useDrop(() => ({
+        accept: 'object',
+        drop: (item) => handleDropNewWrapper(item),
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+    }));
+
+    return (
+        // @ts-ignore
+        <Card ref={drop} className={`w-full bg-white ${isOver ? 'bg-gray-200' : ''}`}>
+            <CardHeader className="tracking-wide">
+                <CardTitle >{title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <LogoIcon height={200} width={200} />
+            </CardContent>
+            <CardFooter className="flex justify-center">
+                <Button variant="secondary">Create</Button>
+            </CardFooter>
+        </Card>
+    );
+};

src/components/layout/foot.tsx

@@ -4,12 +4,12 @@ import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 const ServiceContent = () => {
     return (
         <>
-            <h2 className="text-xl font-semibold mb-2">Terms of Service</h2>
+            <h2 className="text-xl font-semibold mb-4">Terms of Service</h2>
             <p className="text-sm">
-                Welcome to Wrapper Protocol's website. By using our website and services, you agree to comply with the following terms and conditions. If you do not agree with these terms, please do not continue to use our website.
+                Welcome to Wrapper Protocol website. By using our website and services, you agree to comply with the following terms and conditions. If you do not agree with these terms, please do not continue to use our website.
             </p>
             <p className="text-sm">
-                1. You agree not to engage in any activity that could harm, disable, overload, or impair the website, or interfere with any other party's use and enjoyment of the website.
+                1. You agree not to engage in any activity that could harm, disable, overload, or impair the website, or interfere with any other party use and enjoyment of the website.
             </p>
             <p className="text-sm">
                 2. You agree not to access or attempt to access our website through any unauthorized means.
@@ -36,7 +36,7 @@ const ServiceContent = () => {
 const PrivacyContent = () => {
     return (
         <>
-            <h2 className="text-xl font-semibold mb-2">Privacy Policy</h2>
+            <h2 className="text-xl font-semibold mb-4">Privacy Policy</h2>
             <p className="text-sm">
                 At Wrapper Protocol, we respect your privacy and are committed to protecting your personal information.
             </p>