diff --git a/README.md b/README.md index f00ddcde..1df7db8b 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ --- -PendulumPay is a gateway for cross-border payments. It is built on top of the Pendulum blockchain. +Vortex is a gateway for cross-border payments. It is built on top of the Pendulum blockchain. ## Run diff --git a/src/assets/payments/sepa.svg b/src/assets/payments/sepa.svg index 06fca506..919a48f3 100644 --- a/src/assets/payments/sepa.svg +++ b/src/assets/payments/sepa.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + + + + diff --git a/src/assets/wallet-bifold-outline.svg b/src/assets/wallet-bifold-outline.svg new file mode 100644 index 00000000..2197cdbf --- /dev/null +++ b/src/assets/wallet-bifold-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/wallet.svg b/src/assets/wallet.svg deleted file mode 100644 index a4be7376..00000000 --- a/src/assets/wallet.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/src/components/FeeCollapse/index.tsx b/src/components/FeeCollapse/index.tsx index adcc7254..e858b20a 100644 --- a/src/components/FeeCollapse/index.tsx +++ b/src/components/FeeCollapse/index.tsx @@ -45,7 +45,7 @@ export const FeeCollapse: FC = ({ toAmount = Big(0), toToken, exc

Details

-
+

Your quote ({exchangeRate})

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 8e0b97e1..6a0b4989 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -82,12 +82,12 @@ const MobileMenuList: FC = ({ showMenu, closeMenu }) => ( const Links = () => (
    {links.map((link) => ( -
  • +
  • {link.title} @@ -103,10 +103,6 @@ export const Navbar = () => { return (
    - - Vortex Logo - Alpha - diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx index c8c4e9da..e909d5d3 100644 --- a/src/components/NetworkSelector/index.tsx +++ b/src/components/NetworkSelector/index.tsx @@ -15,7 +15,7 @@ interface NetworkButtonProps { const NetworkButton = ({ selectedNetwork, isOpen, onClick, disabled }: NetworkButtonProps) => ( ( +
    + {alt} + {comingSoon && ( +
    Coming soon
    + )} +
    +); + +const ImageList = ({ images }: { images: ImageProps[] }) => ( +
    + {images.map((img) => ( + + ))} +
    +); export function PoweredBy() { return ( -
    -

    Powered by

    - - Satoshipay - -
    +
    + +
    +

    Powered by

    + Satoshipay +
    +

    + + A Satoshipay Company + +

    +
    ); } diff --git a/src/components/TrustedBy/index.tsx b/src/components/TrustedBy/index.tsx index 1e22ed97..0e829c36 100644 --- a/src/components/TrustedBy/index.tsx +++ b/src/components/TrustedBy/index.tsx @@ -3,10 +3,7 @@ import POLKADOT from '../../assets/trustedby/polkadot.svg'; import STELLAR from '../../assets/trustedby/stellar.svg'; import NABLA from '../../assets/trustedby/nabla.svg'; import WEB3 from '../../assets/trustedby/web3.svg'; - -import MASTERCARD from '../../assets/payments/mastercard.svg'; -import SEPA from '../../assets/payments/sepa.svg'; -import VISA from '../../assets/payments/visa.svg'; +import { motion } from 'framer-motion'; interface ImageProps { src: string; @@ -16,15 +13,32 @@ interface ImageProps { const Image = ({ src, alt, comingSoon }: ImageProps) => (
    - {alt} + {comingSoon &&
    Coming soon
    }
    ); const ImageList = ({ images }: { images: ImageProps[] }) => (
    - {images.map((img) => ( - + {images.map((img, index) => ( + + + ))}
    ); @@ -38,18 +52,11 @@ export const TrustedBy = () => { { src: WEB3, alt: 'Web3 Foundation logo' }, ]; - const paymentImages = [ - { src: SEPA, alt: 'SEPA logo' }, - { src: MASTERCARD, alt: 'Mastercard logo', comingSoon: true }, - { src: VISA, alt: 'Visa logo', comingSoon: true }, - ]; - return ( -
    -

    Trusted by

    +
    + Trusted by
    -
    ); diff --git a/src/components/UserBalance/index.tsx b/src/components/UserBalance/index.tsx index f9fe9248..9d293d6d 100644 --- a/src/components/UserBalance/index.tsx +++ b/src/components/UserBalance/index.tsx @@ -1,7 +1,7 @@ import { InputTokenDetails } from '../../constants/tokenConfig'; import { useInputTokenBalance } from '../../hooks/useInputTokenBalance'; import { useVortexAccount } from '../../hooks/useVortexAccount'; -import wallet from '../../assets/wallet.svg'; +import wallet from '../../assets/wallet-bifold-outline.svg'; interface UserBalanceProps { token: InputTokenDetails; @@ -13,30 +13,26 @@ export const UserBalance = ({ token, onClick }: UserBalanceProps) => { const inputTokenBalance = useInputTokenBalance({ fromToken: token }); if (isDisconnected || inputTokenBalance === undefined) { - return <>; + return
    ; } const showMaxButton = Number(inputTokenBalance) !== 0; return ( -

    - <> -

    - Available - - {inputTokenBalance} {token.assetSymbol} - - {showMaxButton && ( - - )} -
    - -

    +
    + Available +

    + {inputTokenBalance} {token.assetSymbol} +

    + {showMaxButton && ( + + )} +
    ); }; diff --git a/src/components/WhyVortex/index.tsx b/src/components/WhyVortex/index.tsx index 1a4fda8e..13286022 100644 --- a/src/components/WhyVortex/index.tsx +++ b/src/components/WhyVortex/index.tsx @@ -13,7 +13,7 @@ const features: Feature[] = [ { icon: DOLLAR, title: 'Lower Fees', - description: 'Offramping fees at just 0.5%, well below market average.', + description: 'Offramping fees as low as 0.25%.', subtext: 'Keep more of what you earn.', }, { diff --git a/src/components/buttons/AssetButton/index.tsx b/src/components/buttons/AssetButton/index.tsx index e33f38de..36666fcf 100644 --- a/src/components/buttons/AssetButton/index.tsx +++ b/src/components/buttons/AssetButton/index.tsx @@ -12,12 +12,12 @@ export function AssetButton({ assetIcon, tokenSymbol, onClick }: AssetButtonProp return (