From 931f83058d17b8070d39dd7c0601b604e20fb246 Mon Sep 17 00:00:00 2001
From: Tong Li <supertong@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:21:15 +1100
Subject: [PATCH] Tong/453 connect wallet panel (#472)

* feat: new connect wallet panel

---------

Co-authored-by: wjrjerome <wjrjerome@babylonchain.io>
---
 .../Form/States/WalletNotConnected.tsx        |  33 +++--
 .../Staking/Form/States/wallet-icon.svg       | 116 ++++++++++++++++--
 src/app/components/Staking/Staking.tsx        |   7 +-
 3 files changed, 129 insertions(+), 27 deletions(-)

diff --git a/src/app/components/Staking/Form/States/WalletNotConnected.tsx b/src/app/components/Staking/Form/States/WalletNotConnected.tsx
index fd9dd9e9..282fcc52 100644
--- a/src/app/components/Staking/Form/States/WalletNotConnected.tsx
+++ b/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>
   );
 };
diff --git a/src/app/components/Staking/Form/States/wallet-icon.svg b/src/app/components/Staking/Form/States/wallet-icon.svg
index 0c5f2816..65ec9339 100644
--- a/src/app/components/Staking/Form/States/wallet-icon.svg
+++ b/src/app/components/Staking/Form/States/wallet-icon.svg
@@ -1,11 +1,105 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_5548_10195)">
-<path d="M14.5313 1.59375C10.2001 2.46875 6.38757 3.225 6.06257 3.28125C5.00632 3.4625 4.43132 3.84375 4.05007 4.6125L3.90632 4.90625L3.88757 12.0437C3.87507 19.1062 3.87507 19.1812 4.00007 19.5188C4.26257 20.225 4.80632 20.7125 5.53132 20.9062C5.85007 20.9875 6.56257 21 10.6688 21H15.4376V23.7437V26.4875L15.2063 26.5687C14.5438 26.7812 14.0313 27.1625 13.6751 27.7125C13.5376 27.925 13.4001 28.2125 13.3563 28.3563L13.2876 28.625L6.80632 28.6375L0.325069 28.6562L0.162569 28.8062C6.85444e-05 28.9625 -0.0561814 29.2812 0.0375685 29.5312C0.150069 29.8187 0.0250687 29.8125 6.84382 29.8125C12.8938 29.8125 13.2563 29.8187 13.2876 29.925C13.7251 31.2312 14.7313 32 16.0001 32C17.2688 32 18.2751 31.2312 18.7126 29.9188C18.7438 29.8187 19.1063 29.8125 25.1563 29.8125C31.9751 29.8125 31.8501 29.8187 31.9626 29.5312C32.0438 29.3062 32.0001 29.0062 31.8501 28.8312L31.7001 28.6562L25.1938 28.6375C18.9501 28.625 18.6876 28.6187 18.6876 28.5062C18.6876 28.3438 18.3501 27.6937 18.1126 27.4125C17.8688 27.1125 17.2876 26.7312 16.8688 26.5938L16.5626 26.4875V23.7437V21H21.3313C25.4376 21 26.1501 20.9875 26.4688 20.9062C27.1938 20.7125 27.7376 20.225 28.0001 19.5188C28.1251 19.1812 28.1251 19.1062 28.1126 12.0437L28.0938 4.90625L27.9501 4.6125C27.7188 4.15 27.3501 3.775 26.8876 3.55C26.4938 3.35625 26.4251 3.34375 25.6751 3.31875L24.8751 3.3V2.81875C24.8688 1.7 24.6188 0.981249 24.0626 0.481249C23.6876 0.143749 23.2938 0 22.7876 0.00625038C22.5626 0.0124989 19.1876 0.6625 14.5313 1.59375ZM23.2188 1.29375C23.5438 1.5375 23.6501 1.85 23.6751 2.60625L23.7001 3.3125L17.8688 3.30625L12.0313 3.3L17.3751 2.21875C20.3126 1.61875 22.8001 1.14375 22.8938 1.15625C22.9876 1.175 23.1376 1.2375 23.2188 1.29375ZM26.4063 4.6125C26.5438 4.69375 26.7313 4.85625 26.8126 4.98125C26.9626 5.2 26.9688 5.25625 26.9876 6.325L27.0126 7.4375H22.2251H17.4438L17.2688 7.5875L17.0938 7.7375L17.0751 12.0437C17.0626 15.2625 17.0813 16.3875 17.1376 16.525C17.2813 16.8812 17.1938 16.875 22.3126 16.875H27.0001V17.8875C27.0001 18.7437 26.9813 18.9437 26.8813 19.1562C26.7501 19.4437 26.5438 19.65 26.2938 19.7437C26.1688 19.7937 23.0126 19.8125 15.9938 19.8125C7.58757 19.8125 5.83757 19.8 5.66882 19.725C5.40632 19.6187 5.15007 19.3125 5.06257 19.0125C5.01257 18.85 5.00007 16.7063 5.01257 11.9937L5.03132 5.2125L5.18757 4.9875C5.36257 4.725 5.62507 4.55625 5.93757 4.49375C6.05632 4.46875 10.6563 4.45625 16.1563 4.4625L26.1563 4.46875L26.4063 4.6125ZM27.0001 12.1562V15.6875H22.6251H18.2501V12.1562V8.625H22.6251H27.0001V12.1562ZM16.6563 27.775C17.2813 28.0625 17.6813 28.7437 17.6063 29.3875C17.4938 30.325 16.5813 31 15.6876 30.8062C14.7563 30.6062 14.1751 29.6312 14.4688 28.75C14.6876 28.0938 15.3251 27.625 16.0001 27.625C16.2313 27.625 16.4501 27.675 16.6563 27.775Z" fill="#8D9797"/>
-<path d="M22.1058 10.5067C21.5308 10.5942 20.9933 11.0504 20.8058 11.6067C20.7121 11.9004 20.7621 12.6629 20.8996 12.9192C21.1683 13.4442 21.6808 13.7629 22.3246 13.8004C22.6683 13.8192 22.7996 13.8004 23.0746 13.6754C23.6808 13.3942 24.0058 12.9317 24.0496 12.2817C24.0808 11.8067 23.9933 11.4754 23.7433 11.1379C23.3871 10.6504 22.7621 10.4129 22.1058 10.5067Z" fill="#8D9797"/>
-</g>
-<defs>
-<clipPath id="clip0_5548_10195">
-<rect width="32" height="32" fill="white"/>
-</clipPath>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150" fill="none">
+  <g clip-path="url(#clip0_1645_238248)">
+    <path d="M68.2621 135.452L51.7279 119.58L53.3271 113.82L69.8614 129.692L68.2621 135.452Z" fill="#718277"/>
+    <mask id="mask0_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="63" y="71" width="35" height="32">
+      <path d="M78.9988 71.5303L95.5331 87.4023C97.9424 89.7154 98.5489 92.7709 95.6782 97.1772C92.8602 101.559 89.36 102.708 85.2118 102.165C83.6188 101.955 81.9226 101.501 80.1353 100.878L63.601 85.0063C65.39 85.6228 67.0846 86.0829 68.6775 86.2933C72.8318 86.8373 76.332 85.6885 79.1439 81.3052C82.013 76.9049 81.4082 73.8434 79.0049 71.532L78.9988 71.5303Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask0_1645_238248)">
+      <path d="M80.137 100.88L63.6027 85.0077C65.3917 85.6242 67.0862 86.0843 68.6792 86.2947C69.956 86.4637 71.1676 86.4648 72.3208 86.2737L88.8551 102.146C87.7002 102.343 86.4903 102.336 85.2135 102.167C83.6205 101.956 81.9243 101.502 80.137 100.88Z" fill="#92A89A"/>
+      <path d="M88.8476 102.142L72.3133 86.2699C72.8085 86.1845 73.2938 86.0638 73.7647 85.9001L90.2989 101.772C89.828 101.936 89.3428 102.057 88.8476 102.142Z" fill="#8DA395"/>
+      <path d="M90.3001 101.775L73.7658 85.9028C74.1132 85.7833 74.4534 85.6422 74.7881 85.4736L91.3224 101.346C90.9877 101.514 90.6475 101.655 90.3001 101.775Z" fill="#899E90"/>
+      <path d="M91.3214 101.346L74.7871 85.4743C75.0847 85.3215 75.3795 85.1549 75.6732 84.9685L92.2075 100.84C91.9198 101.029 91.625 101.195 91.3214 101.346Z" fill="#85998C"/>
+      <path d="M92.2015 100.838L75.6672 84.9662C75.9609 84.7798 76.2492 84.5657 76.5285 84.3362L93.0628 100.208C92.7834 100.438 92.4952 100.652 92.2015 100.838Z" fill="#809487"/>
+      <path d="M93.0605 100.206L76.5262 84.3337C76.8477 84.0701 77.156 83.7833 77.4604 83.4629L93.9947 99.3349C93.6903 99.6553 93.3743 99.9465 93.0605 100.206Z" fill="#7C8F82"/>
+      <path d="M94.0036 99.3317L77.4693 83.4597C77.8835 83.026 78.285 82.5432 78.6711 81.9975L95.2054 97.8695C94.8132 98.4136 94.4178 98.898 94.0036 99.3317Z" fill="#778A7E"/>
+      <path d="M95.2059 97.874L78.6716 82.002C78.8314 81.7787 78.9867 81.5476 79.1454 81.3044C82.0144 76.9042 81.4096 73.8426 79.0063 71.5312L95.5406 87.4033C97.95 89.7163 98.5565 92.7718 95.6797 97.1764C95.521 97.4196 95.3656 97.6507 95.2059 97.874Z" fill="#738579"/>
+    </g>
+    <mask id="mask1_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="78" y="65" width="24" height="22">
+      <path d="M94.7836 86.7464L78.2493 70.8743C81.003 70.6284 83.472 69.0848 84.9782 65.5417L101.512 81.4137C100.006 84.9568 97.5372 86.5004 94.7836 86.7464Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask1_1645_238248)">
+      <path d="M94.7847 86.7455L78.2504 70.8735C78.4731 70.85 78.6957 70.8266 78.9156 70.7893L95.4499 86.6613C95.23 86.6986 95.0057 86.7281 94.7847 86.7455Z" fill="#92A89A"/>
+      <path d="M95.4496 86.6634L78.9154 70.7914C79.3274 70.7223 79.7357 70.6196 80.134 70.4815L96.6683 86.3535C96.27 86.4916 95.8617 86.5943 95.4496 86.6634Z" fill="#8DA395"/>
+      <path d="M96.6678 86.3511L80.1335 70.4791C80.4238 70.3764 80.7053 70.2583 80.984 70.1264L97.5182 85.9984C97.2439 86.1381 96.9564 86.2545 96.6678 86.3511Z" fill="#899E90"/>
+      <path d="M97.516 85.9921L80.9817 70.1201C81.225 69.998 81.4577 69.8665 81.6894 69.7151L98.2237 85.5871C97.992 85.7385 97.7592 85.87 97.516 85.9921Z" fill="#85998C"/>
+      <path d="M98.222 85.5918L81.6877 69.7198C81.9116 69.5728 82.1328 69.412 82.3451 69.2357L98.8793 85.1077C98.667 85.284 98.4459 85.4448 98.222 85.5918Z" fill="#809487"/>
+      <path d="M98.8766 85.1079L82.3424 69.2359C82.5719 69.0448 82.7986 68.8399 83.0121 68.6118L99.5464 84.4838C99.3268 84.7102 99.1061 84.9168 98.8766 85.1079Z" fill="#7C8F82"/>
+      <path d="M99.5544 84.4881L83.0201 68.6161C83.2946 68.3331 83.5591 68.0147 83.806 67.6654L100.34 83.5374C100.093 83.8867 99.8305 84.199 99.5544 84.4881Z" fill="#778A7E"/>
+      <path d="M100.338 83.5372L83.8041 67.6652C84.2407 67.0551 84.6303 66.3539 84.9763 65.5493L101.511 81.4213C101.165 82.2259 100.773 82.9332 100.338 83.5372Z" fill="#738579"/>
+    </g>
+    <path d="M76.607 107.475L60.0727 91.603L63.5996 85.004L80.1339 100.876L76.607 107.475Z" fill="#778A7E"/>
+    <path d="M72.9625 105.911L56.4282 90.0391L60.0723 91.6032L76.6066 107.475L72.9625 105.911Z" fill="#96AE9F"/>
+    <mask id="mask2_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="83" y="57" width="20" height="25">
+      <path d="M83.4243 57.7188L99.9586 73.5907C102.068 75.6126 102.942 78.1027 101.505 81.4171L84.9707 65.5451C86.4013 62.229 85.5339 59.7406 83.4243 57.7188Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask2_1645_238248)">
+      <path d="M101.513 81.4171L84.9785 65.5451C86.4092 62.229 85.5417 59.7406 83.4321 57.7188L99.9664 73.5907C102.076 75.6126 102.95 78.1027 101.513 81.4171Z" fill="#738579"/>
+    </g>
+    <path d="M70.0327 104.68L53.4984 88.8078L56.9902 82.3361L73.5245 98.2081L70.0327 104.68Z" fill="#778A7E"/>
+    <mask id="mask3_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="56" y="82" width="21" height="18">
+      <path d="M73.525 98.2079L56.9907 82.3359C57.9798 82.7648 58.9107 83.1906 59.9165 83.5588L76.4507 99.4308C75.445 99.0626 74.5141 98.6368 73.525 98.2079Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask3_1645_238248)">
+      <path d="M73.525 98.2079L56.9907 82.3359C57.9798 82.7648 58.9107 83.1906 59.9165 83.5588L76.4507 99.4308C75.445 99.0626 74.5141 98.6368 73.525 98.2079Z" fill="#92A89A"/>
+    </g>
+    <path d="M66.3141 103.181L49.7798 87.3086L53.5004 88.809L70.0347 104.681L66.3141 103.181Z" fill="#97AE9F"/>
+    <mask id="mask4_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="64" y="68" width="24" height="21">
+      <path d="M71.3908 72.5165L87.925 88.3885C85.9145 86.4591 82.3374 85.3177 80.8336 84.6884L64.2993 68.8164C65.8092 69.4473 69.3802 70.5871 71.3908 72.5165Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask4_1645_238248)">
+      <path d="M80.8258 84.6884L64.2915 68.8164C65.3614 69.261 67.4671 69.9646 69.3226 71.0298L85.8568 86.9018C83.9997 85.8427 81.894 85.139 80.8258 84.6884Z" fill="#92A89A"/>
+      <path d="M85.857 86.8954L69.3228 71.0234C69.9791 71.3998 70.6038 71.8195 71.1414 72.2936L87.6757 88.1656C87.138 87.6915 86.5133 87.2718 85.857 86.8954Z" fill="#8DA395"/>
+      <path d="M87.6773 88.165L71.1431 72.293C71.2271 72.3683 71.3051 72.4419 71.3831 72.5156L87.9174 88.3876C87.8394 88.3139 87.7553 88.2386 87.6773 88.165Z" fill="#899E90"/>
+    </g>
+    <path d="M76.1358 93.418L59.6015 77.546L64.2917 68.8156L80.826 84.6876L76.1358 93.418Z" fill="#778A7E"/>
+    <path d="M80.8252 84.6889C83.3397 85.7399 91.5773 88.2037 88.7949 93.3841C87.591 95.6151 85.377 96.0422 83.0875 95.7444C80.349 95.3881 77.496 93.9961 76.135 93.4192L80.833 84.6845L80.8252 84.6889Z" fill="#C1DFCB"/>
+    <path d="M96.1823 70.9535L79.648 55.0815L83.1582 48.5431L99.6925 64.4151L96.1823 70.9535Z" fill="#778A7E"/>
+    <mask id="mask5_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="50" y="79" width="20" height="18">
+      <path d="M67.2281 95.4579L50.6938 79.5859C51.5833 79.9482 52.4655 80.3607 53.2985 80.7139L69.8328 96.5859C68.9937 96.231 68.1176 95.8202 67.2281 95.4579Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask5_1645_238248)">
+      <path d="M67.2281 95.4579L50.6938 79.5859C51.5833 79.9482 52.4655 80.3607 53.2985 80.7139L69.8328 96.5859C68.9937 96.231 68.1176 95.8202 67.2281 95.4579Z" fill="#92A89A"/>
+    </g>
+    <path d="M87.2332 72.7396C89.3226 73.6214 96.2217 75.6645 93.7034 80.3373C92.57 82.4312 90.5942 82.8261 88.6026 82.5646C86.3575 82.2724 84.0928 81.1468 82.988 80.6861L87.2348 72.7335L87.2332 72.7396Z" fill="#C1DFCB"/>
+    <path d="M82.9888 80.6888L66.4546 64.8168L70.6997 56.8702L87.2339 72.7422L82.9888 80.6888Z" fill="#778A7E"/>
+    <mask id="mask6_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="70" y="56" width="23" height="20">
+      <path d="M76.4449 59.8917L92.9792 75.7637C91.3104 74.1632 88.4557 73.2533 87.2281 72.7392L70.6938 56.8672C71.9154 57.3796 74.7762 58.2912 76.4449 59.8917Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask6_1645_238248)">
+      <path d="M87.2359 72.7392L70.7017 56.8672C71.559 57.2271 73.2329 57.7859 74.7254 58.6467L91.2597 74.5187C89.7655 73.6639 88.0916 73.1052 87.2359 72.7392Z" fill="#92A89A"/>
+      <path d="M91.2633 74.5126L74.729 58.6406C75.2719 58.9531 75.797 59.3063 76.2506 59.7051L92.7848 75.5771C92.3312 75.1783 91.8122 74.8268 91.2633 74.5126Z" fill="#8DA395"/>
+      <path d="M92.7828 75.579L76.2485 59.707C76.3177 59.7652 76.3852 59.8294 76.4526 59.8936L92.9869 75.7656C92.9194 75.7014 92.852 75.6372 92.7828 75.579Z" fill="#899E90"/>
+    </g>
+    <path d="M115.363 41.553L98.8285 25.681L128.828 29.5989L145.362 45.4709L115.363 41.553Z" fill="#9CB4A5"/>
+    <path d="M62.4742 93.4501L45.9399 77.5781L50.6938 79.5848L67.2281 95.4568L62.4742 93.4501Z" fill="#97AE9F"/>
+    <path d="M89.6403 68.0508L73.106 52.1788L76.5096 45.8132L93.0456 61.6791L89.6403 68.0508Z" fill="#778A7E"/>
+    <mask id="mask7_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="62" y="53" width="18" height="17">
+      <path d="M63.1908 53.6084L79.7251 69.4804C79.5077 69.2706 79.2178 69.0864 78.8414 68.9306L62.3071 53.0586C62.6835 53.2144 62.9735 53.3986 63.1908 53.6084Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask7_1645_238248)">
+      <path d="M78.8414 68.9306L62.3071 53.0586C62.4544 53.1187 62.5938 53.1832 62.7117 53.2548L79.246 69.1268C79.122 69.0535 78.9886 68.9907 78.8414 68.9306Z" fill="#92A89A"/>
+      <path d="M79.2476 69.1259L62.7134 53.2539C62.8722 53.3433 63.0094 53.4397 63.125 53.5433L79.6593 69.4153C79.5437 69.3117 79.4065 69.2153 79.2476 69.1259Z" fill="#8DA395"/>
+      <path d="M79.6578 69.415L63.1235 53.543C63.1235 53.543 63.1656 53.5806 63.1927 53.6011L79.727 69.4731C79.727 69.4731 79.6849 69.4355 79.6578 69.415Z" fill="#899E90"/>
+    </g>
+    <mask id="mask8_1645_238248" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="59" y="51" width="20" height="18">
+      <path d="M62.3032 53.0512L78.8374 68.9232C78.734 68.823 76.3141 67.8568 76.1851 67.8017L59.6509 51.9297C59.7815 51.9787 62.1997 52.951 62.3032 53.0512Z" fill="white"/>
+    </mask>
+    <g mask="url(#mask8_1645_238248)">
+      <path d="M76.1851 67.8017L59.6509 51.9297C59.7754 51.977 61.9341 52.8453 62.2639 53.0274L78.7981 68.8994C78.4683 68.7173 76.3019 67.8534 76.1851 67.8017Z" fill="#92A89A"/>
+      <path d="M78.7984 68.8993L62.2642 53.0273L62.2913 53.0479L78.8272 68.9138L78.7984 68.8993Z" fill="#8DA395"/>
+      <path d="M78.8274 68.9128L62.2915 53.0469L62.2976 53.0486L78.8319 68.9206L78.8274 68.9128Z" fill="#899E90"/>
+      <path d="M78.8297 68.9228L62.2954 53.0508L62.3015 53.0525L78.8358 68.9245L78.8297 68.9228Z" fill="#85998C"/>
+      <path d="M78.8375 68.9228L62.3032 53.0508L78.8375 68.9228Z" fill="#809487"/>
+    </g>
+    <path d="M43.6197 39.4951L27.0854 23.6231L34.9588 24.65L51.493 40.522L43.6197 39.4951Z" fill="#9CB4A5"/>
+    <path d="M20.3924 123.235L3.85818 107.363L27.0865 23.6217L43.6208 39.4937L20.3924 123.235Z" fill="#718277"/>
+    <path d="M51.4941 40.522L34.9598 24.65L38.822 10.7428L55.3562 26.6148L51.4941 40.522Z" fill="#718277"/>
+    <path d="M55.3537 26.6141L38.8194 10.742L100.731 18.8174L117.266 34.6894L55.3537 26.6141Z" fill="#9CB4A5"/>
+    <path d="M115.362 41.5535L145.37 45.467L120.334 135.726L111.272 134.542L109.529 140.824L68.2715 135.443L69.8708 129.682L20.3991 123.226L43.6275 39.4846L51.5069 40.5132L55.363 26.6042L117.275 34.6795L115.372 41.5431L115.362 41.5535ZM101.51 81.419C103.635 76.5075 100.695 73.4094 96.1886 70.9558L99.6988 64.4174L95.9754 62.9031L92.5929 69.2159C91.6453 68.8506 90.6562 68.4218 89.6461 68.0458L93.0497 61.6802L89.3978 60.1205L85.8938 66.6606C85.1111 66.3147 84.3179 66.031 83.5414 65.6868L78.4681 63.5792L76.1913 67.8034C76.3264 67.8602 78.8647 68.8721 78.848 68.9327C80.3735 69.5548 80.4545 70.7117 80.0598 71.5028L76.0562 79.0007L70.4956 89.3693C70.2287 89.7913 69.6798 90.3574 68.8825 90.2552C68.7374 90.2349 68.5852 90.193 68.4257 90.1295C68.2547 90.1085 65.8841 89.058 65.7629 88.9986L62.4852 93.4558L67.2329 95.4607C68.1224 95.823 69.0046 96.2354 69.8376 96.5887L66.3185 103.183L70.0374 104.69L73.5293 98.2181C74.5183 98.6469 75.4492 99.0728 76.455 99.441L72.9676 105.92L76.6134 107.479L80.1386 100.886C81.9276 101.502 83.6221 101.962 85.2151 102.173C89.3694 102.717 92.8695 101.568 95.6815 97.1844C98.8329 92.3534 97.798 89.1408 94.7851 86.7593C97.5371 86.5195 100.008 84.9698 101.514 81.4267" fill="#C1DFCB"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1645_238248">
+      <rect width="120" height="122" fill="white" transform="translate(33.3462 0.261719) rotate(15.3948)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 477160b1..0737c4d7 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/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>