feature: implementation jupiter xNft & added state

mrgnlabs · Sep 1, 2023 · 6b58a52 · 6b58a52
1 parent 5038600
commit 6b58a52
Show file tree

Hide file tree

Showing 60 changed files with 6,791 additions and 4,492 deletions.
diff --git a/apps/marginfi-v2-ui/package.json b/apps/marginfi-v2-ui/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "clean": "rimraf dist node_modules",
-    "dev": "RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false next dev --port 3004",
+    "dev": "next dev --port 3004",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

diff --git a/apps/marginfi-v2-xnft/App.tsx b/apps/marginfi-v2-xnft/App.tsx
@@ -1,8 +1,9 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 import { registerRootComponent } from "expo";
 import { RecoilRoot } from "recoil";
 import { ActivityIndicator, View, Text, StyleSheet, ImageBackground } from "react-native";
 import Toast from "react-native-toast-message";
+import { JupiterProvider } from "@jup-ag/react-hook";
 import { NavigationContainer, DarkTheme } from "@react-navigation/native";
 import { BottomTabHeaderProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
@@ -11,6 +12,10 @@ import { useFonts, Inter_900Black } from "@expo-google-fonts/dev";
 import { PortfolioScreens } from "~/screens/PortfolioScreen";
 import { LendScreen } from "~/screens/LendScreen";
 import { SwapScreen } from "~/screens/SwapScreen";
+import { SwapContextProvider } from "~/context";
+import { useConnection } from "~/hooks/useConnection";
+import { useWallet } from "~/hooks/useWallet";
+import { ROUTE_CACHE_DURATION } from "~/consts";
 
 require("~/styles/globals.css");
 require("~/styles/fonts.css");
@@ -80,17 +85,15 @@ function TabNavigator() {
           tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="account" color={color} size={size} />,
         }}
       />
-      {/* <Tab.Screen
+      <Tab.Screen
         name="Swap"
         component={SwapScreen}
         options={{
-          headerShown: false,
+          header: (props: BottomTabHeaderProps) => <LogoTitle />,
           tabBarLabel: "Swap",
-          tabBarIcon: ({ color, size }) => (
-            <MaterialCommunityIcons name="bank" color={color} size={size} />
-          ),
+          tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="bank" color={color} size={size} />,
         }}
-      /> */}
+      />
       <Tab.Screen
         name="Portfolio"
         component={PortfolioScreens}
@@ -108,6 +111,9 @@ function App() {
   let [fontsLoaded] = useFonts({
     Inter_900Black,
   });
+  const connection = useConnection();
+  const { publicKey } = useWallet();
+  const [asLegacyTransaction, setAsLegacyTransaction] = useState(true);
 
   if (!fontsLoaded) {
     return (
@@ -119,10 +125,27 @@ function App() {
 
   return (
     <RecoilRoot>
-      <NavigationContainer theme={MyTheme}>
-        <TabNavigator />
-      </NavigationContainer>
-      <Toast position={"bottom"} />
+      {connection && (
+        <JupiterProvider
+          connection={connection}
+          routeCacheDuration={ROUTE_CACHE_DURATION}
+          wrapUnwrapSOL={true}
+          userPublicKey={publicKey || undefined}
+          platformFeeAndAccounts={undefined}
+          asLegacyTransaction={asLegacyTransaction}
+        >
+          <SwapContextProvider
+            asLegacyTransaction={asLegacyTransaction}
+            setAsLegacyTransaction={setAsLegacyTransaction}
+          >
+            <NavigationContainer theme={MyTheme}>
+              <TabNavigator />
+            </NavigationContainer>
+            <Toast position={"bottom"} />
+          </SwapContextProvider>
+        </JupiterProvider>
+      )}
+      ♠
     </RecoilRoot>
   );
 }

diff --git a/apps/marginfi-v2-xnft/package.json b/apps/marginfi-v2-xnft/package.json
@@ -11,10 +11,12 @@
     "clean": "rimraf dist node_modules .expo web-build"
   },
   "dependencies": {
-    "@coral-xyz/anchor": "0.28.1-beta.1",
-    "@coral-xyz/common": "0.7.0-latest.1142",
-    "@expo-google-fonts/dev": "0.2.3",
+    "@coral-xyz/anchor": "^0.27.0",
+    "@coral-xyz/common": "^0.6.6-latest.5027",
+    "@expo-google-fonts/dev": "*",
     "@expo/vector-icons": "^13.0.0",
+    "@jup-ag/core": "^4.0.0-beta.21",
+    "@jup-ag/react-hook": "^4.0.0-beta.17",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@mrgnlabs/marginfi-client-v2": "*",
     "@mrgnlabs/marginfi-v2-ui-state": "*",
@@ -47,6 +49,7 @@
     "react-content-loader": "^6.2.1",
     "react-dom": "18.2.0",
     "react-error-overlay": "6.0.11",
+    "react-hook-form": "^7.45.4",
     "react-native": "0.72.4",
     "react-native-dotenv": "^3.4.9",
     "react-native-gesture-handler": "~2.12.1",

diff --git a/apps/marginfi-v2-xnft/src/App.tsx b/apps/marginfi-v2-xnft/src/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { registerRootComponent } from "expo";
 import { RecoilRoot } from "recoil";
 import { ActivityIndicator, View, Text, StyleSheet, ImageBackground } from "react-native";
@@ -9,7 +9,8 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useFonts, Inter_900Black } from "@expo-google-fonts/dev";
 import { PortfolioScreens } from "~/screens/PortfolioScreen";
 import { LendScreen } from "~/screens/LendScreen";
-// import { SwapScreen } from "~/screens/SwapScreen";
+import { SwapScreen } from "~/screens/SwapScreen";
+import { SwapContextProvider } from "./context";
 
 require("~/styles/globals.css");
 require("~/styles/fonts.css");
@@ -79,17 +80,15 @@ function TabNavigator() {
           tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="account" color={color} size={size} />,
         }}
       />
-      {/* <Tab.Screen
+      <Tab.Screen
         name="Swap"
         component={SwapScreen}
         options={{
-          headerShown: false,
+          header: (props: BottomTabHeaderProps) => <LogoTitle />,
           tabBarLabel: "Swap",
-          tabBarIcon: ({ color, size }) => (
-            <MaterialCommunityIcons name="bank" color={color} size={size} />
-          ),
+          tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="bank" color={color} size={size} />,
         }}
-      /> */}
+      />
       <Tab.Screen
         name="Portfolio"
         component={PortfolioScreens}
@@ -107,6 +106,7 @@ function App() {
   let [fontsLoaded] = useFonts({
     Inter_900Black,
   });
+  const [asLegacyTransaction, setAsLegacyTransaction] = useState(true);
 
   if (!fontsLoaded) {
     return (
@@ -118,10 +118,12 @@ function App() {
 
   return (
     <RecoilRoot>
-      <NavigationContainer theme={MyTheme}>
-        <TabNavigator />
-      </NavigationContainer>
-      <Toast position={"bottom"} />
+      <SwapContextProvider asLegacyTransaction={asLegacyTransaction} setAsLegacyTransaction={setAsLegacyTransaction}>
+        <NavigationContainer theme={MyTheme}>
+          <TabNavigator />
+        </NavigationContainer>
+        <Toast position={"bottom"} />
+      </SwapContextProvider>
     </RecoilRoot>
   );
 }

diff --git a/apps/marginfi-v2-xnft/src/assets/icons/ApproxIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/ApproxIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export const ApproxIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = 16,
+  height = 16,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10.8573 8.18429L13.6323 5.95933L10.8573 3.73438V5.31937H3.32735V6.59937H10.8573V8.18429ZM5.14223 7.81429L2.36719 10.0393L5.14223 12.2642V10.6792H12.6722V9.39922H5.14223V7.81429Z"
+        fill="#777777"
+      />
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/ChevronDownIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/ChevronDownIcon.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+export const ChevronDownIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = 24,
+  height = 12,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6 9L12 15L18 9"
+        stroke="#E0E0E0"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/CloseIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/CloseIcon.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+export const CloseIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = 20,
+  height = 20,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.0336 16.2126L8.2336 10.0126L2.0336 3.81263C1.7961 3.57903 1.66172 3.25951 1.66016 2.92669C1.65938 2.59309 1.79141 2.27357 2.02734 2.03763C2.26328 1.80247 2.5828 1.67045 2.9164 1.67201C3.25 1.67357 3.56874 1.80795 3.80234 2.04623L9.99994 8.24623L16.1999 2.04623C16.4335 1.80795 16.7523 1.67357 17.0859 1.67201C17.4187 1.67045 17.739 1.80248 17.9749 2.03763C18.2109 2.27357 18.3429 2.59309 18.3413 2.92669C18.3406 3.25951 18.2062 3.57903 17.9687 3.81263L11.7663 10.0126L17.9663 16.2126C18.2038 16.4462 18.3382 16.7658 18.3397 17.0986C18.3405 17.4322 18.2085 17.7517 17.9725 17.9876C17.7366 18.2228 17.4171 18.3548 17.0835 18.3533C16.7499 18.3517 16.4311 18.2173 16.1975 17.979L9.99994 11.779L3.79994 17.979C3.31088 18.4611 2.52494 18.4579 2.039 17.9736C1.55384 17.4884 1.54994 16.7025 2.03119 16.2126L2.0336 16.2126Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/ErrorIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/ErrorIcon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export const ErrorIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = 40,
+  height = 40,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_7547_116874)">
+        <circle cx="20" cy="20" r="20" fill="#F04A44" />
+        <path
+          d="M19.8444 25.4321C18.6773 25.4332 17.7205 24.5092 17.6793 23.3431L17.1718 9.04107C17.1507 8.45326 17.3706 7.88344 17.7786 7.46056C18.1867 7.03768 18.7492 6.7998 19.337 6.7998H20.3519C20.9397 6.7998 21.5021 7.03768 21.9102 7.46056C22.3183 7.88344 22.5382 8.45329 22.5171 9.04107L22.0096 23.3431C21.9684 24.5092 21.0116 25.4332 19.8444 25.4321Z"
+          fill="white"
+        />
+        <path
+          d="M22.8893 30.4989C22.8893 32.1809 21.5266 33.5436 19.8446 33.5436C18.1626 33.5436 16.7998 32.1809 16.7998 30.4989C16.7998 28.8169 18.1626 27.4541 19.8446 27.4541C21.5266 27.4541 22.8893 28.8169 22.8893 30.4989Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7547_116874">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/ExternalIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/ExternalIcon.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const ExternalIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = 10,
+  height = 10,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 10"
+      fill="inherit"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 2V3H1.5V8.5H7V6H8V9C8 9.13261 7.94732 9.25979 7.85355 9.35355C7.75979 9.44732 7.63261 9.5 7.5 9.5H1C0.867392 9.5 0.740215 9.44732 0.646447 9.35355C0.552678 9.25979 0.5 9.13261 0.5 9V2.5C0.5 2.36739 0.552678 2.24021 0.646447 2.14645C0.740215 2.05268 0.867392 2 1 2H4ZM9.5 0.5V4.5H8.5V2.2065L4.6035 6.1035L3.8965 5.3965L7.7925 1.5H5.5V0.5H9.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/JupiterLogo.tsx b/apps/marginfi-v2-xnft/src/assets/icons/JupiterLogo.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+export const JupiterLogo: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = "24",
+  height = "24",
+}) => {
+  return (
+    <img
+      src={"https://jup.ag/svg/jupiter-logo.svg"}
+      width={width}
+      height={height}
+      alt="Jupiter aggregator"
+    />
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/LeftArrowIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/LeftArrowIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export const LeftArrowIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = "12",
+  height = "12",
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 53 52"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.3336 23.8334H43.7062V28.1667H17.3336L28.9555 39.7887L25.8919 42.8524L9.03955 26L25.8919 9.14771L28.9555 12.2114L17.3336 23.8334Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/RefreshIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/RefreshIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+export const RefreshIcon: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = "12",
+  height = "12",
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 12"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_841_4053)">
+        <path
+          d="M11.6466 4.23513V0.706082L10.4111 1.94156C9.3173 0.741165 7.72912 0 6 0C2.6827 0 0 2.6827 0 6C0 9.3173 2.68203 12 6 12C7.69405 12 9.21142 11.2939 10.3059 10.165L9.31797 9.14128C8.50601 10.0234 7.30561 10.5879 6 10.5879C3.45892 10.5879 1.41216 8.5411 1.41216 6.00002C1.41216 3.45894 3.45892 1.41218 6 1.41218C7.34135 1.41218 8.57615 2.01238 9.42317 2.92954L8.11757 4.23515L11.6466 4.23513Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_841_4053">
+          <rect width={width} height={height} fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/marginfi-v2-xnft/src/assets/icons/RouteIcon.tsx b/apps/marginfi-v2-xnft/src/assets/icons/RouteIcon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export const RoutesSVG: React.FC<React.SVGAttributes<SVGElement>> = ({
+  width = "20",
+  height = "20",
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 7 9"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.11894 4.99859H4.79173C5.96242 4.99859 6.92699 4.04958 6.94255 2.89521C6.94255 1.72452 5.97798 0.791834 4.79173 0.791834L2.75212 0.791092C2.54675 0.332152 2.08781 0 1.5503 0C0.822978 0 0.237252 0.601291 0.237252 1.31305C0.237252 2.0248 0.838542 2.62609 1.5503 2.62609C2.10414 2.62609 2.56232 2.29394 2.75212 1.835H4.79248C5.40934 1.835 5.91573 2.34139 5.91573 2.91079C5.91573 3.4802 5.40934 3.98659 4.79248 3.98659H2.15083C0.980134 3.98659 0.0155637 4.93559 0 6.08997C0 7.27622 0.964571 8.19334 2.15083 8.19334H4.34911C4.55447 8.65228 5.01341 9 5.55093 9C6.27825 9 6.86398 8.39871 6.86398 7.68695C6.86398 6.95964 6.26269 6.37391 5.55093 6.37391C4.99709 6.37391 4.53891 6.70606 4.34911 7.165L2.13527 7.16574C1.51841 7.16574 1.01202 6.65935 1.01202 6.08995C1.01202 5.50498 1.50209 5.01415 2.11894 4.99859Z"
+        fill="white"
+        fillOpacity="0.5"
+      />
+    </svg>
+  );
+};