Tong/453 connect wallet panel (#472)

* feat: new connect wallet panel

---------

Co-authored-by: wjrjerome <[email protected]>

src/app/components/Staking/Form/States/WalletNotConnected.tsx

@@ -1,28 +1,37 @@
+import { Button, Heading, Text } from "@babylonlabs-io/bbn-core-ui";
 import Image from "next/image";
 
 import { useBTCWallet } from "@/app/context/wallet/BTCWalletProvider";
+import { getNetworkConfig } from "@/config/network.config";
 
-import connectIcon from "./connect-icon.svg";
 import walletIcon from "./wallet-icon.svg";
 
 export const WalletNotConnected = () => {
   const { open } = useBTCWallet();
+  const { coinName } = getNetworkConfig();
 
   return (
     <div className="flex flex-1 flex-col">
-      <div className="flex flex-1 flex-col items-center justify-center gap-2 py-12">
-        <div className="rounded-full bg-base-200 p-4">
-          <Image src={walletIcon} alt="Wallet" width={32} height={32} />
+      <div className="flex flex-1 flex-col items-center justify-center gap-8">
+        <div className="rotate-12">
+          <Image src={walletIcon} alt="Wallet" width={120} height={122} />
         </div>
-        <h3 className="font-bold">Connect wallet</h3>
-        <p className="text-center text-sm font-light dark:text-neutral-content">
-          Please connect wallet to start staking
-        </p>
+        <div className="flex flex-col gap-2 justify-center items-center self-stretch">
+          <Heading variant="h5" className="text-primary-dark text-2xl">
+            Connect wallet to start staking
+          </Heading>
+          <Text
+            variant="body1"
+            className="text-center text-base text-primary-light p-0"
+          >
+            To start staking your {coinName} first connect wallets then select a
+            Finality Provider
+          </Text>
+        </div>
+        <Button variant="outlined" onClick={open} className="text-primary-dark">
+          Connect wallet
+        </Button>
       </div>
-      <button className="btn-primary btn" onClick={open}>
-        <Image src={connectIcon} alt="Connect wallet" />
-        Connect wallet
-      </button>
     </div>
   );
 };

src/app/components/Staking/Staking.tsx

@@ -563,16 +563,15 @@ export const Staking = () => {
       <Heading variant="h4" className="text-primary-dark md:text-4xl">
         Bitcoin Staking
       </Heading>
-      <div className="flex flex-col gap-4 lg:flex-row">
-        <div className="flex flex-1 flex-col gap-4 lg:basis-3/5 xl:basis-2/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="flex flex-col gap-4 lg:basis-3/5 xl:basis-2/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
           <FinalityProviders
             onFinalityProvidersLoad={setFinalityProviders}
             selectedFinalityProvider={finalityProvider}
             onFinalityProviderChange={handleChooseFinalityProvider}
           />
         </div>
-        <div className="divider m-0 lg:divider-horizontal lg:m-0" />
-        <div className="flex flex-1 flex-col gap-4 lg:basis-2/5 xl:basis-1/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
+        <div className="flex flex-col gap-4 lg:basis-2/5 xl:basis-1/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
           {renderStakingForm()}
         </div>
       </div>