From d0ca24c1d95b20200fa804c447ebf882c3e065f7 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Thu, 13 Feb 2025 14:14:00 -0600
Subject: [PATCH] feat: fixed chakra provider missing/single child issue

---
 src/app/_components/Providers.tsx             | 18 +++++-----
 .../search/items/address-result-item.tsx      |  6 ++--
 src/ui/icons/WalletIcon.tsx                   | 34 ++++++++++++-------
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/app/_components/Providers.tsx b/src/app/_components/Providers.tsx
index 7081e5da3..5d3575a8f 100644
--- a/src/app/_components/Providers.tsx
+++ b/src/app/_components/Providers.tsx
@@ -46,12 +46,12 @@ export const Providers = ({
   const querySubnet = Array.isArray(subnet) ? subnet[0] : subnet;
 
   return (
-    <GlobalContextProvider
-      addedCustomNetworksCookie={addedCustomNetworksCookie}
-      removedCustomNetworksCookie={removedCustomNetworksCookie}
-    >
-      <CookiesProvider>
-        <ChakraProvider value={system}>
+    <ChakraProvider value={system}>
+      <GlobalContextProvider
+        addedCustomNetworksCookie={addedCustomNetworksCookie}
+        removedCustomNetworksCookie={removedCustomNetworksCookie}
+      >
+        <CookiesProvider>
           <ColorModeProvider>
             <ReduxProvider store={store}>
               <AppConfig // TODO: rename to something else like SessionProvider
@@ -63,8 +63,8 @@ export const Providers = ({
               </AppConfig>
             </ReduxProvider>
           </ColorModeProvider>
-        </ChakraProvider>
-      </CookiesProvider>
-    </GlobalContextProvider>
+        </CookiesProvider>
+      </GlobalContextProvider>
+    </ChakraProvider>
   );
 };
diff --git a/src/features/search/items/address-result-item.tsx b/src/features/search/items/address-result-item.tsx
index a83ca0d11..9d3ab014c 100644
--- a/src/features/search/items/address-result-item.tsx
+++ b/src/features/search/items/address-result-item.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Box, Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import { Circle } from '../../../common/components/Circle';
@@ -25,7 +25,9 @@ export const AddressResultItem: React.FC<AddressResultItemProps> = ({ result })
       <ResultItemWrapper>
         <Flex alignItems="center">
           <Circle h={12} w={12}>
-            <WalletIcon size={4} />
+            <Icon h={4} w={4}>
+              <WalletIcon />
+            </Icon>
           </Circle>
           <Box ml={4}>
             <Title display="block" mb="4px" className={'search-result-title'}>
diff --git a/src/ui/icons/WalletIcon.tsx b/src/ui/icons/WalletIcon.tsx
index dd68419b0..22132802f 100644
--- a/src/ui/icons/WalletIcon.tsx
+++ b/src/ui/icons/WalletIcon.tsx
@@ -1,25 +1,33 @@
 'use client';
 
-import { Icon } from '@chakra-ui/react';
-import { IconProps } from '@phosphor-icons/react';
-import { forwardRef } from 'react';
+import { Icon, IconBase, IconWeight } from '@phosphor-icons/react';
+import { ReactElement, forwardRef } from 'react';
 
-const WalletIcon = forwardRef<SVGSVGElement, IconProps>(({ size = '44px' }, ref) => (
-  <Icon
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'regular',
+    <>
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12" />
+      <path d="M20 12v4h-4a2 2 0 0 1 0 -4h4" />
+    </>,
+  ],
+]);
+
+const WalletIcon: Icon = forwardRef((props, ref) => (
+  <IconBase
+    ref={ref}
+    {...props}
+    weights={weights}
     viewBox="0 0 24 24"
     strokeWidth="1"
     stroke="currentColor"
     fill="none"
     strokeLinecap="round"
     strokeLinejoin="round"
-    h={size}
-    w={size}
-    ref={ref}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12" />
-    <path d="M20 12v4h-4a2 2 0 0 1 0 -4h4" />
-  </Icon>
+  />
 ));
 
+WalletIcon.displayName = 'WalletIcon';
+
 export default WalletIcon;