Formatting changes (#424)

* some formatting bugs

* mvoe env stuff and bugs

apps/merchant-ui/src/components/Merchant404.tsx

@@ -13,7 +13,7 @@ export default function Merchant404() {
             <div className="h-screen w-screen">
                 <DefaultLayout accountIsActive className="h-full w-full ">
                     <div className="flex flex-col justify-center h-full items-center mt-4 text-center space-y-12">
-                        <h1 className="text-3xl font-semibold mt-2">We can't find that merchant</h1>
+                        <h1 className="text-3xl font-semibold mt-2">We can&apos;t find that merchant</h1>
                         <Button.Primary onClick={() => Router.push('/')} className="w-max">
                             Sign In
                         </Button.Primary>

apps/merchant-ui/src/components/Refunds.tsx

@@ -29,15 +29,15 @@ export function Refunds(props: Props) {
                                 <div className="flex items-center space-x-2.5">
                                     <Info className="h-5 w-5 fill-slate-900" />
                                     <div className="text-black font-medium text-xs">
-                                        In order to process a refund, you'll need a self-custodial wallet
+                                        In order to process a refund, you&apos;ll need a self-custodial wallet
                                     </div>
                                 </div>
                                 <div className="my-2.5 text-xs text-neutral-600">
                                     • Usually a wallet app on Solana, like Solflare or Phantom
                                     <br />• Refunds cannot be processed with a Coinbase account
                                 </div>
                                 <Link className="font-semibold text-indigo-700 text-xs" href="/support">
-                                    What's a self-custodial wallet?
+                                    What&apos;s a self-custodial wallet?
                                 </Link>
                             </div>
                             <button onClick={() => setShowNotification(false)} className="absolute right-2 top-2 p-2">

apps/merchant-ui/src/pages/404.tsx

@@ -17,7 +17,7 @@ export default function Custom404() {
             <div className="h-screen w-screen">
                 <DefaultLayout accountIsActive className="h-full w-full ">
                     <div className="flex flex-col justify-center h-full items-center mt-4 text-center space-y-12">
-                        <h1 className="text-3xl font-semibold mt-2">We can't find that page</h1>
+                        <h1 className="text-3xl font-semibold mt-2">We can&apos;t find that page</h1>
                         {isOk(merchantInfo) && merchantInfo.data.completed ? (
                             <Button.Primary onClick={() => Router.push('/merchant')} className="w-max">
                                 Go to Dashboard

apps/payment-ui/src/components/PaymentLoadingView.tsx

@@ -1,9 +1,8 @@
-import Checkmark from '@carbon/icons-react/lib/Checkmark';
+import { getMergedState } from '@/features/payment-session/paymentSessionSlice';
 import { ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { RiCheckFill } from 'react-icons/ri'
+import { RiCheckFill } from 'react-icons/ri';
 import { useSelector } from 'react-redux';
-import { getMergedState } from '@/features/payment-session/paymentSessionSlice';
+import { twMerge } from 'tailwind-merge';
 
 const StepBar = ({ completed, include }: { completed: boolean; include: boolean }) => (
     <div
@@ -42,7 +41,7 @@ const PendingStep = () => (
 
 const WaitingStep = () => (
     <div>
-        <Circle color="bg-white border border-4" children={undefined}></Circle>
+        <Circle color="bg-white border border-4">{}</Circle>
     </div>
 );
 
@@ -77,12 +76,11 @@ const getStepStatus = ({ index, currentStep }: { index: number; currentStep: num
 };
 
 export const PaymentLoadingView = () => {
-
     const mergedState = useSelector(getMergedState);
 
     const currentStep = mergedState - 1;
 
-    console.log(currentStep, 'currentStep')
+    console.log(currentStep, 'currentStep');
 
     return (
         <div className="flex flex-col items-center">

apps/payment-ui/src/components/PaymentMethodTab.tsx

@@ -1,7 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch } from '../store';
-import { useRouter } from 'next/router';
 import { PaymentMethod, getPaymentMethod, setPaymentMethod } from '../features/payment-options/paymentOptionsSlice';
+import { AppDispatch } from '../store';
 
 export const PaymentMethodTab = () => {
     const dispatch = useDispatch<AppDispatch>();
@@ -10,15 +9,11 @@ export const PaymentMethodTab = () => {
     const paymentMethodTabOption = (option: PaymentMethod, label: string) => {
         const activeTabClassName = 'tab w-1/2 tab-active color-black drop-shadow';
         const defaultTabClassName = 'tab w-1/2';
-        const { id } = useRouter().query;
-        const paymentId = id as string;
 
         return (
             <a
-                className={paymentMethod == option ? activeTabClassName : defaultTabClassName}
-                onClick={() => {
-                    dispatch(setPaymentMethod(option));
-                }}
+                className={paymentMethod === option ? activeTabClassName : defaultTabClassName}
+                onClick={() => dispatch(setPaymentMethod(option))}
             >
                 {label}
             </a>

apps/payment-ui/src/components/ThankYou.tsx

@@ -1,15 +1,23 @@
-import Image from 'next/image'
-import FinishHandler from './handlers/FinishHandler'
+import Image from 'next/image';
+import FinishHandler from './handlers/FinishHandler';
 
 export const ThankYouView = () => {
     return (
         <div className="flex flex-col">
             <FinishHandler />
-            <Image src="/check.svg" alt="Completed Payment" className="mx-auto w-16 h-16 mt-7 mb-4" width={10} height={10} />
+            <Image
+                src="/check.svg"
+                alt="Completed Payment"
+                className="mx-auto w-16 h-16 mt-7 mb-4"
+                width={10}
+                height={10}
+            />
             <div className="text-3xl text-black mx-auto">Thanks for your order.</div>
             <div className="text-1xl text-gray-600 mx-auto pt-4">Your payment was successful.</div>
             <div className="divider w-full" />
-            <div className="text-sm text-gray-400 font-light mx-auto">We're redirecting you back to Shopify...</div>
+            <div className="text-sm text-gray-400 font-light mx-auto">
+                We&apos;re redirecting you back to Shopify...
+            </div>
         </div>
-    )
-}
+    );
+};

apps/payment-ui/src/components/WalletCopyButton.tsx

@@ -1,27 +1,23 @@
 import { useWallet } from '@solana/wallet-adapter-react';
-import { FC, MouseEventHandler, useState } from 'react';
-import React, { useCallback, useMemo } from 'react';
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-import { WalletIcon } from '@solana/wallet-adapter-react-ui';
 import Image from 'next/image';
+import { FC, MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import type { ButtonProps } from './Button';
 
 export const WalletCopyButton: FC<ButtonProps> = ({ children, disabled, onClick, ...props }) => {
     const { publicKey, wallet, disconnect } = useWallet();
     const [copied, setCopied] = useState(false);
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-        (event) => {
+        event => {
             if (onClick) onClick(event);
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            // eslint-disable-next-line
             if (!event.defaultPrevented) disconnect().catch(() => {});
         },
-        [onClick, disconnect]
+        [onClick, disconnect],
     );
 
     const base58 = useMemo(() => publicKey?.toBase58(), [publicKey]);
 
-
     const copyAddress = useCallback(async () => {
         if (base58) {
             await navigator.clipboard.writeText(base58);
@@ -31,16 +27,17 @@ export const WalletCopyButton: FC<ButtonProps> = ({ children, disabled, onClick,
     }, [base58]);
 
     return (
-        <div className='flex flex-row justify-center'>
-            <button className='btn w-full outline-none border-2 border-black bg-white hover:bg-white text-black flex justify-center items-center normal-case' onClick={copyAddress}>
-                <div className='flex flex-row items-center justify-center'>
+        <div className="flex flex-row justify-center">
+            <button
+                className="btn w-full outline-none border-2 border-black bg-white hover:bg-white text-black flex justify-center items-center normal-case"
+                onClick={copyAddress}
+            >
+                <div className="flex flex-row items-center justify-center">
                     <Image src="/content_copy.svg" alt="Solana Pay Logo" width={18} height={18} />
-                    <div className='pr-1'></div>
-                    <div className='pl-1 text-lg'>{copied ? 'Copied' : 'Copy address'}</div>
+                    <div className="pr-1"></div>
+                    <div className="pl-1 text-lg">{copied ? 'Copied' : 'Copy address'}</div>
                 </div>
             </button>
         </div>
     );
-
-
 };

apps/payment-ui/src/components/WalletDisconnectButton.tsx

@@ -1,32 +1,32 @@
+import { setWalletDisconnected } from '@/features/wallet/walletSlice';
+import { AppDispatch } from '@/store';
 import { useWallet } from '@solana/wallet-adapter-react';
-import type { FC, MouseEventHandler } from 'react';
-import React, { useCallback, useMemo } from 'react';
-import type { ButtonProps } from './Button';
-import { Button } from './Button';
-import { WalletIcon } from '@solana/wallet-adapter-react-ui';
 import Image from 'next/image';
-import { AppDispatch } from '@/store';
+import type { FC, MouseEventHandler } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { setWalletDisconnected } from '@/features/wallet/walletSlice';
-import { removeNotification } from '@/features/notification/notificationSlice';
+import type { ButtonProps } from './Button';
 
 export const WalletDisconnectButton: FC<ButtonProps> = ({ children, disabled, onClick, ...props }) => {
     const dispatch = useDispatch<AppDispatch>();
     const { wallet, disconnect, disconnecting } = useWallet();
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-        (event) => {
+        event => {
             if (onClick) {
                 // onClick(event);
                 // dispatch(removeNotification())
                 // dispatch(setWalletDisconnected())
             }
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            if (!event.defaultPrevented) disconnect().then(() => {
-                dispatch(setWalletDisconnected())
-            }).catch(() => {});
+            // eslint-disable-next-line
+            if (!event.defaultPrevented)
+                disconnect()
+                    .then(() => {
+                        dispatch(setWalletDisconnected());
+                    })
+                    .catch(() => {});
         },
-        [onClick, disconnect]
+        [onClick, disconnect],
     );
 
     const content = useMemo(() => {
@@ -37,15 +37,16 @@ export const WalletDisconnectButton: FC<ButtonProps> = ({ children, disabled, on
     }, [children, disconnecting, wallet]);
 
     return (
-        <div className='flex flex-row justify-center'>
-            <button className='btn w-full outline-none border-2 border-black hover:bg-white bg-white text-black flex justify-center items-center normal-case' onClick={handleClick}>
-                <div className='flex flex-row items-center justify-center'>
-                    <Image className='pr-1' src="/logout.svg" alt="logout icon" width={22} height={22} />
-                    <div className='pl-1 text-lg'>Disconnect</div>
+        <div className="flex flex-row justify-center">
+            <button
+                className="btn w-full outline-none border-2 border-black hover:bg-white bg-white text-black flex justify-center items-center normal-case"
+                onClick={handleClick}
+            >
+                <div className="flex flex-row items-center justify-center">
+                    <Image className="pr-1" src="/logout.svg" alt="logout icon" width={22} height={22} />
+                    <div className="pl-1 text-lg">Disconnect</div>
                 </div>
             </button>
         </div>
     );
-
-
 };

apps/payment-ui/src/components/handlers/RouterHandler.tsx

@@ -10,22 +10,22 @@ const RouterHandler: React.FC = () => {
     const dispatch = useDispatch<AppDispatch>();
     const router = useRouter();
 
-    if (!router.isReady) {
-        return null;
-    }
-
     const paymentId = router.query.paymentId as string;
     const blockedString = router.query.blocked as string;
     const blocked = blockedString == 'true' ? true : false;
 
     useEffect(() => {
+        if (!router.isReady) {
+            return;
+        }
+
         if (blocked) {
             dispatch(setGeoIsBlocked());
         }
 
         dispatch(setPaymentId(paymentId));
         dispatch(setWebsocketReadyToConnect());
-    }, [dispatch]);
+    }, [router.isReady, blocked, paymentId, dispatch]);
 
     return null;
 };