Add warning for multi account view

Author: samchuk-vlad

public/images/creator-staking/choose-account.png

@@ -1305,6 +1305,15 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-\[\] {
+  background-color: ;
+}
+
+.bg-\[\#FEFCE5\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 229 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-25 {
   --tw-bg-opacity: 0.25;
 }
@@ -1377,6 +1386,10 @@ video {
   padding: 4px;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .\!py-4 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
@@ -1708,6 +1721,23 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
+.text-\[\] {
+  color: ;
+}
+
+.text-\[\#\] {
+  color: #;
+}
+
+.text-\[\#7B4511\] {
+  --tw-text-opacity: 1;
+  color: rgb(123 69 17 / var(--tw-text-opacity));
+}
+
+.text-\[7B4511\] {
+  color: 7B4511;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2171,6 +2201,10 @@ video {
     align-items: center;
   }
 
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
   .md\:gap-6 {
     gap: 1.5rem;
   }
@@ -2189,6 +2223,18 @@ video {
     padding-bottom: 1.5rem;
   }
 
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-center {
+    text-align: center;
+  }
+
+  .md\:text-start {
+    text-align: start;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;

public/images/creator-staking/tmp-image.png

@@ -1,19 +1,59 @@
+import Image from 'next/image'
+import { useIsMulti } from '../providers/MyExtensionAccountsContext'
 import { StakingContextWrapper } from '../staking/collators/StakingContext'
 import Banner from './Banner'
 import CreatorDashboard from './CreatorDashboard'
 import CreatorsSection from './Creators'
 import MyStakingSection from './MyStaking'
+import clsx from 'clsx'
 
 const CreatorsStaking = () => {
+  const isMulti = useIsMulti()
+
   return (
     <div className='flex flex-col gap-10'>
       <StakingContextWrapper network='subsocial'>
         <Banner />
 
-        <CreatorDashboard />
-        <MyStakingSection />
-        
-        <CreatorsSection />
+        {isMulti ? (
+          <div
+            className={clsx(
+              'flex items-center justify-between',
+              'md:flex-row flex-col gap-6 bg-[#FEFCE5]',
+              'p-6 rounded-[20px]'
+            )}
+          >
+            <div className='flex items-start gap-6'>
+              <Image
+                src='/images/creator-staking/warning.svg'
+                alt=''
+                width={24}
+                height={24}
+              />
+              <div>
+                <div className='text-xl text-[#7B4511] font-semibold mb-4'>
+                  Please choose an account
+                </div>
+                <div className='text-base text-[#7B4511] font-normal'>
+                  To manage your Creator Staking, select one of your accounts
+                  from the dropdown
+                </div>
+              </div>
+            </div>
+            <Image
+              src={'/images/creator-staking/choose-account.png'}
+              alt=''
+              height={240}
+              width={315}
+            />
+          </div>
+        ) : (
+          <>
+            <CreatorDashboard />
+            <MyStakingSection />
+            <CreatorsSection />
+          </>
+        )}
       </StakingContextWrapper>
     </div>
   )