@talismn/orb 0.3.4 → 0.3.6

package/src/components/TalismanOrbRectangle.tsx

@@ -1,40 +0,0 @@
-import { FC } from "react"
-
-import { TalismanOrbProps } from "./types"
-import { useTalismanOrb } from "./useTalismanOrb"
-
-export const TalismanOrbRectangle: FC<TalismanOrbProps> = ({ width, height, seed, className }) => {
-  const { id, bgColor1, bgColor2, transform, glowColor, cx, cy } = useTalismanOrb(seed)
-
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox={`0 0 64 64`}
-      preserveAspectRatio="none"
-      className={className}
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <linearGradient id={`${id}-bg`}>
-          <stop offset="20%" stopColor={bgColor1} />
-          <stop offset="100%" stopColor={bgColor2} />
-        </linearGradient>
-        <radialGradient id={`${id}-circle`}>
-          <stop offset="10%" stopColor={glowColor} />
-          <stop offset="100%" stopColor="transparent" />
-        </radialGradient>
-        <clipPath id={`${id}-clip`}>
-          <circle cx="32" cy="32" r="48" />
-        </clipPath>
-      </defs>
-      <g clipPath={`url(#${id}-clip)`}>
-        <g transform={transform}>
-          <rect fill={`url(#${id}-bg)`} x={-16} y={-16} width={96} height={96} />
-          <circle fill={`url(#${id}-circle)`} cx={cx} cy={cy} r={45} opacity={0.7} />
-        </g>
-      </g>
-    </svg>
-  )
-}

package/src/components/index.ts

@@ -1,4 +0,0 @@
-export * from "./types"
-export * from "./useTalismanOrb"
-export * from "./TalismanOrb"
-export * from "./TalismanOrbRectangle"

package/src/components/types.ts

@@ -1 +0,0 @@
-export type TalismanOrbProps = { seed: string; width?: number; height?: number; className?: string }

package/src/components/useTalismanOrb.ts

@@ -1,70 +0,0 @@
-import { getAccountPlatformFromAddress, normalizeAddress } from "@talismn/crypto"
-import md5 from "blueimp-md5"
-import Color from "color"
-import { useId, useMemo } from "react"
-
-const djb2 = (str: string) => {
-  let hash = 5381
-  for (let i = 0; i < str.length; i++) hash = (hash << 5) + hash + str.charCodeAt(i)
-  return hash
-}
-
-const valueFromHash = (hash: string, max: number) => {
-  return (max + djb2(hash)) % max
-}
-
-const colorFromHash = (hash: string) => {
-  const hue = valueFromHash(hash, 360)
-  return Color.hsv(hue, 100, 100)
-}
-
-const rotateText = (text: string, nbChars = 0) => text.slice(nbChars) + text.slice(0, nbChars)
-
-export const useTalismanOrb = (seed: string) => {
-  const id = useId()
-
-  return useMemo(() => {
-    try {
-      // those break if seed is empty or an invalid address
-
-      // eslint-disable-next-line no-var
-      var platform = getAccountPlatformFromAddress(seed)
-
-      // seed may be specific to a ss58 prefix, get the base address
-      // eslint-disable-next-line no-var
-      var address = normalizeAddress(seed)
-    } catch (err) {
-      platform = "polkadot"
-      address = seed
-    }
-
-    // derive 3 hashs from the seed, used to generate the 3 colors
-    const hash1 = md5(address)
-    const hash2 = rotateText(hash1, 1)
-    const hash3 = rotateText(hash1, 2)
-
-    // the 2 darkest ones will be used as gradient BG
-    // the lightest one will be used as gradient circle, to mimic a 3D lighting effect
-    const colors = [colorFromHash(hash1), colorFromHash(hash2), colorFromHash(hash3)].sort(
-      (c1, c2) => c1.lightness() - c2.lightness(),
-    )
-
-    // random location in top left corner, avoid beeing to close from the center
-    const dotX = 10 + valueFromHash(hash1, 10)
-    const dotY = 10 + valueFromHash(hash2, 10)
-
-    // global rotation
-    const rotation = valueFromHash(hash1, 360)
-
-    return {
-      id, //multiple avatars should cohabit on the same page
-      bgColor1: colors[0].hex(),
-      bgColor2: colors[1].hex(),
-      glowColor: colors[2].hex(),
-      transform: `rotate(${rotation} 32 32)`,
-      cx: dotX,
-      cy: dotY,
-      platform,
-    }
-  }, [id, seed])
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./components"
-export * from "./util"

package/src/util/getTalismanOrbDataUrl.tsx

@@ -1,14 +0,0 @@
-import ReactDOMServer from "react-dom/server"
-
-import { TalismanOrb } from "../components"
-
-/**
- * Returns a base64 encoded data url for the Talisman Orb svg
- */
-export const getTalismanOrbDataUrl = (address: string): `data:image/svg+xml;base64,${string}` => {
-  // render the TalismanOrb component and output the SVG as text
-  const svg = ReactDOMServer.renderToStaticMarkup(<TalismanOrb seed={address} />)
-
-  // convert to data url
-  return `data:image/svg+xml;base64,${Buffer.from(svg).toString("base64")}`
-}

package/src/util/index.ts

@@ -1 +0,0 @@
-export * from "./getTalismanOrbDataUrl"

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "@talismn/tsconfig/es6-react.json",
-  "include": ["src"],
-  "exclude": ["**/node_modules", "**/.*/", "**/*.spec.ts", "**/*.test.ts"]
-}