diff --git a/apps/dapp/package.json b/apps/dapp/package.json
index 12c49e5d7..d630b4ce9 100644
--- 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
new file mode 100644
index 000000000..c21b26345
Binary files /dev/null and b/apps/dapp/public/temple-dark.png differ
diff --git a/apps/dapp/src/components/Layouts/V2Layout/index.tsx b/apps/dapp/src/components/Layouts/V2Layout/index.tsx
index 1dfb11d78..9ee67963e 100644
--- 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
new file mode 100644
index 000000000..8f8238192
--- /dev/null
+++ 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 && }
+ {ethersProvider && (
+
+
+
+ )}
+
+ );
+};
+
+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
index 34d7ffdfa..f71529cb5 100644
--- 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 (
-
+ Trade
+ {wallet ? (
+
+ ) : (
+ {
+ connect();
+ }}
+ style={{ whiteSpace: 'nowrap' }}
+ >
+ Connect Wallet
+
+ )}
);
};
+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
index 1933f1ced..a27828d45 100644
--- 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
index 6921b87ee..fdfa72922 100644
--- 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
index 039bd8928..5cc0534e0 100644
--- 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
index 728c58789..ea8dc6eab 100644
--- 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
index 7ac878f8d..2c57bac46 100644
--- 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(
} />
} />
} />
- } />
} />
diff --git a/apps/dapp/src/providers/WalletProvider.tsx b/apps/dapp/src/providers/WalletProvider.tsx
index 290e998d3..bcfa32aaa 100644
--- 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(INITIAL_STATE);
@@ -62,10 +63,13 @@ export const WalletProvider = (props: PropsWithChildren