From 995a2dc48850c20561503ca82f31cfa21d25a51d Mon Sep 17 00:00:00 2001
From: Lim Jet <57783762+daoauth@users.noreply.github.com>
Date: Thu, 5 Dec 2024 00:19:27 +0900
Subject: [PATCH] drag and drop

---
 packages/example/builder.yaml                 |  9 --
 .../example/src/components/DragAndDrop.tsx    | 91 +++++++++++++++++++
 packages/example/src/pages/editor.tsx         | 36 +++++---
 3 files changed, 115 insertions(+), 21 deletions(-)
 delete mode 100644 packages/example/builder.yaml
 create mode 100644 packages/example/src/components/DragAndDrop.tsx

diff --git a/packages/example/builder.yaml b/packages/example/builder.yaml
deleted file mode 100644
index c7b350d..0000000
--- a/packages/example/builder.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-# module: site
-# portal: walrus.site
-package: 0x514cf7ce2df33b9e2ca69e75bc9645ef38aca67b6f2852992a34e35e9f907f58
-# general:
-#   rpc_url: https://fullnode.testnet.sui.io:443
-#   wallet: /path/to/.sui/sui_config/client.yaml
-#   walrus_binary: /path/to/walrus
-#   walrus_config: /path/to/devnet_deployment/client_config.yaml
-#   gas_budget: 500000000
diff --git a/packages/example/src/components/DragAndDrop.tsx b/packages/example/src/components/DragAndDrop.tsx
new file mode 100644
index 0000000..45f656d
--- /dev/null
+++ b/packages/example/src/components/DragAndDrop.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+
+export const DragAndDrop = ({ onDrop }: { onDrop: (data: object) => void }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [message, setMessage] = useState('Drop File (*.ptb)');
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const file = event.dataTransfer.files[0];
+
+    if (file) {
+      if (file.name.endsWith('.ptb')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const json = JSON.parse(e.target?.result as string);
+            onDrop(json);
+            setIsVisible(false);
+          } catch (error) {
+            setMessage('Invalid JSON file.');
+          }
+        };
+        reader.readAsText(file);
+      } else {
+        setMessage('Invalid file. Please upload a .ptb file.');
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <div
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            color: 'white',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 9999, // 최상위 레이어
+            fontSize: '24px',
+            textAlign: 'center',
+            userSelect: 'none', // 텍스트 선택 방지
+            transition: 'opacity 0.3s ease',
+          }}
+        >
+          <p>{message}</p>
+          <button
+            onClick={handleCancel}
+            style={{
+              marginTop: '20px',
+              padding: '10px 20px',
+              fontSize: '16px',
+              color: 'white',
+              backgroundColor: 'transparent',
+              border: '2px solid white',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              transition: 'background-color 0.3s',
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.backgroundColor =
+                'rgba(255, 255, 255, 0.2)')
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.backgroundColor = 'transparent')
+            }
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/packages/example/src/pages/editor.tsx b/packages/example/src/pages/editor.tsx
index b81ab2c..5c66283 100644
--- a/packages/example/src/pages/editor.tsx
+++ b/packages/example/src/pages/editor.tsx
@@ -9,10 +9,12 @@ import { Transaction } from '@mysten/sui/transactions';
 import { PTBBuilder } from '@zktx.io/ptb-builder';
 import { enqueueSnackbar } from 'notistack';
 
+import { DragAndDrop } from '../components/DragAndDrop';
 import { NETWORK } from '../network';
 
 export const Editor = () => {
   const account = useCurrentAccount();
+  const [ptb, setPtb] = React.useState<string | undefined>(undefined);
   const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
   const excuteTx = async (transaction: Transaction | undefined) => {
@@ -46,21 +48,31 @@ export const Editor = () => {
     }
   };
 
+  const handleDrop = (ptb: object) => {
+    setPtb(JSON.stringify(ptb));
+  };
+
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       {account ? (
-        <PTBBuilder
-          network={NETWORK}
-          excuteTx={excuteTx}
-          update={(value: string) => {
-            // console.log(value);
-          }}
-          options={{
-            isEditor: true,
-            themeSwitch: true,
-          }}
-          enqueueToast={(message, options) => enqueueSnackbar(message, options)}
-        />
+        <>
+          <DragAndDrop onDrop={handleDrop} />
+          <PTBBuilder
+            network={NETWORK}
+            excuteTx={excuteTx}
+            txbOrPtb={ptb}
+            update={(value: string) => {
+              // console.log(value);
+            }}
+            options={{
+              isEditor: true,
+              themeSwitch: true,
+            }}
+            enqueueToast={(message, options) =>
+              enqueueSnackbar(message, options)
+            }
+          />
+        </>
       ) : (
         <div
           style={{