From 7c646f1094d0c31b3026b8b4f2fc50072ceb6ade Mon Sep 17 00:00:00 2001
From: b00ste <b00ste.lyx@gmail.com>
Date: Wed, 26 Jun 2024 10:56:48 +0300
Subject: [PATCH] Create page for LSP4 Metadata encoding

---
 components/NavBar/NavBar.tsx    |  9 ++++
 pages/lsp4-metadata-encoder.tsx | 77 +++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 pages/lsp4-metadata-encoder.tsx

diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index 68c52c7..375f585 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -96,6 +96,15 @@ const NavBar: React.FC = () => {
               📖 LSP2 Encoder
             </a>
           </Link>
+          <Link href="/lsp4-metadata-encoder">
+            <a
+              className={`navbar-item ${
+                router.pathname === '/lsp4-metadata-encoder' && 'has-text-link'
+              }`}
+            >
+              📖 LSP4 Metadata Encoder
+            </a>
+          </Link>
         </div>
 
         <div className="navbar-end">
diff --git a/pages/lsp4-metadata-encoder.tsx b/pages/lsp4-metadata-encoder.tsx
new file mode 100644
index 0000000..48f6532
--- /dev/null
+++ b/pages/lsp4-metadata-encoder.tsx
@@ -0,0 +1,77 @@
+import { NextPage } from 'next';
+import { useEffect, useState } from 'react';
+import { keccak256 } from 'web3-utils';
+
+const Lsp4MetadataEncoderPage: NextPage = () => {
+  const [images, setImages] = useState<
+    {
+      name: string;
+      type: string;
+      hash: string;
+      buffer: Buffer;
+      image?: string;
+    }[]
+  >([]);
+
+  useEffect(() => {
+    console.log(images);
+  }, [images]);
+
+  return (
+    <div className="container">
+      <div className="columns">
+        <div className="column">
+          <input className="input mb-2" type="text" placeholder="name" />
+          <textarea
+            className="textarea is-fullwidth"
+            placeholder="description"
+          />
+        </div>
+        <div className="column is-quarter">
+          <div className="file has-name is-right is-fullwidth">
+            <label className="file-label">
+              <input
+                className="file-input"
+                type="file"
+                name="resume"
+                onChange={async (event) => {
+                  if (event.target.files?.length) {
+                    const file = event.target.files[0];
+                    const { name, type } = file;
+                    const arrayBufferFile = await file.arrayBuffer();
+                    const buffer = Buffer.from(arrayBufferFile);
+                    const hash = keccak256(`0x${buffer.toString('hex')}`);
+
+                    let image;
+                    if (type.startsWith('image/')) {
+                      image = `data:${type};base64,${buffer.toString(
+                        'base64',
+                      )}`;
+                    }
+
+                    setImages([...images, { name, type, hash, buffer, image }]);
+                  }
+                }}
+              />
+              <span className="file-cta">
+                <span className="file-icon">
+                  <i className="fas fa-upload"></i>
+                </span>
+                <span className="file-label">Choose a file…</span>
+              </span>
+              <span className="file-name">
+                Screen Shot 2017-07-29 at 15.54.25.png
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {images.map(({ hash, image }) =>
+        image ? <img key={hash} src={image} height={10} /> : <></>,
+      )}
+    </div>
+  );
+};
+
+export default Lsp4MetadataEncoderPage;