Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change StakeSubRow input value to use BigInt instead of rounded value #78

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Change StakeSubRow input value to use BigInt instead of rounded value #78

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7fa6f83
change input value to use BigInt
jonijuup Mar 4, 2022
42c81eb
compare juice bigint value
jonijuup Mar 4, 2022
b94a789
fix error
jonijuup Mar 4, 2022
f69b718
make input font size smaller if the number is long
jonijuup Mar 4, 2022
ef5415c
limit decimlas in juice input and fixes.
muzam1l Mar 4, 2022
2ab2e9a
filter out 'non number' chars from juice input
muzam1l Mar 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions components/StakeSubRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
emitEvent,
findToken,
getTransactionLink,
limitJuiceAmount,
filterJuiceAmount,
parseJuice,
} from "../../utils/helpers";
import Box from "../Box";
Expand Down Expand Up @@ -232,10 +232,9 @@ const StakeSubRow: FC<SubRowProps> = ({ row, type = "make" }) => {
disabled={stakePending}
autoFocus
size="lg"
type="number"
Copy link
Member

@muzam1l muzam1l Mar 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After banging my head for some time, turns out this was culprit. On non-chromiums if number input gets a non-number, it just gives empty string to target.value but sets the original string in element, so react state and input state would go out of sync. Didn't know if that was even possible :).

placeholder="0.0"
value={stakeAmount}
onChange={(e) => setStakeAmount(limitJuiceAmount(e.target.value))}
onChange={(e) => setStakeAmount(filterJuiceAmount(e.target.value))}
css={{
width: "100%",
minWidth: "30px",
Expand Down
5 changes: 2 additions & 3 deletions components/Wallet/ActiveWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { toast } from "react-toastify";
import CountUp from "react-countup";
import { state, useSnapshot, VanillaEvents } from "../../state";
import { connectWallet, disconnect } from "../../state/actions/wallet";
import { emitEvent, getTransactionLink, limitJuiceAmount, parseJuice } from "../../utils/helpers";
import { emitEvent, getTransactionLink, filterJuiceAmount, parseJuice } from "../../utils/helpers";
import Box from "../Box";
import Button from "../Button";
import Input from "../Input";
Expand Down Expand Up @@ -516,11 +516,10 @@ const ActiveWallet: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
}}
>
<Input
type="number"
autoFocus
disabled={txDisabled === false ? false : true}
value={juiceAmount}
onChange={(e) => setJuiceAmount(limitJuiceAmount(e.target.value))}
onChange={(e) => setJuiceAmount(filterJuiceAmount(e.target.value))}
size="xl"
placeholder="0.0"
css={{
Expand Down
9 changes: 7 additions & 2 deletions utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,16 @@ export const getTransactionLink = (txHash: string) => {
return transactionLink;
}

export const limitJuiceAmount = (str: string) => {
export const filterJuiceAmount = (str: string) => {
str = str.replace(/([^\d.])/gi, '')

let [int = "0", frac = ''] = str.split(".");
const hasDot = str.includes('.')

if (frac.length > juiceDecimals) {
frac = frac.slice(0, juiceDecimals);
}
const amount = frac ? `${int}.${frac}` : int;

let amount = `${int}${hasDot ? '.': ''}${frac}`;
return amount
}