From 5cbc630f241d00debf7f9a2d2ae02c1c496dbbe6 Mon Sep 17 00:00:00 2001 From: sohrab <4444588+sohrab-@users.noreply.github.com> Date: Tue, 2 Aug 2022 23:27:01 +1000 Subject: [PATCH] fix: options field spacing and hide some header items on mobile --- src/components/header/Header.tsx | 95 +++++---- src/components/options/GeneralOptions.tsx | 70 +++---- src/components/options/Options.tsx | 2 +- src/components/options/RpcEndpointOptions.tsx | 2 +- src/components/options/TransactionOptions.tsx | 198 +++++++++--------- 5 files changed, 181 insertions(+), 186 deletions(-) diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 8048cc1..eff674a 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -28,56 +28,59 @@ export const Header: React.FC = () => { Logo - { - toast({ - title: funTitle - ? "Serious Business Mode™️ enabled!" - : "Serious Business Mode™️ disabled!", - status: funTitle ? "warning" : "success", - duration: 1000, - isClosable: true, - }); - setFunTitle(!funTitle); - }} - > - Better Call SOL - - - + + { + toast({ + title: funTitle + ? "Serious Business Mode™️ enabled!" + : "Serious Business Mode™️ disabled!", + status: funTitle ? "warning" : "success", + duration: 1000, + isClosable: true, + }); + setFunTitle(!funTitle); + }} + > + Better Call SOL + + + - {/* TODO implement */} - - } - variant="ghost" - color="white" - isDisabled - /> - + + {/* TODO implement */} + + } + variant="ghost" + color="white" + isDisabled + /> + - {/* TODO implement */} - - } - variant="ghost" - color="white" - isDisabled - /> - + {/* TODO implement */} + + } + variant="ghost" + color="white" + isDisabled + /> + + diff --git a/src/components/options/GeneralOptions.tsx b/src/components/options/GeneralOptions.tsx index 253b2e3..8e4688a 100644 --- a/src/components/options/GeneralOptions.tsx +++ b/src/components/options/GeneralOptions.tsx @@ -1,4 +1,4 @@ -import { FormControl, Grid } from "@chakra-ui/react"; +import { Grid } from "@chakra-ui/react"; import React from "react"; import { usePersistentStore } from "../../hooks/usePersistentStore"; import { Explorer } from "../../models/state-types"; @@ -13,42 +13,40 @@ export const GeneralOptions: React.FC = () => { ]); return ( - - - EXPLORERS.find((x) => x.id === appOptions.explorer)!} - getChoices={() => EXPLORERS} - set={(x) => { - set((state) => { - state.appOptions.explorer = x as Explorer; - }); - }} - /> + + EXPLORERS.find((x) => x.id === appOptions.explorer)!} + getChoices={() => EXPLORERS} + set={(x) => { + set((state) => { + state.appOptions.explorer = x as Explorer; + }); + }} + /> - appOptions.autoConnectWallet} - set={(x) => { - set((state) => { - state.appOptions.autoConnectWallet = x; - }); - }} - /> + appOptions.autoConnectWallet} + set={(x) => { + set((state) => { + state.appOptions.autoConnectWallet = x; + }); + }} + /> - appOptions.enableNumbering} - set={(x) => { - set((state) => { - state.appOptions.enableNumbering = x; - }); - }} - /> - - + appOptions.enableNumbering} + set={(x) => { + set((state) => { + state.appOptions.enableNumbering = x; + }); + }} + /> + ); }; diff --git a/src/components/options/Options.tsx b/src/components/options/Options.tsx index 537c047..2b69cc3 100644 --- a/src/components/options/Options.tsx +++ b/src/components/options/Options.tsx @@ -34,7 +34,7 @@ export const Options: React.FC = () => { return ( { setSession((state) => { diff --git a/src/components/options/RpcEndpointOptions.tsx b/src/components/options/RpcEndpointOptions.tsx index 7783692..a36d25d 100644 --- a/src/components/options/RpcEndpointOptions.tsx +++ b/src/components/options/RpcEndpointOptions.tsx @@ -14,7 +14,7 @@ export const RpcEndpointOptions: React.FC = () => { return ( - Add or remove custom RPC points, or re-order the list: + Re-order RPC endpoints or manage custom endpoints. { diff --git a/src/components/options/TransactionOptions.tsx b/src/components/options/TransactionOptions.tsx index 1e45610..04d668b 100644 --- a/src/components/options/TransactionOptions.tsx +++ b/src/components/options/TransactionOptions.tsx @@ -1,4 +1,4 @@ -import { FormControl, Grid } from "@chakra-ui/react"; +import { Grid } from "@chakra-ui/react"; import { Commitment } from "@solana/web3.js"; import React from "react"; import { usePersistentStore } from "../../hooks/usePersistentStore"; @@ -14,113 +14,107 @@ export const TransactionOptions: React.FC = () => { ]); return ( - - - - COMMITMENT_LEVELS.find( - (x) => x.id === transactionOptions.commitment - )! - } - getChoices={() => COMMITMENT_LEVELS} - set={(x) => { - set((state) => { - state.transactionOptions.commitment = x as Commitment; - }); - }} - /> + + + COMMITMENT_LEVELS.find((x) => x.id === transactionOptions.commitment)! + } + getChoices={() => COMMITMENT_LEVELS} + set={(x) => { + set((state) => { + state.transactionOptions.commitment = x as Commitment; + }); + }} + /> - transactionOptions.skipPreflight} - set={(x) => { - set((state) => { - state.transactionOptions.skipPreflight = x; - }); - }} - /> + transactionOptions.skipPreflight} + set={(x) => { + set((state) => { + state.transactionOptions.skipPreflight = x; + }); + }} + /> - - COMMITMENT_LEVELS.find( - (x) => x.id === transactionOptions.preflightCommitment - )! - } - getChoices={() => COMMITMENT_LEVELS} - set={(x) => { - set((state) => { - state.transactionOptions.preflightCommitment = x as Commitment; - }); - }} - /> + + COMMITMENT_LEVELS.find( + (x) => x.id === transactionOptions.preflightCommitment + )! + } + getChoices={() => COMMITMENT_LEVELS} + set={(x) => { + set((state) => { + state.transactionOptions.preflightCommitment = x as Commitment; + }); + }} + /> - - transactionOptions.confirmTransactionInitialTimeout / 1_000 - } - set={(x) => { - set((state) => { - state.transactionOptions.confirmTransactionInitialTimeout = - x * 1_000; - }); - }} - format={(x) => `${x} seconds`} - /> + transactionOptions.confirmTransactionInitialTimeout / 1_000} + set={(x) => { + set((state) => { + state.transactionOptions.confirmTransactionInitialTimeout = + x * 1_000; + }); + }} + format={(x) => `${x} seconds`} + /> - transactionOptions.confirmTransactionTimeout / 1_000} - set={(x) => { - set((state) => { - state.transactionOptions.confirmTransactionTimeout = x * 1_000; - }); - }} - format={(x) => `${x} seconds`} - /> + transactionOptions.confirmTransactionTimeout / 1_000} + set={(x) => { + set((state) => { + state.transactionOptions.confirmTransactionTimeout = x * 1_000; + }); + }} + format={(x) => `${x} seconds`} + /> - transactionOptions.pollingPeriod / 1_000} - set={(x) => { - set((state) => { - state.transactionOptions.pollingPeriod = x * 1_000; - }); - }} - format={(x) => `${x} seconds`} - /> + transactionOptions.pollingPeriod / 1_000} + set={(x) => { + set((state) => { + state.transactionOptions.pollingPeriod = x * 1_000; + }); + }} + format={(x) => `${x} seconds`} + /> - transactionOptions.maxRetries} - set={(x) => { - set((state) => { - state.transactionOptions.maxRetries = x; - }); - }} - format={(x) => `${x} times`} - /> + transactionOptions.maxRetries} + set={(x) => { + set((state) => { + state.transactionOptions.maxRetries = x; + }); + }} + format={(x) => `${x} times`} + /> - transactionOptions.disableRetryOnRateLimit} - set={(x) => { - set((state) => { - state.transactionOptions.disableRetryOnRateLimit = x; - }); - }} - /> - - + transactionOptions.disableRetryOnRateLimit} + set={(x) => { + set((state) => { + state.transactionOptions.disableRetryOnRateLimit = x; + }); + }} + /> + ); };