From 7811024330a297b5aacf2c2770ab3c9be222b302 Mon Sep 17 00:00:00 2001
From: IsaccoSordo <isacco.sordo@gmail.com>
Date: Fri, 10 Jan 2025 16:16:33 +0100
Subject: [PATCH] fix: wallets rendering

---
 .../src/components/wallets/index.tsx          | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/beacon-ui/src/components/wallets/index.tsx b/packages/beacon-ui/src/components/wallets/index.tsx
index d1d517ce4..c51793582 100644
--- a/packages/beacon-ui/src/components/wallets/index.tsx
+++ b/packages/beacon-ui/src/components/wallets/index.tsx
@@ -13,28 +13,40 @@ interface WalletProps {
 }
 
 const Wallets: React.FC<WalletProps> = (props: WalletProps) => {
+  const wallets = props.wallets.map((wallet) => (
+    <Wallet
+      key={wallet.id}
+      disabled={props.disabled}
+      name={wallet.name}
+      description={wallet.descriptions.join(' & ')}
+      image={wallet.image}
+      small={props.small}
+      onClick={() => {
+        props.onClickWallet(wallet.id)
+      }}
+    />
+  ))
+  const groupedElements = []
+
+  for (let i = 0; i < wallets.length; i += 4) {
+    groupedElements.push(wallets.slice(i, i + 4))
+  }
+
   return (
-    <Grid2
-      container
-      rowSpacing={1}
-      columnSpacing={{ xs: 1, sm: 2, md: 3 }}
-      justifyContent={'center'}
-      padding={'10px'}
-    >
-      {props.wallets.map((wallet) => (
-        <Wallet
-          key={wallet.id}
-          disabled={props.disabled}
-          name={wallet.name}
-          description={wallet.descriptions.join(' & ')}
-          image={wallet.image}
-          small={props.small}
-          onClick={() => {
-            props.onClickWallet(wallet.id)
-          }}
-        />
-      ))}
-      <Button onClick={props.onClickOther} variant='contained' size='large'>
+    <Grid2 container sx={{ justifyContent: 'center' }}>
+      <Grid2 container spacing={2} sx={{ flexFlow: 'column', padding: '20px' }}>
+        {groupedElements.map((group, groupIndex) => (
+          <Grid2 container spacing={2} key={groupIndex}>
+            {group.map((item, itemIndex) => (
+              <Grid2 size={3} key={itemIndex}>
+                {/* Replace this with your content for each item */}
+                {item}
+              </Grid2>
+            ))}
+          </Grid2>
+        ))}
+      </Grid2>
+      <Button onClick={props.onClickOther} variant="outlined" sx={{ width: '100%' }}>
         {props.isMobile ? 'Pair wallet on another device' : 'Show QR code'}
       </Button>
     </Grid2>