diff --git a/src/assets/SocialsGithub.tsx b/src/assets/SocialsGithub.tsx new file mode 100644 index 00000000..95c90bcb --- /dev/null +++ b/src/assets/SocialsGithub.tsx @@ -0,0 +1,24 @@ +export function Github({ className }: { className?: string }) { + return ( + + + + + + + + + + + ); +} diff --git a/src/assets/SocialsTelegram.tsx b/src/assets/SocialsTelegram.tsx new file mode 100644 index 00000000..2c36bd48 --- /dev/null +++ b/src/assets/SocialsTelegram.tsx @@ -0,0 +1,19 @@ +export function Telegram({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/src/assets/SocialsX.tsx b/src/assets/SocialsX.tsx new file mode 100644 index 00000000..8ac01463 --- /dev/null +++ b/src/assets/SocialsX.tsx @@ -0,0 +1,24 @@ +export function X({ className }: { className?: string }) { + return ( + + + + + + + + + + + ); +} diff --git a/src/assets/logo/satoshipay.svg b/src/assets/logo/satoshipay.svg new file mode 100644 index 00000000..ae85e9fa --- /dev/null +++ b/src/assets/logo/satoshipay.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/socials-github.tsx b/src/assets/socials-github.tsx deleted file mode 100644 index 4c8a7e2e..00000000 --- a/src/assets/socials-github.tsx +++ /dev/null @@ -1,14 +0,0 @@ -const GithubLogo = () => ( - - - - - - - - - - -); - -export default GithubLogo; diff --git a/src/assets/socials-telegram.tsx b/src/assets/socials-telegram.tsx deleted file mode 100644 index a71d3e0a..00000000 --- a/src/assets/socials-telegram.tsx +++ /dev/null @@ -1,14 +0,0 @@ -const TelegramLogo = () => ( - - - - - - - - - - -); - -export default TelegramLogo; diff --git a/src/assets/socials-twitter.tsx b/src/assets/socials-twitter.tsx deleted file mode 100644 index 68f395ee..00000000 --- a/src/assets/socials-twitter.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const TwitterLogo = () => ( - - - - - - - - - - -); - -export default TwitterLogo; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 00000000..25ba776c --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,56 @@ +import { ComponentType } from 'preact'; +import { Telegram } from '../../assets/SocialsTelegram'; +import { Github } from '../../assets/SocialsGithub'; +import { X } from '../../assets/SocialsX'; + +interface SocialLink { + name: string; + icon: ComponentType<{ className?: string }>; + url: string; +} + +const SOCIALS: SocialLink[] = [ + { + name: 'X', + icon: X, + url: 'https://x.com/Vortex_Fi', + }, + { + name: 'Telegram', + icon: Telegram, + url: 'https://t.me/vortex_fi', + }, + { + name: 'Github', + icon: Github, + url: 'https://github.com/pendulum-chain/vortex', + }, +]; + +const SocialIcon = ({ social }: { social: SocialLink }) => ( + + + +); + +const Copyright = () => ( +
+

Copyright © {new Date().getFullYear()}, Vortex.

+

All rights reserved.

+
+); + +export function Footer() { + return ( + + ); +} diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index a071027f..9a823da3 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -94,7 +94,7 @@ export const Navbar = () => { const [showMenu, setShowMenu] = useState(false); return ( -
+
Vortex Logo diff --git a/src/components/PoweredBy/index.tsx b/src/components/PoweredBy/index.tsx new file mode 100644 index 00000000..eefa701b --- /dev/null +++ b/src/components/PoweredBy/index.tsx @@ -0,0 +1,12 @@ +import satoshipayLogo from '../../assets/logo/satoshipay.svg'; + +export function PoweredBy() { + return ( +
+

Powered by

+ + Satoshipay + +
+ ); +} diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 188e5e95..a8aaefbd 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,5 +1,6 @@ import { FC } from 'preact/compat'; import { Navbar } from '../components/Navbar'; +import { Footer } from '../components/Footer'; interface BaseLayoutProps { main: ReactNode; @@ -11,5 +12,6 @@ export const BaseLayout: FC = ({ main, modals }) => ( {modals} {main} +
); diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index cd2a853e..215600d3 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -1,42 +1,43 @@ -import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; -import { Fragment } from 'preact'; import { ArrowDownIcon } from '@heroicons/react/20/solid'; -import { useAccount } from 'wagmi'; import Big from 'big.js'; +import { Fragment } from 'preact'; +import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; +import { useAccount } from 'wagmi'; -import { LabeledInput } from '../../components/LabeledInput'; +import { AssetNumericInput } from '../../components/AssetNumericInput'; import { BenefitsList } from '../../components/BenefitsList'; +import { SwapSubmitButton } from '../../components/buttons/SwapSubmitButton'; +import { ExchangeRate } from '../../components/ExchangeRate'; import { calculateTotalReceive, FeeCollapse } from '../../components/FeeCollapse'; +import { FeeComparison } from '../../components/FeeComparison'; +import { LabeledInput } from '../../components/LabeledInput'; import { useSwapForm } from '../../components/Nabla/useSwapForm'; -import { ApiPromise, getApiManagerInstance } from '../../services/polkadot/polkadotApi'; -import { useTokenOutAmount } from '../../hooks/nabla/useTokenAmountOut'; -import { PoolSelectorModal } from '../../components/InputKeys/SelectionModal'; -import { ExchangeRate } from '../../components/ExchangeRate'; -import { AssetNumericInput } from '../../components/AssetNumericInput'; -import { SwapSubmitButton } from '../../components/buttons/SwapSubmitButton'; +import { PoweredBy } from '../../components/PoweredBy'; +import { SignInModal } from '../../components/SignIn'; import { SigningBox } from '../../components/SigningBox'; +import { PoolSelectorModal } from '../../components/InputKeys/SelectionModal'; +import { UserBalance } from '../../components/UserBalance'; + import { config } from '../../config'; import { INPUT_TOKEN_CONFIG, InputTokenType, OUTPUT_TOKEN_CONFIG, OutputTokenType } from '../../constants/tokenConfig'; -import { BaseLayout } from '../../layouts'; - -import { multiplyByPowerOfTen, stringifyBigWithSignificantDecimals } from '../../helpers/contracts'; -import { useMainProcess } from '../../hooks/useMainProcess'; -import { ProgressPage } from '../progress'; -import { SuccessPage } from '../success'; -import { FailurePage } from '../failure'; -import { useInputTokenBalance } from '../../hooks/useInputTokenBalance'; -import { UserBalance } from '../../components/UserBalance'; +import { SPACEWALK_REDEEM_SAFETY_MARGIN } from '../../constants/constants'; import { useEventsContext } from '../../contexts/events'; +import { useSiweContext } from '../../contexts/siwe'; +import { multiplyByPowerOfTen, stringifyBigWithSignificantDecimals } from '../../helpers/contracts'; import { showToast, ToastMessage } from '../../helpers/notifications'; +import { useTokenOutAmount } from '../../hooks/nabla/useTokenAmountOut'; +import { useInputTokenBalance } from '../../hooks/useInputTokenBalance'; +import { useMainProcess } from '../../hooks/useMainProcess'; +import { BaseLayout } from '../../layouts'; -import { testRoute } from '../../services/squidrouter/route'; -import { initialChecks } from '../../services/initialChecks'; +import { ApiPromise, getApiManagerInstance } from '../../services/polkadot/polkadotApi'; import { getVaultsForCurrency } from '../../services/polkadot/spacewalk'; -import { SPACEWALK_REDEEM_SAFETY_MARGIN } from '../../constants/constants'; -import { FeeComparison } from '../../components/FeeComparison'; +import { initialChecks } from '../../services/initialChecks'; +import { testRoute } from '../../services/squidrouter/route'; -import { SignInModal } from '../../components/SignIn'; -import { useSiweContext } from '../../contexts/siwe'; +import { FailurePage } from '../failure'; +import { ProgressPage } from '../progress'; +import { SuccessPage } from '../success'; import { useSwapUrlParams } from './useSwapUrlParams'; const Arrow = () => ( @@ -364,10 +365,10 @@ export const SwapPage = () => {
-

Withdraw

+

Withdraw

@@ -433,6 +434,8 @@ export const SwapPage = () => { /> )}
+
+ {showCompareFees && fromToken && fromAmount && toToken && (