1- import { ProtocolType } from '@hyperlane-xyz/utils' ;
2- import {
3- CopyButton ,
4- Modal ,
5- SpinnerIcon ,
6- useAccountForChain ,
7- useTimeout ,
8- useWalletDetails ,
9- } from '@hyperlane-xyz/widgets' ;
10- import Image from 'next/image' ;
11- import { useCallback , useMemo , useState } from 'react' ;
12- import LinkIcon from '../../images/icons/external-link-icon.svg' ;
1+ import { Modal } from '@hyperlane-xyz/widgets' ;
2+ import { useMemo } from 'react' ;
133import { formatTimestamp } from '../../utils/date' ;
14- import { useMultiProvider } from '../chains/hooks' ;
15- import { hasPermissionlessChain } from '../chains/utils' ;
16- import { DeploymentContext , DeploymentStatus } from './types' ;
17- import {
18- getDeploymentStatusLabel ,
19- getIconByDeploymentStatus ,
20- isDeploymentFailed ,
21- isDeploymentSent ,
22- } from './utils' ;
4+ import { DeploymentContext } from './types' ;
235
246export function DeploymentsDetailsModal ( {
257 isOpen,
@@ -30,27 +12,7 @@ export function DeploymentsDetailsModal({
3012 onClose : ( ) => void ;
3113 deployment : DeploymentContext ;
3214} ) {
33- const { status, origin, destination, timestamp } = deployment || { } ;
34-
35- const multiProvider = useMultiProvider ( ) ;
36-
37- const isChainKnown = multiProvider . hasChain ( origin ) ;
38- const account = useAccountForChain ( multiProvider , isChainKnown ? origin : undefined ) ;
39- const walletDetails = useWalletDetails ( ) [ account ?. protocol || ProtocolType . Ethereum ] ;
40-
41- const isAccountReady = ! ! account ?. isReady ;
42- const connectorName = walletDetails . name || 'wallet' ;
43- const isPermissionlessRoute = hasPermissionlessChain ( multiProvider , [ destination , origin ] ) ;
44- const isSent = isDeploymentSent ( status ) ;
45- const isFailed = isDeploymentFailed ( status ) ;
46- const isFinal = isSent || isFailed ;
47- const statusDescription = getDeploymentStatusLabel (
48- status ,
49- connectorName ,
50- isPermissionlessRoute ,
51- isAccountReady ,
52- ) ;
53- const showSignWarning = useSignIssueWarning ( status ) ;
15+ const { status, timestamp } = deployment || { } ;
5416
5517 const date = useMemo (
5618 ( ) => ( timestamp ? formatTimestamp ( timestamp ) : formatTimestamp ( new Date ( ) . getTime ( ) ) ) ,
@@ -59,85 +21,36 @@ export function DeploymentsDetailsModal({
5921
6022 return (
6123 < Modal isOpen = { isOpen } close = { onClose } panelClassname = "p-4 md:p-5 max-w-sm" >
62- { isFinal && (
63- < div className = "flex justify-between" >
64- < h2 className = "font-medium text-gray-600" > { date } </ h2 >
65- < div className = "flex items-center font-medium" >
66- { isSent ? (
67- < h3 className = "text-primary-500" > Sent</ h3 >
68- ) : (
69- < h3 className = "text-red-500" > Failed</ h3 >
70- ) }
71- < Image
72- src = { getIconByDeploymentStatus ( status ) }
73- width = { 25 }
74- height = { 25 }
75- alt = ""
76- className = "ml-2"
77- />
78- </ div >
79- </ div >
80- ) }
81-
82- { isFinal ? (
83- < div className = "mt-5 flex flex-col space-y-4" > TODO</ div >
84- ) : (
85- < div className = "flex flex-col items-center justify-center py-4" >
86- < SpinnerIcon width = { 60 } height = { 60 } className = "mt-3" />
87- < div
88- className = { `mt-5 text-center text-sm ${ isFailed ? 'text-red-600' : 'text-gray-600' } }
89- >
90- { statusDescription }
91- </ div >
92- { showSignWarning && (
93- < div className = "mt-3 text-center text-sm text-gray-600" >
94- If your wallet does not show a transaction request or never confirms, please try the
95- deployment again.
96- </ div >
97- ) }
98- </ div >
99- ) }
24+ { status }
25+ { date }
10026 </ Modal >
10127 ) ;
10228}
10329
104- export function DeploymentProperty ( {
105- name,
106- value,
107- url,
108- } : {
109- name : string ;
110- value : string ;
111- url ?: string ;
112- } ) {
113- return (
114- < div >
115- < div className = "flex items-center justify-between" >
116- < label className = "text-sm leading-normal tracking-wider text-gray-350" > { name } </ label >
117- < div className = "flex items-center space-x-2" >
118- { url && (
119- < a href = { url } target = "_blank" rel = "noopener noreferrer" >
120- < Image src = { LinkIcon } width = { 14 } height = { 14 } alt = "" />
121- </ a >
122- ) }
123- < CopyButton copyValue = { value } width = { 14 } height = { 14 } className = "opacity-40" />
124- </ div >
125- </ div >
126- < div className = "mt-1 truncate text-sm leading-normal tracking-wider" > { value } </ div >
127- </ div >
128- ) ;
129- }
130-
131- // https://github.com/wagmi-dev/wagmi/discussions/2928
132- function useSignIssueWarning ( status : DeploymentStatus ) {
133- const [ showWarning , setShowWarning ] = useState ( false ) ;
134- const warningCallback = useCallback ( ( ) => {
135- if (
136- status === DeploymentStatus . SigningDeployment ||
137- status === DeploymentStatus . ConfirmingDeployment
138- )
139- setShowWarning ( true ) ;
140- } , [ status , setShowWarning ] ) ;
141- useTimeout ( warningCallback , 20_000 ) ;
142- return showWarning ;
143- }
30+ // TODO remove?
31+ // function DeploymentProperty({
32+ // name,
33+ // value,
34+ // url,
35+ // }: {
36+ // name: string;
37+ // value: string;
38+ // url?: string;
39+ // }) {
40+ // return (
41+ // <div>
42+ // <div className="flex items-center justify-between">
43+ // <label className="text-sm leading-normal tracking-wider text-gray-350">{name}</label>
44+ // <div className="flex items-center space-x-2">
45+ // {url && (
46+ // <a href={url} target="_blank" rel="noopener noreferrer">
47+ // <Image src={LinkIcon} width={14} height={14} alt="" />
48+ // </a>
49+ // )}
50+ // <CopyButton copyValue={value} width={14} height={14} className="opacity-40" />
51+ // </div>
52+ // </div>
53+ // <div className="mt-1 truncate text-sm leading-normal tracking-wider">{value}</div>
54+ // </div>
55+ // );
56+ // }
0 commit comments