Small fixes (#35)

do some small fixes

Author: hlgrondijs

src/components/SCLink.tsx

@@ -12,7 +12,7 @@ export default function SCLink({
     <Link
       href={href}
       target={target}
-      className={`underline text-alternateMedium hover:text-alternateLight ${className}`}
+      className={`underline text-stellarYellow hover:text-alternateLight ${className}`}
     >
       {children}
     </Link>

src/components/dashboard/overview/OverviewContactInfo.tsx

@@ -43,10 +43,14 @@ export default function OverviewContactInfo() {
   }, [setShowForm]);
 
   const onClickConfirmRegistration = useCallback(() => {
-    updateAccount(
-      walletConnection!.recipient!.email,
-      walletConnection?.recipient?.name ?? undefined
-    );
+    if (jwt) {
+      updateAccount(
+        walletConnection!.recipient!.email,
+        walletConnection?.recipient?.name ?? undefined
+      );
+    } else {
+      router.push("/sep10");
+    }
   }, [walletConnection, updateAccount]);
 
   const handleDelete = useCallback(() => {

src/components/icons/SignIcon.tsx

@@ -5,8 +5,8 @@ interface SignIconProps {
 export default function SignIcon({ large }: SignIconProps) {
   return (
     <svg
-      width={"64px"}
-      height={"64px"}
+      width={"92px"}
+      height={"92px"}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/containers/connect_wallet/AcceptTnC.tsx

@@ -10,18 +10,24 @@ export default function AcceptTnC() {
     <div className="flex flex-col gap-4">
       <div className="flex flex-col">
         <DashboardHeader>Fine print</DashboardHeader>
-        <span>
-          Read our <Link href="/terms-of-use" target="_blank" className="underline">
+        <span className="mt-2">
+          Read our{" "}
+          <Link href="/terms-of-use" target="_blank" className="underline">
             Terms of Use
-          </Link> and <Link href="/privacy-policy" target="_blank" className="underline">
+          </Link>{" "}
+          and{" "}
+          <Link href="/privacy-policy" target="_blank" className="underline">
             Privacy Policy
-          </Link> before you continue.
+          </Link>{" "}
+          before you continue.
         </span>
       </div>
 
       {tncError && (
         <ConnectWalletFormError
-          message={"You have to accept the terms, as they are part of your contract with Stellarcarbon."}
+          message={
+            "You have to accept the terms, as they are part of your contract with Stellarcarbon."
+          }
         />
       )}
 
@@ -45,8 +51,7 @@ export default function AcceptTnC() {
           className="p-2 cursor-pointer text-sm "
           htmlFor="checkbox_policy"
         >
-          I have read and agree with the Terms of Use and the Privacy
-          Policy.
+          I have read and agree with the Terms of Use and the Privacy Policy.
         </label>
       </div>
     </div>

src/containers/connect_wallet/SelectWallet.tsx

@@ -28,7 +28,7 @@ export default function SelectWallet() {
     <div ref={containerRef} className="flex flex-col gap-4">
       <div className="flex flex-col w-full">
         <DashboardHeader>Wallet selection</DashboardHeader>
-        <span className="hidden md:block">
+        <span className="hidden md:block mt-2">
           Select your wallet. You’ll connect it when you submit the form.
         </span>
 

src/containers/sink/steps/Await.tsx

@@ -5,11 +5,11 @@ export default function AwaitSinking({ message }: { message: string }) {
   return (
     <ModalStep title="Waiting for API">
       <span className="text-center">{message}</span>
-      <div className="flex-1 flex items-center justify-center my-4">
+      <div className="flex-1 flex items-center justify-center my-12">
         <Hourglass
           visible={true}
-          height="80"
-          width="80"
+          height="92"
+          width="92"
           ariaLabel="hourglass-loading"
           wrapperStyle={{}}
           wrapperClass=""

src/containers/sink/steps/Sign.tsx

@@ -7,7 +7,7 @@ export default function SignSinking() {
       <span className="text-center">
         {"Sign the transaction using your wallet in the pop-up."}
       </span>
-      <div className="flex-1 flex items-center justify-center my-4">
+      <div className="flex-1 flex items-center justify-center my-12">
         <SignIcon />
       </div>
     </ModalStep>

src/context/SinkingContext.tsx

@@ -117,7 +117,10 @@ export const SinkingContextProvider = ({ children }: PropsWithChildren) => {
         const result = await server.submitTransaction(
           TransactionBuilder.fromXDR(signedTxXdr, appConfig.network)
         );
-        setStep(CheckoutSteps.COMPLETED);
+        setTimeout(() => {
+          // Let the user wait a bit so their dashboard can be updated
+          setStep(CheckoutSteps.COMPLETED);
+        }, 1000);
       } catch (error) {
         displayHorizonError(error);
       }

src/hooks/useSCAccount.tsx

@@ -76,6 +76,7 @@ export function useSCAccount() {
 
       if (res.response.status === 200 && res.data) {
         updateWalletConnection(res.data);
+        setIsStale(false);
       }
     },
     [jwt, walletConnection, updateWalletConnection]

src/hooks/useTransactionHistory.tsx

@@ -37,11 +37,11 @@ const defaultData: TransactionHistoryData = {
 export function useTransactionHistory(
   account?: string
 ): UseMyTransactionsResult {
-  const [data, setData] = useState<TransactionHistoryData>(defaultData);
+  const [txData, setTxData] = useState<TransactionHistoryData>(defaultData);
   const [loading, setLoading] = useState<boolean>(false);
 
-  const fetchData = useCallback(async () => {
-    if (!account) return;
+  const fetchTxData = useCallback(async (): Promise<TransactionHistoryData> => {
+    if (!account) return defaultData;
     setLoading(true);
 
     const response = await getSinkTxsForRecipient({
@@ -50,39 +50,50 @@ export function useTransactionHistory(
 
     if (response.data === undefined) {
       setLoading(false);
-      return;
+      return defaultData;
     }
 
     const serializedTransactions =
       TransactionHistoryService.serializeTxsResponse(response.data);
 
-    setData({
+    setLoading(false);
+
+    return {
       myTransactions: serializedTransactions,
       totalSunk: Number(response.data.total_carbon_sunk),
       totalPending: Number(response.data.total_carbon_pending),
       retirementGraceDays: response.data.retirement_grace_days,
-    });
+    };
 
-    setLoading(false);
+    // setTxData({
+    //   myTransactions: serializedTransactions,
+    //   totalSunk: Number(response.data.total_carbon_sunk),
+    //   totalPending: Number(response.data.total_carbon_pending),
+    //   retirementGraceDays: response.data.retirement_grace_days,
+    // });
+
+    // setLoading(false);
   }, [account]);
 
   async function pollForNewTransaction(
     maxRetries: number = 5,
-    delay: number = 3000 // delay in milliseconds
+    delay: number = 800 // delay in milliseconds
   ): Promise<void> {
     if (!account) throw new Error("No account for polling");
 
     let retries = 0;
-    const oldTransactions = data.myTransactions;
+    const oldTransactions = txData.myTransactions;
 
     while (retries < maxRetries) {
-      const transactionRecords =
-        await TransactionHistoryService.fetchAccountHistory(account);
-
-      if (hasNewItem(transactionRecords)) {
-        setData((prev) => {
-          return { ...prev, myTransactions: transactionRecords };
-        });
+      console.log("polling", retries);
+      const transactionRecords = await fetchTxData();
+
+      if (hasNewItem(transactionRecords.myTransactions)) {
+        console.log(
+          transactionRecords.totalPending,
+          transactionRecords.totalSunk
+        );
+        setTxData(transactionRecords);
         return;
       }
 
@@ -107,21 +118,23 @@ export function useTransactionHistory(
 
   useEffect(() => {
     if (!account) {
-      setData(defaultData);
+      setTxData(defaultData);
     } else {
-      fetchData();
+      fetchTxData().then((txData) => {
+        setTxData(txData);
+      });
     }
-  }, [fetchData, account]);
+  }, [fetchTxData, account]);
 
   const refetch = useCallback(() => {
-    if (account) fetchData();
-  }, [account, fetchData]);
+    if (account) fetchTxData();
+  }, [account, fetchTxData]);
 
   return {
-    myTransactions: data.myTransactions,
-    totalSunk: data.totalSunk,
-    totalPending: data.totalPending,
-    retirementGraceDays: data.retirementGraceDays,
+    myTransactions: txData.myTransactions,
+    totalSunk: txData.totalSunk,
+    totalPending: txData.totalPending,
+    retirementGraceDays: txData.retirementGraceDays,
     loading,
     refetch,
     pollForNewTransaction,