chore: added share modal on deposit txn submission

strkfarm · Aug 17, 2024 · 61079b7 · 61079b7
1 parent 3eb6c0e
commit 61079b7
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "react-pro-sidebar": "1.1.0",
     "react-responsive-carousel": "3.2.23",
     "react-select": "5.8.0",
-    "react-share": "5.1.0",
+    "react-share": "^5.1.0",
     "sharp": "0.33.4",
     "starknet": "6.4.1",
     "starknetkit": "1.1.9",

diff --git a/public/x_logo.png b/public/x_logo.png
diff --git a/src/components/TxButton.tsx b/src/components/TxButton.tsx
@@ -1,11 +1,25 @@
 import CONSTANTS from '@/constants';
 import { StrategyTxProps, monitorNewTxAtom } from '@/store/transactions.atom';
-import { Box, Button, ButtonProps, Spinner } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  ButtonProps,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Spinner,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react';
 import { useAccount, useContractWrite } from '@starknet-react/core';
 import { useSetAtom } from 'jotai';
 import mixpanel from 'mixpanel-browser';
+import Image from 'next/image';
 import { useEffect, useMemo } from 'react';
 import { isMobile } from 'react-device-detect';
+import { TwitterShareButton } from 'react-share';
 import { Call } from 'starknet';
 
 interface TxButtonProps {
@@ -19,6 +33,8 @@ interface TxButtonProps {
 export default function TxButton(props: TxButtonProps) {
   const { address } = useAccount();
   const monitorNewTx = useSetAtom(monitorNewTxAtom);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   const disabledStyle = {
     bg: 'var(--chakra-colors-disabled_bg)',
     color: 'var(--chakra-colors-disabled_text)',
@@ -105,34 +121,91 @@ export default function TxButton(props: TxButtonProps) {
   }
 
   return (
-    <Box width={'100%'} textAlign={'center'}>
-      <Button
-        color={'white'}
-        bg="purple"
-        variant={'ghost'}
-        width={'100%'}
-        _active={{
-          bg: 'var(--chakra-colors-color2)',
-        }}
-        _hover={{
-          bg: 'var(--chakra-colors-color2)',
-        }}
-        onClick={() => {
-          mixpanel.track('Click strategy button', {
-            buttonText: props.text,
-            address,
-          });
-          writeAsync().then((tx) => {
-            mixpanel.track('Submitted tx', {
-              txHash: tx.transaction_hash,
+    <>
+      <Modal onClose={onClose} isOpen={isOpen} isCentered>
+        <ModalOverlay />
+        <ModalContent borderRadius=".5rem" maxW="32rem">
+          <ModalCloseButton color="#7F49E5" />
+          <ModalBody
+            backgroundColor="#1A1C26"
+            pt="4rem"
+            pb="3rem"
+            border="1px solid #7F49E5"
+            borderRadius=".5rem"
+            color="white"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexDirection="column"
+            gap="1rem"
+          >
+            <Text textAlign="center" fontSize="1.5rem" fontWeight="bold">
+              Thank you for your deposit!
+            </Text>
+
+            <Text textAlign="center">
+              While your deposit is being processed, if you like STRKFarm, do
+              you mind sharing on X (Twitter)
+            </Text>
+
+            <Box
+              bg="black"
+              borderRadius=".5rem"
+              px="1rem"
+              py=".5rem"
+              color="white"
+              _hover={{
+                opacity: 0.9,
+              }}
+            >
+              <TwitterShareButton
+                url={'https://www.strkfarm.xyz/'}
+                title={'STRKFarm - The best yield optimizer on Starknet'}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '.6rem',
+                }}
+              >
+                Share on
+                <Image src="/x_logo.png" width={15} height={15} alt="x-logo" />
+              </TwitterShareButton>
+            </Box>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+
+      <Box width={'100%'} textAlign={'center'}>
+        <Button
+          color={'white'}
+          bg="purple"
+          variant={'ghost'}
+          width={'100%'}
+          _active={{
+            bg: 'var(--chakra-colors-color2)',
+          }}
+          _hover={{
+            bg: 'var(--chakra-colors-color2)',
+          }}
+          onClick={() => {
+            mixpanel.track('Click strategy button', {
+              buttonText: props.text,
               address,
             });
-          });
-        }}
-        {...props.buttonProps}
-      >
-        {isPending && <Spinner size={'sm'} marginRight={'5px'} />} {props.text}
-      </Button>
-    </Box>
+            writeAsync().then((tx) => {
+              onOpen();
+              mixpanel.track('Submitted tx', {
+                txHash: tx.transaction_hash,
+                address,
+              });
+            });
+          }}
+          {...props.buttonProps}
+        >
+          {isPending && <Spinner size={'sm'} marginRight={'5px'} />}{' '}
+          {props.text}
+        </Button>
+      </Box>
+    </>
   );
 }
diff --git a/yarn.lock b/yarn.lock
@@ -5521,7 +5521,7 @@ [email protected]:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
-[email protected]:
+react-share@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/react-share/-/react-share-5.1.0.tgz#27eff763e5c233c8765cacf595b039093cb9b408"
   integrity sha512-OvyfMtj/0UzH1wi90OdHhZVJ6WUC/+IeWvBwppeZozwIGyAjQgyR0QXlHOrxVHVECqnGvcpBaFTXVrqouTieaw==