Skip to content

Commit

Permalink
fix(EvmList): tx options modal rerender
Browse files Browse the repository at this point in the history
  • Loading branch information
@GabrielPrediger
GabrielPrediger committed Feb 28, 2024
1 parent e666cf2 commit 900198a
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 118 deletions.
150 changes: 75 additions & 75 deletions source/components/TransactionOptions/TransactionOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@ export const TransactionOptions: React.FC<ITransactionOptions> = ({
<Menu.Button
className="inline-flex justify-center w-full
hover:text-button-primaryhover text-white text-sm font-medium
hover:bg-opacity-30 rounded-full focus:outline-none
focus-visible:ring-2 focus-visible:ring-white
focus-visible:ring-opacity-75"
hover:bg-opacity-30 rounded-full"
>
<IconButton className="w-5">
<Icon isSvg={true} name="EditTx" className="text-base" />
Expand All @@ -98,87 +96,89 @@ export const TransactionOptions: React.FC<ITransactionOptions> = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
as="div"
className="p-6 absolute right-0 z-10 w-[23rem] origin-top-right rounded-lg bg-brand-blue500 shadow-2xl ring-1
<div className="absolute right-0 z-10 h-[15rem]">
<Menu.Items
as="div"
className="p-6 absolute right-0 z-10 w-[23rem] origin-top-right rounded-lg bg-brand-blue500 shadow-2xl ring-1
font-poppins ring-black ring-opacity-5 focus:outline-none transition-all duration-300 ease-in-out cursor-pointer"
>
<h1 className="text-sm font-semibold text-brand-gray200 pb-4">
PENDING TRANSACTION
</h1>
<Menu.Item>
{({ active }) => (
<li
className={`
>
<h1 className="text-sm font-semibold text-brand-gray200 pb-4">
PENDING TRANSACTION
</h1>
<Menu.Item>
{({ active }) => (
<li
className={`
${active ? 'font-semibold' : 'font-normal'}
flex items-center justify-start text-brand-white mb-4 w-full
`}
onClick={() =>
navigate('/home/details', {
state: {
id: null,
hash: transaction.hash,
},
})
}
>
<IconButton className="w-5 mr-3">
<Icon
name="externalLink"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
See on the block explorer
</span>
</li>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<li
className={`
onClick={() =>
navigate('/home/details', {
state: {
id: null,
hash: transaction.hash,
},
})
}
>
<IconButton className="w-5 mr-3">
<Icon
name="externalLink"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
See on the block explorer
</span>
</li>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<li
className={`
${active ? 'font-semibold' : 'font-normal'}
flex items-center justify-start text-brand-white mb-4 w-full
`}
onClick={() => handleOnClick(UpdateTxAction.SpeedUp)}
>
<IconButton className="w-5 mr-3">
<Icon
name="SpeedUp"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
{t('header.speedUp')}
</span>
</li>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<li
className={`
onClick={() => handleOnClick(UpdateTxAction.SpeedUp)}
>
<IconButton className="w-5 mr-3">
<Icon
name="SpeedUp"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
{t('header.speedUp')}
</span>
</li>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<li
className={`
${active ? 'font-semibold ' : 'font-normal'}
flex items-center justify-start w-full `}
onClick={() => handleOnClick(UpdateTxAction.Cancel)}
>
<IconButton className="w-5 mr-3">
<Icon
name="Trash"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
{t('buttons.cancel')}
</span>
</li>
)}
</Menu.Item>
</Menu.Items>
onClick={() => handleOnClick(UpdateTxAction.Cancel)}
>
<IconButton className="w-5 mr-3">
<Icon
name="Trash"
isSvg={true}
className="text-base text-brand-white"
/>
</IconButton>
<span className="text-sm text-brand-white">
{t('buttons.cancel')}
</span>
</li>
)}
</Menu.Item>
</Menu.Items>
</div>
</Transition>
</Menu>
</>
Expand Down
20 changes: 12 additions & 8 deletions source/pages/Home/Panel/ActivityPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const TransactionsPanel = () => {
const adjustedExplorer = useAdjustedExplorer(explorer);

const [internalLoading, setInternalLoading] = useState<boolean>(isLoadingTxs);

const [previousTransactions, setPreviousTransactions] = useState([]);

const transactions = useMemo(() => {
Expand Down Expand Up @@ -53,8 +52,10 @@ export const TransactionsPanel = () => {
}
}, [accounts, activeAccount, chainId, isBitcoinBased]);

const hasTransactions =
transactions.length > 0 || previousTransactions.length > 0;
const hasTransactions = useMemo(
() => (hasTransactions ? transactions : previousTransactions),
[]
);

useEffect(() => {
if (
Expand Down Expand Up @@ -82,7 +83,7 @@ export const TransactionsPanel = () => {
}
};

const OpenTransactionExplorer = useCallback(() => {
const OpenTransactionExplorer = useMemo(() => {
const { xpub, address: userAddress } =
accounts[activeAccount.type][activeAccount.id];
const openExplorer = () =>
Expand Down Expand Up @@ -115,27 +116,30 @@ export const TransactionsPanel = () => {
};
}, [isLoadingTxs]);

const allTransactions = hasTransactions ? transactions : previousTransactions;
const allTransactions = useMemo(
() => (hasTransactions ? transactions : previousTransactions),
[hasTransactions, transactions, previousTransactions]
);

return (
<>
{internalLoading && !hasTransactions && <LoadingComponent />}
{!internalLoading && !hasTransactions && (
<div className="w-full mt-8 text-white bg-brand-blue600">
<NoTransactionsComponent />
<OpenTransactionExplorer />
{OpenTransactionExplorer}
{/* <Fullscreen /> */}
</div>
)}

{hasTransactions && (
<div className="p-4 mt-8 w-full text-white text-base bg-brand-blue600">
<div className="p-4 mt-8 w-full mb-9 text-white text-base bg-brand-blue600">
{isBitcoinBased ? (
<UtxoTransactionsList userTransactions={allTransactions} />
) : (
<EvmTransactionsList userTransactions={allTransactions} />
)}
<OpenTransactionExplorer />
{OpenTransactionExplorer}
</div>
)}
{/* <Fullscreen /> */}
Expand Down
Loading

0 comments on commit 900198a

Please sign in to comment.