diff --git a/package.json b/package.json
index 3447031..ee4f773 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"homepage": "https://github.com/project-serum/swap-ui",
"license": "Apache-2.0",
"dependencies": {
+ "@fontsource/roboto": "^4.3.0",
"@project-serum/serum": "^0.13.34",
"@project-serum/swap": "^0.1.0-alpha.14",
"@solana/spl-token": "^0.1.4"
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index 01d4843..f776c91 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -13,24 +13,18 @@ import { useSwapContext, useSwapFair } from "../context/Swap";
import { useMint } from "../context/Token";
import { useRoute, useMarketName, useBbo } from "../context/Dex";
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
infoLabel: {
- marginTop: "10px",
- marginBottom: "10px",
+ marginTop: "20px",
+ marginBottom: "20px",
display: "flex",
- justifyContent: "space-between",
- marginLeft: "5px",
- marginRight: "5px",
- },
- fairPriceLabel: {
- marginRight: "10px",
- display: "flex",
- justifyContent: "center",
- flexDirection: "column",
- color: theme.palette.text.secondary,
+ justifyContent: "flex-end",
+ alignItems: "center",
},
infoButton: {
+ marginLeft: "5px",
padding: 0,
+ fontSize: "14px",
},
}));
@@ -47,17 +41,14 @@ export function InfoLabel() {
return (
-
-
-
- {fair !== undefined && toTokenInfo && fromTokenInfo
- ? `1 ${toTokenInfo.symbol} = ${fair.toFixed(
- fromMintInfo?.decimals
- )} ${fromTokenInfo.symbol}`
- : `-`}
-
-
-
+
+ {fair !== undefined && toTokenInfo && fromTokenInfo
+ ? `1 ${toTokenInfo.symbol} = ${fair.toFixed(
+ fromMintInfo?.decimals
+ )} ${fromTokenInfo.symbol}`
+ : `-`}
+
+
);
}
@@ -74,7 +65,7 @@ function InfoButton() {
{...bindTrigger(popupState)}
className={styles.infoButton}
>
-
+
({
table: {},
- closeAccountSwitchLabel: {
- color: theme.palette.text.secondary,
+ closeAccount: {
+ color: theme.palette.error.main,
},
}));
@@ -40,6 +40,8 @@ export default function OpenOrdersDialog({
open: boolean;
onClose: () => void;
}) {
+ const styles = useStyles();
+
return (
);
}
@@ -126,6 +122,8 @@ function OpenOrdersRow({
market: PublicKey;
openOrders: Array;
}) {
+ const styles = useStyles();
+
const [ooAccount, setOoAccount] = useState(openOrders[0]);
const { swapClient } = useDexContext();
const marketClient = useMarket(market);
@@ -235,9 +233,9 @@ function OpenOrdersRow({
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index eb6cdf9..0a51b2e 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -11,7 +11,6 @@ import {
FormControlLabel,
FormGroup,
} from "@material-ui/core";
-import { ToggleButton } from "@material-ui/lab";
import { SettingsOutlined as Settings } from "@material-ui/icons";
import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";
import { useSwapContext, useSwapFair } from "../context/Swap";
@@ -25,10 +24,27 @@ const useStyles = makeStyles((theme) => ({
table: {},
settingsButton: {
padding: 0,
+ color: theme.palette.primary.main,
},
closeAccountSwitchLabel: {
color: theme.palette.text.secondary,
},
+ fairAutoSelected: {
+ backgroundColor: theme.palette.primary.main,
+ padding: "3px 5px",
+ borderRadius: "10px",
+ color: theme.palette.primary.contrastText,
+ fontWeight: 700,
+ },
+ fairAuto: {
+ backgroundColor:
+ theme.palette.type === "dark"
+ ? theme.palette.secondary.light
+ : theme.palette.secondary.main,
+ padding: "3px 5px",
+ borderRadius: "10px",
+ boxShadow: "none",
+ },
}));
export function SettingsButton() {
@@ -56,7 +72,12 @@ export function SettingsButton() {
vertical: "top",
horizontal: "right",
}}
- PaperProps={{ style: { borderRadius: "10px" } }}
+ PaperProps={{
+ style: {
+ borderRadius: "10px",
+ boxShadow: "0px 0px 30px 5px rgba(0,0,0,0.075)",
+ },
+ }}
>
@@ -68,6 +89,8 @@ export function SettingsButton() {
}
function SettingsDetails() {
+ const styles = useStyles();
+
const { slippage, setSlippage, fairOverride, setFairOverride } =
useSwapContext();
const [showSettingsDialog, setShowSettingsDialog] = useState(false);
@@ -80,12 +103,12 @@ function SettingsDetails() {
return (
-
- Settings
-
-
-
-
Slippage tolerance
+
Settings
+
+
+
+ Slippage tolerance
+
-
-
Fair price
+
+
+ Fair price
+
- {
if (fair === undefined) {
console.error("Fair is undefined");
@@ -132,27 +157,22 @@ function SettingsDetails() {
setFairOverride(null);
}
}}
- style={{
- paddingTop: "3px",
- paddingBottom: "3px",
- paddingLeft: "5px",
- paddingRight: "5px",
- borderRadius: "20px",
- }}
+ className={
+ fairOverride === null
+ ? styles.fairAutoSelected
+ : styles.fairAuto
+ }
>
Auto
-
+
-
+
@@ -97,18 +140,24 @@ function SwapHeader() {
export function ArrowButton() {
const styles = useStyles();
+ const theme = useTheme();
const { swapToFromMints } = useSwapContext();
return (
-
+
);
}
-function SwapFromForm() {
+function SwapFromForm({ style }: { style?: any }) {
const { fromMint, setFromMint, fromAmount, setFromAmount } = useSwapContext();
return (
void;
amount: number;
setAmount: (a: number) => void;
}) {
+ const styles = useStyles();
+
const [showTokenDialog, setShowTokenDialog] = useState(false);
const tokenAccount = useOwnedTokenAccount(mint);
const mintAccount = useMint(mint);
+ const balance =
+ tokenAccount &&
+ mintAccount &&
+ tokenAccount.account.amount.toNumber() / 10 ** mintAccount.decimals;
+
+ const formattedAmount =
+ mintAccount && amount
+ ? amount.toLocaleString("fullwide", {
+ maximumFractionDigits: mintAccount.decimals,
+ useGrouping: false,
+ })
+ : amount;
+
return (
-
-
+
+
setShowTokenDialog(true)} />
- 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)}`
+ ? `Balance: ${balance?.toFixed(mintAccount.decimals)}`
: `-`}
+ {from && !!balance ? (
+ setAmount(balance)}
+ >
+ MAX
+
+ ) : null}
+
setAmount(parseFloat(e.target.value))}
+ InputProps={{
+ disableUnderline: true,
+ classes: {
+ root: styles.amountInput,
+ input: styles.input,
+ },
+ }}
+ />
setShowTokenDialog(false)}
/>
-
+
);
}
@@ -191,12 +260,14 @@ function TokenButton({
mint: PublicKey;
onClick: () => void;
}) {
+ const styles = useStyles();
+
return (
-