added a home page

pablo-gonzalez-akkodis · Jul 3, 2024 · 406b027 · 406b027
1 parent 98406e9
commit 406b027
Show file tree

Hide file tree

Showing 13 changed files with 149 additions and 28 deletions.
diff --git a/apps/alpha/components/App/FavoriteBar/index.tsx b/apps/alpha/components/App/FavoriteBar/index.tsx
@@ -14,7 +14,6 @@ const Wrapper = styled(Row)`
   position: relative;
   min-height: 50px;
   border-radius: 10px;
-  border-radius: 4px;
 `;
 
 const FavoritesWrap = styled(Row)`

diff --git a/apps/alpha/components/App/UserPanel/OrdersTab.tsx b/apps/alpha/components/App/UserPanel/OrdersTab.tsx
@@ -31,7 +31,6 @@ const TabButton = styled(RowCenter)<{ active: boolean }>`
 
   ${({ theme, active }) => theme.mediaWidth.upToMedium`
     flex: 1;
-    background: ${active ? theme.bg3 : theme.bg1};
   `};
 `;
 

diff --git a/apps/alpha/components/Layout/Menu.tsx b/apps/alpha/components/Layout/Menu.tsx
@@ -93,6 +93,12 @@ export default function Menu() {
       {/* <Image src={BURGER_ICON} alt="burger-icon" onClick={() => toggle()} /> */}
       <div>
         <InlineModal isOpen={isOpen} onClick={() => toggle()}>
+        <Link href="/" passHref className="noDecoration">
+            <Row active={router.asPath === "/"}>
+              <div>Home</div>
+              {/* <MarketPair /> */}
+            </Row>
+          </Link>
           <Link href="/trade" passHref className="noDecoration">
             <Row active={router.route.includes("/trade")}>
               <div>Trade</div>

diff --git a/apps/alpha/components/Layout/NavBar.tsx b/apps/alpha/components/Layout/NavBar.tsx
@@ -54,7 +54,6 @@ const BackgroundWrapper = styled(Wrapper)<{ newNotification?: boolean }>`
   height: 72px;
   overflow: hidden;
   position: absolute;
-  background-image: url("/images/neonBg.png");
   background-size: cover;
   background-repeat: no-repeat;
   animation: ${({ newNotification }) =>

diff --git a/apps/alpha/components/Layout/NavLogo.tsx b/apps/alpha/components/Layout/NavLogo.tsx
@@ -45,19 +45,17 @@ export default function NavLogo() {
   return (
     <div>
       <Wrapper>
-        <ExternalLink href={APP_URL} target="_self" passHref>
+        <ExternalLink href="/" target="_self" passHref>
           <NavBarLogo
             width={mobileVersion ? 40 : 58}
             height={mobileVersion ? 40 : 58}
           />
         </ExternalLink>
-        {!mobileVersion &&
-          <ExternalLink href="">
-            <SymmetrialText className="space-grotesk">
-              PEPPY FINANCE{" "}
-            </SymmetrialText>
-          </ExternalLink>
-        }
+        {!mobileVersion && (
+          <SymmetrialText className="space-grotesk">
+            PEPPY FINANCE{" "}
+          </SymmetrialText>
+        )}
       </Wrapper>
     </div>
   );

diff --git a/apps/alpha/components/Layout/index.tsx b/apps/alpha/components/Layout/index.tsx
@@ -22,7 +22,6 @@ const Wrapper = styled.div`
 const HeaderWrap = styled.div`
   width: 100%;
   margin-bottom: 16px;
-  position: sticky;
   top: 0;
   z-index: 300;
   background: ${({ theme }) => theme.bgTransparent};

diff --git a/apps/alpha/next.config.js b/apps/alpha/next.config.js
@@ -39,15 +39,15 @@ module.exports = {
   images: {
     domains: ["raw.githubusercontent.com"],
   },
-  async redirects() {
-    return [
-      {
-        source: "/",
-        destination: "/trade/BTCUSDT",
-        permanent: false,
-      },
-    ];
-  },
+  // async redirects() {
+  //   return [
+  //     {
+  //       source: "/",
+  //       destination: "/trade/BTCUSDT",
+  //       permanent: false,
+  //     },
+  //   ];
+  // },
   webpack: (config) => {
     if (isNext12(config)) return updateNextGreaterThan12Config(config);
     return updateNextLessThan12Config(config);

diff --git a/apps/alpha/pages/home/index.tsx b/apps/alpha/pages/home/index.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+import { Container } from "pages/trade/[symbol]";
+import Markets from "components/App/Markets";
+
+const Wrapper = styled(Container)`
+  padding: 0px 12px;
+`;
+
+export default function MarketsPage() {
+  return (
+    <Wrapper>
+      <Markets />
+    </Wrapper>
+  );
+}
diff --git a/apps/alpha/pages/index.tsx b/apps/alpha/pages/index.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect } from "react";
 import { updateAccount } from "@symmio/frontend-sdk/state/user/actions";
-
+import Link from "next/link";
 import { useAppDispatch } from "@symmio/frontend-sdk/state";
 import { useUserAccounts } from "@symmio/frontend-sdk/hooks/useAccounts";
-import { useConnectModal } from "@rainbow-me/rainbowkit";
 import styled from "styled-components";
 import { Box } from "rebass/styled-components";
+import { ExternalLink } from "components/Link";
+import { APP_URL } from "constants/chains/misc";
+import { NavBarLogo } from "components/Icons";
+import { useIsMobile } from "lib/hooks/useWindowSize";
 
 export const Row = styled(Box)<{
   width?: string;
@@ -60,10 +63,59 @@ export const BaseButton = styled(RowCenter)<{
   }
 `;
 
+const Wrapper = styled(RowCenter)`
+  flex-direction: column-reverse;
+  align-items: center;
+  width: fit-content;
+  align-items: center;
+`;
+
+export const TabHome = styled(RowCenter)`
+  height: 40px;
+  position: relative;
+  cursor: pointer;
+  margin-top: 30px;
+  text-align: center;
+  overflow: hidden;
+  border-radius: 10px;
+  text-transform: uppercase;
+  font-weight: 400;
+  color: ${({ theme }) => theme.text8};
+  background: ${({ theme }) => theme.bg9};
+
+  opacity: 0px;
+`;
+
+const SymmetrialText = styled.div`
+  gap: 4px;
+  font-size: 47px;
+  font-weight: 700;
+  margin: 0px 4px 4px 4px;
+  background: linear-gradient(
+    180deg,
+    rgba(199, 241, 153, 1),
+    rgba(92, 220, 240, 1) 100%
+  );
+  text-shadow: 0px 2px 0px #00000040;
+  font-family: Space Grotesk;
+  font-size: 66px;
+  font-weight: 700;
+  line-height: 59.4px;
+  text-align: center;
+
+  mix-blend-mode: plus-lighter;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: ${({ theme }) => theme.text0};
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+  `};
+`;
+
 export default function MyFunction() {
-  const { openConnectModal } = useConnectModal();
   const dispatch = useAppDispatch();
   const { accounts } = useUserAccounts();
+  const mobileVersion = useIsMobile();
+
   useEffect(() => {
     if (accounts !== null) {
       const lastSubAccount = accounts[accounts.length - 1];
@@ -72,8 +124,42 @@ export default function MyFunction() {
   }, [accounts, dispatch]);
   console.log("accounts", accounts);
   return (
-    <div>
-      <BaseButton onClick={openConnectModal}>click me</BaseButton>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Wrapper>
+        <TabHome style={!mobileVersion ? { width: "100%" } : { width: "85%" }}>
+          <Link href="/trade">
+            <p>Start Trading</p>
+          </Link>
+        </TabHome>
+        <div
+          className="boxStylingDarker"
+          style={
+            !mobileVersion
+              ? { width: "100%", padding: "20px" }
+              : { width: "85%", padding: "20px" }
+          }
+        >
+          <p>
+            Trade BTC, ETH and native Shimmer tokens with up to 100x leverage
+            directly from your wallet
+          </p>
+        </div>
+
+        <NavBarLogo
+          width={mobileVersion ? 208 : 208}
+          height={mobileVersion ? 208 : 208}
+        />
+        <SymmetrialText className="space-grotesk">
+          PEPPY FINANCE{" "}
+        </SymmetrialText>
+      </Wrapper>
     </div>
   );
 }
diff --git a/apps/alpha/theme/index.tsx b/apps/alpha/theme/index.tsx
@@ -319,7 +319,14 @@ export const ThemedGlobalStyle = createGlobalStyle`
     border-radius: 10px;
   }
 
+  .boxStylingDarker {
+    background: rgba(76, 70, 110, 0.3);
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 10px;
+  }
+
   .noDecoration {
     text-decoration: none;
   }
+  
 `;
diff --git a/packages/core/src/constants/chainInfo.ts b/packages/core/src/constants/chainInfo.ts
@@ -146,4 +146,13 @@ export const ChainInfo: { [chainId: number]: Info } = {
     blockExplorerUrl: "https://mantlescan.info/",
     WRAPPED_NATIVE_ADDRESS: "0x29019c39EC418Ac4e7aFc1d88d6b962Ff172aBf6",
   },
+  [SupportedChainId.SHIMMER]: {
+    chainId: "1073",
+    chainName: "ShimmerEVM Testnet",
+    label: "Shimmer Testnet",
+    nativeCurrency: { name: "Shimmer", symbol: "SMR", decimals: 18 },
+    rpcUrl: "https://json-rpc.evm.testnet.shimmer.network",
+    blockExplorerUrl: "https://explorer.evm.testnet.shimmer.network",
+    WRAPPED_NATIVE_ADDRESS: "0x29019c39EC418Ac4e7aFc1d88d6b962Ff172aBf6",
+  },
 };
diff --git a/packages/core/src/constants/chains.ts b/packages/core/src/constants/chains.ts
@@ -10,6 +10,7 @@ export enum SupportedChainId {
   FANTOM = 250,
   ARBITRUM = 42161,
   MANTLE = 5000,
+  SHIMMER = 1073,
 }
 
 export const SUPPORTED_CHAIN_IDS: SupportedChainId[] = Object.values(
@@ -33,6 +34,7 @@ export const CHAIN_IDS_TO_NAMES = {
   [SupportedChainId.BSC_TESTNET]: "bsc-testnet",
   [SupportedChainId.BASE]: "base",
   [SupportedChainId.MANTLE]: "mantle",
+  [SupportedChainId.SHIMMER]: "shimmer-testnet",
 };
 
 /**
@@ -58,6 +60,7 @@ export const L2_CHAIN_IDS = [
   SupportedChainId.FANTOM,
   SupportedChainId.BSC_TESTNET,
   SupportedChainId.MANTLE,
+  SupportedChainId.SHIMMER,
 ] as const;
 
 export type SupportedL2ChainId = (typeof L2_CHAIN_IDS)[number];
diff --git a/packages/core/src/state/hedger/reducer.ts b/packages/core/src/state/hedger/reducer.ts
@@ -87,7 +87,7 @@ export default createReducer(initialState, (builder) =>
       state.markets = [];
       state.marketsStatus = ApiState.ERROR;
       state.errorMessages = {};
-      console.error("Unable to fetch getMarkets");
+      console.error("Unable to fetch getMarkets", state);
     })
 
     .addCase(getOpenInterest.pending, (state) => {
@@ -100,7 +100,7 @@ export default createReducer(initialState, (builder) =>
     .addCase(getOpenInterest.rejected, (state) => {
       state.openInterestStatus = ApiState.ERROR;
       state.openInterest = { total: -1, used: -1 };
-      console.error("Unable to fetch openInterest");
+      console.error("Unable to fetch openInterest", state);
     })
 
     .addCase(getNotionalCap.pending, (state) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,7 +31,6 @@ const TabButton = styled(RowCenter)<{ active: boolean }>` @@
       ${({ theme, active }) => theme.mediaWidth.upToMedium`
         flex: 1;
-        background: ${active ? theme.bg3 : theme.bg1};
       `};
     `;
@@ Expand Down @@