feat: add connect btn

src/app/components/crypto-assets/components/asset-row-grid.tsx

@@ -5,14 +5,28 @@ interface AssetRowGridProps {
   balance: React.ReactNode;
   caption: React.ReactNode;
   usdBalance?: React.ReactNode;
+  connectBtn?: React.ReactNode;
 }
-export function AssetRowGrid({ title, balance, caption, usdBalance }: AssetRowGridProps) {
+export function AssetRowGrid({
+  title,
+  balance,
+  caption,
+  usdBalance,
+  connectBtn,
+}: AssetRowGridProps) {
+  const balanceItem = connectBtn ? (
+    <GridItem rowSpan={2} display="flex" justifyContent="end">
+      {connectBtn}
+    </GridItem>
+  ) : (
+    <GridItem textAlign="right">{balance}</GridItem>
+  );
   return (
     <Grid columns={2} gridTemplateColumns="2fr 1fr" gridTemplateRows={2} gap={0}>
       <GridItem textAlign="left" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
         {title}
       </GridItem>
-      <GridItem textAlign="right">{balance}</GridItem>
+      {balanceItem}
       <GridItem textAlign="left">{caption}</GridItem>
       {usdBalance && <GridItem>{usdBalance}</GridItem>}
     </Grid>

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -99,6 +99,7 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
                 {additionalUsdBalanceInfo}
               </Flex>
             }
+            connectBtn={connectBtn}
           />
         </Flag>
         {component}