-
-
-
-
-
- {/* TODO: support mainnet */}
-
-
-
-
-
- {isActive && (isInitialized ?
Active :
Uninitialized)}
-
+
+
+
+
+ {isActive && (
+
+ {isInitialized ? 'Active' : 'Uninitialized'}
+
+ )}
+
- {programName &&
{programName}
}
+
+ Code ID
+
+
+ Transaction Hash
+
+
+ Program Balance
+
+
+ Executable Balance
+
+
+
-
- {codeId && (
- <>
-
CODE ID
-
-
- )}
-
PROGRAM BALANCE
-
-
-
-
EXECUTABLE BALANCE
-
-
- {blockHash && (
- <>
-
BLOCK HASH
-
-
- {formattedCreatedAt}
-
-
- )}
-
+
+
Block Number
+
+
{serviceListContent()}
+
+ {idl ? (
+
+ ) : (
+
+
No IDL uploaded. Please upload an IDL file to initialize and interact with the program.
+
+
+ )}
+
);
};
diff --git a/idea/vara-eth/frontend/src/pages/user/user.module.scss b/idea/vara-eth/frontend/src/pages/user/user.module.scss
index 4ada3ea70a..0c78a32fb9 100644
--- a/idea/vara-eth/frontend/src/pages/user/user.module.scss
+++ b/idea/vara-eth/frontend/src/pages/user/user.module.scss
@@ -7,28 +7,6 @@
border-radius: 0 0 4px 4px;
}
-.header {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: space-between;
-
- .leftSide {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 16px;
- }
-
- .link {
- display: flex;
- }
-
- .arrowLeft {
- margin-right: 4px;
- }
-}
-
.card {
padding: 24px;
@@ -37,26 +15,12 @@
}
}
-.name {
- padding-left: 32px;
- color: #fff;
-}
+.title {
+ font-size: 16px;
+ font-weight: 400;
-.properties {
- margin-top: 24px;
- display: grid;
- grid-template-columns: 145px 1fr;
- gap: 20px 24px;
-}
+ // TODO: remove after default heading capitalize is gone
+ text-transform: none;
-.property {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.blockHash {
- display: flex;
- flex-direction: column;
- gap: 4px;
+ color: #fff;
}
diff --git a/idea/vara-eth/frontend/src/pages/user/user.tsx b/idea/vara-eth/frontend/src/pages/user/user.tsx
index 28c4dcf24d..04f9ba7fd7 100644
--- a/idea/vara-eth/frontend/src/pages/user/user.tsx
+++ b/idea/vara-eth/frontend/src/pages/user/user.tsx
@@ -1,11 +1,10 @@
import { HexString } from '@vara-eth/api';
import { useParams } from 'react-router-dom';
+import { formatEther, formatUnits, isAddress } from 'viem';
import { useBalance } from 'wagmi';
import { useWrappedVaraBalance } from '@/app/api';
-import EtherscanSvg from '@/assets/icons/etherscan.svg?react';
-import { Balance, HashLink, Tooltip } from '@/components';
-import { formatBalance } from '@/shared/utils';
+import { Balance, ChainEntity } from '@/components';
import styles from './user.module.scss';
@@ -15,39 +14,29 @@ type Params = {
export const User = () => {
const { userId } = useParams() as Params;
-
- const address = userId.startsWith('0x') ? userId : undefined;
+ const address = isAddress(userId) ? userId : undefined;
const { data: ethBalance } = useBalance({ address });
const { value, decimals } = useWrappedVaraBalance(address);
- const wvara = value !== undefined && decimals ? formatBalance(value, decimals) : null;
- const eth = ethBalance ? formatBalance(ethBalance.value, ethBalance.decimals) : null;
+ const wvara = value !== undefined && decimals ? formatUnits(value, decimals) : null;
+ const eth = ethBalance ? formatEther(ethBalance.value) : null;
return (
-
-
-
-
- {/* TODO: support mainnet */}
-
-
-
-
-
-
+
+ Address
+
+
-
-
BALANCE
- {wvara &&
}
- {eth &&
}
-
+
+ Balance
+
+
+ {wvara && } | {eth && }
+
+
);
diff --git a/idea/vara-eth/frontend/src/shared/utils/index.ts b/idea/vara-eth/frontend/src/shared/utils/index.ts
index 84c0c2631a..1bf62ed6e8 100644
--- a/idea/vara-eth/frontend/src/shared/utils/index.ts
+++ b/idea/vara-eth/frontend/src/shared/utils/index.ts
@@ -52,13 +52,7 @@ const formatBalance = (value: bigint, decimals: number) => {
return polkadotFormatBalance(value, { decimals, forceUnit: '-', withSi: false, withUnit: false });
};
-const formatDate = (rawDate: string | number) => {
- const date = new Date(rawDate);
- const time = date.toLocaleTimeString('en-GB');
- const formatedDate = date.toLocaleDateString('en-US').replace(/\//g, '-');
-
- return `${formatedDate} ${time}`;
-};
+const formatDate = (value: string | number) => new Date(value).toLocaleString();
const getPreformattedText = (data: unknown) => JSON.stringify(data, null, 4);