{"id":48561815,"url":"https://github.com/ethersphere/multichain-widget","last_synced_at":"2026-04-08T12:34:20.517Z","repository":{"id":319063495,"uuid":"1068437039","full_name":"ethersphere/multichain-widget","owner":"ethersphere","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-11T07:13:24.000Z","size":277,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-11T13:55:02.908Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ethersphere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-02T11:37:11.000Z","updated_at":"2026-03-11T07:13:27.000Z","dependencies_parsed_at":"2025-10-18T00:11:57.916Z","dependency_job_id":"6d1b00fa-04be-48bb-9c77-8143ee100228","html_url":"https://github.com/ethersphere/multichain-widget","commit_stats":null,"previous_names":["cafe137/multichain-widget","ethersphere/multichain-widget"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ethersphere/multichain-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethersphere%2Fmultichain-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethersphere%2Fmultichain-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethersphere%2Fmultichain-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethersphere%2Fmultichain-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ethersphere","download_url":"https://codeload.github.com/ethersphere/multichain-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ethersphere%2Fmultichain-widget/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31556235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-08T12:34:19.876Z","updated_at":"2026-04-08T12:34:20.498Z","avatar_url":"https://github.com/ethersphere.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Installation\n\n```\nnpm install @upcoming/multichain-widget\n```\n\n# Usage\n\nImport the component and accompanying styles:\n\n```ts\nimport '@rainbow-me/rainbowkit/styles.css'\nimport { MultichainWidget } from '@upcoming/multichain-widget'\nimport '@upcoming/multichain-widget/styles.css'\n```\n\nThen simply place the component in your app:\n\n```tsx\n\u003cMultichainWidget /\u003e\n```\n\n## Props and Query params\n\nIt is possible to specify query params or pass some props to `\u003cMultichainWidget /\u003e` to customize its behavior:\n\n### `theme`\n\nColors, fonts, sizes, etc. can be overwritten by using this prop.\n\nDoes not support query params.\n\n### `hooks`\n\nCallbacks can be specified for various events in the flow. The most important hook is the `onCompletion` hook, which is called when the flow is completed successfully.\n\nApplications embedding the widget and conditionally rendering it can use this hook to unmount the widget when the flow is done.\n\nDoes not support query params.\n\n### `settings`\n\nMainly used to customize the `gnosisJsonRpcProviders` array.\n\nDoes not support query params.\n\n### `intent`\n\nThe intent modifies the information text displayed on the first screen. Possible values are `initial-funding`, `postage-batch` and `arbitrary`.\n\nCan be specified in the query params with the `intent` key.\n\n### `destination`\n\nThe default target address where the xBZZ and xDAI tokens will be sent.\n\nCan be specified in the query params with the `destination` key.\n\n### `dai`\n\nThe default amount of xDAI to receive at the end of the flow.\n\nCan be specified in the query params with the `dai` key.\n\n### `bzz`\n\nThe default amount of xBZZ to receive at the end of the flow.\n\nCan be specified in the query params with the `bzz` key.\n\n# Flow\n\n1. Cross-swap a token to xDAI using Relay, goes to a temporary wallet.\n2. Swap xDAI to xBZZ using SushiSwap, goes to the user's wallet.\n3. Transfer any remaining xDAI to the user's wallet.\n\n# Dependencies\n\n### Relay\n\nWe use the Relay API to cross-swap to xDAI.\n\n### SushiSwap\n\nWe use SushiSwap contracts and its API to swap xDAI to xBZZ.\n\n# Considerations\n\n## Test Selectors\n\n### Screen 1\n\n#### Always Present\n\n-   `data-test-id=\"intent\"`\n-   `data-test-id=\"target-address-input\"`\n-   `data-test-id=\"xdai-input\"`\n-   `data-test-id=\"xbzz-input\"`\n-   `data-test-id=\"continue\"`\n-   `data-test-id=\"export-keys\"`\n\n#### Conditional\n\n-   `data-test-id=\"error-invalid-address\"`\n-   `data-test-id=\"error-bad-address-checksum\"`\n-   `data-test-id=\"error-not-enough-bzz\"`\n\n### Screen 2\n\n#### Always Present\n\n-   `data-test-id=\"go-back\"`\n-   `data-test-id=\"readonly-source-address\"`\n-   `data-test-id=\"readonly-target-address\"`\n-   `data-test-id=\"source-chain-input\"`\n-   `data-test-id=\"source-chain-input__1\"` the number represents the network id, in this case 1 for Ethereum Mainnet\n-   `data-test-id=\"source-token-input\"`\n-   `data-test-id=\"source-token-input__0xdac17f958d2ee523a2206206994597c13d831ec7\"` the address represents the token, in this case USDT\n-   `data-test-id=\"swap-summary\"` (e.g. \"You will swap 0.0814 (~$0.081) USDT from Ethereum to fund:\")\n-   `data-test-id=\"xdai-display__left\"` (e.g. \"0.01 xDAI\")\n-   `data-test-id=\"xdai-display__right\"` (e.g. \"$0.01\")\n-   `data-test-id=\"xbzz-display__left\"` (e.g. \"0.500 xBZZ\")\n-   `data-test-id=\"xbzz-display__right\"` (e.g. \"$0.06\")\n-   `data-test-id=\"quote-status\"`\n-   `data-test-id=\"quote-status__description\"` (e.g. \"Quote available\")\n-   `data-test-id=\"fund\"`\n\n#### Conditional\n\n-   `data-test-id=\"quote-status__completed\"`\n-   `data-test-id=\"quote-status__pending\"`\n-   `data-test-id=\"quote-status__failed\"`\n\n### Screen 3\n\n#### Always Present\n\n-   `data-test-id=\"go-back\"` disabled\n-   `data-test-id=\"readonly-source-address\"`\n-   `data-test-id=\"readonly-target-address\"`\n-   `data-test-id=\"status-step-1\"`\n-   ...\n-   `data-test-id=\"status-step-6\"`\n-   `data-test-id=\"fund\"` disabled\n\n#### Conditional\n\n-   `data-test-id=\"status-step-1__pending\"`\n-   `data-test-id=\"status-step-1__skipped\"`\n-   `data-test-id=\"status-step-1__completed\"`\n-   `data-test-id=\"status-step-1__in-progress\"`\n-   `data-test-id=\"status-step-1__failed\"`\n-   ...\n-   `data-test-id=\"status-step-6__pending\"`\n-   `data-test-id=\"status-step-6__skipped\"`\n-   `data-test-id=\"status-step-6__completed\"`\n-   `data-test-id=\"status-step-6__in-progress\"`\n-   `data-test-id=\"status-step-6__failed\"`\n\n## Theme\n\nMost styles can be overwritten by passing a `theme` prop to the `MultichainWidget` component.\n\n## Temporary wallet persistence\n\nA backup of every generated private key is stored in `localStorage` with a timestamp suffix to avoid collisions.\n\n## Reactivity\n\nHooks can be set by passing `hooks` prop to the `MultichainWidget` component. Currently supported hooks are:\n\n-   `beforeTransactionStart`\n-   `onFatalError`\n-   `onCompletion`\n-   `onUserAbort`\n\n# Postage batch creation\n\n1. Pass the `mode=batch` query param to the widget to switch to batch creation mode.\n2. Pass `destination=0x${string}` to specify the desired owner of the postage batch. This is NOT related to the payer address.\n3. Recommended to pass `intent=postage-batch` to adjust the information text on the first screen.\n4. Optionally pass the `reserved-slots=2` query param to specify the number of intended reserved slots per bucket within the batch. This adjusts the capacity displayed on the first page and shifts the underlying depth values.\n\nExample:\n\n```\nhttps://fund.ethswarm.org/?mode=batch\u0026destination=0x45a1502382541Cd610CC9068e88727426b696293\u0026intent=postage-batch\u0026reserved-slots=2\n```\n\n## iframe messages\n\n-   `{ event: 'error', error }`\n-   `{ event: 'finish' }`\n-   `{ event: 'batch', batchId: 0x${string}, depth: number, amount: numberString, blockNumber: 0x${string} }`\n\nExample:\n\n```json\n{\n    \"event\": \"batch\",\n    \"batchId\": \"0xfe48d3cd7ec9cdf455811894d63683b1fac8b358501b843892b372e355155b62\",\n    \"depth\": 21,\n    \"amount\": \"10453363201\",\n    \"blockNumber\": \"0x2a828b8\"\n}\n```\n\n## Mocking\n\nAdding the `mocked=true` query param to the widget URL will make the widget use mocked data and skip actual transactions. This is useful for testing and development purposes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethersphere%2Fmultichain-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fethersphere%2Fmultichain-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fethersphere%2Fmultichain-widget/lists"}