@decentrys/ui-sdk 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +88 -21
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @decentrys/ui-sdk
2
2
 
3
- Drop-in React components for rendering Decentrys risk assessments.
3
+ **Drop-in React components that render a Decentrys assessment — built so a new project can never be shown as dangerous for being new.**
4
4
 
5
5
  ## Install
6
6
 
@@ -8,44 +8,111 @@ Drop-in React components for rendering Decentrys risk assessments.
8
8
  npm install @decentrys/ui-sdk @decentrys/protect
9
9
  ```
10
10
 
11
- React 18 or 19, as a peer dependency — never bundled.
11
+ React 18 or 19, as a peer dependency. Never bundled — two copies of React in one
12
+ app is a real breakage.
12
13
 
13
- ## Use
14
+ ## Quick start
14
15
 
15
16
  ```tsx
17
+ import { Decentrys } from '@decentrys/protect';
16
18
  import { TransactionRiskBanner, DECENTRYS_UI_CSS } from '@decentrys/ui-sdk';
17
19
 
18
- <style>{DECENTRYS_UI_CSS}</style>
19
- <TransactionRiskBanner result={result} actions={<YourButtons />} />
20
+ const decentrys = new Decentrys({ apiKey: 'dk_pub_live_...' });
21
+
22
+ function SigningScreen({ tx }) {
23
+ const [result, setResult] = useState(null);
24
+ useEffect(() => { decentrys.assessTransaction(tx).then(setResult); }, [tx]);
25
+
26
+ return (
27
+ <>
28
+ <style>{DECENTRYS_UI_CSS}</style>
29
+ {result && (
30
+ <TransactionRiskBanner
31
+ result={result}
32
+ actions={<>
33
+ <button onClick={sign}>Confirm</button>
34
+ <button onClick={cancel}>Cancel</button>
35
+ </>}
36
+ />
37
+ )}
38
+ </>
39
+ );
40
+ }
20
41
  ```
21
42
 
22
- ## What these components will not do
43
+ Inject `DECENTRYS_UI_CSS` once, anywhere — a `<style>` tag, your `<head>`, or a
44
+ shadow root. No external stylesheet, no font fetch, no network calls.
23
45
 
24
- **Nothing blocks.** `blocksUi` is typed as the literal `false`, including for
25
- a `block` policy action. No control in this package is ever rendered disabled —
26
- the decision belongs to your application.
46
+ ## Components
47
+
48
+ | Component | Use it when |
49
+ |---|---|
50
+ | `TransactionRiskBanner` | A user is about to sign. The main one. |
51
+ | `ApprovalWarning` | A token approval — leads with what is being granted, not a score. |
52
+ | `ContractFacts` | Showing what a contract can do (upgrade, mint, pause). |
53
+ | `TokenSecurityPanel` | A token detail screen. |
54
+ | `ThreatSignalList` | You want signals only, in your own layout. |
55
+ | `AddressRiskBadge` | Compact inline badge beside an address. |
56
+ | `RiskDetailsModal` | "Why?" — every fact, signal, evidence item and score component. |
57
+
58
+ ```tsx
59
+ <ApprovalWarning result={approvalResult} />
60
+ // "Grants 0x1111… permission to spend an unlimited amount of your USDC, until it is revoked."
61
+
62
+ <AddressRiskBadge result={result} />
63
+ <RiskDetailsModal result={result} open={open} onClose={() => setOpen(false)} />
64
+ ```
65
+
66
+ ## What these will not do
67
+
68
+ **Nothing blocks.** `blocksUi` is typed as the literal `false`, including for a
69
+ `block` policy action. No control here is ever rendered `disabled` — the
70
+ decision belongs to your application, and you wire your own buttons via `actions`.
27
71
 
28
72
  **`LIMITED` history is never a warning.** Its presentation is typed
29
- `tone: 'neutral'` and `isWarning: false` as literal types, so rendering it as
30
- an alert does not compile. It is the correct state for anything recently
31
- deployed.
73
+ `tone: 'neutral'` and `isWarning: false` as *literal types*, so rendering it as
74
+ an alert doesn't compile. It's the correct state for anything recently deployed.
32
75
 
33
76
  **Facts never look like threat signals.** Each row carries its kind as a word,
34
77
  its own rule style and its own glyph. Colour is the third carrier of meaning,
35
- not the first — a colour-blind user still has to be able to tell "deployed
36
- three days ago" from "attributed to a drainer family".
78
+ not the first — a colour-blind user still has to tell "deployed three days ago"
79
+ from "attributed to a drainer family".
37
80
 
38
81
  ## Theming
39
82
 
40
- CSS custom properties only. No Tailwind, no CSS-in-JS, no external fetches.
41
- 31 `--dcy-*` tokens with light defaults and a dark-mode block, overridable per
42
- component so your brand palette does not flip on a user's OS setting.
83
+ 31 CSS custom properties with light defaults and a dark-mode block.
84
+
85
+ ```tsx
86
+ <TransactionRiskBanner
87
+ result={result}
88
+ theme={{ '--dcy-accent': '#ab9ff2', '--dcy-surface': '#1a1a2e', '--dcy-radius': '12px' }}
89
+ className="my-wallet-card"
90
+ />
91
+ ```
92
+
93
+ Inline `theme` beats both the defaults and the dark-mode block, so a fixed brand
94
+ palette doesn't flip on a user's OS setting. Every meaningful element also
95
+ carries a `data-dcy-*` attribute if you'd rather style from your own CSS.
96
+
97
+ ## React Native
98
+
99
+ These render React DOM and won't work in RN. The *presentation logic* —
100
+ `presentation.ts` and `copy.ts` — is React-free and reusable; a native renderer
101
+ is planned as `@decentrys/protect-react-native`.
102
+
103
+ ## The rest of the SDK
104
+
105
+ | Package | For |
106
+ |---|---|
107
+ | [`@decentrys/protect`](https://www.npmjs.com/package/@decentrys/protect) | Pre-sign risk assessment for wallets and dapps |
108
+ | [`@decentrys/ui-sdk`](https://www.npmjs.com/package/@decentrys/ui-sdk) | React components that render Protect results |
109
+ | [`@decentrys/sentinel-sdk`](https://www.npmjs.com/package/@decentrys/sentinel-sdk) | Monitoring deployed contracts and treasuries |
110
+ | [`@decentrys/risk-sdk`](https://www.npmjs.com/package/@decentrys/risk-sdk) | Screening for exchanges and custodians |
111
+ | [`@decentrys/dri-sdk`](https://www.npmjs.com/package/@decentrys/dri-sdk) | Fund tracing and recovery intelligence |
112
+ | [`@decentrys/agent`](https://www.npmjs.com/package/@decentrys/agent) | Policy enforcement for autonomous agents |
43
113
 
44
114
  ## Licence
45
115
 
46
116
  MIT © Decentrys Labs
47
117
 
48
- ## Links
49
-
50
- - [decentrys.com](https://decentrys.com) · [SDK overview](https://decentrys.com/sdk) · [Developer API](https://decentrys.com/developers)
51
- - Source: [github.com/teamdecentrys-byte/Decentrys](https://github.com/teamdecentrys-byte/Decentrys)
118
+ [decentrys.com](https://decentrys.com) · [SDK overview](https://decentrys.com/sdk) · [Developer API](https://decentrys.com/developers) · [Source](https://github.com/teamdecentrys-byte/Decentrys)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decentrys/ui-sdk",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Drop-in React components for rendering Decentrys risk assessments, built so a new project can never be shown as dangerous for being new.",
5
5
  "license": "MIT",
6
6
  "author": "Decentrys Labs",
@@ -49,7 +49,7 @@
49
49
  "README.md"
50
50
  ],
51
51
  "dependencies": {
52
- "@decentrys/protect": "0.1.0"
52
+ "@decentrys/protect": "0.1.1"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "react": ">=18",