wip

near · Oct 4, 2024 · e70aba0 · e70aba0
1 parent af5d7fb
commit e70aba0
Show file tree

Hide file tree

Showing 12 changed files with 3,497 additions and 2,584 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@keypom/selector": "1.2.3",
     "@monaco-editor/react": "^4.6.0",
     "@near-js/biometric-ed25519": "0.3.0",
-    "@near-pagoda/ui": "^1.0.0",
+    "@near-pagoda/ui": "^1.0.1",
     "@near-wallet-selector/bitte-wallet": "^8.9.12",
     "@near-wallet-selector/core": "8.9.12",
     "@near-wallet-selector/here-wallet": "8.9.12",
@@ -66,9 +66,11 @@
     "next": "^13.5.6",
     "next-pwa": "^5.6.0",
     "posthog-js": "^1.155.4",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-bootstrap-typeahead": "^6.3.2",
+    "react-code-block": "^1.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-singleton-hook": "^3.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/home/Button.tsx b/src/components/home/Button.tsx
@@ -0,0 +1,28 @@
+import { Button as Btn } from "@near-pagoda/ui";
+import styled from "styled-components";
+
+export const Button = styled(Btn)`
+  &[data-variant="primary"][data-fill="solid"]:hover {
+    --button-color-background: var(--violet8);
+  }
+
+  &[data-variant="primary"][data-fill="solid"] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+  }  
+`;
+
+export const BigButton = styled(Button)`
+  &[data-variant="primary"][data-fill="solid"] {
+    --button-color-background: var(--violet9);
+    --button-color-border: var(--sand12);
+    --button-color-text: var(--bs-body-bg);
+    --button-color-icon: var(--bs-body-bg);
+    border: 0;
+    height: 3rem;
+    border-radius: 0.8rem;
+  }  
+`;
diff --git a/src/components/home/ChainAbstraction/index.tsx b/src/components/home/ChainAbstraction/index.tsx
@@ -0,0 +1,52 @@
+import { Flex, Grid, Text } from "@near-pagoda/ui";
+import { BookOpenText, GasPump, Signature, User, UserCheck } from "@phosphor-icons/react";
+import { Button } from "../Button";
+
+export const ChainAbstraction = () => {
+
+  return <>
+    <Flex stack gap="l" style={{ padding: "0.5rem", flexGrow: 1, justifyContent: "space-between" }}>
+
+      <Grid columns="542px minmax(0, 1fr)" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)" >
+        <Flex stack gap="m">
+          <Text as="h1" style={{ fontWeight: "normal" }}> The Account Model Built for Abstraction </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Built-in named accounts, a rich key system, and contracts that are wallets
+          </Text>
+        </Flex>
+        <Flex stack gap="m" style={{ justifyContent: "center", textAlign: "center" }}>
+          <UserCheck fill="var(--green11)" size="s" style={{ height: "95px" }} />
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/concepts/protocol/account-model" label="Read on Account Model" />
+        </Flex>
+      </Grid>
+
+      <Grid columns="minmax(0, 1fr) 542px" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)">
+        <Flex stack gap="m" style={{ justifyContent: "center" }}>
+          <GasPump fill="var(--red9)" size="s" style={{ height: "95px" }} />
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/concepts/abstraction/relayers" label="Discover Gas Relayers" />
+        </Flex>
+        <Flex stack gap="m" justify="space-between">
+          <Text as="h1" style={{ fontWeight: "normal" }}> Easily Cover your Users' Transactions </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Built-in meta-transactions enable your users to enjoy your application, without handling funds
+          </Text>
+        </Flex>
+      </Grid>
+
+      <Grid columns="542px minmax(0, 1fr)" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)">
+        <Flex stack gap="m" style={{ textAlign: "left" }}>
+          <Text as="h1" style={{ fontWeight: "normal" }}> Control Accounts Across Multiple Chains </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Near accounts can sign transactions for chains like Ethereum, Bitcoin or Doge
+          </Text>
+        </Flex>
+        <Flex stack gap="m" style={{ justifyContent: "center", textAlign: "center" }}>
+          <Signature fill="var(--violet8)" size="s" style={{ height: "95px" }} />
+
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/build/chain-abstraction/chain-signatures/getting-started" label="Discover Chain Signatures" />
+        </Flex>
+      </Grid>
+
+    </Flex>
+  </>
+}
diff --git a/src/components/home/Code.tsx b/src/components/home/Code.tsx
@@ -0,0 +1,36 @@
+import { Button, copyTextToClipboard } from "@near-pagoda/ui";
+import { Copy } from '@phosphor-icons/react';
+import React from "react";
+import { CodeBlock } from "react-code-block/dist/code-block";
+import styled from "styled-components";
+
+const CodeWrapper = styled.div`
+  background-color: rgb(41, 45, 62);
+  padding: 1rem;
+  border-radius: .4rem;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow-x: scroll;
+`
+
+export const Code = ({ height, code, language }: { height?: number, code: string, language: string }) => {
+  return (
+    <CodeBlock code={code} language={language}>
+      <CodeWrapper style={{ maxHeight: height && `${height}px` }}>
+        <CodeBlock.Code style={{ marginBottom: 0 }}>
+          <CodeBlock.LineContent>
+            <CodeBlock.Token />
+          </CodeBlock.LineContent>
+        </CodeBlock.Code>
+        {/* <Button
+          label="Copy Code"
+          icon={<Copy />}
+          size="small"
+          fill="outline"
+          onClick={() => copyTextToClipboard("Hello world")}
+          style={{ position: "absolute", top: "10px", right: "10px" }}
+        /> */}
+      </CodeWrapper>
+    </CodeBlock>
+  );
+};
diff --git a/src/components/home/Contracts/index.tsx b/src/components/home/Contracts/index.tsx
@@ -0,0 +1,144 @@
+import { Flex, Grid, Tabs, Text, Title } from "@near-pagoda/ui";
+import { useState } from "react";
+
+import { Code } from "../Code";
+import { BookOpenText } from "@phosphor-icons/react";
+
+import { Button } from "../Button";
+
+const npxCNA = `
+$> npx create-near-app@latest
+
+✅ What do you want to build? › A Smart Contract
+✅ Name your project to create a contract: hello-near
+✅ Success! Created 'hello-near', a smart contract in Typescript
+
+Build, test, and deploy the project using your package manager:
+ * npm install
+ * npm run build
+ * npm run test
+`;
+
+const helloNearTS = (`
+import { NearBindgen, near, call, view } from 'near-sdk-js';
+
+@NearBindgen({})
+class HelloNear {
+  greeting: string = 'Hello';
+
+  static schema = { "greeting": "string" };
+
+  @view({})
+  get_greeting(): string {
+    return this.greeting;
+  }
+
+  @call({})
+  set_greeting({ greeting }: { greeting: string }): void {
+    this.greeting = greeting;
+  }
+}`);
+
+const cargoNN = `
+$> cargo near new
+
+> Enter a new project name to create a contract: hello-near
+✅ New project is created at 'hello-near'
+
+
+Now you can build, test, and deploy your project using cargo-near:
+ * cargo near build
+ * cargo test
+ * cargo near deploy
+`;
+
+const helloNearRS = `
+use near_sdk::{log, near};
+
+#[near(contract_state)]
+pub struct Contract {
+    greeting: String,
+}
+
+#[near]
+impl Contract {
+    pub fn get_greeting(&self) -> String {
+        self.greeting.clone()
+    }
+
+    pub fn set_greeting(&mut self, greeting: String) {
+        log!("Saving greeting: {}", greeting);
+        self.greeting = greeting;
+    }
+}
+
+impl Default for Contract {
+    fn default() -> Self {
+        Self { greeting: "Hello".to_string() }
+    }
+}`;
+
+export const Contracts = () => {
+  const [language, setLanguage] = useState('js');
+
+  return <>
+    <Grid columns="55% minmax(0, 45%)" gap="xl" columnsPhone="minmax(0, 1fr)" columnsTablet="minmax(0, 1fr)" style={{ flexGrow: 1, padding: "0.5rem" }}>
+      <Flex stack style={{ justifyContent: "space-between" }}>
+        <Flex stack gap="m" >
+          <Text as="h1" style={{ fontWeight: "normal" }}> Building Contracts Has Never Been Easier </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Develop, test and deploy contracts using the stack you already know and love
+          </Text>
+        </Flex>
+
+        <Tabs.Root value={language} >
+          <Tabs.List style={{ marginBottom: 'var(--gap-s)', fontSize: "small" }} >
+            <Tabs.Trigger onClick={() => setLanguage('js')} value="js">
+              🌐 Javascript
+            </Tabs.Trigger>
+            <Tabs.Trigger onClick={() => setLanguage('rust')} value="rust">
+              🦀 Rust
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="js">
+            <Code code={npxCNA} language="sh" />
+          </Tabs.Content>
+
+          <Tabs.Content value="rust">
+            <Code code={cargoNN} language="sh" />
+          </Tabs.Content>
+
+        </Tabs.Root>
+
+      </Flex>
+
+      <Tabs.Root value={language} >
+        <Flex stack style={{ flexGrow: 1, justifyContent: "space-between" }}>
+
+          <Tabs.Content value="js">
+            <Title> One Command Setup </Title>
+            <Code code={`npx create-near-app@latest`} language="bash" />
+          </Tabs.Content>
+
+          <Tabs.Content value="js">
+            <Title> Easy to Read Contracts </Title>
+            <Code code={helloNearTS} height={410} language="typescript" />
+          </Tabs.Content>
+
+          <Tabs.Content value="rust">
+            <Title> One Command Setup </Title>
+            <Code code={`cargo near new`} language="bash" />
+          </Tabs.Content>
+
+          <Tabs.Content value="rust">
+            <Title> Easy to Read Contracts </Title>
+            <Code code={helloNearRS} height={410} language="rust" />
+          </Tabs.Content>
+        </Flex>
+
+      </Tabs.Root>
+    </Grid>
+
+    <Button size="large" iconLeft={<BookOpenText fill="bold" />} href="/documentation/build/smart-contracts/quickstart" label="Start Now!" style={{ marginTop: "var(--gap-m)" }} />
+  </>
+}
diff --git a/src/components/home/Data/index.tsx b/src/components/home/Data/index.tsx
@@ -0,0 +1,72 @@
+import { Flex, Grid, Text } from "@near-pagoda/ui";
+
+import { Code } from "../Code";
+import { BookOpenText } from "@phosphor-icons/react";
+
+import { Button } from "../Button";
+
+const fastNear = `
+fetch("https://api.fastnear.com/v1/account/root.near/full")
+
+fetch("https://api.nearblocks.io/v1/account/tkn.primitives.near/txns?method=create_token")
+`
+
+const BigQuery = `
+SELECT new_owner_account_id 
+  FROM \`bigquery-public-data.crypto_near_mainnet_us.nft_events\`
+  WHERE block_date > "2024-09-01" AND contract_account_id = 'x.paras.near' AND cause = "nft_transfer" LIMIT 1000
+`
+
+const indexerLake = `
+events.filter(e =>
+  e.event == "nft_mint" && e.standard == "nep171"
+)
+`
+
+export const Data = () => {
+
+  return <>
+    <Flex stack gap="l" style={{ padding: "0.5rem", flexGrow: 1, justifyContent: "space-between" }}>
+
+      <Grid columns="542px minmax(0, 1fr)" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)" >
+        <Flex stack gap="m">
+          <Text as="h1" style={{ fontWeight: "normal" }}> A Rich Ecosystem of Community APIs </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Our community of developers has built APIs to help you query the chain for user data and transactions
+          </Text>
+        </Flex>
+        <Flex stack gap="m" style={{ justifyContent: "center" }}>
+          <Code code={fastNear} language="js" />
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/build/data-infrastructure/big-query" label="Read on Data API" />
+        </Flex>
+      </Grid>
+
+      <Grid columns="minmax(0, 1fr) 542px" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)">
+        <Flex stack gap="m" style={{ justifyContent: "center" }}>
+          <Code code={BigQuery} language="sql" />
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/build/data-infrastructure/lake-framework/near-lake" label="Discover BigQuery" />
+        </Flex>
+        <Flex stack gap="m" justify="space-between">
+          <Text as="h1" style={{ fontWeight: "normal" }}> Public BigQuery Data Repositories </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            A well organized public dataset to help you query historical data and build your own analytics
+          </Text>
+        </Flex>
+      </Grid>
+
+      <Grid columns="542px minmax(0, 1fr)" gap="2xl" columnsTablet="minmax(0, 1fr)" columnsPhone="minmax(0, 1fr)">
+        <Flex stack gap="m" style={{ textAlign: "left" }}>
+          <Text as="h1" style={{ fontWeight: "normal" }}> A Simple Framework to Create Indexers </Text>
+          <Text size="text-l" style={{ fontWeight: "lighter" }}>
+            Do you need a more personalized solution? Build your own indexer using our Lake Framework
+          </Text>
+        </Flex>
+        <Flex stack gap="m" style={{ justifyContent: "center" }}>
+          <Code code={indexerLake} language="js" />
+          <Button iconLeft={<BookOpenText fill="bold" />} href="/documentation/build/chain-abstraction/chain-signatures/getting-started" label="Discover Lake Framework" />
+        </Flex>
+      </Grid>
+
+    </Flex>
+  </>
+}