Merge pull request #204 from comit-network/minor-ui-improvement

Minor UI improvements

Author: mergify[bot]

extension/src/App.tsx

@@ -1,5 +1,5 @@
 import { SettingsIcon } from "@chakra-ui/icons";
-import { Box, Center, ChakraProvider, Heading, IconButton } from "@chakra-ui/react";
+import { Box, Center, ChakraProvider, Flex, Heading, IconButton, Spacer } from "@chakra-ui/react";
 import { faBug } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as React from "react";
@@ -55,13 +55,22 @@ const App = () => {
     return (
         <ChakraProvider theme={theme}>
             <Box h={600} w={400}>
-                <IconButton
-                    aria-label="Settings"
-                    icon={<SettingsIcon />}
-                    onClick={() => browser.runtime.openOptionsPage()}
-                />
                 {walletStatus?.status === Status.Loaded
                     && <>
+                        <Flex>
+                            <Center p="2">
+                                <Heading size="md">Waves Wallet</Heading>
+                            </Center>
+                            <Spacer />
+                            <Box>
+                                <IconButton
+                                    aria-label="Settings"
+                                    icon={<SettingsIcon />}
+                                    onClick={() => browser.runtime.openOptionsPage()}
+                                />
+                            </Box>
+                        </Flex>
+
                         {balanceUpdates && <WalletBalances balanceUpdates={balanceUpdates} />}
                         {!signLoan && !swapToSign && <AddressQr />}
                         {!signLoan && !swapToSign && <WithdrawAll />}

extension/src/components/Balances.tsx

@@ -42,7 +42,9 @@ function balanceEntry(balance: BalanceEntry) {
 }
 
 function WalletBalances({ balanceUpdates }: BalancesProps) {
-    let elements = balanceUpdates.map((be) => balanceEntry(be));
+    let elements = balanceUpdates
+        .sort((a, b) => a.ticker.localeCompare(b.ticker))
+        .map((be) => balanceEntry(be));
 
     return (
         <HStack justify="center">

extension/src/models.ts

@@ -1,6 +1,6 @@
 // TODO: All field names should be camelCase
 
-export const USDT_TICKER = "USDt";
+export const USDT_TICKER = "L-USDt";
 export const BTC_TICKER = "L-BTC";
 
 export enum Status {