[web] - L2 improvements (#603)

* [web] - L2 payouts timer * [web] - L2 add comissions * [web] - update fortawesome package
gosh-sh · Oct 9, 2023 · 0c2e0ec · 0c2e0ec
1 parent 2af0d23
commit 0c2e0ec
Show file tree

Hide file tree

Showing 32 changed files with 243 additions and 58 deletions.
diff --git a/web/package.json b/web/package.json
@@ -43,11 +43,11 @@
         "@eversdk/appkit": "^0.3.8",
         "@eversdk/core": "^1.44.2",
         "@eversdk/lib-web": "^1.44.2",
-        "@fortawesome/fontawesome-svg-core": "^6.1.1",
-        "@fortawesome/free-brands-svg-icons": "^6.1.1",
-        "@fortawesome/free-regular-svg-icons": "^6.1.1",
-        "@fortawesome/free-solid-svg-icons": "^6.1.1",
-        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.1.19",
         "@headlessui/react": "^1.6.0",
         "@monaco-editor/react": "^4.4.6",
         "@mui/icons-material": "^5.8.4",
@@ -58,7 +58,7 @@
         "@wysimark/react": "^2.2.15",
         "apexcharts": "^3.37.0",
         "buffer": "^6.0.3",
-        "classnames": "^2.3.1",
+        "classnames": "^2.3.2",
         "copy-to-clipboard": "^3.3.3",
         "crypto-js": "^4.1.1",
         "diff": "^5.1.0",

diff --git a/web/src/utils.ts b/web/src/utils.ts
@@ -20,10 +20,40 @@ export const roundNumber = (value: number | string, precision: number = 5) => {
     return Math.round(floatvalue * multiplier) / multiplier
 }
 
-export const getDurationDelta = (time: number) => {
+export const getDurationDelta = (time: number, format: string) => {
     const ms = moment(time).diff(moment())
     const delta = moment.duration(ms)
-    return `${delta.days()}d ${delta.hours()}h ${delta.minutes()}m`
+
+    const parsed = []
+    while (format) {
+        const sindex = format.indexOf('[')
+        const eindex = format.indexOf(']')
+        const group = format.slice(sindex + 1, eindex)
+        format = format.slice(eindex + 1)
+
+        const nindex = format.indexOf('[')
+        const delimiter = format.slice(0, nindex)
+        format = format.slice(nindex)
+
+        parsed.push([group, delimiter])
+    }
+
+    const filled = parsed.map(([group, delimiter]) => {
+        const [sign, label] = group.split(':').concat('')
+
+        let value = 0
+        if (sign === 'd') {
+            value = delta.days()
+        } else if (sign === 'h') {
+            value = delta.hours()
+        } else if (sign === 'm') {
+            value = delta.minutes()
+        } else if (sign === 's') {
+            value = delta.seconds()
+        }
+        return `${value}${label}${delimiter}`
+    })
+    return filled.join('')
 }
 
 export const sleep = (ms: number = 0) => {
@@ -134,6 +164,10 @@ export const fromBigint = (number: bigint, decimals: number) => {
     // 001234 -> '001234'
     const fraction = zeroPaddedValue.slice(-decimals).replace(/\.?0+$/, '')
 
+    if (integer === '' && fraction === '') {
+        return '0'
+    }
+
     if (integer === '') {
         return `0.${fraction}`
     }

diff --git a/web/src/v1.0.0/components/DaoEvent/Progress.tsx b/web/src/v1.0.0/components/DaoEvent/Progress.tsx
@@ -62,7 +62,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                     ? `Closed at ${new Date(
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
-                    : `Ends in ${getDurationDelta(time.finish)}`}
+                    : `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`}
             </div>
         </div>
     )

diff --git a/web/src/v1.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v1.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -128,7 +128,7 @@ const DaoEventPageInner = (props: { address: string }) => {
                                 End date
                             </div>
                             <div className="text-sm">
-                                {getDurationDelta(event.time.finish)}
+                                {getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')}
                             </div>
                         </div>
                     </div>

diff --git a/web/src/v1.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v1.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -99,7 +99,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v2.0.0/components/DaoEvent/Progress.tsx b/web/src/v2.0.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v2.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v2.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -151,7 +151,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v2.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v2.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v3.0.0/components/DaoEvent/Progress.tsx b/web/src/v3.0.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v3.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v3.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -154,7 +154,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v3.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v3.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v4.0.0/components/DaoEvent/Progress.tsx b/web/src/v4.0.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v4.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v4.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -155,7 +155,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v4.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v4.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v5.0.0/components/DaoEvent/Progress.tsx b/web/src/v5.0.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v5.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v5.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -155,7 +155,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v5.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v5.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v5.1.0/components/DaoEvent/Progress.tsx b/web/src/v5.1.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v5.1.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v5.1.0/pages/DaoEvent/DaoEvent.tsx
@@ -155,7 +155,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v5.1.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v5.1.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v6.0.0/components/DaoEvent/Progress.tsx b/web/src/v6.0.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>

diff --git a/web/src/v6.0.0/pages/DaoEvent/DaoEvent.tsx b/web/src/v6.0.0/pages/DaoEvent/DaoEvent.tsx
@@ -155,7 +155,10 @@ const DaoEventPageInner = (props: { address: string }) => {
                                           event.time.completed || event.time.finish,
                                       ).toLocaleDateString()
                                     : event.time.finish > 0
-                                    ? getDurationDelta(event.time.finish)
+                                    ? getDurationDelta(
+                                          event.time.finish,
+                                          '[d:d] [h:h] [m:m]',
+                                      )
                                     : 'Review required'}
                             </div>
                         </div>

diff --git a/web/src/v6.0.0/pages/DaoEventList/components/ListItem.tsx b/web/src/v6.0.0/pages/DaoEventList/components/ListItem.tsx
@@ -115,7 +115,7 @@ const ListItem = (props: TListItemProps) => {
                 {event.status.completed
                     ? 'Completed'
                     : event.time.finish > 0
-                    ? getDurationDelta(event.time.finish)
+                    ? getDurationDelta(event.time.finish, '[d:d] [h:h] [m:m]')
                     : '-'}
             </div>
         </div>

diff --git a/web/src/v6.1.0/components/DaoEvent/Progress.tsx b/web/src/v6.1.0/components/DaoEvent/Progress.tsx
@@ -68,7 +68,7 @@ const DaoEventProgressBar = (props: TEventProgressBarProps) => {
                           time.completed || time.finish,
                       ).toLocaleDateString()}`
                     : time.finish > 0
-                    ? `Ends in ${getDurationDelta(time.finish)}`
+                    ? `Ends in ${getDurationDelta(time.finish, '[d:d] [h:h] [m:m]')}`
                     : 'Review required'}
             </div>
         </div>