-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
222 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
web/components/organisms/deployed_resolvers/DeployedResolver.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import { FC } from "react"; | ||
import { TransactionState, TransactionStateDeployed, TransactionStatePending, useDeployedResolvers } from "../../../stores/deployed_resolvers"; | ||
import { useChainId, useReadContract, useTransaction } from "wagmi"; | ||
import { Button, Card, Input } from "@ensdomains/thorin"; | ||
import { FiExternalLink, FiFile, FiTrash, FiTrash2 } from 'react-icons/fi'; | ||
import { formatAddress } from '@ens-tools/format'; | ||
import { explorer_urls } from "../../../util/deployments"; | ||
|
||
export const DeployedSOResolver: FC<{ transaction: TransactionStateDeployed }> = ({ transaction }) => { | ||
const { data: gateway_data, error } = useReadContract({ | ||
address: transaction.contract_address as any, | ||
abi: [{ name: 'url', type: 'function', stateMutability: 'view', inputs: [], outputs: [{ name: 'url', type: 'string' }] }] as const, | ||
functionName: 'url', | ||
chainId: Number.parseInt(transaction.chain), | ||
args: [], | ||
}); | ||
const { data: transactionData } = useTransaction({ | ||
hash: transaction.hash as `0x${string}`, | ||
chainId: Number.parseInt(transaction.chain), | ||
}); | ||
|
||
const explorer_url = explorer_urls[Number.parseInt(transaction.chain)]; | ||
const gateway_url = gateway_data as string; | ||
|
||
return ( | ||
<div className="p-4 border-t"> | ||
<div className="w-full flex justify-between items-center"> | ||
<div> | ||
<div className="flex gap-1 items-center"> | ||
{/* <FiFile /> */} | ||
<a href={explorer_url.address.replace(":address", transaction.contract_address)} target="_blank" className="flex items-center justify-center gap-1 text-sm"> | ||
<span> | ||
{formatAddress(transaction.contract_address)} | ||
</span> | ||
<FiExternalLink /> | ||
</a> | ||
</div> | ||
<div className="text-sm flex gap-1"> | ||
<span className="text-sm"> | ||
Offchain Resolver | ||
</span> | ||
<span>on</span> | ||
<span className="text-ens-purple"> | ||
{ | ||
transaction.chain == "1" ? "Mainnet" : | ||
transaction.chain == "5" ? "Goerli" : | ||
transaction.chain == "11155111" ? "Sepolia" : "Unknown" | ||
} | ||
</span> | ||
</div> | ||
</div> | ||
<a href={explorer_url.transaction.replace(":hash", transaction.hash)} target="_blank" className="flex items-center justify-center gap-1 text-sm text-ens-blue hover:underline"> | ||
Confirmed <FiExternalLink /> | ||
</a> | ||
</div> | ||
<div className="mt-2 space-y-4 hidden"> | ||
<div className="text-sm"> | ||
<div className="font-bold">Gateway URL</div> | ||
<div className="text-right">{gateway_data}</div> | ||
</div> | ||
{/* <div className="flex justify-between"> | ||
<div> | ||
Total Gas Fees | ||
</div> | ||
<div className="flex items-center gap-1 text-sm"> | ||
<span> | ||
🔥 | ||
</span> | ||
<span className="items-center text-ens-light-red-bright"> | ||
{ | ||
formatEther( | ||
transactionData?.gasPrice?.mul(transactionData?.gasLimit).toBigInt() ?? BigInt(0)) | ||
} | ||
</span> | ||
</div> | ||
</div> */} | ||
<div className="flex gap-2"> | ||
<Button onClick={() => { }} size="small"> | ||
Set as Resolver | ||
</Button> | ||
<div className="aspect-square"> | ||
<Button onClick={() => { }} size="small" colorStyle="redSecondary"> | ||
<FiTrash2 /> | ||
</Button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
web/components/organisms/deployed_resolvers/PendingResolver.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { FC, useEffect } from "react"; | ||
import { FiExternalLink, FiLoader } from "react-icons/fi"; | ||
import { TransactionStatePending, useDeployedResolvers } from "../../../stores/deployed_resolvers"; | ||
import { explorer_urls } from "../../../util/deployments"; | ||
import { useWaitForTransactionReceipt } from "wagmi"; | ||
|
||
export const PendingResolver: FC<{ transaction: TransactionStatePending }> = ({ transaction }) => { | ||
const { data: receipt } = useWaitForTransactionReceipt({ | ||
chainId: Number.parseInt(transaction.chain), | ||
hash: transaction.hash as `0x${string}`, | ||
}); | ||
const {logTransactionSuccess} = useDeployedResolvers(); | ||
|
||
const explorer_url = explorer_urls[Number.parseInt(transaction.chain)]; | ||
|
||
useEffect(() => { | ||
if (receipt) { | ||
console.log('Transaction Completed', receipt); | ||
logTransactionSuccess(transaction.hash, transaction.chain, receipt.to as string); | ||
} | ||
}, [receipt]); | ||
|
||
return ( | ||
<div className="p-4 border-t"> | ||
<div className="w-full flex justify-between items-center"> | ||
<div> | ||
<div className="flex gap-1 items-center"> | ||
{/* <FiFile /> */} | ||
</div> | ||
<div className="text-sm flex gap-1 items-center"> | ||
<FiLoader className="animate-spin size-4 mr-2" /> | ||
<span className="text-sm"> | ||
Offchain Resolver | ||
</span> | ||
<span>on</span> | ||
<span> | ||
{transaction.chain} | ||
</span> | ||
</div> | ||
</div> | ||
<a href={explorer_url.transaction.replace(":hash", transaction.hash)} target="_blank" className="flex items-center justify-center gap-1 text-sm text-ens-blue hover:underline"> | ||
Pending <FiExternalLink /> | ||
</a> | ||
</div> | ||
</div> | ||
) | ||
}; |
24 changes: 24 additions & 0 deletions
24
web/components/organisms/deployed_resolvers/TransactionHistoryEntry.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { FC } from "react"; | ||
import { TransactionState } from "../../../stores/deployed_resolvers"; | ||
import { DeployedSOResolver } from "./DeployedResolver"; | ||
import { PendingResolver } from "./PendingResolver"; | ||
|
||
export const TransactionHistoryEntry: FC<{ transaction: TransactionState }> = ({ transaction }) => { | ||
if (transaction.status == 'pending') { | ||
return ( | ||
<PendingResolver transaction={transaction} /> | ||
); | ||
} | ||
|
||
if (transaction.status == 'deployed') { | ||
return ( | ||
<DeployedSOResolver transaction={transaction} /> | ||
); | ||
} | ||
|
||
return ( | ||
<div> | ||
Unknown Transaction Entry | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.