{"id":13454089,"url":"https://github.com/dialectlabs/blinks","last_synced_at":"2025-05-16T00:07:03.887Z","repository":{"id":244383042,"uuid":"809772615","full_name":"dialectlabs/blinks","owner":"dialectlabs","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-04T10:43:40.000Z","size":1041,"stargazers_count":106,"open_issues_count":2,"forks_count":55,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-10T11:37:12.992Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://docs.dialect.to/documentation/actions/blinks","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/dialectlabs.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}},"created_at":"2024-06-03T12:25:48.000Z","updated_at":"2025-05-01T23:28:33.000Z","dependencies_parsed_at":"2024-06-25T13:02:51.711Z","dependency_job_id":"8a24d863-e519-4182-b5cb-ec53be7375df","html_url":"https://github.com/dialectlabs/blinks","commit_stats":null,"previous_names":["dialectlabs/actions-ui","dialectlabs/blinks"],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dialectlabs%2Fblinks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dialectlabs","download_url":"https://codeload.github.com/dialectlabs/blinks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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":"2024-07-31T08:00:50.827Z","updated_at":"2025-05-16T00:06:58.847Z","avatar_url":"https://github.com/dialectlabs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# @dialectlabs/blinks \u0026mdash; the [Actions](https://github.com/dialectlabs/actions) Interface\n\n## Usage\n\n### Installation\n\n#### Solana\n\n```bash\nnpm add @dialectlabs/blinks @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui\n```\n\n#### EVM\n\n```bash\nnpm add @dialectlabs/blinks viem wagmi\n```\n\n### Style Presets \u0026 Overriding Theme\n\n#### Style Presets\n\n`BlinkComponent` component contains a `stylePreset` prop that accepts the following values:\n\n- `default` - [dial.to](https://dial.to)-styled blink (light)\n- `x-dark` - [X](https://x.com/)-styled blink (dark)\n- `x-light` - [X](https://x.com/)-styled blink (light)\n- `custom` - clean slate, no colors, radii at all, use CSS Variables to style. See [Overriding Theme](#overriding-theme).\n\n```tsx\nimport '@dialectlabs/blinks/index.css';\nimport { BlinkComponent } from \"@dialectlabs/blinks\";\n\n\u003cBlinkComponent stylePreset=\"x-dark\" ... /\u003e\n```\n\n#### Overriding Theme\n\nIn your CSS, you can override the following CSS Variables to customize the look of the blink:\n\n```css\n/* x-dark */\n.blink.x-dark {\n  --blink-bg-primary: #202327;\n  --blink-button: #1d9bf0;\n  --blink-button-disabled: #2f3336;\n  --blink-button-hover: #3087da;\n  --blink-button-success: #00ae661a;\n  --blink-icon-error: #ff6565;\n  --blink-icon-error-hover: #ff7a7a;\n  --blink-icon-primary: #6e767d;\n  --blink-icon-primary-hover: #949ca4;\n  --blink-icon-warning: #ffb545;\n  --blink-icon-warning-hover: #ffc875;\n  --blink-input-bg: #202327;\n  --blink-input-stroke: #3d4144;\n  --blink-input-stroke-disabled: #2f3336;\n  --blink-input-stroke-error: #ff6565;\n  --blink-input-stroke-hover: #6e767d;\n  --blink-input-stroke-selected: #1d9bf0;\n  --blink-stroke-error: #ff6565;\n  --blink-stroke-primary: #1d9bf0;\n  --blink-stroke-secondary: #3d4144;\n  --blink-stroke-warning: #ffb545;\n  --blink-text-brand: #35aeff;\n  --blink-text-button: #ffffff;\n  --blink-text-button-disabled: #768088;\n  --blink-text-button-success: #12dc88;\n  --blink-text-error: #ff6565;\n  --blink-text-error-hover: #ff7a7a;\n  --blink-text-input: #ffffff;\n  --blink-text-input-disabled: #566470;\n  --blink-text-input-placeholder: #6e767d;\n  --blink-text-link: #6e767d;\n  --blink-text-link-hover: #949ca4;\n  --blink-text-primary: #ffffff;\n  --blink-text-secondary: #949ca4;\n  --blink-text-success: #12dc88;\n  --blink-text-warning: #ffb545;\n  --blink-text-warning-hover: #ffc875;\n  --blink-transparent-error: #aa00001a;\n  --blink-transparent-grey: #6e767d1a;\n  --blink-transparent-warning: #a966001a;\n\n  --blink-border-radius-rounded-lg: 0.25rem;\n  --blink-border-radius-rounded-xl: 0.5rem;\n  --blink-border-radius-rounded-2xl: 1.125rem;\n  --blink-border-radius-rounded-button: 624.9375rem;\n  --blink-border-radius-rounded-input: 624.9375rem;\n\n  /* box-shadow */\n  --blink-shadow-container: 0px 2px 8px 0px rgba(59, 176, 255, 0.22),\n    0px 1px 48px 0px rgba(29, 155, 240, 0.24);\n}\n```\n\n\u003e be sure to import these overrides after @dialectlabs/blinks styles (or by [CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) as suggested above)\n\n### Chrome Extension\n\nPackage provides an entrypoint function with styled for X Blink components\n\n```ts\n// contentScript.ts\nimport { setupTwitterObserver } from \"@dialectlabs/blinks/ext/twitter\";\nimport { BlinkSolanaConfig } from \"@dialectlabs/blinks\";\n\n// your RPC_URL is used to create a connection to confirm the transaction after action execution\nsetupTwitterObserver(new BlinkSolanaConfig(RPC_URL, {\n  metadata: {\n    supportedBlockchainIds: [BlockchainIds.SOLANA_MAINNET]\n  },\n  connect: async () =\u003e { ... },\n  signTransaction: async (tx: string) =\u003e { ... }\n}))\n\n// or\n\nimport type { BlinkAdapter, BlinkAdapterMetadata } from \"@dialectlabs/blinks\";\n\nclass MyBlinkAdapter implements BlinkAdapter {\n  async connect() { ... }\n\n  async signTransaction(tx: string) { ... }\n\n  async confirmTransaction(sig: string) { ... }\n\n  get metadata(): BlinkAdapterMetadata {\n    return {\n      supportedBlockchainIds: [BlockchainIds.SOLANA_MAINNET],\n    };\n  }\n\n  async signMessage(data: string | SignMessageData) { ... }\n}\n\nsetupTwitterObserver(new MyBlinkAdapter());\n```\n\n#### Manifest\n\n```json\n  \"content_scripts\": [\n    {\n      \"matches\": [\"https://twitter.com/*\", \"https://x.com/*\", \"https://pro.x.com/*\"],\n      \"js\": [\"src/contentScript.ts\"],\n    }\n  ]\n```\n\n## Learn More:\n\n- [Join our Discord](https://discord.gg/saydialect) - join the community and ask us a question\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdialectlabs%2Fblinks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdialectlabs%2Fblinks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdialectlabs%2Fblinks/lists"}