From 2e0e46fee0935df3fb9342ed8f5391f945d7a12f Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Wed, 10 Jul 2024 11:28:23 -0400
Subject: [PATCH 1/4] Merge pull request #6 from Skidragon/error-messages

All Error messages are red.
---
 src/App.tsx                                 | 23 ++++++++-------------
 src/components/ErrorText/ErrorText.spec.tsx | 17 +++++++++++++++
 src/components/ErrorText/ErrorText.tsx      |  7 +++++++
 src/components/index.ts                     |  3 ++-
 4 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ErrorText/ErrorText.spec.tsx
 create mode 100644 src/components/ErrorText/ErrorText.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7af3d2a..38f6425 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,7 +41,7 @@ import {
 } from "./App-styles";
 import { Spacer } from "./common/Spacer";
 import { Loader } from "./components/Loader";
-import { PasswordField } from "./components";
+import { PasswordField, ErrorText } from "./components";
 
 type extStates =
   | "not-authenticated"
@@ -805,12 +805,7 @@ function App() {
             />
           </Box>
           <Spacer height="10px" />
-          <Typography sx={{
-            color: "red",
-            fontSize: "12px",
-            fontFamily: "Inter",
-            fontWeight: '600'
-          }}>{sendPaymentError}</Typography>
+          <ErrorText>{sendPaymentError}</ErrorText>
           {/* <Typography>{sendPaymentSuccess}</Typography> */}
           <Spacer height="25px" />
           <CustomButton
@@ -893,7 +888,7 @@ function App() {
               decline
             </CustomButton>
           </Box>
-          <Typography color="errror">{sendPaymentError}</Typography>
+          <ErrorText>{sendPaymentError}</ErrorText>
         </>
       )}
       {extState === "web-app-request-connection" && (
@@ -1073,9 +1068,9 @@ function App() {
               <CustomButton onClick={authenticateWallet} >
                 Authenticate
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDecryptedError}
-              </Typography>
+              </ErrorText>
             </>
         </>
       )}
@@ -1144,9 +1139,9 @@ function App() {
               <CustomButton onClick={confirmPasswordToDownload}>
                 Confirm password
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDownloadedError}
-              </Typography>
+              </ErrorText>
             </>
           )}
 
@@ -1229,9 +1224,9 @@ function App() {
               <CustomButton onClick={createAccountFunc}>
                 Create Account
               </CustomButton>
-              <Typography color="error">
+              <ErrorText>
                 {walletToBeDownloadedError}
-              </Typography>
+              </ErrorText>
             </>
           )}
 
diff --git a/src/components/ErrorText/ErrorText.spec.tsx b/src/components/ErrorText/ErrorText.spec.tsx
new file mode 100644
index 0000000..bc098ea
--- /dev/null
+++ b/src/components/ErrorText/ErrorText.spec.tsx
@@ -0,0 +1,17 @@
+import {
+    describe,
+    expect,
+    test
+} from 'vitest';
+import { render } from '@testing-library/react'
+import {
+    ErrorText
+} from './ErrorText'
+
+
+describe('ErrorText', () => {
+    test('it renders with the text', () => {
+        const { queryByTestId } = render(<ErrorText data-testid="test-id">An Error has occured!</ErrorText>)
+        expect(queryByTestId('test-id')?.textContent).toEqual('An Error has occured!')
+    })
+})
\ No newline at end of file
diff --git a/src/components/ErrorText/ErrorText.tsx b/src/components/ErrorText/ErrorText.tsx
new file mode 100644
index 0000000..cc3d458
--- /dev/null
+++ b/src/components/ErrorText/ErrorText.tsx
@@ -0,0 +1,7 @@
+import { Typography, TypographyProps, } from "@mui/material";
+
+export const ErrorText: React.FunctionComponent<TypographyProps> = ({ ...props }) => {
+    return (
+        <Typography color="error" {...props} />
+    )
+}
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
index 1d947d7..4764f6c 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,2 @@
-export * from './PasswordField/PasswordField';
\ No newline at end of file
+export * from './PasswordField/PasswordField';
+export * from './ErrorText/ErrorText';
\ No newline at end of file

From d15d6dbf950582bc0ade37e49d5b6867a02002b9 Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Wed, 10 Jul 2024 11:31:48 -0400
Subject: [PATCH 2/4] Added comment to get started and make draft PR

---
 src/background.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/background.ts b/src/background.ts
index f523d0e..e8bb68d 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -118,7 +118,8 @@ async function getBalanceInfo() {
   const address = wallet.address0;
   const validApi = await findUsableApi();
   const response = await fetch(validApi + "/addresses/balance/" + address);
-
+// Start Point: ideas - decide on what level to fix this problem: api, background.ts, or on the UI.
+// https://github.com/Qortal/chrome-extension/issues/7
   if (!response?.ok) throw new Error("Cannot fetch balance");
   const data = await response.json();
   return data;

From 356f8c6fd1442df411f2394e0af2e13aa2ec9883 Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Fri, 12 Jul 2024 13:44:41 -0400
Subject: [PATCH 3/4] Solved balance not showing up issue

---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 38f6425..7814820 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -655,7 +655,7 @@ function App() {
               </AddressBox>
             </CopyToClipboard>
             <Spacer height="10px" />
-            {balance && (
+            {(balance >= 0) && (
                <TextP
                sx={{
                  textAlign: "center",

From ff3c625aaa0a193e12f6b6b7f11130e95c7af363 Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Fri, 12 Jul 2024 13:49:25 -0400
Subject: [PATCH 4/4] Removed unecessary comments

---
 src/background.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/background.ts b/src/background.ts
index e8bb68d..f523d0e 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -118,8 +118,7 @@ async function getBalanceInfo() {
   const address = wallet.address0;
   const validApi = await findUsableApi();
   const response = await fetch(validApi + "/addresses/balance/" + address);
-// Start Point: ideas - decide on what level to fix this problem: api, background.ts, or on the UI.
-// https://github.com/Qortal/chrome-extension/issues/7
+
   if (!response?.ok) throw new Error("Cannot fetch balance");
   const data = await response.json();
   return data;