Minor improvements (#52)

Author: Szegoo

Dockerfile

@@ -11,8 +11,8 @@ ENV WS_CONTRACTS_CHAIN="ws://127.0.0.1:9920"
 
 # Given that Coretime-Mock deploys the contract with no salt we can be sure
 # this is the address as long as it is not modified. 
-ENV CONTRACT_XC_REGIONS="Z6UFD3Z58WxVVoqggtsCAQoXxQwiZKUftmrd2QzrSbagr8r"
-ENV CONTRACT_MARKET="WMFn89f2V8xzfXwLfvHnhXS3jUettejFzqC4TWYir9hTkDd"
+ENV CONTRACT_XC_REGIONS="a6MrRfHbpmHr8StUEk2CfFNBCWcy12VPorZJjwmache2zP6"
+ENV CONTRACT_MARKET="aCo3ajA3ST2y188ghkhysZdfPyfkEJfU5kVDvaRc4HXBgtq"
 
 RUN apk add --no-cache libc6-compat
 

src/components/elements/MarketFilters/DurationFilter.tsx

@@ -21,7 +21,7 @@ const DurationFilter = ({ filters, updateFilters }: FilterProps) => {
   };
 
   const options: Option[] = [
-    { duration: Number.MAX_VALUE, label: 'Show All' },
+    { duration: 0, label: 'Show All' },
     { duration: WEEK_IN_TIMESLICES, label: '1 week' },
     { duration: 2 * WEEK_IN_TIMESLICES, label: '2 weeks' },
     { duration: 3 * WEEK_IN_TIMESLICES, label: '3 weeks' },
@@ -38,13 +38,13 @@ const DurationFilter = ({ filters, updateFilters }: FilterProps) => {
     updateFilters({
       ...filters,
       durationFilter: (listing) =>
-        listing.region.getEnd() - listing.region.getBegin() <= duration,
+        listing.region.getEnd() - listing.region.getBegin() >= duration,
     });
   };
 
   return (
     <Box width={200}>
-      <Typography marginBottom={'.5em'}>Region Duration</Typography>
+      <Typography marginBottom={'.5em'}>Region duration at least</Typography>
       <FormControl fullWidth>
         <InputLabel id='range-dropdown-label'>Range</InputLabel>
         <Select

src/components/elements/MarketFilters/PriceFilter.tsx

@@ -26,9 +26,6 @@ const PriceFilter = ({ listings, filters, updateFilters }: FilterProps) => {
 
   return (
     <Box>
-      <Typography textAlign={'center'}>
-        Price Limit: {`${priceLimit} ROC`}
-      </Typography>
       <Slider
         defaultValue={70}
         max={maxValue()}
@@ -39,6 +36,9 @@ const PriceFilter = ({ listings, filters, updateFilters }: FilterProps) => {
         valueLabelDisplay='off'
         valueLabelFormat={(value) => `${value} ROC`}
       />
+      <Typography variant='h2' textAlign={'center'}>
+        Price Limit: {`${priceLimit} ROC`}
+      </Typography>
     </Box>
   );
 };

src/components/elements/MarketFilters/RegionEndFilter.tsx

@@ -47,7 +47,7 @@ const RegionEndFilter = ({ filters, updateFilters }: FilterProps) => {
   return (
     <>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Typography marginBottom={'.5em'}>Region End</Typography>
+        <Typography marginBottom={'.5em'}>Region ends by</Typography>
         <DatePicker
           label='Select date'
           value={selectedEnd}

src/components/elements/MarketFilters/RegionStartFilter.tsx

@@ -47,7 +47,7 @@ const RegionStartFilter = ({ filters, updateFilters }: FilterProps) => {
   return (
     <>
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Typography marginBottom={'.5em'}>Region Start</Typography>
+        <Typography marginBottom={'.5em'}>Region starts by</Typography>
         <DatePicker
           label='Select date'
           value={selectedStart}

src/components/elements/RegionCard/index.tsx

@@ -85,7 +85,7 @@ const RegionCardInner = ({
   // Create formatter (English).
   const timeAgo = new TimeAgo('en-US');
 
-  const formatDuration = humanizer();
+  const formatDuration = humanizer({ units: ['w', 'd', 'h'], round: true });
   const { region, taskId, location, currentUsage, consumed, coreOccupancy } =
     regionMetadata;
   const theme = useTheme();

src/pages/regions.tsx

@@ -106,7 +106,7 @@ const Dashboard = () => {
   };
 
   return (
-    <Box sx={{ display: 'flex', height: '100%', gap: '1rem' }}>
+    <Box sx={{ display: 'flex', height: '100%', gap: '1rem', justifyContent: 'space-between' }}>
       <Box sx={{ maxWidth: '45rem', flexGrow: 1, overflow: 'auto' }}>
         <Box>
           <Typography
@@ -158,13 +158,12 @@ const Dashboard = () => {
       </Box>
       <Box
         sx={{
-          position: 'fixed',
-          right: '7.5rem',
+          borderRadius: '.5rem',
           color: theme.palette.text.secondary,
           background: theme.palette.background.default,
           minWidth: 280,
           height: 500,
-          margin: 'auto',
+          marginTop: '2rem',
           padding: '2rem 3rem',
         }}
       >