Skip to content

fix: make component compatible with near.social #3

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

Merged
linguists merged 3 commits into from
Apr 13, 2023
Merged

fix: make component compatible with near.social #3

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e982341
fix: put the BrandImage directly into the component
keeplearning-near Apr 13, 2023
595e75a
fix: replace functional component with inline component
linguists Apr 13, 2023
7255826
fix: remove NEARInput
linguists Apr 13, 2023
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
230 changes: 104 additions & 126 deletions src/Stake.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,15 +179,6 @@ const NEARInputContainer = styled.div`
justify-content: space-between;
`;

const NEARIcon = () => (
<img
src={`https://ipfs.near.social/ipfs/bafkreid5xjykpqdvinmj432ldrkbjisrp3m4n25n4xefd32eml674ypqly`}
width={26}
height={26}
alt="NEAR Icon"
/>
);

const NEARTexture = styled.div`
font-size: 24px;
font-weight: bold;
Expand All @@ -199,29 +190,6 @@ const LogoWithText = styled.div`
align-items: center;
`;

const NEARInputComp = ({ value, onChange, error }) => (
<input
style={{
"text-align": "right",
width: "100%",
background: "transparent",
border: "0",
"font-size": "16px",
"font-weight": "bold",
color: error ? "#ec6868" : "white",
outline: "none",
"box-shadow": "none",
"margin-right": "16px",

"-webkit-appearance": "none",
"-moz-appearance": "textfield",
}}
placeholder="NEAR amount to stake"
value={value}
onChange={onChange}
/>
);

const MaxTexture = styled.div`
font-size: 24px;
color: #4451FD;
Expand All @@ -244,44 +212,23 @@ const YouWillReceive = styled.div`
margin-top: 16px;
`;

const NEARInput = ({ value, onChange, onClickMax }) => {
return (
<NEARInputContainer>
<LogoWithText>
<NEARIcon />
<NEARTexture>NEAR</NEARTexture>
</LogoWithText>
<NEARInputComp
value={value}
onChange={onChange}
error={state.inputError}
/>
<MaxTexture onClick={onClickMax}>MAX</MaxTexture>
</NEARInputContainer>
);
};

const BrandImage = () => (
<a href="https://linearprotocol.org/" target="_blank">
<img
style={{
height: "20px",
width: "auto",
position: "absolute",
left: "32px",
top: "44px",
}}
src="https://ipfs.near.social/ipfs/bafkreifb45onycd5nycpvt6vboe54zc5c4lynjg5xare4i2tqblwlkogoq"
alt="Brand Logo"
height={20}
width={auto}
/>
</a>
);

return (
<Main>
<BrandImage />
<a href="https://linearprotocol.org/" target="_blank">
<img
style={{
height: "20px",
width: "auto",
position: "absolute",
left: "32px",
top: "44px",
}}
src="https://ipfs.near.social/ipfs/bafkreifb45onycd5nycpvt6vboe54zc5c4lynjg5xare4i2tqblwlkogoq"
alt="Brand Logo"
height={20}
width={"auto"}
/>
</a>
<Title>Stake Your NEAR</Title>
<Description>
Stake NEAR and receive LiNEAR while earning staking rewards
Expand All @@ -291,75 +238,106 @@ return (
</APYContainer>
<StakeFormWrapper>
<InputWrapper>
<NEARInput
value={state.inputValue}
onChange={(e) => {
// Has user signed in?
if (!isSignedIn) {
<NEARInputContainer>
<LogoWithText>
<img
src={`https://ipfs.near.social/ipfs/bafkreid5xjykpqdvinmj432ldrkbjisrp3m4n25n4xefd32eml674ypqly`}
width={26}
height={26}
alt="NEAR Icon"
/>
<NEARTexture>NEAR</NEARTexture>
</LogoWithText>
<input
style={{
"text-align": "right",
width: "100%",
background: "transparent",
border: "0",
"font-size": "16px",
"font-weight": "bold",
color: state.inputError ? "#ec6868" : "white",
outline: "none",
"box-shadow": "none",
"margin-right": "16px",

"-webkit-appearance": "none",
"-moz-appearance": "textfield",
}}
placeholder="NEAR amount to stake"
value={state.inputValue}
onChange={(e) => {
// Has user signed in?
if (!isSignedIn) {
State.update({
inputError: "Sign in please",
});
return;
}
const targetValue = e.target.value;
if (targetValue !== "" && !targetValue.match(/^\d*(\.\d*)?$/)) {
return;
}
let stakeAmount = targetValue.replace(/^0+/, "0"); // remove prefix 0
// limit 24 decimals
const most24DecimalsPattern = /^-?\d+(\.\d{0,24})?/;
let values = stakeAmount.match(most24DecimalsPattern);
if (values) {
stakeAmount = values[0];
}
if (
nearBalance &&
(isNaN(Number(stakeAmount)) ||
stakeAmount === "" ||
Big(stakeAmount).lt(1) ||
Big(stakeAmount).gt(Big(nearBalance)))
) {
if (
isNaN(Number(stakeAmount)) ||
stakeAmount === "" ||
Big(stakeAmount).lt(1)
) {
State.update({
inputValue: stakeAmount,
inputError: "Stake at least 1 NEAR",
});
} else {
State.update({
inputValue: stakeAmount,
inputError: `Max is ${nearBalance} NEAR`,
});
}
return;
}
State.update({
inputError: "Sign in please",
inputValue: stakeAmount,
inputError: "",
});
return;
}
const targetValue = e.target.value;
if (targetValue !== "" && !targetValue.match(/^\d*(\.\d*)?$/)) {
return;
}
let stakeAmount = targetValue.replace(/^0+/, "0"); // remove prefix 0
// limit 24 decimals
const most24DecimalsPattern = /^-?\d+(\.\d{0,24})?/;
let values = stakeAmount.match(most24DecimalsPattern);
if (values) {
stakeAmount = values[0];
}
if (
nearBalance &&
(isNaN(Number(stakeAmount)) ||
stakeAmount === "" ||
Big(stakeAmount).lt(1) ||
Big(stakeAmount).gt(Big(nearBalance)))
) {
}}
/>
<MaxTexture
onClick={() => {
if (
isNaN(Number(stakeAmount)) ||
stakeAmount === "" ||
Big(stakeAmount).lt(1)
isNaN(Number(nearBalance)) ||
nearBalance === "" ||
Big(nearBalance).lt(1)
) {
State.update({
inputValue: stakeAmount,
inputValue: nearBalance,
inputError: "Stake at least 1 NEAR",
});
return;
} else {
State.update({
inputValue: stakeAmount,
inputError: `Max is ${nearBalance} NEAR`,
inputValue: nearBalance,
inputError: "",
});
}
return;
}
State.update({
inputValue: stakeAmount,
inputError: "",
});
}}
onClickMax={() => {
if (
isNaN(Number(nearBalance)) ||
nearBalance === "" ||
Big(nearBalance).lt(1)
) {
State.update({
inputValue: nearBalance,
inputError: "Stake at least 1 NEAR",
});
return;
} else {
State.update({
inputValue: nearBalance,
inputError: "",
});
}
}}
/>
}}
>
MAX
</MaxTexture>
</NEARInputContainer>
<HorizentalLine />
<BalanceContainer>
<p>Balance: {nearBalance} NEAR</p>
Expand Down