From 5dde4c550fe2c7d77af91c5027e7e4ee9624cce3 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sat, 18 Jan 2025 02:50:00 +0530 Subject: [PATCH 01/12] fix: wallet connection flow --- src/app/(mobile-ui)/home/page.tsx | 125 ++++--- src/components/Global/WalletHeader/index.tsx | 142 +++++--- src/components/Home/WalletCard.tsx | 89 +++-- src/components/Setup/Views/AddWallets.tsx | 21 +- src/components/Setup/Views/SetupPasskey.tsx | 9 +- src/hooks/useWallet.ts | 357 ++++++++++++------- src/interfaces/interfaces.ts | 2 +- tailwind.config.js | 5 + 8 files changed, 500 insertions(+), 250 deletions(-) diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx index 62f6aac5..82ee09e5 100644 --- a/src/app/(mobile-ui)/home/page.tsx +++ b/src/app/(mobile-ui)/home/page.tsx @@ -6,8 +6,9 @@ import WalletHeader from '@/components/Global/WalletHeader' import { WalletCard } from '@/components/Home/WalletCard' import ProfileSection from '@/components/Profile/Components/ProfileSection' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet, useWalletConnection } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { WalletProviderType } from '@/interfaces' import { getUserPreferences, updateUserPreferences } from '@/utils' import classNames from 'classnames' import { motion, useAnimation } from 'framer-motion' @@ -22,6 +23,7 @@ export default function Home() { const controls = useAnimation() const router = useRouter() const carouselRef = useRef(null) + const { connectWallet: connectNewWallet } = useWalletConnection() const [isBalanceHidden, setIsBalanceHidden] = useState(() => { const prefs = getUserPreferences() @@ -29,18 +31,31 @@ export default function Home() { }) const { addBYOW, username } = useAuth() - const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet } = useWallet() - const hasWallets = wallets.length > 0 - const { handleLogin, isLoggingIn } = useZeroDev() - const toast = useToast() + const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet, isWalletConnected } = useWallet() + // Initialize focusedIndex to match selectedWalletIndex const rawIndex = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address) const selectedWalletIndex = rawIndex === -1 ? 0 : rawIndex + const [focusedIndex, setFocusedIndex] = useState(selectedWalletIndex) + + // Update focusedIndex when selectedWallet changes + useEffect(() => { + const index = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address) + if (index !== -1) { + setFocusedIndex(index) + } + }, [selectedWallet, wallets]) + + const handleAddBYOW = async () => { + await connectNewWallet() + } + const hasWallets = wallets.length > 0 + const { handleLogin, isLoggingIn } = useZeroDev() + const toast = useToast() const totalCards = hasWallets ? wallets.length + 1 : 1 - // hide balance const handleToggleBalanceVisibility = (e: React.MouseEvent) => { e.stopPropagation() setIsBalanceHidden((prev: boolean) => { @@ -59,14 +74,52 @@ export default function Home() { const handleCardClick = (index: number) => { if (index < wallets.length) { - if (selectedWalletIndex === index) { + const wallet = wallets[index] + + if (focusedIndex !== index) { + setFocusedIndex(index) + controls.start({ + x: -(index * (cardWidth + cardMargin)), + transition: { type: 'spring', stiffness: 300, damping: 30 }, + }) + + if (wallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(wallet)) { + setSelectedWallet(wallet) + } + return + } + + if (focusedIndex === index) { router.push('/wallet') - } else { - setSelectedWallet(wallets[index]) } } } + const handleDragEnd = (_e: any, { offset, velocity }: any) => { + const swipe = Math.abs(offset.x) * velocity.x + let targetIndex = focusedIndex + + if (swipe < -10000) { + targetIndex = Math.min(focusedIndex + 1, totalCards - 1) + } else if (swipe > 10000) { + targetIndex = Math.max(focusedIndex - 1, 0) + } + + setFocusedIndex(targetIndex) + + if (targetIndex < wallets.length) { + const targetWallet = wallets[targetIndex] + if (targetWallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(targetWallet)) { + setSelectedWallet(targetWallet) + } + } + + controls.start({ + x: -(targetIndex * (cardWidth + cardMargin)), + transition: { type: 'spring', stiffness: 300, damping: 30 }, + }) + } + return (
@@ -117,43 +170,31 @@ export default function Home() { right: 0, }} dragElastic={0.2} - onDragEnd={(_e, { offset, velocity }) => { - const swipe = Math.abs(offset.x) * velocity.x - if (swipe < -10000) { - const nextIndex = Math.min(selectedWalletIndex + 1, totalCards - 1) - if (nextIndex < wallets.length) { - setSelectedWallet(wallets[nextIndex]) - } - } else if (swipe > 10000) { - const prevIndex = Math.max(selectedWalletIndex - 1, 0) - setSelectedWallet(wallets[prevIndex]) - } else { - controls.start({ - x: -(selectedWalletIndex * (cardWidth + cardMargin)), - transition: { type: 'spring', stiffness: 300, damping: 30 }, - }) - } - }} + onDragEnd={handleDragEnd} > - {wallets.map((wallet, index) => ( - handleCardClick(index)} - index={index} - isBalanceHidden={isBalanceHidden} - onToggleBalanceVisibility={handleToggleBalanceVisibility} - /> - ))} - - + {!!wallets.length && + wallets.map((wallet, index) => ( + handleCardClick(index)} + index={index} + isBalanceHidden={isBalanceHidden} + onToggleBalanceVisibility={handleToggleBalanceVisibility} + isFocused={focusedIndex === index} + /> + ))} + + ) : (
- +
)}
diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx index ce8cb38f..ac90c770 100644 --- a/src/components/Global/WalletHeader/index.tsx +++ b/src/components/Global/WalletHeader/index.tsx @@ -1,17 +1,16 @@ 'use client' -import { Wallet_ICON } from '@/assets' import PeanutWalletIcon from '@/assets/icons/small-peanut.png' import { Button, Card } from '@/components/0_Bruddle' +import { useToast } from '@/components/0_Bruddle/Toast' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet, useWalletConnection } from '@/hooks/useWallet' import { IWallet, WalletProviderType } from '@/interfaces' import { printableUsdc, shortenAddressLong } from '@/utils' -import { useAppKit } from '@reown/appkit/react' +import classNames from 'classnames' import Image from 'next/image' import { useMemo, useState } from 'react' import { twMerge } from 'tailwind-merge' -import { useAccount } from 'wagmi' import CopyToClipboard from '../CopyToClipboard' import Icon from '../Icon' import Modal from '../Modal' @@ -19,31 +18,38 @@ import Modal from '../Modal' interface WalletHeaderProps { className?: HTMLDivElement['className'] disabled?: boolean + isConnected?: boolean + isUsable?: boolean } interface WalletEntryCardProps { wallet: IWallet isActive?: boolean - onClick?: () => void + onClick: () => void + isConnected?: boolean + isUsable?: boolean } const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { const [showModal, setShowModal] = useState(false) - const { wallets, selectedWallet, setSelectedWallet, isConnected } = useWallet() - const { open: openWeb3Modal } = useAppKit() + const { + wallets, + setSelectedWallet, + // handleWalletConnect: connectNewWallet, + selectedWallet, + isConnected, + } = useWallet() + + const { connectWallet: connectNewWallet } = useWalletConnection() + + const toast = useToast() - // sort wallets to add active wallet at the top const sortedWallets = useMemo(() => { - return [...wallets].sort((a, b) => { - if (a.address === selectedWallet?.address) return -1 - if (b.address === selectedWallet?.address) return 1 - return 0 - }) + return [...wallets].filter((account) => Object.values(WalletProviderType).includes(account.walletProviderType)) }, [wallets, selectedWallet]) // handle wallet selection and close modal const handleWalletSelection = (wallet: IWallet) => { setSelectedWallet(wallet) - setShowModal(false) } return ( @@ -88,19 +94,20 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { visible={showModal} onClose={() => setShowModal(false)} className="w-full items-center" - classWrap="bg-background rounded-none border-0 p-6 pt-14 w-full max-h-[65vh] md:max-h-full overflow-y-auto" + classWrap="bg-background rounded-none border-0 p-6 w-full max-h-[65vh] md:max-h-full overflow-y-auto" >
{/* modal header */} -
+
Wallets
- + */}
{/* list connected wallets */} -
+
{sortedWallets.map((wallet) => ( { onClick={() => handleWalletSelection(wallet)} /> ))} - +
@@ -119,49 +126,98 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { // individual wallet card component const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => { - const { connector } = useAccount() const { username } = useAuth() + const { isWalletConnected } = useWallet() + const { connectWallet: connectNewWallet } = useWalletConnection() + const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT const isPeanutWallet = wallet.walletProviderType === WalletProviderType.PEANUT + const isConnected = isWalletConnected(wallet) // get wallet icon to display const walletImage = useMemo(() => { return isPeanutWallet ? PeanutWalletIcon : wallet?.connector?.iconUrl || PeanutWalletIcon - }, [isPeanutWallet, connector, wallet]) + }, [isPeanutWallet, wallet]) + + // get background color + const backgroundColor = useMemo(() => { + if ((isPeanutWallet || isExternalWallet) && isConnected) { + return isActive ? 'bg-purple-1' : 'bg-purple-5' + } + if (isExternalWallet && !isConnected) return 'bg-n-4' + }, [isExternalWallet, isConnected, isActive, isPeanutWallet, wallet.address]) + + const handleCardClick = () => { + if (isExternalWallet && !isConnected) { + connectNewWallet() + } else { + onClick() + } + } return ( - + {/* wallet icon */}
+ {/* wallet details section */} -
+
-

- {isPeanutWallet ? 'Peanut' : connector?.name || shortenAddressLong(wallet.address)} -

+
+

+ {isPeanutWallet + ? 'Peanut' + : wallet?.connector?.name || shortenAddressLong(wallet.address)} +

+

$ {printableUsdc(wallet.balance)}

-
- {isPeanutWallet && username ? ( -

- peanut.me/{username} -

- ) : ( -

{shortenAddressLong(wallet.address)}

+ +
+
+ {isPeanutWallet && username ? ( +

+ peanut.me/{username} +

+ ) : ( +

{shortenAddressLong(wallet.address)}

+ )} + +
+ {isConnected && ( +
+ Connected +
+ )} + + {isExternalWallet && !isConnected && ( + )} -
@@ -172,7 +228,7 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => // add new wallet component, triggers web3modal const AddNewWallet = ({ onClick }: { onClick: () => void }) => ( - +
diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx index b5e2b6d3..0a016d8f 100644 --- a/src/components/Home/WalletCard.tsx +++ b/src/components/Home/WalletCard.tsx @@ -2,6 +2,7 @@ import { BG_WALLET_CARD_SVG } from '@/assets' import PeanutWalletIcon from '@/assets/icons/small-peanut.png' import { Card } from '@/components/0_Bruddle' import Icon from '@/components/Global/Icon' +import { useWallet } from '@/hooks/useWallet' import { IWallet, WalletProviderType } from '@/interfaces' import { printableUsdc, shortenAddressLong } from '@/utils' import { identicon } from '@dicebear/collection' @@ -28,6 +29,9 @@ type WalletCardWallet = BaseWalletCardProps & { wallet: IWallet username: string selected?: boolean + isConnected?: boolean + isUsable?: boolean + isFocused?: boolean index: number isBalanceHidden: boolean onToggleBalanceVisibility: (e: React.MouseEvent) => void @@ -36,11 +40,13 @@ type WalletCardWallet = BaseWalletCardProps & { type WalletCardProps = WalletCardAdd | WalletCardWallet export function WalletCard({ type, onClick, ...props }: WalletCardProps) { + const { isWalletConnected } = useWallet() + if (type === 'add') { return ( @@ -53,17 +59,17 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { ) } - const { - wallet, - username, - selected = false, - index, - isBalanceHidden, - onToggleBalanceVisibility, - } = props as WalletCardWallet + const { wallet, username, selected, index, isBalanceHidden, onToggleBalanceVisibility, isFocused } = + props as WalletCardWallet + + const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT + const isConnected = isWalletConnected(wallet) - // get color based on the wallet index, cycle through colors - const backgroundColor = useMemo(() => colorArray[index % colorArray.length], [index]) + const backgroundColor = useMemo(() => { + if (isExternalWallet && !isConnected) return 'bg-n-4' + if (wallet.walletProviderType === WalletProviderType.PEANUT) return 'bg-purple-4' + return colorArray[index % colorArray.length] + }, [index, isExternalWallet, isConnected, wallet.walletProviderType]) const getWalletImage = useMemo(() => { if (wallet.walletProviderType === WalletProviderType.PEANUT) { @@ -78,18 +84,39 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { ) }, [wallet]) + const cardOpacity = useMemo(() => { + // External wallet cases + if (isExternalWallet) { + if (!isConnected) { + return 'opacity-50 transition-opacity duration-300' // Disconnected external wallet + } + if (!isFocused) { + return 'opacity-70 transition-opacity duration-300' // Connected but not focused external wallet + } + } + + // Non-external wallets or focused external wallets + if (!isFocused) { + return 'opacity-80 transition-opacity duration-300' // Not focused wallets + } + + return 'opacity-100 transition-opacity duration-300' // Focused wallet + }, [isExternalWallet, isConnected, isFocused]) + return ( @@ -105,11 +132,23 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { height={24} />
- {wallet.walletProviderType !== WalletProviderType.PEANUT && ( -
- External -
- )} +
+ {isExternalWallet && ( + <> +
+ External +
+
+ {isConnected ? 'Connected' : 'Disconnected'} +
+ + )} +
@@ -123,7 +162,13 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { )}

diff --git a/src/components/Setup/Views/AddWallets.tsx b/src/components/Setup/Views/AddWallets.tsx index 925d016d..c18bca8f 100644 --- a/src/components/Setup/Views/AddWallets.tsx +++ b/src/components/Setup/Views/AddWallets.tsx @@ -1,26 +1,23 @@ import { Button } from '@/components/0_Bruddle' import { useSetupFlow } from '@/hooks/useSetupFlow' -import { useAppKit } from '@reown/appkit/react' -import { useAccount } from 'wagmi' +import { useWallet, useWalletConnection } from '@/hooks/useWallet' const AddWallets = () => { - const { open } = useAppKit() - const { isConnected, isConnecting } = useAccount() const { handleNext } = useSetupFlow() + const { isExternalWallet } = useWallet() + const { connectWallet: connectNewWallet } = useWalletConnection() - // todo: replace with new add-wallet component when ready - const handleWalletConnect = () => { - if (isConnected) { + const handleConnect = async () => { + if (isExternalWallet) return + connectNewWallet().then(() => { handleNext() - } else { - open() - } + }) } return (
-
) diff --git a/src/components/Setup/Views/SetupPasskey.tsx b/src/components/Setup/Views/SetupPasskey.tsx index aac60985..4cc03261 100644 --- a/src/components/Setup/Views/SetupPasskey.tsx +++ b/src/components/Setup/Views/SetupPasskey.tsx @@ -10,7 +10,8 @@ const SetupPasskey = () => { const { handle } = useSetupStore() const { handleNext, isLoading } = useSetupFlow() const { handleRegister, address } = useZeroDev() - const { addAccount, user } = useAuth() + const { user } = useAuth() + const { addAccount } = useAuth() const [error, setError] = useState(null) useEffect(() => { @@ -38,14 +39,14 @@ const SetupPasskey = () => { try { await handleRegister(handle) } catch (e) { - console.error('Error registering passkey', e) - setError('Error registering passkey') + console.error('Error registering passkey:', e) + setError('Error registering passkey.') } }} className="text-nowrap" shadowSize="4" > - Add a passkey + Add a Passkey {error &&

{error}

}
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts index 96ee83e2..858bd36b 100644 --- a/src/hooks/useWallet.ts +++ b/src/hooks/useWallet.ts @@ -8,7 +8,8 @@ import * as interfaces from '@/interfaces' import { useAppDispatch, useWalletStore } from '@/redux/hooks' import { walletActions } from '@/redux/slices/wallet-slice' import { areEvmAddressesEqual, backgroundColorFromAddress, fetchWalletBalances } from '@/utils' -import { useQuery } from '@tanstack/react-query' +import { useAppKit, useDisconnect } from '@reown/appkit/react' +import { useMutation, useQuery } from '@tanstack/react-query' import { useCallback, useEffect, useMemo, useRef } from 'react' import { erc20Abi, getAddress, parseUnits } from 'viem' import { useAccount } from 'wagmi' @@ -27,16 +28,160 @@ const createDefaultDBWallet = (address: string): interfaces.IDBWallet => ({ address, }) +const useAddWalletAccount = () => { + const { addAccount, user, fetchUser } = useAuth() + const toast = useToast() + + // keep track of processed addresses to prevent duplicate calls + const processedAddresses = useRef(new Set()) + + return useMutation({ + mutationFn: async ({ + address, + providerType, + }: { + address: string + providerType: interfaces.WalletProviderType + }) => { + if (!user) { + throw new Error('Please log in first') + } + + if (!address) { + throw new Error('No wallet address provided') + } + + const lowerAddress = address.toLowerCase() + + // Check if we've already processed this address in this session + if (processedAddresses.current.has(lowerAddress)) { + return { address, providerType } + } + + // Check if wallet already exists in user accounts + const existingAddresses = new Set(user.accounts.map((acc) => acc.account_identifier.toLowerCase())) + + if (existingAddresses.has(lowerAddress)) { + throw new Error('This wallet is already associated with your account') + } + + // Add to processed set before making the API call + processedAddresses.current.add(lowerAddress) + + await addAccount({ + accountIdentifier: address, + accountType: providerType, + userId: user.user.userId, + }) + + return { address, providerType } + }, + onSuccess: async () => { + await fetchUser() + }, + onError: (error: Error) => { + if (error.message.includes('Account already exists')) { + toast.error('This wallet is already associated with another account.') + } else { + toast.error(error.message) + } + }, + }) +} + +// First, create a new hook to manage wallet connections +export const useWalletConnection = () => { + const { disconnect } = useDisconnect() + const { open: openWeb3Modal } = useAppKit() + const { isConnected: isWagmiConnected, address: connectedWalletAddress } = useAccount() + const addWalletMutation = useAddWalletAccount() + const { user } = useAuth() + const toast = useToast() + + // Add a ref to track if we're in the process of adding a new wallet + const isAddingNewWallet = useRef(false) + + const connectWallet = useCallback(async () => { + try { + // Set the flag when we're explicitly trying to add a new wallet + isAddingNewWallet.current = true + + // 1. Ensure any existing connection is cleared + if (isWagmiConnected) { + await disconnect() + // Wait for disconnect to complete + await new Promise((resolve) => setTimeout(resolve, 500)) + } + + // 2. Open modal and wait for connection + await openWeb3Modal() + + // 3. Wait for connection to be established + await new Promise((resolve) => setTimeout(resolve, 2000)) + + // 4. Verify and add the new wallet if needed + const newAddress = connectedWalletAddress + if (!newAddress) { + console.log('No wallet address received') + return + } + + // Only proceed with account addition if we're explicitly adding a new wallet + if (isAddingNewWallet.current) { + // Check if wallet is already in user's accounts + const isExistingAccount = user?.accounts.some( + (acc) => acc.account_identifier.toLowerCase() === newAddress.toLowerCase() + ) + + // Only add to backend if it's a new account + if (isExistingAccount) { + return + } + + console.log('Adding new wallet to backend:', newAddress) + await addWalletMutation.mutateAsync({ + address: newAddress, + providerType: interfaces.WalletProviderType.BYOW, + }) + // } else { + // console.log('Wallet already exists in user accounts:', newAddress) + // } + } + } catch (error) { + console.error('Connection error:', error) + if (error instanceof Error) { + toast.error(error.message) + } else { + toast.error('Failed to connect wallet') + } + } finally { + // Reset the flag when we're done + isAddingNewWallet.current = false + } + }, [openWeb3Modal, disconnect, connectedWalletAddress, addWalletMutation, user?.accounts]) + + const disconnectWallet = useCallback(async () => { + // Ensure we're not in adding mode when disconnecting + isAddingNewWallet.current = false + if (isWagmiConnected) { + await disconnect() + } + }, [disconnect, isWagmiConnected]) + + return { + connectWallet, + disconnectWallet, + isConnecting: addWalletMutation.isPending, + } +} + export const useWallet = () => { const dispatch = useAppDispatch() - const toast = useToast() + const { user } = useAuth() const { address: kernelClientAddress, isKernelClientReady } = useZeroDev() const { isConnected: isWagmiConnected, addresses: wagmiAddresses, connector } = useAccount() - const { addAccount, user } = useAuth() - const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore() - // use a ref to persist processed addresses across renders - const processedAddressesRef = useRef(new Set()) + const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore() const isWalletConnected = useCallback( (wallet: interfaces.IDBWallet): boolean => { @@ -51,81 +196,87 @@ export const useWallet = () => { [isKernelClientReady, kernelClientAddress, isWagmiConnected, wagmiAddresses] ) + const fetchWalletDetails = useCallback( + async (address: string, walletProviderType: interfaces.WalletProviderType) => { + const dbWallet: interfaces.IDBWallet = { + walletProviderType, + protocolType: interfaces.WalletProtocolType.EVM, + address, + connector: { + iconUrl: connector?.icon || '', + name: connector?.name || 'External Wallet', + }, + } + + let balance = BigInt(0) + let balances: interfaces.IUserBalance[] | undefined + + if (isPeanut(dbWallet)) { + balance = await peanutPublicClient.readContract({ + address: PEANUT_WALLET_TOKEN, + abi: erc20Abi, + functionName: 'balanceOf', + args: [getAddress(address)], + }) + } else { + const { balances: fetchedBalances, totalBalance } = await fetchWalletBalances(address) + balances = fetchedBalances + balance = parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS) + } + + return { ...dbWallet, balance, balances, connected: isWalletConnected(dbWallet) } + }, + [connector, isWalletConnected] + ) + + const mergeAndProcessWallets = useCallback(async () => { + const userAccounts = user?.accounts || [] + const wagmiAddressesList = wagmiAddresses || [] + + const processedAccounts = await Promise.all( + userAccounts + .filter((account) => + Object.values(interfaces.WalletProviderType).includes( + account.account_type as unknown as interfaces.WalletProviderType + ) + ) + .sort((a, b) => { + if (interfaces.AccountType.PEANUT_WALLET === a.account_type) { + return -1 + } else if (interfaces.AccountType.PEANUT_WALLET === b.account_type) { + return 1 + } + const dateA = new Date(a.created_at) + const dateB = new Date(b.created_at) + return dateA.getTime() - dateB.getTime() + }) + .map((account) => + fetchWalletDetails( + account.account_identifier, + account.account_type as unknown as interfaces.WalletProviderType + ) + ) + ) + + const processedExternalWallets = await Promise.all( + wagmiAddressesList.map((address) => fetchWalletDetails(address, interfaces.WalletProviderType.BYOW)) + ) + + const mergedWallets = [...processedAccounts, ...processedExternalWallets].reduce((unique, wallet) => { + if (!unique.some((w) => areEvmAddressesEqual(w.address, wallet.address))) { + unique.push(wallet) + } + return unique + }, [] as interfaces.IDBWallet[]) + + dispatch(walletActions.setWallets(mergedWallets)) + return mergedWallets + }, [fetchWalletDetails, wagmiAddresses, user?.accounts, dispatch]) + useQuery({ queryKey: ['wallets', user?.accounts, wagmiAddresses], - queryFn: async () => { - if (!user && !wagmiAddresses) return [] - - const processedWallets = user - ? await Promise.all( - user.accounts - .filter((account) => - Object.values(interfaces.WalletProviderType).includes( - account.account_type as unknown as interfaces.WalletProviderType - ) - ) - .sort((a, b) => { - if (interfaces.AccountType.PEANUT_WALLET === a.account_type) { - return -1 - } else if (interfaces.AccountType.PEANUT_WALLET === b.account_type) { - return 1 - } - const dateA = new Date(a.created_at) - const dateB = new Date(b.created_at) - return dateA.getTime() - dateB.getTime() - }) - .map(async (account) => { - const dbWallet: interfaces.IDBWallet = { - walletProviderType: account.account_type as unknown as interfaces.WalletProviderType, - protocolType: interfaces.WalletProtocolType.EVM, - address: account.account_identifier, - connector: { - iconUrl: connector?.icon || account.connector?.iconUrl!, - name: connector?.name || account.connector?.name!, - }, - } - - let balance = BigInt(0) - let balances: interfaces.IUserBalance[] | undefined - - if (isPeanut(dbWallet)) { - balance = await peanutPublicClient.readContract({ - address: PEANUT_WALLET_TOKEN, - abi: erc20Abi, - functionName: 'balanceOf', - args: [getAddress(dbWallet.address)], - }) - } else { - const { balances: fetchedBalances, totalBalance } = await fetchWalletBalances( - dbWallet.address - ) - balances = fetchedBalances - balance = parseUnits(totalBalance.toString(), 6) - } - - return { ...dbWallet, balance, balances, connected: isWalletConnected(dbWallet) } - }) - ) - : wagmiAddresses - ? await Promise.all( - wagmiAddresses.map(async (address) => { - const { balances, totalBalance } = await fetchWalletBalances(address) - return { - ...createDefaultDBWallet(address), - connected: isWalletConnected(createDefaultDBWallet(address)), - balances, - balance: parseUnits(totalBalance.toString(), PEANUT_WALLET_TOKEN_DECIMALS), - connector: { - iconUrl: connector?.icon, - name: connector?.name, - }, - } - }) - ) - : [] - dispatch(walletActions.setWallets(processedWallets)) - return processedWallets - }, + queryFn: mergeAndProcessWallets, + enabled: !!user || !!wagmiAddresses, }) const selectedWallet = useMemo(() => { @@ -149,53 +300,6 @@ export const useWallet = () => { } }, [selectedWallet, dispatch]) - useEffect(() => { - if (!user || !wagmiAddresses || !wallets.length) return - - // create a Set of existing wallet addresses for faster lookup - const existingAddresses = new Set(wallets.map((wallet) => wallet.address.toLowerCase())) - - // gilter and process new addresses only once - const newAddresses = wagmiAddresses.filter((addr) => { - const lowerAddr = addr.toLowerCase() - if (!existingAddresses.has(lowerAddr) && !processedAddressesRef.current.has(lowerAddr)) { - processedAddressesRef.current.add(lowerAddr) - return true - } - return false - }) - - if (newAddresses.length) { - const connectorInfo = - connector && connector.icon - ? { - iconUrl: connector.icon, - name: connector.name, - } - : undefined - - // Promise.allSettled to ensure all API calls are handled correctly - ;(async () => { - const addAccountPromises = newAddresses.map((address) => - addAccount({ - accountIdentifier: address, - accountType: interfaces.WalletProviderType.BYOW, - userId: user.user.userId, - connector: connectorInfo, - }).catch((error) => { - console.error(`Error adding wallet ${address}:`, error) - const errorMsg = error.message.includes('Account already exists') - ? 'Could not add external wallet, already associated with another account' - : 'Unexpected error adding external wallet' - toast.error(errorMsg) - }) - ) - - await Promise.allSettled(addAccountPromises) - })() - } - }, [wagmiAddresses, user?.user.userId, wallets, connector]) - const refetchBalances = useCallback( async (address: string) => { const wallet = wallets.find((w) => w.address === address) @@ -252,5 +356,6 @@ export const useWallet = () => { isPeanutWallet: isPeanut(selectedWallet), isExternalWallet: isExternalWallet(selectedWallet), selectExternalWallet, + isWalletConnected, } } diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts index 5cde23c8..d699189e 100644 --- a/src/interfaces/interfaces.ts +++ b/src/interfaces/interfaces.ts @@ -386,7 +386,7 @@ export type ChainIdType = | '7777777' | '1313161554' -interface Account { +export interface Account { account_id: string user_id: string bridge_account_id: string diff --git a/tailwind.config.js b/tailwind.config.js index e7bd6c2f..d799ca8a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,6 +13,7 @@ module.exports = { 2: '#dc78b5', 3: '#fffae8', 4: '#AE7AFF', + 5: '#EDE4FD', }, yellow: { 1: '#ffc900', @@ -35,6 +36,7 @@ module.exports = { 2: '#9CA3AF', 3: '#e5e7eb', 4: '#d1d5db', + 5: '#60646C', }, n: { 1: '#000000', @@ -52,6 +54,9 @@ module.exports = { gold: { 3: '#FFD25C', }, + success: { + 1: '#16B413', + }, white: '#FFFFFF', red: '#FF0000', 'kyc-red': '#C80000', // TODO: this is bad and needs to be changed From 1e70ecccffc00d2eaf967d0ec547605fcfe416db Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 19 Jan 2025 01:54:17 +0530 Subject: [PATCH 02/12] feat: add useWalletConnection hook to manage wallet addition --- src/app/(mobile-ui)/history/page.tsx | 2 +- src/app/(mobile-ui)/home/page.tsx | 13 +- src/app/(mobile-ui)/layout.tsx | 2 +- src/app/(mobile-ui)/wallet/page.tsx | 2 +- .../Cashout/Components/Initial.view.tsx | 2 +- src/components/Claim/Claim.tsx | 2 +- .../Claim/Generic/SenderClaim.view.tsx | 2 +- src/components/Claim/Link/Initial.view.tsx | 2 +- .../Claim/Link/Onchain/Confirm.view.tsx | 2 +- .../Claim/Link/Onchain/Success.view.tsx | 2 +- src/components/Claim/useClaimLink.tsx | 2 +- src/components/Create/Create.tsx | 2 +- src/components/Create/Link/Confirm.view.tsx | 2 +- src/components/Create/Link/Input.view.tsx | 2 +- src/components/Create/useCreateLink.tsx | 2 +- src/components/Dashboard/index.tsx | 2 +- src/components/Global/ChainSelector/index.tsx | 2 +- src/components/Global/Header/index.tsx | 2 +- .../Global/TokenSelector/TokenSelector.tsx | 2 +- src/components/Global/WalletHeader/index.tsx | 44 +++-- src/components/Home/HomeHeader.tsx | 2 +- src/components/Home/WalletCard.tsx | 5 +- src/components/Home/WalletToggleButton.tsx | 2 +- .../Components/ProfileWalletBalance.tsx | 2 +- .../Profile/Components/SkeletonPage.tsx | 2 +- src/components/Profile/index.tsx | 2 +- src/components/Refund/index.tsx | 2 +- src/components/Request/Create/Create.tsx | 2 +- .../Request/Create/Views/Initial.view.tsx | 2 +- .../Request/Pay/Views/Initial.view.tsx | 2 +- src/components/Setup/Views/AddWallets.tsx | 3 +- src/hooks/useWalletType.tsx | 2 +- src/hooks/{ => wallet}/useWallet.ts | 159 +----------------- src/hooks/wallet/useWalletConnection.ts | 95 +++++++++++ 34 files changed, 158 insertions(+), 217 deletions(-) rename src/hooks/{ => wallet}/useWallet.ts (60%) create mode 100644 src/hooks/wallet/useWalletConnection.ts diff --git a/src/app/(mobile-ui)/history/page.tsx b/src/app/(mobile-ui)/history/page.tsx index 208173c2..0bc98dfc 100644 --- a/src/app/(mobile-ui)/history/page.tsx +++ b/src/app/(mobile-ui)/history/page.tsx @@ -6,7 +6,7 @@ import TablePagination from '@/components/Global/TablePagination' import { MobileTableComponent, TableComponent, Tabs } from '@/components/Profile/Components' import { PEANUT_API_URL } from '@/constants' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { IDashboardItem, IProfileTableData } from '@/interfaces' import { formatAmountWithSignificantDigits, formatIban, printableAddress } from '@/utils' import { identicon } from '@dicebear/collection' diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx index 82ee09e5..b7184c0a 100644 --- a/src/app/(mobile-ui)/home/page.tsx +++ b/src/app/(mobile-ui)/home/page.tsx @@ -6,8 +6,9 @@ import WalletHeader from '@/components/Global/WalletHeader' import { WalletCard } from '@/components/Home/WalletCard' import ProfileSection from '@/components/Profile/Components/ProfileSection' import { useAuth } from '@/context/authContext' -import { useWallet, useWalletConnection } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' +import { useWalletConnection } from '@/hooks/wallet/useWalletConnection' import { WalletProviderType } from '@/interfaces' import { getUserPreferences, updateUserPreferences } from '@/utils' import classNames from 'classnames' @@ -23,7 +24,7 @@ export default function Home() { const controls = useAnimation() const router = useRouter() const carouselRef = useRef(null) - const { connectWallet: connectNewWallet } = useWalletConnection() + const { connectWallet } = useWalletConnection() const [isBalanceHidden, setIsBalanceHidden] = useState(() => { const prefs = getUserPreferences() @@ -47,10 +48,6 @@ export default function Home() { } }, [selectedWallet, wallets]) - const handleAddBYOW = async () => { - await connectNewWallet() - } - const hasWallets = wallets.length > 0 const { handleLogin, isLoggingIn } = useZeroDev() const toast = useToast() @@ -190,11 +187,11 @@ export default function Home() { /> ))} - + ) : (
- +
)}
diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 86d13fb1..a269e401 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -7,8 +7,8 @@ import WalletNavigation from '@/components/Global/WalletNavigation' import HomeWaitlist from '@/components/Home/HomeWaitlist' import { peanutWalletIsInPreview } from '@/constants' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { useAppKit } from '@reown/appkit/react' import classNames from 'classnames' import Link from 'next/link' diff --git a/src/app/(mobile-ui)/wallet/page.tsx b/src/app/(mobile-ui)/wallet/page.tsx index 9b46cf2f..b9afa42c 100644 --- a/src/app/(mobile-ui)/wallet/page.tsx +++ b/src/app/(mobile-ui)/wallet/page.tsx @@ -5,7 +5,7 @@ import { ArrowIcon, Button, Card } from '@/components/0_Bruddle' import Icon from '@/components/Global/Icon' import { HomeLink } from '@/components/Home/HomeLink' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { WalletProviderType } from '@/interfaces' import { printableUsdc } from '@/utils' import { motion } from 'framer-motion' diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index dbc74fd8..dbd908b1 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -13,8 +13,8 @@ import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT } from '@/components/Offramp/Offra import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import * as context from '@/context' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { balanceByToken, floorFixed, formatIban, printableUsdc, validateBankAccount } from '@/utils' import { formatBankAccountDisplay, sanitizeBankAccount } from '@/utils/format.utils' import { useAppKit } from '@reown/appkit/react' diff --git a/src/components/Claim/Claim.tsx b/src/components/Claim/Claim.tsx index b1adc34b..9cd56f24 100644 --- a/src/components/Claim/Claim.tsx +++ b/src/components/Claim/Claim.tsx @@ -6,7 +6,7 @@ import useClaimLink from './useClaimLink' import * as assets from '@/assets' import * as consts from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as interfaces from '@/interfaces' import * as utils from '@/utils' import PageContainer from '../0_Bruddle/PageContainer' diff --git a/src/components/Claim/Generic/SenderClaim.view.tsx b/src/components/Claim/Generic/SenderClaim.view.tsx index 0ed79fe3..99a104da 100644 --- a/src/components/Claim/Generic/SenderClaim.view.tsx +++ b/src/components/Claim/Generic/SenderClaim.view.tsx @@ -3,7 +3,7 @@ import { Button, Card } from '@/components/0_Bruddle' import { PaymentsFooter } from '@/components/Global/PaymentsFooter' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as interfaces from '@/interfaces' import * as utils from '@/utils' import { useContext, useState } from 'react' diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index dfb63bea..dc92fb9b 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -20,7 +20,7 @@ import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import { TOOLTIPS } from '@/constants/tooltips' import * as context from '@/context' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { areEvmAddressesEqual, checkifImageType, diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx index eafb9ceb..7a008c0e 100644 --- a/src/components/Claim/Link/Onchain/Confirm.view.tsx +++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx @@ -6,7 +6,7 @@ import Icon from '@/components/Global/Icon' import MoreInfo from '@/components/Global/MoreInfo' import * as consts from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' import { useContext, useState } from 'react' import * as _consts from '../../Claim.consts' diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx index 7c8680ae..b014b5ce 100644 --- a/src/components/Claim/Link/Onchain/Success.view.tsx +++ b/src/components/Claim/Link/Onchain/Success.view.tsx @@ -2,7 +2,7 @@ import { Button, Card } from '@/components/0_Bruddle' import Icon from '@/components/Global/Icon' import { fetchDestinationChain } from '@/components/utils/utils' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' import Link from 'next/link' import { useContext, useEffect, useMemo, useState } from 'react' diff --git a/src/components/Claim/useClaimLink.tsx b/src/components/Claim/useClaimLink.tsx index 10b10aa6..136335fa 100644 --- a/src/components/Claim/useClaimLink.tsx +++ b/src/components/Claim/useClaimLink.tsx @@ -7,7 +7,7 @@ import { useSwitchChain } from 'wagmi' import * as consts from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' export const useClaimLink = () => { diff --git a/src/components/Create/Create.tsx b/src/components/Create/Create.tsx index cc80508c..f27e9802 100644 --- a/src/components/Create/Create.tsx +++ b/src/components/Create/Create.tsx @@ -4,7 +4,7 @@ import { interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk' import { createElement, Suspense, useContext, useEffect, useState } from 'react' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' import PageContainer from '../0_Bruddle/PageContainer' import * as _consts from './Create.consts' diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index 32813aca..aab60245 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -9,8 +9,8 @@ import Icon from '@/components/Global/Icon' import MoreInfo from '@/components/Global/MoreInfo' import { peanutTokenDetails, supportedPeanutChains } from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' import { useWalletType } from '@/hooks/useWalletType' +import { useWallet } from '@/hooks/wallet/useWallet' import { areEvmAddressesEqual, ErrorHandler, diff --git a/src/components/Create/Link/Input.view.tsx b/src/components/Create/Link/Input.view.tsx index 1e8a2d76..acb0c558 100644 --- a/src/components/Create/Link/Input.view.tsx +++ b/src/components/Create/Link/Input.view.tsx @@ -14,9 +14,9 @@ import Icon from '@/components/Global/Icon' import MoreInfo from '@/components/Global/MoreInfo' import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' import { useWalletType } from '@/hooks/useWalletType' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { WalletProviderType } from '@/interfaces' import { balanceByToken, ErrorHandler, floorFixed, isNativeCurrency, printableAddress, printableUsdc } from '@/utils' import { interfaces } from '@squirrel-labs/peanut-sdk' diff --git a/src/components/Create/useCreateLink.tsx b/src/components/Create/useCreateLink.tsx index 320a70d2..beb955ad 100644 --- a/src/components/Create/useCreateLink.tsx +++ b/src/components/Create/useCreateLink.tsx @@ -18,8 +18,8 @@ interface ICheckUserHasEnoughBalanceProps { import { Hex } from 'viem' -import { useWallet } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { WalletProviderType } from '@/interfaces' export const useCreateLink = () => { diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 051258d2..c55d87aa 100644 --- a/src/components/Dashboard/index.tsx +++ b/src/components/Dashboard/index.tsx @@ -13,7 +13,7 @@ import * as utils from '@/utils' import * as _consts from './Dashboard.consts' import * as components from './components' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { useDashboard } from './useDashboard' export const Dashboard = () => { diff --git a/src/components/Global/ChainSelector/index.tsx b/src/components/Global/ChainSelector/index.tsx index 6c4c2939..b2608847 100644 --- a/src/components/Global/ChainSelector/index.tsx +++ b/src/components/Global/ChainSelector/index.tsx @@ -2,7 +2,7 @@ import { supportedPeanutChains } from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { IPeanutChainDetails } from '@/interfaces' import { calculateValuePerChain, formatTokenAmount } from '@/utils' import { Menu, Transition } from '@headlessui/react' diff --git a/src/components/Global/Header/index.tsx b/src/components/Global/Header/index.tsx index 3f04aa1f..a92e9ed0 100644 --- a/src/components/Global/Header/index.tsx +++ b/src/components/Global/Header/index.tsx @@ -5,7 +5,7 @@ import Link from 'next/link' import React, { useCallback, useEffect, useState } from 'react' import { HAMBURGER_LOTTIE, PEANUTMAN_LOGO } from '@/assets' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { breakpoints, emToPx } from '@/styles/theme' import { shortenAddress } from '@/utils' import { useAppKit } from '@reown/appkit/react' diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx index cbb4f0fd..de04b304 100644 --- a/src/components/Global/TokenSelector/TokenSelector.tsx +++ b/src/components/Global/TokenSelector/TokenSelector.tsx @@ -11,8 +11,8 @@ import Search from '../Search' import { AdvancedTokenSelectorButton } from './Components' import { CrispButton } from '@/components/CrispChat' -import { useWallet } from '@/hooks/useWallet' import { useWalletType } from '@/hooks/useWalletType' +import { useWallet } from '@/hooks/wallet/useWallet' import { useAppKit } from '@reown/appkit/react' import { interfaces } from '@squirrel-labs/peanut-sdk' import Image from 'next/image' diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx index ac90c770..2a2c0731 100644 --- a/src/components/Global/WalletHeader/index.tsx +++ b/src/components/Global/WalletHeader/index.tsx @@ -4,7 +4,8 @@ import PeanutWalletIcon from '@/assets/icons/small-peanut.png' import { Button, Card } from '@/components/0_Bruddle' import { useToast } from '@/components/0_Bruddle/Toast' import { useAuth } from '@/context/authContext' -import { useWallet, useWalletConnection } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' +import { useWalletConnection } from '@/hooks/wallet/useWalletConnection' import { IWallet, WalletProviderType } from '@/interfaces' import { printableUsdc, shortenAddressLong } from '@/utils' import classNames from 'classnames' @@ -31,15 +32,8 @@ interface WalletEntryCardProps { const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { const [showModal, setShowModal] = useState(false) - const { - wallets, - setSelectedWallet, - // handleWalletConnect: connectNewWallet, - selectedWallet, - isConnected, - } = useWallet() - - const { connectWallet: connectNewWallet } = useWalletConnection() + const { wallets, setSelectedWallet, selectedWallet, isConnected } = useWallet() + const { connectWallet } = useWalletConnection() const toast = useToast() @@ -116,7 +110,7 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { onClick={() => handleWalletSelection(wallet)} /> ))} - +
@@ -128,11 +122,19 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => { const { username } = useAuth() const { isWalletConnected } = useWallet() - const { connectWallet: connectNewWallet } = useWalletConnection() + const { connectWallet, connectionStatus } = useWalletConnection() + const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT const isPeanutWallet = wallet.walletProviderType === WalletProviderType.PEANUT const isConnected = isWalletConnected(wallet) + const handleAction = async (e: React.MouseEvent) => { + e.stopPropagation() + if (isExternalWallet && !isConnected) { + await connectWallet() + } + } + // get wallet icon to display const walletImage = useMemo(() => { return isPeanutWallet ? PeanutWalletIcon : wallet?.connector?.iconUrl || PeanutWalletIcon @@ -146,16 +148,8 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => if (isExternalWallet && !isConnected) return 'bg-n-4' }, [isExternalWallet, isConnected, isActive, isPeanutWallet, wallet.address]) - const handleCardClick = () => { - if (isExternalWallet && !isConnected) { - connectNewWallet() - } else { - onClick() - } - } - return ( - + {isExternalWallet && !isConnected && ( )} diff --git a/src/components/Home/HomeHeader.tsx b/src/components/Home/HomeHeader.tsx index 7ddc5952..5e8bd67a 100644 --- a/src/components/Home/HomeHeader.tsx +++ b/src/components/Home/HomeHeader.tsx @@ -1,8 +1,8 @@ import { useToast } from '@/components/0_Bruddle/Toast' import { useAuth } from '@/context/authContext' import useAvatar from '@/hooks/useAvatar' -import { useWallet } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { Button } from '../0_Bruddle' const HomeHeader = () => { diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx index 0a016d8f..39cb11bf 100644 --- a/src/components/Home/WalletCard.tsx +++ b/src/components/Home/WalletCard.tsx @@ -2,7 +2,7 @@ import { BG_WALLET_CARD_SVG } from '@/assets' import PeanutWalletIcon from '@/assets/icons/small-peanut.png' import { Card } from '@/components/0_Bruddle' import Icon from '@/components/Global/Icon' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { IWallet, WalletProviderType } from '@/interfaces' import { printableUsdc, shortenAddressLong } from '@/utils' import { identicon } from '@dicebear/collection' @@ -59,8 +59,7 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { ) } - const { wallet, username, selected, index, isBalanceHidden, onToggleBalanceVisibility, isFocused } = - props as WalletCardWallet + const { wallet, username, index, isBalanceHidden, onToggleBalanceVisibility, isFocused } = props as WalletCardWallet const isExternalWallet = wallet.walletProviderType !== WalletProviderType.PEANUT const isConnected = isWalletConnected(wallet) diff --git a/src/components/Home/WalletToggleButton.tsx b/src/components/Home/WalletToggleButton.tsx index bbfb5285..79227f7e 100644 --- a/src/components/Home/WalletToggleButton.tsx +++ b/src/components/Home/WalletToggleButton.tsx @@ -1,4 +1,4 @@ -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { useCallback } from 'react' import { NavIcons } from '../0_Bruddle' diff --git a/src/components/Profile/Components/ProfileWalletBalance.tsx b/src/components/Profile/Components/ProfileWalletBalance.tsx index 3a25a0f9..81c26f8e 100644 --- a/src/components/Profile/Components/ProfileWalletBalance.tsx +++ b/src/components/Profile/Components/ProfileWalletBalance.tsx @@ -1,6 +1,6 @@ import { ARBITRUM_ICON } from '@/assets' import { Card } from '@/components/0_Bruddle' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { printableUsdc } from '@/utils' import Image from 'next/image' import { useMemo } from 'react' diff --git a/src/components/Profile/Components/SkeletonPage.tsx b/src/components/Profile/Components/SkeletonPage.tsx index 19445982..211f41d4 100644 --- a/src/components/Profile/Components/SkeletonPage.tsx +++ b/src/components/Profile/Components/SkeletonPage.tsx @@ -2,7 +2,7 @@ import * as assets from '@/assets' import Loading from '@/components/Global/Loading' import { GlobalLoginComponent } from '@/components/Global/LoginComponent' import { GlobalRegisterComponent } from '@/components/Global/RegisterComponent' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { useState } from 'react' type ProfileSkeletonProps = { diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index 5dcc5e67..e58714c4 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -2,7 +2,7 @@ import * as context from '@/context' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' import { useContext, useState } from 'react' import { useSignMessage } from 'wagmi' diff --git a/src/components/Refund/index.tsx b/src/components/Refund/index.tsx index 6915d4be..6df1b685 100644 --- a/src/components/Refund/index.tsx +++ b/src/components/Refund/index.tsx @@ -5,7 +5,7 @@ import { useConfig, useSendTransaction } from 'wagmi' import * as consts from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import * as utils from '@/utils' import { useAppKit } from '@reown/appkit/react' import { useContext, useState } from 'react' diff --git a/src/components/Request/Create/Create.tsx b/src/components/Request/Create/Create.tsx index a78842b7..e061f3a3 100644 --- a/src/components/Request/Create/Create.tsx +++ b/src/components/Request/Create/Create.tsx @@ -2,7 +2,7 @@ import PageContainer from '@/components/0_Bruddle/PageContainer' import { IAttachmentOptions } from '@/components/Create/Create.consts' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { useRouter } from 'next/navigation' import { createElement, useEffect, useState } from 'react' import * as _consts from './Create.consts' diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx index 83f2cc8e..9834b1fc 100644 --- a/src/components/Request/Create/Views/Initial.view.tsx +++ b/src/components/Request/Create/Views/Initial.view.tsx @@ -8,7 +8,7 @@ import TokenSelector from '@/components/Global/TokenSelector/TokenSelector' import { InputUpdate } from '@/components/Global/ValidatedInput' import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' import { IToken, IUserBalance } from '@/interfaces' import { fetchTokenSymbol, isNativeCurrency, saveRequestLinkToLocalStorage } from '@/utils' import { peanut, interfaces as peanutInterfaces } from '@squirrel-labs/peanut-sdk' diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index be23e9c5..b7938f1f 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -10,8 +10,8 @@ import { ReferenceAndAttachment } from '@/components/Request/Components/Referenc import * as consts from '@/constants' import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants' import * as context from '@/context' -import { useWallet } from '@/hooks/useWallet' import { useZeroDev } from '@/hooks/useZeroDev' +import { useWallet } from '@/hooks/wallet/useWallet' import { type ITokenPriceData } from '@/interfaces' import { areEvmAddressesEqual, diff --git a/src/components/Setup/Views/AddWallets.tsx b/src/components/Setup/Views/AddWallets.tsx index c18bca8f..5b15b6a6 100644 --- a/src/components/Setup/Views/AddWallets.tsx +++ b/src/components/Setup/Views/AddWallets.tsx @@ -1,6 +1,7 @@ import { Button } from '@/components/0_Bruddle' import { useSetupFlow } from '@/hooks/useSetupFlow' -import { useWallet, useWalletConnection } from '@/hooks/useWallet' +import { useWallet } from '@/hooks/wallet/useWallet' +import { useWalletConnection } from '@/hooks/wallet/useWalletConnection' const AddWallets = () => { const { handleNext } = useSetupFlow() diff --git a/src/hooks/useWalletType.tsx b/src/hooks/useWalletType.tsx index 217a23c1..2adc55c0 100644 --- a/src/hooks/useWalletType.tsx +++ b/src/hooks/useWalletType.tsx @@ -1,6 +1,6 @@ import SafeAppsSDK from '@safe-global/safe-apps-sdk' import { useEffect, useRef, useState } from 'react' -import { useWallet } from './useWallet' +import { useWallet } from './wallet/useWallet' type Opts = { allowedDomains?: RegExp[] diff --git a/src/hooks/useWallet.ts b/src/hooks/wallet/useWallet.ts similarity index 60% rename from src/hooks/useWallet.ts rename to src/hooks/wallet/useWallet.ts index 858bd36b..cc318b5c 100644 --- a/src/hooks/useWallet.ts +++ b/src/hooks/wallet/useWallet.ts @@ -1,6 +1,5 @@ 'use client' -import { useToast } from '@/components/0_Bruddle/Toast' import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants' import { peanutPublicClient } from '@/constants/viem.consts' import { useAuth } from '@/context/authContext' @@ -8,12 +7,12 @@ import * as interfaces from '@/interfaces' import { useAppDispatch, useWalletStore } from '@/redux/hooks' import { walletActions } from '@/redux/slices/wallet-slice' import { areEvmAddressesEqual, backgroundColorFromAddress, fetchWalletBalances } from '@/utils' -import { useAppKit, useDisconnect } from '@reown/appkit/react' -import { useMutation, useQuery } from '@tanstack/react-query' -import { useCallback, useEffect, useMemo, useRef } from 'react' +import { useAppKitAccount } from '@reown/appkit/react' +import { useQuery } from '@tanstack/react-query' +import { useCallback, useEffect, useMemo } from 'react' import { erc20Abi, getAddress, parseUnits } from 'viem' import { useAccount } from 'wagmi' -import { useZeroDev } from './useZeroDev' +import { useZeroDev } from '../useZeroDev' // utility functions const isPeanut = (wallet?: interfaces.IDBWallet): boolean => @@ -28,158 +27,12 @@ const createDefaultDBWallet = (address: string): interfaces.IDBWallet => ({ address, }) -const useAddWalletAccount = () => { - const { addAccount, user, fetchUser } = useAuth() - const toast = useToast() - - // keep track of processed addresses to prevent duplicate calls - const processedAddresses = useRef(new Set()) - - return useMutation({ - mutationFn: async ({ - address, - providerType, - }: { - address: string - providerType: interfaces.WalletProviderType - }) => { - if (!user) { - throw new Error('Please log in first') - } - - if (!address) { - throw new Error('No wallet address provided') - } - - const lowerAddress = address.toLowerCase() - - // Check if we've already processed this address in this session - if (processedAddresses.current.has(lowerAddress)) { - return { address, providerType } - } - - // Check if wallet already exists in user accounts - const existingAddresses = new Set(user.accounts.map((acc) => acc.account_identifier.toLowerCase())) - - if (existingAddresses.has(lowerAddress)) { - throw new Error('This wallet is already associated with your account') - } - - // Add to processed set before making the API call - processedAddresses.current.add(lowerAddress) - - await addAccount({ - accountIdentifier: address, - accountType: providerType, - userId: user.user.userId, - }) - - return { address, providerType } - }, - onSuccess: async () => { - await fetchUser() - }, - onError: (error: Error) => { - if (error.message.includes('Account already exists')) { - toast.error('This wallet is already associated with another account.') - } else { - toast.error(error.message) - } - }, - }) -} - -// First, create a new hook to manage wallet connections -export const useWalletConnection = () => { - const { disconnect } = useDisconnect() - const { open: openWeb3Modal } = useAppKit() - const { isConnected: isWagmiConnected, address: connectedWalletAddress } = useAccount() - const addWalletMutation = useAddWalletAccount() - const { user } = useAuth() - const toast = useToast() - - // Add a ref to track if we're in the process of adding a new wallet - const isAddingNewWallet = useRef(false) - - const connectWallet = useCallback(async () => { - try { - // Set the flag when we're explicitly trying to add a new wallet - isAddingNewWallet.current = true - - // 1. Ensure any existing connection is cleared - if (isWagmiConnected) { - await disconnect() - // Wait for disconnect to complete - await new Promise((resolve) => setTimeout(resolve, 500)) - } - - // 2. Open modal and wait for connection - await openWeb3Modal() - - // 3. Wait for connection to be established - await new Promise((resolve) => setTimeout(resolve, 2000)) - - // 4. Verify and add the new wallet if needed - const newAddress = connectedWalletAddress - if (!newAddress) { - console.log('No wallet address received') - return - } - - // Only proceed with account addition if we're explicitly adding a new wallet - if (isAddingNewWallet.current) { - // Check if wallet is already in user's accounts - const isExistingAccount = user?.accounts.some( - (acc) => acc.account_identifier.toLowerCase() === newAddress.toLowerCase() - ) - - // Only add to backend if it's a new account - if (isExistingAccount) { - return - } - - console.log('Adding new wallet to backend:', newAddress) - await addWalletMutation.mutateAsync({ - address: newAddress, - providerType: interfaces.WalletProviderType.BYOW, - }) - // } else { - // console.log('Wallet already exists in user accounts:', newAddress) - // } - } - } catch (error) { - console.error('Connection error:', error) - if (error instanceof Error) { - toast.error(error.message) - } else { - toast.error('Failed to connect wallet') - } - } finally { - // Reset the flag when we're done - isAddingNewWallet.current = false - } - }, [openWeb3Modal, disconnect, connectedWalletAddress, addWalletMutation, user?.accounts]) - - const disconnectWallet = useCallback(async () => { - // Ensure we're not in adding mode when disconnecting - isAddingNewWallet.current = false - if (isWagmiConnected) { - await disconnect() - } - }, [disconnect, isWagmiConnected]) - - return { - connectWallet, - disconnectWallet, - isConnecting: addWalletMutation.isPending, - } -} - export const useWallet = () => { const dispatch = useAppDispatch() const { user } = useAuth() const { address: kernelClientAddress, isKernelClientReady } = useZeroDev() - const { isConnected: isWagmiConnected, addresses: wagmiAddresses, connector } = useAccount() + const { addresses: wagmiAddresses, connector } = useAccount() + const { isConnected: isWagmiConnected } = useAppKitAccount() const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore() diff --git a/src/hooks/wallet/useWalletConnection.ts b/src/hooks/wallet/useWalletConnection.ts new file mode 100644 index 00000000..947177b5 --- /dev/null +++ b/src/hooks/wallet/useWalletConnection.ts @@ -0,0 +1,95 @@ +'use client' + +import { useToast } from '@/components/0_Bruddle/Toast' +import { useAuth } from '@/context/authContext' +import * as interfaces from '@/interfaces' +import { useAppKit, useAppKitAccount } from '@reown/appkit/react' +import { useCallback, useEffect, useMemo, useRef } from 'react' + +export const useWalletConnection = () => { + const { open: openWeb3Modal } = useAppKit() + const { status, address: connectedAddress } = useAppKitAccount() + const { user, addAccount, fetchUser } = useAuth() + const toast = useToast() + + const processedAddresses = useRef(new Set()) + const isProcessing = useRef(false) + + // helper function to check if an address already exists in user accounts + const isAddressInUserAccounts = useCallback( + (address: string) => + user?.accounts.some((acc) => acc.account_identifier.toLowerCase() === address.toLowerCase()), + [user] + ) + + // Memoized list of user addresses + const userAddresses = useMemo(() => user?.accounts.map((acc) => acc.account_identifier.toLowerCase()) || [], [user]) + + // add wallet to backend and fetch updated user data + const addWalletToBackend = useCallback( + async (address: string) => { + const lowerAddress = address.toLowerCase() + if (!address || !user || isProcessing.current || processedAddresses.current.has(lowerAddress)) { + return false + } + + if (isAddressInUserAccounts(lowerAddress)) { + processedAddresses.current.add(lowerAddress) + return false + } + + try { + isProcessing.current = true + await addAccount({ + accountIdentifier: address, + accountType: interfaces.WalletProviderType.BYOW, + userId: user.user.userId, + }) + await fetchUser() + processedAddresses.current.add(lowerAddress) + toast.success('Wallet added successfully') + return true + } catch (error) { + console.error('Error adding wallet:', error) + toast.error('Failed to add wallet') + return false + } finally { + isProcessing.current = false + } + }, + [user, addAccount, fetchUser, toast, isAddressInUserAccounts] + ) + + // automatically add connected wallet to backend if not already present + useEffect(() => { + if (connectedAddress && !userAddresses.includes(connectedAddress.toLowerCase())) { + addWalletToBackend(connectedAddress) + } + }, [connectedAddress, userAddresses]) + + // connect wallet and add it to backend + const connectWallet = useCallback(async () => { + try { + await openWeb3Modal({ view: 'Connect' }) + + // todo: not a very elegant solution, but it works, need to refine this later + // wait for connection and attempt to add wallet + for (let attempt = 0; attempt < 10 && !isProcessing.current; attempt++) { + if (status === 'connected' && connectedAddress) { + await addWalletToBackend(connectedAddress) + break + } + await new Promise((resolve) => setTimeout(resolve, 500)) + } + } catch (error) { + console.error('Connection error:', error) + toast.error('Failed to connect wallet') + } + }, [openWeb3Modal, status, connectedAddress, addWalletToBackend, toast]) + + return { + connectWallet, + isConnecting: status === 'connecting' || isProcessing.current, + connectionStatus: status, + } +} From 63decababceed55b66996ab66013c6c72af9cead Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 19 Jan 2025 18:01:16 +0530 Subject: [PATCH 03/12] fix: wallet ux goes uppp - fixed wallet ux to handle proper wallet connection using a separate new hook - centered a lot of divs - peanut wallet remains as active wallet if no external wallet is connected --- .../Cashout/Components/Initial.view.tsx | 4 +- .../Claim/Generic/AlreadyClaimed.view.tsx | 2 +- .../Claim/Generic/NotFound.view.tsx | 35 ++++++++-------- .../Claim/Generic/SenderClaim.view.tsx | 6 +-- .../Claim/Generic/WrongPassword.view.tsx | 35 +++++++++------- src/components/Claim/Link/Initial.view.tsx | 4 +- src/components/Create/Link/Confirm.view.tsx | 4 +- src/components/Create/Link/Initial.view.tsx | 25 ++++++------ src/components/Create/Link/Input.view.tsx | 4 +- src/components/Create/Link/Success.view.tsx | 2 +- src/components/Global/KYCComponent/index.tsx | 25 ++++++------ src/components/Global/WalletHeader/index.tsx | 23 ++++++++--- src/components/Home/HomeWaitlist.tsx | 6 +-- src/components/Kyc/index.tsx | 10 +++-- src/components/LinkAccount/index.tsx | 10 +++-- src/components/Refund/index.tsx | 6 +-- .../Request/Create/Views/Initial.view.tsx | 2 +- .../Request/Create/Views/Success.view.tsx | 2 +- .../Views/GeneralViews/AlreadyPaid.view.tsx | 2 +- .../Pay/Views/GeneralViews/Canceled.view.tsx | 40 +++++++++---------- .../Pay/Views/GeneralViews/Error.view.tsx | 40 +++++++++---------- .../Request/Pay/Views/Initial.view.tsx | 2 +- .../Request/Pay/Views/Success.view.tsx | 4 +- src/hooks/wallet/useWalletConnection.ts | 20 +++++++--- 24 files changed, 171 insertions(+), 142 deletions(-) diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index dbd908b1..d0cfd71b 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -261,8 +261,8 @@ export const InitialCashoutView = ({ - Cash Out - + Cash Out + Cash out your crypto to your bank account. Works best with popular stablecoins and other commonly traded tokens. diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx index d394af74..736f7ed5 100644 --- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx +++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx @@ -21,7 +21,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter return ( - Payment Receipt + Payment Receipt diff --git a/src/components/Claim/Generic/NotFound.view.tsx b/src/components/Claim/Generic/NotFound.view.tsx index 2254b0d3..ec340e62 100644 --- a/src/components/Claim/Generic/NotFound.view.tsx +++ b/src/components/Claim/Generic/NotFound.view.tsx @@ -1,31 +1,28 @@ 'use client' -import * as _consts from '../Claim.consts' -import { useRouter } from 'next/navigation' -import { Button, Card } from '@/components/0_Bruddle' +import { Card } from '@/components/0_Bruddle' import { PaymentsFooter } from '@/components/Global/PaymentsFooter' export const NotFoundClaimLink = () => { - const router = useRouter() - return ( - - - Sorryyy - Deposit not found. Are you sure your link is correct? + + + Sorryyy + + This link is malformed. Are you sure you copied it correctly? + - - ) diff --git a/src/components/Claim/Generic/SenderClaim.view.tsx b/src/components/Claim/Generic/SenderClaim.view.tsx index 99a104da..71ce56cb 100644 --- a/src/components/Claim/Generic/SenderClaim.view.tsx +++ b/src/components/Claim/Generic/SenderClaim.view.tsx @@ -68,9 +68,9 @@ export const SenderClaimLinkView = ({ return ( - - Hello, {utils.shortenAddress(address ?? '')} - + + Hello, {utils.shortenAddress(address ?? '')} + This is a link that you have created. You can refund it or go to the recipient view. diff --git a/src/components/Claim/Generic/WrongPassword.view.tsx b/src/components/Claim/Generic/WrongPassword.view.tsx index 19e54cba..8b179dfc 100644 --- a/src/components/Claim/Generic/WrongPassword.view.tsx +++ b/src/components/Claim/Generic/WrongPassword.view.tsx @@ -1,25 +1,30 @@ 'use client' -import * as _consts from '../Claim.consts' +import { Card } from '@/components/0_Bruddle' import { PaymentsFooter } from '@/components/Global/PaymentsFooter' export const WrongPasswordClaimLink = () => { return ( -
-
-

Sorryyy

-
This link is malformed. Are you sure you copied it correctly?
-
+ + + Sorryyy + + This link is malformed. Are you sure you copied it correctly? + + + +
+ We would like to hear from your experience. Hit us up on{' '} + + Discord! + +
- - - -
+
+ +
+ + ) } diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index dc92fb9b..addc2c03 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -436,8 +436,8 @@ export const InitialClaimLinkView = ({
- - + +
sent you {tokenPrice ? ( diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index aab60245..bd88ac8a 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -241,7 +241,7 @@ export const CreateLinkConfirmView = ({ {createType == 'link' ? 'Text Tokens' @@ -249,7 +249,7 @@ export const CreateLinkConfirmView = ({ ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}` : `Send to ${recipient.name}`} - + {createType === 'link' && 'Make a payment with the link. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'} {createType === 'email_link' && diff --git a/src/components/Create/Link/Initial.view.tsx b/src/components/Create/Link/Initial.view.tsx index f9d16523..64fcfc91 100644 --- a/src/components/Create/Link/Initial.view.tsx +++ b/src/components/Create/Link/Initial.view.tsx @@ -1,21 +1,20 @@ 'use client' +import { useSearchParams } from 'next/navigation' import { useContext, useEffect, useState } from 'react' import validator from 'validator' -import { useSearchParams } from 'next/navigation' -import * as _consts from '../Create.consts' -import * as _utils from '../Create.utils' -import * as utils from '@/utils' -import * as context from '@/context' -import RecipientInput from '@/components/Global/RecipientInput' +import { Button, Card } from '@/components/0_Bruddle' +import Divider from '@/components/0_Bruddle/Divider' +import { CrispButton } from '@/components/CrispChat' import Icon from '@/components/Global/Icon' -import { ethers } from 'ethers' import Loading from '@/components/Global/Loading' +import RecipientInput from '@/components/Global/RecipientInput' +import * as context from '@/context' +import * as utils from '@/utils' +import { ethers } from 'ethers' import { validate } from 'multicoin-address-validator' -import { CrispButton } from '@/components/CrispChat' -import { Button, Card } from '@/components/0_Bruddle' -import Divider from '@/components/0_Bruddle/Divider' +import * as _consts from '../Create.consts' export const CreateLinkInitialView = ({ onNext, @@ -154,9 +153,9 @@ export const CreateLinkInitialView = ({ return ( - - Send crypto - + + Send crypto + Transfer tokens via link or to an email, phone number, ENS, or wallet address. diff --git a/src/components/Create/Link/Input.view.tsx b/src/components/Create/Link/Input.view.tsx index acb0c558..2bc3f0a7 100644 --- a/src/components/Create/Link/Input.view.tsx +++ b/src/components/Create/Link/Input.view.tsx @@ -311,10 +311,10 @@ export const CreateLinkInputView = ({ <> - + {' '} {createType === 'link' diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx index a6ce0bc4..a1ad432c 100644 --- a/src/components/Create/Link/Success.view.tsx +++ b/src/components/Create/Link/Success.view.tsx @@ -77,7 +77,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok return ( - + Yay! diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx index ee6508f4..476b80da 100644 --- a/src/components/Global/KYCComponent/index.tsx +++ b/src/components/Global/KYCComponent/index.tsx @@ -1,21 +1,20 @@ 'use client' -import { useMemo, useState, useEffect } from 'react' import { Step, Steps, useSteps } from 'chakra-ui-steps' +import { useEffect, useMemo, useState } from 'react' -import * as utils from '@/utils' -import * as interfaces from '@/interfaces' +import { Card } from '@/components/0_Bruddle' +import { CrispButton } from '@/components/CrispChat' import * as consts from '@/constants' -import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper' -import { useForm } from 'react-hook-form' import { useAuth } from '@/context/authContext' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' +import { Divider, useToast } from '@chakra-ui/react' +import { useForm } from 'react-hook-form' +import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper' import Loading from '../Loading' import { GlobalLoginComponent } from '../LoginComponent' import { GlobalRegisterComponent } from '../RegisterComponent' -import { Divider } from '@chakra-ui/react' -import { CrispButton } from '@/components/CrispChat' -import { Card } from '@/components/0_Bruddle' -import { useToast } from '@chakra-ui/react' const steps = [ { label: 'Step 1: Provide personal details' }, @@ -424,9 +423,11 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on return ( - - KYC Process - Regulations require us to verify your identity. + + KYC Process + + Regulations require us to verify your identity. + { const [showModal, setShowModal] = useState(false) - const { wallets, setSelectedWallet, selectedWallet, isConnected } = useWallet() + const { wallets, setSelectedWallet, selectedWallet, isConnected, isWalletConnected } = useWallet() const { connectWallet } = useWalletConnection() - const toast = useToast() - const sortedWallets = useMemo(() => { return [...wallets].filter((account) => Object.values(WalletProviderType).includes(account.walletProviderType)) }, [wallets, selectedWallet]) @@ -46,6 +43,22 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { setSelectedWallet(wallet) } + console.log('selectedWallet', selectedWallet) + + // set selected wallet to peanut wallet if no external wallet is connected + useEffect(() => { + if ( + !sortedWallets.some( + (wallet) => wallet.walletProviderType !== WalletProviderType.PEANUT && isWalletConnected(wallet) + ) + ) { + const peanutWallet = sortedWallets.find((wallet) => wallet.walletProviderType === WalletProviderType.PEANUT) + if (peanutWallet) { + setSelectedWallet(peanutWallet) + } + } + }, [sortedWallets, isWalletConnected, setSelectedWallet]) + return (
{/* wallet selector button with current wallet info */} diff --git a/src/components/Home/HomeWaitlist.tsx b/src/components/Home/HomeWaitlist.tsx index 8262a553..18535872 100644 --- a/src/components/Home/HomeWaitlist.tsx +++ b/src/components/Home/HomeWaitlist.tsx @@ -33,8 +33,8 @@ const HomeWaitlist = () => { {username && ( <Card> - <Card.Header className="border-none"> - <Card.Title className="border-none">Yay {username}!!!</Card.Title> + <Card.Header className="mx-auto border-none"> + <Card.Title className="border-none text-center">Yay {username}!!!</Card.Title> </Card.Header> </Card> )} @@ -42,7 +42,7 @@ const HomeWaitlist = () => { <div className="mt-5 w-full text-center"> {username && ( <Card> - <Card.Header className="text-center"> + <Card.Header className="mx-auto text-center"> <Card.Title className="w-full text-center">You're all set up!</Card.Title> <Card.Description className="w-full text-center"> Join the group at{' '} diff --git a/src/components/Kyc/index.tsx b/src/components/Kyc/index.tsx index 7dc89637..820a7bcb 100644 --- a/src/components/Kyc/index.tsx +++ b/src/components/Kyc/index.tsx @@ -44,9 +44,13 @@ export const KYCComponent = () => { if (user && user?.user?.kycStatus === 'verified') { return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="text-center"> - <Card.Title>Welcome back, {user?.user?.username ?? user?.user?.email}</Card.Title> - <Card.Description>You have already completed the KYC process!</Card.Description> + <Card.Header className="mx-auto text-center"> + <Card.Title className="text-center"> + Welcome back, {user?.user?.username ?? user?.user?.email} + </Card.Title> + <Card.Description className="text-center"> + You have already completed the KYC process! + </Card.Description> </Card.Header> <Card.Content className="col gap-4 py-4"> <Link href={'/profile'} className="w-full"> diff --git a/src/components/LinkAccount/index.tsx b/src/components/LinkAccount/index.tsx index 00e9c165..6449f127 100644 --- a/src/components/LinkAccount/index.tsx +++ b/src/components/LinkAccount/index.tsx @@ -46,9 +46,13 @@ export const LinkAccountComponent = () => { return ( <PageContainer> <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header> - <Card.Title>Welcome back, {user?.user?.username ?? user?.user?.email}</Card.Title> - <Card.Description>Before linking an account, you will have to complete KYC!</Card.Description> + <Card.Header className="mx-auto text-center"> + <Card.Title className="text-center"> + Welcome back, {user?.user?.username ?? user?.user?.email} + </Card.Title> + <Card.Description className="text-center"> + Before linking an account, you will have to complete KYC! + </Card.Description> </Card.Header> <Card.Content> {user && user?.user?.kycStatus != 'verified' ? ( diff --git a/src/components/Refund/index.tsx b/src/components/Refund/index.tsx index 6df1b685..00a60276 100644 --- a/src/components/Refund/index.tsx +++ b/src/components/Refund/index.tsx @@ -120,9 +120,9 @@ export const Refund = () => { return ( <PageContainer> <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header> - <Card.Title>Refund</Card.Title> - <Card.Description> + <Card.Header className="mx-auto text-center"> + <Card.Title className="text-center">Refund</Card.Title> + <Card.Description className="mx-auto text-center"> This is a page specific for refunding links that failed while creating, but the funds did leave your wallet. Please provide the transaction hash and chainId, and you will be able to claim. Please note that you will have to be connected with the same wallet that you tried creating the diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx index 9834b1fc..2153b15c 100644 --- a/src/components/Request/Create/Views/Initial.view.tsx +++ b/src/components/Request/Create/Views/Initial.view.tsx @@ -166,7 +166,7 @@ export const InitialView = ({ return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header> + <Card.Header className="mx-auto"> <Card.Title className="mx-auto">Request a payment</Card.Title> <Card.Description className="text-center"> Choose the amount, token and chain. You will request a payment to your wallet. Add an invoice if you diff --git a/src/components/Request/Create/Views/Success.view.tsx b/src/components/Request/Create/Views/Success.view.tsx index bb9b7040..ae2c4622 100644 --- a/src/components/Request/Create/Views/Success.view.tsx +++ b/src/components/Request/Create/Views/Success.view.tsx @@ -8,7 +8,7 @@ import * as _consts from '../Create.consts' export const SuccessView = ({ link }: _consts.ICreateScreenProps) => { return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="relative"> + <Card.Header className="relative mx-auto"> <Card.Title className="mx-auto">Yay!</Card.Title> </Card.Header> <Card.Content className="flex flex-col gap-3"> diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx index 53c1ab27..333751d5 100644 --- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx @@ -20,7 +20,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="text-center"> + <Card.Header className="mx-auto text-center"> <Card.Title>Payment Receipt</Card.Title> </Card.Header> <Card.Content className="col gap-4"> diff --git a/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx b/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx index 2b1dd55d..d7550bfe 100644 --- a/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/Canceled.view.tsx @@ -5,31 +5,29 @@ import Link from 'next/link' export const CanceledClaimLink = () => { return ( - <Card> - <Card.Header> - <Card.Title>Sorryyy</Card.Title> - <Card.Header>This request had been canceled</Card.Header> + <Card className="space-y-3 shadow-none sm:shadow-primary-4"> + <Card.Header className="mx-auto space-y-2"> + <Card.Title className="mx-auto text-center">Sorryyy</Card.Title> + <Card.Description className="mx-auto text-center">This request had been canceled</Card.Description> </Card.Header> - <Card.Content> - <label className="text-h9 font-normal"> - We would like to hear from your experience. Hit us up on{' '} - <a - className="cursor-pointer text-black underline dark:text-white" - target="_blank" - href="https://discord.gg/BX9Ak7AW28" - > + <Card.Content className="mx-auto space-y-2 text-center"> + <div className="block text-h8 font-normal"> + Deposit not found. Are you sure your link is correct? + <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28"> Discord! </a> - </label> + </div> - <Link href={'/request/create'}> - <Button variant="stroke"> - <div className=" border border-n-1 p-0 px-1"> - <Icon name="send" className="-mt-0.5" /> - </div> - Make a request yourself! - </Button> - </Link> + <div className="w-full"> + <Link href={'/request/create'}> + <Button variant="stroke"> + <div className=" border border-n-1 p-0 px-1"> + <Icon name="send" className="-mt-0.5" /> + </div> + Make a request yourself! + </Button> + </Link> + </div> </Card.Content> </Card> ) diff --git a/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx b/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx index 474251e9..1ccb6cc1 100644 --- a/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/Error.view.tsx @@ -6,31 +6,29 @@ import Link from 'next/link' export const ErrorView = ({ errorMessage }: { errorMessage: string }) => { return ( - <Card> - <Card.Header> - <Card.Title>Sorryyyy</Card.Title> - <Card.Description>{errorMessage}</Card.Description> + <Card className="space-y-3 shadow-none sm:shadow-primary-4"> + <Card.Header className="mx-auto space-y-2"> + <Card.Title className="mx-auto text-center">Sorryyy</Card.Title> + <Card.Description className="mx-auto text-center">{errorMessage}</Card.Description> </Card.Header> - <Card.Content className="col gap-4"> - <label className="text-h9 font-normal"> - We would like to hear from your experience. Hit us up on{' '} - <a - className="cursor-pointer text-black underline dark:text-white" - target="_blank" - href="https://discord.gg/BX9Ak7AW28" - > + <Card.Content className="mx-auto space-y-2 text-center"> + <div className="block text-h8 font-normal"> + Deposit not found. Are you sure your link is correct? + <a className="text-link-decoration" target="_blank" href="https://discord.gg/BX9Ak7AW28"> Discord! </a> - </label> + </div> - <Link href={'/request/create'}> - <Button variant="stroke"> - <div className=" border border-n-1 p-0 px-1"> - <Icon name="send" className="-mt-0.5" /> - </div> - Make a request yourself! - </Button> - </Link> + <div className="w-full"> + <Link href={'/request/create'}> + <Button variant="stroke"> + <div className=" border border-n-1 p-0 px-1"> + <Icon name="send" className="-mt-0.5" /> + </div> + Make a request yourself! + </Button> + </Link> + </div> </Card.Content> </Card> ) diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index b7938f1f..167ab356 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -359,7 +359,7 @@ export const InitialView = ({ <div> <FlowHeader /> <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header> + <Card.Header className="mx-auto"> <Card.Title className="text-center text-h3"> <AddressLink address={requestLinkData.recipientAddress} /> is requesting </Card.Title> diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx index 2c2e5277..7c50c004 100644 --- a/src/components/Request/Pay/Views/Success.view.tsx +++ b/src/components/Request/Pay/Views/Success.view.tsx @@ -96,9 +96,9 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } return ( <Card className="w-full shadow-none sm:shadow-primary-4"> - <Card.Header> + <Card.Header className="mx-auto"> <Card.Title className="mx-auto">Yay!</Card.Title> - <Card.Description> + <Card.Description className="mx-auto"> You have successfully paid <AddressLink address={requestLinkData.recipientAddress} />! </Card.Description> </Card.Header> diff --git a/src/hooks/wallet/useWalletConnection.ts b/src/hooks/wallet/useWalletConnection.ts index 947177b5..e7378c68 100644 --- a/src/hooks/wallet/useWalletConnection.ts +++ b/src/hooks/wallet/useWalletConnection.ts @@ -3,11 +3,12 @@ import { useToast } from '@/components/0_Bruddle/Toast' import { useAuth } from '@/context/authContext' import * as interfaces from '@/interfaces' -import { useAppKit, useAppKitAccount } from '@reown/appkit/react' +import { useAppKit, useAppKitAccount, useDisconnect } from '@reown/appkit/react' import { useCallback, useEffect, useMemo, useRef } from 'react' export const useWalletConnection = () => { - const { open: openWeb3Modal } = useAppKit() + const { open: openWalletModal } = useAppKit() + const { disconnect: disconnectWallet } = useDisconnect() const { status, address: connectedAddress } = useAppKitAccount() const { user, addAccount, fetchUser } = useAuth() const toast = useToast() @@ -70,7 +71,11 @@ export const useWalletConnection = () => { // connect wallet and add it to backend const connectWallet = useCallback(async () => { try { - await openWeb3Modal({ view: 'Connect' }) + if (status === 'connected' && connectedAddress) { + await disconnectWallet() + } + + await openWalletModal({ view: 'Connect' }) // todo: not a very elegant solution, but it works, need to refine this later // wait for connection and attempt to add wallet @@ -82,10 +87,15 @@ export const useWalletConnection = () => { await new Promise((resolve) => setTimeout(resolve, 500)) } } catch (error) { + // todo: add-account throughs 500 error sometimes without proper error handling from backend, need to fix this later console.error('Connection error:', error) - toast.error('Failed to connect wallet') + if ((error as any).response?.status === 500) { + console.error('Server error:', error) + } else { + toast.error('Failed to connect wallet') + } } - }, [openWeb3Modal, status, connectedAddress, addWalletToBackend, toast]) + }, [openWalletModal, status, connectedAddress, addWalletToBackend, toast]) return { connectWallet, From b78acd6c77ba00dd51e764da429fd8b26a212250 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Sun, 19 Jan 2025 18:24:28 +0530 Subject: [PATCH 04/12] feat: add wallet header on req view --- src/components/Global/WalletHeader/index.tsx | 2 - .../Request/Create/Views/Initial.view.tsx | 146 +++++++++--------- src/hooks/wallet/useWallet.ts | 22 +-- 3 files changed, 86 insertions(+), 84 deletions(-) diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx index 51952529..177d889e 100644 --- a/src/components/Global/WalletHeader/index.tsx +++ b/src/components/Global/WalletHeader/index.tsx @@ -43,8 +43,6 @@ const WalletHeader = ({ className, disabled }: WalletHeaderProps) => { setSelectedWallet(wallet) } - console.log('selectedWallet', selectedWallet) - // set selected wallet to peanut wallet if no external wallet is connected useEffect(() => { if ( diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx index 2153b15c..807767fb 100644 --- a/src/components/Request/Create/Views/Initial.view.tsx +++ b/src/components/Request/Create/Views/Initial.view.tsx @@ -2,6 +2,7 @@ import { Button, Card } from '@/components/0_Bruddle' import { getTokenDetails } from '@/components/Create/Create.utils' import AddressInput from '@/components/Global/AddressInput' import FileUploadInput, { IFileUploadInputProps } from '@/components/Global/FileUploadInput' +import FlowHeader from '@/components/Global/FlowHeader' import Loading from '@/components/Global/Loading' import TokenAmountInput from '@/components/Global/TokenAmountInput' import TokenSelector from '@/components/Global/TokenSelector/TokenSelector' @@ -165,80 +166,83 @@ export const InitialView = ({ }, [isPeanutWallet, selectedWallet?.address]) return ( - <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="mx-auto"> - <Card.Title className="mx-auto">Request a payment</Card.Title> - <Card.Description className="text-center"> - Choose the amount, token and chain. You will request a payment to your wallet. Add an invoice if you - want to. - </Card.Description> - </Card.Header> - <Card.Content> - <div className="flex w-full flex-col items-center justify-center gap-3"> - <TokenAmountInput - className="w-full" - setTokenValue={(value) => { - _setTokenValue(value ?? '') - }} - tokenValue={_tokenValue} - onSubmit={() => { - handleOnNext({ - recipientAddress, - tokenAddress: selectedTokenAddress, - chainId: selectedChainID, - userBalances: selectedWallet?.balances ?? [], - tokenValue, - tokenData: selectedTokenData, - attachmentOptions, - }) - }} - /> - {isExternalWallet && <TokenSelector shouldBeConnected={false} />} - <FileUploadInput - attachmentOptions={attachmentOptions} - setAttachmentOptions={setAttachmentOptions} - /> - {isExternalWallet && ( - <AddressInput - placeholder="Enter recipient address" - value={recipientAddress ?? ''} - onUpdate={(update: InputUpdate) => { - setRecipientAddress(update.value) - setInputChanging(update.isChanging) - setIsValidRecipient(update.isValid) - }} + <div> + <FlowHeader /> + <Card className="shadow-none sm:shadow-primary-4"> + <Card.Header className="mx-auto"> + <Card.Title className="mx-auto">Request a payment</Card.Title> + <Card.Description className="text-center"> + Choose the amount, token and chain. You will request a payment to your wallet. Add an invoice if + you want to. + </Card.Description> + </Card.Header> + <Card.Content> + <div className="flex w-full flex-col items-center justify-center gap-3"> + <TokenAmountInput className="w-full" + setTokenValue={(value) => { + _setTokenValue(value ?? '') + }} + tokenValue={_tokenValue} + onSubmit={() => { + handleOnNext({ + recipientAddress, + tokenAddress: selectedTokenAddress, + chainId: selectedChainID, + userBalances: selectedWallet?.balances ?? [], + tokenValue, + tokenData: selectedTokenData, + attachmentOptions, + }) + }} /> - )} - <Button - onClick={() => { - handleOnNext({ - recipientAddress, - tokenAddress: selectedTokenAddress, - chainId: selectedChainID, - userBalances: selectedWallet?.balances ?? [], - tokenValue, - tokenData: selectedTokenData, - attachmentOptions, - }) - }} - disabled={!isValidRecipient || inputChanging || isLoading || !_tokenValue} - > - {isLoading ? ( - <div className="flex w-full flex-row items-center justify-center gap-2"> - <Loading /> {loadingState} - </div> - ) : ( - 'Confirm' + {isExternalWallet && <TokenSelector shouldBeConnected={false} />} + <FileUploadInput + attachmentOptions={attachmentOptions} + setAttachmentOptions={setAttachmentOptions} + /> + {isExternalWallet && ( + <AddressInput + placeholder="Enter recipient address" + value={recipientAddress ?? ''} + onUpdate={(update: InputUpdate) => { + setRecipientAddress(update.value) + setInputChanging(update.isChanging) + setIsValidRecipient(update.isValid) + }} + className="w-full" + /> )} - </Button> - </div> - {errorState.showError && ( - <div className="text-center"> - <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> + <Button + onClick={() => { + handleOnNext({ + recipientAddress, + tokenAddress: selectedTokenAddress, + chainId: selectedChainID, + userBalances: selectedWallet?.balances ?? [], + tokenValue, + tokenData: selectedTokenData, + attachmentOptions, + }) + }} + disabled={!isValidRecipient || inputChanging || isLoading || !_tokenValue} + > + {isLoading ? ( + <div className="flex w-full flex-row items-center justify-center gap-2"> + <Loading /> {loadingState} + </div> + ) : ( + 'Confirm' + )} + </Button> </div> - )} - </Card.Content> - </Card> + {errorState.showError && ( + <div className="text-center"> + <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> + </div> + )} + </Card.Content> + </Card> + </div> ) } diff --git a/src/hooks/wallet/useWallet.ts b/src/hooks/wallet/useWallet.ts index 8364f5d8..2770e0cc 100644 --- a/src/hooks/wallet/useWallet.ts +++ b/src/hooks/wallet/useWallet.ts @@ -31,7 +31,7 @@ export const useWallet = () => { const dispatch = useAppDispatch() const { user } = useAuth() const { address: kernelClientAddress, isKernelClientReady } = useZeroDev() - const { addresses: wagmiAddresses, connector } = useAccount() + const { addresses: wagmiAddress, connector } = useAccount() const { isConnected: isWagmiConnected } = useAppKitAccount() const { selectedAddress, wallets, signInModalVisible, walletColor } = useWalletStore() @@ -41,12 +41,12 @@ export const useWallet = () => { if (isPeanut(wallet) && kernelClientAddress) { return isKernelClientReady && areEvmAddressesEqual(kernelClientAddress, wallet.address) } - if (wagmiAddresses) { - return isWagmiConnected && wagmiAddresses.some((addr) => areEvmAddressesEqual(addr, wallet.address)) + if (wagmiAddress) { + return isWagmiConnected && wagmiAddress.some((addr) => areEvmAddressesEqual(addr, wallet.address)) } return false }, - [isKernelClientReady, kernelClientAddress, isWagmiConnected, wagmiAddresses] + [isKernelClientReady, kernelClientAddress, isWagmiConnected, wagmiAddress] ) const fetchWalletDetails = useCallback( @@ -84,7 +84,7 @@ export const useWallet = () => { const mergeAndProcessWallets = useCallback(async () => { const userAccounts = user?.accounts || [] - const wagmiAddressesList = wagmiAddresses || [] + const wagmiAddressesList = wagmiAddress || [] const processedAccounts = await Promise.all( userAccounts @@ -124,12 +124,12 @@ export const useWallet = () => { dispatch(walletActions.setWallets(mergedWallets)) return mergedWallets - }, [fetchWalletDetails, wagmiAddresses, user?.accounts, dispatch]) + }, [fetchWalletDetails, wagmiAddress, user?.accounts, dispatch]) useQuery({ - queryKey: ['wallets', user?.accounts, wagmiAddresses], + queryKey: ['wallets', user?.accounts, wagmiAddress], queryFn: mergeAndProcessWallets, - enabled: !!user || !!wagmiAddresses, + enabled: !!user || !!wagmiAddress, staleTime: 30 * 1000, // 30 seconds gcTime: 1 * 60 * 1000, // 1 minute }) @@ -187,10 +187,10 @@ export const useWallet = () => { ) const selectExternalWallet = useCallback(() => { - if (wagmiAddresses?.length) { - dispatch(walletActions.setSelectedAddress(wagmiAddresses[0])) + if (wagmiAddress?.length) { + dispatch(walletActions.setSelectedAddress(wagmiAddress[0])) } - }, [wagmiAddresses, dispatch]) + }, [wagmiAddress, dispatch]) return { wallets, From ee4690b2d5ad132477480295bdc1215bf1843215 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 19:26:23 +0530 Subject: [PATCH 05/12] fix: remove bruddle config & use single tailwind config --- src/app/(mobile-ui)/layout.tsx | 4 +- src/app/(setup)/layout.tsx | 2 +- src/app/page.tsx | 6 +- src/assets/bg/peanut-bg.svg | 2 +- src/components/0_Bruddle/Button.tsx | 2 +- src/components/0_Bruddle/Field.tsx | 11 +- src/components/About/index.tsx | 8 +- .../Cashout/Components/Initial.view.tsx | 4 +- .../Claim/Generic/AlreadyClaimed.view.tsx | 8 +- src/components/Claim/Link/Initial.view.tsx | 24 +- .../Claim/Link/Onchain/Confirm.view.tsx | 16 +- .../Claim/Link/Onchain/Success.view.tsx | 4 +- .../Create/Components/RecentRecipients.tsx | 4 +- src/components/Create/Link/Confirm.view.tsx | 22 +- src/components/Create/Link/Success.view.tsx | 2 +- .../Dashboard/components/MobileComponent.tsx | 14 +- .../components/OptionsItemComponent.tsx | 14 +- .../Dashboard/components/SortComponent.tsx | 2 +- src/components/Dashboard/index.tsx | 6 +- .../Global/Banner/GenericBanner.tsx | 2 +- src/components/Global/Banner/index.tsx | 4 +- src/components/Global/ChainSelector/index.tsx | 4 +- .../Global/ConfirmDetails/Index.tsx | 4 +- src/components/Global/Header/index.tsx | 2 +- src/components/Global/ListItemView/index.tsx | 215 ++++++++++ src/components/Global/Modal/index.tsx | 4 +- src/components/Global/Search/index.tsx | 7 +- src/components/Global/Select/index.tsx | 10 +- src/components/Global/ToggleTheme/index.tsx | 4 +- .../Global/TokenAmountInput/index.tsx | 12 +- .../Components/AdvancedButton.tsx | 12 +- .../TokenSelector/Components/TokenDisplay.tsx | 2 +- .../Global/TokenSelector/TokenSelector.tsx | 6 +- .../Global/USBankAccountInput/index.tsx | 4 +- src/components/Global/WalletHeader/index.tsx | 2 +- .../Global/WalletNavigation/index.tsx | 6 +- src/components/Home/WalletCard.tsx | 4 +- .../LandingPage/BuildOnUs/index.tsx | 5 +- src/components/LandingPage/faq.tsx | 8 +- src/components/LandingPage/features.tsx | 39 +- src/components/LandingPage/hero.tsx | 8 +- src/components/LandingPage/story.tsx | 5 +- src/components/Offramp/Confirm.view.tsx | 32 +- src/components/Offramp/PromoCodeChecker.tsx | 8 +- src/components/Offramp/Success.view.tsx | 8 +- .../Components/MobileTableComponent.tsx | 16 +- .../Profile/Components/OptionsComponent.tsx | 2 +- .../Profile/Components/ProfileSection.tsx | 4 +- .../Components/ProfileWalletBalance.tsx | 2 +- .../Profile/Components/TableComponent.tsx | 18 +- src/components/Profile/Components/Tabs.tsx | 2 +- .../Components/ReferenceAndAttachment.tsx | 2 +- .../Views/GeneralViews/AlreadyPaid.view.tsx | 8 +- .../Request/Pay/Views/Initial.view.tsx | 12 +- .../Request/Pay/Views/Success.view.tsx | 2 +- src/components/Setup/Views/Signup.tsx | 2 +- .../Setup/components/SetupWrapper.tsx | 8 +- src/components/Welcome/welcomeSDK.tsx | 52 +-- src/styles/globals.bruddle.css | 4 - src/styles/globals.css | 69 ++-- tailwind.bruddle.js | 375 ------------------ tailwind.config.js | 73 +++- 62 files changed, 530 insertions(+), 693 deletions(-) create mode 100644 src/components/Global/ListItemView/index.tsx delete mode 100644 src/styles/globals.bruddle.css delete mode 100644 tailwind.bruddle.js diff --git a/src/app/(mobile-ui)/layout.tsx b/src/app/(mobile-ui)/layout.tsx index 82dc500f..5d2c7358 100644 --- a/src/app/(mobile-ui)/layout.tsx +++ b/src/app/(mobile-ui)/layout.tsx @@ -5,6 +5,7 @@ import { useToast } from '@/components/0_Bruddle/Toast' import Modal from '@/components/Global/Modal' import WalletNavigation from '@/components/Global/WalletNavigation' import HomeWaitlist from '@/components/Home/HomeWaitlist' +import { ThemeProvider } from '@/config' import { peanutWalletIsInPreview } from '@/constants' import { useAuth } from '@/context/authContext' import { useWallet } from '@/hooks/useWallet' @@ -14,8 +15,7 @@ import classNames from 'classnames' import Link from 'next/link' import { usePathname } from 'next/navigation' import { useEffect, useMemo, useState } from 'react' -import '../../styles/globals.bruddle.css' -import { ThemeProvider } from '@/config' +import '../../styles/globals.css' const publicPathRegex = /^\/(request\/pay|claim)/ diff --git a/src/app/(setup)/layout.tsx b/src/app/(setup)/layout.tsx index 972e1c82..ef56bf54 100644 --- a/src/app/(setup)/layout.tsx +++ b/src/app/(setup)/layout.tsx @@ -5,7 +5,7 @@ import { useAppDispatch } from '@/redux/hooks' import { setupActions } from '@/redux/slices/setup-slice' import { useEffect } from 'react' import { setupSteps } from '../../components/Setup/Setup.consts' -import '../../styles/globals.bruddle.css' +import '../../styles/globals.css' const SetupLayout = ({ children }: { children?: React.ReactNode }) => { const dispatch = useAppDispatch() diff --git a/src/app/page.tsx b/src/app/page.tsx index 00166390..b2c652b4 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,10 @@ 'use client' -import { useState, useEffect } from 'react' import * as assets from '@/assets' import Layout from '@/components/Global/Layout' -import { Hero, FAQs, Features, Mike, Story, BuildOnUs } from '@/components/LandingPage' +import { BuildOnUs, FAQs, Features, Hero, Mike, Story } from '@/components/LandingPage' import { useFooterVisibility } from '@/context/footerVisibility' +import { useEffect, useState } from 'react' export default function LandingPage() { const hero = { @@ -154,7 +154,7 @@ export default function LandingPage() { <BuildOnUs /> <Story marquee={story.marquee} /> <Features sections={[features.sections[1]]} marquee={features.marquee} /> - <div className="bg-pink-1"> + <div className="bg-primary-1"> <Mike lines={mike.lines} /> </div> </Layout> diff --git a/src/assets/bg/peanut-bg.svg b/src/assets/bg/peanut-bg.svg index ce64e2f7..baeaee11 100644 --- a/src/assets/bg/peanut-bg.svg +++ b/src/assets/bg/peanut-bg.svg @@ -1,4 +1,4 @@ -<svg width="1000" height="1000" viewBox="0 0 1000 1000" className="fill-pink-1" xmlns="http://www.w3.org/2000/svg"> +<svg width="1000" height="1000" viewBox="0 0 1000 1000" className="fill-primary-1" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_5152_5029)"> <path d="M199.697 218.926C190.19 222.815 172.973 217.39 166.007 208.333C157.589 197.554 146.85 187.429 132.309 182.837C101.768 173.262 85.8008 193.684 77.9358 221.089C70.6651 246.276 82.2307 267.814 112.773 277.389C127.259 281.966 141.398 281.348 152.779 276.744C162.286 272.855 179.502 278.28 186.469 287.337C194.818 298.155 207.114 307.016 221.654 311.608C252.196 321.183 280.932 308.068 285.916 282.326C290.901 256.584 270.231 227.911 239.689 218.335C225.148 213.743 211.023 214.307 199.697 218.926Z" stroke="black" stroke-width="2" stroke-miterlimit="10"/> <path d="M835.026 475.247C824.76 475.607 810.484 464.56 807.081 453.653C802.911 440.628 796.339 427.413 784.285 418.074C758.941 398.524 736.895 412.161 720.035 435.153C704.5 456.269 707.9 480.478 733.243 500.028C745.252 509.334 758.732 513.646 771.002 513.263C781.268 512.904 795.544 523.95 798.947 534.857C803.038 547.896 811.509 560.464 823.563 569.802C848.906 589.353 880.406 586.988 893.988 564.56C907.57 542.132 898.096 508.079 872.752 488.529C860.698 479.19 847.251 474.832 835.026 475.247Z" stroke="black" stroke-width="2" stroke-miterlimit="10"/> diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx index 74b5c5cb..97bb1591 100644 --- a/src/components/0_Bruddle/Button.tsx +++ b/src/components/0_Bruddle/Button.tsx @@ -24,7 +24,7 @@ const buttonVariants: Record<ButtonVariant, string> = { 'transparent-light': 'btn-transparent-light', 'transparent-dark': 'btn-transparent-dark', green: 'bg-green-1', - yellow: 'bg-yellow-1', + yellow: 'bg-secondary-1', } const buttonSizes: Record<ButtonSize, string> = { diff --git a/src/components/0_Bruddle/Field.tsx b/src/components/0_Bruddle/Field.tsx index 735b7291..2427c58c 100644 --- a/src/components/0_Bruddle/Field.tsx +++ b/src/components/0_Bruddle/Field.tsx @@ -1,10 +1,9 @@ 'use client' -import Icon, { IconNameType } from '../Global/Icon' -import { useFormContext } from 'react-hook-form' import classNames from 'classnames' -import React from 'react' -import { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react' +import React, { DetailedHTMLProps, InputHTMLAttributes, useState } from 'react' +import { useFormContext } from 'react-hook-form' +import Icon, { IconNameType } from '../Global/Icon' import BaseInput from './BaseInput' type FieldProps = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & { @@ -34,7 +33,7 @@ export const Field = React.forwardRef( { 'pr-15': icon || type === 'password', '!border-green-1 pr-15': success, - '!border-pink-1 pr-15': error, + '!border-primary-1 pr-15': error, }, className )} @@ -62,7 +61,7 @@ export const Field = React.forwardRef( {(success || error) && ( <Icon className={`icon-20 pointer-events-none absolute right-5 top-1/2 -translate-y-1/2 ${ - success ? 'fill-green-1' : 'fill-pink-1' + success ? 'fill-green-1' : 'fill-primary-1' }`} name={success ? 'check-circle' : 'info-circle'} /> diff --git a/src/components/About/index.tsx b/src/components/About/index.tsx index d7b1b779..9d4c5bd5 100644 --- a/src/components/About/index.tsx +++ b/src/components/About/index.tsx @@ -1,6 +1,6 @@ import * as assets from '@/assets' -import { MarqueeComp } from '../Global/MarqueeWrapper' import { SmileStars } from '@/assets' +import { MarqueeComp } from '../Global/MarqueeWrapper' const listItems = [ { @@ -20,7 +20,7 @@ const listItems = [ { name: 'Lens', url: 'https://lenster.xyz/u/hugo0.lens' }, { name: 'www', url: 'https://hugomontenegro.com/' }, ], - bg: 'bg-purple-1', + bg: 'bg-primary-1', }, { name: 'Konrad Urban', @@ -37,7 +37,7 @@ const listItems = [ { name: 'Lens', url: 'https://lenster.xyz/u/kkonrad.lens' }, { name: 'www', url: 'https://kkonrad.com/' }, ], - bg: 'bg-yellow-1', + bg: 'bg-secondary-1', }, { name: '______ ______', @@ -51,7 +51,7 @@ const listItems = [ { name: 'dm us', url: 'https://www.peanut.to/jobs' }, { name: 'jobs', url: '/jobs' }, ], - bg: 'bg-pink-1', + bg: 'bg-primary-1', }, ] diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index dbc74fd8..e2e9fc21 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -332,7 +332,7 @@ export const InitialCashoutView = ({ className={twMerge( 'flex w-full items-center justify-between text-nowrap border border-black p-2', matchAccount(account, bankAccountNumber) - ? 'bg-purple-1' + ? 'bg-primary-1' : 'hover:bg-gray-100', xchainAllowed && 'cursor-pointer', !xchainAllowed && 'opacity-60' @@ -344,7 +344,7 @@ export const InitialCashoutView = ({ <div className="flex flex-grow items-center overflow-hidden"> <Icon name={'bank'} - className="mr-2 h-4 flex-shrink-0 fill-gray-1" + className="fill-grey-1 mr-2 h-4 flex-shrink-0" /> <label htmlFor={`bank-${index}`} diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx index d394af74..eb98383c 100644 --- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx +++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx @@ -29,7 +29,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter <div className="flex w-full flex-col items-center justify-center gap-2"> <label className="text-h8 ">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Token</label> </div> @@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {tokenAmountAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {chainAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {senderAddressAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Sender</label> </div> diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index 228d5a85..bdaf32d3 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -469,7 +469,7 @@ export const InitialClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline " + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " > <Icon name={'download'} /> Download attachment @@ -516,9 +516,9 @@ export const InitialClaimLinkView = ({ {recipient && isValidRecipient && recipientType !== 'iban' && recipientType !== 'us' && ( <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-gray-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -533,7 +533,7 @@ export const InitialClaimLinkView = ({ chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} { supportedSquidChainsAndTokens[ selectedRoute.route.params.toChain @@ -559,9 +559,9 @@ export const InitialClaimLinkView = ({ </div> )} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -575,14 +575,14 @@ export const InitialClaimLinkView = ({ </span> </div> {/* TODO: correct points estimation - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'plus-circle'} className="h-4 fill-gray-1" /> + <Icon name={'plus-circle'} className="h-4 fill-grey-1" /> <label className="font-bold">Points</label> </div> - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -597,9 +597,9 @@ export const InitialClaimLinkView = ({ </div> {/* TODO: correct points estimation - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'plus-circle'} className="h-4 fill-gray-1" /> + <Icon name={'plus-circle'} className="h-4 fill-grey-1" /> <label className="font-bold">Points</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx index eafb9ceb..a9922334 100644 --- a/src/components/Claim/Link/Onchain/Confirm.view.tsx +++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx @@ -137,7 +137,7 @@ export const ConfirmClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline " + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " > <Icon name={'download'} /> Download attachment @@ -180,9 +180,9 @@ export const ConfirmClaimLinkView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-gray-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -193,7 +193,7 @@ export const ConfirmClaimLinkView = ({ (chain) => chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} { supportedSquidChainsAndTokens[selectedRoute.route.params.toChain] ?.axelarChainName @@ -215,9 +215,9 @@ export const ConfirmClaimLinkView = ({ </div> )} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -226,9 +226,9 @@ export const ConfirmClaimLinkView = ({ </div> {/* TODO: correct points estimation - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'plus-circle'} className="h-4 fill-gray-1" /> + <Icon name={'plus-circle'} className="h-4 fill-grey-1" /> <label className="font-bold">Points</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx index 83c680b0..6f5138c5 100644 --- a/src/components/Claim/Link/Onchain/Success.view.tsx +++ b/src/components/Claim/Link/Onchain/Success.view.tsx @@ -67,7 +67,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ </Card.Description> </Card.Header> <Card.Content className="flex flex-col gap-2"> - <label className="text-center text-h8 font-normal text-gray-1">Transaction details</label> + <label className="text-grey-1 text-center text-h8 font-normal">Transaction details</label> {type === 'claimxchain' && ( <div className="flex flex-col items-start justify-center gap-1 text-h9 font-normal"> <div className="flex w-full flex-row items-center justify-between gap-1"> @@ -101,7 +101,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="h-4 fill-gray-1" /> + <Icon name="external" className="fill-grey-1 h-4" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Create/Components/RecentRecipients.tsx b/src/components/Create/Components/RecentRecipients.tsx index 86e75a1e..ff53f63c 100644 --- a/src/components/Create/Components/RecentRecipients.tsx +++ b/src/components/Create/Components/RecentRecipients.tsx @@ -15,7 +15,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi {[0, 1, 2].map((idx) => ( <div key={idx} - className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10" + className="hover:bg-grey-1/10 flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors" > <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7"> <div className="flex flex-row items-center justify-start gap-2"> @@ -38,7 +38,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi {recentRecipients.map((recipient) => ( <div key={recipient.address} - className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-n-3/10" + className="hover:bg-grey-1/10 flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors" onClick={() => onClick(recipient.address)} > <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7"> diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index 32813aca..77141edf 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -274,35 +274,35 @@ export const CreateLinkConfirmView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {attachmentOptions.fileUrl && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="h-4 fill-gray-1" /> + <Icon name={'paperclip'} className="fill-grey-1 h-4" /> <label className="font-bold">Attachment</label> </div> <a href={attachmentOptions.fileUrl} download target="_blank"> - <Icon name={'download'} className="h-4 fill-gray-1" /> + <Icon name={'download'} className="fill-grey-1 h-4" /> </a> </div> )} {attachmentOptions.message && ( <div className="flex w-full flex-col items-center justify-center gap-1"> <div - className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1" + className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8" onClick={() => { setShowMessage(!showMessage) }} > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="h-4 fill-gray-1 " /> + <Icon name={'paperclip'} className="fill-grey-1 h-4 " /> <label className=" font-bold">Message</label> </div> <Icon name={'arrow-bottom'} - className={`h-4 cursor-pointer fill-gray-1 transition-transform ${showMessage && ' rotate-180'}`} + className={`fill-grey-1 h-4 cursor-pointer transition-transform ${showMessage && ' rotate-180'}`} /> </div> {showMessage && ( - <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8"> <label className="w-full text-start text-sm font-normal leading-4"> {attachmentOptions.message} </label> @@ -311,9 +311,9 @@ export const CreateLinkConfirmView = ({ </div> )} {transactionCostUSD !== undefined && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -333,9 +333,9 @@ export const CreateLinkConfirmView = ({ </div> )} </div> - {/* <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + {/* <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'plus-circle'} className="h-4 fill-gray-1" /> + <Icon name={'plus-circle'} className="h-4 fill-grey-1" /> <label className="font-bold">Points</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx index a6ce0bc4..23c8bd63 100644 --- a/src/components/Create/Link/Success.view.tsx +++ b/src/components/Create/Link/Success.view.tsx @@ -125,7 +125,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="h-4 fill-gray-1" /> + <Icon name="external" className="fill-grey-1 h-4" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Dashboard/components/MobileComponent.tsx b/src/components/Dashboard/components/MobileComponent.tsx index 86fc462b..76c993ae 100644 --- a/src/components/Dashboard/components/MobileComponent.tsx +++ b/src/components/Dashboard/components/MobileComponent.tsx @@ -1,9 +1,9 @@ -import Modal from '@/components/Global/Modal' import AddressLink from '@/components/Global/AddressLink' +import Modal from '@/components/Global/Modal' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' import { useRouter } from 'next/navigation' import { useState } from 'react' -import * as utils from '@/utils' -import * as interfaces from '@/interfaces' export const MobileItemComponent = ({ linkDetail, @@ -54,7 +54,7 @@ export const MobileItemComponent = ({ {linkDetail.status === 'claimed' ? ( <div className="border border-teal-3 px-2 py-1 text-center text-teal-3">claimed</div> ) : ( - <div className="border border-gray-1 border-n-1 px-2 py-1 text-gray-1">pending</div> + <div className="border-grey-1 text-grey-1 border border-n-1 px-2 py-1">pending</div> )} </div> </div> @@ -67,7 +67,7 @@ export const MobileItemComponent = ({ > <div className="flex w-full flex-col items-center justify-center p-2 "></div> {linkDetail.type === 'Link Sent' && ( - <div className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> + <div className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> <div className="text-h8" onClick={() => { @@ -82,7 +82,7 @@ export const MobileItemComponent = ({ onClick={() => { utils.copyTextToClipboardWithFallback(linkDetail?.link ?? linkDetail.txHash ?? '') }} - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy Link</div> </div> @@ -91,7 +91,7 @@ export const MobileItemComponent = ({ href={linkDetail.attachmentUrl} download target="_blank" - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Download attachment </a> diff --git a/src/components/Dashboard/components/OptionsItemComponent.tsx b/src/components/Dashboard/components/OptionsItemComponent.tsx index ac6edc9b..3d919acf 100644 --- a/src/components/Dashboard/components/OptionsItemComponent.tsx +++ b/src/components/Dashboard/components/OptionsItemComponent.tsx @@ -1,8 +1,8 @@ -import { useRouter } from 'next/navigation' -import * as utils from '@/utils' -import * as interfaces from '@/interfaces' import Icon from '@/components/Global/Icon' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' import { Menu, Transition } from '@headlessui/react' +import { useRouter } from 'next/navigation' export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem }) => { const router = useRouter() @@ -26,7 +26,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { router.push(`/${(item.link ?? '').split('://')[1].split('/')[1]}`) }} - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > <div className="text-h8">Refund</div> </Menu.Item> @@ -38,7 +38,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { utils.copyTextToClipboardWithFallback(item.link ?? '') }} - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy link</div> </Menu.Item> @@ -49,7 +49,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem href={item.attachmentUrl} download target="_blank" - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Download attachment</div> </Menu.Item> @@ -60,7 +60,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { utils.copyTextToClipboardWithFallback(item.txHash ?? '') }} - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy transaction hash</div> </Menu.Item> diff --git a/src/components/Dashboard/components/SortComponent.tsx b/src/components/Dashboard/components/SortComponent.tsx index c4aba551..90bf780a 100644 --- a/src/components/Dashboard/components/SortComponent.tsx +++ b/src/components/Dashboard/components/SortComponent.tsx @@ -32,7 +32,7 @@ export const SortComponent = ({ onClick={() => { setSortingValue(type) }} - className=" flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 dark:hover:bg-white/20" + className=" hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 dark:hover:bg-white/20" key={type} > <div className="text-h8">{type}</div> diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 051258d2..7e57c19b 100644 --- a/src/components/Dashboard/index.tsx +++ b/src/components/Dashboard/index.tsx @@ -197,7 +197,7 @@ export const Dashboard = () => { <td className="td-custom"> {!link.status ? ( - <div className="border border-gray-1 px-2 py-1 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> <Loading /> </div> ) : link.status === 'claimed' ? ( @@ -209,7 +209,7 @@ export const Dashboard = () => { sent </div> ) : ( - <div className="border border-gray-1 px-2 py-1 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> pending </div> )} @@ -237,7 +237,7 @@ export const Dashboard = () => { <CSVLink data={legacyLinks ? legacyLinks.join('\n') : ''} filename="links.csv" - className="cursor-pointer self-end text-purple-1" + className="text-primary-1 cursor-pointer self-end" > Download {legacyLinks.length} legacy links as CSV </CSVLink> diff --git a/src/components/Global/Banner/GenericBanner.tsx b/src/components/Global/Banner/GenericBanner.tsx index b4face4e..859514a2 100644 --- a/src/components/Global/Banner/GenericBanner.tsx +++ b/src/components/Global/Banner/GenericBanner.tsx @@ -6,7 +6,7 @@ interface GenericBannerProps { icon?: string } -export function GenericBanner({ message, backgroundColor = 'bg-purple-1', icon }: GenericBannerProps) { +export function GenericBanner({ message, backgroundColor = 'bg-primary-1', icon }: GenericBannerProps) { return ( <MarqueeWrapper backgroundColor={backgroundColor} direction="left"> <span className="z-10 mx-4 text-sm font-semibold"> diff --git a/src/components/Global/Banner/index.tsx b/src/components/Global/Banner/index.tsx index 4d44bcfe..85ab86df 100644 --- a/src/components/Global/Banner/index.tsx +++ b/src/components/Global/Banner/index.tsx @@ -1,7 +1,7 @@ +import { MAINTAINABLE_ROUTES } from '@/config/routesUnderMaintenance' import { usePathname } from 'next/navigation' import { GenericBanner } from './GenericBanner' import { MaintenanceBanner } from './MaintenanceBanner' -import { MAINTAINABLE_ROUTES } from '@/config/routesUnderMaintenance' export function Banner() { const pathname = usePathname() @@ -13,7 +13,7 @@ export function Banner() { // Show beta message for all request paths (create and pay) unless under maintenance if (pathname.startsWith(MAINTAINABLE_ROUTES.REQUEST)) { - return <GenericBanner message="Beta feature - share your thoughts!" backgroundColor="bg-purple-1" /> + return <GenericBanner message="Beta feature - share your thoughts!" backgroundColor="bg-primary-1" /> } return null diff --git a/src/components/Global/ChainSelector/index.tsx b/src/components/Global/ChainSelector/index.tsx index 6c4c2939..b0a0dffe 100644 --- a/src/components/Global/ChainSelector/index.tsx +++ b/src/components/Global/ChainSelector/index.tsx @@ -140,14 +140,14 @@ const chainItem = ({ <Menu.Item as="button" onClick={setChain} - className="flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 dark:hover:bg-white/20" key={chain.name} > <div className="flex w-max flex-row items-center justify-center gap-2"> <img src={chain.icon.url} alt={chain.name} className="h-6 w-6" /> <div className="text-h8">{chain.name}</div> </div> - {valuePerChain && <div className="text-h9 text-gray-1">${formatTokenAmount(valuePerChain, 2)}</div>} + {valuePerChain && <div className="text-grey-1 text-h9">${formatTokenAmount(valuePerChain, 2)}</div>} </Menu.Item> ) } diff --git a/src/components/Global/ConfirmDetails/Index.tsx b/src/components/Global/ConfirmDetails/Index.tsx index a9c9b6ab..268eba32 100644 --- a/src/components/Global/ConfirmDetails/Index.tsx +++ b/src/components/Global/ConfirmDetails/Index.tsx @@ -35,7 +35,7 @@ const ConfirmDetails = ({ </label> </div> {tokenPrice && ( - <label className="text-h7 font-bold text-gray-1"> + <label className="text-grey-1 text-h7 font-bold"> $ {formatTokenAmount(Number(tokenAmount) * tokenPrice)} </label> )} @@ -46,7 +46,7 @@ const ConfirmDetails = ({ ) : ( <Icon name="chain_placeholder" className="h-6 w-6" fill="#999" /> )} - <label className="text-sm font-bold text-gray-1">{chainName}</label> + <label className="text-grey-1 text-sm font-bold">{chainName}</label> </div> </div> ) diff --git a/src/components/Global/Header/index.tsx b/src/components/Global/Header/index.tsx index 3f04aa1f..d87d71f9 100644 --- a/src/components/Global/Header/index.tsx +++ b/src/components/Global/Header/index.tsx @@ -150,7 +150,7 @@ const MenuLink = ({ {title} </Text> {isBeta && ( - <span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-purple-1"> + <span className="text-primary-1 relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase"> BETA </span> )} diff --git a/src/components/Global/ListItemView/index.tsx b/src/components/Global/ListItemView/index.tsx new file mode 100644 index 00000000..02069dbe --- /dev/null +++ b/src/components/Global/ListItemView/index.tsx @@ -0,0 +1,215 @@ +'use client' +import Modal from '@/components/Global/Modal' +import { TransactionBadge } from '@/components/Global/TransactionBadge' +import * as consts from '@/constants' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' +import Image from 'next/image' +import { useState } from 'react' +import { twMerge } from 'tailwind-merge' + +interface TokenBalance { + chainId: string + address: string + name: string + symbol: string + decimals: number + price: number + amount: number + currency: string + logoURI: string + value: string +} + +export type TransactionType = 'Link Sent' | 'Link Received' | 'Money Requested' | 'Request paid' | 'Cash Out' + +interface ListItemViewProps { + id: string + variant: 'history' | 'balance' + primaryInfo: { + title: string + subtitle?: string + } + secondaryInfo: { + mainText: string + subText?: string + } + metadata: { + tokenLogo?: string + chainLogo?: string + subText?: string + recipientAddress?: string + transactionType?: TransactionType + } + details: interfaces.IDashboardItem | TokenBalance +} + +const getTransactionStatus = (type: TransactionType | undefined, status: string | undefined): string => { + if (!status || !type) return 'pending' + + switch (type) { + case 'Link Sent': + return ['claimed', 'pending', 'unclaimed'].includes(status.toLowerCase()) ? status : 'pending' + case 'Link Received': + return ['claimed', 'pending'].includes(status.toLowerCase()) ? status : 'pending' + case 'Money Requested': + return ['claimed', 'paid', 'canceled'].includes(status.toLowerCase()) ? status : 'pending' + case 'Request paid': + return ['claimed', 'paid'].includes(status.toLowerCase()) ? status : 'pending' + case 'Cash Out': + return ['pending', 'successful', 'error'].includes(status.toLowerCase()) ? status : 'pending' + default: + return status + } +} + +export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata, details }: ListItemViewProps) => { + const [modalVisible, setModalVisible] = useState(false) + const isHistory = variant === 'history' + const transactionDetails = isHistory ? (details as interfaces.IDashboardItem) : null + const balanceDetails = !isHistory ? (details as TokenBalance) : null + + // get the transaction status for history variant + const transactionStatus = + isHistory && metadata.transactionType + ? getTransactionStatus(metadata.transactionType, transactionDetails?.status) + : undefined + + return ( + <div + className={twMerge( + 'flex w-full flex-row items-center justify-between gap-2 border border-b-0 border-n-1 bg-white p-3 text-h8 font-normal dark:bg-black', + isHistory ? 'cursor-pointer' : '' + )} + key={id} + onClick={() => isHistory && setModalVisible(true)} + > + <div className="relative mr-2 min-w-fit"> + {metadata.tokenLogo && ( + <Image src={metadata.tokenLogo} alt="token logo" width={30} height={30} className="rounded-full" /> + )} + + {metadata.chainLogo && ( + <Image + src={metadata.chainLogo} + alt="chain logo" + width={16} + height={16} + className="absolute -right-2 bottom-0 size-4 rounded-full" + /> + )} + </div> + + <div className="flex w-full flex-col gap-2"> + <div className="flex w-full flex-row items-center justify-between"> + <div className="flex w-full max-w-48 items-center gap-2"> + <div className="flex items-center gap-2"> + <label className="font-bold">{primaryInfo.title}</label> + {primaryInfo.subtitle && ( + <label className="text-grey-1 text-xs">{primaryInfo.subtitle}</label> + )} + </div> + {isHistory && transactionStatus && ( + <div className="flex flex-col items-end justify-end gap-2 text-end"> + <TransactionBadge status={transactionStatus} /> + </div> + )} + </div> + <label className="font-bold">{secondaryInfo.mainText}</label> + </div> + {(metadata.recipientAddress || metadata.subText || secondaryInfo.subText) && ( + <div className="flex w-full flex-row items-center justify-between"> + <div className="flex flex-col items-start justify-end gap-2 text-start"> + {metadata.recipientAddress && ( + <label className="text-grey-1 text-xs font-normal">{metadata.recipientAddress}</label> + )} + {secondaryInfo.subText && ( + <label className="text-grey-1 text-xs font-normal">{secondaryInfo.subText}</label> + )} + </div> + {metadata.subText && ( + <div> + <label className="text-xs font-normal">{metadata.subText}</label> + </div> + )} + </div> + )} + </div> + + {/* modal only for history variant */} + {isHistory && transactionDetails && ( + <Modal + visible={modalVisible} + onClose={() => setModalVisible(false)} + title="Options" + classWrap="bg-background" + > + <div className="flex w-full flex-col items-center justify-center px-2"></div> + {transactionDetails?.type !== 'Link Received' && + transactionDetails?.type !== 'Request Link' && + transactionDetails?.status === 'pending' && ( + <div + onClick={() => { + transactionDetails.link && window.open(transactionDetails?.link ?? '', '_blank') + }} + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + > + Refund + </div> + )} + {(transactionDetails?.type === 'Link Received' || + transactionDetails?.type === 'Link Sent' || + transactionDetails?.type === 'Request Link') && ( + <div + onClick={() => { + utils.copyTextToClipboardWithFallback(transactionDetails?.link ?? '') + }} + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + > + Copy link + </div> + )} + {transactionDetails?.txHash && ( + <div + onClick={() => { + const chainId = + consts.supportedPeanutChains.find( + (chain) => chain.name === transactionDetails?.chain + )?.chainId ?? '' + + const explorerUrl = utils.getExplorerUrl(chainId) + window.open(`${explorerUrl}/tx/${transactionDetails?.txHash ?? ''}`, '_blank') + }} + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + > + Show in explorer + </div> + )} + {transactionDetails?.attachmentUrl && ( + <a + href={transactionDetails.attachmentUrl} + download + target="_blank" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + > + Download attachment + </a> + )} + {transactionDetails?.type === 'Offramp Claim' && transactionDetails.status !== 'claimed' && ( + <a + href={(() => { + const url = new URL(transactionDetails?.link ?? '') + url.pathname = '/cashout/status' + return url.toString() + })()} + target="_blank" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + > + Check Status + </a> + )} + </Modal> + )} + </div> + ) +} diff --git a/src/components/Global/Modal/index.tsx b/src/components/Global/Modal/index.tsx index 0f3b8207..6fc30584 100644 --- a/src/components/Global/Modal/index.tsx +++ b/src/components/Global/Modal/index.tsx @@ -80,7 +80,7 @@ const Modal = ({ {showPrev && ( <button className={twMerge( - ` absolute left-5 top-4.5 text-0 outline-none hover:fill-purple-1 dark:fill-white dark:hover:fill-purple-1 ` + ` hover:fill-primary-1 dark:hover:fill-primary-1 absolute left-5 top-4.5 text-0 outline-none dark:fill-white ` )} onClick={onPrev} > @@ -102,7 +102,7 @@ const Modal = ({ <button className={twMerge( - `absolute right-4 top-4 text-0 outline-none hover:fill-purple-1 dark:fill-white dark:hover:fill-purple-1 ${ + `hover:fill-primary-1 dark:hover:fill-primary-1 absolute right-4 top-4 text-0 outline-none dark:fill-white ${ video ? 'absolute right-5 top-5 h-10 w-10 fill-white' : '' } ${classButtonClose}` )} diff --git a/src/components/Global/Search/index.tsx b/src/components/Global/Search/index.tsx index 5048f0e9..e9a84a99 100644 --- a/src/components/Global/Search/index.tsx +++ b/src/components/Global/Search/index.tsx @@ -1,5 +1,4 @@ import Icon from '@/components/Global/Icon' -import { useEffect, useRef, useState } from 'react' type SearchProps = { className?: string @@ -16,8 +15,8 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi return ( <div className={`relative ${className} ${large ? 'shadow-primary-4 w-full' : ''}`}> <input - className={`w-full rounded-none bg-transparent text-base outline-none - transition-colors placeholder:text-base focus:border-purple-1 dark:border-white dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1 ${ + className={`focus:border-primary-1 dark:focus:border-primary-1 w-full rounded-none bg-transparent + text-base outline-none transition-colors placeholder:text-base dark:border-white dark:text-white dark:placeholder:text-white/75 ${ large ? 'h-16 bg-white pl-6 pr-18 text-base font-medium dark:bg-n-1' : medium @@ -32,7 +31,7 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi <button className={`absolute text-0 ${ large - ? 'right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 bg-purple-1 transition-colors hover:bg-purple-1/90' + ? 'bg-primary-1 hover:bg-primary-1/90 right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 transition-colors' : 'bottom-0 left-0 top-0 w-8' }`} > diff --git a/src/components/Global/Select/index.tsx b/src/components/Global/Select/index.tsx index 28bc9292..2332d811 100644 --- a/src/components/Global/Select/index.tsx +++ b/src/components/Global/Select/index.tsx @@ -1,8 +1,8 @@ +import Icon from '@/components/Global/Icon' import { Listbox, Transition } from '@headlessui/react' -import { Fragment, useRef } from 'react' +import { useRef } from 'react' import { createPortal } from 'react-dom' import { twMerge } from 'tailwind-merge' -import Icon from '@/components/Global/Icon' type SelectProps = { label?: string @@ -48,7 +48,7 @@ const Select = ({ className={twMerge( `border-rounded flex h-16 w-full items-center bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors tap-highlight-color dark:bg-n-1 dark:text-white ${ small ? 'h-6 px-4 text-xs' : '' - } ${open ? 'border-purple-1 dark:border-purple-1' : ''} ${classButton}` + } ${open ? 'border-primary-1 dark:border-primary-1' : ''} ${classButton}` )} > <span className="mr-auto truncate text-black"> @@ -73,7 +73,7 @@ const Select = ({ <Transition leave="transition duration-200" leaveFrom="opacity-100" leaveTo="opacity-0"> <Listbox.Options className={twMerge( - `absolute left-0 right-0 mt-1 w-full rounded-md border-2 border-n-3 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${ + `border-grey-1 absolute left-0 right-0 mt-1 w-full rounded-md border-2 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${ small ? 'p-0' : '' } ${up ? 'bottom-full top-auto mb-1 mt-0' : ''} z-50 ${classOptions}` )} @@ -87,7 +87,7 @@ const Select = ({ {items.map((item: any) => ( <Listbox.Option className={twMerge( - `flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold text-n-3 transition-colors tap-highlight-color ui-selected:!bg-n-3/20 ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${ + `text-grey-1 ui-selected:!bg-grey-1/20 flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold transition-colors tap-highlight-color ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${ small ? '!py-1 !pl-4 text-xs' : '' } ${classOption}` )} diff --git a/src/components/Global/ToggleTheme/index.tsx b/src/components/Global/ToggleTheme/index.tsx index f47e0423..b3bc3698 100644 --- a/src/components/Global/ToggleTheme/index.tsx +++ b/src/components/Global/ToggleTheme/index.tsx @@ -1,6 +1,6 @@ 'use client' -import { useColorMode } from '@chakra-ui/color-mode' import Icon, { IconNameType } from '@/components/Global/Icon' +import { useColorMode } from '@chakra-ui/color-mode' type ToggleThemeProps = {} @@ -26,7 +26,7 @@ const ToggleTheme = ({}: ToggleThemeProps) => { return ( <div - className={`relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:bg-purple-1 before:transition-all dark:border-white ${ + className={`before:bg-primary-1 relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:transition-all dark:border-white ${ colorMode === 'dark' ? 'before:translate-x-full' : '' }`} > diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index d8d359af..56b25c74 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -1,7 +1,7 @@ -import { useContext, useEffect, useMemo, useRef } from 'react' -import Icon from '../Icon' import * as context from '@/context' import * as utils from '@/utils' +import { useContext, useEffect, useMemo, useRef } from 'react' +import Icon from '../Icon' interface TokenAmountInputProps { className?: string @@ -69,7 +69,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV <label className="sr-only text-h1">$</label> ))} <input - className={`h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1`} + className={`focus:border-primary-1 dark:focus:border-primary-1 h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75`} placeholder={'0.00'} onChange={(e) => { const value = utils.formatAmountWithoutComma(e.target.value) @@ -96,7 +96,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV {maxValue && maxValue !== tokenValue && ( <button onClick={handleMaxClick} - className="absolute right-1 ml-1 px-2 py-1 text-h7 uppercase text-gray-1 transition-colors hover:text-black" + className="text-grey-1 absolute right-1 ml-1 px-2 py-1 text-h7 uppercase transition-colors hover:text-black" > Max </button> @@ -104,7 +104,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV </div> {selectedTokenData?.price && !utils.estimateStableCoin(selectedTokenData.price) && ( <div className="flex w-full flex-row items-center justify-center gap-1"> - <label className="text-base text-gray-1"> + <label className="text-grey-1 text-base"> {!tokenValue ? '0' : inputDenomination === 'USD' @@ -118,7 +118,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV setInputDenomination(inputDenomination === 'USD' ? 'TOKEN' : 'USD') }} > - <Icon name={'switch'} className="rotate-90 cursor-pointer fill-gray-1" /> + <Icon name={'switch'} className="fill-grey-1 rotate-90 cursor-pointer" /> </button> </div> )} diff --git a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx index 76b09154..03429542 100644 --- a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx +++ b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx @@ -1,8 +1,8 @@ -import { useContext, useEffect, useState } from 'react' -import Icon from '../../Icon' +import * as context from '@/context' import * as utils from '@/utils' import { fetchTokenSymbol } from '@/utils' -import * as context from '@/context' +import { useContext, useEffect, useState } from 'react' +import Icon from '../../Icon' interface IAdvancedTokenSelectorButtonProps { onClick: () => void @@ -59,7 +59,7 @@ export const AdvancedTokenSelectorButton = ({ role="button" tabIndex={0} aria-label="Open token selector" - className={`flex w-full ${!isStatic && ' cursor-pointer '} h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 hover:bg-n-3/10 dark:border-white ${classNameButton}`} + className={`flex w-full ${!isStatic && ' cursor-pointer '} hover:bg-grey-1/10 h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 dark:border-white ${classNameButton}`} onClick={() => { !isStatic && onClick() }} @@ -97,12 +97,12 @@ export const AdvancedTokenSelectorButton = ({ {type === 'send' && (tokenBalance ? ( - <p className="text-xs text-gray-1"> + <p className="text-grey-1 text-xs"> Balance: {utils.formatTokenAmount(tokenBalance ?? 0, 4)} </p> ) : null)} {tokenAmount && tokenPrice && ( - <p className="text-xs text-gray-1"> + <p className="text-grey-1 text-xs"> ${utils.formatTokenAmount(Number(tokenAmount) * tokenPrice, 4)} </p> )} diff --git a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx index 4864e1e7..be8b6088 100644 --- a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx +++ b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx @@ -26,7 +26,7 @@ export const tokenDisplay = ( <div className="text-h8">{token.name}</div> </div> {type === 'send' && ( - <p className="text-xs text-gray-1 "> + <p className="text-grey-1 text-xs "> {utils.formatTokenAmount( balances.find( (balance) => diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx index cbb4f0fd..a3a169e8 100644 --- a/src/components/Global/TokenSelector/TokenSelector.tsx +++ b/src/components/Global/TokenSelector/TokenSelector.tsx @@ -71,10 +71,10 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken: {balances.slice(visibleRange.start, visibleRange.end).map((balance) => ( <div key={`${balance.address}_${balance.chainId}`} - className={`flex h-14 cursor-pointer items-center transition-colors hover:bg-n-3/10 ${ + className={`hover:bg-grey-1/10 flex h-14 cursor-pointer items-center transition-colors ${ areEvmAddressesEqual(balance.address, selectedTokenAddress) && balance.chainId === selectedChainID && - 'bg-n-3/10' + 'bg-grey-1/10' }`} onClick={() => setToken(balance)} > @@ -148,7 +148,7 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken: <div className="w-32 py-2"> <div className="flex flex-row items-center justify-end gap-2 pr-1"> - <div className="text-h8 text-gray-1"> + <div className="text-grey-1 text-h8"> {supportedPeanutChains.find((chain) => chain.chainId === balance.chainId)?.name ?? ''} </div> diff --git a/src/components/Global/USBankAccountInput/index.tsx b/src/components/Global/USBankAccountInput/index.tsx index ef20717e..9645a1ce 100644 --- a/src/components/Global/USBankAccountInput/index.tsx +++ b/src/components/Global/USBankAccountInput/index.tsx @@ -1,6 +1,6 @@ +import { sanitizeBankAccount } from '@/utils/format.utils' import { useState } from 'react' import { UseFormRegister, UseFormSetValue } from 'react-hook-form' -import { sanitizeBankAccount } from '@/utils/format.utils' interface IUSBankAccountInputProps { register: UseFormRegister<any> @@ -97,7 +97,7 @@ export const USBankAccountInput = ({ register, setValue, errors, defaultValues } </div> <button type="button" - className="text-h9 text-gray-1 underline" + className="text-grey-1 text-h9 underline" onClick={() => { setValue('routingNumber', '') setValue('accountNumber', '') diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx index ce8cb38f..67a66f34 100644 --- a/src/components/Global/WalletHeader/index.tsx +++ b/src/components/Global/WalletHeader/index.tsx @@ -134,7 +134,7 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => className={twMerge( 'flex w-full cursor-pointer items-center gap-3 px-4 py-3', // highlight active wallet with different background - isActive ? 'bg-purple-1 hover:bg-purple-1/90' : 'bg-purple-4 bg-opacity-25 hover:bg-opacity-20' + isActive ? 'bg-primary-1 hover:bg-primary-1/90' : 'bg-purple-4 bg-opacity-25 hover:bg-opacity-20' )} > {/* wallet icon */} diff --git a/src/components/Global/WalletNavigation/index.tsx b/src/components/Global/WalletNavigation/index.tsx index dced7321..56de4f73 100644 --- a/src/components/Global/WalletNavigation/index.tsx +++ b/src/components/Global/WalletNavigation/index.tsx @@ -49,14 +49,14 @@ const NavSection: React.FC<NavSectionProps> = ({ title, tabs, pathName, isLastSe href={href} key={name} className={classNames('flex items-center gap-3 hover:cursor-pointer hover:text-white/80', { - 'text-purple-1': pathName === href, + 'text-primary-1': pathName === href, })} > <NavIcons name={icon} className="block h-4 w-4" /> <span className="block w-fit pt-0.5 text-center text-base font-semibold">{name}</span> </Link> ))} - {!isLastSection && <div className="w-full border-b border-gray-1" />} + {!isLastSection && <div className="border-grey-1 w-full border-b" />} </> ) @@ -73,7 +73,7 @@ const MobileNav: React.FC<MobileNavProps> = ({ tabs, pathName }) => ( key={name} className={classNames( 'flex flex-col items-center justify-center object-contain py-2 hover:cursor-pointer', - { 'text-purple-1': pathName === href } + { 'text-primary-1': pathName === href } )} > <NavIcons name={icon} size={24} className="h-7 w-7" /> diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx index b5e2b6d3..7c7ea7d1 100644 --- a/src/components/Home/WalletCard.tsx +++ b/src/components/Home/WalletCard.tsx @@ -12,7 +12,7 @@ import Image from 'next/image' import { useMemo } from 'react' import CopyToClipboard from '../Global/CopyToClipboard' -const colorArray = ['bg-blue-1', 'bg-yellow-1', 'bg-pink-1'] +const colorArray = ['bg-secondary-3', 'bg-secondary-1', 'bg-primary-1'] type BaseWalletCardProps = { onClick?: () => void @@ -106,7 +106,7 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { /> </div> {wallet.walletProviderType !== WalletProviderType.PEANUT && ( - <div className="rounded-md bg-white/75 px-2 py-1 text-xs font-bold text-gray-1"> + <div className="text-grey-1 rounded-md bg-white/75 px-2 py-1 text-xs font-bold"> External </div> )} diff --git a/src/components/LandingPage/BuildOnUs/index.tsx b/src/components/LandingPage/BuildOnUs/index.tsx index 92a8f878..ab46271c 100644 --- a/src/components/LandingPage/BuildOnUs/index.tsx +++ b/src/components/LandingPage/BuildOnUs/index.tsx @@ -1,12 +1,11 @@ 'use client' -import Image from 'next/image' -import { motion } from 'framer-motion' import { BUILD_ON_US_NOW } from '@/assets' +import { motion } from 'framer-motion' export default function BuildOnUs() { return ( - <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-pink-1"> + <div className="bg-primary-1 relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden"> <motion.div className="flex flex-col items-center gap-8" initial={{ opacity: 0, translateY: 20 }} diff --git a/src/components/LandingPage/faq.tsx b/src/components/LandingPage/faq.tsx index 4a745b1f..cefea847 100644 --- a/src/components/LandingPage/faq.tsx +++ b/src/components/LandingPage/faq.tsx @@ -1,9 +1,9 @@ 'use client' -import { useState } from 'react' -import { Box } from '@chakra-ui/react' +import { Eyes, PeanutsBG } from '@/assets' import { MarqueeComp } from '@/components/Global/MarqueeWrapper' -import { PeanutsBG, Eyes } from '@/assets' +import { Box } from '@chakra-ui/react' +import { useState } from 'react' import { FAQsPanel, FAQsProps } from '../Global/FAQs' type LocalFAQsProps = FAQsProps & { @@ -36,7 +36,7 @@ export function FAQs({ heading, questions, marquee = { visible: false } }: Local message={marquee.message} imageSrc={Eyes.src} imageAnimationClass="animation-rock" - backgroundColor="bg-yellow-1" + backgroundColor="bg-secondary-1" /> )} </Box> diff --git a/src/components/LandingPage/features.tsx b/src/components/LandingPage/features.tsx index 8308e352..f847e1e7 100644 --- a/src/components/LandingPage/features.tsx +++ b/src/components/LandingPage/features.tsx @@ -1,38 +1,13 @@ 'use client' +import { HandThumbsUp } from '@/assets' +import * as chain_logos from '@/assets/chains' +import { Box, Flex, Stack, useMediaQuery } from '@chakra-ui/react' +import { motion } from 'framer-motion' import { useRef } from 'react' -import { useMediaQuery } from '@chakra-ui/react' -import { Stack, Box, Flex, SimpleGrid, GridItem } from '@chakra-ui/react' -import { motion, useAnimation, useInView } from 'framer-motion' -import { FeaturesImages, FeaturesBadgeImage } from './imageAssets' -import { MarqueeComp } from '../Global/MarqueeWrapper' +import { MarqueeComp, MarqueeWrapper } from '../Global/MarqueeWrapper' import { Testimonials } from '../Global/Testimonials' -import { MarqueeWrapper } from '../Global/MarqueeWrapper' -import { - WALLETCONNECT_LOGO, - CLAVE_LOGO, - ECO_LOGO, - MANTLE_ICON, - BLOCKSCOUT_LOGO, - HYPERSPHERE_LOGO_SQUARE, - ZEEPRIME_LOGO_SQUARE, - LONGHASH_LOGO_SQUARE, - NAZARE_LOGO_SQUARE, - DEREK_PERSON, - SHARUK_PERSON, - KOFIME_PERSON, - SBF_PERSON, - SmileStars, - PEANUTMAN_HAPPY, - HandThumbsUp, - HR, - Star, - Eyes, - GoodIdeaSign, - SmileSide, - PeanutGuy, -} from '@/assets' -import * as chain_logos from '@/assets/chains' +import { FeaturesBadgeImage, FeaturesImages } from './imageAssets' type FeaturesProps = { sections: Array<{ @@ -285,7 +260,7 @@ export function Features({ sections, marquee = { visible: false } }: FeaturesPro </Stack> {marquee.visible && ( - <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-yellow-1" /> + <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-secondary-1" /> )} </Flex> ) diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx index 69251535..7db99c27 100644 --- a/src/components/LandingPage/hero.tsx +++ b/src/components/LandingPage/hero.tsx @@ -34,7 +34,7 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible }, []) return ( - <div className="relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden bg-pink-1 md:min-h-[97vh]"> + <div className="bg-primary-1 relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden md:min-h-[97vh]"> <CloudImages screenWidth={screenWidth} /> <div className="lg:mb-16- lg:mt-24- relative mb-8 mt-12 flex grow flex-col justify-between space-y-6 md:mb-10 md:mt-12"> @@ -58,7 +58,11 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible <div className="relative z-1"> {marquee && ( - <MarqueeComp message={marquee.message} imageSrc={HandThumbsUp.src} backgroundColor="bg-yellow-1" /> + <MarqueeComp + message={marquee.message} + imageSrc={HandThumbsUp.src} + backgroundColor="bg-secondary-1" + /> )} </div> diff --git a/src/components/LandingPage/story.tsx b/src/components/LandingPage/story.tsx index 0323cc8f..d3477416 100644 --- a/src/components/LandingPage/story.tsx +++ b/src/components/LandingPage/story.tsx @@ -1,6 +1,5 @@ -import { Stack, Box } from '@chakra-ui/react' import { Eyes, PeanutGuy } from '@/assets' -import { StoryImages } from './imageAssets' +import { Box, Stack } from '@chakra-ui/react' import { MarqueeComp } from '../Global/MarqueeWrapper' import { NutsDivider } from './nutsDivider' @@ -41,7 +40,7 @@ export function Story({ stories, foot, marquee = { visible: false } }: StoryProp message={marquee.message} imageSrc={Eyes.src} imageAnimationClass="animation-rock" - backgroundColor="bg-yellow-1" + backgroundColor="bg-secondary-1" /> )} </Box> diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx index cf62d79c..9fdadc6c 100644 --- a/src/components/Offramp/Confirm.view.tsx +++ b/src/components/Offramp/Confirm.view.tsx @@ -704,9 +704,9 @@ export const OfframpConfirmView = ({ <div className="my-2 flex w-full flex-col items-center justify-center gap-2"> <label className="self-start text-h8 font-light">Please confirm all details:</label> <div className="flex w-full flex-col items-center justify-center gap-2"> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'profile'} className="h-4 fill-gray-1" /> + <Icon name={'profile'} className="fill-grey-1 h-4" /> <label className="font-bold">Name</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -714,9 +714,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'email'} className="h-4 fill-gray-1" /> + <Icon name={'email'} className="fill-grey-1 h-4" /> <label className="font-bold">Email</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -724,9 +724,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'bank'} className="h-4 fill-gray-1" /> + <Icon name={'bank'} className="fill-grey-1 h-4" /> <label className="font-bold">Bank account</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -735,9 +735,9 @@ export const OfframpConfirmView = ({ </div> {offrampType == OfframpType.CLAIM && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-gray-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -746,8 +746,8 @@ export const OfframpConfirmView = ({ (chain) => chain.chainId === claimLinkData?.chainId )?.name }{' '} - <Icon name={'arrow-next'} className="h-4 fill-gray-1" /> Offramp{' '} - <Icon name={'arrow-next'} className="h-4 fill-gray-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" /> Offramp{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} {recipientType?.toUpperCase()}{' '} <MoreInfo text={`Wait, crypto can be converted to real money??? How cool!`} @@ -756,9 +756,9 @@ export const OfframpConfirmView = ({ </div> )} - <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -811,9 +811,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-gray-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">Total</label> </div> <div className="flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -841,9 +841,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-gray-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx index dc24c627..88d09110 100644 --- a/src/components/Offramp/PromoCodeChecker.tsx +++ b/src/components/Offramp/PromoCodeChecker.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react' import Icon from '@/components/Global/Icon' +import { useEffect, useState } from 'react' import { VALID_PROMO_CODES } from './Offramp.consts' interface PromoState { @@ -82,15 +82,15 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe {!promoCheckerState.isApplied && ( <div onClick={handleExpandToggle} - className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1 transition-colors duration-200 hover:bg-gray-50" + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 transition-colors duration-200 hover:bg-gray-50" > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name="ticket" className="h-4 fill-gray-1" /> + <Icon name="ticket" className="fill-grey-1 h-4" /> <label className="font-bold">Apply Promo Code</label> </div> <Icon name={promoCheckerState.isExpanded ? 'chevron-up' : 'arrow-bottom'} - className={`h-4 fill-gray-1 transition-all duration-300`} + className={`fill-grey-1 h-4 transition-all duration-300`} /> </div> )} diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index ac57c073..b83fc590 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -57,9 +57,9 @@ export const OfframpSuccessView = ({ Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please keep in mind that it may take up to 2 days for the funds to arrive. </label> - <div className="flex w-full flex-row items-center px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -79,9 +79,9 @@ export const OfframpSuccessView = ({ </div> {/* You will receive section */} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-gray-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Profile/Components/MobileTableComponent.tsx b/src/components/Profile/Components/MobileTableComponent.tsx index 78792fa7..556c3ea6 100644 --- a/src/components/Profile/Components/MobileTableComponent.tsx +++ b/src/components/Profile/Components/MobileTableComponent.tsx @@ -78,11 +78,11 @@ export const MobileTableComponent = ({ ) : dashboardItem.status === 'paid' ? ( <div className="border border-teal-3 p-0.5 text-center text-teal-3">paid</div> ) : dashboardItem.status ? ( - <div className="border border-gray-1 p-0.5 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border p-0.5 text-center"> {dashboardItem.status.toLowerCase().replaceAll('_', ' ')} </div> ) : ( - <div className="border border-gray-1 p-0.5 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border p-0.5 text-center"> pending </div> ) @@ -123,7 +123,7 @@ export const MobileTableComponent = ({ onClick={() => { dashboardItem.link && window.open(dashboardItem?.link ?? '', '_blank') }} - className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > Refund </div> @@ -135,7 +135,7 @@ export const MobileTableComponent = ({ onClick={() => { utils.copyTextToClipboardWithFallback(dashboardItem?.link ?? '') }} - className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Copy link </div> @@ -151,7 +151,7 @@ export const MobileTableComponent = ({ const explorerUrl = utils.getExplorerUrl(chainId) window.open(`${explorerUrl}/tx/${dashboardItem?.txHash ?? ''}`, '_blank') }} - className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > Show in explorer </div> @@ -161,7 +161,7 @@ export const MobileTableComponent = ({ href={dashboardItem.attachmentUrl} download target="_blank" - className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Download attachment </a> @@ -174,7 +174,7 @@ export const MobileTableComponent = ({ return url.toString() })()} target="_blank" - className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Check Status </a> @@ -183,7 +183,7 @@ export const MobileTableComponent = ({ ) : ( type === 'contacts' && ( <Link href={`/send?recipientAddress=${encodeURIComponent(address as string)}`}> - <div className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> + <div className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> Send to this address </div> </Link> diff --git a/src/components/Profile/Components/OptionsComponent.tsx b/src/components/Profile/Components/OptionsComponent.tsx index c8951d8e..31551227 100644 --- a/src/components/Profile/Components/OptionsComponent.tsx +++ b/src/components/Profile/Components/OptionsComponent.tsx @@ -31,7 +31,7 @@ export const OptionsComponent = ({ <Menu.Item as={'button'} onClick={actionItem.action} - className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-n-3/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" key={index} > <div className="text-h8">{actionItem.name}</div> diff --git a/src/components/Profile/Components/ProfileSection.tsx b/src/components/Profile/Components/ProfileSection.tsx index dee05ebd..6e78bdbc 100644 --- a/src/components/Profile/Components/ProfileSection.tsx +++ b/src/components/Profile/Components/ProfileSection.tsx @@ -26,11 +26,11 @@ const ProfileSection = ({}: ProfileSectionProps) => { className="size-11 rounded-full border border-black object-contain" /> <div className="text-md space-y-1 font-semibold"> - <div className="text-gray-1">peanut.me/</div> + <div className="text-grey-1">peanut.me/</div> <div className="flex items-center gap-3"> <div className="">{user?.user.username}</div> {user?.user.kycStatus !== null && ( - <Badge color="purple" className="bg-white text-purple-1"> + <Badge color="purple" className="text-primary-1 bg-white"> No KYC </Badge> )} diff --git a/src/components/Profile/Components/ProfileWalletBalance.tsx b/src/components/Profile/Components/ProfileWalletBalance.tsx index 3a25a0f9..9bf805b2 100644 --- a/src/components/Profile/Components/ProfileWalletBalance.tsx +++ b/src/components/Profile/Components/ProfileWalletBalance.tsx @@ -49,7 +49,7 @@ const ProfileWalletBalance = () => { $ {printableUsdc(BigInt(Math.floor(Number(getMaxBalanceToken?.value || 0) * 10 ** 6)))} </div> {getMaxBalanceToken?.symbol && getMaxBalanceToken?.name && ( - <div className="text-xs text-gray-1"> + <div className="text-grey-1 text-xs"> {getMaxBalanceToken?.symbol} on {getMaxBalanceToken?.name} </div> )} diff --git a/src/components/Profile/Components/TableComponent.tsx b/src/components/Profile/Components/TableComponent.tsx index 6adf131b..bb1492b0 100644 --- a/src/components/Profile/Components/TableComponent.tsx +++ b/src/components/Profile/Components/TableComponent.tsx @@ -1,13 +1,13 @@ 'use client' -import * as utils from '@/utils' -import * as interfaces from '@/interfaces' -import Sorting from '@/components/Global/Sorting' -import Loading from '@/components/Global/Loading' import AddressLink from '@/components/Global/AddressLink' -import { OptionsComponent } from './OptionsComponent' +import Loading from '@/components/Global/Loading' +import Sorting from '@/components/Global/Sorting' import * as consts from '@/constants' -import { useCallback } from 'react' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' import { useRouter } from 'next/navigation' +import { useCallback } from 'react' +import { OptionsComponent } from './OptionsComponent' /** * TableComponent renders a responsive table for displaying profile-related data based on the selected tab (e.g., history, contacts, or accounts). @@ -119,7 +119,7 @@ export const TableComponent = ({ <td className="td-custom"> {!data.dashboardItem.status ? ( - <div className="border border-gray-1 px-2 py-1 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> <Loading /> </div> ) : data.dashboardItem.status === 'claimed' ? ( @@ -135,11 +135,11 @@ export const TableComponent = ({ paid </div> ) : data.dashboardItem.status ? ( - <div className="border border-gray-1 px-2 py-1 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> {data.dashboardItem.status.toLowerCase().replaceAll('_', ' ')} </div> ) : ( - <div className="border border-gray-1 px-2 py-1 text-center text-gray-1"> + <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> pending </div> )} diff --git a/src/components/Profile/Components/Tabs.tsx b/src/components/Profile/Components/Tabs.tsx index afe93880..0992164c 100644 --- a/src/components/Profile/Components/Tabs.tsx +++ b/src/components/Profile/Components/Tabs.tsx @@ -22,7 +22,7 @@ export const Tabs = ({ className, classButton, items, value, setValue }: TabsPro <div className={` flex flex-wrap ${className}`}> {items.map((item, index) => ( <button - className={`text-md whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color hover:text-n-3 ${ + className={`text-md hover:text-grey-1 whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color ${ value === item.value ? 'bg-n-1 !text-white dark:bg-white/[0.08]' : '' } ${classButton}`} onClick={() => handleClick(item.value, item.onClick)} diff --git a/src/components/Request/Components/ReferenceAndAttachment.tsx b/src/components/Request/Components/ReferenceAndAttachment.tsx index 5696fb0c..deb30c33 100644 --- a/src/components/Request/Components/ReferenceAndAttachment.tsx +++ b/src/components/Request/Components/ReferenceAndAttachment.tsx @@ -21,7 +21,7 @@ export const ReferenceAndAttachment = ({ href={attachmentUrl} download target="_blank" - className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-gray-1 underline " + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " > <Icon name={'download'} /> Download attachment diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx index 53c1ab27..554871bf 100644 --- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx @@ -32,7 +32,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con <div className="flex w-full flex-col items-center justify-center gap-2"> <label className="text-h8 ">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Token</label> </div> @@ -42,7 +42,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {tokenAmountAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -52,7 +52,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {chainAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -70,7 +70,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {recipientAddressAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Requester</label> </div> diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index be23e9c5..38d734d5 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -415,9 +415,9 @@ export const InitialView = ({ )} {!isFeeEstimationError && ( <> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-gray-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -443,9 +443,9 @@ export const InitialView = ({ </div> {null !== calculatedSlippage && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-gray-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'money-out'} className="h-4 fill-gray-1" /> + <Icon name={'money-out'} className="fill-grey-1 h-4" /> <label className="font-bold">Max slippage</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -458,9 +458,9 @@ export const InitialView = ({ )} {/* TODO: correct points estimation - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-gray-1"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'plus-circle'} className="h-4 fill-gray-1" /> + <Icon name={'plus-circle'} className="h-4 fill-grey-1" /> <label className="font-bold">Points</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx index 2c2e5277..d28bf351 100644 --- a/src/components/Request/Pay/Views/Success.view.tsx +++ b/src/components/Request/Pay/Views/Success.view.tsx @@ -108,7 +108,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } attachmentUrl={requestLinkData?.attachmentUrl} /> <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal"> - <label className="text-center text-h8 font-normal text-gray-1">Transaction details</label> + <label className="text-grey-1 text-center text-h8 font-normal">Transaction details</label> <div className="flex w-full flex-row items-center justify-between gap-1"> <label className="">Source chain:</label> <Link className="cursor-pointer underline" href={sourceUrlWithTx}> diff --git a/src/components/Setup/Views/Signup.tsx b/src/components/Setup/Views/Signup.tsx index 83d94a3e..32d5ca9a 100644 --- a/src/components/Setup/Views/Signup.tsx +++ b/src/components/Setup/Views/Signup.tsx @@ -102,7 +102,7 @@ const SignupStep = () => { {error && <p className="text-sm font-bold text-error">{error}</p>} </div> <div> - <p className="border-t border-gray-1 pt-2 text-center text-xs text-gray-1"> + <p className="border-grey-1 text-grey-1 border-t pt-2 text-center text-xs"> <span>By creating account you agree with </span> <Link rel="noopener noreferrer" diff --git a/src/components/Setup/components/SetupWrapper.tsx b/src/components/Setup/components/SetupWrapper.tsx index 70af56d1..0744adab 100644 --- a/src/components/Setup/components/SetupWrapper.tsx +++ b/src/components/Setup/components/SetupWrapper.tsx @@ -67,7 +67,7 @@ const Navigation = memo( )} {showSkipButton && ( <Button onClick={onSkip} variant="transparent-dark" className="h-auto w-fit p-0"> - <span className="text-gray-1">Skip</span> + <span className="text-grey-1">Skip</span> </Button> )} </div> @@ -99,7 +99,7 @@ const ImageSection = ({ <div className={twMerge( containerClass, - 'bg-blue-1/100 relative flex w-full flex-row items-center justify-center overflow-hidden px-4 md:h-[100dvh] md:w-7/12 md:px-6' + 'bg-secondary-3/100 relative flex w-full flex-row items-center justify-center overflow-hidden px-4 md:h-[100dvh] md:w-7/12 md:px-6' )} > {/* render animated star decorations */} @@ -134,8 +134,8 @@ const ImageSection = ({ <div className={classNames( containerClass, - 'bg-blue-1/100 flex w-full flex-row items-center justify-center md:h-[100dvh] md:w-7/12', - screenId === 'success' && 'bg-yellow-1/15' + 'bg-secondary-3/100 flex w-full flex-row items-center justify-center md:h-[100dvh] md:w-7/12', + screenId === 'success' && 'bg-secondary-1/15' )} > <Image diff --git a/src/components/Welcome/welcomeSDK.tsx b/src/components/Welcome/welcomeSDK.tsx index c5936b0d..b623b252 100644 --- a/src/components/Welcome/welcomeSDK.tsx +++ b/src/components/Welcome/welcomeSDK.tsx @@ -1,37 +1,37 @@ 'use client' import '@/styles/globals.css' -import { useEffect, useState } from 'react' import { getCalApi } from '@calcom/embed-react' import Link from 'next/link' +import { useEffect, useState } from 'react' import { - WALLETCONNECT_LOGO, - CLAVE_LOGO, - ECO_LOGO, - MANTLE_ICON, BRUME_LOGO, - WOOFI_LOGO, - TIMESWAP_LOGO, + BYBIT_LOGO, + CLAVE_LOGO, CLEO_LOGO, + DEREK_PERSON, + DROPDOWN_ICON, + ECO_LOGO, + IZUMI_LOGO, + KOFIME_PERSON, KTX_LOGO, LENDLE_LOGO, - IZUMI_LOGO, LOGX_LOGO, - BYBIT_LOGO, - DEREK_PERSON, - SHARUK_PERSON, - KOFIME_PERSON, - SBF_PERSON, - SmileStars, + MANTLE_ICON, PEANUTMAN_HAPPY, REDPACKET_LOTTIE, + SBF_PERSON, + SHARUK_PERSON, + SmileStars, TEAL_MOCKUP_1, - DROPDOWN_ICON, + TIMESWAP_LOGO, + WALLETCONNECT_LOGO, + WOOFI_LOGO, } from '@/assets' import * as chain_logos from '@/assets/chains' -import { MarqueeWrapper, MarqueeComp } from '../Global/MarqueeWrapper' import Lottie from 'lottie-react' +import { MarqueeComp, MarqueeWrapper } from '../Global/MarqueeWrapper' const logoCloudLogos = [ { icon: WALLETCONNECT_LOGO, link: 'https://walletconnect.com/' }, @@ -54,7 +54,7 @@ const features = [ name: 'Brand ', description: 'Your brand deserves to be front and center for new users. It’s nuts but you can completely whitelabel these links and use your own domain and branding.', - bg: 'bg-yellow-1', + bg: 'bg-secondary-1', primaryRedirectUrl: 'https://docs.peanut.to/integrate/sdk/branded-links', primaryRedirectText: 'Docs', }, @@ -62,7 +62,7 @@ const features = [ name: 'Gasless', description: 'Users should not have to worry about gas, being on the right chain or wallet addresses. Claim and send links solve the cold start problem.', - bg: 'bg-pink-1', + bg: 'bg-primary-1', primaryRedirectUrl: 'https://docs.peanut.to/integrate/sdk/claim/claim-link-gasless', primaryRedirectText: 'Docs', }, @@ -95,7 +95,7 @@ const features = [ { name: 'Web2 Airdrops', description: 'Airdrop your web2 audience (think Discord, Mailchimp, Twitter)', - bg: 'bg-yellow-1', + bg: 'bg-secondary-1', calModal: true, }, ] @@ -164,7 +164,7 @@ const testimonials = [ name: 'Kofi.me', detail: 'Kofi.me', detailRedirectUrl: 'https://www.kofime.xyz/', - bgColorClass: 'bg-pink-1', + bgColorClass: 'bg-primary-1', }, { imageSrc: SBF_PERSON.src, // TODO: replace with actual image@ @@ -172,7 +172,7 @@ const testimonials = [ comment: 'I have a peanut allergy. Help!', name: 'CEx CEO', detail: 'Probably FTX', - bgColorClass: 'bg-yellow-1', + bgColorClass: 'bg-secondary-1', }, ] const defaultLottieOptions = { @@ -269,7 +269,7 @@ export function WelcomeSDK() { </div> </div> - <div className="center-xy z-index-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black bg-purple-1 py-3 lg:flex lg:pb-16 lg:pt-16 "> + <div className="center-xy z-index-1 bg-primary-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black py-3 lg:flex lg:pb-16 lg:pt-16 "> <img src={PEANUTMAN_HAPPY.src} className="absolute duration-200 hover:rotate-12" @@ -279,11 +279,11 @@ export function WelcomeSDK() { </div> <div className="grid w-full grid-cols-1 gap-4 px-4 py-2 text-black lg:grid-cols-3"> - <label className="flex items-center justify-center border border-n-2 bg-pink-1 px-4 py-8 text-center text-h3 font-black sm:px-16"> + <label className="bg-primary-1 flex items-center justify-center border border-n-2 px-4 py-8 text-center text-h3 font-black sm:px-16"> 300k+ Transactions </label> - <label className="flex items-center justify-center border border-n-2 bg-yellow-1 px-4 py-8 text-center text-h3 font-black sm:px-16"> + <label className="bg-secondary-1 flex items-center justify-center border border-n-2 px-4 py-8 text-center text-h3 font-black sm:px-16"> 105k+ Unique wallet addresses </label> @@ -292,7 +292,7 @@ export function WelcomeSDK() { </label> </div> <div className="w-full px-4 text-black"> - <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-purple-1 py-8 lg:flex-row "> + <div className="bg-primary-1 flex w-full flex-col items-center justify-between gap-4 border border-n-2 py-8 lg:flex-row "> <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3"> <a href="https://docs.peanut.to/overview/what-are-links" target="_blank"> <img @@ -326,7 +326,7 @@ export function WelcomeSDK() { </div> </div> <div className="w-full px-4 text-black"> - <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-yellow-1 py-8 lg:flex-row-reverse "> + <div className="bg-secondary-1 flex w-full flex-col items-center justify-between gap-4 border border-n-2 py-8 lg:flex-row-reverse "> <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3"> <a href="https://docs.peanut.to/overview/case-studies/raffles-to-boost-uwas-and-transactions" diff --git a/src/styles/globals.bruddle.css b/src/styles/globals.bruddle.css deleted file mode 100644 index ad354c3b..00000000 --- a/src/styles/globals.bruddle.css +++ /dev/null @@ -1,4 +0,0 @@ -@config "../../tailwind.bruddle.js"; -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/src/styles/globals.css b/src/styles/globals.css index 6ec1f7af..a1517b19 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,27 +1,29 @@ -@config "../../tailwind.config.js"; @tailwind base; @tailwind components; @tailwind utilities; :root { - --primary-color: theme('colors.purple.1'); - --secondary-color: theme('colors.violet.3'); - --background-color: theme('colors.teal.2'); - --accent-color: theme('colors.violet.3'); + --primary-color: #FF90E8; + --secondary-color: #6340DF; + --background-color: #90A8ED; + --accent-color: #6340DF; } @layer components { .splide__pagination.splide__pagination-cards { @apply static mt-2; } + .splide__pagination.splide__pagination-crypto { @apply -top-10 bottom-auto left-auto right-0; } + .splide__pagination .splide__pagination__page { @apply mx-1 bg-purple-3; } + .splide__pagination .splide__pagination__page.is-active { - @apply scale-100 bg-purple-1; + @apply scale-100 bg-primary-1; } } @@ -55,7 +57,7 @@ Firefox input[type='number'] { } } -.scroller > span { +.scroller>span { position: absolute; top: 0; animation: slide 10s infinite; @@ -66,14 +68,17 @@ Firefox input[type='number'] { 0% { top: 0; } + 25% { /* top: -3rem; */ top: -100%; } + 50% { /* top: -6rem; */ top: -200%; } + 75% { /* top: -9rem; */ top: -300%; @@ -95,44 +100,33 @@ Firefox input[type='number'] { 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } } .gradient-text { - font-size: 2rem; /* Adjust font size as needed */ - font-weight: bold; /* Make the text bold */ + font-size: 2rem; + /* Adjust font size as needed */ + font-weight: bold; + /* Make the text bold */ height: auto; width: 100%; - background: linear-gradient(to right, #9747ff, #ff90e8); /* Gradient direction and colors */ + background: linear-gradient(to right, #9747ff, #ff90e8); + /* Gradient direction and colors */ -webkit-background-clip: text; background-clip: text; - color: transparent; /* Make the text color transparent */ - animation: slide 3s linear infinite; /* Animation named 'slide', adjust timing as needed */ + color: transparent; + /* Make the text color transparent */ + animation: slide 3s linear infinite; + /* Animation named 'slide', adjust timing as needed */ } -/* .testimonial { */ -/* position: relative; */ -/* z-index: 9; */ -/* @apply bg-white rounded-3xl shadow-lg border-2 border-n-1 ring-2 ring-white; */ -/* } */ - -/* .testimonial:after { - content: ''; - z-index: -1; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - @apply bg-white rounded-3xl shadow-lg border-2 border-n-1 ring-2 ring-white; -} */ - .testimonial-0-bg { top: 0.8rem; left: -0.7rem; @@ -245,6 +239,7 @@ Firefox input[type='number'] { 0% { transform: rotate(0deg); } + 100% { transform: rotate(-360deg); } @@ -259,11 +254,11 @@ Firefox input[type='number'] { } .text-link-decoration { - @apply underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-purple-1; + @apply underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-primary-1; } .text-link { - @apply font-black text-black underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-purple-1; + @apply font-black text-black underline decoration-neutral-400 decoration-2 underline-offset-4 transition-colors duration-200 hover:decoration-primary-1; } .text-h2 { @@ -285,20 +280,20 @@ Firefox input[type='number'] { /* Feature styling */ .feature { - @apply mx-auto flex w-auto justify-center rounded-full border-2 border-secondary bg-white px-5 py-3 text-center text-[1.375rem] font-black uppercase text-secondary shadow-md ring-2 ring-white md:mr-auto; + @apply mx-auto flex w-auto justify-center rounded-full border-2 border-violet-3 bg-white px-5 py-3 text-center text-[1.375rem] font-black uppercase text-violet-3 shadow-md ring-2 ring-white md:mr-auto; } .feature-primary { - @apply bg-primary text-white; + @apply bg-primary-1 text-white; } .feature-secondary { - @apply border-secondary bg-secondary text-white; + @apply border-violet-3 bg-violet-3 text-white; } /* Form styling */ .input-text { - @apply h-12 w-full border border-n-1 bg-white px-3 font-medium outline-none ring-2 ring-white transition-colors focus:border-purple-1 dark:border-white dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1; + @apply h-12 w-full border border-n-1 bg-white px-3 font-medium outline-none ring-2 ring-white transition-colors focus:border-primary-1 dark:border-white dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1; } .input-text-inset { @@ -318,4 +313,4 @@ Firefox input[type='number'] { @apply font-sans; font-stretch: 50; font-weight: 400; -} +} \ No newline at end of file diff --git a/tailwind.bruddle.js b/tailwind.bruddle.js deleted file mode 100644 index f53af153..00000000 --- a/tailwind.bruddle.js +++ /dev/null @@ -1,375 +0,0 @@ -const { fontFamily } = require('tailwindcss/defaultTheme') -const plugin = require('tailwindcss/plugin') - -/** @type {import('tailwindcss').Config} */ -module.exports = { - darkMode: ['class', '[data-theme="dark"]'], - content: ['./src/app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'], - theme: { - extend: { - colors: { - purple: { - 1: '#FF90E7', - 2: '#ffb3ee', - 3: '#ffe3f8', - }, - blue: { - 1: '#90A8ED', - }, - yellow: { - 1: '#FFC900', - 2: '#FEFAED', - }, - pink: { - 1: '#E99898', - 2: '#FBEAEA', - }, - green: { - 1: '#98E9AB', - 2: '#EAFBEE', - }, - n: { - 1: '#000000', - 2: '#161616', - 3: '#5F646D', - 4: '#E7E8E9', - }, - white: '#FFFFFF', - background: '#FAF4F0', - }, - zIndex: { - 1: '1', - 2: '2', - 3: '3', - 4: '4', - 5: '5', - }, - spacing: { - 0.25: '0.0625rem', - 0.75: '0.1875rem', - 4.5: '1.125rem', - 5.5: '1.375rem', - 6.5: '1.75rem', - 7.5: '1.875rem', - 8.5: '2.125rem', - 9.5: '2.375rem', - 13: '3.25rem', - 15: '3.75rem', - 17: '4.25rem', - 18: '4.5rem', - 19: '4.75rem', - 21: '5.25rem', - 22: '5.5rem', - 26: '6.5rem', - 30: '7.5rem', - 34: '8.5rem', - 38: '9.5rem', - 42: '10.5rem', - 58: '14.5rem', - }, - transitionDuration: { - DEFAULT: '200ms', - }, - transitionTimingFunction: { - DEFAULT: 'linear', - }, - keyframes: { - loaderDots: { - '0%': { opacity: 1 }, - '50%,100%': { opacity: 0.15 }, - }, - rock: { - '0%, 100%': { transform: 'rotate(-10deg)' }, - '50%': { transform: 'rotate(10deg)' }, - }, - float: { - '0%, 100%': { transform: 'translateY(0)' }, - '50%': { transform: 'translateY(-30px)' }, - }, - }, - animation: { - colorPulse: 'colorPulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite', - rock: 'rock 1.5s ease-in-out infinite', - 'rock-delay-1': 'rock 1.5s ease-in-out infinite 0.3s', - 'rock-delay-2': 'rock 1.5s ease-in-out infinite 0.6s', - float: 'float 3s ease-in-out infinite', - }, - opacity: { - 85: '.85', - 95: '.95', - }, - borderRadius: { - 1: '0.0625rem', - }, - fontFamily: { - sans: ['var(--font-roboto)', ...fontFamily.sans], - display: ['var(--font-sniglet)', ...fontFamily.sans], - condensed: [ - 'var(--font-roboto)', - { - fontVariationSettings: '"wdth" 50', - }, - ], - 'knerd-outline': ['var(--font-knerd-outline)', ...fontFamily.sans], - 'knerd-filled': ['var(--font-knerd-filled)', ...fontFamily.sans], - roboto: ['var(--font-roboto)', ...fontFamily.sans], - }, - fontSize: { - 0: ['0px', '0px'], - sm: ['0.875rem', '1.3125rem'], - h1: [ - '3rem', - { - lineHeight: '3.5rem', - fontWeight: '800', - }, - ], - h2: [ - '2.25rem', - { - lineHeight: '2.875rem', - fontWeight: '800', - }, - ], - h3: [ - '1.875rem', - { - lineHeight: '2.375rem', - fontWeight: '800', - }, - ], - h4: [ - '1.5rem', - { - lineHeight: '2rem', - fontWeight: '800', - }, - ], - h5: [ - '1.25rem', - { - lineHeight: '1.75rem', - fontWeight: '800', - }, - ], - h6: [ - '1.125rem', - { - lineHeight: '1.5rem', - fontWeight: '800', - }, - ], - }, - }, - }, - plugins: [ - require('@headlessui/tailwindcss')({ prefix: 'ui' }), - require('tailwind-scrollbar'), - plugin(function ({ addBase, addComponents, addUtilities }) { - addBase({ - html: { - '@apply text-[1rem]': {}, - }, - body: { - '@apply bg-background text-base antialiased dark:bg-n-2': {}, - }, - }) - addComponents({ - '.row': { - '@apply flex flex-row items-center gap-2': {}, - }, - '.col': { - '@apply flex flex-col gap-2': {}, - }, - '.btn': { - '@apply inline-flex items-center gap-2 justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors': - {}, - }, - '.btn svg': { - '@apply icon-18 fill-inherit first:mr-1.5 last:ml-1.5': {}, - }, - '.btn-transparent-light': { - '@apply btn border-transparent text-white fill-white hover:text-purple-1 hover:fill-purple-1': {}, - }, - '.btn-transparent-dark': { - '@apply btn border-transparent text-n-1 fill-n-1 hover:text-purple-1 hover:fill-purple-1 dark:text-white dark:fill-white dark:hover:text-purple-1 hover:dark:fill-purple-1': - {}, - }, - '.btn-purple': { - '@apply btn bg-purple-1 text-n-1 fill-n-1 hover:bg-purple-1/90': {}, - }, - '.btn-dark': { - '@apply btn bg-n-1 text-white fill-white hover:bg-n-1/80 dark:bg-white/10 dark:hover:bg-white/20': - {}, - }, - '.btn-stroke': { - '@apply btn hover:bg-n-1 hover:text-white hover:fill-white dark:border-white dark:text-white dark:fill-white dark:hover:bg-white dark:hover:text-n-1 dark:hover:fill-n-1': - {}, - }, - '.btn-shadow': { - '@apply shadow-primary-4': {}, - }, - '.btn-square': { - '@apply !px-0': {}, - }, - '.btn-square svg': { - '@apply !ml-0 !mr-0': {}, - }, - '.btn-small': { - '@apply h-8 px-3 text-xs': {}, - }, - '.btn-medium': { - '@apply h-9 px-2 text-xs': {}, - }, - '.btn-small svg, .btn-medium svg': { - '@apply icon-16': {}, - }, - '.btn-square.btn-small': { - '@apply w-8': {}, - }, - '.btn-square.btn-medium': { - '@apply w-9': {}, - }, - '.label': { - '@apply inline-flex justify-center items-center h-6 px-3 border rounded-sm text-center text-xs font-bold text-n-1': - {}, - }, - '.label-stroke': { - '@apply label border-n-1 dark:border-white dark:text-white': {}, - }, - '.label-stroke-yellow': { - '@apply label border-yellow-1 text-yellow-1': {}, - }, - '.label-stroke-pink': { - '@apply label border-pink-1 text-pink-1': {}, - }, - '.label-stroke-purple': { - '@apply label border-purple-1 text-purple-1': {}, - }, - '.label-stroke-green': { - '@apply label border-green-1 text-green-1': {}, - }, - '.label-purple': { - '@apply label border-purple-1 bg-purple-1': {}, - }, - '.label-green': { - '@apply label border-green-1 bg-green-1': {}, - }, - '.label-yellow': { - '@apply label border-yellow-1 bg-yellow-1': {}, - }, - '.label-black': { - '@apply label border-n-1 bg-n-1 text-white dark:bg-white/10': {}, - }, - '.table-custom': { - '@apply table w-full border border-n-1 bg-white dark:bg-n-1 dark:border-white': {}, - }, - '.table-select': { - '@apply table-custom [&>thead>tr>*:nth-child(2)]:pl-0 [&>thead>tr>*:nth-child(1)]:w-13 [&>thead>tr>*:nth-child(1)]:px-0 [&>thead>tr>*:nth-child(1)]:text-0 [&>thead>tr>*:nth-child(1)]:text-center [&>tbody>tr>*:nth-child(2)]:pl-0 [&>tbody>tr>*:nth-child(1)]:w-13 [&>tbody>tr>*:nth-child(1)]:px-0 [&>tbody>tr>*:nth-child(1)]:text-center [&>tbody>tr>*:nth-child(1)]:text-0': - {}, - }, - '.th-custom': { - '@apply table-cell h-12 px-3 py-2 align-middle text-left first:pl-5 last:pr-5': {}, - }, - '.td-custom': { - '@apply table-cell h-[3.875rem] px-3 py-2.5 align-middle border-t border-n-1 text-sm first:pl-5 last:pr-5 dark:border-white': - {}, - }, - '.card': { - '@apply flex flex-col bg-white border border-n-1 dark:bg-n-1 relative mx-auto items-center justify-center dark:border-white': - {}, - }, - '.card-head': { - '@apply flex justify-between flex-col items-start min-h-[4rem] px-3 sm:px-5 py-3 border-b border-n-1 dark:border-white': - {}, - }, - '.card-content': { - '@apply px-3 sm:px-5 py-3 border-n-1 dark:border-white': {}, - }, - '.card-title': { - '@apply p-5 border-b border-n-1 text-h6 dark:border-white': {}, - }, - '.icon-16': { - '@apply !w-4 !h-4': {}, - }, - '.icon-18': { - '@apply !w-4.5 !h-4.5': {}, - }, - '.icon-20': { - '@apply !w-5 !h-5': {}, - }, - '.icon-22': { - '@apply !w-5.5 !h-5.5': {}, - }, - '.icon-24': { - '@apply !w-6 !h-6': {}, - }, - '.icon-28': { - '@apply !w-7 !h-7': {}, - }, - '.shadow-primary-4': { - '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.shadow-primary-6': { - '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.shadow-primary-8': { - '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {}, - }, - '.shadow-secondary-4': { - '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.shadow-secondary-6': { - '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.shadow-secondary-8': { - '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {}, - }, - '.btn-shadow-primary-4': { - '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.btn-shadow-primary-6': { - '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.btn-shadow-primary-8': { - '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {}, - }, - '.btn-shadow-secondary-4': { - '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.btn-shadow-secondary-6': { - '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]': - {}, - }, - '.btn-shadow-secondary-8': { - '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {}, - }, - '.input': { - '@apply h-16 w-full rounded-sm border border-n-1 bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors placeholder:text-n-3 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1': - {}, - }, - '.bg-peanut-repeat-normal': { - '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:100px_100px]': {}, - }, - '.bg-peanut-repeat-large': { - '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:200px_200px]': {}, - }, - '.bg-peanut-repeat-small': { - '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:50px_50px]': {}, - }, - }) - addUtilities({ - '.tap-highlight-color': { - '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)', - }, - }) - }), - ], -} diff --git a/tailwind.config.js b/tailwind.config.js index e7bd6c2f..d97b1260 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,10 +4,38 @@ const plugin = require('tailwindcss/plugin') /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ['class', '[data-theme="dark"]'], - content: ['./src/app/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'], + content: [ + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', + ], theme: { extend: { colors: { + primary: { + 1: '#FF90E8', + 2: '#CC73BA', + 3: '#EFE4FF', + }, + secondary: { + 1: '#FFC900', + 2: '#E99898', + 3: '#90A8ED', + 4: '#FFF4CC', + 5: '#FBEAEA', + 6: '#E9EEFB', + }, + grey: { + 1: '#5F646D', + 2: '#E7E8E9', + 3: '#FAF4F0', + }, + outline: { + 1: '#98E9AB', + 2: '#AE7AFF', + 3: '#E99898', + }, + // todo: remove these colors purple: { 1: '#FF90E8', 2: '#dc78b5', @@ -15,7 +43,7 @@ module.exports = { 4: '#AE7AFF', }, yellow: { - 1: '#ffc900', + 1: '#FFC900', 2: '#f5ff7c', 3: '#fbfdd8', 4: '#FAE8A4', @@ -23,11 +51,13 @@ module.exports = { pink: { 1: '#FF90E8', 2: '#FCD8DB', - 3: '#E99898', + }, + green: { + 1: '#98E9AB', + 2: '#EAFBEE', }, teal: { 1: '#23A094', - 2: '#90A8ED', 3: '#00577d', }, gray: { @@ -54,11 +84,12 @@ module.exports = { }, white: '#FFFFFF', red: '#FF0000', - 'kyc-red': '#C80000', // TODO: this is bad and needs to be changed + 'kyc-red': '#C80000', black: '#000000', - 'kyc-green': '#00C800', // TODO: this is bad and needs to be changed - primary: 'var(--primary-color)', - secondary: 'var(--secondary-color)', + 'kyc-green': '#00C800', + + 'primary-base': 'var(--primary-color)', + 'secondary-base': 'var(--secondary-color)', background: '#FAF4F0', accent: 'var(--accent-color)', error: '#B3261E', @@ -230,35 +261,35 @@ module.exports = { }) addComponents({ '.btn': { - '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors': - // '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-12 px-3 border-2 ring-2 ring-white shadow-md border-n-1 rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors hover:bg-n-4/40 hover:text-n-1': + '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors': + // '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-12 px-3 border-2 ring-2 ring-white shadow-md border-n-1 rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors hover:bg-n-4/40 hover:text-n-1': {}, }, '.btn svg': { '@apply icon-18 fill-inherit first:mr-1.5 last:ml-1.5': {}, }, '.btn-transparent-light': { - '@apply btn border-transparent text-white fill-white hover:text-purple-1 hover:fill-purple-1': {}, + '@apply btn border-transparent text-white fill-white hover:text-primary-1 hover:fill-primary-1': {}, }, '.btn-transparent-dark': { - '@apply btn border-transparent text-n-1 fill-n-1 hover:text-purple-1 hover:fill-purple-1 dark:text-white dark:fill-white dark:hover:text-purple-1 hover:dark:fill-purple-1': + '@apply btn border-transparent text-n-1 fill-n-1 hover:text-primary-1 hover:fill-primary-1 dark:text-white dark:fill-white dark:hover:text-primary-1 hover:dark:fill-primary-1': {}, }, '.btn-purple': { - '@apply btn bg-purple-1 text-n-1 fill-n-1 hover:bg-purple-1/90': {}, + '@apply btn bg-primary-1 text-n-1 fill-n-1 hover:bg-primary-1/90': {}, }, '.btn-purple-2': { '@apply btn bg-purple-3 text-n-1 fill-n-1 hover:bg-purple-3/90': {}, }, '.btn-yellow': { - '@apply btn bg-yellow-1 text-n-1 fill-n-1 hover:bg-yellow-1/90': {}, + '@apply btn bg-secondary-1 text-n-1 fill-n-1 hover:bg-secondary-1/90': {}, }, '.btn-dark': { '@apply btn bg-n-1 text-white fill-white hover:bg-n-1/80 dark:bg-white/10 dark:hover:bg-white/20': {}, }, '.btn-ghost': { - '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-n-3 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border-2 border-transparent rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors duration-200 hover:border-n-1 hover:bg-n-4/25': + '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border-2 border-transparent rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors duration-200 hover:border-n-1 hover:bg-n-4/25': {}, }, '.btn-stroke': { @@ -312,25 +343,25 @@ module.exports = { '@apply label border-n-1 dark:border-white dark:text-white': {}, }, '.label-stroke-yellow': { - '@apply label border-yellow-1 text-yellow-1': {}, + '@apply label border-secondary-1 text-secondary-1': {}, }, '.label-stroke-pink': { - '@apply label border-pink-1 text-pink-1': {}, + '@apply label border-primary-1 text-primary-1': {}, }, '.label-stroke-purple': { - '@apply label border-purple-1 text-purple-1': {}, + '@apply label border-primary-1 text-primary-1': {}, }, '.label-stroke-teal': { '@apply label border-teal-1 text-teal-1': {}, }, '.label-purple': { - '@apply label border-purple-1 bg-purple-1': {}, + '@apply label border-primary-1 bg-primary-1': {}, }, '.label-teal': { '@apply label border-teal-1 bg-teal-1': {}, }, '.label-yellow': { - '@apply label border-yellow-1 bg-yellow-1': {}, + '@apply label border-secondary-1 bg-secondary-1': {}, }, '.label-black': { '@apply label border-n-1 bg-n-1 text-white dark:bg-white/10': {}, @@ -412,7 +443,7 @@ module.exports = { '@apply border-2 border-black': {}, }, '.custom-input': { - '@apply w-full border border-n-1 transition-colors h-12 w-full rounded-none bg-transparent bg-white px-4 text-h8 font-medium outline-none placeholder:text-sm focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1': + '@apply w-full border border-n-1 transition-colors h-12 w-full rounded-none bg-transparent bg-white px-4 text-h8 font-medium outline-none placeholder:text-sm focus:border-primary-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1': {}, }, '.custom-input-xs': { From 2e38861d9f97d84e0fd27d4ee1ba742e08fb60f3 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 22:50:20 +0530 Subject: [PATCH 06/12] style: format --- .../Cashout/Components/Initial.view.tsx | 2 +- .../Claim/Generic/AlreadyClaimed.view.tsx | 8 ++--- src/components/Claim/Link/Initial.view.tsx | 12 +++---- .../Claim/Link/Onchain/Confirm.view.tsx | 12 +++---- .../Claim/Link/Onchain/Success.view.tsx | 4 +-- .../Create/Components/RecentRecipients.tsx | 4 +-- src/components/Create/Link/Confirm.view.tsx | 18 +++++------ src/components/Create/Link/Success.view.tsx | 2 +- .../Dashboard/components/MobileComponent.tsx | 8 ++--- .../components/OptionsItemComponent.tsx | 8 ++--- .../Dashboard/components/SortComponent.tsx | 2 +- src/components/Dashboard/index.tsx | 6 ++-- src/components/Global/ChainSelector/index.tsx | 4 +-- .../Global/ConfirmDetails/Index.tsx | 4 +-- src/components/Global/FAQs/index.tsx | 2 +- src/components/Global/Header/index.tsx | 2 +- src/components/Global/ListItemView/index.tsx | 16 +++++----- src/components/Global/Modal/index.tsx | 4 +-- src/components/Global/Search/index.tsx | 6 ++-- src/components/Global/Select/index.tsx | 4 +-- src/components/Global/Testimonials/index.tsx | 4 +-- src/components/Global/ToggleTheme/index.tsx | 2 +- .../Global/TokenAmountInput/index.tsx | 8 ++--- .../Components/AdvancedButton.tsx | 6 ++-- .../TokenSelector/Components/TokenDisplay.tsx | 2 +- .../Global/TokenSelector/TokenSelector.tsx | 4 +-- .../Global/USBankAccountInput/index.tsx | 2 +- .../Global/WalletNavigation/index.tsx | 2 +- src/components/Home/WalletCard.tsx | 2 +- .../LandingPage/BuildOnUs/index.tsx | 2 +- src/components/LandingPage/faq.tsx | 2 +- src/components/LandingPage/hero.tsx | 2 +- src/components/Offramp/Confirm.view.tsx | 32 +++++++++---------- src/components/Offramp/PromoCodeChecker.tsx | 6 ++-- src/components/Offramp/Success.view.tsx | 8 ++--- .../Components/MobileTableComponent.tsx | 16 +++++----- .../Profile/Components/OptionsComponent.tsx | 2 +- .../Profile/Components/ProfileSection.tsx | 2 +- .../Components/ProfileWalletBalance.tsx | 2 +- .../Profile/Components/TableComponent.tsx | 6 ++-- src/components/Profile/Components/Tabs.tsx | 2 +- .../Components/ReferenceAndAttachment.tsx | 2 +- .../Views/GeneralViews/AlreadyPaid.view.tsx | 8 ++--- .../Request/Pay/Views/Initial.view.tsx | 8 ++--- .../Request/Pay/Views/Success.view.tsx | 2 +- src/components/Setup/Views/Signup.tsx | 2 +- .../Setup/components/SetupWrapper.tsx | 4 +-- src/components/Welcome/welcomeSDK.tsx | 10 +++--- src/styles/globals.css | 12 +++---- 49 files changed, 145 insertions(+), 145 deletions(-) diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index e2e9fc21..494815f3 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -344,7 +344,7 @@ export const InitialCashoutView = ({ <div className="flex flex-grow items-center overflow-hidden"> <Icon name={'bank'} - className="fill-grey-1 mr-2 h-4 flex-shrink-0" + className="mr-2 h-4 flex-shrink-0 fill-grey-1" /> <label htmlFor={`bank-${index}`} diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx index eb98383c..965c05e7 100644 --- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx +++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx @@ -29,7 +29,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter <div className="flex w-full flex-col items-center justify-center gap-2"> <label className="text-h8 ">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Token</label> </div> @@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {tokenAmountAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {chainAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {senderAddressAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Sender</label> </div> diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index bdaf32d3..603606e6 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -469,7 +469,7 @@ export const InitialClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " + className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " > <Icon name={'download'} /> Download attachment @@ -516,9 +516,9 @@ export const InitialClaimLinkView = ({ {recipient && isValidRecipient && recipientType !== 'iban' && recipientType !== 'us' && ( <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -533,7 +533,7 @@ export const InitialClaimLinkView = ({ chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} { supportedSquidChainsAndTokens[ selectedRoute.route.params.toChain @@ -559,9 +559,9 @@ export const InitialClaimLinkView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx index a9922334..e4af5a04 100644 --- a/src/components/Claim/Link/Onchain/Confirm.view.tsx +++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx @@ -137,7 +137,7 @@ export const ConfirmClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " + className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " > <Icon name={'download'} /> Download attachment @@ -180,9 +180,9 @@ export const ConfirmClaimLinkView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -193,7 +193,7 @@ export const ConfirmClaimLinkView = ({ (chain) => chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} { supportedSquidChainsAndTokens[selectedRoute.route.params.toChain] ?.axelarChainName @@ -215,9 +215,9 @@ export const ConfirmClaimLinkView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx index 6f5138c5..8477f8ca 100644 --- a/src/components/Claim/Link/Onchain/Success.view.tsx +++ b/src/components/Claim/Link/Onchain/Success.view.tsx @@ -67,7 +67,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ </Card.Description> </Card.Header> <Card.Content className="flex flex-col gap-2"> - <label className="text-grey-1 text-center text-h8 font-normal">Transaction details</label> + <label className="text-center text-h8 font-normal text-grey-1">Transaction details</label> {type === 'claimxchain' && ( <div className="flex flex-col items-start justify-center gap-1 text-h9 font-normal"> <div className="flex w-full flex-row items-center justify-between gap-1"> @@ -101,7 +101,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="fill-grey-1 h-4" /> + <Icon name="external" className="h-4 fill-grey-1" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Create/Components/RecentRecipients.tsx b/src/components/Create/Components/RecentRecipients.tsx index ff53f63c..371f1cf9 100644 --- a/src/components/Create/Components/RecentRecipients.tsx +++ b/src/components/Create/Components/RecentRecipients.tsx @@ -15,7 +15,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi {[0, 1, 2].map((idx) => ( <div key={idx} - className="hover:bg-grey-1/10 flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors" + className="flex h-10 w-full flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-grey-1/10" > <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7"> <div className="flex flex-row items-center justify-start gap-2"> @@ -38,7 +38,7 @@ const RecentRecipients = ({ recentRecipients, onClick, isLoading }: RecentRecipi {recentRecipients.map((recipient) => ( <div key={recipient.address} - className="hover:bg-grey-1/10 flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors" + className="flex h-10 w-full cursor-pointer flex-row items-center justify-between border border-n-1 p-2 transition-colors hover:bg-grey-1/10" onClick={() => onClick(recipient.address)} > <div className="flex w-full flex-row items-center justify-between overflow-hidden text-h7"> diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index 77141edf..b0015de9 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -274,35 +274,35 @@ export const CreateLinkConfirmView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {attachmentOptions.fileUrl && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="fill-grey-1 h-4" /> + <Icon name={'paperclip'} className="h-4 fill-grey-1" /> <label className="font-bold">Attachment</label> </div> <a href={attachmentOptions.fileUrl} download target="_blank"> - <Icon name={'download'} className="fill-grey-1 h-4" /> + <Icon name={'download'} className="h-4 fill-grey-1" /> </a> </div> )} {attachmentOptions.message && ( <div className="flex w-full flex-col items-center justify-center gap-1"> <div - className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8" + className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1" onClick={() => { setShowMessage(!showMessage) }} > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="fill-grey-1 h-4 " /> + <Icon name={'paperclip'} className="h-4 fill-grey-1 " /> <label className=" font-bold">Message</label> </div> <Icon name={'arrow-bottom'} - className={`fill-grey-1 h-4 cursor-pointer transition-transform ${showMessage && ' rotate-180'}`} + className={`h-4 cursor-pointer fill-grey-1 transition-transform ${showMessage && ' rotate-180'}`} /> </div> {showMessage && ( - <div className="text-grey-1 flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8"> + <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-grey-1"> <label className="w-full text-start text-sm font-normal leading-4"> {attachmentOptions.message} </label> @@ -311,9 +311,9 @@ export const CreateLinkConfirmView = ({ </div> )} {transactionCostUSD !== undefined && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx index 23c8bd63..4923b799 100644 --- a/src/components/Create/Link/Success.view.tsx +++ b/src/components/Create/Link/Success.view.tsx @@ -125,7 +125,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="fill-grey-1 h-4" /> + <Icon name="external" className="h-4 fill-grey-1" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Dashboard/components/MobileComponent.tsx b/src/components/Dashboard/components/MobileComponent.tsx index 76c993ae..39631a33 100644 --- a/src/components/Dashboard/components/MobileComponent.tsx +++ b/src/components/Dashboard/components/MobileComponent.tsx @@ -54,7 +54,7 @@ export const MobileItemComponent = ({ {linkDetail.status === 'claimed' ? ( <div className="border border-teal-3 px-2 py-1 text-center text-teal-3">claimed</div> ) : ( - <div className="border-grey-1 text-grey-1 border border-n-1 px-2 py-1">pending</div> + <div className="border border-grey-1 border-n-1 px-2 py-1 text-grey-1">pending</div> )} </div> </div> @@ -67,7 +67,7 @@ export const MobileItemComponent = ({ > <div className="flex w-full flex-col items-center justify-center p-2 "></div> {linkDetail.type === 'Link Sent' && ( - <div className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> + <div className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> <div className="text-h8" onClick={() => { @@ -82,7 +82,7 @@ export const MobileItemComponent = ({ onClick={() => { utils.copyTextToClipboardWithFallback(linkDetail?.link ?? linkDetail.txHash ?? '') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy Link</div> </div> @@ -91,7 +91,7 @@ export const MobileItemComponent = ({ href={linkDetail.attachmentUrl} download target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 focus:outline-none disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Download attachment </a> diff --git a/src/components/Dashboard/components/OptionsItemComponent.tsx b/src/components/Dashboard/components/OptionsItemComponent.tsx index 3d919acf..32edb474 100644 --- a/src/components/Dashboard/components/OptionsItemComponent.tsx +++ b/src/components/Dashboard/components/OptionsItemComponent.tsx @@ -26,7 +26,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { router.push(`/${(item.link ?? '').split('://')[1].split('/')[1]}`) }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > <div className="text-h8">Refund</div> </Menu.Item> @@ -38,7 +38,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { utils.copyTextToClipboardWithFallback(item.link ?? '') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy link</div> </Menu.Item> @@ -49,7 +49,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem href={item.attachmentUrl} download target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Download attachment</div> </Menu.Item> @@ -60,7 +60,7 @@ export const OptionsItemComponent = ({ item }: { item: interfaces.IDashboardItem onClick={() => { utils.copyTextToClipboardWithFallback(item.txHash ?? '') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > <div className="text-h8">Copy transaction hash</div> </Menu.Item> diff --git a/src/components/Dashboard/components/SortComponent.tsx b/src/components/Dashboard/components/SortComponent.tsx index 90bf780a..84aa7ac0 100644 --- a/src/components/Dashboard/components/SortComponent.tsx +++ b/src/components/Dashboard/components/SortComponent.tsx @@ -32,7 +32,7 @@ export const SortComponent = ({ onClick={() => { setSortingValue(type) }} - className=" hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 dark:hover:bg-white/20" + className=" flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 dark:hover:bg-white/20" key={type} > <div className="text-h8">{type}</div> diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 7e57c19b..af8a9069 100644 --- a/src/components/Dashboard/index.tsx +++ b/src/components/Dashboard/index.tsx @@ -197,7 +197,7 @@ export const Dashboard = () => { <td className="td-custom"> {!link.status ? ( - <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> + <div className="border border-grey-1 px-2 py-1 text-center text-grey-1"> <Loading /> </div> ) : link.status === 'claimed' ? ( @@ -209,7 +209,7 @@ export const Dashboard = () => { sent </div> ) : ( - <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> + <div className="border border-grey-1 px-2 py-1 text-center text-grey-1"> pending </div> )} @@ -237,7 +237,7 @@ export const Dashboard = () => { <CSVLink data={legacyLinks ? legacyLinks.join('\n') : ''} filename="links.csv" - className="text-primary-1 cursor-pointer self-end" + className="cursor-pointer self-end text-primary-1" > Download {legacyLinks.length} legacy links as CSV </CSVLink> diff --git a/src/components/Global/ChainSelector/index.tsx b/src/components/Global/ChainSelector/index.tsx index b0a0dffe..fe0bf0cb 100644 --- a/src/components/Global/ChainSelector/index.tsx +++ b/src/components/Global/ChainSelector/index.tsx @@ -140,14 +140,14 @@ const chainItem = ({ <Menu.Item as="button" onClick={setChain} - className="hover:bg-grey-1/10 flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 dark:hover:bg-white/20" + className="flex h-12 w-full items-center justify-between gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 dark:hover:bg-white/20" key={chain.name} > <div className="flex w-max flex-row items-center justify-center gap-2"> <img src={chain.icon.url} alt={chain.name} className="h-6 w-6" /> <div className="text-h8">{chain.name}</div> </div> - {valuePerChain && <div className="text-grey-1 text-h9">${formatTokenAmount(valuePerChain, 2)}</div>} + {valuePerChain && <div className="text-h9 text-grey-1">${formatTokenAmount(valuePerChain, 2)}</div>} </Menu.Item> ) } diff --git a/src/components/Global/ConfirmDetails/Index.tsx b/src/components/Global/ConfirmDetails/Index.tsx index 268eba32..d84d55f6 100644 --- a/src/components/Global/ConfirmDetails/Index.tsx +++ b/src/components/Global/ConfirmDetails/Index.tsx @@ -35,7 +35,7 @@ const ConfirmDetails = ({ </label> </div> {tokenPrice && ( - <label className="text-grey-1 text-h7 font-bold"> + <label className="text-h7 font-bold text-grey-1"> $ {formatTokenAmount(Number(tokenAmount) * tokenPrice)} </label> )} @@ -46,7 +46,7 @@ const ConfirmDetails = ({ ) : ( <Icon name="chain_placeholder" className="h-6 w-6" fill="#999" /> )} - <label className="text-grey-1 text-sm font-bold">{chainName}</label> + <label className="text-sm font-bold text-grey-1">{chainName}</label> </div> </div> ) diff --git a/src/components/Global/FAQs/index.tsx b/src/components/Global/FAQs/index.tsx index 34ce0026..769d8ad2 100644 --- a/src/components/Global/FAQs/index.tsx +++ b/src/components/Global/FAQs/index.tsx @@ -39,7 +39,7 @@ export function FAQsPanel({ heading, questions }: FAQsProps) { transition={{ type: 'spring', damping: 10 }} className="relative mx-auto max-w-3xl rounded-md border-2 border-n-1 bg-white px-2 py-6 shadow ring-2 ring-white transition-transform duration-300 hover:rotate-0 md:-rotate-2 md:p-14" > - <h2 className="absolute -left-2 -top-8 rounded-full border-2 border-n-1 bg-primary px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> + <h2 className="bg-primary absolute -left-2 -top-8 rounded-full border-2 border-n-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> {heading} </h2> diff --git a/src/components/Global/Header/index.tsx b/src/components/Global/Header/index.tsx index d87d71f9..4f7949e0 100644 --- a/src/components/Global/Header/index.tsx +++ b/src/components/Global/Header/index.tsx @@ -150,7 +150,7 @@ const MenuLink = ({ {title} </Text> {isBeta && ( - <span className="text-primary-1 relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase"> + <span className="relative top-[-1.5em] ml-1 text-[0.5rem] font-semibold uppercase text-primary-1"> BETA </span> )} diff --git a/src/components/Global/ListItemView/index.tsx b/src/components/Global/ListItemView/index.tsx index 02069dbe..5d14110b 100644 --- a/src/components/Global/ListItemView/index.tsx +++ b/src/components/Global/ListItemView/index.tsx @@ -106,7 +106,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata <div className="flex items-center gap-2"> <label className="font-bold">{primaryInfo.title}</label> {primaryInfo.subtitle && ( - <label className="text-grey-1 text-xs">{primaryInfo.subtitle}</label> + <label className="text-xs text-grey-1">{primaryInfo.subtitle}</label> )} </div> {isHistory && transactionStatus && ( @@ -121,10 +121,10 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata <div className="flex w-full flex-row items-center justify-between"> <div className="flex flex-col items-start justify-end gap-2 text-start"> {metadata.recipientAddress && ( - <label className="text-grey-1 text-xs font-normal">{metadata.recipientAddress}</label> + <label className="text-xs font-normal text-grey-1">{metadata.recipientAddress}</label> )} {secondaryInfo.subText && ( - <label className="text-grey-1 text-xs font-normal">{secondaryInfo.subText}</label> + <label className="text-xs font-normal text-grey-1">{secondaryInfo.subText}</label> )} </div> {metadata.subText && ( @@ -152,7 +152,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata onClick={() => { transactionDetails.link && window.open(transactionDetails?.link ?? '', '_blank') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Refund </div> @@ -164,7 +164,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata onClick={() => { utils.copyTextToClipboardWithFallback(transactionDetails?.link ?? '') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Copy link </div> @@ -180,7 +180,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata const explorerUrl = utils.getExplorerUrl(chainId) window.open(`${explorerUrl}/tx/${transactionDetails?.txHash ?? ''}`, '_blank') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Show in explorer </div> @@ -190,7 +190,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata href={transactionDetails.attachmentUrl} download target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Download attachment </a> @@ -203,7 +203,7 @@ export const ListItemView = ({ id, variant, primaryInfo, secondaryInfo, metadata return url.toString() })()} target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Check Status </a> diff --git a/src/components/Global/Modal/index.tsx b/src/components/Global/Modal/index.tsx index 6fc30584..3515d179 100644 --- a/src/components/Global/Modal/index.tsx +++ b/src/components/Global/Modal/index.tsx @@ -80,7 +80,7 @@ const Modal = ({ {showPrev && ( <button className={twMerge( - ` hover:fill-primary-1 dark:hover:fill-primary-1 absolute left-5 top-4.5 text-0 outline-none dark:fill-white ` + ` absolute left-5 top-4.5 text-0 outline-none hover:fill-primary-1 dark:fill-white dark:hover:fill-primary-1 ` )} onClick={onPrev} > @@ -102,7 +102,7 @@ const Modal = ({ <button className={twMerge( - `hover:fill-primary-1 dark:hover:fill-primary-1 absolute right-4 top-4 text-0 outline-none dark:fill-white ${ + `absolute right-4 top-4 text-0 outline-none hover:fill-primary-1 dark:fill-white dark:hover:fill-primary-1 ${ video ? 'absolute right-5 top-5 h-10 w-10 fill-white' : '' } ${classButtonClose}` )} diff --git a/src/components/Global/Search/index.tsx b/src/components/Global/Search/index.tsx index e9a84a99..685470cf 100644 --- a/src/components/Global/Search/index.tsx +++ b/src/components/Global/Search/index.tsx @@ -15,8 +15,8 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi return ( <div className={`relative ${className} ${large ? 'shadow-primary-4 w-full' : ''}`}> <input - className={`focus:border-primary-1 dark:focus:border-primary-1 w-full rounded-none bg-transparent - text-base outline-none transition-colors placeholder:text-base dark:border-white dark:text-white dark:placeholder:text-white/75 ${ + className={`w-full rounded-none bg-transparent text-base outline-none + transition-colors placeholder:text-base focus:border-primary-1 dark:border-white dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1 ${ large ? 'h-16 bg-white pl-6 pr-18 text-base font-medium dark:bg-n-1' : medium @@ -31,7 +31,7 @@ const Search = ({ className, placeholder, value, onChange, onSubmit, large, medi <button className={`absolute text-0 ${ large - ? 'bg-primary-1 hover:bg-primary-1/90 right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 transition-colors' + ? 'right-5 top-1/2 h-8 w-8 -translate-y-1/2 border border-n-1 bg-primary-1 transition-colors hover:bg-primary-1/90' : 'bottom-0 left-0 top-0 w-8' }`} > diff --git a/src/components/Global/Select/index.tsx b/src/components/Global/Select/index.tsx index 2332d811..c8a2472a 100644 --- a/src/components/Global/Select/index.tsx +++ b/src/components/Global/Select/index.tsx @@ -73,7 +73,7 @@ const Select = ({ <Transition leave="transition duration-200" leaveFrom="opacity-100" leaveTo="opacity-0"> <Listbox.Options className={twMerge( - `border-grey-1 absolute left-0 right-0 mt-1 w-full rounded-md border-2 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${ + `absolute left-0 right-0 mt-1 w-full rounded-md border-2 border-grey-1 bg-white p-2 shadow-lg dark:border-white dark:bg-n-1 ${ small ? 'p-0' : '' } ${up ? 'bottom-full top-auto mb-1 mt-0' : ''} z-50 ${classOptions}` )} @@ -87,7 +87,7 @@ const Select = ({ {items.map((item: any) => ( <Listbox.Option className={twMerge( - `text-grey-1 ui-selected:!bg-grey-1/20 flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold transition-colors tap-highlight-color ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${ + `flex cursor-pointer items-start rounded-sm px-3 py-2 text-start text-sm font-bold text-grey-1 transition-colors tap-highlight-color ui-selected:!bg-grey-1/20 ui-selected:!text-n-1 hover:text-n-1 dark:text-white/50 dark:ui-selected:!text-white dark:hover:text-white ${ small ? '!py-1 !pl-4 text-xs' : '' } ${classOption}` )} diff --git a/src/components/Global/Testimonials/index.tsx b/src/components/Global/Testimonials/index.tsx index 43bd2063..a421d527 100644 --- a/src/components/Global/Testimonials/index.tsx +++ b/src/components/Global/Testimonials/index.tsx @@ -179,7 +179,7 @@ export function Testimonials({ testimonials }: TestimonialsProps) { > <motion.div variants={testimonialBgVariants[index]} - className={`absolute left-0 top-0 -z-1 h-full w-full rounded-3xl bg-primary testimonial-${index}-bg`} + className={`bg-primary absolute left-0 top-0 -z-1 h-full w-full rounded-3xl testimonial-${index}-bg`} ></motion.div> <TestimonialBody testimonial={testimonial} /> @@ -187,7 +187,7 @@ export function Testimonials({ testimonials }: TestimonialsProps) { ) : ( <div className={`relative z-10 p-4 md:p-8`}> <div - className={`absolute left-0 top-0 -z-1 h-full w-full rounded-3xl bg-primary testimonial-${index}-bg`} + className={`bg-primary absolute left-0 top-0 -z-1 h-full w-full rounded-3xl testimonial-${index}-bg`} ></div> <TestimonialBody testimonial={testimonial} /> </div> diff --git a/src/components/Global/ToggleTheme/index.tsx b/src/components/Global/ToggleTheme/index.tsx index b3bc3698..4ee7d462 100644 --- a/src/components/Global/ToggleTheme/index.tsx +++ b/src/components/Global/ToggleTheme/index.tsx @@ -26,7 +26,7 @@ const ToggleTheme = ({}: ToggleThemeProps) => { return ( <div - className={`before:bg-primary-1 relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:transition-all dark:border-white ${ + className={`relative flex h-6.5 w-14 overflow-hidden rounded-sm border border-n-1 before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1/2 before:bg-primary-1 before:transition-all dark:border-white ${ colorMode === 'dark' ? 'before:translate-x-full' : '' }`} > diff --git a/src/components/Global/TokenAmountInput/index.tsx b/src/components/Global/TokenAmountInput/index.tsx index 56b25c74..b272d0da 100644 --- a/src/components/Global/TokenAmountInput/index.tsx +++ b/src/components/Global/TokenAmountInput/index.tsx @@ -69,7 +69,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV <label className="sr-only text-h1">$</label> ))} <input - className={`focus:border-primary-1 dark:focus:border-primary-1 h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75`} + className={`h-12 w-[4ch] max-w-80 bg-transparent text-center text-h1 outline-none transition-colors placeholder:text-h1 focus:border-primary-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-primary-1`} placeholder={'0.00'} onChange={(e) => { const value = utils.formatAmountWithoutComma(e.target.value) @@ -96,7 +96,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV {maxValue && maxValue !== tokenValue && ( <button onClick={handleMaxClick} - className="text-grey-1 absolute right-1 ml-1 px-2 py-1 text-h7 uppercase transition-colors hover:text-black" + className="absolute right-1 ml-1 px-2 py-1 text-h7 uppercase text-grey-1 transition-colors hover:text-black" > Max </button> @@ -104,7 +104,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV </div> {selectedTokenData?.price && !utils.estimateStableCoin(selectedTokenData.price) && ( <div className="flex w-full flex-row items-center justify-center gap-1"> - <label className="text-grey-1 text-base"> + <label className="text-base text-grey-1"> {!tokenValue ? '0' : inputDenomination === 'USD' @@ -118,7 +118,7 @@ const TokenAmountInput = ({ className, tokenValue, setTokenValue, onSubmit, maxV setInputDenomination(inputDenomination === 'USD' ? 'TOKEN' : 'USD') }} > - <Icon name={'switch'} className="fill-grey-1 rotate-90 cursor-pointer" /> + <Icon name={'switch'} className="rotate-90 cursor-pointer fill-grey-1" /> </button> </div> )} diff --git a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx index 03429542..85ca934d 100644 --- a/src/components/Global/TokenSelector/Components/AdvancedButton.tsx +++ b/src/components/Global/TokenSelector/Components/AdvancedButton.tsx @@ -59,7 +59,7 @@ export const AdvancedTokenSelectorButton = ({ role="button" tabIndex={0} aria-label="Open token selector" - className={`flex w-full ${!isStatic && ' cursor-pointer '} hover:bg-grey-1/10 h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 dark:border-white ${classNameButton}`} + className={`flex w-full ${!isStatic && ' cursor-pointer '} h-18 flex-row items-center justify-between border border-n-1 px-4 py-2 hover:bg-grey-1/10 dark:border-white ${classNameButton}`} onClick={() => { !isStatic && onClick() }} @@ -97,12 +97,12 @@ export const AdvancedTokenSelectorButton = ({ {type === 'send' && (tokenBalance ? ( - <p className="text-grey-1 text-xs"> + <p className="text-xs text-grey-1"> Balance: {utils.formatTokenAmount(tokenBalance ?? 0, 4)} </p> ) : null)} {tokenAmount && tokenPrice && ( - <p className="text-grey-1 text-xs"> + <p className="text-xs text-grey-1"> ${utils.formatTokenAmount(Number(tokenAmount) * tokenPrice, 4)} </p> )} diff --git a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx index be8b6088..43f4321b 100644 --- a/src/components/Global/TokenSelector/Components/TokenDisplay.tsx +++ b/src/components/Global/TokenSelector/Components/TokenDisplay.tsx @@ -26,7 +26,7 @@ export const tokenDisplay = ( <div className="text-h8">{token.name}</div> </div> {type === 'send' && ( - <p className="text-grey-1 text-xs "> + <p className="text-xs text-grey-1 "> {utils.formatTokenAmount( balances.find( (balance) => diff --git a/src/components/Global/TokenSelector/TokenSelector.tsx b/src/components/Global/TokenSelector/TokenSelector.tsx index a3a169e8..b508409d 100644 --- a/src/components/Global/TokenSelector/TokenSelector.tsx +++ b/src/components/Global/TokenSelector/TokenSelector.tsx @@ -71,7 +71,7 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken: {balances.slice(visibleRange.start, visibleRange.end).map((balance) => ( <div key={`${balance.address}_${balance.chainId}`} - className={`hover:bg-grey-1/10 flex h-14 cursor-pointer items-center transition-colors ${ + className={`flex h-14 cursor-pointer items-center transition-colors hover:bg-grey-1/10 ${ areEvmAddressesEqual(balance.address, selectedTokenAddress) && balance.chainId === selectedChainID && 'bg-grey-1/10' @@ -148,7 +148,7 @@ const TokenList = ({ balances, setToken }: { balances: IUserBalance[]; setToken: <div className="w-32 py-2"> <div className="flex flex-row items-center justify-end gap-2 pr-1"> - <div className="text-grey-1 text-h8"> + <div className="text-h8 text-grey-1"> {supportedPeanutChains.find((chain) => chain.chainId === balance.chainId)?.name ?? ''} </div> diff --git a/src/components/Global/USBankAccountInput/index.tsx b/src/components/Global/USBankAccountInput/index.tsx index 9645a1ce..764f929d 100644 --- a/src/components/Global/USBankAccountInput/index.tsx +++ b/src/components/Global/USBankAccountInput/index.tsx @@ -97,7 +97,7 @@ export const USBankAccountInput = ({ register, setValue, errors, defaultValues } </div> <button type="button" - className="text-grey-1 text-h9 underline" + className="text-h9 text-grey-1 underline" onClick={() => { setValue('routingNumber', '') setValue('accountNumber', '') diff --git a/src/components/Global/WalletNavigation/index.tsx b/src/components/Global/WalletNavigation/index.tsx index 56de4f73..4f15aff0 100644 --- a/src/components/Global/WalletNavigation/index.tsx +++ b/src/components/Global/WalletNavigation/index.tsx @@ -56,7 +56,7 @@ const NavSection: React.FC<NavSectionProps> = ({ title, tabs, pathName, isLastSe <span className="block w-fit pt-0.5 text-center text-base font-semibold">{name}</span> </Link> ))} - {!isLastSection && <div className="border-grey-1 w-full border-b" />} + {!isLastSection && <div className="w-full border-b border-grey-1" />} </> ) diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx index 7c7ea7d1..ebd3e229 100644 --- a/src/components/Home/WalletCard.tsx +++ b/src/components/Home/WalletCard.tsx @@ -106,7 +106,7 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { /> </div> {wallet.walletProviderType !== WalletProviderType.PEANUT && ( - <div className="text-grey-1 rounded-md bg-white/75 px-2 py-1 text-xs font-bold"> + <div className="rounded-md bg-white/75 px-2 py-1 text-xs font-bold text-grey-1"> External </div> )} diff --git a/src/components/LandingPage/BuildOnUs/index.tsx b/src/components/LandingPage/BuildOnUs/index.tsx index ab46271c..ff4ac7f1 100644 --- a/src/components/LandingPage/BuildOnUs/index.tsx +++ b/src/components/LandingPage/BuildOnUs/index.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion' export default function BuildOnUs() { return ( - <div className="bg-primary-1 relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden"> + <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-primary-1"> <motion.div className="flex flex-col items-center gap-8" initial={{ opacity: 0, translateY: 20 }} diff --git a/src/components/LandingPage/faq.tsx b/src/components/LandingPage/faq.tsx index cefea847..7a7ce628 100644 --- a/src/components/LandingPage/faq.tsx +++ b/src/components/LandingPage/faq.tsx @@ -22,7 +22,7 @@ export function FAQs({ heading, questions, marquee = { visible: false } }: Local return ( <Box - className="overflow-x-hidden bg-secondary" + className="bg-secondary overflow-x-hidden" style={{ backgroundImage: `url(${PeanutsBG.src})`, backgroundSize: '10rem auto', diff --git a/src/components/LandingPage/hero.tsx b/src/components/LandingPage/hero.tsx index 7db99c27..2a8a561b 100644 --- a/src/components/LandingPage/hero.tsx +++ b/src/components/LandingPage/hero.tsx @@ -34,7 +34,7 @@ export function Hero({ heading, marquee = { visible: false }, cta, buttonVisible }, []) return ( - <div className="bg-primary-1 relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden md:min-h-[97vh]"> + <div className="relative flex min-h-[96vh] flex-col justify-between overflow-x-hidden bg-primary-1 md:min-h-[97vh]"> <CloudImages screenWidth={screenWidth} /> <div className="lg:mb-16- lg:mt-24- relative mb-8 mt-12 flex grow flex-col justify-between space-y-6 md:mb-10 md:mt-12"> diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx index 9fdadc6c..d5088a37 100644 --- a/src/components/Offramp/Confirm.view.tsx +++ b/src/components/Offramp/Confirm.view.tsx @@ -704,9 +704,9 @@ export const OfframpConfirmView = ({ <div className="my-2 flex w-full flex-col items-center justify-center gap-2"> <label className="self-start text-h8 font-light">Please confirm all details:</label> <div className="flex w-full flex-col items-center justify-center gap-2"> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'profile'} className="fill-grey-1 h-4" /> + <Icon name={'profile'} className="h-4 fill-grey-1" /> <label className="font-bold">Name</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -714,9 +714,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'email'} className="fill-grey-1 h-4" /> + <Icon name={'email'} className="h-4 fill-grey-1" /> <label className="font-bold">Email</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -724,9 +724,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'bank'} className="fill-grey-1 h-4" /> + <Icon name={'bank'} className="h-4 fill-grey-1" /> <label className="font-bold">Bank account</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -735,9 +735,9 @@ export const OfframpConfirmView = ({ </div> {offrampType == OfframpType.CLAIM && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -746,8 +746,8 @@ export const OfframpConfirmView = ({ (chain) => chain.chainId === claimLinkData?.chainId )?.name }{' '} - <Icon name={'arrow-next'} className="fill-grey-1 h-4" /> Offramp{' '} - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" /> Offramp{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} {recipientType?.toUpperCase()}{' '} <MoreInfo text={`Wait, crypto can be converted to real money??? How cool!`} @@ -756,9 +756,9 @@ export const OfframpConfirmView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -811,9 +811,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">Total</label> </div> <div className="flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -841,9 +841,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx index 88d09110..2adb9226 100644 --- a/src/components/Offramp/PromoCodeChecker.tsx +++ b/src/components/Offramp/PromoCodeChecker.tsx @@ -82,15 +82,15 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe {!promoCheckerState.isApplied && ( <div onClick={handleExpandToggle} - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 transition-colors duration-200 hover:bg-gray-50" + className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1 transition-colors duration-200 hover:bg-gray-50" > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name="ticket" className="fill-grey-1 h-4" /> + <Icon name="ticket" className="h-4 fill-grey-1" /> <label className="font-bold">Apply Promo Code</label> </div> <Icon name={promoCheckerState.isExpanded ? 'chevron-up' : 'arrow-bottom'} - className={`fill-grey-1 h-4 transition-all duration-300`} + className={`h-4 fill-grey-1 transition-all duration-300`} /> </div> )} diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index b83fc590..629b82a9 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -57,9 +57,9 @@ export const OfframpSuccessView = ({ Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please keep in mind that it may take up to 2 days for the funds to arrive. </label> - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -79,9 +79,9 @@ export const OfframpSuccessView = ({ </div> {/* You will receive section */} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Profile/Components/MobileTableComponent.tsx b/src/components/Profile/Components/MobileTableComponent.tsx index 556c3ea6..2fd4abe1 100644 --- a/src/components/Profile/Components/MobileTableComponent.tsx +++ b/src/components/Profile/Components/MobileTableComponent.tsx @@ -78,11 +78,11 @@ export const MobileTableComponent = ({ ) : dashboardItem.status === 'paid' ? ( <div className="border border-teal-3 p-0.5 text-center text-teal-3">paid</div> ) : dashboardItem.status ? ( - <div className="border-grey-1 text-grey-1 border p-0.5 text-center"> + <div className="border border-grey-1 p-0.5 text-center text-grey-1"> {dashboardItem.status.toLowerCase().replaceAll('_', ' ')} </div> ) : ( - <div className="border-grey-1 text-grey-1 border p-0.5 text-center"> + <div className="border border-grey-1 p-0.5 text-center text-grey-1"> pending </div> ) @@ -123,7 +123,7 @@ export const MobileTableComponent = ({ onClick={() => { dashboardItem.link && window.open(dashboardItem?.link ?? '', '_blank') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > Refund </div> @@ -135,7 +135,7 @@ export const MobileTableComponent = ({ onClick={() => { utils.copyTextToClipboardWithFallback(dashboardItem?.link ?? '') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Copy link </div> @@ -151,7 +151,7 @@ export const MobileTableComponent = ({ const explorerUrl = utils.getExplorerUrl(chainId) window.open(`${explorerUrl}/tx/${dashboardItem?.txHash ?? ''}`, '_blank') }} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 " > Show in explorer </div> @@ -161,7 +161,7 @@ export const MobileTableComponent = ({ href={dashboardItem.attachmentUrl} download target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Download attachment </a> @@ -174,7 +174,7 @@ export const MobileTableComponent = ({ return url.toString() })()} target="_blank" - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" > Check Status </a> @@ -183,7 +183,7 @@ export const MobileTableComponent = ({ ) : ( type === 'contacts' && ( <Link href={`/send?recipientAddress=${encodeURIComponent(address as string)}`}> - <div className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> + <div className="flex h-12 w-full items-center gap-2 px-4 text-h8 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20 "> Send to this address </div> </Link> diff --git a/src/components/Profile/Components/OptionsComponent.tsx b/src/components/Profile/Components/OptionsComponent.tsx index 31551227..c2d422b2 100644 --- a/src/components/Profile/Components/OptionsComponent.tsx +++ b/src/components/Profile/Components/OptionsComponent.tsx @@ -31,7 +31,7 @@ export const OptionsComponent = ({ <Menu.Item as={'button'} onClick={actionItem.action} - className="hover:bg-grey-1/10 flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" + className="flex h-12 w-full items-center gap-2 px-4 text-sm font-bold transition-colors last:mb-0 hover:bg-grey-1/10 disabled:cursor-not-allowed disabled:bg-n-4 disabled:hover:bg-n-4/90 dark:hover:bg-white/20" key={index} > <div className="text-h8">{actionItem.name}</div> diff --git a/src/components/Profile/Components/ProfileSection.tsx b/src/components/Profile/Components/ProfileSection.tsx index 6e78bdbc..097ee949 100644 --- a/src/components/Profile/Components/ProfileSection.tsx +++ b/src/components/Profile/Components/ProfileSection.tsx @@ -30,7 +30,7 @@ const ProfileSection = ({}: ProfileSectionProps) => { <div className="flex items-center gap-3"> <div className="">{user?.user.username}</div> {user?.user.kycStatus !== null && ( - <Badge color="purple" className="text-primary-1 bg-white"> + <Badge color="purple" className="bg-white text-primary-1"> No KYC </Badge> )} diff --git a/src/components/Profile/Components/ProfileWalletBalance.tsx b/src/components/Profile/Components/ProfileWalletBalance.tsx index 9bf805b2..f6efec3d 100644 --- a/src/components/Profile/Components/ProfileWalletBalance.tsx +++ b/src/components/Profile/Components/ProfileWalletBalance.tsx @@ -49,7 +49,7 @@ const ProfileWalletBalance = () => { $ {printableUsdc(BigInt(Math.floor(Number(getMaxBalanceToken?.value || 0) * 10 ** 6)))} </div> {getMaxBalanceToken?.symbol && getMaxBalanceToken?.name && ( - <div className="text-grey-1 text-xs"> + <div className="text-xs text-grey-1"> {getMaxBalanceToken?.symbol} on {getMaxBalanceToken?.name} </div> )} diff --git a/src/components/Profile/Components/TableComponent.tsx b/src/components/Profile/Components/TableComponent.tsx index bb1492b0..ceb1297f 100644 --- a/src/components/Profile/Components/TableComponent.tsx +++ b/src/components/Profile/Components/TableComponent.tsx @@ -119,7 +119,7 @@ export const TableComponent = ({ <td className="td-custom"> {!data.dashboardItem.status ? ( - <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> + <div className="border border-grey-1 px-2 py-1 text-center text-grey-1"> <Loading /> </div> ) : data.dashboardItem.status === 'claimed' ? ( @@ -135,11 +135,11 @@ export const TableComponent = ({ paid </div> ) : data.dashboardItem.status ? ( - <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> + <div className="border border-grey-1 px-2 py-1 text-center text-grey-1"> {data.dashboardItem.status.toLowerCase().replaceAll('_', ' ')} </div> ) : ( - <div className="border-grey-1 text-grey-1 border px-2 py-1 text-center"> + <div className="border border-grey-1 px-2 py-1 text-center text-grey-1"> pending </div> )} diff --git a/src/components/Profile/Components/Tabs.tsx b/src/components/Profile/Components/Tabs.tsx index 0992164c..f90c2702 100644 --- a/src/components/Profile/Components/Tabs.tsx +++ b/src/components/Profile/Components/Tabs.tsx @@ -22,7 +22,7 @@ export const Tabs = ({ className, classButton, items, value, setValue }: TabsPro <div className={` flex flex-wrap ${className}`}> {items.map((item, index) => ( <button - className={`text-md hover:text-grey-1 whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color ${ + className={`text-md whitespace-nowrap rounded px-5 py-1 font-bold outline-none transition-colors tap-highlight-color hover:text-grey-1 ${ value === item.value ? 'bg-n-1 !text-white dark:bg-white/[0.08]' : '' } ${classButton}`} onClick={() => handleClick(item.value, item.onClick)} diff --git a/src/components/Request/Components/ReferenceAndAttachment.tsx b/src/components/Request/Components/ReferenceAndAttachment.tsx index deb30c33..2875b519 100644 --- a/src/components/Request/Components/ReferenceAndAttachment.tsx +++ b/src/components/Request/Components/ReferenceAndAttachment.tsx @@ -21,7 +21,7 @@ export const ReferenceAndAttachment = ({ href={attachmentUrl} download target="_blank" - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " + className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " > <Icon name={'download'} /> Download attachment diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx index 554871bf..2f7564cf 100644 --- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx @@ -32,7 +32,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con <div className="flex w-full flex-col items-center justify-center gap-2"> <label className="text-h8 ">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Token</label> </div> @@ -42,7 +42,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {tokenAmountAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -52,7 +52,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {chainAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -70,7 +70,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {recipientAddressAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Requester</label> </div> diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index 38d734d5..7cd60ecf 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -415,9 +415,9 @@ export const InitialView = ({ )} {!isFeeEstimationError && ( <> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -443,9 +443,9 @@ export const InitialView = ({ </div> {null !== calculatedSlippage && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'money-out'} className="fill-grey-1 h-4" /> + <Icon name={'money-out'} className="h-4 fill-grey-1" /> <label className="font-bold">Max slippage</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx index d28bf351..198026a5 100644 --- a/src/components/Request/Pay/Views/Success.view.tsx +++ b/src/components/Request/Pay/Views/Success.view.tsx @@ -108,7 +108,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } attachmentUrl={requestLinkData?.attachmentUrl} /> <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal"> - <label className="text-grey-1 text-center text-h8 font-normal">Transaction details</label> + <label className="text-center text-h8 font-normal text-grey-1">Transaction details</label> <div className="flex w-full flex-row items-center justify-between gap-1"> <label className="">Source chain:</label> <Link className="cursor-pointer underline" href={sourceUrlWithTx}> diff --git a/src/components/Setup/Views/Signup.tsx b/src/components/Setup/Views/Signup.tsx index 32d5ca9a..d5cdb3b5 100644 --- a/src/components/Setup/Views/Signup.tsx +++ b/src/components/Setup/Views/Signup.tsx @@ -102,7 +102,7 @@ const SignupStep = () => { {error && <p className="text-sm font-bold text-error">{error}</p>} </div> <div> - <p className="border-grey-1 text-grey-1 border-t pt-2 text-center text-xs"> + <p className="border-t border-grey-1 pt-2 text-center text-xs text-grey-1"> <span>By creating account you agree with </span> <Link rel="noopener noreferrer" diff --git a/src/components/Setup/components/SetupWrapper.tsx b/src/components/Setup/components/SetupWrapper.tsx index 0744adab..bce9b356 100644 --- a/src/components/Setup/components/SetupWrapper.tsx +++ b/src/components/Setup/components/SetupWrapper.tsx @@ -99,7 +99,7 @@ const ImageSection = ({ <div className={twMerge( containerClass, - 'bg-secondary-3/100 relative flex w-full flex-row items-center justify-center overflow-hidden px-4 md:h-[100dvh] md:w-7/12 md:px-6' + 'relative flex w-full flex-row items-center justify-center overflow-hidden bg-secondary-3/100 px-4 md:h-[100dvh] md:w-7/12 md:px-6' )} > {/* render animated star decorations */} @@ -134,7 +134,7 @@ const ImageSection = ({ <div className={classNames( containerClass, - 'bg-secondary-3/100 flex w-full flex-row items-center justify-center md:h-[100dvh] md:w-7/12', + 'flex w-full flex-row items-center justify-center bg-secondary-3/100 md:h-[100dvh] md:w-7/12', screenId === 'success' && 'bg-secondary-1/15' )} > diff --git a/src/components/Welcome/welcomeSDK.tsx b/src/components/Welcome/welcomeSDK.tsx index b623b252..9a683b8a 100644 --- a/src/components/Welcome/welcomeSDK.tsx +++ b/src/components/Welcome/welcomeSDK.tsx @@ -269,7 +269,7 @@ export function WelcomeSDK() { </div> </div> - <div className="center-xy z-index-1 bg-primary-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black py-3 lg:flex lg:pb-16 lg:pt-16 "> + <div className="center-xy z-index-1 relative hidden w-1/3 items-center justify-center overflow-hidden border-l-2 border-black bg-primary-1 py-3 lg:flex lg:pb-16 lg:pt-16 "> <img src={PEANUTMAN_HAPPY.src} className="absolute duration-200 hover:rotate-12" @@ -279,11 +279,11 @@ export function WelcomeSDK() { </div> <div className="grid w-full grid-cols-1 gap-4 px-4 py-2 text-black lg:grid-cols-3"> - <label className="bg-primary-1 flex items-center justify-center border border-n-2 px-4 py-8 text-center text-h3 font-black sm:px-16"> + <label className="flex items-center justify-center border border-n-2 bg-primary-1 px-4 py-8 text-center text-h3 font-black sm:px-16"> 300k+ Transactions </label> - <label className="bg-secondary-1 flex items-center justify-center border border-n-2 px-4 py-8 text-center text-h3 font-black sm:px-16"> + <label className="flex items-center justify-center border border-n-2 bg-secondary-1 px-4 py-8 text-center text-h3 font-black sm:px-16"> 105k+ Unique wallet addresses </label> @@ -292,7 +292,7 @@ export function WelcomeSDK() { </label> </div> <div className="w-full px-4 text-black"> - <div className="bg-primary-1 flex w-full flex-col items-center justify-between gap-4 border border-n-2 py-8 lg:flex-row "> + <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-primary-1 py-8 lg:flex-row "> <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3"> <a href="https://docs.peanut.to/overview/what-are-links" target="_blank"> <img @@ -326,7 +326,7 @@ export function WelcomeSDK() { </div> </div> <div className="w-full px-4 text-black"> - <div className="bg-secondary-1 flex w-full flex-col items-center justify-between gap-4 border border-n-2 py-8 lg:flex-row-reverse "> + <div className="flex w-full flex-col items-center justify-between gap-4 border border-n-2 bg-secondary-1 py-8 lg:flex-row-reverse "> <div className="relative flex items-center justify-center px-8 lg:h-1/3 lg:w-1/3"> <a href="https://docs.peanut.to/overview/case-studies/raffles-to-boost-uwas-and-transactions" diff --git a/src/styles/globals.css b/src/styles/globals.css index a1517b19..14992060 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -3,10 +3,10 @@ @tailwind utilities; :root { - --primary-color: #FF90E8; - --secondary-color: #6340DF; - --background-color: #90A8ED; - --accent-color: #6340DF; + --primary-color: #ff90e8; + --secondary-color: #6340df; + --background-color: #90a8ed; + --accent-color: #6340df; } @layer components { @@ -57,7 +57,7 @@ Firefox input[type='number'] { } } -.scroller>span { +.scroller > span { position: absolute; top: 0; animation: slide 10s infinite; @@ -313,4 +313,4 @@ Firefox input[type='number'] { @apply font-sans; font-stretch: 50; font-weight: 400; -} \ No newline at end of file +} From d84e51393e9456d710fca267977275221eaabfaf Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:04:44 +0530 Subject: [PATCH 07/12] fix: tx badge comp import --- .../Global/TransactionBadge/index.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/Global/TransactionBadge/index.tsx diff --git a/src/components/Global/TransactionBadge/index.tsx b/src/components/Global/TransactionBadge/index.tsx new file mode 100644 index 00000000..2c0df154 --- /dev/null +++ b/src/components/Global/TransactionBadge/index.tsx @@ -0,0 +1,35 @@ +'use client' +import { twMerge } from 'tailwind-merge' + +interface BadgeProps { + status: string + className?: string +} + +const getStatusStyles = (status: string): string => { + switch (status.toLowerCase()) { + case 'claimed': + return 'border-pink-1 text-pink-1' + case 'pending': + case 'unclaimed': + return 'border-n-3 text-n-3' + case 'paid': + case 'successful': + return 'border-success-1 text-success-1' + case 'canceled': + case 'error': + return 'border-error text-error' + default: + return 'border-n-3 text-n-3' + } +} + +export const TransactionBadge = ({ status, className }: BadgeProps) => { + const statusStyles = getStatusStyles(status) + + return ( + <div className={twMerge('border p-0.5 text-center text-xs font-semibold capitalize', statusStyles, className)}> + {status.toLowerCase()} + </div> + ) +} From 1fca83a820be77cc1b525983c1ed2a708fc61f06 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:10:24 +0530 Subject: [PATCH 08/12] style: use new css class in faq --- src/components/Global/FAQs/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Global/FAQs/index.tsx b/src/components/Global/FAQs/index.tsx index 769d8ad2..fe2f819e 100644 --- a/src/components/Global/FAQs/index.tsx +++ b/src/components/Global/FAQs/index.tsx @@ -1,10 +1,9 @@ 'use client' -import { useState, useCallback } from 'react' -import { motion, AnimatePresence } from 'framer-motion' -import { Box, Stack, Flex } from '@chakra-ui/react' +import { Box, Flex, Stack } from '@chakra-ui/react' +import { AnimatePresence, motion } from 'framer-motion' import dynamic from 'next/dynamic' -import { PeanutsBG } from '@/assets' +import { useCallback, useState } from 'react' // Dynamically import Icon for lazy loading const Icon = dynamic(() => import('@/components/Global/Icon'), { @@ -39,7 +38,7 @@ export function FAQsPanel({ heading, questions }: FAQsProps) { transition={{ type: 'spring', damping: 10 }} className="relative mx-auto max-w-3xl rounded-md border-2 border-n-1 bg-white px-2 py-6 shadow ring-2 ring-white transition-transform duration-300 hover:rotate-0 md:-rotate-2 md:p-14" > - <h2 className="bg-primary absolute -left-2 -top-8 rounded-full border-2 border-n-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> + <h2 className="bg-primary-1 absolute -left-2 -top-8 rounded-full border-2 border-n-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> {heading} </h2> From ece87732e7439a442796e134473ba3776e02c3d1 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:18:38 +0530 Subject: [PATCH 09/12] fix: format --- src/components/Global/FAQs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Global/FAQs/index.tsx b/src/components/Global/FAQs/index.tsx index fe2f819e..3be551e3 100644 --- a/src/components/Global/FAQs/index.tsx +++ b/src/components/Global/FAQs/index.tsx @@ -38,7 +38,7 @@ export function FAQsPanel({ heading, questions }: FAQsProps) { transition={{ type: 'spring', damping: 10 }} className="relative mx-auto max-w-3xl rounded-md border-2 border-n-1 bg-white px-2 py-6 shadow ring-2 ring-white transition-transform duration-300 hover:rotate-0 md:-rotate-2 md:p-14" > - <h2 className="bg-primary-1 absolute -left-2 -top-8 rounded-full border-2 border-n-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> + <h2 className="absolute -left-2 -top-8 rounded-full border-2 border-n-1 bg-primary-1 px-5 py-3 font-display text-[1.5rem] font-bold text-white shadow ring-2 ring-white sm:-left-6 md:text-[2rem]"> {heading} </h2> From 1ae2b336843ff7c8229e2f2456f48f954b4af7a0 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:40:52 +0530 Subject: [PATCH 10/12] fix: focused wallet issue when clicking disconnected wallet card --- src/app/(mobile-ui)/home/page.tsx | 14 +++++++++----- src/app/(mobile-ui)/wallet/page.tsx | 17 ++++++++++------- src/redux/slices/wallet-slice.ts | 7 +++++++ src/redux/types/wallet.types.ts | 1 + src/utils/general.utils.ts | 3 +++ 5 files changed, 30 insertions(+), 12 deletions(-) diff --git a/src/app/(mobile-ui)/home/page.tsx b/src/app/(mobile-ui)/home/page.tsx index b7184c0a..757780e3 100644 --- a/src/app/(mobile-ui)/home/page.tsx +++ b/src/app/(mobile-ui)/home/page.tsx @@ -10,6 +10,8 @@ import { useZeroDev } from '@/hooks/useZeroDev' import { useWallet } from '@/hooks/wallet/useWallet' import { useWalletConnection } from '@/hooks/wallet/useWalletConnection' import { WalletProviderType } from '@/interfaces' +import { useAppDispatch } from '@/redux/hooks' +import { walletActions } from '@/redux/slices/wallet-slice' import { getUserPreferences, updateUserPreferences } from '@/utils' import classNames from 'classnames' import { motion, useAnimation } from 'framer-motion' @@ -21,6 +23,7 @@ const cardWidth = 300 const cardMargin = 16 export default function Home() { + const dispatch = useAppDispatch() const controls = useAnimation() const router = useRouter() const carouselRef = useRef<HTMLDivElement>(null) @@ -31,16 +34,16 @@ export default function Home() { return prefs?.balanceHidden ?? false }) - const { addBYOW, username } = useAuth() + const { username } = useAuth() const { selectedWallet, wallets, isPeanutWallet, isConnected, setSelectedWallet, isWalletConnected } = useWallet() - // Initialize focusedIndex to match selectedWalletIndex + // initialize focusedIndex to match selectedWalletIndex const rawIndex = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address) const selectedWalletIndex = rawIndex === -1 ? 0 : rawIndex const [focusedIndex, setFocusedIndex] = useState(selectedWalletIndex) - // Update focusedIndex when selectedWallet changes + // update focusedIndex when selectedWallet changes useEffect(() => { const index = wallets.findIndex((wallet) => wallet.address === selectedWallet?.address) if (index !== -1) { @@ -75,6 +78,7 @@ export default function Home() { if (focusedIndex !== index) { setFocusedIndex(index) + dispatch(walletActions.setFocusedWallet(wallet)) controls.start({ x: -(index * (cardWidth + cardMargin)), transition: { type: 'spring', stiffness: 300, damping: 30 }, @@ -105,6 +109,8 @@ export default function Home() { setFocusedIndex(targetIndex) if (targetIndex < wallets.length) { + dispatch(walletActions.setFocusedWallet(wallets[targetIndex])) + const targetWallet = wallets[targetIndex] if (targetWallet.walletProviderType === WalletProviderType.PEANUT || isWalletConnected(targetWallet)) { setSelectedWallet(targetWallet) @@ -177,8 +183,6 @@ export default function Home() { wallet={wallet} username={username ?? ''} selected={selectedWalletIndex === index} - // isConnected={isWalletConnected(wallet)} - // isUsable={isWalletUsable(wallet)} onClick={() => handleCardClick(index)} index={index} isBalanceHidden={isBalanceHidden} diff --git a/src/app/(mobile-ui)/wallet/page.tsx b/src/app/(mobile-ui)/wallet/page.tsx index b9afa42c..68156240 100644 --- a/src/app/(mobile-ui)/wallet/page.tsx +++ b/src/app/(mobile-ui)/wallet/page.tsx @@ -5,22 +5,25 @@ import { ArrowIcon, Button, Card } from '@/components/0_Bruddle' import Icon from '@/components/Global/Icon' import { HomeLink } from '@/components/Home/HomeLink' import { useAuth } from '@/context/authContext' -import { useWallet } from '@/hooks/wallet/useWallet' import { WalletProviderType } from '@/interfaces' +import { useWalletStore } from '@/redux/hooks' import { printableUsdc } from '@/utils' import { motion } from 'framer-motion' import Link from 'next/link' const WalletDetailsPage = () => { - const { selectedWallet } = useWallet() + const { focusedWallet, wallets } = useWalletStore() const { user } = useAuth() - const isActiveWalletPW = selectedWallet?.walletProviderType === WalletProviderType.PEANUT - const isActiveWalletBYOW = selectedWallet?.walletProviderType === WalletProviderType.BYOW + + const walletDetails = wallets.find((wallet) => wallet.address === focusedWallet) + + const isActiveWalletPW = walletDetails?.walletProviderType === WalletProviderType.PEANUT + const isActiveWalletBYOW = walletDetails?.walletProviderType === WalletProviderType.BYOW return ( <div className="flex w-full flex-row justify-center gap-2"> <div className="flex w-[100%] flex-col gap-4 sm:w-[90%] sm:gap-2 md:w-[70%] lg:w-[35%]"> - {selectedWallet && ( + {focusedWallet && ( <Card shadowSize="4" className="w-full rounded-md py-5"> <Card.Content className="flex h-full flex-row items-center justify-evenly"> <img src={smallPeanut.src} className="h-15 w-15 object-contain" /> @@ -31,7 +34,7 @@ const WalletDetailsPage = () => { )} {isActiveWalletBYOW && ( <p className="text-xl sm:text-2xl"> - <span className="font-bold">{selectedWallet.address}</span>.peanut.wallet + <span className="font-bold">{walletDetails.address}</span>.peanut.wallet </p> )} </Card.Content> @@ -40,7 +43,7 @@ const WalletDetailsPage = () => { <Card shadowSize="4" className="w-full rounded-md py-10"> <Card.Content className="flex h-full flex-row items-center justify-center"> - <div className="text-5xl">$ {printableUsdc(selectedWallet?.balance ?? 0n)}</div> + <div className="text-5xl">$ {printableUsdc(walletDetails?.balance ?? 0n)}</div> </Card.Content> </Card> <div className="flex flex-row gap-2"> diff --git a/src/redux/slices/wallet-slice.ts b/src/redux/slices/wallet-slice.ts index f0b95740..48d0f0d6 100644 --- a/src/redux/slices/wallet-slice.ts +++ b/src/redux/slices/wallet-slice.ts @@ -5,6 +5,7 @@ import { WalletUIState } from '../types/wallet.types' const initialState: WalletUIState = { selectedAddress: getUserPreferences()?.lastSelectedWallet?.address, + focusedWallet: getUserPreferences()?.lastFocusedWallet?.address, signInModalVisible: false, wallets: [], isConnected: false, @@ -21,6 +22,12 @@ const walletSlice = createSlice({ lastSelectedWallet: { address: action.payload }, }) }, + setFocusedWallet: (state, action) => { + state.focusedWallet = action.payload.address + updateUserPreferences({ + lastFocusedWallet: { address: action.payload.address }, + }) + }, setSignInModalVisible: (state, action) => { state.signInModalVisible = action.payload }, diff --git a/src/redux/types/wallet.types.ts b/src/redux/types/wallet.types.ts index cda2cbe7..932c9d5f 100644 --- a/src/redux/types/wallet.types.ts +++ b/src/redux/types/wallet.types.ts @@ -2,6 +2,7 @@ import { IWallet } from '@/interfaces' export interface WalletUIState { selectedAddress?: string | undefined + focusedWallet?: string | undefined signInModalVisible: boolean wallets: IWallet[] isConnected: boolean diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts index a686f0ba..cf778eb5 100644 --- a/src/utils/general.utils.ts +++ b/src/utils/general.utils.ts @@ -815,6 +815,9 @@ export type UserPreferences = { lastSelectedWallet?: { address: string } + lastFocusedWallet?: { + address: string + } balanceHidden?: boolean } From 7b713c179498f9f6ef2601940fe8f009042a9d77 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 21 Jan 2025 14:50:59 +0530 Subject: [PATCH 11/12] =?UTF-8?q?style:=20revert=20back=20to=20left=20alig?= =?UTF-8?q?ned=20texts=20=F0=9F=98=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/0_Bruddle/Button.tsx | 2 +- src/components/0_Bruddle/Card.tsx | 4 +- src/components/Cashout/CashoutStatus.tsx | 7 +-- .../Cashout/Components/Initial.view.tsx | 20 ++++--- .../Claim/Generic/AlreadyClaimed.view.tsx | 16 +++--- .../Claim/Generic/SenderClaim.view.tsx | 2 +- .../Claim/Generic/WrongPassword.view.tsx | 4 +- src/components/Claim/Link/Initial.view.tsx | 16 +++--- .../Claim/Link/Onchain/Confirm.view.tsx | 20 +++---- .../Claim/Link/Onchain/Success.view.tsx | 14 ++--- src/components/Create/Link/Confirm.view.tsx | 29 +++++----- src/components/Create/Link/Initial.view.tsx | 21 ++++--- src/components/Create/Link/Input.view.tsx | 13 ++--- src/components/Create/Link/Success.view.tsx | 6 +- src/components/Global/KYCComponent/index.tsx | 23 ++++---- .../Global/LinkAccountComponent/index.tsx | 28 +++++----- .../Global/LoginComponent/index.tsx | 8 +-- .../Global/RegisterComponent/index.tsx | 28 +++++----- src/components/Home/HomeWaitlist.tsx | 8 +-- src/components/Kyc/index.tsx | 4 +- .../LandingPage/BuildOnUs/index.tsx | 4 +- src/components/LinkAccount/index.tsx | 2 +- src/components/Login/index.tsx | 10 ++-- src/components/Offramp/Confirm.view.tsx | 48 ++++++++-------- src/components/Offramp/PromoCodeChecker.tsx | 8 +-- src/components/Offramp/Success.view.tsx | 18 +++--- .../Profile/Components/SkeletonPage.tsx | 2 +- src/components/Refund/index.tsx | 4 +- src/components/Register/index.tsx | 10 ++-- .../Request/Create/Views/Initial.view.tsx | 6 +- .../Request/Create/Views/Success.view.tsx | 4 +- .../Views/GeneralViews/AlreadyPaid.view.tsx | 18 +++--- .../Request/Pay/Views/Initial.view.tsx | 14 ++--- .../Request/Pay/Views/Success.view.tsx | 6 +- tailwind.config.js | 56 ++++++++++++++++--- 35 files changed, 255 insertions(+), 228 deletions(-) diff --git a/src/components/0_Bruddle/Button.tsx b/src/components/0_Bruddle/Button.tsx index 97bb1591..da3b39a1 100644 --- a/src/components/0_Bruddle/Button.tsx +++ b/src/components/0_Bruddle/Button.tsx @@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>( ref ) => { const buttonClasses = twMerge( - 'btn w-full', + 'btn w-full flex items-center gap-2', buttonVariants[variant], size && buttonSizes[size], shape === 'square' && 'btn-square', diff --git a/src/components/0_Bruddle/Card.tsx b/src/components/0_Bruddle/Card.tsx index 56e171bd..049dce5a 100644 --- a/src/components/0_Bruddle/Card.tsx +++ b/src/components/0_Bruddle/Card.tsx @@ -47,13 +47,13 @@ const Header = ({ children, className, ...props }: React.HTMLAttributes<HTMLDivE ) const Title = ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => ( - <h3 className={twMerge('text-h4 font-semibold sm:text-h3', className)} {...props}> + <h3 className={twMerge('pb-1 text-start text-h4 font-semibold sm:text-h3', className)} {...props}> {children} </h3> ) const Description = ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => ( - <p className={twMerge('text-sm text-gray-600 dark:text-gray-400', className)} {...props}> + <p className={twMerge('text-start text-sm text-gray-600 dark:text-gray-400', className)} {...props}> {children} </p> ) diff --git a/src/components/Cashout/CashoutStatus.tsx b/src/components/Cashout/CashoutStatus.tsx index 9ccd28a3..46a1c538 100644 --- a/src/components/Cashout/CashoutStatus.tsx +++ b/src/components/Cashout/CashoutStatus.tsx @@ -1,11 +1,10 @@ 'use client' -import { useEffect, useState } from 'react' import * as assets from '@/assets' -import { generateKeysFromString } from '@squirrel-labs/peanut-sdk' import * as utils from '@/utils' import Link from 'next/link' -import Icon from '../Global/Icon' +import { useEffect, useState } from 'react' import { Card } from '../0_Bruddle' +import Icon from '../Global/Icon' export const CashoutStatus = () => { const [cashoutStatus, setCashoutStatus] = useState<'FOUND' | 'NOT FOUND' | undefined>(undefined) @@ -47,7 +46,7 @@ export const CashoutStatus = () => { <Card.Title></Card.Title> </Card.Header> {cashoutStatus === 'FOUND' ? ( - <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-center"> + <div className="mx-auto flex max-w-[96%] flex-col items-center justify-center gap-4 pb-20 text-start"> <label className="text-h2">Cashout status</label> <div className="flex flex-col justify-center gap-3"> <label className="text-start text-h8 font-light"> diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index 494815f3..e401fc2e 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -262,13 +262,12 @@ export const InitialCashoutView = ({ <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> <Card.Title>Cash Out</Card.Title> - <Card.Description className="text-center"> + <Card.Description> Cash out your crypto to your bank account. Works best with popular stablecoins and other commonly traded tokens. </Card.Description> - <div className="mx-auto"> - <FAQComponent /> - </div> + + <FAQComponent /> </Card.Header> <Card.Content className="col gap-2"> <TokenAmountInput @@ -303,7 +302,10 @@ export const InitialCashoutView = ({ </> )} <div className="flex w-full flex-col justify-center gap-4"> - <RecipientInfoComponent /> + {!!user && + !!user.accounts.filter( + (account) => account.account_type === 'iban' || account.account_type === 'us' + ).length && <RecipientInfoComponent />} <div className="space-y-4"> {!user && isFetchingUser ? ( <div className="relative flex h-16 w-full items-center justify-center"> @@ -317,7 +319,7 @@ export const InitialCashoutView = ({ {!!user.accounts.filter( (account) => account.account_type === 'iban' || account.account_type === 'us' ).length && ( - <div className="flex w-full flex-col items-start justify-center gap-2 text-center"> + <div className="flex w-full flex-col items-start justify-center gap-2"> <label className="text-left text-h8 font-light"> Your linked bank accounts: </label> @@ -344,7 +346,7 @@ export const InitialCashoutView = ({ <div className="flex flex-grow items-center overflow-hidden"> <Icon name={'bank'} - className="mr-2 h-4 flex-shrink-0 fill-grey-1" + className="fill-grey-1 mr-2 h-4 flex-shrink-0" /> <label htmlFor={`bank-${index}`} @@ -436,7 +438,7 @@ export const InitialCashoutView = ({ {!isConnected && !isPeanutWallet ? 'Connect Wallet' : isLoading ? loadingState : 'Proceed'} </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} @@ -452,7 +454,7 @@ export const InitialCashoutView = ({ </span> )} {!xchainAllowed && ( - <span className=" text-h8 font-normal "> + <span className="text-start text-h8 font-normal"> <Icon name="warning" className="-mt-0.5" /> You cannot cashout on this chain. </span> )} diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx index 965c05e7..e4163b69 100644 --- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx +++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx @@ -26,11 +26,11 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </Card.Header> <Card.Content className="flex flex-col gap-2"> {dataAvailable && ( - <div className="flex w-full flex-col items-center justify-center gap-2"> - <label className="text-h8 ">This link previously contained:</label> + <div className="flex w-full flex-col items-start justify-center gap-2 py-2"> + <label className="text-h8">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> - <div className="flex w-max flex-row items-center justify-center gap-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 text-h8"> + <div className="flex w-max flex-row items-center justify-center gap-1 px-2"> <label className="font-bold">Token</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {tokenAmountAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {chainAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {senderAddressAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Sender</label> </div> @@ -78,7 +78,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter )} </div> )} - <label className="text-center text-h9 font-normal"> + <label className="text-start text-h9 font-normal"> We would like to hear from your experience. Hit us up on{' '} <a className="cursor-pointer text-black underline dark:text-white" diff --git a/src/components/Claim/Generic/SenderClaim.view.tsx b/src/components/Claim/Generic/SenderClaim.view.tsx index 0ed79fe3..ba447243 100644 --- a/src/components/Claim/Generic/SenderClaim.view.tsx +++ b/src/components/Claim/Generic/SenderClaim.view.tsx @@ -82,7 +82,7 @@ export const SenderClaimLinkView = ({ Go to recipient view </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Claim/Generic/WrongPassword.view.tsx b/src/components/Claim/Generic/WrongPassword.view.tsx index 19e54cba..724c9347 100644 --- a/src/components/Claim/Generic/WrongPassword.view.tsx +++ b/src/components/Claim/Generic/WrongPassword.view.tsx @@ -1,12 +1,10 @@ 'use client' -import * as _consts from '../Claim.consts' - import { PaymentsFooter } from '@/components/Global/PaymentsFooter' export const WrongPasswordClaimLink = () => { return ( - <div className="flex w-full flex-col items-center justify-center gap-6 text-center"> + <div className="flex w-full flex-col items-center justify-center gap-6 text-start"> <div className="space-y-2"> <h2 className="text-h2">Sorryyy</h2> <div className="">This link is malformed. Are you sure you copied it correctly?</div> diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index 603606e6..50d34b19 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -439,7 +439,7 @@ export const InitialClaimLinkView = ({ <FlowHeader /> <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title className="mx-auto"> + <Card.Title> <div className="flex w-full flex-col items-center justify-center gap-2"> <AddressLink address={claimLinkData.senderAddress} /> sent you {tokenPrice ? ( @@ -469,7 +469,7 @@ export const InitialClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " > <Icon name={'download'} /> Download attachment @@ -516,9 +516,9 @@ export const InitialClaimLinkView = ({ {recipient && isValidRecipient && recipientType !== 'iban' && recipientType !== 'us' && ( <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-grey-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -533,7 +533,7 @@ export const InitialClaimLinkView = ({ chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} { supportedSquidChainsAndTokens[ selectedRoute.route.params.toChain @@ -559,9 +559,9 @@ export const InitialClaimLinkView = ({ </div> )} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -662,7 +662,7 @@ export const InitialClaimLinkView = ({ </div> )} {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> {errorState.errorMessage === 'offramp unavailable' ? ( <label className="text-h8 font-normal text-red"> You can not claim this token to your bank account.{' '} diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx index e4af5a04..f90403ab 100644 --- a/src/components/Claim/Link/Onchain/Confirm.view.tsx +++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx @@ -114,10 +114,10 @@ export const ConfirmClaimLinkView = ({ <div> <FlowHeader onPrev={onPrev} disableBackBtn={isLoading} /> <Card> - <Card.Header className="mx-auto text-center"> - <Card.Title className="mx-auto text-center"> + <Card.Header> + <Card.Title> <AddressLink address={claimLinkData.senderAddress} /> <br /> sent you{' '} - <label className="text-center text-h2"> + <label className="text-start text-h2"> {claimLinkData.tokenAmount} {claimLinkData.tokenSymbol} <br /> on{' '} {supportedSquidChainsAndTokens[claimLinkData.chainId]?.axelarChainName} </label> @@ -137,7 +137,7 @@ export const ConfirmClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " > <Icon name={'download'} /> Download attachment @@ -180,9 +180,9 @@ export const ConfirmClaimLinkView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-grey-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -193,7 +193,7 @@ export const ConfirmClaimLinkView = ({ (chain) => chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} { supportedSquidChainsAndTokens[selectedRoute.route.params.toChain] ?.axelarChainName @@ -215,9 +215,9 @@ export const ConfirmClaimLinkView = ({ </div> )} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -251,7 +251,7 @@ export const ConfirmClaimLinkView = ({ </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx index 8477f8ca..8f659583 100644 --- a/src/components/Claim/Link/Onchain/Success.view.tsx +++ b/src/components/Claim/Link/Onchain/Success.view.tsx @@ -60,14 +60,12 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="mx-auto"> - <Card.Title className="mx-auto text-center">Yay!</Card.Title> - <Card.Description className="mx-auto text-center"> - You have successfully claimed your funds! - </Card.Description> + <Card.Header> + <Card.Title>Yay!</Card.Title> + <Card.Description>You have successfully claimed your funds!</Card.Description> </Card.Header> <Card.Content className="flex flex-col gap-2"> - <label className="text-center text-h8 font-normal text-grey-1">Transaction details</label> + <label className="text-grey-1 text-start text-h8 font-normal">Transaction details</label> {type === 'claimxchain' && ( <div className="flex flex-col items-start justify-center gap-1 text-h9 font-normal"> <div className="flex w-full flex-row items-center justify-between gap-1"> @@ -101,7 +99,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="h-4 fill-grey-1" /> + <Icon name="external" className="fill-grey-1 h-4" /> </Button> </Link> <Link className="" href={'/profile'}> @@ -112,7 +110,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ See your payments. </Button> </Link> - <label className="text-center text-h9 font-normal"> + <label className="text-start text-h9 font-normal"> We would like to hear from your experience. Hit us up on{' '} <a className="cursor-pointer text-black underline dark:text-white" diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index b0015de9..d16a6726 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -239,17 +239,14 @@ export const CreateLinkConfirmView = ({ <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title - style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }} - className="text-center" - > + <Card.Title style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}> {createType == 'link' ? 'Text Tokens' : createType == 'direct' ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}` : `Send to ${recipient.name}`} </Card.Title> - <Card.Description className="text-center"> + <Card.Description> {createType === 'link' && 'Make a payment with the link. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'} {createType === 'email_link' && @@ -274,35 +271,35 @@ export const CreateLinkConfirmView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {attachmentOptions.fileUrl && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="h-4 fill-grey-1" /> + <Icon name={'paperclip'} className="fill-grey-1 h-4" /> <label className="font-bold">Attachment</label> </div> <a href={attachmentOptions.fileUrl} download target="_blank"> - <Icon name={'download'} className="h-4 fill-grey-1" /> + <Icon name={'download'} className="fill-grey-1 h-4" /> </a> </div> )} {attachmentOptions.message && ( <div className="flex w-full flex-col items-center justify-center gap-1"> <div - className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1" + className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8" onClick={() => { setShowMessage(!showMessage) }} > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="h-4 fill-grey-1 " /> + <Icon name={'paperclip'} className="fill-grey-1 h-4 " /> <label className=" font-bold">Message</label> </div> <Icon name={'arrow-bottom'} - className={`h-4 cursor-pointer fill-grey-1 transition-transform ${showMessage && ' rotate-180'}`} + className={`fill-grey-1 h-4 cursor-pointer transition-transform ${showMessage && ' rotate-180'}`} /> </div> {showMessage && ( - <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8"> <label className="w-full text-start text-sm font-normal leading-4"> {attachmentOptions.message} </label> @@ -311,9 +308,9 @@ export const CreateLinkConfirmView = ({ </div> )} {transactionCostUSD !== undefined && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -360,14 +357,14 @@ export const CreateLinkConfirmView = ({ </Button> </div> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} {!crossChainDetails.find( (chain: any) => chain.chainId.toString() === selectedChainID.toString() ) && ( - <span className=" text-h8 font-normal "> + <span className=" text-start text-h8 font-normal"> <Icon name="warning" className="-mt-0.5" /> This chain does not support cross-chain claiming. </span> diff --git a/src/components/Create/Link/Initial.view.tsx b/src/components/Create/Link/Initial.view.tsx index f9d16523..456bd6a2 100644 --- a/src/components/Create/Link/Initial.view.tsx +++ b/src/components/Create/Link/Initial.view.tsx @@ -1,21 +1,20 @@ 'use client' +import { useSearchParams } from 'next/navigation' import { useContext, useEffect, useState } from 'react' import validator from 'validator' -import { useSearchParams } from 'next/navigation' -import * as _consts from '../Create.consts' -import * as _utils from '../Create.utils' -import * as utils from '@/utils' -import * as context from '@/context' -import RecipientInput from '@/components/Global/RecipientInput' +import { Button, Card } from '@/components/0_Bruddle' +import Divider from '@/components/0_Bruddle/Divider' +import { CrispButton } from '@/components/CrispChat' import Icon from '@/components/Global/Icon' -import { ethers } from 'ethers' import Loading from '@/components/Global/Loading' +import RecipientInput from '@/components/Global/RecipientInput' +import * as context from '@/context' +import * as utils from '@/utils' +import { ethers } from 'ethers' import { validate } from 'multicoin-address-validator' -import { CrispButton } from '@/components/CrispChat' -import { Button, Card } from '@/components/0_Bruddle' -import Divider from '@/components/0_Bruddle/Divider' +import * as _consts from '../Create.consts' export const CreateLinkInitialView = ({ onNext, @@ -201,7 +200,7 @@ export const CreateLinkInitialView = ({ )} {errorState.showError && ( <> - <div className="w-full text-center"> + <div className="w-full text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> {errorState.errorMessage.includes('We currently dont support ') && ( diff --git a/src/components/Create/Link/Input.view.tsx b/src/components/Create/Link/Input.view.tsx index d4f765ce..dd37e452 100644 --- a/src/components/Create/Link/Input.view.tsx +++ b/src/components/Create/Link/Input.view.tsx @@ -309,10 +309,7 @@ export const CreateLinkInputView = ({ <FlowHeader /> <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title - style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }} - className="text-center" - > + <Card.Title style={{ display: '-webkit-box', WebkitLineClamp: '2', WebkitBoxOrient: 'vertical' }}> {' '} {createType === 'link' ? 'Text Tokens' @@ -320,7 +317,7 @@ export const CreateLinkInputView = ({ ? `Send to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}` : `Send to ${recipient.name}`} </Card.Title> - <Card.Description className="mx-auto max-w-96 text-center"> + <Card.Description> {createType === 'link' && 'Deposit some crypto to the link, no need for wallet addresses. Send the link to the recipient. They will be able to claim the funds in any token on any chain from the link.'} {createType === 'email_link' && @@ -398,20 +395,20 @@ export const CreateLinkInputView = ({ </Button> */} </div> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} {!crossChainDetails.find( (chain: any) => chain.chainId.toString() === selectedChainID.toString() ) && ( - <span className=" text-h8 font-normal "> + <span className=" text-start text-h8 font-normal"> <Icon name="warning" className="-mt-0.5" /> This chain does not support cross-chain claiming. </span> )} - <span className="flex flex-row items-center justify-center gap-1 text-center text-h8"> + <span className="flex flex-row items-center justify-start gap-1 text-h8"> Learn about peanut cashout <MoreInfo text={ diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx index 4923b799..5adf9c7b 100644 --- a/src/components/Create/Link/Success.view.tsx +++ b/src/components/Create/Link/Success.view.tsx @@ -78,9 +78,9 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok return ( <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title className="text-center">Yay!</Card.Title> + <Card.Title>Yay!</Card.Title> </Card.Header> - <Card.Content className="flex flex-col gap-4 text-center"> + <Card.Content className="flex flex-col gap-4"> {link && <QRCodeWrapper url={link} />} {createType === 'direct' ? `You have successfully sent the funds to ${recipient.name?.endsWith('.eth') ? recipient.name : printableAddress(recipient.address ?? '')}.` @@ -125,7 +125,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="h-4 fill-grey-1" /> + <Icon name="external" className="fill-grey-1 h-4" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Global/KYCComponent/index.tsx b/src/components/Global/KYCComponent/index.tsx index ee6508f4..ab6ba931 100644 --- a/src/components/Global/KYCComponent/index.tsx +++ b/src/components/Global/KYCComponent/index.tsx @@ -1,21 +1,20 @@ 'use client' -import { useMemo, useState, useEffect } from 'react' import { Step, Steps, useSteps } from 'chakra-ui-steps' +import { useEffect, useMemo, useState } from 'react' -import * as utils from '@/utils' -import * as interfaces from '@/interfaces' +import { Card } from '@/components/0_Bruddle' +import { CrispButton } from '@/components/CrispChat' import * as consts from '@/constants' -import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper' -import { useForm } from 'react-hook-form' import { useAuth } from '@/context/authContext' +import * as interfaces from '@/interfaces' +import * as utils from '@/utils' +import { Divider, useToast } from '@chakra-ui/react' +import { useForm } from 'react-hook-form' +import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper' import Loading from '../Loading' import { GlobalLoginComponent } from '../LoginComponent' import { GlobalRegisterComponent } from '../RegisterComponent' -import { Divider } from '@chakra-ui/react' -import { CrispButton } from '@/components/CrispChat' -import { Card } from '@/components/0_Bruddle' -import { useToast } from '@chakra-ui/react' const steps = [ { label: 'Step 1: Provide personal details' }, @@ -460,7 +459,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on <div className="flex w-full flex-col items-center justify-center gap-2"> {errorState.showError && errorState.errorMessage === 'KYC under review' ? ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red "> KYC is under manual review, we might need additional documents.{' '} <CrispButton className="text-blue-600 underline">Chat with support</CrispButton> to @@ -468,12 +467,12 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on </label> </div> ) : errorState.errorMessage === 'KYC rejected' ? ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">KYC has been rejected.</label> <CrispButton className="text-blue-600 underline">Chat with support</CrispButton> </div> ) : ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Global/LinkAccountComponent/index.tsx b/src/components/Global/LinkAccountComponent/index.tsx index 79c73a4d..0bd0e3fa 100644 --- a/src/components/Global/LinkAccountComponent/index.tsx +++ b/src/components/Global/LinkAccountComponent/index.tsx @@ -1,19 +1,17 @@ import { Step, Steps, useSteps } from 'chakra-ui-steps' -import { useContext, useMemo, useState, useEffect } from 'react' +import { useEffect, useState } from 'react' import { useForm } from 'react-hook-form' -import * as utils from '@/utils' -import * as context from '@/context' -import Loading from '../Loading' -import CountryDropdown from '../CountrySelect' -import Link from 'next/link' -import Icon from '../Icon' import { useAuth } from '@/context/authContext' +import { IBridgeAccount, IResponse } from '@/interfaces' +import * as utils from '@/utils' +import { formatBankAccountDisplay, sanitizeBankAccount } from '@/utils/format.utils' import { Divider } from '@chakra-ui/react' +import Link from 'next/link' import { isIBAN } from 'validator' -import { IBridgeAccount, IResponse } from '@/interfaces' -import { USBankAccountInput } from '../USBankAccountInput' -import { sanitizeBankAccount, formatBankAccountDisplay } from '@/utils/format.utils' +import CountryDropdown from '../CountrySelect' +import Icon from '../Icon' +import Loading from '../Loading' const steps = [{ label: '1. Bank Account' }, { label: '2. Confirm details' }] @@ -404,7 +402,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba )} </button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} @@ -563,7 +561,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba )} </button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} @@ -574,7 +572,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba return user?.user?.kycStatus === 'approved' ? ( completedLinking ? ( - <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-center"> + <div className="flex w-full flex-col items-center justify-center gap-6 py-2 pb-20 text-start"> <p>You have successfully linked your account!</p> <Link className="absolute bottom-0 flex h-20 w-[27rem] w-full flex-row items-center justify-start gap-2 border-t-[1px] border-black bg-purple-3 px-4.5 dark:text-black" @@ -587,7 +585,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba </Link> </div> ) : ( - <div className="flex w-full flex-col items-center justify-center gap-6 px-2 text-center"> + <div className="flex w-full flex-col items-center justify-center gap-6 px-2 text-start"> <p className="text-h8 font-normal"> Complete the following steps to link your bank account to your peanut profile for a smooth cashout experience. @@ -624,7 +622,7 @@ export const GlobaLinkAccountComponent = ({ accountNumber, onCompleted }: IGloba </div> ) ) : ( - <div className="flex w-full flex-col items-center justify-center gap-6 py-2 text-center"> + <div className="flex w-full flex-col items-center justify-center gap-6 py-2 text-start"> <p className="text-h6"> Before you can link an account, please login or register & complete the kyc process. </p> diff --git a/src/components/Global/LoginComponent/index.tsx b/src/components/Global/LoginComponent/index.tsx index 859808d6..03d935d1 100644 --- a/src/components/Global/LoginComponent/index.tsx +++ b/src/components/Global/LoginComponent/index.tsx @@ -1,8 +1,8 @@ -import { useMemo, useState } from 'react' -import { FormProvider, useForm } from 'react-hook-form' +import { Button, Field } from '@/components/0_Bruddle' import { useAuth } from '@/context/authContext' import crypto from 'crypto' -import { Button, Field } from '@/components/0_Bruddle' +import { useMemo, useState } from 'react' +import { FormProvider, useForm } from 'react-hook-form' interface ILoginComponentProps { email?: string @@ -155,7 +155,7 @@ export const GlobalLoginComponent = ({ email, password, onSubmit, redirectUrl }: Login </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-red-500 text-h8 font-normal ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Global/RegisterComponent/index.tsx b/src/components/Global/RegisterComponent/index.tsx index 32956ca8..a78a1f7f 100644 --- a/src/components/Global/RegisterComponent/index.tsx +++ b/src/components/Global/RegisterComponent/index.tsx @@ -1,11 +1,8 @@ -import { useContext, useMemo, useState } from 'react' +import { useAuth } from '@/context/authContext' +import crypto from 'crypto' +import { useMemo, useState } from 'react' import { useForm } from 'react-hook-form' import Loading from '../Loading' -import crypto from 'crypto' -import * as context from '@/context' -import { useAuth } from '@/context/authContext' -import Link from 'next/link' -import * as utils from '@/utils' interface IRegisterComponentProps { userId?: string name?: string @@ -112,7 +109,10 @@ export const GlobalRegisterComponent = ({ } return ( - <form className="flex w-full flex-col items-start justify-center gap-2" onSubmit={handleSubmit(handleOnSubmit)}> + <form + className="flex w-full flex-col items-stretch justify-center gap-2" + onSubmit={handleSubmit(handleOnSubmit)} + > <input {...register('name', { required: 'This field is required' })} className={`custom-input custom-input-xs ${errors.name ? 'border border-red' : ''}`} @@ -138,7 +138,7 @@ export const GlobalRegisterComponent = ({ } }} /> - {errors.email && <span className="text-h9 font-normal text-red">{errors.email.message}</span>} + {errors.email && <span className="text-start text-h9 font-normal text-red">{errors.email.message}</span>} <input {...register('password', { required: 'This field is required' })} @@ -152,7 +152,9 @@ export const GlobalRegisterComponent = ({ } }} /> - {errors.password && <span className="text-h9 font-normal text-red">{errors.password.message}</span>} + {errors.password && ( + <span className="text-start text-h9 font-normal text-red">{errors.password.message}</span> + )} <button type="submit" className="btn btn-purple h-8 w-full text-h8" disabled={isLoading}> {isLoading ? ( @@ -164,13 +166,13 @@ export const GlobalRegisterComponent = ({ )} </button> {errorState.showError && errorState.errorMessage === 'User already exists' ? ( - <div className="w-full text-center"> - <span className=" text-h8 font-normal ">User already exists</span> + <div className="w-full"> + <span className="text-start text-h8 font-normal">User already exists</span> </div> ) : ( errorState.showError && ( - <div className="w-full text-center"> - <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> + <div className="w-full text-start"> + <label className="text-start text-h8 font-normal text-red">{errorState.errorMessage}</label> </div> ) )} diff --git a/src/components/Home/HomeWaitlist.tsx b/src/components/Home/HomeWaitlist.tsx index 8262a553..868e70c4 100644 --- a/src/components/Home/HomeWaitlist.tsx +++ b/src/components/Home/HomeWaitlist.tsx @@ -39,12 +39,12 @@ const HomeWaitlist = () => { </Card> )} <img src={chillPeanutAnim.src} alt="peanut-club" className="w-[300px] object-cover" /> - <div className="mt-5 w-full text-center"> + <div className="mt-5 w-full text-start"> {username && ( <Card> - <Card.Header className="text-center"> - <Card.Title className="w-full text-center">You're all set up!</Card.Title> - <Card.Description className="w-full text-center"> + <Card.Header> + <Card.Title className="w-full text-start">You're all set up!</Card.Title> + <Card.Description className="w-full text-start"> Join the group at{' '} <a href="https://t.me/clubpeanut" diff --git a/src/components/Kyc/index.tsx b/src/components/Kyc/index.tsx index 7dc89637..2157f569 100644 --- a/src/components/Kyc/index.tsx +++ b/src/components/Kyc/index.tsx @@ -44,7 +44,7 @@ export const KYCComponent = () => { if (user && user?.user?.kycStatus === 'verified') { return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="text-center"> + <Card.Header> <Card.Title>Welcome back, {user?.user?.username ?? user?.user?.email}</Card.Title> <Card.Description>You have already completed the KYC process!</Card.Description> </Card.Header> @@ -57,7 +57,7 @@ export const KYCComponent = () => { {isLoading ? loadingState : 'Logout'} </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/LandingPage/BuildOnUs/index.tsx b/src/components/LandingPage/BuildOnUs/index.tsx index ff4ac7f1..06c97a09 100644 --- a/src/components/LandingPage/BuildOnUs/index.tsx +++ b/src/components/LandingPage/BuildOnUs/index.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion' export default function BuildOnUs() { return ( - <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-primary-1"> + <div className="bg-primary-1 relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden"> <motion.div className="flex flex-col items-center gap-8" initial={{ opacity: 0, translateY: 20 }} @@ -32,7 +32,7 @@ export default function BuildOnUs() { Integrate </motion.button> </a> - <p className="max-w-[600px] px-4 text-center text-lg text-n-1 md:max-w-[50%]"> + <p className="max-w-[600px] px-4 text-start text-lg text-n-1 md:max-w-[50%]"> In awe about Peanut? Want to have something similar in your app or wallet? The app is powered by Peanut Protocol which comes with a powerful set of SDKs and APIs that make any payment as smooth as butter diff --git a/src/components/LinkAccount/index.tsx b/src/components/LinkAccount/index.tsx index 00e9c165..04c64736 100644 --- a/src/components/LinkAccount/index.tsx +++ b/src/components/LinkAccount/index.tsx @@ -61,7 +61,7 @@ export const LinkAccountComponent = () => { {isLoading ? loadingState : 'Logout'} </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index 6edc134e..020dc991 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -1,12 +1,12 @@ 'use client' +import * as assets from '@/assets' +import * as context from '@/context' import { useAuth } from '@/context/authContext' -import { GlobalLoginComponent } from '../Global/LoginComponent' import { Divider } from '@chakra-ui/react' +import Link from 'next/link' import { useContext, useState } from 'react' -import * as context from '@/context' import Loading from '../Global/Loading' -import Link from 'next/link' -import * as assets from '@/assets' +import { GlobalLoginComponent } from '../Global/LoginComponent' const LoginComponent = () => { const { user, logoutUser, isFetchingUser } = useAuth() const [errorState, setErrorState] = useState<{ @@ -60,7 +60,7 @@ const LoginComponent = () => { )} </button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx index d5088a37..53634280 100644 --- a/src/components/Offramp/Confirm.view.tsx +++ b/src/components/Offramp/Confirm.view.tsx @@ -662,20 +662,20 @@ export const OfframpConfirmView = ({ /> <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="mx-auto"> - <Card.Title className="mx-auto text-center">Confirm your details</Card.Title> - <Card.Description className="mx-auto text-center"> + <Card.Header> + <Card.Title>Confirm your details</Card.Title> + <Card.Description> {offrampType == OfframpType.CASHOUT && ( - <> - <label className="text-center text-h8 font-light"> + <div className="flex flex-col items-center justify-center gap-2"> + <label className="text-start text-h8 font-light"> Cash out your crypto to your bank account. From any token, any chain, directly to your bank account. </label> <FAQComponent /> - </> + </div> )} {offrampType == OfframpType.CLAIM && ( - <label className="text-center text-h8 font-light"> + <label className="text-start text-h8 font-light"> Cash out this link's crypto to your bank account. Works best with popular stablecoins and other commonly traded tokens. </label> @@ -704,9 +704,9 @@ export const OfframpConfirmView = ({ <div className="my-2 flex w-full flex-col items-center justify-center gap-2"> <label className="self-start text-h8 font-light">Please confirm all details:</label> <div className="flex w-full flex-col items-center justify-center gap-2"> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'profile'} className="h-4 fill-grey-1" /> + <Icon name={'profile'} className="fill-grey-1 h-4" /> <label className="font-bold">Name</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -714,9 +714,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'email'} className="h-4 fill-grey-1" /> + <Icon name={'email'} className="fill-grey-1 h-4" /> <label className="font-bold">Email</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -724,9 +724,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'bank'} className="h-4 fill-grey-1" /> + <Icon name={'bank'} className="fill-grey-1 h-4" /> <label className="font-bold">Bank account</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -735,9 +735,9 @@ export const OfframpConfirmView = ({ </div> {offrampType == OfframpType.CLAIM && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="h-4 fill-grey-1" /> + <Icon name={'forward'} className="fill-grey-1 h-4" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -746,8 +746,8 @@ export const OfframpConfirmView = ({ (chain) => chain.chainId === claimLinkData?.chainId )?.name }{' '} - <Icon name={'arrow-next'} className="h-4 fill-grey-1" /> Offramp{' '} - <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" /> Offramp{' '} + <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} {recipientType?.toUpperCase()}{' '} <MoreInfo text={`Wait, crypto can be converted to real money??? How cool!`} @@ -756,9 +756,9 @@ export const OfframpConfirmView = ({ </div> )} - <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -811,9 +811,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-grey-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">Total</label> </div> <div className="flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -841,9 +841,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-grey-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> @@ -939,7 +939,7 @@ export const OfframpConfirmView = ({ )} {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> {errorState.errorMessage === 'offramp unavailable' ? ( <label className="text-h8 font-normal text-red"> This token cannot be cashed out directly.{' '} diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx index 2adb9226..79454d3d 100644 --- a/src/components/Offramp/PromoCodeChecker.tsx +++ b/src/components/Offramp/PromoCodeChecker.tsx @@ -82,15 +82,15 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe {!promoCheckerState.isApplied && ( <div onClick={handleExpandToggle} - className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1 transition-colors duration-200 hover:bg-gray-50" + className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 transition-colors duration-200 hover:bg-gray-50" > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name="ticket" className="h-4 fill-grey-1" /> + <Icon name="ticket" className="fill-grey-1 h-4" /> <label className="font-bold">Apply Promo Code</label> </div> <Icon name={promoCheckerState.isExpanded ? 'chevron-up' : 'arrow-bottom'} - className={`h-4 fill-grey-1 transition-all duration-300`} + className={`fill-grey-1 h-4 transition-all duration-300`} /> </div> )} @@ -103,7 +103,7 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe `} > {promoCheckerState.isApplied ? ( - <p className="text-center text-sm text-green-600"> + <p className="text-start text-sm text-green-600"> Promo code {promoCheckerState.code} applied successfully! </p> ) : ( diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index 629b82a9..7dc0fa76 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -44,22 +44,22 @@ export const OfframpSuccessView = ({ return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="mx-auto text-center"> - <Card.Title className="mx-auto text-center">Yay!</Card.Title> - <Card.Description className="text-center"> + <Card.Header> + <Card.Title>Yay!</Card.Title> + <Card.Description> Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please keep in mind that it may take up to 2 days for the funds to arrive. </Card.Description> </Card.Header> <Card.Content className="col gap-2"> - <label className="text-center text-h2">Yay!</label> - <label className="text-center text-h8 font-bold"> + <label className="text-start text-h2">Yay!</label> + <label className="text-start text-h8 font-bold"> Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please keep in mind that it may take up to 2 days for the funds to arrive. </label> - <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -79,9 +79,9 @@ export const OfframpSuccessView = ({ </div> {/* You will receive section */} - <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="h-4 fill-grey-1" /> + <Icon name={'transfer'} className="fill-grey-1 h-4" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Profile/Components/SkeletonPage.tsx b/src/components/Profile/Components/SkeletonPage.tsx index 19445982..829468ba 100644 --- a/src/components/Profile/Components/SkeletonPage.tsx +++ b/src/components/Profile/Components/SkeletonPage.tsx @@ -196,7 +196,7 @@ export const ProfileSkeleton = ({ onClick, showOverlay = true, errorState, isLoa 'Connect Wallet' )} {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Refund/index.tsx b/src/components/Refund/index.tsx index 6915d4be..ccf0e609 100644 --- a/src/components/Refund/index.tsx +++ b/src/components/Refund/index.tsx @@ -197,14 +197,14 @@ export const Refund = () => { <a href={claimedExploredUrlWithHash ?? ''} target="_blank" - className="cursor-pointer text-center text-sm text-black underline " + className="cursor-pointer text-start text-sm text-black underline " > Your transaction hash </a> </p> ) : ( errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className="font-bold text-red ">{errorState.errorMessage}</label> </div> ) diff --git a/src/components/Register/index.tsx b/src/components/Register/index.tsx index 10982d1c..744cfa53 100644 --- a/src/components/Register/index.tsx +++ b/src/components/Register/index.tsx @@ -1,12 +1,12 @@ 'use client' -import { GlobalRegisterComponent } from '../Global/RegisterComponent' +import * as assets from '@/assets' +import * as context from '@/context' import { useAuth } from '@/context/authContext' import { Divider } from '@chakra-ui/react' +import Link from 'next/link' import { useContext, useState } from 'react' -import * as context from '@/context' import Loading from '../Global/Loading' -import Link from 'next/link' -import * as assets from '@/assets' +import { GlobalRegisterComponent } from '../Global/RegisterComponent' const RegisterComponent = () => { const { user, logoutUser, isFetchingUser } = useAuth() @@ -61,7 +61,7 @@ const RegisterComponent = () => { )} </button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Request/Create/Views/Initial.view.tsx b/src/components/Request/Create/Views/Initial.view.tsx index 83f2cc8e..d49f7de8 100644 --- a/src/components/Request/Create/Views/Initial.view.tsx +++ b/src/components/Request/Create/Views/Initial.view.tsx @@ -167,8 +167,8 @@ export const InitialView = ({ return ( <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title className="mx-auto">Request a payment</Card.Title> - <Card.Description className="text-center"> + <Card.Title>Request a payment</Card.Title> + <Card.Description> Choose the amount, token and chain. You will request a payment to your wallet. Add an invoice if you want to. </Card.Description> @@ -234,7 +234,7 @@ export const InitialView = ({ </Button> </div> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Request/Create/Views/Success.view.tsx b/src/components/Request/Create/Views/Success.view.tsx index bb9b7040..5cb1ddcc 100644 --- a/src/components/Request/Create/Views/Success.view.tsx +++ b/src/components/Request/Create/Views/Success.view.tsx @@ -9,11 +9,11 @@ export const SuccessView = ({ link }: _consts.ICreateScreenProps) => { return ( <Card className="shadow-none sm:shadow-primary-4"> <Card.Header className="relative"> - <Card.Title className="mx-auto">Yay!</Card.Title> + <Card.Title>Yay!</Card.Title> </Card.Header> <Card.Content className="flex flex-col gap-3"> <QRCodeWrapper url={link} /> - <label className="text-center text-h8"> + <label className="text-start text-h8"> Share this link or QR with anyone. They will be able to pay you from any chain in any token. </label> <CopyField text={link} /> diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx index 2f7564cf..d48b12ff 100644 --- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx @@ -20,7 +20,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con return ( <Card className="shadow-none sm:shadow-primary-4"> - <Card.Header className="text-center"> + <Card.Header> <Card.Title>Payment Receipt</Card.Title> </Card.Header> <Card.Content className="col gap-4"> @@ -29,11 +29,11 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con attachmentUrl={requestLinkData?.attachmentUrl} /> {dataAvailable && ( - <div className="flex w-full flex-col items-center justify-center gap-2"> - <label className="text-h8 ">This link previously contained:</label> + <div className="flex w-full flex-col items-start justify-center gap-2 py-2"> + <label className="text-h8">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> - <div className="flex w-max flex-row items-center justify-center gap-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 text-h8"> + <div className="flex w-max flex-row items-center justify-center gap-1 px-2"> <label className="font-bold">Token</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -42,7 +42,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {tokenAmountAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -52,7 +52,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {chainAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -70,7 +70,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {recipientAddressAvailable && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Requester</label> </div> @@ -82,7 +82,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} <PaymentsFooter href={'/request/create'} text="Request a payment yourself!" icon="send" /> - <label className="text-center text-h9 font-normal"> + <label className="text-start text-h9 font-normal"> We would like to hear from your experience. Hit us up on{' '} <a className="cursor-pointer text-black underline dark:text-white" diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index 7cd60ecf..0b241216 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -360,7 +360,7 @@ export const InitialView = ({ <FlowHeader /> <Card className="shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title className="text-center text-h3"> + <Card.Title className="text-h3"> <AddressLink address={requestLinkData.recipientAddress} /> is requesting </Card.Title> </Card.Header> @@ -399,7 +399,7 @@ export const InitialView = ({ </div> </div> {tokenSupportsXChain ? ( - <label className="text-center text-h9 font-light"> + <label className="text-start text-h9 font-light"> You can fulfill this payment request with any token on any chain. Pick the token and chain that you want to fulfill this request with. </label> @@ -415,9 +415,9 @@ export const InitialView = ({ )} {!isFeeEstimationError && ( <> - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="h-4 fill-grey-1" /> + <Icon name={'gas'} className="fill-grey-1 h-4" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -443,9 +443,9 @@ export const InitialView = ({ </div> {null !== calculatedSlippage && ( - <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> + <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'money-out'} className="h-4 fill-grey-1" /> + <Icon name={'money-out'} className="fill-grey-1 h-4" /> <label className="font-bold">Max slippage</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -509,7 +509,7 @@ export const InitialView = ({ {!isConnected && !isPeanutWallet ? 'Connect Wallet' : 'Pay'} </Button> {errorState.showError && ( - <div className="text-center"> + <div className="text-start"> <label className=" text-h8 font-normal text-red ">{errorState.errorMessage}</label> </div> )} diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx index 198026a5..ba1de478 100644 --- a/src/components/Request/Pay/Views/Success.view.tsx +++ b/src/components/Request/Pay/Views/Success.view.tsx @@ -97,7 +97,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } return ( <Card className="w-full shadow-none sm:shadow-primary-4"> <Card.Header> - <Card.Title className="mx-auto">Yay!</Card.Title> + <Card.Title>Yay!</Card.Title> <Card.Description> You have successfully paid <AddressLink address={requestLinkData.recipientAddress} />! </Card.Description> @@ -108,7 +108,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } attachmentUrl={requestLinkData?.attachmentUrl} /> <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal"> - <label className="text-center text-h8 font-normal text-grey-1">Transaction details</label> + <label className="text-grey-1 text-start text-h8 font-normal">Transaction details</label> <div className="flex w-full flex-row items-center justify-between gap-1"> <label className="">Source chain:</label> <Link className="cursor-pointer underline" href={sourceUrlWithTx}> @@ -139,7 +139,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } </> )} </div> - <label className="text-center text-h9 font-normal"> + <label className="text-start text-h9 font-normal"> We would like to hear from your experience. Hit us up on{' '} <a className="cursor-pointer text-black underline dark:text-white" diff --git a/tailwind.config.js b/tailwind.config.js index d97b1260..759aca9c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -166,6 +166,9 @@ module.exports = { fontVariationSettings: '"wdth" 50', }, ], + 'knerd-outline': ['var(--font-knerd-outline)', ...fontFamily.sans], + 'knerd-filled': ['var(--font-knerd-filled)', ...fontFamily.sans], + roboto: ['var(--font-roboto)', ...fontFamily.sans], }, fontSize: { 0: ['0px', '0px'], @@ -260,9 +263,14 @@ module.exports = { }, }) addComponents({ + '.row': { + '@apply flex flex-row items-center gap-2': {}, + }, + '.col': { + '@apply flex flex-col gap-2': {}, + }, '.btn': { '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border border-n-1 rounded-sm text-base text-n-1 fill-n-1 font-bold transition-colors': - // '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-12 px-3 border-2 ring-2 ring-white shadow-md border-n-1 rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors hover:bg-n-4/40 hover:text-n-1': {}, }, '.btn svg': { @@ -288,10 +296,6 @@ module.exports = { '@apply btn bg-n-1 text-white fill-white hover:bg-n-1/80 dark:bg-white/10 dark:hover:bg-white/20': {}, }, - '.btn-ghost': { - '@apply disabled:bg-n-4 disabled:hover:bg-n-4/90 disabled:text-grey-1 disabled:cursor-not-allowed inline-flex items-center justify-center h-13 px-5 border-2 border-transparent rounded-md text-base text-n-1 fill-n-1 font-bold transition-colors duration-200 hover:border-n-1 hover:bg-n-4/25': - {}, - }, '.btn-stroke': { '@apply btn hover:bg-n-1 hover:text-white hover:fill-white dark:border-white dark:text-white dark:fill-white dark:hover:bg-white dark:hover:text-n-1 dark:hover:fill-n-1': {}, @@ -389,13 +393,16 @@ module.exports = { {}, }, '.card': { - '@apply bg-white border border-n-1 dark:bg-n-1 max-w-[27rem] relative mx-auto w-11/12 items-center justify-center px-4 py-6 xl:w-1/2 lg:w-2/3 dark:border-white': + '@apply bg-white border border-n-1 dark:bg-n-1 max-w-[27rem] relative mx-auto w-11/12 items-center justify-center px-4 py-6 xl:w-1/2 lg:w-2/3 dark:border-white flex flex-col relative mx-auto items-center justify-center': {}, }, '.card-head': { - '@apply flex justify-between items-center min-h-[4rem] px-5 py-3 border-b border-n-1 dark:border-white': + '@apply flex justify-between flex-col items-start min-h-[4rem] px-3 sm:px-5 py-3 border-b border-n-1 dark:border-white': {}, }, + '.card-content': { + '@apply px-3 sm:px-5 py-3 border-n-1 dark:border-white': {}, + }, '.card-title': { '@apply p-5 border-b border-n-1 text-h6 dark:border-white': {}, }, @@ -449,10 +456,41 @@ module.exports = { '.custom-input-xs': { '@apply h-8': {}, }, - '.kyc-badge': { - '@apply relative flex items-center justify-center text-h10 font-normal text-black h-4 w-8 rounded-full': + '.btn-shadow-primary-4': { + '@apply shadow-[0.25rem_0.25rem_0_#000000] dark:shadow-[0.25rem_0.25rem_0_rgba(255,255,255,.25)]': + {}, + }, + '.btn-shadow-primary-6': { + '@apply shadow-[0.375rem_0.375rem_0_#000000] dark:shadow-[0.375rem_0.375rem_0_rgba(255,255,255,.25)]': + {}, + }, + '.btn-shadow-primary-8': { + '@apply shadow-[0.5rem_0.5rem_0_#000000] dark:shadow-[0.5rem_0.5rem_0_rgba(255,255,255,.25)]': {}, + }, + '.btn-shadow-secondary-4': { + '@apply shadow-[0.25rem_-0.25rem_0_#000000] dark:shadow-[0.25rem_-0.25rem_0_rgba(255,255,255,.25)]': + {}, + }, + '.btn-shadow-secondary-6': { + '@apply shadow-[0.375rem_-0.375rem_0_#000000] dark:shadow-[0.375rem_-0.375rem_0_rgba(255,255,255,.25)]': + {}, + }, + '.btn-shadow-secondary-8': { + '@apply shadow-[0.5rem_-0.5rem_0_#000000] dark:shadow-[0.5rem_-0.5rem_0_rgba(255,255,255,.25)]': {}, + }, + '.input': { + '@apply h-16 w-full rounded-sm border border-n-1 bg-white px-5 text-sm font-bold text-n-1 outline-none transition-colors placeholder:text-n-3 focus:border-purple-1 dark:border-white dark:bg-n-1 dark:text-white dark:placeholder:text-white/75 dark:focus:border-purple-1': {}, }, + '.bg-peanut-repeat-normal': { + '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:100px_100px]': {}, + }, + '.bg-peanut-repeat-large': { + '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:200px_200px]': {}, + }, + '.bg-peanut-repeat-small': { + '@apply bg-[url("../assets/bg/peanut-bg.svg")] bg-repeat bg-[length:50px_50px]': {}, + }, }) addUtilities({ '.tap-highlight-color': { From 2a6181ef4d558544207bafccd5f21c47b5184928 Mon Sep 17 00:00:00 2001 From: kushagrasarathe <76868364+kushagrasarathe@users.noreply.github.com> Date: Tue, 21 Jan 2025 15:02:53 +0530 Subject: [PATCH 12/12] fix: format --- src/components/0_Bruddle/Title.tsx | 4 +-- .../Cashout/Components/Initial.view.tsx | 2 +- .../Claim/Generic/AlreadyClaimed.view.tsx | 8 ++--- src/components/Claim/Link/Initial.view.tsx | 12 +++---- .../Claim/Link/Onchain/Confirm.view.tsx | 12 +++---- .../Claim/Link/Onchain/Success.view.tsx | 4 +-- src/components/Create/Link/Confirm.view.tsx | 18 +++++------ src/components/Create/Link/Success.view.tsx | 2 +- src/components/Global/WalletHeader/index.tsx | 2 +- src/components/Home/WalletCard.tsx | 2 +- .../LandingPage/BuildOnUs/index.tsx | 2 +- src/components/Offramp/Confirm.view.tsx | 32 +++++++++---------- src/components/Offramp/PromoCodeChecker.tsx | 6 ++-- src/components/Offramp/Success.view.tsx | 8 ++--- .../Views/GeneralViews/AlreadyPaid.view.tsx | 8 ++--- .../Request/Pay/Views/Initial.view.tsx | 8 ++--- .../Request/Pay/Views/Success.view.tsx | 2 +- 17 files changed, 66 insertions(+), 66 deletions(-) diff --git a/src/components/0_Bruddle/Title.tsx b/src/components/0_Bruddle/Title.tsx index a405eac6..fd6a4506 100644 --- a/src/components/0_Bruddle/Title.tsx +++ b/src/components/0_Bruddle/Title.tsx @@ -10,10 +10,10 @@ const Title = ({ } & React.HTMLAttributes<HTMLParagraphElement>) => { return ( <div className="relative inline-block"> - <p className={twMerge('font-knerd-filled relative text-white', offset && 'translate-x-[3px]', className)}> + <p className={twMerge('relative font-knerd-filled text-white', offset && 'translate-x-[3px]', className)}> {text} </p> - <p className={twMerge('font-knerd-outline absolute left-0 top-0', className)}>{text}</p> + <p className={twMerge('absolute left-0 top-0 font-knerd-outline', className)}>{text}</p> </div> ) } diff --git a/src/components/Cashout/Components/Initial.view.tsx b/src/components/Cashout/Components/Initial.view.tsx index 5a6084f3..243107ee 100644 --- a/src/components/Cashout/Components/Initial.view.tsx +++ b/src/components/Cashout/Components/Initial.view.tsx @@ -346,7 +346,7 @@ export const InitialCashoutView = ({ <div className="flex flex-grow items-center overflow-hidden"> <Icon name={'bank'} - className="fill-grey-1 mr-2 h-4 flex-shrink-0" + className="mr-2 h-4 flex-shrink-0 fill-grey-1" /> <label htmlFor={`bank-${index}`} diff --git a/src/components/Claim/Generic/AlreadyClaimed.view.tsx b/src/components/Claim/Generic/AlreadyClaimed.view.tsx index cd56e9cc..890616bc 100644 --- a/src/components/Claim/Generic/AlreadyClaimed.view.tsx +++ b/src/components/Claim/Generic/AlreadyClaimed.view.tsx @@ -29,7 +29,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter <div className="flex w-full flex-col items-start justify-center gap-2 py-2"> <label className="text-h8">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1 px-2"> <label className="font-bold">Token</label> </div> @@ -39,7 +39,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {tokenAmountAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -49,7 +49,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {chainAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -67,7 +67,7 @@ export const AlreadyClaimedLinkView = ({ claimLinkData }: { claimLinkData: inter </div> )} {senderAddressAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Sender</label> </div> diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index 1dd7803a..1be545ba 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -469,7 +469,7 @@ export const InitialClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " + className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " > <Icon name={'download'} /> Download attachment @@ -516,9 +516,9 @@ export const InitialClaimLinkView = ({ {recipient && isValidRecipient && recipientType !== 'iban' && recipientType !== 'us' && ( <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -533,7 +533,7 @@ export const InitialClaimLinkView = ({ chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} { supportedSquidChainsAndTokens[ selectedRoute.route.params.toChain @@ -559,9 +559,9 @@ export const InitialClaimLinkView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Confirm.view.tsx b/src/components/Claim/Link/Onchain/Confirm.view.tsx index 9c39845c..cccb3c60 100644 --- a/src/components/Claim/Link/Onchain/Confirm.view.tsx +++ b/src/components/Claim/Link/Onchain/Confirm.view.tsx @@ -137,7 +137,7 @@ export const ConfirmClaimLinkView = ({ href={attachment.attachmentUrl} download target="_blank" - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal underline " + className="flex w-full cursor-pointer flex-row items-center justify-center gap-1 text-h9 font-normal text-grey-1 underline " > <Icon name={'download'} /> Download attachment @@ -180,9 +180,9 @@ export const ConfirmClaimLinkView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {selectedRoute && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -193,7 +193,7 @@ export const ConfirmClaimLinkView = ({ (chain) => chain.chainId === selectedRoute.route.params.fromChain )?.name } - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} { supportedSquidChainsAndTokens[selectedRoute.route.params.toChain] ?.axelarChainName @@ -215,9 +215,9 @@ export const ConfirmClaimLinkView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fees</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Claim/Link/Onchain/Success.view.tsx b/src/components/Claim/Link/Onchain/Success.view.tsx index 91c48b28..f2c4c663 100644 --- a/src/components/Claim/Link/Onchain/Success.view.tsx +++ b/src/components/Claim/Link/Onchain/Success.view.tsx @@ -65,7 +65,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ <Card.Description>You have successfully claimed your funds!</Card.Description> </Card.Header> <Card.Content className="flex flex-col gap-2"> - <label className="text-grey-1 text-start text-h8 font-normal">Transaction details</label> + <label className="text-start text-h8 font-normal text-grey-1">Transaction details</label> {type === 'claimxchain' && ( <div className="flex flex-col items-start justify-center gap-1 text-h9 font-normal"> <div className="flex w-full flex-row items-center justify-between gap-1"> @@ -99,7 +99,7 @@ export const SuccessClaimLinkView = ({ transactionHash, claimLinkData, type }: _ <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="fill-grey-1 h-4" /> + <Icon name="external" className="h-4 fill-grey-1" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Create/Link/Confirm.view.tsx b/src/components/Create/Link/Confirm.view.tsx index 51b85508..ca50a29c 100644 --- a/src/components/Create/Link/Confirm.view.tsx +++ b/src/components/Create/Link/Confirm.view.tsx @@ -271,35 +271,35 @@ export const CreateLinkConfirmView = ({ <div className="flex w-full flex-col items-center justify-center gap-2"> {attachmentOptions.fileUrl && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="fill-grey-1 h-4" /> + <Icon name={'paperclip'} className="h-4 fill-grey-1" /> <label className="font-bold">Attachment</label> </div> <a href={attachmentOptions.fileUrl} download target="_blank"> - <Icon name={'download'} className="fill-grey-1 h-4" /> + <Icon name={'download'} className="h-4 fill-grey-1" /> </a> </div> )} {attachmentOptions.message && ( <div className="flex w-full flex-col items-center justify-center gap-1"> <div - className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8" + className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1" onClick={() => { setShowMessage(!showMessage) }} > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'paperclip'} className="fill-grey-1 h-4 " /> + <Icon name={'paperclip'} className="h-4 fill-grey-1 " /> <label className=" font-bold">Message</label> </div> <Icon name={'arrow-bottom'} - className={`fill-grey-1 h-4 cursor-pointer transition-transform ${showMessage && ' rotate-180'}`} + className={`h-4 cursor-pointer fill-grey-1 transition-transform ${showMessage && ' rotate-180'}`} /> </div> {showMessage && ( - <div className="text-grey-1 flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8"> + <div className="flex w-full flex-col items-center justify-center gap-1 pl-7 text-h8 text-grey-1"> <label className="w-full text-start text-sm font-normal leading-4"> {attachmentOptions.message} </label> @@ -308,9 +308,9 @@ export const CreateLinkConfirmView = ({ </div> )} {transactionCostUSD !== undefined && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Create/Link/Success.view.tsx b/src/components/Create/Link/Success.view.tsx index 5adf9c7b..29d8e353 100644 --- a/src/components/Create/Link/Success.view.tsx +++ b/src/components/Create/Link/Success.view.tsx @@ -125,7 +125,7 @@ export const CreateLinkSuccessView = ({ link, txHash, createType, recipient, tok <Link className="w-full" target="_blank" href={`${explorerUrlWithTx}`}> <Button variant="dark"> Transaction hash - <Icon name="external" className="fill-grey-1 h-4" /> + <Icon name="external" className="h-4 fill-grey-1" /> </Button> </Link> <Link className="" href={'/profile'}> diff --git a/src/components/Global/WalletHeader/index.tsx b/src/components/Global/WalletHeader/index.tsx index e9248d5a..8d46afb2 100644 --- a/src/components/Global/WalletHeader/index.tsx +++ b/src/components/Global/WalletHeader/index.tsx @@ -235,7 +235,7 @@ const WalletEntryCard = ({ wallet, isActive, onClick }: WalletEntryCardProps) => // add new wallet component, triggers web3modal const AddNewWallet = ({ onClick }: { onClick: () => void }) => ( <Card onClick={onClick}> - <Card.Content className="bg-purple-5 flex min-h-16 w-full cursor-pointer items-center justify-center gap-3 px-4 py-3 hover:bg-opacity-90"> + <Card.Content className="flex min-h-16 w-full cursor-pointer items-center justify-center gap-3 bg-purple-5 px-4 py-3 hover:bg-opacity-90"> <div className="flex size-7 items-center justify-center rounded-full border border-n-1"> <Icon name="plus" fill="black" className="h-7 w-7" /> </div> diff --git a/src/components/Home/WalletCard.tsx b/src/components/Home/WalletCard.tsx index 0469b291..0977a395 100644 --- a/src/components/Home/WalletCard.tsx +++ b/src/components/Home/WalletCard.tsx @@ -134,7 +134,7 @@ export function WalletCard({ type, onClick, ...props }: WalletCardProps) { <div className="flex items-center gap-2"> {isExternalWallet && ( <> - <div className="text-grey-1 rounded-sm bg-white/75 px-2 py-1 text-xs font-bold"> + <div className="rounded-sm bg-white/75 px-2 py-1 text-xs font-bold text-grey-1"> External </div> <div diff --git a/src/components/LandingPage/BuildOnUs/index.tsx b/src/components/LandingPage/BuildOnUs/index.tsx index 06c97a09..a99af2eb 100644 --- a/src/components/LandingPage/BuildOnUs/index.tsx +++ b/src/components/LandingPage/BuildOnUs/index.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion' export default function BuildOnUs() { return ( - <div className="bg-primary-1 relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden"> + <div className="relative flex min-h-[72vh] flex-col items-center justify-center overflow-x-hidden bg-primary-1"> <motion.div className="flex flex-col items-center gap-8" initial={{ opacity: 0, translateY: 20 }} diff --git a/src/components/Offramp/Confirm.view.tsx b/src/components/Offramp/Confirm.view.tsx index 53634280..c16841f5 100644 --- a/src/components/Offramp/Confirm.view.tsx +++ b/src/components/Offramp/Confirm.view.tsx @@ -704,9 +704,9 @@ export const OfframpConfirmView = ({ <div className="my-2 flex w-full flex-col items-center justify-center gap-2"> <label className="self-start text-h8 font-light">Please confirm all details:</label> <div className="flex w-full flex-col items-center justify-center gap-2"> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'profile'} className="fill-grey-1 h-4" /> + <Icon name={'profile'} className="h-4 fill-grey-1" /> <label className="font-bold">Name</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -714,9 +714,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'email'} className="fill-grey-1 h-4" /> + <Icon name={'email'} className="h-4 fill-grey-1" /> <label className="font-bold">Email</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -724,9 +724,9 @@ export const OfframpConfirmView = ({ </span> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'bank'} className="fill-grey-1 h-4" /> + <Icon name={'bank'} className="h-4 fill-grey-1" /> <label className="font-bold">Bank account</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -735,9 +735,9 @@ export const OfframpConfirmView = ({ </div> {offrampType == OfframpType.CLAIM && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'forward'} className="fill-grey-1 h-4" /> + <Icon name={'forward'} className="h-4 fill-grey-1" /> <label className="font-bold">Route</label> </div> <span className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -746,8 +746,8 @@ export const OfframpConfirmView = ({ (chain) => chain.chainId === claimLinkData?.chainId )?.name }{' '} - <Icon name={'arrow-next'} className="fill-grey-1 h-4" /> Offramp{' '} - <Icon name={'arrow-next'} className="fill-grey-1 h-4" />{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" /> Offramp{' '} + <Icon name={'arrow-next'} className="h-4 fill-grey-1" />{' '} {recipientType?.toUpperCase()}{' '} <MoreInfo text={`Wait, crypto can be converted to real money??? How cool!`} @@ -756,9 +756,9 @@ export const OfframpConfirmView = ({ </div> )} - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -811,9 +811,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">Total</label> </div> <div className="flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -841,9 +841,9 @@ export const OfframpConfirmView = ({ </div> </div> - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Offramp/PromoCodeChecker.tsx b/src/components/Offramp/PromoCodeChecker.tsx index 79454d3d..0ae4209c 100644 --- a/src/components/Offramp/PromoCodeChecker.tsx +++ b/src/components/Offramp/PromoCodeChecker.tsx @@ -82,15 +82,15 @@ const PromoCodeChecker = ({ onPromoCodeApplied, appliedPromoCode }: PromoCodeChe {!promoCheckerState.isApplied && ( <div onClick={handleExpandToggle} - className="text-grey-1 flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 transition-colors duration-200 hover:bg-gray-50" + className="flex w-full cursor-pointer flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1 transition-colors duration-200 hover:bg-gray-50" > <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name="ticket" className="fill-grey-1 h-4" /> + <Icon name="ticket" className="h-4 fill-grey-1" /> <label className="font-bold">Apply Promo Code</label> </div> <Icon name={promoCheckerState.isExpanded ? 'chevron-up' : 'arrow-bottom'} - className={`fill-grey-1 h-4 transition-all duration-300`} + className={`h-4 fill-grey-1 transition-all duration-300`} /> </div> )} diff --git a/src/components/Offramp/Success.view.tsx b/src/components/Offramp/Success.view.tsx index 7dc0fa76..1ba5c7b0 100644 --- a/src/components/Offramp/Success.view.tsx +++ b/src/components/Offramp/Success.view.tsx @@ -57,9 +57,9 @@ export const OfframpSuccessView = ({ Your funds are on the way. A confirmation email will be sent to {offrampForm.email} shortly. Please keep in mind that it may take up to 2 days for the funds to arrive. </label> - <div className="text-grey-1 flex w-full flex-row items-center px-2 text-h8"> + <div className="flex w-full flex-row items-center px-2 text-h8 text-grey-1"> <div className="flex w-1/3 flex-row items-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Fee</label> </div> <div className="relative flex flex-1 items-center justify-end gap-1 text-sm font-normal"> @@ -79,9 +79,9 @@ export const OfframpSuccessView = ({ </div> {/* You will receive section */} - <div className="text-grey-1 flex w-full flex-row items-center justify-between px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center gap-1"> - <Icon name={'transfer'} className="fill-grey-1 h-4" /> + <Icon name={'transfer'} className="h-4 fill-grey-1" /> <label className="font-bold">You will receive</label> </div> <div className="flex items-center justify-end gap-1 text-sm font-normal"> diff --git a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx index d48b12ff..7ac4d9de 100644 --- a/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx +++ b/src/components/Request/Pay/Views/GeneralViews/AlreadyPaid.view.tsx @@ -32,7 +32,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con <div className="flex w-full flex-col items-start justify-center gap-2 py-2"> <label className="text-h8">This link previously contained:</label> {tokenSymbolAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1 px-2"> <label className="font-bold">Token</label> </div> @@ -42,7 +42,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {tokenAmountAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Amount</label> </div> @@ -52,7 +52,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {chainAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Chain</label> </div> @@ -70,7 +70,7 @@ export const AlreadyPaidLinkView = ({ requestLinkData }: { requestLinkData: _con </div> )} {recipientAddressAvailable && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> <label className="font-bold">Requester</label> </div> diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index fa1e5aad..34fc8744 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -415,9 +415,9 @@ export const InitialView = ({ )} {!isFeeEstimationError && ( <> - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'gas'} className="fill-grey-1 h-4" /> + <Icon name={'gas'} className="h-4 fill-grey-1" /> <label className="font-bold">Network cost</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> @@ -443,9 +443,9 @@ export const InitialView = ({ </div> {null !== calculatedSlippage && ( - <div className="text-grey-1 flex w-full flex-row items-center justify-between gap-1 px-2 text-h8"> + <div className="flex w-full flex-row items-center justify-between gap-1 px-2 text-h8 text-grey-1"> <div className="flex w-max flex-row items-center justify-center gap-1"> - <Icon name={'money-out'} className="fill-grey-1 h-4" /> + <Icon name={'money-out'} className="h-4 fill-grey-1" /> <label className="font-bold">Max slippage</label> </div> <label className="flex flex-row items-center justify-center gap-1 text-center text-sm font-normal leading-4"> diff --git a/src/components/Request/Pay/Views/Success.view.tsx b/src/components/Request/Pay/Views/Success.view.tsx index ba1de478..6e544588 100644 --- a/src/components/Request/Pay/Views/Success.view.tsx +++ b/src/components/Request/Pay/Views/Success.view.tsx @@ -108,7 +108,7 @@ export const SuccessView = ({ transactionHash, requestLinkData, tokenPriceData } attachmentUrl={requestLinkData?.attachmentUrl} /> <div className="flex w-full flex-col items-start justify-center gap-1.5 text-h9 font-normal"> - <label className="text-grey-1 text-start text-h8 font-normal">Transaction details</label> + <label className="text-start text-h8 font-normal text-grey-1">Transaction details</label> <div className="flex w-full flex-row items-center justify-between gap-1"> <label className="">Source chain:</label> <Link className="cursor-pointer underline" href={sourceUrlWithTx}>