@wheelx-widget/widget 0.1.5 → 0.1.7
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/LICENSE +21 -21
- package/README.md +197 -197
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.js +748 -343
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +754 -349
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 WheelX
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 WheelX
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,197 +1,197 @@
|
|
|
1
|
-
# @wheelx-widget/widget
|
|
2
|
-
|
|
3
|
-
An open-source, framework-agnostic React widget for cross-chain token swaps and bridges. Built-in wallet connection support (EVM + Solana), configurable theme system, and ready-to-use demo application.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- 🔄 **Cross-chain Swap & Bridge** — Full trading flow with quote polling, gas estimation, approval handling
|
|
8
|
-
- 👛 **Built-in Wallet Connection** — Dynamic SDK + Wagmi v2 supporting EVM (MetaMask, OKX, etc.) and Solana (Phantom)
|
|
9
|
-
- 🎨 **Configurable Theme** — 14 color tokens for custom skinning
|
|
10
|
-
- ⚛️ **Framework Agnostic** — Works with any React framework (Next.js, Vite, Create React App, etc.)
|
|
11
|
-
- 📦 **Tree-shakeable** — ESM + CJS builds with TypeScript declarations
|
|
12
|
-
- 🔌 **Configurable Default Tokens** — Set default from/to chains and tokens
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm install @wheelx-widget/widget @chakra-ui/react @emotion/react
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Note: `@chakra-ui/react` and `@emotion/react` are required peer dependencies.
|
|
21
|
-
|
|
22
|
-
## Quick Start
|
|
23
|
-
|
|
24
|
-
```tsx
|
|
25
|
-
// main.tsx — wrap with ChakraProvider
|
|
26
|
-
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
|
|
27
|
-
import { createRoot } from 'react-dom/client'
|
|
28
|
-
import App from './App'
|
|
29
|
-
|
|
30
|
-
createRoot(document.getElementById('root')!).render(
|
|
31
|
-
<ChakraProvider value={defaultSystem}>
|
|
32
|
-
<App />
|
|
33
|
-
</ChakraProvider>
|
|
34
|
-
)
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
```tsx
|
|
38
|
-
// App.tsx
|
|
39
|
-
// Import the CSS for animations (required!)
|
|
40
|
-
import '@wheelx-widget/widget/dist/index.css'
|
|
41
|
-
import { WheelXProvider, WheelXWidget } from '@wheelx-widget/widget'
|
|
42
|
-
|
|
43
|
-
function App() {
|
|
44
|
-
return (
|
|
45
|
-
<WheelXProvider>
|
|
46
|
-
<WheelXWidget />
|
|
47
|
-
</WheelXProvider>
|
|
48
|
-
)
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Configuration
|
|
53
|
-
|
|
54
|
-
### Theme Customization
|
|
55
|
-
|
|
56
|
-
Customize 14 visual tokens:
|
|
57
|
-
|
|
58
|
-
```tsx
|
|
59
|
-
<WheelXProvider config={{
|
|
60
|
-
theme: {
|
|
61
|
-
defaultTextColor: '#1A1D26',
|
|
62
|
-
highlightTextColor: '#007B9D',
|
|
63
|
-
weakTextColor: '#5D6270',
|
|
64
|
-
defaultBgColor: '#FFFFFF',
|
|
65
|
-
highlightBgColor: '#E6F7FB',
|
|
66
|
-
assistBgColor: '#F5F6F8',
|
|
67
|
-
defaultBorderColor: '#E2E4E8',
|
|
68
|
-
highlightBorderColor: '#007B9D',
|
|
69
|
-
highlightButtonBg: '#007B9D',
|
|
70
|
-
highlightButtonText: '#FFFFFF',
|
|
71
|
-
normalButtonBg: '#F5F6F8',
|
|
72
|
-
normalButtonText: '#1A1D26',
|
|
73
|
-
disabledButtonBg: '#E2E4E8',
|
|
74
|
-
disabledButtonText: '#A0A4AE'
|
|
75
|
-
}
|
|
76
|
-
}}>
|
|
77
|
-
<WheelXWidget />
|
|
78
|
-
</WheelXProvider>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
### Default Chain/Token Configuration
|
|
82
|
-
|
|
83
|
-
```tsx
|
|
84
|
-
<WheelXProvider config={{
|
|
85
|
-
from: {
|
|
86
|
-
chains: [8453, 1], // Only show Base and Ethereum as from chains
|
|
87
|
-
defaultChainId: 8453 // Default to Base
|
|
88
|
-
},
|
|
89
|
-
to: {
|
|
90
|
-
chains: [1868], // Only show Soneium as to chain
|
|
91
|
-
defaultChainId: 1868 // Default to Soneium
|
|
92
|
-
}
|
|
93
|
-
}}>
|
|
94
|
-
<WheelXWidget />
|
|
95
|
-
</WheelXProvider>
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### Custom Dynamic Environment ID
|
|
99
|
-
|
|
100
|
-
```tsx
|
|
101
|
-
<WheelXProvider config={{
|
|
102
|
-
dynamicEnvironmentId: 'your-dynamic-environment-id'
|
|
103
|
-
}}>
|
|
104
|
-
<WheelXWidget />
|
|
105
|
-
</WheelXProvider>
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
## API Reference
|
|
109
|
-
|
|
110
|
-
### `<WheelXProvider>`
|
|
111
|
-
|
|
112
|
-
The root provider component that sets up wallet connections, React Query, and theme.
|
|
113
|
-
|
|
114
|
-
| Prop | Type | Default | Description |
|
|
115
|
-
|------|------|---------|-------------|
|
|
116
|
-
| `config` | `WidgetConfig` | `{}` | Widget configuration |
|
|
117
|
-
| `children` | `React.ReactNode` | — | Child components |
|
|
118
|
-
|
|
119
|
-
### `<WheelXWidget>`
|
|
120
|
-
|
|
121
|
-
The main trading widget component.
|
|
122
|
-
|
|
123
|
-
| Prop | Type | Default | Description |
|
|
124
|
-
|------|------|---------|-------------|
|
|
125
|
-
| `config` | `WidgetConfig` | `{}` | Widget configuration |
|
|
126
|
-
|
|
127
|
-
### `WidgetConfig`
|
|
128
|
-
|
|
129
|
-
```typescript
|
|
130
|
-
interface WidgetConfig {
|
|
131
|
-
theme?: Partial<WidgetTheme>
|
|
132
|
-
from?: {
|
|
133
|
-
chains?: number[]
|
|
134
|
-
defaultChainId?: number
|
|
135
|
-
chainTokens?: Record<number, TokenConfig[]>
|
|
136
|
-
defaultToken?: { chainId: number; address: string }
|
|
137
|
-
}
|
|
138
|
-
to?: {
|
|
139
|
-
chains?: number[]
|
|
140
|
-
defaultChainId?: number
|
|
141
|
-
chainTokens?: Record<number, TokenConfig[]>
|
|
142
|
-
defaultToken?: { chainId: number; address: string }
|
|
143
|
-
}
|
|
144
|
-
routerCallback?: {
|
|
145
|
-
onPathnameChange?: (pathname: string) => void
|
|
146
|
-
onRouteLeave?: () => void
|
|
147
|
-
getCurrentPathname?: () => string
|
|
148
|
-
}
|
|
149
|
-
dynamicEnvironmentId?: string
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### `WidgetTheme`
|
|
154
|
-
|
|
155
|
-
```typescript
|
|
156
|
-
interface WidgetTheme {
|
|
157
|
-
defaultTextColor: string
|
|
158
|
-
highlightTextColor: string
|
|
159
|
-
weakTextColor: string
|
|
160
|
-
defaultBgColor: string
|
|
161
|
-
highlightBgColor: string
|
|
162
|
-
assistBgColor: string
|
|
163
|
-
defaultBorderColor: string
|
|
164
|
-
highlightBorderColor: string
|
|
165
|
-
highlightButtonBg: string
|
|
166
|
-
highlightButtonText: string
|
|
167
|
-
normalButtonBg: string
|
|
168
|
-
normalButtonText: string
|
|
169
|
-
disabledButtonBg: string
|
|
170
|
-
disabledButtonText: string
|
|
171
|
-
}
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
## Demo
|
|
175
|
-
|
|
176
|
-
A demo application is available in the `packages/demo` directory:
|
|
177
|
-
|
|
178
|
-
```bash
|
|
179
|
-
git clone https://github.com/wheelx-fi/wheelx-ui.git
|
|
180
|
-
cd wheelx-ui
|
|
181
|
-
git checkout feat/aidenxiao_20260530_widget
|
|
182
|
-
pnpm install
|
|
183
|
-
pnpm --filter @wheelx/widget-demo dev
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
The demo app opens at `http://localhost:3001` and provides:
|
|
187
|
-
- Visual theme configuration with live preview
|
|
188
|
-
- Chain/token configuration
|
|
189
|
-
- Copy-and-paste configuration code generation
|
|
190
|
-
|
|
191
|
-
## API Endpoint
|
|
192
|
-
|
|
193
|
-
This widget connects to the WheelX API at `https://api.wheelx.fi`. The API domain is not configurable.
|
|
194
|
-
|
|
195
|
-
## License
|
|
196
|
-
|
|
197
|
-
MIT
|
|
1
|
+
# @wheelx-widget/widget
|
|
2
|
+
|
|
3
|
+
An open-source, framework-agnostic React widget for cross-chain token swaps and bridges. Built-in wallet connection support (EVM + Solana), configurable theme system, and ready-to-use demo application.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🔄 **Cross-chain Swap & Bridge** — Full trading flow with quote polling, gas estimation, approval handling
|
|
8
|
+
- 👛 **Built-in Wallet Connection** — Dynamic SDK + Wagmi v2 supporting EVM (MetaMask, OKX, etc.) and Solana (Phantom)
|
|
9
|
+
- 🎨 **Configurable Theme** — 14 color tokens for custom skinning
|
|
10
|
+
- ⚛️ **Framework Agnostic** — Works with any React framework (Next.js, Vite, Create React App, etc.)
|
|
11
|
+
- 📦 **Tree-shakeable** — ESM + CJS builds with TypeScript declarations
|
|
12
|
+
- 🔌 **Configurable Default Tokens** — Set default from/to chains and tokens
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @wheelx-widget/widget @chakra-ui/react @emotion/react
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Note: `@chakra-ui/react` and `@emotion/react` are required peer dependencies.
|
|
21
|
+
|
|
22
|
+
## Quick Start
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
// main.tsx — wrap with ChakraProvider
|
|
26
|
+
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
|
|
27
|
+
import { createRoot } from 'react-dom/client'
|
|
28
|
+
import App from './App'
|
|
29
|
+
|
|
30
|
+
createRoot(document.getElementById('root')!).render(
|
|
31
|
+
<ChakraProvider value={defaultSystem}>
|
|
32
|
+
<App />
|
|
33
|
+
</ChakraProvider>
|
|
34
|
+
)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
// App.tsx
|
|
39
|
+
// Import the CSS for animations (required!)
|
|
40
|
+
import '@wheelx-widget/widget/dist/index.css'
|
|
41
|
+
import { WheelXProvider, WheelXWidget } from '@wheelx-widget/widget'
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<WheelXProvider>
|
|
46
|
+
<WheelXWidget />
|
|
47
|
+
</WheelXProvider>
|
|
48
|
+
)
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Configuration
|
|
53
|
+
|
|
54
|
+
### Theme Customization
|
|
55
|
+
|
|
56
|
+
Customize 14 visual tokens:
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<WheelXProvider config={{
|
|
60
|
+
theme: {
|
|
61
|
+
defaultTextColor: '#1A1D26',
|
|
62
|
+
highlightTextColor: '#007B9D',
|
|
63
|
+
weakTextColor: '#5D6270',
|
|
64
|
+
defaultBgColor: '#FFFFFF',
|
|
65
|
+
highlightBgColor: '#E6F7FB',
|
|
66
|
+
assistBgColor: '#F5F6F8',
|
|
67
|
+
defaultBorderColor: '#E2E4E8',
|
|
68
|
+
highlightBorderColor: '#007B9D',
|
|
69
|
+
highlightButtonBg: '#007B9D',
|
|
70
|
+
highlightButtonText: '#FFFFFF',
|
|
71
|
+
normalButtonBg: '#F5F6F8',
|
|
72
|
+
normalButtonText: '#1A1D26',
|
|
73
|
+
disabledButtonBg: '#E2E4E8',
|
|
74
|
+
disabledButtonText: '#A0A4AE'
|
|
75
|
+
}
|
|
76
|
+
}}>
|
|
77
|
+
<WheelXWidget />
|
|
78
|
+
</WheelXProvider>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Default Chain/Token Configuration
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
<WheelXProvider config={{
|
|
85
|
+
from: {
|
|
86
|
+
chains: [8453, 1], // Only show Base and Ethereum as from chains
|
|
87
|
+
defaultChainId: 8453 // Default to Base
|
|
88
|
+
},
|
|
89
|
+
to: {
|
|
90
|
+
chains: [1868], // Only show Soneium as to chain
|
|
91
|
+
defaultChainId: 1868 // Default to Soneium
|
|
92
|
+
}
|
|
93
|
+
}}>
|
|
94
|
+
<WheelXWidget />
|
|
95
|
+
</WheelXProvider>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Custom Dynamic Environment ID
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
<WheelXProvider config={{
|
|
102
|
+
dynamicEnvironmentId: 'your-dynamic-environment-id'
|
|
103
|
+
}}>
|
|
104
|
+
<WheelXWidget />
|
|
105
|
+
</WheelXProvider>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## API Reference
|
|
109
|
+
|
|
110
|
+
### `<WheelXProvider>`
|
|
111
|
+
|
|
112
|
+
The root provider component that sets up wallet connections, React Query, and theme.
|
|
113
|
+
|
|
114
|
+
| Prop | Type | Default | Description |
|
|
115
|
+
|------|------|---------|-------------|
|
|
116
|
+
| `config` | `WidgetConfig` | `{}` | Widget configuration |
|
|
117
|
+
| `children` | `React.ReactNode` | — | Child components |
|
|
118
|
+
|
|
119
|
+
### `<WheelXWidget>`
|
|
120
|
+
|
|
121
|
+
The main trading widget component.
|
|
122
|
+
|
|
123
|
+
| Prop | Type | Default | Description |
|
|
124
|
+
|------|------|---------|-------------|
|
|
125
|
+
| `config` | `WidgetConfig` | `{}` | Widget configuration |
|
|
126
|
+
|
|
127
|
+
### `WidgetConfig`
|
|
128
|
+
|
|
129
|
+
```typescript
|
|
130
|
+
interface WidgetConfig {
|
|
131
|
+
theme?: Partial<WidgetTheme>
|
|
132
|
+
from?: {
|
|
133
|
+
chains?: number[]
|
|
134
|
+
defaultChainId?: number
|
|
135
|
+
chainTokens?: Record<number, TokenConfig[]>
|
|
136
|
+
defaultToken?: { chainId: number; address: string }
|
|
137
|
+
}
|
|
138
|
+
to?: {
|
|
139
|
+
chains?: number[]
|
|
140
|
+
defaultChainId?: number
|
|
141
|
+
chainTokens?: Record<number, TokenConfig[]>
|
|
142
|
+
defaultToken?: { chainId: number; address: string }
|
|
143
|
+
}
|
|
144
|
+
routerCallback?: {
|
|
145
|
+
onPathnameChange?: (pathname: string) => void
|
|
146
|
+
onRouteLeave?: () => void
|
|
147
|
+
getCurrentPathname?: () => string
|
|
148
|
+
}
|
|
149
|
+
dynamicEnvironmentId?: string
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### `WidgetTheme`
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
interface WidgetTheme {
|
|
157
|
+
defaultTextColor: string
|
|
158
|
+
highlightTextColor: string
|
|
159
|
+
weakTextColor: string
|
|
160
|
+
defaultBgColor: string
|
|
161
|
+
highlightBgColor: string
|
|
162
|
+
assistBgColor: string
|
|
163
|
+
defaultBorderColor: string
|
|
164
|
+
highlightBorderColor: string
|
|
165
|
+
highlightButtonBg: string
|
|
166
|
+
highlightButtonText: string
|
|
167
|
+
normalButtonBg: string
|
|
168
|
+
normalButtonText: string
|
|
169
|
+
disabledButtonBg: string
|
|
170
|
+
disabledButtonText: string
|
|
171
|
+
}
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
## Demo
|
|
175
|
+
|
|
176
|
+
A demo application is available in the `packages/demo` directory:
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
git clone https://github.com/wheelx-fi/wheelx-ui.git
|
|
180
|
+
cd wheelx-ui
|
|
181
|
+
git checkout feat/aidenxiao_20260530_widget
|
|
182
|
+
pnpm install
|
|
183
|
+
pnpm --filter @wheelx/widget-demo dev
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
The demo app opens at `http://localhost:3001` and provides:
|
|
187
|
+
- Visual theme configuration with live preview
|
|
188
|
+
- Chain/token configuration
|
|
189
|
+
- Copy-and-paste configuration code generation
|
|
190
|
+
|
|
191
|
+
## API Endpoint
|
|
192
|
+
|
|
193
|
+
This widget connects to the WheelX API at `https://api.wheelx.fi`. The API domain is not configurable.
|
|
194
|
+
|
|
195
|
+
## License
|
|
196
|
+
|
|
197
|
+
MIT
|
package/dist/index.css
CHANGED
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/animations.css"],"sourcesContent":["/* WheelX Widget - Animation styles synced from main site */\r\n/* Image URLs point to https://wheelx.fi for external widget usage */\r\n\r\n.animation-wheel {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/wheel-sprites.png');\r\n background-repeat: no-repeat;\r\n animation-name: keyframes-wheel;\r\n animation-duration: 5s;\r\n animation-delay: 0s;\r\n animation-iteration-count: infinite;\r\n animation-fill-mode: forwards;\r\n animation-timing-function: steps(1);\r\n}\r\n\r\n.animation-success {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/success-sprites.png');\r\n background-repeat: no-repeat;\r\n animation-name: keyframes-success;\r\n animation-duration: 2s;\r\n animation-delay: 0s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-timing-function: steps(1);\r\n}\r\n\r\n.animation-loading {\r\n animation-duration: 1s;\r\n animation-iteration-count: 1;\r\n animation-timing-function: ease-in-out;\r\n transform-origin: center;\r\n}\r\n\r\n.failure {\r\n width: 280px;\r\n height: 280px;\r\n background: url('https://wheelx.fi/images/error.svg') no-repeat center center/126px 126px;\r\n}\r\n\r\n/* Gradient text utilities */\r\n.text_gradient_1 {\r\n background: linear-gradient(90deg, #0F62FE 0%, #A56EFF 31.73%, #EE5396 67.31%, #F1751B 100%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n display: inline-block;\r\n}\r\n\r\n.text_gradient_2 {\r\n background: linear-gradient(90deg, #B125EF 0%, #5257F7 100%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n display: inline-block;\r\n}\r\n\r\n/* Pulse loading animation */\r\n.pulse {\r\n animation: pulse 1.5s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.18);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n/* Wheel spinning animation (32 frames sprite sheet) */\r\n@keyframes keyframes-wheel {\r\n 0% {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/wheel-sprites.png');\r\n }\r\n 3.13% {\r\n background-position: -280px 0px;\r\n }\r\n 6.25% {\r\n background-position: -560px 0px;\r\n }\r\n 9.38% {\r\n background-position: -840px 0px;\r\n }\r\n 12.50% {\r\n background-position: -1120px 0px;\r\n }\r\n 15.63% {\r\n background-position: -1400px 0px;\r\n }\r\n 18.75% {\r\n background-position: -1680px 0px;\r\n }\r\n 21.88% {\r\n background-position: -1960px 0px;\r\n }\r\n 25.00% {\r\n background-position: -2240px 0px;\r\n }\r\n 28.13% {\r\n background-position: -2520px 0px;\r\n }\r\n 31.25% {\r\n background-position: -2800px 0px;\r\n }\r\n 34.38% {\r\n background-position: -3080px 0px;\r\n }\r\n 37.50% {\r\n background-position: -3360px 0px;\r\n }\r\n 40.63% {\r\n background-position: -3640px 0px;\r\n }\r\n 43.75% {\r\n background-position: -3920px 0px;\r\n }\r\n 46.88% {\r\n background-position: -4200px 0px;\r\n }\r\n 50.00% {\r\n background-position: -4480px 0px;\r\n }\r\n 53.13% {\r\n background-position: -4760px 0px;\r\n }\r\n 56.25% {\r\n background-position: -5040px 0px;\r\n }\r\n 59.38% {\r\n background-position: -5320px 0px;\r\n }\r\n 62.50% {\r\n background-position: -5600px 0px;\r\n }\r\n 65.63% {\r\n background-position: -5880px 0px;\r\n }\r\n 68.75% {\r\n background-position: -6160px 0px;\r\n }\r\n 71.88% {\r\n background-position: -6440px 0px;\r\n }\r\n 75.00% {\r\n background-position: -6720px 0px;\r\n }\r\n 78.13% {\r\n background-position: -7000px 0px;\r\n }\r\n 81.25% {\r\n background-position: -7280px 0px;\r\n }\r\n 84.38% {\r\n background-position: -7560px 0px;\r\n }\r\n 87.50% {\r\n background-position: -7840px 0px;\r\n }\r\n 90.63% {\r\n background-position: -8120px 0px;\r\n }\r\n 93.75% {\r\n background-position: -8400px 0px;\r\n }\r\n 96.88%,\r\n 100% {\r\n background-position: -8680px 0px;\r\n }\r\n}\r\n\r\n/* Success animation (26 frames sprite sheet) */\r\n@keyframes keyframes-success {\r\n 0% {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/success-sprites.png');\r\n }\r\n 3.85% {\r\n background-position: -280px 0px;\r\n }\r\n 7.69% {\r\n background-position: -560px 0px;\r\n }\r\n 11.54% {\r\n background-position: -840px 0px;\r\n }\r\n 15.38% {\r\n background-position: -1120px 0px;\r\n }\r\n 19.23% {\r\n background-position: -1400px 0px;\r\n }\r\n 23.08% {\r\n background-position: -1680px 0px;\r\n }\r\n 26.92% {\r\n background-position: -1960px 0px;\r\n }\r\n 30.77% {\r\n background-position: -2240px 0px;\r\n }\r\n 34.62% {\r\n background-position: -2520px 0px;\r\n }\r\n 38.46% {\r\n background-position: -2800px 0px;\r\n }\r\n 42.31% {\r\n background-position: -3080px 0px;\r\n }\r\n 46.15% {\r\n background-position: -3360px 0px;\r\n }\r\n 50.00% {\r\n background-position: -3640px 0px;\r\n }\r\n 53.85% {\r\n background-position: -3920px 0px;\r\n }\r\n 57.69% {\r\n background-position: -4200px 0px;\r\n }\r\n 61.54% {\r\n background-position: -4480px 0px;\r\n }\r\n 65.38% {\r\n background-position: -4760px 0px;\r\n }\r\n 69.23% {\r\n background-position: -5040px 0px;\r\n }\r\n 73.08% {\r\n background-position: -5320px 0px;\r\n }\r\n 76.92% {\r\n background-position: -5600px 0px;\r\n }\r\n 80.77% {\r\n background-position: -5880px 0px;\r\n }\r\n 84.62% {\r\n background-position: -6160px 0px;\r\n }\r\n 88.46% {\r\n background-position: -6440px 0px;\r\n }\r\n 92.31% {\r\n background-position: -6720px 0px;\r\n }\r\n 100% {\r\n background-position: -7000px 0px;\r\n }\r\n}\r\n\r\n/* Refresh icon rotation animation */\r\n@keyframes keyframes-loading {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(-360deg);\r\n }\r\n}\r\n\r\n/* Refresh icon quote polling progress arc animation */\r\n@keyframes svg_loader {\r\n 0% {\r\n stroke-dasharray: 0, 101;\r\n }\r\n 100% {\r\n stroke-dasharray: 65, 101;\r\n }\r\n}
|
|
1
|
+
{"version":3,"sources":["../src/animations.css"],"sourcesContent":["/* WheelX Widget - Animation styles synced from main site */\r\n/* Image URLs point to https://wheelx.fi for external widget usage */\r\n\r\na:hover {\r\n text-decoration: none;\r\n}\r\n\r\n.animation-wheel {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/wheel-sprites.png');\r\n background-repeat: no-repeat;\r\n animation-name: keyframes-wheel;\r\n animation-duration: 5s;\r\n animation-delay: 0s;\r\n animation-iteration-count: infinite;\r\n animation-fill-mode: forwards;\r\n animation-timing-function: steps(1);\r\n}\r\n\r\n.animation-success {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/success-sprites.png');\r\n background-repeat: no-repeat;\r\n animation-name: keyframes-success;\r\n animation-duration: 2s;\r\n animation-delay: 0s;\r\n animation-iteration-count: 1;\r\n animation-fill-mode: forwards;\r\n animation-timing-function: steps(1);\r\n}\r\n\r\n.animation-loading {\r\n animation-duration: 1s;\r\n animation-iteration-count: 1;\r\n animation-timing-function: ease-in-out;\r\n transform-origin: center;\r\n}\r\n\r\n.failure {\r\n width: 280px;\r\n height: 280px;\r\n background: url('https://wheelx.fi/images/error.svg') no-repeat center center/126px 126px;\r\n}\r\n\r\n/* Gradient text utilities */\r\n.text_gradient_1 {\r\n background: linear-gradient(90deg, #0F62FE 0%, #A56EFF 31.73%, #EE5396 67.31%, #F1751B 100%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n display: inline-block;\r\n}\r\n\r\n.text_gradient_2 {\r\n background: linear-gradient(90deg, #B125EF 0%, #5257F7 100%);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n color: transparent;\r\n display: inline-block;\r\n}\r\n\r\n/* Pulse loading animation */\r\n.pulse {\r\n animation: pulse 1.5s infinite;\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n\r\n 50% {\r\n transform: scale(1.18);\r\n }\r\n\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n/* Wheel spinning animation (32 frames sprite sheet) */\r\n@keyframes keyframes-wheel {\r\n 0% {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/wheel-sprites.png');\r\n }\r\n\r\n 3.13% {\r\n background-position: -280px 0px;\r\n }\r\n\r\n 6.25% {\r\n background-position: -560px 0px;\r\n }\r\n\r\n 9.38% {\r\n background-position: -840px 0px;\r\n }\r\n\r\n 12.50% {\r\n background-position: -1120px 0px;\r\n }\r\n\r\n 15.63% {\r\n background-position: -1400px 0px;\r\n }\r\n\r\n 18.75% {\r\n background-position: -1680px 0px;\r\n }\r\n\r\n 21.88% {\r\n background-position: -1960px 0px;\r\n }\r\n\r\n 25.00% {\r\n background-position: -2240px 0px;\r\n }\r\n\r\n 28.13% {\r\n background-position: -2520px 0px;\r\n }\r\n\r\n 31.25% {\r\n background-position: -2800px 0px;\r\n }\r\n\r\n 34.38% {\r\n background-position: -3080px 0px;\r\n }\r\n\r\n 37.50% {\r\n background-position: -3360px 0px;\r\n }\r\n\r\n 40.63% {\r\n background-position: -3640px 0px;\r\n }\r\n\r\n 43.75% {\r\n background-position: -3920px 0px;\r\n }\r\n\r\n 46.88% {\r\n background-position: -4200px 0px;\r\n }\r\n\r\n 50.00% {\r\n background-position: -4480px 0px;\r\n }\r\n\r\n 53.13% {\r\n background-position: -4760px 0px;\r\n }\r\n\r\n 56.25% {\r\n background-position: -5040px 0px;\r\n }\r\n\r\n 59.38% {\r\n background-position: -5320px 0px;\r\n }\r\n\r\n 62.50% {\r\n background-position: -5600px 0px;\r\n }\r\n\r\n 65.63% {\r\n background-position: -5880px 0px;\r\n }\r\n\r\n 68.75% {\r\n background-position: -6160px 0px;\r\n }\r\n\r\n 71.88% {\r\n background-position: -6440px 0px;\r\n }\r\n\r\n 75.00% {\r\n background-position: -6720px 0px;\r\n }\r\n\r\n 78.13% {\r\n background-position: -7000px 0px;\r\n }\r\n\r\n 81.25% {\r\n background-position: -7280px 0px;\r\n }\r\n\r\n 84.38% {\r\n background-position: -7560px 0px;\r\n }\r\n\r\n 87.50% {\r\n background-position: -7840px 0px;\r\n }\r\n\r\n 90.63% {\r\n background-position: -8120px 0px;\r\n }\r\n\r\n 93.75% {\r\n background-position: -8400px 0px;\r\n }\r\n\r\n 96.88%,\r\n 100% {\r\n background-position: -8680px 0px;\r\n }\r\n}\r\n\r\n/* Success animation (26 frames sprite sheet) */\r\n@keyframes keyframes-success {\r\n 0% {\r\n width: 280px;\r\n height: 280px;\r\n background-image: url('https://wheelx.fi/images/success-sprites.png');\r\n }\r\n\r\n 3.85% {\r\n background-position: -280px 0px;\r\n }\r\n\r\n 7.69% {\r\n background-position: -560px 0px;\r\n }\r\n\r\n 11.54% {\r\n background-position: -840px 0px;\r\n }\r\n\r\n 15.38% {\r\n background-position: -1120px 0px;\r\n }\r\n\r\n 19.23% {\r\n background-position: -1400px 0px;\r\n }\r\n\r\n 23.08% {\r\n background-position: -1680px 0px;\r\n }\r\n\r\n 26.92% {\r\n background-position: -1960px 0px;\r\n }\r\n\r\n 30.77% {\r\n background-position: -2240px 0px;\r\n }\r\n\r\n 34.62% {\r\n background-position: -2520px 0px;\r\n }\r\n\r\n 38.46% {\r\n background-position: -2800px 0px;\r\n }\r\n\r\n 42.31% {\r\n background-position: -3080px 0px;\r\n }\r\n\r\n 46.15% {\r\n background-position: -3360px 0px;\r\n }\r\n\r\n 50.00% {\r\n background-position: -3640px 0px;\r\n }\r\n\r\n 53.85% {\r\n background-position: -3920px 0px;\r\n }\r\n\r\n 57.69% {\r\n background-position: -4200px 0px;\r\n }\r\n\r\n 61.54% {\r\n background-position: -4480px 0px;\r\n }\r\n\r\n 65.38% {\r\n background-position: -4760px 0px;\r\n }\r\n\r\n 69.23% {\r\n background-position: -5040px 0px;\r\n }\r\n\r\n 73.08% {\r\n background-position: -5320px 0px;\r\n }\r\n\r\n 76.92% {\r\n background-position: -5600px 0px;\r\n }\r\n\r\n 80.77% {\r\n background-position: -5880px 0px;\r\n }\r\n\r\n 84.62% {\r\n background-position: -6160px 0px;\r\n }\r\n\r\n 88.46% {\r\n background-position: -6440px 0px;\r\n }\r\n\r\n 92.31% {\r\n background-position: -6720px 0px;\r\n }\r\n\r\n 100% {\r\n background-position: -7000px 0px;\r\n }\r\n}\r\n\r\n/* Refresh icon rotation animation */\r\n@keyframes keyframes-loading {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(-360deg);\r\n }\r\n}\r\n\r\n/* Refresh icon quote polling progress arc animation */\r\n@keyframes svg_loader {\r\n 0% {\r\n stroke-dasharray: 0, 101;\r\n }\r\n\r\n 100% {\r\n stroke-dasharray: 65, 101;\r\n }\r\n}"],"mappings":";AAGA,CAAC;AACC,mBAAiB;AACnB;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,oBAAkB;AAClB,qBAAmB;AACnB,kBAAgB;AAChB,sBAAoB;AACpB,mBAAiB;AACjB,6BAA2B;AAC3B,uBAAqB;AACrB,6BAA2B,MAAM;AACnC;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,oBAAkB;AAClB,qBAAmB;AACnB,kBAAgB;AAChB,sBAAoB;AACpB,mBAAiB;AACjB,6BAA2B;AAC3B,uBAAqB;AACrB,6BAA2B,MAAM;AACnC;AAEA,CAAC;AACC,sBAAoB;AACpB,6BAA2B;AAC3B,6BAA2B;AAC3B,oBAAkB;AACpB;AAEA,CAAC;AACC,SAAO;AACP,UAAQ;AACR,cAAY,wCAA0C,UAAU,OAAO,MAAM,CAAC,MAAM;AACtF;AAGA,CAAC;AACC;AAAA,IAAY;AAAA,MAAgB,KAAhB;AAAA,MAAuB,QAAQ,EAA/B;AAAA,MAAmC,QAAQ,MAA3C;AAAA,MAAmD,QAAQ,MAA3D;AAAA,MAAmE,QAAQ;AACvF,mBAAiB;AACjB,2BAAyB;AACzB,2BAAyB;AACzB,SAAO;AACP,WAAS;AACX;AAEA,CAAC;AACC;AAAA,IAAY;AAAA,MAAgB,KAAhB;AAAA,MAAuB,QAAQ,EAA/B;AAAA,MAAmC,QAAQ;AACvD,mBAAiB;AACjB,2BAAyB;AACzB,2BAAyB;AACzB,SAAO;AACP,WAAS;AACX;AAGA,CAAC;AACC,aAAW,MAAM,KAAK;AACxB;AAEA,WAJC;AAKC;AACE,eAAW,MAAM;AACnB;AAEA;AACE,eAAW,MAAM;AACnB;AAEA;AACE,eAAW,MAAM;AACnB;AACF;AAGA,WAzEkB;AA0EhB;AACE,WAAO;AACP,YAAQ;AACR,sBAAkB;AACpB;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AAEE,yBAAqB,QAAQ;AAC/B;AACF;AAGA,WAlMkB;AAmMhB;AACE,WAAO;AACP,YAAQ;AACR,sBAAkB;AACpB;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,OAAO;AAC9B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AAEA;AACE,yBAAqB,QAAQ;AAC/B;AACF;AAGA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AAEA;AACE,eAAW,OAAO;AACpB;AACF;AAGA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACvB;AAEA;AACE,sBAAkB,EAAE,EAAE;AACxB;AACF;","names":[]}
|