chore: update widgets and de-duplicate components (#135)
- Update widgets package to v5.7.0 - Add components from the widgets and remove repeated onespull/137/head
Jason Guo
3 weeks ago
committed by
GitHub
parent
855ca46fe2
commit
ec0db733e5
@ -1,28 +0,0 @@ |
||||
import { PropsWithChildren, useEffect, useState } from 'react'; |
||||
|
||||
export function Fade(props: PropsWithChildren<{ show: boolean }>) { |
||||
const { show, children } = props; |
||||
const [render, setRender] = useState(show); |
||||
|
||||
useEffect(() => { |
||||
if (show) setRender(true); |
||||
}, [show]); |
||||
|
||||
const onAnimationEnd = () => { |
||||
if (!show) setRender(false); |
||||
}; |
||||
|
||||
return render ? ( |
||||
<div |
||||
style={{ |
||||
animationName: show ? 'fadeIn' : 'fadeOut', |
||||
animationDuration: '1s', |
||||
//https://github.com/radix-ui/primitives/issues/1074#issuecomment-1089555751
|
||||
animationFillMode: 'forwards', |
||||
}} |
||||
onAnimationEnd={onAnimationEnd} |
||||
> |
||||
{children} |
||||
</div> |
||||
) : null; |
||||
} |
||||
@ -1,38 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Discord({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 71 55" |
||||
fill="none" |
||||
> |
||||
<g clipPath="url(#a)"> |
||||
<path |
||||
d="M60.1 4.9A58.5 58.5 0 0 0 45.4.5l-1.8 3.7a54 54 0 0 0-16.2 0 37.4 37.4 0 0 0-2-3.8A58.4 58.4 0 0 0 10.7 5 60 60 0 0 0 .4 45.6a58.9 58.9 0 0 0 18 8.8 42 42 0 0 0 3.6-5.9l-.1-.3c-2-.7-3.8-1.6-5.6-2.6a.2.2 0 0 1 0-.4 30.3 30.3 0 0 0 1.3-.9 42 42 0 0 0 36 0l1 1c.2 0 .2.2 0 .3-1.7 1-3.6 1.9-5.5 2.6a47.2 47.2 0 0 0 3.8 6.3 58.7 58.7 0 0 0 17.8-9.1A59.5 59.5 0 0 0 60 4.9ZM23.7 37.3c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Zm23.6 0c-3.5 0-6.4-3.2-6.4-7.1 0-4 2.9-7.2 6.4-7.2 3.6 0 6.5 3.3 6.4 7.2 0 4-2.8 7.1-6.4 7.1Z" |
||||
fill={fill} |
||||
/> |
||||
</g> |
||||
<defs> |
||||
<clipPath id="a"> |
||||
<path fill="#fff" d="M0 0h71v55H0z" /> |
||||
</clipPath> |
||||
</defs> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Discord = memo(_Discord); |
||||
@ -1,30 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Github({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 16 16" |
||||
> |
||||
<path |
||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Github = memo(_Github); |
||||
@ -1,27 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
import { IconButton, QuestionMarkIcon } from '@hyperlane-xyz/widgets'; |
||||
|
||||
import { Color } from '../../styles/Color'; |
||||
|
||||
function _HelpIcon({ text, size = 16 }: { text: string; size?: number }) { |
||||
const tooltipProps = { |
||||
'data-tooltip-content': text, |
||||
'data-tooltip-id': 'root-tooltip', |
||||
'data-tooltip-place': 'top-start', |
||||
}; |
||||
return ( |
||||
// @ts-ignore allow pass-thru tooltip props
|
||||
<IconButton |
||||
title="Help" |
||||
width={size} |
||||
height={size} |
||||
className="rounded-full border border-gray-400 p-px" |
||||
{...tooltipProps} |
||||
> |
||||
<QuestionMarkIcon height={size} width={size} color={Color.lightGray} className="opacity-50" /> |
||||
</IconButton> |
||||
); |
||||
} |
||||
|
||||
export const HelpIcon = memo(_HelpIcon); |
||||
@ -1,30 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Linkedin({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 30 30" |
||||
> |
||||
<path |
||||
d="M9 25H4V10h5v15zM6.5 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5zM27 25h-4.8v-7.3c0-1.74-.04-3.98-2.5-3.98-2.5 0-2.9 1.9-2.9 3.85V25H12V9.99h4.61v2.05h.07a5.08 5.08 0 0 1 4.55-2.42c4.87 0 5.77 3.1 5.77 7.15V25z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Linkedin = memo(_Linkedin); |
||||
@ -1,32 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Medium({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 -55 256 256" |
||||
preserveAspectRatio="xMidYMid" |
||||
fill="none" |
||||
> |
||||
<path |
||||
fill={fill} |
||||
d="M72.2 0c39.88 0 72.2 32.55 72.2 72.7 0 40.14-32.33 72.69-72.2 72.69-39.87 0-72.2-32.55-72.2-72.7C0 32.56 32.33 0 72.2 0Zm115.3 4.26c19.94 0 36.1 30.64 36.1 68.44 0 37.79-16.16 68.43-36.1 68.43-19.93 0-36.1-30.64-36.1-68.43 0-37.8 16.16-68.44 36.1-68.44Zm55.8 7.13c7.01 0 12.7 27.45 12.7 61.3 0 33.86-5.68 61.32-12.7 61.32-7.01 0-12.7-27.46-12.7-61.31 0-33.86 5.7-61.31 12.7-61.31Z" |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Medium = memo(_Medium); |
||||
@ -1,30 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Twitter({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 16 16" |
||||
> |
||||
<path |
||||
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" |
||||
fill={fill} |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Twitter = memo(_Twitter); |
||||
@ -1,80 +0,0 @@ |
||||
import { memo } from 'react'; |
||||
|
||||
function _Web({ |
||||
width, |
||||
height, |
||||
fill, |
||||
className = '', |
||||
}: { |
||||
width?: number | string; |
||||
height?: number | string; |
||||
fill?: string; |
||||
className?: string; |
||||
}) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width={width} |
||||
height={height} |
||||
className={className} |
||||
viewBox="0 0 29 29" |
||||
> |
||||
<path |
||||
fill={fill} |
||||
d="m11 18.6-.39.17a13.45 13.45 0 0 0 1.12 2.9 5.25 5.25 0 0 0 2.08 2.24c.36.18.7.26 1.03.26.95 0 2.1-.71 3.1-2.5.46-.82.85-1.8 1.13-2.9a10.3 10.3 0 0 0-8.06-.17Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M20.34 19.46a11.88 11.88 0 0 1-1.88 3.99 9.63 9.63 0 0 0 3.63-2.6 10.3 10.3 0 0 0-1.75-1.4Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M24.41 15.27a9.55 9.55 0 0 1-1.48 4.45l-.53-.49c-.54-.45-1.12-.86-1.74-1.22.08-.45.15-.9.2-1.38l.05-.61c.02-.25.04-.5.04-.75h3.46Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M22.96 9.45a9.55 9.55 0 0 1 1.45 4.42h-3.46a19 19 0 0 0-.28-2.7c.83-.47 1.6-1.06 2.3-1.72Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="m22.05 8.24.07.08c-.54.54-1.14 1.01-1.78 1.42a11.84 11.84 0 0 0-1.91-4.08 9.63 9.63 0 0 1 3.62 2.58Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M16.35 5.53a2.55 2.55 0 0 0-1.51-.57c-.96 0-2.11.72-3.11 2.5-.15.28-.3.57-.43.88l-.24.58c-.17.47-.33.97-.46 1.5a10.24 10.24 0 0 0 8.47 0 12.18 12.18 0 0 0-1.12-2.95 6.02 6.02 0 0 0-1.6-1.94Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M7.54 8.3a9.68 9.68 0 0 1 3.7-2.63 11.9 11.9 0 0 0-1.9 4.07 10.4 10.4 0 0 1-1.8-1.44Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M5.26 13.87A9.53 9.53 0 0 1 6.7 9.45c.69.67 1.46 1.25 2.3 1.73a19 19 0 0 0-.29 2.69H5.26Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M6.73 19.72a9.53 9.53 0 0 1-1.47-4.45h3.46c.03.95.14 1.87.3 2.74a11.33 11.33 0 0 0-2.29 1.7Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M11.24 23.47a9.62 9.62 0 0 1-3.66-2.61c.53-.54 1.12-1.01 1.76-1.41.45 1.6 1.1 2.98 1.9 4.02Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M19.55 15.27a14 14 0 0 1-.2 2.1 11.66 11.66 0 0 0-9.03 0c-.1-.67-.17-1.38-.2-2.1h9.43Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
d="M19.55 13.87h-9.43c.03-.71.1-1.4.2-2.05a11.78 11.78 0 0 0 9.04 0 18.37 18.37 0 0 1 .2 2.05Z" |
||||
/> |
||||
<path |
||||
fill="#02010A" |
||||
fill-rule="evenodd" |
||||
d="M28.84 14.57a14 14 0 1 0-14 14 14 14 0 0 0 14-14Zm-3 0a11 11 0 1 0-22 0 11 11 0 0 0 22 0Z" |
||||
clip-rule="evenodd" |
||||
/> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const Web = memo(_Web); |
||||
@ -1,35 +0,0 @@ |
||||
import { ChangeEvent } from 'react'; |
||||
|
||||
interface Props { |
||||
timestamp: number | null; |
||||
onChange: (t: number | null) => void; |
||||
name?: string; |
||||
} |
||||
|
||||
export function DatetimeField({ timestamp, onChange, name }: Props) { |
||||
const handleChange = (e: ChangeEvent<HTMLInputElement>) => { |
||||
if (!e.target['validity'].valid) { |
||||
onChange(null); |
||||
} else { |
||||
const datetime = e.target['value'] + ':00Z'; |
||||
const newTimestamp = new Date(datetime).getTime(); |
||||
onChange(newTimestamp); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<input |
||||
type="datetime-local" |
||||
value={toShortIsoString(timestamp)} |
||||
onChange={handleChange} |
||||
name={name} |
||||
className="-ml-px" |
||||
/> |
||||
); |
||||
} |
||||
|
||||
function toShortIsoString(timestamp: number | null) { |
||||
if (!timestamp) return ''; |
||||
// Trim milliseconds and timezone to match input field format
|
||||
return new Date(timestamp).toISOString().split('.')[0]; |
||||
} |
||||
@ -1,36 +0,0 @@ |
||||
import { ChangeEvent } from 'react'; |
||||
|
||||
type Props = React.DetailedHTMLProps< |
||||
React.SelectHTMLAttributes<HTMLSelectElement>, |
||||
HTMLSelectElement |
||||
> & { |
||||
options: Array<{ value: string; display: string }>; |
||||
value: string; |
||||
onValueSelect: (value: string) => void; |
||||
classes?: string; |
||||
}; |
||||
|
||||
export function SelectField(props: Props) { |
||||
const { options, value, onValueSelect, classes, ...passThruProps } = props; |
||||
|
||||
const onChangeSelect = (event: ChangeEvent<HTMLSelectElement>) => { |
||||
onValueSelect(event?.target?.value || ''); |
||||
}; |
||||
|
||||
return ( |
||||
<select |
||||
className={`rounded border border-gray-400 bg-transparent px-2 py-1 text-sm font-light invalid:text-gray-400 ${ |
||||
classes || '' |
||||
}`}
|
||||
{...passThruProps} |
||||
value={value} |
||||
onChange={onChangeSelect} |
||||
> |
||||
{options.map((o, i) => ( |
||||
<option key={`option-${i}`} value={o.value}> |
||||
{o.display} |
||||
</option> |
||||
))} |
||||
</select> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue