From e2e47865bc63b267b9e1ed5e0822e2205be40d86 Mon Sep 17 00:00:00 2001
From: Flo <flodef@free.fr>
Date: Sat, 30 Jul 2022 02:38:38 +0200
Subject: [PATCH] Added pull request #133 to check if connected

---
 .../src/client/components/contexts/PaymentProvider.tsx |  8 +++++++-
 point-of-sale/src/client/hooks/useIsOnline.ts          | 10 ++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 point-of-sale/src/client/hooks/useIsOnline.ts

diff --git a/point-of-sale/src/client/components/contexts/PaymentProvider.tsx b/point-of-sale/src/client/components/contexts/PaymentProvider.tsx
index dc93f381..3d33caaa 100644
--- a/point-of-sale/src/client/components/contexts/PaymentProvider.tsx
+++ b/point-of-sale/src/client/components/contexts/PaymentProvider.tsx
@@ -13,6 +13,7 @@ import { ConfirmedSignatureInfo, Keypair, PublicKey, Transaction, TransactionSig
 import BigNumber from 'bignumber.js';
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useConfig } from '../../hooks/useConfig';
+import { useIsOnline } from '../../hooks/useIsOnline';
 import { useNavigateWithQuery } from '../../hooks/useNavigateWithQuery';
 import { PaymentContext, PaymentStatus } from '../../hooks/usePayment';
 import { Confirmations } from '../../types';
@@ -25,6 +26,7 @@ export const PaymentProvider: FC<PaymentProviderProps> = ({ children }) => {
     const { connection } = useConnection();
     const { link, recipient, splToken, label, message, requiredConfirmations, connectWallet } = useConfig();
     const { publicKey, sendTransaction } = useWallet();
+    const isOnline = useIsOnline();
 
     const [amount, setAmount] = useState<BigNumber>();
     const [memo, setMemo] = useState<string>();
@@ -144,6 +146,10 @@ export const PaymentProvider: FC<PaymentProviderProps> = ({ children }) => {
     // When the status is pending, poll for the transaction using the reference key
     useEffect(() => {
         if (!(status === PaymentStatus.Pending && reference && !signature)) return;
+        if (!isOnline) {
+            console.error('No Internet Connection');
+            return;
+        }
         let changed = false;
 
         const interval = setInterval(async () => {
@@ -169,7 +175,7 @@ export const PaymentProvider: FC<PaymentProviderProps> = ({ children }) => {
             changed = true;
             clearInterval(interval);
         };
-    }, [status, reference, signature, connection, navigate]);
+    }, [status, reference, signature, connection, navigate, isOnline]);
 
     // When the status is confirmed, validate the transaction against the provided params
     useEffect(() => {
diff --git a/point-of-sale/src/client/hooks/useIsOnline.ts b/point-of-sale/src/client/hooks/useIsOnline.ts
new file mode 100644
index 00000000..aca3aa4e
--- /dev/null
+++ b/point-of-sale/src/client/hooks/useIsOnline.ts
@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+export function useIsOnline(): boolean {
+    const [online, setOnlineStatus] = useState(false);
+    useEffect(() => {
+        const isOnline = navigator.onLine;
+        setOnlineStatus(isOnline);
+    }, []);
+    return online;
+}