feat(dw): show timezone in send form (#2757)

kadena-community · Dec 19, 2024 · e0efb25 · e0efb25
1 parent 82f69cb
commit e0efb25
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/packages/apps/dev-wallet/src/pages/transfer/Components/CreationTime.tsx b/packages/apps/dev-wallet/src/pages/transfer/Components/CreationTime.tsx
@@ -1,8 +1,9 @@
 import { toISOLocalDateTime } from '@/utils/helpers';
-import { TextField } from '@kadena/kode-ui';
+import { Badge, Stack, TextField } from '@kadena/kode-ui';
 import { useEffect, useState } from 'react';
 import { Label } from './Label';
 import { Seconds } from './TTLSelect';
+import { hideInMobileClass } from './style.css';
 
 export function CreationTime({
   value,
@@ -20,6 +21,9 @@ export function CreationTime({
       clearInterval(timer);
     };
   }, []);
+  const timeZone =
+    Intl?.DateTimeFormat?.()?.resolvedOptions?.().timeZone || undefined;
+
   return (
     <TextField
       aria-label="Valid From"
@@ -31,6 +35,13 @@ export function CreationTime({
           : toISOLocalDateTime(defaultTime)
       }
       defaultValue={toISOLocalDateTime(defaultTime)}
+      endAddon={
+        timeZone ? (
+          <Stack paddingInlineEnd={'sm'} className={hideInMobileClass}>
+            <Badge size="sm">{timeZone}</Badge>
+          </Stack>
+        ) : undefined
+      }
       onChange={(e) => {
         console.log('e.target.value', new Date(e.target.value));
         onChange(Math.round(new Date(e.target.value).getTime() / 1000));

diff --git a/packages/apps/dev-wallet/src/pages/transfer/Components/style.css.ts b/packages/apps/dev-wallet/src/pages/transfer/Components/style.css.ts
@@ -25,3 +25,11 @@ export const labelClass = style({
   marginLeft: '-12px',
   fontWeight: '700',
 });
+
+export const hideInMobileClass = style({
+  '@media': {
+    '(max-width: 460px)': {
+      display: 'none',
+    },
+  },
+});