I just created a new React template from scratch with npx create-react-app my-app --template typescript
.
Then I added beacon and taquito package.
And then I wanted as a test first to try to create a connect/disconnect wallet button. But everytime I try to run npm run start
it throws this:
Compiled with problems:X
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in '/home/Programming/TestProjects/tezwallet/node_modules/cipher-base'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
I cant figure out why as I really did not change anything after installing the react template. When I look at Taquito Documentation or Beacon I dont see nothing related to this. Maybe I am missing a piece here I dont know? Do I need to do or add something else before I can start right away after creating a React project?
So this is how my dependencies look after installing, I changed nothing only added taquito and beacon:
"dependencies": {
"@airgap/beacon-sdk": "^3.2.0",
"@taquito/beacon-wallet": "^14.0.0",
"@taquito/taquito": "^14.0.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.62",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
}
Basically my code structure looks like this. I tried to trimm it down for my problem. I also created it on Codesandbox. But weird thing is that there I am getting the error createHash is not a function
while in my React App its throwing always:
REAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
config.ts
import { DAppClientOptions, NetworkType } from '@airgap/beacon-sdk';
export const getPreferredRPC = () => 'https://mainnet.smartpy.io';
export const getPreferredNetworkType = () => NetworkType.MAINNET;
export const getWalletConfig = (): DAppClientOptions => {
return {
name: 'Tezos Wallet',
preferredNetwork: NetworkType.MAINNET,
};
};
TaquitoWallet.ts
import { BeaconWallet } from '@taquito/beacon-wallet';
import { TezosToolkit } from '@taquito/taquito';
import { AccountInfo, PermissionResponseOutput } from '@airgap/beacon-sdk';
import { getPreferredNetworkType, getPreferredRPC, getWalletConfig } from './config';
export class TaquitoWallet extends BeaconWallet {
private static instance: TaquitoWallet;
private constructor() {
super(getWalletConfig());
}
public static getInstance(): TaquitoWallet {
if (!TaquitoWallet.instance) {
TaquitoWallet.instance = new TaquitoWallet();
}
return TaquitoWallet.instance;
}
public getActiveAccount(): Promise<AccountInfo | undefined> {
return this.client.getActiveAccount();
}
public syncAccount(networkType = getPreferredNetworkType()): Promise<PermissionResponseOutput> {
return this.client.requestPermissions({ network: { type: networkType } });
}
}
export class Tezos extends TezosToolkit {
private static instance: Tezos;
private constructor() {
super(getPreferredRPC());
this.setWalletProvider(TaquitoWallet.getInstance());
}
public static getInstance(): Tezos {
if (!Tezos.instance) {
Tezos.instance = new Tezos();
}
return Tezos.instance;
}
}
index.ts
export { TaquitoWallet } from './TaquitoWallet';
export { Tezos } from './TaquitoWallet';
And my Connect Button in my App.tsx
import React, { useState } from "react";
import { AccountInfo } from "@airgap/beacon-sdk";
import { TaquitoWallet } from "./taquito";
//import { AccountMenu } from "./AccountMenu";
const styles = {
div: {
textAlign: "center",
border: "7px solid black",
width: "100%",
height: "100vw",
paddingTop: "400px",
} as React.CSSProperties,
button: {
fontSize: "20px",
},
};
function AccountButton(props: { accountInfo?: AccountInfo }) {
const handleConnect = () => TaquitoWallet.getInstance().syncAccount();
const handleClick = (event: React.MouseEvent) => {
//setAnchorEl(event.currentTarget);
};
if (props.accountInfo) {
console.log(props.accountInfo.address);
return (
<div style={styles.div}>
<button style={styles.button} onClick={handleClick}>
<p>connected</p>
</button>
</div>
);
} else {
return (
<div style={styles.div}>
<button style={styles.button} onClick={handleConnect}>
Connect
</button>
</div>
);
}
}
export default AccountButton;
I appreciate any help.