connect custom frontend to my local substrate

Question

I Created custome pallet with substrate in my local system .

I gonna to connect my custome front-end ( Angular ) to my local substrate .

i tryied to do it in angular with these codes :

import { Component } from '@angular/core';
// import { ApiPromise } from "@polkadot/api";
import {
  ScProvider,
  WellKnownChain,
} from "@polkadot/rpc-provider/substrate-connect";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'pay-qr';
  /**
   *
   */
   constructor() {
    this.test().then();
  }

  async test():Promise<void> {
    const provider = new ScProvider(ScProvider.WellKnownChain.polkadot);

    await provider.connect();
    
    const version = await provider.send('chain_getBlockHash', []);
    console.log('latest block Hash', version);
    // const polkadotApi = await ApiPromise.create({ provider });
    // await polkadotApi.rpc.chain.subscribeNewHeads((lastHeader) => {
    //   console.log(lastHeader.number.toString());
    // });
  }
}

but i did not work and did not connect to my lcoal substrate .

how can i do that ?

Answer 1

If you are running a local substrate node you must specify the local address to connect to it, if you haven't change anything in your node should be ws://127.0.0.1:9944

A code example in your front-end code to test it:

const provider = new WsProvider("ws://127.0.0.1:9944");
const api = await ApiPromise.create({ provider: wsProvider });

const chain = await api.rpc.system.chain();
console.log(`----- Chain: ${chain} -----`)