Switch to Cow widget (#1121)

* Remove Ohmage and switch to cow swap widget on trade page * Add border and allow deadline editing * Fixed deadline * Move temple to tokenlist
TempleDAO · Nov 26, 2024 · dd0edc8 · dd0edc8
1 parent 61bef5d
commit dd0edc8
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 12 deletions.
diff --git a/apps/dapp/package.json b/apps/dapp/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@balancer-labs/sdk": "^1.1.6",
+    "@cowprotocol/widget-react": "^0.12.0",
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-apps-sdk": "^8.1.0",
     "@safe-global/safe-core-sdk-types": "2.3.0",

diff --git a/apps/dapp/public/temple-dark.png b/apps/dapp/public/temple-dark.png
diff --git a/apps/dapp/src/components/Layouts/V2Layout/index.tsx b/apps/dapp/src/components/Layouts/V2Layout/index.tsx
@@ -32,7 +32,6 @@ enum V2DashboardLocPaths {
   Trade = '/dapp/trade',
   Trv = '/dapp/dashboard/treasuryreservesvault',
   Borrow = '/dapp/borrow',
-  Ohmage = '/dapp/ohmage',
   Legacy = '/dapp/legacy',
 }
 
@@ -63,12 +62,6 @@ const V2Layout = () => {
       Logo: Payments,
       selected: V2DashboardLocPaths.Borrow === loc.pathname,
     },
-    {
-      label: 'Ohmage',
-      linkTo: V2DashboardLocPaths.Ohmage,
-      Logo: Candle,
-      selected: V2DashboardLocPaths.Ohmage === loc.pathname,
-    },
     {
       label: 'Legacy',
       linkTo: V2DashboardLocPaths.Legacy,

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Trade/TradeWidget.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Trade/TradeWidget.tsx
@@ -0,0 +1,86 @@
+import {
+  CowSwapWidget,
+  EthereumProvider,
+  TradeType,
+} from '@cowprotocol/widget-react';
+
+import { CowSwapWidgetParams } from '@cowprotocol/widget-react';
+import { useSetChain } from '@web3-onboard/react';
+import Loader from 'components/Loader/Loader';
+import env from 'constants/env';
+import { useWallet } from 'providers/WalletProvider';
+import styled from 'styled-components';
+
+export const TradeWidget = () => {
+  const [{ connectedChain }] = useSetChain();
+  const { ethersProvider } = useWallet();
+
+  const params: CowSwapWidgetParams = {
+    appCode: 'Temple Dapp',
+    width: '100%',
+    height: '640px',
+    chainId: Number(connectedChain?.id) || 1,
+    tokenLists: [env.tradeTokenListUrl],
+    tradeType: TradeType.SWAP,
+    sell: {
+      asset: 'DAI',
+      amount: '100',
+    },
+    buy: {
+      asset: 'TEMPLE',
+      amount: '100',
+    },
+    forcedOrderDeadline: {
+      swap: 7,
+    },
+    enabledTradeTypes: [TradeType.SWAP],
+    theme: {
+      baseTheme: 'dark',
+      primary: '#bd7b4f',
+      paper: '#0c0b0b',
+      info: '#4a90e2',
+      success: '#28a745',
+      background: '#0c0b0b',
+      danger: '#ff4343',
+      warning: '#ffa500',
+      alert: '#ff8c00',
+      text: '#ffdec9',
+    },
+    standaloneMode: false,
+    disableToastMessages: false,
+    disableProgressBar: false,
+    hideBridgeInfo: false,
+    hideOrdersTable: false,
+    images: {
+      emptyOrders: null,
+    },
+    sounds: {
+      postOrder: null,
+      orderError: null,
+      orderExecuted: null,
+    },
+  };
+
+  return (
+    <>
+      {!ethersProvider && <Loader />}
+      {ethersProvider && (
+        <WidgetContainer>
+          <CowSwapWidget
+            params={params}
+            provider={ethersProvider.provider as unknown as EthereumProvider}
+          />
+        </WidgetContainer>
+      )}
+    </>
+  );
+};
+
+const WidgetContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 0.0625rem solid rgb(189, 123, 79);
+  border-radius: 10px;
+  width: 500px;
+`;
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/TradePage.tsx b/apps/dapp/src/components/Pages/Core/DappPages/TradePage.tsx
@@ -1,14 +1,44 @@
 import styled from 'styled-components';
-import { Trade } from '../NewUI/TradeNew';
+import { TradeWidget } from './Trade/TradeWidget';
+import { useConnectWallet } from '@web3-onboard/react';
+import { useWallet } from 'providers/WalletProvider';
+import { TradeButton } from '../NewUI/Home';
 
 export const TradePage = () => {
+  const [{}, connect] = useConnectWallet();
+  const { wallet } = useWallet();
+
   return (
     <TradeContainer>
-      <Trade />
+      <HeaderText>Trade</HeaderText>
+      {wallet ? (
+        <TradeWidget />
+      ) : (
+        <TradeButton
+          onClick={() => {
+            connect();
+          }}
+          style={{ whiteSpace: 'nowrap' }}
+        >
+          Connect Wallet
+        </TradeButton>
+      )}
     </TradeContainer>
   );
 };
 
+const HeaderText = styled.div`
+  height: 32px;
+  font-size: 36px;
+  line-height: 42px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffdec9;
+  margin-top: 10px;
+  margin-bottom: 40px;
+`;
+
 const TradeContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/apps/dapp/src/constants/env/local.tsx b/apps/dapp/src/constants/env/local.tsx
@@ -9,6 +9,8 @@ const env: Environment = {
   alchemyId: '-nNWThz_YpX1cGffGiz-lbSMu7dmp4GK',
   rpcUrl: 'https://rpc.ankr.com/eth',
   backendUrl: 'http://localhost:3001',
+  tradeTokenListUrl:
+    'https://sf294otxgnbicood.public.blob.vercel-storage.com/testnet-tokens-acdWvsxlYFCXUEjNZmcxd4DRB4fXAb.json',
   contracts: {
     balancerVault: '',
     farmingWallet: '',

diff --git a/apps/dapp/src/constants/env/preview.tsx b/apps/dapp/src/constants/env/preview.tsx
@@ -9,6 +9,8 @@ const env: Environment = {
   alchemyId: 'AorwfDdHDsEjIX4HPwS70zkVjWqjv5vZ',
   rpcUrl: 'https://rpc.ankr.com/eth',
   backendUrl: 'https://backend-stage.templedao.link',
+  tradeTokenListUrl:
+    'https://sf294otxgnbicood.public.blob.vercel-storage.com/testnet-tokens-BCYU6hCLdzUdj1TvvTOcw5ux8Wxmhj.json',
   contracts: {
     balancerVault: '',
     exitQueue: '',

diff --git a/apps/dapp/src/constants/env/production.tsx b/apps/dapp/src/constants/env/production.tsx
@@ -9,6 +9,8 @@ const env: Environment = {
   alchemyId: 'XiIZxWykHU5AOFBwxKgxseXWN984Mp8F',
   rpcUrl: 'https://rpc.ankr.com/eth',
   backendUrl: 'https://backend.templedao.link',
+  tradeTokenListUrl:
+    'https://sf294otxgnbicood.public.blob.vercel-storage.com/prod-tokens-ycNgmUSdpPt1kIoael5y4t81s2jtZc.json',
   contracts: {
     balancerVault: '0xBA12222222228d8Ba445958a75a0704d566BF2C8',
     exitQueue: '0xC6d556C34a179a224AEBE42e77c6e76594148B97',

diff --git a/apps/dapp/src/constants/env/types.ts b/apps/dapp/src/constants/env/types.ts
@@ -78,6 +78,7 @@ export interface Token {
   address: string;
   decimals: number;
   symbol?: string;
+  logoURI?: string;
 }
 
 export interface Tokens {
@@ -106,6 +107,7 @@ export interface Environment {
   alchemyId: string;
   rpcUrl: string;
   backendUrl: string;
+  tradeTokenListUrl: string;
   contracts: Contracts;
   gas?: Gas;
   tokens: Tokens;

diff --git a/apps/dapp/src/main.tsx b/apps/dapp/src/main.tsx
@@ -17,7 +17,6 @@ import { TradePage } from './components/Pages/Core/DappPages/TradePage';
 import { BorrowPage } from 'components/Pages/Core/DappPages/Borrow';
 import { LegacyPage } from 'components/Pages/Core/DappPages/LegacyPage';
 import V2Layout from 'components/Layouts/V2Layout';
-import { OhmagePage } from 'components/Pages/Core/DappPages/OhmagePage';
 
 // Separate Chunks
 const TeamPayments = React.lazy(() => import('components/Pages/TeamPayments'));
@@ -80,7 +79,6 @@ root.render(
               <Route path="dashboard/*" element={<DashboardPage />} />
               <Route path="trade" element={<TradePage />} />
               <Route path="borrow" element={<BorrowPage />} />
-              <Route path="ohmage" element={<OhmagePage />} />
               <Route path="legacy" element={<LegacyPage />} />
             </Route>
           </>

diff --git a/apps/dapp/src/providers/WalletProvider.tsx b/apps/dapp/src/providers/WalletProvider.tsx
@@ -52,6 +52,7 @@ const INITIAL_STATE: WalletState = {
   updateBalance: asyncNoop,
   collectTempleTeamPayment: asyncNoop,
   ensureAllowance: asyncNoop,
+  ethersProvider: null,
 };
 
 const WalletContext = createContext<WalletState>(INITIAL_STATE);
@@ -62,10 +63,13 @@ export const WalletProvider = (props: PropsWithChildren<object>) => {
   const [{ wallet, connecting }] = useConnectWallet();
   const [signer, setSigner] = useState<Nullable<Signer>>(null);
   const [walletAddress, setWalletAddress] = useState<string | undefined>();
+  const [ethersProvider, setEthersProvider] =
+    useState<ethers.providers.Web3Provider | null>(null);
 
   useEffect(() => {
     if (wallet) {
       const ethersProvider = new ethers.providers.Web3Provider(wallet.provider);
+      setEthersProvider(ethersProvider);
       setSigner(ethersProvider.getSigner());
       if (wallet.accounts.length > 0) {
         setWalletAddress(wallet.accounts[0].address);
@@ -261,6 +265,7 @@ export const WalletProvider = (props: PropsWithChildren<object>) => {
         getBalance: updateBalance,
         updateBalance,
         collectTempleTeamPayment,
+        ethersProvider,
       }}
     >
       {children}

diff --git a/apps/dapp/src/providers/types.ts b/apps/dapp/src/providers/types.ts
@@ -1,4 +1,4 @@
-import { BigNumber, ContractReceipt, Signer } from 'ethers';
+import { BigNumber, ContractReceipt, ethers, Signer } from 'ethers';
 import { Nullable } from 'types/util';
 import { TransactionReceipt } from '@ethersproject/abstract-provider';
 import { TICKER_SYMBOL } from 'enums/ticker-symbol';
@@ -134,4 +134,6 @@ export interface WalletState {
     spender: string,
     minAllowance: BigNumber
   ): Promise<void>;
+
+  ethersProvider: Nullable<ethers.providers.Web3Provider>;
 }
diff --git a/apps/dapp/yarn.lock b/apps/dapp/yarn.lock
@@ -1265,6 +1265,38 @@
   dependencies:
     chalk "^4.0.0"
 
+"@cowprotocol/events@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/events/-/events-1.5.0.tgz#052e8c8d4462ffe64b81152f4ac3d90658a920e0"
+  integrity sha512-n7HTpd6ADSZrjwdtT9e79dfl1OWCqVHavm8l96FucW/De8ZCdFhPMsxLLdjdJlhWos3oFgpLjQNmthJvpzEl8A==
+  dependencies:
+    "@cowprotocol/types" "^1.2.0"
+
+"@cowprotocol/iframe-transport@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/iframe-transport/-/iframe-transport-1.1.0.tgz#18cf735134f05ecc4877a93dda5bd621c563de69"
+  integrity sha512-sT3B8WwmJqz1FhIgDtpmEZcDg3EFkTGevsPddLShSwdcaqV7fYsVeYv4JgB/b0fwIIVLO0dHdrUhoQh9DTihog==
+
+"@cowprotocol/types@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/types/-/types-1.2.0.tgz#b036c7959122118d278e67200da2aeb88d5aed09"
+  integrity sha512-K/jOyLtffgEFs52hRKX7tyDHtIA3asnsB9So6lINCPfNetr1GhM818+kf+f3sPtOHWsBpL3pTkjJphzDVCQntQ==
+
+"@cowprotocol/widget-lib@^0.16.0":
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/widget-lib/-/widget-lib-0.16.0.tgz#75874201e5bcc27c12c79b9fa657979b7e261885"
+  integrity sha512-QAIFhpiWJXslWIxmX6KaoJE/ohYiOxwylApB7GO4TIx+HtvAMEZUorvPcb/ueF8K9P2zZMUGGZsiy83sOC5big==
+  dependencies:
+    "@cowprotocol/events" "^1.5.0"
+    "@cowprotocol/iframe-transport" "^1.1.0"
+
+"@cowprotocol/widget-react@^0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@cowprotocol/widget-react/-/widget-react-0.12.0.tgz#d45ad64ac3baf9d142f3df1b3a91f46a806adbf6"
+  integrity sha512-mN/+lMUGJAAKVRt3gin3NfFQqmHphbq23tdPvAl5pTGQ9FdhN+4YHmAjiWnxXR87slmNvwMYPrOkfrCPtR1+GA==
+  dependencies:
+    "@cowprotocol/widget-lib" "^0.16.0"
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"