GeoffMahugu

import { InjectedConnector } from '@web3-react/injected-connector'
export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

GeoffMahugu

import './App.css';

function App() {
  // Main Banner Image
  const mainBgImage = "https://cdn.i-scmp.com/sites/default/files/styles/1200x800/public/d8/images/canvas/2021/12/03/b37a97d3-270c-4cdc-8c83-4ee735a686e8_95895212.jpg?itok=y0459xhc&v=1638533154";
 
  // Apes Image Data
  const apes = [
    { img: 'https://lh3.googleusercontent.com/F3twbu2BQbach9qBnzZaaTTSdD9p3elhyiyRCGVesqxvZecr5w_d4v3AdM3pmfIfYiozTY_6AsxFhVj1eRNb7VBKi_J1hLZJVPkVYw=w1400-k' },
    { img: 'https://lh3.googleusercontent.com/ZeVN3mXbx0ToUNLm4tGEOPlTsVW8ClMWBXcYzZwIqK2dNs9pzuCl-oZH1_I0-1AJw6AL0ZgWE2xVf_81c8Yw6lWLkkCMYgBZvC-9Fg=w1400-k' },

GeoffMahugu

.App {
  padding: 0px 30px;
  max-width: 1200px;
  margin: 0px auto;
  box-sizing: border-box
}

/* MAIN CARDS WRAPPER START */

.main-card-wrapper,

GeoffMahugu

/**
 * ASSESSMENT 
 * 1) Clearly identify what the 3 core issues are, and how they violate the principles of React Suspense;
 * 
 * SOLUTION
 *  - fetchUserProfile is not defined
 *  - No fallback call for the Suspense
 *  - No module export for UserProfileList which is the main module for the component
 *  - No loading component
*/

GeoffMahugu

import React, { useState } from 'react'
import { Link, useHistory } from 'react-router-dom';
import firebase from 'firebase';

import IPageProps from '../../interfaces/page.interface';
import { SignInWithSocialMedia } from '../../modules/auth';
import { Providers } from '../../config/firebase';

const SignUpPage: React.FunctionComponent<IPageProps> = props => {
    const [authenticating, setAuthenticating] = useState<boolean>(false);

GeoffMahugu

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route, RouteComponentProps } from 'react-router-dom';
import { auth } from './config/firebase';
import routes from './config/routes';
import AuthRoute from './modules/auth/AuthRouter';
import './App.css';

export interface IApplicationProps { }

const App: React.FunctionComponent<IApplicationProps> = props => {

GeoffMahugu

import IRoute from "../interfaces/route.interface";
import SignUpPage from "../pages/auth/SignUp";
import CartPage from "../pages/CartPage";
import HomePage from "../pages/HomePage";

const routes: IRoute[] = [
    {
        path: '/',
        exact: true,
        component: HomePage,

GeoffMahugu

export default interface IRoute {
    path: string;
    exact: boolean;
    component: any;
    name: string; // Used to update page infon and title. 
    protected: boolean; // This will defines if the route is proteted or not
}

GeoffMahugu

import React, { ReactNode } from 'react';
import { Redirect } from 'react-router-dom';
import { auth } from '../../config/firebase';
interface IAuthRouteProps {
    children: ReactNode;
    // any other props that come into the component
}

const AuthRoute: React.FunctionComponent<IAuthRouteProps> = props => {
    const { children } = props;

GeoffMahugu

import firebase from 'firebase';
import { auth } from '../../config/firebase';

export const SignInWithSocialMedia = (provider: firebase.auth.AuthProvider) =>
    new Promise<firebase.auth.UserCredential>((resolve, reject) => {
        auth.signInWithPopup(provider)
            .then(result => resolve(result))
            .catch(error => reject(error));
    });