Skip to content

Commit

Permalink
[Transfer locked tokens] use hooks (#312)
Browse files Browse the repository at this point in the history 
* Use hooks

* Use hooks
  • Loading branch information
@guibescos
guibescos authored Dec 21, 2023
1 parent c600e61 commit 733bd7b
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 149 deletions.
26 changes: 26 additions & 0 deletions frontend/hooks/useSplitRequest.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useQuery } from 'react-query'
import { useStakeConnection } from './useStakeConnection'
import { MainStakeAccount } from 'pages'

export const SplitRequestQueryPrefix = 'split-request'

export function useSplitRequest(mainStakeAccount: MainStakeAccount) {
const { data: stakeConnection } = useStakeConnection()

return useQuery(
[SplitRequestQueryPrefix, mainStakeAccount],
async () => {
if (mainStakeAccount === 'NA') return undefined

// only enabled when stakeConnection and mainStakeAccount is defined
const splitRequest = await stakeConnection?.getSplitRequest(
mainStakeAccount!
)

return splitRequest
},
{
enabled: stakeConnection !== undefined && mainStakeAccount !== undefined,
}
)
}
75 changes: 18 additions & 57 deletions frontend/pages/approve.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,25 @@
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import SEO from '../components/SEO'
import {
useAnchorWallet,
useConnection,
useWallet,
} from '@solana/wallet-adapter-react'
import {
PythBalance,
StakeAccount,
StakeConnection,
STAKING_ADDRESS,
} from '@pythnetwork/staking'
import { useAnchorWallet } from '@solana/wallet-adapter-react'
import { StakeAccount } from '@pythnetwork/staking'
import { useEffect, useState } from 'react'
import { Wallet } from '@coral-xyz/anchor'
import { PublicKey } from '@solana/web3.js'
import { useRouter } from 'next/router'
import toast from 'react-hot-toast'
import { capitalizeFirstLetter } from 'utils/capitalizeFirstLetter'
import { useStakeConnection } from 'hooks/useStakeConnection'
import { useSplitRequest } from 'hooks/useSplitRequest'

const ApproveSplit: NextPage = () => {
const { connection } = useConnection()
const anchorWallet = useAnchorWallet()
const [amount, setAmount] = useState<PythBalance>()
const [recipient, setRecipient] = useState<PublicKey>()

const [stakeConnection, setStakeConnection] = useState<StakeConnection>()
const [stakeAccounts, setStakeAccounts] = useState<StakeAccount[]>()
const [selectedStakeAccount, setSelectStakeAccount] = useState<StakeAccount>()

const { data: splitRequest } = useSplitRequest(selectedStakeAccount)
const { data: stakeConnection } = useStakeConnection()

const router = useRouter()
const { owner } = router.query

Expand All @@ -41,23 +32,6 @@ const ApproveSplit: NextPage = () => {
}
}

useEffect(() => {
const initialize = async () => {
const stakeConnection = await StakeConnection.createStakeConnection(
connection,
anchorWallet as Wallet,
STAKING_ADDRESS
)
setStakeConnection(stakeConnection)
}

if (!anchorWallet) {
setStakeConnection(undefined)
} else {
initialize()
}
}, [anchorWallet])

useEffect(() => {
const loadStakeAccounts = async () => {
if (stakeConnection && anchorWallet) {
Expand All @@ -72,37 +46,18 @@ const ApproveSplit: NextPage = () => {
loadStakeAccounts()
}, [stakeConnection])

useEffect(() => {
const loadCurrentRequest = async () => {
if (stakeConnection && selectedStakeAccount) {
const request = await stakeConnection.getSplitRequest(
selectedStakeAccount
)

if (request) {
setAmount(request.balance)
setRecipient(request.recipient)
} else {
setAmount(undefined)
setRecipient(undefined)
}
}
}
loadCurrentRequest()
}, [selectedStakeAccount])

useEffect(() => {
if (stakeAccounts && stakeAccounts.length > 0)
setSelectStakeAccount(stakeAccounts[0])
}, [stakeAccounts])

const approveSplit = async () => {
if (stakeConnection && selectedStakeAccount && recipient && amount) {
if (stakeConnection && selectedStakeAccount && splitRequest) {
try {
await stakeConnection.acceptSplit(
selectedStakeAccount,
amount,
recipient
splitRequest.balance,
splitRequest.recipient
)
toast.success('Successfully created transfer request')
} catch (err) {
Expand Down Expand Up @@ -141,9 +96,15 @@ const ApproveSplit: NextPage = () => {
? `stake account address: ${selectedStakeAccount.address}`
: 'no owner'}
</p>
<p>{amount != undefined ? `amount: ${amount}` : 'no amount'}</p>
<p>
{recipient != undefined ? `recipient: ${recipient}` : 'no recipient'}
{splitRequest != undefined
? `amount: ${splitRequest.balance}`
: 'no amount'}
</p>
<p>
{splitRequest != undefined
? `recipient: ${splitRequest.recipient}`
: 'no recipient'}
</p>
<button
className="rounded-full p-2 hover:bg-hoverGray"
Expand Down
33 changes: 4 additions & 29 deletions frontend/pages/create_locked_account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { useAnchorWallet, useConnection } from '@solana/wallet-adapter-react'
import {
PythBalance,
StakeAccount,
StakeConnection,
STAKING_ADDRESS,
} from '@pythnetwork/staking'
import { PythBalance, StakeAccount } from '@pythnetwork/staking'
import { useEffect, useState } from 'react'
import { BN, Wallet } from '@coral-xyz/anchor'
import { BN } from '@coral-xyz/anchor'
import { PublicKey } from '@solana/web3.js'
import toast from 'react-hot-toast'
import { capitalizeFirstLetter } from 'utils/capitalizeFirstLetter'
import { useStakeConnection } from 'hooks/useStakeConnection'

const TWELVE_MONTHS = new BN(3600 * 24 * 365)
const NUM_PERIODS = new BN(4)

const CreateLockedAccount: NextPage = () => {
const { connection } = useConnection()
const anchorWallet = useAnchorWallet()

const [owner, setOwner] = useState<PublicKey>()
const [amount, setAmount] = useState<PythBalance>()

Expand All @@ -39,26 +31,9 @@ const CreateLockedAccount: NextPage = () => {
}
}

const [stakeConnection, setStakeConnection] = useState<StakeConnection>()
const { data: stakeConnection } = useStakeConnection()
const [stakeAccounts, setStakeAccounts] = useState<StakeAccount[]>()

useEffect(() => {
const initialize = async () => {
const stakeConnection = await StakeConnection.createStakeConnection(
connection,
anchorWallet as Wallet,
STAKING_ADDRESS
)
setStakeConnection(stakeConnection)
}

if (!anchorWallet) {
setStakeConnection(undefined)
} else {
initialize()
}
}, [anchorWallet])

useEffect(() => {
const loadStakeAccounts = async () => {
if (stakeConnection && owner) {
Expand Down
84 changes: 21 additions & 63 deletions frontend/pages/request.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,18 @@
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import SEO from '../components/SEO'
import { useAnchorWallet, useConnection } from '@solana/wallet-adapter-react'
import {
PythBalance,
StakeAccount,
StakeConnection,
STAKING_ADDRESS,
} from '@pythnetwork/staking'
import { PythBalance, StakeAccount } from '@pythnetwork/staking'
import { useEffect, useState } from 'react'
import { Wallet } from '@coral-xyz/anchor'
import { PublicKey } from '@solana/web3.js'
import toast from 'react-hot-toast'
import { capitalizeFirstLetter } from 'utils/capitalizeFirstLetter'
import { useStakeConnection } from 'hooks/useStakeConnection'
import { useStakeAccounts } from 'hooks/useStakeAccounts'
import { useSplitRequest } from 'hooks/useSplitRequest'

const RequestSplit: NextPage = () => {
const { connection } = useConnection()
const anchorWallet = useAnchorWallet()

const [recipient, setRecipient] = useState<PublicKey>()
const [amount, setAmount] = useState<PythBalance>()
const [balance, setBalance] = useState<PythBalance>()

const handleSetRecipient = (event: any) => {
try {
Expand All @@ -30,15 +23,16 @@ const RequestSplit: NextPage = () => {
}
const handleSetAmount = (event: any) => {
try {
setAmount(PythBalance.fromString(event.target.value))
setBalance(PythBalance.fromString(event.target.value))
} catch (e) {
setAmount(undefined)
setBalance(undefined)
}
}

const [stakeConnection, setStakeConnection] = useState<StakeConnection>()
const [stakeAccounts, setStakeAccounts] = useState<StakeAccount[]>()
const { data: stakeConnection } = useStakeConnection()
const { data: stakeAccounts } = useStakeAccounts()
const [selectedStakeAccount, setSelectStakeAccount] = useState<StakeAccount>()
const { data: initialSplitRequest } = useSplitRequest(selectedStakeAccount)

const handleSelectStakeAccount = (event: any) => {
for (const stakeAccount of stakeAccounts!) {
Expand All @@ -50,62 +44,26 @@ const RequestSplit: NextPage = () => {
}

useEffect(() => {
const initialize = async () => {
const stakeConnection = await StakeConnection.createStakeConnection(
connection,
anchorWallet as Wallet,
STAKING_ADDRESS
)
setStakeConnection(stakeConnection)
}

if (!anchorWallet) {
setStakeConnection(undefined)
if (initialSplitRequest) {
setRecipient(initialSplitRequest.recipient)
setBalance(initialSplitRequest.balance)
} else {
initialize()
}
}, [anchorWallet])

useEffect(() => {
const loadStakeAccounts = async () => {
if (stakeConnection && anchorWallet) {
const stakeAccounts = await stakeConnection.getStakeAccounts(
anchorWallet.publicKey
)
setStakeAccounts(stakeAccounts)
} else {
setStakeAccounts(undefined)
}
}
loadStakeAccounts()
}, [stakeConnection])

useEffect(() => {
const loadCurrentRequest = async () => {
if (stakeConnection && selectedStakeAccount) {
const request = await stakeConnection.getSplitRequest(
selectedStakeAccount
)
if (request) {
setAmount(request.balance)
setRecipient(request.recipient)
}
}
loadCurrentRequest()
setRecipient(undefined)
setBalance(undefined)
}
}, [selectedStakeAccount])
}, [initialSplitRequest])

useEffect(() => {
if (stakeAccounts && stakeAccounts.length > 0)
setSelectStakeAccount(stakeAccounts[0])
}, [stakeAccounts])

const requestSplit = async () => {
if (stakeConnection && selectedStakeAccount && recipient && amount)
if (stakeConnection && selectedStakeAccount && recipient && balance)
try {
await stakeConnection.requestSplit(
selectedStakeAccount,
amount,
balance,
recipient
)
toast.success('Successfully created transfer request')
Expand Down Expand Up @@ -156,7 +114,7 @@ const RequestSplit: NextPage = () => {
<input
type="text"
style={{ color: 'black' }}
value={amount ? amount.toString() : ''}
value={balance ? balance.toString() : ''}
onChange={handleSetAmount}
/>
<p className=" text-sm ">
Expand All @@ -165,12 +123,12 @@ const RequestSplit: NextPage = () => {
</p>
<p className=" text-sm ">
Amount to be transferred:{' '}
{amount ? amount.toString() : 'Invalid amount to transfer'}
{balance ? balance.toString() : 'Invalid amount to transfer'}
</p>
</div>
)}

{stakeConnection && recipient && amount ? (
{stakeConnection && recipient && balance ? (
<p>
<button
className="rounded-full p-2 hover:bg-hoverGray"
Expand Down

2 comments on commit 733bd7b

@vercel
Copy link

@vercel vercel bot commented on 733bd7b Dec 21, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

staking-devnet – ./

staking-devnet-pyth-web.vercel.app
governance-nu.vercel.app
staking-devnet-git-main-pyth-web.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 733bd7b Dec 21, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

staking – ./

staking-git-main-pyth-web.vercel.app
staking.pyth.network
staking-rho-nine.vercel.app
staking-pyth-web.vercel.app

Please sign in to comment.