From 8db0233c177b66e0bb768db4c411a6041b4bc661 Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:36:28 +0100
Subject: [PATCH 1/5] feat: merge accurate-portal

---
 content/pages/editMetadata.json               |  76 +++++++++----
 content/price.json                            |   7 +-
 content/publish/form.json                     | 106 ++++++++++++------
 content/site.json                             |  17 +++
 src/@utils/aquarius/index.ts                  |  12 +-
 src/@utils/ddo.ts                             |  12 ++
 src/@utils/nft.ts                             |   8 +-
 src/@utils/subgraph.ts                        |  21 +++-
 src/@utils/yup.ts                             |   1 +
 .../@shared/AddNetwork/index.module.css       |   4 +
 src/components/@shared/AddNetwork/index.tsx   |   6 +-
 src/components/@shared/AssetTeaser/index.tsx  |   4 +-
 .../InputElement/Credential/index.module.css  |   4 +
 .../InputElement/Credential/index.tsx         |   7 +-
 .../InputElement/FilesInput/index.tsx         |  86 +++++++-------
 .../KeyValueInput/index.module.css            |   4 +
 .../InputElement/MethodInput/index.module.css |   2 +-
 src/components/@shared/FormInput/index.tsx    |   1 +
 .../@shared/MenuDropdown/index.module.css     |  12 ++
 .../@shared/NetworkName/index.module.css      |   2 +-
 .../Onboarding/Steps/ImportCustomTokens.tsx   |   2 +-
 .../@shared/Onboarding/Steps/ImportWallet.tsx |   2 +-
 .../@shared/atoms/Button/index.module.css     |  16 ++-
 src/components/@shared/atoms/Table/_styles.ts |   3 +-
 .../@shared/atoms/TabsFile/index.tsx          |  56 +++++----
 .../Compute/PriceOutput.module.css            |   4 +
 .../Asset/Edit/DebugEditMetadata.tsx          |  19 +++-
 src/components/Asset/Edit/EditMetadata.tsx    |   8 ++
 src/components/Asset/Edit/_constants.ts       |   3 +-
 src/components/Asset/Edit/_types.ts           |   9 +-
 src/components/Asset/Edit/_validation.ts      |   2 +-
 src/components/Header/Menu.module.css         |   6 +-
 src/components/Header/Menu.tsx                |   2 +
 .../{Wallet => NetworkMenu}/AddTokenList.tsx  |   0
 .../Header/NetworkMenu/Details.module.css     |  44 ++++++++
 src/components/Header/NetworkMenu/Details.tsx |  43 +++++++
 .../Network.module.css                        |  28 ++++-
 .../{Wallet => NetworkMenu}/Network.tsx       |   6 +-
 .../Header/NetworkMenu/index.module.css       |   4 +
 src/components/Header/NetworkMenu/index.tsx   |  18 +++
 .../Automation/Decrypt.module.css             |   4 +
 .../Networks/NetworksList.module.css          |   2 +
 .../UserPreferences/Networks/index.module.css |   2 +-
 .../Header/Wallet/Account.module.css          |   9 +-
 .../Header/Wallet/Details.module.css          |  55 +--------
 src/components/Header/Wallet/Details.tsx      |  32 +-----
 src/components/Header/Wallet/index.tsx        |   2 -
 .../Home/TopSales/Account/index.module.css    |   3 +
 src/components/Profile/Header/Stats.tsx       |   2 +-
 .../History/ComputeJobs/Details.module.css    |   2 +-
 .../Profile/History/index.module.css          |   4 +-
 src/components/Publish/Actions/index.tsx      |  17 ++-
 src/components/Publish/Policies/index.tsx     |  44 ++++++++
 src/components/Publish/Pricing/Fees.tsx       |  20 +++-
 src/components/Publish/Pricing/Fixed.tsx      |   8 +-
 src/components/Publish/Pricing/Price.tsx      |  16 ++-
 src/components/Publish/_constants.tsx         |  24 +++-
 src/components/Publish/_types.ts              |  14 ++-
 src/components/Publish/_utils.ts              |  22 +++-
 src/components/Publish/_validation.ts         |  14 ++-
 src/pages/faucet.tsx                          |  17 ++-
 src/stylesGlobal/_variables.css               |   5 +
 62 files changed, 695 insertions(+), 290 deletions(-)
 rename src/components/Header/{Wallet => NetworkMenu}/AddTokenList.tsx (100%)
 create mode 100644 src/components/Header/NetworkMenu/Details.module.css
 create mode 100644 src/components/Header/NetworkMenu/Details.tsx
 rename src/components/Header/{Wallet => NetworkMenu}/Network.module.css (54%)
 rename src/components/Header/{Wallet => NetworkMenu}/Network.tsx (85%)
 create mode 100644 src/components/Header/NetworkMenu/index.module.css
 create mode 100644 src/components/Header/NetworkMenu/index.tsx
 create mode 100644 src/components/Publish/Policies/index.tsx

diff --git a/content/pages/editMetadata.json b/content/pages/editMetadata.json
index 6b3f3deb5..e5cdac3f9 100644
--- a/content/pages/editMetadata.json
+++ b/content/pages/editMetadata.json
@@ -7,7 +7,7 @@
       {
         "name": "name",
         "label": "New Title",
-        "placeholder": "e.g. Shapes of Desert Plants",
+        "placeholder": "e.g. Production data of a manufacturing process",
         "help": "Enter a concise title.",
         "required": true
       },
@@ -35,30 +35,20 @@
         "type": "tabs",
         "fields": [
           {
-            "value": "ipfs",
-            "title": "IPFS",
-            "label": "CID",
-            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
-            "help": "This CID will be stored encrypted after publishing.",
-            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
-            "prominentHelp": true,
-            "type": "files",
-            "required": true
-          },
-          {
-            "value": "arweave",
-            "title": "Arweave",
-            "label": "Transaction ID",
-            "placeholder": "e.g. DBRCL94j3QqdPaUtt4VWRen8rZfJZBb7Ey40iMpXfhtd",
-            "help": "This Transaction ID will be stored encrypted after publishing.",
+            "value": "url",
+            "title": "URL",
+            "label": "File",
+            "placeholder": "e.g. https://file.com/file.json",
+            "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
             "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
             "prominentHelp": true,
             "type": "files",
-            "required": true
+            "required": true,
+            "methods": false
           },
           {
             "value": "url",
-            "title": "URL",
+            "title": "API",
             "label": "File",
             "placeholder": "e.g. https://file.com/file.json",
             "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
@@ -66,6 +56,7 @@
             "prominentHelp": true,
             "type": "files",
             "required": true,
+            "methods": true,
             "innerFields": [
               {
                 "value": "headers",
@@ -74,6 +65,30 @@
                 "placeholder_value": "Authorization",
                 "help": "This HEADERS will be stored encrypted after publishing.",
                 "type": "headers",
+                "required": false
+              }
+            ]
+          },
+          {
+            "value": "saas",
+            "title": "SaaS",
+            "label": "Redirect URL",
+            "placeholder": "e.g. https://delta-dao/the-future-is-now",
+            "help": "The url the user will be redirected to after buying access to the SaaS.",
+            "prominentHelp": true,
+            "type": "saas",
+            "fieldFormPrefix": "saas",
+            "required": true,
+            "methods": false,
+            "innerFields": [
+              {
+                "value": "paymentMode",
+                "title": "PaymentMode",
+                "label": "PaymentMode",
+                "help": "Choose how the payment mode for your Saas.",
+                "type": "select",
+                "selected": "",
+                "options": ["Subscription", "Pay per use"],
                 "required": true
               }
             ]
@@ -88,7 +103,6 @@
             "prominentHelp": true,
             "type": "files",
             "required": true,
-            "headers": true,
             "innerFields": [
               {
                 "value": "headers",
@@ -97,7 +111,7 @@
                 "placeholder_value": "Authorization",
                 "help": "This HEADERS will be stored encrypted after publishing.",
                 "type": "headers",
-                "required": true
+                "required": false
               },
               {
                 "value": "query",
@@ -109,6 +123,17 @@
                 "required": true
               }
             ]
+          },
+          {
+            "value": "ipfs",
+            "title": "IPFS",
+            "label": "CID",
+            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
+            "help": "This CID will be stored encrypted after publishing.",
+            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+            "prominentHelp": true,
+            "type": "files",
+            "required": true
           }
         ],
         "sortOptions": false,
@@ -140,7 +165,14 @@
         "label": "Timeout",
         "help": "Define how long buyers should be able to download the dataset again after the initial purchase.",
         "type": "select",
-        "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
+        "options": [
+          "Forever",
+          "1 hour",
+          "1 day",
+          "1 week",
+          "1 month",
+          "1 year"
+        ],
         "sortOptions": false,
         "required": true
       },
diff --git a/content/price.json b/content/price.json
index 1c741b62c..a7cced126 100644
--- a/content/price.json
+++ b/content/price.json
@@ -1,11 +1,12 @@
 {
   "create": {
     "fixed": {
-      "title": "Fixed",
+      "title": "Priced",
       "info": "Set your price for accessing this dataset. The datatoken for this dataset will be worth the entered amount of the selected base token.",
       "tooltips": {
-        "communityFee": "Goes to Ocean DAO for teams to improve the tools, build apps, do outreach, and more. A small fraction is used to burn OCEAN. This fee is collected when downloading or using an asset in a compute job.",
-        "marketplaceFee": "Goes to the marketplace owner that is hosting and providing the marketplace and is collected when downloading or using an asset in a compute job. In Ocean Market, it is treated as network revenue that goes to the Ocean community."
+        "communityFee": "Goes to the Pontus-X Ecosystem participants to improve the tools, build apps, do outreach, and more. This fee is collected when downloading or using an asset in a compute job.",
+        "marketplaceFee": "Goes to the marketplace owner that is hosting and providing the marketplace and is collected when downloading or using an asset in a compute job.",
+        "earningsAfterFees": "The amount of tokens you will receive after the fees are collected."
       }
     },
     "free": {
diff --git a/content/publish/form.json b/content/publish/form.json
index 74c8a9436..5e3ac646c 100644
--- a/content/publish/form.json
+++ b/content/publish/form.json
@@ -6,7 +6,7 @@
         "name": "nft",
         "label": "Data NFT",
         "type": "nft",
-        "help": "All metadata is stored on-chain in a newly deployed ERC-721 contract representing this asset, created with this name, symbol, description and image.",
+        "help": "Data NFTs are unique digital assets that represent the intellectual property of your digital services, enabling flexible licensing arrangements and enhanced control over your valuable business data. Each Data NFT can issue multiple access tokens with customized terms, enabling varied access levels and durations for your digital service.",
         "required": true
       },
       {
@@ -160,7 +160,7 @@
       },
       {
         "name": "providerUrl",
-        "label": "Provider URL",
+        "label": "Access Controller URL",
         "type": "providerUrl",
         "help": "Enter the URL for your custom [provider](https://github.com/oceanprotocol/provider/) or leave as is to use the default one. If you change your provider URL after adding your file, please add & validate your file again.",
         "placeholder": "e.g. https://provider.oceanprotocol.com/",
@@ -173,31 +173,21 @@
         "type": "tabs",
         "fields": [
           {
-            "value": "ipfs",
-            "title": "IPFS",
-            "label": "CID",
-            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
-            "help": "This CID will be stored encrypted after publishing.",
-            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
-            "prominentHelp": true,
-            "type": "files",
-            "required": true
-          },
-          {
-            "value": "arweave",
-            "title": "Arweave",
-            "label": "Transaction ID",
-            "placeholder": "e.g. DBRCL94j3QqdPaUtt4VWRen8rZfJZBb7Ey40iMpXfhtd",
-            "help": "This Transaction ID will be stored encrypted after publishing.",
+            "value": "url",
+            "title": "URL",
+            "label": "File",
+            "placeholder": "e.g. https://file.com/file.json",
+            "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
             "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
             "prominentHelp": true,
             "type": "files",
-            "required": true
+            "required": true,
+            "methods": false
           },
           {
             "value": "url",
-            "title": "URL",
-            "label": "File",
+            "title": "API",
+            "label": "Endpoint",
             "placeholder": "e.g. https://file.com/file.json",
             "help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
             "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
@@ -217,6 +207,30 @@
               }
             ]
           },
+          {
+            "value": "saas",
+            "title": "SaaS",
+            "label": "Redirect URL",
+            "placeholder": "e.g. https://delta-dao/the-future-is-now",
+            "help": "The url the user will be redirected to after buying access to the Software as a Service offering.",
+            "prominentHelp": true,
+            "type": "saas",
+            "fieldFormPrefix": "metadata.saas",
+            "required": true,
+            "methods": false,
+            "innerFields": [
+              {
+                "value": "paymentMode",
+                "title": "PaymentMode",
+                "label": "PaymentMode",
+                "help": "Choose the payment mode of your Software as a Service offering.",
+                "type": "select",
+                "selected": "",
+                "options": ["Subscription", "Pay per use"],
+                "required": true
+              }
+            ]
+          },
           {
             "value": "graphql",
             "title": "Graphql",
@@ -247,6 +261,17 @@
                 "required": true
               }
             ]
+          },
+          {
+            "value": "ipfs",
+            "title": "IPFS",
+            "label": "CID",
+            "placeholder": "e.g. bafkreidgvpkjawlxz6sffxzwgooowe5yt7i6wsyg236mfoks77nywkptdq",
+            "help": "This CID will be stored encrypted after publishing.",
+            "computeHelp": "For a compute dataset, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. ",
+            "prominentHelp": true,
+            "type": "files",
+            "required": true
           }
         ],
         "sortOptions": false,
@@ -290,15 +315,7 @@
         "disclaimer": "Please do not provide downloadable personal data without the consent of the data subjects.",
         "disclaimerValues": ["Download"]
       },
-      {
-        "name": "timeout",
-        "label": "Timeout",
-        "help": "Define how long buyers should be able to download the dataset again after the initial purchase.",
-        "type": "select",
-        "options": ["Forever", "1 day", "1 week", "1 month", "1 year"],
-        "sortOptions": false,
-        "required": true
-      },
+
       {
         "name": "usesConsumerParameters",
         "label": "User defined parameters",
@@ -306,19 +323,40 @@
         "type": "checkbox",
         "options": ["This asset uses user defined parameters"],
         "required": false
+      }
+    ]
+  },
+  "policies": {
+    "title": "Policies",
+    "fields": [
+      {
+        "name": "timeout",
+        "label": "Access Period",
+        "help": "Define how long buyers should be able to access your offering again after the initial purchase.",
+        "type": "select",
+        "options": [
+          "Forever",
+          "1 hour",
+          "1 day",
+          "1 week",
+          "1 month",
+          "1 year"
+        ],
+        "sortOptions": false,
+        "required": true
       },
       {
         "name": "allow",
-        "label": "Allow ETH Address",
+        "label": "Allow Wallet Address",
         "placeholder": "e.g. 0xe328aB96B7CbB55A6E1c1054678137bA09780acA",
-        "help": "Enter an ETH address and click the ADD button to append to the list. Only ETH addresses in the allow list can consume this asset. If the list is empty anyone can download or compute this asset.",
+        "help": "Enter an wallet address and click the ADD button to append to the list. Only wallet addresses in the allow list can consume this asset. If the list is empty anyone can download or compute this asset. For more information, you can visit the [Pontus-X registry page](https://docs.pontus-x.eu/docs/participants-and-federators/ecosystem-participants).",
         "type": "credentials"
       },
       {
         "name": "deny",
-        "label": "Deny ETH Address",
+        "label": "Deny Wallet Address",
         "placeholder": "e.g. 0xe328aB96B7CbB55A6E1c1054678137bA09780acA",
-        "help": "Enter an ETH address and click the ADD button to append to the list. If an ETH address is in the deny list, download or compute of this asset will be denied for that ETH address.",
+        "help": "Enter an wallet address and click the ADD button to append to the list. If an wallet address is in the deny list, download or compute of this asset will be denied for that wallet address. For more information, you can visit the [Pontus-X registry page](https://docs.pontus-x.eu/docs/participants-and-federators/ecosystem-participants).",
         "type": "credentials"
       }
     ]
diff --git a/content/site.json b/content/site.json
index 2ccdd5cee..1e1466550 100644
--- a/content/site.json
+++ b/content/site.json
@@ -142,6 +142,23 @@
           "isLive": false
         }
       ]
+    },
+    {
+      "name": "Resources",
+      "subItems": [
+        {
+          "name": "Documentation",
+          "link": "https://docs.pontus-x.eu/"
+        },
+        {
+          "name": "Landing Page",
+          "link": "https://www.pontus-x.eu/"
+        },
+        {
+          "name": "nautilus",
+          "link": "https://nautilus.delta-dao.com/"
+        }
+      ]
     }
   ],
   "announcement": "The Pontus-X Devnet is currently undergoing a scheduled load test. The network remains stable and fully operational during this period.",
diff --git a/src/@utils/aquarius/index.ts b/src/@utils/aquarius/index.ts
index 35b1d8111..6cc0858b7 100644
--- a/src/@utils/aquarius/index.ts
+++ b/src/@utils/aquarius/index.ts
@@ -369,13 +369,15 @@ export async function getAlgorithmDatasetsForCompute(
   const baseQueryParams = {
     chainIds: [datasetChainId],
     nestedQuery: {
-      must: {
-        match_phrase: {
-          'services.compute.publisherTrustedAlgorithms.did': {
-            query: algorithmId
+      must: [
+        {
+          match_phrase: {
+            'services.compute.publisherTrustedAlgorithms.did': {
+              query: algorithmId
+            }
           }
         }
-      }
+      ]
     },
     sortOptions: {
       sortBy: SortTermOptions.Created,
diff --git a/src/@utils/ddo.ts b/src/@utils/ddo.ts
index 3366c8e45..f2fea2be5 100644
--- a/src/@utils/ddo.ts
+++ b/src/@utils/ddo.ts
@@ -46,6 +46,8 @@ export function mapTimeoutStringToSeconds(timeout: string): number {
   switch (timeout) {
     case 'Forever':
       return 0
+    case '1 hour':
+      return 3600
     case '1 day':
       return 86400
     case '1 week':
@@ -156,6 +158,16 @@ export function normalizeFile(
       } as Smartcontract
       break
     }
+    case 'saas': {
+      fileObj = {
+        type: 'url',
+        index: 0,
+        url: file ? file[0]?.url || file?.url : null,
+        headers: headersProvider,
+        method: file.method
+      } as UrlFile
+      break
+    }
     default: {
       fileObj = {
         type: 'url',
diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts
index b5f23b0db..f63dc0dc3 100644
--- a/src/@utils/nft.ts
+++ b/src/@utils/nft.ts
@@ -47,10 +47,10 @@ function encodeSvg(svgString: string): string {
 }
 
 const nftMetadataTemplate = {
-  name: 'GX Data NFT',
-  symbol: 'GX-NFT',
-  description: `This NFT represents an asset in Ocean Protocol v4 ecosystems.`,
-  external_url: 'https://minimal-gaia-x.eu'
+  name: 'PX Data NFT',
+  symbol: 'PX-NFT',
+  description: `Data NFTs are unique digital assets that represent the intellectual property of your digital services.`,
+  external_url: 'https://portal.pontus-x.eu'
 }
 
 export function generateNftMetadata(): NftMetadata {
diff --git a/src/@utils/subgraph.ts b/src/@utils/subgraph.ts
index ae51c7728..88ffeb331 100644
--- a/src/@utils/subgraph.ts
+++ b/src/@utils/subgraph.ts
@@ -5,6 +5,8 @@ import { getOceanConfig } from './ocean'
 import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
 import { OpcFeesQuery as OpcFeesData } from '../@types/subgraph/OpcFeesQuery'
 import appConfig from '../../app.config'
+import { chains } from '../../chains.config'
+import { ethers } from 'ethers'
 
 const UserTokenOrders = gql`
   query OrdersData($user: String!) {
@@ -181,12 +183,23 @@ export async function getOpcsApprovedTokens(
     if (!Object.keys(tokenAddressesEUROe).includes(chainId.toString()))
       return approvedTokens
 
-    return approvedTokens.includes(
-      (token) => token.address === tokenAddressesEUROe[chainId]
+    const oceanTokenAddress = chains.find(
+      (chain) => chain.chainId === chainId
+    )?.oceanTokenAddress
+    const approvedTokensWithoutOcean = approvedTokens.filter(
+      (token) =>
+        ethers.utils.getAddress(token.address) !==
+        ethers.utils.getAddress(oceanTokenAddress)
     )
-      ? approvedTokens
+
+    return approvedTokensWithoutOcean.includes(
+      (token) =>
+        ethers.utils.getAddress(token.address) ===
+        ethers.utils.getAddress(tokenAddressesEUROe[chainId])
+    )
+      ? approvedTokensWithoutOcean
       : [
-          ...approvedTokens,
+          ...approvedTokensWithoutOcean,
           {
             address: tokenAddressesEUROe[chainId],
             // TODO: revert once decimals changed to 6 on pontus-x
diff --git a/src/@utils/yup.ts b/src/@utils/yup.ts
index a2d02d51f..cf9792d00 100644
--- a/src/@utils/yup.ts
+++ b/src/@utils/yup.ts
@@ -16,6 +16,7 @@ export function testLinks(isEdit?: boolean) {
         validField = true
         break
       case 'url':
+      case 'saas':
       case 'graphql':
         validField = isUrl(value?.toString() || '')
         // if we're in publish, the field must be valid
diff --git a/src/components/@shared/AddNetwork/index.module.css b/src/components/@shared/AddNetwork/index.module.css
index 4a7348b00..e9f147bd7 100644
--- a/src/components/@shared/AddNetwork/index.module.css
+++ b/src/components/@shared/AddNetwork/index.module.css
@@ -7,3 +7,7 @@
   padding: 1px;
   fill: var(--color-primary);
 }
+
+.networkName {
+  text-transform: uppercase;
+}
diff --git a/src/components/@shared/AddNetwork/index.tsx b/src/components/@shared/AddNetwork/index.tsx
index 26f44dbd6..bb084b118 100644
--- a/src/components/@shared/AddNetwork/index.tsx
+++ b/src/components/@shared/AddNetwork/index.tsx
@@ -30,8 +30,10 @@ export default function AddNetwork({
       </span>
 
       <span className={AddTokenStyles.text}>
-        {'Add '}
-        <span className={AddTokenStyles.symbol}>{networkName}</span>
+        {'Connect to '}
+        <span className={`${AddTokenStyles.symbol} ${styles.networkName}`}>
+          {networkName}
+        </span>
       </span>
     </Button>
   )
diff --git a/src/components/@shared/AssetTeaser/index.tsx b/src/components/@shared/AssetTeaser/index.tsx
index 9d0f04656..e8203ad0b 100644
--- a/src/components/@shared/AssetTeaser/index.tsx
+++ b/src/components/@shared/AssetTeaser/index.tsx
@@ -41,9 +41,9 @@ export default function AssetTeaser({
         <aside className={styles.detailLine}>
           <AssetType
             className={styles.typeLabel}
-            type={asset.metadata.additionalInformation?.saas ? 'saas' : type}
+            type={asset?.metadata?.additionalInformation?.saas ? 'saas' : type}
             accessType={
-              asset.metadata.additionalInformation?.saas ? 'saas' : accessType
+              asset?.metadata?.additionalInformation?.saas ? 'saas' : accessType
             }
           />
           <span className={styles.typeLabel}>
diff --git a/src/components/@shared/FormInput/InputElement/Credential/index.module.css b/src/components/@shared/FormInput/InputElement/Credential/index.module.css
index df7b52ed6..410f84a81 100644
--- a/src/components/@shared/FormInput/InputElement/Credential/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/Credential/index.module.css
@@ -4,3 +4,7 @@
   gap: calc(var(--spacer) / 4);
   margin-top: calc(var(--spacer) / 2);
 }
+
+.address {
+  background: var(--input-background) !important;
+}
diff --git a/src/components/@shared/FormInput/InputElement/Credential/index.tsx b/src/components/@shared/FormInput/InputElement/Credential/index.tsx
index 660739231..0a3826f4e 100644
--- a/src/components/@shared/FormInput/InputElement/Credential/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/Credential/index.tsx
@@ -65,7 +65,12 @@ export default function Credentials(props: InputProps) {
             return (
               <div className={styles.addressListContainer} key={value}>
                 <InputGroup>
-                  <InputElement name={`address[${i}]`} value={value} disabled />
+                  <InputElement
+                    className={styles.address}
+                    name={`address[${i}]`}
+                    value={value}
+                    disabled
+                  />
                   <Button
                     style="primary"
                     size="small"
diff --git a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
index 01e9a6714..903f891a1 100644
--- a/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
+++ b/src/components/@shared/FormInput/InputElement/FilesInput/index.tsx
@@ -33,6 +33,7 @@ export default function FilesInput(props: InputProps): ReactElement {
   const abi = field.value[0].abi || undefined
   const headers = field.value[0].headers || undefined
   const method = field.value[0].method || undefined
+  const [paymentModeField] = useField(`${props.fieldFormPrefix}.paymentMode`)
 
   async function handleValidation(e: React.SyntheticEvent, url: string) {
     // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
@@ -102,17 +103,18 @@ export default function FilesInput(props: InputProps): ReactElement {
   function handleClose() {
     helpers.setTouched(false)
     helpers.setValue([
-      { url: '', type: storageType === 'hidden' ? 'ipfs' : storageType }
+      { url: '', type: storageType === 'hidden' ? 'url' : storageType }
     ])
   }
 
   useEffect(() => {
-    storageType === 'graphql' && setDisabledButton(!providerUrl || !query)
+    if (storageType === 'graphql') setDisabledButton(!providerUrl || !query)
 
-    storageType === 'smartcontract' &&
+    if (storageType === 'smartcontract')
       setDisabledButton(!providerUrl || !abi || !checkJson(abi))
 
-    storageType === 'url' && setDisabledButton(!providerUrl)
+    if (storageType === 'url' || storageType === 'saas')
+      setDisabledButton(!providerUrl)
 
     if (meta.error?.length > 0) {
       const { url } = meta.error[0] as unknown as FileInfo
@@ -143,7 +145,9 @@ export default function FilesInput(props: InputProps): ReactElement {
               name={`${field.name}[0].url`}
               isLoading={isLoading}
               hideButton={
-                storageType === 'graphql' || storageType === 'smartcontract'
+                storageType === 'graphql' ||
+                storageType === 'smartcontract' ||
+                storageType === 'saas'
               }
               checkUrl={true}
               handleButtonClick={handleValidation}
@@ -157,43 +161,49 @@ export default function FilesInput(props: InputProps): ReactElement {
                 {props.innerFields &&
                   props.innerFields.map((innerField: any, i: number) => {
                     return (
-                      <>
-                        <Field
-                          key={i}
-                          component={
-                            innerField.type === 'headers'
-                              ? InputKeyValue
-                              : Input
-                          }
-                          {...innerField}
-                          name={`${field.name}[0].${innerField.value}`}
-                          value={field.value[0][innerField.value]}
-                        />
-                      </>
+                      <Field
+                        key={i}
+                        component={
+                          innerField.type === 'headers' ? InputKeyValue : Input
+                        }
+                        {...innerField}
+                        name={
+                          storageType === 'saas'
+                            ? `${props.fieldFormPrefix}.${innerField.value}`
+                            : `${field.name}[0].${innerField.value}`
+                        }
+                        value={
+                          storageType === 'saas'
+                            ? paymentModeField.value
+                            : field.value[0][innerField.value]
+                        }
+                      />
                     )
                   })}
               </div>
 
-              <Button
-                style="primary"
-                onClick={(e: React.SyntheticEvent) => {
-                  e.preventDefault()
-                  handleValidation(e, field.value[0].url)
-                }}
-                disabled={disabledButton}
-              >
-                {isLoading ? (
-                  <Loader />
-                ) : (
-                  `submit ${
-                    storageType === 'graphql'
-                      ? 'query'
-                      : storageType === 'smartcontract'
-                      ? 'abi'
-                      : 'url'
-                  }`
-                )}
-              </Button>
+              {storageType !== 'saas' && (
+                <Button
+                  style="primary"
+                  onClick={(e: React.SyntheticEvent) => {
+                    e.preventDefault()
+                    handleValidation(e, field.value[0].url)
+                  }}
+                  disabled={disabledButton}
+                >
+                  {isLoading ? (
+                    <Loader />
+                  ) : (
+                    `submit ${
+                      storageType === 'graphql'
+                        ? 'query'
+                        : storageType === 'smartcontract'
+                        ? 'abi'
+                        : 'url'
+                    }`
+                  )}
+                </Button>
+              )}
             </>
           )}
         </>
diff --git a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
index 0a7fa2e8d..239642fed 100644
--- a/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/KeyValueInput/index.module.css
@@ -13,6 +13,10 @@
   margin-bottom: var(--spacer);
 }
 
+.pairsAddedContainer input {
+  background-color: var(--input-background) !important;
+}
+
 .hasError label {
   color: var(--brand-alert-red);
 }
diff --git a/src/components/@shared/FormInput/InputElement/MethodInput/index.module.css b/src/components/@shared/FormInput/InputElement/MethodInput/index.module.css
index 63fc6131b..5802ec82d 100644
--- a/src/components/@shared/FormInput/InputElement/MethodInput/index.module.css
+++ b/src/components/@shared/FormInput/InputElement/MethodInput/index.module.css
@@ -34,7 +34,7 @@
   border: 0;
 }
 
-.hasError {
+.hasError input {
   color: var(--brand-alert-red);
   border-color: var(--brand-alert-red);
 }
diff --git a/src/components/@shared/FormInput/index.tsx b/src/components/@shared/FormInput/index.tsx
index 02321232d..a8622f8e6 100644
--- a/src/components/@shared/FormInput/index.tsx
+++ b/src/components/@shared/FormInput/index.tsx
@@ -79,6 +79,7 @@ export interface InputProps {
   disclaimerValues?: string[]
   accountId?: string
   actions?: string[]
+  fieldFormPrefix?: string
 }
 
 function checkError(form: any, field: FieldInputProps<any>) {
diff --git a/src/components/@shared/MenuDropdown/index.module.css b/src/components/@shared/MenuDropdown/index.module.css
index b889ea19f..4f346418f 100644
--- a/src/components/@shared/MenuDropdown/index.module.css
+++ b/src/components/@shared/MenuDropdown/index.module.css
@@ -30,3 +30,15 @@ svg.caret {
 [aria-expanded='true'] .caret {
   transform: rotate(180deg);
 }
+
+[aria-expanded='true'] .menuItem,
+[aria-expanded='true'] .caret,
+[aria-expanded='true'] svg.caret {
+  fill: var(--menu-caret-active-fill-color);
+  color: var(--menu-caret-active-fill-color);
+}
+
+[aria-expanded='true'] .menuItem:after {
+  transform: scaleX(1);
+  background: var(--menu-font-color-hover);
+}
diff --git a/src/components/@shared/NetworkName/index.module.css b/src/components/@shared/NetworkName/index.module.css
index d1e0c214b..278a2b8f7 100644
--- a/src/components/@shared/NetworkName/index.module.css
+++ b/src/components/@shared/NetworkName/index.module.css
@@ -27,7 +27,7 @@
   opacity: 1;
 }
 
-@media screen and (min-width: 47rem) {
+@media screen and (min-width: 52rem) {
   .minimal .name,
   .minimal:hover .name {
     width: auto;
diff --git a/src/components/@shared/Onboarding/Steps/ImportCustomTokens.tsx b/src/components/@shared/Onboarding/Steps/ImportCustomTokens.tsx
index 7370406e5..e02cde071 100644
--- a/src/components/@shared/Onboarding/Steps/ImportCustomTokens.tsx
+++ b/src/components/@shared/Onboarding/Steps/ImportCustomTokens.tsx
@@ -7,7 +7,7 @@ import content from '../../../../../content/onboarding/steps/importCustomTokens.
 import { useAccount, useNetwork, useProvider } from 'wagmi'
 import { addTokenToWallet } from '@utils/wallet'
 import { getErrorMessage } from '@utils/onboarding'
-import { tokenLogos } from '@components/Header/Wallet/AddTokenList'
+import { tokenLogos } from '@components/Header/NetworkMenu/AddTokenList'
 import { useMarketMetadata } from '@context/MarketMetadata'
 import { getSupportedChainIds } from '../../../../../chains.config'
 
diff --git a/src/components/@shared/Onboarding/Steps/ImportWallet.tsx b/src/components/@shared/Onboarding/Steps/ImportWallet.tsx
index 660ea026e..1992b4519 100644
--- a/src/components/@shared/Onboarding/Steps/ImportWallet.tsx
+++ b/src/components/@shared/Onboarding/Steps/ImportWallet.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import { OnboardingStep } from '..'
 import StepBody from '../StepBody'
 import StepHeader from '../StepHeader'
diff --git a/src/components/@shared/atoms/Button/index.module.css b/src/components/@shared/atoms/Button/index.module.css
index b32633e2c..4ed7df2f9 100644
--- a/src/components/@shared/atoms/Button/index.module.css
+++ b/src/components/@shared/atoms/Button/index.module.css
@@ -43,20 +43,32 @@
 }
 
 .primary,
-.primary:hover,
 .primary:focus,
 .primary:active {
+  border: var(--border-size-md) solid var(--button-primary-border-color);
   background: var(--button-primary-background);
+  transform: none;
+}
+
+.primary:hover {
+  background: var(--button-primary-hover-background);
+  border-color: var(--button-primary-hover-border-color);
+  transform: none;
 }
 
 .ghost,
-.ghost:hover,
 .ghost:focus,
 .ghost:active {
   color: var(--button-ghost-font-color);
   background: var(--button-ghost-background);
 }
 
+.ghost:hover {
+  color: var(--button-ghost-font-color);
+  background: var(--button-ghost-hover-background);
+  transform: none;
+}
+
 .text,
 .text:hover,
 .text:focus,
diff --git a/src/components/@shared/atoms/Table/_styles.ts b/src/components/@shared/atoms/Table/_styles.ts
index 275461fb1..d37a84f0b 100644
--- a/src/components/@shared/atoms/Table/_styles.ts
+++ b/src/components/@shared/atoms/Table/_styles.ts
@@ -40,7 +40,8 @@ export const customStyles: TableStyles = {
     style: {
       textTransform: 'uppercase',
       color: 'var(--color-secondary)',
-      fontSize: 'var(--font-size-small)'
+      fontSize: 'var(--font-size-small)',
+      fontWeight: 'var(--font-weight-bold)'
     }
   },
   cells: {
diff --git a/src/components/@shared/atoms/TabsFile/index.tsx b/src/components/@shared/atoms/TabsFile/index.tsx
index a043212fe..c78470a05 100644
--- a/src/components/@shared/atoms/TabsFile/index.tsx
+++ b/src/components/@shared/atoms/TabsFile/index.tsx
@@ -85,35 +85,33 @@ export default function TabsFile({
       <div className={styles.tabContent}>
         {items.map((item, index) => {
           return (
-            <>
-              <TabPanel
-                key={`tabpanel_${items[tabIndex].props.name}_${index}`}
-                className={styles.tabPanel}
-              >
-                {!isHidden && (
-                  <label className={styles.tabLabel}>
-                    {item.field.label}
-                    {item.field.required && (
-                      <span title="Required" className={styles.required}>
-                        *
-                      </span>
-                    )}
-                    {item.field.help && item.field.prominentHelp && (
-                      <Tooltip
-                        content={
-                          <Markdown
-                            text={`${item.field.help} ${
-                              textToolTip ? item.field.computeHelp : ''
-                            }`}
-                          />
-                        }
-                      />
-                    )}
-                  </label>
-                )}
-                {item.content}
-              </TabPanel>
-            </>
+            <TabPanel
+              key={`tabpanel_${items[tabIndex].props.name}_${index}`}
+              className={styles.tabPanel}
+            >
+              {!isHidden && (
+                <label className={styles.tabLabel}>
+                  {item.field.label}
+                  {item.field.required && (
+                    <span title="Required" className={styles.required}>
+                      *
+                    </span>
+                  )}
+                  {item.field.help && item.field.prominentHelp && (
+                    <Tooltip
+                      content={
+                        <Markdown
+                          text={`${item.field.help} ${
+                            textToolTip ? item.field.computeHelp : ''
+                          }`}
+                        />
+                      }
+                    />
+                  )}
+                </label>
+              )}
+              {item.content}
+            </TabPanel>
           )
         })}
       </div>
diff --git a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
index a163c2c87..a7bfaf2f7 100644
--- a/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
+++ b/src/components/Asset/AssetActions/Compute/PriceOutput.module.css
@@ -15,6 +15,10 @@
   display: inline-block !important;
 }
 
+.priceComponent strong {
+  color: var(--color-secondary);
+}
+
 .calculation {
   min-width: 12rem;
 }
diff --git a/src/components/Asset/Edit/DebugEditMetadata.tsx b/src/components/Asset/Edit/DebugEditMetadata.tsx
index b2eb1a32a..635327816 100644
--- a/src/components/Asset/Edit/DebugEditMetadata.tsx
+++ b/src/components/Asset/Edit/DebugEditMetadata.tsx
@@ -19,6 +19,15 @@ export default function DebugEditMetadata({
   const [valuePreview, setValuePreview] = useState({})
   const linksTransformed = values.links?.length &&
     values.links[0].valid && [sanitizeUrl(values.links[0].url)]
+  const saasDetails =
+    values.files[0].type === 'hidden'
+      ? asset?.metadata?.additionalInformation?.saas
+      : values.files[0].type === 'saas'
+      ? {
+          redirectUrl: sanitizeUrl(values.files[0].url),
+          paymentMode: values.saas.paymentMode
+        }
+      : {}
 
   const newMetadata: Metadata = {
     ...asset?.metadata,
@@ -30,9 +39,17 @@ export default function DebugEditMetadata({
     license: values.license,
     additionalInformation: {
       ...asset?.metadata?.additionalInformation,
-      gaiaXInformation: values.gaiaXInformation
+      gaiaXInformation: values.gaiaXInformation,
+      saas: saasDetails
     }
   }
+
+  const showSaas =
+    (values.files[0].type === 'hidden' &&
+      asset?.metadata?.additionalInformation?.saas) ||
+    values.files[0].type === 'saas'
+  if (!showSaas) delete newMetadata.additionalInformation.saas
+
   if (asset.metadata.type === 'algorithm') {
     newMetadata.algorithm.consumerParameters = !values.usesConsumerParameters
       ? undefined
diff --git a/src/components/Asset/Edit/EditMetadata.tsx b/src/components/Asset/Edit/EditMetadata.tsx
index f5c72ad12..83800d1e8 100644
--- a/src/components/Asset/Edit/EditMetadata.tsx
+++ b/src/components/Asset/Edit/EditMetadata.tsx
@@ -169,7 +169,15 @@ export default function Edit({
           asset.services[0].serviceEndpoint
         )
         updatedFiles = filesEncrypted
+
+        values.files[0].type === 'saas'
+          ? (updatedMetadata.additionalInformation.saas = {
+              redirectUrl: sanitizeUrl(values.files[0].url),
+              paymentMode: values.saas.paymentMode
+            })
+          : delete updatedMetadata.additionalInformation.saas
       }
+
       const updatedService: Service = {
         ...asset.services[0],
         timeout: mapTimeoutStringToSeconds(values.timeout),
diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts
index 21fe72993..3de71ee5b 100644
--- a/src/components/Asset/Edit/_constants.ts
+++ b/src/components/Asset/Edit/_constants.ts
@@ -47,7 +47,8 @@ export function getInitialValues(
       termsAndConditions: metadata?.additionalInformation?.gaiaXInformation
         ?.termsAndConditions || [{ url: '' }]
     },
-    license: metadata?.license
+    license: metadata?.license,
+    saas: metadata?.additionalInformation?.saas || {}
   }
 }
 
diff --git a/src/components/Asset/Edit/_types.ts b/src/components/Asset/Edit/_types.ts
index 2176ee0f7..07df47dff 100644
--- a/src/components/Asset/Edit/_types.ts
+++ b/src/components/Asset/Edit/_types.ts
@@ -1,4 +1,7 @@
-import { FormConsumerParameter } from '@components/Publish/_types'
+import {
+  FormConsumerParameter,
+  SAAS_PAYMENT_MODE
+} from '@components/Publish/_types'
 import { FileInfo } from '@oceanprotocol/lib'
 import { GaiaXInformation2210 } from 'src/@types/gaia-x/2210/GXInformation'
 import { ServiceCredential } from 'src/@types/gaia-x/2210/ServiceCredential'
@@ -28,6 +31,10 @@ export interface MetadataEditForm {
     serviceSD?: ServiceCredential
   }
   license?: string
+  saas: {
+    redirectUrl?: string
+    paymentMode?: SAAS_PAYMENT_MODE
+  }
 }
 
 export interface ComputeEditForm {
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 79579feb6..de41171e6 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/src/components/Asset/Edit/_validation.ts
@@ -17,7 +17,7 @@ export const validationSchema = Yup.object().shape({
         valid: Yup.boolean().test((value, context) => {
           const { type } = context.parent
           // allow user to submit if the value type is hidden
-          if (type === 'hidden') return true
+          if (type === 'hidden' || type === 'saas') return true
           return value || false
         })
       })
diff --git a/src/components/Header/Menu.module.css b/src/components/Header/Menu.module.css
index 2120f9183..c8036d1b4 100644
--- a/src/components/Header/Menu.module.css
+++ b/src/components/Header/Menu.module.css
@@ -36,7 +36,7 @@
   margin-left: auto;
 }
 
-@media screen and (min-width: 75rem) {
+@media screen and (min-width: 94rem) {
   .navigation {
     order: 2;
     width: auto;
@@ -50,7 +50,7 @@
   }
 }
 
-@media screen and (min-width: 75rem) {
+@media screen and (min-width: 94rem) {
   .menu {
     padding: calc(var(--spacer) / 1.5);
   }
@@ -157,7 +157,7 @@ svg.caret {
   transform: rotate(180deg);
 }
 
-@media screen and (min-width: 75rem) {
+@media screen and (min-width: 94rem) {
   .caret,
   svg.caret {
     display: inline-block;
diff --git a/src/components/Header/Menu.tsx b/src/components/Header/Menu.tsx
index 394154744..964f67c33 100644
--- a/src/components/Header/Menu.tsx
+++ b/src/components/Header/Menu.tsx
@@ -12,6 +12,7 @@ import SearchButton from './SearchButton'
 import Button from '@components/@shared/atoms/Button'
 import UserPreferences from './UserPreferences'
 import Automation from './UserPreferences/Automation'
+import NetworkMenu from './NetworkMenu'
 const Wallet = loadable(() => import('./Wallet'))
 
 const cx = classNames.bind(styles)
@@ -75,6 +76,7 @@ export default function Menu(): ReactElement {
       <div className={styles.actions}>
         <SearchButton />
         {appConfig.chainIdsSupported.length > 1 && <Networks />}
+        <NetworkMenu />
         <Wallet />
         <Automation />
         <UserPreferences />
diff --git a/src/components/Header/Wallet/AddTokenList.tsx b/src/components/Header/NetworkMenu/AddTokenList.tsx
similarity index 100%
rename from src/components/Header/Wallet/AddTokenList.tsx
rename to src/components/Header/NetworkMenu/AddTokenList.tsx
diff --git a/src/components/Header/NetworkMenu/Details.module.css b/src/components/Header/NetworkMenu/Details.module.css
new file mode 100644
index 000000000..d021e8d09
--- /dev/null
+++ b/src/components/Header/NetworkMenu/Details.module.css
@@ -0,0 +1,44 @@
+.details {
+  composes: details from '../Wallet/Details.module.css';
+}
+
+.details > section[class*='feedback'] {
+  margin-top: var(--sub-section-spacing);
+}
+
+.networks,
+.tokens {
+  color: var(--font-color-text);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.tokens {
+  margin-top: var(--sub-section-spacing);
+  margin-bottom: calc(var(--spacer) / 3);
+  padding-top: var(--sub-section-spacing);
+  border-top: var(--menu-mobile-navigation-border-size) solid
+    var(--menu-mobile-navigation-border-color);
+}
+
+.networks p,
+.tokens p {
+  margin: 0;
+}
+
+.networks button,
+.networks button:hover,
+.tokens button,
+.tokens button:hover {
+  display: block;
+  font-size: var(--font-size-mini);
+  margin-top: calc(var(--spacer) / 3);
+  text-align: left;
+}
+
+.networks select,
+.tokens select {
+  margin-top: calc(var(--spacer) / 4);
+  min-width: 6rem;
+}
diff --git a/src/components/Header/NetworkMenu/Details.tsx b/src/components/Header/NetworkMenu/Details.tsx
new file mode 100644
index 000000000..24296b0c5
--- /dev/null
+++ b/src/components/Header/NetworkMenu/Details.tsx
@@ -0,0 +1,43 @@
+import { ReactElement } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+import styles from './Details.module.css'
+import AddTokenList from './AddTokenList'
+import { getCustomChainIds } from 'chains.config'
+import AddNetwork from '@components/@shared/AddNetwork'
+
+export default function Details(): ReactElement {
+  const { connector: activeConnector } = useAccount()
+
+  const { chains, chain: activeChain } = useNetwork()
+
+  const networksListToDisplay = chains.filter(
+    (chain) => chain.id !== activeChain?.id
+  )
+
+  return (
+    <div className={styles.details}>
+      <ul>
+        <li className={styles.networks}>
+          <div title="Networks">Networks</div>
+          {networksListToDisplay?.length > 0 &&
+            networksListToDisplay.map((chain) => {
+              if (!getCustomChainIds().includes(chain.id)) return false
+              return (
+                <AddNetwork
+                  key={`add-network-button-${chain.id}`}
+                  chainId={chain.id}
+                  networkName={chain.name}
+                />
+              )
+            })}
+        </li>
+        {activeConnector?.name === 'MetaMask' && (
+          <li className={styles.tokens}>
+            <div title="Tokens">Tokens</div>
+            <AddTokenList />
+          </li>
+        )}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/components/Header/Wallet/Network.module.css b/src/components/Header/NetworkMenu/Network.module.css
similarity index 54%
rename from src/components/Header/Wallet/Network.module.css
rename to src/components/Header/NetworkMenu/Network.module.css
index f42490b36..101d3c2af 100644
--- a/src/components/Header/Wallet/Network.module.css
+++ b/src/components/Header/NetworkMenu/Network.module.css
@@ -1,18 +1,20 @@
 .network {
+  height: 100%;
   border: var(--menu-border-size) solid var(--menu-border-color);
-  border-right: none;
   border-top-left-radius: var(--menu-border-radius);
   border-bottom-left-radius: var(--menu-border-radius);
   padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  background: var(--background-content);
   white-space: nowrap;
-  margin-right: -3px;
   display: inline-flex;
   align-items: center;
+  cursor: pointer;
 }
 
 .name {
   font-size: var(--font-size-small);
   color: var(--menu-font-color);
+  cursor: pointer;
 }
 
 .badge {
@@ -25,3 +27,25 @@
 .warning {
   margin-right: calc(var(--spacer) / 14);
 }
+
+.caret {
+  display: none;
+  width: var(--menu-caret-size);
+  height: var(--menu-caret-size);
+  fill: var(--menu-icon-color-fill);
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 3);
+  transition: transform 0.2s ease-out;
+}
+
+[aria-expanded='true'] .caret {
+  transform: rotate(180deg);
+}
+
+@media screen and (min-width: 25rem) {
+  .caret {
+    display: inline-block;
+    fill: var(--menu-icon-fill-color);
+  }
+}
diff --git a/src/components/Header/Wallet/Network.tsx b/src/components/Header/NetworkMenu/Network.tsx
similarity index 85%
rename from src/components/Header/Wallet/Network.tsx
rename to src/components/Header/NetworkMenu/Network.tsx
index 7063b9f91..f44bbddd6 100644
--- a/src/components/Header/Wallet/Network.tsx
+++ b/src/components/Header/NetworkMenu/Network.tsx
@@ -6,13 +6,14 @@ import NetworkName from '@shared/NetworkName'
 import styles from './Network.module.css'
 import { useNetwork } from 'wagmi'
 import useNetworkMetadata from '@hooks/useNetworkMetadata'
+import Caret from '@images/caret.svg'
 
 export default function Network(): ReactElement {
   const { chain } = useNetwork()
   const { isTestnet, isSupportedOceanNetwork } = useNetworkMetadata()
 
   return chain?.id ? (
-    <div className={styles.network}>
+    <button className={styles.network}>
       {!isSupportedOceanNetwork && (
         <Tooltip content="No Ocean Protocol contracts are deployed to this network.">
           <Status state="error" className={styles.warning} />
@@ -20,6 +21,7 @@ export default function Network(): ReactElement {
       )}
       <NetworkName className={styles.name} networkId={chain.id} minimal />
       {isTestnet && <Badge label="Test" className={styles.badge} />}
-    </div>
+      <Caret aria-hidden="true" className={styles.caret} />
+    </button>
   ) : null
 }
diff --git a/src/components/Header/NetworkMenu/index.module.css b/src/components/Header/NetworkMenu/index.module.css
new file mode 100644
index 000000000..6cce37748
--- /dev/null
+++ b/src/components/Header/NetworkMenu/index.module.css
@@ -0,0 +1,4 @@
+.networkMenu {
+  display: flex;
+  align-self: stretch;
+}
diff --git a/src/components/Header/NetworkMenu/index.tsx b/src/components/Header/NetworkMenu/index.tsx
new file mode 100644
index 000000000..a7b4765af
--- /dev/null
+++ b/src/components/Header/NetworkMenu/index.tsx
@@ -0,0 +1,18 @@
+import { ReactElement } from 'react'
+import Network from './Network'
+import Details from './Details'
+import Tooltip from '@shared/atoms/Tooltip'
+import styles from './index.module.css'
+import { useNetwork } from 'wagmi'
+
+export default function NetworkMenu(): ReactElement {
+  const { chain } = useNetwork()
+
+  return chain?.id ? (
+    <div className={styles.networkMenu}>
+      <Tooltip content={<Details />} trigger="click focus mouseenter">
+        <Network />
+      </Tooltip>
+    </div>
+  ) : null
+}
diff --git a/src/components/Header/UserPreferences/Automation/Decrypt.module.css b/src/components/Header/UserPreferences/Automation/Decrypt.module.css
index 564115d1e..7a8c5b9e4 100644
--- a/src/components/Header/UserPreferences/Automation/Decrypt.module.css
+++ b/src/components/Header/UserPreferences/Automation/Decrypt.module.css
@@ -19,6 +19,10 @@
   margin: 0;
 }
 
+.form > input {
+  border: var(--border-size-sm) solid var(--border-color);
+}
+
 .form > button {
   margin-left: calc(var(--spacer) / 4);
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);
diff --git a/src/components/Header/UserPreferences/Networks/NetworksList.module.css b/src/components/Header/UserPreferences/Networks/NetworksList.module.css
index 516900d9d..00f3ee121 100644
--- a/src/components/Header/UserPreferences/Networks/NetworksList.module.css
+++ b/src/components/Header/UserPreferences/Networks/NetworksList.module.css
@@ -7,6 +7,8 @@
 
 .networks {
   composes: box from '@shared/atoms/Box.module.css';
+
   box-shadow: none;
   padding: 0;
+  border-width: var(--border-size-sm);
 }
diff --git a/src/components/Header/UserPreferences/Networks/index.module.css b/src/components/Header/UserPreferences/Networks/index.module.css
index 24b0ca1eb..051169ee3 100644
--- a/src/components/Header/UserPreferences/Networks/index.module.css
+++ b/src/components/Header/UserPreferences/Networks/index.module.css
@@ -17,5 +17,5 @@
   border-radius: 50%;
   margin: 0 1px;
   display: inline-block;
-  background-color: var(--menu-icon-fill-color);
+  background-color: var(--menu-caret-active-fill-color);
 }
diff --git a/src/components/Header/Wallet/Account.module.css b/src/components/Header/Wallet/Account.module.css
index c101f7cb7..2b8ed6a0c 100644
--- a/src/components/Header/Wallet/Account.module.css
+++ b/src/components/Header/Wallet/Account.module.css
@@ -8,7 +8,6 @@
   white-space: nowrap;
   background: var(--background-content);
   margin: 0;
-  transition: border 0.2s ease-out;
   cursor: pointer;
   height: 100%;
   display: flex;
@@ -37,14 +36,12 @@
 .address {
   display: none;
   text-transform: none;
-  border-right: var(--menu-border-size) solid var(--menu-border-color);
-  padding-right: calc(var(--spacer) / 3);
   padding-left: calc(var(--spacer) / 8);
 }
 
 .button svg {
-  width: 1em;
-  height: 1em;
+  width: var(--menu-caret-size);
+  height: var(--menu-caret-size);
   fill: var(--menu-icon-color-fill);
   display: inline-block;
   vertical-align: middle;
@@ -78,7 +75,7 @@ svg.caret {
   }
 }
 
-@media screen and (min-width: 47rem) {
+@media screen and (min-width: 52rem) {
   .address {
     display: inline-block;
   }
diff --git a/src/components/Header/Wallet/Details.module.css b/src/components/Header/Wallet/Details.module.css
index 37f073951..755c2c765 100644
--- a/src/components/Header/Wallet/Details.module.css
+++ b/src/components/Header/Wallet/Details.module.css
@@ -9,7 +9,6 @@
 @media (min-width: 40rem) {
   .details {
     padding: var(--sub-section-spacing);
-    margin-right: calc(var(--spacer) / 3);
     min-width: 20rem;
   }
 }
@@ -22,7 +21,6 @@
 .bookmarksLink {
   display: flex;
   align-items: center;
-  padding-top: calc(var(--sub-section-spacing) / 2);
 }
 
 .profileLink img,
@@ -42,61 +40,20 @@
   composes: link from '../../../components/Header/Menu.module.css';
 }
 
-.actions {
-  border-top: var(--menu-mobile-navigation-border-size) solid
-    var(--menu-mobile-navigation-border-color);
+.walletInfo {
   margin-top: var(--sub-section-spacing);
+  margin-bottom: calc(var(--spacer) / 3);
   padding-top: var(--sub-section-spacing);
-  padding-bottom: calc(var(--sub-section-spacing) / 2);
-  font-size: var(--font-size-small);
-  color: var(--font-color-text);
-  display: flex;
-  justify-content: space-between;
+  border-top: var(--menu-mobile-navigation-border-size) solid
+    var(--menu-mobile-navigation-border-color);
 }
 
 .walletLogoWrap {
   display: block;
 }
 
-.actions p {
-  margin: 0;
-}
-
-.actions button,
-.actions button:hover {
-  display: block;
-  font-size: var(--font-size-mini);
-  margin-top: calc(var(--spacer) / 3);
-  text-align: left;
-}
-
-.actions button:first-child {
-  margin-top: calc(var(--spacer) / 8);
-}
-
-.walletLogo {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: calc(var(--spacer) / 8);
-  margin-top: -0.2rem;
-}
-
-.actions select {
-  margin-top: calc(var(--spacer) / 4);
-  min-width: 6rem;
-}
-
-.walletInfo {
+.actions {
   display: flex;
   flex-direction: column;
-}
-
-.walletInfo button {
-  margin-top: calc(var(--spacer) / 5) !important;
-}
-
-.addToken {
-  margin-left: 0.3rem;
+  gap: calc(var(--spacer) / 3);
 }
diff --git a/src/components/Header/Wallet/Details.tsx b/src/components/Header/Wallet/Details.tsx
index f4672488b..061e64b1c 100644
--- a/src/components/Header/Wallet/Details.tsx
+++ b/src/components/Header/Wallet/Details.tsx
@@ -1,21 +1,16 @@
 import { ReactElement } from 'react'
-import Button from '@shared/atoms/Button'
-// import { useOrbis } from '@context/DirectMessages'
-import { useDisconnect, useAccount, useConnect, useNetwork } from 'wagmi'
+import { useAccount, useConnect, useDisconnect } from 'wagmi'
 import styles from './Details.module.css'
 import Avatar from '@components/@shared/atoms/Avatar'
 import Bookmark from '@images/bookmark.svg'
 import { MenuLink } from '../Menu'
-import AddTokenList from './AddTokenList'
-import { getCustomChainIds } from 'chains.config'
-import AddNetwork from '@components/@shared/AddNetwork'
+import Button from '@components/@shared/atoms/Button'
 
 export default function Details(): ReactElement {
-  const { connector: activeConnector, address: accountId } = useAccount()
+  const { address: accountId, connector: activeConnector } = useAccount()
 
   const { connect } = useConnect()
   const { disconnect } = useDisconnect()
-  const { chains } = useNetwork()
 
   return (
     <div className={styles.details}>
@@ -36,32 +31,18 @@ export default function Details(): ReactElement {
             className={styles.bookmarksButton}
           />
         </li>
-        <li className={styles.actions}>
+        <li>
           <div title="Connected provider" className={styles.walletInfo}>
             <span className={styles.walletLogoWrap}>
-              {/* <img className={styles.walletLogo} src={activeConnector?.logo} /> */}
               {activeConnector?.name}
             </span>
-            {chains &&
-              chains.map((chain) => {
-                if (!getCustomChainIds().includes(chain.id)) return false
-                return (
-                  <AddNetwork
-                    key={`Add-Network-Button${chain.id}`}
-                    chainId={chain.id}
-                    networkName={chain.name}
-                  />
-                )
-              })}
-            {activeConnector?.name === 'MetaMask' && <AddTokenList />}
           </div>
-          <p>
+          <div className={styles.actions}>
             <Button
               style="text"
               size="small"
               onClick={async () => {
                 connect()
-                // checkOrbisConnection({ address: accountId })
               }}
             >
               Switch Wallet
@@ -71,13 +52,12 @@ export default function Details(): ReactElement {
               size="small"
               onClick={() => {
                 disconnect()
-                // disconnectOrbis(accountId)
                 location.reload()
               }}
             >
               Disconnect
             </Button>
-          </p>
+          </div>
         </li>
       </ul>
     </div>
diff --git a/src/components/Header/Wallet/index.tsx b/src/components/Header/Wallet/index.tsx
index efb898d55..5a5c713f2 100644
--- a/src/components/Header/Wallet/index.tsx
+++ b/src/components/Header/Wallet/index.tsx
@@ -2,7 +2,6 @@ import { ReactElement } from 'react'
 import Account from './Account'
 import Details from './Details'
 import Tooltip from '@shared/atoms/Tooltip'
-import Network from './Network'
 import styles from './index.module.css'
 import { useAccount } from 'wagmi'
 
@@ -11,7 +10,6 @@ export default function Wallet(): ReactElement {
 
   return (
     <div className={styles.wallet}>
-      <Network />
       <Tooltip
         content={<Details />}
         trigger="click focus mouseenter"
diff --git a/src/components/Home/TopSales/Account/index.module.css b/src/components/Home/TopSales/Account/index.module.css
index 2e3353c5b..53d012e8e 100644
--- a/src/components/Home/TopSales/Account/index.module.css
+++ b/src/components/Home/TopSales/Account/index.module.css
@@ -9,17 +9,20 @@
 
 .teaser {
   composes: box from '@shared/atoms/Box.module.css';
+
   padding: calc(var(--spacer) / 3) calc(var(--spacer) / 2);
   color: var(--color-secondary);
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
+  border: var(--teaser-border-size) solid var(--teaser-border-color);
 }
 
 .place {
   font-size: var(--font-size-large);
   margin-right: calc(var(--spacer) / 2);
+  color: var(--font-color-text);
 }
 
 .name {
diff --git a/src/components/Profile/Header/Stats.tsx b/src/components/Profile/Header/Stats.tsx
index e4ff19b9e..726a54b00 100644
--- a/src/components/Profile/Header/Stats.tsx
+++ b/src/components/Profile/Header/Stats.tsx
@@ -10,7 +10,7 @@ export default function Stats(): ReactElement {
     <div className={styles.stats}>
       <NumberUnit
         label={`Sale${sales === 1 ? '' : 's'}`}
-        value={sales < 0 ? 0 : sales}
+        value={typeof sales !== 'number' || sales < 0 ? 0 : sales}
       />
       <NumberUnit label="Published" value={assetsTotal} />
     </div>
diff --git a/src/components/Profile/History/ComputeJobs/Details.module.css b/src/components/Profile/History/ComputeJobs/Details.module.css
index 2e05f273d..df2deb7ed 100644
--- a/src/components/Profile/History/ComputeJobs/Details.module.css
+++ b/src/components/Profile/History/ComputeJobs/Details.module.css
@@ -60,7 +60,6 @@
 
 .assetMeta,
 .assetMeta code {
-  color: var(--color-secondary);
   font-size: var(--font-size-small);
   overflow: hidden;
   width: 100%;
@@ -70,6 +69,7 @@
 }
 
 .assetMeta span {
+  color: var(--color-secondary);
   flex: 1;
 }
 
diff --git a/src/components/Profile/History/index.module.css b/src/components/Profile/History/index.module.css
index b1e047554..24f40d66d 100644
--- a/src/components/Profile/History/index.module.css
+++ b/src/components/Profile/History/index.module.css
@@ -23,7 +23,7 @@
 
 .tabs ul[class*='tabList'] {
   background-color: var(--background-content);
-  border: 1px solid var(--border-color);
+  border: var(--border-size-md) solid var(--border-color);
   border-bottom: 0;
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
@@ -33,7 +33,7 @@
 }
 
 .tabs div[class*='tabContent'] {
-  border: 1px solid var(--border-color);
+  border: var(--border-size-md) solid var(--border-color);
   border-top: 0;
   padding-bottom: 0;
 }
diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx
index 0a7949dc8..619c83240 100644
--- a/src/components/Publish/Actions/index.tsx
+++ b/src/components/Publish/Actions/index.tsx
@@ -56,7 +56,8 @@ export default function Actions({
   const isContinueDisabled =
     (values.user.stepCurrent === 1 && errors.metadata !== undefined) ||
     (values.user.stepCurrent === 2 && errors.services !== undefined) ||
-    (values.user.stepCurrent === 3 && errors.pricing !== undefined)
+    (values.user.stepCurrent === 3 && errors.policies !== undefined) ||
+    (values.user.stepCurrent === 4 && errors.pricing !== undefined)
 
   const hasSubmitError =
     values.feedback?.[1].status === 'error' ||
@@ -77,7 +78,11 @@ export default function Actions({
       ) : (
         <>
           {values.user.stepCurrent > 1 && (
-            <Button onClick={handlePrevious} disabled={isSubmitting}>
+            <Button
+              style="text"
+              onClick={handlePrevious}
+              disabled={isSubmitting}
+            >
               Back
             </Button>
           )}
@@ -112,13 +117,7 @@ export default function Actions({
               style="primary"
               disabled={isSubmitting || !isValid}
             >
-              {isSubmitting ? (
-                <Loader white />
-              ) : hasSubmitError ? (
-                'Retry'
-              ) : (
-                'Submit'
-              )}
+              {isSubmitting ? <Loader /> : hasSubmitError ? 'Retry' : 'Submit'}
             </Button>
           )}
         </>
diff --git a/src/components/Publish/Policies/index.tsx b/src/components/Publish/Policies/index.tsx
new file mode 100644
index 000000000..655e34534
--- /dev/null
+++ b/src/components/Publish/Policies/index.tsx
@@ -0,0 +1,44 @@
+import Input from '@shared/FormInput'
+import { Field } from 'formik'
+import { ReactElement } from 'react'
+import content from '../../../../content/publish/form.json'
+import { getFieldContent } from '@utils/form'
+
+export default function PoliciesFields(): ReactElement {
+  return (
+    <>
+      <Field
+        {...getFieldContent('timeout', content.policies.fields)}
+        component={Input}
+        name="policies.timeout"
+      />
+      <Field
+        {...getFieldContent('allow', content.policies.fields)}
+        component={Input}
+        name="policies.allow"
+      />
+      <Field
+        {...getFieldContent('deny', content.policies.fields)}
+        component={Input}
+        name="policies.deny"
+      />
+
+      {/*
+       Licensing and Terms
+      */}
+      <Field
+        {...getFieldContent('license', content.metadata.fields)}
+        component={Input}
+        name="metadata.license"
+      />
+      <Field
+        {...getFieldContent(
+          'accessTermsAndConditions',
+          content.metadata.fields
+        )}
+        component={Input}
+        name="metadata.gaiaXInformation.termsAndConditions"
+      />
+    </>
+  )
+}
diff --git a/src/components/Publish/Pricing/Fees.tsx b/src/components/Publish/Pricing/Fees.tsx
index 336d67d0b..9b3b4d1d0 100644
--- a/src/components/Publish/Pricing/Fees.tsx
+++ b/src/components/Publish/Pricing/Fees.tsx
@@ -35,9 +35,11 @@ const Default = ({
 )
 
 export default function Fees({
-  tooltips
+  tooltips,
+  assetPrice
 }: {
   tooltips: { [key: string]: string }
+  assetPrice: number
 }): ReactElement {
   const [oceanCommunitySwapFee, setOceanCommunitySwapFee] = useState<string>('')
   const { chain } = useNetwork()
@@ -53,11 +55,18 @@ export default function Fees({
     })
   }, [chain?.id])
 
+  const earningsAfterFees =
+    !assetPrice || assetPrice <= 0
+      ? 0
+      : assetPrice -
+        (assetPrice * Number(oceanCommunitySwapFee)) / 100 -
+        (assetPrice * Number(appConfig?.publisherMarketFixedSwapFee || 0)) / 100
+
   return (
     <>
       <div className={styles.fees}>
         <Default
-          title="Community Swap Fee"
+          title="Pontus-X Community Fee"
           name="communityFee"
           tooltip={tooltips.communityFee}
           value={oceanCommunitySwapFee}
@@ -69,6 +78,13 @@ export default function Fees({
           tooltip={tooltips.marketplaceFee}
           value={appConfig?.publisherMarketFixedSwapFee}
         />
+
+        <Default
+          title="Earnings after fees"
+          name="earningsAfterFees"
+          tooltip={tooltips.earningsAfterFees}
+          value={earningsAfterFees.toString()}
+        />
       </div>
     </>
   )
diff --git a/src/components/Publish/Pricing/Fixed.tsx b/src/components/Publish/Pricing/Fixed.tsx
index ef1729e9d..a99ff103d 100644
--- a/src/components/Publish/Pricing/Fixed.tsx
+++ b/src/components/Publish/Pricing/Fixed.tsx
@@ -3,6 +3,9 @@ import FormHelp from '@shared/FormInput/Help'
 import Price from './Price'
 import Fees from './Fees'
 import styles from './Fixed.module.css'
+import stylesIndex from './index.module.css'
+import { useFormikContext } from 'formik'
+import { FormPublishData } from '../_types'
 
 export default function Fixed({
   approvedBaseTokens,
@@ -11,14 +14,15 @@ export default function Fixed({
   approvedBaseTokens: TokenInfo[]
   content: any
 }): ReactElement {
+  const { values } = useFormikContext<FormPublishData>()
   return (
     <>
       <FormHelp>{content.info}</FormHelp>
 
-      <h4 className={styles.title}>Price</h4>
+      <h4 className={stylesIndex.title}>Price</h4>
 
       <Price approvedBaseTokens={approvedBaseTokens} />
-      <Fees tooltips={content.tooltips} />
+      <Fees tooltips={content.tooltips} assetPrice={values.pricing.price} />
     </>
   )
 }
diff --git a/src/components/Publish/Pricing/Price.tsx b/src/components/Publish/Pricing/Price.tsx
index 4a3645680..1e498d668 100644
--- a/src/components/Publish/Pricing/Price.tsx
+++ b/src/components/Publish/Pricing/Price.tsx
@@ -9,10 +9,12 @@ import CoinSelect from './CoinSelect'
 
 export default function Price({
   approvedBaseTokens,
-  content
+  content,
+  displayTokenConversion
 }: {
   approvedBaseTokens?: TokenInfo[]
   content?: any
+  displayTokenConversion?: boolean
 }): ReactElement {
   const [field, meta] = useField('pricing.price')
 
@@ -48,11 +50,13 @@ export default function Price({
               />
               <Error meta={meta} />
             </div>
-            <div className={styles.datatoken}>
-              <h4>
-                = <strong>1</strong> {dataTokenOptions.symbol}
-              </h4>
-            </div>
+            {displayTokenConversion && (
+              <div className={styles.datatoken}>
+                <h4>
+                  = <strong>1</strong> {dataTokenOptions.symbol}
+                </h4>
+              </div>
+            )}
           </div>
         </>
       )}
diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx
index 26c61affc..078e8afea 100644
--- a/src/components/Publish/_constants.tsx
+++ b/src/components/Publish/_constants.tsx
@@ -3,6 +3,7 @@ import {
   FormPublishData,
   MetadataAlgorithmContainer,
   PublishFeedback,
+  SAAS_PAYMENT_MODE,
   StepContent
 } from './_types'
 import content from '../../../content/publish/form.json'
@@ -13,6 +14,7 @@ import Preview from './Preview'
 import Submission from './Submission'
 import { ServiceComputeOptions } from '@oceanprotocol/lib'
 import contentFeedback from '../../../content/publish/feedback.json'
+import PoliciesFields from './Policies'
 
 export const wizardSteps: StepContent[] = [
   {
@@ -27,16 +29,21 @@ export const wizardSteps: StepContent[] = [
   },
   {
     step: 3,
+    title: content.policies.title,
+    component: <PoliciesFields />
+  },
+  {
+    step: 4,
     title: content.pricing.title,
     component: <PricingFields />
   },
   {
-    step: 4,
+    step: 5,
     title: content.preview.title,
     component: <Preview />
   },
   {
-    step: 5,
+    step: 6,
     title: content.submission.title,
     component: <Submission />
   }
@@ -80,6 +87,9 @@ export const initialValues: FormPublishData = {
       containsPII: false,
       PIIInformation: undefined,
       serviceSD: { url: '' }
+    },
+    saas: {
+      paymentMode: SAAS_PAYMENT_MODE.SUBSCRIPTION
     }
   },
   services: [
@@ -87,7 +97,6 @@ export const initialValues: FormPublishData = {
       files: [{ url: '', type: 'url' }],
       links: [{ url: '', type: 'url' }],
       dataTokenOptions: { name: '', symbol: '' },
-      timeout: '',
       access: 'access',
       providerUrl: {
         url: 'https://provider.test.pontus-x.eu',
@@ -96,11 +105,14 @@ export const initialValues: FormPublishData = {
       },
       computeOptions,
       usesConsumerParameters: false,
-      consumerParameters: [],
-      allow: [],
-      deny: []
+      consumerParameters: []
     }
   ],
+  policies: {
+    timeout: '',
+    allow: [],
+    deny: []
+  },
   pricing: {
     baseToken: { address: '', name: '', symbol: 'EUROe', decimals: 6 },
     price: 0,
diff --git a/src/components/Publish/_types.ts b/src/components/Publish/_types.ts
index 223808bfe..77be1aa45 100644
--- a/src/components/Publish/_types.ts
+++ b/src/components/Publish/_types.ts
@@ -4,10 +4,14 @@ import { ReactElement } from 'react'
 import { ServiceCredential } from 'src/@types/gaia-x/2210/ServiceCredential'
 import { GaiaXInformation2210 } from '../../@types/gaia-x/2210/GXInformation'
 
+export enum SAAS_PAYMENT_MODE {
+  SUBSCRIPTION = 'Subscription',
+  PAY_PER_USE = 'Pay per use'
+}
+
 export interface FormPublishService {
   files: FileInfo[]
   links?: FileInfo[]
-  timeout: string
   dataTokenOptions: { name: string; symbol: string }
   access: 'Download' | 'Compute' | string
   providerUrl: { url: string; valid: boolean; custom: boolean }
@@ -15,8 +19,6 @@ export interface FormPublishService {
   computeOptions?: ServiceComputeOptions
   usesConsumerParameters?: boolean
   consumerParameters?: FormConsumerParameter[]
-  allow?: string[]
-  deny?: string[]
 }
 
 export interface FormPublishData {
@@ -39,6 +41,7 @@ export interface FormPublishData {
       PIIInformation?: GaiaXInformation2210['PIIInformation']
       serviceSD?: ServiceCredential
     }
+    saas: { paymentMode?: SAAS_PAYMENT_MODE }
     license?: string
     tags?: string[]
     dockerImage?: string
@@ -54,6 +57,11 @@ export interface FormPublishData {
     }
   }
   services: FormPublishService[]
+  policies: {
+    timeout: string
+    allow?: string[]
+    deny?: string[]
+  }
   pricing: PricePublishOptions
   feedback?: PublishFeedback
 }
diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts
index efe12067c..a13e321a5 100644
--- a/src/components/Publish/_utils.ts
+++ b/src/components/Publish/_utils.ts
@@ -133,7 +133,7 @@ export async function transformPublishFormToDdo(
   datatokenAddress?: string,
   nftAddress?: string
 ): Promise<DDO> {
-  const { metadata, services, user } = values
+  const { metadata, services, policies, user } = values
   const { chainId, accountId } = user
   const {
     type,
@@ -149,10 +149,11 @@ export async function transformPublishFormToDdo(
     dockerImageCustomChecksum,
     usesConsumerParameters,
     consumerParameters,
-    gaiaXInformation
+    gaiaXInformation,
+    saas
   } = metadata
-  const { access, files, links, providerUrl, timeout, allow, deny } =
-    services[0]
+  const { access, files, links, providerUrl } = services[0]
+  const { timeout, allow, deny } = policies
 
   const did = nftAddress ? generateDid(nftAddress, chainId) : '0x...'
   const currentTime = dateToStringNoMS(new Date())
@@ -169,6 +170,14 @@ export async function transformPublishFormToDdo(
   const linksTransformed = links?.length &&
     links[0].valid && [sanitizeUrl(links[0].url)]
 
+  const saasDetails =
+    files[0].type === 'saas'
+      ? {
+          redirectUrl: sanitizeUrl(files[0].url),
+          paymentMode: saas.paymentMode
+        }
+      : {}
+
   const consumerParametersTransformed = usesConsumerParameters
     ? transformConsumerParameters(consumerParameters)
     : undefined
@@ -199,7 +208,8 @@ export async function transformPublishFormToDdo(
           PIIInformation: gaiaXInformation.PIIInformation
         }),
         serviceSD: gaiaXInformation?.serviceSD
-      }
+      },
+      ...(files[0].type === 'saas' && { saas: saasDetails })
     },
     ...(type === 'algorithm' &&
       dockerImage !== '' && {
@@ -240,7 +250,7 @@ export async function transformPublishFormToDdo(
   const filesEncrypted =
     !isPreview &&
     files?.length &&
-    files[0].valid &&
+    (files[0].valid || files[0].type === 'saas') &&
     (await getEncryptedFiles(file, chainId, providerUrl.url))
 
   const newService: Service = {
diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts
index 7b7e3372b..1dd234211 100644
--- a/src/components/Publish/_validation.ts
+++ b/src/components/Publish/_validation.ts
@@ -65,7 +65,11 @@ const validationService = {
     .of(
       Yup.object().shape({
         url: testLinks(),
-        valid: Yup.boolean().isTrue().required('File must be valid.')
+        valid: Yup.boolean().when('type', {
+          is: 'saas',
+          then: Yup.boolean().notRequired(),
+          otherwise: Yup.boolean().isTrue().required('File must be valid.')
+        })
       })
     )
     .min(1, `At least one file is required.`)
@@ -83,7 +87,6 @@ const validationService = {
     name: Yup.string(),
     symbol: Yup.string()
   }),
-  timeout: Yup.string().required('Required'),
   access: Yup.string()
     .matches(/compute|access/g)
     .required('Required'),
@@ -101,7 +104,11 @@ const validationService = {
     otherwise: Yup.array()
       .nullable()
       .transform((value) => value || null)
-  }),
+  })
+}
+
+const validationPolicies = {
+  timeout: Yup.string().required('Required'),
   allow: Yup.array().of(Yup.string()).nullable(),
   deny: Yup.array().of(Yup.string()).nullable()
 }
@@ -137,5 +144,6 @@ export const validationSchema: Yup.SchemaOf<any> = Yup.object().shape({
   }),
   metadata: Yup.object().shape(validationMetadata),
   services: Yup.array().of(Yup.object().shape(validationService)),
+  policies: Yup.object().shape(validationPolicies),
   pricing: Yup.object().shape(validationPricing)
 })
diff --git a/src/pages/faucet.tsx b/src/pages/faucet.tsx
index c73c19e40..c68099541 100644
--- a/src/pages/faucet.tsx
+++ b/src/pages/faucet.tsx
@@ -1,12 +1,23 @@
 import { ReactElement } from 'react'
+import { useRouter } from 'next/router'
 import Verify from '../components/Faucet'
+import AssetProvider from '@context/Asset'
 import content from '../../content/pages/faucet.json'
 import Page from '@components/@shared/Page'
 
 export default function PageVerify(): ReactElement {
+  const router = useRouter()
+  const { did } = router.query
+
   return (
-    <Page title={content.title} description={content.description} uri="">
-      <Verify />
-    </Page>
+    <AssetProvider did={did as string}>
+      <Page
+        title={content.title}
+        description={content.description}
+        uri={router.route}
+      >
+        <Verify didQueryString={did as string} />
+      </Page>
+    </AssetProvider>
   )
 }
diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css
index 5b574abec..26f26201f 100644
--- a/src/stylesGlobal/_variables.css
+++ b/src/stylesGlobal/_variables.css
@@ -48,6 +48,7 @@
   --menu-link-font-weight-active: var(--font-weight-bold);
   --menu-caret-size: var(--font-size-small);
   --menu-caret-fill-color: var(--color-primary);
+  --menu-caret-active-fill-color: var(--color-primary);
   --menu-network-badge-font-color: var(--brand-white);
 
   /* Footer */
@@ -85,8 +86,12 @@
   --button-active-background: var(--font-color-light);
   --button-primary-font-color: var(--brand-white);
   --button-primary-background: var(--brand-gradient);
+  --button-primary-border-color: var(--brand-black);
+  --button-primary-hover-background: var(--color-primary);
+  --button-primary-hover-border-color: var(--color-primary);
   --button-ghost-font-color: var(--color-primary);
   --button-ghost-background: var(--brand-white);
+  --button-ghost-hover-background: var(--brand-red-dark);
   --button-text-font-color: var(--color-highlight);
 
   /* Loading spinner */

From e66a4dc4eda36d139d57688fca52340d51c3898f Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Mon, 28 Oct 2024 14:51:39 +0100
Subject: [PATCH 2/5] fix: edit crash additionalInformation undefined

---
 src/components/@shared/AssetList/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/@shared/AssetList/index.tsx b/src/components/@shared/AssetList/index.tsx
index c476ab4d0..b5fa1bfd8 100644
--- a/src/components/@shared/AssetList/index.tsx
+++ b/src/components/@shared/AssetList/index.tsx
@@ -46,9 +46,9 @@ const tableColumns: TableOceanColumn<AssetExtended>[] = [
       return (
         <AssetType
           className={styles.typeLabel}
-          type={metadata.additionalInformation?.saas ? 'saas' : metadata.type}
+          type={metadata?.additionalInformation?.saas ? 'saas' : metadata.type}
           accessType={
-            metadata.additionalInformation?.saas ? 'saas' : accessType
+            metadata?.additionalInformation?.saas ? 'saas' : accessType
           }
         />
       )

From 63a1f15f9f3932ea2df19777917e8a21afe82be9 Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Mon, 28 Oct 2024 19:48:45 +0100
Subject: [PATCH 3/5] fix: update faucet

---
 src/components/Faucet/index.tsx | 160 ++++++++++++--------------------
 1 file changed, 59 insertions(+), 101 deletions(-)

diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx
index ebc1c1e19..4014a17bb 100644
--- a/src/components/Faucet/index.tsx
+++ b/src/components/Faucet/index.tsx
@@ -1,6 +1,8 @@
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import styles from './index.module.css'
+import InputGroup from '@components/@shared/FormInput/InputGroup'
+import InputElement from '@components/@shared/FormInput/InputElement'
 import Button from '@components/@shared/atoms/Button'
 import Loader from '@components/@shared/atoms/Loader'
 import Alert from '@components/@shared/atoms/Alert'
@@ -20,23 +22,20 @@ interface Content {
   }
 }
 
-const networkNameMap: { [key: number]: string } = {
-  32456: 'Pontus-X Devnet',
-  32457: 'Pontus-X Testnet'
-}
-
-const FaucetPage = (): ReactElement => {
+export default function FaucetPage({
+  didQueryString
+}: {
+  didQueryString?: string
+}): ReactElement {
   const { input }: Content = content
-  const { label, buttonLabel } = input
+  const { label, placeholder, buttonLabel } = input
 
   const [isLoading, setIsLoading] = useState(false)
-  const [isRequestingTokens, setIsRequestingTokens] = useState(false)
-  const [address, setAddress] = useState<string>('')
-  const [network, setNetwork] = useState<string>('Unknown')
+  const [did, setDid] = useState<string>('')
   const [message, setMessage] = useState<string>()
   const [error, setError] = useState<string>()
 
-  const { address: accountAddress } = useAccount()
+  const { address } = useAccount()
 
   const {
     data: signMessageData,
@@ -52,41 +51,34 @@ const FaucetPage = (): ReactElement => {
     setMessage(undefined)
 
     try {
-      const message = await getMessage(accountAddress)
+      const message = await getMessage(address)
+
       signMessage({ message })
     } catch (error) {
       LoggerInstance.error(error)
-      setError(error.message || 'Error generating message.')
+      setError(error.message)
     } finally {
       setIsLoading(false)
     }
-  }, [accountAddress, signMessage])
+  }, [])
 
-  const handleSearchStart = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault()
-      handleVerify()
-    },
-    [handleVerify]
-  )
+  const handleSearchStart = () => {
+    handleVerify()
+  }
 
-  const faucetTokenRequest = useCallback(async () => {
-    setIsRequestingTokens(true)
+  const faucetTokenRequest = async () => {
     try {
-      const hashes = await requestTokens(accountAddress, signMessageData)
+      const hashes = await requestTokens(address, signMessageData)
+
       toast.success(`Successfully requested test tokens: ${hashes.join(', ')}`)
       setMessage(
         'Tokens successfully requested. It can take up to 30 seconds until tokens show up in your wallet.'
       )
     } catch (error) {
-      const errorMessage =
-        error.message || 'Unable to request tokens. Please try again later.'
-      setError(errorMessage)
+      toast.error('Unable to request tokens. Please try again.')
       LoggerInstance.error('[Onboarding] Error requesting tokens', error)
-    } finally {
-      setIsRequestingTokens(false)
     }
-  }, [accountAddress, signMessageData])
+  }
 
   useEffect(() => {
     if (signMessageLoading) return
@@ -107,91 +99,59 @@ const FaucetPage = (): ReactElement => {
     signMessageSuccess,
     signMessageData,
     signMessageError,
-    signMessageLoading,
-    faucetTokenRequest
+    signMessageLoading
   ])
 
   useEffect(() => {
-    const fetchAddressAndNetwork = async () => {
+    const fetchAddress = async () => {
       try {
         const provider = new ethers.providers.Web3Provider(window.ethereum)
         const signer = provider.getSigner()
         const address = await signer.getAddress()
-        const network = await provider.getNetwork()
-        setAddress(address)
-        setNetwork(networkNameMap[network.chainId] || 'Unknown')
+        setDid(address)
       } catch (error) {
         LoggerInstance.error(error)
       }
     }
 
-    fetchAddressAndNetwork()
-
-    if (window.ethereum) {
-      window.ethereum.on('accountsChanged', fetchAddressAndNetwork)
-      window.ethereum.on('chainChanged', fetchAddressAndNetwork)
-    }
+    fetchAddress()
 
-    return () => {
-      if (window.ethereum) {
-        window.ethereum.removeListener(
-          'accountsChanged',
-          fetchAddressAndNetwork
-        )
-        window.ethereum.removeListener('chainChanged', fetchAddressAndNetwork)
-      }
+    if (didQueryString) {
+      setDid(didQueryString)
+      handleVerify()
     }
-  }, [])
+  }, [didQueryString, handleVerify])
 
   return (
-    <div className={styles.card}>
-      <h2 className={styles.title}>Welcome to the Pontus-X Faucet</h2>
-      <p className={styles.description}>
-        A faucet is a service that provides free tokens for testing purposes.
-        Known accounts can request 10 EUROe fee tokens and 1000 EUROe payment
-        tokens to use on the Pontus-X network. These tokens are available every
-        12 hours.
-      </p>
-      <div className={styles.instructions}>
-        <h3>How to Request Tokens:</h3>
-        <ol>
-          <li>Ensure you have a web3 wallet (e.g. MetaMask) connected.</li>
-          <li>
-            Your wallet address will be automatically detected and displayed
-            below.
-          </li>
-          <li>
-            Click the &quot;Get Tokens&quot; button to request your free tokens.
-          </li>
-          <li>Wait for a few seconds while the request is processed.</li>
-          <li>
-            You will receive a confirmation once the tokens are successfully
-            added to your wallet.
-          </li>
-        </ol>
-        <p>
-          <strong>Note:</strong> You can only request tokens once every 12
-          hours. If you encounter any issues, please try again later.
-        </p>
-      </div>
-      <div className={styles.address}>
-        <strong>{label}:</strong> {address}
-      </div>
-      <div className={styles.network}>
-        <strong>Connected Network:</strong> {network}
-      </div>
-      <form className={styles.form} onSubmit={handleSearchStart}>
-        <Button
-          disabled={!address || isLoading || isRequestingTokens}
-          style="primary"
-          size="small"
-          type="submit"
-          className={
-            isLoading || isRequestingTokens ? styles.disabledButton : ''
-          }
-        >
-          {isLoading || isRequestingTokens ? <Loader /> : buttonLabel}
-        </Button>
+    <div>
+      <form
+        className={styles.form}
+        onSubmit={async (e) => {
+          e.preventDefault()
+          handleSearchStart()
+        }}
+      >
+        <InputGroup>
+          <InputElement
+            className={styles.didInput}
+            label={label}
+            name="did"
+            onChange={(event) =>
+              setDid((event.target as HTMLInputElement).value)
+            }
+            placeholder={placeholder}
+            value={did}
+            readOnly
+          />
+          <Button
+            disabled={!did || isLoading}
+            style="primary"
+            size="small"
+            type="submit"
+          >
+            {isLoading ? <Loader /> : buttonLabel}
+          </Button>
+        </InputGroup>
       </form>
       {!isLoading && error && (
         <div className={styles.errorContainer}>
@@ -206,5 +166,3 @@ const FaucetPage = (): ReactElement => {
     </div>
   )
 }
-
-export default FaucetPage

From 4473ba06c0b424d028a2200c0ad65afcaeb3901e Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Tue, 29 Oct 2024 15:19:42 +0100
Subject: [PATCH 4/5] fix: update address.config.js, content, images, faucet
 and publish

---
 src/components/Faucet/index.tsx           | 160 ++++++++++++++--------
 src/components/Publish/Services/index.tsx |  32 -----
 src/pages/faucet.tsx                      |   8 +-
 3 files changed, 103 insertions(+), 97 deletions(-)

diff --git a/src/components/Faucet/index.tsx b/src/components/Faucet/index.tsx
index 4014a17bb..ebc1c1e19 100644
--- a/src/components/Faucet/index.tsx
+++ b/src/components/Faucet/index.tsx
@@ -1,8 +1,6 @@
 import { ReactElement, useCallback, useEffect, useState } from 'react'
 import { LoggerInstance } from '@oceanprotocol/lib'
 import styles from './index.module.css'
-import InputGroup from '@components/@shared/FormInput/InputGroup'
-import InputElement from '@components/@shared/FormInput/InputElement'
 import Button from '@components/@shared/atoms/Button'
 import Loader from '@components/@shared/atoms/Loader'
 import Alert from '@components/@shared/atoms/Alert'
@@ -22,20 +20,23 @@ interface Content {
   }
 }
 
-export default function FaucetPage({
-  didQueryString
-}: {
-  didQueryString?: string
-}): ReactElement {
+const networkNameMap: { [key: number]: string } = {
+  32456: 'Pontus-X Devnet',
+  32457: 'Pontus-X Testnet'
+}
+
+const FaucetPage = (): ReactElement => {
   const { input }: Content = content
-  const { label, placeholder, buttonLabel } = input
+  const { label, buttonLabel } = input
 
   const [isLoading, setIsLoading] = useState(false)
-  const [did, setDid] = useState<string>('')
+  const [isRequestingTokens, setIsRequestingTokens] = useState(false)
+  const [address, setAddress] = useState<string>('')
+  const [network, setNetwork] = useState<string>('Unknown')
   const [message, setMessage] = useState<string>()
   const [error, setError] = useState<string>()
 
-  const { address } = useAccount()
+  const { address: accountAddress } = useAccount()
 
   const {
     data: signMessageData,
@@ -51,34 +52,41 @@ export default function FaucetPage({
     setMessage(undefined)
 
     try {
-      const message = await getMessage(address)
-
+      const message = await getMessage(accountAddress)
       signMessage({ message })
     } catch (error) {
       LoggerInstance.error(error)
-      setError(error.message)
+      setError(error.message || 'Error generating message.')
     } finally {
       setIsLoading(false)
     }
-  }, [])
+  }, [accountAddress, signMessage])
 
-  const handleSearchStart = () => {
-    handleVerify()
-  }
+  const handleSearchStart = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+      handleVerify()
+    },
+    [handleVerify]
+  )
 
-  const faucetTokenRequest = async () => {
+  const faucetTokenRequest = useCallback(async () => {
+    setIsRequestingTokens(true)
     try {
-      const hashes = await requestTokens(address, signMessageData)
-
+      const hashes = await requestTokens(accountAddress, signMessageData)
       toast.success(`Successfully requested test tokens: ${hashes.join(', ')}`)
       setMessage(
         'Tokens successfully requested. It can take up to 30 seconds until tokens show up in your wallet.'
       )
     } catch (error) {
-      toast.error('Unable to request tokens. Please try again.')
+      const errorMessage =
+        error.message || 'Unable to request tokens. Please try again later.'
+      setError(errorMessage)
       LoggerInstance.error('[Onboarding] Error requesting tokens', error)
+    } finally {
+      setIsRequestingTokens(false)
     }
-  }
+  }, [accountAddress, signMessageData])
 
   useEffect(() => {
     if (signMessageLoading) return
@@ -99,59 +107,91 @@ export default function FaucetPage({
     signMessageSuccess,
     signMessageData,
     signMessageError,
-    signMessageLoading
+    signMessageLoading,
+    faucetTokenRequest
   ])
 
   useEffect(() => {
-    const fetchAddress = async () => {
+    const fetchAddressAndNetwork = async () => {
       try {
         const provider = new ethers.providers.Web3Provider(window.ethereum)
         const signer = provider.getSigner()
         const address = await signer.getAddress()
-        setDid(address)
+        const network = await provider.getNetwork()
+        setAddress(address)
+        setNetwork(networkNameMap[network.chainId] || 'Unknown')
       } catch (error) {
         LoggerInstance.error(error)
       }
     }
 
-    fetchAddress()
+    fetchAddressAndNetwork()
 
-    if (didQueryString) {
-      setDid(didQueryString)
-      handleVerify()
+    if (window.ethereum) {
+      window.ethereum.on('accountsChanged', fetchAddressAndNetwork)
+      window.ethereum.on('chainChanged', fetchAddressAndNetwork)
+    }
+
+    return () => {
+      if (window.ethereum) {
+        window.ethereum.removeListener(
+          'accountsChanged',
+          fetchAddressAndNetwork
+        )
+        window.ethereum.removeListener('chainChanged', fetchAddressAndNetwork)
+      }
     }
-  }, [didQueryString, handleVerify])
+  }, [])
 
   return (
-    <div>
-      <form
-        className={styles.form}
-        onSubmit={async (e) => {
-          e.preventDefault()
-          handleSearchStart()
-        }}
-      >
-        <InputGroup>
-          <InputElement
-            className={styles.didInput}
-            label={label}
-            name="did"
-            onChange={(event) =>
-              setDid((event.target as HTMLInputElement).value)
-            }
-            placeholder={placeholder}
-            value={did}
-            readOnly
-          />
-          <Button
-            disabled={!did || isLoading}
-            style="primary"
-            size="small"
-            type="submit"
-          >
-            {isLoading ? <Loader /> : buttonLabel}
-          </Button>
-        </InputGroup>
+    <div className={styles.card}>
+      <h2 className={styles.title}>Welcome to the Pontus-X Faucet</h2>
+      <p className={styles.description}>
+        A faucet is a service that provides free tokens for testing purposes.
+        Known accounts can request 10 EUROe fee tokens and 1000 EUROe payment
+        tokens to use on the Pontus-X network. These tokens are available every
+        12 hours.
+      </p>
+      <div className={styles.instructions}>
+        <h3>How to Request Tokens:</h3>
+        <ol>
+          <li>Ensure you have a web3 wallet (e.g. MetaMask) connected.</li>
+          <li>
+            Your wallet address will be automatically detected and displayed
+            below.
+          </li>
+          <li>
+            Click the &quot;Get Tokens&quot; button to request your free tokens.
+          </li>
+          <li>Wait for a few seconds while the request is processed.</li>
+          <li>
+            You will receive a confirmation once the tokens are successfully
+            added to your wallet.
+          </li>
+        </ol>
+        <p>
+          <strong>Note:</strong> You can only request tokens once every 12
+          hours. If you encounter any issues, please try again later.
+        </p>
+      </div>
+      <div className={styles.address}>
+        <strong>{label}:</strong> {address}
+      </div>
+      <div className={styles.network}>
+        <strong>Connected Network:</strong> {network}
+      </div>
+      <form className={styles.form} onSubmit={handleSearchStart}>
+        <Button
+          disabled={!address || isLoading || isRequestingTokens}
+          style="primary"
+          size="small"
+          type="submit"
+          className={
+            isLoading || isRequestingTokens ? styles.disabledButton : ''
+          }
+        >
+          {isLoading || isRequestingTokens ? <Loader /> : buttonLabel}
+        </Button>
       </form>
       {!isLoading && error && (
         <div className={styles.errorContainer}>
@@ -166,3 +206,5 @@ export default function FaucetPage({
     </div>
   )
 }
+
+export default FaucetPage
diff --git a/src/components/Publish/Services/index.tsx b/src/components/Publish/Services/index.tsx
index 5f2364f12..612d229ba 100644
--- a/src/components/Publish/Services/index.tsx
+++ b/src/components/Publish/Services/index.tsx
@@ -92,26 +92,11 @@ export default function ServicesFields(): ReactElement {
         component={Input}
         name="services[0].links"
       />
-      <Field
-        {...getFieldContent('timeout', content.services.fields)}
-        component={Input}
-        name="services[0].timeout"
-      />
       <Field
         {...getFieldContent('usesConsumerParameters', content.services.fields)}
         component={Input}
         name="services[0].usesConsumerParameters"
       />
-      <Field
-        {...getFieldContent('allow', content.services.fields)}
-        component={Input}
-        name="services[0].allow"
-      />
-      <Field
-        {...getFieldContent('deny', content.services.fields)}
-        component={Input}
-        name="services[0].deny"
-      />
       {values.services[0].usesConsumerParameters && (
         <Field
           {...getFieldContent(
@@ -122,23 +107,6 @@ export default function ServicesFields(): ReactElement {
           name="services[0].consumerParameters"
         />
       )}
-
-      {/*
-       Licensing and Terms
-      */}
-      <Field
-        {...getFieldContent('license', content.metadata.fields)}
-        component={Input}
-        name="metadata.license"
-      />
-      <Field
-        {...getFieldContent(
-          'accessTermsAndConditions',
-          content.metadata.fields
-        )}
-        component={Input}
-        name="metadata.gaiaXInformation.termsAndConditions"
-      />
     </>
   )
 }
diff --git a/src/pages/faucet.tsx b/src/pages/faucet.tsx
index c68099541..acf6848cc 100644
--- a/src/pages/faucet.tsx
+++ b/src/pages/faucet.tsx
@@ -11,12 +11,8 @@ export default function PageVerify(): ReactElement {
 
   return (
     <AssetProvider did={did as string}>
-      <Page
-        title={content.title}
-        description={content.description}
-        uri={router.route}
-      >
-        <Verify didQueryString={did as string} />
+      <Page title={content.title} description={content.description} uri="">
+        <Verify />
       </Page>
     </AssetProvider>
   )

From 58afba29ed59446f43150fcb04c26d46c70589d5 Mon Sep 17 00:00:00 2001
From: KevinRohlf <123676073+KevinRohlf@users.noreply.github.com>
Date: Wed, 30 Oct 2024 19:42:11 +0100
Subject: [PATCH 5/5] fix: deleted form input styling update

---
 .../Header/UserPreferences/Automation/Decrypt.module.css      | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Header/UserPreferences/Automation/Decrypt.module.css b/src/components/Header/UserPreferences/Automation/Decrypt.module.css
index 7a8c5b9e4..564115d1e 100644
--- a/src/components/Header/UserPreferences/Automation/Decrypt.module.css
+++ b/src/components/Header/UserPreferences/Automation/Decrypt.module.css
@@ -19,10 +19,6 @@
   margin: 0;
 }
 
-.form > input {
-  border: var(--border-size-sm) solid var(--border-color);
-}
-
 .form > button {
   margin-left: calc(var(--spacer) / 4);
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 2);