Skip to content

Commit b50fb36

Browse files
fsherzhelezkov
fsher
and
zhelezkov
authored
Feature/teleporting buttons (#23)
* feat: add ability to pass a specific component to render * feat: implement ui for single component blink * feat: add example, caption fixes * feat: remove restrictions on live data and chaining * feat: improve partial action condition * chore: remove todo comment about action mount callback * feat: allow returning null for partial action, end chain if fn returns null * feat: rename compact blink to miniblink, rename prop * feat: rename example to mini blinks * chore: remove unnecessary configs and files * chore: adjust warn log * add .env to example * add readme * chore: update warn log --------- Co-authored-by: Nick Zhelezkov <[email protected]>
1 parent 091734e commit b50fb36

28 files changed

+757
-61
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ web_modules/
100100

101101
# dotenv environment variable files
102102

103-
.env
103+
# .env
104104
.env.development.local
105105
.env.test.local
106106
.env.production.local

‎bun.lockb‎

60.5 KB
Binary file not shown.

‎examples/mini-blinks/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_PUBLIC_RPC_URL=https://api.mainnet-beta.solana.com

‎examples/mini-blinks/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Mini Blinks - Dialect Example</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/mini-blinks/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "mini-blinks",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@dialectlabs/blinks": "^0.10.0",
14+
"@solana/wallet-adapter-react": "^0.15.0",
15+
"@solana/wallet-adapter-react-ui": "^0.9.0",
16+
"@solana/web3.js": "^1.95.1",
17+
"react": "^18.3.1",
18+
"react-dom": "^18.3.1"
19+
},
20+
"devDependencies": {
21+
"@eslint/js": "^9.9.0",
22+
"@types/react": "^18.3.3",
23+
"@types/react-dom": "^18.3.0",
24+
"@vitejs/plugin-react": "^4.3.1",
25+
"autoprefixer": "^10.4.20",
26+
"eslint": "^9.9.0",
27+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
28+
"eslint-plugin-react-refresh": "^0.4.9",
29+
"globals": "^15.9.0",
30+
"postcss": "^8.4.47",
31+
"tailwindcss": "^3.4.12",
32+
"typescript": "^5.5.3",
33+
"typescript-eslint": "^8.0.1",
34+
"vite": "^5.4.1",
35+
"vite-plugin-node-polyfills": "^0.22.0"
36+
}
37+
}

‎examples/mini-blinks/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎examples/mini-blinks/readme.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# MiniBlink example
2+
3+
## Running example
4+
1. `bun i`
5+
2. Go to `.env` and replace `VITE_PUBLIC_RPC_URL` with your private rpc if you have any
6+
3. `bun run dev`

‎examples/mini-blinks/src/App.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {
2+
MiniBlink,
3+
useAction,
4+
useActionsRegistryInterval,
5+
} from '@dialectlabs/blinks';
6+
import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana';
7+
import '@dialectlabs/blinks/index.css';
8+
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
9+
import '@solana/wallet-adapter-react-ui/styles.css';
10+
11+
function App() {
12+
useActionsRegistryInterval();
13+
14+
const { adapter } = useActionSolanaWalletAdapter(
15+
import.meta.env.VITE_PUBLIC_RPC_URL,
16+
);
17+
const { action, isLoading } = useAction({
18+
url: 'solana-action:https://dial.to/api/donate',
19+
adapter,
20+
});
21+
22+
return (
23+
<div className="flex h-screen w-screen items-center justify-center">
24+
<div className="flex min-w-[400px] flex-col items-center">
25+
<h1 className="mb-4 text-center text-4xl font-bold">Mini Blinks</h1>
26+
<div className="mb-4 w-full">
27+
{isLoading || !action ? (
28+
<span>Loading</span>
29+
) : (
30+
<MiniBlink
31+
selector={(currentAction) =>
32+
currentAction.actions.find((a) => a.label === 'Donate')!
33+
}
34+
action={action}
35+
/>
36+
)}
37+
</div>
38+
<WalletMultiButton />
39+
</div>
40+
</div>
41+
);
42+
}
43+
44+
export default App;

‎examples/mini-blinks/src/index.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.wallet-adapter-dropdown {
6+
@apply relative flex w-full;
7+
}
8+
9+
.wallet-adapter-button-trigger {
10+
@apply flex h-[40px] flex-1 items-center justify-center truncate whitespace-nowrap rounded-lg bg-gradient-wallet-button px-6 text-text font-semibold text-inverse hover:opacity-90;
11+
}
12+
13+
.wallet-adapter-dropdown-list {
14+
@apply w-full rounded-lg bg-button-primary p-1.5;
15+
}
16+
.wallet-adapter-dropdown-list-item:not([disabled]):hover {
17+
background-color: #323335;
18+
}
19+
.wallet-adapter-modal-title {
20+
@apply text-highlight font-bold;
21+
}

‎examples/mini-blinks/src/main.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StrictMode } from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import App from './App.tsx';
4+
import './index.css';
5+
import { Providers } from './providers.tsx';
6+
7+
createRoot(document.getElementById('root')!).render(
8+
<StrictMode>
9+
<Providers>
10+
<App />
11+
</Providers>
12+
</StrictMode>,
13+
);

0 commit comments

Comments
 (0)