Fund wallet buttons, modal init

src/components/FundWallet/FundWalletButton.tsx

@@ -0,0 +1,12 @@
+import { Button, ButtonProps } from '../Button/Button'
+import styled from '@emotion/styled'
+
+const SButton = styled(Button)`
+  font-size: 12px;
+  line-height: 12px;
+  padding: 11px 15px 11px 15px;
+`
+
+type Props = Pick<ButtonProps, 'onClick'>
+
+export const FundWalletButton = (props: Props) => <SButton {...props} variant="primary">Fund wallet</SButton>

src/components/FundWallet/FundWalletMobileButton.tsx

@@ -0,0 +1,6 @@
+import { Button, ButtonProps } from '../Button/Button'
+import styled from '@emotion/styled'
+
+type Props = Pick<ButtonProps, 'onClick'>
+
+export const FundWalletMobileButton = (props: Props) => <Button {...props} variant="primary" fullWidth={true}>Fund wallet</Button>

src/components/FundWallet/FundWalletModal.tsx

@@ -0,0 +1,29 @@
+import { Modal } from '../Modal/Modal'
+import { ComponentProps } from 'react'
+import { GradientText } from 'components/Typography/GradientText/GradientText'
+
+type Props = Pick<ComponentProps<typeof Modal>, 'open' | 'onClose'>
+
+export const FundWalletModal = ({ open, onClose }: Props) => {
+  return <>
+    <Modal
+      width={460}
+      open={open}
+      onClose={onClose}
+      withoutCloseOutside={true}
+    >
+      <GradientText fs={20} fw={600} lh={20}>
+        Fund your wallet
+      </GradientText>
+      <p>
+        Purchase BSX  through very convenient solutions allowing to buy it through FIAT or from your exchange account, Find currently available solutions below.
+      </p>
+      <div>
+        <div>
+
+          <div>Banxa is the leading global Web3 on-and-off ramp solution.</div>
+        </div>
+      </div>
+    </Modal>
+  </>
+}

src/components/Layout/Header/Header.tsx

@@ -13,8 +13,15 @@ import { useToast } from "state/toasts"
 import { useTranslation } from "react-i18next"
 import { Spinner } from "components/Spinner/Spinner.styled"
 import * as Tooltip from "@radix-ui/react-tooltip"
+import { useMedia } from 'react-use'
+import { theme } from '../../../theme'
+import { useState } from 'react'
+import { FundWalletButton } from '../../FundWallet/FundWalletButton'
+import { FundWalletModal } from '../../FundWallet/FundWalletModal'
 
 export const Header = () => {
+  const [isFundModalOpen, setIsFundModalOpen] = useState(false);
+  const isDesktop = useMedia(theme.viewport.gte.sm)
   const { setSidebar, toasts } = useToast()
   const { t } = useTranslation()
 
@@ -63,6 +70,13 @@ export const Header = () => {
             bellIcon
           )}
 
+          {isDesktop && (
+            <>
+              <FundWalletButton onClick={() => setIsFundModalOpen(true)} />
+              <FundWalletModal open={isFundModalOpen} onClose={() => setIsFundModalOpen(false)} />
+            </>
+          )}
+
           <WalletConnectButton />
         </div>
       </div>

src/components/Layout/Header/MobileNavBar/MobileNavBar.styled.ts

@@ -1,6 +1,11 @@
 import styled from "@emotion/styled"
 import { theme } from "theme"
 
+export const SFundButtonWrapper = styled.div`
+  background: ${theme.colors.backgroundGray1000};
+  padding: 14px 23px;
+`
+
 export const SMobileNavBar = styled.div`
   position: fixed;
   left: 0;

src/components/Layout/Header/MobileNavBar/MoreButton.tsx

@@ -1,9 +1,11 @@
 import { Icon } from "components/Icon/Icon"
 import { useState } from "react"
 import { ReactComponent as MoreTabIcon } from "assets/icons/MoreTabIcon.svg"
-import { STabButton } from "./MobileNavBar.styled"
+import { STabButton, SFundButtonWrapper } from "./MobileNavBar.styled"
 import { TabMenuModal } from "./TabMenuModal/TabMenuModal"
 import { useTranslation } from "react-i18next"
+import { FundWalletMobileButton } from 'components/FundWallet/FundWalletMobileButton'
+import { FundWalletModal } from '../../../FundWallet/FundWalletModal'
 
 type MoreButtonProps = {
   tabs: React.ReactNode[]
@@ -12,6 +14,7 @@ type MoreButtonProps = {
 export const MoreButton = ({ tabs }: MoreButtonProps) => {
   const { t } = useTranslation()
   const [openModal, setOpenModal] = useState(false)
+  const [isFundModalOpen, setIsFundModalOpen] = useState(false)
 
   return (
     <>
@@ -20,6 +23,10 @@ export const MoreButton = ({ tabs }: MoreButtonProps) => {
         {t("header.more")}
       </STabButton>
       <TabMenuModal open={openModal} onClose={() => setOpenModal(false)}>
+        <SFundButtonWrapper>
+          <FundWalletMobileButton onClick={() => setIsFundModalOpen(true) }/>
+          <FundWalletModal open={isFundModalOpen} onClose={() => setIsFundModalOpen(false)} />
+        </SFundButtonWrapper>
         <div sx={{ flex: "column" }}>{tabs}</div>
       </TabMenuModal>
     </>

src/sections/wallet/connect/modal/WalletConnectModal.tsx

@@ -10,6 +10,10 @@ import { WalletConnectActiveFooter } from "./WalletConnectActiveFooter"
 import { useNavigate } from "@tanstack/react-location"
 import { useEnableWallet } from "./WalletConnectModal.utils"
 import { useWalletConnect } from "components/WalletConnectProvider/WalletConnectProvider"
+import { FundWalletModal } from 'components/FundWallet/FundWalletModal'
+import { useMedia } from 'react-use'
+import { theme } from 'theme'
+import { FundWalletMobileButton } from 'components/FundWallet/FundWalletMobileButton'
 
 type Props = {
   isOpen: boolean
@@ -18,6 +22,10 @@ type Props = {
 
 export const WalletConnectModal: FC<Props> = ({ isOpen, onClose }) => {
   const { t } = useTranslation()
+
+  const [isFundModalOpen, setIsFundModalOpen] = useState(false);
+  const isMobile = useMedia(theme.viewport.lt.sm)
+
   const navigate = useNavigate()
   const [userSelectedProvider, setUserSelectedProvider] = useState<
     string | null
@@ -81,6 +89,14 @@ export const WalletConnectModal: FC<Props> = ({ isOpen, onClose }) => {
               }}
               onClose={onClose}
             />
+
+            {isMobile && (
+              <>
+                <FundWalletMobileButton onClick={() => setIsFundModalOpen(true)} />
+                <FundWalletModal open={isFundModalOpen} onClose={() => setIsFundModalOpen(false)} />
+              </>
+            )}
+
             <WalletConnectActiveFooter
               account={account}
               provider={activeProvider}