implementation swap button

src/components/Main.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
+import React, { useState } from "react";
+import { SendTransaction } from "./Swap";
 
 const style = {
   wrapper: `absolute top-12  bottom-12 w-screen flex items-center justify-center mt-14`,
@@ -16,6 +16,16 @@ const style = {
 };
 
 const Main = () => {
+  const [values, setValues] = useState({
+    placeholder: 0,
+  });
+
+  function handleInputChange(e: { target: any }) {
+    const target = e.target;
+    const value = target.type === "checkbox" ? target.checked : target.value;
+    setValues({ ...values });
+  }
+
   return (
     <div className={style.wrapper}>
       <div className={style.content}>
@@ -28,32 +38,35 @@ const Main = () => {
             className={style.transferPropInput}
             placeholder="0.0"
             pattern="^[0-9]*[.,]?[0-9]*$"
-            onChange={null}
+            // value={values.placeholder}
+            onChange={handleInputChange}
           />
           <div className={style.currencySelector}>
             <div className={style.currencySelectorContent}>
               <div className={style.currencySelectorIcon}></div>
-              <div className={style.currencySelectorTicker}>USDC</div>
+              <div className={style.currencySelectorTicker}>USDC→SOL</div>
             </div>
           </div>
         </div>
-        <div className={style.transferPropContainer}>
+        {/* <div className={style.transferPropContainer}>
           <input
             type="text"
             className={style.transferPropInput}
             placeholder="0.0"
-            onChange={null}
+            onChange={undefined}
+            value={values.placeholder}
+            // onChange={handleInputChange}
           />
           <div className={style.currencySelector}>
             {" "}
             <div className={style.currencySelectorContent}>
               <div className={style.currencySelectorIcon}></div>
-              <div className={style.currencySelectorTicker}>UXD</div>
+              <div className={style.currencySelectorTicker}>SOL→USDC</div>
             </div>
           </div>
-        </div>
-        <div className={style.button}>
-          <WalletMultiButton />
+        </div> */}
+        <div className={style.confirmButton}>
+          <SendTransaction amount={values.placeholder} />
         </div>
       </div>
     </div>

src/components/Swap.tsx

@@ -0,0 +1,72 @@
+import { Button } from "@mui/material";
+import { u64 } from "@saberhq/token-utils";
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import {
+  Keypair,
+  SystemProgram,
+  Transaction,
+  TransactionSignature,
+} from "@solana/web3.js";
+import { FC, ReactNode, useCallback } from "react";
+import BN from "bn.js";
+import { addUsdcToSolInstruction } from "../libs/composeSwap";
+
+type Props = {
+  amount: number;
+};
+
+// import { useNotify } from "./notify";
+
+export const SendTransaction: FC<Props> = ({ amount }) => {
+  const { connection } = useConnection();
+  const { publicKey, sendTransaction } = useWallet();
+  //   const notify = useNotify();
+
+  const onClick = useCallback(async () => {
+    if (!publicKey) {
+      //   notify("error", "Wallet not connected!");
+      return;
+    }
+
+    let signature: TransactionSignature = "";
+    // let swapAmount: number = amount;
+    try {
+      const transaction = new Transaction();
+      const swapUsdcAmount = new u64(9000000);
+      const swapUxdAmount = new u64(
+        swapUsdcAmount.mul(new BN(995)).div(new BN(1000)).toNumber()
+      );
+
+      const tx = await addUsdcToSolInstruction(
+        transaction,
+        publicKey,
+        swapUsdcAmount,
+        swapUxdAmount
+      );
+
+      signature = await sendTransaction(tx, connection);
+      //   notify("info", "Transaction sent:", signature);
+
+      const confrimTx = await connection.confirmTransaction(
+        signature,
+        "processed"
+      );
+      alert("Transaction successful! \n txid: " + signature);
+      //   notify("success", "Transaction successful!", signature);
+    } catch (error: any) {
+      //   notify("error", `Transaction failed! ${error?.message}`, signature);
+      return;
+    }
+  }, [publicKey, connection, sendTransaction]);
+
+  return (
+    <Button
+      variant="contained"
+      //   color="secondary"
+      onClick={onClick}
+      disabled={!publicKey}
+    >
+      Swap
+    </Button>
+  );
+};

src/components/notify.tsx

@@ -0,0 +1,51 @@
+import LaunchIcon from "@mui/icons-material/Launch";
+import { Link } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { useSnackbar, VariantType } from "notistack";
+import { useCallback } from "react";
+
+const Notification = styled("span")(() => ({
+  display: "flex",
+  alignItems: "center",
+}));
+
+const StyledLink = styled(Link)(() => ({
+  color: "#ffffff",
+  display: "flex",
+  alignItems: "center",
+  marginLeft: 16,
+  textDecoration: "underline",
+  "&:hover": {
+    color: "#000000",
+  },
+}));
+
+const StyledLaunchIcon = styled(LaunchIcon)(() => ({
+  fontSize: 20,
+  marginLeft: 8,
+}));
+
+export function useNotify() {
+  const { enqueueSnackbar } = useSnackbar();
+
+  return useCallback(
+    (variant: VariantType, message: string, signature?: string) => {
+      enqueueSnackbar(
+        <Notification>
+          {message}
+          {signature && (
+            <StyledLink
+              href={`https://explorer.solana.com/tx/${signature}?cluster=devnet`}
+              target="_blank"
+            >
+              Transaction
+              <StyledLaunchIcon />
+            </StyledLink>
+          )}
+        </Notification>,
+        { variant }
+      );
+    },
+    [enqueueSnackbar]
+  );
+}

src/package.json

@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.5.1",
+    "@mui/material": "^5.5.1",
     "@saberhq/stableswap-sdk": "^1.12.53",
     "@saberhq/token-utils": "^1.12.53",
     "@solana/wallet-adapter-base": "^0.9.5",
@@ -19,6 +23,7 @@
     "bs58": "^5.0.0",
     "jsbi": "^4.2.0",
     "next": "12.1.0",
+    "notistack": "^2.0.3",
     "react": "^17.0.2",
     "react-dom": "17.0.2"
   },

src/pages/_app.tsx

@@ -1,55 +1,58 @@
-import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
-import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
-import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
 import {
-    LedgerWalletAdapter,
-    PhantomWalletAdapter,
-    SlopeWalletAdapter,
-    SolflareWalletAdapter,
-    SolletExtensionWalletAdapter,
-    SolletWalletAdapter,
-    TorusWalletAdapter,
-} from '@solana/wallet-adapter-wallets';
-import { clusterApiUrl } from '@solana/web3.js';
-import { AppProps } from 'next/app';
-import { FC, useMemo } from 'react';
+  ConnectionProvider,
+  WalletProvider,
+} from "@solana/wallet-adapter-react";
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import {
+  LedgerWalletAdapter,
+  PhantomWalletAdapter,
+  SlopeWalletAdapter,
+  SolflareWalletAdapter,
+  SolletExtensionWalletAdapter,
+  SolletWalletAdapter,
+  TorusWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+import { clusterApiUrl } from "@solana/web3.js";
+import { AppProps } from "next/app";
+import { FC, useMemo } from "react";
 
 // Use require instead of import since order matters
-require('@solana/wallet-adapter-react-ui/styles.css');
-require('../styles/globals.css');
+require("@solana/wallet-adapter-react-ui/styles.css");
+require("../styles/globals.css");
 
 const App: FC<AppProps> = ({ Component, pageProps }) => {
-    // Can be set to 'devnet', 'testnet', or 'mainnet-beta'
-    const network = WalletAdapterNetwork.Devnet;
+  // Can be set to 'devnet', 'testnet', or 'mainnet-beta'
+  const network = WalletAdapterNetwork.Mainnet;
 
-    // You can also provide a custom RPC endpoint
-    const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+  // You can also provide a custom RPC endpoint
+  const endpoint = useMemo(() => clusterApiUrl(network), [network]);
 
-    // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
-    // Only the wallets you configure here will be compiled into your application, and only the dependencies
-    // of wallets that your users connect to will be loaded
-    const wallets = useMemo(
-        () => [
-            new PhantomWalletAdapter(),
-            new SlopeWalletAdapter(),
-            new SolflareWalletAdapter({ network }),
-            new TorusWalletAdapter(),
-            new LedgerWalletAdapter(),
-            new SolletWalletAdapter({ network }),
-            new SolletExtensionWalletAdapter({ network }),
-        ],
-        [network]
-    );
+  // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking and lazy loading --
+  // Only the wallets you configure here will be compiled into your application, and only the dependencies
+  // of wallets that your users connect to will be loaded
+  const wallets = useMemo(
+    () => [
+      new PhantomWalletAdapter(),
+      new SlopeWalletAdapter(),
+      new SolflareWalletAdapter({ network }),
+      new TorusWalletAdapter(),
+      new LedgerWalletAdapter(),
+      new SolletWalletAdapter({ network }),
+      new SolletExtensionWalletAdapter({ network }),
+    ],
+    [network]
+  );
 
-    return (
-        <ConnectionProvider endpoint={endpoint}>
-            <WalletProvider wallets={wallets} autoConnect>
-                <WalletModalProvider>
-                    <Component {...pageProps} />
-                </WalletModalProvider>
-            </WalletProvider>
-        </ConnectionProvider>
-    );
+  return (
+    <ConnectionProvider endpoint={endpoint}>
+      <WalletProvider wallets={wallets} autoConnect>
+        <WalletModalProvider>
+          <Component {...pageProps} />
+        </WalletModalProvider>
+      </WalletProvider>
+    </ConnectionProvider>
+  );
 };
 
-export default App;
+export default App;