Changes assets -> home, updates styles, adds kernel links

packages/wallet/src/App.js

@@ -13,7 +13,7 @@ import NotFound from 'views/NotFound.jsx'
 import 'App.css'
 
 const Wallet = lazy(() => import('views/Wallet.jsx'))
-const Assets = lazy(() => import('views/Assets.jsx'))
+const Home = lazy(() => import('views/Home.jsx'))
 const Register = lazy(() => import('views/Register.jsx'))
 const Create = lazy(() => import('components/Create.jsx'))
 const Import = lazy(() => import('components/Import.jsx'))
@@ -25,13 +25,13 @@ const App = () => {
  <Suspense fallback={<NotFound />}>
  <Routes>
  <Route path='/' element={<Wallet />} />
- <Route path='/assets' element={<Navigate to='/assets/overview' replace />} />
- <Route path='/assets/overview' element={<Assets />} />
+ <Route path='/home' element={<Navigate to='/home/overview' replace />} />
+ <Route path='/home/overview' element={<Home />} />
 
- <Route path='/assets/transactions' element={<Navigate to='/assets/overview' replace />} />
- <Route path='/assets/nfts' element={<Navigate to='/assets/overview' replace />} />
- <Route path='/assets/tokens' element={<Navigate to='/assets/overview' replace />} />
- <Route path='/assets/contracts' element={<Navigate to='/assets/overview' replace />} />
+ <Route path='/home/transactions' element={<Navigate to='/home/overview' replace />} />
+ <Route path='/home/nfts' element={<Navigate to='/home/overview' replace />} />
+ <Route path='/home/tokens' element={<Navigate to='/home/overview' replace />} />
+ <Route path='/home/contracts' element={<Navigate to='/home/overview' replace />} />
 
  <Route path='/register' element={<Register />}>
  <Route path='create' element={<Create />} />

packages/wallet/src/components/Import.jsx

@@ -16,7 +16,7 @@ const env = process.env.REACT_APP_DEPLOY_TARGET || 'PROD'
 const endpoint = process.env[`REACT_APP_AUTH_ENDPOINT_${env}`]
 
 const WALLET_STORE_VERSION = '1'
-const SUCCESS_TO = '/assets'
+const SUCCESS_TO = '/home'
 
 const authClient = async (jwtFn) =>
  rpcClient.build({ rpcEndpoint: endpoint, jwtFn })
@@ -97,6 +97,7 @@ const Import = () => {
  Encrypted Wallet
  </label>
  <input
+ className='w-full'
  type='file'
  accept='.json'
  onChange={(e) => readFile(e)}

packages/wallet/src/views/Home.jsx

@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) Kernel
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ethers } from 'ethers'
+import { useEffect, useState } from 'react'
+import { linesVector } from '@kernel/common'
+
+import Page from 'components/Page'
+
+const WALLET_STORE_VERSION = '1'
+
+const getItem = (k) => JSON.parse(localStorage.getItem(k))
+
+const loadWallet = () => {
+ const wallet = getItem('wallet')
+ if (wallet.version !== WALLET_STORE_VERSION) {
+ throw new Error('unsupported wallet')
+ }
+ return wallet
+}
+
+const everyoneCards = [
+ {
+ title: 'Claim',
+ description: 'Get set up with some test ETH',
+ url: '/claim',
+ active: false
+ },
+ {
+ title: 'Transact',
+ description: 'Understand how transactions work',
+ url: '/transact',
+ active: false
+ },
+ {
+ title: 'Deploy',
+ description: 'Create your own token now',
+ url: '/deploy',
+ active: false
+ },
+ {
+ title: 'Mint',
+ description: 'Create an NFT in one go',
+ url: '/mint',
+ active: false
+ },
+ {
+ title: 'Contact',
+ description: 'Keep your friends\' addresses safe',
+ url: '/contact',
+ active: false
+ },
+ {
+ title: 'Contribute',
+ description: 'Learn how to improve this with us',
+ url: '/contribute',
+ active: false
+ },
+ {
+ title: 'Interact',
+ description: 'Explore all the best contracts',
+ url: '/interact',
+ active: false
+ },
+ {
+ title: 'Develop',
+ description: 'Write your own code!',
+ url: '/develop',
+ active: false
+ }
+]
+
+const kernelCards = [
+ {
+ title: 'UnProfile',
+ description: 'Unprofile yourself',
+ url: 'https://staging.unprofile.kernel.community/',
+ active: true
+ },
+ {
+ title: 'Adventure',
+ description: 'Heed the call to adventure',
+ url: 'https://staging.adventures.kernel.community/',
+ active: true
+ },
+ {
+ title: 'Explore',
+ description: 'Connect with other Fellows',
+ url: 'https://staging.explore.kernel.community/',
+ active: true
+ },
+ {
+ title: 'Chat',
+ description: 'Horizontal conversations',
+ url: 'https://staging.chat.kernel.community/',
+ active: false
+ }
+]
+
+const Home = () => {
+ const wallet = loadWallet()
+ const [address] = useState(wallet.address)
+ const [nickname] = useState(wallet.nickname)
+ /* eslint-disable no-unused-vars */
+ const [signer, setSigner] = useState(null)
+ /* eslint-disable no-unused-vars */
+ const [balance, setBalance] = useState(0)
+
+ useEffect(() => {
+ // TODO: pass in context
+ const defaultProvider = new ethers.providers.CloudflareProvider()
+ const voidSigner = new ethers.VoidSigner(address, defaultProvider)
+ setSigner(voidSigner)
+ voidSigner.getBalance().then((e) => setBalance(ethers.utils.formatEther(e)))
+ }, [address])
+
+ return (
+ <Page>
+ <div className='relative'>
+ <div className='hidden lg:block lg:fixed lg:-top-24 lg:-left-52 lg:z-0'>
+ <img alt='kernel fingerprint' src={linesVector} width={383} height={412} />
+ </div>
+ <div className='hidden lg:block lg:fixed lg:-top-12 lg:-right-52 lg:z-0'>
+ <img alt='kernel fingerprint' src={linesVector} width={442} height={476} />
+ </div>
+ </div>
+ <div className='mt-32 mx-8 sm:mx-24 xl:mx-48'>
+ <div className='text-center'>
+ <div className='font-heading lg:text-5xl text-5xl text-primary lg:py-5'>
+ Welcome, {nickname}.
+ </div>
+ <hr />
+ <div className='text-2xl my-4 text-secondary'>
+ You are already valuable, just as you are.
+ </div>
+ <div className='my-4 text-secondary'>
+ This portal will help you learn how to realize some of that value in the
+ world of web3. We're so happy you're with us.
+ </div>
+ </div>
+
+ <div className='my-4 px-4 grid grid-cols-1 md:grid-cols-2 md:my-16 md:px-16'>
+ <div>
+ <h3 className='font-heading text-center text-3xl text-primary py-5'>For Everyone</h3>
+ <div className='grid grid-cols-1 md:grid-cols-2 md:gap-x-8 gap-y-8 border-0 md:border-r border-kernel-grey md:pr-12'>
+ {everyoneCards.map((everyoneCard, index) => {
+ return (
+ <a key={index} href={`${everyoneCard.active ? everyoneCard.url : '#'}`}>
+ <div className={
+ `${everyoneCard.active ? 'bg-kernel-dark text-kernel-white' : 'bg-kernel-grey'} p-5 rounded shadow-md`
+ }
+ >
+ <div className='text-xl mb-2'>{everyoneCard.title}</div>
+ <div className='text-base mb-1'>{everyoneCard.description}</div>
+ </div>
+ </a>
+ )
+ })}
+ </div>
+ </div>
+ <div>
+ <h3 className='font-heading text-center text-3xl text-primary py-5'>Kernel Additions</h3>
+ <div className='grid grid-cols-1 gap-y-8'>
+ {kernelCards.map((kernelCard, index) => {
+ return (
+ <a key={index} href={`${kernelCard.active ? kernelCard.url : '#'}`} className='w-full md:w-72 my-0 mx-auto'>
+ <div className={
+ `${kernelCard.active ? 'bg-kernel-dark text-kernel-white' : 'bg-kernel-grey'} p-5 rounded shadow-md`
+ }
+ >
+ <div className='text-xl mb-2'>{kernelCard.title}</div>
+ <div className='text-base mb-1'>{kernelCard.description}</div>
+ </div>
+ </a>
+ )
+ })}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Page>
+ )
+}
+
+export default Home

packages/wallet/src/views/Wallet.jsx

@@ -49,7 +49,7 @@ const Wallet = () => {
  </span>
  </Link>
  &nbsp;or&nbsp;
- <Link to='/assets'>
+ <Link to='/home'>
  <span className='pl-2 before:block before:absolute before:-inset-1 before:skew-y-3 before:bg-kernel-yellow-light relative inline-block cursor-pointer'>
  <span className='relative text-primary'>
  <span className='underline decoration-dotted'>

packages/wallet/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
  colors: {
  kernel: {
  white: '#ffffff',
+ grey: '#eee',
  dark: '#212144',
  highlight: '#CBF0C1',
  yellow: {