Skip to content

Commit

Permalink
feat: new token list (#11)
Browse files Browse the repository at this point in the history 
* feat: token view

* feat: switchboard in new tokenview
  • Loading branch information
@LanfordCai
LanfordCai authored Oct 4, 2023
1 parent 38f7722 commit b228d4c
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 101 deletions.
111 changes: 11 additions & 100 deletions components/TokenList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useRecoilState } from "recoil"
import { transactionInProgressState, transactionStatusState } from '../lib/atoms'
import { addNewVault, removeVault } from '../flow/switchboard_transactions'
import { useSWRConfig } from 'swr'
import TokenView from './fungible_token/TokenView'

export default function TokenList(props) {
const { mutate } = useSWRConfig()
Expand All @@ -27,106 +28,16 @@ export default function TokenList(props) {
return (
<div>
{tokens.length > 0 ?
<div className="mt-4 flex flex-col w-full shrink-0">
<div className="px-1 overflow-x-auto">
<div className="inline-block min-w-full py-2 align-middle">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-2xl">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Symbol
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Contract
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Balance
</th>
{
switchboard ?
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
In Switchboard?
</th> : null
}
{
switchboard && isCurrentUser ?
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Switchboard Action
</th> : null
}

</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
{tokens.map((token) => {
let newToken = Object.assign({}, token)
newToken.inSwitchboard = inSwitchboard(switchboard, token)
return newToken
}).map((token, index) => (
<tr key={`tokens-${index}`}>
<td className="py-4 px-3 text-sm">
<div className="flex items-center">
<div className="h-6 w-6 flex-shrink-0 relative">
<Image className="rounded-lg object-contain" src={token.logoURL || "/token_placeholder.png"} alt="" fill sizes="5vw" />
</div>
<div className="flex flex-col ml-2">
<label className="block font-bold text-base text-gray-900 break-words max-w-[300px] min-w-[60px]">{token.symbol || token.contractName}</label>
</div>
</div>
</td>
<td className="px-3 py-4 text-sm text-black min-w-[140px]">
<label>
<a
href={getContractLink(token.contract)}
target="_blank"
rel="noopener noreferrer"
className="underline font-bold decoration-drizzle decoration-2">
{token.contract}
</a>
</label>
</td>
<td className="px-3 py-4 text-sm text-black min-w-[140px]">
{token.balance}
</td>
{
switchboard ?
<td className="px-3 py-4 text-sm text-black min-w-[140px]">
{token.inSwitchboard ?
<label className={`font-bold text-xs px-2 py-1 leading-5 rounded-full bg-green-100 text-green-800`}>{"YES"}</label> :
<label className={`font-bold text-xs px-2 py-1 leading-5 rounded-full bg-yellow-100 text-yellow-800`}>{"NO"}</label>
}
</td> : null
}
{
switchboard && isCurrentUser ?
<td className="px-3 py-4 text-sm text-black min-w-[140px]">
<button
className={`${token.inSwitchboard ? "bg-yellow-400 disabled:bg-yellow-200 hover:bg-yellow-600" : "bg-drizzle disabled:bg-drizzle-light hover:bg-drizzle-dark"} text-black disabled:text-gray-500 px-3 py-2 text-sm rounded-2xl font-semibold shrink-0`}
disabled={transactionInProgress}
onClick={async () => {
if (!account) return
if (token.inSwitchboard) {
await removeVault(token.path.receiver, setTransactionInProgress, setTransactionStatus)
} else {
await addNewVault(token.path.receiver, setTransactionInProgress, setTransactionStatus)
}
mutate(["switchboardFetcher", account])
}}
>
{
token.inSwitchboard ? "Remove Vault" : "Add New Vault"
}
</button>
</td> : null
}
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
<div className="px-2 py-1 flex flex-col gap-y-3">
{
tokens.map((token) => {
let newToken = Object.assign({}, token)
newToken.inSwitchboard = inSwitchboard(switchboard, token)
return newToken
}).map((token, index) => {
return <TokenView key={`ft-tokenview-${index}`} account={account} token={token} isCurrentUser={isCurrentUser} switchboard={switchboard} />
})
}
</div> :
<div className="flex mt-10 h-[70px] text-gray-400 text-base justify-center">
Nothing found
Expand Down
75 changes: 75 additions & 0 deletions components/fungible_token/TokenView.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { useRouter } from "next/router";
import publicConfig from "../../publicConfig";
import { useRecoilState } from "recoil";
import { transactionInProgressState, transactionStatusState } from "../../lib/atoms";
import { useSWRConfig } from "swr";
import { getContractLink } from "../../lib/utils";
import Image from "next/image";
import { addNewVault, removeVault } from "../../flow/switchboard_transactions";

export default function TokenView(props) {
const [transactionInProgress, setTransactionInProgress] = useRecoilState(transactionInProgressState)
const [, setTransactionStatus] = useRecoilState(transactionStatusState)

const { mutate } = useSWRConfig()

const { token, account, isCurrentUser, switchboard } = props

return (
<div className="min-w-[500px] flex flex-col gap-y-3 p-4 shadow-md rounded-2xl bg-white">
<div className="flex flex-col gap-y-3">

<div className="flex gap-x-2 justify-between items-center">
<div className="flex gap-x-2 items-center">
<div className="h-10 w-10 flex-shrink-0 relative">
<Image className="rounded-lg object-contain" src={token.logoURL || "/token_placeholder.png"} alt="" fill sizes="5vw" />
</div>
<div className="flex flex-col">
<label className="block font-bold text-base text-gray-900 break-words max-w-[300px] min-w-[60px]">{token.symbol || token.contractName}</label>
<div className="cursor-pointer text-xs text-black decoration-drizzle decoration-2 underline">
<a href={getContractLink(token.contract)}
target="_blank"
rel="noopener noreferrer">
{token.contract}
</a>
</div>
</div>
</div>
<label className="block font-bold text-base text-gray-900 break-words max-w-[300px] min-w-[60px]">{token.balance}</label>
</div>

{
switchboard ?
<div className="px-1 flex flex-col gap-y-1">
<div className="bg-gray-200 w-full h-[1px]"></div>
<label className="mt-2 block font-semibold text-sm text-gray-900">{`Switchboard`}</label>
<div className="flex gap-x-3 justify-between items-center">
{token.inSwitchboard ?
<label className={`font-bold text-xs px-2 py-1 leading-5 rounded-full bg-green-100 text-green-800`}>{"In Switchboard"}</label> :
<label className={`font-bold text-xs px-2 py-1 leading-5 rounded-full bg-yellow-100 text-yellow-800`}>{"Not In Switchboard"}</label>
}

<button
className={`${token.inSwitchboard ? "bg-yellow-400 disabled:bg-yellow-200 hover:bg-yellow-600" : "bg-drizzle disabled:bg-drizzle-light hover:bg-drizzle-dark"} text-black disabled:text-gray-500 px-3 py-2 text-xs rounded-2xl font-semibold shrink-0`}
disabled={transactionInProgress || !isCurrentUser}
onClick={async () => {
if (!account) return
if (token.inSwitchboard) {
await removeVault(token.path.receiver, setTransactionInProgress, setTransactionStatus)
} else {
await addNewVault(token.path.receiver, setTransactionInProgress, setTransactionStatus)
}
mutate(["switchboardFetcher", account])
}}
>
{
token.inSwitchboard ? "Remove Vault" : "Add New Vault"
}
</button>
</div>
</div> : null
}
</div>
</div>
)
}
2 changes: 1 addition & 1 deletion components/hybrid_custody/ChildView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function ChildView(props) {
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2 justify-between items-center">
<div className="cursor-pointer px-2 text-xl font-bold text-black decoration-drizzle decoration-2 underline">
<a href={`${publicConfig.appURL}//account/${child.address}`}
<a href={`${publicConfig.appURL}/account/${child.address}`}
target="_blank"
rel="noopener noreferrer">
{child.address}
Expand Down

1 comment on commit b228d4c

@vercel
Copy link

@vercel vercel bot commented on b228d4c Oct 4, 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:

flowview – ./

flowview.vercel.app
flowview-git-main-33lab.vercel.app
www.flowview.app
flowview-33lab.vercel.app
flowview.app

Please sign in to comment.