Skip to content

Commit

Permalink
feat: add icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@zkSoju
zkSoju committed Nov 25, 2022
1 parent b1a7903 commit 23fce01
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 10 deletions.
17 changes: 13 additions & 4 deletions components/AmmTabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import useBurn from "../lib/hooks/burn/useBurn";
import useDammData from "../lib/hooks/data/useDammData";
import useAmmData from "../lib/hooks/data/useAmmData";
import shallow from "zustand/shallow";
import Image from "next/image";

const SwapTabContent = () => {
const { chain } = useNetwork();
Expand Down Expand Up @@ -501,7 +502,9 @@ const SwapTabContent = () => {
</p>
<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4 py-2">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdc.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
{currencies[Field.CURRENCY_A]?.symbol}
</p>
Expand All @@ -512,7 +515,9 @@ const SwapTabContent = () => {
</div>
<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4 py-2">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdt.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
{currencies[Field.CURRENCY_B]?.symbol}
</p>
Expand Down Expand Up @@ -591,7 +596,9 @@ const SwapTabContent = () => {
</div>
<div className="relative mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/5 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdc.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
USDC
</p>
Expand All @@ -602,7 +609,9 @@ const SwapTabContent = () => {
</div>
<div className="flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/5 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdt.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
USDT
</p>
Expand Down
21 changes: 16 additions & 5 deletions components/DammTabContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import useMint from "../lib/hooks/mint/useMint";
import useDammData from "../lib/hooks/data/useDammData";
import useProvideLiquidity from "../lib/hooks/provide/useProvideLiquidity";
import shallow from "zustand/shallow";
import Image from "next/image";

const DammTabContent = () => {
// load up default tokens for chain
Expand Down Expand Up @@ -444,7 +445,9 @@ const DammTabContent = () => {
</div>
<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent py-2 px-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdc.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
{currencies[Field.CURRENCY_A]?.symbol}
</p>
Expand All @@ -471,7 +474,9 @@ const DammTabContent = () => {
</div>
<div className="flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent py-2 px-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdt.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
{currencies[Field.CURRENCY_B]?.symbol}
</p>
Expand Down Expand Up @@ -509,7 +514,9 @@ const DammTabContent = () => {
</div>
<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4">
<div className="flex w-full items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdc.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
USDC
</p>
Expand All @@ -521,7 +528,9 @@ const DammTabContent = () => {

<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/usdt.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
USDT
</p>
Expand All @@ -532,7 +541,9 @@ const DammTabContent = () => {
</div>
<div className="mb-2 flex w-full items-center justify-between rounded-sm border-l-2 border-sky-400 bg-gradient-to-r from-sky-400/5 to-transparent p-4">
<div className="flex items-center">
<BiDollar className="mr-4 rounded-sm border border-white/10 p-1 text-2xl text-white" />
<div className="relative mr-4 h-4 w-4">
<Image src="/dove.png" alt="" fill className="object-contain" />
</div>
<p className="text-xs uppercase tracking-widest text-white">
DAMM-LP
</p>
Expand Down
10 changes: 9 additions & 1 deletion components/InputWithBalance.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { BigNumber } from "ethers";
import Image from "next/image";
import React, { useMemo } from "react";
import { BiDollar } from "react-icons/bi";
import { useNetwork } from "wagmi";
import useCurrencyIcon from "../lib/hooks/useTokenIcon";
import useTokenIcon from "../lib/hooks/useTokenIcon";
import { formatCurrencyAmount } from "../lib/utils/formatCurrencyAmount";
import { ChainId, Currency, CurrencyAmount } from "../sdk";

Expand All @@ -25,6 +28,7 @@ const InputWithBalance = ({
expectedChainId: ChainId | undefined;
}) => {
const { chain } = useNetwork();
const icon = useCurrencyIcon(currency);

if (!chain || chain.id !== expectedChainId) {
disabled = true;
Expand All @@ -50,7 +54,11 @@ const InputWithBalance = ({
disabled ? "text-white/50" : "bg-black/10 text-white"
}`}
>
<BiDollar className="mr-2 rounded-sm bg-white/10 p-px" />
<div className="relative mr-2 h-4 w-4 rounded-full">
{icon && (
<Image src={icon} alt="" fill className="object-contain" />
)}
</div>
{currency?.symbol}
</h4>
)}
Expand Down
24 changes: 24 additions & 0 deletions lib/hooks/useTokenIcon.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useMemo } from "react";
import { Currency, Token } from "../../sdk";

export default function useCurrencyIcon(
currency: Currency | undefined
): string | undefined {
return useMemo(() => {
if (currency?.symbol === "USDC") {
return "/usdc.png";
}
if (currency?.symbol === "USDT") {
return "/usdt.png";
}
if (currency?.symbol === "DAMM-LP") {
return "/dove.png";
}
if (currency?.symbol === "vUSDC") {
return "/usdc.png";
}
if (currency?.symbol === "vUSDT") {
return "/usdt.png";
}
}, [currency]);
}
Binary file added public/dove.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/usdc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/usdt.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 23fce01

Please sign in to comment.