DAO-35: use aragon ui toast (#426)

* replace snackbar with toast

* replace ANButton with aragon ui Button

packages/govern-console/src/App.tsx

@@ -1,17 +1,14 @@
 import Home from 'containers/HomePage/HomePage';
 import { HashRouter as Router } from 'react-router-dom';
 import { WalletProvider } from './AugmentedWallet';
-import SnackBarProvider from './customProviders/snackbarProvider';
 
 const App = () => {
   return (
-    <SnackBarProvider>
-      <WalletProvider>
-        <Router>
-          <Home />
-        </Router>
-      </WalletProvider>
-    </SnackBarProvider>
+    <WalletProvider>
+      <Router>
+        <Home />
+      </Router>
+    </WalletProvider>
   );
 };
 

packages/govern-console/src/components/ActionBuilder/Screens/AssetWithdrawal.tsx

@@ -10,6 +10,7 @@ import {
   Tag,
   SPACING,
   useLayout,
+  useToast,
 } from '@aragon/ui';
 import { ActionBuilderCloseHandler } from 'utils/types';
 import { Hint } from 'components/Hint/Hint';
@@ -19,7 +20,6 @@ import { useWallet } from 'AugmentedWallet';
 import AbiHandler from 'utils/AbiHandler';
 import { Asset, AssetLabel, ETH, OTHER_TOKEN_SYMBOL } from 'utils/Asset';
 import { useActionBuilderState } from '../ActionBuilderStateProvider';
-import { useSnackbar } from 'notistack';
 import { getErrorFromException } from 'utils/HelperFunctions';
 
 import { networkEnvironment } from 'environment';
@@ -53,7 +53,7 @@ export const AssetWithdrawal: React.FC<AssetWithdrawalProps> = ({ onClick }) =>
   const { provider } = context;
 
   const { dao } = useActionBuilderState();
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
 
   const methods = useForm<WithdrawalFormData>();
   const { control, handleSubmit, watch, getValues } = methods;
@@ -85,11 +85,9 @@ export const AssetWithdrawal: React.FC<AssetWithdrawalProps> = ({ onClick }) =>
     } catch (err) {
       console.log('withdrawal error', err);
       const errorMessage = getErrorFromException(err);
-      enqueueSnackbar(errorMessage, {
-        variant: 'error',
-      });
+      toast(errorMessage);
     }
-  }, [onClick, getValues, enqueueSnackbar, dao, provider]);
+  }, [onClick, getValues, toast, dao, provider]);
 
   const validateAmount = useCallback(
     async (value: string) => {

packages/govern-console/src/components/ActionBuilder/Screens/Deposit.tsx

@@ -12,14 +12,14 @@ import {
   useTheme,
   useLayout,
   SPACING,
+  useToast,
 } from '@aragon/ui';
 import { Hint } from 'components/Hint/Hint';
 import { useForm, Controller } from 'react-hook-form';
 import { validateAmountForDecimals, validateToken, validateBalance } from 'utils/validations';
 import { useWallet } from 'AugmentedWallet';
 import { useActionBuilderState } from '../ActionBuilderStateProvider';
 import { getTruncatedAccountAddress } from 'utils/account';
-import { useSnackbar } from 'notistack';
 import { getErrorFromException } from 'utils/HelperFunctions';
 import { Executor } from 'services/Executor';
 import { Asset, AssetLabel, ETH, OTHER_TOKEN_SYMBOL } from 'utils/Asset';
@@ -51,7 +51,7 @@ export const Deposit: React.FC = () => {
   const selectedToken = watch('token', 0);
 
   const { dao, gotoProcessTransaction } = useActionBuilderState();
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
 
   const buildActions = useCallback(async () => {
     const { token, tokenContractAddress, depositAmount, reference = '' } = getValues();
@@ -69,11 +69,9 @@ export const Deposit: React.FC = () => {
     } catch (err) {
       console.log('deposit error', err);
       const errorMessage = getErrorFromException(err);
-      enqueueSnackbar(errorMessage, {
-        variant: 'error',
-      });
+      toast(errorMessage);
     }
-  }, [getValues, account, dao, provider, enqueueSnackbar, gotoProcessTransaction]);
+  }, [getValues, account, dao, provider, toast, gotoProcessTransaction]);
 
   const validateAmount = useCallback(
     async (value: string) => {

packages/govern-console/src/components/ConsoleHeader/ConsoleHeader.tsx

@@ -4,8 +4,7 @@ import MUICard from '@material-ui/core/Card';
 import MUITypography from '@material-ui/core/Typography';
 import { useHistory } from 'react-router-dom';
 import consoleHeaderGraphic from 'images/console-header.svg';
-import { useSnackbar } from 'notistack';
-import { Button, TextInput, Split, useLayout, SPACING } from '@aragon/ui';
+import { Button, TextInput, Split, useLayout, useToast, SPACING } from '@aragon/ui';
 
 const ConsoleHeaderCard = styled(MUICard)(({ theme }) => ({
   background: theme.custom.daoHeader.background,
@@ -46,7 +45,7 @@ const ConsoleImage = styled('img')({
 
 export const ConsoleHeader: React.FC = () => {
   const { layoutName } = useLayout();
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
   const history = useHistory();
   const [searchString, updateSearchString] = useState<string>('');
 
@@ -58,9 +57,7 @@ export const ConsoleHeader: React.FC = () => {
     if (searchString.length > 0) {
       history.push(`daos/${searchString}`);
     } else {
-      enqueueSnackbar('Invalid Dao Name. At least one letter should be entered.', {
-        variant: 'error',
-      });
+      toast('Invalid Dao Name. At least one letter should be entered.');
     }
   };
 

packages/govern-console/src/components/DaoHeader/DaoHeader.tsx

@@ -4,10 +4,9 @@ import { styled } from '@material-ui/core/styles';
 import MUICard from '@material-ui/core/Card';
 import MUITypography from '@material-ui/core/Typography';
 import { settingsUrl } from 'utils/urls';
-import { Button, IconSettings, Grid } from '@aragon/ui';
+import { Button, IconSettings, Grid, useToast } from '@aragon/ui';
 import { ActionBuilder } from 'components/ActionBuilder/ActionBuilder';
 import { useWallet } from 'AugmentedWallet';
-import { useSnackbar } from 'notistack';
 import { Error } from 'utils/Error';
 
 export interface DaoHeaderProps {
@@ -52,22 +51,19 @@ export const DaoHeader: React.FC<DaoHeaderProps> = ({ daoName }) => {
 
   const context: any = useWallet();
   const { isConnected } = context;
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
 
   const goToSettingPage = () => {
     history.push(settingsUrl(daoName));
   };
 
   const openDepositDialog = useCallback(() => {
     if (!isConnected) {
-      enqueueSnackbar(Error.ConnectAccount, {
-        variant: 'error',
-      });
-
+      toast(Error.ConnectAccount);
       return;
     }
     setDepositDialogOpen(true);
-  }, [setDepositDialogOpen, enqueueSnackbar, isConnected]);
+  }, [setDepositDialogOpen, toast, isConnected]);
 
   return (
     <DaoHeaderCard>

packages/govern-console/src/containers/Console/ConsoleMainPage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, memo } from 'react';
 import { styled } from '@material-ui/core/styles';
 import { ConsoleHeader } from 'components/ConsoleHeader/ConsoleHeader';
 import { DaoCard } from 'components/DaoCards/DaoCard';
-import { ANButton } from 'components/Button/ANButton';
+import { Button } from '@aragon/ui';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import { useHistory } from 'react-router-dom';
@@ -102,14 +102,7 @@ const ConsoleMainPage: React.FC = () => {
         }}
       >
         {totalDaoCount !== visibleDaoList.length ? (
-          <ANButton
-            label="Load More DAOs"
-            buttonType="secondary"
-            height="46px"
-            width="163px"
-            labelColor="#00C2FF"
-            onClick={loadMore}
-          ></ANButton>
+          <Button label="Load More DAOs" mode="secondary" size="large" onClick={loadMore}></Button>
         ) : null}
       </div>
     </ConsoleMainDiv>

packages/govern-console/src/containers/DAO/NoDaoFound.tsx

@@ -5,7 +5,7 @@ import { InputField } from 'components/InputFields/InputField';
 import { useHistory } from 'react-router-dom';
 import MUITypography from '@material-ui/core/Typography';
 import daoNoutFound from 'images/dao-not-found.svg';
-import { useSnackbar } from 'notistack';
+import { useToast } from '@aragon/ui';
 
 const VerticalAlignWrapper = styled('div')({
   height: 'fit-content',
@@ -55,15 +55,13 @@ const NotFoundImage = styled('img')({
 
 const NoDaoFound: React.FC = () => {
   const history = useHistory();
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
 
   const onGotoDao = () => {
     if (daoSearchText.length > 0) {
       history.push(`${daoSearchText}`);
     } else {
-      enqueueSnackbar('Invalid Dao Name. At least one letter should be entered.', {
-        variant: 'error',
-      });
+      toast('Invalid Dao Name. At least one letter should be entered.');
     }
   };
 

packages/govern-console/src/containers/DAOSettings/DAOSettings.tsx

@@ -11,7 +11,7 @@ import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { ContractReceipt } from 'ethers';
 import { validateToken, validateContract, validateAmountForDecimals } from 'utils/validations';
 import { Proposal, ReceiptType } from '@aragon/govern';
-import { useSnackbar } from 'notistack';
+import { useToast } from '@aragon/ui';
 import { toUTF8String } from 'utils/lib';
 import { proposalDetailsUrl } from 'utils/urls';
 import { addToIpfs, fetchIPFS } from 'utils/ipfs';
@@ -78,7 +78,7 @@ const DaoSettings: React.FC<DaoSettingFormProps> = () => {
   const context: any = useWallet();
   const { account, isConnected, provider } = context;
   const { dispatch } = React.useContext(ModalsContext);
-  const { enqueueSnackbar } = useSnackbar();
+  const toast = useToast();
   const methods = useForm<FormInputs>();
   const { control, setValue, getValues, handleSubmit, trigger } = methods;
   const { daoName } = useParams<ParamTypes>();
@@ -208,7 +208,8 @@ const DaoSettings: React.FC<DaoSettingFormProps> = () => {
       try {
         transactionsQueue.current = await proposalInstance.schedule(payload, buildConfig(config));
       } catch (error) {
-        enqueueSnackbar(error.message, { variant: 'error' });
+        console.log('Failed scheduling dao changes', error);
+        toast(error.message);
         return;
       }
     }