arkada-widgets 1.0.1 → 1.0.3
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.
- package/README.md +130 -1
- package/package.json +4 -2
- package/dist/arkada-widgets.css +0 -2
- package/dist/arkada-widgets.js +0 -2
- package/dist/arkada-wvbs-widget-Br6vFpXu.js +0 -9502
- package/dist/arkada-wvbs-widget.js +0 -2
- package/dist/favicon.svg +0 -1
- package/dist/icons.svg +0 -24
package/README.md
CHANGED
|
@@ -4,9 +4,13 @@ Production-ready widget library for the Arkada ecosystem. Widgets are available
|
|
|
4
4
|
|
|
5
5
|
## Table of Contents
|
|
6
6
|
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Usage](#usage)
|
|
9
|
+
- [React](#react)
|
|
10
|
+
- [Web Component](#web-component-vue-angular-svelte-etc)
|
|
11
|
+
- [Plain HTML](#plain-html)
|
|
7
12
|
- [Widgets (Start Here)](#widgets-start-here)
|
|
8
13
|
- [WalletVerificationButton](./docs/widgets/wallet-verification-button.md)
|
|
9
|
-
- [Installation](#installation)
|
|
10
14
|
- [Documentation](./docs/)
|
|
11
15
|
- [Architecture](./docs/architecture.md)
|
|
12
16
|
- [Web Components](./docs/web-components.md)
|
|
@@ -23,6 +27,131 @@ npm install arkada-widgets
|
|
|
23
27
|
|
|
24
28
|
---
|
|
25
29
|
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### React
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { WalletVerificationButton, VerifyWalletVariants } from 'arkada-widgets'
|
|
36
|
+
|
|
37
|
+
export function App() {
|
|
38
|
+
return (
|
|
39
|
+
<WalletVerificationButton
|
|
40
|
+
walletAddress="0xYourWalletAddress"
|
|
41
|
+
theme="dark"
|
|
42
|
+
variant={VerifyWalletVariants.COMPACT}
|
|
43
|
+
/>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Props:**
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
|------|------|---------|-------------|
|
|
52
|
+
| `walletAddress` | `string` | — | Wallet address to check |
|
|
53
|
+
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme |
|
|
54
|
+
| `variant` | `VerifyWalletVariant` | `"compact"` | Visual layout |
|
|
55
|
+
| `referralCode` | `string` | — | Appended as `?ref=<code>` to the verification URL |
|
|
56
|
+
| `someVerified` | `boolean` | — | Verified if any network has rank > 0 |
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
### Web Component (Vue, Angular, Svelte, etc.)
|
|
61
|
+
|
|
62
|
+
Import once to register the custom element — no React needed in your project:
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
import 'arkada-widgets/arkada-wvbs-widget'
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
**Vue:**
|
|
69
|
+
|
|
70
|
+
```vue
|
|
71
|
+
<template>
|
|
72
|
+
<arkada-wvbs-widget
|
|
73
|
+
:data="JSON.stringify({ walletAddress: '0xYourWalletAddress' })"
|
|
74
|
+
theme="dark"
|
|
75
|
+
/>
|
|
76
|
+
</template>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
**Angular** — add `CUSTOM_ELEMENTS_SCHEMA` to the module, then import in the component:
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
import 'arkada-widgets/arkada-wvbs-widget'
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<arkada-wvbs-widget
|
|
87
|
+
[attr.data]="props"
|
|
88
|
+
theme="dark"
|
|
89
|
+
></arkada-wvbs-widget>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**Svelte:**
|
|
93
|
+
|
|
94
|
+
```svelte
|
|
95
|
+
<script>
|
|
96
|
+
import 'arkada-widgets/arkada-wvbs-widget'
|
|
97
|
+
const props = JSON.stringify({ walletAddress: '0xYourWalletAddress' })
|
|
98
|
+
</script>
|
|
99
|
+
|
|
100
|
+
<arkada-wvbs-widget data={props} theme="dark" />
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**Attributes:**
|
|
104
|
+
|
|
105
|
+
| Attribute | Type | Default | Description |
|
|
106
|
+
|-----------|------|---------|-------------|
|
|
107
|
+
| `data` | JSON string | — | Widget config (see shape below) |
|
|
108
|
+
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme |
|
|
109
|
+
| `size` | `"sm" \| "lg"` | `"lg"` | Widget size |
|
|
110
|
+
|
|
111
|
+
`data` JSON shape:
|
|
112
|
+
|
|
113
|
+
```jsonc
|
|
114
|
+
{
|
|
115
|
+
"walletAddress": "0x...", // required
|
|
116
|
+
"variant": "compact", // optional — visual layout
|
|
117
|
+
"referralCode": "MYREF", // optional
|
|
118
|
+
"someVerified": false // optional
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
You can also set data as a JS object to skip JSON serialization:
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
document.querySelector('arkada-wvbs-widget').data = { walletAddress: '0x...' }
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
### Plain HTML
|
|
131
|
+
|
|
132
|
+
No build step — load the script from a CDN:
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<!DOCTYPE html>
|
|
136
|
+
<html lang="en">
|
|
137
|
+
<head>
|
|
138
|
+
<meta charset="UTF-8" />
|
|
139
|
+
</head>
|
|
140
|
+
<body>
|
|
141
|
+
|
|
142
|
+
<arkada-wvbs-widget
|
|
143
|
+
data='{"walletAddress":"0xYourWalletAddress","variant":"compact"}'
|
|
144
|
+
theme="dark"
|
|
145
|
+
></arkada-wvbs-widget>
|
|
146
|
+
|
|
147
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/arkada-widgets/dist/arkada-wvbs-widget.js"></script>
|
|
148
|
+
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
26
155
|
## Widgets (Start Here)
|
|
27
156
|
|
|
28
157
|
Widget docs are prioritized for integrators:
|
package/package.json
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "arkada-widgets",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
10
11
|
"import": "./dist/index.js",
|
|
11
12
|
"require": "./dist/index.cjs"
|
|
12
13
|
},
|
|
13
14
|
"./arkada-wvbs-widget": {
|
|
15
|
+
"types": "./dist/web-components/arkada-wvbs-widget.d.ts",
|
|
14
16
|
"import": "./dist/arkada-wvbs-widget.js"
|
|
15
17
|
}
|
|
16
18
|
},
|
|
@@ -19,7 +21,7 @@
|
|
|
19
21
|
],
|
|
20
22
|
"scripts": {
|
|
21
23
|
"dev": "vite",
|
|
22
|
-
"build": "tsc -
|
|
24
|
+
"build": "rm -rf dist && tsc -p tsconfig.lib.json && tsup && vite build",
|
|
23
25
|
"build:lib": "tsup",
|
|
24
26
|
"lint": "eslint .",
|
|
25
27
|
"preview": "vite preview",
|
package/dist/arkada-widgets.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
:host{--wvb-gradient-start:#ff6a59;--wvb-gradient-end:#5377ff;--wvb-verified-start:#0e9035;--wvb-verified-end:#14be47;--wvb-container-gradient-dark-sides:#000;--wvb-container-gradient-dark-middle:#2d2d2d;--wvb-container-gradient-light-sides:#d2d2d2;--wvb-container-gradient-light-middle:#fff;--wvb-container-gradient-light-banner-sides:#efefef;--wvb-glow:#be66b3;--wvb-focus:#00b17e}.vwb-gradient-border-dark{background:linear-gradient(135deg,#ffffff80,#ffffff40,#ffffff40,#ffffff1a)}.vwb-gradient-border-light{background:linear-gradient(135deg,#6b6b6b80,#6b6b6b40,#6b6b6b40,#6b6b6b1a)}.vwb-gradient-text{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.vwb-cta-gradient{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%);box-shadow:0px 0px 6px 0px var(--wvb-glow,#be66b3)}.vwb-floating-nv-gradient{background:linear-gradient(135deg,#d9d9d980 0%,#73737380 100%);box-shadow:0 4px 4px #00000040}.vwb-floating-nvc-gradient{background:var(--Gradient-base,linear-gradient(82deg, #ff6a5980 -12.41%, #5377ff80 111.55%));box-shadow:0 4px 4px #00000040}.vwb-floating-v-gradient{background:linear-gradient(135deg,#7defa380 0%,#2bb45980 100%);box-shadow:0 4px 4px #00000040}.vwb-verified-gradient{background:linear-gradient(90deg, var(--wvb-verified-start,#0e9035) 0%, var(--wvb-verified-end,#14be47) 100%)}.vwb-border-dark{background:linear-gradient(90deg, var(--wvb-container-gradient-dark-sides,#000) 0%, var(--wvb-container-gradient-dark-middle,#2d2d2d) 50%, var(--wvb-container-gradient-dark-sides,#000) 100%)}.vwb-border-light-compact{background:linear-gradient(90deg, var(--wvb-container-gradient-light-sides,#d2d2d2) 0%, var(--wvb-container-gradient-light-middle,#fff) 50%, var(--wvb-container-gradient-light-sides,#d2d2d2) 100%)}.vwb-border-light-banner{background:linear-gradient(90deg, var(--wvb-container-gradient-light-banner-sides,#efefef) 0%, var(--wvb-container-gradient-light-middle,#fff) 50%, var(--wvb-container-gradient-light-banner-sides,#efefef) 100%)}.vwb-full-gradient{background:linear-gradient(82deg, var(--wvb-gradient-start,#ff6a59) -12.41%, var(--wvb-gradient-end,#5377ff) 111.55%)}.vwb-interactive{transition:filter .15s,transform .15s}.vwb-interactive:hover{filter:brightness(1.08)}.vwb-interactive:active{filter:brightness(.95);transform:scale(.98)}.vwb-interactive:focus-visible{outline:2px solid var(--wvb-focus,#00b17e);outline-offset:2px}
|
|
2
|
-
/*$vite$:1*/
|
package/dist/arkada-widgets.js
DELETED