add block diff to block detail
This commit is contained in:
Victor Oliva
+44
-29
@@ -1,9 +1,5 @@
|
||||
import { ReactSVG, Props } from "react-svg"
|
||||
import focusSvg from "./icons/focus.svg"
|
||||
import enumSvg from "./icons/enum.svg"
|
||||
import binarySvg from "./icons/binary.svg"
|
||||
import walletConnectSvg from "./icons/walletConnect.svg"
|
||||
import { useEffect, useRef } from "react"
|
||||
import { useTheme } from "@/ThemeProvider"
|
||||
import { LookupEntry } from "@polkadot-api/metadata-builders"
|
||||
import {
|
||||
Ban,
|
||||
Binary,
|
||||
@@ -16,38 +12,57 @@ import {
|
||||
LucideProps,
|
||||
User,
|
||||
} from "lucide-react"
|
||||
import { LookupEntry } from "@polkadot-api/metadata-builders"
|
||||
import { FC, useEffect, useRef } from "react"
|
||||
import { Props, ReactSVG } from "react-svg"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import binarySvg from "./icons/binary.svg"
|
||||
import chopsticksLogoDark from "./icons/chopsticks_dark.svg"
|
||||
import chopsticksLogoLight from "./icons/chopsticks_light.svg"
|
||||
import enumSvg from "./icons/enum.svg"
|
||||
import focusSvg from "./icons/focus.svg"
|
||||
import walletConnectSvg from "./icons/walletConnect.svg"
|
||||
|
||||
type CustomIconProps = Omit<Props, "ref" | "src"> & { size?: number }
|
||||
const customIcon =
|
||||
(url: string) =>
|
||||
({ size = 16, ...props }: CustomIconProps) => {
|
||||
const ref = useRef<SVGSVGElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
ref.current.setAttribute("width", String(size))
|
||||
ref.current.setAttribute("height", String(size))
|
||||
}, [size])
|
||||
|
||||
return (
|
||||
<ReactSVG
|
||||
{...props}
|
||||
src={url}
|
||||
beforeInjection={(svg) => {
|
||||
ref.current = svg
|
||||
svg.setAttribute("width", String(size))
|
||||
svg.setAttribute("height", String(size))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
const CustomIcon: FC<
|
||||
CustomIconProps & {
|
||||
url: string
|
||||
}
|
||||
> = ({ size = 16, url, ...props }) => {
|
||||
const ref = useRef<SVGSVGElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return
|
||||
ref.current.setAttribute("width", String(size))
|
||||
ref.current.setAttribute("height", String(size))
|
||||
}, [size])
|
||||
|
||||
return (
|
||||
<ReactSVG
|
||||
{...props}
|
||||
src={url}
|
||||
beforeInjection={(svg) => {
|
||||
ref.current = svg
|
||||
svg.setAttribute("width", String(size))
|
||||
svg.setAttribute("height", String(size))
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const customIcon = (url: string) => (props: CustomIconProps) => (
|
||||
<CustomIcon url={url} {...props} />
|
||||
)
|
||||
|
||||
const themeIcon = (light: string, dark: string) => (props: CustomIconProps) => {
|
||||
const theme = useTheme()
|
||||
return <CustomIcon url={theme === "light" ? light : dark} {...props} />
|
||||
}
|
||||
|
||||
export const Focus = customIcon(focusSvg)
|
||||
export const Enum = customIcon(enumSvg)
|
||||
export const BinaryEdit = customIcon(binarySvg)
|
||||
export const WalletConnect = customIcon(walletConnectSvg)
|
||||
export const Chopsticks = themeIcon(chopsticksLogoLight, chopsticksLogoDark)
|
||||
|
||||
export const Spinner = (props: LucideProps) => (
|
||||
<LoaderCircle
|
||||
|
||||
@@ -9,7 +9,8 @@ import { useTheme } from "@/ThemeProvider"
|
||||
|
||||
export const JsonDisplay: FC<{
|
||||
src: unknown
|
||||
}> = ({ src }) => {
|
||||
collapsed?: boolean
|
||||
}> = ({ src, ...props }) => {
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
@@ -30,6 +31,7 @@ export const JsonDisplay: FC<{
|
||||
2,
|
||||
)
|
||||
}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="31"
|
||||
height="37"
|
||||
viewBox="0 0 31 37"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="chopsticks.svg"
|
||||
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="9.0017274"
|
||||
inkscape:cx="16.774558"
|
||||
inkscape:cy="16.663468"
|
||||
inkscape:window-width="1392"
|
||||
inkscape:window-height="1051"
|
||||
inkscape:window-x="2793"
|
||||
inkscape:window-y="57"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<circle
|
||||
cx="15.444743"
|
||||
cy="18.474794"
|
||||
r="15"
|
||||
fill="url(#paint0_linear_3000_4054)"
|
||||
id="circle1" />
|
||||
<circle
|
||||
cx="15.444743"
|
||||
cy="18.474794"
|
||||
r="15"
|
||||
fill="url(#paint1_linear_3000_4054)"
|
||||
fill-opacity="0.8"
|
||||
id="circle2" />
|
||||
<rect
|
||||
x="-2.6022379"
|
||||
y="5.396699"
|
||||
width="3"
|
||||
height="36"
|
||||
rx="1.5"
|
||||
transform="rotate(-30)"
|
||||
fill="white"
|
||||
fill-opacity="0.7"
|
||||
id="rect2" />
|
||||
<rect
|
||||
x="12.785393"
|
||||
y="4.2307425"
|
||||
width="3"
|
||||
height="36"
|
||||
rx="1.5"
|
||||
transform="rotate(-15)"
|
||||
fill="white"
|
||||
fill-opacity="0.7"
|
||||
id="rect3" />
|
||||
<defs
|
||||
id="defs6">
|
||||
<linearGradient
|
||||
id="paint0_linear_3000_4054"
|
||||
x1="62.285"
|
||||
y1="74.922897"
|
||||
x2="24.7505"
|
||||
y2="36.729698"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-25.555257,-32.999808)">
|
||||
<stop
|
||||
stop-color="#E40C5B"
|
||||
stop-opacity="0.88"
|
||||
id="stop3" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#FF4C3B"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_3000_4054"
|
||||
x1="22.985001"
|
||||
y1="31.403601"
|
||||
x2="67.765999"
|
||||
y2="45.6506"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-25.555257,-32.999808)">
|
||||
<stop
|
||||
stop-color="white"
|
||||
stop-opacity="0.53"
|
||||
id="stop5" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,103 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="31"
|
||||
height="37"
|
||||
viewBox="0 0 31 37"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="chopsticks.svg"
|
||||
inkscape:version="1.3.2 (091e20e, 2023-11-25)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="9.0017274"
|
||||
inkscape:cx="16.774558"
|
||||
inkscape:cy="16.663468"
|
||||
inkscape:window-width="1392"
|
||||
inkscape:window-height="1051"
|
||||
inkscape:window-x="2793"
|
||||
inkscape:window-y="57"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<circle
|
||||
cx="15.444743"
|
||||
cy="18.474794"
|
||||
r="15"
|
||||
fill="url(#paint0_linear_3000_4054)"
|
||||
id="circle1" />
|
||||
<circle
|
||||
cx="15.444743"
|
||||
cy="18.474794"
|
||||
r="15"
|
||||
fill="url(#paint1_linear_3000_4054)"
|
||||
fill-opacity="0.8"
|
||||
id="circle2" />
|
||||
<rect
|
||||
x="-2.6022379"
|
||||
y="5.396699"
|
||||
width="3"
|
||||
height="36"
|
||||
rx="1.5"
|
||||
transform="rotate(-30)"
|
||||
fill="#232429"
|
||||
id="rect2" />
|
||||
<rect
|
||||
x="12.785393"
|
||||
y="4.2307425"
|
||||
width="3"
|
||||
height="36"
|
||||
rx="1.5"
|
||||
transform="rotate(-15)"
|
||||
fill="#232429"
|
||||
id="rect3" />
|
||||
<defs
|
||||
id="defs6">
|
||||
<linearGradient
|
||||
id="paint0_linear_3000_4054"
|
||||
x1="62.285"
|
||||
y1="74.922897"
|
||||
x2="24.7505"
|
||||
y2="36.729698"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-25.555257,-32.999808)">
|
||||
<stop
|
||||
stop-color="#E40C5B"
|
||||
stop-opacity="0.88"
|
||||
id="stop3" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#FF4C3B"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_3000_4054"
|
||||
x1="22.985001"
|
||||
y1="31.403601"
|
||||
x2="67.765999"
|
||||
y2="45.6506"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-25.555257,-32.999808)">
|
||||
<stop
|
||||
stop-color="white"
|
||||
stop-opacity="0.53"
|
||||
id="stop5" />
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="white"
|
||||
stop-opacity="0"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Reference in New Issue
Block a user