Skip to content

Commit

Permalink
Add all transactions, vault state accounts (#5)
Browse files Browse the repository at this point in the history 
* Set up web3 apis with program

* add LP mint account

* add swapRewardToStrategy transaction

* Remove RAY, add strategy swap pool lp token address

* connect with deposit, withdraw, claim instructions

Co-authored-by: thisisIron <[email protected]>
  • Loading branch information
@coldpak @psogv0308
coldpak and psogv0308 authored Oct 15, 2021
1 parent 9cc4e7c commit 6a42a5d
Show file tree
Hide file tree
Showing 16 changed files with 491 additions and 237 deletions.
4 changes: 2 additions & 2 deletions src/components/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,8 @@ function App() {
<Route exact path={"/vault"} component={() => <Vault />} />
<Route path={"/vault/:vaultId"} component={() => <VaultDetail />} />
<Route path={"/swap"} component={() => <Swap />} />
<Route path={"/staking/stake"} component={() => <Stake />} />
<Route path={"/staking/pool"} component={() => <LetLpPool />} />
{/* <Route path={"/staking/stake"} component={() => <Stake />} />
<Route path={"/staking/pool"} component={() => <LetLpPool />} /> */}
<Route path={"/staking"} component={() => <Staking />} />
<Route path={"/"} component={() => <Home />} />
</Switch>
Expand Down
22 changes: 20 additions & 2 deletions src/components/Buttons/MediumButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import WalletBtnEnabled from 'assets/svgs/WalletBtnEnabled.svg';
import WalletBtnHovered from 'assets/svgs/WalletBtnHovered.svg';
import WalletBtnPressed from 'assets/svgs/WalletBtnPressed.svg';
import WalletBtnSelected from 'assets/svgs/WalletBtnSelected.svg';
import WalletBtnDisabled from 'assets/svgs/WalletBtnDisabled.svg';
import CursorPointer from 'assets/CursorPointer.svg';
import { Link } from "react-router-dom";

Expand All @@ -26,6 +27,9 @@ const useStyles = makeStyles({
'&:focus': {
backgroundImage: `url(${WalletBtnSelected})`,
},
'&.disabled': {
backgroundImage: `url(${WalletBtnDisabled})`,
},
cursor: `url(${CursorPointer}), pointer`,
},
text: {
Expand All @@ -34,20 +38,34 @@ const useStyles = makeStyles({
fontWeight: 700,
backgroundColor: 'transparent',
marginTop: 4,
color: 'rgba(255, 210, 113, 1)',
color: '#FFD271',
lineHeight: '18px',
userSelect: 'none',
'&.disabled': {
color: '#997614',
},
}
})

export interface BasicBtnProps {
text?: string,
link?: string,
external?: boolean,
disabled?: boolean,
}

function MediumButton({ text, link, external }: BasicBtnProps) {
function MediumButton({ text, link, external, disabled }: BasicBtnProps) {
const classes = useStyles();
if (disabled) {
return (
<div className={`${classes.root} disabled`}>
<div className={`${classes.text} disabled`}>
{text}
</div>
</div>
)
}

if (external) {
return (
<Link to={{
Expand Down
175 changes: 169 additions & 6 deletions src/components/Carousel/Carousel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,39 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { useWallet } from '@solana/wallet-adapter-react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { CSSTransition } from 'react-transition-group';
import { makeStyles } from '@material-ui/core';

import { conn, liquidityPoolInfos } from 'recoil/atoms';
import { Farm, Strategy, Vault } from 'types';
import {
harvest,
harvestV4,
swapRewardToUsdc,
swapUsdcToStrategy,
swapRewardToStrategy,
deposit,
depositV4,
withdraw,
withdrawV4,
} from 'utils/transactions';
import { sendAndConfirmRawTransaction } from '@solana/web3.js';
import FlagItem from './FlagItem';
import NotConnectedFlagItem from './NotConnectedFlagItem';
import CursorPointer from "assets/CursorPointer.svg";
import IconLeftNavigation from "assets/svgs/big-arrow-left.svg";
import IconRightNavigation from "assets/svgs/big-arrow-right.svg";
import './Carousel.css';
import NotConnectedFlagItem from './NotConnectedFlagItem';
import { STRATEGIES } from 'utils/strategies';
import { getIndexFromSymbol } from 'utils/constants';

interface CarouselProps {
vault: Vault;
farm: Farm;
items: any[];
active: number;
handleChangeIndex?: (index: number) => void;
isHome?: boolean;
}

interface CarouselAnimState {
Expand Down Expand Up @@ -60,8 +81,11 @@ const useStyles = makeStyles({

export default function Carousel(props: CarouselProps) {
const classes = useStyles();
const { vault, farm, isHome } = props;
const connection = useRecoilValue(conn);
const poolInfos = useRecoilValue(liquidityPoolInfos);
const { connected, publicKey, signAllTransactions } = useWallet();
const [items, _] = useState<any[]>(props.items);
const { connected } = useWallet();
const [animState, setAnimState] = useState<CarouselAnimState>({
active: props.active,
direction: "left",
Expand Down Expand Up @@ -139,11 +163,148 @@ export default function Carousel(props: CarouselProps) {
})
}


// 공통으로 필요한, 커넥션, 오너 등은 Carousel 레벨에서 전달
// Strategy, amount 등 FlagItem 레벨에서 결정해야하는 것들은 함수 인자로 정의
const handleDeposit = async (amount: number, strategyInfo: Strategy) => {
console.log(amount)
let transactions = []
if (!vault.farmRewardTokenAccountB) {
transactions.push(
harvest(connection, publicKey!, vault, strategyInfo, farm)
)
if (strategyInfo.strategyTokenSymbol === 'BTC') {
const rewardToUsdcPoolInfo = poolInfos[vault.rewardUsdcLpMintAccount]
const usdcToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfo, false)
)
transactions.push(
swapUsdcToStrategy(connection, publicKey!, vault, strategyInfo, usdcToStrategyPoolInfo)
)
}
else {
const rewardToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfo, false)
)
}
transactions.push(
deposit(connection, publicKey!, vault, strategyInfo, farm, String(amount))
)
}
else {
transactions.push(
harvestV4(connection, publicKey!, vault, strategyInfo, farm)
)
if (strategyInfo.strategyTokenSymbol === 'BTC') {
const rewardToUsdcPoolInfo = poolInfos[vault.rewardUsdcLpMintAccount]
const rewardToUsdcPoolInfoB = poolInfos[vault.rewardUsdcLpMintAccountB!]
const usdcToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfo, false)
)
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfoB, true)
)
transactions.push(
swapUsdcToStrategy(connection, publicKey!, vault, strategyInfo, usdcToStrategyPoolInfo)
)
}
else {
const rewardToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
const rewardToStrategyPoolInfoB = poolInfos[strategyInfo.strategyLpMintAccountB!]
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfo, false)
)
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfoB, true)
)
}
transactions.push(
depositV4(connection, publicKey!, vault, strategyInfo, farm, String(amount))
)
}
transactions = await Promise.all(transactions);
const signedTransactions = await signAllTransactions!(transactions)
console.log(signedTransactions)
for (let signedTransaction of signedTransactions) {
await sendAndConfirmRawTransaction(connection!, signedTransaction.serialize(), { skipPreflight: true, commitment: 'confirmed' });
}
}

const handleWithdraw = async (amount: number, rewardAmount: number, strategyInfo: Strategy) => {
let transactions = []
if (!vault.farmRewardTokenAccountB) {
transactions.push(
harvest(connection, publicKey!, vault, strategyInfo, farm)
)
if (strategyInfo.strategyTokenSymbol === 'BTC') {
const rewardToUsdcPoolInfo = poolInfos[vault.rewardUsdcLpMintAccount]
const usdcToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfo, false)
)
transactions.push(
swapUsdcToStrategy(connection, publicKey!, vault, strategyInfo, usdcToStrategyPoolInfo)
)
}
else {
const rewardToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfo, false)
)
}
transactions.push(
withdraw(connection, publicKey!, vault, strategyInfo, farm, String(amount), String(rewardAmount))
)
}
else {
transactions.push(
harvestV4(connection, publicKey!, vault, strategyInfo, farm)
)
if (strategyInfo.strategyTokenSymbol === 'BTC') {
const rewardToUsdcPoolInfo = poolInfos[vault.rewardUsdcLpMintAccount]
const rewardToUsdcPoolInfoB = poolInfos[vault.rewardUsdcLpMintAccountB!]
const usdcToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfo, false)
)
transactions.push(
swapRewardToUsdc(connection, publicKey!, vault, strategyInfo, rewardToUsdcPoolInfoB, true)
)
transactions.push(
swapUsdcToStrategy(connection, publicKey!, vault, strategyInfo, usdcToStrategyPoolInfo)
)
}
else {
const rewardToStrategyPoolInfo = poolInfos[strategyInfo.strategyLpMintAccount]
const rewardToStrategyPoolInfoB = poolInfos[strategyInfo.strategyLpMintAccountB!]
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfo, false)
)
transactions.push(
swapRewardToStrategy(connection, publicKey!, vault, strategyInfo, rewardToStrategyPoolInfoB, true)
)
}
transactions.push(
withdrawV4(connection, publicKey!, vault, strategyInfo, farm, String(amount), String(rewardAmount))
)
}
transactions = await Promise.all(transactions);
const signedTransactions = await signAllTransactions!(transactions)
console.log(signedTransactions)
for (let signedTransaction of signedTransactions) {
await sendAndConfirmRawTransaction(connection!, signedTransaction.serialize(), { skipPreflight: true, commitment: 'confirmed' });
// await new Promise((resolve) => setTimeout(resolve, 500))
}
}

return (
<div className={classes.carouselRoot}>
<div className={classes.leftArrow} onClick={(leftClick)}></div>
{generateItems(animState.active).map((i, idx) => {
if (connected) {
if (connected || isHome) {
return (
<CSSTransition
key={i.key}
Expand All @@ -152,19 +313,21 @@ export default function Carousel(props: CarouselProps) {
>
<FlagItem
id={`${i.item.symbol}-${i.key}`}
// id={i.key}
level={i.level}
item={i.item}
strategy={STRATEGIES[getIndexFromSymbol(i.item.symbol)]}
onClick={() => {
setAnimState({
direction: i.level < 0 ? 'left' : 'right',
active: i.key
})
}}
handleDeposit={handleDeposit}
handleWithdraw={handleWithdraw}
/>
</CSSTransition>
);
} else {
} else {
return (
<CSSTransition
key={i.key}
Expand Down
35 changes: 19 additions & 16 deletions src/components/Carousel/FlagItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
import BigNumber from 'bignumber.js';
import { useState } from 'react';
import { Reward, rewardPrices } from 'recoil/atoms';
import { liquidityPoolInfos, Reward, rewardPrices } from 'recoil/atoms';
import { useRecoilValue } from 'recoil';
import Countup from 'react-countup';
import { makeStyles } from '@material-ui/core';

import { Strategy } from 'types';
import Stone from 'components/Stone/Stone';
import SmallButton from 'components/Buttons/SmallButton';
import SmallPrimaryButton from 'components/Buttons/SmallPrimaryButton';
import BgFlag from 'assets/backgrounds/bg_flag.png';
import FlagLeftDeco from 'assets/backgrounds/flag_left_deco.png';
import FlagRightDeco from 'assets/backgrounds/flag_right_deco.png';
import FlagLeftTail from 'assets/backgrounds/flag_left_tail.png';
import FlagRightTail from 'assets/backgrounds/flag_right_tail.png';
import BigNumber from 'bignumber.js';
import CursorPointer from 'assets/CursorPointer.svg';
import dot from "assets/svgs/Dot.svg";
import SmallPrimaryButton from 'components/Buttons/SmallPrimaryButton';
import './Carousel.css';

export interface FlagItemProps {
id: any;
level: number;
item: Reward;
strategy: Strategy;
onClick: () => void;
handleDeposit: (amount: number, strategyInfo: Strategy) => void;
handleWithdraw: (amount: number, rewardAmount: number, strategyInfo: Strategy) => void;
}

const useStyles = makeStyles({
Expand Down Expand Up @@ -172,7 +177,7 @@ export default function FlagItem(props: FlagItemProps) {
const prices = useRecoilValue(rewardPrices);
const [mode, setMode] = useState(true);
const [amount, setAmount] = useState(0);
const { level, item, onClick } = props;
const { level, item, strategy, onClick, handleDeposit, handleWithdraw } = props;

const confirmText = mode ? "Deposit" : "Withdraw";

Expand Down Expand Up @@ -233,7 +238,7 @@ export default function FlagItem(props: FlagItemProps) {

<div
className={classes.claimButton}
// onClick={onClickClaim}
onClick={() => handleWithdraw(0, 1, strategy)}
>
<SmallButton text="claim" />
</div>
Expand Down Expand Up @@ -274,17 +279,15 @@ export default function FlagItem(props: FlagItemProps) {
</div>
<div
className={classes.confirmBtn}
// onClick={
// mode ?
// () => {
// onClickDeposit(amount, tokenName)
// resetAmount()
// } :
// () => {
// onClickWithdraw(amount, tokenName)
// resetAmount()
// }
// }
onClick={
mode ?
() => {
handleDeposit(amount, strategy)
} :
() => {
handleWithdraw(amount, 0, strategy)
}
}
>
<SmallPrimaryButton>{confirmText}</SmallPrimaryButton>
</div>
Expand Down
Loading

0 comments on commit 6a42a5d

Please sign in to comment.