Merge pull request #278 from OceanProtocolEnterprise/feat/stage

Feat/stage

Author: AdriGeorge

src/components/@shared/FormInput/InputElement/EnvironmentSelection/index.module.css

@@ -51,6 +51,12 @@
   gap: 6px;
 }
 
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .title {
   font-family: var(--font-family-base);
   font-weight: 700;
@@ -70,6 +76,13 @@
   display: flex;
   gap: 8px;
   flex-shrink: 0;
+  align-items: center;
+}
+
+.infoButton {
+  min-width: auto;
+  padding: 2px 8px;
+  font-size: 12px;
 }
 
 .freeTag {
@@ -140,3 +153,11 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.infoModalOverlay {
+  z-index: 2001;
+}
+
+.infoModalContent {
+  max-width: 36rem;
+}

src/components/@shared/FormInput/InputElement/EnvironmentSelection/index.tsx

@@ -1,11 +1,12 @@
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useState, useMemo } from 'react'
 import { ComputeEnvironment } from '@oceanprotocol/lib'
 import Loader from '@shared/atoms/Loader'
 import { truncateDid } from '@utils/string'
 import styles from './index.module.css'
 import SearchSection from '@shared/SearchSection'
 import StatusTag from '../../../atoms/StatusTag'
 import Button from '../../../atoms/Button'
+import ProviderOwnerInfoModal from '@shared/ProviderOwnerInfoModal'
 
 export interface EnvironmentSelectionEnvironment extends ComputeEnvironment {
   checked?: boolean
@@ -18,41 +19,37 @@ function Empty({ message }: { message: string }) {
 export default function EnvironmentSelection({
   environments,
   selected,
+  nodeUrl,
   disabled,
   onChange
 }: {
   environments: EnvironmentSelectionEnvironment[]
   selected?: string
+  nodeUrl?: string
   disabled?: boolean
   onChange?:
     | ((value: string) => void)
     | ((e: ChangeEvent<HTMLInputElement>) => void)
 }): JSX.Element {
   const [searchValue, setSearchValue] = useState('')
-  const [filteredEnvironments, setFilteredEnvironments] = useState<
-    EnvironmentSelectionEnvironment[]
-  >([])
+  const [isInfoModalOpen, setIsInfoModalOpen] = useState(false)
 
-  useEffect(() => {
-    // Combine real environments with mock data
+  const filteredEnvironments = useMemo(() => {
     const realEnvs =
       environments && Array.isArray(environments) ? environments : []
     const allEnvironments = [...realEnvs]
 
     if (!allEnvironments || allEnvironments.length === 0) {
-      setFilteredEnvironments([])
-      return
+      return []
     }
 
-    const result = allEnvironments.filter((env) =>
+    return allEnvironments.filter((env) =>
       searchValue !== ''
         ? env.id.toLowerCase().includes(searchValue.toLowerCase()) ||
           (env.description &&
             env.description.toLowerCase().includes(searchValue.toLowerCase()))
         : true
     )
-
-    setFilteredEnvironments(result)
   }, [environments, searchValue])
 
   const handleEnvironmentSelect = (envId: string) => {
@@ -66,6 +63,10 @@ export default function EnvironmentSelection({
     }
   }
 
+  const handleOpenInfo = () => {
+    setIsInfoModalOpen(true)
+  }
+
   return (
     <div className={styles.root}>
       <SearchSection
@@ -97,9 +98,22 @@ export default function EnvironmentSelection({
                   >
                     <div className={styles.cardHeader}>
                       <div className={styles.titleSection}>
-                        <h3 className={styles.title}>
-                          Environment {index + 1}
-                        </h3>
+                        <div className={styles.titleRow}>
+                          <h3 className={styles.title}>
+                            Environment {index + 1}
+                          </h3>
+                          <Button
+                            style="outlined"
+                            size="small"
+                            className={styles.infoButton}
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handleOpenInfo()
+                            }}
+                          >
+                            Info
+                          </Button>
+                        </div>
                         <div className={styles.envId}>
                           {truncateDid(env.id)}
                         </div>
@@ -133,6 +147,15 @@ export default function EnvironmentSelection({
           </>
         )}
       </div>
+
+      <ProviderOwnerInfoModal
+        title="Node Owner Info"
+        isOpen={isInfoModalOpen}
+        providerUrl={nodeUrl}
+        overlayClassName={styles.infoModalOverlay}
+        className={styles.infoModalContent}
+        onClose={() => setIsInfoModalOpen(false)}
+      />
     </div>
   )
 }

src/components/@shared/FormInput/InputElement/Provider/index.module.css

@@ -26,7 +26,14 @@
   height: 14px;
   margin: 0;
 }
+
 .confirmed {
   font-weight: var(--font-weight-base);
   color: var(--color-success, #5fb359);
 }
+
+.infoButton {
+  min-width: auto;
+  padding: 2px 10px;
+  font-size: 12px;
+}

src/components/@shared/FormInput/InputElement/Provider/index.tsx

@@ -17,13 +17,15 @@ import { useChainId } from 'wagmi'
 import { customProviderUrl } from 'app.config.cjs'
 import CircleErrorIcon from '@images/circle_error.svg'
 import CircleCheckIcon from '@images/circle_check.svg'
+import ProviderOwnerInfoModal from '@shared/ProviderOwnerInfoModal'
 
 export default function CustomProvider(props: InputProps): ReactElement {
   const chainId = useChainId()
   const newCancelToken = useCancelToken()
   const { initialValues, setFieldError } = useFormikContext<FormPublishData>()
   const [field, , helpers] = useField(props.name)
   const [isLoading, setIsLoading] = useState(false)
+  const [isInfoModalOpen, setIsInfoModalOpen] = useState(false)
 
   useEffect(() => {
     helpers.setValue({ url: customProviderUrl, valid: true, custom: true })
@@ -119,13 +121,37 @@ export default function CustomProvider(props: InputProps): ReactElement {
         handleButtonClick={handleValidation}
         isValidated={field?.value?.valid === true}
         onReset={handleClear}
+        additionalAction={
+          field?.value?.valid === true ? (
+            <Button
+              style="outlined"
+              size="small"
+              type="button"
+              className={styles.infoButton}
+              onClick={(e) => {
+                e.preventDefault()
+                setIsInfoModalOpen(true)
+              }}
+            >
+              Info
+            </Button>
+          ) : null
+        }
       />
 
       {field?.value?.valid === true ? (
-        <div className={styles.defaultContainer}>
-          <CircleCheckIcon />
-          <div className={styles.confirmed}>File confirmed</div>
-        </div>
+        <>
+          <div className={styles.defaultContainer}>
+            <CircleCheckIcon />
+            <div className={styles.confirmed}>File confirmed</div>
+          </div>
+          <ProviderOwnerInfoModal
+            title="Node Owner Info"
+            isOpen={isInfoModalOpen}
+            providerUrl={field?.value?.url}
+            onClose={() => setIsInfoModalOpen(false)}
+          />
+        </>
       ) : (
         <Button
           style="text"

src/components/@shared/FormInput/InputElement/URLInput/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useState } from 'react'
+import { ReactElement, ReactNode, useEffect, useState } from 'react'
 import Button from '@shared/atoms/Button'
 import PublishButton from '@shared/PublishButton'
 import DeleteButton from '@shared/DeleteButton/DeleteButton'
@@ -28,6 +28,7 @@ export interface URLInputProps {
   isValidated?: boolean
   onReset?: () => void
   showResetButton?: boolean
+  additionalAction?: ReactNode
 }
 
 export default function URLInput({
@@ -48,6 +49,7 @@ export default function URLInput({
   isValidated = false,
   onReset,
   showResetButton = true,
+  additionalAction,
   ...props
 }: URLInputProps): ReactElement {
   const [field, meta] = useField(name)
@@ -136,6 +138,8 @@ export default function URLInput({
             {showResetButton && (isValidated || showDeleteButton) && (
               <DeleteButton onClick={handleReset} />
             )}
+
+            {additionalAction}
           </div>
         )}
       </InputGroup>

src/components/@shared/ProviderOwnerInfoModal/index.module.css

@@ -0,0 +1,104 @@
+.modalDescription {
+  margin: 0 0 8px;
+  font-size: 15px;
+  color: var(--clr-slate-70);
+  word-break: break-word;
+}
+
+.modalContent {
+  width: min(92vw, 62rem);
+  max-width: min(92vw, 62rem);
+}
+
+.scrollArea {
+  max-height: min(72vh, 58rem);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 6px;
+}
+
+.ownerInfoList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.ownerInfoSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid var(--ink-alpha-10);
+  border-radius: 14px;
+  padding: 12px 14px;
+  background: var(--brand-white);
+  box-shadow: 0 2px 8px var(--black-alpha-10);
+}
+
+.ownerInfoSectionTitle {
+  margin: 0;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--clr-slate-50);
+  line-height: 1.2;
+}
+
+.ownerInfoSectionBody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ownerInfoItem {
+  font-size: 16px;
+  color: var(--clr-slate-70);
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.providerUrlCard {
+  margin-top: 0;
+  margin-bottom: 16px;
+  border: 1px solid var(--ink-alpha-10);
+  border-radius: 14px;
+  padding: 14px 16px;
+  background: linear-gradient(
+    180deg,
+    var(--navy-alpha-5) 0%,
+    rgba(10, 75, 112, 0.02) 100%
+  );
+}
+
+.providerUrlLabel {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--clr-slate-50);
+  margin-bottom: 6px;
+}
+
+.providerUrlValue {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--text-ink);
+  word-break: break-word;
+}
+
+.ownerInfoKey {
+  font-weight: 700;
+  color: var(--text-ink);
+}
+
+.ownerInfoValue {
+  color: var(--text-ink);
+  opacity: 0.75;
+}
+
+.ownerInfoLink {
+  color: var(--ocean-blue-dark, var(--ocean-blue));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}