Nexus Widget

Install it

Source

1// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
2 
3import React from "react";
4 
5const identiconPalette = [
6  "var(--foreground-brand)",
7  "#16A34A",
8  "#B7791F",
9  "#7C3AED",
10  "#DB2777",
11  "#0891B2",
12  "#EA580C",
13  "#475569",
14];
15 
16const hashAddress = (address: string) => {
17  let hash = 0;
18  for (const char of address.toLowerCase()) {
19    hash = (hash << 5) - hash + char.charCodeAt(0);
20    hash |= 0;
21  }
22  return Math.abs(hash);
23};
24 
25export function AddressIdenticon({
26  address,
27  size = 18,
28}: {
29  address: string;
30  size?: number;
31}) {
32  const hash = hashAddress(address);
33  const primary = identiconPalette[hash % identiconPalette.length];
34  const secondary =
35    identiconPalette[Math.floor(hash / 7) % identiconPalette.length];
36  const accent =
37    identiconPalette[Math.floor(hash / 13) % identiconPalette.length];
38  const rotation = hash % 360;
39 
40  return (
41    <span
42      aria-hidden="true"
43      style={{
44        background: `conic-gradient(from ${rotation}deg, ${primary}, ${secondary}, ${accent}, ${primary})`,
45        border: "1px solid #FFFFFE",
46        borderRadius: "999px",
47        boxShadow: "0 0 0 1px #E8E8E7",
48        boxSizing: "border-box",
49        display: "inline-block",
50        flexShrink: 0,
51        height: size,
52        width: size,
53      }}
54    />
55  );
56}

What it pulls in

npm packages

• @avail-project/nexus-core@2.2.3
• decimal.js
• lucide-react
• viem
• wagmi

Other registry items

• availproject/widgets/button
• availproject/widgets/dialog
• availproject/widgets/nexus-provider
• availproject/widgets/swaps

Files it writes

• registry/avail-widgets/nexus-widget/components/address-identicon.tsx
• registry/avail-widgets/nexus-widget/components/amount-input-unified.tsx
• registry/avail-widgets/nexus-widget/components/deposit-idle-form.tsx
• registry/avail-widgets/nexus-widget/components/nexus-widget-progress-screen.tsx
• registry/avail-widgets/nexus-widget/components/pay-using-selector.tsx
• registry/avail-widgets/nexus-widget/components/pay-with-sources.tsx
• registry/avail-widgets/nexus-widget/components/receive-asset-selector.tsx
• registry/avail-widgets/nexus-widget/components/recipient-input.tsx
• registry/avail-widgets/nexus-widget/components/send-idle-form.tsx
• registry/avail-widgets/nexus-widget/components/status-alerts.tsx
• registry/avail-widgets/nexus-widget/components/swap-asset-selector.tsx
• registry/avail-widgets/nexus-widget/components/swap-idle-form.tsx
• registry/avail-widgets/nexus-widget/components/swap-intent-preview.tsx
• registry/avail-widgets/nexus-widget/nexus-widget.tsx
• registry/avail-widgets/nexus-widget/sdk-types.ts
• registry/avail-widgets/nexus-widget/theme.ts
• registry/avail-widgets/nexus-widget/types.ts
• registry/avail-widgets/nexus-widget/utils/citrea-tokens.ts
• registry/avail-widgets/nexus-widget/utils/deposit-source-selection.ts
• registry/avail-widgets/common/components/ErrorBoundary.tsx
• registry/avail-widgets/common/hooks/useDebouncedCallback.ts
• registry/avail-widgets/common/hooks/useDebouncedValue.ts
• registry/avail-widgets/common/hooks/useInterval.ts
• registry/avail-widgets/common/hooks/useLatest.ts
• registry/avail-widgets/common/hooks/useNexusError.ts
• registry/avail-widgets/common/hooks/usePolling.ts
• registry/avail-widgets/common/hooks/useStableCallback.ts
• registry/avail-widgets/common/hooks/useStopwatch.ts
• registry/avail-widgets/common/hooks/useTransactionExecution.ts
• registry/avail-widgets/common/hooks/useTransactionFlow.ts
• registry/avail-widgets/common/index.ts
• registry/avail-widgets/common/tx/steps.ts
• registry/avail-widgets/common/tx/types.ts
• registry/avail-widgets/common/tx/useTransactionSteps.ts
• registry/avail-widgets/common/types/transaction-flow.ts
• registry/avail-widgets/common/utils/constant.ts
• registry/avail-widgets/common/utils/token-pricing.ts
• registry/avail-widgets/common/utils/transaction-flow.ts