@midnames/sdk 0.1.1 → 0.1.3

package/dist/react/HolographicCard.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { PublicDataProvider } from '@midnight-ntwrk/midnight-js-types';
+import { MidNamesError } from '../types.js';
+/**
+ * HolographicCard props
+ */
+export interface HolographicCardProps {
+    /** Domain name to resolve and display */
+    domain: string;
+    /** Public data provider for fetching domain information */
+    publicDataProvider: PublicDataProvider;
+    /** Custom CSS gradient string for the background gradient effect */
+    behindGradient?: string;
+    /** Custom CSS gradient string for the inner card gradient */
+    innerGradient?: string;
+    /** Whether to display the background gradient effect */
+    showBehindGradient?: boolean;
+    /** Additional CSS classes to apply to the card wrapper */
+    className?: string;
+    /** Enable or disable the 3D tilt effect on mouse hover */
+    enableTilt?: boolean;
+    /** Enable or disable the 3D tilt effect on mobile devices */
+    enableMobileTilt?: boolean;
+    /** Sensitivity of the 3D tilt effect on mobile devices */
+    mobileTiltSensitivity?: number;
+    /** Text displayed on the contact button */
+    contactText?: string;
+    /** Whether to display the user information section */
+    showUserInfo?: boolean;
+    /** Callback function called when the contact button is clicked */
+    onContactClick?: () => void;
+    /** Callback function called when an error occurs */
+    onError?: (error: MidNamesError) => void;
+}
+declare const HolographicCard: React.NamedExoticComponent<HolographicCardProps>;
+export default HolographicCard;

package/dist/react/HolographicCard.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useCallback, useMemo, useState } from 'react';
+import { MidNamesError } from '../types.js';
+import { getDomainProfile } from '../core.js';
+const DEFAULT_BEHIND_GRADIENT = 'radial-gradient(farthest-side circle at var(--midnames-holo-pointer-x) var(--midnames-holo-pointer-y),hsla(266,100%,90%,var(--midnames-holo-card-opacity)) 4%,hsla(266,50%,80%,calc(var(--midnames-holo-card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--midnames-holo-card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%)';
+const DEFAULT_INNER_GRADIENT = 'linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)';
+const ANIMATION_CONFIG = {
+    SMOOTH_DURATION: 600,
+    INITIAL_DURATION: 1500,
+    INITIAL_X_OFFSET: 70,
+    INITIAL_Y_OFFSET: 60,
+    DEVICE_BETA_OFFSET: 20,
+};
+const clamp = (v, min = 0, max = 100) => Math.min(Math.max(v, min), max);
+const round = (v, p = 3) => parseFloat(v.toFixed(p));
+const adjust = (v, a, b, c, d) => round(c + ((d - c) * (v - a)) / (b - a));
+const easeInOutCubic = (x) => (x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);
+const HolographicCardComponent = ({ domain, publicDataProvider, behindGradient, innerGradient, showBehindGradient = true, className = '', enableTilt = true, enableMobileTilt = false, mobileTiltSensitivity = 5, contactText = 'Contact', showUserInfo = true, onContactClick, onError, }) => {
+    const wrapRef = useRef(null);
+    const cardRef = useRef(null);
+    const lastXY = useRef(null);
+    // Domain data state
+    const [loading, setLoading] = useState(false);
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    // Fetch domain data
+    useEffect(() => {
+        let mounted = true;
+        setLoading(true);
+        setError(null);
+        getDomainProfile(publicDataProvider, domain)
+            .then((result) => {
+            var _a, _b, _c, _d;
+            if (mounted) {
+                if (result.success) {
+                    setData(result.data);
+                }
+                else {
+                    const err = new MidNamesError((_b = (_a = result.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : 'Unknown error', (_d = (_c = result.error) === null || _c === void 0 ? void 0 : _c.code) !== null && _d !== void 0 ? _d : 'UNKNOWN', result.error);
+                    setError(err);
+                    if (onError)
+                        onError(err);
+                    setData(null);
+                }
+            }
+        })
+            .catch((err) => {
+            if (mounted) {
+                const midnamesError = err instanceof MidNamesError ? err : new MidNamesError('Unknown error', 'UNKNOWN', err);
+                setError(midnamesError);
+                if (onError)
+                    onError(midnamesError);
+            }
+        })
+            .finally(() => mounted && setLoading(false));
+        return () => {
+            mounted = false;
+        };
+    }, [publicDataProvider, domain, onError]);
+    // Extract fields from domain data
+    const fieldsMap = useMemo(() => {
+        const m = {};
+        ((data === null || data === void 0 ? void 0 : data.fields) || []).forEach(([k, v]) => (m[k.toLowerCase()] = v));
+        return m;
+    }, [data]);
+    const displayName = fieldsMap['name'] || fieldsMap['displayname'] || fieldsMap['handle'] || '';
+    const avatarUrl = fieldsMap['avatar'] || fieldsMap['image'] || fieldsMap['pfp'] || '';
+    const handle = fieldsMap['handle'] || '';
+    // Animation logic
+    const animation = useMemo(() => {
+        if (!enableTilt)
+            return null;
+        let raf = null;
+        const update = (x, y, card, wrap) => {
+            const w = card.clientWidth;
+            const h = card.clientHeight;
+            const px = clamp((100 / w) * x);
+            const py = clamp((100 / h) * y);
+            const cx = px - 50;
+            const cy = py - 50;
+            const props = {
+                '--midnames-holo-pointer-x': `${px}%`,
+                '--midnames-holo-pointer-y': `${py}%`,
+                '--midnames-holo-background-x': `${adjust(px, 0, 100, 35, 65)}%`,
+                '--midnames-holo-background-y': `${adjust(py, 0, 100, 35, 65)}%`,
+                '--midnames-holo-pointer-from-center': `${clamp(Math.hypot(py - 50, px - 50) / 50, 0, 1)}`,
+                '--midnames-holo-pointer-from-top': `${py / 100}`,
+                '--midnames-holo-pointer-from-left': `${px / 100}`,
+                '--midnames-holo-rotate-x': `${round(-(cx / 5))}deg`,
+                '--midnames-holo-rotate-y': `${round(cy / 4)}deg`,
+            };
+            Object.entries(props).forEach(([k, v]) => wrap.style.setProperty(k, v));
+        };
+        const animateToCenter = (dur, sx, sy, card, wrap) => {
+            const start = performance.now();
+            const tx = card.clientWidth / 2;
+            const ty = card.clientHeight / 2;
+            const loop = (t) => {
+                const p = clamp((t - start) / dur);
+                const e = easeInOutCubic(p);
+                update(adjust(e, 0, 1, sx, tx), adjust(e, 0, 1, sy, ty), card, wrap);
+                if (p < 1)
+                    raf = requestAnimationFrame(loop);
+            };
+            raf = requestAnimationFrame(loop);
+        };
+        return { update, animateToCenter, cancel: () => raf && cancelAnimationFrame(raf) };
+    }, [enableTilt]);
+    const onPointerMove = useCallback((e) => {
+        const card = cardRef.current, wrap = wrapRef.current;
+        if (!card || !wrap || !animation)
+            return;
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        lastXY.current = { x, y };
+        animation.update(x, y, card, wrap);
+    }, [animation]);
+    const onPointerEnter = useCallback(() => {
+        const card = cardRef.current, wrap = wrapRef.current;
+        if (!card || !wrap || !animation)
+            return;
+        animation.cancel();
+        wrap.classList.add('midnames-holo-active');
+        card.classList.add('midnames-holo-active');
+        lastXY.current = { x: card.clientWidth / 2, y: card.clientHeight / 2 };
+    }, [animation]);
+    const onPointerLeave = useCallback(() => {
+        const card = cardRef.current, wrap = wrapRef.current;
+        if (!card || !wrap || !animation)
+            return;
+        const { x, y } = lastXY.current || { x: card.clientWidth / 2, y: card.clientHeight / 2 };
+        animation.animateToCenter(ANIMATION_CONFIG.SMOOTH_DURATION, x, y, card, wrap);
+        wrap.classList.remove('midnames-holo-active');
+        card.classList.remove('midnames-holo-active');
+    }, [animation]);
+    const onDeviceOrientation = useCallback((e) => {
+        const card = cardRef.current, wrap = wrapRef.current;
+        if (!card || !wrap || !animation)
+            return;
+        const { beta, gamma } = e;
+        if (beta == null || gamma == null)
+            return;
+        animation.update(card.clientHeight / 2 + gamma * mobileTiltSensitivity, card.clientWidth / 2 + (beta - ANIMATION_CONFIG.DEVICE_BETA_OFFSET) * mobileTiltSensitivity, card, wrap);
+    }, [animation, mobileTiltSensitivity]);
+    useEffect(() => {
+        if (!enableTilt || !animation)
+            return;
+        const card = cardRef.current, wrap = wrapRef.current;
+        if (!card || !wrap)
+            return;
+        const pm = onPointerMove;
+        const pe = onPointerEnter;
+        const pl = onPointerLeave;
+        const doHandler = onDeviceOrientation;
+        const askMotion = () => {
+            if (!enableMobileTilt || location.protocol !== 'https:')
+                return;
+            const AnyMotion = window.DeviceMotionEvent;
+            if (AnyMotion && typeof AnyMotion.requestPermission === 'function') {
+                AnyMotion.requestPermission().then((s) => s === 'granted' && window.addEventListener('deviceorientation', doHandler));
+            }
+            else {
+                window.addEventListener('deviceorientation', doHandler);
+            }
+        };
+        card.addEventListener('pointerenter', pe);
+        card.addEventListener('pointermove', pm);
+        card.addEventListener('pointerleave', pl);
+        card.addEventListener('click', askMotion);
+        const ix = wrap.clientWidth - ANIMATION_CONFIG.INITIAL_X_OFFSET;
+        const iy = ANIMATION_CONFIG.INITIAL_Y_OFFSET;
+        animation.update(ix, iy, card, wrap);
+        animation.animateToCenter(ANIMATION_CONFIG.INITIAL_DURATION, ix, iy, card, wrap);
+        return () => {
+            card.removeEventListener('pointerenter', pe);
+            card.removeEventListener('pointermove', pm);
+            card.removeEventListener('pointerleave', pl);
+            card.removeEventListener('click', askMotion);
+            window.removeEventListener('deviceorientation', doHandler);
+            animation.cancel();
+        };
+    }, [enableTilt, enableMobileTilt, animation, onPointerMove, onPointerEnter, onPointerLeave, onDeviceOrientation]);
+    const cardStyle = useMemo(() => ({
+        '--midnames-holo-behind-gradient': showBehindGradient ? (behindGradient !== null && behindGradient !== void 0 ? behindGradient : DEFAULT_BEHIND_GRADIENT) : 'none',
+        '--midnames-holo-inner-gradient': innerGradient !== null && innerGradient !== void 0 ? innerGradient : DEFAULT_INNER_GRADIENT,
+    }), [showBehindGradient, behindGradient, innerGradient]);
+    return (_jsx("div", { ref: wrapRef, className: `midnames-holo-card-wrapper ${className}`.trim(), style: cardStyle, children: _jsx("section", { ref: cardRef, className: "midnames-holo-card", children: _jsxs("div", { className: "midnames-holo-inside", children: [_jsx("div", { className: "midnames-holo-shine" }), _jsx("div", { className: "midnames-holo-glare" }), _jsxs("div", { className: "midnames-holo-content midnames-holo-avatar-content", children: [loading && (_jsx("div", { className: "midnames-holo-loading", children: "Loading domain..." })), error && !loading && (_jsxs("div", { className: "midnames-holo-error", children: [_jsx("div", { children: "Failed to load domain" }), _jsx("div", { style: { fontSize: '12px', opacity: 0.8, marginTop: '8px' }, children: error.message })] })), avatarUrl && !loading && !error && (_jsx("img", { className: "midnames-holo-avatar", src: avatarUrl, alt: `${displayName || domain} avatar`, loading: "lazy", onError: (e) => { e.target.style.display = 'none'; } })), showUserInfo && !loading && !error && (displayName || handle || contactText) && (_jsxs("div", { className: "midnames-holo-user-info", children: [_jsxs("div", { className: "midnames-holo-user-details", children: [_jsx("div", { className: "midnames-holo-mini-avatar", children: _jsx("img", { src: avatarUrl || '', alt: "mini", loading: "lazy", onError: (e) => { e.target.style.display = 'none'; } }) }), _jsxs("div", { className: "midnames-holo-user-text", children: [displayName && _jsx("div", { className: "midnames-holo-handle", children: displayName }), handle && _jsxs("div", { className: "midnames-holo-status", children: ["@", handle] }), _jsx("div", { className: "midnames-holo-status", children: domain })] })] }), _jsx("button", { className: "midnames-holo-contact-btn", onClick: onContactClick, type: "button", children: contactText })] }))] })] }) }) }));
+};
+const HolographicCard = React.memo(HolographicCardComponent);
+export default HolographicCard;

package/dist/react/index.d.ts

@@ -1 +1,3 @@
 export * from './DomainProfileWidget.js';
+export { default as HolographicCard } from './HolographicCard.js';
+export { CopyableValue } from './DomainProfileWidget.js';

package/dist/react/index.js

@@ -1 +1,3 @@
 export * from './DomainProfileWidget.js';
+export { default as HolographicCard } from './HolographicCard.js';
+export { CopyableValue } from './DomainProfileWidget.js';

package/dist/styles.css

@@ -1,4 +1,49 @@
 .midnames-card{border:1px solid rgba(255,255,255,.12);background:transparent;border-radius:12px;padding:12px;max-width:640px}
+
+/* Variant styles */
+.midnames-card-compact{padding:8px;max-width:400px}
+.midnames-card-compact .midnames-header{gap:8px}
+.midnames-card-compact .midnames-avatar{height:48px;width:48px}
+.midnames-card-compact .midnames-name{font-size:16px}
+.midnames-card-compact .midnames-domain{font-size:11px}
+.midnames-card-compact .midnames-bio{font-size:13px}
+.midnames-card-compact .midnames-grid{gap:6px;margin-top:8px}
+.midnames-card-compact .midnames-box{padding:6px}
+
+.midnames-card-inline{display:flex;align-items:center;gap:12px;padding:8px 12px;max-width:none}
+.midnames-card-inline .midnames-header{margin-top:0;flex:1}
+.midnames-card-inline .midnames-banner{display:none}
+.midnames-card-inline .midnames-bio{display:none}
+.midnames-card-inline .midnames-grid{display:none}
+.midnames-card-inline .midnames-links{display:none}
+.midnames-card-inline .midnames-actions{margin-left:auto}
+
+.midnames-card-minimal{padding:6px 8px;max-width:300px}
+.midnames-card-minimal .midnames-header{gap:6px}
+.midnames-card-minimal .midnames-avatar{height:32px;width:32px;font-size:12px}
+.midnames-card-minimal .midnames-name{font-size:14px}
+.midnames-card-minimal .midnames-status{font-size:10px;padding:2px 6px}
+.midnames-card-minimal .midnames-banner{display:none}
+.midnames-card-minimal .midnames-bio{display:none}
+.midnames-card-minimal .midnames-grid{display:none}
+.midnames-card-minimal .midnames-links{display:none}
+
+/* Theme styles */
+.midnames-theme-light{background:rgba(255,255,255,.05);border-color:rgba(0,0,0,.12);color:#000}
+.midnames-theme-dark{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.12);color:#fff}
+
+/* Border radius styles */
+.midnames-border-none{border-radius:0}
+.midnames-border-sm{border-radius:4px}
+.midnames-border-lg{border-radius:16px}
+
+/* Padding styles */
+.midnames-padding-none{padding:0}
+.midnames-padding-sm{padding:8px}
+.midnames-padding-lg{padding:16px}
+
+/* Actions */
+.midnames-actions{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
 .midnames-banner{width:100%;height:120px;object-fit:cover;border-radius:8px}
 .midnames-header{display:flex;gap:12px;align-items:center;margin-top:8px}
 .midnames-avatar{height:64px;width:64px;border-radius:9999px;background:rgba(0,170,255,.1);color:#0af;display:flex;align-items:center;justify-content:center;font-weight:600;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midnames/sdk",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "SDK for Midnames -  Midnight Name Service",
   "keywords": ["midnight", "nameservice", "dns", "blockchain", "midnames", "widget", "domain", "resolver"],
   "type": "module",
@@ -20,10 +20,11 @@
       "require": "./dist/react/index.js",
       "default": "./dist/react/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./holographic-card.css": "./dist/holographic-card.css"
   },
   "scripts": {
-    "build": "npx tsc -b && rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp -r managed dist/",
+    "build": "npx tsc -b && rm -rf dist && tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp src/holographic-card.css dist/holographic-card.css && cp -r managed dist/",
     "prepublish": "npm run --prefix .. copy-contract-keys-sdk && npm run build"
   },
   "peerDependencies": {
@@ -50,4 +51,3 @@
   "author": "Midnames",
   "dependencies": {}
 }
-

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/core.ts","./src/index.ts","./src/types.ts","./src/react/DomainProfileWidget.tsx","./src/react/HolographicCard.tsx","./src/react/index.ts","./src/utils/address.ts","./src/utils/domain.ts"],"version":"5.9.2"}