Merge pull request #31 from HORNET-Storage/feat-ui/unconfirmed-transactions

Feat UI/unconfirmed transactions

Author: AnthonyMarin

.env.development

@@ -1,8 +1,8 @@
 REACT_APP_BASE_URL=http://localhost:9002
-# REACT_APP_BASE_URL=https://11561ba2d27f.ngrok.app
+REACT_APP_WALLET_BASE_URL=http://localhost:9003  # New wallet base URL
 REACT_APP_ASSETS_BUCKET=http://localhost
-REACT_APP_DEMO_MODE=true
+REACT_APP_DEMO_MODE=false
 
-# more info https://create-react-app.dev/docs/advanced-configuration
+# More info https://create-react-app.dev/docs/advanced-configuration
 ESLINT_NO_DEV_ERRORS=true
 TSC_COMPILE_ON_ERROR=true

src/api/activity.api.ts

@@ -1,7 +1,9 @@
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { ActivityStatusType } from '@app/interfaces/interfaces';
+import { readToken } from '@app/services/localStorage.service';
 import config from '@app/config/config';
+import { message } from 'antd';
 
 export interface WalletTransaction {
   id: number;
@@ -11,33 +13,46 @@ export interface WalletTransaction {
   value: string;
 }
 
-export const getUserActivities = (): Promise<WalletTransaction[]> => {
-  return fetch(`${config.baseURL}/transactions/latest`)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error('Network response was not ok');
-      }
-      return response.json();
-    })
-    .then((data) => {
-      if (Array.isArray(data) && data.length === 0) {
-        // Handle the case where the response is an empty array
-        return [];
-      }
-      // Assuming your backend response matches the WalletTransaction interface
-      // eslint-disable-next-line
-      return data.map((item: any) => ({
-        id: item.ID,
-        witness_tx_id: item.WitnessTxId,
-        date: new Date(item.Date).getTime(),
-        output: item.Output,
-        value: item.Value,
-      }));
-    })
-    .catch((error) => {
-      console.error('Error fetching user activities:', error);
+export const getUserActivities = (handleLogout: () => void): Promise<WalletTransaction[]> => {
+  const token = readToken(); // Read the JWT token from local storage
+
+  if (!token) {
+    handleLogout(); // Call handleLogout if no token
+    return Promise.reject('No token found');
+  }
+
+  return fetch(`${config.baseURL}/api/transactions/latest`, {
+    method: 'GET',
+    headers: {
+      'Authorization': `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+  })
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => {
+    if (Array.isArray(data) && data.length === 0) {
+      // Handle the case where the response is an empty array
       return [];
-    });
+    }
+    // Assuming your backend response matches the WalletTransaction interface
+    // eslint-disable-next-line
+    return data.map((item: any) => ({
+      id: item.ID,
+      witness_tx_id: item.WitnessTxId,
+      date: new Date(item.Date).getTime(),
+      output: item.Output,
+      value: item.Value,
+    }));
+  })
+  .catch((error) => {
+    console.error('Error fetching user activities:', error);
+    return [];
+  });
 };
 
 export interface Activity {

src/api/earnings.api.ts

@@ -75,7 +75,7 @@ export const getTotalEarning = (id: number, currency: CurrencyTypeEnum): Promise
 
 export const getBitcoinRatesForLast30Days = (): Promise<Earning[]> => {
   console.log('Fetching bitcoin rate data.');
-  return fetch('http://localhost:5000/bitcoin-rates/last-30-days')
+  return fetch('http://localhost:5000/api/bitcoin-rates/last-30-days')
     .then((response) => response.json())
     .then((data) => {
       console.log('Received data:', data); // Add log statement to see the data

src/components/auth/LoginForm/LoginForm.tsx

@@ -45,7 +45,6 @@ export const LoginForm: React.FC = () => {
   const dispatch = useDispatch();
 
   const [form] = Form.useForm();
-  const [event, setEvent] = useState<any>(null);
 
   useEffect(() => {
     const fetchPublicKey = async () => {
@@ -60,37 +59,44 @@ export const LoginForm: React.FC = () => {
         console.error('Failed to get public key:', error);
       }
     };
-
-    fetchPublicKey();
-
-    const isFirstLoad = localStorage.getItem('isFirstLoad');
-    if (!isFirstLoad) {
-      window.location.reload();
-      localStorage.setItem('isFirstLoad', 'true');
-    }
+  
+    const intervalId = setInterval(() => {
+      if (window.nostr) {
+        fetchPublicKey();
+        clearInterval(intervalId);
+      }
+    }, 1000); // Retry every 1 second
+  
+    return () => clearInterval(intervalId); // Clear the interval on component unmount
   }, [form]);
+  
+
+  const [event, setEvent] = useState<any>(null);
 
   const handleSubmit = async (values: LoginFormData) => {
     try {
+      if (!window.nostr) {
+        notificationController.error({ message: 'Nostr extension is not available' });
+        return;
+      }
+      
       const { success, event } = await login(values);
       if (success && event) {
         setEvent(event);
-        // Automatically proceed to verification
         const signedEvent = await window.nostr.signEvent(event);
         console.log('Signed event:', signedEvent);
-
+  
         const response = await verifyChallenge({
           challenge: signedEvent.content,
           signature: signedEvent.sig,
           messageHash: signedEvent.id,
           event: signedEvent,
         });
-
+  
         if (response.success) {
           if (response.token && response.user) {
             persistToken(response.token);
             dispatch(setUser(response.user));
-            // Set the token in the API instance
             notificationController.success({
               message: 'Login successful',
               description: 'You have successfully logged in!',
@@ -105,6 +111,7 @@ export const LoginForm: React.FC = () => {
       notificationController.error({ message: error.message });
     }
   };
+  
 
   return (
     <Auth.FormWrapper>

src/components/common/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { CopyOutlined } from '@ant-design/icons';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { Button, message } from 'antd';
+interface CopyToClipboardProps {
+  textToCopy: string;
+}
+
+const ClipboardCopy: React.FC<CopyToClipboardProps> = ({ textToCopy }) => {
+  const copied = () => {
+    message.success('Copied to clipboard');
+  };
+  const onCopy = () => {
+    //display Copied to clipboard
+    copied();
+  };
+  return (
+    <CopyToClipboard text={textToCopy}>
+      <Button onClick={onCopy} icon={<CopyOutlined />} size="small" />
+    </CopyToClipboard>
+  );
+};
+
+export default ClipboardCopy;

src/components/layouts/main/MainHeader/MainHeader.styles.ts

@@ -12,7 +12,7 @@ export const Header = styled(BaseLayout.Header)<Header>`
   line-height: 1.5;
   z-index: 105;
 
-  @media only screen and ${media.xs} {
+  @media only screen and ${media.xxs} {
     ${(props) =>
       props.$isSiderOpened &&
       css`

src/components/relay-dashboard/Balance/components/SendForm/SendForm.styles.ts

@@ -13,20 +13,6 @@ export const TextRow = styled.div`
   gap: 1rem;
 `;
 
-export const SubCard = styled(BaseCard)<{ $isMobile?: boolean }>`
-  width: 30%;
-  ${(props) =>
-    props.$isMobile &&
-    css`
-      width: 100%;
-    `}
-  background-color: var(--additional-background-color);
-  cursor: pointer;
-  box-shadow: 0px 0px 10px 0px var(--shadow-color);
-  .ant-card-body {
-    padding: 1rem 2rem;
-  }
-`;
 export const SendBody = styled(BaseRow)`
   padding-bottom: 1rem;
 `;
@@ -45,28 +31,16 @@ export const FormHeader = styled.span`
   padding-bottom: 1rem;
 `;
 
-export const SubCardHeader = styled.span`
-  font-size: 1.5rem;
-`;
-
 export const InputHeader = styled.span`
   font-size: 1.5rem;
 `;
 
-export const SubCardAmount = styled.span`
-  font-size: 1.5rem;
-`;
-export const SubCardContent = styled.div`
-  font-size: 1.3rem;
-  height: 100%;
+export const RBFWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
-  flex-direction: column;
+  flex-direction: row;
+  gap: 1rem;
   align-items: center;
-  text-align: center;
-  gap: 3rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  justify-content: center;
 `;
 
 export const InputWrapper = styled.div`
@@ -75,38 +49,21 @@ export const InputWrapper = styled.div`
   flex-direction: column;
   gap: 0.5rem;
 `;
-export const TiersRow = styled.div`
+
+export const InputHeaderWrapper = styled.div`
   display: flex;
   flex-direction: row;
   gap: 1rem;
-  justify-content: space-around;
 `;
-
-export const TiersCol = styled.div`
+export const TiersContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  justify-content: space-around;
 `;
 export const SendFormButton = styled(BaseButton)`
   width: 100%;
 `;
-export const TiersContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  transition: all 0.5s ease;
-  padding: 1rem;
-  .tier-hover:hover {
-    background-color: var(--primary-color);
-  }
-  .selected {
-    border: 1px solid var(--primary-color);
-  }
-  .invalidAmount {
-    border: 1px solid var(--error-color);
-  }
-`;
+
 export const BalanceInfo = styled.small`
   color: var(--subtext-color);
 `;
@@ -118,26 +75,24 @@ export const Recipient = styled.span`
 export const ErrorText = styled.small`
   color: var(--error-color);
   display: flex;
+  op
   flex-direction: row;
   align-items: center;
 `;
 export const AddressText = styled.span`
   text-decoration: underline;
   color: var(--text-main-color);
 `;
-
-export const RateValueWrapper = styled.div`
+export const TiersRow = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 1rem;
+  justify-content: space-around;
 `;
-export const RateValue = styled.span`
-  color: green;
-`;
-export const RBFWrapper = styled.div`
+
+export const TiersCol = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 1rem;
-  align-items: center;
-  justify-content: center;
+  justify-content: space-around;
 `;