From 0e158541c6949c5f96239fa19e06d4029fd40ba8 Mon Sep 17 00:00:00 2001
From: algovado <90692255+algovado@users.noreply.github.com>
Date: Thu, 30 May 2024 00:44:21 +0300
Subject: [PATCH] update centering and faq section layout

also use wallet enhancer site instead of pera and allo
---
 src/components/FaqSectionComponent.jsx |  10 +-
 src/components/Footer.jsx              |   2 +-
 src/pages/SimpleBatchMint.jsx          |   2 +-
 src/pages/SimpleMint.jsx               | 381 ++++++++++++-------------
 src/pages/SimpleUpdate.jsx             | 355 ++++++++++++-----------
 src/utils.js                           |  24 +-
 6 files changed, 385 insertions(+), 389 deletions(-)

diff --git a/src/components/FaqSectionComponent.jsx b/src/components/FaqSectionComponent.jsx
index ac7704c..3101ff4 100644
--- a/src/components/FaqSectionComponent.jsx
+++ b/src/components/FaqSectionComponent.jsx
@@ -1,19 +1,19 @@
 import { useState } from "react";
 
 const FAQItem = ({ faq, index, toggleFAQ }) => (
-  <div className="border-b-2 border-gray-200">
+  <div className="border-b-2 py-4 border-gray-200">
     <button
       className="w-full text-left py-4 focus:outline-none"
       onClick={() => toggleFAQ(index)}
     >
-      <h2 className="text-lg font-medium">{faq.question}</h2>
+      <h2 className="text-base font-medium px-4">{faq.question}</h2>
     </button>
     <div
       className={`overflow-hidden transition-all duration-300 ${
         faq.open ? "max-h-40" : "max-h-0"
       }`}
     >
-      <p className="p-4">{faq.answer}</p>
+      <p className="p-4 text-sm">{faq.answer}</p>
     </div>
   </div>
 );
@@ -37,8 +37,8 @@ const FaqSectionComponent = ({faqData}) => {
   };
 
   return (
-    <div className="max-w-2xl mx-auto mt-10">
-      <h1 className="text-3xl font-semibold text-center mb-8">
+    <div className="max-w-xl mx-auto mt-10">
+      <h1 className="text-xl font-semibold text-center">
         Frequently Asked Questions
       </h1>
       {faqs.map((faq, index) => (
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index c852469..7940b55 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -2,7 +2,7 @@ import { Tooltip, Typography } from "@mui/material";
 
 export function Footer() {
   return (
-    <footer className="bg-primary-black text-nude w-full bottom-0 fixed">
+    <footer className="bg-primary-black text-nude w-screen bottom-0 fixed">
       <div className="px-4 flex w-full flex-col items-center justify-center border-t border-blue-gray-50 py-4 gap-y-1 md:flex-row md:justify-between">
         <Typography
           variant="caption"
diff --git a/src/pages/SimpleBatchMint.jsx b/src/pages/SimpleBatchMint.jsx
index 786ea5f..882de8c 100644
--- a/src/pages/SimpleBatchMint.jsx
+++ b/src/pages/SimpleBatchMint.jsx
@@ -810,7 +810,7 @@ export function SimpleBatchMint() {
           </button>
         )}
       </div>
-      <p className="text-sm italic text-slate-200">
+      <p className="text-sm italic text-slate-200 px-4">
         **It is recommended that any Creator Host their own Files using their
         own token. Evil Tools will not be held responsible for anything that
         happens to publicly hosted images.
diff --git a/src/pages/SimpleMint.jsx b/src/pages/SimpleMint.jsx
index 75d3974..b43470b 100644
--- a/src/pages/SimpleMint.jsx
+++ b/src/pages/SimpleMint.jsx
@@ -282,246 +282,241 @@ export function SimpleMint() {
       <p className="text-2xl font-bold mt-1">
         {TOOLS.find((tool) => tool.path === window.location.pathname).label}
       </p>
-      <div className="w-full px-10">
-        <div className="mt-4 md:flex items-center text-start gap-x-4">
-          <div className="flex flex-col">
+      <div className="mt-4 md:flex items-center text-start gap-x-4">
+        <div className="flex flex-col md:mt-0 mt-2">
+          <label className="mb-2 text-sm leading-none text-gray-200">
+            Name*
+          </label>
+          <input
+            type="text"
+            placeholder="Ex: STUPIDHORSE 001"
+            className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
+            maxLength={32}
+            required
+            value={formData.name}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                name: e.target.value,
+              });
+            }}
+          />
+        </div>
+        <div className="flex flex-col md:mt-0 mt-4">
+          <label className="mb-2 text-sm leading-none text-gray-200">
+            Unit name*
+          </label>
+          <input
+            type="text"
+            placeholder="Ex: HORSE001"
+            className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
+            maxLength={8}
+            required
+            value={formData.unitName}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                unitName: e.target.value,
+              });
+            }}
+          />
+        </div>
+      </div>
+      <div className="mt-4 md:flex items-center text-start gap-x-4">
+        <div className="flex flex-col">
+          <label className="mb-2 text-sm leading-none text-gray-200">
+            Total supply*
+          </label>
+          <input
+            className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 placeholder:text-sm px-3 py-2 border rounded border-gray-200"
+            type="number"
+            max={18446744073709551615n}
+            min={1}
+            required
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                totalSupply: e.target.value,
+              });
+            }}
+            placeholder="Recommended: 1 for NFTs"
+            value={formData.totalSupply}
+          />
+        </div>
+        <div className="flex flex-col md:mt-0 mt-4">
+          <label className="mb-2 text-sm leading-none text-gray-200">
+            Decimals*
+          </label>
+          <input
+            type="number"
+            className="w-64 bg-gray-300 text-sm font-medium text-center leading-none placeholder:text-sm text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
+            max={19}
+            min={0}
+            required
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                decimals: e.target.value,
+              });
+            }}
+            value={formData.decimals}
+            placeholder="Recommended: 0 for NFTs"
+          />
+        </div>
+      </div>
+      <div className="mt-4 md:flex items-center text-start gap-x-4">
+        {formData.format !== "Token" ? (
+          <div className="flex flex-col md:mt-0 mt-4">
             <label className="mb-2 text-sm leading-none text-gray-200">
-              Name*
+              Select Image*
             </label>
             <input
-              type="text"
-              placeholder="Ex: STUPIDHORSE 001"
-              className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
-              maxLength={32}
+              className="block w-64 text-sm border border-gray-200 rounded cursor-pointer bg-gray-300  focus:outline-none  text-black font-medium"
+              id="select_image"
+              type="file"
+              accept="image/*,video/*"
+              multiple={false}
               required
-              value={formData.name}
               onChange={(e) => {
                 setFormData({
                   ...formData,
-                  name: e.target.value,
+                  image: e.target.files[0],
                 });
               }}
             />
           </div>
+        ) : (
           <div className="flex flex-col md:mt-0 mt-4">
             <label className="mb-2 text-sm leading-none text-gray-200">
-              Unit name*
+              URL Field
             </label>
             <input
+              className="w-64 bg-gray-300 text-sm font-medium text-center leading-none placeholder:text-sm text-black placeholder:text-black/30 px-3 py-1 border rounded border-gray-200"
+              id="select_image"
               type="text"
-              placeholder="Ex: HORSE001"
-              className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
-              maxLength={8}
-              required
-              value={formData.unitName}
-              onChange={(e) => {
-                setFormData({
-                  ...formData,
-                  unitName: e.target.value,
-                });
-              }}
-            />
-          </div>
-        </div>
-        <div className="mt-4 md:flex items-center text-start gap-x-4">
-          <div className="flex flex-col">
-            <label className="mb-2 text-sm leading-none text-gray-200">
-              Total supply*
-            </label>
-            <input
-              className="w-64 bg-gray-300 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 placeholder:text-sm px-3 py-2 border rounded border-gray-200"
-              type="number"
-              max={18446744073709551615n}
-              min={1}
-              required
+              value={formData.urlField}
               onChange={(e) => {
                 setFormData({
                   ...formData,
-                  totalSupply: e.target.value,
+                  urlField: e.target.value,
                 });
               }}
-              placeholder="Recommended: 1 for NFTs"
-              value={formData.totalSupply}
             />
           </div>
-          <div className="flex flex-col md:mt-0 mt-4">
-            <label className="mb-2 text-sm leading-none text-gray-200">
-              Decimals*
-            </label>
-            <input
-              type="number"
-              className="w-64 bg-gray-300 text-sm font-medium text-center leading-none placeholder:text-sm text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-200"
-              max={19}
-              min={0}
+        )}
+        <div className="flex flex-col md:mt-0 mt-4">
+          <label className="mb-2 text-sm leading-none text-gray-200">
+            Asset format*
+          </label>
+          <div className="inline-flex items-center space-x-2">
+            <select
+              className="bg-gray-300 rounded border-gray-300 font-medium text-center text-black transition px-2 py-1 w-64"
               required
               onChange={(e) => {
                 setFormData({
                   ...formData,
-                  decimals: e.target.value,
+                  format: e.target.value,
                 });
               }}
-              value={formData.decimals}
-              placeholder="Recommended: 0 for NFTs"
-            />
-          </div>
-        </div>
-        <div className="mt-4 md:flex items-center text-start gap-x-4">
-          {formData.format !== "Token" ? (
-            <div className="flex flex-col md:mt-0 mt-4">
-              <label className="mb-2 text-sm leading-none text-gray-200">
-                Select Image*
-              </label>
-              <input
-                className="block w-64 text-sm border border-gray-200 rounded cursor-pointer bg-gray-300  focus:outline-none  text-black font-medium"
-                id="select_image"
-                type="file"
-                accept="image/*,video/*"
-                multiple={false}
-                required
-                onChange={(e) => {
-                  setFormData({
-                    ...formData,
-                    image: e.target.files[0],
-                  });
-                }}
-              />
-            </div>
-          ) : (
-            <div className="flex flex-col md:mt-0 mt-4">
-              <label className="mb-2 text-sm leading-none text-gray-200">
-                URL Field
-              </label>
-              <input
-                className="w-64 bg-gray-300 text-sm font-medium text-center leading-none placeholder:text-sm text-black placeholder:text-black/30 px-3 py-1 border rounded border-gray-200"
-                id="select_image"
-                type="text"
-                value={formData.urlField}
-                onChange={(e) => {
-                  setFormData({
-                    ...formData,
-                    urlField: e.target.value,
-                  });
-                }}
-              />
-            </div>
-          )}
-          <div className="flex flex-col md:mt-0 mt-4">
-            <label className="mb-2 text-sm leading-none text-gray-200">
-              Asset format*
-            </label>
-            <div className="inline-flex items-center space-x-2">
-              <select
-                className="bg-gray-300 rounded border-gray-300 font-medium text-center text-black transition px-2 py-1 w-64"
-                required
-                onChange={(e) => {
-                  setFormData({
-                    ...formData,
-                    format: e.target.value,
-                  });
-                }}
-                value={formData.format}
-              >
-                <option value="ARC3">ARC3 - Unchangeable</option>
-                <option value="ARC19">
-                  ARC19 - Changeable Images and Data
-                </option>
-                <option value="ARC69">ARC69- Changeable Data</option>
-                <option value="Token">Token</option>
-              </select>
-            </div>
+              value={formData.format}
+            >
+              <option value="ARC3">ARC3 - Unchangeable</option>
+              <option value="ARC19">ARC19 - Changeable Images and Data</option>
+              <option value="ARC69">ARC69- Changeable Data</option>
+              <option value="Token">Token</option>
+            </select>
           </div>
         </div>
-        <div className="mt-4 flex flex-row items-center text-start justify-center gap-x-4">
-          <label className="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
-              className="sr-only peer"
-              id="freeze"
-              onChange={(e) => {
-                setFormData({
-                  ...formData,
-                  freeze: e.target.checked,
-                });
-              }}
-              checked={formData.freeze}
-            />
-            <div className="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4  rounded-full peer  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600"></div>
-            <span className="ml-3 text-sm font-medium text-gray-300">
-              Freeze
-            </span>
-          </label>
-          <label className="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
-              className="sr-only peer"
-              id="clawback"
-              onChange={(e) => {
-                setFormData({
-                  ...formData,
-                  clawback: e.target.checked,
-                });
-              }}
-              checked={formData.clawback}
-            />
-            <div className="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4  rounded-full peer  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600"></div>
-            <span className="ml-3 text-sm font-medium text-gray-300">
-              Clawback
-            </span>
-          </label>
-        </div>
-        <label className="relative inline-flex items-center cursor-pointer mt-1">
+      </div>
+      <div className="mt-4 flex flex-row items-center text-start justify-center gap-x-4">
+        <label className="relative inline-flex items-center cursor-pointer">
+          <input
+            type="checkbox"
+            className="sr-only peer"
+            id="freeze"
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                freeze: e.target.checked,
+              });
+            }}
+            checked={formData.freeze}
+          />
+          <div className="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4  rounded-full peer  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600"></div>
+          <span className="ml-3 text-sm font-medium text-gray-300">Freeze</span>
+        </label>
+        <label className="relative inline-flex items-center cursor-pointer">
           <input
             type="checkbox"
             className="sr-only peer"
-            id="defaultFrozen"
+            id="clawback"
             onChange={(e) => {
               setFormData({
                 ...formData,
-                defaultFrozen: e.target.checked,
+                clawback: e.target.checked,
               });
             }}
-            checked={formData.defaultFrozen}
+            checked={formData.clawback}
           />
           <div className="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4  rounded-full peer  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600"></div>
-          <span className="ml-2 text-sm font-medium text-gray-300">
-            Default Frozen
+          <span className="ml-3 text-sm font-medium text-gray-300">
+            Clawback
           </span>
         </label>
-        <p className="focus:outline-nonetext-sm font-light leading-tight text-gray-200 mt-2">
-          Property Metadata
-          <br />
-          (optional)
-        </p>
-        <div className="mt-4 md:flex flex-col items-center text-start justify-center">
-          {formData.metadata.map((metadata) => {
-            return TraitMetadataInputField(metadata.id);
-          })}
-        </div>
-        <button
-          className="rounded-md bg-primary-green hover:bg-green-600 transition text-black px-4 py-1"
-          onClick={() => {
-            let lastId;
-            try {
-              lastId = formData.metadata[formData.metadata.length - 1].id;
-            } catch (error) {
-              lastId = 0;
-            }
+      </div>
+      <label className="relative inline-flex items-center cursor-pointer mt-1">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          id="defaultFrozen"
+          onChange={(e) => {
             setFormData({
               ...formData,
-              metadata: [
-                ...formData.metadata,
-                {
-                  id: lastId + 1,
-                  category: "",
-                  name: "",
-                },
-              ],
+              defaultFrozen: e.target.checked,
             });
           }}
-        >
-          +
-        </button>
+          checked={formData.defaultFrozen}
+        />
+        <div className="w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4  rounded-full peer  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all border-gray-600 peer-checked:bg-blue-600"></div>
+        <span className="ml-2 text-sm font-medium text-gray-300">
+          Default Frozen
+        </span>
+      </label>
+      <p className="focus:outline-nonetext-sm font-light leading-tight text-gray-200 mt-2">
+        Property Metadata
+        <br />
+        (optional)
+      </p>
+      <div className="mt-4 md:flex flex-col items-center text-start justify-center">
+        {formData.metadata.map((metadata) => {
+          return TraitMetadataInputField(metadata.id);
+        })}
       </div>
+      <button
+        className="rounded-md bg-primary-green hover:bg-green-600 transition text-black px-4 py-1"
+        onClick={() => {
+          let lastId;
+          try {
+            lastId = formData.metadata[formData.metadata.length - 1].id;
+          } catch (error) {
+            lastId = 0;
+          }
+          setFormData({
+            ...formData,
+            metadata: [
+              ...formData.metadata,
+              {
+                id: lastId + 1,
+                category: "",
+                name: "",
+              },
+            ],
+          });
+        }}
+      >
+        +
+      </button>
+
       <div className="flex flex-col mt-4">
         <div className="flex flex-row items-center justify-center gap-x-2">
           <input
@@ -635,7 +630,7 @@ export function SimpleMint() {
           </button>
         )}
       </div>
-      <p className="text-sm italic text-slate-200">
+      <p className="text-sm italic text-slate-200 px-4">
         **It is recommended that any Creator Host their own Files using their
         own token. Evil Tools will not be held responsible for anything that
         happens to publicly hosted images.
diff --git a/src/pages/SimpleUpdate.jsx b/src/pages/SimpleUpdate.jsx
index 8536506..bfb9b1a 100644
--- a/src/pages/SimpleUpdate.jsx
+++ b/src/pages/SimpleUpdate.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
- 
+
 import algosdk from "algosdk";
 import { toast } from "react-toastify";
 import axios from "axios";
@@ -400,197 +400,196 @@ export function SimpleUpdate() {
       </p>
       {assetID !== "" && formData.name ? (
         <>
-          <div className="w-full px-10">
-            <div className="flex flex-row justify-between">
-              <button
-                className="rounded bg-secondary-green hover:bg-secondary-green/80  text-white px-4 py-1 mt-2"
-                onClick={() => {
-                  setAssetID("");
-                  setFormData({
-                    name: "",
-                    unitName: "",
-                    totalSupply: 1,
-                    decimals: 0,
-                    image: null,
-                    format: "",
-                    freeze: false,
-                    clawback: false,
-                    image_url: "",
-                    image_mime_type: "",
-                    metadata: [],
-                  });
-                  setProcessStep(0);
-                  setTransaction(null);
-                }}
+          <div className="flex flex-col md:flex-row justify-between">
+            <button
+              className="rounded bg-secondary-green hover:bg-secondary-green/80  text-white px-4 py-1 mt-2"
+              onClick={() => {
+                setAssetID("");
+                setFormData({
+                  name: "",
+                  unitName: "",
+                  totalSupply: 1,
+                  decimals: 0,
+                  image: null,
+                  format: "",
+                  freeze: false,
+                  clawback: false,
+                  image_url: "",
+                  image_mime_type: "",
+                  metadata: [],
+                });
+                setProcessStep(0);
+                setTransaction(null);
+              }}
+            >
+              Back
+            </button>
+            <div className="focus:outline-nonetext-sm font-light leading-tight text-slate-200 mt-4 md:ml-2">
+              Asset:{" "}
+              <a
+                className="font-medium text-slate-300 underline hover:text-slate-400 transition"
+                href={getAssetPreviewURL(assetID)}
+                target="_blank"
+                rel="noreferrer"
               >
-                Back
-              </button>
-              <p className="focus:outline-nonetext-sm font-light leading-tight text-slate-200 mt-4">
-                Asset:{" "}
-                <a
-                  className="font-medium text-slate-300 underline hover:text-slate-400 transition"
-                  href={getAssetPreviewURL(assetID)}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {assetID}
-                </a>
-              </p>
+                {assetID}
+              </a>
             </div>
-            <div className="mt-4 md:flex items-center text-start gap-x-4">
-              <div className="flex flex-col">
-                <label className="mb-2 text-sm leading-none text-gray-200">
-                  Name
-                </label>
-                <input
-                  className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
-                  value={formData.name}
-                  disabled
-                />
-              </div>
-              <div className="flex flex-col md:mt-0 mt-4">
-                <label className="mb-2 text-sm leading-none text-gray-200">
-                  Unit name
-                </label>
-                <input
-                  className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
-                  value={formData.unitName}
-                  disabled
-                />
-              </div>
+          </div>
+          <div className="mt-4 md:flex items-center text-start gap-x-4">
+            <div className="flex flex-col">
+              <label className="mb-2 text-sm leading-none text-gray-200">
+                Name
+              </label>
+              <input
+                className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
+                value={formData.name}
+                disabled
+              />
+            </div>
+            <div className="flex flex-col md:mt-0 mt-4">
+              <label className="mb-2 text-sm leading-none text-gray-200">
+                Unit name
+              </label>
+              <input
+                className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
+                value={formData.unitName}
+                disabled
+              />
+            </div>
+          </div>
+          <div className="mt-4 md:flex items-center text-start gap-x-4">
+            <div className="flex flex-col">
+              <label className="mb-2 text-sm leading-none text-gray-200">
+                Total supply
+              </label>
+              <input
+                className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
+                value={formData.totalSupply}
+                disabled
+              />
             </div>
-            <div className="mt-4 md:flex items-center text-start gap-x-4">
-              <div className="flex flex-col">
+            <div className="flex flex-col md:mt-0 mt-4">
+              <label className="mb-2 text-sm leading-none text-gray-200">
+                Decimals
+              </label>
+              <input
+                className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
+                value={formData.decimals}
+                disabled
+              />
+            </div>
+          </div>
+          <div className="mt-4 md:flex items-center text-start gap-x-4">
+            {formData.format === "ARC19" && (
+              <div className="flex flex-col md:mt-0 mt-4">
                 <label className="mb-2 text-sm leading-none text-gray-200">
-                  Total supply
+                  New Image <span className="text-xs italic">(optional)</span>
                 </label>
                 <input
-                  className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
-                  value={formData.totalSupply}
-                  disabled
+                  className="block w-64 text-sm border border-gray-200 rounded cursor-pointer bg-gray-300  focus:outline-none  text-black font-medium"
+                  id="select_image"
+                  type="file"
+                  accept="image/*,video/*"
+                  multiple={false}
+                  required
+                  onChange={(e) => {
+                    setFormData({
+                      ...formData,
+                      image: e.target.files[0],
+                    });
+                  }}
                 />
               </div>
-              <div className="flex flex-col md:mt-0 mt-4">
-                <label className="mb-2 text-sm leading-none text-gray-200">
-                  Decimals
-                </label>
+            )}
+            <div className="flex flex-col md:mt-0 mt-4 mx-auto">
+              <label className="mb-2 text-sm leading-none text-gray-200">
+                ARC format
+              </label>
+              <div className="inline-flex items-center space-x-2">
                 <input
                   className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
-                  value={formData.decimals}
+                  value={formData.format}
                   disabled
                 />
               </div>
             </div>
-            <div className="mt-4 md:flex items-center text-start gap-x-4">
-              {formData.format === "ARC19" && (
-                <div className="flex flex-col md:mt-0 mt-4">
-                  <label className="mb-2 text-sm leading-none text-gray-200">
-                    New Image <span className="text-xs italic">(optional)</span>
-                  </label>
-                  <input
-                    className="block w-64 text-sm border border-gray-200 rounded cursor-pointer bg-gray-300  focus:outline-none  text-black font-medium"
-                    id="select_image"
-                    type="file"
-                    accept="image/*,video/*"
-                    multiple={false}
-                    required
-                    onChange={(e) => {
-                      setFormData({
-                        ...formData,
-                        image: e.target.files[0],
-                      });
-                    }}
-                  />
-                </div>
-              )}
-              <div className="flex flex-col md:mt-0 mt-4 mx-auto">
-                <label className="mb-2 text-sm leading-none text-gray-200">
-                  ARC format
-                </label>
-                <div className="inline-flex items-center space-x-2">
-                  <input
-                    className="w-64 bg-gray-400 text-sm font-medium text-center leading-none text-black placeholder:text-black/30 px-3 py-2 border rounded border-gray-400 disabled:cursor-not-allowed"
-                    value={formData.format}
-                    disabled
-                  />
-                </div>
-              </div>
-            </div>
-            {formData.image_url && (
-              <img
-                src={
-                  formData.image_url.startsWith("ipfs://")
-                    ? `${IPFS_ENDPOINT}${formData.image_url.replace(
-                        "ipfs://",
-                        ""
-                      )}`
-                    : formData.image_url
-                }
-                className="w-60 mx-auto mt-4 object-contain rounded-md"
-                alt="asset"
-                id="asset_image"
-                onError={(e) => {
-                  e.target.onerror = null;
-                  window.document.getElementById("asset_image").remove();
-                }}
-              />
-            )}
-            {formData.animation_url && (
-              <video
-                src={
-                  formData.animation_url.startsWith("ipfs://")
-                    ? `${IPFS_ENDPOINT}${formData.animation_url.replace(
-                        "ipfs://",
-                        ""
-                      )}`
-                    : formData.animation_url
-                }
-                className="w-60 mx-auto mt-4 object-contain rounded-md"
-                alt="asset_video"
-                id="asset_video"
-                onError={(e) => {
-                  e.target.onerror = null;
-                  window.document.getElementById("asset_video").remove();
-                }}
-                controls
-                autoPlay
-              />
-            )}
-            <p className="focus:outline-nonetext-sm font-light leading-tight text-gray-200 mt-4">
-              Property Metadata
-            </p>
-            <div className="mt-4 md:flex flex-col items-center text-start justify-center">
-              {formData.metadata.map((metadata) => {
-                return TraitMetadataInputField(metadata.id);
-              })}
-            </div>
-            {formData.format !== "ARC3" && (
-              <button
-                className="rounded-md bg-primary-green hover:bg-green-600 transition text-black px-4 py-1"
-                onClick={() => {
-                  let lastId;
-                  try {
-                    lastId = formData.metadata[formData.metadata.length - 1].id;
-                  } catch (error) {
-                    lastId = 0;
-                  }
-                  setFormData({
-                    ...formData,
-                    metadata: [
-                      ...formData.metadata,
-                      {
-                        id: lastId + 1,
-                        category: "",
-                        name: "",
-                      },
-                    ],
-                  });
-                }}
-              >
-                +
-              </button>
-            )}
           </div>
+          {formData.image_url && (
+            <img
+              src={
+                formData.image_url.startsWith("ipfs://")
+                  ? `${IPFS_ENDPOINT}${formData.image_url.replace(
+                      "ipfs://",
+                      ""
+                    )}`
+                  : formData.image_url
+              }
+              className="w-60 mx-auto mt-4 object-contain rounded-md"
+              alt="asset"
+              id="asset_image"
+              onError={(e) => {
+                e.target.onerror = null;
+                window.document.getElementById("asset_image").remove();
+              }}
+            />
+          )}
+          {formData.animation_url && (
+            <video
+              src={
+                formData.animation_url.startsWith("ipfs://")
+                  ? `${IPFS_ENDPOINT}${formData.animation_url.replace(
+                      "ipfs://",
+                      ""
+                    )}`
+                  : formData.animation_url
+              }
+              className="w-60 mx-auto mt-4 object-contain rounded-md"
+              alt="asset_video"
+              id="asset_video"
+              onError={(e) => {
+                e.target.onerror = null;
+                window.document.getElementById("asset_video").remove();
+              }}
+              controls
+              autoPlay
+            />
+          )}
+          <p className="focus:outline-nonetext-sm font-light leading-tight text-gray-200 mt-4">
+            Property Metadata
+          </p>
+          <div className="mt-4 md:flex flex-col items-center text-start justify-center">
+            {formData.metadata.map((metadata) => {
+              return TraitMetadataInputField(metadata.id);
+            })}
+          </div>
+          {formData.format !== "ARC3" && (
+            <button
+              className="rounded-md bg-primary-green hover:bg-green-600 transition text-black px-4 py-1"
+              onClick={() => {
+                let lastId;
+                try {
+                  lastId = formData.metadata[formData.metadata.length - 1].id;
+                } catch (error) {
+                  lastId = 0;
+                }
+                setFormData({
+                  ...formData,
+                  metadata: [
+                    ...formData.metadata,
+                    {
+                      id: lastId + 1,
+                      category: "",
+                      name: "",
+                    },
+                  ],
+                });
+              }}
+            >
+              +
+            </button>
+          )}
+
           {formData.format === "ARC3" ? (
             <p className="text-lg text-red-400 font-roboto">
               ARC3 assets can't be updated
@@ -729,7 +728,7 @@ export function SimpleUpdate() {
           </button>
         </div>
       )}
-      <p className="text-sm italic text-slate-200">
+      <p className="text-sm italic text-slate-200 py-4">
         **It is recommended that any Creator Host their own Files using their
         own token. Evil Tools will not be held responsible for anything that
         happens to publicly hosted images.
diff --git a/src/utils.js b/src/utils.js
index 5924ceb..c88cd04 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -79,20 +79,22 @@ export function getNfdomainAPIURL() {
 }
 
 export function getAssetPreviewURL(assetID) {
-  const networkType = localStorage.getItem("networkType");
-  if (networkType === "mainnet") {
-    return "https://explorer.perawallet.app/asset/" + assetID;
-  } else {
-    return "https://testnet.explorer.perawallet.app/asset/" + assetID;
-  }
+  return "https://we.thurstober.com/asset/" + assetID;
+  // const networkType = localStorage.getItem("networkType");
+  // if (networkType === "mainnet") {
+  //   return "https://explorer.perawallet.app/asset/" + assetID;
+  // } else {
+  //   return "https://testnet.explorer.perawallet.app/asset/" + assetID;
+  // }
 }
 
 export function getTokenPreviewURL(assetID) {
-  const networkType = localStorage.getItem("networkType");
-  if (networkType === "mainnet") {
-    return "https://allo.info/asset/" + assetID;
-  }
-  return "https://testnet.explorer.perawallet.app/asset/" + assetID;
+  return "https://we.thurstober.com/asset/" + assetID;
+  // const networkType = localStorage.getItem("networkType");
+  // if (networkType === "mainnet") {
+  //   return "https://allo.info/asset/" + assetID;
+  // }
+  // return "https://testnet.explorer.perawallet.app/asset/" + assetID;
 }
 
 export async function signGroupTransactions(