Updates to slp landing page.

Author: Gabriel Cardona

src/pages/slp.js

@@ -9,17 +9,29 @@ import Hero from 'components/Hero'
 import Container from 'components/Container'
 import HelmetPlus from 'components/HelmetPlus'
 import { FaAndroid, FaApple, FaJs } from 'react-icons/fa'
+import InfoCard from 'components/InfoCard'
 
 import Text from 'atoms/Text'
 import H3 from 'atoms/H3'
 import H1 from 'atoms/H1'
 import Button from 'atoms/Button'
 import Code from 'atoms/Code'
 import StyledLink from 'atoms/StyledLink'
+import { SmartLink } from 'atoms/StyledLink'
 
 import media from 'styles/media'
 import spacing from 'styles/spacing'
 
+const CardLayout = styled.div`
+  display: grid;
+  padding-top: ${spacing.large};
+  grid-gap: ${spacing.medium};
+  grid-template-columns: 1fr;
+  ${media.medium`
+    grid-template-columns: repeat(auto-fit, minmax(400px, .5fr));
+  `};
+`
+
 const HeroLayout = styled.div`
   display: grid;
   grid-gap: ${spacing.tiny};
@@ -105,17 +117,17 @@ const SLPPage = ({ location, data }: Props) => (
         <HeroButtonLayout>
           <HeroButtonItem>
             <StyledLink to="/slp/docs/js/getting-started">
-              <FaJs />
+              <FaJs /> Javascript
             </StyledLink>
           </HeroButtonItem>
           <HeroButtonItem>
             <StyledLink to="/slp/docs/ios/getting-started">
-              <FaAndroid />
+              <FaAndroid /> Android
             </StyledLink>
           </HeroButtonItem>
           <HeroButtonItem>
             <StyledLink to="/slp/docs/android/getting-started">
-              <FaApple />
+              <FaApple /> iOS
             </StyledLink>
           </HeroButtonItem>
         </HeroButtonLayout>
@@ -126,112 +138,52 @@ const SLPPage = ({ location, data }: Props) => (
         <PreviewItem>
           <H3>Simple Ledger Protocol</H3>
           <Text>
-            SLP SDK is a fully featured javascript framework powered by{' '}
-            <StyledLink to="/bitbox">BITBOX</StyledLink>. Everything you need to
-            easily issue, spend or trade your own token.
+            <SmartLink to="https://simpleledger.cash/">
+              Simple Ledger Protocol
+            </SmartLink>{' '}
+            is simple, robust and extensible. All transactions are 100% on the
+            blockchain for full auditability by any party. The first and
+            currently only BCH token system to support light wallets. You can
+            use multi signature addresses and other Bitcoin script features with
+            SLP tokens.
           </Text>
+        </PreviewItem>
+      </PreviewLayout>
+    </Container>
+    <Container>
+      <PreviewLayout>
+        <PreviewItem full to="/slp/docs/js/getting-started">
+          <H3>
+            <FaJs /> Javascript
+          </H3>
           <Text>
-            Simple Ledger Protocol is simple, robust and extensible. All
-            transactions are 100% on the blockchain for full auditability by any
-            party. The first and currently only BCH token system to support
-            light wallets. You can use multi signature addresses and other
-            Bitcoin script features with SLP tokens.
+            SLP SDK is a fully featured javascript framework powered by{' '}
+            <StyledLink to="/bitbox">BITBOX</StyledLink>. Everything you need to
+            easily issue, spend or trade your own token. Everything you need to
+            easily issue, spend or trade your own token. Install via NPM and
+            talk to Bitcoin.com's cloud with no further setup.{' '}
           </Text>
         </PreviewItem>
-        <PreviewItem to="/slp/docs/js/slp">
-          <H3>List</H3>
-          <Text>List all tokens</Text>
-          <Code>
-            {`(async () => {
-  try {
-    let list = await SLP.Utils.list();
-    console.log(list);
-  } catch (error) {
-    console.error(error);
-  }
-})();
-
-// returns
-[ { id: 'a72788409fa0ff38556e0d26d17edcc8e6ac04dcdc4904eeb5297c6096dc6e75',
-  timestamp: '2019-02-10 03:24',
-  symbol: 'C',
-  name: 'Contract Name',
-  documentUri: 'documentUri',
-  documentHash:
-   '1000000000000000000000000000000000000000000000000000000000000001',
-  decimals: 1,
-  initialTokenQty: 10 },
-  { id: 'e6fe00fc1f53320b72bd5cbed76c0c82e5edfea1b6f9cb0f71bfb28c3b6211a8',
-  timestamp: '2019-02-05 04:01',
-  symbol: 'TESTNET3',
-  name: 'SLP SDK Testnet Token 3',
-  documentUri: 'badger@bitcoin.com',
-  documentHash: '',
-  decimals: 8,
-  initialTokenQty: 100 }]
-`}
-          </Code>
-          <Text>List single token by id</Text>
-          <Code>
-            {`(async () => {
-  try {
-    let list = await SLP.Utils.list(
-      "b3f4f132dc3b9c8c96316346993a8d54d729715147b7b11aa6c8cd909e955313"
-    );
-    console.log(list);
-  } catch (error) {
-    console.error(error);
-  }
-})();
-
-// returns
-{ id: 'b3f4f132dc3b9c8c96316346993a8d54d729715147b7b11aa6c8cd909e955313',
-  timestamp: '2019-01-30 21:56',
-  symbol: 'SLPJS',
-  name: 'Awesome SLPJS README Token',
-  documentUri: 'info@simpleledger.io',
-  documentHash: '',
-  decimals: 2,
-  initialTokenQty: 1000000 }
-`}
-          </Code>
-        </PreviewItem>
-        <PreviewItem to="/slp/docs/conversion">
-          <H3>Conversion</H3>
-          <Text>Convert between slp, cashAddr and legacyAddr addresses</Text>
-          <Code>
-            {`// cash address to slp address
-              SLP.Address.toSLPAddress('bitcoincash:qzm47qz5ue99y9yl4aca7jnz7dwgdenl85jkfx3znl')
-              // simpleledger:qzm47qz5ue99y9yl4aca7jnz7dwgdenl857dzayzdp
-
-              // legacy address to cash address
-              SLP.Address.toCashAddress('1HiaTupadqQN66Tvgt7QSE5Wg13BUy25eN')
-              // bitcoincash:qzm47qz5ue99y9yl4aca7jnz7dwgdenl85jkfx3znl
-
-              // slp address to legacy address
-              SLP.Address.toLegacyAddress('simpleledger:qzm47qz5ue99y9yl4aca7jnz7dwgdenl857dzayzdp')
-              // 1HiaTupadqQN66Tvgt7QSE5Wg13BUy25eN
-`}
-          </Code>
-        </PreviewItem>
-        <PreviewItem>
-          <H3>Built-in console</H3>
+        <PreviewItem full to="/slp/docs/android/getting-started">
+          <H3>
+            <FaAndroid /> Android
+          </H3>
           <Text>
-            Custom REPL with the full BITBOX and Bitcoin Cash JSON RPC API built
-            in. Test your ideas quickly with no overhead.
+            Install via Gradle. Convert between cash and slp address formats.
+            Send tokens w/ balances, including both tokens and BCH, available as
+            LiveData. Convenience methods to make it easier to display tokens.
+            Timber for logging.
           </Text>
         </PreviewItem>
-        <PreviewItem>
-          <H3>100% Documented</H3>
+        <PreviewItem full to="/slp/docs/ios/getting-started">
+          <H3>
+            <FaApple /> iOS
+          </H3>
           <Text>
-            Every method, argument, data type and return value is documented in
-            great detail.
+            Install via CocoaPods. Generate mnemonics. Convert between cash and
+            slp address formats. Send tokens and fetch token balances.
           </Text>
         </PreviewItem>
-        <PreviewItem>
-          <H3>REST integration</H3>
-          <Text>SLP SDK is coupled to REST with no further setup.</Text>
-        </PreviewItem>
       </PreviewLayout>
     </Container>
   </DefaultLayout>