# 배경 * Aleo 지갑인 Leo Wallet과 웹 프론트엔드를 연결하는 실습이다 # 사전 준비 * **LEO 개발 환경 설치하기** * [맥 전용 개발 환경 설치 문서 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/3f170b1f-0761-455e-b700-e62253310770) * [윈도우 전용 개발 환경 설치 문서 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/c75e6405-9da9-4f3d-8f52-56ab3f02bd79) * **미션 결과물 참고하기** * 미션 진행 참고용 Aleo\_DApp\_Practice : [[🔗](https://github.com/c0np4nn4/Aleo_DApp_Practice/tree/main/1_connect_wallet)] * 결과물을 참고하고 싶다면, 위 깃헙 링크를 통해 `git clone` 해보길 권장한다 # 수행 방법 * 전체적인 미션의 수행 흐름은 아래와 같습니다. 1. React + Typescript 프로젝트를 생성합니다. 2. demox-labs 에서 제공하는 [aleo-wallet-adapter](https://github.com/demox-labs/aleo-wallet-adapter) 를 모듈로 추가합니다. 3. App.tsx 파일을 붙여넣기 하여 구동을 확인합니다. * 우선 아래 사진과 같이 React + Typescript 프로젝트를 생성합니다. ```bash npx create-react-app connect_wallet --template typescript ``` * ![image](https://github.com/c0np4nn4/my_first_leo_program/assets/49471288/6457879f-e242-49f0-b0d2-49ee46bea5ac) * `connect_wallet` 프로젝트 디렉토리로 이동한 후 아래 명령어를 입력하여 aleo-wallet-adapter 모듈을 설치합니다. ```bash cd connect_wallet npm install --save \ @demox-labs/aleo-wallet-adapter-base \ @demox-labs/aleo-wallet-adapter-react \ @demox-labs/aleo-wallet-adapter-reactui \ @demox-labs/aleo-wallet-adapter-leo \ react ``` * 또, 프론트엔드에 적용할 *bootstrap* 과 *toastify* 모듈도 설치합니다. ```bash npm install bootstrap npm install react-bootstrap npm install react-toastify ``` * 아래 코드를 App.tsx에 덮어쓰기 합니다. ```typescript import { useMemo, useState } from "react"; import { WalletProvider, } from "@demox-labs/aleo-wallet-adapter-react"; import { WalletModalProvider, WalletMultiButton, } from "@demox-labs/aleo-wallet-adapter-reactui"; import { LeoWalletAdapter } from "@demox-labs/aleo-wallet-adapter-leo"; import { DecryptPermission, WalletAdapterNetwork, } from "@demox-labs/aleo-wallet-adapter-base"; import "./App.css"; import { Button, Form } from "react-bootstrap"; import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; // Default styles that can be overridden by your app require("@demox-labs/aleo-wallet-adapter-reactui/styles.css"); export const App = () => { const wallets = useMemo( () => [ new LeoWalletAdapter({ appName: "Leo Demo App", }), ], [] ); return (

Hello, Aleo!

); }; const WalletToolBox = () => { const [programId, setProgramId] = useState(""); const [hyperlink, setHyperlink] = useState(null); const handleGenerateHyperlink = () => { if (programId && programId.endsWith(".aleo")) { const explorerLink = `https://explorer.hamp.app/program?id=${programId}`; toast.success("Hyperlink has been generated."); setHyperlink(explorerLink); } else { // Display an error toast message toast.error("Invalid program ID. Please enter a valid program ID ending with '.aleo'."); setHyperlink(null); } }; return (

Program ID: setProgramId(e.target.value)} /> {hyperlink && (

Generated Hyperlink:

🔗 Link

)}

); }; export default App; ``` * 또, `index.tsx` 도 아래 한 줄을 마지막 `import` 구문 밑 줄에 추가합니다. (6번 줄) ```typescript import 'bootstrap/dist/css/bootstrap.min.css'; ``` * ![image](https://github.com/c0np4nn4/my_first_leo_program/assets/49471288/d85c97c5-712a-470d-a307-6b3434526734) * 이제 `npm i` 를 입력하여 필요한 모듈을 마저 설치하고 `npm start` 를 입력해 `localhost:3000` 에서 구동되는 것을 확인합니다. * ![image](https://github.com/c0np4nn4/my_first_leo_program/assets/49471288/d3bb7a95-fff8-4d5d-8115-bea9fc40ad88) * ![image](https://github.com/c0np4nn4/my_first_leo_program/assets/49471288/83465ed2-a983-4907-868b-2f31a6a4aed8)

지갑 연결 페이지 만들기