Add option to swap SPL tokens for native tokens

mostafa5691 · Sep 11, 2020 · 948d0e4 · 948d0e4
1 parent 0f2014f
commit 948d0e4
Show file tree

Hide file tree

Showing 12 changed files with 600 additions and 89 deletions.
diff --git a/src/components/CopyableDisplay.js b/src/components/CopyableDisplay.js
@@ -5,9 +5,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useSnackbar } from 'notistack';
 import QrcodeIcon from 'mdi-material-ui/Qrcode';
 import QRCode from 'qrcode.react';
-import DialogForm from './DialogForm';
 import DialogContent from '@material-ui/core/DialogContent';
 import IconButton from '@material-ui/core/IconButton';
+import Dialog from '@material-ui/core/Dialog';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -81,11 +81,11 @@ function Qrcode({ value }) {
       <IconButton onClick={() => setShowQrcode(true)}>
         <QrcodeIcon />
       </IconButton>
-      <DialogForm open={showQrcode} onClose={() => setShowQrcode(false)}>
+      <Dialog open={showQrcode} onClose={() => setShowQrcode(false)}>
         <DialogContent className={classes.qrcodeContainer}>
           <QRCode value={value} size={256} includeMargin />
         </DialogContent>
-      </DialogForm>
+      </Dialog>
     </>
   );
 }
diff --git a/src/components/DebugButtons.js b/src/components/DebugButtons.js
@@ -7,7 +7,11 @@ import { useUpdateTokenName } from '../utils/tokens/names';
 import { useCallAsync, useSendTransaction } from '../utils/notifications';
 import { Account, LAMPORTS_PER_SOL } from '@solana/web3.js';
 import { abbreviateAddress, sleep } from '../utils/utils';
-import { refreshAccountInfo, useConnectionConfig, MAINNET_URL } from '../utils/connection';
+import {
+  refreshAccountInfo,
+  useConnectionConfig,
+  MAINNET_URL,
+} from '../utils/connection';
 import { createAndInitializeMint } from '../utils/tokens';
 import { Tooltip, Button } from '@material-ui/core';
 import React from 'react';

diff --git a/src/components/DepositDialog.js b/src/components/DepositDialog.js
@@ -17,6 +17,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { useCallAsync } from '../utils/notifications';
 import { SwapApiError, swapApiRequest } from '../utils/swap/api';
 import {
+  ConnectToMetamaskButton,
   getErc20Balance,
   swapErc20ToSpl,
   useEthAccount,
@@ -104,7 +105,7 @@ function SolletSwapDepositAddress({ publicKey, balanceInfo }) {
     try {
       return await swapApiRequest('POST', 'swap_to', {
         blockchain: 'sol',
-        coin: balanceInfo.mint.toBase58(),
+        coin: balanceInfo.mint?.toBase58(),
         address: publicKey.toBase58(),
       });
     } catch (e) {
@@ -115,7 +116,7 @@ function SolletSwapDepositAddress({ publicKey, balanceInfo }) {
       }
       throw e;
     }
-  }, tuple('swapInfo', balanceInfo.mint.toBase58(), publicKey.toBase58()));
+  }, tuple('swapInfo', balanceInfo.mint?.toBase58(), publicKey.toBase58()));
 
   if (!loaded) {
     return <LoadingIndicator />;
@@ -153,17 +154,15 @@ function SolletSwapDepositAddress({ publicKey, balanceInfo }) {
           {coin.erc20Contract ? 'ERC20' : 'Native'} {coin.ticker} can be
           converted to SPL {tokenName} via MetaMask.
         </Typography>
-        {window.ethereum ? (
-          <MetamaskDeposit swapInfo={swapInfo} ethereum={window.ethereum} />
-        ) : null}
+        <MetamaskDeposit swapInfo={swapInfo} />
       </>
     );
   }
 
   return null;
 }
 
-function MetamaskDeposit({ ethereum, swapInfo }) {
+function MetamaskDeposit({ swapInfo }) {
   const ethAccount = useEthAccount();
   const [amount, setAmount] = useState('');
   const [submitted, setSubmitted] = useState(false);
@@ -184,22 +183,7 @@ function MetamaskDeposit({ ethereum, swapInfo }) {
   }, tuple(getErc20Balance, ethAccount, erc20Address));
 
   if (!ethAccount) {
-    function connect() {
-      callAsync(
-        ethereum.request({
-          method: 'eth_requestAccounts',
-        }),
-        {
-          progressMessage: 'Connecting to MetaMask...',
-          successMessage: 'Connected to MetaMask',
-        },
-      );
-    }
-    return (
-      <Button color="primary" variant="outlined" onClick={connect}>
-        Connect to MetaMask
-      </Button>
-    );
+    return <ConnectToMetamaskButton />;
   }
 
   async function submit() {
@@ -208,6 +192,7 @@ function MetamaskDeposit({ ethereum, swapInfo }) {
     await callAsync(
       (async () => {
         let parsedAmount = parseFloat(amount);
+
         if (!parsedAmount || parsedAmount > maxAmount) {
           throw new Error('Invalid amount');
         }
@@ -243,7 +228,13 @@ function MetamaskDeposit({ ethereum, swapInfo }) {
           }}
           value={amount}
           onChange={(e) => setAmount(e.target.value.trim())}
-          helperText={maxAmountLoaded ? `Max: ${maxAmount.toFixed(6)}` : null}
+          helperText={
+            maxAmountLoaded ? (
+              <span onClick={() => setAmount(maxAmount.toFixed(6))}>
+                Max: {maxAmount.toFixed(6)}
+              </span>
+            ) : null
+          }
         />
         <Button color="primary" style={{ marginLeft: 8 }} onClick={submit}>
           Convert