@leather.io/features 1.1.1 → 1.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 CHANGED
@@ -1,89 +1,3 @@
1
1
  # Features
2
2
 
3
3
  This package contains Leather Wallet's features library for our web + React Native applications.
4
-
5
- ## Architecture
6
-
7
- This package colocates Web and React Native code, such that commonalities such as shared logic and types are shared. **The naming convention must be followed.**
8
-
9
- - `*.web.ts` — bundled only for Web
10
- - `*.native.ts` — bundled only for React Native
11
- - `*.shared.ts` — bundled for all platforms
12
-
13
- ## Web Setup
14
-
15
- Our web apps use [panda css](https://panda-css.com/). To setup in your application you need to:
16
-
17
- - Install `@pandacss/dev`
18
- - Setup panda css and configure it to acknowledge the library code
19
- - Configure Webpack to load the files correctly
20
- - Import the library styles from `@leather.io/ui/styles`
21
-
22
- ### Panda configuration
23
-
24
- Specify the library as part of the `panda.config` `include`:
25
-
26
- ```js
27
- include: [
28
- './node_modules/@leather.io/ui/dist-web/**/*.{js,jsx,ts,tsx}',
29
- './src/**/*.{js,jsx,ts,tsx}',
30
- ],
31
- ```
32
-
33
- ### Webpack configuration
34
-
35
- - Alias `react` and `react-dom` to avoid react errors.
36
-
37
- - Configure your `module` to handle `jsx` files
38
-
39
- ```js
40
- export const config = {
41
- ...
42
- module: {
43
- resolve: {
44
- ...
45
- alias: {
46
- 'leather-styles': path.resolve('leather-styles'),
47
- 'react': path.resolve('./node_modules/react'),
48
- 'react-dom': path.resolve('./node_modules/react-dom')
49
- },
50
- ...
51
- rules: [
52
- ...
53
- {
54
- test: /\.(js)$/,
55
- include: [/node_modules\/@leather.io\/ui/],
56
- loader: 'esbuild-loader',
57
- options: { tsconfig: './tsconfig.json', loader: {'jsx'},target: 'es2020' },
58
- },
59
-
60
- ```
61
-
62
- ## Security: Dynamic Content Sanitization
63
-
64
- All dynamic HTML content rendered in the web app (such as FAQs, explainers, and CMS-driven posts) is sanitized using [DOMPurify](https://github.com/cure53/DOMPurify) via a shared utility (`sanitizeContent`).
65
-
66
- - **Browser:** Uses DOMPurify to remove unsafe HTML and prevent XSS.
67
- - **SSR:** Falls back to escaping HTML tags to prevent injection.
68
-
69
- This is enforced in all UI components that render user- or CMS-driven HTML, including FAQ, explainer, and post-driven UI elements.
70
-
71
- A shared utility, `sanitizeContent`, is used throughout the codebase to sanitize any post content before rendering. Example usage:
72
-
73
- ```ts
74
- import { sanitizeContent } from '@leather.io/ui/utils/sanitize-content';
75
-
76
- const safeHtml = sanitizeContent(post.Summary);
77
- ```
78
-
79
- This is applied in all FAQ, explainer, hover card, and heading components that render post content.
80
-
81
- ## License
82
-
83
- [MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)
84
-
85
- ---
86
-
87
- [⬅ Back](../../README.md)
88
-
89
- ---
package/package.json CHANGED
@@ -1,52 +1,39 @@
1
1
  {
2
2
  "name": "@leather.io/features",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "exports": {
7
- ".": "./dist-web/exports.web.js",
8
- "./native": "./dist-native/exports.native.js"
7
+ ".": "./dist/index.js"
9
8
  },
10
9
  "dependencies": {
11
10
  "@noble/hashes": "1.5.0",
12
11
  "react": "19.0.0",
13
- "react-dom": "19.0.0",
14
- "react-native": "0.79.2",
15
- "react-native-safe-area-context": "5.4.0",
16
- "react-native-webview": "13.14.1",
17
12
  "@leather.io/prettier-config": "0.9.0",
18
- "@leather.io/tokens": "0.24.1"
13
+ "@leather.io/tokens": "0.25.0"
19
14
  },
20
15
  "devDependencies": {
21
- "@babel/core": "7.27.1",
22
- "@babel/runtime": "7.26.0",
23
- "@testing-library/react": "16.3.0",
24
16
  "@types/react": "19.0.12",
25
- "@types/react-dom": "19.0.4",
26
- "babel-preset-expo": "13.0.0",
27
- "concurrently": "8.2.2",
28
- "happy-dom": "18.0.1",
29
- "tslib": "2.6.2",
30
- "tsup": "8.4.0",
31
- "typescript": "5.8.3",
32
- "vitest": "2.1.9"
17
+ "prettier": "3.5.1",
18
+ "tsdown": "0.16.5",
19
+ "typescript": "5.9.3",
20
+ "vitest": "2.1.9",
21
+ "@leather.io/test-config": "0.1.1"
33
22
  },
34
23
  "files": [
35
24
  "dist-web",
36
25
  "dist-native"
37
26
  ],
27
+ "prettier": "@leather.io/prettier-config",
38
28
  "publishConfig": {
39
29
  "access": "public"
40
30
  },
41
31
  "scripts": {
42
- "build": " pnpm build:native && pnpm build:web",
43
- "build:native": "tsup --config tsup.config.native.ts",
44
- "build:native:watch": "concurrently \"pnpm build:native --watch -- --preserveWatchOutput\"",
45
- "build:watch": "concurrently \"pnpm build:native --watch -- --preserveWatchOutput\" \"pnpm build:web --watch\" ",
46
- "build:web": "tsup --config tsup.config.web.ts",
47
- "format": "prettier . --write \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
48
- "format:check": "prettier . --check \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
32
+ "build": "tsdown",
33
+ "build:watch": "tsdown --watch",
34
+ "format": "prettier . --write --ignore-path ../../.prettierignore",
35
+ "format:check": "prettier . --check --ignore-path ../../.prettierignore",
49
36
  "test:unit": "vitest run",
50
- "typecheck": "tsc --noEmit --project ./tsconfig.json"
37
+ "typecheck": "tsc --noEmit"
51
38
  }
52
39
  }
@@ -1,59 +0,0 @@
1
- import type { WebViewProps } from 'react-native-webview';
2
-
3
- declare interface BaseOnramperProps {
4
- widgetHost: string;
5
- theme: 'light' | 'dark';
6
- btcAddress: string | undefined;
7
- stxAddress: string | undefined;
8
- apiKey: string;
9
- signingSecret: string;
10
- mode: OnramperMode;
11
- successRedirectUrl: string | undefined;
12
- failureRedirectUrl: string | undefined;
13
- }
14
- export { BaseOnramperProps }
15
- export { BaseOnramperProps as BaseOnramperProps_alias_1 }
16
- export { BaseOnramperProps as BaseOnramperProps_alias_2 }
17
-
18
- export declare function formatColorHexForParams(colorHex: string): string;
19
-
20
- export declare function generateSignature(data: string, signingSecret: string): string;
21
-
22
- declare interface GetIframeProps {
23
- theme: 'dark' | 'light';
24
- btcAddress: string | undefined;
25
- stxAddress: string | undefined;
26
- apiKey: string;
27
- signingSecret: string;
28
- mode: OnramperMode;
29
- successRedirectUrl: string | undefined;
30
- failureRedirectUrl: string | undefined;
31
- redirectAtCheckout?: boolean;
32
- }
33
-
34
- declare function getOnramperIframeParams({ theme, btcAddress, stxAddress, apiKey, signingSecret, mode, successRedirectUrl, failureRedirectUrl, redirectAtCheckout, }: GetIframeProps): URLSearchParams;
35
- export { getOnramperIframeParams }
36
- export { getOnramperIframeParams as getOnramperIframeParams_alias_1 }
37
- export { getOnramperIframeParams as getOnramperIframeParams_alias_2 }
38
-
39
- declare interface MatchAddresses<T> {
40
- btcAddress: string | undefined;
41
- stxAddress: string | undefined;
42
- resultMap: {
43
- bothAvailable: T;
44
- onlyBtc: T;
45
- onlyStx: T;
46
- none: T;
47
- };
48
- }
49
-
50
- export declare function matchAddresses<T>({ btcAddress, stxAddress, resultMap }: MatchAddresses<T>): T;
51
-
52
- declare type OnramperMode = 'buy' | 'sell' | 'swap';
53
- export { OnramperMode }
54
- export { OnramperMode as OnramperMode_alias_1 }
55
- export { OnramperMode as OnramperMode_alias_2 }
56
-
57
- export declare type OnramperProps = BaseOnramperProps & WebViewProps;
58
-
59
- export { }
@@ -1 +0,0 @@
1
- import'react';
File without changes
File without changes
@@ -1 +0,0 @@
1
- import {hmac}from'@noble/hashes/hmac';import {sha256}from'@noble/hashes/sha256';import {bytesToHex}from'@noble/hashes/utils';function m(n,t){let e=new TextEncoder,r=e.encode(n),o=e.encode(t),s=hmac(sha256,o,r);return bytesToHex(s)}function T(n){return n.replace("#","")}function l({btcAddress:n,stxAddress:t,resultMap:e}){return n&&t?e.bothAvailable:n?e.onlyBtc:t?e.onlyStx:e.none}export{m as a,T as b,l as c};
@@ -1 +0,0 @@
1
- import {c,a,b}from'./chunk-JUQ66SU3.js';import {colorThemes}from'@leather.io/tokens';function _({theme:a$1,btcAddress:e,stxAddress:o,apiKey:k,signingSecret:f,mode:y,successRedirectUrl:l,failureRedirectUrl:s,redirectAtCheckout:g=false}){let i={};l&&(i.successRedirectUrl=l),s&&(i.failureRedirectUrl=s);let c$1=c({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:`btc:${e},stx_stacks:${o}`,onlyBtc:`btc:${e}`,onlyStx:`stx_stacks:${o}`,none:""}}),d=c({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:"stacks,bitcoin",onlyBtc:"bitcoin",onlyStx:"stacks",none:""}}),u=c({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:"stx_stacks,btc",onlyBtc:"btc",onlyStx:"stx_stacks",none:""}}),b$1=`wallets=${c$1}`,t=a$1==="dark"?colorThemes.dark:colorThemes.base;return new URLSearchParams({darkMode:a$1==="dark"?"true":"false",themeName:a$1,primaryColor:b(t["ink.action-primary-default"]),secondaryColor:b(t["ink.component-background-default"]),primaryTextColor:b(t["ink.text-primary"]),secondaryTextColor:b(t["ink.text-subdued"]),containerColor:b(t["ink.background-primary"]),cardColor:b(t["ink.component-background-hover"]),primaryBtnTextColor:b(t["ink.background-primary"]),borderRadius:"0.25",widgetBorderRadius:"0.1",apiKey:k,signature:a(b$1,f),mode:y,onlyCryptoNetworks:d,sell_onlyCryptoNetworks:d,onlyCryptos:u,sell_onlyCryptos:u,defaultFiat:"USD",sell_defaultFiat:"USD",defaultAmount:"25",sell_defaultCrypto:"BTC",sell_defaultAmount:"0.0005",redirectAtCheckout:g.toString(),hideTopBar:"true",wallets:c$1,...i})}export{_ as a};
@@ -1,4 +0,0 @@
1
- export { OnramperProps } from './_tsup-dts-rollup.js';
2
- export { OnramperMode } from './_tsup-dts-rollup.js';
3
- export { BaseOnramperProps } from './_tsup-dts-rollup.js';
4
- export { getOnramperIframeParams } from './_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- import'./chunk-563YKZ5T.js';export{a as getOnramperIframeParams}from'./chunk-U4PLFPNJ.js';import'./chunk-BCDTEWZG.js';import'./chunk-JUQ66SU3.js';import'./chunk-3TSVHFY4.js';
@@ -1,3 +0,0 @@
1
- export { OnramperMode_alias_1 as OnramperMode } from '../_tsup-dts-rollup.js';
2
- export { BaseOnramperProps_alias_1 as BaseOnramperProps } from '../_tsup-dts-rollup.js';
3
- export { getOnramperIframeParams_alias_1 as getOnramperIframeParams } from '../_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- import'../chunk-563YKZ5T.js';export{a as getOnramperIframeParams}from'../chunk-U4PLFPNJ.js';import'../chunk-BCDTEWZG.js';import'../chunk-JUQ66SU3.js';import'../chunk-3TSVHFY4.js';
@@ -1 +0,0 @@
1
- export { getOnramperIframeParams_alias_2 as getOnramperIframeParams } from '../_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- export{a as getOnramperIframeParams}from'../chunk-U4PLFPNJ.js';import'../chunk-JUQ66SU3.js';import'../chunk-3TSVHFY4.js';
@@ -1,2 +0,0 @@
1
- export { OnramperMode_alias_2 as OnramperMode } from '../_tsup-dts-rollup.js';
2
- export { BaseOnramperProps_alias_2 as BaseOnramperProps } from '../_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- import'../chunk-BCDTEWZG.js';import'../chunk-3TSVHFY4.js';
@@ -1,3 +0,0 @@
1
- export { generateSignature } from '../_tsup-dts-rollup.js';
2
- export { formatColorHexForParams } from '../_tsup-dts-rollup.js';
3
- export { matchAddresses } from '../_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- export{b as formatColorHexForParams,a as generateSignature,c as matchAddresses}from'../chunk-JUQ66SU3.js';import'../chunk-3TSVHFY4.js';
@@ -1,31 +0,0 @@
1
- export declare interface BaseOnramperProps {
2
- widgetHost: string;
3
- theme: 'light' | 'dark';
4
- btcAddress: string | undefined;
5
- stxAddress: string | undefined;
6
- apiKey: string;
7
- signingSecret: string;
8
- mode: OnramperMode;
9
- successRedirectUrl: string | undefined;
10
- failureRedirectUrl: string | undefined;
11
- }
12
-
13
- declare interface GetIframeProps {
14
- theme: 'dark' | 'light';
15
- btcAddress: string | undefined;
16
- stxAddress: string | undefined;
17
- apiKey: string;
18
- signingSecret: string;
19
- mode: OnramperMode;
20
- successRedirectUrl: string | undefined;
21
- failureRedirectUrl: string | undefined;
22
- redirectAtCheckout?: boolean;
23
- }
24
-
25
- export declare function getOnramperIframeParams({ theme, btcAddress, stxAddress, apiKey, signingSecret, mode, successRedirectUrl, failureRedirectUrl, redirectAtCheckout, }: GetIframeProps): URLSearchParams;
26
-
27
- export declare type OnramperMode = 'buy' | 'sell' | 'swap';
28
-
29
- export declare type OnramperProps = BaseOnramperProps & React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
30
-
31
- export { }
@@ -1 +0,0 @@
1
- import'react';
@@ -1,4 +0,0 @@
1
- export { OnramperProps } from './_tsup-dts-rollup.js';
2
- export { OnramperMode } from './_tsup-dts-rollup.js';
3
- export { BaseOnramperProps } from './_tsup-dts-rollup.js';
4
- export { getOnramperIframeParams } from './_tsup-dts-rollup.js';
@@ -1 +0,0 @@
1
- import'./chunk-J6IWLNJL.js';export*from'./onramper/index.shared';
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- import'../chunk-J6IWLNJL.js';export*from'./types.shared';export*from'./onramper-params.shared';
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- import'../chunk-J6IWLNJL.js';import {colorThemes}from'@leather.io/tokens';import {matchAddresses,generateSignature,formatColorHexForParams}from'./utils.shared';function w({theme:n,btcAddress:e,stxAddress:o,apiKey:p,signingSecret:k,mode:f,successRedirectUrl:l,failureRedirectUrl:s,redirectAtCheckout:y=false}){const a={};l&&(a.successRedirectUrl=l),s&&(a.failureRedirectUrl=s);const c=matchAddresses({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:`btc:${e},stx_stacks:${o}`,onlyBtc:`btc:${e}`,onlyStx:`stx_stacks:${o}`,none:""}}),d=matchAddresses({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:"stacks,bitcoin",onlyBtc:"bitcoin",onlyStx:"stacks",none:""}}),u=matchAddresses({btcAddress:e,stxAddress:o,resultMap:{bothAvailable:"stx_stacks,btc",onlyBtc:"btc",onlyStx:"stx_stacks",none:""}}),g=`wallets=${c}`,r=n==="dark"?colorThemes.dark:colorThemes.base;return new URLSearchParams({darkMode:n==="dark"?"true":"false",themeName:n,primaryColor:formatColorHexForParams(r["ink.action-primary-default"]),secondaryColor:formatColorHexForParams(r["ink.component-background-default"]),primaryTextColor:formatColorHexForParams(r["ink.text-primary"]),secondaryTextColor:formatColorHexForParams(r["ink.text-subdued"]),containerColor:formatColorHexForParams(r["ink.background-primary"]),cardColor:formatColorHexForParams(r["ink.component-background-hover"]),primaryBtnTextColor:formatColorHexForParams(r["ink.background-primary"]),borderRadius:"0.25",widgetBorderRadius:"0.1",apiKey:p,signature:generateSignature(g,k),mode:f,onlyCryptoNetworks:d,sell_onlyCryptoNetworks:d,onlyCryptos:u,sell_onlyCryptos:u,defaultFiat:"USD",sell_defaultFiat:"USD",defaultAmount:"25",sell_defaultCrypto:"BTC",sell_defaultAmount:"0.0005",redirectAtCheckout:y.toString(),hideTopBar:"true",wallets:c,...a})}export{w as getOnramperIframeParams};
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- import'../chunk-J6IWLNJL.js';
@@ -1 +0,0 @@
1
- export {};
@@ -1 +0,0 @@
1
- import'../chunk-J6IWLNJL.js';import {hmac}from'@noble/hashes/hmac';import {sha256}from'@noble/hashes/sha256';import {bytesToHex}from'@noble/hashes/utils';function m(n,t){const e=new TextEncoder,r=e.encode(n),o=e.encode(t),s=hmac(sha256,o,r);return bytesToHex(s)}function T(n){return n.replace("#","")}function l({btcAddress:n,stxAddress:t,resultMap:e}){return n&&t?e.bothAvailable:n?e.onlyBtc:t?e.onlyStx:e.none}export{T as formatColorHexForParams,m as generateSignature,l as matchAddresses};