Added mantine, improved the bridge, gas, and token standards pages

codebycarson · codebycarson · commit 5c5466b8120d · 2024-05-28T23:31:49.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@mantine/hooks": "^7.10.0",
     "@mdx-js/loader": "^3.0.1",
     "@next/mdx": "^14.2.3",
     "@rainbow-me/rainbowkit": "^1.3.3",
@@ -31,7 +32,9 @@
   "devDependencies": {
     "@types/node": "18.11.10",
     "autoprefixer": "^10.4.17",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }
diff --git a/pages/_app.mdx b/pages/_app.mdx
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,21 @@
+import '../styles/globals.css';
+import '../styles/custom.css';
+import '@rainbow-me/rainbowkit/styles.css';
+import { ThemeProvider } from 'next-themes';
+import '@mantine/core/styles.css';
+import { createTheme, MantineProvider } from '@mantine/core';
+
+const theme = createTheme({
+/** Put your mantine theme override here */
+});
+
+export default function Nextra({ Component, pageProps }) {
+  return (
+      <MantineProvider theme={theme}>
+          <ThemeProvider attribute="class">
+              <Component {...pageProps} />
+          </ThemeProvider>
+      </MantineProvider>
+
+  );
+}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,16 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+import { ColorSchemeScript } from '@mantine/core';
+
+export default function Document() {
+    return (
+        <Html lang="en">
+            <Head>
+                <ColorSchemeScript defaultColorScheme="auto" />
+            </Head>
+            <body>
+            <Main />
+            <NextScript />
+            </body>
+        </Html>
+    );
+}
diff --git a/pages/dev-ecosystem-providers/bridges.mdx b/pages/dev-ecosystem-providers/bridges.mdx
@@ -4,16 +4,20 @@ Bridges facilitate cross-chain transfers and interoperability between different
 
 ## **Squid**:
 Enables one-click cross-chain swaps across various EVM blockchains.
-   - [Squid](https://app.squidrouter.com/)
+   - [Squid](https://app.squidrouter.com)
 
 ## **Wormhole**:
 A popular bridge for transferring assets across multiple blockchains.
    - [Wormhole](https://wormholenetwork.com/)
 
 ## **Axelar**:
 Provides secure cross-chain communication for Web3.
-   - [Axelar](https://axelar.network/)
+   - [Axelar](https://axelar.network)
 
 ## **Stargate (coming soon)**:
 Facilitates seamless cross-chain transactions.
-   - [Stargate](https://stargate.finance/)
+   - [Stargate](https://stargate.finance)
+
+## **IBC (Inter-Blockchain Communication)**:
+Enables interoperability between Cosmos-based blockchains, including Sei.
+   - Learn more about [IBC Protocol](/dev-tutorials/ibc-protocol)
diff --git a/pages/dev-gas.mdx b/pages/dev-gas.mdx
@@ -1,4 +1,4 @@
-# Gas on Sei
+# Gas
 
 Gas refers to the unit of measurement representing the work done to execute a transaction on the blockchain. The amount of gas used varies based on the complexity of the transaction.
 
diff --git a/pages/dev-token-standards.mdx b/pages/dev-token-standards.mdx
@@ -2,7 +2,7 @@
 
 In this section, we will delve into the various token standards supported on the Sei blockchain. Understanding these standards is crucial for developers as they form the foundation of many decentralized applications. Sei offers support for native TokenFactory tokens, ERC standards, CW standards, IBC and facilitates interoperability between these token types.
 
-### Sei Token
+## Sei Token
 
 The Sei token is the native token of the Sei blockchain, serving multiple roles within the ecosystem.
 
@@ -15,22 +15,31 @@ The Sei token is the native token of the Sei blockchain, serving multiple roles
 
 On the Cosmos side, the Sei token has 6 decimals, while on the EVM side, it follows the standard 18 decimals.
 
-### TokenFactory
+#### EVM:
+`1sei = 1000000000000000000wei`
+`1sei = 1000000000gwei`
+
+#### Cosmos:
+`1sei = 1000000usei`
+
+## TokenFactory
 
 TokenFactory allows for the creation of tokens that are natively integrated into the bank module of the Cosmos SDK. This integration means balances are available through native bank queries, unlike CW20 or ERC20 tokens which require querying the smart contract directly.
 
 - **Why is it Recommended?**: It provides a more efficient way to manage tokens, leveraging the native capabilities of the Cosmos SDK for improved performance and ease of use.
 - **How to Create via `seid` CLI**: Tokens can be created using the `seid` command-line interface.
 
-### Inter-Blockchain Communication (IBC)
+Learn more about creating tokens using TokenFactory in the [TokenFactory Tutorial](/dev-tutorials/tokenfactory-tutorial).
+
+## Inter-Blockchain Communication (IBC)
 
 IBC is a protocol that enables communication and asset transfers between different cosmos chains, enhancing interoperability and enabling cross-chain applications and liquidity.
 
 - **Channel Info List**: Channels are used to establish communication paths between blockchains. Each channel has a unique identifier and specific configurations.
   - [IBC Channel Info Registry](https://github.com/sei-protocol/chain-registry/blob/main/ibc_info.json)
 - **Contributing to the IBC Registry**: IBC relayers can add new channels by making pull requests to the IBC registry.
 
-### Fungible Tokens
+## Fungible Tokens
 
 Fungible tokens are digital assets that are interchangeable with one another and are not unique. Sei supports both ERC20 and CW20 fungible token standards.
 
@@ -40,7 +49,7 @@ Fungible tokens are digital assets that are interchangeable with one another and
   - [Pointer Contracts Documentation](/dev-tutorials/pointer-contracts)
 - **Pointer Contract Registry**: A registry that keeps track of pointer contracts to facilitate interoperability.
 
-### NFTs
+## NFTs
 
 Non-fungible tokens (NFTs) represent unique digital assets. Sei supports both ERC721 and CW721 standards as well as their counterparts with royalties (2981).
 
@@ -49,3 +58,25 @@ Non-fungible tokens (NFTs) represent unique digital assets. Sei supports both ER
 - **Interoperability**: Similar to fungible tokens, NFTs can interact across different standards using pointer contracts.
 - **Pointer Contract Registry**: A registry for tracking pointer contracts specific to NFTs.
 - **CW2981 & ERC2981 (Royalties)**: These standards define royalty mechanisms for NFTs, ensuring creators receive a percentage of sales.
+
+## Deciding Between TokenFactory vs CW20 or ERC20
+
+When developing fungible tokens on the Sei blockchain, you have the option to create tokens using the native TokenFactory or the CW20 and ERC20 standards. Here’s a comparison to help you decide:
+
+#### TokenFactory
+Best for native Cosmos applications requiring efficient and fast access to token balances and transactions.
+
+- **Native Integration**: Tokens created via TokenFactory are integrated into the Cosmos SDK’s bank module.
+- **Efficient Queries**: Balances and transactions are available through native bank queries, making it more efficient than querying smart contracts directly.
+- **Recommended Use**: Ideal for scenarios where performance and ease of access are priorities.
+
+#### CW20 and ERC20
+Suitable for applications needing standard token interactions for use with existing dApps and cross-vm interoperability.
+
+- **Standard Compatibility**: CW20 for Cosmos and ERC20 for EVM ensure compatibility with existing dApps and ecosystems.
+- **Interoperability**: Both standards support pointer contracts, enabling seamless interaction between Cosmos and EVM environments.
+
+#### Interoperability
+Regardless of the choice, both TokenFactory and CW20/ERC20 tokens can have pointer contracts deployed, facilitating seamless cross-environment interoperability.
+
+For more detailed guidance, refer to the [Pointer Contracts Documentation](/dev-tutorials/pointer-contracts).
diff --git a/postcss.config.js b/postcss.config.js
@@ -2,5 +2,15 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
   },
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Gas on Sei`
	`1`	`+# Gas`
`2`	`2`
`3`	`3`	`Gas refers to the unit of measurement representing the work done to execute a transaction on the blockchain. The amount of gas used varies based on the complexity of the transaction.`
`4`	`4`