From 2a0172354210f9af2faa88556f5f5fa4bc03d7c4 Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 19 Dec 2023 16:45:01 +0200
Subject: [PATCH 1/2] Add sub modal content for success modal

---
 public/tailwind.css                           | 32 +++++++++++++
 .../Creators/StakeActionButtons.tsx           |  2 +
 .../Creators/modals/SuccessModal.tsx          | 48 +++++++++++++++++--
 .../tailwind-components/Modal.tsx             |  7 ++-
 4 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/public/tailwind.css b/public/tailwind.css
index 47c4cb39..200981fd 100644
--- a/public/tailwind.css
+++ b/public/tailwind.css
@@ -938,6 +938,15 @@ video {
   width: 100vw;
 }
 
+.w-\[260px\] {
+  width: 260px;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -971,6 +980,10 @@ video {
   max-width: 24rem;
 }
 
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1589,6 +1602,11 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.\!px-4 {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
 .pb-0 {
   padding-bottom: 0px;
 }
@@ -1673,6 +1691,10 @@ video {
   text-align: right;
 }
 
+.text-start {
+  text-align: start;
+}
+
 .text-end {
   text-align: end;
 }
@@ -1891,6 +1913,11 @@ video {
   color: rgb(255 255 255 / 0.8);
 }
 
+.text-blue-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2434,6 +2461,11 @@ video {
     padding-bottom: 1.5rem;
   }
 
+  .md\:\!px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
   .md\:text-left {
     text-align: left;
   }
diff --git a/src/components/creatorsStaking/Creators/StakeActionButtons.tsx b/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
index 63e795db..36c898ee 100644
--- a/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
+++ b/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
@@ -110,6 +110,8 @@ const StakeActionButtons = ({
     </div>
   )
 
+  console.log(myAddress)
+
   const tooltipText = !myAddress
     ? 'Connect your wallet'
     : 'Claim your rewards first'
diff --git a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
index 51df48fe..c9801964 100644
--- a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
@@ -5,14 +5,21 @@ import { openNewWindow } from 'src/components/utils'
 import { twitterShareUrl } from 'src/components/urls/social-share'
 import Button from '../../tailwind-components/Button'
 import { useResponsiveSize } from 'src/components/responsive'
+import { MdInfo } from 'react-icons/md'
+import clsx from 'clsx'
 
 const twitterText =
   'I just staked my #SUB {creator_name} on @SubsocialChain\n\nYou can stake towards your favorite creators here:'
 
 const getTwitterText = (links?: string[]) => {
-  const twitterUsername = links?.find((link) => link.includes('twitter'))?.split('twitter.com/').pop()
-  return twitterText.replace('{creator_name}',
-      twitterUsername ? `to @${twitterUsername}` : '')
+  const twitterUsername = links
+    ?.find((link) => link.includes('twitter'))
+    ?.split('twitter.com/')
+    .pop()
+  return twitterText.replace(
+    '{creator_name}',
+    twitterUsername ? `to @${twitterUsername}` : ''
+  )
 }
 
 type SuccessModalProps = {
@@ -38,12 +45,36 @@ const SuccessModal = ({
   const { name, ownedByAccount, image, links } = space || {}
   const owner = ownedByAccount?.id
 
+  const subModalContent = (
+    <div
+      className={clsx(
+        'md:p-6 p-5 flex items-center justify-between gap-4 rounded-[20px]',
+        'bg-indigo-50 text-text-primary text-base max-w-lg w-full'
+      )}
+    >
+      <div className='flex gap-4 items-center text-start'>
+        {!isMobile && <div className='text-blue-400'>
+          <MdInfo size={24} />
+        </div>}
+        <div className='max-w-[260px]'>
+          Earn more SUB based on your social activity.
+        </div>
+      </div>
+      <div>
+        <Button variant='primary' href='' className='w-max md:!px-6 !px-4 text-sm' size='md'>
+          Learn more
+        </Button>
+      </div>
+    </div>
+  )
+
   return (
     <Modal
       isOpen={open}
       withFooter={false}
       title={'🎉 Success'}
       withCloseButton
+      subModalContent={subModalContent}
       closeModal={() => {
         closeModal()
       }}
@@ -70,8 +101,15 @@ const SuccessModal = ({
           className='w-full'
           onClick={() =>
             openNewWindow(
-              twitterShareUrl('/creators',
-                  getTwitterText(links), { tags: [ 'CreatorEconomy', 'CreatorStaking', 'Subsocial', 'Web3Social', 'SocialFi' ] })
+              twitterShareUrl('/creators', getTwitterText(links), {
+                tags: [
+                  'CreatorEconomy',
+                  'CreatorStaking',
+                  'Subsocial',
+                  'Web3Social',
+                  'SocialFi',
+                ],
+              })
             )
           }
         >
diff --git a/src/components/creatorsStaking/tailwind-components/Modal.tsx b/src/components/creatorsStaking/tailwind-components/Modal.tsx
index a2840582..888e8164 100644
--- a/src/components/creatorsStaking/tailwind-components/Modal.tsx
+++ b/src/components/creatorsStaking/tailwind-components/Modal.tsx
@@ -47,9 +47,10 @@ export type ModalProps = ModalFunctionalityProps &
     contentClassName?: string
     initialFocus?: React.RefObject<HTMLElement>
     withFooter?: boolean
+    subModalContent?: React.ReactNode
   }
 
-export default function Modal ({
+export default function Modal({
   children,
   titleClassName,
   contentClassName,
@@ -65,6 +66,7 @@ export default function Modal ({
   description,
   initialFocus,
   withFooter,
+  subModalContent
 }: ModalProps) {
   return (
     <Transition appear show={isOpen} as={Fragment}>
@@ -90,7 +92,7 @@ export default function Modal ({
         <div className='fixed inset-0 w-screen overflow-y-auto'>
           <div
             className={clsx(
-              'flex min-h-full items-center justify-center p-4 text-center',
+              'flex min-h-full flex-col gap-6 items-center justify-center p-4 text-center',
               containerClassName
             )}
           >
@@ -186,6 +188,7 @@ export default function Modal ({
                 )}
               </Dialog.Panel>
             </Transition.Child>
+            {subModalContent}
           </div>
         </div>
       </Dialog>

From 2974507ef0743b709aafb208f33b0e874e2dce3d Mon Sep 17 00:00:00 2001
From: Sam <sam4uk.v1ad@gmail.com>
Date: Tue, 19 Dec 2023 16:46:41 +0200
Subject: [PATCH 2/2] Change link for learn more button

---
 .../Creators/StakeActionButtons.tsx               |  2 --
 .../Creators/modals/SuccessModal.tsx              | 15 +++++++++++----
 .../creatorsStaking/tailwind-components/Modal.tsx |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/creatorsStaking/Creators/StakeActionButtons.tsx b/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
index 36c898ee..63e795db 100644
--- a/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
+++ b/src/components/creatorsStaking/Creators/StakeActionButtons.tsx
@@ -110,8 +110,6 @@ const StakeActionButtons = ({
     </div>
   )
 
-  console.log(myAddress)
-
   const tooltipText = !myAddress
     ? 'Connect your wallet'
     : 'Claim your rewards first'
diff --git a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
index c9801964..687f6412 100644
--- a/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
+++ b/src/components/creatorsStaking/Creators/modals/SuccessModal.tsx
@@ -53,15 +53,22 @@ const SuccessModal = ({
       )}
     >
       <div className='flex gap-4 items-center text-start'>
-        {!isMobile && <div className='text-blue-400'>
-          <MdInfo size={24} />
-        </div>}
+        {!isMobile && (
+          <div className='text-blue-400'>
+            <MdInfo size={24} />
+          </div>
+        )}
         <div className='max-w-[260px]'>
           Earn more SUB based on your social activity.
         </div>
       </div>
       <div>
-        <Button variant='primary' href='' className='w-max md:!px-6 !px-4 text-sm' size='md'>
+        <Button
+          variant='primary'
+          href='https://subsocial.network/active-staking-details'
+          className='w-max md:!px-6 !px-4 text-sm'
+          size='md'
+        >
           Learn more
         </Button>
       </div>
diff --git a/src/components/creatorsStaking/tailwind-components/Modal.tsx b/src/components/creatorsStaking/tailwind-components/Modal.tsx
index 888e8164..da51ef5f 100644
--- a/src/components/creatorsStaking/tailwind-components/Modal.tsx
+++ b/src/components/creatorsStaking/tailwind-components/Modal.tsx
@@ -50,7 +50,7 @@ export type ModalProps = ModalFunctionalityProps &
     subModalContent?: React.ReactNode
   }
 
-export default function Modal({
+export default function Modal ({
   children,
   titleClassName,
   contentClassName,