From 70a0773cfae952d7afe8d7682cb818d5fa127cbc Mon Sep 17 00:00:00 2001
From: Samer Buna <75209+samerbuna@users.noreply.github.com>
Date: Wed, 24 Aug 2022 14:05:38 -0700
Subject: [PATCH] feat: use a wrapper for Icon component (#120)

---
 src/components/header.tsx               | 3 +--
 src/components/icon.tsx                 | 7 +++++++
 src/components/login-link.tsx           | 2 +-
 src/components/login/auth-code.tsx      | 4 +++-
 src/components/logout-link.tsx          | 3 ++-
 src/components/pages/contacts.tsx       | 3 ++-
 src/components/pages/login-email.tsx    | 2 +-
 src/components/pages/register.tsx       | 2 +-
 src/components/settings/color-theme.tsx | 4 ++--
 src/components/settings/email.tsx       | 4 ++--
 src/components/settings/language.tsx    | 3 ++-
 src/components/settings/username.tsx    | 5 +++--
 src/components/transactions/item.tsx    | 4 +++-
 13 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 src/components/icon.tsx

diff --git a/src/components/header.tsx b/src/components/header.tsx
index 43c78231..01efb02b 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,7 +1,5 @@
 import { useState } from "react"
 
-import { Icon } from "@galoymoney/react"
-
 import useMainQuery from "hooks/use-main-query"
 import { translate, useAuthContext, useAppState } from "store/index"
 
@@ -10,6 +8,7 @@ import Link from "components/link"
 import LoginLink from "components/login-link"
 import LogoutLink from "components/logout-link"
 import DiscardableMessage from "components/discardable-message"
+import Icon from "components/icon"
 
 const headerNavPages = ["home"] as const
 
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
new file mode 100644
index 00000000..c7a3a26c
--- /dev/null
+++ b/src/components/icon.tsx
@@ -0,0 +1,7 @@
+import { IconName, Icon as DefaultIcon } from "@galoymoney/react"
+
+const Icon: React.FC<{ name: IconName }> = ({ name }) => {
+  return <DefaultIcon name={name} />
+}
+
+export default Icon
diff --git a/src/components/login-link.tsx b/src/components/login-link.tsx
index 6da62508..fce6a31a 100644
--- a/src/components/login-link.tsx
+++ b/src/components/login-link.tsx
@@ -1,7 +1,7 @@
 import { translate } from "store/index"
-import { Icon } from "@galoymoney/react"
 
 import Link from "components/link"
+import Icon from "components/icon"
 
 const LoginLink = () => (
   <Link to="/login">
diff --git a/src/components/login/auth-code.tsx b/src/components/login/auth-code.tsx
index 9b6cf63f..f5803657 100644
--- a/src/components/login/auth-code.tsx
+++ b/src/components/login/auth-code.tsx
@@ -1,9 +1,11 @@
 import { ChangeEvent, useState } from "react"
 
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { config, translate, history, useRequest, useAuthContext } from "store/index"
 
+import Icon from "components/icon"
+
 type FCT = React.FC<{ phoneNumber: string }>
 
 const AuthCode: FCT = ({ phoneNumber }) => {
diff --git a/src/components/logout-link.tsx b/src/components/logout-link.tsx
index ca90ce71..7bf0303f 100644
--- a/src/components/logout-link.tsx
+++ b/src/components/logout-link.tsx
@@ -1,8 +1,9 @@
 import { useResetClient } from "@galoymoney/client"
-import { Icon } from "@galoymoney/react"
 
 import { translate, useAuthContext, NoPropsFCT } from "store/index"
 
+import Icon from "components/icon"
+
 const LogoutLink: NoPropsFCT = () => {
   const { setAuthSession } = useAuthContext()
 
diff --git a/src/components/pages/contacts.tsx b/src/components/pages/contacts.tsx
index 9bebab96..641644e7 100644
--- a/src/components/pages/contacts.tsx
+++ b/src/components/pages/contacts.tsx
@@ -1,10 +1,11 @@
 import { truncatedDisplay, useQuery } from "@galoymoney/client"
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { translate, history, useAuthContext, NoPropsFCT } from "store/index"
 
 import ErrorMessage from "components/error-message"
 import Header from "components/header"
+import Icon from "components/icon"
 
 const ContactsList: NoPropsFCT = () => {
   const { loading, errorsMessage, data } = useQuery.contacts()
diff --git a/src/components/pages/login-email.tsx b/src/components/pages/login-email.tsx
index c4567a68..df6bb65b 100644
--- a/src/components/pages/login-email.tsx
+++ b/src/components/pages/login-email.tsx
@@ -14,7 +14,7 @@ import { config, translate, history, useAuthContext } from "store/index"
 
 import Link from "components/link"
 import { Messages } from "components/kratos"
-import { Icon } from "@galoymoney/react"
+import Icon from "components/icon"
 
 type FCT = React.FC<{
   flowData?: KratosFlowData
diff --git a/src/components/pages/register.tsx b/src/components/pages/register.tsx
index 1883935f..c3f9c5f0 100644
--- a/src/components/pages/register.tsx
+++ b/src/components/pages/register.tsx
@@ -17,7 +17,7 @@ import {
 
 import Link from "components/link"
 import { Messages } from "components/kratos"
-import { Icon } from "@galoymoney/react"
+import Icon from "components/icon"
 
 type FCT = React.FC<{
   flowData?: KratosFlowData
diff --git a/src/components/settings/color-theme.tsx b/src/components/settings/color-theme.tsx
index 34aab16a..ef100bda 100644
--- a/src/components/settings/color-theme.tsx
+++ b/src/components/settings/color-theme.tsx
@@ -1,7 +1,5 @@
 import { ChangeEvent, useEffect, useState } from "react"
 
-import { Icon } from "@galoymoney/react"
-
 import {
   translate,
   ColorTheme,
@@ -11,6 +9,8 @@ import {
   storage,
 } from "store/index"
 
+import Icon from "components/icon"
+
 const ColorThemeSetting: NoPropsFCT = () => {
   const [colorTheme, setColorThemeState] = useState<ColorTheme>("DEFAULT")
 
diff --git a/src/components/settings/email.tsx b/src/components/settings/email.tsx
index 01a8fcb4..1666f77f 100644
--- a/src/components/settings/email.tsx
+++ b/src/components/settings/email.tsx
@@ -1,7 +1,7 @@
-import { Icon } from "@galoymoney/react"
-
 import { translate, useAuthContext } from "store/index"
 
+import Icon from "components/icon"
+
 type FCT = React.FC<{ guestView: boolean }>
 
 const EmailSetting: FCT = ({ guestView }) => {
diff --git a/src/components/settings/language.tsx b/src/components/settings/language.tsx
index 680f0b62..6e44b2a9 100644
--- a/src/components/settings/language.tsx
+++ b/src/components/settings/language.tsx
@@ -1,11 +1,12 @@
 import { ChangeEvent } from "react"
 
 import { useMutation } from "@galoymoney/client"
-import { Icon } from "@galoymoney/react"
 
 import useMainQuery from "hooks/use-main-query"
 import { setLocale, translate, useAppState } from "store/index"
 
+import Icon from "components/icon"
+
 const languageLabels = {
   "DEFAULT": "Default (OS)",
   "en-US": "English",
diff --git a/src/components/settings/username.tsx b/src/components/settings/username.tsx
index ab34dbe7..2941f0f8 100644
--- a/src/components/settings/username.tsx
+++ b/src/components/settings/username.tsx
@@ -1,10 +1,11 @@
 import { useMutation } from "@galoymoney/client"
-import { Icon, Spinner } from "@galoymoney/react"
+import { Spinner } from "@galoymoney/react"
 
 import { translate } from "store/index"
-
 import useMainQuery from "hooks/use-main-query"
 
+import Icon from "components/icon"
+
 const UsernameInput: React.FC<{ lightningAddressDomain: string }> = ({
   lightningAddressDomain,
 }) => {
diff --git a/src/components/transactions/item.tsx b/src/components/transactions/item.tsx
index 34136469..99c20e05 100644
--- a/src/components/transactions/item.tsx
+++ b/src/components/transactions/item.tsx
@@ -6,10 +6,12 @@ import {
   GaloyGQL,
   truncatedDisplay,
 } from "@galoymoney/client"
-import { Icon, SatFormat } from "@galoymoney/react"
+import { SatFormat } from "@galoymoney/react"
 
 import { config, translate, getLocale } from "store/index"
 
+import Icon from "components/icon"
+
 export const BLOCKCHAIN_EXPLORER_URL = "https://mempool.space/tx/"
 
 const typeDisplay = (type: GaloyGQL.SettlementVia["__typename"]) => {