Add button to request airdrop

src/WalletPage.js

@@ -3,15 +3,45 @@ import Container from '@material-ui/core/Container';
 import BalancesList from './components/BalancesList';
 import Button from '@material-ui/core/Button';
 import { useWallet } from './utils/wallet';
-import { Account } from '@solana/web3.js';
+import { Account, LAMPORTS_PER_SOL } from '@solana/web3.js';
 import { createAndInitializeMint } from './utils/tokens';
+import Grid from '@material-ui/core/Grid';
+import { useIsProdNetwork } from './utils/connection';
 
 export default function WalletPage() {
-  const wallet = useWallet();
+  const isProdNetwork = useIsProdNetwork();
   return (
     <Container fixed maxWidth="md">
-      <BalancesList />
-      <br />
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <BalancesList />
+        </Grid>
+        {isProdNetwork ? null : (
+          <Grid item xs={12}>
+            <DevnetButtons />
+          </Grid>
+        )}
+      </Grid>
+    </Container>
+  );
+}
+
+function DevnetButtons() {
+  const wallet = useWallet();
+  return (
+    <div style={{ display: 'flex' }}>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => {
+          wallet.connection
+            .requestAirdrop(wallet.account.publicKey, LAMPORTS_PER_SOL)
+            .then(console.log)
+            .catch(console.warn);
+        }}
+      >
+        Request Airdrop
+      </Button>
       <Button
         variant="contained"
         color="primary"
@@ -28,9 +58,10 @@ export default function WalletPage() {
             .then(console.log)
             .catch(console.warn);
         }}
+        style={{ marginLeft: 24 }}
       >
-        Mint New Token
+        Mint Test Token
       </Button>
-    </Container>
+    </div>
   );
 }

src/utils/connection.js

@@ -27,3 +27,8 @@ export function useConnectionConfig() {
   let context = useContext(ConnectionContext);
   return { endpoint: context.endpoint, setEndpoint: context.setEndpoint };
 }
+
+export function useIsProdNetwork() {
+  const endpoint = useContext(ConnectionContext).endpoint;
+  return endpoint === clusterApiUrl('mainnet-beta');
+}