From ace7be48b5df95876a84c49727ecf300805042aa Mon Sep 17 00:00:00 2001
From: Gustavo Mauricio <gustavo.mauricio58@gmail.com>
Date: Wed, 14 Sep 2022 17:51:14 +0100
Subject: [PATCH] currency formatter function moved to utils dir

---
 components/ConnectModal.tsx | 4 ++--
 components/Navigation.tsx   | 3 ++-
 pages/portfolio.tsx         | 7 +++----
 utils/formatters.ts         | 4 ++++
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/components/ConnectModal.tsx b/components/ConnectModal.tsx
index 87363d39..07c2b2ef 100644
--- a/components/ConnectModal.tsx
+++ b/components/ConnectModal.tsx
@@ -132,7 +132,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                 ) : (
                   <div className="flex flex-col gap-3 mt-2">
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black/70"
+                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
                       onClick={handleConnectMetamask}
                     >
                       <Image
@@ -162,7 +162,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
                       </div>
                     </button>
                     <button
-                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black/70"
+                      className="flex items-center p-4 bg-black/90 rounded-xl hover:bg-black"
                       onClick={handleConnectKeplr}
                     >
                       <Image
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 38a844af..fb6f4f44 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -7,6 +7,7 @@ import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import SearchInput from "components/SearchInput";
 import ProgressBar from "components/ProgressBar";
 import Wallet from "./Wallet";
+import { formatCurrency } from "utils/formatters";
 
 const mockedAccounts = [
   {
@@ -102,7 +103,7 @@ const Navigation = () => {
           </Popover>
         </div>
         <div className="flex gap-4 items-center">
-          <p>$: 2500</p>
+          <p>$: ${formatCurrency(2500)}</p>
           <div>Lvg</div>
           <div>Risk</div>
           <ProgressBar value={0.43} />
diff --git a/pages/portfolio.tsx b/pages/portfolio.tsx
index 57bf519e..5fa4988d 100644
--- a/pages/portfolio.tsx
+++ b/pages/portfolio.tsx
@@ -1,5 +1,7 @@
 import React from "react";
+
 import Container from "components/Container";
+import { formatCurrency } from "utils/formatters";
 
 const mockedAccounts = [
   {
@@ -71,6 +73,7 @@ const Portfolio = () => {
                     account.profit > 0 ? "text-green-400" : "text-red-500"
                   }`}
                 >
+                  {account.profit > 0 && "+"}
                   {formatCurrency(account.profit)}
                 </p>
                 <p className="text-sm text-white/40">P&L</p>
@@ -92,7 +95,3 @@ const Portfolio = () => {
 };
 
 export default Portfolio;
-
-function formatCurrency(value: string | number) {
-  return Number(value).toLocaleString();
-}
diff --git a/utils/formatters.ts b/utils/formatters.ts
index 2c08b3b5..8d47265c 100644
--- a/utils/formatters.ts
+++ b/utils/formatters.ts
@@ -11,3 +11,7 @@ export const formatWalletAddress = (
     address.length
   )}`;
 };
+
+export const formatCurrency = (value: string | number) => {
+  return Number(value).toLocaleString();
+};