@rift-finance/react 0.1.0 → 0.1.2
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 +139 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# @rift-finance/react
|
|
2
|
+
|
|
3
|
+
React bindings for the Rift sign-in widget. Drop in `<RiftProvider>`, render `<RiftAuth>`, and read auth state with `useRift()`. Same hosted modal as the vanilla embed, native React DX.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @rift-finance/react
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Quick start
|
|
10
|
+
|
|
11
|
+
```tsx
|
|
12
|
+
// App.tsx
|
|
13
|
+
import { RiftProvider, RiftAuth } from "@rift-finance/react";
|
|
14
|
+
|
|
15
|
+
export default function App() {
|
|
16
|
+
return (
|
|
17
|
+
<RiftProvider apiKey={import.meta.env.VITE_RIFT_API_KEY}>
|
|
18
|
+
<RiftAuth onSuccess={(user) => console.log("signed in:", user)} />
|
|
19
|
+
<YourApp />
|
|
20
|
+
</RiftProvider>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Anywhere inside the provider:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { useRift } from "@rift-finance/react";
|
|
29
|
+
|
|
30
|
+
export function Nav() {
|
|
31
|
+
const { user, isAuthenticated, open, signOut } = useRift();
|
|
32
|
+
|
|
33
|
+
return isAuthenticated ? (
|
|
34
|
+
<button onClick={signOut}>Sign out ({user!.address.slice(-4)})</button>
|
|
35
|
+
) : (
|
|
36
|
+
<button onClick={() => open({ mode: "signup" })}>Get started</button>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
That's it. Users get a Rift wallet provisioned on first sign-in (Google, email, or phone), and you get an access token to call Rift's API on their behalf.
|
|
42
|
+
|
|
43
|
+
## Making authenticated calls
|
|
44
|
+
|
|
45
|
+
Use `getAccessToken()` rather than reading `user.accessToken` directly — it transparently refreshes via a hidden iframe if the current token is near expiry.
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
const { getAccessToken } = useRift();
|
|
49
|
+
|
|
50
|
+
async function send() {
|
|
51
|
+
const token = await getAccessToken();
|
|
52
|
+
await fetch("https://developers.riftfi.xyz/transactions/send", {
|
|
53
|
+
method: "POST",
|
|
54
|
+
headers: {
|
|
55
|
+
"X-API-Key": import.meta.env.VITE_RIFT_API_KEY,
|
|
56
|
+
"Authorization": `Bearer ${token}`,
|
|
57
|
+
"Content-Type": "application/json",
|
|
58
|
+
},
|
|
59
|
+
body: JSON.stringify({
|
|
60
|
+
to: "0xRecipient...",
|
|
61
|
+
value: "10",
|
|
62
|
+
token: "USDC",
|
|
63
|
+
chain: "polygon",
|
|
64
|
+
}),
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
### `<RiftProvider>`
|
|
72
|
+
|
|
73
|
+
| Prop | Type | Default | Description |
|
|
74
|
+
|---|---|---|---|
|
|
75
|
+
| `apiKey` | `string` | _required_ | Your project's API key (`sk_…`) from the Rift dashboard. |
|
|
76
|
+
| `widgetUrl` | `string` | `https://widget.riftfi.xyz` | Override only when self-hosting the widget. |
|
|
77
|
+
| `autoOpen` | `boolean` | `false` | Open the modal on mount if the user isn't signed in. |
|
|
78
|
+
| `persist` | `boolean` | `true` | Remember the user across page reloads. |
|
|
79
|
+
|
|
80
|
+
### `<RiftAuth />`
|
|
81
|
+
|
|
82
|
+
| Prop | Type | Description |
|
|
83
|
+
|---|---|---|
|
|
84
|
+
| `onSuccess` | `(user) => void` | Fires when sign-in completes. |
|
|
85
|
+
| `onError` | `(message) => void` | Fires on auth failure. |
|
|
86
|
+
| `onClose` | `() => void` | Fires when the modal closes. |
|
|
87
|
+
|
|
88
|
+
Mount this once near the root. It renders nothing until `useRift().open()` is called.
|
|
89
|
+
|
|
90
|
+
### `useRift()`
|
|
91
|
+
|
|
92
|
+
| Field | Type | Description |
|
|
93
|
+
|---|---|---|
|
|
94
|
+
| `user` | `RiftUser \| null` | The signed-in user, or null. |
|
|
95
|
+
| `isAuthenticated` | `boolean` | Convenience flag. |
|
|
96
|
+
| `isOpen` | `boolean` | Whether the modal is currently visible. |
|
|
97
|
+
| `open(opts?)` | `(opts?: { mode?: "signin" \| "signup" }) => void` | Open the modal. |
|
|
98
|
+
| `close()` | `() => void` | Close the modal. |
|
|
99
|
+
| `signOut()` | `() => Promise<void>` | Revokes the server-side session + clears local state. |
|
|
100
|
+
| `getAccessToken()` | `() => Promise<string>` | Returns a valid JWT, refreshing if near expiry. |
|
|
101
|
+
| `error` | `string \| null` | Last sign-in error from the modal. |
|
|
102
|
+
|
|
103
|
+
### `RiftUser` shape
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
interface RiftUser {
|
|
107
|
+
user: string; // Rift user id (uuid)
|
|
108
|
+
address: string; // EVM smart account
|
|
109
|
+
btcAddress?: string; // Bitcoin wallet
|
|
110
|
+
accessToken: string; // JWT for API calls
|
|
111
|
+
expiresAt?: string; // ISO timestamp
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Configuring Google sign-in
|
|
116
|
+
|
|
117
|
+
1. Create an OAuth 2.0 Client ID in Google Cloud Console for your domain.
|
|
118
|
+
2. Paste it into your project's **Auth** tab in the Rift dashboard.
|
|
119
|
+
3. The widget refetches its config on next load — the Google button shows up automatically.
|
|
120
|
+
|
|
121
|
+
## Self-hosting the widget
|
|
122
|
+
|
|
123
|
+
The default widget URL is `https://widget.riftfi.xyz`. If you need to self-host (compliance, white-labelling), deploy the [widget](https://github.com/Rift-FI/rift/tree/master/widget) source and pass the URL to the provider:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
<RiftProvider apiKey="sk_..." widgetUrl="https://widget.yourdomain.com">
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Full docs
|
|
130
|
+
|
|
131
|
+
Integration walkthrough, OpenAPI spec, transaction signing flows: **https://service.riftfi.xyz/docs**
|
|
132
|
+
|
|
133
|
+
- Live API explorer: https://developers.riftfi.xyz
|
|
134
|
+
- OpenAPI spec: https://developers.riftfi.xyz/docs.json
|
|
135
|
+
- Source: https://github.com/Rift-FI/rift-react
|
|
136
|
+
|
|
137
|
+
## License
|
|
138
|
+
|
|
139
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {}
|
package/package.json
CHANGED