From d2b5adab95eb849503ec79622cd80c2cb5a2d770 Mon Sep 17 00:00:00 2001 From: Maxime Aubanel Date: Wed, 30 Oct 2024 15:00:41 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20apps/premier:=20Add=20NFTs?= =?UTF-8?q?=20retrieval=20+=20Add=20ReactThreeFiber=20+=20Add=20models=20+?= =?UTF-8?q?=20Add=20Mint=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + apps/premier/next.config.mjs | 3 + apps/premier/package.json | 9 + apps/premier/public/placeholder.png | Bin 80931 -> 7000 bytes .../app/drop/[dropId]/_components/drawer.tsx | 117 + .../app/drop/[dropId]/_components/product.tsx | 221 ++ .../app/drop/[dropId]/_components/scene.tsx | 25 + apps/premier/src/app/drop/[dropId]/drop.tsx | 54 + .../src/app/drop/[dropId]/not-found.tsx | 36 + apps/premier/src/app/drop/[dropId]/page.tsx | 14 + apps/premier/src/app/drop/[dropId]/store.ts | 31 + apps/premier/src/app/layout.tsx | 4 +- apps/premier/src/app/page.tsx | 40 - apps/premier/src/app/system.css | 2 +- .../src/components/buttons/connectButton.tsx | 103 + .../premier/src/components/layouts/footer.tsx | 13 +- .../premier/src/components/layouts/header.tsx | 20 +- apps/premier/src/configs/env/client.ts | 4 +- apps/premier/src/configs/env/server.ts | 4 + apps/premier/src/configs/providers/theme.tsx | 2 +- apps/premier/src/configs/schemas/chains.ts | 86 +- apps/premier/src/configs/schemas/drop.ts | 24 + apps/premier/src/hooks/query/useDrop.ts | 29 + apps/premier/src/hooks/query/useNfts.ts | 31 + apps/premier/src/hooks/useDrop.ts | 13 - apps/premier/src/server/actions/drop.ts | 22 +- apps/premier/src/server/actions/ipfs.ts | 8 +- apps/premier/src/server/actions/nfts.ts | 26 + apps/premier/src/server/config/alchemy.ts | 10 + apps/premier/src/server/config/rpcs.ts | 9 +- apps/premier/src/server/config/wagmi.ts | 14 +- apps/premier/src/store/index.tsx | 21 +- apps/premier/src/threejs/models/skate.tsx | 132 +- apps/premier/src/threejs/scenes/skate.tsx | 44 +- apps/premier/tsconfig.json | 3 +- biome.json | 3 + package.json | 2 +- yarn.lock | 2028 ++++++++++++++++- 38 files changed, 2952 insertions(+), 256 deletions(-) create mode 100644 apps/premier/src/app/drop/[dropId]/_components/drawer.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/_components/product.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/_components/scene.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/drop.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/not-found.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/page.tsx create mode 100644 apps/premier/src/app/drop/[dropId]/store.ts delete mode 100644 apps/premier/src/app/page.tsx create mode 100644 apps/premier/src/components/buttons/connectButton.tsx create mode 100644 apps/premier/src/configs/schemas/drop.ts create mode 100644 apps/premier/src/hooks/query/useDrop.ts create mode 100644 apps/premier/src/hooks/query/useNfts.ts delete mode 100644 apps/premier/src/hooks/useDrop.ts create mode 100644 apps/premier/src/server/actions/nfts.ts create mode 100644 apps/premier/src/server/config/alchemy.ts diff --git a/.gitignore b/.gitignore index 3dd4183..f80d684 100644 --- a/.gitignore +++ b/.gitignore @@ -53,3 +53,4 @@ yarn-error.log* !.yarn/releases !.yarn/sdks !.yarn/versions +.env*.local diff --git a/apps/premier/next.config.mjs b/apps/premier/next.config.mjs index e54cb43..77dc5f5 100644 --- a/apps/premier/next.config.mjs +++ b/apps/premier/next.config.mjs @@ -2,6 +2,9 @@ const nextConfig = { transpilePackages: ["@web-playground/ui"], reactStrictMode: true, + images: { + domains: ["res.cloudinary.com"], + }, /** * @dev https://docs.reown.com/appkit/next/core/installation#extra-configuration diff --git a/apps/premier/package.json b/apps/premier/package.json index a5d2257..dd69ddd 100644 --- a/apps/premier/package.json +++ b/apps/premier/package.json @@ -15,6 +15,7 @@ "@rainbow-me/rainbowkit": "^2.1.6", "@react-three/drei": "^9.114.5", "@react-three/fiber": "^8.17.10", + "@react-three/postprocessing": "^2.16.3", "@simplewebauthn/browser": "^9.0.1", "@tanstack/react-query": "^5.56.2", "@types/three": "^0.169.0", @@ -22,12 +23,19 @@ "@web-playground/contracts-premier": "workspace:^", "@web-playground/ui": "workspace:^", "@web-playground/utils": "workspace:^", + "@web3icons/core": "^3.8.0", + "@web3icons/react": "^3.8.0", + "alchemy-sdk": "^3.4.4", "clsx": "^2.1.0", + "html-react-parser": "^5.1.18", "kubo-rpc-client": "^5.0.1", "next": "^14.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loading-skeleton": "^3.5.0", + "react-spring": "^9.7.4", "tailwind-merge": "^2.2.1", + "thirdweb": "^5.63.2", "three": "^0.169.0", "uint8arrays": "^5.1.0", "viem": "2.x", @@ -36,6 +44,7 @@ }, "devDependencies": { "@biomejs/biome": "^1.6.4", + "@types/lodash": "^4.17.12", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/apps/premier/public/placeholder.png b/apps/premier/public/placeholder.png index 45bd8a564306d55b5d9ef30fd4340202fb16e8f6..1f3bd1f564f834de7f4e0a6127959db947294a73 100644 GIT binary patch literal 7000 zcmeG>XH=8hvPsCnpdtZ8K#*QUBy^CDv`8<4fJjq7>Am+R;8Bq-9qAaQN)KHKE#N`v z1fujFdJWujy=TuivuF0q?3qc7juw*q^3BU25Qtp$fs!5w z1lGCu!5{#{=2gX8-~o2mLn?qu2N;)uiH^0As*R>5=ngQ3fgoTi5Xl7!@C8NLf}nqn zK_D*R2?CMifd9Fg1Nr+ZSSN?%pW_R}OTw3E03yb=`bHi`ni`VNoE;ICR?bhY5k8JC z7YHC}A4y>7XzgLi;^XMxQFD7~$;poL^8vLV{mFh+jyE55VAa z_jU5H^x<=IXa6gaztd5&c7Nt(>*8VS?8I_G*Yc^er-uw1+XbV4eEzym4_ljma&mJ2 zn^=H={1+?yf(QZrf6xYAmA-&VYP;E51Dr4D%L+>WiTU4Pf8!&~f5H5}Z04_${s{#{ zmAx#@{|~jvUZywuc?krf*Hu-zukQn1&m4?h8#BNV^BQLSiDouJs$V0REn#{O-sy0R zIN;?h68Y9D>3Du&;-Qo`V>D`59&iOijaBaISPXJerbjSCRD^FUaipQeHx0cF$205= z>v7g8o32TyfZ%{n2MwnCTYD1O?k%3{ce0z8XhVhRYLn!7wEyP#ZGQK_L*P8x(;gy zewhRw9SsVLy*(ar84T5C4v|-a!UL3gxb$HxKF1&^8(RpTT}|wR0;ui#B^Ed(7|N_$ zNk#*(l>L8}|9Qn4g;+d=Sf^=CJ-vrbqEfR9D(_bYwP~x$^7Sd#_fs8v$PEkes2^n) zqD1(qOA#kLw>){nvZ+j&d)uMO?*Q-lKkX6|G6{qXf%Zq(rnPqT-~FYU*c_g28jK1?!l&5^u*>iei#jfp9&u3 z?LQkTSeJphs5*y=sa18=N#qz;WUvQ(Ffa_ z@z{YiLwehr?W7P4Dqa{c~WKADKOlLPL)%$Nvt>(-P0o3;9?s5#Q{&jGu-c;O;hP#D8W`Q zXhwPs>ZPU8r(Wa3CMX&8kkn{0q?avDB73CO)>A$ywhBUA$);P&Jo%^)S4v(94)z$D zc$1l}ZIqc!naCtzT7G-ve#I&RM|psWpUc{y+*-+xJG;kUYW_V^%QW-tcNppr+7il6 zQ}+30UBgln{hYX-*eJNZnCKjQUMuIimmqE2GpS^)&+tQTHLqWLxtAj4WBcG6TEVj$ zO2K=P=1q_E`*aP(eb1u}2@8*#N8=Wlsn*Fn0P$`;(Q@nE*fT z6sS#LU{uK06PHS?3Ht+Z`KHBnr>Adz?(W@u1> zSpYZMVb&|WNBnL!RAtk$!@8?>^}=76X3>tu>!4EUlw{3Kk2}i(ABOi(qzlRLI#1W1 zy6H`iF={EVn;&NmHo5H>-Hp0rUlQv7C4fs#+;L=qIMe!JpS*x9NL?9Mb^4*ObYp8A zHFH?R+^nyU=UhEn8Q>xec5sE={HYvmbEncRb?TM-b1g*t+;BRk3>Q%TJ-1rXDje<*jUDfwtXb zzk>f0BJmu_k$ zV<}>T)^1X(@$}D7Npv1W2d9a2%I0Y{cdOn;#VXgFEfJo9%LZ#hm2?y$!)uZ%Ynrp4 zt^y|65uh-}+wPRezeSf>YfkafsD-B(duj4%5eX1^#K_XL%IJmDcWiH7e^xMFYJ;r* zA@ZxccWmsI>!h_f9DPTMExpvO0jG;dLf#E@+-EFp$S`LfT`gL(pMYON%D6pb5RW>j z6JO@)C=0CIKhEcVRU-&((O$7PJwX4qB=y2G^|NpA*hs7FnG-X+Q0ckj=2G(r@`sGq zT=Fv|$)QLBmhv>3v376Vz#sRmbls%LR=m0zb>f!j>V6o66pgAiN9K$cBT^tpRcUpC`oaG0znGM8VLq6|y1L$vbvssJEEnl-Bj(6prFqNeypcUQ{AXNFU|yOEQU+VePHF0$$KMwEK&;%wQilKWq!TB3YgT zRD;}eRRi-Q-;p)Xb04IcITE z+4?sM(7|zcCIfcAnJuxkscrS2OMg2qv3>YLeT{trEfA^5uqKsYz;SerW z`BdawgtK;4j6p6vY27`8X1+*v|E0~1x<%FPg1)kr?#ZJmr_VvRj;!MMD~g%ZQ6`+3 z$_-Uf@3RaJ&edx9tNi)`h~85+PtM!@8C)TFn&pzsFqHH5^^y1Tt)>u|Sqj6C(%FclS->}D$=YRL z8mgc+`xhhPgsCojBg1qBrwW>@J zrtw_PTz73k-ySqXMgF2pG)O}Tmsq6s_vp&hzA7%|t7I&SeE`wE9%?dx*|-r}4mB^# z-SyXznZFgk)aiCKEI#vt z=H1+k|Mr|@Ep5WaeC0fgZ{E>>T#(_k$6YT~AvQK$|BAgr2S=uGR>*xav*R?LYe~k; zqC2hRmbUx1l-E61Q5q{l^P3&%D~$^QIGWkes~%~uDwN{~#hH2!=!QAFbnbe3u(PfF zvgosf)cc_V(5YgttBcBJq)h6UzUeOC-TmT^0FK+i#BD#x2eZ;rq`#W8UdjiI#C8iSnTbW38@(lgX+jbN~{=BJt zPIc|icRC}l-_sSSr9P6CI)$T)i6(j^&o4iYqK)%A4#zN0MK3u1{$h4!I&k!n#+?Gb z!V-p5n~z4Q9*1|quS#X`?MELEtHfI@{Hpfq)1}WFH-m%gNJ~pv>IdfE*!Bray#mYa zHO{^1(ceprCQW{2niXuq)|+J6T)n7vp$^7p8wRANXOC*YP>sgmdqNRmA9z)*gps-?LqZ#R%U$+x+fF zT}EWcg<^+HpT}h;)@zL4N_+&uqVxE>aCBHq(6C-zETOAiSw`iw7tZZGVwTX+ie2t7hkZx%~L7T`q3c zJL)#9cfKMxM%QpU`LNbhWnz{gY%}!N1lNw}$>X8D+VH>$qu`d|+P-QZzta-j{*R+9 zpA1|CK2uXO_L&NN`?-_hb~>L^%yy1vBPZFY1= z&vIQ&efj2^1qsvxntLOFwU6*yW#Z`jlSO0xc&rsogVodDzzi2^vr08);+j!P%cL1r z#HEim2F+NF6Gf7;8?Uac7eWS4EyrU-owI%pZYzbGXU&)O9=~Q-`24(xThCRXKD)zZ z!rzn9VAIT)>us91o<#GRZP-c->SOHM__QqlY98!`-&8Sa?9;oVADvB`9rXT!HfCQMND3xAqI^OK=fR)}I zN;F!+Kyq2Gn(})9E&EDz|Lc@N+9M&_xctHGAg7Ku7WAD2vhK%|RZO2haBgN)8`{>;cnzB7XHfMKF_9PdZ3F*9j z2jNu*?Yt_do3wFgQQCA{krxfRRH3NV)xT`f*#HJSA=>WUZOdX zIXzxIz~W|0wkWdse;{UJ)Dg3*v5R$C%o~(Zn{P}A+fAd#C+i)mTGI-}**XW9;iQIx zSVoO$_QDqec5Uk1tNT?v#Y3b}M$T3lbY4swAB-_Pgqa=f<|G03XbC_+DBGOJEmqbp z%V;N4yyEWJPFlZ}IjVPwYmaFmbzkR3{l}50hcrJUseE@`4_Oa!?tKPqiLYw?)T)F` zt@vk7QsjcZ96IyZuhYD!FX8ro6m-03POMjW_#tgxZ@jR?bE`lqX5yTP^VYnNa*V?q z%I$P9q+yN{D+v1u9IKh3nFCq%<$P>$E!Qa}fUjRn#{76Az$5th)q84>cY>PaA{c5)(I zg(Lu%UjloCMA>m;l)~XKKv}UP z*D4W)D8GrAz1gx7>8FiHRg2-5DyboVP!bdgg} z*&(YBamwwWFPr#lk-s3Kt08)#jK*ffOCTf!2?fkN$f-X6aH&!{`0*3}M3N_wtvxX4 z{s&x7ohuv62e^3sQ^hh~wgv%P44S%k8Da)((X5cXh_##<3~gZ+e;XE(0^HLnwjH*x zH6*BQ6Z0mI1qnW^#UC!7T(`PQNG98d*n zbaUy(C-l*3Um45c14&8C5de1jzCn^ThbN;5CC|bLnd*p2P-hDbNdj6IZ0#V(PoNt4 zIT!zc#ey>g|2bM9ME)M&DEI0)s9;7wD$mPyl?8qc2&YE3v~8>=O+)1p4A!SLzf5D6En};yZ_B;o*s0D~jY(8UQP!P%wK%;OM|X6S(>|rwt5SQ-(6*spNcaj% zUk}j0N?>R9RnR?gZr)bY`=r9OSnit~yxEhmD(yYiX<@2JC@mTRGRFP+Ay4Gq8DG3D zztQgVu6Y0d-M%N@*l#p}ui9EQnVXgKPM@aEU3WOFgc;kmdAOLUrdPsurDP%>5i27r zG4KsI)&qH0yM!Na9;&YBtDwDJ`umi9kJ^FL0R|d78z~A!18HZI7W06j1tZ|IZ)r#1 zgfvjtfn?x4icnX;)bE)YDYn`JN?hIjDGlucjCj_^k{ogaXB>|3+1nhS2Uy~x-ZCV{48cnWe>gkfR!;5j)9KHcEO4*gfXLfxmqSASS zqApc!NJ7;I!z>>q$JENsacpsDI{$A|9fO!GVMY8!0PBf!SAg{c3jR-ke3H-Rx?{cD zMb!H})R(sg1T_2lNyN!9fsgMKPITON-;12*_0>8L2_tcnb)C{K3{=9WDgCXwx5%AgT0; C2dU5i literal 80931 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 GTmJ`(tm5ea diff --git a/apps/premier/src/app/drop/[dropId]/_components/drawer.tsx b/apps/premier/src/app/drop/[dropId]/_components/drawer.tsx new file mode 100644 index 0000000..ccc7555 --- /dev/null +++ b/apps/premier/src/app/drop/[dropId]/_components/drawer.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { Separator } from "@web-playground/ui/shadcn/components/separator"; +import { Box } from "@web-playground/ui/system/base/box"; +import { H4, H6 } from "@web-playground/ui/system/typography"; + +import { ConnectButton } from "@components/buttons/connectButton"; +import { useAccountNfts } from "@hooks/query/useNfts"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@web-playground/ui/shadcn/components/tabs"; +import { Network, type OwnedNft } from "alchemy-sdk"; +import Image from "next/image"; +import { animated, useSpring } from "react-spring"; +import { useDropStore } from "src/app/drop/[dropId]/store"; +import { useAccount } from "wagmi"; + +type NftsBoxProps = { + collectionName: string; + nfts: OwnedNft[]; +}; +const NftsCollectionBox = ({ collectionName, nfts }: NftsBoxProps) => { + const sceneRef = useDropStore((s) => s.sceneRef); + + return ( + + +
+ {collectionName} +
+ + + + {nfts.map((item) => ( + sceneRef.current.updateItem(item.image.pngUrl ?? "")} + > + {item.name + + ))} + + + ); +}; + +const Drawer = () => { + const openDrawer = useDropStore((s) => s.openDrawer); + + const props = useSpring({ + left: 0, + position: "absolute" as const, + top: 0, + backgroundColor: "white", + height: "100%", + width: "100%", + transform: openDrawer ? "translate(0%)" : "translate(100%)", + overflow: "auto", + zIndex: 10, + }); + + const { address, isConnected, isDisconnected } = useAccount(); + + const nftsOwned = useAccountNfts({ + address: address ?? "", + network: Network.ETH_MAINNET, + enabled: isConnected, + }); + + return ( + + +

Customization.

+ + {isDisconnected && ( + + +
You need to be connected.
+ + )} + + {isConnected && nftsOwned && ( + + + + Placeholder + + + + + + {Object.keys(nftsOwned).map((collectionName) => { + return ( + + + + + + ); + })} + + + + )} + + + ); +}; + +export { Drawer }; diff --git a/apps/premier/src/app/drop/[dropId]/_components/product.tsx b/apps/premier/src/app/drop/[dropId]/_components/product.tsx new file mode 100644 index 0000000..c38ff76 --- /dev/null +++ b/apps/premier/src/app/drop/[dropId]/_components/product.tsx @@ -0,0 +1,221 @@ +"use client"; + +import { Badge } from "@web-playground/ui/shadcn/components/badge"; +import { Button } from "@web-playground/ui/shadcn/components/button"; +import { Separator } from "@web-playground/ui/shadcn/components/separator"; +import { Box } from "@web-playground/ui/system/base/box"; +import { H0, H1, H4, H6 } from "@web-playground/ui/system/typography"; +import { TokenETH } from "@web3icons/react"; +import { WandSparkles, Zap } from "lucide-react"; + +import { ExternalLink } from "lucide-react"; +import Skeleton from "react-loading-skeleton"; + +import "react-loading-skeleton/dist/skeleton.css"; +import { chainIdAsChainName } from "@configs/schemas/chains"; +import { ipfsUrl } from "@server/config/ipfs"; +import { useQueryClient } from "@tanstack/react-query"; +import { useWriteStoreMint } from "@web-playground/contracts-premier/wagmi.ts"; +import parse from "html-react-parser"; +import Link from "next/link"; +import { Drawer } from "src/app/drop/[dropId]/_components/drawer"; +import { useDropStore } from "src/app/drop/[dropId]/store"; +import { formatEther } from "viem"; +import { useChainId, useSwitchChain } from "wagmi"; + +const Product = () => { + return ( + <> +
+ + + + + + +