Skip to content

Commit

Permalink
Set up app skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
garywang committed Jul 28, 2020
1 parent d43b70a commit 1a33d8f
Show file tree
Hide file tree
Showing 12 changed files with 2,085 additions and 1,142 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

.idea
19 changes: 19 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@solana/web3.js": "^0.63.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bip32": "^2.0.5",
"bip39": "^3.0.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
Expand All @@ -30,5 +35,19 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"prettier": {
"singleQuote": true,
"trailingComma": "all"
},
"husky": {
"hooks": {
"pre-commit": "git-format-staged -f 'prettier --stdin-filepath \"{}\"' src/*.js"
}
},
"devDependencies": {
"git-format-staged": "^2.1.0",
"husky": "^4.2.5",
"prettier": "^2.0.5"
}
}
8 changes: 6 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Solana wallet with support for SPL tokens."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
Expand All @@ -24,7 +24,11 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<title>Solana SPL Wallet</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
4 changes: 2 additions & 2 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Solana SPL Wallet",
"name": "Solana SPL Wallet",
"icons": [
{
"src": "favicon.ico",
Expand Down
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

51 changes: 33 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,40 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import Container from '@material-ui/core/Container';
import NavigationFrame from './components/NavigationFrame';
import { ConnectionProvider } from './utils/connection';

function App() {
// TODO: add toggle for dark mode
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

const theme = React.useMemo(
() =>
createMuiTheme({
palette: {
type: prefersDarkMode ? 'dark' : 'light',
primary: blue,
},
}),
[prefersDarkMode],
);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<ThemeProvider theme={theme}>
<CssBaseline />
<ConnectionProvider>
<NavigationFrame>
<Container fixed maxWidth="md">
<Button variant="contained" color="secondary">
Hello World
</Button>
</Container>
</NavigationFrame>
</ConnectionProvider>
</ThemeProvider>
);
}

Expand Down
26 changes: 26 additions & 0 deletions src/components/NavigationFrame.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import Toolbar from '@material-ui/core/Toolbar';
import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
content: {
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
},
}));

export default function NavigationFrame({ children }) {
const classes = useStyles();
return (
<>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Solana SPL Wallet</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>{children}</main>
</>
);
}
7 changes: 0 additions & 7 deletions src/logo.svg

This file was deleted.

22 changes: 11 additions & 11 deletions src/serviceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const isLocalhost = Boolean(
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
),
);

export function register(config) {
Expand All @@ -43,7 +43,7 @@ export function register(config) {
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
'worker. To learn more, visit https://bit.ly/CRA-PWA',
);
});
} else {
Expand All @@ -57,7 +57,7 @@ export function register(config) {
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
.then((registration) => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
Expand All @@ -71,7 +71,7 @@ function registerValidSW(swUrl, config) {
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
);

// Execute callback
Expand All @@ -93,7 +93,7 @@ function registerValidSW(swUrl, config) {
};
};
})
.catch(error => {
.catch((error) => {
console.error('Error during service worker registration:', error);
});
}
Expand All @@ -103,15 +103,15 @@ function checkValidServiceWorker(swUrl, config) {
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => {
.then((response) => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => {
window.location.reload();
});
Expand All @@ -123,18 +123,18 @@ function checkValidServiceWorker(swUrl, config) {
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
'No internet connection found. App is running in offline mode.',
);
});
}

export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
.then((registration) => {
registration.unregister();
})
.catch(error => {
.catch((error) => {
console.error(error.message);
});
}
Expand Down
24 changes: 24 additions & 0 deletions src/utils/connection.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React, { useContext, useMemo } from 'react';
import { clusterApiUrl, Connection } from '@solana/web3.js';
import { useLocalStorageState } from './utils';

const ConnectionContext = React.createContext(null);

export function ConnectionProvider({ children }) {
const [endpoint, setEndpoint] = useLocalStorageState(
'endpoint',
clusterApiUrl('devnet'),
);

const connection = useMemo(() => new Connection(endpoint), [endpoint]);

return (
<ConnectionContext.Provider value={{ endpoint, setEndpoint, connection }}>
{children}
</ConnectionContext.Provider>
);
}

export function useConnection() {
return useContext(ConnectionContext).connection;
}
33 changes: 33 additions & 0 deletions src/utils/utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useCallback, useState } from 'react';

export async function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

export function useLocalStorageState(key, defaultState = null) {
const [state, setState] = useState(() => {
let storedState = localStorage.getItem(key);
if (storedState) {
return JSON.parse(storedState);
}
return defaultState;
});

const setLocalStorageState = useCallback(
(newState) => {
let changed = state !== newState;
if (!changed) {
return;
}
setState(state);
if (newState === null) {
localStorage.removeItem(key);
} else {
localStorage.setItem(key, JSON.stringify(newState));
}
},
[state, key],
);

return [state, setLocalStorageState];
}
Loading

0 comments on commit 1a33d8f

Please sign in to comment.