reversed transactions

Stephen-Gordon · Mar 5, 2024 · 784da8f · 784da8f
1 parent bd3bd77
commit 784da8f
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 38 deletions.
diff --git a/src/app/_document.tsx b/src/app/_document.tsx
@@ -4,6 +4,10 @@ export default function Document() {
   return (
     <Html lang='en'>
       <Head>
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
+        />
         <link rel='manifest' href='/manifest.json' />
         <link rel='apple-touch-icon' href='/icon.png'></link>
         <meta name='theme-color' content='#2b2b2b' />

diff --git a/src/app/components/Balance/Balance.tsx b/src/app/components/Balance/Balance.tsx
@@ -22,5 +22,5 @@ export default function Balance() {
   }
 
   // Render the balance
-  return <div className='text-white'>{balanceState}</div>;
+  return <div className='text-white'>${balanceState}</div>;
 }
diff --git a/src/app/components/RecentTransaction/RecentTransaction.tsx b/src/app/components/RecentTransaction/RecentTransaction.tsx
@@ -27,12 +27,12 @@ export default function RecentTransaction({ transaction }: any) {
     <motion.div layoutId={transaction.hash}>
       <Link href={{ pathname: '/tx', query: { hash: transaction.hash } }}>
 
-            <motion.div className='bg-muted mb-4 flex content-center justify-between rounded-md border p-2 text-base transition-all duration-300'>
+            <motion.div className='bg-background mb-4 flex content-center justify-between rounded-md border p-2 text-base transition-all duration-300'>
               <div className='flex items-center'>
                 <div className='relative grid items-center justify-center'>
-                  <Avatar className='bg-black'></Avatar>
+                  <Avatar className='bg-slate-700'></Avatar>
                   <div className='absolute left-6 top-5'>
-                    <div className='bg-purple flex h-7 w-7 content-center items-center justify-center rounded-full '>
+                    <div className='bg-background border flex h-7 w-7 content-center items-center justify-center rounded-full '>
                       {transaction.from == address ? (
                         <ArrowLeft className='h-6 w-6' />
                       ) : (

diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx
@@ -50,9 +50,9 @@ export default function Activity() {
   return (
     <>
       {transactions?.length > 0 ? (
-        <motion.div layoutId='activity' className='w-full rounded-xl text-xl'>
+        <motion.div layoutId='activity' className='w-full bg-background rounded-full text-xl '>
           <Card className=''>
-            <CardContent className='grid gap-1 p-1.5'>
+            <CardContent className='grid gap-2 p-2 bg-background rounded-lg'>
               <div className='mt-4'>
                 {transactions &&
                   transactions.map((transaction: any, i: any) => (

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
@@ -44,7 +44,7 @@ export default function Page() {
   let decodedText =
     '0x819a46d27ddeb3ac2bde6edea1b31f452ab4517ebeace7df2aee4399641ab4ed';
   return (
-    <div id='render'>
+    <div id='render' className=''>
       <div className='absolute right-4 top-4'>
         <Link
           /* onClick={() => {
@@ -58,12 +58,12 @@ export default function Page() {
           <Menu />
         </Link>
       </div>
-      <div className='blurios p-4 pt-40'>
-        <div className='items-center text-center text-5xl'>
+      <div className='blurios pt-40'>
+        <div className='items-center p-2 text-center text-5xl'>
           <Balance />
         </div>
 
-        <div className='mt-10 grid grid-cols-2 gap-4'>
+        <div className='mt-10 grid grid-cols-2 gap-2 p-2'>
           <div>
             <Link
               onClick={() => {
@@ -73,8 +73,16 @@ export default function Page() {
                 pathname: '/search',
               }}
             >
-              <Button size={'lg'} variant={'outline'}>
-                <div>Send</div> <Send size={20} color='#cbd5e1' />
+              <Button className='text-xl' size={'lg'} variant={'outline'}>
+                <div className='flex grid-cols-3 content-center items-center'>
+                  <div className='text-xl'>
+                    <div>Send</div>
+                  </div>
+                  <div className='px-2'></div>
+                  <div>
+                    <Send size={20} color='#cbd5e1' />
+                  </div>
+                </div>
               </Button>
             </Link>
           </div>
@@ -88,17 +96,22 @@ export default function Page() {
                 pathname: '/receive',
               }}
             >
-              <Button size={'lg'} variant={'outline'}>
-                <div className='flex justify-between'>
-                  <div className=''>Receive</div>
-                  <QrCode size={20} color='#cbd5e1' />
+              <Button className='text-xl' size={'lg'} variant={'outline'}>
+                <div className='flex grid-cols-3 content-center items-center'>
+                  <div className='text-xl'>
+                    <div>Receive</div>
+                  </div>
+                  <div className='px-2'></div>
+                  <div>
+                    <QrCode size={22} color='#cbd5e1' />
+                  </div>
                 </div>
               </Button>
             </Link>
           </div>
         </div>
-        <div className='mt-4'>
-          <Tab.Group>
+        <div className='bg-accent mt-4 w-full rounded-t-xl p-4 min-h-[900px]'>
+          {/*  <Tab.Group>
             <Tab.List>
               <div className='mb-4 flex justify-between'>
                 <Tab>
@@ -115,7 +128,18 @@ export default function Page() {
               </Tab.Panel>
               <Tab.Panel>Content 2</Tab.Panel>
             </Tab.Panels>
-          </Tab.Group>
+          </Tab.Group> */}
+
+             {/*  <div className='mb-4 flex justify-between'>
+                
+                  <div className='text-lg text-gray-300'>Acttivity</div>
+               
+              </div> */}
+
+
+                <Activity />
+
+
         </div>
       </div>
     </div>

diff --git a/src/app/hooks/useGetRecentTransactions.tsx b/src/app/hooks/useGetRecentTransactions.tsx
@@ -16,7 +16,7 @@ const useGetRecentTransactions = async () => {
       category: ['erc20'],
     });
 
-    return data;
+    return data.transfers.reverse();
   } catch (error) {
     console.log('error', error);
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -84,8 +84,12 @@ export default function RootLayout({
  */
 
   return (
-    <html className=' h-full overflow-auto '>
+    <html className='h-full overflow-auto '>
       <head>
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
+        />
         <title>Payments, Stephen Gordon</title>
         <title>Payments, Stephen Gordon</title>
         <meta name='application-name' content='PWA App' />
@@ -99,7 +103,6 @@ export default function RootLayout({
         <meta name='msapplication-TileColor' content='#2B5797' />
         <meta name='msapplication-tap-highlight' content='no' />
         <meta name='theme-color' content='#101012' />
-
         <link rel='apple-touch-icon' href='/icons/touch-icon-iphone.png' />
         <link
           rel='apple-touch-icon'
@@ -116,7 +119,6 @@ export default function RootLayout({
           sizes='167x167'
           href='/icons/touch-icon-ipad-retina.png'
         />
-
         <link
           rel='icon'
           type='image/png'
@@ -160,13 +162,16 @@ export default function RootLayout({
           property='og:image'
           content='https://yourdomain.com/icons/apple-touch-icon.png'
         />
-
         <meta
           name='viewport'
           content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
         />
       </head>
       <Head>
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
+        />
         <title>Payments, Stephen Gordon</title>
         <meta name='application-name' content='PWA App' />
         <meta name='apple-mobile-web-app-capable' content='yes' />
@@ -179,7 +184,6 @@ export default function RootLayout({
         <meta name='msapplication-TileColor' content='#2B5797' />
         <meta name='msapplication-tap-highlight' content='no' />
         <meta name='theme-color' content='#000000' />
-
         <link rel='apple-touch-icon' href='/icons/touch-icon-iphone.png' />
         <link
           rel='apple-touch-icon'
@@ -196,7 +200,6 @@ export default function RootLayout({
           sizes='167x167'
           href='/icons/touch-icon-ipad-retina.png'
         />
-
         <link
           rel='icon'
           type='image/png'
@@ -216,7 +219,6 @@ export default function RootLayout({
           color='#5bbad5'
         />
         <link rel='shortcut icon' href='/favicon.ico' />
-
         <meta name='twitter:card' content='summary' />
         <meta name='twitter:url' content='https://yourdomain.com' />
         <meta name='twitter:title' content='PWA App' />
@@ -235,7 +237,6 @@ export default function RootLayout({
           property='og:image'
           content='https://yourdomain.com/icons/apple-touch-icon.png'
         />
-
         <link
           rel='apple-touch-startup-image'
           href='/images/apple_splash_2048.png'
@@ -273,15 +274,14 @@ export default function RootLayout({
         />
         <meta
           name='viewport'
-          content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
         />
       </Head>
 
       <body>
         <ThemeProvider
           attribute='class'
           defaultTheme='dark'
-
           disableTransitionOnChange
         >
           <Providers>
@@ -303,7 +303,7 @@ export default function RootLayout({
                     ></div>
                   </div> */}
                     <main
-                     /*  style={{
+                      /*  style={{
                         backgroundColor: 'rgba(16, 16, 18, 1)',
                       }} */
                       className=' h-screen w-screen text-gray-300'

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -36,6 +36,10 @@ export default function HomePage() {
   return (
     <main>
       <Head>
+        <meta
+          name='viewport'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
+        />
         <title>Payments, Stephen Gordon</title>
         <meta name='application-name' content='PWA App' />
         <meta name='apple-mobile-web-app-capable' content='yes' />
@@ -142,7 +146,7 @@ export default function HomePage() {
         />
         <meta
           name='viewport'
-          content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
+          content='width=device-width, initial-scale=1, maximum-scale=1'
         />
       </Head>
       {/*  <section className='h-screen w-screen bg-slate-900 text-white'>

diff --git a/src/app/transactions/page.tsx b/src/app/transactions/page.tsx
@@ -42,9 +42,9 @@ export default function Page() {
   return (
     <motion.div
       layoutId='activity'
-      className='w-full text-xl'
+      className='w-full text-xl p-4'
     >
-      <h1>Transactions</h1>
+      <div className='text-xl'>Transactions</div>
       <div className='mt-4'>
         {transactions &&
           transactions.map((transaction: any, i: any) => (

diff --git a/src/app/tx/page.tsx b/src/app/tx/page.tsx
@@ -55,7 +55,7 @@ export default function Page() {
             width: '100vw',
             height: '100vh',
           }}
-          className='bg-muted'
+          className='bg-background'
         >
           <div className='grid p-4'>
             <div className='my-4'>
@@ -97,7 +97,7 @@ export default function Page() {
                   </Link>
                 </div>
               </div>
-              <div className='bg-accent mt-4 rounded-xl p-4 text-slate-300'>
+              <div className='bg-muted mt-4 rounded-xl p-4 text-slate-300'>
                 <div className='mb-4 flex justify-between'>
                   <p>Status</p>
                   <p>Completed</p>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -2,9 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
+/* * {
   touch-action: none;
-}
+} */
 @layer base {
   :root {
     --background: 0 0% 100%;