In the previous article, we imported the wallet created from the Solana tool suite to Sollet. Finally, we are ready to build our decentralized exchange based on the cloned oyster swap project. Before we start, you will need to install a code editor with npm, such as Visual Studio Code and Atom.
Step 1: Clone the Oyster swap project on Solana-labs GitHub. I am using the one with commit 82e29aaf4578898710bbeaf183b494e8b503815f. The latest version may differ from the commit I am using. Open the cloned project with your code editor.
Step 2: If you use visual studio code, ensure your npm version is higher than 8.15.0. You may enter ctrl + ` to start a terminal on Windows. Enter the commands below to update your npm module if it is outdated.
npm install -g [email protected]Step 3: Move to the .env file, add your wallet address on LINE 3 and LINE 6.
Step 4: Since the yarn.lock, package-lock.json are dated, we may encounter some errors while building our exchange. We will need to remove it from our project. I hope the developer will fix it in the upcoming future. On package.json, change the dependencies to the updated ones.
"@craco/craco": "^5.9.0",
"@project-serum/serum": "^0.13.7",
"@project-serum/sol-wallet-adapter": "^0.1.8",
"@solana/spl-token": "0.1.8",
"@solana/spl-token-swap": "0.1.2",
"@solana/web3.js": "^1.63.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/react-router-dom": "^5.1.6",
"antd": "^4.6.6",
"bn.js": "^5.1.3",
"bs58": "^4.0.1",
"buffer-layout": "^1.2.0",
"craco-less": "^1.17.0",
"identicon.js": "^2.3.3",
"jazzicon": "^1.5.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-github-btn": "^1.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"recharts": "^1.8.5",
"typescript": "^4.0.0"
Step 5: On the original project, the clusterApiUrl does not work properly. We will need to modify src/utils/connection.tsx and add their Url according to the Solana documentation page.
export const ENDPOINTS = [
{
name: "mainnet-beta" as ENV,
endpoint: "https://solana-api.projectserum.com/",
},
{ name: "testnet" as ENV, endpoint: "https://api.testnet.solana.com/" },
{ name: "devnet" as ENV, endpoint: "https://api.devnet.solana.com/" },
{ name: "localnet" as ENV, endpoint: "http://127.0.0.1:8899" },
];Step 6: We also need to modify src/utils/uds.tdx Line 17 to our wallet address.
In my case, it is 4yM8YKG84DSFvvSryBXwhK4Fmu4QHdCWSGV8K12zVLFy.
export const SWAP_PROGRAM_OWNER_FEE_ADDRESS = new PublicKey(
"4yM8YKG84DSFvvSryBXwhK4Fmu4QHdCWSGV8K12zVLFy"
);
Step 7: Since the developers have updated the dependencies, we will also need to add the address: pubkey, on line 139 to avoid errors during return.
Step 8: We have fixed most errors due to the updated dependencies. We are ready to build and run our exchange with the below commands on the terminal.
npm install @craco/craco --save --legacy-peer-deps
npm install -g serve
npm run build
serve -s build
If you have this error during building,
serve : File C:\Users\silicon\AppData\Roaming\npm\serve.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see
about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ serve -s build
+ ~~~~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
try to build the project again with the command below.
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Step 9: If everything is correct, we may go to our deployed cloned exchange and play with it.
Remember to select devnet on your exchange before connecting your Sollet wallet.
We created our decentralized exchange using the cloned oyster swap from Solana labs! The following article will teach us how to make our liquidity pool on the exchange we just created.
If you think this article is helpful, leave a comment below. 🙂
You may also sponsor this website by sending some SOL to this address: AGzgnsepqh7NePfTrNWfrXPaRXKd1ce8jUwfmFh9FfMe