feat: add flipper ui example

[DoubleOTheven]

• Add ui shared components with wallet connect, styling, etc
• Add flipper example

Run pnpm i && pnpm build:ui, then pnpm flipper

[peetzweg]

Works locally, although getting these errors when running the local dev server. Could we fix these?

pnpm flipper

> [email protected] flipper /Users/username/git/ink-examples
> pnpm --filter ui dev & pnpm --filter flipper dev


> [email protected] dev /Users/username/git/ink-examples/ui
> vite build --watch && pnpm run build-tailwind


> [email protected] dev /Users/username/git/ink-examples/flipper/frontend
> vite


  VITE v4.3.9  ready in 1067 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
vite v4.3.9 building for production...

watching for file changes...

build started...
Error:   Failed to scan for dependencies from entries:
  /Users/username/git/ink-examples/flipper/frontend/index.html

  ✘ [ERROR] Failed to resolve entry for package "ui". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

    ../../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1360:21:
      1360 │         let result = await callback({
           ╵                      ^

    at packageEntryFailure (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:23382:11)
    at resolvePackageEntry (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:23379:5)
    at tryNodeResolve (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:23113:20)
    at Context.resolveId (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:22874:28)
    at Object.resolveId (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42847:46)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async resolve (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:43145:26)
    at async file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:43322:34
    at async requestCallbacks.on-resolve (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1360:22)
    at async handleRequest (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:723:13)

  This error came from the "onResolve" callback registered here:

    ../../node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1279:20:
      1279 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:43312:19)
    at handlePlugins (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1279:21)
    at buildOrContextImpl (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:968:5)
    at Object.buildOrContext (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:776:5)
    at /Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2172:68
    at new Promise (<anonymous>)
    at Object.context (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2172:27)
    at Object.context (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:2012:58)
    at prepareEsbuildScanner (file:///Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:43097:26)

  The plugin "vite:dep-scan" was triggered by this import

    src/App.tsx:3:55:
      3 │ import { Button, Card, ConnectButton, InkLayout } from 'ui';
        ╵                                                        ~~~~


    at failureErrorWithLog (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1048:25
    at runOnEndCallbacks (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1471:45)
    at buildResponseToResult (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1046:7)
    at /Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1058:9
    at new Promise (<anonymous>)
    at requestCallbacks.on-end (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1057:54)
    at handleRequest (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:723:19)
    at handleIncomingPacket (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:745:7)
    at Socket.readFromStdout (/Users/username/git/ink-examples/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:673:7)
transforming (400) ../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@headlessui/react/d../node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js (15:274183) Use of eval in "../node_modules/.pnpm/@[email protected][email protected]/node_modules/@lottiefiles/react-lottie-player/dist/lottie-react.esm.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 409 modules transformed.
rendering chunks (1)...Failed to resolve entry for package "ui". The package may have incorrect main/module/exports specified in its package.json.
dist/ui.es.js  550.10 kB │ gzip: 125.58 kB │ map: 985.37 kB
dist/ui.umd.js  421.46 kB │ gzip: 114.28 kB │ map: 964.83 kB
built in 4359ms.

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 11460ms.

[BABEL] Note: The code generator has deoptimised the styling of /Users/username/git/ink-examples/ui/dist/ui.es.js as it exceeds the max of 500KB.
10:13:09 AM [vite] ✨ new dependencies optimized: react-dom
10:13:09 AM [vite] ✨ optimized dependencies changed. reloading
[BABEL] Note: The code generator has deoptimised the styling of /Users/username/git/ink-examples/ui/dist/ui.es.js as it exceeds the max of 500KB.
/Users/username/git/ink-examples/flipper/frontend:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  [email protected] dev: `vite`
Exit status 1
 ELIFECYCLE  Command failed with exit code 1.

[peetzweg]

Looks like we use the useink notification system here. Errors are not shown to the user yet. I think our example should also showcase how to handle errors at least minimally, showing them in the ui instead of silently failing in the console logs.

https://github.com/paritytech/ink-examples/blob/1ffb6a1727b7c1e10e8470e54bc779c9a0af2fdd/flipper/frontend/src/main.tsx#L22-L24

shorter-smol.mov