Merge remote-tracking branch 'origin/master'

docs/aboutus/index.mdx

@@ -4,22 +4,25 @@ title: AboutUs
 description: About Us
 ---
 
+import Player from '../../src/components/utils/player';
+import Roadmap from '../../src/components/AboutUs/roadmap';
+import News from '../../src/components/AboutUs/news';
+import Members from '../../src/components/AboutUs/members';
+
 # WELCOME to WELLDONE!
 
 WELLDONE Studio is a specialist team within [**DSRV**](https://dsrvlabs.com), dedicated to crafting tools that streamline the web3 development process. With our comprehensive suite of products, we aim to create a familiar, integrated environment for developers to harness the full potential of Web3.
 
-![WELLDONE](/img/aboutus_brand.jpg)
+<Player video={require('@site/static/video/aboutus_brand.mp4').default} />
+
+<br/>
 
 Our offerings, such as the [**WELLDONE Wallet**](https://chrome.google.com/webstore/detail/welldone-wallet-for-multi/bmkakpenjmcpfhhjadflneinmhboecjf),[**WELLDONE AddChain**](https://addchain.welldonestudio.io/), and [**WELLDONE Code**](https://docs.welldonestudio.io/code), are specifically designed to address the unique challenges of multi-chain development. These tools simplify various tasks from account creation and asset management to the addition of new networks and contract deployment across multiple networks.
 
 As we continuously expand our support for additional networks, our goal remains to provide a standardized and integrated multi-chain development platform.
 
 <br/>
 
-import Roadmap from '../../src/components/AboutUs/roadmap';
-import News from '../../src/components/AboutUs/news';
-import Members from '../../src/components/AboutUs/members';
-
 ## Our Roadmap
 
 <Roadmap />
@@ -43,4 +46,4 @@ With us, the value of Web3 unfolds through a harmonized expedition, universally
 
 ## Our Members
 
-<Members />
+# [:point_right::point_right: Link :point_left::point_left:](https://www.dsrvlabs.com/about/#member)

docs/tutorials/sui-zklogin/index.md

@@ -0,0 +1,93 @@
+---
+title: Sui zkLogin
+description: Sui zkLogin Tutorial 
+sidebar_position: 9
+---
+
+# Sui zkLogin
+
+<div>
+  <span className='author-sm'>January 16, 2024</span>
+  <div className='author-div'>
+    <div className='author-avatars'>
+      <a href='https://github.com/0xhsy' target='_blank'><img src='https://avatars.githubusercontent.com/u/102006034?v=4' /></a>
+    </div>
+    <div>
+      <span className='author-name'>Sooyoung Hyun</span><br/>
+      <span className='author-sm'>Lead Software Engineer, DSRV </span>
+    </div>
+  </div>
+</div>
+
+## Introduction
+
+The evolution of blockchain technology is presenting new requirements for user interfaces and security. Against this backdrop, WELLDONE zkWallet integrates the zkLogin feature of the Sui blockchain, providing an efficient way for users to access blockchain services using their existing Web2 credentials. This article will explore how WELLDONE zkWallet leverages zkLogin to enhance user experience and facilitate connections with various browser extension wallets.
+
+**WELLDONE zkWallet and Sui's zkLogin: A Structural Approach to Enhancing User Experience and Security**
+
+The way WELLDONE zkWallet integrates Sui's zkLogin feature offers a structural approach that simultaneously enhances the accessibility and security of blockchain technology. This integration is achieved in the following ways:
+
+1. **Separate Webpage Integration**: WELLDONE zkWallet provides a separate webpage that allows users to choose and connect various browser extension wallets. This webpage is directly integrated with Sui's zkLogin feature, enabling users to access blockchain services using their existing Web2 credentials.
+2. **Zero-Knowledge Proof Mechanism**: The core of zkLogin is the zero-knowledge proof technology. This technology allows users to access blockchain services securely while keeping their identity information hidden. Users can access services without revealing their identity, and this process fully protects their personal information.
+3. **Dual Authentication Mechanism**: WELLDONE zkWallet combines wallet key management with OAuth authentication to provide a dual security layer. Users must satisfy both elements to access their wallet: the private key of the wallet and the dual authentication approach through an OAuth provider. This offers much stronger security than single-factor authentication methods. Particularly, WELLDONE zkWallet provides an additional security mechanism by separating and storing the Web2 credential tokens and ephemeral key pairs through its web interface.
+4. **Compatibility with Various Wallets**: WELLDONE zkWallet is standardized and designed to be compatible with various browser extension wallets. Wallet developers do not need additional development to use zkLogin, and users can choose from a variety of wallet options according to their preference, meeting a wider range of user needs.
+5. **Simplified User Interface**: The web interface of WELLDONE zkWallet is user-friendly and intuitive. Users can access their wallet through their web account with just a few clicks, providing convenience while maintaining security.
+6. **Seamless Integration with Dapps**: WELLDONE zkWallet supports direct interaction with various decentralized applications (Dapps). This allows users to use Dapps more efficiently through their web wallets. Information about interacting with Dapps can be found in [this document](https://docs.welldonestudio.io/wallet/zkWallet).
+
+This structural approach reduces the complexity of blockchain technology, making it easier for users to understand and utilize. The integration of WELLDONE zkWallet focuses on enabling users to use blockchain technology easily and safely, without worrying about technical barriers. We will now take a closer look through the following tutorial.
+
+## Tutorial
+
+[Click here to watch the video on how to run this tutorial.](https://drive.google.com/file/d/1AyL-M-ILCVKzaZiARFhV69xYAt4hV8-v/view?usp=sharing)
+
+:::tip Compatible Wallets
+
+- WELLDONE Wallet, Sui Wallet, Elli Wallet
+
+:::
+
+0. [Install WELLDONE Wallet](https://docs.welldonestudio.io/wallet/manual/how-to-install) or another browser extension wallet. You will receive a **JSON Web Token (JWT)** through the Public Key of the extension wallet and OAuth login, and sign transactions with the Private Key of the extension wallet. For practice, create a Sui account and set the network to Devnet.
+
+<img src={require('./img/install-wallet.png').default} alt='install-wallet' style={{width: '300px', marginBottom: '30px'}}/>
+
+1. Connect your wallet to the site at [https://zkwallet.welldonestudio.io](https://zkwallet.welldonestudio.io/). Note that using an address already created through zkLogin with Sui Wallet will not work, as the Public Key is unknown.
+
+<img src={require('./img/connect-wallet.png').default} alt='connect-wallet'  style={{marginBottom: '30px'}}/>
+
+2. Obtain a JWT from the **OpenID provider (OP)** through your credentials.
+
+<img src={require('./img/oauth-login.png').default} alt='oauth-login' style={{marginBottom: '30px'}}/>
+
+3. You will then be logged into WELLDONE zkWallet, Sui's first Web wallet, as shown below. A new address is created using the Public Key of the extension wallet, JWT, and User Salt. We do not know the key pair of this address. However, by controlling it through independent elements like the wallet's key and OP authentication, we achieve robust security.
+
+<img src={require('./img/check-address.png').default} alt='check-address' style={{marginBottom: '30px'}}/>
+
+4. Receive SUI coins through the [faucet](https://docs.sui.io/guides/developer/getting-started/get-coins) and execute a Stake TX.
+
+<img src={require('./img/send-tx.png').default} alt='send-tx' style={{marginBottom: '30px'}}/>
+
+5. Sign the transaction with the Private Key of the account in the browser extension wallet.
+
+<img src={require('./img/sign-tx.png').default} alt='sign-tx' style={{marginBottom: '30px'}}/>
+
+6. You can confirm that the transaction has been successfully sent and the stake has been executed.
+
+<img src={require('./img/check-result.png').default} alt='check-result' style={{marginBottom: '30px'}}/>
+
+The process outlined above can be summarized as follows:
+
+<img src={require('./img/process.webp').default} alt='process' style={{marginBottom: '30px'}}/>
+
+Additionally, as shown in the image below, the "Add Wallet" feature allows the creation of multiple account addresses. This is possible because changing only the User's Salt can generate multiple account addresses with a single JWT.
+
+<img src={require('./img/add-wallet.png').default} alt='add-wallet' style={{marginBottom: '30px'}}/>
+
+For detailed explanations of the terminology and internal workings, refer to the [Sui documentation](https://docs.sui.io/concepts/cryptography/zklogin).
+
+## Conclusion
+
+We have explored the operation of the Sui web wallet using Sui's zkLogin feature. The separation of the extension wallet and zkLogin authentication process increases compatibility with various wallet options. Users can choose their preferred wallet, and WELLDONE zkWallet's authentication system seamlessly integrates with these diverse wallets. This provides users with more choices and caters to a variety of user needs. Extension wallets, which require management of mnemonics or private keys, can be used like a Ledger wallet.
+
+Furthermore, the web wallet can directly interact with various Dapps. Interactions between Dapps and the web wallet can be found in [this document](https://docs.welldonestudio.io/wallet/zkWallet).
+
+The integration of Sui zkLogin with WELLDONE zkWallet enables users to use blockchain technology more safely and intuitively. WELLDONE zkWallet, through this innovation, enhances the practicality and security of blockchain technology, elevating the user experience to a new level.

docs/wallet/zkWallet/get-account/index.md

@@ -0,0 +1,45 @@
+---
+slug: /wallet/zkWallet/get-account
+sidebar_position: 1
+description: WELLDONE zkWallet for developer
+---
+
+# Get Account
+
+In this section, we explain how to retrieve a user's wallet address using zkWallet. This process involves the DApp requesting the user's wallet address and the user providing it through zkWallet.
+
+### Implementation Method
+
+**Setting Callback URL**: The DApp provides a callback URL to zkWallet. This URL is where the user will be redirected after completing the wallet connection.
+
+**Requesting Wallet Connection**: When the user clicks the 'Get Account' button, the DApp sends a request to the 'connect' endpoint of zkWallet.
+
+**Returning the Address**: Once the user completes authentication in zkWallet, zkWallet returns the user's wallet address to the callback URL.
+
+```jsx live
+function getAccount() {
+  const ZKWALLET = 'https://zkwallet.welldonestudio.io';
+  const CHAIN_NAME = `sui:devnet`;
+
+  function handleGetAccount() {
+    const url = new URL('connect', ZKWALLET);
+    url.searchParams.set('chain', CHAIN_NAME);
+    url.searchParams.set('callback', `${window.location.origin}/wallet/zkWallet/sign-transaction`);
+    url.searchParams.set('jsonrpc', JSON.stringify({
+      jsonrpc: '2.0',
+      id: 0,
+      method: 'dapp:accounts',
+    }));
+    window.location.href = url.toString();
+  }
+
+  return (
+    <>
+      <Button onClick={handleGetAccount} type="button">
+        Get Account
+      </Button>
+      <div>You have to get account first!</div>
+    </>
+  );
+}
+```

docs/wallet/zkWallet/index.md

@@ -0,0 +1,26 @@
+---
+slug: /wallet/zkWallet
+sidebar_position: 3
+description: WELLDONE zkWallet for developer
+---
+
+# zkWallet
+
+:::tip Prerequisites
+
+- Currently, as it is in Alpha version, to ensure smooth interaction with DApps, you need to create an account and log in to zkWallet according to the instructions provided [here](https://docs.welldonestudio.io/tutorials/sui-zklogin/). We apologize for any inconvenience caused.
+
+:::
+
+In this section, we provide an overview of how developers can effectively integrate their decentralized applications (DApps) with WELLDONE zkWallet. zkWallet is an innovative web wallet that allows users to access blockchain services using their Web2 credentials. This integration enables users to utilize blockchain functionalities more easily and securely.
+
+For more detailed information and step-by-step instructions, refer to the [WELLDONE zkWallet](https://docs.welldonestudio.io/tutorials/sui-zklogin/) documentation.
+
+<img src={require('./img/dapp-connection.webp').default} alt='process' style={{marginBottom: '30px'}}/>
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items}/>
+```

docs/wallet/zkWallet/send-transaction/index.md

@@ -0,0 +1,85 @@
+---
+slug: /wallet/zkWallet/send-transaction
+sidebar_position: 3
+description: WELLDONE zkWallet for developer
+---
+
+# Send Transaction
+
+In this section, we describe how to send signed transactions to the Sui blockchain. This process involves the DApp receiving the signed transaction from the "Sign Transaction" part and deploying it to the blockchain.
+
+### Implementation Method
+
+**Preparing the Transaction**: The DApp receives the signed transaction.
+
+**Sending to the Blockchain**: When the user clicks the 'Send a Transaction' button, the DApp transmits the transaction to the Sui blockchain.
+
+**Confirming the Result**: Once the transaction is successfully processed, the DApp displays the transaction hash to the user.
+
+```jsx live
+function sendTransaction() {
+  const CHAIN_NAME = 'sui';
+  const SUI_RPC_URL = 'https://wallet-rpc.devnet.sui.io/';
+  const [txHash, setTxHash] = React.useState(null);
+  const [unsignedTx, setUnsignedTx] = React.useState(null);
+  const [signature, setSingnature] = React.useState(null);
+
+  const request = async (method, params) => {
+    const res = await fetch(SUI_RPC_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        id: 0,
+        jsonrpc: '2.0',
+        method,
+        params: params || [],
+      }),
+    });
+
+    const { result } = await res.json();
+    return result;
+  };
+
+  async function handleSendTransaction() {
+    try {
+      const { digest } = await request('sui_executeTransactionBlock', [
+          Buffer.from(unsignedTx.replace('0x', ''), 'hex').toString('base64'),
+          [Buffer.from(signature.replace('0x', ''), 'hex').toString('base64')],
+      ]);
+      digest && setTxHash(digest)
+    } catch (error) {
+      alert(`Error Message: ${error.message}\nError Code: ${error.code}`);
+    }
+  }
+
+  useEffect(() => {
+    try {
+      const url = new URL(window.location.href);
+      const { result } = JSON.parse(url.searchParams.get('jsonrpc'));
+      if (result) {
+        setUnsignedTx(result[0].unsignedTx);
+        setSingnature(result[0].signature);
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }, []);
+
+  return (
+    <>
+      {(signature && !txHash)&& (
+        <Button onClick={handleSendTransaction} type="button">
+          Send a Transaction
+        </Button>
+      )}
+      {txHash && (
+        <ResultTooltip style={{ background: '#F08080' }}>
+          <b>Transaction Hash:</b> {txHash}
+        </ResultTooltip>
+      )}
+    </>
+  );
+}
+```