{"id":26651702,"url":"https://github.com/dialectlabs/blinks-react-native","last_synced_at":"2025-04-11T05:08:46.286Z","repository":{"id":250344511,"uuid":"832125889","full_name":"dialectlabs/blinks-react-native","owner":"dialectlabs","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-12T14:22:15.000Z","size":3700,"stargazers_count":13,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T05:08:38.830Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dialectlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2024-07-22T12:07:20.000Z","updated_at":"2025-03-03T07:21:20.000Z","dependencies_parsed_at":"2024-11-07T15:19:45.220Z","dependency_job_id":"183dfaa9-465d-461d-8067-dfa4bae08d3f","html_url":"https://github.com/dialectlabs/blinks-react-native","commit_stats":null,"previous_names":["dialectlabs/blinks-react-native"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dialectlabs","download_url":"https://codeload.github.com/dialectlabs/blinks-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345266,"owners_count":21088244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2025-03-25T03:05:08.200Z","updated_at":"2025-04-11T05:08:46.225Z","avatar_url":"https://github.com/dialectlabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dialectlabs/blinks-react-native\n\nReact Native SDK for rendering blinks for Solana Actions on mobile dApps. Check out our [documentation](https://docs.dialect.to) for more information on what actions and blinks are and how to build them.\n\n## Installation\n\n```console\n# npm\nnpm i @dialectlabs/blinks-react-native\n\n#yarn\nyarn add @dialectlabs/blinks-react-native\n```\n\n## Adding the Blink Component\n\nThe following imports need to be made to simplify the blink integration:\n- `useAction` hook and `ActionAdapter` type from `@dialectlabs/blinks-react-native`\n- `Blink` component from `@dialectlabs/blinks-react-native`\n\nA `getWalletAdapter` function has to be defined to generate an adapter of type `ActionAdapter` for interactions with user wallets like wallet connect and signing transactions through the React Native dApp.\n\nAfter that, the `Blink` component can be used in the React Native dApp to render the blink. It takes the following props:\n- `theme` - has the styling for the blink to be rendered\n- `action` - object returned by the `useAction` function (which requires the adapter from `getWalletAdapter` and Action URL)\n- `website` - the complete URL of the Action\n- `websiteText` - The domain name of the Action URL\n\nAn [example](/example/src/Example.tsx) of this is:\n\n```js\n    import {\n      Blink,\n      BlockchainIds,\n      useAction,\n      createSignMessageText,\n      type ActionAdapter,\n    } from '@dialectlabs/blinks-react-native';\n    import { PublicKey } from '@solana/web3.js';\n    import type React from 'react';\n\n    function getWalletAdapter(): ActionAdapter {\n      return {\n        connect: async (_context) =\u003e {\n          console.log('connect');\n          return PublicKey.default.toString();\n        },\n        signTransaction: async (_tx, _context) =\u003e {\n          console.log('signTransaction');\n          return {\n            signature: 'signature',\n          };\n        },\n        confirmTransaction: async (_signature, _context) =\u003e {\n          console.log('confirmTransaction');\n        },\n        signMessage: async (message: string | SignMessageData, _context) =\u003e {\n          const messageToSign =\n            typeof message === 'string' ? message : createSignMessageText(message);\n          console.log('signMessage', messageToSign);\n          return { signature: 'signature' };\n        },\n        metadata: { supportedBlockchainIds: [BlockchainIds.SOLANA_MAINNET] },\n      };\n    }\n\n    export const BlinkInTheWalletIntegrationExample: React.FC\u003c{\n      url: string; // could be action api or website url\n    }\u003e = ({ url }) =\u003e {\n      const adapter = getWalletAdapter();\n      const { action } = useAction({ url });\n\n      if (!action) {\n        // return placeholder component\n      }\n      const actionUrl = new URL(url);\n      return (\n          \u003cBlink\n          theme={{\n              '--blink-button': '#1D9BF0',\n              '--blink-border-radius-rounded-button': 9999,\n              // and any other custom styles\n          }}\n          adapter={adapter}\n          action={action}\n          websiteUrl={actionUrl.href}\n          websiteText={actionUrl.hostname}\n          /\u003e\n      );\n    };\n```\n\n## Customizing Blink Styles\n\nThe blink styles can be customized by passing a `theme` prop to the `Blink` component. The theme object can include any properties you'd like to override from the default theme:\n\n```js\n{\n    '--blink-bg-primary': '#ffffff',\n    '--blink-bg-secondary': '#f2f3f5',\n    '--blink-button': '#2a2a2b',\n    '--blink-button-disabled': '#737373',\n    '--blink-button-hover': '#323335',\n    '--blink-button-success': '#09cbbf1a',\n    '--blink-icon-error': '#f71a05',\n    '--blink-icon-error-hover': '#ff402e',\n    '--blink-icon-primary': '#737373',\n    '--blink-icon-primary-hover': '#888989',\n    '--blink-icon-warning': '#d55f00',\n    '--blink-icon-warning-hover': '#ef6f08',\n    '--blink-input-bg': '#ffffff',\n    '--blink-input-bg-disabled': '#dee1e7',\n    '--blink-input-bg-selected': '#08c0b4',\n    '--blink-input-stroke': '#c4c6c8',\n    '--blink-input-stroke-disabled': '#dee1e7',\n    '--blink-input-stroke-error': '#ff402e',\n    '--blink-input-stroke-hover': '#b3b3b3',\n    '--blink-input-stroke-selected': '#08c0b4',\n    '--blink-stroke-error': '#ff9696',\n    '--blink-stroke-primary': '#d7d7d7',\n    '--blink-stroke-secondary': '#ebebeb',\n    '--blink-stroke-warning': '#ffbc6e',\n    '--blink-text-brand': '#08c0b4',\n    '--blink-text-button': '#ffffff',\n    '--blink-text-button-disabled': '#f2f3f5',\n    '--blink-text-button-success': '#00a095',\n    '--blink-text-error': '#f71a05',\n    '--blink-text-error-hover': '#ff402e',\n    '--blink-text-input': '#232324',\n    '--blink-text-input-disabled': '#b3b3b3',\n    '--blink-text-input-placeholder': '#737373',\n    '--blink-text-link': '#737373',\n    '--blink-text-link-hover': '#888989',\n    '--blink-text-primary': '#232324',\n    '--blink-text-secondary': '#434445',\n    '--blink-text-success': '#00a095',\n    '--blink-text-warning': '#d55f00',\n    '--blink-text-warning-hover': '#ef6f08',\n    '--blink-transparent-error': '#ff96961a',\n    '--blink-transparent-grey': '#b3b3b31a',\n    '--blink-transparent-warning': '#ffbc6e1a',\n\n    '--blink-border-radius-rounded-lg': 4,\n    '--blink-border-radius-rounded-xl': 8,\n    '--blink-border-radius-rounded-2xl': 16,\n    '--blink-border-radius-rounded-button': 8,\n    '--blink-border-radius-rounded-input': 8,\n    '--blink-border-radius-rounded-input-standalone': 8,\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdialectlabs%2Fblinks-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdialectlabs%2Fblinks-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdialectlabs%2Fblinks-react-native/lists"}