react+ chrome extension 개발 세팅설명 매우 좋은 설명
.
npm install –save react react-dom
npm install –save-dev webpack webpack-cli
npm install –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
.
.
아래 과정은 django + django rest framework 세팅 과정
https://vomtom.at/how-to-use-uniswap-v2-as-a-developer/virtual env설치
pip install virtualenv
python3 -m venv venv
venv/Scripts/activate
requirements.txt만들어서 django 와 djangorestframework를 타입
pip install -r requirements.txt를 통해 설치
내용은 아래 그림과 같이 설치할 라이브러리를 파일안에 기입
django-admin startproject donkey_ears
django-admin startapp api
python manage.py migrate
python manage.py makemigrations
python manage.py createsuperuser
.
npm install –save react-router-dom
npm install –save semantic-ui-react.
.
.
npm install –save cryptico
.
npm install –save bip39
bip 39을 이용하여 mnemonic phrase를 얻으려 했으나 chrome extension에서는 사용하려면 자꾸 에러 발생
npm install –save bitcore-mnemonic
npm install –save url
를 대신 사용
사용법 https://www.npmjs.com/package/bitcore-mnemonic
.
npm install –save ethereum-hdwallet
npm install –save crypto
npm install –save assert
npm install –save crypto-browserify
npm install –save stream
.
.
error solution
설치후에 계속 Module not found: Error: Can’t resolve ‘crypto’ 에러 발생 해결은 아래와 같이 했다.
https://stackoverflow.com/a/67076572
*******************************************************************
react + web3, ethers
기본적으로 react를 사용할때 function , class스타일 두가지로 이용가능하다.
react 사용시 import하는 내용
.
클래스 스타일로 이용
.
함수형태이용
.
Web3.providers.HttpProvder를 통해서 만들어진 provider를 ethers에서도 provider로 사용가능할줄 알았는데 약간 다른 형태의 provider였다.
.
react에서 하위 component에게 데이터 전달하는 방법
.
react 에서 useState사용하는 방법
const [] 에서 첫번째는 state variable 이름이고 다음은 set 함수이름
useState()안은 초기값
.
componentDidMount과 같은 역활하는 useEffect
.
window.web3에 값이 할당되면 window.ethereum 에도 비슷한 값이 할당된다.
즉 window.ethereum을 통해서도 window.web3를 통해 하던 데이터를 얻을수 있으나 정확하게 같지는 않다.
window.web3안의 eth값이 있지 않은점이 크게 다른점이다. 그래서 window.ethereum.eth는 불가능하다는 이야기다.
metamask를 이용하는 경우 Web3.providers.HttpProvider()의 작업이 필요하지 않다 metamask안에 자체 provider를 이용한다.
metamask를 이용하는 경우 자동으로 window.ethereum 값이 설정되어있으므로 이를 이용하면 된다.
.
.
.
.
.
***********************************************************************************
***********************************************************************************
redirect 작업을 위해 useNavigate()를 이용하려고 했지만 react router를 사용해야지만 사용할수 있어서 사용하지 않고
window.location.href = ’/popup.html?target=CreatePassword’; 와 같은 방법을 사용했다.
https://ncoughlin.com/posts/react-navigation-without-react-router/
.
react router 를 사용하지 못하고 (chrome extension에서는 일반 router기능을 이용할수 없음. 메타메스크의 경우 anchor # 를 이용했다. 아니면 query string을 이용해야 한다.)
.
useState를 통해 주입되는 component 내부에서 useState를 또 사용하는 경우 에러 발생
avubble 프로젝트의 app.js참고해 볼것
.
jsx에서 collection data type을 iterate 하면서 tag만들어내기
.
.
switch를 이용한 경우에 따른 component 삽입
.
chrome storage sync 삭제하기
.
pass parameters executeScript
https://stackoverflow.com/a/68640372
.
opensea get sing asset
https://docs.opensea.io/reference/retrieving-a-single-asset-testnets
{
"id": 132352212,
"num_sales": 0,
"background_color": null,
"image_url": “https://i.seadn.io/gae/zNAGqUNWdnYZQDWe9NnswJrQjRAspk8MlwCvRlsdGN6UOPc1Lzc6ZmPliqUMEmyRe1fVyjwm6w-5fr__pfA7hQNC_27RCj5-iLVjNDQ?w=500&auto=format”,
"image_preview_url": “https://i.seadn.io/gae/zNAGqUNWdnYZQDWe9NnswJrQjRAspk8MlwCvRlsdGN6UOPc1Lzc6ZmPliqUMEmyRe1fVyjwm6w-5fr__pfA7hQNC_27RCj5-iLVjNDQ?w=500&auto=format”,
"image_thumbnail_url": “https://i.seadn.io/gae/zNAGqUNWdnYZQDWe9NnswJrQjRAspk8MlwCvRlsdGN6UOPc1Lzc6ZmPliqUMEmyRe1fVyjwm6w-5fr__pfA7hQNC_27RCj5-iLVjNDQ?w=500&auto=format”,
"image_original_url": “https://nftstorage.link/ipfs/bafybeig76mncgmub2f7m7mordkveptk3br4wu6u6j4fhwqznez2ugiskku/0.png”,
"animation_url": null,
"animation_original_url": null,
"name": “Test 0”,
"description": “Test 0”,
"external_link": null,
"asset_contract": {
"address": “0xcfaf8eb5546fae192916f73126ea2d5991cb2028”,
"asset_contract_type": “semi-fungible”,
"created_date": “2022-09-29T09:41:30.559731”,
"name": “Example Game ERC 1155”,
"nft_version": null,
"opensea_version": null,
"owner": 12540403,
"schema_name": “ERC1155”,
"symbol": “”,
"total_supply": null,
"description": null,
"external_link": null,
"image_url": null,
"default_to_fiat": false,
"dev_buyer_fee_basis_points": 0,
"dev_seller_fee_basis_points": 0,
"only_proxied_transfers": false,
"opensea_buyer_fee_basis_points": 0,
"opensea_seller_fee_basis_points": 250,
"buyer_fee_basis_points": 0,
"seller_fee_basis_points": 250,
"payout_address": null
},
"permalink": “https://testnets.opensea.io/assets/goerli/0xcfaf8eb5546fae192916f73126ea2d5991cb2028/0”,
"collection": {
"payment_tokens": [
{
"id": 1507176,
"symbol": “ETH”,
"address": “0x0000000000000000000000000000000000000000”,
"image_url": “https://openseauserdata.com/files/6f8e2979d428180222796ff4a33ab929.svg”,
"name": “Ether”,
"decimals": 18,
"eth_price": 1,
"usd_price": 1592.29
},
{
"id": 1507152,
"symbol": “WETH”,
"address": “0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6”,
"image_url": “https://openseauserdata.com/files/accae6b6fb3888cbff27a013729c22dc.svg”,
"name": “Wrapped Ether”,
"decimals": 18,
"eth_price": 1,
"usd_price": 1593.2
}
],
"primary_asset_contracts": [
{
"address": “0xcfaf8eb5546fae192916f73126ea2d5991cb2028”,
"asset_contract_type": “semi-fungible”,
"created_date": “2022-09-29T09:41:30.559731”,
"name": “Example Game ERC 1155”,
"nft_version": null,
"opensea_version": null,
"owner": 12540403,
"schema_name": “ERC1155”,
"symbol": “”,
"total_supply": null,
"description": null,
"external_link": null,
"image_url": null,
"default_to_fiat": false,
"dev_buyer_fee_basis_points": 0,
"dev_seller_fee_basis_points": 0,
"only_proxied_transfers": false,
"opensea_buyer_fee_basis_points": 0,
"opensea_seller_fee_basis_points": 250,
"buyer_fee_basis_points": 0,
"seller_fee_basis_points": 250,
"payout_address": null
}
],
"traits": {},
"stats": {
"one_hour_volume": 0,
"one_hour_change": 0,
"one_hour_sales": 0,
"one_hour_sales_change": 0,
"one_hour_average_price": 0,
"one_hour_difference": 0,
"six_hour_volume": 0,
"six_hour_change": 0,
"six_hour_sales": 0,
"six_hour_sales_change": 0,
"six_hour_average_price": 0,
"six_hour_difference": 0,
"one_day_volume": 0,
"one_day_change": 0,
"one_day_sales": 0,
"one_day_sales_change": 0,
"one_day_average_price": 0,
"one_day_difference": 0,
"seven_day_volume": 0,
"seven_day_change": 0,
"seven_day_sales": 0,
"seven_day_average_price": 0,
"seven_day_difference": 0,
"thirty_day_volume": 0,
"thirty_day_change": 0,
"thirty_day_sales": 0,
"thirty_day_average_price": 0,
"thirty_day_difference": 0,
"total_volume": 0,
"total_sales": 0,
"total_supply": 1,
"count": 1,
"num_owners": 1,
"average_price": 0,
"num_reports": 0,
"market_cap": 0,
"floor_price": 0
},
"banner_image_url": null,
"chat_url": null,
"created_date": “2022-09-29T09:41:30.933452+00:00”,
"default_to_fiat": false,
"description": null,
"dev_buyer_fee_basis_points": “0”,
"dev_seller_fee_basis_points": “0”,
"discord_url": null,
"display_data": {
"card_display_style": “contain”,
"images": []
},
"external_url": null,
"featured": false,
"featured_image_url": null,
"hidden": false,
"safelist_request_status": “not_requested”,
"image_url": null,
"is_subject_to_whitelist": false,
"large_image_url": null,
"medium_username": null,
"name": “Example Game ERC 1155”,
"only_proxied_transfers": false,
"opensea_buyer_fee_basis_points": “0”,
"opensea_seller_fee_basis_points": “250”,
"payout_address": null,
"require_email": false,
"short_description": null,
"slug": “example-game-erc-1155”,
"telegram_url": null,
"twitter_username": null,
"instagram_username": null,
"wiki_url": null,
"is_nsfw": false,
"fees": {
"seller_fees": {},
"opensea_fees": {
"0x0000a26b00c1f0df003000390027140000faa719": 250
}
},
"is_rarity_enabled": false
},
"decimals": null,
"token_metadata": “https://nftstorage.link/ipfs/bafybeihfcvvlchgu6wogre4ae3jqwigyey3kgb2ur5o3jajv3zsmyve32q/0.json”,
"is_nsfw": false,
"owner": {
"user": null,
"profile_img_url": “https://storage.googleapis.com/opensea-static/opensea-profile/1.png”,
"address": “0x0000000000000000000000000000000000000000”,
"config": “”
},
"seaport_sell_orders": null,
"creator": {
"user": {
"username": null
},
"profile_img_url": “https://storage.googleapis.com/opensea-static/opensea-profile/2.png”,
"address": “0x72cebbf26f93cc5913fd87076c59428b794d6786”,
"config": “”
},
"traits": [
{
"trait_type": “Base”,
"value": “Starfish”,
"display_type": null,
"max_value": null,
"trait_count": 0,
"order": null
},
{
"trait_type": “Eye”,
"value": “Big”,
"display_type": null,
"max_value": null,
"trait_count": 0,
"order": null
}
],
"last_sale": null,
"top_bid": null,
"listing_date": null,
"is_presale": false,
"supports_wyvern": true,
"rarity_data": null,
"transfer_fee": null,
"transfer_fee_payment_token": null,
"related_assets": [],
"orders": null,
"auctions": [],
"top_ownerships": [
{
"owner": {
"user": {
"username": null
},
"profile_img_url": “https://storage.googleapis.com/opensea-static/opensea-profile/2.png”,
"address": “0x72cebbf26f93cc5913fd87076c59428b794d6786”,
"config": “”
},
"quantity": “3”,
"created_date": “2022-09-29T09:44:15.755541+00:00”
}
],
"ownership": null,
"highest_buyer_commitment": null,
"token_id": “0”
}
.
solidity development
title generator
.
spdx license
// SPDX-License-Identifier: MIT
.
mumbai test contract
0x383A22a13D2693ecE63186A594671635a4C163fB
