Development (#345)

* feat: update did string validation

* feat: add did string check before aquarius request

* feat: explicitly display prices === 0 for secondary tokens

src/@utils/aquarius/index.ts

@@ -9,6 +9,7 @@ import {
 } from '../../@types/aquarius/SearchQuery'
 import { transformAssetToAssetSelection } from '../assetConvertor'
 import addressConfig from '../../../address.config'
+import { isValidDid } from '@utils/ddo'
 
 export interface UserSales {
   id: string
@@ -178,6 +179,8 @@ export async function getAsset(
   cancelToken: CancelToken
 ): Promise<Asset> {
   try {
+    if (!isValidDid(did)) return
+
     const response: AxiosResponse<Asset> = await axios.get(
       `${metadataCacheUri}/api/aquarius/assets/ddo/${did}`,
       { cancelToken }

src/@utils/ddo.ts

@@ -17,7 +17,7 @@ import {
 import { checkJson } from './codemirror'
 
 export function isValidDid(did: string): boolean {
-  const regex = /did:op:[A-Za-z0-9]{64}/
+  const regex = /^did:op:[A-Za-z0-9]{64}$/
   return regex.test(did)
 }
 

src/components/@shared/Price/PriceUnit.tsx

@@ -8,21 +8,23 @@ export default function PriceUnit({
   className,
   size = 'small',
   symbol,
-  decimals
+  decimals,
+  explicitZero
 }: {
   price: number
   className?: string
   size?: 'small' | 'mini' | 'large'
   symbol?: string
   decimals?: string
+  explicitZero?: boolean
 }): ReactElement {
   const { locale } = useUserPreferences()
 
   return (
     <div className={`${styles.price} ${styles[size]} ${className}`}>
-      {price === 0 ? (
+      {price === 0 && !explicitZero ? (
         <div>Free</div>
-      ) : !price || Number.isNaN(price) ? (
+      ) : (!price && price !== 0) || Number.isNaN(price) ? (
         <div>-</div>
       ) : (
         <div>

src/components/Asset/AssetActions/Compute/PriceOutput.tsx

@@ -5,7 +5,6 @@ import Tooltip from '@shared/atoms/Tooltip'
 import styles from './PriceOutput.module.css'
 import { MAX_DECIMALS } from '@utils/constants'
 import Decimal from 'decimal.js'
-import { useWeb3 } from '@context/Web3'
 
 interface PriceOutputProps {
   hasPreviousOrder: boolean
@@ -52,6 +51,7 @@ function Row({
           symbol={symbol}
           size="small"
           className={styles.price}
+          explicitZero
         />
         <span className={styles.timeout}>
           {timeout &&
@@ -90,11 +90,11 @@ export default function PriceOutput({
         <div key={item.symbol}>
           <PriceUnit
             price={Number(item.value)}
-            symbol={
-              index < totalPrices.length - 1 ? `${item.symbol} & ` : item.symbol
-            }
+            symbol={item.symbol}
             size="small"
+            explicitZero
           />
+          {index < totalPrices.length - 1 && <>&nbsp;{'&'}&nbsp;</>}
         </div>
       ))}
       <Tooltip