From e1bd8e16230f0b27653eea5995863795b9057363 Mon Sep 17 00:00:00 2001 From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com> Date: Mon, 18 Dec 2023 08:34:38 +0100 Subject: [PATCH 1/2] feat: add alchmey-sdk & icons --- packages/shared-config/assets.ts | 24 +++++++++++++++++++++++ packages/shared-config/icons/base.svg | 4 ++++ packages/shared-config/icons/ethereum.svg | 1 + packages/shared-config/icons/op.svg | 5 +++++ packages/shared-config/icons/os.svg | 3 +++ packages/shared-config/icons/polygon.svg | 1 + packages/shared-config/index.t.ts | 4 ++++ packages/shared-config/index.ts | 1 + packages/shared-config/nfts.ts | 1 + packages/shared-config/package.json | 2 +- packages/shared-config/tsconfig.json | 2 +- 11 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 packages/shared-config/assets.ts create mode 100644 packages/shared-config/icons/base.svg create mode 100644 packages/shared-config/icons/ethereum.svg create mode 100644 packages/shared-config/icons/op.svg create mode 100644 packages/shared-config/icons/os.svg create mode 100644 packages/shared-config/icons/polygon.svg create mode 100644 packages/shared-config/index.t.ts diff --git a/packages/shared-config/assets.ts b/packages/shared-config/assets.ts new file mode 100644 index 0000000..2805a38 --- /dev/null +++ b/packages/shared-config/assets.ts @@ -0,0 +1,24 @@ +import op from "./icons/op.svg"; +import polygon from "./icons/polygon.svg"; +import ethereum from "./icons/ethereum.svg"; +import base from "./icons/base.svg"; +import opensea from "./icons/os.svg"; + +export const chainIdToIcon: Record = { + 1: ethereum, + 5: ethereum, + 137: polygon, + 80001: polygon, + 10: op, + 420: op, + 8453: base, + 84531: base, +}; + +export const icons = { + op, + polygon, + ethereum, + base, + opensea, +}; diff --git a/packages/shared-config/icons/base.svg b/packages/shared-config/icons/base.svg new file mode 100644 index 0000000..67c4322 --- /dev/null +++ b/packages/shared-config/icons/base.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/packages/shared-config/icons/ethereum.svg b/packages/shared-config/icons/ethereum.svg new file mode 100644 index 0000000..9fd6788 --- /dev/null +++ b/packages/shared-config/icons/ethereum.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/shared-config/icons/op.svg b/packages/shared-config/icons/op.svg new file mode 100644 index 0000000..e8c6e64 --- /dev/null +++ b/packages/shared-config/icons/op.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/shared-config/icons/os.svg b/packages/shared-config/icons/os.svg new file mode 100644 index 0000000..c080495 --- /dev/null +++ b/packages/shared-config/icons/os.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/shared-config/icons/polygon.svg b/packages/shared-config/icons/polygon.svg new file mode 100644 index 0000000..7cb4075 --- /dev/null +++ b/packages/shared-config/icons/polygon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/shared-config/index.t.ts b/packages/shared-config/index.t.ts new file mode 100644 index 0000000..1a3dd3c --- /dev/null +++ b/packages/shared-config/index.t.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: any; + export default content; +} diff --git a/packages/shared-config/index.ts b/packages/shared-config/index.ts index 8f9ead4..ab14d33 100644 --- a/packages/shared-config/index.ts +++ b/packages/shared-config/index.ts @@ -1,2 +1,3 @@ export * from "./nfts"; export * from "./variables"; +export * from "./assets"; diff --git a/packages/shared-config/nfts.ts b/packages/shared-config/nfts.ts index 02eeae4..d80e0df 100644 --- a/packages/shared-config/nfts.ts +++ b/packages/shared-config/nfts.ts @@ -18,6 +18,7 @@ const chainIdToNetwork: Record = { 420: Network.OPT_GOERLI, 137: Network.MATIC_MAINNET, 80001: Network.MATIC_MUMBAI, + 8453: Network.BASE_MAINNET, }; export const getAlchemyNFT = (chainId: number) => { diff --git a/packages/shared-config/package.json b/packages/shared-config/package.json index 8954355..647c4b6 100644 --- a/packages/shared-config/package.json +++ b/packages/shared-config/package.json @@ -9,6 +9,6 @@ "lint": "echo 'Add lint script here'" }, "dependencies": { - "alchemy-sdk": "^3.1.0" + "alchemy-sdk": "3.1.0" } } diff --git a/packages/shared-config/tsconfig.json b/packages/shared-config/tsconfig.json index c90a9af..7e646c1 100644 --- a/packages/shared-config/tsconfig.json +++ b/packages/shared-config/tsconfig.json @@ -4,5 +4,5 @@ "module": "ESNext", "types": ["vite/client"] }, - "include": ["index.ts", "variables.ts"], + "include": ["index.ts", "variables.ts", "assets.ts"], } \ No newline at end of file From 6518171cbe2a4f07c1a8a33a3ce30d6314e964a1 Mon Sep 17 00:00:00 2001 From: Nezzar KEFIF <36443340+nezz0746@users.noreply.github.com> Date: Mon, 18 Dec 2023 09:02:34 +0100 Subject: [PATCH 2/2] feat: add swr nft query hook --- apps/web/package.json | 2 ++ apps/web/src/App.tsx | 11 +++++++++++ apps/web/src/hooks/useOwnedNFTs.ts | 16 ++++++++++++++++ apps/web/src/services/alchemy.ts | 19 +++++++++++++++++++ yarn.lock | 15 ++++++++++++++- 5 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/hooks/useOwnedNFTs.ts create mode 100644 apps/web/src/services/alchemy.ts diff --git a/apps/web/package.json b/apps/web/package.json index 40e1881..1563240 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@rainbow-me/rainbowkit": "^1.1.3", + "alchemy-sdk": "3.1.0", "classnames": "^2.3.1", "daisyui": "4.4.19", "dayjs": "^1.11.10", @@ -18,6 +19,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "shared-config": "*", + "swr": "^2.2.4", "wagmi": "1.4.8", "wagmi-config": "*", "web-kit": "*", diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 1586f19..d0303c5 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -12,10 +12,13 @@ import { import { Button, Card, Table, Web3Account } from "web-ui"; import dayjs from "dayjs"; import { useAccount } from "wagmi"; +import useOwnedNFTs from "./hooks/useOwnedNFTs"; +import { optimism } from "wagmi/chains"; function App() { const { address } = useAccount(); const { chainId, explorer, isLocal } = useChain(); + const { data } = useOwnedNFTs(optimism.id); const [number, setNumber] = useState(BigInt(0)); @@ -133,6 +136,14 @@ function App() { + + {data?.length && + data.map((nft) => ( + + + + ))} +
diff --git a/apps/web/src/hooks/useOwnedNFTs.ts b/apps/web/src/hooks/useOwnedNFTs.ts new file mode 100644 index 0000000..763bc1a --- /dev/null +++ b/apps/web/src/hooks/useOwnedNFTs.ts @@ -0,0 +1,16 @@ +import useSWR from "swr"; +import { useAccount } from "wagmi"; +import { getOwnerNFTsPerChainId } from "../services/alchemy"; + +const useOwnedNFTs = (chainId: number) => { + const { address } = useAccount(); + const { data, isLoading, error } = useSWR( + ["/api/owned-nfts", address, chainId], + ([, address, chainId]) => getOwnerNFTsPerChainId(address, chainId), + {} + ); + + return { data, isLoading, error }; +}; + +export default useOwnedNFTs; diff --git a/apps/web/src/services/alchemy.ts b/apps/web/src/services/alchemy.ts new file mode 100644 index 0000000..c22e6f6 --- /dev/null +++ b/apps/web/src/services/alchemy.ts @@ -0,0 +1,19 @@ +import { Address } from "wagmi"; +import { OwnedNft as AlchemyOwnedNFT } from "alchemy-sdk"; +import { getAlchemyNFT } from "shared-config"; + +export interface OwnedNft extends AlchemyOwnedNFT { + chainId: number; +} + +export const getOwnerNFTsPerChainId = async ( + owner: Address | undefined, + chainId: number +) => { + if (!owner) return; + const nft = getAlchemyNFT(chainId); + + const { ownedNfts: response } = await nft.getNftsForOwner(owner); + + return response.map((nft) => ({ ...nft, chainId })); +}; diff --git a/yarn.lock b/yarn.lock index 3f9a763..5b215f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3716,7 +3716,7 @@ ajv@^6.12.3, ajv@^6.12.4, ajv@~6.12.6: json-schema-traverse "^0.4.1" uri-js "^4.2.2" -alchemy-sdk@^3.1.0: +alchemy-sdk@3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/alchemy-sdk/-/alchemy-sdk-3.1.0.tgz#cd4a03215d7502ea4c3e7548f7b837e25b461864" integrity sha512-KMzBo0Dq+cEqXegn4fh2sP74dhAngr9twIv2pBTyPq3/ZJs+aiXXlFzVrVUYaa6x9L7iQtqhz3YKFCuN5uvpAg== @@ -4569,6 +4569,11 @@ cli-width@^3.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6" integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw== +client-only@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" + integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== + clipboardy@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/clipboardy/-/clipboardy-3.0.0.tgz#f3876247404d334c9ed01b6f269c11d09a5e3092" @@ -9433,6 +9438,14 @@ swap-case@^2.0.2: dependencies: tslib "^2.0.3" +swr@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07" + integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ== + dependencies: + client-only "^0.0.1" + use-sync-external-store "^1.2.0" + sync-request@6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/sync-request/-/sync-request-6.1.0.tgz#e96217565b5e50bbffe179868ba75532fb597e68"