@leather.io/features 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Leather Wallet LLC [a subsidiary of Nassau Machines]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# Features
+
+This package contains Leather Wallet's features library for our web + React Native applications.
+
+## Architecture
+
+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.**
+
+- `*.web.ts` — bundled only for Web
+- `*.native.ts` — bundled only for React Native
+- `*.shared.ts` — bundled for all platforms
+
+## Web Setup
+
+Our web apps use [panda css](https://panda-css.com/). To setup in your application you need to:
+
+- Install `@pandacss/dev`
+- Setup panda css and configure it to acknowledge the library code
+- Configure Webpack to load the files correctly
+- Import the library styles from `@leather.io/ui/styles`
+
+### Panda configuration
+
+Specify the library as part of the `panda.config` `include`:
+
+```js
+  include: [
+    './node_modules/@leather.io/ui/dist-web/**/*.{js,jsx,ts,tsx}',
+    './src/**/*.{js,jsx,ts,tsx}',
+  ],
+```
+
+### Webpack configuration
+
+- Alias `react` and `react-dom` to avoid react errors.
+
+- Configure your `module` to handle `jsx` files
+
+```js
+export const config = {
+...
+  module: {
+    resolve: {
+    ...
+    alias: {
+    'leather-styles': path.resolve('leather-styles'),
+    'react': path.resolve('./node_modules/react'),
+    'react-dom': path.resolve('./node_modules/react-dom')
+    },
+      ...
+    rules: [
+      ...
+      {
+        test: /\.(js)$/,
+        include: [/node_modules\/@leather.io\/ui/],
+        loader: 'esbuild-loader',
+        options: { tsconfig: './tsconfig.json', loader: {'jsx'},target: 'es2020' },
+      },
+
+```
+
+## Security: Dynamic Content Sanitization
+
+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`).
+
+- **Browser:** Uses DOMPurify to remove unsafe HTML and prevent XSS.
+- **SSR:** Falls back to escaping HTML tags to prevent injection.
+
+This is enforced in all UI components that render user- or CMS-driven HTML, including FAQ, explainer, and post-driven UI elements.
+
+A shared utility, `sanitizeContent`, is used throughout the codebase to sanitize any post content before rendering. Example usage:
+
+```ts
+import { sanitizeContent } from '@leather.io/ui/utils/sanitize-content';
+
+const safeHtml = sanitizeContent(post.Summary);
+```
+
+This is applied in all FAQ, explainer, hover card, and heading components that render post content.
+
+## License
+
+[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-io/mono)
+
+---
+
+[⬅ Back](../../README.md)
+
+---

package/dist-native/_tsup-dts-rollup.d.ts

@@ -0,0 +1,68 @@
+import { ComponentProps } from 'react';
+import type WebView from 'react-native-webview';
+
+declare interface BaseOnramperProps {
+    widgetHost: string;
+    theme: 'light' | 'dark';
+    btcAddress: string | undefined;
+    stxAddress: string | undefined;
+    apiKey: string;
+    signingSecret: string;
+    mode: OnramperMode;
+    successRedirectUrl: string | undefined;
+    failureRedirectUrl: string | undefined;
+}
+export { BaseOnramperProps }
+export { BaseOnramperProps as BaseOnramperProps_alias_1 }
+export { BaseOnramperProps as BaseOnramperProps_alias_2 }
+
+export declare function formatColorHexForParams(colorHex: string): string;
+
+export declare function generateSignature(data: string, signingSecret: string): string;
+
+declare interface GetIframeProps {
+    theme: 'dark' | 'light';
+    btcAddress: string | undefined;
+    stxAddress: string | undefined;
+    apiKey: string;
+    signingSecret: string;
+    mode: OnramperMode;
+    successRedirectUrl: string | undefined;
+    failureRedirectUrl: string | undefined;
+    redirectAtCheckout?: boolean;
+}
+
+declare function getOnramperIframeParams({ theme, btcAddress, stxAddress, apiKey, signingSecret, mode, successRedirectUrl, failureRedirectUrl, redirectAtCheckout, }: GetIframeProps): URLSearchParams;
+export { getOnramperIframeParams }
+export { getOnramperIframeParams as getOnramperIframeParams_alias_1 }
+export { getOnramperIframeParams as getOnramperIframeParams_alias_2 }
+
+declare interface MatchAddresses<T> {
+    btcAddress: string | undefined;
+    stxAddress: string | undefined;
+    resultMap: {
+        bothAvailable: T;
+        onlyBtc: T;
+        onlyStx: T;
+        none: T;
+    };
+}
+
+export declare function matchAddresses<T>({ btcAddress, stxAddress, resultMap }: MatchAddresses<T>): T;
+
+declare type MobileOnramperProps = BaseOnramperProps & ComponentProps<typeof WebView>;
+export { MobileOnramperProps }
+export { MobileOnramperProps as MobileOnramperProps_alias_1 }
+export { MobileOnramperProps as MobileOnramperProps_alias_2 }
+
+declare type OnramperMode = 'buy' | 'sell' | 'swap';
+export { OnramperMode }
+export { OnramperMode as OnramperMode_alias_1 }
+export { OnramperMode as OnramperMode_alias_2 }
+
+declare type WebOnramperProps = BaseOnramperProps & React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
+export { WebOnramperProps }
+export { WebOnramperProps as WebOnramperProps_alias_1 }
+export { WebOnramperProps as WebOnramperProps_alias_2 }
+
+export { }

package/dist-native/chunk-3TSVHFY4.js

@@ -0,0 +1 @@
+import'react';

package/dist-native/chunk-JUQ66SU3.js

@@ -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};

package/dist-native/chunk-U4PLFPNJ.js

@@ -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};

package/dist-native/exports.native.d.ts

@@ -0,0 +1,5 @@
+export { OnramperMode } from './_tsup-dts-rollup.js';
+export { BaseOnramperProps } from './_tsup-dts-rollup.js';
+export { WebOnramperProps } from './_tsup-dts-rollup.js';
+export { MobileOnramperProps } from './_tsup-dts-rollup.js';
+export { getOnramperIframeParams } from './_tsup-dts-rollup.js';

package/dist-native/exports.native.js

@@ -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';

package/dist-native/onramper/index.shared.d.ts

@@ -0,0 +1,5 @@
+export { OnramperMode_alias_1 as OnramperMode } from '../_tsup-dts-rollup.js';
+export { BaseOnramperProps_alias_1 as BaseOnramperProps } from '../_tsup-dts-rollup.js';
+export { WebOnramperProps_alias_1 as WebOnramperProps } from '../_tsup-dts-rollup.js';
+export { MobileOnramperProps_alias_1 as MobileOnramperProps } from '../_tsup-dts-rollup.js';
+export { getOnramperIframeParams_alias_1 as getOnramperIframeParams } from '../_tsup-dts-rollup.js';

package/dist-native/onramper/index.shared.js

@@ -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';

package/dist-native/onramper/onramper-params.shared.d.ts

@@ -0,0 +1 @@
+export { getOnramperIframeParams_alias_2 as getOnramperIframeParams } from '../_tsup-dts-rollup.js';

package/dist-native/onramper/onramper-params.shared.js

@@ -0,0 +1 @@
+export{a as getOnramperIframeParams}from'../chunk-U4PLFPNJ.js';import'../chunk-JUQ66SU3.js';import'../chunk-3TSVHFY4.js';

package/dist-native/onramper/types.shared.d.ts

@@ -0,0 +1,4 @@
+export { OnramperMode_alias_2 as OnramperMode } from '../_tsup-dts-rollup.js';
+export { BaseOnramperProps_alias_2 as BaseOnramperProps } from '../_tsup-dts-rollup.js';
+export { WebOnramperProps_alias_2 as WebOnramperProps } from '../_tsup-dts-rollup.js';
+export { MobileOnramperProps_alias_2 as MobileOnramperProps } from '../_tsup-dts-rollup.js';

package/dist-native/onramper/types.shared.js

@@ -0,0 +1 @@
+import'../chunk-BCDTEWZG.js';import'../chunk-3TSVHFY4.js';

package/dist-native/onramper/utils.shared.d.ts

@@ -0,0 +1,3 @@
+export { generateSignature } from '../_tsup-dts-rollup.js';
+export { formatColorHexForParams } from '../_tsup-dts-rollup.js';
+export { matchAddresses } from '../_tsup-dts-rollup.js';

package/dist-native/onramper/utils.shared.js

@@ -0,0 +1 @@
+export{b as formatColorHexForParams,a as generateSignature,c as matchAddresses}from'../chunk-JUQ66SU3.js';import'../chunk-3TSVHFY4.js';

package/dist-web/_tsup-dts-rollup.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from 'react';
+import type WebView from 'react-native-webview';
+
+export declare interface BaseOnramperProps {
+    widgetHost: string;
+    theme: 'light' | 'dark';
+    btcAddress: string | undefined;
+    stxAddress: string | undefined;
+    apiKey: string;
+    signingSecret: string;
+    mode: OnramperMode;
+    successRedirectUrl: string | undefined;
+    failureRedirectUrl: string | undefined;
+}
+
+declare interface GetIframeProps {
+    theme: 'dark' | 'light';
+    btcAddress: string | undefined;
+    stxAddress: string | undefined;
+    apiKey: string;
+    signingSecret: string;
+    mode: OnramperMode;
+    successRedirectUrl: string | undefined;
+    failureRedirectUrl: string | undefined;
+    redirectAtCheckout?: boolean;
+}
+
+export declare function getOnramperIframeParams({ theme, btcAddress, stxAddress, apiKey, signingSecret, mode, successRedirectUrl, failureRedirectUrl, redirectAtCheckout, }: GetIframeProps): URLSearchParams;
+
+export declare type MobileOnramperProps = BaseOnramperProps & ComponentProps<typeof WebView>;
+
+export declare type OnramperMode = 'buy' | 'sell' | 'swap';
+
+export declare type WebOnramperProps = BaseOnramperProps & React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>;
+
+export { }

package/dist-web/chunk-J6IWLNJL.js

@@ -0,0 +1 @@
+import'react';

package/dist-web/exports.web.d.ts

@@ -0,0 +1,5 @@
+export { OnramperMode } from './_tsup-dts-rollup.js';
+export { BaseOnramperProps } from './_tsup-dts-rollup.js';
+export { WebOnramperProps } from './_tsup-dts-rollup.js';
+export { MobileOnramperProps } from './_tsup-dts-rollup.js';
+export { getOnramperIframeParams } from './_tsup-dts-rollup.js';

package/dist-web/exports.web.js

@@ -0,0 +1 @@
+import'./chunk-J6IWLNJL.js';export*from'./onramper/index.shared';

package/dist-web/onramper/index.shared.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-web/onramper/index.shared.js

@@ -0,0 +1 @@
+import'../chunk-J6IWLNJL.js';export*from'./types.shared';export*from'./onramper-params.shared';

package/dist-web/onramper/onramper-params.shared.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-web/onramper/onramper-params.shared.js

@@ -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};

package/dist-web/onramper/types.shared.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-web/onramper/types.shared.js

@@ -0,0 +1 @@
+import'../chunk-J6IWLNJL.js';

package/dist-web/onramper/utils.shared.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-web/onramper/utils.shared.js

@@ -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};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@leather.io/features",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./dist-web/exports.web.js",
+    "./native": "./dist-native/exports.native.js"
+  },
+  "dependencies": {
+    "@noble/hashes": "1.5.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-webview": "13.14.1",
+    "@leather.io/tokens": "0.24.1",
+    "@leather.io/prettier-config": "0.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.27.1",
+    "@babel/runtime": "7.26.0",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.0.12",
+    "@types/react-dom": "19.0.4",
+    "babel-preset-expo": "13.0.0",
+    "concurrently": "8.2.2",
+    "happy-dom": "18.0.1",
+    "tslib": "2.6.2",
+    "tsup": "8.4.0",
+    "typescript": "5.8.3",
+    "vitest": "2.1.9"
+  },
+  "files": [
+    "dist-web",
+    "dist-native"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": " pnpm build:native && pnpm build:web",
+    "build:native": "tsup --config tsup.config.native.ts",
+    "build:native:watch": "concurrently \"pnpm build:native --watch -- --preserveWatchOutput\"",
+    "build:watch": "concurrently  \"pnpm build:native --watch -- --preserveWatchOutput\" \"pnpm build:web --watch\" ",
+    "build:web": "tsup --config tsup.config.web.ts",
+    "format": "prettier . --write \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
+    "format:check": "prettier . --check \"src/**/*.{ts,tsx}\" --ignore-path ../../.prettierignore",
+    "test:unit": "vitest run",
+    "typecheck": "tsc --noEmit --project ./tsconfig.json"
+  }
+}