From e3f3209b9c7a23c60980edee48a86602cfeb987f Mon Sep 17 00:00:00 2001
From: Eugene Chybisov <imchybisov@gmail.com>
Date: Mon, 7 Nov 2022 13:53:07 +0000
Subject: [PATCH] fix: fix circular component reference issue

---
 .../src/components/TokenAvatar/TokenAvatar.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
index 44f665b67..453334d95 100644
--- a/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
+++ b/packages/widget/src/components/TokenAvatar/TokenAvatar.tsx
@@ -10,17 +10,14 @@ export const TokenAvatarFallback: React.FC<{
 }> = ({ token, sx }) => {
   const { chain } = useChain(token.chainId);
   const { token: chainToken } = useToken(token.chainId, token.address);
-  return <TokenAvatar token={chainToken ?? token} chain={chain} sx={sx} />;
+  return <TokenAvatarBase token={chainToken ?? token} chain={chain} sx={sx} />;
 };
 
-export const TokenAvatar: React.FC<{
+export const TokenAvatarBase: React.FC<{
   token: Token;
   chain?: Chain;
   sx?: SxProps<Theme>;
 }> = ({ token, chain, sx }) => {
-  if (!chain || !token.logoURI) {
-    return <TokenAvatarFallback token={token} sx={sx} />;
-  }
   return (
     <Badge
       overlap="circular"
@@ -40,3 +37,14 @@ export const TokenAvatar: React.FC<{
     </Badge>
   );
 };
+
+export const TokenAvatar: React.FC<{
+  token: Token;
+  chain?: Chain;
+  sx?: SxProps<Theme>;
+}> = ({ token, chain, sx }) => {
+  if (!chain || !token.logoURI) {
+    return <TokenAvatarFallback token={token} sx={sx} />;
+  }
+  return <TokenAvatarBase token={token} chain={chain} sx={sx} />;
+};