Skip to content

Commit

Permalink
bank page breakpoints || wallet breakpoints
Browse files Browse the repository at this point in the history
  • Loading branch information
@chalabi2
chalabi2 committed Nov 7, 2024
1 parent 54a1c06 commit dc757e3
Show file tree
Hide file tree
Showing 14 changed files with 233 additions and 188 deletions.
21 changes: 7 additions & 14 deletions components/bank/components/historyBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,22 +64,15 @@ export function HistoryBox({
}, [send]);

return (
<div className="w-full mx-auto rounded-[24px] mt-4 h-full md:h-1/3">
<div className="flex items-center justify-between mb-6">
<h3 className="text-xl font-semibold text-[#161616] dark:text-white">
<div className="w-full mx-auto rounded-[24px] h-full flex flex-col">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg md:text-xl font-semibold text-[#161616] dark:text-white">
Transaction History
</h3>
</div>
{isLoading ? (
<div aria-label="skeleton-loader" className="skeleton h-[400px] w-full"></div>
) : send.length === 0 ? (
<div className="flex items-center justify-center h-[200px] w-full bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]">
<p className="text-center text-[#00000099] dark:text-[#FFFFFF99]">
No transactions found for this account!
</p>
</div>
) : (
<div className="space-y-4 max-h-[280px] overflow-y-auto">

<div className="flex-1 overflow-hidden h-full">
<div className="h-full overflow-y-auto">
{Object.entries(groupedTransactions).map(([date, transactions]) => (
<div key={date}>
<h4 className="text-sm font-medium text-[#00000099] dark:text-[#FFFFFF99] mb-2">
Expand Down Expand Up @@ -152,7 +145,7 @@ export function HistoryBox({
</div>
))}
</div>
)}
</div>

{selectedTx && <TxInfoModal tx={selectedTx} isOpen={!!selectedTx} onClose={closeModal} />}
</div>
Expand Down
64 changes: 33 additions & 31 deletions components/bank/components/sendBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export default function SendBox({
];

return (
<div className="rounded-2xl w-full h-full md:h-1/2">
<div className="flex mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-[#0000000A] dark:bg-[#FFFFFF0F]">
<div className="rounded-2xl w-full ">
<div className="flex mb-4 md:mb-6 w-full h-[3.5rem] rounded-xl p-1 bg-[#0000000A] dark:bg-[#FFFFFF0F]">
<button
aria-label="send-tab"
className={`flex-1 py-2 px-4 text-sm font-medium rounded-xl transition-colors ${
Expand All @@ -64,35 +64,37 @@ export default function SendBox({
</button>
</div>

{isBalancesLoading || !balances ? (
<div className="skeleton h-[300px] w-full"></div>
) : (
<>
{activeTab === 'cross-chain' ? (
<IbcSendForm
isIbcTransfer={true}
setIsIbcTransfer={() => {}}
ibcChains={ibcChains}
selectedChain={selectedChain}
setSelectedChain={setSelectedChain}
address={address}
destinationChain={selectedChain}
balances={balances}
isBalancesLoading={isBalancesLoading}
refetchBalances={refetchBalances}
refetchHistory={refetchHistory}
/>
) : (
<SendForm
address={address}
balances={balances}
isBalancesLoading={isBalancesLoading}
refetchBalances={refetchBalances}
refetchHistory={refetchHistory}
/>
)}
</>
)}
<div className="">
{isBalancesLoading || !balances ? (
<div className="skeleton h-[300px] w-full"></div>
) : (
<>
{activeTab === 'cross-chain' ? (
<IbcSendForm
isIbcTransfer={true}
setIsIbcTransfer={() => {}}
ibcChains={ibcChains}
selectedChain={selectedChain}
setSelectedChain={setSelectedChain}
address={address}
destinationChain={selectedChain}
balances={balances}
isBalancesLoading={isBalancesLoading}
refetchBalances={refetchBalances}
refetchHistory={refetchHistory}
/>
) : (
<SendForm
address={address}
balances={balances}
isBalancesLoading={isBalancesLoading}
refetchBalances={refetchBalances}
refetchHistory={refetchHistory}
/>
)}
</>
)}
</div>
</div>
);
}
127 changes: 65 additions & 62 deletions components/bank/components/tokenList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,82 +31,85 @@ export default function TokenList({ balances, isLoading }: TokenListProps) {
};

return (
<div className="w-full mx-auto rounded-[24px] md:p-0 lg:p-6 mt-12 lg:mt-0">
<div className="flex items-center justify-between mb-6">
<h3 className="text-xl font-semibold text-[#161616] dark:text-white block lg:hidden xl:block">
Your assets
<div className="w-full mx-auto rounded-[24px] h-full flex flex-col">
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-0 mb-4">
<h3 className="text-lg md:text-xl font-semibold text-[#161616] dark:text-white">
Your Assets
</h3>
<h3 className="text-xl font-semibold text-[#161616] dark:text-white hidden lg:block xl:hidden">
Assets
</h3>
<div className="relative">
<div className="w-full md:w-auto">
<input
type="text"
placeholder="Search for a token..."
className="input input-md w-64 lg:w-44 xl:w-64 pr-8 bg-[#0000000A] dark:bg-[#FFFFFF0F] text-[#161616] dark:text-white placeholder-[#00000099] dark:placeholder-[#FFFFFF99] focus:outline-none focus:ring-0"
className="input input-md w-full md:w-64 pr-8 bg-[#0000000A] dark:bg-[#FFFFFF0F]"
style={{ borderRadius: '12px' }}
value={searchTerm}
onChange={e => setSearchTerm(e.target.value)}
/>
<PiMagnifyingGlass className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[#00000099] dark:text-[#FFFFFF99]" />
</div>
</div>

{isLoading ? (
<div aria-label="skeleton-loader" className="skeleton h-[400px] w-full"></div>
) : filteredBalances.length === 0 ? (
<div className="flex items-center justify-center h-[200px] w-full bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]">
<p className="text-center text-[#00000099] dark:text-[#FFFFFF99]">No tokens found!</p>
</div>
) : (
<div className="space-y-2 max-h-[88vh] overflow-y-auto">
{filteredBalances.map(balance => (
<div
key={balance.denom}
className="flex flex-row justify-between gap-4 items-center p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px] cursor-pointer hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] transition-colors"
onClick={() => openModal(balance.metadata)}
>
<div className="flex flex-row gap-4 items-center justify-start">
<div className="w-10 h-10 rounded-full overflow-hidden bg-[#0000000A] dark:bg-[#FFFFFF0F] flex items-center justify-center">
<DenomImage denom={balance.metadata} />
</div>
<div>
<p className="font-semibold text-[#161616] dark:text-white">
{truncateString(balance.metadata?.display ?? '', 12)}
</p>
<p className="text-sm text-[#00000099] dark:text-[#FFFFFF99]">
{balance.metadata?.denom_units[0]?.denom.split('/').pop()}
</p>
</div>
</div>
<div className="text-center">
<p className="font-semibold text-[#161616] dark:text-white">
{Number(
shiftDigits(balance.amount, -(balance.metadata?.denom_units[1]?.exponent ?? 6))
).toLocaleString(undefined, {
maximumFractionDigits: balance.metadata?.denom_units[1]?.exponent ?? 6,
})}{' '}
{truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
</p>
</div>
<div>
<button
onClick={e => {
e.stopPropagation();
openModal(balance.metadata);
}}
className="p-2 rounded-md bg-[#0000000A] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF33] transition-colors"
<div className="flex-1 overflow-hidden">
<div className="h-full overflow-y-auto pb-6">
{isLoading ? (
<div aria-label="skeleton-loader" className="skeleton h-[400px] w-full"></div>
) : filteredBalances.length === 0 ? (
<div className="flex items-center justify-center h-[200px] w-full bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]">
<p className="text-center text-[#00000099] dark:text-[#FFFFFF99]">No tokens found!</p>
</div>
) : (
<div className="space-y-2 overflow-y-auto">
{filteredBalances.map(balance => (
<div
key={balance.denom}
className="flex flex-row justify-between gap-4 items-center p-4 bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px] cursor-pointer hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF1A] transition-colors"
onClick={() => openModal(balance.metadata)}
>
<ArrowUpIcon className="w-4 h-4 text-primary" />
</button>
</div>
<div className="flex flex-row gap-4 items-center justify-start">
<div className="w-10 h-10 rounded-full overflow-hidden bg-[#0000000A] dark:bg-[#FFFFFF0F] flex items-center justify-center">
<DenomImage denom={balance.metadata} />
</div>
<div>
<p className="font-semibold text-[#161616] dark:text-white">
{truncateString(balance.metadata?.display ?? '', 12)}
</p>
<p className="text-sm text-[#00000099] dark:text-[#FFFFFF99]">
{balance.metadata?.denom_units[0]?.denom.split('/').pop()}
</p>
</div>
</div>
<div className="text-center">
<p className="font-semibold text-[#161616] dark:text-white">
{Number(
shiftDigits(
balance.amount,
-(balance.metadata?.denom_units[1]?.exponent ?? 6)
)
).toLocaleString(undefined, {
maximumFractionDigits: balance.metadata?.denom_units[1]?.exponent ?? 6,
})}{' '}
{truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
</p>
</div>
<div>
<button
onClick={e => {
e.stopPropagation();
openModal(balance.metadata);
}}
className="p-2 rounded-md bg-[#0000000A] dark:bg-[#FFFFFF0F] hover:bg-[#FFFFFF66] dark:hover:bg-[#FFFFFF33] transition-colors"
>
<ArrowUpIcon className="w-4 h-4 text-primary" />
</button>
</div>
</div>
))}
</div>
))}
</div>
)}
)}

{/* DenomInfoModal */}
{selectedDenom && <DenomInfoModal denom={selectedDenom} modalId="denom-info-modal" />}
{/* DenomInfoModal */}
{selectedDenom && <DenomInfoModal denom={selectedDenom} modalId="denom-info-modal" />}
</div>
</div>
</div>
);
}
24 changes: 13 additions & 11 deletions components/groups/components/groupProposals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,11 +302,11 @@ export default function GroupProposals({
<table className="table w-full border-separate border-spacing-y-3">
<thead>
<tr className="text-sm font-medium">
<th className="bg-transparent">#</th>
<th className="bg-transparent">Title</th>
<th className="bg-transparent">Time Left</th>
<th className="bg-transparent">Type</th>
<th className="bg-transparent">Status</th>
<th className="bg-transparent px-4 py-2 w-[25%]">#</th>
<th className="bg-transparent px-4 py-2 w-[25%]">Title</th>
<th className="bg-transparent px-4 py-2 w-[25%]">Time Left</th>
<th className="bg-transparent px-4 py-2 w-[25%]">Type</th>
<th className="bg-transparent px-4 py-2 w-[25%]">Status</th>
</tr>
</thead>
<tbody className="space-y-4">
Expand Down Expand Up @@ -340,7 +340,7 @@ export default function GroupProposals({

let status = 'Pending';
if (proposal.status.toString() === 'PROPOSAL_STATUS_ACCEPTED') {
status = 'Awaiting Execution';
status = 'Execute';
} else if (proposal.status.toString() === 'PROPOSAL_STATUS_CLOSED') {
status = 'Executed';
} else if (proposalTally) {
Expand All @@ -359,17 +359,19 @@ export default function GroupProposals({
onClick={() => handleRowClick(proposal)}
className="hover:bg-base-200 text-black dark:text-white rounded-lg cursor-pointer"
>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] py-[1.15rem]">
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-l-[12px] px-4 py-4 w-[25%]">
{proposal.id.toString()}
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] truncate max-w-xs">
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] truncate max-w-xs px-4 py-4 w-[25%]">
{proposal.title}
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF]">{timeLeft}</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF]">
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
{timeLeft}
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] px-4 py-4 w-[25%]">
{getHumanReadableType((proposal.messages[0] as any)['@type'])}
</td>
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px]">
<td className="dark:bg-[#FFFFFF0F] bg-[#FFFFFF] rounded-r-[12px] px-4 py-4 w-[25%]">
{isTalliesLoading ? (
<span className="loading loading-spinner loading-xs"></span>
) : (
Expand Down
9 changes: 5 additions & 4 deletions components/groups/components/myGroups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ function GroupRow({
proposals,
onSelectGroup,
}: {
group: any;
group: ExtendedQueryGroupsByMemberResponseSDKType['groups'][0];
proposals: ProposalSDKType[];
onSelectGroup: (policyAddress: string, groupName: string, threshold: string) => void;
}) {
Expand All @@ -209,7 +209,6 @@ function GroupRow({
const filterActiveProposals = (proposals: ProposalSDKType[]) => {
return proposals?.filter(
proposal =>
proposal.status.toString() !== 'PROPOSAL_STATUS_ACCEPTED' &&
proposal.status.toString() !== 'PROPOSAL_STATUS_REJECTED' &&
proposal.status.toString() !== 'PROPOSAL_STATUS_WITHDRAWN'
);
Expand All @@ -233,7 +232,9 @@ function GroupRow({
onSelectGroup(
policyAddress,
groupName,
(group.policies && group.policies[0]?.decision_policy?.threshold) ?? '0'
(group.policies &&
(group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType)?.threshold) ??
'0'
);
}}
>
Expand Down Expand Up @@ -262,7 +263,7 @@ function GroupRow({
})}{' '}
MFX
</td>
<td className=" w-1/6">{`${group.policies[0]?.decision_policy?.threshold ?? '0'} / ${group.total_weight ?? '0'}`}</td>
<td className=" w-1/6">{`${(group.policies[0]?.decision_policy as ThresholdDecisionPolicySDKType).threshold ?? '0'} / ${group.total_weight ?? '0'}`}</td>
<td className="rounded-r-[12px] w-1/6">
<TruncatedAddressWithCopy address={policyAddress} slice={12} />
</td>
Expand Down
2 changes: 1 addition & 1 deletion components/groups/forms/proposals/ConfirmationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export default function ConfirmationForm({
proposers: [formData.proposers],
title: formData.title,
summary: formData.metadata.summary,
exec: 0,
exec: 1,
});
console.log({ msg });
const fee = await estimateFee(address ?? '', [msg]);
Expand Down
2 changes: 0 additions & 2 deletions components/groups/forms/proposals/ProposalMessages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ export default function ProposalMessages({

const messageTypes = [
{ name: 'send', category: 'Financial' },

{ name: 'removeValidator', category: 'Admins' },
{ name: 'removePendingValidator', category: 'Admins' },
{ name: 'updateStakingParams', category: 'System' },
Expand All @@ -81,7 +80,6 @@ export default function ProposalMessages({
{ name: 'updateGroupAdmin', category: 'Group Management' },
{ name: 'updateGroupMetadata', category: 'Group Management' },
{ name: 'updateGroupPolicyAdmin', category: 'Group Management' },

{ name: 'vote', category: 'Proposal Actions' },
{ name: 'withdrawProposal', category: 'Proposal Actions' },
{ name: 'exec', category: 'Proposal Actions' },
Expand Down
3 changes: 2 additions & 1 deletion components/groups/modals/voteDetailsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,7 @@ function VoteDetailsModal({
}, 1000);

return () => clearInterval(interval);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [proposal?.voting_period_end]);

const proposalClosed =
Expand Down Expand Up @@ -450,7 +451,7 @@ function VoteDetailsModal({
</div>
<div className="flex flex-col justify-start items-start">
<p className="text-sm font-light text-gray-500 dark:text-gray-400">TITLE</p>
<h1 className="text-2xl font-bold">{proposal?.title}</h1>
<h1 className="text-2xl font-bold max-w-[20ch] truncate">{proposal?.title}</h1>
<span className="text-sm font-light text-gray-500 dark:text-gray-400 mt-2">
SUBMITTED
</span>
Expand Down
Loading

0 comments on commit dc757e3

Please sign in to comment.