- {isConnected && (
-
+
+ {isConnected && (
+
);
}
diff --git a/src/components/Context.tsx b/src/components/Context.tsx
new file mode 100644
index 0000000..c2ab581
--- /dev/null
+++ b/src/components/Context.tsx
@@ -0,0 +1,211 @@
+import React, { useContext, useState, useEffect } from "react";
+import { Swap as SwapClient } from "@project-serum/swap";
+import { PublicKey, Account } from "@solana/web3.js";
+import {
+ AccountInfo as TokenAccount,
+ MintInfo,
+ Token,
+ TOKEN_PROGRAM_ID,
+} from "@solana/spl-token";
+import { TokenListContainer, TokenInfo } from "@solana/spl-token-registry";
+import { getOwnedTokenAccounts } from "../utils/tokens";
+
+const SRM_MINT = new PublicKey("SRMuApVNdxXokk5GT7XD5cUUgXMBCoAz2LHeuAoKWRt");
+const USDC_MINT = new PublicKey("EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v");
+
+const SwapContext = React.createContext
+
+ )}
+
- Swapping
-
- );
+const useStyles = makeStyles((theme) => ({
+ card: {
+ width: "450px",
+ borderRadius: "10px",
+ },
+ cardContent: {
+ marginLeft: "6px",
+ marginRight: "6px",
+ marginBottom: "6px",
+ },
+ tab: {
+ width: "50%",
+ },
+ settings: {
+ display: "flex",
+ flexDirection: "row-reverse",
+ },
+ settingsButton: {
+ padding: 0,
+ },
+ swapButton: {
+ width: "100%",
+ borderRadius: "15px",
+ },
+ swapToFromButton: {
+ display: "block",
+ marginLeft: "auto",
+ marginRight: "auto",
+ },
+ auxilliaryLabel: {
+ marginTop: "10px",
+ marginBottom: "10px",
+ display: "flex",
+ justifyContent: "space-between",
+ marginLeft: "5px",
+ marginRight: "5px",
+ },
+}));
+
+export default function Swap({
+ style,
+ provider,
+ tokenList,
+}: {
+ style?: any;
+ provider: Provider;
+ tokenList: TokenListContainer;
+}) {
+ const swapClient = new SwapClient(provider, tokenList);
+ return (
+
+
+
+
+ );
+}
+
+function SwapHeader() {
+ return (
+
+
+
+
+ Swap
+
+
+ );
+}
+
+function AuxilliaryLabel() {
+ const styles = useStyles();
+
+ const { fromMint, toMint, fromAmount, toAmount } = useSwapContext();
+ const toPrice = (fromAmount / toAmount).toFixed(6); // TODO: decimals per mint type.
+
+ const tokenList = useTokenList();
+ let fromTokenInfo = tokenList.filter(
+ (t) => t.address === fromMint.toString()
+ )[0];
+ let toTokenInfo = tokenList.filter((t) => t.address === toMint.toString())[0];
+
+ return (
+
+ Serum
+
+ );
+}
+
+function TabSelector() {
+ const styles = useStyles();
+ return (
+
+
+
+ {fromAmount !== 0 && toAmount !== 0
+ ? `1 ${toTokenInfo.symbol} = ${toPrice} ${fromTokenInfo.symbol}`
+ : `-`}
+
+
+
+
+
+ );
+}
+
+function SwapFromForm() {
+ const { fromMint, setFromMint, fromAmount, setFromAmount } = useSwapContext();
+ return (
+
+ setAmount(parseFloat(e.target.value))}
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ }}
+ />
+
+
+
+ {tokenAccount && mintAccount
+ ? `Balance: ${(
+ tokenAccount.account.amount.toNumber() /
+ 10 ** mintAccount.decimals
+ ).toFixed(mintAccount.decimals)}`
+ : `-`}
+
+
+
+ 
+
+ );
+}
+
+function TokenName({ mint }: { mint: PublicKey }) {
+ const tokenList = useTokenList();
+ let tokenInfo = tokenList.filter((t) => t.address === mint.toString())[0];
+ return (
+