Skip to content

Commit

Permalink
Merge branch 'main' of github.com:airswap/airswap-web into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
dmosites committed Nov 14, 2023
2 parents 056938c + de20eaa commit 02d444f
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -367,6 +367,7 @@ const OrderDetailWidget: FC<OrderDetailWidgetProps> = ({ order }) => {
isRequestingBaseToken={isSignerTokenLoading}
isRequestingQuoteAmount={isSenderTokenLoading}
isRequestingQuoteToken={isSenderTokenLoading}
showTokenContractLink
baseAmount={signerAmount || "0.00"}
baseTokenInfo={signerToken}
maxAmount={null}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import styled from "styled-components/macro";

import { BorderlessButtonStyle } from "../../../../style/mixins";
import { BorderlessButtonStyle } from "../../style/mixins";

export const Link = styled.a`
padding: 0.25rem;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@ import { useTranslation } from "react-i18next";

import { getAccountUrl } from "@airswap/utils";

import Icon from "../../../Icon/Icon";
import { Link } from "./TransactionLink.style";
import Icon from "../Icon/Icon";
import { Link } from "./AccountLink.style";

type TransactionLinkProps = {
type AccountLinkProps = {
chainId: number;
address: string;
className?: string;
};

const TransactionLink = ({
const AccountLink = ({
chainId,
address,
className = "",
}: TransactionLinkProps) => {
}: AccountLinkProps) => {
const { t } = useTranslation();

return (
Expand All @@ -32,4 +32,4 @@ const TransactionLink = ({
);
};

export default TransactionLink;
export default AccountLink;
4 changes: 4 additions & 0 deletions src/components/SwapInputs/SwapInputs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const SwapInputs: FC<{
readOnly?: boolean;
showMaxButton?: boolean;
showMaxInfoButton?: boolean;
showTokenContractLink?: boolean;
tradeNotAllowed?: boolean;

baseAmount: string;
Expand Down Expand Up @@ -55,6 +56,7 @@ const SwapInputs: FC<{
readOnly = false,
showMaxButton = false,
showMaxInfoButton = false,
showTokenContractLink = false,
tradeNotAllowed = false,

baseAmount,
Expand Down Expand Up @@ -126,6 +128,7 @@ const SwapInputs: FC<{
showMaxButton={showMaxButton}
showMaxInfoButton={showMaxInfoButton}
readOnly={readOnly}
showTokenContractLink={showTokenContractLink}
amount={isSell ? baseAmount : quoteAmount}
includeAmountInput={
isSell || (!!quoteAmount && !isRequestingQuoteAmount)
Expand Down Expand Up @@ -156,6 +159,7 @@ const SwapInputs: FC<{
isRequestingToken={
isSell ? isRequestingQuoteToken : isRequestingBaseToken
}
showTokenContractLink={showTokenContractLink}
amount={isSell ? quoteAmount : baseAmount}
includeAmountInput={
!isSell ||
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { css } from "styled-components/macro";
import breakPoints from "../../../../style/breakpoints";
import { BorderlessButtonStyle, TextEllipsis } from "../../../../style/mixins";
import { fontMono } from "../../../../style/themes";
import AccountLink from "../../../AccountLink/AccountLink";
import Icon from "../../../Icon/Icon";
import TransactionLink from "../../subcomponents/TransactionLink/TransactionLink";

type ContainerProps = {
disabled: boolean;
Expand Down Expand Up @@ -182,7 +182,7 @@ export const Tooltip = styled.div`
${TooltipStyle};
`;

export const StyledIcon = styled(TransactionLink)`
export const StyledIcon = styled(AccountLink)`
display: flex;
position: relative;
Expand Down
25 changes: 24 additions & 1 deletion src/components/TokenSelect/TokenSelect.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ import { MdKeyboardArrowDown } from "react-icons/md";
import styled, { css, keyframes } from "styled-components/macro";

import isActiveLanguageLogographic from "../../helpers/isActiveLanguageLogographic";
import { BorderlessButtonStyle } from "../../style/mixins";
import {
BorderlessButtonStyle,
InputOrButtonBorderStyle,
} from "../../style/mixins";
import AccountLink from "../AccountLink/AccountLink";
import TokenLogo from "../TokenLogo/TokenLogo";
import StyledTokenLogo from "../TokenLogo/TokenLogo.styles";
import { SelectItem, FormLabel, FormInput } from "../Typography/Typography";

const fadeOut = keyframes`
Expand Down Expand Up @@ -187,10 +192,12 @@ export const SubText = styled.div`
export const TokenSelectContainer = styled.div<{
$isLoading: boolean;
$isQuote: boolean;
showTokenContractLink: boolean;
}>`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
height: 4.5rem;
Expand All @@ -211,6 +218,10 @@ export const TokenSelectContainer = styled.div<{
${(props) => (!props.$isLoading ? "animation: none" : "")};
}
${ContainingButton} ${StyledTokenLogo} {
${(props) => (props.showTokenContractLink ? "visibility: hidden" : "")};
}
${TokenLogoLeft} {
transform: ${(props) =>
props.$isQuote ? "translateX(-3.6rem)" : "translateX(0)"};
Expand Down Expand Up @@ -268,3 +279,15 @@ export const PlaceholderContainer = styled.div`
height: 0.875rem;
}
`;

export const TokenAccountButton = styled(AccountLink)`
${InputOrButtonBorderStyle};
border-radius: 50%;
margin-right: 0.5rem;
min-width: 1.625rem;
max-width: 1.625rem;
min-height: 1.625rem;
max-height: 1.625rem;
background: ${(props) => props.theme.colors.black};
`;
15 changes: 14 additions & 1 deletion src/components/TokenSelect/TokenSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
InputAndMaxButtonWrapper,
InfoLabel,
SubText,
TokenAccountButton,
} from "./TokenSelect.styles";
import { getTokenText } from "./helpers";
import TokenSelectFocusBorder from "./subcomponents/TokenSelectFocusBorder/TokenSelectFocusBorder";
Expand Down Expand Up @@ -89,6 +90,7 @@ export type TokenSelectProps = {
/**
* Used for showing quote style
*/
showTokenContractLink?: boolean;
isQuote?: boolean;
hasError?: boolean;
subText?: string;
Expand All @@ -112,6 +114,7 @@ const TokenSelect: FC<TokenSelectProps> = ({
hasError = false,
showMaxButton = false,
showMaxInfoButton = false,
showTokenContractLink = false,
}) => {
const { t } = useTranslation();

Expand All @@ -120,7 +123,17 @@ const TokenSelect: FC<TokenSelectProps> = ({
}, [selectedToken, readOnly]);

return (
<TokenSelectContainer $isQuote={isQuote} $isLoading={isRequestingAmount}>
<TokenSelectContainer
$isQuote={isQuote}
$isLoading={isRequestingAmount}
showTokenContractLink={showTokenContractLink}
>
{selectedToken && showTokenContractLink && (
<TokenAccountButton
chainId={selectedToken.chainId}
address={selectedToken.address}
/>
)}
{!isRequestingToken ? (
<ContainingButton onClick={onChangeTokenClicked} disabled={readOnly}>
<TokenLogoLeft logoURI={selectedToken?.logoURI} size="large" />
Expand Down

0 comments on commit 02d444f

Please sign in to comment.