From 5da836d3eff6ae2ad6d39ee7c1d86b8514955068 Mon Sep 17 00:00:00 2001
From: Szegoo <sakacszergej@gmail.com>
Date: Thu, 10 Oct 2024 21:06:23 +0200
Subject: [PATCH 1/2] listed region improvements

---
 package.json                                     |  2 +-
 src/App.tsx                                      |  2 +-
 src/components/RegionCard/RegionCard.module.scss | 11 +++++++++++
 src/components/RegionCard/RegionCard.tsx         | 12 ++++++++++--
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9034061..6d60c59 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@region-x/components",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
diff --git a/src/App.tsx b/src/App.tsx
index b91b3f8..3a0b4b5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -199,7 +199,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 />
diff --git a/src/components/RegionCard/RegionCard.module.scss b/src/components/RegionCard/RegionCard.module.scss
index f205a5c..f090ae5 100644
--- a/src/components/RegionCard/RegionCard.module.scss
+++ b/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;
+        }
+    }
 }
diff --git a/src/components/RegionCard/RegionCard.tsx b/src/components/RegionCard/RegionCard.tsx
index 579d523..d145018 100644
--- a/src/components/RegionCard/RegionCard.tsx
+++ b/src/components/RegionCard/RegionCard.tsx
@@ -12,9 +12,11 @@ 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'}}>
@@ -32,13 +34,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>
     );

From 68b86ed864a448c647384fd31fa5c20657bad128 Mon Sep 17 00:00:00 2001
From: Szegoo <sakacszergej@gmail.com>
Date: Mon, 14 Oct 2024 15:11:14 +0200
Subject: [PATCH 2/2] fixes & improvements

---
 package.json                                  |  2 +-
 src/App.tsx                                   |  1 +
 src/components/RegionCard/RegionCard.tsx      |  1 +
 .../RegionCardHeader/RegionCardHeader.tsx     | 56 ++++++++++++-------
 src/index.ts                                  |  2 +
 src/types/types.ts                            |  1 +
 6 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 6d60c59..559c934 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@region-x/components",
-  "version": "0.1.17",
+  "version": "0.1.20",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
diff --git a/src/App.tsx b/src/App.tsx
index 3a0b4b5..a004f4b 100644
--- a/src/App.tsx
+++ b/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',
diff --git a/src/components/RegionCard/RegionCard.tsx b/src/components/RegionCard/RegionCard.tsx
index d145018..db141a9 100644
--- a/src/components/RegionCard/RegionCard.tsx
+++ b/src/components/RegionCard/RegionCard.tsx
@@ -21,6 +21,7 @@ const RegionCard: React.FC<RegionCardProps> = ({task, typeMarketplace, ownedRegi
     return (
         <div className={styles["regionCardWrapper"]} style={{backgroundColor: selected ? `var(--lightGray)` : 'white'}}>
             <RegionCardHeader 
+                rawId={regionData.rawId}
                 name={regionData.name} 
                 regionStart={regionData.regionStart} 
                 regionEnd={regionData.regionEnd} 
diff --git a/src/components/RegionCard/RegionCardHeader/RegionCardHeader.tsx b/src/components/RegionCard/RegionCardHeader/RegionCardHeader.tsx
index efab270..778c745 100644
--- a/src/components/RegionCard/RegionCardHeader/RegionCardHeader.tsx
+++ b/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;
diff --git a/src/index.ts b/src/index.ts
index 8473d6e..b8ee539 100644
--- a/src/index.ts
+++ b/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';
diff --git a/src/types/types.ts b/src/types/types.ts
index 9d871a8..a303e43 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -7,6 +7,7 @@ export interface SelectOption<T> {
   }
 
 export interface RegionData {
+    rawId: string;
     name: string;
     regionStart: string;
     regionEnd: string;