Merge pull request #168 from comit-network/minor-frontend-fixes

Minor frontend fixes

frontend/src/components/CurrentPrice.tsx

@@ -12,30 +12,31 @@ export default function CurrentPrice(
         priceInfo,
     }: Props,
 ) {
-    let bid = <Skeleton height="20px" />;
-    let ask = <Skeleton height="20px" />;
-    let timestamp = <Skeleton height="20px" />;
-
-    if (priceInfo) {
-        bid = <Text>{priceInfo.bid} USD</Text>;
-        ask = <Text>{priceInfo.ask} USD</Text>;
-        timestamp = <Timestamp timestamp={priceInfo.last_updated_at} />;
-    }
+    const { ask, bid, last_updated_at } = priceInfo || {};
 
     return (
         <Box shadow={"md"} marginBottom={5} padding={5}>
             <Center><Text fontWeight={"bold"}>Current Price</Text></Center>
             <HStack>
                 <Text align={"left"}>Bid:</Text>
-                {bid}
+                <Skeleton isLoaded={bid != null}>
+                    <Text>{bid} USD</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
             <HStack>
                 <Text align={"left"}>Ask:</Text>
-                {ask}
+                <Skeleton isLoaded={ask != null}>
+                    <Text>{ask} USD</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
-            {timestamp}
+            <HStack>
+                <Text align={"left"}>Updated:</Text>
+                <Skeleton isLoaded={last_updated_at != null}>
+                    <Timestamp timestamp={last_updated_at!} />
+                </Skeleton>
+            </HStack>
         </Box>
     );
 }

frontend/src/components/Timestamp.tsx

@@ -13,7 +13,7 @@ export default function Timestamp(
 ) {
     return (
         <Text>
-            Updated: {unixTimestampToDate(timestamp).toLocaleDateString("en-US", {
+            {unixTimestampToDate(timestamp).toLocaleDateString("en-US", {
                 year: "numeric",
                 month: "numeric",
                 day: "numeric",

frontend/src/components/Wallet.tsx

@@ -14,37 +14,35 @@ export default function Wallet(
     }: WalletProps,
 ) {
     const { hasCopied, onCopy } = useClipboard(walletInfo ? walletInfo.address : "");
-
-    let balance = <Skeleton height="20px" />;
-    let address = <Skeleton height="20px" />;
-    let timestamp = <Skeleton height="20px" />;
-
-    if (walletInfo) {
-        balance = <Text>{walletInfo.balance} BTC</Text>;
-        address = (
-            <HStack>
-                <Text isTruncated>{walletInfo.address}</Text>
-                <IconButton
-                    aria-label="Copy to clipboard"
-                    icon={hasCopied ? <CheckIcon /> : <CopyIcon />}
-                    onClick={onCopy}
-                />
-            </HStack>
-        );
-        timestamp = <Timestamp timestamp={walletInfo.last_updated_at} />;
-    }
+    const { balance, address, last_updated_at } = walletInfo || {};
 
     return (
         <Box shadow={"md"} marginBottom={5} padding={5}>
             <Center><Text fontWeight={"bold"}>Your wallet</Text></Center>
             <HStack>
                 <Text align={"left"}>Balance:</Text>
-                {balance}
+                <Skeleton isLoaded={balance != null}>
+                    <Text>{balance} BTC</Text>
+                </Skeleton>
             </HStack>
             <Divider marginTop={2} marginBottom={2} />
-            {address}
+            <Skeleton isLoaded={address != null}>
+                <HStack>
+                    <Text isTruncated>{address}</Text>
+                    <IconButton
+                        aria-label="Copy to clipboard"
+                        icon={hasCopied ? <CheckIcon /> : <CopyIcon />}
+                        onClick={onCopy}
+                    />
+                </HStack>
+            </Skeleton>
             <Divider marginTop={2} marginBottom={2} />
-            {timestamp}
+            <HStack>
+                <Text align={"left"}>Updated:</Text>
+                <Skeleton isLoaded={last_updated_at != null}>
+                    <Timestamp timestamp={last_updated_at!} />
+                </Skeleton>
+            </HStack>
         </Box>
     );
 }