listed region improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@region-x/components",
-  "version": "0.1.16",
+  "version": "0.1.20",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/App.tsx

@@ -20,6 +20,7 @@ function App() {
   }
 
   const regionData: RegionData =  {
+    rawId: '5432',
     name: 'Region #2',
     regionStart: 'Started 10 days ago',
     regionEnd: 'Ends in 18 days',
@@ -199,7 +200,7 @@ function App() {
     <Balance name="Rococo Coretime" value="243" icon={DOT} />
     <br />
     <br />
-    <RegionCard typeMarketplace={true} ownedRegion={false} regionData={regionData} task='Unassigned'/>
+    <RegionCard typeMarketplace={true} ownedRegion={false} regionData={regionData} task='Unassigned' salePrice='100 DOT' pricePerTimeslice='1 DOT'/>
 
     <br />
     <br />

src/components/RegionCard/RegionCard.module.scss

@@ -20,4 +20,15 @@
         justify-content: center;
         color: $dark5;
     }
+
+    .priceWrapper {
+        display: flex;
+        justify-content: space-between;
+
+        h4 {
+            @include Inter;
+            margin: 1rem 1rem;
+            font-weight: 500;
+        }
+    }
 }

src/components/RegionCard/RegionCard.tsx

@@ -12,13 +12,16 @@ interface RegionCardProps {
     selected?: boolean;
     regionData: RegionData;
     task: string;
+    salePrice?: string;
+    pricePerTimeslice?: string;
 }
 
-const RegionCard: React.FC<RegionCardProps> = ({task, typeMarketplace, ownedRegion, selected, regionData}) => {
+const RegionCard: React.FC<RegionCardProps> = ({task, typeMarketplace, ownedRegion, selected, regionData, salePrice, pricePerTimeslice}) => {
 
     return (
         <div className={styles["regionCardWrapper"]} style={{backgroundColor: selected ? `var(--lightGray)` : 'white'}}>
             <RegionCardHeader 
+                rawId={regionData.rawId}
                 name={regionData.name} 
                 regionStart={regionData.regionStart} 
                 regionEnd={regionData.regionEnd} 
@@ -32,13 +35,19 @@ const RegionCard: React.FC<RegionCardProps> = ({task, typeMarketplace, ownedRegi
                 consumed={regionData.consumed} 
                 currentUsage={regionData.currentUsage} 
             />
+            {typeMarketplace &&
+                <div className={styles["priceWrapper"]}>
+                    <h4>Price: {salePrice}</h4>
+                    <h4>Per timeslice: {pricePerTimeslice}</h4>
+                </div>
+            }
             { !typeMarketplace && regionData.chainLabel && regionData.chainColor ? 
                 <div className={styles["regionCardWrapper-labels"]}>
                     <LabelCard label='Renewable' color='yellowDark' variant='primary' />
                     <LabelCard label={regionData.chainLabel} color={regionData.chainColor} variant='primary'  />
                 </div>
                 : 
-                <Button onClick={regionData.onClick} color='gray3'>{!ownedRegion ? 'Unlist' : 'Purchase'}</Button>
+                <Button fullWidth onClick={regionData.onClick} color='greenPrimary'>{ownedRegion ? 'Unlist' : 'Purchase'}</Button>
             }
         </div>
     );

src/components/RegionCard/RegionCardHeader/RegionCardHeader.tsx

@@ -5,33 +5,47 @@ import Identicon from '@polkadot/react-identicon';
 import { encodeAddress, blake2AsU8a } from '@polkadot/util-crypto';
 
 interface RegionCardHeaderProps {
-    name: string;   //Card Name
-    regionStart: string;  //start date
-    regionEnd: string;    //end date
-    coreIndex: number;
-    duration: string;
+  rawId: string; 
+  name: string;   //Card Name
+  regionStart: string;  //start date
+  regionEnd: string;    //end date
+  coreIndex: number;
+  duration: string;
 }
 
-const RegionCardHeader: React.FC<RegionCardHeaderProps> = ({name, regionStart, regionEnd, coreIndex, duration}) => {
-  const publicKey = blake2AsU8a(`${regionStart}-${regionEnd}-${coreIndex}`);
-  const ss58Address = encodeAddress(publicKey, 42);
-  console.log(publicKey);
-
+const RegionCardHeader: React.FC<RegionCardHeaderProps> = ({rawId, name, regionStart, regionEnd, coreIndex, duration}) => { 
   return (
-      <>
-    <div className={styles["regionCardHeaderWrapper"]}>
-      <Identicon value={ss58Address} size={80} />
-      <div className={styles["regionCardHeaderWrapper-data"]}>
-          <h5>{name}</h5>
-          <p>{regionStart} | {regionEnd}</p>
+    <>
+      <RegionMinimal rawId={rawId} name={name} regionStart={regionStart} regionEnd={regionEnd}/>
+      <div className={styles["regionCardHeaderWrapper-labels"]}>
+        <LabelCard textColor='dark' variant='primary' color='gray5' label={`Core Index: ${coreIndex}`} />
+        <LabelCard variant='primary' color='greenPrimary' label={duration} />
       </div>
-    </div>
-    <div className={styles["regionCardHeaderWrapper-labels"]}>
-      <LabelCard textColor='dark' variant='primary' color='gray5' label={`Core Index: ${coreIndex}`} />
-      <LabelCard variant='primary' color='greenPrimary' label={duration} />
-    </div>
     </>
   );
 };
 
+interface RegionMinimalProps {
+  rawId: string;
+  name: string;   //Card Name
+  regionStart: string;  //start date
+  regionEnd: string;    //end date
+}
+
+const RegionMinimal = ({rawId, name, regionStart, regionEnd}: RegionMinimalProps) => {
+  const publicKey = blake2AsU8a(`${rawId}`);
+  const ss58Address = encodeAddress(publicKey, 42);
+
+  return (
+    <div className={styles["regionCardHeaderWrapper"]}>
+    <Identicon value={ss58Address} size={80} />
+    <div className={styles["regionCardHeaderWrapper-data"]}>
+        <h5>{name}</h5>
+        <p>{regionStart} | {regionEnd}</p>
+    </div>
+  </div>
+  )
+}
+
+export { RegionMinimal };
 export default RegionCardHeader;

src/index.ts

@@ -5,5 +5,7 @@ export { default as Slider } from './components/Slider/Slider';
 export { default as Select } from './components/Select/Select';
 export { default as Balance } from './components/Balance/Balance';
 export { default as RegionCard } from './components/RegionCard/RegionCard';
+export { default as RegionCardHeader } from './components/RegionCard/RegionCardHeader/RegionCardHeader';
+export { RegionMinimal } from './components/RegionCard/RegionCardHeader/RegionCardHeader';
 export { default as AmountInput } from './components/AmountInput/AmountInput';
 export { default as TableComponent } from './components/TableComponent/TableComponent';

src/types/types.ts

@@ -7,6 +7,7 @@ export interface SelectOption<T> {
   }
 
 export interface RegionData {
+    rawId: string;
     name: string;
     regionStart: string;
     regionEnd: string;