From 09a05f97952f5f84770f4296ca3174744114afe4 Mon Sep 17 00:00:00 2001
From: SeanM322 <sean@rair.tech>
Date: Mon, 13 May 2024 14:48:54 +0300
Subject: [PATCH] Add hover effect for admin links

---
 rair-front/src/App.tsx                        |   3 +-
 .../Header/AdminPanel/AdminPanel.tsx          |  61 ++---
 .../adminViews/ImportAndTransfer.tsx          |  12 +
 .../adminViews/ImportExternalContracts.tsx    |   2 +-
 .../components/adminViews/transferTokens.tsx  |   1 +
 .../video/videoUpload/videoUpload.tsx         | 240 ------------------
 6 files changed, 41 insertions(+), 278 deletions(-)
 create mode 100644 rair-front/src/components/adminViews/ImportAndTransfer.tsx

diff --git a/rair-front/src/App.tsx b/rair-front/src/App.tsx
index f65e16be6..221fbd20d 100644
--- a/rair-front/src/App.tsx
+++ b/rair-front/src/App.tsx
@@ -32,6 +32,7 @@ import ListCollections from './components/creatorStudio/ListCollections';
 import WorkflowSteps from './components/creatorStudio/workflowSteps';
 import DemoMediaUpload from './components/DemoMediaUpload/DemoMediaUpload';
 import Footer from './components/Footer/Footer';
+import ImportAndTransfer from './components/adminViews/ImportAndTransfer';
 import WelcomeHeader from './components/FrontPage/WelcomeHeader';
 import MainHeader from './components/Header/MainHeader';
 import IframePage from './components/iframePage/IframePage';
@@ -568,7 +569,7 @@ function App() {
                   // Token transfers
                   {
                     path: '/admin/transferNFTs',
-                    content: TransferTokens,
+                    content: ImportAndTransfer,
                     constraint: loggedIn && !creatorViewsDisabled
                   },
                   // Resale offers page
diff --git a/rair-front/src/components/Header/AdminPanel/AdminPanel.tsx b/rair-front/src/components/Header/AdminPanel/AdminPanel.tsx
index 638ec5f7e..9d596ec39 100644
--- a/rair-front/src/components/Header/AdminPanel/AdminPanel.tsx
+++ b/rair-front/src/components/Header/AdminPanel/AdminPanel.tsx
@@ -6,6 +6,7 @@ import { RootState } from '../../../ducks';
 import { ColorStoreType } from '../../../ducks/colors/colorStore.types';
 import { ContractsInitialType } from '../../../ducks/contracts/contracts.types';
 import { TUsersInitialState } from '../../../ducks/users/users.types';
+import { TooltipBox } from '../../common/Tooltip/TooltipBox';
 
 const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
   const { minterInstance, diamondMarketplaceInstance, factoryInstance } =
@@ -32,60 +33,48 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
             backgroundColor: primaryColor
           }}
           className="container-admin-panel">
-          {adminPanel &&
+          {
+          adminPanel &&
             adminRights === true &&
             !creatorViewsDisabled &&
             [
               {
-                name: <i className="fas fa-photo-video" />,
-                route: '/all',
-                disabled: !loggedIn
-              },
-              {
-                name: <i className="fa fa-shopping-cart" aria-hidden="true" />,
-                route: '/resale-offers',
-                disabled: !loggedIn
-              },
-              {
-                name: <i className="fa fa-shopping-cart" aria-hidden="true" />,
-                route: '/on-sale',
-                disabled: !loggedIn
-              },
-              {
-                name: <i className="fa fa-user-secret" aria-hidden="true" />,
+                name: <TooltipBox position={'top'} title="Server Settings"> <div>
+                  <i className="fa fa-cog" aria-hidden="true" /></div></TooltipBox>,
                 route: '/admin/fileUpload',
                 disabled: !loggedIn
               },
+              // {
+              //   name: <TooltipBox position={'top'} title="Imprort / Export"><div><i className="fas fa-exchange"></i></div></TooltipBox>,
+              //   route: '/importExternalContracts',
+              //   disabled: !loggedIn
+              // },
               {
-                name: <i className="fas fa-city" />,
-                route: '/factory',
+                name:  <TooltipBox position={'top'} title="Import / Export / Transfer"><div><i className="fas fa-city" /></div></TooltipBox>,
+                route: '/admin/transferNFTs',
                 disabled: factoryInstance === undefined
               },
               {
-                name: <i className="fas fa-shopping-basket" />,
-                route: '/minter',
-                disabled: minterInstance === undefined
+                name:  <TooltipBox position={'top'} title="Streaming">
+                <div style={{width: "70px"}}><i className="fas fa-film" /></div>
+              </TooltipBox>,
+                route: '/user/videos',
+                disabled: !loggedIn
               },
               {
-                name: <i className="fas fa-gem" />,
+                name: <TooltipBox position={'top'} title="Old Market (diamond)">
+                <div style={{width: "70px"}}><i className="fas fa-gem" /></div>
+              </TooltipBox>,
                 route: '/diamondMinter',
                 disabled: diamondMarketplaceInstance === undefined
               },
               {
-                name: <i className="fas fa-exchange" />,
-                route: '/admin/transferNFTs',
-                disabled: !loggedIn
-              },
-              {
-                name: <i className="fas fa-file-import" />,
-                route: '/importExternalContracts',
+                name: <TooltipBox position={'top'} title="Old Market (classic)">
+                  <div style={{width: "70px"}}><i className="fa fa-shopping-cart" aria-hidden="true" /></div>
+                </TooltipBox>,
+                route: '/on-sale',
                 disabled: !loggedIn
               },
-              {
-                name: <i className="fas fa-film" />,
-                route: '/user/videos',
-                disabled: !loggedIn
-              }
             ].map((item, index) => {
               if (!item.disabled) {
                 return (
@@ -117,4 +106,4 @@ const AdminPanel = ({ creatorViewsDisabled, adminPanel, setAdminPanel }) => {
   );
 };
 
-export default AdminPanel;
+export default AdminPanel;
\ No newline at end of file
diff --git a/rair-front/src/components/adminViews/ImportAndTransfer.tsx b/rair-front/src/components/adminViews/ImportAndTransfer.tsx
new file mode 100644
index 000000000..d7995e005
--- /dev/null
+++ b/rair-front/src/components/adminViews/ImportAndTransfer.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import ImportExternalContract from './ImportExternalContracts'
+import TransferTokens from './transferTokens'
+const ImportAndTransfer = () => {
+  return (
+    <div>
+        <TransferTokens />
+        <ImportExternalContract />
+    </div>
+  )
+}
+export default ImportAndTransfer
\ No newline at end of file
diff --git a/rair-front/src/components/adminViews/ImportExternalContracts.tsx b/rair-front/src/components/adminViews/ImportExternalContracts.tsx
index 1ebafa588..c7b77546e 100644
--- a/rair-front/src/components/adminViews/ImportExternalContracts.tsx
+++ b/rair-front/src/components/adminViews/ImportExternalContracts.tsx
@@ -233,7 +233,7 @@ const ImportExternalContract = () => {
       <br />
       <hr />
       <div className="row mb-5">
-        <div className="text-start col-10 h4">User data</div>
+        <div className="text-start col-10 h4">MANAGE USER</div>
         <button
           onClick={async () => {
             axios
diff --git a/rair-front/src/components/adminViews/transferTokens.tsx b/rair-front/src/components/adminViews/transferTokens.tsx
index 66f83d0a4..9e9dba1b8 100644
--- a/rair-front/src/components/adminViews/transferTokens.tsx
+++ b/rair-front/src/components/adminViews/transferTokens.tsx
@@ -215,6 +215,7 @@ const TransferTokens = () => {
     <div className="w-100 row px-5">
       <div className="col-12">
         <BlockChainSwitcher />
+        <div className="text-start col-10 h4">TRANSFER NFTs</div>
       </div>
       <div className="col-12">
         <button
diff --git a/rair-front/src/components/video/videoUpload/videoUpload.tsx b/rair-front/src/components/video/videoUpload/videoUpload.tsx
index 7f83bd511..26ef658d4 100644
--- a/rair-front/src/components/video/videoUpload/videoUpload.tsx
+++ b/rair-front/src/components/video/videoUpload/videoUpload.tsx
@@ -294,246 +294,6 @@ const FileUpload = ({ /*address,*/ primaryColor, textColor }) => {
   return (
     <>
       <BlockChainSwitcher />
-      <h1> Add Media </h1>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}
-        className="text-center mx-auto col-12">
-        <div className="col-8 py-1">
-          <InputField
-            customClass="form-control input-select-custom-style"
-            customCSS={reusableStyle}
-            label="Title"
-            placeholder="Please input a title"
-            getter={title}
-            setter={setTitle}
-          />
-        </div>
-        <div className="col-8 py-1">
-          <InputField
-            label="Description"
-            customClass="form-control input-select-custom-style"
-            customCSS={reusableStyle}
-            placeholder="Please input a description"
-            getter={description}
-            setter={setDescription}
-          />
-        </div>
-        <div className="col-8 py-1">
-          <InputSelect
-            customClass="form-control input-select-custom-style"
-            customCSS={reusableStyle}
-            label="Category"
-            getter={category}
-            setter={setCategory}
-            placeholder="Choose a category"
-            options={categoryArray}
-          />
-        </div>
-        <div className="col-8 py-1">
-          <InputSelect
-            customClass="form-control input-select-custom-style"
-            customCSS={reusableStyle}
-            label="Storage"
-            getter={storage}
-            setter={setStorage}
-            placeholder="Select a storage method"
-            options={[
-              { label: 'Google Cloud', value: 'gcp' },
-              { label: 'IPFS', value: 'ipfs' }
-            ]}
-          />
-        </div>
-        <div className="col-8 py-1">
-          <InputSelect
-            customClass="form-control input-select-custom-style"
-            customCSS={reusableStyle}
-            label="Contract"
-            getter={contract}
-            setter={(e) => {
-              setNetworkId(fullContractData[e].blockchain);
-              setContract(e);
-              setProduct('null');
-              setProductOptions([]);
-              setOffer('null');
-              setOffersOptions([]);
-            }}
-            placeholder="Select a Contract"
-            options={contractOptions}
-          />
-        </div>
-        {productOptions?.length > 0 ? (
-          <div className="col-8 py-1">
-            <InputSelect
-              customClass="form-control input-select-custom-style"
-              customCSS={reusableStyle}
-              label="Product"
-              getter={product}
-              setter={(e) => {
-                setProduct(e);
-                setOffer('null');
-                setOffersOptions([]);
-                setSelects([]);
-              }}
-              placeholder="Choose a product"
-              options={productOptions}
-            />
-          </div>
-        ) : (
-          <>
-            No products available
-            <br />
-          </>
-        )}
-        <div className="col-8 py-1">
-          {offersOptions?.length
-            ? Object.keys(selectedOffers)?.map((key) => {
-                return (
-                  <InputSelect
-                    customClass="form-control input-select-custom-style"
-                    customCSS={reusableStyle}
-                    label={key === '0' ? 'Offers' : ''}
-                    getter={selectedOffers[key]}
-                    setter={(value) => handleOffer(key, value)}
-                    placeholder="Select an offer"
-                    options={offersOptions}
-                    key={Math.random() * 1_000_000}
-                  />
-                );
-              })
-            : 'No offers available'}
-          <button
-            disabled={selectedOffers?.length >= offersOptions?.length}
-            style={reusableStyle}
-            className="addButton"
-            onClick={createSelects}>
-            <i className="fas fa-plus" />
-          </button>
-        </div>
-        <div className="col-8 py-1">
-          <label htmlFor="media_id">File:</label>
-          <input
-            className="form-control input-select-custom-style"
-            style={{
-              paddingLeft: '7px',
-              ...reusableStyle
-            }}
-            id="media_id"
-            type="file"
-            onChange={(e) =>
-              setVideo(e.target.files ? e.target.files[0] : undefined)
-            }
-          />
-        </div>
-        <button
-          type="button"
-          disabled={
-            storage === 'null' ||
-            title === '' ||
-            description === '' ||
-            /* author === '' || */
-            contract === 'null' ||
-            product === 'null' ||
-            selectedOffers.length === 0 ||
-            verifyOffer() ||
-            video === undefined
-          }
-          className="btn py-1 col-8 btn-primary btn-submit-custom"
-          onClick={async () => {
-            if (uploading) {
-              return;
-            }
-            if (video && title) {
-              setVPV(URL.createObjectURL(video));
-              const formData = new FormData();
-              formData.append('video', video);
-              formData.append('title', title);
-              formData.append('description', description);
-              formData.append('contract', contract);
-              formData.append('category', category);
-              formData.append('storage', storage);
-              formData.append('product', product);
-              formData.append('demo', false);
-              /* formData.append('publicDemoOverride', true); */
-              const acceptedOffers = [];
-              selectedOffers.forEach((item) => {
-                if (item !== 'null' && !acceptedOffers.includes(item)) {
-                  acceptedOffers.push(item);
-                }
-              });
-              formData.append('offer', JSON.stringify(acceptedOffers));
-              setUploading(true);
-              const tokenRequest = await rFetch('/api/upload/token');
-              if (!tokenRequest.success) {
-                setUploading(false);
-                return;
-              }
-              axios
-                .post<TUploadSocket>(
-                  `${
-                    import.meta.env.VITE_UPLOAD_PROGRESS_HOST
-                  }/ms/api/v1/media/upload?socketSessionId=${thisSessionId}`,
-                  formData,
-                  {
-                    headers: {
-                      Accept: 'application/json',
-                      'X-rair-token': tokenRequest.secret
-                    }
-                  }
-                )
-                .then((res) => res.data)
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                .then((response) => {
-                  // TODO: in time of uploading
-                  // setUploading(false);
-                  // setTitle("");
-                  // setDescription("");
-                  // setVideo(undefined);
-                  // setOffersIndex([]);
-                  // setCollectionIndex({});
-                  // setCategory("null");
-                  // setStorage('null');
-                  // setContractOptions([]);
-                  // setProductOptions();
-                  // setOffersOptions();
-                  // 	// setAuthor("");
-                })
-                .catch((e) => {
-                  console.error(e);
-                  Swal.fire('Error', e, 'error');
-                  setUploading(false);
-                });
-            } else {
-              setVPV();
-            }
-          }}>
-          {uploading ? 'Upload in progress' : 'Submit'}
-        </button>
-        <div />
-        <div
-          className="progress"
-          style={{
-            marginTop: '20px',
-            width: '67%',
-            backgroundColor: primaryColor
-          }}>
-          <div
-            className="progress-bar"
-            role="progressbar"
-            style={{ width: `${status}%` }}
-            aria-valuenow={status}
-            aria-valuemin="0"
-            aria-valuemax="100">
-            {status}%
-          </div>
-        </div>
-        <div>{status !== 100 && status !== 0 ? `Step: ${message}` : ''}</div>
-        <hr className="w-100 my-5" />
-      </div>
-      <hr />
       <ServerSettings {...{ fullContractData }} />
       <hr />
       <div className="new">