import React from 'react' import { useRouter } from 'next/router' import { useQuery } from '@apollo/react-hooks' import gql from 'graphql-tag' import { Button } from 'lib/components/Button' import { PodUserDetails } from 'lib/components/PodUserDetails' import { PodWithdrawPendingForm } from 'lib/components/PodWithdrawPendingForm' import { PodRedeemToPoolForm } from 'lib/components/PodRedeemToPoolForm' import { PodRedeemForm } from 'lib/components/PodRedeemForm' import PodJoinForm from 'lib/components/PodJoinForm' function Pod() { const router = useRouter() const { podAddress } = router.query const accountQuery = useQuery(gql` query { account @client } `) const { account } = accountQuery.data || {} return ( <div className='container mx-auto mt-12'> <div className='mb-8'> <span className='text-blue-500 underline cursor-pointer' onClick={() => router.push('/')}>Back</span> </div> <PodUserDetails podAddress={podAddress} userAddress={account} /> {account && <> <div className='mb-8'> <PodJoinForm podAddress={podAddress} userAddress={account} /> </div> <div className='mb-8'> <PodWithdrawPendingForm podAddress={podAddress} userAddress={account} /> </div> <div className='mb-8'> <PodRedeemToPoolForm podAddress={podAddress} userAddress={account} /> </div> <div className='mb-8'> <PodRedeemForm podAddress={podAddress} userAddress={account} /> </div> </> } </div> ) } export default Pod