|
| 1 | +--- |
| 2 | +sidebar_position: 8 |
| 3 | +--- |
| 4 | + |
| 5 | +# How to integrate with a front-end |
| 6 | + |
| 7 | +This section will show how to integrate your smart contract to a front-end, so users can interact with it. |
| 8 | +We assume that you already have the basic knowledge of front-end development, so we will not spend much time introducing this part of the code, but mostly be focusing on how to interact with the smart contract in the front-end project. |
| 9 | + |
| 10 | +## Create a project |
| 11 | + |
| 12 | +First, create the root directory of the project. |
| 13 | + |
| 14 | +```bash |
| 15 | +mkdir scrypt-web-example |
| 16 | +cd scrypt-web-example |
| 17 | +``` |
| 18 | + |
| 19 | +### Create a contract project |
| 20 | + |
| 21 | +Create a `Helloworld` project and build it: |
| 22 | + |
| 23 | +```bash |
| 24 | +npx @scrypt-inc/cli-btc project helloworld |
| 25 | +cd helloworld |
| 26 | +npm run build |
| 27 | +``` |
| 28 | + |
| 29 | +See the [helloworld tutorial](../tutorials/hello-world.md) |
| 30 | + |
| 31 | +### Create a frontend project |
| 32 | + |
| 33 | + |
| 34 | +Create your front-end project using React, Next, Vue, Angular, or Svelte. |
| 35 | + |
| 36 | +### React |
| 37 | + |
| 38 | +Run the following command to create a [React](https://react.dev/) project named `helloworld`. |
| 39 | + |
| 40 | +```bash |
| 41 | +cd .. |
| 42 | +npx create-react-app frontend --template typescript |
| 43 | +``` |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +We will do most work under the `src` directory. |
| 48 | + |
| 49 | +### Next.js |
| 50 | + |
| 51 | +Run the following command to create a [Next.js](https://nextjs.org/) project. |
| 52 | + |
| 53 | +```bash |
| 54 | +npx create-next-app frontend --typescript --use-npm |
| 55 | +``` |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +### Vue.js |
| 60 | + |
| 61 | +#### Vite |
| 62 | + |
| 63 | +Run the following command to create a [Vue](https://vuejs.org/) 3.x project bundled with [Vite](https://vitejs.dev/). |
| 64 | + |
| 65 | +```bash |
| 66 | +npm create vue@3 |
| 67 | +``` |
| 68 | + |
| 69 | + |
| 70 | + |
| 71 | +If you'd like to use Vue 2.x, run the following command to initialize the project scaffold. |
| 72 | + |
| 73 | +```bash |
| 74 | +npm create vue@2 |
| 75 | +``` |
| 76 | + |
| 77 | + |
| 78 | + |
| 79 | +#### Webpack |
| 80 | + |
| 81 | +Run the following command to create a [Vue](https://vuejs.org/) project bundled with [Webpack](https://webpack.js.org/). |
| 82 | + |
| 83 | +```bash |
| 84 | +npx @vue/cli create frontend |
| 85 | +``` |
| 86 | + |
| 87 | +:::tip |
| 88 | +Vue 3.x and 2.x bundled with Webpack are both supported. |
| 89 | +::: |
| 90 | + |
| 91 | +When setting up the project, select `Manually select features` and enable TypeScript. |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | +### Angular |
| 98 | + |
| 99 | +Run the following command to create an [Angular](https://angular.io/) project. |
| 100 | + |
| 101 | +```bash |
| 102 | +npx @angular/cli new frontend |
| 103 | +``` |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +### Svelte |
| 108 | + |
| 109 | +Run the following command to create a [Svelte](https://svelte.dev/) project. |
| 110 | + |
| 111 | +```bash |
| 112 | +npm create svelte@latest frontend |
| 113 | +``` |
| 114 | + |
| 115 | + |
| 116 | + |
| 117 | +:::note |
| 118 | +Currently, we support front-end frameworks [React](https://react.dev), [Next.js](https://nextjs.org/), [Vue](https://vuejs.org/), [Angular](https://angular.io/), and [Svelte](https://svelte.dev/). We anticipate to add support for other frameworks over time. |
| 119 | +::: |
| 120 | + |
| 121 | +## Install the contract dependency |
| 122 | + |
| 123 | +```bash |
| 124 | +cd frontend |
| 125 | +npm install @scrypt-inc/scrypt-ts-btc |
| 126 | +npm install ../helloworld |
| 127 | +``` |
| 128 | + |
| 129 | +This command installs the dependencies and configures the contract development environment. |
| 130 | +After this, we are ready to go! |
| 131 | + |
| 132 | +## Integrate Wallet |
| 133 | + |
| 134 | +You will integrate [unisat](https://unisat.io), a browser extension wallet, similar to [MetaMask](https://metamask.io/), into the project. |
| 135 | + |
| 136 | +To request access to the wallet, you can use its APIs to create a signer: |
| 137 | + |
| 138 | +```ts |
| 139 | +declare global { |
| 140 | + interface Window { |
| 141 | + unisat: UnisatAPI |
| 142 | + } |
| 143 | +} |
| 144 | +const signer = new UnisatSigner(window.unisat); |
| 145 | +``` |
| 146 | + |
| 147 | +create a provider: |
| 148 | + |
| 149 | +```ts |
| 150 | +const provider = new MempoolProvider('fractal-testnet') |
| 151 | +``` |
| 152 | + |
| 153 | +create a psbt and use signer and provider to signer and deploy it: |
| 154 | + |
| 155 | +```ts |
| 156 | +const address = await signer.getAddress(); |
| 157 | +const psbt = new ExtPsbt(); |
| 158 | +const utxos = await provider.getUtxos(address); |
| 159 | +const feeRate = await provider.getFeeRate(); |
| 160 | +psbt.addUTXO(utxos) |
| 161 | + .addCovenantOutput(covenant, satoshis) |
| 162 | + .change(address, feeRate); |
| 163 | + |
| 164 | +// sign the psbts |
| 165 | +const [signedPsbtHex] = await signer.signPsbts(psbt.psbtOptions()); |
| 166 | + |
| 167 | +// combine and finalize the signed psbts |
| 168 | +const signedPsbt = ExtPsbt.fromHex(signedPsbtHex).finalizeAllInputs(); |
| 169 | + |
| 170 | +// broadcast the psbts |
| 171 | +const deployTx = signedPsbt.extractTransaction(); |
| 172 | +await provider.broadcast(deployTx.toHex()); |
| 173 | +``` |
| 174 | + |
| 175 | +the scrypt SDK `@scrypt-inc/scrypt-ts-btc` provide `deploy` and `call` features, just use them in `App.tsx`: |
| 176 | + |
| 177 | +```ts |
| 178 | +import React from 'react'; |
| 179 | +import logo from './logo.svg'; |
| 180 | +import './App.css'; |
| 181 | +import { call, Covenant, deploy, MempoolProvider, sha256, toByteString, UnisatAPI, UnisatSigner } from '@scrypt-inc/scrypt-ts-btc'; |
| 182 | +import { Helloworld } from 'helloworld'; |
| 183 | + |
| 184 | +declare global { |
| 185 | + interface Window { |
| 186 | + unisat: UnisatAPI |
| 187 | + } |
| 188 | +} |
| 189 | + |
| 190 | +async function deployAndCall() { |
| 191 | + |
| 192 | + const covenant = Covenant.createCovenant(new Helloworld(sha256(toByteString("hello world", true)))) |
| 193 | + |
| 194 | + const provider = new MempoolProvider('fractal-testnet') |
| 195 | + const signer = new UnisatSigner(window.unisat); |
| 196 | + |
| 197 | + const deployTx = await deploy(signer, provider, covenant); |
| 198 | + |
| 199 | + console.log(`Helloworld contract deployed: ${deployTx.getId()}`) |
| 200 | + |
| 201 | + const callTx = await call(signer, provider, covenant, { |
| 202 | + invokeMethod: (contract: Helloworld) => { |
| 203 | + contract.unlock(toByteString('hello world', true)); |
| 204 | + }, |
| 205 | + }); |
| 206 | + |
| 207 | + console.log('Helloworld contract `unlock` called: ', callTx.getId()); |
| 208 | +} |
| 209 | + |
| 210 | +function App() { |
| 211 | + return ( |
| 212 | + <div className="App"> |
| 213 | + <header className="App-header"> |
| 214 | + <img src={logo} className="App-logo" alt="logo" /> |
| 215 | + <button onClick={deployAndCall}>Deploy and Call</button> |
| 216 | + </header> |
| 217 | + </div> |
| 218 | + ); |
| 219 | +} |
| 220 | + |
| 221 | +export default App; |
| 222 | +``` |
| 223 | + |
| 224 | +Afterwards, you can interact with the contract from the front-end. |
| 225 | + |
| 226 | + |
| 227 | +Go to the [sCrypt Academy](https://academy.scrypt.io) to see a step-by-step guide on how to build a Tic-Tac-Toe game on chain. |
0 commit comments