Add github source code like to tx examples

src/components/GithubLink.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import './GithubLink.scss'
+
+const GithubLink = ({ className, component }) => (
+  <a
+    className={`GithubLink ${className}`}
+    href={`https://github.com/klaytn/kaikas-tutorial/blob/master/src/components/${component}.js`}
+    title={`View ${component} component source code`}
+    target="_blank"
+  >
+    View source code
+  </a>
+)
+
+export default GithubLink

src/components/GithubLink.scss

@@ -0,0 +1,21 @@
+.GithubLink {
+  display: inline-block;
+  width: 120px;
+  margin-left: 8px;
+  color: $brown-grey;
+  text-align: right;
+  font-size: 12px;
+  cursor: pointer;
+
+  &:hover { text-decoration: underline; }
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    vertical-align: text-top;
+    margin-right: 3px;
+    background: center / 12px no-repeat url('/images/icon-github.svg');
+  }
+}

src/pages/KaikasPage.js

@@ -4,6 +4,7 @@ import caver from 'klaytn/caver'
 import Nav from 'components/Nav'
 import WalletInfo from 'components/WalletInfo'
 import Dropdown from 'components/Dropdown'
+import GithubLink from 'components/GithubLink'
 import ValueTransferLegacy from 'components/ValueTransferLegacy'
 import SmartContractExecutionLegacy from 'components/SmartContractExecutionLegacy'
 import SmartContractDeployLegacy from 'components/SmartContractDeployLegacy'
@@ -27,28 +28,28 @@ import SmartContractExecutionFDRatio from 'components/SmartContractExecutionFDRa
 
 import './KaikasPage.scss'
 
-const txTypeList = [
-  'Value Transfer (Legacy)',
-  'Smart Contract Deploy (Legacy)',
-  'Token Transfer (Legacy)',
-  'Add Token',
-  'Sign Message',
-  'Value Transfer',
-  'Value Transfer (Fee Delegation)',
-  'Value Transfer (Fee Delegation with Ratio)',
-  'Value Transfer with Memo',
-  'Value Transfer with Memo (Fee Delegation)',
-  'Value Transfer with Memo (Fee Delegation with Ratio)',
-  'Account Update',
-  'Account Update (Fee Delegation)',
-  'Account Update (Fee Delegation with Ratio)',
-  'Smart Contract Deploy',
-  'Smart Contract Deploy (Fee Delegation)',
-  'Smart Contract Deploy (Fee Delegation with Ratio)',
-  'Token Transfer',
-  'Token Transfer (Fee Delegation)',
-  'Token Transfer (Fee Delegation with Ratio)',
-]
+const txTypeList = {
+  'Value Transfer (Legacy)': 'ValueTransferLegacy',
+  'Smart Contract Deploy (Legacy)': 'SmartContractDeployLegacy',
+  'Token Transfer (Legacy)': 'SmartContractExecutionLegacy',
+  'Add Token': 'AddToken',
+  'Sign Message': 'SignMessage',
+  'Value Transfer': 'ValueTransfer',
+  'Value Transfer (Fee Delegation)': 'ValueTransferFD',
+  'Value Transfer (Fee Delegation with Ratio)': 'ValueTransferFDRatio',
+  'Value Transfer with Memo': 'ValueTransferMemo',
+  'Value Transfer with Memo (Fee Delegation)': 'ValueTransferMemoFD',
+  'Value Transfer with Memo (Fee Delegation with Ratio)': 'ValueTransferMemoFDRatio',
+  'Account Update': 'AccountUpdate',
+  'Account Update (Fee Delegation)': 'AccountUpdateFD',
+  'Account Update (Fee Delegation with Ratio)': 'AccountUpdateFDRatio',
+  'Smart Contract Deploy': 'SmartContractDeploy',
+  'Smart Contract Deploy (Fee Delegation)': 'SmartContractDeployFD',
+  'Smart Contract Deploy (Fee Delegation with Ratio)': 'SmartContractDeployFDRatio',
+  'Token Transfer': 'SmartContractExecution',
+  'Token Transfer (Fee Delegation)': 'SmartContractExecutionFD',
+  'Token Transfer (Fee Delegation with Ratio)': 'SmartContractExecutionFDRatio',
+}
 
 class KaikasPage extends Component {
   constructor(props) {
@@ -153,9 +154,14 @@ class KaikasPage extends Component {
 
   render() {
     const { account, balance, txType, network } = this.state
+    const txTypeTitles = Object.keys(txTypeList)
+
     return (
       <div className="KaikasPage">
         <Nav network={network} />
+        <a className="KaikasPage__githubLink" href="https://github.com/klaytn/kaikas-tutorial" title="Link to Kaikas tutorial github repository">
+          <img src="images/icon-github.svg" alt="Kaikas Tutorial Github" />
+        </a>
         <div className="KaikasPage__main">
           <WalletInfo address={account} balance={balance} />
           <div className="KaikasPage__content">
@@ -164,10 +170,13 @@ class KaikasPage extends Component {
               placeholder="Transaction Type"
               selectedItem={txType}
               handleSelect={this.selectTxType}
-              list={txTypeList}
+              list={txTypeTitles}
             />
             <div className="KaikasPage__txExample">
-              <h2 className="KaikasPage__txExampleTitle">{txType}</h2>
+              <header className="KaikasPage__txExampleHeader">
+                <h2 className="KaikasPage__txExampleTitle">{txType}</h2>
+                {txType && <GithubLink component={txTypeList[txType]} />}
+              </header>
               {this.renderTxExample(txType, account)}
             </div>
           </div>

src/pages/KaikasPage.scss

@@ -1,7 +1,17 @@
 .KaikasPage {
   width: 100%;
   height: 100%;
+}
+
+.KaikasPage__githubLink {
+  width: 32px;
+  height: 32px;
+  position: fixed;
+  bottom: 35px;
+  right: 35px;
+  transition: opacity .2s;
 
+  &:hover { opacity: .8; }
 }
 
 .KaikasPage__main {
@@ -20,11 +30,19 @@
 }
 
 .KaikasPage__txExample {
-  padding: 20px;
+  padding: 15px 20px 20px 20px;
+}
+
+.KaikasPage__txExampleHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-bottom: 15px;
 }
 
 .KaikasPage__txExampleTitle {
-  padding-bottom: 30px;
+  width: calc(100% - 120px);
+  @include textEllipsis();
 }
 
 .KaikasPage__dropdown {