Add minutes, hours, days option on time input

js/packages/web/src/views/auctionCreate/index.tsx

@@ -112,7 +112,9 @@ export interface AuctionState {
   endTS?: number;
 
   auctionDuration?: number;
+  auctionDurationType?: 'days' | 'hours' | 'minutes';
   gapTime?: number;
+  gapTimeType?: 'days' | 'hours' | 'minutes';
   tickSizeEndingPhase?: number;
 
   spots?: number;
@@ -146,6 +148,8 @@ export const AuctionCreateView = () => {
     items: [],
     category: AuctionCategory.Open,
     saleType: 'auction',
+    auctionDurationType: 'minutes',
+    gapTimeType: 'minutes',
     winnersCount: 1,
     startSaleTS: undefined,
     startListTS: undefined,
@@ -308,8 +312,24 @@ export const AuctionCreateView = () => {
 
     const auctionSettings: IPartialCreateAuctionArgs = {
       winners: winnerLimit,
-      endAuctionAt: new BN((attributes.auctionDuration || 0) * 60), // endAuctionAt is actually auction duration, poorly named, in seconds
-      auctionGap: new BN((attributes.gapTime || 0) * 60),
+      endAuctionAt: new BN((attributes.auctionDuration || 0) * (
+        attributes.auctionDurationType == "days"
+        ? (60 * 60 * 24) // 1 day in seconds
+        : (
+          attributes.auctionDurationType == "hours"
+          ? (60 * 60) // 1 hour in seconds
+          : 60 // 1 minute in seconds
+        )
+      )), // endAuctionAt is actually auction duration, poorly named, in seconds
+      auctionGap: new BN((attributes.gapTime || 0) * (
+        attributes.gapTimeType == "days"
+        ? (60 * 60 * 24) // 1 day in seconds
+        : (
+          attributes.gapTimeType == "hours"
+          ? (60 * 60) // 1 hour in seconds
+          : 60
+        )
+      )),
       priceFloor: new PriceFloor({
         type: attributes.priceFloor
           ? PriceFloorType.Minimum
@@ -1136,17 +1156,30 @@ const EndingPhaseAuction = (props: {
       </Row>
       <Row className="content-action">
         <Col className="section" xl={24}>
-          <label className="action-field">
+          <div className="action-field">
             <span className="field-title">Auction Duration</span>
             <span className="field-info">
               This is how long the auction will last for.
             </span>
             <Input
+              addonAfter={(
+                <Select 
+                  defaultValue={props.attributes.auctionDurationType} 
+                  onChange={
+                    value =>
+                      props.setAttributes({
+                        ...props.attributes,
+                        auctionDurationType: value,
+                      })
+                  }>
+                  <Option value="minutes">Minutes</Option>
+                  <Option value="hours">Hours</Option>
+                  <Option value="days">Days</Option>
+                </Select>
+              )}
               type="number"
-              autoFocus
               className="input"
-              placeholder="Duration in minutes"
-              suffix="minutes"
+              placeholder="Set the auction duration"
               onChange={info =>
                 props.setAttributes({
                   ...props.attributes,
@@ -1154,9 +1187,9 @@ const EndingPhaseAuction = (props: {
                 })
               }
             />
-          </label>
+          </div>
 
-          <label className="action-field">
+          <div className="action-field">
             <span className="field-title">Gap Time</span>
             <span className="field-info">
               The final phase of the auction will begin when there is this much
@@ -1164,10 +1197,24 @@ const EndingPhaseAuction = (props: {
               will extend the end time by this same duration.
             </span>
             <Input
+              addonAfter={(
+                <Select 
+                  defaultValue={props.attributes.gapTimeType}
+                  onChange={
+                    value => 
+                      props.setAttributes({
+                        ...props.attributes,
+                        gapTimeType: value,
+                      })
+                  }>
+                  <Option value="minutes">Minutes</Option>
+                  <Option value="hours">Hours</Option>
+                  <Option value="days">Days</Option>
+                </Select>
+              )}
               type="number"
               className="input"
-              placeholder="Duration in minutes"
-              suffix="minutes"
+              placeholder="Set the gap time"
               onChange={info =>
                 props.setAttributes({
                   ...props.attributes,
@@ -1175,7 +1222,7 @@ const EndingPhaseAuction = (props: {
                 })
               }
             />
-          </label>
+          </div>
 
           <label className="action-field">
             <span className="field-title">Tick Size for Ending Phase</span>