Merge pull request #426 from GenaDrop/staging

Staging
GenaDrop · Sep 29, 2024 · b04acd7 · b04acd7
2 parents add2ccd + 53f304e
commit b04acd7
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 73 deletions.
diff --git a/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx b/apps/Mintbase/widget/Mintbase/App/ContractProfilePage/Mint/Index.jsx
@@ -59,64 +59,64 @@ const MintRoot = styled.div`
 `;
 
 const MintAmount = styled.div`
-.amount-input{
-  width: 20%;
-  display: flex;
-  flex-direction: column;
-  margin: 20px auto;
-  padding: 5px 10px;
-  p{
+  .amount-input {
+    width: 20%;
     display: flex;
-    margin-bottom: 8px;
-    color: #000;
-    white-space: nowrap;
-    .dark{
-      color: #fff;
+    flex-direction: column;
+    margin: 20px auto;
+    padding: 5px 10px;
+    p {
+      display: flex;
+      margin-bottom: 8px;
+      color: #000;
+      white-space: nowrap;
+      .dark {
+        color: #fff;
+      }
+      .max {
+        opacity: 0.7;
+      }
     }
-    .max{
-      opacity: 0.7;
+    span {
+      color: #ff0000;
+    }
+    @media (max-width: 500px) {
+      width: 70%;
     }
   }
-  span{
-    color: #ff0000;
-  }
-  @media (max-width: 500px) {
-    width: 70%;
-  }
-}
-.burn-light {
-  color: #000;
-  background-color: #f2f5f8;
-  button {
-    background-color: #000;
-    color: #fff;
-  }
-  input {
-    color: #000;
-  }
-  
-}
-.burn-dark {
-  color: #fff;
-  background: #101223;
-  button {
-    background-color: #fff;
+  .burn-light {
     color: #000;
+    background-color: #f2f5f8;
+    button {
+      background-color: #000;
+      color: #fff;
+    }
+    input {
+      color: #000;
+    }
   }
-  input {
+  .burn-dark {
     color: #fff;
+    background: #101223;
+    button {
+      background-color: #fff;
+      color: #000;
+    }
+    input {
+      color: #fff;
+    }
   }
-}
-  .burn-dark, .burn-light {  
+  .burn-dark,
+  .burn-light {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 8px;
     @media (max-width: 500px) {
       width: 70%;
     }
-    input[type=number]::-webkit-inner-spin-button,
-    input[type=number]::-webkit-outer-spin-button {
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
       -webkit-appearance: none;
       margin: 0;
     }
@@ -129,7 +129,6 @@ const MintAmount = styled.div`
       width: 40%;
       background: transparent;
       border: transparent;
-     
     }
     p {
       margin: 0;
@@ -138,15 +137,15 @@ const MintAmount = styled.div`
     button {
       padding: 3px 9px;
       border: none;
-    
+
       border-radius: 4px;
       &:disabled {
         cursor: not-allowed;
         background-color: #767986;
         color: #fff;
       }
     }
-    }
+  }
 `;
 
 const Basic = styled.div`
@@ -160,10 +159,10 @@ const Basic = styled.div`
       color: #fff;
     }
     .top {
-    border-bottom: 1px solid #1e2030;
+      border-bottom: 1px solid #1e2030;
     }
     .file-upload {
-    background: #101223;
+      background: #101223;
     }
   }
   .top {
@@ -272,7 +271,8 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => {
   const [royalties, setRoyalties] = useState([]);
   const [splits, setSplits] = useState([]);
   const [img, setImg] = useState(null);
-
+  const owner = context.accountId;
+
   const uploadFile = (files) => {
     const file = files[0];
     setLoadingUpload(true);
@@ -309,11 +309,11 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => {
   };
 
   const onMint = (isDAO) => {
-    // if (!title && !description && !img) {
-    //   return setErrorMessage(
-    //     "Please make sure that all required fields are filled"
-    //   );
-    // }
+    if (!title && !description && img === null) {
+      return setErrorMessage(
+        "Please make sure that all required fields are filled"
+      );
+    }
     let splitsRevenue = [];
     let royaltiesAvailable = [];
 
@@ -372,7 +372,6 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => {
       category: categories[activeCategory],
       tags: tags,
     };
-    const owner = context.accountId;
     if (isDAO === "DAO") {
       mintNftAsADao(
         connectedDao?.address,
@@ -568,11 +567,17 @@ const Mint = ({ isDarkModeOn, contractId, connectedDao }) => {
       />
       <div className="bottomButtons">
         <div>
-          <button disabled={metaDataStatus} onClick={onMint}>
+          <button
+            disabled={!owner || img === null || !description || !title}
+            onClick={onMint}
+          >
             {metaDataStatus ? "Uploading Metadata..." : "Mint me"}
           </button>
           {connectedDao?.permission && (
-            <button disabled={metaDataStatus} onClick={() => onMint("DAO")}>
+            <button
+              disabled={!owner || img === null || !description || !title}
+              onClick={() => onMint("DAO")}
+            >
               {metaDataStatus ? "Uploading Metadata..." : "Mint As A DAO"}
             </button>
           )}

diff --git a/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx b/apps/Mintbase/widget/Mintbase/App/Home/HomeContracts.jsx
@@ -109,7 +109,7 @@ const Contracts = styled.div`
   align-items: center;
   justify-content: space-between;
   margin-top: 80px;
-  widthL 100%;
+  width: 100%;
   .top {
     display: flex;
     justify-content: space-between;

diff --git a/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx b/apps/Mintbase/widget/Mintbase/App/Store/Card.jsx
@@ -60,7 +60,14 @@ const StoreCard = styled.div`
     &.dark-icon_area {
       border-color: var(--gray-850, #1e2030);
     }
-  }
+
+    /* on tablets and mobile */
+    @media screen and (max-width: 768px) {    
+      width: 67px;
+      height: 67px;
+      margin-top: -15px;
+    }
+   }
 
   .contract_owner {
     margin-top: 10px;
@@ -94,6 +101,11 @@ const StoreCard = styled.div`
       gap: 20px;
       .contract_owner {
         margin-left: 128px;
+
+        /* tablets and phones */
+        @media screen and (max-width: 768px) {
+          margin-left: 78px;
+        }
       }
     }
   }
@@ -107,12 +119,22 @@ const StoreCard = styled.div`
       height: 100%;
       object-fit: cover;
     }
+
+    /* on tablets and mobile */
+    @media screen and (max-width: 768px) {
+      height: 83px;
+    }
   }
   .bottom {
     padding: 34px 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    /* tablets and phones */
+    @media screen and (max-width: 768px) {
+      padding: 12px;
+    }
   }
   .manage-settings {
     display: flex;
@@ -164,6 +186,10 @@ const StoreCard = styled.div`
       }
     }
   }
+  @media (max-width: 568px){
+    max-width: 70%;
+    margin: 0;
+  }
 `;
 
 const role = contract.owner_id === accountId ? "Owner" : "Minter";
@@ -223,8 +249,8 @@ return (
           </div>
           <div className="contract_owner">
             <h3>
-              {(contract.nft_contract_id.length > 22
-                ? `${contract?.nft_contract_id.substring(0, 20)}...`
+              {(contract.nft_contract_id.length > 19
+                ? `${contract?.nft_contract_id.substring(0, 15)}...`
                 : contract?.nft_contract_id) || "contract Name"}{" "}
             </h3>
             <p className={isDarkModeOn ? "dark_role" : ""}>Role: {role}</p>
@@ -247,7 +273,7 @@ return (
             >
               Manage NFTs
             </Link>
-            {isConnected && (
+            {/* {isConnected && (
               <Link
                 key={"settings"}
                 className="route tab"
@@ -261,7 +287,7 @@ return (
               >
                 Settings
               </Link>
-            )}
+            )} */}
           </div>
         </div>
         <div>

diff --git a/apps/Mintbase/widget/Mintbase/MbButton.jsx b/apps/Mintbase/widget/Mintbase/MbButton.jsx
@@ -86,6 +86,7 @@ const Container = styled.div`
     ${!customStyle && getFontType(size)}
     border:none;
     --tw-ring-opacity: 1;
+    white-space: nowrap;
     &.big {
       padding: 8px 16px;
       min-width: 100px;

diff --git a/apps/Mintbase/widget/Mintbase/Mini/Index.jsx b/apps/Mintbase/widget/Mintbase/Mini/Index.jsx
@@ -19,6 +19,7 @@ const [mode, setMode] = useState(currentMode || "light");
 const [showOwnedFilters, setShowOwnedFilters] = useState(false);
 const [storeAddress, setStoreAddress] = useState("nft.genadrop.near");
 const isDarkModeOn = mode === "dark";
+const connectedDao = localStorageData;
 
 const Root = gatewayURL.includes("near.social")
   ? styled.div`
@@ -42,18 +43,28 @@ const { MbInputField } = VM.require(
   MbInputField: () => <></>,
 };
 
-const tabProps = {
+const actualTabs = {
   tabLabels: [
-    "My Owned NFTs",
-    "My Minted NFTs",
-    "My Stores",
-    "Mint NFT",
-    "Store NFTs",
-    "Deploy Store",
-    "My Activity",
+    {title:"My Owned NFTs"},
+    {title: "My Minted NFTs"},
+    {title: "My Stores"},
+    {title: "Mint NFT"},
+    {title: "Store NFTs"},
+    {title: "Deploy Store"},
+    {title: "My Activity"},
   ],
 };
 
+
+if (connectedDao?.address) {
+  actualTabs.tabLabels.push({title: "DAO NFTs"})
+}
+
+const hiddenTabs = actualTabs.tabLabels
+  .filter((tab) => !tab.hidden)
+  .map((tab) => tab.title);
+const tabProps = { tabLabels: hiddenTabs };
+
 const [selectedTab, setSelectedTab] = useState(props.tab ?? "my-owned-nfts");
 
 const switchChangeHandler = () => {
@@ -403,11 +414,27 @@ const PageContent = () => {
           }}
         />
       );
+    case "dao-nfts":
+      return (
+        <Widget
+          src="${config_account}/widget/Mintbase.App.Tokens.Owned"
+          props={{
+            isDarkModeOn,
+            ownerId: connectedDao?.address,
+            isConnected,
+            showFilters: showOwnedFilters,
+          }}
+        />
+      );
     case "store-nfts":
       return (
         <Widget
           src="${config_account}/widget/Mintbase.App.ContractProfilePage.ContractNFTs"
-          props={{ contractId: storeAddress, isDarkModeOn }}
+          props={{
+            contractId: storeAddress,
+            connectedDao: connectedDao,
+            isDarkModeOn,
+          }}
         />
       );
     case "my-activity":
@@ -643,7 +670,7 @@ const Index = ({}) => (
           props={{
             isDarkModeOn,
             accountId,
-            localStorageData,
+            localStorageData: connectedDao,
             setLocalStorageData,
           }}
         />