{"_id":"@aftermath-finance/sui-bridge-react","_rev":"2-0a33b406e02ce0b1c1e8f87f2815caf7","name":"@aftermath-finance/sui-bridge-react","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aftermath-finance/sui-bridge-react","version":"1.0.0","author":{"name":"DarkSpace.studio"},"license":"Apache-2.0","_id":"@aftermath-finance/sui-bridge-react@1.0.0","maintainers":[{"name":"aftermath-admin","email":"npm@aftermath.finance"},{"name":"fedor-aftermath","email":"fedor@aftermath.finance"},{"name":"darkspacestudio","email":"marcin@darkspace.studio"},{"name":"collin-aftermath","email":"collin@aftermath.finance"}],"homepage":"https://github.com/AftermathFinance/native-bridge-widget#readme","bugs":{"url":"https://github.com/AftermathFinance/native-bridge-widget/issues"},"dist":{"shasum":"e11e2167c575056312d62019779d7c81859190f9","tarball":"https://registry.npmjs.org/@aftermath-finance/sui-bridge-react/-/sui-bridge-react-1.0.0.tgz","fileCount":139,"integrity":"sha512-oloHKDLlXd8wzacMuudpDPzJQl0o6BEy4HH+rcmTdUGp8SQL/4qihm2XU8yPWz/4IJ44XWy15YoFwiuUyNsvTw==","signatures":[{"sig":"MEYCIQCYNppSfWjUlYWTkwc/WoaUk6ZbtnYZE2eAHpmvAf+qiAIhAI+PqIeLKHy8RNFWhVVPZ8ClBvuM+7Fr8t/McorMxHvx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4121485},"type":"module","exports":{".":{"types":"./dist/lib/main.d.ts","default":"./dist/main.js"}},"gitHead":"ace4bf073346b48a4a9eaaf8287315335f065936","private":false,"scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc -b ./tsconfig.lib.json && vite build","watch":"vite build --watch","preview":"vite preview","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"darkspacestudio","email":"marcin@darkspace.studio"},"repository":{"url":"git+https://github.com/AftermathFinance/native-bridge-widget.git","type":"git"},"_npmVersion":"10.9.2","description":"React components that allow users to bridge ETH between Ethereum and Sui networks.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.2.0","dependencies":{"viem":"^2.21.47","wagmi":"^2.12.33","@reown/appkit":"^1.4.1","@tanstack/react-query":"^5.60.5","@radix-ui/react-select":"^2.1.2","@reown/appkit-adapter-wagmi":"^1.4.1"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","glob":"^7.2.3","vite":"^5.2.0","husky":"^9.1.5","eslint":"^8.57.0","vitest":"^2.1.4","prettier":"3.3.3","storybook":"^8.1.10","stylelint":"^16.10.0","@eslint/js":"^9.8.0","typescript":"^5.2.2","@types/react":"^18.2.66","@storybook/test":"^8.4.4","vite-plugin-dts":"^4.3.0","@storybook/react":"^8.4.4","@types/react-dom":"^18.2.22","@storybook/blocks":"^8.4.4","typescript-eslint":"^7.13.1","stylelint-prettier":"^5.0.2","eslint-plugin-react":"^7.35.0","vite-plugin-restart":"^0.4.1","@vitejs/plugin-react":"^4.2.1","eslint-plugin-import":"^2.31.0","@storybook/react-vite":"^8.1.10","@storybook/addon-links":"^8.1.10","eslint-config-prettier":"^9.1.0","@storybook/addon-themes":"^8.1.10","@tanstack/router-plugin":"^1.58.4","eslint-plugin-storybook":"^0.8.0","@chromatic-com/storybook":"^1.5.0","eslint-plugin-check-file":"^2.8.0","@tanstack/router-devtools":"^1.58.7","@typescript-eslint/parser":"^7.2.0","eslint-plugin-css-modules":"^2.12.0","eslint-plugin-react-hooks":"^4.6.0","stylelint-config-standard":"^36.0.1","vite-plugin-lib-inject-css":"^2.1.1","@storybook/addon-essentials":"^8.1.10","@storybook/addon-onboarding":"^8.4.4","eslint-plugin-react-refresh":"^0.4.6","eslint-plugin-unused-imports":"^4.1.3","@radix-ui/react-dropdown-menu":"^2.1.2","@storybook/addon-interactions":"^8.4.4","@tanstack/eslint-plugin-query":"^5.51.15","react-docgen-typescript-plugin":"^1.0.8","@typescript-eslint/eslint-plugin":"^7.2.0","eslint-import-resolver-typescript":"^3.6.3"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/sui-bridge-react_1.0.0_1736363858957_0.6057161185113851","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aftermath-finance/sui-bridge-react","version":"1.0.1","author":{"name":"DarkSpace.studio"},"license":"Apache-2.0","_id":"@aftermath-finance/sui-bridge-react@1.0.1","maintainers":[{"name":"aftermath-admin","email":"npm@aftermath.finance"},{"name":"fedor-aftermath","email":"fedor@aftermath.finance"},{"name":"darkspacestudio","email":"marcin@darkspace.studio"},{"name":"collin-aftermath","email":"collin@aftermath.finance"}],"homepage":"https://github.com/AftermathFinance/native-bridge-widget#readme","bugs":{"url":"https://github.com/AftermathFinance/native-bridge-widget/issues"},"dist":{"shasum":"048846d60cee23d2b8c9e8e897cf84dfecca9c0d","tarball":"https://registry.npmjs.org/@aftermath-finance/sui-bridge-react/-/sui-bridge-react-1.0.1.tgz","fileCount":139,"integrity":"sha512-sFRqyNSTA2RqnJ8jg0NngwcbtW4xmk75T7yGphEcHmSAD3wnQOv0hzR/AfKB6dPfVYkwDfeEMbIN2YjQEHHZ9w==","signatures":[{"sig":"MEYCIQCMmMWGMHkfCw5KLKhS8OoY7fisU+r69KVVbDAJNkrRGgIhAJaHpaevX1Ag31blC0V2jJ8CUOxWPn+y0fMa7Aa1yfNx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4121485},"type":"module","exports":{".":{"types":"./dist/lib/main.d.ts","default":"./dist/main.js"}},"gitHead":"fca5d521e042c36708d08d2604c40f81affdb27c","private":false,"scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc -b ./tsconfig.lib.json && vite build","watch":"vite build --watch","preview":"vite preview","storybook":"storybook dev -p 6006","prepublishOnly":"npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"darkspacestudio","email":"marcin@darkspace.studio"},"repository":{"url":"git+https://github.com/AftermathFinance/native-bridge-widget.git","type":"git"},"_npmVersion":"10.9.2","description":"React components that allow users to bridge ETH between Ethereum and Sui networks.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.2.0","dependencies":{"viem":"^2.21.47","wagmi":"^2.12.33","@reown/appkit":"^1.4.1","@tanstack/react-query":"^5.60.5","@radix-ui/react-select":"^2.1.2","@reown/appkit-adapter-wagmi":"^1.4.1"},"_hasShrinkwrap":false,"devDependencies":{"ajv":"^8.17.1","glob":"^7.2.3","vite":"^5.2.0","husky":"^9.1.5","eslint":"^8.57.0","vitest":"^2.1.4","prettier":"3.3.3","storybook":"^8.1.10","stylelint":"^16.10.0","@eslint/js":"^9.8.0","typescript":"^5.2.2","@types/react":"^18.2.66","@storybook/test":"^8.4.4","vite-plugin-dts":"^4.3.0","@storybook/react":"^8.4.4","@types/react-dom":"^18.2.22","@storybook/blocks":"^8.4.4","typescript-eslint":"^7.13.1","stylelint-prettier":"^5.0.2","eslint-plugin-react":"^7.35.0","vite-plugin-restart":"^0.4.1","@vitejs/plugin-react":"^4.2.1","eslint-plugin-import":"^2.31.0","@storybook/react-vite":"^8.1.10","@storybook/addon-links":"^8.1.10","eslint-config-prettier":"^9.1.0","@storybook/addon-themes":"^8.1.10","@tanstack/router-plugin":"^1.58.4","eslint-plugin-storybook":"^0.8.0","@chromatic-com/storybook":"^1.5.0","eslint-plugin-check-file":"^2.8.0","@tanstack/router-devtools":"^1.58.7","@typescript-eslint/parser":"^7.2.0","eslint-plugin-css-modules":"^2.12.0","eslint-plugin-react-hooks":"^4.6.0","stylelint-config-standard":"^36.0.1","vite-plugin-lib-inject-css":"^2.1.1","@storybook/addon-essentials":"^8.1.10","@storybook/addon-onboarding":"^8.4.4","eslint-plugin-react-refresh":"^0.4.6","eslint-plugin-unused-imports":"^4.1.3","@radix-ui/react-dropdown-menu":"^2.1.2","@storybook/addon-interactions":"^8.4.4","@tanstack/eslint-plugin-query":"^5.51.15","react-docgen-typescript-plugin":"^1.0.8","@typescript-eslint/eslint-plugin":"^7.2.0","eslint-import-resolver-typescript":"^3.6.3"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/sui-bridge-react_1.0.1_1736364028653_0.24450025974113254","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aftermath-finance/sui-bridge-react","version":"1.0.2","description":"React components that allow users to bridge ETH between Ethereum and Sui networks.","author":{"name":"DarkSpace.studio"},"license":"Apache-2.0","private":false,"type":"module","exports":{".":{"types":"./dist/lib/main.d.ts","default":"./dist/main.js"}},"repository":{"type":"git","url":"git+https://github.com/AftermathFinance/native-bridge-widget.git"},"sideEffects":["**/*.css"],"scripts":{"dev":"vite","build":"tsc -b ./tsconfig.lib.json && vite build","watch":"vite build --watch","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","prepublishOnly":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@radix-ui/react-select":"^2.1.2","@reown/appkit":"^1.4.1","@reown/appkit-adapter-wagmi":"^1.4.1","@tanstack/react-query":"^5.60.5","viem":"^2.21.47","wagmi":"^2.12.33"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"@chromatic-com/storybook":"^1.5.0","@eslint/js":"^9.8.0","@radix-ui/react-dropdown-menu":"^2.1.2","@storybook/addon-essentials":"^8.1.10","@storybook/addon-interactions":"^8.4.4","@storybook/addon-links":"^8.1.10","@storybook/addon-onboarding":"^8.4.4","@storybook/addon-themes":"^8.1.10","@storybook/blocks":"^8.4.4","@storybook/react":"^8.4.4","@storybook/react-vite":"^8.1.10","@storybook/test":"^8.4.4","@tanstack/eslint-plugin-query":"^5.51.15","@tanstack/router-devtools":"^1.58.7","@tanstack/router-plugin":"^1.58.4","@types/react":"^18.2.66","@types/react-dom":"^18.2.22","@typescript-eslint/eslint-plugin":"^7.2.0","@typescript-eslint/parser":"^7.2.0","@vitejs/plugin-react":"^4.2.1","ajv":"^8.17.1","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-check-file":"^2.8.0","eslint-plugin-css-modules":"^2.12.0","eslint-plugin-import":"^2.31.0","eslint-plugin-react":"^7.35.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.6","eslint-plugin-storybook":"^0.8.0","eslint-plugin-unused-imports":"^4.1.3","glob":"^7.2.3","husky":"^9.1.5","prettier":"3.3.3","react-docgen-typescript-plugin":"^1.0.8","storybook":"^8.1.10","stylelint":"^16.10.0","stylelint-config-standard":"^36.0.1","stylelint-prettier":"^5.0.2","typescript":"^5.2.2","typescript-eslint":"^7.13.1","vite":"^5.2.0","vite-plugin-dts":"^4.3.0","vite-plugin-lib-inject-css":"^2.1.1","vite-plugin-restart":"^0.4.1","vitest":"^2.1.4"},"_id":"@aftermath-finance/sui-bridge-react@1.0.2","gitHead":"4c50a5ba0ee05f47d6004e5cd62e64024b53c997","bugs":{"url":"https://github.com/AftermathFinance/native-bridge-widget/issues"},"homepage":"https://github.com/AftermathFinance/native-bridge-widget#readme","_nodeVersion":"23.2.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-dI7qAkKUtZ7evB2AcVeu9SsUDWBO570mfHJUknkU+kW188qDgkXTd26LLt2kL2dboyPTlc8cgEXEUQDIkw/68Q==","shasum":"3ef14bf489872b4a7d5d613b8d438a6cb4f6ab20","tarball":"https://registry.npmjs.org/@aftermath-finance/sui-bridge-react/-/sui-bridge-react-1.0.2.tgz","fileCount":139,"unpackedSize":4121501,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgBtAKBJssGrLyhJ6ZLwjYWvDe2SVYeaHyoAhy7fK6DAIhAOeeyM4/igBM8RKJaMgc4aEqLULgxDx5CI4+7Kd7lZEZ"}]},"_npmUser":{"name":"darkspacestudio","email":"marcin@darkspace.studio"},"directories":{},"maintainers":[{"name":"aftermath-admin","email":"npm@aftermath.finance"},{"name":"fedor-aftermath","email":"fedor@aftermath.finance"},{"name":"darkspacestudio","email":"marcin@darkspace.studio"},{"name":"collin-aftermath","email":"collin@aftermath.finance"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sui-bridge-react_1.0.2_1736364199968_0.7219213233808901"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-08T19:17:38.855Z","modified":"2025-01-08T19:23:20.543Z","1.0.0":"2025-01-08T19:17:39.267Z","1.0.1":"2025-01-08T19:20:28.927Z","1.0.2":"2025-01-08T19:23:20.321Z"},"bugs":{"url":"https://github.com/AftermathFinance/native-bridge-widget/issues"},"author":{"name":"DarkSpace.studio"},"license":"Apache-2.0","homepage":"https://github.com/AftermathFinance/native-bridge-widget#readme","repository":{"type":"git","url":"git+https://github.com/AftermathFinance/native-bridge-widget.git"},"description":"React components that allow users to bridge ETH between Ethereum and Sui networks.","maintainers":[{"name":"aftermath-admin","email":"npm@aftermath.finance"},{"name":"fedor-aftermath","email":"fedor@aftermath.finance"},{"name":"darkspacestudio","email":"marcin@darkspace.studio"},{"name":"collin-aftermath","email":"collin@aftermath.finance"}],"readme":"# Native Sui Bridge Widget for React\n\n---\n\nThis repository contains React components that allow users to bridge Ethereum and Sui networks. Library is fully typed and self contained.\n\n## Installation\n\nLibrary is assuming your project is using `react` and `react-dom` as dependencies.\n\n```bash\nnpm install @aftermath-finance/sui-bridge-react\n```\n\n## Usage\n\nBasic standalone usage.\n\n```tsx\nimport { Bridge, BridgeConfig } from \"@aftermath-finance/sui-bridge-react\";\n\nconst config: BridgeConfig = {\n  appKitProjectId: \"your-project-id\",\n  isMainnet: false,\n};\n\nexport function App() {\n  return (\n    <>\n      <Bridge {...config} />\n    </>\n  );\n}\n```\n\nBridge uses AppKit by Reown (WalletConnect). You have to pass your project ID to the configuration or bridge will not work.\n\nBy default, Bridge uses Sepolia. To use it on mainnet, add the following configuration.\n\n```tsx\nconst config: BridgeConfig = {\n  isMainnet: true,\n};\n```\n\nIf your app has already installed `wagmi`, you can pass it's instance.\n\n```tsx\nconst config: BridgeConfig = {\n  wagmi: wagmiInstance,\n  queryClient: queryClientInstance,\n};\n```\n\n### Available tokens\n\nCurrently the library supports bridging native ETH and wETH. More tokens might be added in the future.\n\nYou can customize the list of available tokens by passing optional `tokenIds` prop. By default all tokens are enabled. Native ETH is always enabled, only ERC20 tokens can be customized. Currently wETH and USDT are supported.\n\n| tokenId | symbol |\n| ------- | ------ |\n| n/a     | ETH    |\n| 2       | wETH   |\n| 4       | USDT   |\n\n```tsx\nconst config: BridgeConfig = {\n  tokenIds: [2, 4],\n};\n```\n\nBy passing an empty array, only ETH will be available.\n\n### Customization\n\n![Primary theme](example.png)\n\nThis will display the `example.png` image in your documentation.\n\n`BridgeConfig` allows you to remove the background image to make the widget flat. More customization options will be added soon.\n\n```tsx\nconst config: BridgeConfig = {\n  style: {\n    hasBackgroundImage: true,\n  },\n};\n```\n\nTo customize the widget's theme, you can change root CSS variables. Here is the primary theme.\n\n```css\n/* Main */\n--primary-color: #4da2ff;\n--secondary-color: #1f1f1f;\n\n/* Background */\n--background-primary: #030f1c;\n--background-secondary: rgba(247 247 248 / 4%);\n--background-accent1: #4da2ff;\n--background-accent1-hover: #1988ff;\n--background-accent2: #c0e6ff;\n--background-tertiary: rgba(247 247 248 / 24%);\n--background-tertiary-hover: rgba(247 247 248 / 40%);\n--background-inverted: #fff;\n\n/* Stroke */\n--stroke-primary: rgba(247 247 248 / 8%);\n--stroke-secondary: rgba(247 247 248 / 16%);\n\n/* Content */\n--content-primary: #f7f7f8;\n--content-secondary: #abbdcc;\n--content-tertiary: #91a3b1;\n--content-inverted: #030f1c;\n--content-inverted-secondary: #485563;\n--content-negative: #e23c50;\n\n/* Image */\n--background-image: url(\"/background.jpg\");\n\n/* Fonts */\n--font-family: \"Inter\", \"Roboto\", \"Helvetica Neue\", \"Arial Nova\", \"Nimbus Sans\",\n  \"Arial\", sans-serif;\n\n/* Spacing */\n--border-radius-base: 16px;\n--spacing-base: 16px;\n--width: 480px;\n--height: 564px;\n```\n\n## Development\n\nYou can test the library locally using Vite.\n\n```bash\nnpm run build\nnpm run dev\n```\n\nTesting components is done using storybook.\n\n```bash\nnpm run storybook\n```\n\n## License\n\nApache-2.0\n\nDeveloped by [DarkSpace.studio](https://darkspace.studio/) in coordination with Sui Foundation and Mysten. Hosted by Aftermath Finance.\n","readmeFilename":"README.md"}