Skip to content

Commit

Permalink
Introduce setURL
Browse files Browse the repository at this point in the history
  • Loading branch information
lucemans committed May 1, 2024
1 parent 2271ee7 commit db9f5f2
Show file tree
Hide file tree
Showing 11 changed files with 201 additions and 36 deletions.
11 changes: 6 additions & 5 deletions web/components/molecules/ContractOrGateway.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { motion } from 'framer-motion';
import { cx } from 'node:util/cx';
import { FC } from 'react';

import { cx } from '../../util/cx';

export const ContractOrRegister: FC<{
value: number;
setValue: (value: number) => void;
Expand All @@ -13,7 +14,7 @@ export const ContractOrRegister: FC<{
className="bg-ens-blue h-full w-[49%] rounded-md absolute left-0"
animate={{ x: value === 0 ? 0 : '100%' }}
></motion.div>
<div
<button
className={cx(
'z-10 w-full h-full flex items-center justify-center font-bold',
value == 0
Expand All @@ -25,8 +26,8 @@ export const ContractOrRegister: FC<{
}}
>
Contract
</div>
<div
</button>
<button
className={cx(
'z-10 w-full h-full flex items-center justify-center font-bold',
value == 1
Expand All @@ -38,7 +39,7 @@ export const ContractOrRegister: FC<{
}}
>
Gateway
</div>
</button>
</div>
</div>
);
Expand Down
29 changes: 17 additions & 12 deletions web/components/molecules/ProfileButton.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { Button, Profile, Select } from '@ensdomains/thorin';
import { useModal } from 'connectkit';
import { useAccount, useChainId, useEnsAvatar, useEnsName, useSwitchChain } from 'wagmi';
import {
useAccount,
useChainId,
useEnsAvatar,
useEnsName,
useSwitchChain,
} from 'wagmi';

export const ProfileButton = () => {
const { setOpen } = useModal();
Expand All @@ -12,8 +18,7 @@ export const ProfileButton = () => {

return (
<div className="flex items-center gap-1 z-10">
{
address &&
{address && (
<>
<Select
label={undefined}
Expand All @@ -30,17 +35,17 @@ export const ProfileButton = () => {
}}
/>
<button onClick={() => setOpen(true)}>

<Profile address={address || ''} ensName={name || ''} avatar={avatar || ''} />
<Profile
address={address || ''}
ensName={name || ''}
avatar={avatar || ''}
/>
</button>
</>
}
{
!address &&
<Button onClick={() => setOpen(true)}>
Connect Wallet
</Button>
}
)}
{!address && (
<Button onClick={() => setOpen(true)}>Connect Wallet</Button>
)}
</div>
);
};
29 changes: 19 additions & 10 deletions web/components/organisms/deploy/DeploySOResolver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ export const DeployResolverCard: FC = () => {

const { chains, switchChain } = useSwitchChain();

const {writeContract} = useWriteContract();

// const { write, data } = useContractWrite(config);
// const receipt = useWaitForTransaction(data);

Expand Down Expand Up @@ -105,7 +107,6 @@ export const DeployResolverCard: FC = () => {

<Select
label={"ENS Deployment"}

value={chainId.toString()}
options={chains.map((chain) => ({
value: chain.id.toString(),
Expand Down Expand Up @@ -184,23 +185,31 @@ export const DeployResolverCard: FC = () => {
<Banner alert="warning" title="Under Construction">
This section of the site is undergoing maintenance to support multiple versions & networks.
</Banner>
{/* {
{
(() => {
if (!isConnected) return null;

if (receipt.isSuccess) return (
<Button colorStyle="greenPrimary" suffix={<OutlinkSVG />} as="a" target="_blank" href={
`https://${subdomainChainMap[chainId] || ''}etherscan.io/tx/${receipt.data?.transactionHash}#internal`
}>View on Etherscan</Button>
);
// if (receipt.isSuccess) return (
// <Button colorStyle="greenPrimary" suffix={<OutlinkSVG />} as="a" target="_blank" href={
// `https://${subdomainChainMap[chainId] || ''}etherscan.io/tx/${receipt.data?.transactionHash}#internal`
// }>View on Etherscan</Button>
// );

return (
<Button disabled={!isReady || !write || receipt.isLoading} loading={receipt.isLoading} onClick={() => write?.()}>
{receipt.isLoading ? "Processing" : isLoading ? 'Estimating Fees...' : isSuccess ? 'Deploy ' + EstimateData?.request.gasLimit + ' gas' : 'Deploy'}
<Button disabled={!isReady} onClick={() => {
writeContract({
abi: FactoryABI,
address: factoryAddress,
chainId,
functionName: 'createOffchainResolver',
args: [gatewayUrl, signersToArray(signers)],
})
}}>
{ isLoading ? 'Estimating Fees...' : isSuccess ? 'Deploy ' + EstimateData?.request.gas + ' gas' : 'Deploy'}
</Button>
);
})()
} */}
}
</Card>
)
};
14 changes: 9 additions & 5 deletions web/components/organisms/deployed_resolvers/DeployedResolver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,14 @@ import { useChainId, useReadContract, useTransaction } from "wagmi";
import { Button, Card, Input } from "@ensdomains/thorin";
import { FiChevronDown, FiChevronRight, FiChevronUp, FiExternalLink, FiFile, FiPenTool, FiTrash, FiTrash2 } from 'react-icons/fi';
import { formatAddress } from '@ens-tools/format';
import { explorer_urls } from "../../../util/deployments";
import { chainIdToName, explorer_urls } from "../../../util/deployments";
import { cx } from "../../../util/cx";
import { SetUrlDialog } from "../set_url/SetUrlDialog";
import { Address } from "viem";

export const DeployedSOResolver: FC<{ transaction: TransactionStateDeployed }> = ({ transaction }) => {
const [collapsed, setCollapsed] = useState(true);
const [urlDialogOpen, setUrlDialogOpen] = useState(false);

const { data: gateway_data, error } = useReadContract({
address: transaction.contract_address as any,
Expand Down Expand Up @@ -45,9 +48,7 @@ export const DeployedSOResolver: FC<{ transaction: TransactionStateDeployed }> =
<span>on</span>
<span className="text-ens-purple">
{
transaction.chain == "1" ? "Mainnet" :
transaction.chain == "5" ? "Goerli" :
transaction.chain == "11155111" ? "Sepolia" : "Unknown"
chainIdToName(Number.parseInt(transaction.chain))
}
</span>
</div>
Expand Down Expand Up @@ -96,7 +97,7 @@ export const DeployedSOResolver: FC<{ transaction: TransactionStateDeployed }> =
</Button>
</div>
<div className="aspect-square">
<Button onClick={() => { }} size="small" colorStyle="blueSecondary" title="Set URL">
<Button onClick={() => setUrlDialogOpen(true)} size="small" colorStyle="blueSecondary" title="Set URL">
<FiPenTool />
</Button>
</div>
Expand All @@ -107,6 +108,9 @@ export const DeployedSOResolver: FC<{ transaction: TransactionStateDeployed }> =
{collapsed ? 'Show Details' : 'Hide Details'}
{collapsed ? <FiChevronDown /> : <FiChevronUp />}
</button>
{urlDialogOpen && (
<SetUrlDialog chain={Number.parseInt(transaction.chain)} resolver={transaction.contract_address as Address} current_value={gateway_url} onClose={() => { setUrlDialogOpen(false) }} />
)}
</div>
)
};
89 changes: 89 additions & 0 deletions web/components/organisms/set_url/SetUrlDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import { formatAddress } from "@ens-tools/format";
import { Dialog, Button, Input } from "@ensdomains/thorin";
import { FC, useState } from "react";
import { FiCheck, FiX } from "react-icons/fi";
import { chainIdToName, etherscanAddressURL } from "../../../util/deployments";
import { Address } from "viem";
import { useAccount, useReadContract, useWriteContract } from "wagmi";

export const SetUrlDialog: FC<{ chain: number, resolver: Address, current_value?: string, onClose?: () => void }> = ({ chain, resolver, current_value, onClose }) => {
const { address } = useAccount();
const [newValue, setNewValue] = useState<string>(current_value || "");
const { writeContract, error } = useWriteContract({});
const { data: owner } = useReadContract({
address: resolver,
chainId: chain,
abi: [{ name: 'owner', type: 'function', stateMutability: 'view', inputs: [], outputs: [{ name: 'owner', type: 'string' }] }] as const,
functionName: 'owner',
args: []
});

const isOwner = owner == address;
const isReady = !!newValue && newValue !== current_value && isOwner;

const chainName = chainIdToName(chain);

return (
<Dialog
open={true}
title="Set URL for Offchain Resolver"
subtitle={"Update the URL for your offchain resolver " + formatAddress(resolver) + " on " + chainName}
variant="closable"
onClose={onClose}
onDismiss={() => { }}
>
<div className="w-screen max-w-lg flex-col flex gap-4">
<Input
label="Resolver Address"
defaultValue={resolver}
value={resolver}
suffix={
<div>
{chainName}
</div>
}
/>
<Input
label="New Gateway URL"
placeholder="https://example.com/{sender}/{data}"
defaultValue={current_value}
value={newValue}
onChange={(e) => setNewValue(e.target.value)}
/>
{
isOwner &&
<div className="bg-ens-greenlight p-2 flex items-center gap-1">
<FiCheck />
You are owner.
</div>
}
{
!isOwner && owner &&
<div className="bg-ens-redlight p-2 flex items-center gap-1">
<FiCheck />
You are NOT owner. (see <a href={etherscanAddressURL(chain, owner)}>{formatAddress(owner)}</a>)
</div>
}
{
!isOwner && !owner &&
<div className="bg-ens-redlight p-2 flex items-center gap-1">
<FiX />
Ownership not available on this version.
</div>
}
<Button onClick={() => {
writeContract({
abi: [{ name: 'setURL', type: 'function', stateMutability: 'external', inputs: [{ name: '_url', type: 'string' }], outputs: [] }],
address: resolver,
chainId: chain,
functionName: 'setURL',
args: [newValue],
account: address
})
}} disabled={!isReady}>
Update URL
</Button>
</div>
</Dialog>
);
};
1 change: 1 addition & 0 deletions web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"react-dom": "^18.3.1",
"react-hook-form": "^7.51.3",
"react-icons": "^4.12.0",
"react-modal": "^3.16.1",
"styled-components": "^5.3.11",
"tailwindcss": "^3.4.3",
"viem": "^2.9.29",
Expand Down
17 changes: 16 additions & 1 deletion web/pages/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,19 @@

.link {
@apply font-bold text-blue-500 hover:underline cursor-pointer;
}
}

.modal {
z-index: 1999;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
}

.modal > div {
opacity: 1;
}

#root {
z-index: 0;
}
4 changes: 2 additions & 2 deletions web/pages/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import './globals.css';

import React from 'react';
import ReactDOM from 'react-dom/client';
import Modal from 'react-modal';

// import Modal from 'react-modal';
import { App } from './app.jsx';

ReactDOM.createRoot(document.querySelector('#root') as HTMLElement).render(
Expand All @@ -12,4 +12,4 @@ ReactDOM.createRoot(document.querySelector('#root') as HTMLElement).render(
</React.StrictMode>
);

// Modal.setAppElement('#root');
Modal.setAppElement('#root');
1 change: 0 additions & 1 deletion web/pages/thing.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { lightTheme, ThorinGlobalStyles } from '@ensdomains/thorin';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ConnectKitProvider } from 'connectkit';
import { ConnectKitButton } from 'connectkit';
import { FC, ReactNode } from 'react';
import { ThemeProvider } from 'styled-components';
import { createConfig, http, WagmiProvider } from 'wagmi';
Expand Down
32 changes: 32 additions & 0 deletions web/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit db9f5f2

Please sign in to comment.