diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js index 88428cb..e8e27ab 100644 --- a/ui/.eslintrc.js +++ b/ui/.eslintrc.js @@ -23,7 +23,6 @@ module.exports = { ], '@typescript-eslint/no-namespace': 'off', 'simple-import-sort/imports': 2, - '@typescript-eslint/explicit-function-return-type': 'off', 'no-console': 'error', 'react/react-in-jsx-scope': 'off', }, diff --git a/ui/src/app.tsx b/ui/src/app.tsx index a406226..303cc4e 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -1,33 +1,31 @@ -import { HashRouter, Route, Routes, Navigate } from 'react-router-dom'; -import { themeGlobals } from '@/theme/globals'; -import { ComponentsTest, Home, Mint } from './views'; -import { SVGTestScreen } from './views/svg-test'; // TODO: remove when done -import { ConnectKitButton } from 'connectkit'; -import { MintTest } from './views/mint-test'; -import { ToastProvider } from './components'; -import { CreateAP } from './views/access-point'; - -export const App = () => { - themeGlobals(); - return ( - <> -
- {/* TODO remove after adding NavBar */} - -
- - - - } /> - } /> - } /> - } /> - {/** TODO remove for release */} - } /> - } /> - } /> - - - - ); -}; +import { HashRouter, Route, Routes, Navigate } from 'react-router-dom'; +import { themeGlobals } from '@/theme/globals'; +import { ComponentsTest, Home, Mint } from './views'; +import { ConnectKitButton } from 'connectkit'; +import { MintTest } from './views/mint-test'; +import { ToastProvider } from './components'; +import { CreateAP } from './views/access-point'; + +export const App = () => { + themeGlobals(); + return ( + <> +
+ {/* TODO remove after adding NavBar */} + +
+ + + + } /> + } /> + } /> + {/** TODO remove for release */} + } /> + } /> + } /> + + + + ); +}; diff --git a/ui/src/components/toast/toast.styles.tsx b/ui/src/components/toast/toast.styles.tsx index f4d11e5..308d4b7 100644 --- a/ui/src/components/toast/toast.styles.tsx +++ b/ui/src/components/toast/toast.styles.tsx @@ -85,6 +85,7 @@ export abstract class ToastStyles { display: 'flex', flexDirection: 'column', gap: '$4', + zIndex: '$toast', }); static readonly Layout = styled(Flex, { diff --git a/ui/src/store/features/github/async-thunk/fetch-branches.ts b/ui/src/store/features/github/async-thunk/fetch-branches.ts index 3b4966d..a85643c 100644 --- a/ui/src/store/features/github/async-thunk/fetch-branches.ts +++ b/ui/src/store/features/github/async-thunk/fetch-branches.ts @@ -1,5 +1,6 @@ import { DropdownItem } from '@/components'; import { githubActions, RootState } from '@/store'; +import { AppLog } from '@/utils'; import { createAsyncThunk } from '@reduxjs/toolkit'; import { GithubClient } from '../github-client'; @@ -24,7 +25,9 @@ export const fetchBranchesThunk = createAsyncThunk( dispatch(githubActions.setBranches(branches as DropdownItem[])); } catch (error) { - console.log(error); + AppLog.errorToast( + 'We have a problem trying to get your branches. Please try again later.' + ); dispatch(githubActions.setQueryState('failed')); } } diff --git a/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts b/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts index 5532d14..04f4ed1 100644 --- a/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts +++ b/ui/src/store/features/github/async-thunk/fetch-user-organizations.ts @@ -1,5 +1,6 @@ import { ComboboxItem } from '@/components'; import { RootState } from '@/store'; +import { AppLog } from '@/utils'; import { createAsyncThunk } from '@reduxjs/toolkit'; import { GithubClient, UserData } from '../github-client'; import { githubActions } from '../github-slice'; @@ -36,7 +37,7 @@ export const fetchUserAndOrgsThunk = createAsyncThunk( dispatch(githubActions.setUserAndOrgs(comboboxItems)); } catch (error) { - console.log(error); + AppLog.errorToast('We have a problem. Please try again later.'); dispatch(githubActions.setQueryState('failed')); } } diff --git a/ui/src/store/features/github/async-thunk/login.ts b/ui/src/store/features/github/async-thunk/login.ts index 558602d..09dc3e3 100644 --- a/ui/src/store/features/github/async-thunk/login.ts +++ b/ui/src/store/features/github/async-thunk/login.ts @@ -3,6 +3,7 @@ import { env } from '@/constants'; import { initializeApp } from 'firebase/app'; import { getAuth, signInWithPopup, GithubAuthProvider } from 'firebase/auth'; import { githubActions, RootState } from '@/store'; +import { AppLog } from '@/utils'; const GithubScopes = ['repo', 'read:org', 'read:user', 'public_repo', 'user']; @@ -43,8 +44,8 @@ export const login = createAsyncThunk( throw Error('Invalid response type'); } } catch (error) { - console.log('Could not connect to GitHub', error); - dispatch(githubActions.setState('disconnected')); + AppLog.errorToast('Github login failed. Please try again later.'); + dispatch(githubActions.setState('failed')); } } ); diff --git a/ui/src/store/features/github/github-slice.ts b/ui/src/store/features/github/github-slice.ts index f00b3f2..dc4203a 100644 --- a/ui/src/store/features/github/github-slice.ts +++ b/ui/src/store/features/github/github-slice.ts @@ -8,7 +8,7 @@ import { UserData } from './github-client'; export namespace GithubState { export type Token = string; - export type State = 'disconnected' | 'loading' | 'connected'; + export type State = 'disconnected' | 'loading' | 'connected' | 'failed'; export type QueryUserAndOrganizations = | 'idle' diff --git a/ui/src/utils/index.ts b/ui/src/utils/index.ts index aa68340..6edc7fd 100644 --- a/ui/src/utils/index.ts +++ b/ui/src/utils/index.ts @@ -3,3 +3,4 @@ export * from './validation'; export * from './object'; export * from './context'; export * from './toast'; +export * from './log'; diff --git a/ui/src/utils/log.ts b/ui/src/utils/log.ts new file mode 100644 index 0000000..905fa8b --- /dev/null +++ b/ui/src/utils/log.ts @@ -0,0 +1,29 @@ +import { pushToast } from './toast'; + +export abstract class AppLog { + static readonly IDENTIFIER = '[nfa]'; + + static error(...args: any[]): void { + // eslint-disable-next-line no-console + console.error(this.IDENTIFIER, ...args); + } + + static warn(...args: any[]): void { + // eslint-disable-next-line no-console + console.warn(this.IDENTIFIER, ...args); + } + + static info(...args: any[]): void { + // eslint-disable-next-line no-console + console.info(this.IDENTIFIER, ...args); + } + + static errorToast(message: string, ...args: any[]): void { + this.error(message, ...args); + pushToast('error', message); + } + + static successToast(message: string): void { + pushToast('success', message); + } +} diff --git a/ui/src/views/components-test/toast-test.tsx b/ui/src/views/components-test/toast-test.tsx index 1ba1316..e002887 100644 --- a/ui/src/views/components-test/toast-test.tsx +++ b/ui/src/views/components-test/toast-test.tsx @@ -1,7 +1,9 @@ import { Button, Flex } from '@/components'; import { pushToast } from '@/utils'; +import { useNavigate } from 'react-router-dom'; export const ToastTest = () => { + const navigate = useNavigate(); return (

ToastTest

@@ -19,6 +21,16 @@ export const ToastTest = () => { > Toggle Succes Toast + + ); }; diff --git a/ui/src/views/index.ts b/ui/src/views/index.ts index 6319a92..5bc4755 100644 --- a/ui/src/views/index.ts +++ b/ui/src/views/index.ts @@ -1,4 +1,3 @@ export * from './home'; export * from './mint'; -export * from './svg-test'; export * from './components-test'; diff --git a/ui/src/views/mint-test/mint-test.tsx b/ui/src/views/mint-test/mint-test.tsx index ec8dd19..554e599 100644 --- a/ui/src/views/mint-test/mint-test.tsx +++ b/ui/src/views/mint-test/mint-test.tsx @@ -1,6 +1,7 @@ import { Button, Flex } from '@/components'; import { Separator } from '@/components/core/separator.styles'; import { EthereumHooks } from '@/integrations'; +import { AppLog } from '@/utils'; import { ConnectKitButton } from 'connectkit'; import { useAccount } from 'wagmi'; @@ -180,19 +181,19 @@ export const MintTest: React.FC = () => { // We can setup callbacks for every stage of the process in this config prepare: { onSuccess: (data) => { - console.log('Prepared', data); + AppLog.info('Prepared', data); }, }, write: { onSuccess: (data) => { - console.log('Mint sent', data); + AppLog.info('Mint sent', data); }, }, transaction: { onSuccess: (data) => { - console.log('Transaction success', data); + AppLog.info('Transaction success', data); }, }, }} diff --git a/ui/src/views/mint/github-step/steps/github-connect/github-button.tsx b/ui/src/views/mint/github-step/steps/github-connect/github-button.tsx index 7065643..38ef902 100644 --- a/ui/src/views/mint/github-step/steps/github-connect/github-button.tsx +++ b/ui/src/views/mint/github-step/steps/github-connect/github-button.tsx @@ -1,22 +1,22 @@ +import { useCallback, useEffect } from 'react'; + import { Button, Icon } from '@/components'; import { githubActions, useAppDispatch, useGithubStore } from '@/store'; import { Mint } from '@/views/mint/mint.context'; -import { useCallback } from 'react'; -export const GithubButton = () => { +export const GithubButton: React.FC = () => { const { state } = useGithubStore(); const dispatch = useAppDispatch(); const { setGithubStep } = Mint.useContext(); const handleGithubLogin = useCallback(() => { - dispatch(githubActions.login()) - .then(() => setGithubStep(2)) - .catch((error) => { - //TODO show toast with error message - console.log(error); - }); + dispatch(githubActions.login()); }, [dispatch]); + useEffect(() => { + if (state === 'connected') setGithubStep(2); + }, [setGithubStep, state]); + return (