fix: correct version listing bug

feat: Possibility to choose the version to deploy

refactor: deletion of unnecessary commented code

style: change the shade color of SD logo and text in light mode

Author: asanson1404

components/ThemeContext.tsx

@@ -36,10 +36,6 @@ export const ThemeContextProvider: React.FC<ThemeContextProviderProps> = ({ chil
     }
   }, []);
 
-  //useEffect(() => {
-  //  localStorage.setItem("theme", activeTheme as ThemeType);
-  //}, [activeTheme]);
-
   return (
       <ThemeContext.Provider value={{ activeTheme, setActiveTheme, inactiveTheme }}>
           {children}

components/published-tab/index.tsx

@@ -1,6 +1,8 @@
 import { BsSendPlus } from 'react-icons/bs';
+import { IoMdArrowDropdown, IoMdArrowDropup } from 'react-icons/io'
 import Popup from 'reactjs-popup';
 import styles from './style.module.css';
+import Dropdown from 'react-dropdown';
 
 import { smartdeploy, StateVariablesProps, UserWalletInfo, FetchDatas } from "@/pages";
 import { isConnected } from '@stellar/freighter-api';
@@ -12,17 +14,30 @@ interface PublishedContract {
     index: number;
     name: string;
     author: string;
-    version: Version;
-    version_string: string;
-    hash: string;
+    versions: {
+        version: Version,
+        hash: string
+    }[];
 }
 
-type DeployIconComponentProps = {
+type DeployProps = {
     userWalletInfo: UserWalletInfo;
     refetchDeployedContract: FetchDatas;
     contract_name: string;
-    version: Option<Version>;
-    version_string: string;
+    versions: {version: Version, version_string: string}[];
+}
+
+type DeployVersionProps = {
+    userWalletInfo: UserWalletInfo;
+    refetchDeployedContract: FetchDatas;
+    contract_name: string;
+    selected_version: {version: Version, version_string: string};
+}
+
+type VersionDropdownProps = {
+    versions: {version: Version, version_string: string}[];
+    selected_version: {version: Version, version_string: string};
+    set_selected_version: Dispatch<SetStateAction<{version: Version, version_string: string}>>;
 }
 
 type DeployArgsObj = { 
@@ -48,20 +63,26 @@ async function listAllPublishedContracts() {
 
             ///@ts-ignore
             contractArray.forEach(([name, publishedContract], i) => {
-                const version: Version = publishedContract.versions.keys().next().value;
-                const major = version.major;
-                const minor = version.minor;
-                const patch = version.patch;
-                const versionString = `v.${major}.${minor}.${patch}`;
-                
-                const hash = publishedContract.versions.values().next().value.hash.join('');
+
+                let versions: {version: Version, hash: string}[] = [];
+
+                ///@ts-ignore
+                Array.from(publishedContract.versions).forEach((contractDatas: [Version, any]) => {
+
+                    // Version object
+                    const version = contractDatas[0];
+
+                    // hash
+                    const hash = contractDatas[1].hash.join('');
+
+                    versions.push({version, hash});
+                });
+
                 const parsedPublishedContract: PublishedContract = {
                     index: i,
                     name: name,
                     author: publishedContract.author.toString(),
-                    version: version,
-                    version_string: versionString,
-                    hash: hash
+                    versions: versions
                 };
 
                 publishedContracts.push(parsedPublishedContract);
@@ -141,7 +162,43 @@ async function deploy(
     }
 }
 
-function DeployIconComponent(props: DeployIconComponentProps) {
+function VersionDropdownButton(props: VersionDropdownProps) {
+
+    const versions: string[] = [];
+
+    props.versions.forEach((version) => {
+        versions.push(version.version_string);
+    });
+
+    return(
+        <div>
+            <Dropdown
+                className={styles.dropdownContainer}
+                controlClassName={styles.dropdownControl}
+                menuClassName={styles.dropdownMenu}
+                options={versions}
+                placeholder={versions[0]}
+                arrowClosed={<IoMdArrowDropdown/>}
+                arrowOpen={<IoMdArrowDropup/>}
+                onChange={(version) => {
+    
+                    const newSelectedVersionString = version.value;
+                    
+                    const [major, minor, patch] = version.value.split('.').slice(1);
+                    const newSelectedVersion: Version = {
+                        major: parseInt(major),
+                        minor: parseInt(minor),
+                        patch: parseInt(patch),
+                    }
+                    
+                    props.set_selected_version({version: newSelectedVersion, version_string: newSelectedVersionString});
+                }}
+            />
+        </div>
+    )
+}
+
+function DeployIconComponent(props: DeployVersionProps) {
 
     // Import the current Theme
     const { activeTheme } = useThemeContext();
@@ -173,7 +230,7 @@ function DeployIconComponent(props: DeployIconComponentProps) {
                             <button className={styles.close} onClick={() => setWouldDeploy(false)}>
                                 &times;
                             </button>
-                            <div className={styles.header}>Deploy <span className={styles.nameColor} data-theme={activeTheme}>{props.contract_name} ({props.version_string})</span> </div>
+                            <div className={styles.header}>Deploy <span className={styles.nameColor} data-theme={activeTheme}>{props.contract_name} ({props.selected_version.version_string})</span> </div>
                             <div className={styles.content}>
                                 <p className={styles.mainMessage}><b>You are about to create an instance of <span className={styles.nameColor} data-theme={activeTheme}>{props.contract_name}</span> published contract where you will be the owner.</b><br/></p>
                                 <div className={styles.deployedNameDiv}>
@@ -200,7 +257,7 @@ function DeployIconComponent(props: DeployIconComponentProps) {
 
                                                     const argsObj: DeployArgsObj = {
                                                         contract_name: props.contract_name,
-                                                        version: props.version,
+                                                        version: props.selected_version.version,
                                                         deployed_name: deployedName,
                                                         owner: props.userWalletInfo.address,
                                                         salt: undefined
@@ -236,6 +293,35 @@ function DeployIconComponent(props: DeployIconComponentProps) {
     );
 }
 
+function DeployVersionComponent(props: DeployProps) {
+
+    // The default selected version is the last one
+    const defaultSelectedVersion = {
+        version: props.versions[0].version,
+        version_string: props.versions[0].version_string
+    };
+
+    const [selectedVersion, setSelectedVersion] = useState<{version: Version, version_string: string}>(defaultSelectedVersion);
+
+    return (
+        <>
+            <td>
+                <VersionDropdownButton
+                    versions={props.versions}
+                    selected_version={selectedVersion}
+                    set_selected_version={setSelectedVersion}
+                />
+            </td>
+            <DeployIconComponent
+                userWalletInfo={props.userWalletInfo}
+                refetchDeployedContract={props.refetchDeployedContract}
+                contract_name={props.contract_name}
+                selected_version={selectedVersion}
+            />
+        </>
+    )
+}
+
 
 export default function PublishedTab(props: StateVariablesProps) {
 
@@ -310,17 +396,33 @@ export default function PublishedTab(props: StateVariablesProps) {
         const rows: JSX.Element[] = [];
 
         publishedContracts.forEach((publishedContract) => {
+
+            const versions: {version: Version, version_string: string}[] = [];
+
+            publishedContract.versions.forEach((obj) => {
+
+                // Version obj
+                const version = obj.version;
+
+                // Version string
+                const major = version.major;
+                const minor = version.minor;
+                const patch = version.patch;
+                const version_string = `v.${major}.${minor}.${patch}`;
+
+                versions.push({version, version_string});
+            })
+            versions.reverse();
+            
             rows.push(
                 <tr key={publishedContract.index} data-theme={activeTheme}>
                     <td className={styles.contractCell}>{publishedContract.name}</td>
                     <td>{publishedContract.author}</td>
-                    <td>{publishedContract.version_string}</td>
-                    <DeployIconComponent
+                    <DeployVersionComponent
                         userWalletInfo={props.walletInfo}
                         refetchDeployedContract={props.fetchDeployed as FetchDatas}
                         contract_name={publishedContract.name}
-                        version={publishedContract.version}
-                        version_string={publishedContract.version_string}
+                        versions={versions}
                     />
                 </tr>
             );
@@ -340,7 +442,7 @@ export default function PublishedTab(props: StateVariablesProps) {
                         <tr>
                             <th>Contract</th>
                             <th>Author</th>
-                            <th>Version</th>
+                            <th>Versions</th>
                             <th>Deploy</th>
                         </tr>
                     </thead>

components/published-tab/style.module.css

@@ -1,5 +1,4 @@
 .publishedTabContainer {
-    min-height: 18rem;
     margin-bottom: 5rem;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
@@ -17,7 +16,7 @@
 
 .publishedTabContentContainer {
     max-height: 14.2rem; 
-    overflow-y: scroll;
+    overflow-y: scroll !important;
 }
 .publishedTabContentContainer::-webkit-scrollbar {
     display: none;
@@ -66,6 +65,7 @@
 .publishedTabContent tbody tr {
     color: var(--tr-font-color);
     border-bottom: 1px solid var(--tr-border-bottom-color);
+    position: relative;
 }
 
 .publishedTabContent tbody tr:nth-of-type(even) {
@@ -207,4 +207,46 @@
     background: #ffffff;
     border-radius: 18px;
     border: 1px solid #cfcece;
+}
+
+
+.dropdownControl {
+    display: flex;
+    width: 4.8rem;
+    justify-content: space-between;
+    padding: 0.3rem 0.2rem 0.3rem 0.2rem;
+    border-radius: 10px;
+}
+.dropdownControl:hover {
+    background-color: rgba(128, 128, 128, 0.216);
+    cursor: pointer;
+}
+
+.dropdownMenu {
+    position: absolute;
+    top: 1.8rem;
+    border-radius: 3px;
+    z-index: 1;
+    padding: 0.2rem 0.3rem;
+    width: 4.8rem;
+    background-color: rgb(187, 186, 184);
+    font-size: 0.7rem;
+    border: solid 1px rgb(6, 6, 6);
+}
+
+.dropdownMenu > div {
+    list-style: disc inside;
+    font-weight: 600;
+    color: black;
+    cursor: pointer;
+    border-bottom: 1px solid gray;
+    padding-bottom: 0.2rem;
+    padding-top: 0.2rem;
+}
+.dropdownMenu > div:last-child {
+    border-bottom: none;
+}
+.dropdownMenu > div::before {
+    content: "\2022";
+    margin-right: 0.5rem;
 }

package-lock.json

@@ -16,6 +16,7 @@
     "next": "13.5.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-dropdown": "^1.11.0",
     "react-icons": "^4.11.0",
     "reactjs-popup": "^2.0.6"
   },

package.json

@@ -228,7 +228,7 @@
   }
 
   .logoB {
-    filter: invert(0) drop-shadow(0 0 0.3rem #22222270);
+    filter: invert(0) drop-shadow(0 0 0.3rem #86858570);
   }
 }
 

styles/Home.module.css

@@ -99,7 +99,7 @@ main[data-theme="dark"] {
 p,
 p[data-theme="light"] {
   --smart-deploy-message-color: rgb(32, 30, 30);
-  --smart-deploy-message-filter-shadow: #00000070;
+  --smart-deploy-message-filter-shadow: #89878770;
   --grid-doc-font-color: black;
 }
 p[data-theme="dark"] {