From efb3ff907d9f6b5b1ccfef7013eddbaeb4a8ab2b Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 16:53:48 +0100 Subject: [PATCH 01/11] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 66406a6fd3b2be5448014c36e4c3ca0e5b299b53 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 16:54:26 +0100 Subject: [PATCH 02/11] Remove Vortex logo from Navbar --- src/components/Navbar/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 8e0b97e1..7babbb14 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -103,10 +103,6 @@ export const Navbar = () => { return (
- - Vortex Logo - Alpha - From 2e02810faa0d907b0c61ea84d24a553a797f2bff Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 16:54:52 +0100 Subject: [PATCH 03/11] Update UserBalance icon --- src/assets/wallet-bifold-outline.svg | 1 + src/assets/wallet.svg | 7 ------ src/components/UserBalance/index.tsx | 36 +++++++++++++--------------- src/pages/swap/index.tsx | 3 --- 4 files changed, 17 insertions(+), 30 deletions(-) create mode 100644 src/assets/wallet-bifold-outline.svg delete mode 100644 src/assets/wallet.svg 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/UserBalance/index.tsx b/src/components/UserBalance/index.tsx index f9fe9248..30de770a 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; @@ -19,24 +19,20 @@ export const UserBalance = ({ token, onClick }: UserBalanceProps) => { const showMaxButton = Number(inputTokenBalance) !== 0; return ( -

- <> -

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

+
+ Available +

+ {inputTokenBalance} {token.assetSymbol} +

+ {showMaxButton && ( + + )} +
); }; diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index 5f9ab62c..43801b4b 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -1,4 +1,3 @@ - import Big from 'big.js'; import { useEffect, useMemo, useRef, useState, useCallback } from 'preact/hooks'; import { ApiPromise } from '@polkadot/api'; @@ -61,8 +60,6 @@ import { TrustedBy } from '../../components/TrustedBy'; import { WhyVortex } from '../../components/WhyVortex'; import { usePolkadotWalletState } from '../../contexts/polkadotWallet'; - - export const SwapPage = () => { const formRef = useRef(null); const feeComparisonRef = useRef(null); From ee9220e789bbcb2e0db464d8bad579f9390ca512 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 17:12:22 +0100 Subject: [PATCH 04/11] make buttons in Navbar same height --- src/components/NetworkSelector/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) => ( Date: Thu, 16 Jan 2025 19:14:49 +0100 Subject: [PATCH 05/11] relocate payment images --- src/assets/payments/sepa.svg | 7 +++- src/components/PoweredBy/index.tsx | 55 ++++++++++++++++++++++++++---- src/components/TrustedBy/index.tsx | 13 +------ 3 files changed, 56 insertions(+), 19 deletions(-) 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/components/PoweredBy/index.tsx b/src/components/PoweredBy/index.tsx index eefa701b..94148a31 100644 --- a/src/components/PoweredBy/index.tsx +++ b/src/components/PoweredBy/index.tsx @@ -1,12 +1,55 @@ import satoshipayLogo from '../../assets/logo/satoshipay.svg'; +import MASTERCARD from '../../assets/payments/mastercard.svg'; +import SEPA from '../../assets/payments/sepa.svg'; +import VISA from '../../assets/payments/visa.svg'; +import vortexLogo from '../../assets/logo/blue.svg'; +interface ImageProps { + src: string; + alt: string; + comingSoon?: boolean; +} + +const paymentImages = [ + { src: SEPA, alt: 'SEPA logo' }, + { src: MASTERCARD, alt: 'Mastercard logo', comingSoon: true }, + { src: VISA, alt: 'Visa logo', comingSoon: true }, +]; + +const Image = ({ src, alt, comingSoon }: ImageProps) => ( +
+ {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..eb791d95 100644 --- a/src/components/TrustedBy/index.tsx +++ b/src/components/TrustedBy/index.tsx @@ -4,10 +4,6 @@ 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'; - interface ImageProps { src: string; alt: string; @@ -38,18 +34,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

-
); From ede37a736bed9f7a3ef68a720fa292f060eeb373 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 20:01:54 +0100 Subject: [PATCH 06/11] fix display asset icons on mobile --- src/components/buttons/AssetButton/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 (
-
+

Your quote ({exchangeRate})

From a1267aac306ee01b7357a02c9bd0ae7bd03c1ff2 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 20:04:00 +0100 Subject: [PATCH 08/11] add init animation for form --- src/pages/swap/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/swap/index.tsx b/src/pages/swap/index.tsx index 3bef4abc..45b836b6 100644 --- a/src/pages/swap/index.tsx +++ b/src/pages/swap/index.tsx @@ -1,6 +1,7 @@ import Big from 'big.js'; import { useEffect, useMemo, useRef, useState, useCallback } from 'preact/hooks'; import { ApiPromise } from '@polkadot/api'; +import { motion } from 'framer-motion'; import { calculateTotalReceive, FeeCollapse } from '../../components/FeeCollapse'; import { PoolSelectorModal } from '../../components/InputKeys/SelectionModal'; @@ -375,7 +376,13 @@ export const SwapPage = () => {
-
+

Sell Crypto

@@ -450,7 +457,7 @@ export const SwapPage = () => {
- +
{showCompareFees && fromToken && fromAmount && toToken && ( Date: Thu, 16 Jan 2025 20:04:15 +0100 Subject: [PATCH 09/11] adjust spacing for PoweredBy form section --- src/components/PoweredBy/index.tsx | 21 +++++++++++---------- src/components/UserBalance/index.tsx | 2 +- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/PoweredBy/index.tsx b/src/components/PoweredBy/index.tsx index 94148a31..c8017632 100644 --- a/src/components/PoweredBy/index.tsx +++ b/src/components/PoweredBy/index.tsx @@ -6,24 +6,27 @@ import vortexLogo from '../../assets/logo/blue.svg'; interface ImageProps { src: string; alt: string; + additionalClass?: string; comingSoon?: boolean; } const paymentImages = [ - { src: SEPA, alt: 'SEPA logo' }, + { src: SEPA, alt: 'SEPA logo', additionalClass: 'h-6' }, { src: MASTERCARD, alt: 'Mastercard logo', comingSoon: true }, { src: VISA, alt: 'Visa logo', comingSoon: true }, ]; -const Image = ({ src, alt, comingSoon }: ImageProps) => ( -
- {alt} - {/* {comingSoon &&
Coming soon
} */} +const Image = ({ src, alt, comingSoon, additionalClass }: ImageProps) => ( +
+ {alt} + {comingSoon && ( +
Coming soon
+ )}
); const ImageList = ({ images }: { images: ImageProps[] }) => ( -
+
{images.map((img) => ( ))} @@ -34,12 +37,11 @@ export function PoweredBy() { return (
-
+

Powered by

Satoshipay
-

- A +

Satoshipay - Company

); diff --git a/src/components/UserBalance/index.tsx b/src/components/UserBalance/index.tsx index 30de770a..9d293d6d 100644 --- a/src/components/UserBalance/index.tsx +++ b/src/components/UserBalance/index.tsx @@ -13,7 +13,7 @@ export const UserBalance = ({ token, onClick }: UserBalanceProps) => { const inputTokenBalance = useInputTokenBalance({ fromToken: token }); if (isDisconnected || inputTokenBalance === undefined) { - return <>; + return
; } const showMaxButton = Number(inputTokenBalance) !== 0; From 826105ed472cf5f34b305602323782dc0154fae2 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Thu, 16 Jan 2025 20:11:19 +0100 Subject: [PATCH 10/11] animate TrustedBy --- src/components/TrustedBy/index.tsx | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/TrustedBy/index.tsx b/src/components/TrustedBy/index.tsx index eb791d95..0e829c36 100644 --- a/src/components/TrustedBy/index.tsx +++ b/src/components/TrustedBy/index.tsx @@ -3,6 +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 { motion } from 'framer-motion'; interface ImageProps { src: string; @@ -12,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) => ( + + + ))}
); @@ -36,7 +54,7 @@ export const TrustedBy = () => { return (
-

Trusted by

+ Trusted by
From 4fd8653478a2c7f3520f8cd2d35f3775f850f4a5 Mon Sep 17 00:00:00 2001 From: Kacper Szarkiewicz Date: Mon, 20 Jan 2025 15:11:46 +0100 Subject: [PATCH 11/11] Improve footer spacing --- src/components/Navbar/index.tsx | 4 ++-- src/components/PoweredBy/index.tsx | 6 +++--- src/components/WhyVortex/index.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 7babbb14..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} diff --git a/src/components/PoweredBy/index.tsx b/src/components/PoweredBy/index.tsx index c8017632..aa11b3af 100644 --- a/src/components/PoweredBy/index.tsx +++ b/src/components/PoweredBy/index.tsx @@ -26,7 +26,7 @@ const Image = ({ src, alt, comingSoon, additionalClass }: ImageProps) => ( ); const ImageList = ({ images }: { images: ImageProps[] }) => ( -
    +
    {images.map((img) => ( ))} @@ -46,9 +46,9 @@ export function PoweredBy() { href="https://satoshipay.io" target="_blank" rel="noopener noreferrer" - className="transition hover:opacity-80" + className="flex gap-1 text-xs transition hover:opacity-80" > - Satoshipay + A Satoshipay Company

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.', }, {