Skip to content

Commit

Permalink
feat: redesign app (#43)
Browse files Browse the repository at this point in the history
- new theme
- remove safe-react-components
- update to MUI 5
- Use craco instead of react-rewired
  • Loading branch information
schmanu authored Dec 1, 2023
1 parent 6ab8254 commit 242c326
Show file tree
Hide file tree
Showing 43 changed files with 4,728 additions and 4,981 deletions.
34 changes: 0 additions & 34 deletions config-overrides.js

This file was deleted.

24 changes: 24 additions & 0 deletions craco.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
import { Configuration } from 'webpack/types.d';

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

const config = {
babel: {
plugins: ['@emotion/babel-plugin'],
},
webpack: {
plugins: [new NodePolyfillPlugin()],
configure: (webpackConfig: Configuration) => {
if (!webpackConfig?.resolve?.plugins) return webpackConfig;

// Allow imports outside of src/
webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter(
({ constructor }: InstanceType<typeof ModuleScopePlugin>) => constructor?.name !== 'ModuleScopePlugin',
);
return webpackConfig;
},
},
};

export default config;
50 changes: 29 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
{
"name": "token-approval-manager",
"version": "1.1.1",
"version": "1.3.0",
"private": true,
"dependencies": {
"@gnosis.pm/safe-apps-provider": "0.10.1",
"@gnosis.pm/safe-apps-react-sdk": "4.2.1",
"@gnosis.pm/safe-apps-sdk": "7.0.0",
"@gnosis.pm/safe-core-sdk": "^2.1.0",
"@gnosis.pm/safe-ethers-lib": "^1.1.0",
"@gnosis.pm/safe-react-components": "^0.9.7",
"@gnosis.pm/safe-service-client": "^1.1.2",
"@material-ui/core": "4.X.X",
"@material-ui/styles": "^4.11.4",
"@emotion/babel-plugin": "^11.10.5",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.16",
"@mui/material": "^5.10.15",
"@mui/x-data-grid": "^4.X.X",
"@safe-global/safe-apps-provider": "^0.18.0",
"@safe-global/safe-apps-react-sdk": "^4.7.0",
"@safe-global/safe-apps-sdk": "^8.1.0",
"@safe-global/safe-core-sdk": "^3.2.1",
"@safe-global/safe-ethers-lib": "^1.1.0",
"@safe-global/safe-react-components": "^2.0.6",
"@safe-global/safe-service-client": "^1.1.2",
"bignumber.js": "^9.0.2",
"ethereum-blockies-base64": "^1.0.2",
"ethers": "^5.6.6",
"mobx": "^6.5.0",
"mobx-react": "^7.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"styled-components": "5.x.x"
"react-is": "^17.0.2"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"start": "craco start",
"build": "craco build",
"lint": "eslint --max-warnings 0 .",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"lint:fix": "eslint --fix .",
"test": "craco test",
"eject": "craco eject",
"generate-types": "typechain --target=ethers-v5 --out-dir src/contracts './node_modules/@openzeppelin/contracts/build/contracts/ERC20.json'",
"postinstall": "yarn generate-types"
},
Expand All @@ -45,8 +49,9 @@
},
"homepage": "./",
"devDependencies": {
"@openzeppelin/contracts": "^4.7.3",
"@testing-library/jest-dom": "^5.11.4",
"@craco/craco": "^7.0.0",
"@openzeppelin/contracts": "^4.8.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.1.9",
"@typechain/ethers-v5": "^9.0.0",
Expand All @@ -67,18 +72,21 @@
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"https-browserify": "^1.0.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"os-browserify": "^0.3.0",
"prettier": "^2.4.1",
"process": "^0.11.10",
"react-app-rewired": "^2.2.1",
"react-scripts": "^5.0.0",
"react-app-rewire-emotion": "^4.0.0",
"react-scripts": "^5.0.1",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"typechain": "^7.0.0",
"typescript": "^4.4.4",
"url": "^0.11.0"
},
"resolutions": {
"react-scripts/**/async": ">=2.6.4"
"react-scripts/**/async": ">=2.6.4",
"react-scripts/**/@svgr/webpack": ">=6.5.1",
"react-scripts/**/terser": ">=5.14.2"
}
}
67 changes: 28 additions & 39 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,62 +1,51 @@
import { Title, Text, Card } from '@gnosis.pm/safe-react-components';
import { Box, Card } from '@mui/material';
import React from 'react';
import styled from 'styled-components';

import { AppHeader } from './components/AppHeader';
import { ApprovalLoader } from './components/ApprovalLoader';
import { Footer } from './components/Footer';
import { ApprovalList } from './components/approvallist/ApprovalList';
import { FAQSection } from './components/approvallist/FAQSection';
import { StoreContextProvider } from './stores/StoreContextProvider';
import { BalanceStore } from './stores/tokens/BalanceStore';
import { TokenStore } from './stores/tokens/TokenStore';
import { TransactionStore } from './stores/transactions/TransactionStore';
import { UIStore } from './stores/ui/UIStore';

const Container = styled.div`
padding: 1rem;
padding-top: 0rem;
height: 100%;
display: flex;
flex-direction: column;
`;

const HeaderWrapper = styled.div`
padding: 1rem;
padding-top: 0rem;
display: flex;
flex-direction: column;
`;

const Row = styled.div`
display: flex;
flex-direction: row;
align-items: center;
`;
import './styles/globals.css';

const tokenStore = new TokenStore();

const balanceStore = new BalanceStore();

const transactionStore = new TransactionStore();

const uiStore = new UIStore();

const SafeApp = (): React.ReactElement => {
return (
<Container>
<HeaderWrapper>
<Row>
<img src={`${process.env.PUBLIC_URL}/logo.svg`} width={64} height={64} alt="Logo"></img>
<Title size="xl">Token Approval Manager</Title>
</Row>
<Text size="xl">✅ Keep track of all your token approvals.</Text>
<Text size="xl">✍️ Edit / Revoke multiple approvals in a single transaction.</Text>
</HeaderWrapper>
<Card>
<StoreContextProvider stores={{ tokenStore, transactionStore, uiStore }} loading={<ApprovalLoader />}>
<ApprovalList />
</StoreContextProvider>
</Card>
<FAQSection />
<Footer />
</Container>
<Box
sx={{
maxWidth: '1000px',
paddingTop: '24px',
position: 'relative',
margin: 'auto',
}}
>
<Box display="flex" flexDirection="column" alignItems="center" gap={2}>
<AppHeader />
<Card sx={{ padding: '16px 0px', overflow: 'visible', width: '100%' }} elevation={0}>
<StoreContextProvider
stores={{ tokenStore, transactionStore, uiStore, balanceStore }}
loading={<ApprovalLoader />}
>
<ApprovalList />
</StoreContextProvider>
</Card>
<FAQSection />
<Footer />
</Box>
</Box>
);
};

Expand Down
31 changes: 31 additions & 0 deletions src/AppWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { CircularProgress, CssBaseline, Theme, ThemeProvider, Typography } from '@mui/material';
import SafeProvider from '@safe-global/safe-apps-react-sdk';
import { SafeThemeProvider } from '@safe-global/safe-react-components';

import App from './App';
import { useDarkMode } from './hooks/useDarkMode';

export const AppWrapper = () => {
const isDarkMode = useDarkMode();
const themeMode = isDarkMode ? 'dark' : 'light';

return (
<SafeThemeProvider mode={themeMode}>
{(safeTheme: Theme) => (
<ThemeProvider theme={safeTheme}>
<CssBaseline />
<SafeProvider
loader={
<>
<Typography>Waiting for Safe...</Typography>
<CircularProgress />
</>
}
>
<App />
</SafeProvider>
</ThemeProvider>
)}
</SafeThemeProvider>
);
};
38 changes: 0 additions & 38 deletions src/GlobalStyle.ts

This file was deleted.

2 changes: 1 addition & 1 deletion src/actions/allowance.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { SafeAppProvider } from '@gnosis.pm/safe-apps-provider';
import { SafeAppProvider } from '@safe-global/safe-apps-provider';
import { BigNumber } from 'bignumber.js';
import { ethers } from 'ethers';

Expand Down
2 changes: 1 addition & 1 deletion src/actions/approvals.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { BaseTransaction } from '@gnosis.pm/safe-apps-sdk';
import { BaseTransaction } from '@safe-global/safe-apps-sdk';

import { ERC20__factory } from '../contracts';
import { UIApprovalEntry } from '../stores/ui/UIStore';
Expand Down
31 changes: 31 additions & 0 deletions src/components/AppHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { CheckOutlined } from '@mui/icons-material';
import { Box, Typography } from '@mui/material';

export const AppHeader = () => (
<Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between" width="100%">
<Typography variant="h1">Token Approval Manager</Typography>
<Box>
<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
<CheckOutlined
sx={{
backgroundColor: ({ palette }) => palette.info.background,
color: ({ palette }) => palette.info.main,
borderRadius: '12px',
}}
/>
<Typography>Keep track of all your token approvals.</Typography>
</Box>

<Box display="flex" flexDirection="row" alignItems="center" gap={2}>
<CheckOutlined
sx={{
backgroundColor: ({ palette }) => palette.info.background,
color: ({ palette }) => palette.info.main,
borderRadius: '12px',
}}
/>
<Typography>Edit / Revoke multiple approvals in a single transaction.</Typography>
</Box>
</Box>
</Box>
);
Loading

0 comments on commit 242c326

Please sign in to comment.