feat: use wallet connection component

[samsiegart]

Requires the WIP @agoric/react-components lib in https://github.com/Agoric/ui-kit/tree/react-components/packages/react-components:

// In home dir:
$ git clone [email protected]:Agoric/ui-kit.git
$ cd ui-kit
$ git checkout react-components
$ yarn install
$ cd packages/react-components
$ yarn build
$ yarn link

// In dapp-offer-up:
$ cd ui
$ yarn link "@agoric/react-components"

Also requires this ses patch endojs/endo#2030:

// In home dir:
$ [email protected]:endojs/endo.git
$ git checkout markm-2029-workaround-mobix-override-mistake
$ cd endo/packages/ses
$ yarn && yarn build
$ yarn link

// In dapp-offer-up:
$ cd ui
$ yarn link "ses"

[LuqiPan]

remark

I just want to report back with several errors that I observed adopting this code in dapp-agoric-basics. So far the UI is still displaying things so I don't know the implications and if these are worth fixing.

[LuqiPan]

I got an error for this line

Could not find a declaration file for module '@agoric/ui-components'

[LuqiPan]

I got an error on this line.

Property 'Buffer' does not exist on type 'typeof globalThis'.

[samsiegart]

@LuqiPan Does yarn build work? That command invokes tsc, so if it succeeds then there are no type-errors.

I have noticed vscode shows me type errors, but not the actual build step. If I put in // @ts-expect-error xxx above those lines to appease vscode, the build step then fails with unused ts-expect-error. Maybe there's some mismatch going on with the IDE not seeing the same types as vite to look into.

[LuqiPan]

I still get an error with yarn build

yarn build
yarn run v1.22.21
$ tsc && vite build
src/components/Inventory.tsx:2:38 - error TS7016: Could not find a declaration file for module '@agoric/ui-components'. '/Users/luqi/github/Agoric/dapp-agoric-basics/node_modules/@agoric/ui-components/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/agoric__ui-components` if it exists or add a new declaration (.d.ts) file containing `declare module '@agoric/ui-components';`

2 import { stringifyAmountValue } from '@agoric/ui-components';
                                       ~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in src/components/Inventory.tsx:2

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Ref: my source code is at https://github.com/Agoric/dapp-agoric-basics/tree/977-mint-tickets-ui/interchain-ui

[samsiegart]

@LuqiPan Ah gotcha, try declaring the module like this https://github.com/Agoric/dapp-offer-up/blob/main/ui/src/vite-env.d.ts#L3-L5. Though ui-components really ought to export types to avoid this need, I created an issue here: Agoric/ui-kit#84

I'm not sure why the Buffer issue shows up in one dapp but not the other yet, but a ts-expect-error should be ok for now

[LuqiPan]

Thank you. That resolved my error and yarn build runs successfully now.

[LuqiPan]

yarn link "ses"

This is no longer needed as ses 1.3.0 was published several hours ago and it contains the fix (endojs/endo#2030).