Integrate CAML Metamask snap link

[ysfdev2]

Add a new page /metamask similar to the discord bot integration page. The page allows user to integrate/connect CAML metamask snap

Site Logic

If the user does not have Metamask Flask wallet install. A button to install metamask should be displayed to redirect to https://metamask.io/flask/

Otherwise,

• Verify if the caml snap is installed. If true, display button as Connected
• Otherwise onnect button which sends RPC request to connect CAML snap.

Tech Details

Provider to detect is Metamask is installed https://www.npmjs.com/package/@metamask/detect-provider

<script src="https://unpkg.com/@metamask/detect-provider/dist/detect-provider.min.js"></script>
<script type="text/javascript">
  const provider = await detectEthereumProvider()

  if (provider) {
    // handle provider
  } else {
    // handle no provider
  }
</script>

Request to check which snaps are instaled: https://docs.metamask.io/snaps/reference/rpc-api/#wallet_requestsnaps

try {
  const result = await window.ethereum.request({
    method: 'wallet_requestSnaps',
    params: {
      'npm:@container23/caml-metamask-snap': {},
    },
  });

  console.log(result);
  // TODO: check if caml snap is `enabled`

} catch (error) {
  console.log(error);
}

[ysfdev2]

Dev completed as part of #42 The MetaMask integration site is available at https://caml.container23.com/metamask.