Update landing page

src/components/LinkA.tsx

@@ -8,7 +8,7 @@ const StyledA = styled.a`
   color: ${COLOR.primary};
   text-decoration: none;
   :hover {
-    opacity: 1;
+    opacity: 0.7;
   }
   :visited {
     color: ${COLOR.primary};

src/consts/color.ts

@@ -1,9 +1,11 @@
 const primary = '#1d8cf8'
 const error = '#c221a9'
 const text = '#ffffff'
+const landingPageCard = '#2d2d39'
 
 export default {
   primary,
   error,
   text,
+  landingPageCard,
 }

src/routes.tsx

@@ -39,11 +39,15 @@ const routes: RouteType[] = [
         path: '/example',
         name: 'Function Examples',
         component: Web3modalExample,
+        description:
+          'Tests several functions using Metamask, Kaikas, and Klip: signMessage, valueTransfer, and balanceOf',
       },
       {
         path: '/NFT',
         name: 'Deploy & Mint & Transfer NFT (KIP-17)',
         component: Web3modalNFT,
+        description:
+          'Deploys, mints, and transfers NFT(KIP-17) on klaytn network using Metamask, Kaikas, and Klip',
       },
     ],
   },
@@ -55,6 +59,7 @@ const routes: RouteType[] = [
         path: '/blockhashDecode',
         name: 'Decoder from BlockHash',
         component: BlockHashDecoder,
+        description: 'Returns block info by block hash',
       },
     ],
   },
@@ -66,21 +71,26 @@ const routes: RouteType[] = [
         path: '/accountKeyLegacy',
         name: 'Basic Account',
         component: AccountKeyLegacy,
+        description: 'Generates account with AccountKeyLegacy',
       },
       {
         path: '/accountKeyPublic',
         name: 'Advanced (AccountKeyPublic)',
         component: AccountKeyPublic,
+        description: 'Updates the private key of account to AccountKeyPublic',
       },
       {
         path: '/accountKeyMultiSig',
         name: 'Advanced (AccountKeyMultiSig)',
         component: AccountKeyMultiSig,
+        description: 'Updates the private key of account to AccountKeyMultiSig',
       },
       {
         path: '/accountKeyRoleBased',
         name: 'Advanced (AccountKeyRoleBased)',
         component: AccountKeyRoleBased,
+        description:
+          'Updates the private key of account to AccountKeyRoleBased',
       },
     ],
   },
@@ -92,21 +102,27 @@ const routes: RouteType[] = [
         path: '/rlpEncode',
         name: 'RLP Encoder',
         component: RLPEncoder,
+        description:
+          'Encodes a transaction instance and returns RLP-encoded transaction string',
       },
       {
         path: '/rlpDecode',
         name: 'Decoder from RLP',
         component: RLPDecoder,
+        description:
+          'Decodes RLP-encoded transaction string and returns a transaction instance',
       },
       {
         path: '/txHashDecode',
         name: 'Decoder from txHash',
         component: TxHashDecoder,
+        description: 'Returns transaction instance by transaction hash',
       },
       {
         path: '/sendMultisigTx',
         name: 'Send Multisig Transaction',
         component: SendMultisigTx,
+        description: 'Sends a value transfer transaction with a multisig Key',
       },
     ],
   },
@@ -118,21 +134,26 @@ const routes: RouteType[] = [
         path: '/ABIEncoder',
         name: 'ABI Encoder',
         component: ABIEncoder,
+        description: 'Encodes Solidity ABI data',
       },
       {
         path: '/ABIDecoder',
         name: 'ABI Decoder',
         component: ABIDecoder,
+        description: 'Decodes ABI encoded parameters',
       },
       {
         path: '/functionCall',
         name: 'Function Call with ABI & Params',
         component: FunctionCall,
+        description:
+          'Executes a new message call without sending a transaction',
       },
       {
         path: '/functionSig',
         name: 'Encode Function Signature',
         component: FunctionSignature,
+        description: 'Encodes the function signature to its ABI signature',
       },
     ],
   },
@@ -144,21 +165,28 @@ const routes: RouteType[] = [
         path: '/KIP7Deploy',
         name: 'Deploy Fungible Token (KIP-7)',
         component: KIP7Deploy,
+        description: 'Deploys fungible token(KIP-7) contract',
       },
       {
         path: '/KIP17Deploy',
         name: 'Deploy Non-Fungible Token (KIP-17)',
         component: KIP17Deploy,
+        description:
+          'Deploys non-fungible token(KIP-17) contract and tests functions: Mint, Burn, Transfer, and Pause/Unpause',
       },
       {
         path: '/KIP37Deploy',
         name: 'Deploy Multiple Token (KIP-37)',
         component: KIP37Deploy,
+        description:
+          'Deploys multiple token(KIP-37( contract and tests functions: Create, Mint, and Transfer',
       },
       {
         path: '/KCTDetection',
         name: 'Detect Klaytn Compatible Token (KCT)',
         component: DetectKCT,
+        description:
+          'Checks which KCT the smart contract implements using its address',
       },
     ],
   },
@@ -170,21 +198,27 @@ const routes: RouteType[] = [
         path: '/loadKeystore',
         name: 'Load Keystore',
         component: LoadKeystore,
+        description:
+          'Decrypts a keystore v3 or v4 JSON and returns the decrypted Keyring instance',
       },
       {
         path: '/generateKeystore',
         name: 'Generate Keystore',
         component: GenerateKeystore,
+        description:
+          'Generates private key(s), encrypts a keyring, and returns a keystore',
       },
       {
         path: '/hashFromStr',
         name: 'Hash From String(Keccak256)',
         component: KeccakFromString,
+        description: 'Returns Keccak-256 function result of given input string',
       },
       {
         path: '/checkAccountKey',
         name: 'Check Account Key Type by Address',
         component: CheckAccountKey,
+        description: 'Returns account key type of the given address',
       },
     ],
   },

src/types/route.ts

@@ -5,5 +5,6 @@ export type RouteType = {
     path: string
     name: string
     component: any
+    description: string
   }[]
 }

src/views/Home/index.tsx

@@ -1,27 +1,148 @@
 import { ReactElement } from 'react'
+import _ from 'lodash'
 import styled from 'styled-components'
-import { Card, CardBody } from 'reactstrap'
 
-import { View } from 'components'
+import { View, Text, Container, LinkA, CodeBlock } from 'components'
+import { COLOR } from 'consts'
+import routes from 'routes'
 
-const StyledContainer = styled(View)``
+const StyledView = styled(View)`
+  padding-top: 20px;
+  padding-bottom: 20px;
+  align-items: center;
+  gap: 10px;
+`
+const BorderLine = styled(View)`
+  border-bottom: solid ${COLOR.landingPageCard};
+  width: 100%;
+`
+const StyledCard = styled(View)`
+  border-radius: 20px;
+  padding: 15px 20px 15px 20px;
+  background-color: ${COLOR.landingPageCard};
+  box-shadow: 5px 5px 5px black;
+`
+const StyledGridV = styled(View)`
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  margin-bottom: 20px;
+`
 
 const Main = (): ReactElement => {
   return (
-    <StyledContainer>
-      <Card>
-        <CardBody>
-          <h3 style={{ fontWeight: '600' }}> Klaytn Online Toolkit </h3>
-          <p>
-            <a href="https://github.com/klaytn/klaytn-online-toolkit">
-              Klaytn-online-toolkit
-            </a>{' '}
-            provides code samples and github-page to help you utilize the Klaytn
-            SDK(caver-js).
-          </p>
-        </CardBody>
-      </Card>
-    </StyledContainer>
+    <Container>
+      <StyledView>
+        <Text style={{ fontSize: '40px', fontWeight: '600' }}>
+          Klaytn Online Toolkit
+        </Text>
+      </StyledView>
+      <BorderLine />
+      <StyledView style={{ paddingBottom: '10px' }}>
+        <Text style={{ fontSize: '30px', fontWeight: '600' }}>
+          Install Caver-js
+        </Text>
+        <Text style={{ fontSize: '15px' }}>
+          <LinkA link="https://github.com/klaytn/caver-js">caver-js</LinkA> is a
+          JavaScript API library that allows developers to interact with a
+          Klaytn node using a HTTP or Websocket connection. To install, paste
+          that in a macOS Terminal or Linux shell prompt.
+        </Text>
+        <CodeBlock toggle={false} text="npm install caver-js        " />
+      </StyledView>
+      <BorderLine />
+      <StyledView>
+        <Text style={{ fontSize: '30px', fontWeight: '600' }}>
+          What Does Klaytn Online Toolkit Do?
+        </Text>
+        <Text style={{ fontSize: '15px', paddingBottom: '10px' }}>
+          <LinkA link="https://github.com/klaytn/klaytn-online-toolkit">
+            Klaytn-online-toolkit
+          </LinkA>{' '}
+          provides code samples and pages to help you utilize the Klaytn
+          SDK(caver-js).
+        </Text>
+        <StyledGridV>
+          {_.map(
+            routes,
+            (prop) =>
+              prop.name !== 'Web3Modal' && (
+                <StyledCard>
+                  <View style={{ alignItems: 'center', paddingBottom: '8px' }}>
+                    <Text
+                      style={{
+                        fontWeight: '600',
+                        fontSize: '18px',
+                      }}
+                    >
+                      {prop.name}
+                    </Text>
+                  </View>
+                  <View
+                    style={{
+                      width: '100%',
+                      borderTop: 'solid',
+                      paddingBottom: '10px',
+                    }}
+                  ></View>
+                  {_.map(prop.items, (item) => (
+                    <Text>
+                      <a href={prop.path + item.path}>{item.name}</a>:{' '}
+                      {item.description}
+                    </Text>
+                  ))}
+                </StyledCard>
+              )
+          )}
+        </StyledGridV>
+      </StyledView>
+      <BorderLine />
+      <StyledView>
+        <Text style={{ fontSize: '30px', fontWeight: '600' }}>
+          Web3Modal Example
+        </Text>
+        <Text style={{ fontSize: '15px', paddingBottom: '10px' }}>
+          Web3modal examples are derived from{' '}
+          <LinkA link="https://github.com/WalletConnect/web3modal/tree/V1/example">
+            web3modal/example
+          </LinkA>{' '}
+          and modified to add Kaikas wallet and Klip wallet. You can add support
+          for multiple providers including Kaikas provider and Klip wallet
+          provider by using{' '}
+          <LinkA link="https://github.com/klaytn/klaytn-web3modal">
+            @klaytn/web3modal
+          </LinkA>
+          . We have created a PR in web3modal repo, which is still under review.
+          So we temporarily provide{' '}
+          <LinkA link="https://github.com/klaytn/klaytn-web3modal">
+            @klaytn/web3modal
+          </LinkA>{' '}
+          package.
+        </Text>
+        {_.map(
+          routes,
+          (prop) =>
+            prop.name === 'Web3Modal' && (
+              <StyledCard>
+                {_.map(prop.items, (item) => (
+                  <Text>
+                    <a href={prop.path + item.path}>{item.name}</a>:{' '}
+                    {item.description}
+                  </Text>
+                ))}
+              </StyledCard>
+            )
+        )}
+      </StyledView>
+      <BorderLine />
+      <StyledView>
+        <LinkA link="https://docs.klaytn.foundation/">
+          <StyledCard>
+            <Text>Klaytn Documentation</Text>
+          </StyledCard>
+        </LinkA>
+      </StyledView>
+    </Container>
   )
 }