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 all commits
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
19 changes: 12 additions & 7 deletions components/StakeSubRow/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Image from "next/image";
import React, { FC, useCallback, useState } from "react";
import * as sdk from "@vanilladefi/stake-sdk";
import { isAddress } from "@vanilladefi/core-sdk";
import { isAddress, juiceDecimals } from "@vanilladefi/core-sdk";
import { Row } from "react-table";
import { toast } from "react-toastify";
import { useSnapshot } from "valtio";
Expand All @@ -11,6 +11,7 @@ import {
emitEvent,
findToken,
getTransactionLink,
filterJuiceAmount,
parseJuice,
} from "../../utils/helpers";
import Box from "../Box";
Expand All @@ -22,6 +23,7 @@ import Text from "../Text";

import { PolygonScanIcon } from "../../assets";
import { BigNumber } from "ethers";
import { formatUnits } from "ethers/lib/utils";

export type ColumnType = {
__typename?: "AssetPair";
Expand Down Expand Up @@ -54,7 +56,11 @@ const StakeSubRow: FC<SubRowProps> = ({ row, type = "make" }) => {

const staked = row.original.currentStake;

const [stakeAmount, setStakeAmount] = useState(staked?.juiceValue || "");
const [stakeAmount, setStakeAmount] = useState(
staked?.rawJuiceValue
? formatUnits(staked.rawJuiceValue, juiceDecimals)
Copy link
Member

Choose a reason for hiding this comment

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

Isn't this basically exactly the same as before?

Copy link
Member

Choose a reason for hiding this comment

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

Oh, but staked.juiceValue truncates the value to 3 decimals?

Copy link
Member

Choose a reason for hiding this comment

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

Yeah, basically juiceValue is also locale formatted (toLocaleString). Which adds commas/dots accordingly and rounds off to 3 digits.

: ""
);
const [stakePosition, setStakePosition] = useState<"long" | "short">(
staked?.sentiment || "long"
);
Expand All @@ -65,9 +71,8 @@ const StakeSubRow: FC<SubRowProps> = ({ row, type = "make" }) => {
const closingDisabled = stakePending;

const stakeUnchanged =
staked?.sentiment === stakePosition
? staked?.juiceValue === stakeAmount
: false;
staked?.sentiment === stakePosition &&
parseJuice(stakeAmount).eq(staked.rawJuiceValue);

const handleStake = useCallback(
async (type: "close" | "modify" = "modify") => {
Expand Down Expand Up @@ -227,15 +232,15 @@ 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(e.target.value)}
onChange={(e) => setStakeAmount(filterJuiceAmount(e.target.value))}
css={{
width: "100%",
minWidth: "30px",
maxWidth: "140px",
textAlign: "right",
fontSize: stakeAmount.length > 8 ? "$sm" : "$lg",
mx: "$3",
}}
/>
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, 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(e.target.value)}
onChange={(e) => setJuiceAmount(filterJuiceAmount(e.target.value))}
size="xl"
placeholder="0.0"
css={{
Expand Down
11 changes: 11 additions & 0 deletions generated/graphql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,19 @@ export enum AssetPair_OrderBy {
Timestamp = 'timestamp'
}

/** The block at which the query should be executed. */
export type Block_Height = {
/** Value containing a block hash */
hash?: Maybe<Scalars['Bytes']>;
/** Value containing a block number */
number?: Maybe<Scalars['Int']>;
/**
* Value containing the minimum block number.
* In the case of `number_gte`, the query will be executed on the latest block only if
* the subgraph has progressed to or past the minimum block number.
* Defaults to the latest block when omitted.
*
*/
number_gte?: Maybe<Scalars['Int']>;
};

Expand Down Expand Up @@ -236,6 +246,7 @@ export enum HourlyPriceHistory_OrderBy {
Timestamp = 'timestamp'
}

/** Defines the order direction, either ascending or descending */
export enum OrderDirection {
Asc = 'asc',
Desc = 'desc'
Expand Down
36 changes: 22 additions & 14 deletions graphql.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1093,12 +1093,12 @@
{
"kind": "INPUT_OBJECT",
"name": "Block_height",
"description": null,
"description": "The block at which the query should be executed.",
"fields": null,
"inputFields": [
{
"name": "hash",
"description": null,
"description": "Value containing a block hash",
"type": {
"kind": "SCALAR",
"name": "Bytes",
Expand All @@ -1110,7 +1110,7 @@
},
{
"name": "number",
"description": null,
"description": "Value containing a block number",
"type": {
"kind": "SCALAR",
"name": "Int",
Expand All @@ -1122,7 +1122,7 @@
},
{
"name": "number_gte",
"description": null,
"description": "Value containing the minimum block number. \nIn the case of `number_gte`, the query will be executed on the latest block only if\nthe subgraph has progressed to or past the minimum block number.\nDefaults to the latest block when omitted.\n",
"type": {
"kind": "SCALAR",
"name": "Int",
Expand Down Expand Up @@ -2693,7 +2693,7 @@
{
"kind": "ENUM",
"name": "OrderDirection",
"description": null,
"description": "Defines the order direction, either ascending or descending",
"fields": null,
"inputFields": null,
"interfaces": null,
Expand Down Expand Up @@ -4532,7 +4532,7 @@
},
{
"name": "derivedFrom",
"description": null,
"description": "creates a virtual field on the entity that may be queried but cannot be set manually through the mappings API.",
"isRepeatable": false,
"locations": [
"FIELD_DEFINITION"
Expand All @@ -4542,9 +4542,13 @@
"name": "field",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
Expand All @@ -4554,7 +4558,7 @@
},
{
"name": "entity",
"description": null,
"description": "Marks the GraphQL type as indexable entity. Each type that should be an entity is required to be annotated with this directive.",
"isRepeatable": false,
"locations": [
"OBJECT"
Expand Down Expand Up @@ -4645,7 +4649,7 @@
},
{
"name": "subgraphId",
"description": null,
"description": "Defined a Subgraph ID for an object type",
"isRepeatable": false,
"locations": [
"OBJECT"
Expand All @@ -4655,9 +4659,13 @@
"name": "id",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
Expand Down
14 changes: 14 additions & 0 deletions utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,18 @@ export const getTransactionLink = (txHash: string) => {
}
const transactionLink = `${explorerUrl}/tx/${txHash}`
return transactionLink;
}

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);
}

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