diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
index cbe01542..6ffb4dff 100644
--- a/src/components/CountdownTimer/index.tsx
+++ b/src/components/CountdownTimer/index.tsx
@@ -5,7 +5,7 @@ import { Context } from '../../providers/Store';
 const circumference = Math.PI * 20;
 
 const CountdownTimer: React.FC<Props> = () => {
-  const [state] = useContext(Context);
+  const [state, _dispatch, { onExpire }] = useContext(Context);
 
   if (!state.expiration) {
     return null;
@@ -19,6 +19,7 @@ const CountdownTimer: React.FC<Props> = () => {
   const completedPercentage = progressedTime / totalTime;
   const [seconds, setSeconds] = useState(remainingTimeSeconds);
   const [position, setPosition] = useState(0);
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
 
   const countdown = () => {
     if (seconds <= 0) {
@@ -29,14 +30,23 @@ const CountdownTimer: React.FC<Props> = () => {
 
   useEffect(() => {
     countdown();
-    const interval = setInterval(countdown, 1000);
+    setTimer(setInterval(countdown, 1000));
 
-    return () => clearInterval(interval);
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
   }, []);
 
   useEffect(() => {
     const position = circumference - circumference * completedPercentage;
     setPosition(position);
+
+    if (seconds <= 0) {
+      onExpire?.();
+      clearInterval(timer!);
+    }
   }, [seconds]);
 
   const hours = Math.floor(seconds / 3600)
diff --git a/src/index.tsx b/src/index.tsx
index 48e1891f..19db540d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -34,6 +34,7 @@ export interface Map3InitConfig {
         | Promise<{ address: string; memo?: string }>
         | { address: string; memo?: string };
       onClose?: () => void;
+      onExpire?: () => void;
       onFailure?: (
         error: string,
         networkCode: string,
diff --git a/src/preview.tsx b/src/preview.tsx
index cf8200e6..3b25fd5e 100644
--- a/src/preview.tsx
+++ b/src/preview.tsx
@@ -16,10 +16,17 @@ root.render(
             callbacks: {
               onAddressRequested: async () => {
                 return {
-                  address: 'q3cde4tvozni',
-                  memo: '22749',
+                  address: '2Muv9Zzxd9M51mte3JGKk6EJFVTs74HCi15',
                 };
               },
+              onExpire: () => {
+                console.error('Expired');
+              },
+            },
+            selection: {
+              // expiration is now plus 30 seconds
+              expiration: new Date(Date.now() + 30 * 1000).getTime(),
+              rate: 12000,
             },
             style: {
               theme: 'dark',
diff --git a/src/providers/Store/index.tsx b/src/providers/Store/index.tsx
index c5f776f1..ed2cc288 100644
--- a/src/providers/Store/index.tsx
+++ b/src/providers/Store/index.tsx
@@ -297,6 +297,7 @@ export const Store: React.FC<
     handleAuthorizeTransaction,
     handleOrderFeeCalculation,
     onAddressRequested,
+    onExpire,
     onFailure,
     onOrderCreated,
     onSuccess,
@@ -615,6 +616,7 @@ export const Store: React.FC<
           handleAuthorizeTransaction,
           handleOrderFeeCalculation,
           onAddressRequested,
+          onExpire,
           onFailure,
           onOrderCreated,
           onSuccess,
@@ -652,6 +654,7 @@ export const Context = createContext<
       ) =>
         | Promise<{ address: string; memo?: string }>
         | { address: string; memo?: string };
+      onExpire?: () => void;
       onFailure?: (
         error: string,
         networkCode: string,
@@ -675,6 +678,7 @@ export const Context = createContext<
       new Promise((resolve) => resolve({})),
     onAddressRequested: /* istanbul ignore next */ () =>
       new Promise((resolve) => resolve({ address: '' })),
+    onExpire: /* istanbul ignore next */ () => {},
     onFailure: /* istanbul ignore next */ () => {},
     onOrderCreated: /* istanbul ignore next */ () => {},
     onSuccess: /* istanbul ignore next */ () => {},