Skip to content

Commit

Permalink
feat: [ALPHA-3959] add uniswap embedded widget (#55)
Browse files Browse the repository at this point in the history
  • Loading branch information
@elcharitas
elcharitas authored Oct 20, 2023
1 parent bea0dc9 commit 56f4fe5
Show file tree
Hide file tree
Showing 10 changed files with 3,123 additions and 90 deletions.
1 change: 1 addition & 0 deletions packages/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@sentry/react": "7.8.1",
"@sentry/tracing": "7.8.1",
"@types/dompurify": "3.0.3",
"@uniswap/widgets": "2.59.0",
"@wagmi/core": "1.3.8",
"@web3modal/ethereum": "2.7.0",
"@web3modal/react": "2.7.0",
Expand Down
65 changes: 65 additions & 0 deletions packages/frontend/src/components/module-disclaimer/ModuleDisclaimer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { FC } from "react";
import { Button, ScrollBar, TextOverlay } from "@alphaday/ui-kit";
import ReactMarkdown from "react-markdown";
import { REMARK_URL_REGEX, remarkRegex } from "src/api/utils/textUtils";
import CONFIG from "src/config";

const PLUGINS = [remarkRegex(REMARK_URL_REGEX)];
const { Z_INDEX_REGISTRY } = CONFIG.UI;

interface IProps {
show: boolean;
/**
* text to be displayed (accepts markdown)
*/
disclaimer: string;
onAccept: () => void;
onReject?: () => void;
}

const ModuleDisclaimer: FC<IProps> = ({
show,
disclaimer,
onAccept,
onReject,
}) => {
if (!show) {
return null;
}

return (
<TextOverlay
style={{
zIndex: Z_INDEX_REGISTRY.OVERLAY,
}}
>
<ScrollBar>
<div className="relative flex flex-col flex-wrap items-center justify-center m-[15px]">
<ReactMarkdown remarkPlugins={PLUGINS} linkTarget="_blank">
{disclaimer}
</ReactMarkdown>
<div className="flex flex-1 flex-row justify-end items-end">
<Button
onClick={onAccept}
variant="primaryXL"
className="ml-[15px]"
>
Accept
</Button>
{onReject && (
<Button
onClick={onAccept}
variant="primaryXL"
className="ml-[15px]"
>
Decline
</Button>
)}
</div>
</div>
</ScrollBar>
</TextOverlay>
);
};

export default ModuleDisclaimer;
242 changes: 242 additions & 0 deletions packages/frontend/src/components/uniswap/SwapModule.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
.uniswap-widget {
& > div {
margin: auto;
box-shadow: none;
}
.subhead {
text-transform: uppercase;
font-weight: theme("fontWeight.bold");
line-height: theme("lineHeight.3");
@apply fontGroup-supportBold;
}
[class*="WidgetWrapper__StyledWidgetWrapper"],
[class*="TokenSelect__SearchInputContainer"] {
background-color: theme("colors.backgroundVariant200");
border-radius: theme("borderRadius.lg");
box-shadow: none;
@apply fontGroup-normal;
*:not(.subhead):not(input) {
@apply fontGroup-normal;
}
}
[class*="Button__BaseButton"] {
border-radius: theme("borderRadius.lg");
background-color: theme("colors.btnRingVariant200");
font-weight: bold;
color: theme("colors.primary");
box-shadow: none;

*:hover {
background-color: inherit !important;
}
}
[class*="Button__BaseButton"]:hover:not([disabled]):not([class*="transparentButton"]):not([class*="Custom"]):not([class*="TokenOptions__TokenButton"]) {
background-color: theme("colors.btnBackgroundVariant1500");
}
[class*="transparentButton"],
[class*="transparentButton"]:hover {
background-color: transparent;
}
[class*="Button__transparentButton"] {
background-color: transparent;
font-weight: theme("fontWeight.bold");
}
[class*="Input__InputColumn"] {
border-radius: theme("borderRadius.lg");
background-color: theme("colors.backgroundVariant500");
}

/** Styles for the token input */
[class*="TokenOptions__TokenButton"] {
border-radius: theme("borderRadius.sm");
background-color: theme("colors.backgroundVariant300");
}
[class*="TokenOptions__TokenButton"]:hover {
background-color: theme("colors.btnRingVariant500") !important;
}
[class*="TokenInput"] {
color: theme("colors.primaryVariant100");
* {
@apply fontGroup-highlightSemi;
}
}
[class*="ValueInput"] {
@apply fontGroup-major;
}
[class*="TokenSelect__SearchInputContainer"] {
border-radius: theme("borderRadius.lg");
* {
background-color: theme("colors.backgroundVariant200");
border-color: transparent;
}
}
[class*="ReverseButton__Underlayer"] {
background-color: theme("colors.backgroundVariant200");
[class*="ReverseButton"] {
border-color: theme("colors.backgroundVariant200");
background-color: theme("colors.backgroundVariant500");
}
}
[class*="Input__Balance"] {
font-weight: theme("fontWeight.normal");
}
[class*="type__TextWrapper"] {
color: theme("colors.primary");
*:hover,
*:focus {
border-color: transparent;
}
}
[class*="type__TextWrapper"]:hover {
background-color: inherit !important;
}
[class*="type__TextWrapper"].button {
color: theme("colors.primary");
font-weight: theme("fontWeight.semibold");
display: flex;
align-items: center;
justify-content: center;
}
[class*="ActionButton"] {
[class*="type__TextWrapper"].button {
font-weight: bold;
}
}
[class*="icons__LargeWrapper"] > svg {
color: theme("colors.primary");
}
[class*="TokenOptions__OnHover"] {
display: none;
}

/** Styles for the settings */
[class*="Popover__PopoverContainer"] {
background-color: theme("colors.backgroundVariant300");
width: 100%;
height: 100%;
max-height: 88%;
[class*="SettingsColumn"] {
[class*="Popover__PopoverContainer"] {
height: fit-content;
}
}
}
[class*="Header__HeaderRow"]
> div
> div
> [class*="Popover__PopoverContainer"] {
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
transform: none;

[class*="Tooltip__IconTooltip"] {
align-self: start;
svg {
width: theme("spacing.3");
}
}

[class*="Expando__ExpandoColumn"][open] {
max-height: theme("spacing.20");

[class*="Expando__InnerColumn"] {
max-height: theme("spacing.20");
}
}

[class*="Expando__IconPrefix"] {
font-weight: bold;
}

[class*="Input-sc"] {
font-weight: normal;
padding: 0;
border-radius: theme("borderRadius.lg");
background-color: theme("colors.backgroundVariant200");
margin-right: theme("spacing.1");
& + div {
padding-right: theme("spacing.4");
display: flex;
}
}

[class*="MaxSlippageSelect__Custom"] {
border-radius: theme("borderRadius.lg");
background-color: theme("colors.backgroundVariant200");
padding-right: theme("spacing.2");
}

[class*="TransactionTtlInput__Input-sc"] {
padding: theme("spacing.3");
border-radius: theme("borderRadius.lg");
input:active {
border-color: transparent !important;
}
}
}

/* * Toolbar that show details of your transaction above the large button */
[class*="Toolbar__StyledExpando"] {
font-weight: theme("fontWeight.semibold");

[class*="Popover__Reference"] {
font-weight: normal;
}
[class*="type__TextWrapper-sc"] {
font-weight: normal;
}
}

/** Styles for selecting tokens */
[class*="CommonBases__BasesContainer"] {
font-weight: normal;
[class*="CommonBases__BaseWrapper"] {
border-radius: theme("borderRadius.lg");
background-color: theme("colors.backgroundVariant300");
border-color: theme("colors.btnRingVariant200");
}
}

/** Styles for Review Swap */
[class*="Details__Label"] {
font-weight: theme("fontWeight.semibold");
}

[class*="headline"] {
font-weight: theme("fontWeight.bold");
line-height: theme("lineHeight.7");
}
[class*="body"] {
font-weight: normal;
}
[class*="Row-sc-1nzvhrh-0"] > div.Row-sc-1nzvhrh-0 {
align-self: center;
}

/** Swap success & error */
[class*="Dialog__Modal"] {
background-color: theme("colors.backgroundVariant300");
}

/** Swap warning */
[class*="ErrorView__ExpandoContent"] {
@apply fontGroup-supportBold;
}

/** Connect Wallet Dialog buttons */
[class*="ConnectWalletDialog"] {
[class*="Button__BaseButton"] {
background-color: theme("colors.backgroundVariant200");
}
[class*="Button__BaseButton"]:hover {
background-color: theme("colors.backgroundVariant500") !important;
}
}

input {
height: 20px;
border: none !important;
}
}
47 changes: 47 additions & 0 deletions packages/frontend/src/components/uniswap/SwapModule.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { FC } from "react";
import { SwapWidget, Theme, darkTheme } from "@uniswap/widgets";
import ModuleDisclaimer from "../module-disclaimer/ModuleDisclaimer";
import "./SwapModule.scss";

interface IProps {
config: {
convenienceFee: number | undefined;
convenienceFeeRecipient:
| string
| { [chainId: number]: string }
| undefined;
};
theme: Theme;
termsOfService: string;
showToS: boolean;
/**
* handler to call when user accepts terms of service
*/
onAcceptToS: () => void;
}

const SwapModule: FC<IProps> = ({
config,
theme,
showToS,
termsOfService,
onAcceptToS,
}) => {
return (
<div className="uniswap-widget">
<ModuleDisclaimer
disclaimer={termsOfService}
show={showToS}
onAccept={onAcceptToS}
/>
<SwapWidget
theme={theme || darkTheme}
width="100%"
convenienceFee={config.convenienceFee}
convenienceFeeRecipient={config.convenienceFeeRecipient}
/>
</div>
);
};

export default SwapModule;
Loading

0 comments on commit 56f4fe5

Please sign in to comment.