Skip to content

Commit

Permalink
Merge pull request #202 from G7DAO/feat/network-toggle
Browse files Browse the repository at this point in the history 
Feat/network toggle
  • Loading branch information
@elclandestin0
elclandestin0 authored Nov 25, 2024
2 parents 85b41c5 + 18518a0 commit 5c45271
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 71 deletions.
2 changes: 1 addition & 1 deletion webapps/world-builder-dashboard/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const L2_NETWORK: HighNetworkInterface = {
export const L3_NETWORK: HighNetworkInterface = {
chainId: 13746,
name: 'game7Testnet',
displayName: 'Game7 Testnet',
displayName: 'Game7 Sepolia',
rpcs: ['https://testnet-rpc.game7.io'],
blockExplorerUrls: ['https://testnet.game7.io'],
nativeCurrency: {
Expand Down
1 change: 0 additions & 1 deletion webapps/world-builder-dashboard/src/components/bridge/bridge/ActionButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,6 @@ const ActionButton: React.FC<ActionButtonProps> = ({
}
}
const tx = await bridger?.transfer({ amount: amountToSend, signer, destinationProvider })
console.log("transfer .. ?")
await tx?.wait()
return {
type: 'DEPOSIT',
Expand Down
59 changes: 29 additions & 30 deletions webapps/world-builder-dashboard/src/components/bridge/history/Deposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ interface DepositProps {
const Deposit: React.FC<DepositProps> = ({ deposit }) => {
const { connectedAccount, selectedNetworkType } = useBlockchainContext()
const smallView = useMediaQuery('(max-width: 1199px)')
const { data: status, isLoading: isLoadingStatus } = useDepositStatus(deposit, selectedNetworkType)
const depositInfo = {
from: getLowNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.lowNetworkChainId)?.displayName ?? '',
to: getHighNetworks(selectedNetworkType)?.find((n) => n.chainId === deposit.highNetworkChainId)?.displayName ?? ''
}
const tokenInformation = getTokensForNetwork(deposit?.lowNetworkChainId, connectedAccount).find(
(token) => token.address === deposit?.tokenAddress
)

const { data: status, isLoading: isLoadingStatus } = useDepositStatus(deposit, selectedNetworkType)
const { returnTransferData } = useBridgeTransfer()
const { data: transferStatus, isLoading } = returnTransferData({ txRecord: deposit })

Expand Down Expand Up @@ -55,17 +56,13 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
>{`${tokenInformation?.decimals ? Number(deposit.amount) / tokenInformation?.decimals : deposit.amount} ${tokenInformation?.symbol}`}</div>
<div className={styles.gridItem}>{depositInfo.from}</div>
<div className={styles.gridItem}>{depositInfo.to}</div>
{isLoading ? (
<>
<>
{/* First column */}
{isLoading || transferStatus?.status === undefined ? (
<div className={styles.gridItem}>
<div className={styles.loading}>Loading</div>
</div>
<div className={styles.gridItem}>
<div className={styles.loading}>Loading</div>
</div>
</>
) : (
<>
) : (
<a
href={`${getBlockExplorerUrl(deposit.lowNetworkChainId, selectedNetworkType)}/tx/${deposit.lowNetworkHash}`}
target={'_blank'}
Expand All @@ -87,27 +84,29 @@ const Deposit: React.FC<DepositProps> = ({ deposit }) => {
)}
</div>
</a>
{isLoadingStatus ? (
<div className={styles.gridItem}>
<div className={styles.loading}>Loading</div>
</div>
) : (
<div className={styles.gridItemImportant}>
{transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
<>
{status?.highNetworkTimestamp === undefined
? 'No status found'
: timeAgo(status?.highNetworkTimestamp)}
</>
) : (
<>{ETA(deposit.lowNetworkTimestamp, deposit.retryableCreationTimeout ?? 15 * 60)}</>
)}
</div>
)}
</>
)}
)}

{/* Second column */}
{isLoading || transferStatus?.status === undefined || isLoadingStatus ? (
<div className={styles.gridItem}>
<div className={styles.loading}>Loading</div>
</div>
) : (
<div className={styles.gridItemImportant}>
{transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_REDEEMED ||
transferStatus?.status === BridgeTransferStatus.DEPOSIT_GAS_DEPOSITED ||
transferStatus?.status === BridgeTransferStatus.DEPOSIT_ERC20_FUNDS_DEPOSITED_ON_CHILD ? (
<>
{status?.highNetworkTimestamp === undefined
? 'No status found'
: timeAgo(status?.highNetworkTimestamp)}
</>
) : (
<>{ETA(deposit.lowNetworkTimestamp, deposit.retryableCreationTimeout ?? 15 * 60)}</>
)}
</div>
)}
</>
</>
)}
</>
Expand Down
3 changes: 2 additions & 1 deletion webapps/world-builder-dashboard/src/components/bridge/history/HistoryDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ const HistoryDesktop: React.FC<HistoryDesktopProps> = () => {
const localTransactions = messages || []
const formattedApiTransactions = apiTransactions ? apiTransactions.map(mapAPIDataToTransactionRecord) : []
const combinedTransactions = mergeTransactions(formattedApiTransactions, localTransactions)

console.log(formattedApiTransactions)
console.log(combinedTransactions)
// Retrieve existing transactions from localStorage
const storedTransactionsString = localStorage.getItem(
`bridge-${connectedAccount}-transactions-${selectedNetworkType}`
Expand Down
25 changes: 14 additions & 11 deletions webapps/world-builder-dashboard/src/components/bridge/history/Withdrawal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,18 @@ export const getStatus = (
const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
const { connectedAccount, selectedNetworkType } = useBlockchainContext()
const smallView = useMediaQuery('(max-width: 1199px)')
const { claim } = useBridgeTransfer()
const { claim, returnTransferData, getTransactionInputs } = useBridgeTransfer()
const [collapseExecuted, setCollapseExecuted] = useState(false)
const [hovered, setHovered] = useState(false)
const lowNetworks = getLowNetworks(selectedNetworkType) || LOW_NETWORKS
const highNetworks = getHighNetworks(selectedNetworkType) || HIGH_NETWORKS
const status = getStatus(withdrawal, lowNetworks, highNetworks)
const { data: transferStatus, isLoading } = returnTransferData({ txRecord: withdrawal })
const tokenInformation = getTokensForNetwork(withdrawal?.highNetworkChainId, connectedAccount).find(
(token) => token.address === withdrawal?.tokenAddress
)
const { data: transactionInputs } = getTransactionInputs({ txRecord: withdrawal })

return (
<>
{status?.isLoading && smallView ? (
Expand All @@ -81,7 +84,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
/>
) : (
<>
{status?.isLoading || status?.data === undefined ? (
{status?.isLoading || isLoading ? (
<>
<div className={styles.gridItem} title={withdrawal.highNetworkHash}>
<div className={styles.typeWithdrawal}>
Expand All @@ -92,7 +95,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
<div className={styles.gridItem}>{timeAgo(withdrawal.highNetworkTimestamp)}</div>
<div
className={styles.gridItem}
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${tokenInformation?.symbol}`}</div>
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
<div className={styles.gridItem}>{status?.data?.from ?? ''}</div>
<div className={styles.gridItem}>{status?.data?.to ?? ''}</div>
<div className={styles.gridItem}>
Expand All @@ -104,7 +107,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
</>
) : (
<>
{status?.data && status.data.status === ChildToParentMessageStatus.EXECUTED && (
{transferStatus && transferStatus?.status === ChildToParentMessageStatus.EXECUTED && (
<>
<div
className={styles.gridItem}
Expand Down Expand Up @@ -144,7 +147,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
}}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${tokenInformation?.symbol}`}</div>
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
<div
className={styles.gridItem}
onClick={() => setCollapseExecuted(!collapseExecuted)}
Expand Down Expand Up @@ -210,7 +213,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
<div className={styles.gridItemInitiate}>{timeAgo(withdrawal?.highNetworkTimestamp)}</div>
<div
className={styles.gridItemInitiate}
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${tokenInformation?.symbol}`}</div>
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
<div className={styles.gridItemInitiate}>{status?.data?.from ?? ''}</div>
<div className={styles.gridItemInitiate}>{status?.data?.to ?? ''}</div>
<div className={styles.gridItemInitiate}>
Expand All @@ -234,7 +237,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
<div className={styles.gridItemInitiate}>{timeAgo(withdrawal?.completionTimestamp)}</div>
<div
className={styles.gridItemInitiate}
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${tokenInformation?.symbol}`}</div>
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
<div className={styles.gridItemInitiate}>{status?.data?.from ?? ''}</div>
<div className={styles.gridItemInitiate}>{status?.data?.to ?? ''}</div>
<div className={styles.gridItemInitiate}>
Expand All @@ -256,7 +259,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
)}
</>
)}
{status?.data && status.data.status !== ChildToParentMessageStatus.EXECUTED && (
{transferStatus && transferStatus?.status !== ChildToParentMessageStatus.EXECUTED && (
<>
<div className={styles.gridItem} title={withdrawal.highNetworkHash}>
<div className={styles.typeWithdrawal}>
Expand All @@ -267,10 +270,10 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
<div className={styles.gridItem}>{timeAgo(status?.data?.timestamp)}</div>
<div
className={styles.gridItem}
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${tokenInformation?.symbol}`}</div>
>{`${tokenInformation?.decimals ? Number(withdrawal.amount) / tokenInformation?.decimals : withdrawal.amount} ${transactionInputs?.tokenSymbol}`}</div>
<div className={styles.gridItem}>{status?.data?.from ?? ''}</div>
<div className={styles.gridItem}>{status?.data?.to ?? ''}</div>
{status?.data && status.data.status === ChildToParentMessageStatus.CONFIRMED && (
{transferStatus && transferStatus?.status === ChildToParentMessageStatus.CONFIRMED && (
<>
<div className={styles.gridItem}>
<a
Expand All @@ -291,7 +294,7 @@ const Withdrawal: React.FC<WithdrawalProps> = ({ withdrawal }) => {
</div>
</>
)}
{status?.data && status.data.status === ChildToParentMessageStatus.UNCONFIRMED && (
{transferStatus && transferStatus?.status === ChildToParentMessageStatus.UNCONFIRMED && (
<>
<div className={styles.gridItem}>
<a
Expand Down
1 change: 0 additions & 1 deletion webapps/world-builder-dashboard/src/components/notifications/NotificationsDropModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,6 @@ export const FloatingNotification = ({ notifications }: { notifications: BridgeN
const { setIsDropdownOpened } = useBridgeNotificationsContext()
const { selectedNetworkType } = useBlockchainContext()
const handleClick = () => {
console.log('clickity?')
setIsDropdownOpened(true)
}
if (!notifications || notifications.length === 0) {
Expand Down
Loading

0 comments on commit 5c45271

Please sign in to comment.