From ebf64d31372f29e8ee089a9ccaccd11854e11414 Mon Sep 17 00:00:00 2001 From: Zak Date: Mon, 25 Nov 2024 10:40:49 +0000 Subject: [PATCH 1/7] feat: add X to modals --- src/components/ui/Modal.jsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx index 0899e7e..27bf7de 100644 --- a/src/components/ui/Modal.jsx +++ b/src/components/ui/Modal.jsx @@ -1,4 +1,9 @@ import Card from "../ui/Card"; +import Button from "../ui/Button"; + +import { + XMarkIcon, +} from '@heroicons/react/24/outline'; const Modal = (props) => { const { @@ -36,7 +41,15 @@ const Modal = (props) => {
- + +
{props.children}
From a354ccd81b4da949ad59a9dbfb346f19ff813ef0 Mon Sep 17 00:00:00 2001 From: Zak Date: Mon, 25 Nov 2024 11:39:45 +0000 Subject: [PATCH 2/7] feat: add nft to vault --- src/App.css | 7 ++ src/components/vault/VaultNFT.jsx | 96 ++++++++++++++++++++++ src/components/vault/yield/YieldParent.jsx | 4 +- src/pages/vault/Vault.jsx | 23 ++++-- src/pages/vaults/Vaults.jsx | 6 +- 5 files changed, 125 insertions(+), 11 deletions(-) create mode 100644 src/components/vault/VaultNFT.jsx diff --git a/src/App.css b/src/App.css index 588e864..6f150f5 100644 --- a/src/App.css +++ b/src/App.css @@ -740,4 +740,11 @@ button.btn.btn-outline:disabled { transform: scaleX(1.1)scaleY(1.5); opacity: 0; } +} + +.nft-wrap > svg { + border-radius: var(--card-border-radius); + width: 100%; + height: auto; + flex: 1; } \ No newline at end of file diff --git a/src/components/vault/VaultNFT.jsx b/src/components/vault/VaultNFT.jsx new file mode 100644 index 0000000..9ac44d8 --- /dev/null +++ b/src/components/vault/VaultNFT.jsx @@ -0,0 +1,96 @@ +import { useState, useEffect } from "react"; +import { + useReadContract, + useChainId +} from "wagmi"; +import { arbitrumSepolia } from "wagmi/chains"; + +import { + usesUSDContractAddressStore, + useContractAddressStore, + useVaultManagerAbiStore, +} from "../../store/Store"; + +import { + StopCircleIcon +} from '@heroicons/react/24/outline'; + +import Card from "../ui/Card"; +import Typography from "../ui/Typography"; + +const VaultNFT = ({ + vaultId, + vaultType, +}) => { + const { vaultManagerAbi } = useVaultManagerAbiStore(); + + const { + arbitrumSepoliaContractAddress, + arbitrumContractAddress + } = useContractAddressStore(); + + const { + arbitrumsUSDSepoliaContractAddress, + arbitrumsUSDContractAddress, + } = usesUSDContractAddressStore(); + + const chainId = useChainId(); + + const vaultManagerAddress = + chainId === arbitrumSepolia.id + ? arbitrumSepoliaContractAddress + : arbitrumContractAddress; + + const sUSDVaultManagerAddress = + chainId === arbitrumSepolia.id + ? arbitrumsUSDSepoliaContractAddress + : arbitrumsUSDContractAddress; + + let useVaultManagerAddress = vaultManagerAddress; + + if (vaultType === 'USDs') { + useVaultManagerAddress = sUSDVaultManagerAddress; + } + + const { data: nftData, refetch: nftRefetch } = useReadContract({ + address: useVaultManagerAddress, + abi: vaultManagerAbi, + functionName: "tokenURI", + args: [vaultId] + }); + + let decoded = ''; + let parsed = ''; + if (nftData) { + const decodable = nftData?.toString().split(",")[1]; + if (decodable) { + decoded = atob(decodable); + parsed = JSON.parse(decoded); + } + } + + let nftContent = ''; + + if (parsed && parsed.image_data) { + nftContent = parsed.image_data; + } + + return ( + +
+ + + Vault NFT + +
+
+ + ) +}; + +export default VaultNFT; \ No newline at end of file diff --git a/src/components/vault/yield/YieldParent.jsx b/src/components/vault/yield/YieldParent.jsx index ba26c44..d902a94 100644 --- a/src/components/vault/yield/YieldParent.jsx +++ b/src/components/vault/yield/YieldParent.jsx @@ -251,7 +251,7 @@ const YieldParent = (props) => { } return ( -
+ <> {yieldEnabled ? ( <> {yieldData && yieldData.length ? ( @@ -343,7 +343,7 @@ const YieldParent = (props) => {
)} -
+ ) }; diff --git a/src/pages/vault/Vault.jsx b/src/pages/vault/Vault.jsx index 16ac36d..ffe5166 100644 --- a/src/pages/vault/Vault.jsx +++ b/src/pages/vault/Vault.jsx @@ -31,6 +31,7 @@ import VaultStats from "../../components/vault/VaultStats"; import TokenList from "../../components/vault/TokenList"; import VaultSend from "../../components/vault/VaultSend"; import TokenTotalPie from "../../components/vault/TokenTotalPie"; +import VaultNFT from "../../components/vault/VaultNFT"; import YieldParent from "../../components/vault/yield/YieldParent"; @@ -85,8 +86,8 @@ const Vault = () => { const sUSDVaultManagerAddress = chainId === arbitrumSepolia.id ? arbitrumsUSDSepoliaContractAddress - : arbitrumsUSDContractAddress; - + : arbitrumsUSDContractAddress; + const { data: vaultDatasEUR, refetch: refetchsEUR, isLoading: isLoadingsEUR } = useReadContract({ abi: vaultManagerAbi, address: vaultManagerAddress, @@ -306,11 +307,21 @@ const Vault = () => {
+
+ - +
+ +
+ +
diff --git a/src/pages/vaults/Vaults.jsx b/src/pages/vaults/Vaults.jsx index 4f3682e..3847d4a 100644 --- a/src/pages/vaults/Vaults.jsx +++ b/src/pages/vaults/Vaults.jsx @@ -48,9 +48,9 @@ const Vaults = () => { : arbitrumContractAddress; const sUSDVaultManagerAddress = - chainId === arbitrumSepolia.id - ? arbitrumsUSDSepoliaContractAddress - : arbitrumsUSDContractAddress; + chainId === arbitrumSepolia.id + ? arbitrumsUSDSepoliaContractAddress + : arbitrumsUSDContractAddress; const { data: sEURvaultIDs, refetch: refetchsEURVaultIDs } = useReadContract({ abi: vaultManagerAbi, From 612c3e6a119d457add8dffdc5d4948c6d7b61b4b Mon Sep 17 00:00:00 2001 From: Zak Date: Tue, 26 Nov 2024 12:10:09 +0000 Subject: [PATCH 3/7] style: reduce nft paddig --- src/App.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 6f150f5..0a2746c 100644 --- a/src/App.css +++ b/src/App.css @@ -742,9 +742,15 @@ button.btn.btn-outline:disabled { } } -.nft-wrap > svg { +.nft-wrap { border-radius: var(--card-border-radius); + overflow: hidden; +} + +.nft-wrap > svg { width: 100%; height: auto; flex: 1; + margin-top: -40px; + margin-bottom: -60px; } \ No newline at end of file From dc93a9f841d6a5bed5088ec50bd1d2fd1d5ed208 Mon Sep 17 00:00:00 2001 From: Zak Date: Tue, 26 Nov 2024 14:29:05 +0000 Subject: [PATCH 4/7] style: reduce nft paddig --- src/App.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index 0a2746c..b869f9c 100644 --- a/src/App.css +++ b/src/App.css @@ -745,12 +745,15 @@ button.btn.btn-outline:disabled { .nft-wrap { border-radius: var(--card-border-radius); overflow: hidden; + display: flex; + align-items: center; + justify-content: center; } .nft-wrap > svg { width: 100%; height: auto; flex: 1; - margin-top: -40px; - margin-bottom: -60px; + margin-top: -60px; + margin-bottom: -80px; } \ No newline at end of file From 1fdefe85140dc3b616529a4fa70784a22e728396 Mon Sep 17 00:00:00 2001 From: Zak Date: Thu, 28 Nov 2024 14:00:36 +0000 Subject: [PATCH 5/7] style: fix scrollbar styling --- src/components/ui/Modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx index 27bf7de..e6f4ef0 100644 --- a/src/components/ui/Modal.jsx +++ b/src/components/ui/Modal.jsx @@ -50,7 +50,7 @@ const Modal = (props) => { > -
+
{props.children}
From cd5f8c704765ccdd7ecc3f628c59ae566406ae0f Mon Sep 17 00:00:00 2001 From: Zak Date: Thu, 28 Nov 2024 14:04:19 +0000 Subject: [PATCH 6/7] style: remove nft bg --- src/App.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.css b/src/App.css index b869f9c..5035cc7 100644 --- a/src/App.css +++ b/src/App.css @@ -756,4 +756,11 @@ button.btn.btn-outline:disabled { flex: 1; margin-top: -60px; margin-bottom: -80px; +} + +.nft-wrap > svg > g > rect:first-of-type { + display: none; +} +.nft-wrap > svg > g > circle:first-of-type { + display: none; } \ No newline at end of file From baca8e4fd324f36036e0a61d11d331efa6e6cbeb Mon Sep 17 00:00:00 2001 From: Zak Date: Mon, 2 Dec 2024 17:03:49 +0000 Subject: [PATCH 7/7] feat: add nft to metamask button --- src/components/vault/VaultNFT.jsx | 53 +++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/src/components/vault/VaultNFT.jsx b/src/components/vault/VaultNFT.jsx index 9ac44d8..4259e87 100644 --- a/src/components/vault/VaultNFT.jsx +++ b/src/components/vault/VaultNFT.jsx @@ -1,4 +1,5 @@ import { useState, useEffect } from "react"; +import { toast } from 'react-toastify'; import { useReadContract, useChainId @@ -16,6 +17,7 @@ import { } from '@heroicons/react/24/outline'; import Card from "../ui/Card"; +import Button from "../ui/Button"; import Typography from "../ui/Typography"; const VaultNFT = ({ @@ -23,6 +25,7 @@ const VaultNFT = ({ vaultType, }) => { const { vaultManagerAbi } = useVaultManagerAbiStore(); + const [ isLoading, setIsLoading ] = useState(false); const { arbitrumSepoliaContractAddress, @@ -75,6 +78,43 @@ const VaultNFT = ({ nftContent = parsed.image_data; } + const checkEthereum = () => { + if (!window.ethereum) { + toast.error('MetaMask not detected'); + return false; + } + return true; + }; + + const addNFT = async (tokenAddress, tokenId, tokenURI) => { + if (!checkEthereum()) return; + setIsLoading(true); + try { + setIsLoading(true); + const wasAdded = await window.ethereum.request({ + method: 'wallet_watchAsset', + params: { + type: 'ERC721', + options: { + address: tokenAddress, + tokenId: tokenId, + tokenURI: tokenURI + }, + }, + }); + if (wasAdded) { + setIsLoading(false); + toast.success('NFT added successfully to MetaMask'); + } else { + setIsLoading(false); + toast.error('Failed to add NFT'); + } + } catch (error) { + setIsLoading(false); + toast.error('Error adding NFT'); + } + }; + return (
@@ -88,6 +128,19 @@ const VaultNFT = ({ className="nft-wrap" dangerouslySetInnerHTML={{ __html: nftContent }} /> +
)