import "@fontsource/roboto";
import { useState, useEffect, useMemo } from "react";
import { SnackbarProvider, useSnackbar } from "notistack";
import { Button, Grid, makeStyles } from "@material-ui/core";
import { Provider } from "@project-serum/anchor";
// @ts-ignore
import Wallet from "@project-serum/sol-wallet-adapter";
import {
Signer,
ConfirmOptions,
Connection,
Transaction,
TransactionSignature,
} from "@solana/web3.js";
import {
TokenListContainer,
TokenListProvider,
} from "@solana/spl-token-registry";
import Swap from "@project-serum/swap-ui";
import "./App.css";
// App illustrating the use of the Swap component.
//
// One needs to just provide an Anchor `Provider` and a `TokenListContainer`
// to the `Swap` component, and then everything else is taken care of.
function App() {
return (
);
}
const useStyles = makeStyles((theme) => ({
root: {
minHeight: "100vh",
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
}));
function AppInner() {
const styles = useStyles();
const { enqueueSnackbar } = useSnackbar();
const [isConnected, setIsConnected] = useState(false);
const [tokenList, setTokenList] = useState(null);
const [provider, wallet] = useMemo(() => {
const opts: ConfirmOptions = {
preflightCommitment: "recent",
commitment: "recent",
};
const network = "https://solana-api.projectserum.com";
const wallet = new Wallet("https://www.sollet.io", network);
const connection = new Connection(network, opts.preflightCommitment);
const provider = new NotifyingProvider(
connection,
wallet,
opts,
(tx, err) => {
if (err) {
enqueueSnackbar(`Error: ${err.toString()}`, {
variant: "error",
});
} else {
enqueueSnackbar("Transaction sent", {
variant: "success",
action: (
),
});
}
}
);
return [provider, wallet];
}, [enqueueSnackbar]);
useEffect(() => {
new TokenListProvider().resolve().then(setTokenList);
}, [setTokenList]);
// Connect to the wallet.
useEffect(() => {
wallet.on("connect", () => {
enqueueSnackbar("Wallet connected", { variant: "success" });
setIsConnected(true);
});
wallet.on("disconnect", () => {
enqueueSnackbar("Wallet disconnected", { variant: "info" });
setIsConnected(false);
});
}, [wallet, enqueueSnackbar]);
return (
{tokenList && }
);
}
// Custom provider to display notifications whenever a transaction is sent.
//
// Note that this is an Anchor wallet/network provider--not a React provider,
// so all transactions will be flowing through here, which allows us to
// hook in to display all transactions sent from the `Swap` component
// as notifications in the parent app.
class NotifyingProvider extends Provider {
// Function to call whenever the provider sends a transaction;
private onTransaction: (
tx: TransactionSignature | undefined,
err?: Error
) => void;
constructor(
connection: Connection,
wallet: Wallet,
opts: ConfirmOptions,
onTransaction: (tx: TransactionSignature | undefined, err?: Error) => void
) {
super(connection, wallet, opts);
this.onTransaction = onTransaction;
}
async send(
tx: Transaction,
signers?: Array,
opts?: ConfirmOptions
): Promise {
try {
const txSig = await super.send(tx, signers, opts);
this.onTransaction(txSig);
return txSig;
} catch (err) {
this.onTransaction(undefined, err);
return "";
}
}
async sendAll(
txs: Array<{ tx: Transaction; signers: Array }>,
opts?: ConfirmOptions
): Promise> {
try {
const txSigs = await super.sendAll(txs, opts);
txSigs.forEach((sig) => {
this.onTransaction(sig);
});
return txSigs;
} catch (err) {
this.onTransaction(undefined, err);
return [];
}
}
}
export default App;