History route

dapp-oeth/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "PORT=3001 yarn dev",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

dapp-oeth/pages/history.js

@@ -6,8 +6,6 @@ import Layout from 'components/layout'
 import Nav from 'components/Nav'
 import BalanceHeader from 'components/buySell/BalanceHeader'
 import TransactionHistory from 'components/TransactionHistory'
-import GetOUSD from 'components/GetOUSD'
-import { assetRootPath } from 'utils/image'
 import { useOverrideAccount } from '../src/utils/hooks'
 import ErrorModal from '../src/components/buySell/ErrorModal'
 
@@ -39,38 +37,14 @@ export default function History({ locale, onLocale }) {
           }}
         />
       )}
+      <Nav page={'history'} locale={locale} onLocale={onLocale} />
       <Layout locale={locale} onLocale={onLocale}>
-        <Nav page={'history'} locale={locale} onLocale={onLocale} />
         <div className="home d-flex flex-column">
           <BalanceHeader />
-          {(overrideAccount || active) && <TransactionHistory />}
-          {!overrideAccount && !active && (
-            <div className="empty-placeholder d-flex flex-column align-items-center justify-content-start">
-              <img src={assetRootPath('/images/wallet-icons.svg')} />
-              <div className="header-text">
-                {fbt('No wallet connected', 'Disconnected dapp message')}
-              </div>
-              <div className="subtext">
-                {fbt(
-                  'Please connect an Ethereum wallet',
-                  'Disconnected dapp subtext'
-                )}
-              </div>
-              <GetOUSD primary connect trackSource="Dapp widget body" />
-            </div>
-          )}
+          <TransactionHistory />
         </div>
       </Layout>
       <style jsx>{`
-        .empty-placeholder {
-          min-height: 470px;
-          height: 100%;
-          padding: 70px;
-          border-radius: 10px;
-          border-top: solid 1px #cdd7e0;
-          background-color: #fafbfc;
-        }
-
         .header-text {
           font-size: 22px;
           line-height: 0.86;

dapp-oeth/src/components/GetOUSD.js

@@ -19,6 +19,7 @@ const GetOUSD = ({
   showLogin,
   trackSource,
   light2,
+  gradient,
   zIndex2,
   navMarble,
 }) => {
@@ -33,6 +34,7 @@ const GetOUSD = ({
     light && 'btn-light',
     light2 && 'btn-light2',
     primary && 'btn-primary',
+    gradient && 'btn-gradient',
     zIndex2 && 'zIndex2',
     navMarble && 'nav-marble'
   )
@@ -72,12 +74,21 @@ const GetOUSD = ({
       </button>
       <style jsx>{`
         .btn {
-          font-size: 1.125rem;
+          font-size: 1rem;
           font-weight: bold;
           border-radius: 25px;
           padding: 0;
         }
 
+        .btn-gradient {
+          background-image: linear-gradient(
+            90deg,
+            #8c66fc -28.99%,
+            #0274f1 144.97%
+          );
+          color: white;
+        }
+
         .zIndex2 {
           position: relative;
           z-index: 2;
@@ -109,6 +120,10 @@ const GetOUSD = ({
             width: 100%;
           }
 
+          .max-w-107 {
+            max-width: 107px;
+          }
+
           .nav-marble {
             width: auto;
             color: #fafbfb;