Skip to content

Commit

Permalink
Reorganize Transaction History
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed May 1, 2024
1 parent a5e1d03 commit 573eb58
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 137 deletions.
18 changes: 2 additions & 16 deletions web/components/organisms/deploy/DeploySOResolver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { FC, useEffect, useMemo, useState } from "react";
import { useAccount, useChainId, useSimulateContract, useWriteContract } from "wagmi";
import { Address, formatEther } from "viem";
import { useDeployedResolvers } from "../../../stores/deployed_resolvers";
import { SORDeployments } from "../../../util/deployments";

// https url that must include '{sender}'
// const gatewayRegex = new RegExp("^https://.*{sender}.*$");
Expand All @@ -25,21 +26,6 @@ const subdomainChainMap = {
11155111: 'sepolia.'
}

const deployments: Record<number, {
factory?: Address,
resolver?: Address,
}> = {
1: {
factory: '0x77020a1Cb2d4a0AE6CC773Cc726c1EfdEC0a50ab',
},
5: {
factory: '0x2F180aDBAAb3c57af31B7E96969999D4FB33faEE',
},
11155111: {
factory: '0x0Fde82e81270431F2B956E7ce7E8860B2F61bcF9'
}
}

// Component that deploys the Simple Offchain Resolver\
// This resolver signs its output with a public private key-pair.
export const DeployResolverCard: FC = () => {
Expand All @@ -54,7 +40,7 @@ export const DeployResolverCard: FC = () => {

const isReady = isGatewayUrlValid && isSignersValid;

const factoryAddress = deployments[chainId]?.factory;
const factoryAddress = SORDeployments[chainId]?.[0]?.factory;

const { transactions, logTransaction, logTransactionSuccess } = useDeployedResolvers();

Expand Down
90 changes: 90 additions & 0 deletions web/components/organisms/deployed_resolvers/DeployedResolver.tsx
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>
)
};
128 changes: 7 additions & 121 deletions web/components/organisms/deployed_resolvers/DeployedResolvers.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
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 { TransactionState, useDeployedResolvers } from "../../../stores/deployed_resolvers";
import { useChainId } from "wagmi";
import { Card } from "@ensdomains/thorin";
import { DeployedSOResolver } from "./DeployedResolver";
import { TransactionHistoryEntry } from "./TransactionHistoryEntry";

export const DeployedResolvers = () => {
const transactions = useDeployedResolvers(e => e.transactions);
Expand All @@ -17,129 +17,15 @@ export const DeployedResolvers = () => {
<div className="flex flex-col gap-2">
<Card className="!gap-0 !p-0">
<div className="p-4">
<h2 className="font-bold">Deployed Resolvers</h2>
<h2 className="font-bold">Transactions</h2>
<span>These are the resolvers you have deployed</span>
</div>
<div className="w-full">
{
transactionForChain.map((transaction) => transaction.status == "deployed" ?
<DeployedResolver key={transaction.hash} transaction={transaction} /> : <PendingTransaction key={transaction.hash} transaction={transaction} />).reverse()
transactionForChain.map((transaction) => <TransactionHistoryEntry key={`mod-tx-${transaction.hash}`} transaction={transaction} />)
}
</div>
</Card>
</div>
)
};

export const PendingTransaction: FC<{ transaction: TransactionState }> = ({ transaction: { hash, chain } }) => {

return (
<div className="bg-ens-light-background-primary bg-ens-light-border rounded-lg">
<div>Pending</div>
<div>{hash}</div>
<div>{chain}</div>
</div>
);
};

const explorer_urls: Record<number, {
transaction: string,
address: string,
}> = {
1: {
transaction: 'https://etherscan.io/tx/:hash',
address: 'https://etherscan.io/address/:address'
},
5: {
transaction: 'https://goerli.etherscan.io/tx/:hash',
address: 'https://goerli.etherscan.io/address/:address'
},
11155111: {
transaction: 'https://sepolia.etherscan.io/tx/:hash',
address: 'https://sepolia.etherscan.io/address/:address'
},
};

export const DeployedResolver: 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">
<div className="text-sm">
<div className="font-bold">Gateway URL</div>
<div className="text-right">{gateway_data || 'Unparsable'}</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>

)
};
47 changes: 47 additions & 0 deletions web/components/organisms/deployed_resolvers/PendingResolver.tsx
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>
)
};
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>
);
};
1 change: 1 addition & 0 deletions web/stores/deployed_resolvers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type TransactionStatePending = {
hash: string;
chain: string;
};

export type TransactionStateDeployed = {
status: 'deployed';
hash: string;
Expand Down
Loading

0 comments on commit 573eb58

Please sign in to comment.