[FRE 876] Add persistSwapWidgetState prop (#87)

.changeset/shy-dragons-stare.md

@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': minor
+---
+
+Add prop persistSwapWidgetState

docs/widget/configuration-options.mdx

@@ -71,6 +71,7 @@ interface SwapWidgetProps {
     brandColor: string; // color used for confirmation buttons
     highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
   };
+  persistSwapWidgetState?: boolean; // whether or not swap widget state should persist after refresh. Defaults to true
 }
 ```
 

examples/nextjs/pages/provider.tsx

@@ -24,6 +24,7 @@ const Home: NextPage = () => {
               srcAssetDenom:
                 'ibc/1480b8fd20ad5fcae81ea87584d269547dd4d436843c1d20f15e00eb64743ef4',
             }}
+            persistSwapWidgetState={false}
           />
         </SwapWidgetProvider>
       </div>

packages/widget/README.md

@@ -133,6 +133,7 @@ interface SwapWidgetProps {
     brandColor: string; // color used for confirmation buttons
     highlightColor: string; // color used when hovering over buttons, and in select chain/asset dropdown
   };
+  persistSwapWidgetState?: boolean; // whether or not swap widget state should persist after refresh. Defaults to true
 }
 ````
 

packages/widget/src/hooks/use-swap-widget.ts

@@ -45,12 +45,16 @@ export interface DefaultRouteConfig {
   destAssetDenom?: string;
 }
 
-export function useSwapWidget() {
+export function useSwapWidget(persistSwapWidgetState = true) {
   /**
    * intentional manual hydration to prevent ssr mismatch
    * @see {useSwapWidgetStore}
    */
-  useEffect(() => void useSwapWidgetStore.persist.rehydrate(), []);
+  useEffect(() => {
+    if (persistSwapWidgetState) {
+      useSwapWidgetStore.persist.rehydrate();
+    }
+  }, []);
 
   /////////////////////////////////////////////////////////////////////////////
 

packages/widget/src/ui/PreviewRoute/SetAddressDialog.tsx

@@ -84,7 +84,7 @@ export const SetAddressDialog = ({
       return '0x...';
     }
     if (chainType === 'svm') {
-      return 'Enter solanma address...';
+      return 'Enter solana address...';
     }
     return 'Enter address...';
   }, [chainType, bech32Prefix]);

packages/widget/src/ui/Widget.tsx

@@ -33,12 +33,14 @@ export type SwapWidgetUIProps = Pick<
   'className' | 'style'
 > & {
   toasterProps?: ToasterProps;
+  persistSwapWidgetState?: boolean;
 };
 
 export const SwapWidgetUI = ({
   className,
   style,
   toasterProps,
+  persistSwapWidgetState,
 }: SwapWidgetUIProps) => {
   const theme = useTheme();
   useEffect(() => void disclosure.rehydrate(), []);
@@ -102,7 +104,7 @@ export const SwapWidgetUI = ({
     swapPriceImpactPercent,
     usdDiffPercent,
     shareable,
-  } = useSwapWidget();
+  } = useSwapWidget(persistSwapWidgetState);
 
   const srcAccount = useAccount(sourceChain?.chainID);
 

packages/widget/src/ui/index.tsx

@@ -64,6 +64,7 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
   style,
   filter,
   toasterProps,
+  persistSwapWidgetState,
   ...swapWidgetProviderProps
 }) => {
   useEffect(() => {
@@ -91,6 +92,7 @@ export const SwapWidget: React.FC<SwapWidgetProps> = ({
             className={className}
             style={style}
             toasterProps={toasterProps}
+            persistSwapWidgetState={persistSwapWidgetState}
           />
         </SwapWidgetProvider>
       </ThemeProvider>